/**
  * Name: mooooos.com HTML Template
  * Version: 1.0.0
*/
@import "shortcodes.css";
@import "animate.css";
@import "jquery.fancybox.min.css";
@import "swiper-bundle.min.css";
@import "bootstrap.css";
/**
  	* Reset Browsers
    * General
	* Elements
  	* Forms
	* Typography
	* Extra classes
	* link style
	* Root
	* Header
	* Site Logo
    * Menu
    * Header Fixed
    * Pagination
    * Scroll Top
    * Footer
    * Widget
    * PreLoad
    * side bar
    * up load
    * heading 
    * hover 
*/
/* Reset Browsers-------------------------- */
html,
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; font: inherit; vertical-align: baseline; font-family: inherit; font-size: 100%; font-style: inherit; font-weight: inherit;}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section { display: block;}
html { font-size: 62.5%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;}

*,
*:before,
*:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
body { background: var(--background-body); color: var(--primary-color); font-size: 16px; line-height: 1;}
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
nav,
section { display: block;}

ol,
ul { list-style: none;}
table { border-collapse: collapse; border-spacing: 0;}
caption,
th,
td { font-weight: normal; text-align: left;}

blockquote:before,
blockquote:after,
q:before,
q:after { content: ""; content: none;}

blockquote,
q { quotes: none;}
a img { border: 0;}
img { max-width: 100%; height: auto;}
select { max-width: 100%;}

/* General---------------------- */
body,
button,
input,
select,
textarea { font-family: "DM Sans", sans-serif; font-size: 16px; line-height: 24px; font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; overflow-y: auto;}

img { height: auto; max-width: 100%; vertical-align: middle; -ms-interpolation-mode: bicubic;}
.text-p,p { font-weight: 400;}

