.menu-opened nav.dui-navbar-m,
.site-footer-m ul.footer-social-list img,
html {
    height: 100%
}

body {
    position: relative;
    width: 100%;
    padding-top: 50px;
    overflow-x: hidden;
	font-family: -apple-system, BlinkMacSystemFont, "PingFang SC","Helvetica Neue",STHeiti,"Microsoft Yahei",Tahoma,Simsun,sans-serif;
}

.menu-opened {
    overflow: hidden;
    height: 100%
}

.menu-opened .navbar-header {
    border-bottom: 1px solid #f2f2f2
}

nav.dui-navbar-m.header-opened .control-icon:nth-child(2) {
    opacity: 0
}

nav.dui-navbar-m.header-opened .control-icon:nth-child(1) {
    -webkit-transform: translateY(8px);
    transform: translateY(8px)
}

nav.dui-navbar-m.header-opened .control-icon:nth-child(1):before {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg)
}

nav.dui-navbar-m.header-opened .control-icon:nth-child(3) {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px)
}

nav.dui-navbar-m.header-opened .control-icon:nth-child(3):before {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg)
}

nav.dui-navbar-m.header-opened .navbar-content {
    opacity: 1;
    visibility: visible;
    z-index: 200
}

nav.dui-navbar-m.header-opened a.navbar-shopingbag,
nav.dui-navbar-m.shopping-opened .control-icon {
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateY(-50px);
    transform: translateY(-50px)
}

nav.dui-navbar-m.shopping-opened .shopping-content {
    opacity: 1;
    visibility: visible;
    z-index: 200
}

nav.dui-navbar-m.shopping-opened a.navbar-shopingbag {
    transition: none
}

nav.dui-navbar-m.shopping-opened a.navbar-shopingbag .shopingbag-icon {
    transition: all .3s;
    opacity: 0
}

nav.dui-navbar-m.shopping-opened a.navbar-shopingbag:after,
nav.dui-navbar-m.shopping-opened a.navbar-shopingbag:before {
    transition: all .4s ease .35s;
    opacity: 1
}

nav.dui-navbar-m .show-navbar-group a.navbar-group-head {
    right: 100%;
    opacity: 0
}

.no-transition .navbr-group-menu,
.no-transition a.navbar-group-head {
    transition: none!important
}

nav.dui-navbar-m {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 50px;
    z-index: 10000;
    background-color: #fff;
    transition: all .5s ease
}

nav.dui-navbar-m .navbar-header {
    height: 50px;
    padding-left: 17px;
    padding-right: 17px;
    text-align: center;
    float: none
}

nav.dui-navbar-m .navbar-header:after,
nav.dui-navbar-m .navbar-header:before,
nav.dui-navbar-m .navbar-language-group a.navbar-group-head:before {
    display: none
}

nav.dui-navbar-m a.navbar-control {
    display: inline-block;
    margin-top: 13px;
    float: left;
    vertical-align: middle
}

nav.dui-navbar-m .control-icon {
    display: block;
    padding-top: 3px;
    padding-bottom: 3px;
    transition: all .4s ease
}

nav.dui-navbar-m .control-icon:before,
nav.dui-navbar-m a.navbar-shopingbag:after,
nav.dui-navbar-m a.navbar-shopingbag:before {
    content: '';
    display: block;
    height: 2px;
    width: 22px;
    background-color: #303233;
    border-top-right-radius: 2px;
    border-bottom-left-radius: 2px
}

nav.dui-navbar-m .control-icon:before {
    transition: transform .4s ease .2s, background-color .5s ease 0s, -webkit-transform .4s ease .2s;
    transition: transform .4s ease .2s, background-color .5s ease 0s
}

nav.dui-navbar-m .navbar-logo {
    display: inline-block;
    width: 45px;
    margin: 0 auto;
    padding: 12px 0;
    vertical-align: middle
}

nav.dui-navbar-m a.navbar-dji-icon {
    display: block;
    width: 45px;
    height: 26px;
    background-size: 45px 26px;
    background-position: center center;
    background-image: url('http://www.macrotellect.com/web/mobile/images/nav_logo.png');
}

nav.dui-navbar-m a.navbar-shopingbag {
    position: relative;
    display: inline-block;
    float: right;
    margin-top: 14px;
    vertical-align: middle;
    transition: all .4s ease
}

nav.dui-navbar-m a.navbar-shopingbag:after,
nav.dui-navbar-m a.navbar-shopingbag:before {
    position: absolute;
    top: 50%;
    left: 0;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    opacity: 0;
    transition: all .4s ease
}

