@import url(https://fonts.googleapis.com/css?family=Pridi:300,400,500,700&display=swap&subset=thai);
@import url(https://fonts.googleapis.com/css?family=Prompt:300,400,500,700&display=swap&subset=thai);
@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap);

body,
html {
    width: 100%;
    height: 100%;
    font-family: Prompt, sans-serif;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    color: #333
}

body {
    overflow-x: hidden
}

.mt0 {
    margin-top: 0 !important
}

.mt10 {
    margin-top: 10px !important
}

.mt20 {
    margin-top: 20px !important
}

.mt30 {
    margin-top: 30px !important
}

.mt40 {
    margin-top: 40px !important
}

.mt50 {
    margin-top: 50px !important
}

.mt60 {
    margin-top: 60px !important
}

.mt70 {
    margin-top: 70px !important
}

.mt80 {
    margin-top: 80px !important
}

.mt90 {
    margin-top: 90px !important
}

.mt100 {
    margin-top: 100px !important
}

.p10 {
    padding: 10px 0 !important
}

.p20 {
    padding: 20px 0 !important
}

.p30 {
    padding: 30px 0 !important
}

.p40 {
    padding: 40px 0 !important
}

.p50 {
    padding: 50px 0 !important
}

.p60 {
    padding: 60px 0 !important
}

.p70 {
    padding: 70px 0 !important
}

.p80 {
    padding: 80px 0 !important
}

.p90 {
    padding: 90px 0 !important
}

.m10 {
    margin: 10px 0 !important
}

.m20 {
    margin: 20px 0 !important
}

.m30 {
    margin: 30px 0 !important
}

.m40 {
    margin: 40px 0 !important
}

.m50 {
    margin: 50px 0 !important
}

.m60 {
    margin: 60px 0 !important
}

.m70 {
    margin: 70px 0 !important
}

.m80 {
    margin: 80px 0 !important
}

.m90 {
    margin: 90px 0 !important
}

.m100 {
    margin: 100px 0 !important
}

.mb10 {
    margin-bottom: 10px !important
}

.mb15 {
    margin-bottom: 15px !important
}

.mb20 {
    margin-bottom: 20px !important
}

.mb30 {
    margin-bottom: 30px !important
}

.mb40 {
    margin-bottom: 40px !important
}

.mb50 {
    margin-bottom: 50px !important
}

.mb60 {
    margin-bottom: 60px !important
}

.mb70 {
    margin-bottom: 70px !important
}

.mb80 {
    margin-bottom: 80px !important
}

.mb90 {
    margin-bottom: 90px !important
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    color: #111;
    font-weight: 600
}

h1 {
    font-size: 70px
}

h2 {
    font-size: 36px
}

h3 {
    font-size: 30px
}

h4 {
    font-size: 24px
}

h5 {
    font-size: 18px
}

h6 {
    font-size: 16px
}

p {
    font-size: 14px;
    color: #585858;
    line-height: 2em
}

img {
    max-width: 100%
}

button:focus,
input:focus,
select:focus,
textarea:focus {
    outline: 0
}

.bgdefault {
    background-color: #1c1363;
    font-size: 20px
}

.bgdefault img {
    width: 40px;
    height: 40px
}

a:focus,
a:hover {
    text-decoration: none;
    outline: 0
}

ol,
ul {
    padding: 0;
    margin: 0
}

.section-title {
    text-align: center
}

.section-title h2 {
    font-size: 36px
}

.set-bg {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center
}

.spad {
    padding-top: 105px;
    padding-bottom: 105px
}

.text-white a,
.text-white h1,
.text-white h2,
.text-white h3,
.text-white h4,
.text-white h5,
.text-white h6,
.text-white li,
.text-white p,
.text-white span {
    color: #fff
}

.site-btn {
    display: inline-block;
    border: none;
    font-size: 14px;
    font-weight: 600;
    min-width: 167px;
    padding: 18px 47px 14px;
    border-radius: 50px;
    text-transform: uppercase;
    background: #f51167;
    color: #fff;
    line-height: normal;
    cursor: pointer;
    text-align: center
}

.site-btn:hover {
    color: #fff
}

.site-btn.sb-white {
    background: #fff;
    color: #111
}

.site-btn.sb-line {
    background: 0 0;
    color: #fff;
    -webkit-box-shadow: inset 0 0 0 1px #fff;
    box-shadow: inset 0 0 0 1px #fff
}

.site-btn.sb-dark {
    background: #413a3a
}

.site-btn.sb-dark.sb-line {
    background-color: transparent;
    color: #111;
    -webkit-box-shadow: inset 0 0 0 1px #111;
    box-shadow: inset 0 0 0 1px #111
}

#preloder {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 999999;
    background: #000;
    -webkit-transform: translateZ(0)
}

.loader {
    width: 40px;
    height: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -13px;
    margin-left: -13px;
    border-radius: 60px;
    animation: loader .8s linear infinite;
    -webkit-animation: loader .8s linear infinite
}

@keyframes loader {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
        border: 4px solid #f44336;
        border-left-color: transparent
    }

    50% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
        border: 4px solid #673ab7;
        border-left-color: transparent
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
        border: 4px solid #f44336;
        border-left-color: transparent
    }
}

@-webkit-keyframes loader {
    0% {
        -webkit-transform: rotate(0);
        border: 4px solid #f44336;
        border-left-color: transparent
    }

    50% {
        -webkit-transform: rotate(180deg);
        border: 4px solid #673ab7;
        border-left-color: transparent
    }

    100% {
        -webkit-transform: rotate(360deg);
        border: 4px solid #f44336;
        border-left-color: transparent
    }
}

.elements-section {
    padding-top: 100px
}

.el-title {
    margin-bottom: 75px
}

.element {
    margin-bottom: 100px
}

.element:last-child {
    margin-bottom: 0
}

.accordion-area {
    margin-top: 50px;
    border-top: 2px solid #e1e1e1
}

.accordion-area .panel {
    border-bottom: 2px solid #e1e1e1
}

.accordion-area .panel-link {
    background-image: url(../img/arrow-down.png);
    background-repeat: no-repeat;
    background-position: right 10px top 30px
}

.faq-accordion.accordion-area .panel-link,
.faq-accordion.accordion-area .panel-link.active.collapsed {
    padding: 17px 100px 17px 20px
}

.faq-accordion.accordion-area .panel-link:after {
    right: 44px
}

.accordion-area .panel-header .panel-link.collapsed {
    background-image: url(../img/arrow-down.png)
}

.accordion-area .panel-link.active {
    background-image: url(../img/arrow-up.png)
}

.accordion-area .panel-link.active {
    background-color: transparent
}

.accordion-area .panel-link,
.accordion-area .panel-link.active.collapsed {
    text-align: left;
    position: relative;
    width: 100%;
    font-size: 14px;
    font-weight: 700;
    color: #414141;
    padding: 0;
    text-transform: uppercase;
    line-height: 1;
    cursor: pointer;
    border: none;
    min-height: 69px;
    background-color: transparent;
    border-radius: 0
}

.accordion-area .panel-body {
    padding-top: 10px
}

.accordion-area .panel-body p {
    color: #8f8f8f;
    margin-bottom: 25px;
    line-height: 1.8
}

.accordion-area .panel-body p span {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: #f51167
}

.accordion-area .panel-body img {
    margin-bottom: 25px
}

.accordion-area .panel-body h4 {
    font-size: 18px;
    margin-bottom: 20px
}

.header-top {
    padding: 18px 0 14px
}

.site-logo {
    display: inline-block
}

.site-logo img {
    width: 190px;
    height: auto;
    padding: 5px 0
}

@media(max-width:768px) {
    .site-logo img {
        width: 80px
    }
}

@media(max-width:480px) {
    .site-logo img {
        width: 50px
    }
}

.header-search-form {
    width: 100%;
    position: relative
}

.header-search-form input {
    width: 100%;
    height: 44px;
    font-size: 14px;
    border-radius: 0;
    border: none;
    padding: 0 19px;
    background: #fff;
    border: 1px solid #dadada
}

.header-search-form button {
    position: absolute;
    height: 100%;
    right: 0;
    top: 0;
    font-size: 20px;
    color: #fff;
    border: none;
    padding: 0 20px;
    cursor: pointer;
    background-color: #251c69;
    border: 1px solid #251c69
}

.header-search-form button:after {
    content: "ค้นหา";
    font-size: 12px;
    margin: 10px
}

@media(max-width:480px) {
    .header-search-form button:after {
        content: "";
        margin: 0
    }
}

.user-panel .up-item {
    display: inline-block;
    font-size: 14px
}

.user-panel .up-item i {
    font-size: 22px
}

.user-panel .up-item a {
    font-size: 14px;
    color: #000
}

.shopping-card {
    display: inline-block;
    position: relative
}

.iconnav {
    width: 50px;
    height: 50px
}