strong,
b,
cite { font-weight: bold;}
dfn,
cite,
em,
i,
blockquote { font-style: italic;}
abbr,
acronym { border-bottom: 1px dotted #e0e0e0; cursor: help;}

mark,
ins { text-decoration: none;}
sup,sub { font-size: 75%; height: 0; line-height: 0; position: relative; vertical-align: baseline;}
small { font-size: 75%;}
big { font-size: 125%;}
address { font-style: italic; margin: 0 0 20px;}

code,
kbd,
tt,
var,
samp,
pre { margin: 20px 0; padding: 4px 12px; background: #f5f5f5; border: 1px solid #e0e0e0; overflow-x: auto; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; border-radius: 0; height: auto;}

/* Elements---------------------- */
tml { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
*,
*:before,
*:after { -webkit-box-sizing: inherit; -moz-box-sizing: inherit; box-sizing: inherit;}
hr { margin-bottom: 20px; border: dashed 1px #ccc;}

/* List */
ul,
ol { padding: 0;}
ul { list-style: disc;}
ol { list-style: decimal;}
li > ul,
li > ol { margin-bottom: 0;}
li { list-style: none;}
ul li,
ol li { padding: 0.1em 0;}
dl,
dd { margin: 0 0 20px;}
dt { font-weight: bold;}
del,
.disable { text-decoration: line-through; filter: alpha(opacity=50); opacity: 0.5;}
/* Table */
table,
th,
td { border: 1px solid #343444;}
table { border-collapse: separate; border-spacing: 0; border-width: 1px 0 0 1px; margin: 0 0 30px; table-layout: fixed; width: 100%;}
caption,
th,
td { font-weight: normal; text-align: left;}
th { border-width: 0 1px 1px 0; font-weight: bold;}
td { border-width: 0 1px 1px 0;}
th,
td { padding: 8px 12px;}

/* Media */
embed,
object,
video { margin-bottom: 20px; max-width: 100%; vertical-align: middle;}
p > embed,
p > iframe,
p > object,
p > video { margin-bottom: 0;}

/* Forms---------------------- */
/* Fixes */
button,
input { line-height: normal;}

button,
input,
select,
textarea { font-size: 100%; line-height: inherit; margin: 0; vertical-align: baseline;}

input,
textarea,
select { font-size: 13px; max-width: 100%; background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0));}
textarea { overflow: auto; vertical-align: top; height: 138px;}
input[type=checkbox] { display: inline;}
button,
input[type=button],
input[type=reset],
input[type=submit] { line-height: 1; cursor: pointer; -webkit-appearance: button; border: 0;}

input[type=checkbox],
input[type=radio] { padding: 0; width: 14px; height: 17px; margin-right: 6px;
  cursor: pointer; vertical-align: sub;  /* Addresses excess padding in IE8/9 */
}
input[type=search] { -webkit-appearance: textfield;}
input[type=search]::-webkit-search-decoration { -webkit-appearance: none;}

button::-moz-focus-inner,
input::-moz-focus-inner { border: 0; padding: 0;}

/* Remove chrome yellow autofill */
input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px #f7f7f7 inset;}

/* Reset search styling */
input[type=search] { outline: 0;}
input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration { display: none;}

/* Contact Form 7 */
.wpcf7-form select,
.wpcf7-form textarea,
.wpcf7-form input { margin-bottom: 0;}

select { -webkit-appearance: none; -moz-appearance: none; appearance: none; -ms-appearance: none;}
.select { position: relative; overflow: hidden;}
.select ::after { font-size: 14px; right: 10px; font-weight: 600; color: #1F1F2C; display: block; position: absolute; background: 0 0; top: 50%; pointer-events: none; -webkit-transition: 0.25s all ease; -o-transition: 0.25s all ease; transition: 0.25s all ease; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
select option { font-size: 15px; line-height: 24px; color: #1F1F2C;}

textarea,
input[type=text],
input[type=password],
input[type=datetime],
input[type=datetime-local],
input[type=date],
input[type=month],
input[type=time],
input[type=week],
input[type=number],
input[type=email],
input[type=url],
input[type=search],
input[type=tel],
input[type=color] { border: 1px solid var(--primary-color21); outline: 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; font-size: 18px; line-height: 26px; border-radius: 4px; padding: 15px; width: 100%; background-color: transparent; color: var(--primary-color2);}

/* Input focus */
textarea:focus,
input[type=text]:focus,
input[type=password]:focus,
input[type=datetime]:focus,
input[type=datetime-local]:focus,
input[type=date]:focus,
input[type=month]:focus,
input[type=time]:focus,
input[type=week]:focus,
input[type=number]:focus,
input[type=email]:focus,
input[type=url]:focus,
input[type=search]:focus,
input[type=tel]:focus,
input[type=color]:focus { border: 1px solid #8A8AA0; outline: 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;}

textarea::placeholder,
input[type=text]::placeholder,
input[type=password]::placeholder,
input[type=datetime]::placeholder,
input[type=datetime-local]::placeholder,
input[type=date]::placeholder,
input[type=month]::placeholder,
input[type=time]::placeholder,
input[type=week]::placeholder,
input[type=number]::placeholder,
input[type=email]::placeholder,
input[type=url]::placeholder,
input[type=search]::placeholder,
input[type=tel]::placeholder,
input[type=color]::placeholder { font-size: 18px; font-weight: 400; line-height: 26px; color: var(--primary-color2);}

/* Button */
button,
input[type=button],
input[type=reset],
input[type=submit] { font-weight: 700; font-size: 16px; line-height: 24px; background-color: #3749E9; color: #fff; border-radius: 9px; padding: 7px 30px; display: inline-block; -webkit-appearance: none; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;}
button:focus, button:hover,
input[type=button]:focus,
input[type=button]:hover,
input[type=reset]:focus,
input[type=reset]:hover,
input[type=submit]:focus,
input[type=submit]:hover { outline: 0; background: #3749E9; color: #fff;}

/* Placeholder color */
::-webkit-input-placeholder { color: var(--primary-color2);}
:-moz-placeholder { color: var(--primary-color2);}
::-moz-placeholder { color: var(--primary-color2); opacity: 1;}
.error { font-size: 16px; color: red; margin-bottom: 10px; -webkit-transition: all ease 0.3s; -moz-transition: all ease 0.3s; transition: all ease 0.3s;}

/* Since F19 lowers the opacity of the placeholder by default */
:-ms-input-placeholder { color: var(--primary-color2);}

/* Typography---------------------- */
h1,
h2,
h3,
h4,
h5,
h6 { font-weight: 700; text-rendering: optimizeLegibility;}
h1 { font-size: 42px; line-height: 60px;}
h2 { font-size: 26px; line-height: 30px;}
h3 { font-size: 21px; line-height: 46px;}
h4 { font-size: 20px; line-height: 44px;}
h5 { font-size: 24px; line-height: 42px;}
h6 { font-size: 18px; line-height: 32px;}
.text-normal{font-size: 13px;}

/* Extra classes---------------------- */
svg { vertical-align: middle;}
.svg-icon {flex-shrink: 0; line-height: 0; margin-right: 0.5rem;}
.radiusx{ border-radius: 50%;}
.radius15{ border-radius: 15px;}
.msg-success { background: linear-gradient(to right, #E250E5, #4B50E6, #E250E5); background-clip: text; -webkit-background-clip: text; font-weight: 700; background-size: 200% 200%; animation: rainbow 2s ease-in-out infinite; color: rgba(0, 0, 0, 0); transition: color 0.2s ease-in-out; font-size: 18px; font-weight: 400; line-height: 28px;}

label.error { color: red;}
.label-warning { background-color: #f39c12;}
.label-info { background-color: #31bdec;}
.label { display: inline; padding: .2em .6em .3em; font-size: 75%; font-weight: bold; line-height: 1; color: #fff; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: .25em;}

.swiper-container{ width: 100%; }
.swiper-wrapper { width: 50%; }
.swiper-slide { text-align: center; width: auto; }
.slide-image { height: 400px; width: auto; }
.swiper-button-prev,
.swiper-button-next { width: 50px; height: 50px; top: 45%;}
@media only screen and (max-width: 767px) {
  .swiper-button-prev,.swiper-button-next { display: none; }
}
.swiper-button-next { right: -2px;}
.swiper-button-prev { left: -2px;}
.swiper-button-next:after,
.swiper-button-prev:after { }
.swiper-button-next:after { color: #3749e9; border: 1.5px solid #ffffff0d; border-radius: 50%; display: flex; align-items: center; justify-content: center; width: 0; height: 0; font-size: 42px; font-weight:600; border-width: 40px; border-style: solid;}
.swiper-button-prev:after {	color: #3749e9;	margin-left: 0px; border-radius: 50%; display: flex; align-items: center; justify-content: center; width: 0;  height: 0; font-size: 42px; font-weight:600; border-width: 40px; border-style: solid; border-color: #ffffff0d;}
.swiper-pagination-bullets { position: relative; margin-top: 13px; display: flex; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; justify-content: center; justify-items: center; padding-left: 15px;}
.swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 11px 0 5px; border: 1px solid var(--primary-color5); background: transparent; width: 8px; height: 8px; position: relative; opacity: 1;}
.swiper-pagination-bullets .swiper-pagination-bullet-active { background: var(--primary-color7);}
.swiper-pagination-bullets .swiper-pagination-bullet-active::before { position: absolute; transform: translate(-50%, -50%); top: 50%; left: 50%; border-radius: 50%; content: ""; width: 16px; height: 16px; border: 1px solid var(--primary-color5); overflow: visible;}

.mb90 { margin-bottom: 90px;}
.mb63 { margin-bottom: 63px;}
.mb44 { margin-bottom: 44px;}
.mb40 { margin-bottom: 40px;}
.mb30 { margin-bottom: 30px;}
.mb28 { margin-bottom: 28px;}
.mb26 { margin-bottom: 26px;}
.mb24 { margin-bottom: 24px;}
.mb23 { margin-bottom: 23px;}
.mb22 { margin-bottom: 22px;}
.mb16 { margin-bottom: 16px;}
.mt8 { margin-top: 8px;}
.mt6 { margin-top: 6px;}
.mt17 { margin-top: 17px;}
.mt12 { margin-top: 12px;}
.mt10 { margin-top: 10px;}
.mt24 { margin-top: 24px;}
.mt30 { margin-top: 30px;}
.mt40 { margin-top: 40px;}
.mt50 { margin-top: 50px;}
.mt96 { margin-top: 96px;}
.mt100 { margin-top: 100px;}
.mr10 { margin-right: 10px;}
.mlr36 { margin-left: 36px;  margin-right: 36px;}
.pt10 { padding-top: 10px;}
.pl30 { padding-left: 30px;}
.pt30 { padding-top: 30px;}
.ptb50 { padding-top: 50px; padding-bottom: 50px;}
.pb20 { padding-bottom: 20px;}
.pb60 { padding-bottom: 60px;}
.lh2 { line-height:2em;}
.visible { overflow: visible !important;}
.xieyi {margin-top: 20px;font-size:14px;}
.imgwh {width: 100%; height: 100%; background-size: 100% 100%; background-repeat: no-repeat;}
.shadow-1 {box-shadow: 0px 7px 40px rgb(5 34 52 / 6%);}
.shadow { box-shadow: 0 .5rem 1rem rgba(0,0,0,.10)!important;}
.img250 {height: 250px; overflow: hidden;}
.img400 {height: 400px; overflow: hidden;}
.white-color { color: var(--primary-color6);}
.white-bg { background: #fff;}
.bg-gray { background: var(--bg-gray);}
.tcolor{ background: var(--primary-color51);}
.mcolor{ background-color: var(--primary-color6);}
.widthx{ width:100%;}
.widthh{ width:57%;}
.widths{ width:43%;}
.vertical-middle { align-items: center;}
.center{ text-align: center;white-space: nowrap;vertical-align: middle;}
.line { display: flex; flex: 1; border-bottom: 1px solid var(--primary-color13);}
.suolue { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 90%;}
.rounded-pill {border-radius: 50rem!important;}
.bigbor{ border: 10px solid #ffffff52;}
/* link style---------------------- */
a { text-decoration: none; color: var(--primary-color5); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;}
a:hover, a:focus { color: var(--primary-color3); text-decoration: none; outline: 0; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;}

@keyframes rainbow {
	0% { background-position: left; }
  50% { background-position: right; }
  100% { background-position: left; }
}
/* Root---------------------- */
:root {
  /* color */
  --background-body: #ececed;
  --primary-color: #565660;
  --primary-color2: rgba(86, 86, 96, 0.6);
  --primary-color3: #3749E9;
  --primary-color4: #E5E5E5;
  --primary-color5: #3e3e3e;
  --primary-color6: #fff;
  --primary-color7: #565660;
  --primary-color8: #565660;
  --primary-color9: #F7F7F7;
  --primary-color10: #B9B8BB;
  --primary-color11: #ededed;
  --primary-color12: rgba(229, 229, 229, 0.5);
  --primary-color13: rgba(55, 73, 233, 0.1);
  --primary-color14: #3749E9;
  --primary-color15: #f7f7f7;
  --primary-color16: #191820;
  --primary-color17: #E5E5E5;
  --primary-color18: #565660;
  --primary-color19: #565660;
  --primary-color20: #191820;
  --primary-color21: #E5E5E5;
  --primary-color22: #F7F7F7;
  --primary-color23: rgba(86, 86, 96, 0.8);
  --primary-color24: rgba(55, 73, 233, 0.1);
  --primary-color25: rgba(55, 73, 233, 0.1);
  --primary-color26: #48BC65;
  --primary-color27:#fff;
  --primary-color28:#B9B9BF;
  --primary-color29:#F7F7F7;
  --primary-color30:#565660;
  --primary-color31: #B9B8BB;
  --primary-color32: #CCD2E3;
  --primary-color33: #3749E9;
  --primary-color34: #B9B8BB;
  --primary-color35:rgba(55, 73, 233, 0.1);
  --primary-color36: #E5E5E5;
  --primary-color37: #191820;
  --primary-color38: #E5E5E5;
  --primary-color39:#F7F7F7;
  --primary-color40: rgba(55, 73, 233, 0.1);
  --primary-color41: #F7F7F7;
  --primary-color42: #CFDBD5;
  --primary-color43: #3749E9;
  --primary-color44: #fff;
  --primary-color45: rgba(55, 73, 233, 0.1);
  --primary-color46: rgba(86, 86, 96,0.1);
  --primary-color47: #E5E5E5;
  --primary-color48: #3749E9;
  --primary-color49: #BBBAC2;
  --primary-color50: linear-gradient(141.18deg, rgba(0, 0, 0, 0) -1.4%, rgba(0, 0, 0, 0.0568) -1.38%, rgba(0, 0, 0, 0.0096) 113.47%);
  --primary-color51: linear-gradient(180deg,#ffffff 0,#d1b35f 70%);
  --primary-color52:transparent;
  --product-color1: #E33B3B;
  --product-color2: #E5E5E5;
  --product-color3: #B9B8BB;
  --product-color4: #ffffffe6;
  --product-color5: #B9B8BB;
  --product-color6: #E5E5E5;
  --product-color7: #fff;
  --product-color8: #fff;
  --product-color9: rgba(86, 86, 96, 0.8);
  --product-color10: transparent;
  --product-color11: #E5E5E5;
  --product-color12: #B9B9BF;
  --product-color13: #fff;
  --product-color14: #fff;
  --product-color15: #E5E5E5;
  --product-color16: transparent;
  --product-color17: transparent;
  --product-color18: #E5E5E5;
  --product-color19: rgba(55, 73, 233, 0.1);
  --bg-gray: #f1f3f5;
  --heading-color: #000;
  --main-color: #31b13a;
  --bg-gradient: linear-gradient(45deg,#02ebad 0,#5a57fb 60%);
  --red-jianbian: linear-gradient(45deg,#ff0000fc 0,#8d0b0b 60%);
}

.is_dark {
  --background-body: #191820;
  --primary-color: rgb(247, 247, 247,0.8);
  --primary-color2: #8A8AA0;
  --primary-color3: #3749E9;
  --primary-color4: #28303F;
  --primary-color5: #fff;
  --primary-color6: #1F1F2C;
  --primary-color7: #fff;
  --primary-color8: #B9B8BB;
  --primary-color9: rgba(86, 86, 96, 0.1);
  --primary-color10: #565660;
  --primary-color11: #28303F;
  --primary-color12: rgba(229, 229, 229, 0.5);
  --primary-color13: rgba(55, 73, 233, 0.2);
  --primary-color14: #fff;
  --primary-color15: #1F1F2C;
  --primary-color16: #F7F7F7;
  --primary-color17: rgba(40, 48, 63, 0.6);
  --primary-color18: #F7F7F7;
  --primary-color19: #EBEBEB;
  --primary-color20: #EBEBEB;
  --primary-color21: #28303F;
  --primary-color22: #101016;
  --primary-color23: #EBEBEB;
  --primary-color24: rgba(0, 0, 0, 0);
  --primary-color25: #3749E9;
  --primary-color26: #3749E9;
  --primary-color27:#2B3F6C;
  --primary-color28:#fff;
  --primary-color29:rgba(255, 255, 255, 0.3);
  --primary-color30:#A9A9C2;
  --primary-color31: #F7F7F7;
  --primary-color32: #565660;
  --primary-color33: #1F1F2C;
  --primary-color34: #28303F;
  --primary-color35:#1F1F2C;
  --primary-color36: #565660;
  --primary-color37: #B9B8BB;
  --primary-color38: #3749E9;
  --primary-color39:rgba(255, 255, 255, 0.1);
  --primary-color40: rgba(255, 255, 255, 0.1);
  --primary-color41: transparent;
  --primary-color42: #CFDBD5;
  --primary-color43: #565660;
  --primary-color44: rgba(255, 255, 255, 0.1);
  --primary-color45: rgba(235, 240, 240, 0.1);
  --primary-color46: #565660;
  --primary-color47: rgba(86, 86, 96, 0.2);
  --primary-color48: #555ABE;
  --primary-color49: #B9B8BB;
  --primary-color50: linear-gradient(141.18deg, rgba(0, 0, 0, 0) -1.4%, rgba(0, 0, 0, 0.0568) -1.38%, rgba(0, 0, 0, 0.0096) 113.47%);
  --primary-color51:linear-gradient(180deg,#000000 0,#1f1f2c 60%);
  --primary-color52:#3749E9;
  --product-color2: #58555a;
  --product-color4: linear-gradient(156.67deg, rgba(112, 112, 114, 0.4) 0.07%, rgba(100, 97, 113, 0.148) 99.07%);
  --product-color5: #fff;
  --product-color6: #ffffff80;
  --product-color8: #1F1F2C;
  --product-color9: rgba(255, 255, 255, 0.1);
  --product-color10: rgba(255, 255, 255, 0.1);
  --product-color11: #56566046;
  --product-color12: #B9B8BB;
  --product-color13: #292831;
  --product-color14: #565660;
  --product-color15: transparent;
  --product-color16: #3749E9;
  --product-color17: #1F1F2C;
  --product-color18: rgba(207, 219, 213, 0.15);
  --product-color19: rgba(255, 255, 255, 0.1);
}

#page {  overflow: visible;}

/* Header---------------------- */
header { border-bottom: 1px solid var(--primary-color4); padding-right: 0 !important; box-shadow: 0 8px 25px 0 rgb(0 0 0 / 4%);}
header #site-header-inner { display: flex; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; align-items: center; justify-content: left;}
header #site-header-inner #site-logo { flex-shrink: 0; padding-right: 25px; padding-left: 25px;}
header #site-header-inner #main-nav { flex-shrink: 1;}
header #site-header-inner .header-right { margin-left: auto; display: inline-flex; padding-right: 25px;}
header #site-header-inner .header-right .tf-button, header #site-header-inner .header-right .user, header #site-header-inner .header-right .mode-switch { margin-right: 8px;}
header #site-header-inner .header-right .user, header #site-header-inner .header-right .mode-switch { width: 48px; height: 48px; line-height: 42px; text-align: center; background-color: var(--primary-color6); border: 1px solid var(--primary-color4); border-radius: 50%; display: inline-block;}
header #site-header-inner .header-right .user { display: inline-flex; align-items: center; justify-content: center;}
header #site-header-inner .header-right .user svg path { fill: var(--primary-color8);}
header #site-header-inner .header-right .mode-switch { margin-right: 0;}
header #site-header-inner .header-right .tf-button { padding: 10px 28px 10px 28px; font-weight: 700; font-size: 16px;}
header.absolute { position: relative; width: 100%; z-index: 100;}

.header-fixed .header .tf-container{ width: 1830px;}
.tf-container { position: relative; margin-left: auto; margin-right: auto; padding-right: 15px; padding-left: 15px; width: 1440px; max-width: 100%;}
.container-fluid { width: 100%; padding-right: 15px; padding-left: 15px; margin-right: auto;  margin-left: auto;}
.sub-title { text-transform: uppercase; color: var(--color-primary); font-weight: 900; background: var(--bg-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; position: relative;    z-index: 1; margin-bottom: 10px;}
.red-title { background: var(--red-jianbian); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.content-bottom { padding-bottom: 15px;}
/* Site Logo---------------------- */
/* Main Nav ---------------------- */
#main-nav ul { margin: 0px;}
#main-nav ul li { position: relative; list-style: none;}
#main-nav > ul > li { float: left; padding: 37px 15px 37px 15px;}
#main-nav > ul > li > a { position: relative; font-size: 17px; line-height: 26px; font-weight: 600; display: block; color: var(--primary-color5); padding-right: 15.5px;}
#main-nav > ul > li > a:hover { color: var(--primary-color3);}
#main-nav > .menu > li.menu-item-has-children > a::after {display: inline-block; margin-left: .255em; vertical-align: middle; content: ""; border-top: .3em solid; border-right: .3em solid transparent; border-bottom: 0; border-left: .3em solid transparent;}
/* Sub Menu */
#main-nav .sub-menu { position: absolute; top: 90%; left: 0; width: 250px; background-color: var(--primary-color6); border: 0px solid var(--primary-color15); border-radius: 8px; box-shadow: 5px 5px 25px 5px rgb(0 0 0 / 12%); z-index: 9999; opacity: 0; visibility: hidden; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; -webkit-transform: translateY(15px); -moz-transform: translateY(15px); -ms-transform: translateY(15px); -o-transform: translateY(15px); transform: translateY(15px);}
#main-nav .sub-menu .sub-menu { left: 105%; top: 0%; opacity: 0 !important; visibility: hidden;}
#main-nav .sub-menu::before { content: ''; position: absolute; top: -5px; left: 25px; height: 15px; width: 15px; transform: rotate(45deg); background-color: var(--primary-color6);}
#main-nav .sub-menu .sub-menu::before { display: none;}
#main-nav .sub-menu li:not(:last-child) a { border-bottom: 1px solid var(--primary-color4);}
#main-nav .sub-menu li a { display: block; font-weight: 400; font-size: 15px; line-height: 24px; color: var(--primary-color5); padding: 15px;}
#main-nav .right-sub-menu { left: auto; right: 0;}
#main-nav > ul > .current-menu-item .current-menu-item > a,
#main-nav > ul > .current-menu-item > a { color: var(--primary-color3);}
#main-nav li:hover .sub-menu { opacity: 1; visibility: visible; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0);}
#main-nav li .sub-menu li:hover .sub-menu { opacity: 1 !important; visibility: visible;}
#main-nav .sub-menu li.current-item a,
#main-nav .sub-menu li a:hover { color: var(--primary-color3);}
#main-nav > ul > li .sub-menu li { position: relative;}
#main-nav > ul > li .sub-menu li a { transition: all 0.15s linear; -webkit-transition: all 0.15s linear; -moz-transition: all 0.15s linear; -o-transition: all 0.15s linear;}
#main-nav > ul > li .sub-menu li a:hover { padding-left: 35px;}
#main-nav > ul > li .sub-menu li a:hover::after { width: 12px;}
#main-nav > ul > li .sub-menu li a::after { content: ""; position: absolute; width: 0; height: 2px; background: var(--primary-color3); left: 15px; top: 50%; transform: translate(0%, -50%); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;}
#main-nav > ul > li .sub-menu li.current-item a { padding-left: 35px;}
#main-nav > ul > li .sub-menu li.current-item a::after { width: 12px;}

/* Mobile Menu */
#main-nav-mobi { display: block; margin: 0 auto; width: 100%; position: absolute; top: 100%; left: 0; z-index: 999999; background-color: var(--primary-color6);}
#main-nav-mobi ul { display: block; list-style: none; margin: 0; padding: 0;}
#main-nav-mobi ul li { margin: 0; text-align: left; cursor: pointer; padding: 0; border-top: 1px solid var(--primary-color4); position: relative;}
#main-nav-mobi ul li:first-child { border-top: 0px;}
#main-nav-mobi ul > li > a { display: inline-block; font-size: 16px; line-height: 48px; padding: 0 15px; font-weight: 600; text-indent: 2em;color: var(--primary-color5); }
#main-nav-mobi ul > li.current-menu-item > a { color: var(--primary-color3);}
#main-nav-mobi .sub-menu .menu-item a { margin-left: 15px;}
#main-nav-mobi ul li > ul > li:first-child { border-top: 1px solid rgba(138, 138, 160, 0.3);}
#main-nav-mobi .current-item > a,
#main-nav-mobi ul > li > a:hover { color: var(--primary-color3);}
#main-nav-mobi .menu-item-has-children .arrow { cursor: pointer; display: inline-block; font-size: 20px; font-family: "FontAwesome"; line-height: 48px; position: absolute; right: 15px; text-align: center; top: 0; width: 48px;}
#main-nav-mobi .menu-item-has-children .arrow::before { display: inline-block; margin-left: .255em; vertical-align: middle; content: ""; color: var(--primary-color2); border-top: .3em solid; border-right: .3em solid transparent; border-bottom: 0; border-left: .3em solid transparent;}
#main-nav-mobi .menu-item-has-children.current-menu-item .arrow:before { color: var(--primary-color3);}
#main-nav-mobi .menu-item-has-children.current-menu-item .arrow:before { background: var(--primary-color3); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
#main-nav-mobi .menu-item-has-children .arrow.active { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg);
  -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;}
#main-nav-mobi .menu-item-has-children .arrow.active:before { display: inline-block; margin-left: .255em; vertical-align: middle; content: ""; color: var(--primary-color2); border-top: .3em solid; border-right: .3em solid transparent; border-bottom: 0; border-left: .3em solid transparent;}
#main-nav-mobi ul ul li { background-color: var(--primary-color6); border-top: 1px solid var(--primary-color4);}

.media-heading {margin-top: -3px;}
.entry-box .media-left { padding-right: 20px; margin-top: -10px;}
.media-left, .media-right, .media-body { display: table-cell; vertical-align: top;}
.entry-box .media-extend { margin-top: 7px;}
.entry-box .media-content { margin-top: 4px; color: #a1a0a0; font-size: 14px; word-break: break-all;}

.sub-san{ position: relative; top: 11px; left: 40px; height: 20px; width: 20px; transform: rotate(45deg); background-color: var(--primary-color15);}
.page__title-2 { font-size: 50px; line-height: 1.09; color: #0d0b33; font-weight: 800; margin-bottom: 12px;}
.support__item { padding: 50px; -webkit-border-radius: 10px;  -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: 0 30px 70px 0 rgb(8 0 42 / 10%); -moz-box-shadow: 0 30px 70px 0 rgba(8,0,42,0.1);  box-shadow: 0 30px 70px 0 rgb(8 0 42 / 10%);}
.section-center-heading {text-align: center; margin-bottom: 45px;}
.best-card { display: flex; margin: 0 15px 50px 0;}
.best-icon i { width: 45px; height: 45px; line-height: 45px; text-align: center; border-radius: 50%; background: var(--chalk); color: var(--heading); font-size: 18px;  margin-right: 25px; transition: all linear .3s; -webkit-transition: all linear .3s;  -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s;}
.best-content h4 { text-transform: capitalize; margin-bottom: 15px;}

.pricing-style-one { padding: 16px 36px 16px 36px; background: var(--primary-color15); border-radius: 20px;}
.pricing-style-one .left { width: 50%; border-right: 1px solid rgba(255,255,255,0.3); margin-right: 30px; padding-right: 30px;}
.pricing-style-one.active h4 { color: var(--white);}
.pricing-style-one h4 { font-weight: 900;}

.skill-items { width:100%;}
.skill-items h2{ font-size: 21px;}
.skill-items .progress-box { margin-bottom: 15px;}
.skill-items .progress-box h5 { font-weight: 700; margin-bottom: 0px; text-align: left; position: relative; z-index: 1; font-size: 14px;}
.skill-items .progress-box .progress { background: transparent; border-bottom: 2px solid #cfc8c8; box-shadow: inherit; border-radius: inherit; overflow: inherit;}
.skill-items .progress-box .progress .progress-bar { height: 6px; background: var(--bg-gradient); top: 4px; position: relative; overflow: inherit; border-radius: 30px;}
.skill-items .progress-box .progress .progress-bar span { position: absolute; right: 0; top: -30px; display: block; font-size: 16px; color: var(--primary-color43); font-weight: 700;}

.pricing-style-one span { display: block;font-size:12px; color:var(--primary-color2);}
.pricing-style-one.active span { color: var(--white); opacity: .9;}
.pricing-style-one:first-child .btn { color: var(--color-heading); border-color: #e7e7e7;}

.btn-sm.btn-border, .btn-sm.btn-light { padding: 14px 45px;}
.btn.circle {border-radius: 30px!important;}
.btn.btn-border { border: 2px solid #ddd; background: transparent;  position: relative;  z-index: 1; overflow: hidden; font-weight: 800;}
.btn.btn-border.light::after { background: var(--color-primary);}
.btn.btn-border::after { position: absolute;  top: inherit; right: inherit; bottom: inherit; left: -5%; content: "";  height: 150px; width: 115%;  z-index: -1; background-color: var(--dark);  -webkit-transition: all .25s ease-in-out; transition: all .25s ease-in-out; -webkit-transform: translateY(-45%) skew(25deg) scale(0); transform: translateY(-45%) skew(25deg) scale(0);}

.prod-details__specifications .specifications { margin-bottom: 20px;}
.prod-details__specifications .specifications .specifications__item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 15px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;}
.prod-details__specifications .specifications .specifications__item .prop { width: auto; max-width: 50%;}
.prod-details__specifications .specifications .specifications__item .prop span {color: var(--color-primary6);  font-size: 14px;}
.prod-details__specifications .specifications .specifications__item .dots { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; border-bottom: 1px dashed rgb(163 163 163 / 30%); height: 17px; margin: 0 5px;}
.prod-details__specifications .specifications .specifications__item .val { width: auto;}
.prod-details__specifications .specifications .specifications__item .val span { color: var(--color-primary); font-size: 14px; display: block; text-align: right;}

.widget-brochure ul { padding-left: 0; list-style: none;}
.widget-brochure ul li a:hover { background: var(--primary-color); border-color: transparent; color: var(--primary-color27);}
.widget-brochure ul li a { display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-top: 24px; background: var(--primary-color15); padding: 16px 25px; border-radius: 20px; border: 2px solid var(--bg-gradient); color: var(--bg-gradient);}
.widget-brochure ul li i { font-size: 35px; font-weight: 100; margin-right: 16px; display: inline-block; text-align: center; border-radius: 50%; -webkit-transition: all .35s ease-in-out; transition: all .35s ease-in-out;}

.pricing-style-one.active { background: var(--bg-gradient);}
.pricing-style-one:first-child { margin-top: 0;}

sup {top: -.7em;}
sub, sup { position: relative; font-size: .65em; line-height: 0; vertical-align: baseline;}
.down_info .price_box { border-radius: 10px; background-color: #eee;}
.down_info .price_top { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; position: relative;}
.down_info .price_top_left { padding: 38px 45px 32px 45px; width: 50%; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; -o-flex-direction: column; flex-direction: column; justify-content: space-between;}
.down_info .price_top_right { padding: 38px 45px 32px 45px; width: 50%; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; -o-flex-direction: column; flex-direction: column; justify-content: space-between;}
.down_info .price_box h2{font-size: 36px; color:#fff;}
.down_info .price_box h3{font-size: 26px; color:#fff;}
.down_info .price_top .fn_desc { margin: 0; padding: 0; font-size: 14px; color: #fff; font-weight: 500; text-transform: uppercase; margin-bottom: 12px;}
.down_info .price_top .fn_title { margin: 0; padding: 0; font-size: 36px; margin-bottom: 2px;}
.down_info .price_top_right .fn_title {font-size: 18px;}
.down_info .price_top .fn_title { margin: 0; padding: 0; font-size: 36px; margin-bottom: 2px;}
.down_info .price_top .fn_desc2 { padding: 10px 0px 0px; font-size: 12px; color: #ffffff78;}
.down_info .price_top:after { left: 50%; margin-left: -0.5px;  background-color: #dddddd7a; content: '';  position: absolute; top: 0; bottom: 0; width: 1px;}
.down_info .price_box { border-radius: 20px;  background: var(--bg-gradient); -webkit-box-shadow: 0 2px 4px 0 rgb(0 0 0 / 8%);  box-shadow: 0 2px 4px 0 rgb(0 0 0 / 8%);}
.down_info .price_bottom { border-top: 1px solid #dddddd7a;  padding: 30px 30px 30px 30px; display: -webkit-flex;  display: -moz-flex; display: -ms-flex;  display: -o-flex; display: flex; -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; -o-flex-direction: row; flex-direction: row; flex-wrap: wrap; -ms-align-items: center; align-items: center;}
.down_info .price_bottom a { margin-right: 10px;  margin-bottom: 10px; padding: 0 33px;}
.down_info_button { width: fit-content;  line-height: 50px; text-decoration: none; letter-spacing: 0; padding: 0 40px; color: #fff; font-size: 16px; font-weight: 500; border-radius: 30px; text-align: center; overflow: hidden;  cursor: pointer; display: block; position: relative; white-space: nowrap; z-index: 2;  transition: all .4s cubic-bezier(0.42,0,0.58,1);}
.down_info_button:before { display: block; position: absolute; top: 0; right: 0; height: 100%; width: 0; z-index: -1;  content: '';  background: var(--main-color);  transition: all .4s cubic-bezier(0.42,0,0.58,1); border-radius: 20px;}
.down_info_button:after { content: "";  position: absolute; top: 0; left: 0; right: 0; bottom: 0;  border-radius: 30px; z-index: -1; -webkit-transition: all .4s ease .4s;  -moz-transition: all .4s ease .4s; -o-transition: all .4s ease .4s; transition: all .4s ease .4s;}

.fa-boxes:before { content: "\f468";}
.single-banner { background-color: var(--primary-color49); background-repeat: no-repeat; background-position: center; background-size: cover; padding: 60px 0; position: relative; z-index: 1;}
.single-content h2 { color: var(--white); text-transform: uppercase; margin-bottom: 13px;}
.single-content .breadcrumb { justify-content: center;}

.tabs-wrapper .tabs-group { position: relative; overflow-y: hidden;}
.tabs-wrapper .tabs-group .title { float: left; padding: 10px 0; width: 80px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-wrap: normal;}
.tabs-wrapper .tabs-group .content { list-style: none;  padding: 0; margin: 0 0 0 60px;}
.tabs-wrapper .tabs-group .content > li { float: left; padding: 5px 12px;}
.tabs-wrapper .tabs-group .content > li > a { display: block; padding: 5px 10px; border: none; -webkit-border-radius: 4px; -webkit-background-clip: padding-box; -moz-border-radius: 4px; -moz-background-clip: padding; border-radius: 4px; background-clip: padding-box; color: #828a92; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;}
.tabs-wrapper .tabs-group .content > li.active > a,
.tabs-wrapper .tabs-group .content > li:focus > a,
.tabs-wrapper .tabs-group .content > li:hover > a { color: #007bff;}
.tabs-wrapper .tabs-group .tabs-toggle { position: absolute; right: 20px; top: 18px; font-size: 12px; line-height: 1; cursor: pointer;}

/* Mobile Menu Button */
.mobile-button { display: none; position: absolute; width: 26px; height: 26px; float: right; top: 50%; right: 32px; background-color: transparent; cursor: pointer; -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%);  -o-transform: translateY(-50%); transform: translateY(-50%);}
.mobile-button::before, .mobile-button::after,
.mobile-button span { background-color: var(--primary-color2); -webkit-transition: all ease 0.3s; -moz-transition: all ease 0.3s; transition: all ease 0.3s;}
.mobile-button::before, .mobile-button::after { content: ""; position: absolute; top: 0; height: 3px; width: 100%; left: 0; top: 50%; -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%;}
.mobile-button span { position: absolute; width: 100%; height: 3px; left: 0; top: 50%; overflow: hidden; text-indent: 200%;}
.mobile-button::before { -webkit-transform: translate3d(0, -7px, 0); -moz-transform: translate3d(0, -7px, 0); transform: translate3d(0, -7px, 0);}
.mobile-button::after { -webkit-transform: translate3d(0, 7px, 0); -moz-transform: translate3d(0, 7px, 0); transform: translate3d(0, 7px, 0);}
.mobile-button.active span { opacity: 0;}
.mobile-button.active::before { -webkit-transform: rotate3d(0, 0, 1, 45deg); -moz-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg);}
.mobile-button.active::after { -webkit-transform: rotate3d(0, 0, 1, -45deg); -moz-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg);}

.tf-button-submit:hover { opacity: 0.9; color: #fff;}
.is_dark .tf-button-submit:hover { color: #fff;}

/* Header Fixed */
.header.is-fixed { position: fixed; top: -88px; left: 0; width: 100%; box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.3); z-index: 9999; background: var(--primary-color6); border: none; opacity: 1; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;}
.header.is-fixed.is-small {top: 0;}

.popup-user { display: inline-block; cursor: pointer; margin-right: 8px; position: relative;}
.popup-user .avatar { height: 48px; width: 48px; border: 3px solid var(--primary-color6); border-radius: 50%; -o-object-fit: cover; object-fit: cover;}
.popup-user .avatar_popup { position: absolute; z-index: 100; right: 0; padding: 31px 20px; top: 100%; margin-top: 20px; overflow: hidden; border-radius: 10px; border: 1px solid var(--primary-color15); background: var(--primary-color6); -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; visibility: hidden; opacity: 0; -webkit-transform: translateY(-1rem); transform: translateY(-1rem); font-size: 16px; width: 311px;}
.popup-user .avatar_popup.visible { visibility: visible; opacity: 1; -webkit-transform: translateY(0); transform: translateY(0);}
.popup-user .avatar_popup h6 {  font-size: 20px; line-height: 26px; margin-bottom: 15px; color: var(--primary-color5);}
.popup-user .avatar_popup .title { font-size: 14px; line-height: 22px; margin-bottom: 5px; color: var(--primary-color5);}
.popup-user .avatar_popup .price { margin-bottom: 10px;}
.popup-user .avatar_popup .price .style { font-weight: 700; font-size: 18px; line-height: 26px; color: #5142FC;}
.popup-user .avatar_popup .code { display: flex; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; align-items: flex-start; justify-content: space-between; padding-bottom: 14px; margin-bottom: 20px; border-bottom: 1px solid var(--primary-color4);}
.popup-user .avatar_popup .code p { font-size: 14px; line-height: 22px;}
.popup-user .avatar_popup .code svg path { fill: var(--product-color5);}
.popup-user .avatar_popup .links li { padding: 8px 0;}
.popup-user .avatar_popup .links li:first-child { padding-top: 0;}
.popup-user .avatar_popup .links li:last-child { padding-bottom: 0;}
.popup-user .avatar_popup .links a { display: flex; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; align-items: center; justify-content: left;}
.popup-user .avatar_popup .links a svg { margin-right: 13px;}
.popup-user .avatar_popup .links a svg path { fill: var(--primary-color14);}
.popup-user .avatar_popup .links a span { font-weight: 700; font-size: 15px; line-height: 22px;}

/* Page Title  */
.constage { margin-left: calc((100% - 1416px)/ 2); width: auto; min-width: auto; max-width: inherit; padding-right: 0;}
.tf-page-title { padding: 24px 0 0;}
.tf-page-title.style-2 { padding: 24px 0 15px;}
.tf-page-title .breadcrumbs { width: 100%; display: flex; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; align-items: center; justify-content: left;}
.tf-page-title .breadcrumbs li { font-weight: 700; display: inline-block; padding: 0 24px 0 0px; color: var(--primary-color3);}
.tf-page-title .breadcrumbs li a { font-weight: 500; position: relative; color: var(--primary-color8); padding-right: 2px; font-size: 12px}
.tf-page-title .breadcrumbs li a::after { content: ''; display: inline-block; width: 8px; height: 8px; margin-left: 9px; border-top: 1px solid #656565; border-right: 1px solid #656565; transform: rotate(45deg); -webkit-transform: rotate(45deg);}
.tf-page-title .page-title-heading { color: var(--primary-color5);}
.tf-page-title.style-2 .breadcrumbs { margin-bottom: 0;}

.embed-responsive { height: 100%;}
.titleimg { width:90px;height:90px; border-radius: 50px; overflow: hidden; border: solid 5px #ffffff; background: #FFFFFF; padding: 2px; box-shadow: 0px 7px 0px rgb(5 34 52 / 10%);}
.titleimg img{ width: 100%;height:auto;}
.tishi{ color: #ffffff82; font-size: 12px; text-align: center; white-space: nowrap; vertical-align: middle; display: inline-block; font-weight: normal;}

/* Pagination---------------------- */
.tf-container .pagination { text-align: center; margin-top: 50px; display: flex; flex-direction: row; justify-content: center;}
.pagination ul { position:relative; left:50%; float:left;}
.pagination li { margin-right: 5px; padding: 16px 24px; font-size: 18px; font-weight: 700; line-height: 26px; border-radius: 50px; background-color: var(--primary-color9); border: 2px solid var(--primary-color38);}
.pagination li.active { background-color: var(--primary-color3); color: #fff;}
.pagination li a{padding: 16px 24px;}
.themesflat-pagination ul { margin-left: 2px; position: relative;}
.themesflat-pagination ul li { display: inline-block; margin-right: 6.8px;}
.themesflat-pagination ul li .page-numbers { display: inline-block; font-family: "Open Sans"; font-size: 14px; font-weight: 600; color: #706C83; background: var(--primary-color10); text-align: center; width: 50px; height: 40px; border-radius: 5px; border: 1px solid var(--primary-color6); line-height: 40px; object-fit: cover;}
.themesflat-pagination ul li .page-numbers:hover, .themesflat-pagination ul li .page-numbers.current { background-color: var(--primary-color3); color: #fff; border-color: var(--primary-color3);}

/* Scroll Top---------------------- */
#scroll-top { position: fixed; display: block; width: 50px; height: 50px; line-height: 50px; border-radius: 4px; text-align: center; z-index: 1; right: 14px; bottom: 23px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; opacity: 0; visibility: hidden; cursor: pointer; overflow: hidden;}
#scroll-top.show { right: 15px; opacity: 1; visibility: visible;}
#scroll-top::before, #scroll-top::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;}
#scroll-top::before { z-index: -1; background-color: var(--primary-color3);}
#scroll-top:hover { transform: translateY(-7%);}

.is_dark #scroll-top::before { z-index: -1; background-color: #fff;}
.is_dark #scroll-top::after { color: #5142FC;}

/* Footer---------------------- */
.footer { padding: 60px 0; background-color: var(--primary-color9);}
.footer .widget { margin-top: 60px;}
.footer .widget.widget-infor { padding-right: 10%; margin-top: 0;}
.footer .widget.widget-infor .logo { margin-bottom: 20px;}
.footer .widget.widget-infor .content { margin-bottom: 23px; color: var(--primary-color8);}
.footer .widget.widget-infor .social-item { display: flex; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; margin-bottom: 30px;}
.footer .widget.widget-infor .social-item li { width: 40px; height: 40px; line-height: 36px; text-align: center; background-color: var(--primary-color11); border-radius: 8px; margin-right: 12px;}
.footer .widget.widget-infor .social-item li:last-child { margin-right: 0;}
.footer .widget.widget-infor .copy-right { color: var(--primary-color10); font-size: 14px; line-height: 22px;}
.footer .widget.widget-menu { display: flex; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex;}
.footer .widget.widget-menu .menu ul li { padding-bottom: 11px;}
.footer .widget.widget-menu .menu ul li a { color: var(--primary-color8); font-size: 14px; line-height: 22px;}
.footer .widget.widget-menu .menu ul li a:hover { color: var(--primary-color3);}
.footer .widget.widget-menu .menu ul li:last-child { padding-bottom: 0;}
.footer .widget.widget-menu .menu.menu-1 { margin-left: 15px;}
.footer .widget.widget-menu .menu.menu-2 { margin-left: 61px;}
.footer .widget.widget-menu .menu.menu-3 { margin-left: 60px;}
.footer .widget.widget-menu .menu.menu-4 { margin-left: 63px;}
.footer .widget.widget-subcribe { margin-left: 20px; margin-top: 62px;}
.footer .widget.widget-subcribe .content { margin-bottom: 16px; font-size: 14px; line-height: 22px; color: var(--primary-color8); letter-spacing: -0.2px; padding-right: 5px;}
.footer .widget.widget-subcribe #subscribe-form { position: relative;}
.footer .widget.widget-subcribe #subscribe-form input { border: 1px solid var(--primary-color12); border-radius: 43px; width: 100%; padding: 12px 0px; font-size: 14px; line-height: 22px;text-indent:1em; color: var(--primary-color8);}
.footer .widget.widget-subcribe #subscribe-form input::placeholder { font-size: 14px; color: var(--primary-color8);}
.footer .widget.widget-subcribe #subscribe-form input:focus { border-color: var(--primary-color3);}
.footer .widget.widget-subcribe #subscribe-form .tf-button { top:5px; right: 5px; position: absolute; height: 80%; width: 40px; padding: 0; background-color: #3749E9; border: 1px solid #3749E9; color: #fff; border-radius: 40px;}
.footer .widget .widget-title { font-size: 18px; line-height: 24px; color: var(--primary-color5); margin-bottom: 20px;}

/* PreLoad---------------------- */
.preload { overflow: hidden;}
.preload-container { position: relative; width: 100%; height: 100%; background: #fff; position: fixed; top: 0; bottom: 0; right: 0; left: 0; z-index: 99999999999; display: block; overflow: hidden;}
.preload-logo { position: absolute; top: 50%; left: 50%; width: 400px; height: 400px; z-index: 100; margin: -200px 0 0 -200px; background: #ffffff; background: url(../icon/preload.png) center center no-repeat; animation: preload 1s linear infinite alternate; -webkit-animation-name: bounceIn; animation-name: bounceIn;}

@keyframes spin {
  100% { transform: rotate(360deg); }
}
.p-pricing-widget { background: #3f9b77;  box-shadow: 0 4px 84px rgb(0 0 0 / 6%); border-radius: 8px; text-align: center; padding: 25px 35px 45px;}
.p-pricing-widget .nice-select { background: #3f9b77; border: 0; outline: 0; float: none; display: inline-block;}
.nice-select { -webkit-tap-highlight-color: transparent; background-color: #fff; border-radius: 5px; border: solid 1px #e8e8e8; box-sizing: border-box; clear: both; cursor: pointer; display: block; float: left; font-family: inherit; font-size: 14px; font-weight: normal; height: 42px; line-height: 40px; outline: 0; padding-left: 18px; padding-right: 30px; position: relative; text-align: left!important; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; white-space: nowrap; width: auto;}
.p-pricing-widget .nice-select .current { font-weight: 500; font-size: 18px; line-height: 22px; color: #fff;}
.p-pricing-widget .nice-select .list { border-radius: 4px;  background: #ff2c89;  border: 1px solid rgba(255,255,255,0.3411764706);}
.nice-select .list { background-color: #fff; border-radius: 5px; box-shadow: 0 0 0 1px rgb(68 68 68 / 11%); box-sizing: border-box; margin-top: 4px; opacity: 0; overflow: hidden; padding: 0; pointer-events: none; position: absolute; top: 100%; left: 0; -webkit-transform-origin: 50% 0; -ms-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-transform: scale(0.75) translateY(-21px); -ms-transform: scale(0.75) translateY(-21px); transform: scale(0.75) translateY(-21px); -webkit-transition: all .2s cubic-bezier(0.5,0,0,1.25),opacity .15s ease-out; transition: all .2s cubic-bezier(0.5,0,0,1.25),opacity .15s ease-out; z-index: 9;}
.nice-select .option { cursor: pointer; font-weight: 400; line-height: 40px; list-style: none;  min-height: 40px; outline: 0; padding-left: 18px;  padding-right: 29px; text-align: left; -webkit-transition: all .2s; transition: all .2s;}
.p-pricing-widget .nice-select::after { width: 10px; height: 10px; display: block;  margin-top: -8px; border-color: #fff;}
.nice-select:after { width: 5px; border-bottom: 2px solid #999; border-right: 2px solid #999; content: '';  display: block; height: 5px; margin-top: -4px; pointer-events: none; position: absolute; right: 12px; top: 50%; -webkit-transform-origin: 66% 66%; -ms-transform-origin: 66% 66%; transform-origin: 66% 66%; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: all .15s ease-in-out; transition: all .15s ease-in-out;}
.p-pricing-widget .p-pricing-content .price { font-weight: 600; font-size: 80px; line-height: 100px; color: #fff; margin-bottom: 30px;}
.p-pricing-widget .p-pricing-content .f-list { display: inline-block;  text-align: left; color: #fff; margin-right: -10px; margin-bottom: 30px;}
.p-pricing-widget .p-pricing-content>div.active { display: block;}
.p-pricing-widget .p-pricing-content .f-list { display: inline-block;  text-align: left; color: #fff;  margin-right: -10px;  margin-bottom: 30px;}

.tf-blog {padding: 28px 0 80px 0;}
.tf-blog .tf-blog-item { box-sizing: border-box; padding: 24px 24px 32px 24px; background: #fff; border-radius: 20px; margin-bottom: 30px; border: 1px solid #E5E5E5; font-size: 13px; line-height: 26px;}
.tf-blog .tf-blog-item .image { border-radius: 20px; overflow: hidden; margin-bottom: 28px;}
.tf-blog .tf-blog-item .image img { width: 100%;}
.tf-blog .tf-blog-item .title { margin-bottom: 20px; display: flex; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; align-items: left; justify-content: space-between;}
.tf-blog .tf-blog-item .title .tf-button { padding: 8px 9px; border-radius: 20px; background: #3749E9; color: #fff;}
.tf-blog .tf-blog-item .content { margin-bottom: 20px; font-size: 18px; line-height: 26px;}
.tf-blog .tf-blog-item .meta > span { margin-right: 26px; font-size: 18px; line-height: 26px;}
.tf-blog .tf-blog-item .meta > span i { margin-right: 7px; color: var(--primary-color3);}
.tf-blog .tf-blog-item .meta .admin i { font-size: 15px; margin-left: 2px;}
.tf-blog .tf-blog-item.is_dark { background: linear-gradient(156.67deg, rgba(112, 112, 114, 0.1) 0.07%, rgba(100, 97, 113, 0.037) 99.07%); background: #FFFFFF; border: 1px solid #E5E5E5;}
.tf-blog .tf-blog-item.style-2 { padding: 24px 36px 30px 36px;}
.tf-blog .tf-blog-item.style-2 .title { margin-bottom: 18px;}
.tf-blog .tf-blog-item.style-2 .content { font-size: 16px; line-height: 24px; margin-bottom: 15px;}
.tf-blog .load-more { text-align: center; margin-top: 10px;}
.tf-blog .load-more .tf-button { border-radius: 50px; font-size: 14px; padding: 10px 23px; background-color: var(--primary-color24); border: 1px solid var(--primary-color25); color: var(--primary-color14); font-weight: 700;}
.tf-blog .load-more .tf-button:hover { background-color: #3749E9; border-color: #3749E9; color: #fff;}
.tf-blog .load-more.style-2 { display: block; margin-top: 40px;}
.tf-blog .main-content { margin-right: 50px;}
.tf-blog .side-bar .widget { margin-bottom: 30px; padding: 24px; background-color: var(--primary-color6); border-radius: 16px; border: 1px solid var(--primary-color15);}
.tf-blog .side-bar .widget .widget-title { padding: 16px; background-color: var(--primary-color13); color: var(--primary-color14); margin-bottom: 30px; border-radius: 12px;}
.tf-blog .side-bar .widget:last-child { margin-bottom: 0;}
.tf-blog .side-bar .widget.widget-category li { display: flex; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; padding-bottom: 24px; padding-top: 24px; border-bottom: 1px solid var(--primary-color17);}
.tf-blog .side-bar .widget.widget-category li span { margin-left: auto; color: var(--primary-color16); font-size: 18px; line-height: 26px;}
.tf-blog .side-bar .widget.widget-category li a { font-size: 16px; line-height: 26px; color: var(--primary-color16);}
.tf-blog .side-bar .widget.widget-category li a:hover { color: var(--primary-color3);}
.tf-blog .side-bar .widget.widget-category li:first-child { padding-top: 0;}
.tf-blog .side-bar .widget.widget-category li:last-child { padding-bottom: 0; border: none;}
.tf-blog .side-bar .widget.widget-recent-post li { display: flex; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; padding-bottom: 19px; padding-top: 19px; border-bottom: 1px solid var(--primary-color17);}
.tf-blog .side-bar .widget.widget-recent-post li:first-child { padding-top: 0;}
.tf-blog .side-bar .widget.widget-recent-post li:last-child { padding-bottom: 0; border: none;}
.tf-blog .side-bar .widget.widget-recent-post li .post-img { flex-shrink: 0; border-radius: 8px; overflow: hidden; margin-right: 16px;}
.tf-blog .side-bar .widget.widget-recent-post li .post-img img { border-radius: 8px;}
.tf-blog .side-bar .widget.widget-recent-post li .post-content .title { font-size: 18px; line-height: 26px; margin-bottom: 8px;}
.tf-blog .side-bar .widget.widget-recent-post li .post-content .title a { color: var(--primary-color16);}
.tf-blog .side-bar .widget.widget-recent-post li .post-content .title a:hover { color: var(--primary-color3);}
.tf-blog .side-bar .widget.widget-recent-post li .post-content .post-category { font-size: 14px; line-height: 22px; color: var(--primary-color8);}
.tf-blog .side-bar .widget.widget-tag .widget-title { margin-bottom: 28px;}
.tf-blog .side-bar .widget.widget-tag ul { display: flex; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; flex-wrap: wrap; margin-right: -8px;}
.tf-blog .side-bar .widget.widget-tag ul li { margin-right: 8px; margin-bottom: 11px;}
.tf-blog .side-bar .widget.widget-tag ul li a { padding: 0 11px; border-radius: 20px; display: flex; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; align-items: center; justify-content: center; color: var(--primary-color7); border: 1px solid var(--primary-color4); line-height: 35px; font-weight: 700;}
.tf-blog .side-bar .widget.widget-tag ul li a:hover { background-color: var(--primary-color3); color: #fff;}
.tf-blog .side-bar .widget.widget-tag ul li:nth-child(2) a { padding: 0 20px;}
.tf-blog .side-bar .widget.widget-tag ul li:nth-child(3) a { padding: 0 20px;}
.tf-blog .side-bar .widget.widget-tag ul li:nth-child(4) a { padding: 0 9px;}
.tf-blog .side-bar .widget.widget-tag ul li:nth-child(5) a { padding: 0 19px;}
.tf-blog .side-bar .widget.widget-tag ul li:nth-child(6) a { padding: 0 10px;}
.tf-blog .side-bar .widget.widget-tag ul li:nth-child(7) a { padding: 0 20px;}
.tf-blog .side-bar .widget.widget-tag ul li:nth-child(8) a { padding: 0 20px;}
.tf-blog .side-bar .widget.widget-tag ul li:nth-child(9) { margin-right: 0;}
.tf-blog .side-bar .widget.widget-tag ul li:nth-child(9) a { padding: 0 14px;}
.tf-blog-detail { padding: 28px 0 102px 0;}
.is_dark .tf-blog-item { background: linear-gradient(156.67deg, rgba(112, 112, 114, 0.1) 0.07%, rgba(100, 97, 113, 0.037) 99.07%); border: 1px solid transparent;}

.detail-inner .content-top { text-align: center; margin-bottom: 24px;}
.detail-inner .content-top .title { margin-bottom: 24px; color: var(--primary-color5); padding: 0 40px;}
.detail-inner .content-top .author-infor { display: flex; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; align-items: center; justify-content: center;}
.detail-inner .content-top .author-infor .image { border-radius: 50%; overflow: hidden; margin-bottom: 0; margin-right: 12px;}
.detail-inner .content-top .author-infor span, .detail-inner .content-top .author-infor a { margin-right: 5px;}
.detail-inner .content-top .author-infor a { margin-right: 9px;}
.detail-inner .content-top .author-infor .mr9 { margin-right: 9px;}
.detail-inner .image { margin-bottom: 32px;}
.detail-inner .image.style-2 { margin-right: -20px;}
.detail-inner .image.style-2 img.mr20 { margin-right: 17px;}
.detail-inner .content-inner { margin-bottom: 32px;}
.detail-inner .content-inner .title { margin-bottom: 16px; color: var(--primary-color5);}
.detail-inner .content-inner p { color: var(--primary-color18); font-size: 18px; line-height: 26px;}
.detail-inner .content-bottom { display: flex; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; align-items: center; justify-content: space-between;
  align-items: center; padding-bottom: 38px; margin-top: -7px; border-bottom: 1px solid var(--primary-color21); margin-bottom: 40px;}
.detail-inner .content-bottom .widget { display: flex; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; align-items: center; justify-content: space-between;}
.detail-inner .content-bottom .widget .widget-title { font-size: 18px; line-height: 26px; margin-right: 14px; color: var(--primary-color5);}
.detail-inner .content-bottom .widget ul { display: flex; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex;}
.detail-inner .content-bottom .widget ul li { margin-right: 11px;}
.detail-inner .content-bottom .widget ul li a { color: var(--primary-color19);}
.detail-inner .content-bottom .widget ul li a:hover { color: var(--primary-color3);}
.detail-inner .content-bottom .widget.widget-socical ul li:nth-child(2) a { font-size: 12px;}
.detail-inner .content-bottom .widget.widget-tag ul li { margin-right: 0px;}
.detail-inner .content-bottom .widget.widget-tag ul li a { margin-right: 4px; color: var(--primary-color20);}
.detail-inner .content-bottom .widget.widget-tag ul li a:hover { color: var(--primary-color3);}
.detail-inner .content-bottom .widget.widget-tag ul li:last-child a { margin-right: 0;}
.detail-inner #comments .heading { margin-bottom: 24px;}
.detail-inner #comments .comment-form fieldset { float: left; width: 50%; margin-bottom: 20px;}
.detail-inner #comments .comment-form fieldset.name { padding-right: 10px;}
.detail-inner #comments .comment-form fieldset.email { padding-left: 10px;}
.detail-inner #comments .comment-form fieldset.message { width: 100%; margin-bottom: 23px;}
.detail-inner #comments .comment-form .tf-button { border-radius: 50px; background-color: #3749E9; color: #fff; border: none; padding: 12px 26px;}
.detail-wrap { display: flex; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex;}
.detail-wrap .detail-inner { width: 74.47%; padding-right: 60px;}
.detail-wrap .detail-inner .content-top { text-align: left; margin-bottom: 30px;}
.detail-wrap .detail-inner .content-top .title { padding: 0 0 23px 0; margin-bottom: 17px; border-bottom: 1px solid var(--primary-color21);}
.detail-wrap .detail-inner .content-top .meta-blog { display: flex; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; align-items: center; justify-content: space-between;}
.detail-wrap .detail-inner .content-top .meta-blog .meta.meta-right { display: flex; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; align-items: center; justify-content: space-between;}
.detail-wrap .detail-inner .content-top .meta-blog .meta.meta-right .meta-inner:first-child { padding-right: 24px; border-right: 1px solid var(--primary-color3);}
.detail-wrap .detail-inner .content-top .meta-blog .meta.meta-right .meta-inner:last-child { padding-left: 23px;}
.detail-wrap .detail-inner .content-top .meta-blog .meta h6 {font-size: 16px; line-height: 24px; color: var(--primary-color20);}
.detail-wrap .detail-inner .content-top .meta-blog .meta p {color: var(--primary-color8); font-size: 12px; line-height: 20px;}
.detail-wrap .detail-inner .content-bottom { margin-top: -6px; padding-bottom: 40px;}
.detail-wrap .side-bar { width: 25.53%;}
.detail-wrap .side-bar .widget { padding: 0; background-color: transparent; border: none; margin-bottom: 36px;}
.detail-wrap .side-bar .widget .widget-title { background-color: transparent; padding: 0; color: var(--primary-color5); margin-bottom: 23px;}
.detail-wrap .side-bar .widget.widget-recent-post li { align-items: center; background-color: var(--primary-color22); padding: 10px; border-bottom: none; margin-bottom: 12px; border-radius: 8px;}
.detail-wrap .side-bar .widget.widget-recent-post li:first-child { padding-top: 8px;}
.detail-wrap .side-bar .widget.widget-recent-post li:last-child { margin-bottom: 0; padding-bottom: 12px;}
.detail-wrap .side-bar .widget.widget-recent-post li .post-img { flex-shrink: 0; margin-right: 13px;}
.detail-wrap .side-bar .widget.widget-recent-post li .post-content { width: 86%;}
.detail-wrap .side-bar .widget.widget-recent-post li .post-content .title { font-size: 14px; line-height: 22px; margin-bottom: 4px;}
.detail-wrap .side-bar .widget.widget-recent-post li .post-content .post-meta { display: flex; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; align-items: center; justify-content: space-between;}
.detail-wrap .side-bar .widget.widget-recent-post li .post-content .post-meta span { font-size: 12px; line-height: 20px; color: var(--primary-color23);}
.detail-wrap .side-bar .widget.widget-tag .widget-title { margin-bottom: 24px;}
.detail-wrap .side-bar .widget.widget-tag ul li a { font-size: 14px; line-height: 34px; font-weight: 400; padding: 0 12px; background-color: var(--primary-color22); border: none;}
.detail-wrap .side-bar .widget.widget-tag ul li:nth-child(2) a, .detail-wrap .side-bar .widget.widget-tag ul li:nth-child(3) a { padding: 0 20px;}
.detail-wrap .side-bar .widget.widget-tag ul li:nth-child(4) a { padding: 0 10px;}
.detail-wrap .side-bar .widget.widget-tag ul li:nth-child(9) a { padding: 0 18px;}
.detail-wrap .side-bar .widget.widget-tag ul li:nth-child(6) a { padding: 0 12px;}
/*sourceMappingURL */
#comment-container #commentlist dl {position: relative; border-bottom: 1px solid #eee; clear: both; padding: 10px 0; margin-bottom: 5px;}
#comment-container #commentlist dl dt { float: left; margin-right: 10px; width: 44px; height: 44px; display: block; position: absolute;}
#comment-container #commentlist dl dt img { width: 40px; height: 40px; border-radius: 50%;}
#comment-container #commentlist dl dd { padding-left: 55px; float: left; width: 100%;}
#comment-container #commentlist dl dd cite a { color: #007bff;}
#comment-container #commentlist dl dd small { color: #999; margin: 0 0 0 3px; height: 20px; line-height: 20px; font-size: 10px;}
#comment-container #commentlist dl dd p { margin-top: 5px; margin-bottom: 10px; line-height: 24px; font-size:13px;}
#comment-container #postcomment textarea.form-control { border-radius: 2px; box-shadow: none; border-color: #eeeeee;}