nav.dui-navbar-m a.navbar-shopingbag:after {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg)
}

nav.dui-navbar-m a.navbar-shopingbag span.shopingbag-icon {
    position: relative;
    display: block;
    width: 22px;
    height: 22px;
    background-size: 22px 22px;
    background-position: center center;
    background-image: url();
    transition: all .4s ease .2s
}

nav.dui-navbar-m a.navbar-shopingbag span.shopingbag-icon.full {
    background-image: url()
}

nav.dui-navbar-m .navbar-content {
    position: absolute;
    top: 50px;
    bottom: 0;
    width: 100%;
    background-color: #fff;
    opacity: 0;
    transition: all .4s;
    visibility: hidden;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 100
}

nav.dui-navbar-m a.navbar-group-head {
    position: relative;
    right: 0;
    display: block;
    width: 100%;
    padding: 23px 20px 22px;
    font-size: 16px;
    color: #303233;
    overflow: hidden;
    z-index: 700;
    transition: all .4s
}

nav.dui-navbar-m a.navbar-group-head h4 {
    font-size: 16px;
    line-height: 20px;
    font-weight: 600
}

nav.dui-navbar-m a.navbar-group-head:before {
    position: absolute;
    left: 20px;
    top: 0;
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background-color: #f2f2f2
}

nav.dui-navbar-m a.navbar-group-head span.navbar-arrow-right {
    position: absolute;
    right: 20px;
    top: 50%;
    margin-top: -5px
}

nav.dui-navbar-m .navbar-group:first-child a.navbar-group-head,
nav.dui-navbar-m ul.navbr-menu li:first-child a.navbar-menu-item {
    padding-top: 22px
}

nav.dui-navbar-m .navbar-group:first-child a.navbar-group-head:before,
nav.dui-navbar-m ul.navbr-menu li:first-child a.navbar-menu-item:before {
    display: none
}

nav.dui-navbar-m .navbar-language-group a.navbar-group-head {
    border-top: 1px solid #dae1e6;
    padding-left: 44px;
    padding-top: 22px
}

nav.dui-navbar-m .navbar-language-group a.navbar-group-head h4 {
    font-weight: 400
}

nav.dui-navbar-m .navbar-language-group span.navbar-language-icon,
nav.dui-navbar-m .navbr-pill-menu span.navbar-pill-icon {
    position: absolute;
    left: 20px;
    top: 50%;
    margin-top: -8px
}

nav.dui-navbar-m span.navbar-arrow-right,
nav.dui-navbar-m span.navbar-language-icon {
    display: block;
    width: 6px;
    height: 10px;
    background-size: cover;
    background-position: center center;
    background-image: url('http://www.macrotellect.com/images/nav-arrow-right-77573f2d91aabb315e4e3999d03338b9.svg')
}

nav.dui-navbar-m span.navbar-language-icon {
    width: 16px;
    height: 16px;
    background-image: url()
}

nav.dui-navbar-m .navbr-group-menu {
    position: fixed;
    width: 100%;
    background-color: #fff;
    top: 50px;
    transition: left .4s;
    left: 100%;
    z-index: 800
}

nav.dui-navbar-m .navbr-group-menu ul {
    transition: all .4s;
    opacity: 0
}

nav.dui-navbar-m .navbr-group-menu a.menu-back {
    position: relative;
    display: block;
    padding: 20px;
    font-size: 16px;
    color: #303233;
    background-color: #ebeff2;
    transition: all .4s;
    opacity: 0;
    font-weight: 600
}

nav.dui-navbar-m .navbr-group-menu a.menu-back span,
nav.dui-navbar-m .shopping-content a.navbar-store-link span {
    display: inline-block;
    vertical-align: middle
}