.shopping-card span.ShowIncNumCart {
    position: absolute;
    top: 3px;
    left: 70%;
    height: 20px;
    min-width: 20px;
    color: #fff;
    font-size: 11px;
    background: #251c69;
    text-align: center;
    border-radius: 30px;
    padding: 2px;
    margin-left: -7px;
    line-height: 1.7em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.shopping-card span.ShowIncWL {
    position: absolute;
    top: 3px;
    left: 70%;
    height: 20px;
    min-width: 20px;
    color: #fff;
    font-size: 11px;
    background: #251c69;
    text-align: center;
    border-radius: 30px;
    padding: 2px;
    margin-left: -7px;
    line-height: 1.7em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.shopping-card span.ShowIncQT {
    position: absolute;
    top: 3px;
    left: 70%;
    height: 20px;
    min-width: 20px;
    color: #fff;
    font-size: 11px;
    background: #251c69;
    text-align: center;
    border-radius: 30px;
    padding: 2px;
    margin-left: -7px;
    line-height: 1.7em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.catebutton,
.catebutton:active,
.catebutton:focus {
    background: #251c69 url(../images/icon-08.svg) no-repeat 95% 50%;
    outline: 0 !important;
    color: #fff;
    height: 45px;
    padding: 10px 40px 10px 10px;
    border: none !important
}

.catebutton:before {
    content: "-"
}

.main-navbar {
    background: #eaeaea
}

.slicknav_menu {
    display: none
}

.main-menu {
    list-style: none;
    margin-top: 30px
}

.main-menu li {
    display: inline-block;
    position: relative
}

.main-menu>li>a {
    display: inline-block;
    font-size: 14px;
    color: #1c1363;
    line-height: 1em;
    position: relative;
    margin-left: 20px
}

@media(max-width:992px) {
    .main-menu li a {
        font-size: 12px;
        margin-left: 10px
    }
}

.main-menu li.lang>a {
    color: #333 !important
}

@media(min-width:992px) {
    li.dropdownnav:after {
        content: "\f114";
        font-family: Flaticon
    }
}

.main-menu li:hover .sub-menu {
    visibility: visible;
    opacity: 1;
    margin-top: 0
}

.main-menu .sub-menu {
    position: absolute;
    list-style: none;
    min-width: 300px;
    left: 0;
    padding: 10px;
    visibility: hidden;
    opacity: 0;
    background: #fff;
    border: 1px solid #dddd;
    z-index: 99;
    -webkit-transition: all .4s;
    -o-transition: all .4s;
    transition: all .4s;
    -webkit-box-shadow: 2px 7px 20px rgba(0, 0, 0, .05);
    box-shadow: 2px 7px 20px rgba(0, 0, 0, .05)
}

.main-menu .sub-menu li {
    display: block
}

.main-menu .sub-menu li a {
    display: block;
    color: #333;
    margin-right: 0;
    padding: 8px 20px
}

.main-menu .sub-menu li a i {
    font-size: 14px;
    width: 20px
}

.main-menu .sub-menu li a:hover {
    color: #fff;
    background-color: #1c1363
}

.nav-switch {
    display: none
}

.hero-section {
    padding-bottom: 54px
}

.hero-slider .hs-item {
    position: relative;
    height: 720px
}

.hero-slider .hs-item span {
    font-size: 18px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 3px;
    margin-bottom: 5px;
    display: block;
    position: relative;
    top: 50px;
    opacity: 0
}

.hero-slider .hs-item h2 {
    font-size: 60px;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 10px;
    position: relative;
    top: 50px;
    opacity: 0
}

.hero-slider .hs-item p {
    font-size: 18px;
    font-weight: 300;
    margin-bottom: 35px;
    position: relative;
    top: 100px;
    opacity: 0
}

.hero-slider .hs-item .site-btn {
    position: relative;
    top: 50px;
    opacity: 0
}

.hero-slider .hs-item .sb-line {
    margin-right: 5px
}

.hero-slider .hs-item .container {
    position: relative;
    padding-top: 170px
}

.hero-slider .hs-item .offer-card {
    position: absolute;
    right: 0;
    top: 226px;
    width: 162px;
    height: 162px;
    border-radius: 50%;
    background: #f51167;
    text-align: center;
    padding-top: 20px;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    opacity: 0
}

.hero-slider .hs-item .offer-card:after {
    position: absolute;
    content: "";
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    border: 1px solid #f96790;
    left: 5px;
    top: 5px;
    border-radius: 50%
}

.hero-slider .hs-item .offer-card span {
    font-size: 18px;
    text-transform: lowercase;
    position: relative;
    top: 50px;
    opacity: 0
}

.hero-slider .hs-item .offer-card h2 {
    font-size: 72px;
    font-weight: 400;
    line-height: 1
}

.hero-slider .hs-item .offer-card p {
    text-transform: uppercase;
    line-height: 1;
    font-size: 14px
}

.hero-slider .slider-nav-warp {
    max-width: 1145px;
    bottom: 0;
    margin: -78px auto 0
}

.hero-slider .slider-nav {
    display: inline-block;
    padding: 0 38px;
    position: relative
}

.hero-slider .owl-dots {
    display: -ms-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding-top: 9px
}

.hero-slider .owl-dots .owl-dot {
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 15px;
    margin-right: 10px;
    opacity: .25
}

.hero-slider .owl-dots .owl-dot.active {
    opacity: 1
}

.hero-slider .owl-dots .owl-dot:last-child {
    margin-right: 0
}

.hero-slider .owl-nav button.owl-next,
.hero-slider .owl-nav button.owl-prev {
    font-size: 27px;
    position: absolute;
    color: #fff;
    opacity: .5;
    bottom: -20px
}

.hero-slider .owl-nav button.owl-next {
    right: 0
}

.hero-slider .owl-nav button.owl-prev {
    left: 0
}

.hero-slider .owl-item.active .hs-item .site-btn,
.hero-slider .owl-item.active .hs-item h2,
.hero-slider .owl-item.active .hs-item p,
.hero-slider .owl-item.active .hs-item span {
    top: 0;
    opacity: 1
}

.hero-slider .owl-item.active .hs-item span {
    -webkit-transition: all .5s ease .2s;
    -o-transition: all .5s ease .2s;
    transition: all .5s ease .2s
}

.hero-slider .owl-item.active .hs-item h2 {
    -webkit-transition: all .5s ease .4s;
    -o-transition: all .5s ease .4s;
    transition: all .5s ease .4s
}

.hero-slider .owl-item.active .hs-item p {
    -webkit-transition: all .5s ease .6s;
    -o-transition: all .5s ease .6s;
    transition: all .5s ease .6s
}

.hero-slider .owl-item.active .hs-item .site-btn {
    -webkit-transition: all .5s ease .8s;
    -webkit-transition: all .5s ease .8s;
    -o-transition: all .5s ease .8s;
    transition: all .5s ease .8s
}

.hero-slider .owl-item.active .hs-item .offer-card {
    opacity: 1;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    -webkit-transition: all .5s ease 1s;
    -webkit-transition: all .5s ease 1s;
    -o-transition: all .5s ease 1s;
    transition: all .5s ease 1s
}

.slide-num-holder {
    float: right;
    z-index: 1;
    color: #fff;
    position: relative;
    font-size: 24px;
    font-weight: 700;
    position: relative;
    margin-top: -22px
}

.slide-num-holder span:first-child {
    margin-right: 41px
}

.slide-num-holder:after {
    position: absolute;
    content: "";
    height: 30px;
    width: 1px;
    background: #fff;
    left: 50%;
    top: 0;
    -webkit-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    transform: rotate(30deg)
}

.feature {
    text-align: center;
    background: #f8f8f8;
    height: 100%
}

.feature:nth-child(2) {
    background: #f51167
}

.feature:nth-child(2) h2 {
    color: #fff
}

.feature .feature-inner {
    padding: 20px 25px;
    display: -ms-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    height: 100%
}

.feature .feature-icon {
    display: inline-block;
    margin-right: 15px
}

.feature h2 {
    font-size: 24px;
    text-transform: uppercase;
    display: inline-block
}

.top-letest-product-section {
    padding-top: 70px;
    padding-bottom: 60px
}

.top-letest-product-section .section-title {
    margin-bottom: 70px
}

.product-slider .owl-nav {
    position: absolute;
    top: calc(50% - 60px);
    width: 100%;
    left: 0
}

.product-slider .owl-nav button.owl-next,
.product-slider .owl-nav button.owl-prev {
    color: #a4a4a4;
    font-size: 42px;
    position: relative
}

.product-slider .owl-nav button.owl-next {
    float: right;
    right: -92px
}

.product-slider .owl-nav button.owl-prev {
    float: left;
    left: -92px
}

.product-item .pi-pic {
    position: relative;
    display: block
}

.product-item .tag-new,
.product-item .tag-sale {
    position: absolute;
    right: 16px;
    top: 14px;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    background: #50e550;
    line-height: 1;
    text-transform: uppercase;
    padding: 5px 9px 1px;
    border-radius: 15px;
    width: 42px
}

.product-item .tag-sale {
    text-align: center;
    padding: 5px 0 1px;
    min-width: 65px;
    background: #f51167
}

.product-item .pi-links {
    width: 100%;
    position: absolute;
    right: 0;
    bottom: 18px;
    z-index: 9;
    padding-right: 15px;
    text-align: right
}

.product-item .pi-links a {
    display: inline-table;
    width: 36px;
    height: 36px;
    background: #fff;
    border-radius: 60px;
    font-size: 18px;
    line-height: 18px;
    padding-top: 9px;
    overflow: hidden;
    color: #000;
    position: relative;
    -webkit-box-shadow: 1px 0 32px rgba(0, 0, 0, .2);
    box-shadow: 1px 0 32px rgba(0, 0, 0, .2);
    -webkit-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease;
    text-align: center
}

.product-item .pi-links a i {
    display: inline-block;
    color: #000
}

.product-item .pi-links a.add-card {
    padding-top: 8px
}

.product-item .pi-links a.add-card span {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    position: absolute;
    right: 19px;
    top: 20px;
    opacity: 0
}

.product-item .pi-links a.add-card:hover {
    width: 148px;
    padding: 8px 18px 0;
    text-align: left
}

.product-item .pi-links a.add-card:hover span {
    opacity: 1;
    top: 10px;
    -webkit-transition: all .4s ease .3s;
    -o-transition: all .4s ease .3s;
    transition: all .4s ease .3s
}

.product-item .pi-text {
    padding-top: 22px;
    height: 87px
}

.product-item .pi-text h6 {
    float: right;
    padding-left: 40px;
    overflow: hidden;
    font-weight: 700;
    color: #111
}

.product-item .pi-text p {
    font-size: 16px;
    color: #111;
    margin-bottom: 0
}

.product-filter-section {
    padding-bottom: 60px
}

.product-filter-section .section-title {
    margin-bottom: 70px
}

.product-filter-menu {
    list-style: none;
    margin: 0 -10px;
    padding-bottom: 15px
}

.product-filter-menu li {
    margin: 0 10px 10px;
    display: inline-block
}

.product-filter-menu li a {
    color: #111;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    background: #ebebeb;
    display: block;
    width: 100%;
    padding: 10px 34px;
    border-radius: 31px
}

.banner {
    padding: 50px 34px 47px;
    position: relative;
    margin-bottom: 70px
}

.banner .tag-new {
    position: absolute;
    right: 26px;
    top: 27px;
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    background: #50e550;
    line-height: 1;
    text-transform: uppercase;
    padding: 7px 16px 1px;
    border-radius: 80px
}

.banner span {
    font-size: 18px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 3px;
    margin-bottom: 5px;
    display: block
}

.banner h2 {
    font-size: 48px;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 10px;
    color: #282828
}

.footer-section {
    background: #333;
    padding: 60px 0 20px 0
}

@media(max-width:766px) {
    .footer-section {
        padding: 60px 0 150px 0
    }
}

.footer-logo {
    padding-bottom: 60px
}

.footer-widget {
    margin-bottom: 70px;
    overflow: hidden
}

.footer-widget h2 {
    font-size: 18px;
    font-weight: 300;
    text-transform: uppercase;
    color: #2aaae3;
    margin-bottom: 30px
}

.footer-widget p {
    color: #8f8f8f
}

.footer-widget.about-widget p {
    margin-bottom: 50px;
    letter-spacing: -.01em
}

.footer-widget ul {
    list-style: none;
    float: left;
    margin-right: 37px
}

.footer-widget ul:last-child {
    margin-right: 0
}

.footer-widget ul li a {
    display: inline-block;
    position: relative;
    padding-left: 20px;
    font-size: 14px;
    color: #8f8f8f;
    margin-bottom: 6px
}

.footer-widget ul li a:after {
    position: absolute;
    content: "";
    width: 5px;
    height: 5px;
    left: 0;
    top: 8px;
    border: 1px solid #2aaae3;
    border-radius: 50%;
    -webkit-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s
}

.footer-widget ul li a:hover {
    color: #fff
}

.footer-widget ul li a:hover:after {
    width: 7px;
    height: 7px;
    top: 6px;
    background: #ec105a
}

.fw-latest-post-widget .lp-item {
    margin-bottom: 30px;
    display: block;
    overflow: hidden
}

.fw-latest-post-widget .lp-thumb {
    width: 64px;
    height: 64px;
    float: left;
    margin-right: 22px
}

.fw-latest-post-widget .lp-content {
    overflow: hidden;
    padding-top: 2px
}

.fw-latest-post-widget .lp-content h6 {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    opacity: .25;
    color: #717171;
    margin-bottom: 1px
}

.fw-latest-post-widget .lp-content span {
    display: block;
    font-size: 12px;
    color: #8f8f8f;
    margin-bottom: 4px
}

.fw-latest-post-widget .lp-content .readmore {
    font-size: 12px;
    color: #f51167
}

.contact-widget .con-info span {
    float: left;
    color: #f51167;
    margin-right: 15px;
    overflow: hidden
}

.social-links-warp {
    border-top: 2px solid #3b3535;
    padding: 46px 0
}

.social-links a {
    display: inline-block
}

.social-links a:last-child {
    margin-right: 0
}

.social-links a i {
    font-size: 25px;
    color: #d7d7d7;
    float: left;
    margin: 0 5px;
    overflow: hidden;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    display: inline-block
}

.social-links a span {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    color: #9f9fa0;
    padding-top: 10px;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s
}

.social-links a.instagram:hover i {
    color: #2f5d84
}

.social-links a.google-plus:hover i {
    color: #e04b37
}

.social-links a.twitter:hover i {
    color: #5abed6
}

.social-links a.pinterest:hover i {
    color: #cd212d
}

.social-links a.facebook:hover i {
    color: #39599f
}

.social-links a.twitter:hover i {
    color: #5abed6
}

.social-links a.youtube:hover i {
    color: #d12227
}

.social-links a.tumblr:hover i {
    color: #37475e
}

.social-links a:hover span {
    color: #fff
}

.page-top-info {
    background: #f8f7f7 url(../images/bghero.jpg) no-repeat;
    padding: 50px 0
}

.page-top-info h4 {
    color: #fff;
    text-transform: uppercase;
    font-family: Roboto, Prompt, sans-serif;
    font-weight: 400;
    font-size: 30px
}

.site-pagination {
    font-size: 14px;
    font-weight: 400;
    color: #fff;
    font-family: Roboto, sans-serif
}

.site-pagination a {
    display: inline-block;
    font-size: 14px;
    color: #fff;
    font-family: Roboto, sans-serif
}

.filter-widget {
    margin-bottom: 100px
}

.filter-widget .fw-title {
    font-size: 18px;
    font-weight: 700;
    color: #414141;
    text-transform: uppercase;
    margin-bottom: 45px
}

.category-menu {
    list-style: none
}

.category-menu li a {
    display: block;
    position: relative;
    font-size: 12px;
    color: #414141;
    border-bottom: 1px solid #ebebeb;
    padding: 12px 0 5px 20px
}

.category-menu li a span {
    float: right
}

.category-menu li a:after {
    position: absolute;
    content: "";
    width: 9px;
    height: 9px;
    left: 0;
    top: 13px;
    border: 1px solid #f51167;
    border-radius: 50%
}

.category-menu li a:hover {
    color: #f51167
}

.category-menu li a:hover:after {
    background: #f51167
}

.category-menu li a:last-child a {
    margin-bottom: 0
}

.category-menu li .sub-menu {
    list-style: none;
    overflow: hidden;
    height: 0;
    -webkit-transform: rotateX(90deg);
    transform: rotateX(90deg);
    opacity: 0;
    -webkit-transition: opacity .4s, -webkit-transform .4s;
    transition: opacity .4s, -webkit-transform .4s;
    -o-transition: transform .4s, opacity .4s;
    transition: transform .4s, opacity .4s;
    transition: transform .4s, opacity .4s, -webkit-transform .4s
}

.category-menu li .sub-menu li a {
    padding-left: 45px
}

.category-menu li:hover>a {
    color: #f51167
}

.category-menu li.active>.sub-menu {
    display: block;
    height: auto;
    opacity: 1;
    -webkit-transform: rotateX(0);
    transform: rotateX(0)
}

.price-range-wrap .price-range {
    border-radius: 0;
    margin-right: 13px;
    margin-bottom: 28px
}

.price-range-wrap .price-range.ui-widget-content {
    border: none;
    background: #ebebeb;
    height: 2px
}

.price-range-wrap .price-range.ui-widget-content .ui-slider-range {
    background: #ebebeb;
    border-radius: 0
}

.price-range-wrap .price-range .ui-slider-range.ui-corner-all.ui-widget-header:last-child {
    background: #414141
}

.price-range-wrap .price-range.ui-widget-content .ui-slider-handle {
    border: none;
    background: #414141;
    height: 14px;
    width: 14px;
    outline: 0;
    top: -6px;
    cursor: ew-resize;
    margin-left: 0;
    border-radius: 0;
    border-radius: 20px
}

.price-range-wrap .price-range .ui-slider-handle.ui-corner-all.ui-state-default span {
    position: absolute;
    font-size: 14px;
    top: 35px
}

.price-range-wrap .range-slider {
    color: #444;
    margin-top: 22px
}

.price-range-wrap {
    border-bottom: 2px solid #ebebeb;
    padding-bottom: 40px;
    margin-bottom: 50px
}

.price-range-wrap h4 {
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 700;
    color: #414141;
    margin-bottom: 45px
}

.price-range-wrap .range-slider .price-input input {
    color: #444;
    border: none;
    outline: 0;
    max-width: 80px;
    pointer-events: none
}

.price-range-wrap .range-slider .price-input input:nth-child(1) {
    float: left
}

.price-range-wrap .range-slider .price-input input:nth-child(2) {
    float: right
}

.fw-color-choose,
.fw-size-choose {
    border-bottom: 2px solid #ebebeb;
    padding-bottom: 40px;
    margin-bottom: 50px
}

.fw-color-choose .cs-item {
    display: inline-block;
    position: relative;
    margin-right: 14px
}

.fw-color-choose .cs-item:last-child {
    margin-right: 0
}

.fw-color-choose label {
    width: 26px;
    height: 26px;
    border-radius: 50px;
    background: #333;
    position: relative;
    cursor: pointer
}

.fw-color-choose label.cs-gray {
    background: #d7d7d7
}

.fw-color-choose label.cs-orange {
    background: #6f91ff
}

.fw-color-choose label.cs-yollow {
    background: #6f91ff
}

.fw-color-choose label.cs-green {
    background: #8fc99c
}

.fw-color-choose label.cs-purple {
    background: #bc83b1
}

.fw-color-choose label.cs-blue {
    background: #9ee7f4
}

.fw-color-choose label span {
    position: absolute;
    width: 100%;
    text-align: center;
    top: 45px;
    font-size: 11px;
    color: #414141
}

.fw-color-choose input[type=radio] {
    visibility: hidden;
    position: absolute
}

.fw-color-choose input[type=radio]:checked+label {
    -webkit-box-shadow: 0 0 0 2px #f51167;
    box-shadow: 0 0 0 2px #f51167
}

.fw-color-choose input[type=radio]:checked+label span {
    color: #b09d81
}

.fw-size-choose .sc-item {
    display: inline-block;
    position: relative;
    margin-right: 5px
}

.fw-size-choose label {
    display: inline-block;
    height: 30px;
    min-width: 30px;
    text-align: center;
    font-size: 14px;
    color: #414141;
    font-weight: 500;
    cursor: pointer;
    border-radius: 50px;
    padding: 7px 6px 0
}

.fw-size-choose input[type=radio] {
    visibility: hidden;
    position: absolute
}

.fw-size-choose input[type=radio]:checked+label {
    background: #f51167;
    color: #fff
}

.product-section {
    padding-top: 70px;
    padding-bottom: 65px
}

.back-link {
    padding-bottom: 50px
}

.back-link a {
    font-size: 12px;
    color: #414141
}

.product-pic-zoom {
    margin-bottom: 35px
}

.product-thumbs-track {
    width: 1200px
}

.product-thumbs .pt {
    width: 116px;
    height: 116px;
    float: left;
    margin-right: 31px;
    overflow: hidden;
    cursor: pointer;
    position: relative
}

.product-thumbs .pt:last-child {
    margin-right: 0
}

.product-thumbs .pt.active:after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border: 2px solid #f51167;
    z-index: 1
}

.product-details .p-title {
    font-size: 18px;
    font-weight: 700;
    color: #414141;
    text-transform: uppercase;
    margin-bottom: 18px
}

.product-details .p-price {
    font-size: 24px;
    color: #414141;
    font-weight: 700;
    margin-bottom: 20px
}

.product-details .p-stock {
    font-size: 12px;
    color: #000;
    font-weight: 700;
    color: #414141;
    margin-bottom: 10px
}

.product-details .p-stock span {
    color: #f51167
}

.product-details .p-rating {
    margin-bottom: 15px
}

.product-details .p-rating i {
    color: #f51167
}

.product-details .p-rating i.fa-fade {
    color: #e6e6e6
}

.product-details .p-review {
    margin-bottom: 30px
}

.product-details .p-review a {
    color: #414141;
    font-size: 14px;
    margin-right: 12px;
    margin-left: 12px
}

.product-details .p-review a:first-child {
    margin-left: 0
}

.product-details .fw-size-choose {
    border-bottom: none;
    margin-bottom: 30px;
    padding-bottom: 0
}

.product-details .fw-size-choose p {
    float: left;
    margin-right: 38px;
    text-transform: uppercase;
    font-weight: 700;
    color: #414141;
    padding-top: 10px;
    margin-bottom: 0
}

.product-details .fw-size-choose label {
    width: 33px;
    height: 33px;
    font-size: 12px;
    border: 2px solid #414141
}

.product-details .fw-size-choose input[type=radio]:checked+label {
    border: 2px solid #f51167
}

.product-details .fw-size-choose .disable label {
    border: 2px solid #e1e1e1;
    color: #cacaca
}

.product-details .site-btn {
    min-width: 190px
}

.product-details .social-sharing {
    padding-top: 50px
}

.product-details .social-sharing a {
    color: #d7d7d7;
    margin-right: 23px;
    font-size: 14px
}

.product-details .social-sharing a:hover {
    color: #414141
}

.quantity {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 40px
}

.quantity p {
    float: left;
    margin-right: 15px;
    text-transform: uppercase;
    font-weight: 700;
    color: #414141;
    padding-top: 10px;
    margin-bottom: 0
}

.quantity .pro-qty {
    width: 94px;
    height: 36px;
    border: 1px solid #ddd;
    padding: 0 15px;
    border-radius: 40px;
    float: left
}

.quantity .pro-qty .qtybtn {
    width: 15px;
    display: block;
    float: left;
    line-height: 36px;
    cursor: pointer;
    text-align: center;
    font-size: 18px;
    color: #404040
}

.quantity .pro-qty input {
    width: 28px;
    float: left;
    border: none;
    height: 36px;
    line-height: 40px;
    padding: 0;
    font-size: 14px;
    text-align: center;
    background-color: transparent
}

.related-product-section {
    padding-bottom: 70px
}

.related-product-section .section-title h2 {
    font-size: 24px;
    margin-bottom: 60px
}

.scrollbar {
    margin: 80px auto 0;
    width: 100%;
    height: 7px;
    line-height: 0;
    background: #ececec;
    overflow: hidden
}

.scrollbar .handle {
    width: 100px;
    height: 100%;
    background: #fff;
    cursor: pointer
}

.scrollbar .handle .mousearea {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 7px;
    background: #b09d81;
    border-radius: 30px
}

.cart-table {
    padding: 40px 34px 0;
    background: #f0f0f0;
    border-radius: 27px;
    overflow: hidden
}

.cart-table h3 {
    font-weight: 700;
    margin-bottom: 37px
}

.cart-table table {
    width: 100%;
    min-width: 442px;
    margin-bottom: 17px
}

.cart-table table tr th {
    font-size: 12px;
    font-weight: 400;
    color: #414141;
    text-align: center;
    padding-bottom: 25px
}

.cart-table table tr th.product-th {
    text-align: left
}

.cart-table table tr th.size-th {
    padding-right: 70px
}

.cart-table table tr th.quy-th {
    padding-right: 20px
}

.cart-table .product-col {
    display: table;
    margin-bottom: 19px
}

.cart-table .product-col img {
    display: table-cell;
    vertical-align: middle;
    float: left;
    width: 73px
}

.cart-table .product-col .pc-title {
    display: table-cell;
    vertical-align: middle;
    padding-left: 30px
}

.cart-table .product-col .pc-title h4 {
    font-size: 16px;
    color: #414141;
    font-weight: 700;
    margin-bottom: 3px
}

.cart-table .product-col .pc-title p {
    margin-bottom: 0;
    font-size: 16px;
    color: #414141
}

.cart-table .quy-col {
    padding-right: 20px
}

.cart-table .quantity {
    margin-bottom: 0;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.cart-table .quantity .pro-qty {
    width: 80px;
    background: #fff;
    border-color: #fff
}

.cart-table .quantity .pro-qty .qtybtn {
    width: 10px
}

.cart-table .size-col,
.cart-table .total-col {
    text-align: center
}

.cart-table .size-col h4,
.cart-table .total-col h4 {
    font-size: 18px;
    color: #414141;
    font-weight: 400
}

.cart-table .size-col h4 {
    padding-right: 70px
}

.cart-table .total-cost {
    background: #f51167;
    margin: 0 -34px;
    text-align: right;
    padding: 22px 0;
    padding-right: 50px
}

.cart-table .total-cost h6 {
    line-height: 1;
    font-size: 18px;
    font-weight: 700;
    color: #fff
}

.cart-table .total-cost h6 span {
    margin-left: 38px
}

.card-right .site-btn {
    margin-bottom: 14px;
    width: 100%;
    min-height: 57px;
    padding: 23px 47px 14px
}

.promo-code-form {
    position: relative;
    margin-bottom: 14px
}

.promo-code-form input {
    width: 100%;
    height: 58px;
    border: 2px solid #f0f0f0;
    padding-left: 24px;
    padding-right: 100px;
    font-size: 16px;
    border-radius: 80px
}

.promo-code-form button {
    position: absolute;
    right: 24px;
    top: 0;
    height: 100%;
    background-color: transparent;
    border: none;
    text-transform: uppercase;
    font-size: 16px;
    font-weight: 700;
    color: #f51167;
    cursor: pointer
}

.checkout-form .cf-title {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    line-height: 1;
    border-radius: 50px;
    background: #3b3b3b;
    padding: 21px 29px 20px;
    margin-bottom: 66px
}

.checkout-form p {
    font-size: 16px;
    color: #414141
}

.checkout-form h4 {
    font-size: 18px;
    color: #414141
}

.checkout-form input[type=text] {
    width: 100%;
    height: 44px;
    border: none;
    padding: 0 18px;
    background: #f0f0f0;
    border-radius: 40px;
    margin-bottom: 20px;
    font-size: 14px
}

.checkout-form .address-inputs {
    margin-bottom: 54px
}

.address-rb {
    text-align: right;
    margin-bottom: 30px
}

.address-rb .cfr-item {
    display: inline-block
}

.cf-radio-btns .cfr-item {
    margin-bottom: 15px
}

.cf-radio-btns label {
    display: block;
    font-size: 16px;
    color: #414141;
    margin-bottom: 0;
    padding-left: 30px;
    position: relative;
    cursor: pointer
}

.cf-radio-btns label:after {
    position: absolute;
    content: "";
    width: 5px;
    height: 5px;
    left: 4px;
    top: 8px;
    background: #414141;
    border-radius: 50%;
    opacity: 0;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s
}

.cf-radio-btns label:before {
    position: absolute;
    content: "";
    width: 13px;
    height: 13px;
    left: 0;
    top: 4px;
    border: 2px solid #e1e1e1;
    border-radius: 40px
}

.cf-radio-btns input[type=radio] {
    visibility: hidden;
    position: absolute
}

.cf-radio-btns input[type=radio]:checked+label:after {
    opacity: 1
}

.Delivery-btns {
    margin-bottom: 50px
}

.Delivery-btns .cf-radio-btns label {
    font-size: 18px;
    font-weight: 600;
    padding-left: 37px
}

.payment-list {
    list-style: none;
    margin-bottom: 40px
}

.payment-list li {
    font-size: 18px;
    font-weight: 600;
    color: #414141;
    margin-bottom: 20px
}

.payment-list li a,
.payment-list li span {
    padding-left: 40px
}

.submit-order-btn {
    width: 100%;
    min-height: 58px
}

.checkout-cart {
    background: #f0f0f0;
    padding: 40px 24px 30px;
    border-radius: 25px
}

.checkout-cart h3 {
    margin-bottom: 30px
}

.checkout-cart .product-list {
    list-style: none
}

.checkout-cart .product-list li {
    overflow: hidden;
    display: block;
    margin-bottom: 29px
}

.checkout-cart .product-list .pl-thumb {
    float: left;
    overflow: hidden;
    margin-right: 22px;
    width: 99px
}

.checkout-cart .product-list .pl-thumb img {
    min-width: 100%
}

.checkout-cart .product-list h6 {
    font-weight: 700;
    color: #414141;
    padding-top: 15px;
    margin-bottom: 5px
}

.checkout-cart .product-list p {
    font-size: 16px;
    margin-bottom: 0
}

.checkout-cart .price-list {
    padding-left: 17px;
    padding-right: 5px;
    list-style: none
}

.checkout-cart .price-list li {
    overflow: hidden;
    display: block;
    font-size: 18px;
    color: #414141;
    margin-bottom: 10px
}

.checkout-cart .price-list li span {
    float: right;
    width: 60px;
    text-align: left
}

.checkout-cart .price-list li.total {
    padding-top: 35px;
    font-weight: 700
}

.contact-section {
    padding-top: 80px;
    padding-bottom: 0;
    position: relative
}

.contact-info h3 {
    margin-bottom: 50px
}

.contact-social {
    display: -ms-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 85px;
    padding-top: 20px
}

.contact-social a {
    display: -ms-inline-flex;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    width: 32px;
    height: 32px;
    background: #f0f0f0;
    color: #414141;
    font-size: 14px;
    border-radius: 50%;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-right: 12px;
    -webkit-transition: all .4s;
    -o-transition: all .4s;
    transition: all .4s
}

.contact-social a:hover {
    color: #fff;
    background: #f51167
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    height: 44px;
    border: none;
    padding: 0 18px;
    background: #f0f0f0;
    border-radius: 40px;
    margin-bottom: 17px;
    font-size: 14px
}

.contact-form textarea {
    padding-top: 16px;
    border-radius: 18px;
    height: 175px;
    margin-bottom: 32px
}

.map {
    position: absolute;
    width: calc(50% - 15px);
    height: 100%;
    right: 0;
    top: 0;
    background: #ddd
}

.map iframe {
    width: 100%;
    height: 100%
}

@media (min-width:1200px) {
    .container {
        max-width: 1175px
    }
}

@media (max-width:1350px) {
    .product-slider .owl-nav {
        position: relative;
        left: 0;
        top: 0;
        text-align: center;
        padding-top: 20px
    }

    .product-slider .owl-nav button.owl-next,
    .product-slider .owl-nav button.owl-prev {
        float: none;
        left: 0;
        right: 0;
        margin: 0 10px
    }
}

@media only screen and (min-width:992px) and (max-width:1199px) {
    .hero-slider .slider-nav-warp {
        max-width: 930px
    }

    .footer-widget ul {
        margin-right: 5px
    }
}

@media only screen and (min-width:768px) and (max-width:991px) {
    .header-search-form {
        margin-bottom: 15px
    }

    .user-panel {
        text-align: center
    }

    .main-menu {
        text-align: left
    }

    .sub-menu {
        text-align: left
    }

    .hero-slider .slider-nav-warp {
        max-width: 690px
    }

    .hero-slider .hs-item .offer-card {
        top: 20px
    }

    .feature h2 {
        font-size: 18px
    }

    .product-filter-menu {
        text-align: center
    }

    .product-filter-menu li {
        margin: 0 5px 10px
    }

    .social-links {
        text-align: center
    }

    .social-links a {
        margin-right: 20px
    }

    .social-links a span {
        display: none
    }

    .cart-table,
    .checkout-cart,
    .product-thumbs {
        margin-bottom: 50px
    }

    .map {
        position: relative;
        width: 100%;
        background: #ddd;
        height: 400px;
        margin-top: 70px
    }
}

@media only screen and (max-width:767px) {
    .site-logo {
        margin-bottom: 20px;
        position: fixed;
        z-index: 99;
        -webkit-transform: translateZ(0)
    }

    .header-top .header-search-form {
        margin-bottom: 15px;
        font-size: 12px
    }

    .user-panel {
        text-align: center
    }

    .main-menu {
        display: none
    }

    .slicknav_btn {
        background-color: transparent
    }

    .slicknav_menu {
        background: #282828;
        display: block;
/*        position: fixed;*/
        z-index: 99;
        left: 0;
        right: 0;
        -webkit-transform: translateZ(0)
    }

    .header-top {
        margin-top: 80px
    }

    .slicknav_menu .new {
        font-size: 10px;
        font-weight: 700;
        color: #fff;
        background: #f51167;
        line-height: 1;
        text-transform: uppercase;
        padding: 5px 9px 1px;
        border-radius: 15px;
        width: 42px;
        margin-left: 5px
    }

    .hero-slider .slider-nav-warp {
        max-width: 510px
    }

    .hero-slider .hs-item h2 {
        font-size: 50px
    }

    .hero-slider .hs-item .offer-card {
        display: none
    }

    .product-filter-menu {
        text-align: center
    }

    .product-filter-menu li {
        margin: 0 2px 10px
    }

    .footer-widget ul {
        margin-right: 25px
    }

    .social-links {
        text-align: center
    }

    .social-links a {
        margin-right: 15px
    }

    .social-links a span {
        display: none
    }

    .cart-table,
    .checkout-cart,
    .product-thumbs {
        margin-bottom: 50px
    }

    .cart-table .quy-col,
    .cart-table .size-col h4,
    .cart-table table tr th.quy-th,
    .cart-table table tr th.size-th {
        padding-right: 0;
        width: 70px
    }

    .cart-table .quy-col {
        width: 80px
    }

    .address-rb {
        text-align: left
    }

    .map {
        position: relative;
        width: 100%;
        background: #ddd;
        height: 400px;
        margin-top: 70px
    }
}

@media only screen and (min-width:576px) and (max-width:766px) {
    .hero-slider .slider-nav-warp {
        padding: 0 15px
    }

    .banner .tag-new {
        position: relative;
        display: inline-block;
        margin-bottom: 18px;
        right: 0;
        top: 0
    }
}

@media only screen and (max-width:479px) {
    .hero-slider .slider-nav-warp {
        max-width: 510px;
        padding: 0 15px
    }

    .hero-slider .hs-item h2 {
        font-size: 35px
    }

    .hero-slider .hs-item .sb-line {
        margin-bottom: 15px
    }

    .section-title h2 {
        font-size: 28px
    }

    .feature h2 {
        font-size: 18px
    }

    .banner .tag-new {
        position: relative;
        display: inline-block;
        margin-bottom: 18px;
        right: 0;
        top: 0
    }

    .social-links {
        text-align: center;
        margin: 0 auto;
        float: right
    }

    .social-links a i {
        font-size: 20px;
        margin-right: 0
    }

    .social-links a span {
        display: none
    }

    .social-links img {
        width: 50px
    }
}

.form-control {
    border-radius: 0;
    background-clip: border-box
}

#subscribe input[type=email] {
    padding: 10px;
    border: none;
    float: left;
    width: 70%;
    font-size: 14px;
    background: #fff
}

#subscribe button {
    text-align: center;
    float: left;
    width: 30%;
    padding: 10px;
    background: #2aaae3;
    color: #fff;
    font-size: 14px;
    border-radius: 0;
    border: none;
    cursor: pointer
}

#subscribe button:hover {
    background-color: #0b7dda;
    color: #fff
}