nav.dui-navbar-m .navbr-group-menu a.menu-back span.navbar-arrow-right {
    margin-right: 8px;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

nav.dui-navbar-m .navbar-group-active .navbr-group-menu {
    position: absolute;
    left: 0;
    top: 0
}

nav.dui-navbar-m .navbar-group-active .navbr-group-menu a.menu-back,
nav.dui-navbar-m .navbar-group-active .navbr-group-menu ul {
    opacity: 1
}

nav.dui-navbar-m a.navbar-menu-item {
    position: relative;
    display: block;
    width: 100%;
    padding: 23px 20px 22px;
    font-size: 16px;
    line-height: 20px;
    color: #303233;
    overflow: hidden;
    font-weight: 600
}

nav.dui-navbar-m a.navbar-menu-item:before {
    position: absolute;
    left: 20px;
    right: 20px;
    top: 0;
    content: '';
    display: block;
    width: auto;
    height: 1px;
    background-color: #f2f2f2
}

nav.dui-navbar-m .navbr-language-menu {
    text-align: center
}

nav.dui-navbar-m .navbr-pill-menu {
    border-top: solid 1px #dae1e6
}

nav.dui-navbar-m .navbr-pill-menu a.navbar-menu-item {
    padding-left: 44px;
    font-weight: 400
}

nav.dui-navbar-m .navbr-pill-menu span.navbar-pill-icon.pill-icon-explore_more {
    margin-top: -6px
}

nav.dui-navbar-m .pill-icon-compare,
nav.dui-navbar-m .pill-icon-explore_more,
nav.dui-navbar-m .pill-icon-setup {
    display: block;
    width: 16px;
    height: 16px;
    background-size: cover;
    background-position: center center;
    background-image: url()
}

nav.dui-navbar-m .pill-icon-explore_more,
nav.dui-navbar-m .pill-icon-setup {
    background-image: url()
}

nav.dui-navbar-m .pill-icon-explore_more {
    width: 12px;
    height: 12px;
    background-image: url()
}

nav.dui-navbar-m .shopping-content {
    position: absolute;
    top: 50px;
    bottom: 0;
    width: 100%;
    background-color: #fff;
    opacity: 0;
    visibility: hidden;
    transition: all .4s;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 100
}

nav.dui-navbar-m .shopping-content a.navbar-store-link {
    position: relative;
    display: block;
    padding: 20px;
    font-size: 16px;
    font-weight: 600;
    color: #303233;
    background-color: #ebeff2;
    transition: all .4s
}

nav.dui-navbar-m .shopping-content a.navbar-store-link span.navbar-arrow-right {
    margin-left: 8px;
    background-image: url('http://www.macrotellect.com/images/nav-arrow-right-black-2e37d01179647b6dfe4a7e446a6e00fd.svg')
}

nav.dui-navbar-m .shopping-content .navbar-account {
    padding: 22px 20px;
    font-size: 16px
}

nav.dui-navbar-m .shopping-content .navbar-account a {
    display: inline-block;
    max-width: 60%;
    vertical-align: middle
}

nav.dui-navbar-m .shopping-content a.login-link,
nav.dui-navbar-m .shopping-content a.logout-link {
    color: #1897f2;
    font-weight: 600
}

nav.dui-navbar-m .shopping-content a.user-link {
    color: #303233;
    position: relative;
    padding-left: 40px;
    margin-right: 15px;
    line-height: 32px
}

nav.dui-navbar-m .shopping-content a.user-link span.navbar-nickname {
    display: block;
    width: 100%;
    margin-left: 8px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

nav.dui-navbar-m .shopping-content a.user-link span.navbar-avatar {
    position: absolute;
    display: block;
    left: 0;
    top: 50%;
    width: 32px;
    height: 32px;
    margin-top: -16px;
    border-radius: 50%;
    background-size: 32px 32px;
    background-position: center center;
    background-image: url()
}

nav.dui-navbar-m .navbar-bag {
    transition: all 1.2s;
    overflow: hidden
}

nav.dui-navbar-m .navbar-bag.navbar-bag-show {
    max-height: 650px
}

nav.dui-navbar-m .navbar-bag a.navbar-shopping-cart {
    display: block;
    width: 100%;
    padding: 22px 20px;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    color: #303233;
    border-bottom: solid 1px #dae1e6
}

nav.dui-navbar-m .navbar-bag a.navbar-shopping-cart span {
    display: inline-block;
    vertical-align: bottom;
    line-height: 20px
}

nav.dui-navbar-m .navbar-bag a.navbar-shopping-cart span.shopping-num {
    text-align: center;
    padding: 0 5px;
    margin-left: 8px;
    background-color: #303233;
    color: #fff;
    font-size: 12px;
    line-height: 18px;
    height: 18px;
    min-width: 18px;
    border-radius: 8px;
    font-weight: 400
}

nav.dui-navbar-m .navbar-bag a.navbar-checkout {
    display: block;
    width: 100%;
    padding: 13px;
    margin-top: 20px;
    font-size: 16px;
    background-color: #303233;
    text-align: center;
    color: #fff;
    border-radius: 2px
}

nav.dui-navbar-m .navbar-bag p.navbar-shopping-tip {
    border-top: solid 1px #f2f2f2;
    padding-top: 8px;
    font-size: 12px;
    color: #919699;
    text-align: center
}

nav.dui-navbar-m .navbar-bag li.navbar-shopping-item {
    padding-top: 22px;
    padding-bottom: 22px;
    border-bottom: solid 1px #f2f2f2
}

nav.dui-navbar-m .navbar-bag li.navbar-shopping-item:last-child {
    border-bottom: none
}

nav.dui-navbar-m .navbar-bag li.navbar-shopping-item a {
    position: relative;
    display: block;
    padding-left: 86px;
    padding-top: 12px;
    min-height: 70px
}

nav.dui-navbar-m .navbar-bag li.navbar-shopping-item img.shopping-item-img {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 70px;
    height: 70px
}

nav.dui-navbar-m .navbar-bag li.navbar-shopping-item .shopping-item-name {
    margin-bottom: 5px;
    font-size: 16px;
    color: #303233
}

nav.dui-navbar-m .navbar-bag li.navbar-shopping-item .shopping-item-quantity {
    font-size: 12px;
    color: #919699
}

.site-footer-m {
    background-color: #272727
}

.site-footer-m a.footer-top-link {
    display: block;
    padding: 14px 20px;
    font-size: 12px;
    line-height: 20px;
    color: #f2f2f2;
    text-align: center;
    border-bottom: solid 1px rgba(73, 75, 77, .5)
}

.site-footer-m a.footer-top-link span {
    opacity: .8;
    display: inline-block;
    vertical-align: middle
}

.site-footer-m span.footer-arrow-top {
    position: relative;
    display: inline-block;
    height: 10px;
    width: 14px;
    margin-left: 5px
}

.site-footer-m span.footer-arrow-top:after,
.site-footer-m span.footer-arrow-top:before {
    position: absolute;
    top: 4px;
    content: '';
    display: block;
    width: 9px;
    height: 2px;
    background-color: #f2f2f2
}

.site-footer-m span.footer-arrow-top:before {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    left: 0;
    border-bottom-left-radius: 2px
}

.site-footer-m span.footer-arrow-top:after {
    right: 0;
    border-bottom-right-radius: 2px
}

.site-footer-m .footer-category-group.category-group-opened .footer-category-content {
    max-height: 400px
}

.site-footer-m .footer-category-group.category-group-opened .footer-category-content span.footer-category-cross,
.site-footer-m span.footer-arrow-top:after {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg)
}

.site-footer-m .footer-category-group.category-group-opened a.footer-category-title:after {
    background-color: transparent
}

.site-footer-m .footer-category,
.site-footer-m p.footer-feedback {
    padding-top: 10px;
    padding-bottom: 10px
}

.site-footer-m .footer-category-content {
    position: relative;
    background-color: #494b4d;
    box-sizing: border-box;
    padding: 0 30px;
    overflow: hidden;
    max-height: 0;
    transition: all .6s
}

.site-footer-m .footer-category-link {
    display: block;
    font-size: 12px;
    line-height: 20px;
    margin-top: 16px;
    margin-bottom: 16px;
    color: #909699
}

.site-footer-m a.footer-category-title {
    position: relative;
    display: block;
    width: 100%;
    font-size: 12px;
    line-height: 20px;
    padding: 18px 20px;
    color: #ebeff2
}

.site-footer-m a.footer-category-title:after {
    display: block;
    content: '';
    position: absolute;
    bottom: 0;
    left: 20px;
    right: 20px;
    height: 1px;
    width: auto;
    background-color: #494b4d;
    opacity: .5
}

.site-footer-m span.footer-category-cross {
    position: relative;
    display: block;
    float: right;
    width: 8px;
    height: 20px;
    transition: all .4s
}

.site-footer-m span.footer-category-cross:after,
.site-footer-m span.footer-category-cross:before {
    content: '';
    display: block;
    position: absolute;
    width: 8px;
    height: 1px;
    background-color: #ebeff2;
    top: 9px;
    right: 0
}

.site-footer-m span.footer-category-cross:after {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg)
}