#promocode input[type=text] {
    padding: 4px 20px;
    border: none;
    float: left;
    width: 70%;
    font-size: 14px;
    background: #fff;
    border: 1px solid #ddd
}

#promocode button {
    text-align: center;
    float: left;
    width: 30%;
    padding: 5px;
    background: #2aaae3;
    border: 1px solid #2aaae3;
    border-left: none;
    color: #fff;
    font-size: 14px;
    border-radius: 0;
    border: none;
    cursor: pointer
}

#promocode button:hover {
    background-color: #0b7dda;
    color: #fff
}

.footer-section,
.footer-widget,
.footer-widget p,
.footer-widget ul li a {
    color: #fff !important
}

.p10 {
    padding: 10px 0
}

p.text-white {
    font-size: 13px;
    line-height: 1.5em
}

.addline {
    color: #fff;
    padding: 0;
    margin: 10px 0
}

.copyright {
    font-family: Roboto, sans-serif;
    font-weight: 200;
    margin: 20px 0
}

label.wtext {
    color: #fff !important
}

.bordertb {
    border-top: 1px solid rgba(255, 255, 255, .2);
    border-bottom: 1px solid rgba(255, 255, 255, .2);
    padding: 10px 0
}

.bordertb span {
    font-size: 12px;
    float: left;
    white-space: nowrap;
    line-height: 2em
}