.site-footer-m span.footer-category-right {
    position: relative;
    display: block;
    float: right;
    width: 20px;
    height: 6px;
    margin-top: 8px
}

.site-footer-m span.footer-category-right:after,
.site-footer-m span.footer-category-right:before,
.site-footer-m ul.footer-legal li:after {
    content: '';
    display: block;
    position: absolute;
    width: 8px;
    height: 1px;
    background-color: #ebeff2;
    right: 0
}

.site-footer-m span.footer-category-right:before {
    top: 0;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg)
}

.site-footer-m span.footer-category-right:after {
    bottom: 0;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg)
}

.site-footer-m span.footer-language-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 8px;
    background-position: center center;
    background-size: cover;
    background-image: url()
}

.site-footer-m .footer-bottom {
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 30px
}

.site-footer-m a.footer-language-link span,
.site-footer-m ul.footer-social-list li {
    display: inline-block;
    vertical-align: middle
}

.site-footer-m ul.footer-social-list {
    padding-top: 8px;
    padding-bottom: 10px;
    margin-left: -10px;
    margin-right: -10px
}

.site-footer-m ul.footer-social-list li {
    height: 18px;
    margin: 5px 10px
}

.site-footer-m ul.footer-social-list a {
    display: block;
    height: 100%
}

.site-footer-m p.footer-feedback {
    font-size: 12px;
    color: #909699
}