.footer-logo img {
    width: 200px;
    margin: 0 auto
}

.btn-primary {
    border-radius: 0;
    font-size: 12px;
    background-color: #1c1363;
    border: 1px solid #1c1363
}

.dropdown-menu {
    font-size: 12px
}

.header-search-form input {
    width: 100%;
    padding: 5px 10px
}

.dropbtn {
    background-color: #251c69;
    color: #fff;
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    display: block;
    width: 100%;
    text-align: left
}

.f-right {
    float: right
}

.dropbtn:focus,
.dropbtn:hover {
    background-color: #251c69
}

.dropdown {
    position: relative;
    display: inline-block;
    width: 100%;
    text-align: left;
    margin-bottom: 5px
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #fff;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, .2);
    z-index: 99
}

.dropdown-content a {
    color: #333;
    padding: 10px 16px;
    text-decoration: none;
    font-size: 14px;
    display: block;
    border-bottom: 1px solid #dadada;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow-x: hidden
}

.dropdown a:hover {
    background-color: #ddd
}

.show {
    display: block
}

#bannerzone {
    width: 100%;
    z-index: 2;
    margin: -50px 0 50px 0
}

.catbox {
    padding: 0 0 30px 0;
    position: relative
}

.catbox h2 {
    font-weight: 500;
    font-size: 22px;
    color: #333
}

.catbox h3 {
    font-family: Roboto, sans-serif;
    font-size: 14px;
    padding: 5px 0;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #333;
    font-weight: 400
}

.catbox2 {
    padding: 0 0 30px 0;
    position: relative
}

.price {
    color: #333
}

.catbox2 h2 {
    font-weight: 500;
    font-size: 22px;
    margin-top: 30px;
    color: #333
}

.catbox2 h3 {
    font-family: Roboto, sans-serif;
    font-size: 14px;
    padding: 5px 0;
    text-transform: uppercase;
    color: #333;
    font-weight: 400
}

.btn-all {
    background-color: #eaeaea;
    padding: 8px 20px;
    border-radius: 30px;
    font-size: 14px;
    float: right;
    color: #333
}

.btn-all:hover {
    background-color: #251c69;
    color: #fff;
    transition: all ease-in-out .5s
}

.btn-all span {
    border-radius: 30px;
    background-color: #999;
    color: #fff;
    font-weight: 500;
    font-size: 13px
}

.btn-all:hover span {
    background-color: #fff;
    color: #251c69;
    font-weight: 500
}

.leftbox {
    padding: 30px 50px;
    position: relative
}

.leftbox a {
    float: left !important;
    position: absolute;
    bottom: 20px
}

.leftbox h2 {
    font-weight: 500;
    color: #333
}

.leftbox h3 {
    font-family: Roboto, sans-serif;
    font-size: 14px;
    padding: 5px 0;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #333;
    font-weight: 400
}

.rightbox {
    padding: 0 50px 20px 50px;
    position: relative
}

.rightbox img {
    margin-bottom: 10px;
    border: 1px solid #eaeaea
}

.catpad1 {
    background: #2aaae2 url(../images/padcate01.png) no-repeat right top
}

.catpad2 {
    background: #d3ad81 url(../images/padcate02.png) no-repeat right top
}

.badge {
    border-radius: 30px;
    background-color: #333;
    color: #fff;
    font-weight: 500
}

.pt30 {
    margin-top: 30px
}

.curvebox {
    border-radius: 10px;
    box-shadow: 0 -10px 16px 0 rgba(0, 0, 0, .3)
}

.curvebox2 {
    border-radius: 20px;
    box-shadow: 0 0 5px 1px rgba(0, 0, 0, .2);
    padding: 30px
}

.curvebox3 {
    border-radius: 20px;
    border: 1px solid #eaeaea;
    padding: 0;
    width: 100%;
    overflow: hidden
}

@media(max-width:766px) {
    .curvebox3 {
        border-radius: 0;
        box-shadow: none;
        border: 1px solid #eaeaea;
        margin: 0;
        padding: 0
    }
}

.nopad {
    padding: 0 !important;
    margin: 0 !important
}

.curvebox .item img,
.curvebox2 .item img,
.rightbox .item img {
    width: 100%;
    height: auto
}

.curvebox2 .item p,
.rightbox .item p {
    font-size: 14px;
    text-align: center;
    line-height: 1.2em;
    font-weight: 800
}

.curvebox2 .item p span,
.rightbox .item p span {
    font-size: 12px;
    font-weight: 400;
    display: block;
    font-family: Roboto, sans-serif;
    margin-top: 2px
}

.curvebox3 .item small {
    display: block;
    background: #2c527e;
    padding: 3px;
    border-radius: 20px;
    color: #fff;
    text-align: center;
    font-size: 12px;
    text-transform: uppercase
}

.curvebox2 .item img {
    border: 1px solid #eaeaea;
    margin-bottom: 10px
}

@media(max-width:766px) {
    #bannerzone {
        margin: -20px 0 80px 0;
        box-shadow: 0 -10px 6px 0 rgba(0, 0, 0, .3)
    }
}

.catbox .owl-dots {
    position: absolute;
    bottom: 0;
    left: 50%;
    z-index: 99
}

#promobanner .owl-dots {
    position: absolute;
    bottom: -40px;
    left: 50%;
    z-index: 99
}

.owl-prev {
    position: absolute;
    top: 20%;
    margin-left: -25px;
    display: block !important;
    border: 0 solid #000
}

.owl-next {
    position: absolute;
    top: 20%;
    right: -25px;
    display: block !important;
    border: 0 solid #000
}

.owl-next span,
.owl-prev span {
    font-size: 45px;
    font-weight: lighter;
    color: #ccc
}

.price {
    font-size: 1.2em !important;
    color: #f01;
    text-align: right;
    padding: 0 10px;
    font-weight: 800 !important;
    font-family: Roboto, sans-serif !important
}

.price:after {
    content: " บาท";
    font-size: 12px;
    font-family: Prompt, sans-serif !important
}

::-webkit-input-placeholder {
    font-family: Prompt, sans-serif !important
}

:-ms-input-placeholder {
    font-family: Prompt, sans-serif !important
}

::placeholder {
    font-family: Prompt, sans-serif !important
}

.prodlist .price {
    text-align: left
}

.prodlist {
    margin: 20px 0
}

.prodlist .row {
    margin-bottom: 20px
}

.prodlist h3 {
    font-size: 14px;
    font-family: Prompt, sans-serif;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    padding: 0
}

.cropnews {
    width: 100%;
    overflow: hidden
}

.btnround {
    padding: 8px 20px;
    background: #2aaae3;
    color: #fff
}

#secservice {
    position: relative
}

.bgcurve {
    background: url(../images/bgservice.jpg) no-repeat 50% 50%;
    background-size: cover;
    width: 100%;
    padding: 30px 60px;
    margin-bottom: 20px !important;
    position: relative
}

.bgcurve h2,
.bgcurve h3 {
    color: #fff;
    font-weight: 400;
    display: block;
    line-height: 1em
}

.bgcurve h3.en {
    font-family: Roboto, sans-serif !important;
    font-size: 30px;
    text-transform: uppercase;
    font-weight: 300
}

.bgcurve h3 {
    font-size: 18px;
    line-height: 1.5em;
    display: block;
    vertical-align: bottom
}

.linepattern {
    width: 100%;
    height: 10px;
    display: block;
    margin: 10px 0;
    background: url(../images/linepatten.svg) repeat-x
}

@media(max-width:766px) {
    .bgcurve {
        padding: 20px
    }
}

.btnround {
    display: inline-block;
    font-size: 16px;
    padding: 5px 40px;
    font-weight: 400 !important;
    color: #fff;
    text-align: center;
    margin: 50px auto 30px auto;
    z-index: 3
}

.btnround:hover {
    color: #333
}

.bordertop {
    border-top: 1px solid #eaeaea;
    padding: 10px 0;
    margin: 10px 0
}

.bordertop .badge {
    font-family: Roboto, sans-serif !important;
    padding: 8px 20px;
    font-size: 12px;
    width: 100%;
    margin-bottom: 5px
}

.bordertop a {
    display: block;
    background: #2c527e;
    padding: 10px 20px;
    color: #fff;
    text-align: center;
    font-size: 12px;
    text-transform: uppercase;
    width: 100%;
    margin-bottom: 5px
}

.swap {
    padding: 0 20px !important
}

.swap .badge {
    background-color: #999
}

.swap h2,
.swap h3 {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

@media(max-width:766px) {
    html {
        overflow-x: hidden
    }

    .btn-all,
    .leftbox a {
        position: relative;
        bottom: auto;
        margin-top: 20px;
        float: left !important
    }

    .owl-dots {
        position: relative !important;
        display: none
    }

    .curvebox3 {
        margin: 0
    }
}

.space {
    padding: 0
}

@media(max-width:767px) {
    .space {
        padding: 20px 0
    }
}

.overlay {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0
}

.centerelement {
    position: absolute;
    bottom: 10px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%)
}

#pageheader {
    width: 100%;
    height: auto;
    position: relative;
    background: url(../images/bghero.jpg) no-repeat 50% 0
}

.pagetitle {
    padding: 40px 0
}

#pageheader .pagetitle h1 {
    font-size: 35px;
    text-align: center;
    color: #fff;
    font-weight: 500;
    text-shadow: 0 2px 4px rgba(0, 0, 0, .48)
}

#pageheader .pagetitle h2 {
    font-size: 22px;
    text-align: center;
    text-transform: uppercase;
    color: #fff;
    font-weight: 300
}

@media(max-width:480px) {
    .pagetitle {
        padding: 20px 0
    }

    #pageheader .pagetitle h1 {
        font-size: 30px
    }
}

.categoryset {
    list-style: none;
    width: 100%;
    padding: 0;
    margin: 20px 0 0 0
}

.categoryset2 {
    list-style: none;
    width: 100%;
    padding: 0;
    margin: 0
}

.categoryset li {
    text-align: center;
    margin-right: 26px;
    display: inline-block;
    float: left;
    width: calc(100% / 10)
}

.categoryset2 li {
    width: calc(100%/3);
    border: 1px solid #eaeaea;
    padding: 5px;
    margin: 0 0 0 -1px;
    display: inline-block;
    float: left
}

@media(max-width:992px) {
    .categoryset2 li {
        width: 100%
    }
}

.categoryset li p {
    line-height: 1.2em;
    padding: 10px 0;
    font-weight: 800
}

.categoryset2 li div {
    line-height: 1.2em;
    font-weight: 800;
    text-align: left;
    padding: 10px;
    width: 100%;
    float: none;
    color: #333;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.categoryset li p span {
    display: block;
    font-weight: 300
}

.categoryset2 li div span {
    font-weight: 300;
    width: 100%;
    display: inline-block
}

span.new,
span.pro {
    background-color: green;
    color: #fff;
    border-radius: 20px;
    padding: 0 10px;
    text-align: center;
    font-size: 11px;
    width: auto !important;
    margin: 5px 0;
    text-transform: uppercase
}

.jq-tab-title span.new,
.jq-tab-title span.pro {
    float: none !important;
    display: inline-block;
    margin-left: 5px
}

.jq-tab-title.active,
.jq-tab-title:hover,
.tab button.active {
    background-color: #dadada;
    border: 1px solid #dadada
}

span.new {
    background-color: #900
}

span.pro:after {
    content: 'Pro';
    text-transform: uppercase
}

span.new:after {
    content: 'New';
    text-transform: uppercase
}

.categoryset li img {
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .1)
}

.breadcrumb {
    display: inline-block;
    background-color: transparent;
    padding: 0 20px 0 0;
    font-size: 14px;
    width: 100%;
    white-space: nowrap;
    overflow-x: auto;
    display: block;
    -webkit-overflow-scrolling: touch
}

.breadcrumb-item {
    display: inline-block
}

.breadcrumb-item+.breadcrumb-item::before {
    content: "\f105";
    font-family: FontAwesome;
    color: #333;
    margin: 0 10px
}

.breadcrumb a {
    color: #666
}

.breadcrumb-item.active {
    color: #2aaae3 !important
}

.controlbar {
    margin: 40px 0
}

.controlbar .dropbtn {
    background-color: #eaeaea;
    color: #333
}

.controlbar span {
    display: inline
}

.mtspace {
    padding: 40px;
    margin-top: 20px !important
}

@media(max-width:992px) {

    .controlbar .dropbtn,
    .controlbar .dropdown {
        width: 100%
    }

    #checkout {
        margin-top: 0
    }
}

.proname img {
    display: inline-block;
    float: left;
    padding-right: 20px
}

.proname h3 {
    font-weight: 800;
    font-size: 22px
}

.proname h2 {
    font-size: 22px;
    font-weight: 500;
    float: left;
    display: inline-grid
}

.proname h2 span {
    font-family: Roboto, sans-serif !important;
    font-size: 16px !important;
    display: block;
    float: left !important
}

.proname p {
    font-family: Roboto, sans-serif;
    font-size: 16px
}

.tabboxcontrol h4 {
    font-size: 18px;
    font-weight: 500;
    margin: 20px 0
}

.icocontrol img {
    width: 75px;
    float: right
}

.dropdown-toggle::after {
    content: "\f114";
    font-family: Flaticon;
    float: right;
    border: none !important
}

.dropdown-menu {
    width: 100%;
    position: absolute;
    background-color: #fff;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, .2);
    z-index: 99;
    padding: 0;
    margin: 0
}

.dropdown-item {
    color: #333;
    padding: 10px 16px;
    text-decoration: none;
    font-size: 14px;
    display: block;
    border-bottom: 1px solid #dadada;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow-x: hidden
}

.dropdown-item:last-child {
    border-bottom: none
}

#mobilenav {
    display: none
}

@media(max-width:767px) {
    #mobilenav {
        display: block;
        position: fixed;
        -webkit-transform: translateZ(0);
        bottom: 0;
        left: 0;
        right: 0;
        background: #fff;
        padding: 10px 0;
        z-index: 99;
        box-shadow: 0 0 2px 2px rgba(0, 0, 0, .2)
    }

    #mobilenav ul {
        list-style: none;
        margin: 0;
        padding: 0
    }

    #mobilenav li {
        display: inline-block;
        float: left;
        width: 33.333%;
        text-align: center;
        transition: all ease-in-out .7s;
        font-weight: 500;
        font-size: 14px
    }

    #mobilenav li img {
        width: 40px;
        height: auto;
        padding: 0;
        margin: 0 auto
    }

    #mobilenav li.active,
    #mobilenav li:hover {
        opacity: 1
    }

    #mobilenav span {
        display: block;
        margin: 0;
        padding: 0;
        color: #333;
        vertical-align: middle
    }

    #mobilenav span.num {
        color: #fff !important;
        border-radius: 48%;
        background-color: red;
        width: 25px;
        height: 25px;
        line-height: 2.5em;
        overflow: hidden;
        position: absolute;
        text-shadow: 1px 1px 2px #000;
        top: 0;
        right: -10px;
        white-space: nowrap;
        font-size: 11px
    }
}

.prodetail h1 {
    font-size: 30px !important;
    font-weight: 500
}

.prodetail h2 {
    font-size: 18px !important;
    font-weight: 400
}

.prodetail h3 {
    font-size: 16px !important;
    margin-bottom: 10px;
    font-weight: 400
}

.prodetail p {
    font-size: 12px !important;
    font-weight: 400
}

.prodetail table tr {
    text-align: center
}

.prodetail table th {
    background-color: #eee;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 12px;
    text-align: center
}

.prodetail table td {
    text-align: center
}

.btnnormal {
    background-color: #251c69;
    color: #fff;
    padding: 5px 20px;
    min-width: 150px;
    border: 1px solid #251c69
}

.btnnormal img {
    width: 30px;
    vertical-align: middle
}

.btnactive {
    background-color: #eaeaea;
    color: #251c69;
    padding: 5px 20px;
    min-width: 150px;
    border: 1px solid #251c69
}

.breadcrumb .dropdown {
    display: inline !important;
    width: auto !important
}

.proname h3 {
    display: block
}

.proname h4 {
    font-size: 12px;
    font-weight: 400;
    display: block;
    float: left
}

.goog-te-gadget .goog-te-combo {
    margin: 30px 0 0 0 !important;
    width: 300px !important;
    padding: 5px !important
}

.skiptranslate {
    width: 100% !important;
    height: 80px !important;
    display: inline-block !important
}

.curvebox2 h3 {
    font-weight: 500 !important
}

#ordertable {
    margin-top: 30px
}

#notification {
    position: fixed;
    -webkit-transform: translateZ(0);
    overflow: hidden;
    bottom: -50%;
    top: auto;
    left: 0;
    right: 0;
    width: 100%;
    padding: 20px 0;
    z-index: 999;
    background-color: rgba(2, 81, 198, .8);
    display: block;
    transition: top .3s cubic-bezier(.17, .04, .03, .94);
    text-align: center
}

#notification.active {
    bottom: 0
}

#notification.disactive {
    bottom: -50%
}

@media(max-width:480px) {
    #notification {
        height: auto
    }
}

#notification h3 {
    font-size: 25px;
    font-weight: 400;
    color: #fff
}

#notification p {
    font-size: 16px;
    font-weight: 400 !important;
    margin-top: 30px;
    color: #fff
}

#notification p a,
#notification p a:hover {
    color: #ff0
}

#btnaccept {
    background-color: #333;
    color: #fff;
    border: 1px solid #333;
    padding: 5px 20px;
    min-width: 100px;
    border-radius: 0;
    display: inline
}

#closenoti {
    color: #fff;
    font-family: Helvetica;
    background-color: transparent;
    border: none;
    position: absolute;
    top: 20px;
    font-size: 20px;
    font-weight: lighter;
    right: 20px
}

.remarks {
    font-size: 12px !important;
    font-family: Prompt, sans-serif
}

.remarks i {
    color: #333
}

.btn_me {
    font-family: Roboto, sans-serif;
    text-align: center;
    display: block;
    font-size: 12px;
    width: 100%;
    color: #333;
    margin: 10px 0;
    padding: 10px 20px;
    border: 1px solid #dadada;
    text-transform: uppercase;
    white-space: nowrap;
    text-overflow: ellipsis
}