.site-footer-m p.footer-feedback a {
    color: #1897f2
}

.site-footer-m p.footer-copyright {
    padding-top: 12px;
    color: #606466;
    font-size: 12px
}

.site-footer-m ul.footer-legal {
    margin-top: 6px;
    margin-left: -8px;
    margin-right: -8px
}

.site-footer-m ul.footer-legal li {
    position: relative;
    display: inline-block;
    padding: 4px 10px;
    font-size: 12px
}

.site-footer-m ul.footer-legal li:after {
    width: 1px;
    height: 12px;
    top: 50%;
    margin-top: -6px;
    background-color: #8f9699
}

.site-footer-m ul.footer-legal li:last-child:after {
    display: none
}

.site-footer-m ul.footer-legal a {
    color: #8f9699
}

.site-footer-m .footer-record a,
.site-footer-m p.footer-ad-desc {
    color: #606466;
    font-size: 12px
}

.site-footer-m .footer-subscribe {
    padding-top: 22px;
    padding-bottom: 0
}

.site-footer-m .footer-subscribe p.footer-subscribe-title {
    margin-bottom: 10px;
    font-size: 12px;
    color: #ebeff2
}

.site-footer-m .footer-subscribe p.footer-subscribe-desc {
    margin-bottom: 10px;
    font-size: 12px;
    color: #909699
}

.site-footer-m .footer-subscribe .form-group {
    position: relative;
    margin-bottom: 0;
    padding-right: 40px
}

.site-footer-m .footer-subscribe .footer-subscribe-input {
    display: block;
    width: 100%;
    padding: 10px 8px;
    font-size: 12px;
    line-height: 20px;
    color: #606466;
    background-color: transparent;
    outline: none;
    border: solid 1px #494b4d;
    border-right: none;
    border-radius: 0
}

.site-footer-m .footer-subscribe .footer-subscribe-submit {
    position: absolute;
    width: 40px;
    height: 100%;
    right: 0;
    top: 0;
    background-color: #494b4d;
    border: solid 1px #494b4d;
    display: block
}

.site-footer-m .footer-subscribe .footer-subscribe-submit.btn-active {
    background-color: #1897f2;
    border: solid 1px #1897f2
}

.site-footer-m .footer-subscribe .footer-subscribe-submit.btn-active span.footer-arrow-top:after,
.site-footer-m .footer-subscribe .footer-subscribe-submit.btn-active span.footer-arrow-top:before {
    background-color: #fff
}

.site-footer-m .footer-subscribe .footer-subscribe-tip {
    font-size: 12px;
    color: #606466;
    margin-top: 5px
}

.site-footer-m .footer-subscribe .footer-subscribe-tip.invisible {
    visibility: hidden;
    opacity: 0
}

.site-footer-m .footer-subscribe span.footer-arrow-top {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    margin: 0;
    left: 13px;
    top: 8px
}

.site-footer-m .footer-subscribe span.footer-arrow-top:after,
.site-footer-m .footer-subscribe span.footer-arrow-top:before {
    background-color: #919699
}

.site-footer-m .footer-subscribe .footer-subscribe-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .4);
    z-index: 10001;
    display: none
}

.site-footer-m .footer-subscribe .footer-subscribe-modal .modal-content {
    width: 90%;
    max-width: 400px;
    padding: 60px 20px 20px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 180px;
    background-color: #fff;
    text-align: center;
    overflow: hidden
}

.site-footer-m .footer-subscribe .footer-subscribe-modal h4.modal-title {
    font-size: 20px;
    color: #494b4d;
    font-weight: 400;
    margin-bottom: 25px
}

.site-footer-m .footer-subscribe .footer-subscribe-modal p.modeal-desc {
    font-size: 14px;
    line-height: 24px;
    color: #919699;
    font-weight: 400;
    margin-bottom: 55px
}

.site-footer-m .footer-subscribe .footer-subscribe-modal a.modal-btn {
    display: block;
    padding: 10px;
    color: #fff;
    background-color: #3c3e40;
    font-size: 18px;
    line-height: 26px
}