.btn_normal {
    font-family: Prompt, sans-serif !important;
    text-align: center;
    display: inline;
    font-size: 14px;
    color: #333;
    padding: 10px;
    border: 1px solid #dadada;
    text-transform: uppercase
}

.loginform label {
    white-space: nowrap;
    text-overflow: ellipsis
}

@media(max-width:480px) {
    .loginform label {
        white-space: normal
    }
}

.btn_google,
.btn_google:hover {
    background-color: #fff
}

.btn_line,
.btn_line:hover {
    background-color: #00b900;
    color: #fff;
    font-size: 14px !important
}

.btn_facebook,
.btn_facebook:hover {
    background-color: #3b5998;
    color: #fff;
    font-size: 14px !important
}

.btn_email,
.btn_email:hover {
    background-color: #db46a0;
    color: #fff;
    font-size: 14px !important
}

.btn_login,
.btn_login:hover {
    background-color: #2aaae3;
    color: #fff
}

.selectcustom {
    padding: 5px 10px;
    font-family: Prompt, sans-serif !important;
    font-size: 12px !important;
    color: #495057 !important;
    width: 100%;
    border: 1px solid #dadada;
    background: 0 0
}

input[type=email],
input[type=password],
input[type=text] {
    font-family: Prompt, sans-serif;
    font-size: 14px
}

a:hover {
    text-transform: none !important
}

.th {
    font-family: Prompt, sans-serif !important;
    font-size: 14px !important;
    line-height: 2em
}

textarea {
    width: 100%;
    border: 1px solid #dadada;
    padding: 10px;
    outline: 0;
    resize: none;
    font-size: 12px !important
}

#cpatchaTextBox {
    border: 1px solid #dadada;
    background-color: #eee;
    width: 100%
}

label {
    display: block
}

#captcha {
    cursor: pointer;
    width: 100%;
    margin: 5px 0
}

.alert {
    width: 100%;
    display: block
}

.alert h3 {
    font-size: 20px
}

.alert p {
    font-size: 14px
}

.btnlinks {
    background: transparent none;
    border: none;
    display: inline-block;
    font-size: 12px;
    text-decoration: underline
}

.loginform label {
    display: inline-block
}

input,
select,
textarea {
    color: #333 !important
}

.btn-order {
    background-color: #262161;
    text-align: center;
    color: #fff;
    border: none;
    border-radius: 0;
    padding: 10px;
    margin: 0 auto;
    font-size: 14px;
    display: block;
    width: 100%;
    transition: all ease-in-out .2s;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-family: Prompt, sans-serif !important
}

.btn-order:focus,
.btn-order:hover {
    color: #fff
}

.btn-order img {
    width: 15px;
    height: 15px;
    vertical-align: middle;
    margin-right: 2px
}

.btn-order.disible,
.btn-order.disible:focus,
.btn-order.disible:hover {
    background: #eaeaea none !important;
    cursor: default !important;
    color: #333 !important
}

.btn-order.disible img {
    width: 18px;
    height: 18px;
    vertical-align: middle;
    margin-right: 10px
}

.subimage img {
    cursor: grab;
    transform: scale(1, 1);
    transition: all ease-in-out .6s
}

.subimage img:hover {
    transform: scale(1.1, 1.1);
    filter: invert(10%)
}

.kpm_content_wrapper {
    display: none !important
}

.ZebraDialog_Buttons a {
    border-radius: 0 !important
}

section.contents {
    padding: 0 0 80px 0
}

section.contents h2 {
    font-size: 30px
}

section.contents h3 {
    font-size: 22px;
    font-weight: 500;
    margin: 20px 0
}

.bgshadow {
    box-shadow: 2px 2px 8px rgba(0, 0, 0, .8)
}

.colorbox {
    background-color: #f8f9fa !important;
    border-radius: 30px;
    overflow: hidden
}

.paddwrong {
    display: block;
    padding: 30px
}

.paddwrong p {
    text-align: justify;
    font-size: 14px
}

.en {
    font-family: Roboto, sans-serif
}

.guidebox {
    padding: 10px 20px !important;
    border-radius: 8px !important
}

.sitemap {
    padding: 10px 30px
}

.sitemap h2 {
    font-size: 20px !important;
    margin: 20px 0;
    font-weight: 500;
    color: #333;
    border-bottom: 4px dotted #dadada;
    padding-bottom: 10px
}

.sitemap ul {
    list-style: none
}

.sitemap li {
    list-style: none;
    color: #333;
    padding: 0 0 10px 0
}

.sitemap li a {
    color: #333;
    -webkit-transition: all .25s;
    -moz-transition: all .25s;
    -ms-transition: all .25s;
    -o-transition: all .25s;
    transition: all .25s
}

.sitemap li a:before {
    content: "\f105";
    font-family: FontAwesome;
    padding-right: 10px
}

.sitemap li a:hover {
    color: #251c69
}

.sitemap li a:hover::before {
    content: "\f178";
    font-family: FontAwesome
}

.flexcenter {
    position: relative
}

.flexcenter img {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

@media(max-width:480px) {
    .flexcenter img {
        position: relative;
        top: 0;
        left: 0;
        margin-bottom: 30px;
        -webkit-transform: none;
        -moz-transform: none;
        -ms-transform: none;
        -o-transform: none;
        transform: none
    }
}

#ordersteps {
    width: 100%
}

.stepbox {
    display: inline-block;
    width: 16%;
    position: relative;
    padding-right: 30px
}

@media(max-width:992px) {
    .stepbox {
        width: 30%
    }
}

.stepbox:after {
    position: absolute;
    top: 40%;
    right: 0;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    display: block;
    content: ' ';
    background-image: url(../images/dotarrow_right.svg);
    background-size: 28px 28px;
    height: 28px;
    width: 28px
}

.stepbox:last-child::after {
    background-image: none
}

.stepbox p {
    font-size: 12px !important;
    font-weight: 500;
    text-align: center;
    line-height: 1em;
    display: table
}

#detailstep p {
    font-size: 12px
}

#bankstep p {
    font-size: 16px !important;
    font-weight: 500;
    line-height: 1.5em;
    color: #333;
    margin-bottom: 0
}

#bankstep h1 {
    font-size: 30px !important;
    font-weight: 500;
    margin-bottom: 40px;
    color: #333
}

#bankstep h2 {
    font-size: 22px !important;
    font-weight: 800;
    color: #333
}

#bankstep h3 {
    font-family: Roboto, sans-serif;
    font-size: 22px !important;
    font-weight: 800;
    letter-spacing: 1px;
    line-height: 1.2em;
    margin: 0;
    color: #333
}

.accnumber:before {
    content: 'เลขที่บัญชี';
    letter-spacing: 0;
    font-family: Prompt, sans-serif !important;
    font-size: 12px;
    font-weight: 400 !important;
    margin-right: 10px
}

.accname:before {
    content: 'ชื่อบัญชี';
    letter-spacing: 0;
    font-family: Prompt, sans-serif !important;
    font-size: 12px;
    font-weight: 500 !important;
    margin-right: 10px
}

#bankstep h4 {
    font-size: 18px;
    font-weight: 500;
    margin: 0;
    color: #333
}

.vercenter {
    position: relative
}

.vercenter div {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%)
}

@media(max-width:992px) {
    .vercenter div {
        position: relative;
        top: 0;
        -webkit-transform: none;
        -moz-transform: none;
        -ms-transform: none;
        -o-transform: none;
        transform: none
    }
}

.mb20 {
    margin-bottom: 50px !important
}

.iconbk {
    margin-bottom: 30px
}

.stepbox2 {
    width: 100%
}

.stepbox2>h2 {
    width: 100%
}

.stepbox2 h4 {
    display: block
}

.stepbox2 ol {
    counter-reset: item
}

.stepbox2 ol li {
    display: block;
    list-style-position: inside;
    margin-bottom: 20px;
    font-weight: 600;
    font-size: 18px
}

.stepbox2 ol li:before {
    content: counters(item, ".") " ";
    counter-increment: item
}

.stepbox2 ol li li {
    margin-left: 20px;
    font-weight: 500;
    font-size: 16px
}

.stepbox2 ol li li li {
    margin-left: 20px;
    font-weight: 400;
    font-size: 14px
}

.img-inline {
    display: block;
    margin: 30px auto
}

.ZebraDialog_Buttons {
    text-align: center;
    text-transform: uppercase
}

.ZebraDialog_Buttons a {
    background-color: #262161;
    font-weight: 400
}

.ZebraDialog_Buttons a:first-child {
    margin-right: 20px !important;
    background-color: #333
}

div.ready {
    font-size: 14px !important;
    border-radius: 50px !important;
    background-color: #eaeaea !important;
    color: #333 !important;
    display: inline-block !important;
    padding: 2px 20px !important;
    font-weight: 500 !important;
    margin: 10px 0 !important;
    font-family: Prompt, sans-serif !important;
    border: none !important
}

.contentsort {
    padding: 10px 20px;
    border: 1px solid #dadada;
    background-color: #fff;
    margin-bottom: 20px;
    font-size: 12px;
    font-family: Prompt, sans-serif !important;
    width: 200px
}

.crophover {
    position: relative
}

.crophover .overlay {
    background-color: rgba(0, 0, 0, 0);
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0
}

.crophover:hover .overlay {
    background-color: rgba(0, 0, 0, .5);
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -ms-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out
}

.crophover .overlay i {
    position: absolute;
    left: 50%;
    top: 100%;
    color: transparent;
    display: block;
    font-size: 2em;
    -webkit-transform: translate(-50%, -50%) scale(1, 1);
    -moz-transform: translate(-50%, -50%) scale(1, 1);
    -ms-transform: translate(-50%, -50%) scale(1, 1);
    -o-transform: translate(-50%, -50%) scale(1, 1);
    transform: translate(-50%, -50%) scale(1, 1)
}

.crophover:hover .overlay i {
    color: #fff;
    top: 50%;
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -ms-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
    text-align: center
}

.crophover:hover .overlay i:after {
    content: "รายละเอียด";
    display: block;
    font-size: 16px;
    font-family: Prompt, sans-serif;
    margin-top: 10px
}

.cropnews img:hover {
    -webkit-transform: scale(1.1, 1.1);
    -moz-transform: scale(1.1, 1.1);
    -ms-transform: scale(1.1, 1.1);
    -o-transform: scale(1.1, 1.1);
    transform: scale(1.1, 1.1)
}

,
.cropnews img {
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -ms-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
    -webkit-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    transform: scale(1, 1)
}

.en,
.pagination {
    font-family: Roboto, sans-serif !important
}

.page-item.active .page-link {
    background-color: #2c527e
}

.page-link {
    color: #2c527e;
    border: none !important;
    overflow: hidden;
    white-space: nowrap;
    line-height: 1.2
}

.page-item:last-child .page-link {
    border-radius: 0 !important
}

.blockmessage {
    position: relative;
    text-align: center;
    margin: 0 auto 50px auto;
    border: 1px solid #dadada;
    padding: 30px 40px;
    float: none;
    display: block
}

.btn_standard {
    font-size: 14px;
    color: #fff;
    border: none;
    padding: 10px 30px;
    width: 100%;
    cursor: pointer;
    background-color: #251c69;
    border: 1px solid #251c69;
    transition: all ease-in-out .5s
}

.btn_standard2 {
    font-size: 14px;
    color: #251c69;
    border: none;
    padding: 10px 30px;
    width: 100%;
    cursor: pointer;
    background-color: #dadada;
    border: 1px solid #dadada;
    transition: all ease-in-out .5s
}

.btn_standard3 {
    font-size: 14px;
    color: #007bff;
    border: none;
    padding: 10px 30px;
    width: 100%;
    cursor: pointer;
    background-color: #fff;
    border: 1px solid #007bff;
    transition: all ease-in-out .5s
}

.btn_standard:hover {
    background-color: #333 !important;
    color: #fff !important;
    text-indent: 20px
}

.btn_standard2:hover {
    background-color: #333 !important;
    color: #fff !important;
    text-indent: -20px
}

.btn_standard3:hover {
    background-color: #007bff !important;
    color: #fff !important;
    text-indent: -20px
}

@media(max-width:766px) {
    .blockmessage {
        width: 100%
    }
}

.blockmessage h3 {
    font-size: 20px;
    color: #333;
    text-align: center;
    margin: 0 !important;
    padding: 0
}

.blockmessage p {
    font-size: 12px;
    color: #333;
    text-align: center;
    margin: 0;
    padding: 0
}

.blockmessage button {
    font-family: Prompt, sans-serif !important
}

.boxborder {
    border: 1px solid #dadada;
    padding: 20px;
    margin-bottom: -1px
}

.boxborder2 {
    border: 1px solid #dadada;
    padding: 20px;
    margin-bottom: -1px
}

.shopname {
    font-size: 12px !important;
    color: #333 !important
}

.shopname:before {
    content: "\f1cb";
    font-family: FontAwesome;
    margin-right: 5px
}

.boxborder h3,
.boxborder2 h3 {
    font-size: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #333
}

.boxborder p {
    font-size: 14px !important;
    color: #333;
    line-height: 1.5em !important
}

.boxborder2 p {
    font-size: 14px !important;
    margin-bottom: 0;
    color: #333
}

.boxborder p strong {
    font-family: Roboto, sans-serif !important;
    font-size: 14px !important;
    display: block;
    color: #333
}

.boxborder p strong.th {
    font-family: Prompt, sans-serif !important;
    font-size: 14px !important;
    display: block;
    color: #333
}

.boxborder2 p strong {
    font-size: 14px !important;
    display: inline-block
}

.boxborder2 p span {
    font-size: 14px !important;
    display: block
}

.boxborder4 {
    border: 1px solid #dadada;
    margin: 0 -1px -1px 0;
    padding: 10px
}

.boxborder select,
.boxborder2 select {
    -webkit-appearance: listbox !important;
    -moz-appearance: listbox !important;
    appearance: listbox !important;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 3px;
    box-sizing: border-box;
    color: #333;
    font-size: inherit;
    height: 40px;
    line-height: 1.15;
    padding: 0 16px
}

.boxborder option {
    text-align: center !important
}

.alert-success {
    background: #fff !important;
    border-radius: 0 !important;
    border: 1px solid #dadada;
    color: #333 !important;
    font-weight: 300 !important;
    font-size: 14px !important
}

.alert-success-2 {
    border-radius: 0 !important;
    border: 1px solid #c3e6cb;
    font-weight: 300 !important;
    font-size: 14px !important;
    color: #155724;
    background-color: #d4edda
}

.alert-success-3 {
    border-radius: 0 !important;
    border: 1px solid #425172;
    font-weight: 300 !important;
    font-size: 14px !important;
    color: #28488f;
    background-color: #ddd
}

.pricetxpromo {
    font-size: 22px !important;
    color: #333;
    padding: 0;
    text-align: right
}

.pricetxpromo:before {
    font-size: 13px;
    vertical-align: middle;
    content: "฿"
}

.pricetxcut {
    font-size: 22px !important;
    color: #333;
    padding: 0;
    text-align: right
}

.pricetxcut:before {
    font-size: 13px;
    vertical-align: middle;
    content: "฿"
}

.pricetxperunit {
    font-size: 12px !important;
    color: #333;
    padding: 0;
    text-align: right
}

.pricetx_ds_percent {
    font-size: 12px !important;
    color: #e00e05;
    padding: 0;
    text-align: right
}

.pricetx_default_price {
    text-decoration: line-through;
    font-size: 12px;
    color: #333;
    padding: 0;
    text-align: right
}

.pricetx:before {
    font-size: 14px;
    vertical-align: middle;
    content: "฿"
}

.pricetx {
    font-size: 16px !important;
    text-decoration: line-through;
    color: #333;
    text-align: right;
    font-weight: 400;
    padding: 0
}

.priceDX {
    font-size: 13px !important;
    text-align: right;
    font-weight: 400;
    padding: 0
}

.priceDXUp:before {
    font-size: 13px;
    content: "↑฿"
}

.priceDXUp {
    color: #e00e05
}

.priceDXDn:before {
    font-size: 13px;
    content: "↓฿"
}

.priceDXDn {
    color: green
}

.discount,
.shipFee {
    font-size: 12px !important;
    padding: 10px;
    border: 1px dotted #dadada;
    background-color: #eaeaea;
    color: #333;
    text-align: center;
    margin: 5px 0;
    line-height: 1.3em
}

.fav {
    background-color: transparent;
    border: none;
    color: #333;
    text-align: center;
    font-size: 14px;
    margin: 5px 0;
    padding: 10px;
    border: 1px solid #eaeaea;
    border-radius: 0;
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis
}

.delelemall {
    background: #dadada
}

#sumerybox td {
    font-size: 14px;
    line-height: 3em;
    white-space: nowrap;
    padding: 0;
    margin: 0;
    text-overflow: ellipsis;
    overflow: hidden
}

#sumerybox tr:last-child {
    border-top: 1px solid #ccc;
    border-bottom: 5px double #ccc
}

#sumerybox tr:last-child td:first-child {
    margin: 0;
    padding: 0;
    vertical-align: middle
}

#sumerybox td:last-child {
    text-align: right !important
}

#discount span,
#discount_order span {
    color: #900;
    text-transform: uppercase
}

#Deliveryfee span {
    text-transform: uppercase
}

#totalprice span,
.pricetxcut span,
.pricetxpromo span {
    font-weight: 500;
    font-size: 20px !important;
    font-family: Roboto, sans-serif !important
}

#totalitem span:before {
    content: "("
}

#totalitem {
    margin: 0;
    padding: 0s
}

#totalitem span:after {
    content: ")"
}

#sumerybox td#totalsum span {
    font-size: 25px !important;
    font-weight: 500 !important;
    font-family: Roboto, sans-serif !important
}

#Deliveryfee span:before,
#sumerybox td#totalsum span:before,
#totalprice span:before {
    content: "฿";
    font-weight: 400 !important;
    font-size: 13px !important;
    vertical-align: middle
}

#discount span:before {
    content: "- ฿";
    font-weight: 400 !important
}

#discount_order span:before {
    content: "- ฿";
    font-weight: 400 !important
}

#vatvalue span:before {
    content: "+ ฿";
    font-weight: 400 !important
}

.keepelem {
    background-color: #251c69;
    color: #fff
}

.iconinfo {
    background: none transparent;
    border: none;
    border-radius: 50%;
    border: 1px solid #dadada;
    width: 25px;
    height: 25px;
    padding: 0 3px;
    margin: 0 2px 0 0
}

.iconinfo i {
    color: #666;
    font-size: 15px;
    line-height: 0
}

.popover {
    background-color: #fff;
    font-family: Prompt, sans-serif !important
}

.popover-header {
    font-weight: 400 !important;
    color: #333 !important;
    background-color: transparent;
    font-size: 16px !important;
    border-bottom: 1px solid #dadada !important
}

.bs-popover-auto[x-placement^=right]>.arrow::after,
.bs-popover-right>.arrow::after {
    border-right-color: #fff !important
}

.popover-body {
    font-weight: 400 !important;
    font-size: 12px !important
}

.loginform h2 {
    font-size: 18px !important
}

.bglinecenter {
    background-image: linear-gradient(#eaeaea, #eaeaea);
    background-size: 1px 90%;
    background-repeat: no-repeat;
    background-position: center center
}

.btn50 {
    display: inline-block !important;
    float: left !important;
    width: 50% !important;
    font-size: 16px !important;
    max-width: 130px;
    margin-right: 10px
}

@media(max-width:480px) {
    .btn50 {
        width: 100% !important;
        max-width: 100%
    }
}

.centerV {
    line-height: 3.5em;
    white-space: nowrap;
    text-overflow: ellipsis
}

.btn-group {
    width: 100%
}

.btngroup {
    border: none;
    padding: 10px 20px;
    font-size: 14px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.btngroup2 {
    border: none;
    padding: 10px 20px;
    font-size: 14px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

@media (max-width:992px) {
    .btngroup {
        width: auto;
        margin-bottom: 4px
    }

    .btngroup2 {
        width: auto;
        margin-bottom: 4px
    }
}

.selected {
    padding: 5px 10px !important;
    width: 100% !important;
    position: relative;
    margin-bottom: 10px;
    border: 1px solid #dadada;
    background-color: #fff
}

span.status {
    display: inline-block !important;
    border: 1px solid #dadada;
    padding: 2px 10px;
    border-radius: 30px
}

@media(max-width:992px) {
    span.status {
        display: block !important
    }
}

.statusbox {
    background-color: #eaeaea;
    padding: 5px 20px;
    border-radius: 50px;
    display: inline-block !important
}

.status_cancle:before,
.status_cancle_qua:before,
.status_checking:before,
.status_checking_qua:before,
.status_over_qua:before,
.status_paid:before,
.status_paid_qua:before,
.status_sent:before,
.status_sent_qua:before,
.status_waiting2:before,
.status_waiting3:before,
.status_waiting4:before,
.status_waiting:before {
    content: "\f0a3";
    font-family: FontAwesome;
    color: #820707
}

.status_cancle:after {
    content: " ยกเลิกคำสั่งซื้อ";
    color: #333;
    font-weight: 400
}

.status_waiting:before {
    color: #eb008b
}

.status_waiting:after {
    content: " รอการชำระเงิน";
    color: #333;
    font-weight: 400
}

.status_waiting2:before {
    color: #eb008b
}

.status_waiting2:after {
    content: " รออนุมัติใบเสนอราคา";
    color: #333;
    font-weight: 400
}

.status_waiting3:before {
    color: #eb008b
}

.status_waiting3:after {
    content: " รออนุมัติรายการสั่งซื้อ";
    color: #333;
    font-weight: 400
}

.status_waiting4:before {
    color: #eb008b
}

.status_waiting4:after {
    content: " ไม่อนุมัติรายการสั่งซื้อ";
    color: #333;
    font-weight: 400
}

.status_checking:before {
    color: #f6921e
}

.status_checking:after {
    content: " ตรวจสอบการชำระเงิน";
    color: #333;
    font-weight: 400
}

.status_paid:before {
    color: #00adee
}

.status_paid:after {
    content: " ชำระเงินแล้ว";
    color: #333;
    font-weight: 400
}

.status_sent:before {
    color: #8bc53f
}

.status_sent:after {
    content: " ส่งของแล้ว";
    color: #333;
    font-weight: 400
}

.status_paid_qua:before {
    color: #00adee
}

.status_paid_qua:after {
    content: " อนุมัติจากเจ้าหน้าที่";
    color: #333;
    font-weight: 400
}

.status_sent_qua:before {
    color: #8bc53f
}

.status_sent_qua:after {
    content: " อนุมัติจากลูกค้า";
    color: #333;
    font-weight: 400
}

.status_checking_qua:before {
    color: #f6921e
}

.status_checking_qua:after {
    content: " ไม่อนุมัติจากลูกค้า";
    color: #333;
    font-weight: 400
}

.status_cancle_qua:after {
    content: " ยกเลิกใบเสนอราคา";
    color: #333;
    font-weight: 400
}

.status_over_qua:after {
    content: " เลยกำหนดวันยืนราคา";
    color: #333;
    font-weight: 400
}

.status_over_qua:before {
    color: red
}

.bggray {
    background-color: #333 !important;
    color: #fff !important
}

.bglightgray {
    background-color: #dadada !important;
    color: #333 !important
}

.bggreen {
    background-color: #8bc53f !important;
    color: #fff !important
}

.bgblue {
    background-color: #00adee !important;
    color: #fff !important
}

.bgorange {
    background-color: #f6921e !important;
    color: #fff !important
}

.bgpink {
    background-color: #eb008b !important;
    color: #fff !important
}

.bgpupple {
    background-color: #592670 !important;
    color: #fff !important
}

.bgred {
    background-color: #e00000 !important;
    color: #fff !important
}

.orderitem {
    display: block;
    padding: 20px 0;
    border-bottom: 2px dotted #dadada
}

.orderitem:first-child {
    padding-top: 0 !important
}

.orderitem:last-child {
    border-bottom: none
}

.bglightgray {
    background-color: #eaeaea
}

.boxborder4 p {
    margin: 0;
    padding: 0
}

.remarkstatus {
    padding: 15px;
    position: relative
}

.remarkstatus h4 {
    font-size: 20px !important
}

#remarks {
    padding: 30px;
    display: none
}

.qty {
    text-align: center;
    white-space: nowrap
}

.qty span {
    display: block !important;
    margin: 0 5px;
    font-size: 20px
}

.btnfuntion {
    margin-top: 30px;
    order: 1
}

.totalbox {
    order: 2
}

@media(max-width:766px) {
    h3.hname {
        margin: 20px 0 0 0 !important;
        display: block !important
    }

    .qty {
        text-align: left;
        line-height: 35px
    }

    .btnfuntion {
        margin-top: 0;
        order: 2
    }

    .totalbox {
        order: 1
    }

    .btnfuntion button {
        width: 100% !important
    }

    .qty span {
        display: inline !important;
        margin: 0 5px;
        font-size: 14px;
        line-height: 2em
    }
}

.main-menu.cartpop .sub-menu {
    top: 100% !important;
    right: 0 !important;
    left: auto !important;
    border: 1px solid #dadada;
    visibility: hidden;
    opacity: 0
}

.main-menu.cartpop .sub-menu.show {
    visibility: visible;
    opacity: 1
}

.main-menu.cartpop .sub-menu li {
    display: block;
    border-bottom: 1px solid #eaeaea;
    padding-bottom: 10px;
    margin-bottom: 10px;
    float: left;
    width: 100%
}

.main-menu.cartpop .sub-menu li a {
    margin: 0 !important
}

.main-menu.cartpop .sub-menu li:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0
}

.main-menu.cartpop .sub-menu li img {
    width: 80px !important;
    height: 80px !important;
    margin-right: 5px;
    display: inline-block;
    float: left
}

.main-menu.cartpop .sub-menu li>div {
    display: inline
}

.main-menu.cartpop .sub-menu li>div h3 {
    font-size: 14px
}

.main-menu.cartpop .sub-menu li>div p {
    font-size: 12px;
    margin-bottom: 0;
    color: #666
}

.main-menu.cartpop .sub-menu li>div div.prize,
.main-menu.cartpop .sub-menu li>div div.prize2 {
    display: inline;
    font-size: 12px
}

.main-menu.cartpop .sub-menu li>div div.prize strong,
.main-menu.cartpop .sub-menu li>div div.prize2 strong {
    font-size: 12px;
    font-weight: 400;
    color: #2aaae3;
    margin: 0 1px;
    display: inline !important
}

.main-menu.cartpop .sub-menu li>div div.prize2 strong {
    color: #666
}

.main-menu.cartpop .sub-menu li a:hover {
    background-color: transparent
}

.btn-default,
.btn-default:hover {
    padding: 10px 20px !important;
    color: #fff !important;
    background-color: #2aaae3 !important;
    text-align: center !important;
    display: block;
    width: 100%;
    font-size: 14px;
    border: none
}

.btn-default img,
.btn-default:hover img {
    width: 15px;
    height: 15px;
    vertical-align: middle;
    margin-right: 2px
}

.totalcart {
    font-weight: 300;
    font-size: 14px;
    color: #2aaae3 !important;
    display: block !important;
    padding: 10px 5px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.totalcart strong {
    font-weight: 800;
    font-size: 16px !important;
    float: right !important
}

.scroll-top {
    z-index: 1049;
    position: fixed;
    -webkit-transform: translateZ(0);
    right: 50px;
    bottom: 50px;
    width: 60px;
    height: 60px
}

.scroll-top .btn {
    width: 100%;
    height: 100%;
    border-radius: 100%;
    border: 1px solid #eaeaea;
    margin: 0;
    padding: 0;
    background: #fff !important
}

.scroll-top .btn img {
    width: 30px;
    height: auto;
    margin: 15px auto
}

.scroll-top .btn:focus {
    outline: 0
}

.gototop {
    position: fixed;
    -webkit-transform: translateZ(0);
    bottom: 20px;
    right: 0;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: .5s;
    -o-transition: .5s;
    transition: .5s
}

.gototop button {
    background: none transparent;
    border: none
}

@media(max-width:767px) {
    .gototop {
        bottom: 75px;
        width: 80px
    }

    .gototop.active {
        opacity: 1;
        visibility: visible
    }

    .gototop a {
        width: 80px;
        height: 80px;
        display: table;
        text-align: center
    }

    .gototop img {
        width: 100%;
        height: 100%
    }

    .gototop a:active,
    .gototop a:focus,
    .gototop a:hover {
        text-decoration: none;
        outline: 0
    }
}

.nocurve {
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 20px !important;
    margin: 0 !important
}

.nocurve h3 {
    font-size: 20px !important
}

.nocurve h4 {
    font-size: 16px !important;
    font-weight: 500;
    margin-bottom: 20px
}

.orline {
    position: relative;
    border-bottom: 1px solid #ccc;
    margin: -30px 0 5px 0;
    display: block;
    padding: 10px 0
}

.orline span {
    font-family: Roboto, sans-serif;
    text-transform: uppercase;
    display: inline-block;
    position: absolute;
    left: 50%;
    top: 100%;
    background-color: #fff;
    color: #333;
    font-size: 12px;
    padding: 0 20px;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.nocurve small {
    float: left
}

.listitem {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px dotted #ccc
}

.listitem:last-child {
    margin-bottom: 0
}

.listitem h3 {
    font-size: 16px !important
}

.listitem h4 {
    font-size: 14px !important
}

.listitem label {
    font-size: 12px !important;
    margin-bottom: 5px !important
}

.listitem input {
    width: 100%;
    margin-bottom: 5px !important;
    text-align: center
}

.table_header:first-child {
    border-left: none !important
}

.table_header:last-child {
    border-right: none !important
}

.datainfo {
    padding-left: 10px
}

.datainfo h2 {
    font-size: 20px !important;
    font-weight: 500
}

.datainfo h3 {
    font-size: 16px !important;
    font-weight: 300
}

.datainfo p {
    font-size: 12px !important;
    font-weight: 400
}

.pize {
    font-family: Roboto, sans-serif !important;
    font-size: 25px !important;
    font-weight: 500 !important;
    display: block;
    text-align: right;
    color: #2aaae3;
    margin-bottom: 20px
}

.pize:after,
.pizepromo:after {
    content: " บาท";
    font-family: Prompt, sans-serif !important;
    font-size: 12px
}

.pizepromo {
    font-family: Roboto, sans-serif;
    text-decoration: line-through;
    font-size: 16px !important;
    font-weight: 400 !important;
    display: inline-block;
    text-align: left;
    color: #666
}

.daliveryaddress,
.tagaddress {
    display: block;
    border-bottom: 2px dotted #dadada;
    margin-bottom: 20px;
    padding-bottom: 20px
}

.tagaddress h4 {
    font-size: 16px;
    font-weight: 600;
    color: #2aaae3;
    margin-bottom: 5px
}

.iconcircle {
    padding: 5px;
    border: 5px solid #eaeaea;
    display: block;
    width: 80px;
    height: 80px;
    border-radius: 100%;
    text-align: center;
    margin: 0 auto 20px auto
}

.iconcircle i {
    font-size: 40px !important;
    color: #666;
    line-height: 1.4em;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: center;
    font-weight: lighter
}

.categoryslide1 .item {
    background-color: #fff;
    display: block;
    overflow: hidden
}

.categoryslide1 .item p {
    text-align: center;
    font-size: 12px;
    font-weight: 500;
    padding: 5px;
    margin-bottom: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.categoryslide1 .item p span {
    display: block;
    font-size: 10px;
    float: none;
    font-family: Roboto, sans-serif;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-weight: 400
}

@media(max-width:767px) {
    .categoryslide1 .item p {
        text-align: left;
        padding: 10px 20px;
        font-size: 14px !important;
        font-weight: 600
    }

    .categoryslide1 .item img {
        margin: 0 !important
    }
}

.remodal small,
.remodal small a {
    font-size: 14px !important
}

.loginform h1 {
    font-size: 25px;
    font-weight: 500
}

#Deliveryaddress .panel-title {
    background-color: #eee;
    margin-top: 1px;
    padding: 10px 20px !important
}

#Deliveryaddress .panel-title label {
    font-family: Prompt, sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    white-space: nowrap;
    text-overflow: ellipsis
}

#Deliveryaddress .panel-body {
    padding: 30px;
    font-family: Prompt, sans-serif !important;
    font-size: 16px !important;
    border: 1px solid #eaeaea
}

#Deliveryaddress .panel-body h4 {
    font-family: Prompt, sans-serif !important;
    font-size: 18px !important
}

#Deliveryaddress .panel-body p {
    font-family: Prompt, sans-serif !important;
    font-size: 14px !important;
    margin: 10px 0
}

#byorder ol {
    list-style-position: inside;
    width: 90%;
    margin: 20px auto
}

#byorder li {
    text-align: left;
    margin-bottom: 10px
}

.noitem {
    display: block;
    padding: 20px;
    text-align: center;
    border: 1px solid #dadada
}

.tracking {
    text-align: center
}

.tracking .form-group {
    width: 25%;
    border: none !important;
    margin: 10px !important
}

.tracking .form-control {
    font-family: Roboto, sans-serif !important;
    border: 1px solid #dadada !important;
    padding: 10px !important;
    text-align: center;
    font-size: 18px
}

.tracking .form-control::placeholder {
    font-family: Roboto, sans-serif !important;
    color: #dadada
}

.trackbg {
    background: url(../images/bgtrack.jpg) no-repeat 50% 50% !important;
    background-size: cover !important;
    padding: 80px 0
}

.tracklist {
    list-style-position: inside;
    margin: 20px
}

.tracklist li {
    font-size: 14px
}

.trackcontents {
    padding: 50px 0
}

.trackcontents h3 {
    font-size: 20px
}

.trackcontents h4 {
    font-size: 18px
}

.trackcontents p {
    font-size: 14px
}

.trackcontents table {
    margin: 20px 0;
    width: 100%
}

.trackcontents td {
    font-size: 14px;
    padding: 10px;
    text-align: center
}

.dicon {
    width: 25%
}

#trackingpop {
    position: relative
}

.trackbox {
    position: relative;
    margin: 40px 0;
    display: inline-block;
    height: 100px;
    text-align: center
}

.trackbox .linestatus {
    height: 3px;
    width: calc(100% - 5px);
    border-radius: 20px;
    background-color: #dadada;
    position: absolute;
    top: 55%;
    left: 0;
    z-index: -1;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%)
}

.trackbox .linestatus span {
    height: 3px;
    width: 0;
    border-radius: 20px;
    background-color: green;
    position: absolute;
    left: 0;
    top: 0
}

.trackstatusbox {
    width: 100px;
    height: 100px;
    margin-right: 5px;
    display: inline-block;
    text-align: center;
    border: 3px solid #ccc;
    border-radius: 100%;
    z-index: 2;
    background-color: #fff;
    color: #ccc
}

.trackstatusbox.active {
    border: 3px solid green;
    color: green
}

.trackstatusbox span {
    display: block
}

.trackstatusbox span:after {
    display: inline-table;
    font-size: 14px;
    margin-top: 10px;
    text-align: center;
    line-height: 1em
}

.trackstatusbox span:before {
    font-family: FontAwesome;
    display: block;
    font-size: 40px;
    line-height: 2.4em;
    white-space: nowrap
}

.errorstatus {
    color: red;
    line-height: 9em;
    white-space: nowrap
}

.tracstatus1 span:after {
    content: "ยืนยันคำสั่งซื้อ"
}

.tracstatus1 span:before {
    content: " \f0f6"
}

.tracstatus2 span:after {
    content: "กำลังโหลดสินค้า"
}

.tracstatus2 span:before {
    content: " \f1b3"
}

.tracstatus3 span:after {
    content: "กำลังจัดส่ง"
}

.tracstatus3 span:before {
    content: " \f0d1"
}

.tracstatus4 span:after {
    content: "ส่งสินค้าแล้ว"
}

.tracstatus4 span:before {
    content: " \f00c"
}

@media(max-width:480px) {
    .remodal .iconcircle {
        display: none
    }

    .trackbox {
        margin-bottom: 20px
    }

    .trackbox .linestatus {
        top: 25%
    }

    .trackstatusbox {
        margin-right: 0;
        width: 50px;
        height: 50px
    }

    .tracking .form-group {
        width: 90%
    }

    .trackstatusbox span:before {
        font-size: 20px
    }

    .trackstatusbox span:after {
        font-size: 11px
    }

    .remodal small a {
        display: block
    }
}

small.remarks {
    font-size: 14px !important;
    color: red;
    font-weight: 400;
    text-align: center
}

small.remarks:before {
    content: '\f06a';
    font-family: FontAwesome;
    margin-right: 5px
}

form::after {
    content: "";
    clear: both;
    display: table
}

.subtool {
    border: 1px solid #ddd;
    padding: 20px
}

@media(max-width:480px) {
    .remodal button {
        margin: 10px 0;
        display: block;
        width: 100%
    }
}

#banklisted h3 {
    padding: 0 !important;
    margin: 0 !important
}

input[type=file] {
    padding-top: 10px;
    border: none !important;
    background-color: #dadada;
    height: 45px
}

.bt-inc-del {
    float: right;
    font-size: 14px !important;
    cursor: pointer
}

.boxborder input[type=number],
.boxborder2 input[type=number] {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 3px;
    box-sizing: border-box;
    color: #333;
    font-size: inherit;
    height: 40px;
    line-height: 1.15;
    padding: 0 2px;
    width: 100%;
    text-align: center
}

input::-webkit-inner-spin-button,
input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0
}

input[type=number] {
    -moz-appearance: textfield
}

.inc-price-b-pop {
    font-size: 12px;
    color: #dc3545
}

.mb0 {
    margin-bottom: 0 !important
}

.datepicker {
    border-radius: 0
}

.datepicker td,
.datepicker th {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 14px
}

input.form-control {
    border-radius: 0 !important
}

input.form-control:focus {
    box-shadow: none
}

.datepicker-dropdown {
    box-shadow: 0 5px 10px rgba(0, 0, 0, .1);
    width: auto
}

.datepicker table tr td.active,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active.disabled:hover,
.datepicker table tr td.active:hover {
    background: #2aaae3 !important;
    border-radius: 50px
}

.BTStatus,
.cancelbill {
    margin-bottom: 10px
}

#BlockData p {
    line-height: 1.7em
}

.hide-rb {
    display: none;
    visibility: hidden
}

@media(max-width:760px) {
    .BWeight {
        display: inline-block
    }

    .BWeight::after {
        content: ' : '
    }
}

#FrmSlip .panel-title {
    background-color: #eee;
    margin-top: 1px;
    padding: 10px 20px !important
}

#FrmSlip .panel-title label {
    font-family: Prompt, sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    white-space: nowrap;
    text-overflow: ellipsis
}

#FrmSlip .panel-body {
    padding: 30px;
    font-family: Prompt, sans-serif !important;
    font-size: 16px !important;
    border: 1px solid #eaeaea
}

#FrmSlip .panel-body h4 {
    font-family: Prompt, sans-serif !important;
    font-size: 18px !important
}

#FrmSlip .panel-body p {
    font-family: Prompt, sans-serif !important;
    font-size: 14px !important;
    margin: 10px 0
}