@charset "UTF-8";

:root {
    --green: #009f4c;
    --dark-green: #1D6C48;
    --gray: #6E6E6E;
    --black-gray: #3c3c3c;
    --black: #000000;
    --color-border: #e8e8e8;
    --color-border-bottom: #7893b1;
    --color-main-blue: #0d56a6;
    --ff-1: 'anuphan';
    --ff-2: 'oswald';
    --fw-thin: 100;
    --fw-extra-light: 200;
    --fw-light: 300;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semi-bold: 600;
    --fw-bold: 700;
    --fs-default: 18px;
    --fs-1: 60px;
    --fs-2: 40px;
    --fs-3: 32px;
    --fs-4: 28px;
    --fs-5: 24px;
    --fs-6: 20px;
    --fs-7: 18px;
    --fs-8: 14px;
    --fs-9: 30px;
    --fs-10: 16px;
    --fs-11: 22px;
    --fs-12: 36px;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'anuphan', Helvetica, sans-serif;
    font-size: var(--fs-default);
    line-height: var(--fs-5);
    font-weight: var(--fw-regular);
    margin: 0;
    padding: 0px;
    color: var(--black);
    -webkit-font-smoothing: antialiased !important;
    background: #f7f8f9;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    font-size: unset;
    margin-bottom: unset;
    margin-top: unset;
    font-weight: unset;
    line-height: unset;
    margin-block-start: unset;
    margin-block-end: unset;
    margin-inline-start: unset;
    margin-inline-end: unset;
}

img {
    border: none;
}

.img-full {
    width: 100%;
}

a:link,
a:hover,
a:visited {
    text-decoration: none;
}

.spacing {
    position: relative;
    width: 100%;
    height: 20px;
}

.f-left {
    float: left;
}

.f-right {
    float: right;
}

.absolute-center {
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.clear {
    clear: both;
}

.clear-padding {
    padding: 0;
}

.clear-margin {
    margin: 0;
}

.t-right {
    text-align: right !important;
}

.t-left {
    text-align: left !important;
}

.t-center {
    text-align: center !important;
}

form{
    margin: 0px;
    padding: 0px;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

.section-header {
    position: relative;
    display: table;
    width: 1920px;
    z-index: 1001;
    background: #ffffff;
    padding: 0px;
    margin: auto;
}

.box-header-top{
    position: relative;
    display: block;
    padding: 6px 0px;
}

.box-header-top .col-top-contact{
    position: relative;
    display: table;
    padding: 0px 0px 0px 20px;
}

.box-header-top .col-top-contact .contact-txt-row{
    position: relative;
    display: table;
    float: left;
    padding-left: 30px;
    height: 40px;
}

.box-header-top .col-top-contact .contact-txt-row .col-left{
    position: relative;
    display: table-cell;
    vertical-align: middle;
    width: 35px;
    font-size: 21px;
    color: #000000;
}

.box-header-top .col-top-contact .contact-txt-row .col-right{
    position: relative;
    display: table-cell;
    vertical-align: middle;
    font-size: var(--fs-10);
    line-height: var(--fs-11);
    font-weight: var(--fw-medium);
    color: #3c3c3c;
}

.box-header-top .col-top-contact .contact-txt-row .col-right a{
    color: #3c3c3c;
}

.box-header-top .col-top-contact .contact-txt-row .col-right a:hover{
    text-decoration: underline;
}

.box-header-top .col-top-contact .contact-txt-row .col-left.ico-call{
    font-size: 25px !important;
}

.box-header-top .col-top-contact .contact-txt-row .col-left.ico-email{
    font-size: 18px !important;
    top: 2px;
}

.box-header-top .col-top-contact .contact-txt-row .col-left.ico-clock{
    top: 2px;
}

.box-header-top .col-top-contact .box-open{
    position: relative;
    display: inline-block;
    background: var(--color-main-blue);
    padding: 10px 5px;
    border-radius: 3px;
    color: #ffffff;
    font-size: var(--fs-10);
    line-height: var(--fs-10);
    font-weight: var(--fw-medium);
    margin-left: 5px;
}

.box-header-top .col-top-contact .box-close{
    position: relative;
    display: inline-block;
    background: #313c49;
    padding: 10px 5px;
    border-radius: 3px;
    color: #ffffff;
    font-size: var(--fs-10);
    line-height: var(--fs-10);
    font-weight: var(--fw-medium);
    margin-left: 5px;
}

.box-header-top .col-account{
    padding: 0px;
}

.box-header-top .col-account .btn-group{
    position: relative;
    display: table;
}

.box-header-top .col-account .btn-group .btn{
    border: none;
    padding: 0px 10px;
}

.box-header-top .col-account .dropdown-toggle::after{
    display: none;
}

.box-header-top .col-account .user-name {
    position: relative;
    display: table-cell;
    vertical-align: middle;
    font-size: var(--fs-10);
    line-height: var(--fs-10);
    font-weight: var(--fw-medium);
    color: var(--color-main-blue);
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 10px;
}

.box-header-top .col-account .profile-img {
    position: relative;
    display: table-cell;
    vertical-align: middle;
    background-repeat: no-repeat!important;
    background-position: 50%!important;
    background-size: cover!important;
    width: 50px;
    height: 50px;
    overflow: hidden;
    border-radius: 50%;
    border: 3px solid var(--color-main-blue);
}

.box-header-top .col-account .profile-img img {
    max-width: 100%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    will-change: auto;
    font-family: "object-fit: cover;"
}

.box-header-top .col-account i{
    position: relative;
    display: table-cell;
    vertical-align: middle;
    padding-left: 5px;
}

.box-header-top .col-account .dropdown-menu{
    margin-top: 4px !important;
    border-radius: 0px !important;
    border: 1px solid #e8e8e8;
    /*border-top: none;*/
    border-right: 1px solid #e5e5e5;
}

.box-header-top .col-account .dropdown-menu .dropdown-item{
    font-size: var(--fs-10);
    line-height: var(--fs-10);
    font-weight: var(--fw-medium);
    color: var(--color-main-blue);
    padding: 10px 15px;
}

.box-header-top .col-account .dropdown-menu .dropdown-item:hover{
    background: var(--color-main-blue);
    color: #ffffff;
}

.box-header-menu{
    position: relative;
    display: block;
}

.col-logo-main{
    padding: 0px 50px 0px 50px;
    background: var(--color-main-blue);
}

.col-logo-main img{
    width: 100px;
}

.box-main-logo{
    position: relative;
    padding: 15px 0px 15px 0px;
}

.col-credit{
    position: relative;
    display: table;
    border: none;
    padding: 0px 25px;
    border-bottom: 1px solid #e8e8e8;
    border-top: 1px solid #e8e8e8;
}

.col-credit .box-txt-credit{
    position: relative;
    display: table-cell;
    vertical-align: middle;
}

.col-credit .box-txt-credit .col-left{
    position: relative;
    display: table-cell;
    vertical-align: middle;
    width: 45px;
    font-size: 25px;
    color: #000000;
}

.col-credit .box-txt-credit .col-right{
    position: relative;
    display: table-cell;
    vertical-align: middle;
    font-size: var(--fs-10);
    line-height: var(--fs-11);
    font-weight: var(--fw-medium);
    color: #3c3c3c;
}

.col-credit .box-txt-credit .col-right a{
    color: #3c3c3c;
}

.col-credit .box-txt-credit .col-right a:hover{
    text-decoration: underline;
}

.col-credit .box-txt-credit .col-right span{
    display: block;
    font-size: var(--fs-7);
    line-height: var(--fs-7);
    font-weight: var(--fw-bold);
    color: var(--color-main-blue);
}

.col-basket{
    position: relative;
    display: table;
    border: none;
    padding: 0px;
    background: #3c3c3c;
}

.col-basket a{
    position: relative;
    display: table-cell;
    padding: 0px 30px 0px 25px;
    vertical-align: middle;
    font-size: var(--fs-9);
    color: #3d85d3;
}

.col-basket a:hover{
    color: #ffffff;
}

.col-basket a .cart-amount{
    position: absolute;
    display: block;
    font-size: var(--fs-8);
    line-height: var(--fs-8);
    font-weight: var(--fw-medium);
    right: 10px;
    top: 10px;
    width: 30px;
    height: 30px;
    color: #ffffff;
    background: #fc6500;
    border-radius: 50%;
    text-align: center;
    padding-top: 8px;
}

.col-menu{
    position: relative;
    display: flex;
    padding: 0px;
    border-bottom: 1px solid #e8e8e8;
    border-top: 1px solid #e8e8e8;
}

.box-main-menu{
    position: relative;
    display: table;
    height: 100%;
}

.box-main-menu .navbar{
    display: table;
    height: 100%;
    padding: 0px;
}

.box-main-menu .navbar .navbar-collapse{
    display: table !important;
    height: 100%;
}

.box-main-menu .navbar-nav{
    width: 100%;
    height: 100%;
    padding: 0px;
}

.box-main-menu .navbar-nav .nav-item{
    width: 200px;
    height: 100%;
    text-align: center;
    border-left: 1px solid var(--color-border);
    display: table;
}

.box-main-menu .navbar-nav .nav-item:first-child{
    border-left: none;
}

.box-main-menu .navbar-nav .nav-item:last-child{
    border-right: 1px solid var(--color-border);
}

.box-main-menu .navbar-nav .nav-item .nav-link{
    padding: 0px;
    font-family: var(--ff-1);
    font-weight: var(--fw-medium);
    color: #000000;
    font-size: var(--fs-7);
    line-height: var(--fs-6);
    display: table-cell;
    vertical-align: middle;
}

.box-main-menu .navbar-nav .nav-item .nav-link i{
    position: relative;
    font-size: 10px;
    top: -2px;
    right: 8px;
    display: none;
}

.box-main-menu .navbar-nav .nav-item .nav-link:hover{
    opacity: 0.5;
}

.box-main-menu .navbar-nav .nav-item .nav-link.active{
    color: var(--color-main-blue);
    font-weight: var(--fw-bold);
    background: url("../../images/bg-active.jpg") repeat-x bottom left;
}

.box-main-menu .navbar-nav .nav-item .nav-link.active i{
    display: inline-block;
}

.box-main-menu .navbar-nav .nav-item:last-child .nav-link{
    color: var(--color-main-blue);
}

.box-main-menu .navbar-nav .nav-item .nav-link span{
    font-size: 12px;
    position: relative;
    padding-left: 3px;
}

.section-content {
    position: relative;
    display: table;
    width: 1920px;
    z-index: 900;
    background: #ececec;
    margin: auto;
    height: 100%;
}

.content-container {
    position: relative;
    display: table;
    width: 1190px;
    margin: 0px auto 0px auto;
    padding: 0px 0px;
}

.section-content.bg-star{
    background: url("../../images/bg-logo-itac.png") no-repeat -40px bottom;
}

.bg-square-top{
    position: absolute;
    display: block;
    width: 100%;
    height: 30px;
    top: 0px;
    left: 0px;
}

.bg-square-top .line-left{
    position: relative;
    width: 285px;
    height: 30px;
    display: inline-block;
    background: url("../../images/bg-line-blue.png") no-repeat -20px top;
}

.bg-square-top .line-left.full{
    left: -10px;
    width: 305px;
    background: url("../../images/bg-line-blue.png") no-repeat left top;
}

.bg-square-top .line-right{
    position: absolute;
    width: 305px;
    height: 30px;
    display: inline-block;
    background: url("../../images/bg-line-blue.png") no-repeat left top;
    right: calc(((1920px - 1190px) / 2) - 305px)
}

.bg-square-bottom{
    position: absolute;
    display: block;
    width: 100%;
    height: 30px;
    bottom: 3px;
    left: 0px;
}

.bg-square-bottom .line-left{
    position: relative;
    width: 285px;
    height: 30px;
    display: inline-block;
    background: url("../../images/bg-line-blue.png") no-repeat -20px top;
}

.bg-square-bottom .line-left.full{
    left: 0px;
    width: 305px;
    background: url("../../images/bg-line-blue.png") no-repeat -3px top;
}

.bg-square-bottom .line-left.full.news{
    left: -13px;
    width: 305px;
    background: url("../../images/bg-line-blue.png") no-repeat left top;
}

.bg-square-bottom .line-right{
    position: absolute;
    width: 305px;
    height: 30px;
    display: inline-block;
    background: url("../../images/bg-line-blue.png") no-repeat left top;
    right: calc(((1920px - 1190px) / 2) - 305px)
}

.section-footer {
    position: relative;
    display: table;
    width: 1920px;
    z-index: 900;
    margin: auto;
}

.section-footer .box-footer-banner{
    position: relative;
    display: block;
    width: 100%;
    border-bottom: 8px solid #ebebeb;
}

.section-footer .box-footer-top{
    position: relative;
    display: block;
    width: 100%;
    background: #ffffff;
    padding: 35px 0px;
}

.section-footer .box-footer-top .h-footer-top{
    position: relative;
    display: block;
    color: #0d56a6;
    font-size: var(--fs-9);
    font-weight: var(--fw-bold);
    padding-bottom: 25px;
}

.section-footer .box-footer-top .footer-txt-row{
    position: relative;
    display: table;
    width: 100%;
}

.section-footer .box-footer-top .footer-txt-row .col-left{
    position: relative;
    display: block;
    width: 35px;
    float: left;
    font-size: 21px;
    color: #000000;
}

.section-footer .box-footer-top .footer-txt-row .col-right{
    position: relative;
    display: block;
    width: calc(100% - 35px);
    float: left;
    font-size: var(--fs-10);
    line-height: var(--fs-11);
    font-weight: var(--fw-medium);
    color: #3c3c3c;
}

.section-footer .box-footer-top .footer-txt-row .col-right.txt-clock{
    color: var(--color-main-blue);
}

.section-footer .box-footer-top .footer-txt-row .col-right a{
    color: #3c3c3c;
}

.section-footer .box-footer-top .footer-txt-row .col-right a:hover{
    text-decoration: underline;
}

.section-footer .box-footer-top .box-open{
    position: relative;
    display: table;
    margin-top: 10px;
    background: var(--color-main-blue);
    padding: 10px 10px;
    border-radius: 3px;
    color: #ffffff;
    font-size: var(--fs-10);
    line-height: var(--fs-10);
    font-weight: var(--fw-medium);
}

.section-footer .box-footer-top .box-close{
    position: relative;
    display: table;
    margin-top: 10px;
    background: #313c49;
    padding: 10px 10px;
    border-radius: 3px;
    color: #ffffff;
    font-size: var(--fs-10);
    line-height: var(--fs-10);
    font-weight: var(--fw-medium);
}

.section-footer .box-footer-top .col-about{
    position: relative;
    padding: 0px 45px 0px 0px;
}

.section-footer .box-footer-top .col-about .box-about-txt-area{
    position: relative;
    width: 280px;
}

.section-footer .box-footer-top .col-about .box-about-txt{
    position: relative;
    display: block;
    color: #3c3c3c;
    font-size: var(--fs-10);
    line-height: var(--fs-11);
    font-weight: var(--fw-regular);
    padding-bottom: 20px;
}

.section-footer .box-footer-top .col-brand{
    position: relative;
    padding: 0px 70px 0px 0px;
}

.section-footer .box-footer-top .col-brand .box-logo{
    position: relative;
    display: block;
    margin-bottom: 25px;
}

.section-footer .box-footer-top .col-brand .box-logo:last-child{
    margin-bottom: 0px;
}

.section-footer .box-footer-top .col-address{
    position: relative;
    padding: 0px 55px 0px 0px;
}

.section-footer .box-footer-top .col-address .box-address-txt-area{
    position: relative;
    width: 220px;
}

.section-footer .box-footer-top .col-address .icon-ic_address .path1:before, .section-footer .box-footer-top .col-address .icon-ic_address .path2:before, .section-footer .box-footer-top .col-address .icon-ic_address .path3:before, .section-footer .box-footer-top .col-address .icon-ic_address .path4:before, .section-footer .box-footer-top .col-address .icon-ic_address .path5:before{
    color: #000000;
}

.section-footer .box-footer-top .col-address .icon-ic_address .path6:before, .section-footer .box-footer-top .col-address .icon-ic_address .path7:before, .section-footer .box-footer-top .col-address .icon-ic_address .path8:before, .section-footer .box-footer-top .col-address .icon-ic_address .path9:before, .section-footer .box-footer-top .col-address .icon-ic_address .path10:before,
.section-footer .box-footer-top .col-address .icon-ic_address .path11:before, .section-footer .box-footer-top .col-address .icon-ic_address .path12:before, .section-footer .box-footer-top .col-address .icon-ic_address .path13:before, .section-footer .box-footer-top .col-address .icon-ic_address .path14:before, .section-footer .box-footer-top .col-address .icon-ic_address .path15:before,
.section-footer .box-footer-top .col-address .icon-ic_address .path16:before, .section-footer .box-footer-top .col-address .icon-ic_address .path17:before, .section-footer .box-footer-top .col-address .icon-ic_address .path18:before, .section-footer .box-footer-top .col-address .icon-ic_address .path19:before, .section-footer .box-footer-top .col-address .icon-ic_address .path20:before,
.section-footer .box-footer-top .col-address .icon-ic_address .path21:before, .section-footer .box-footer-top .col-address .icon-ic_address .path22:before, .section-footer .box-footer-top .col-address .icon-ic_address .path23:before, .section-footer .box-footer-top .col-address .icon-ic_address .path24:before, .section-footer .box-footer-top .col-address .icon-ic_address .path25:before{
    color: #ffffff;
}

.section-footer .box-footer-top .col-address .footer-txt-row{
    margin-bottom: 20px;
}

.section-footer .box-footer-top .col-address .footer-txt-row .col-left{
    font-size: 25px !important;
    width: 45px;
}

.section-footer .box-footer-top .col-address .footer-txt-row .col-left.ico-email{
    font-size: 18px !important;
}

.section-footer .box-footer-top .col-address .footer-txt-row .col-right{
    width: calc(100% - 45px);
}

.section-footer .box-footer-top .col-map{
    position: relative;
    padding: 0px 0px;
}

.section-footer .box-footer-top .col-map .box-footer-map-area{
    display: block;
    width: 100%;
    height: 200px;
    margin-top: 5px;
}

.section-footer .box-footer-top .col-map .footer-policy-txt{
    position: relative;
    display: block;
    margin-top: 15px;
}

.section-footer .box-footer-top .col-map .footer-policy-txt a{
    position: relative;
    display: inline-block;
    color: #3c3c3c;
    font-size: var(--fs-8);
    line-height: var(--fs-5);
    font-weight: var(--fw-medium);
    text-decoration: underline;
}

.section-footer .box-footer-top .col-map .footer-policy-txt a:hover{
    text-decoration: none;
}

.section-footer .box-footer-bottom{
    position: relative;
    display: block;
    width: 100%;
    background: #0a417c;
}

.section-footer .box-footer-bottom .col-logo-footer{
    padding: 0px 45px 0px 45px;
    background: var(--color-main-blue);
}

.section-footer .box-footer-bottom .col-logo-footer img{
    width: 106px;
}

.section-footer .box-footer-bottom .box-logo-footer{
    position: relative;
    padding: 9px 0px 16px 0px;
}

.section-footer .box-footer-bottom .col-copy-right{
    position: relative;
    display: table;
    padding: 0px;
}

.section-footer .box-footer-bottom .box-txt-copy-right{
    position: relative;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    color: #ffffff;
    font-size: var(--fs-8);
    font-weight: var(--fw-medium);
}

.section-footer .box-footer-bottom .box-txt-copy-right .box-bottom-link{
    position: relative;
    display: table;
    margin: auto;
    margin-top: -3px;
}

.section-footer .box-footer-bottom .box-txt-copy-right .box-bottom-link a {
    position: relative;
    display: inline-block;
    color: #aeb6d8;
    font-size: 14px;
    line-height: 20px;
    text-decoration: underline
}

.section-footer .box-footer-bottom .box-txt-copy-right .box-bottom-link a:hover {
    text-decoration: none
}

.section-footer .box-footer-bottom .box-txt-copy-right .box-bottom-link .line-space {
    position: relative;
    display: table;
    width: 1px;
    height: 12px;
    background: #616d9d;
    margin: 0 10px;
    top: 8px
}

.section-footer .box-footer-bottom .col-social{
    position: relative;
    display: table;
    padding: 0px;
    border-right: 1px solid var(--color-border-bottom);
}

.section-footer .box-footer-bottom .col-social a{
    position: relative;
    display: table-cell;
    padding: 5px 0px 5px 0px;
    vertical-align: middle;
    border-left: 1px solid var(--color-border-bottom);
    color: #ffffff;
    font-size: var(--fs-5);
    width: 80px;
    text-align: center;
}

.section-footer .box-footer-bottom .col-social a:hover{
    opacity: 0.7;
}

.section-footer .box-footer-bottom .col-call-center{
    position: relative;
    display: table;
    padding: 0px;
    border-right: 1px solid var(--color-border-bottom);
}

.section-footer .box-footer-bottom .col-call-center a{
    position: relative;
    display: table-cell;
    padding: 5px 0px 5px 0px;
    vertical-align: middle;
    border-left: 1px solid var(--color-border-bottom);
    color: #ffffff;
    font-size: var(--fs-5);
    text-align: center;
}

.section-footer .box-footer-bottom .col-call-center a:hover{
    opacity: 0.7;
}

.section-footer .box-footer-bottom .col-call-center .icon{
    position: relative;
    display: table-cell;
    vertical-align: middle;
    font-size: 40px;
    padding: 0px 5px 0px 15px;
}

.section-footer .box-footer-bottom .col-call-center .txt{
    position: relative;
    display: table-cell;
    text-align: left;
    padding: 0px 15px 0px 5px;
    font-size: 16px;
    line-height: 16px;
    font-weight: var(--fw-bold);
    text-transform: uppercase;
}

.section-footer .box-footer-bottom .col-call-center .txt span{
    position: relative;
    display: block;
    font-size: 22px;
    padding-top: 4px;
    font-weight: var(--fw-bold);
}


/* Loading */

.wait-content-load {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 99999999;
    display: none;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    outline: 0;
    background: #000;
    opacity: 0.8;
}

.wait-content-load-overlay {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 99999998;
    display: none;
}

.wait-content-load-open {
    overflow: hidden;
}

.wait-content-load-open .wait-content-load {
    overflow-x: hidden;
    overflow-y: auto;
}

/* Form */

input:focus, textarea:focus, select:focus, input:active, textarea:active, select:active{
    outline: none !important;
    outline: 0 !important;
    box-shadow: none !important;
}

.box-input {
    position: relative;
    display: block;
    width: 100%;
    margin: 20px 0px;
}

.box-input .form-control {
    border: 1px solid #e5e5e5;
    height: 60px;
    font-size: 18px;
    font-weight: var(--fw-regular);
    line-height: 60px;
    border-radius: 0px 0px 0 0;
    color: #838383;
    background: #ececec !important;
    padding-left: 20px;
    padding-right: 20px;
}

.box-input textarea.form-control {
    height: 120px;
    resize: none;
}

.box-input label{
    position: absolute;
    left: 20px;
    font-size: 18px;
    font-weight: var(--fw-regular);
    color: #838383;
    top: 18px;
    pointer-events: none;
    transition: 0.2s;
}

.form-control.tt-hint{
    display: none;
}

.box-input input:focus + label,
.box-input input:valid + label,
.box-input select:focus + label,
.box-input select:valid + label,
.box-input textarea:focus + label,
.box-input textarea:valid + label,
.floating-label.active {
    top: -12px;
    left: 10px;
    font-size: 16px;
    color: #ffffff;
    font-weight: var(--fw-medium);
    background: #054891;
    padding: 0px 5px;
}

.box-input .ico-eye{
    position: absolute;
    top: calc(50% - (20px / 2));
    right: 20px;
    color: #000000;
    cursor: pointer;
}

.box-input .ico-eye .icon-ic_eye{
    font-size: 16px;
    display: none;
}

.box-input .ico-eye .icon-ic_eyeclose{
    font-size: 12px;
}

.box-btn-area{
    position: relative;
    display: table;
    margin: 20px auto 0px auto;
}

.box-btn-area .btn-input {
    position: relative;
    display: table-cell;
    font-size: 18px;
    line-height: 18px;
    font-weight: var(--fw-medium);
    color: #ffffff;
    background: #fc6500;
    border: 1px solid #fc6500;
    padding: 3px 15px 3px 15px;
    border-radius: 0px;
    margin: 0;
    height: 60px;
    vertical-align: middle;
    width: 230px;
}

.box-btn-area .btn-input:hover{
    opacity: 0.8;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

input[type="number"] {
    -moz-appearance: textfield;
    -webkit-appearance: none;
}

/* Form */

/* Cookie Popup */

.cookies-cookup.active {
    visibility: visible;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
}

.cookies-cookup {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(5px);
}

.cookies-cookup {
    visibility: hidden;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-transform: translateY(100%);
    -ms-transform: translateY(100%);
    transform: translateY(100%);
    background-color: #fff;
    padding: 15px;
    -webkit-box-shadow: 0 2px 5px 0 rgb(0 0 0 / 25%);
    box-shadow: 0 2px 5px 0 rgb(0 0 0 / 25%);
    line-height: 1.6;
    z-index: 9999;
    -webkit-transition: 1s all;
    -o-transition: 1s all;
    transition: 1s all;
}

.cookies-cookup-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
}

.cookies-cookup-text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding-right: 2em;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}

.cookies-cookup-text p {
    font-size: 18px;
    letter-spacing: normal;
}

.cookies-cookup.hide-close .cookies-cookup-button-group {
    padding-right: 0;
}

.cookies-cookup-button-group {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    padding-right: 30px;
}

a.cookies-cookup-button {
    position: relative;
    display: table-cell;
    font-size: 18px;
    line-height: 18px;
    font-weight: var(--fw-medium);
    color: #ffffff;
    background: #3c3c3c;
    border: 1px solid #3c3c3c;
    padding: 20px 10px 20px 10px;
    border-radius: 0px;
    margin: 0;
    vertical-align: middle;
    width: 180px;
    text-align: center;
}

a.cookies-cookup-button:hover{
    opacity: 0.8;
}

.cookies-cookup-close {
    position: absolute;
    top: 50%;
    right: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-left: 20px;
}

.cookies-cookup-button-group a {
    margin-right: 15px;
}

a#cookies-cookup-accept-all {
    background: #fc6500 !important;
    border: 1px solid #fc6500 !important;
}

.cookies-cookup-text a {
    color: #2D913D;
}

.cookies-cookup-text a:hover {
    text-decoration: underline;
}

.cookies-cookpopup-bg.active {
    visibility: visible;
    opacity: 1;
}

.cookies-cookpopup-bg {
    backdrop-filter: blur(5px);
}

.cookies-cookpopup-bg {
    visibility: hidden;
    opacity: 0;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.3) !important;
    z-index: 9999999998;
    -webkit-transition: 0.4s all;
    -o-transition: 0.4s all;
    transition: 0.4s all;
    cursor: pointer;
}

.cookies-cookpopup-sidebar.active {
    -webkit-transform: translateX(0px);
    -ms-transform: translateX(0px);
    transform: translateX(0px);
    visibility: visible;
    opacity: 1;
}

.cookies-cookpopup-sidebar {
    visibility: hidden;
    overflow: hidden;
    opacity: 0;
    background-color: #ffffff;
    position: fixed;
    top: 0;
    left: 0;
    right: auto;
    bottom: 0;
    width: 100%;
    max-width: 400px;
    z-index: 9999999999;
    -webkit-transition: 0.4s all;
    -o-transition: 0.4s all;
    transition: 0.4s all;
    -webkit-transform: translateX(-400px);
    -ms-transform: translateX(-400px);
    transform: translateX(-400px);
}

.cookies-cookpopup-sidebar.active {
    -webkit-transform: translateX(0px);
    -ms-transform: translateX(0px);
    transform: translateX(0px);
    visibility: visible;
    opacity: 1;
}

.cookies-cookpopup-sidebar-header {
    position: relative;
    background: #fff;
    z-index: 2;
}

.cookies-cookpopup-sidebar {
    visibility: hidden;
    overflow: hidden;
    opacity: 0;
    background-color: #ffffff;
    position: fixed;
    top: 0;
    left: 0;
    right: auto;
    bottom: 0;
    width: 100%;
    max-width: 400px;
    z-index: 9999999999;
    -webkit-transition: 0.4s all;
    -o-transition: 0.4s all;
    transition: 0.4s all;
    -webkit-transform: translateX(-400px);
    -ms-transform: translateX(-400px);
    transform: translateX(-400px);
}

.cookies-cookpopup-logo {
    min-height: 60px;
    padding: 12px 15px 12px 20px;
    border-bottom: 1px solid #E9E9E9;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.cookies-cookpopup-logo img {
    width: 80px;
}

.cookies-cookpopup-sidebar-container p {
    font-size: 18px;
    margin-bottom: 10px;
    letter-spacing: normal;
}

.cookies-cookpopup-settings-close {
    display: inline-block;
    position: absolute;
    right: 30px;
    top: calc(50% - 0px);
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    z-index: 2;
}

.cookies-cookpopup-settings-close i{
    font-size: 30px;
    color: #0d56a6;
}

.cookies-cookpopup-settings-close:hover i{
    font-size: 30px;
    color: #000000;
}

.cookies-cookpopup-sidebar-container {
    line-height: 1.7;
    position: absolute;
    top: 60px;
    left: 1em;
    right: 0;
    bottom: 6.5em;
    padding-top: 1em;
    padding-right: 1em;
    overflow-y: auto;
}

.cookies-cookpopup-cookie-detail {
    visibility: hidden;
    padding: 20px 15px 15px 20px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    z-index: 3;
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%);
    -webkit-transition: 0.5s all;
    -o-transition: 0.5s all;
    transition: 0.5s all;
    overflow: auto;
}

.cookies-cookpopup-section.intro {
    margin-top: 10px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
}

.cookies-cookpopup-section.list {
    margin-top: 15px;
}

.cookies-cookpopup-section {
    padding-bottom: 15px;
}

.cookies-cookpopup-list {
    padding: 0;
    margin: 1em 0 0 0;
}

.cookies-cookpopup-list li:first-child {
    margin-top: 0.5em;
}

.cookies-cookpopup-list li {
    list-style: none;
    margin-top: 1em;
}

.cookies-cookpopup-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-weight: 600;
    font-size: 15px;
    line-height: 1.5;
    color: #444;
}

.cookies-cookpopup-action,
.cookies-cookpopup-section em,
.cookies-cookpopup-title {
    font-size: 20px !important;
}

.cookies-cookpopup-action {
    padding-left: 10px;
    padding-top: 0px;
    text-align: right;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}

.cookies-cookpopup-action.text {
    color: #054891;
}

.cookies-cookpopup-switch {
    position: relative;
    display: inline-block;
    width: 55px;
    height: 28px;
    top: 2px;
}

.cookies-cookpopup-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.cookies-cookpopup-switch input:checked+.cookies-cookpopup-slider {
    background-color: rgb(5, 72, 145, 0.2);
    border-color: #054891;
}

.cookies-cookpopup-slider.round {
    border-radius: 34px;
}

.cookies-cookpopup-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #F2F1F1;
    border: 1px solid #DDDDDD;
    -webkit-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
}

.cookies-cookpopup-cookie-link {
    display: inline-block;
    width: auto;
    margin-top: 10px;
    color: #2D913D;
}

.cookies-cookpopup-cookie-link:hover {
    color: #2D913D;
}

.cookies-cookpopup-switch input:checked+.cookies-cookpopup-slider:before {
    background-color: #054891;
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

.cookies-cookpopup-slider.round:before {
    border-radius: 50%;
}

.cookies-cookpopup-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 5px;
    bottom: 4px;
    background-color: #bbb;
    -webkit-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
}

.cookies-cookpopup-section #pdpa_settings_confirm {
    position: fixed;
    bottom: 1.5em;
}

a#pdpa_settings_confirm {
    font-size: 18px;
    letter-spacing: normal;
}

.cookies-cookpopup-section .cookies-cookpopup-button {
    margin-top: 10px;
}

a.cookies-cookpopup-button {
    position: relative;
    display: table-cell;
    font-size: 18px;
    line-height: 18px;
    font-weight: var(--fw-medium);
    color: #ffffff;
    background: #3c3c3c;
    border: 1px solid #3c3c3c;
    padding: 20px 10px 20px 10px;
    border-radius: 0px;
    margin: 0;
    vertical-align: middle;
    width: 180px;
    text-align: center;
}

.cookies-cookpopup-sidebar-container p {
    letter-spacing: normal !important;
}

.box-bottom-cookie .inner-area {
    position: relative;
    display: block;
    width: 1920px;
    z-index: 9999;
    margin: auto;
    padding: 15px 10px;
}

.box-cookie-txt{
    position: relative;
    color: #000000;
    font-size: 20px;
    line-height: 30px;
    padding-right: 20px;
    padding-top: 10px;
}

.box-cookie-txt a{
    color: #0d56a6;
    text-decoration: underline;
}

.box-cookie-txt a:hover{
    text-decoration: none;
}

.box-cookie{
    position: relative;
    display: block;
    width: 65px;
}

.box-cookie img{
    border-radius: 50%;
    border: 1px solid #0d56a6;
}

/* Cookie Popup */

/* Table */

.box-table{
    position: relative;
    display: block;
    width: 100%;
}

.box-table.box-purchase-order{
    margin-top: 15px;
    z-index: 1;
    border-right: 1px #e5e5e5 solid;
}

.box-table-row{
    position: relative;
    display: table;
    width: 100%;
    height: 90px;
}

.box-table-row .box-hover-table{
    position: absolute;
    display: none;
    width: 100%;
    height: 6px;
    background: #0d56a6;
    bottom: 0px;
    left: 0px;
}

.box-table-row:hover .box-hover-table{
    display: block;
}

.box-table-row:nth-child(odd){
    background: #ffffff;
}

.box-table-row:nth-child(even){
    background: #e6e6e6;
}

.box-table-row .row{
    display: table-row;
    margin-left: 0px;
    margin-right: 0px;
}

.box-table-row .row .col-table{
    padding-left: 0px;
    padding-right: 0px;
    display: table-cell;
    vertical-align: middle;
    border-top: 1px #e5e5e5 solid;
}

.box-table-row:last-child .row .col-table{
    border-bottom: 1px #e5e5e5 solid;
}

.box-table-row:nth-child(odd) .row .col-table{
    border-left: 1px #e5e5e5 solid;
}

.box-table-row:nth-child(even) .row .col-table{
    border-left: 1px #ffffff solid;
}

.box-table-row:nth-child(odd) .row .col-table.col-pdf{
    background: #3c3c3c;
    border-top: 1px #3c3c3c solid;
    border-bottom: none;
}

.box-table-row:nth-child(even) .row .col-table.col-pdf{
    background: #000000;
    border-top: 1px #000000 solid;
    border-bottom: none;
}

.box-table-row:hover .row .col-table.col-pdf{
    background: #054891;
}

.box-table-row .row .col-table.col-pdf{
    border-left: none;
}

.box-table-row .row .col-table.col-first{
    border-left: none;
}

.box-table .box-date{
    width: 120px;
    padding: 0px 10px;
    text-align: center;
    font-family: 'Anuphan';
    font-weight: var(--fw-medium);
    font-size: 18px;
    line-height: 18px;
    color: #000000;
}

.box-table .box-date:hover{
    color: #0d56a6;
}

.box-table .box-pdf{
    width: 75px;
    text-align: center;
    font-size: 40px;
    color: #ffffff;
}

.box-table .box-pdf:hover{
    font-size: 50px;
}

.box-table .box-order-id{
    padding: 0px 15px;
    text-align: center;
    font-family: 'Anuphan';
    font-weight: var(--fw-bold);
    font-size: 20px;
    line-height: 20px;
    color: #000000;
}

.box-table .box-order-id span{
    font-weight: var(--fw-medium);
    font-size: 18px;
    line-height: 18px;
    display: block;
    padding-bottom: 5px;
}

.box-table .box-order-id:hover{
    color: #0d56a6;
}

.box-table .box-price{
    width: 130px;
    padding: 0px 10px;
    text-align: center;
    font-family: 'Anuphan';
    font-weight: var(--fw-bold);
    font-size: 20px;
    line-height: 20px;
    color: #000000;
}

.box-table .box-price span{
    font-weight: var(--fw-medium);
    font-size: 18px;
    line-height: 18px;
    display: block;
    padding-bottom: 5px;
}

.box-table .box-price:hover{
    color: #0d56a6;
}

.box-table .box-status{
    position: relative;
    display: block;
    width: 100%;
    padding: 0px 15px 0px 10px;
}

.box-table .box-status .row{
    display: flex;
}

.box-table .box-status .top-txt{
    display: table;
    margin: auto;
    padding-bottom: 5px;
}

.box-table .box-status .top-txt .bullet-status{
    position: relative;
    display: block;
    margin-right: 5px;
    float: left;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    top: 5px;
}

.box-table .box-status .top-txt .txt{
    position: relative;
    display: block;
    float: left;
    font-weight: var(--fw-medium);
    font-size: 18px;
    line-height: 18px;
    color: #000000;
}

.box-table .box-status .bottom-txt{
    position: relative;
    display: block;
    font-weight: var(--fw-bold);
    font-size: 18px;
    line-height: 18px;
    color: #000000;
    text-align: center;
}

.box-table .box-status .more{
    position: relative;
    display: block;
    font-size: 34px;
    color: #054891;
}

.box-table .box-status:hover .top-txt .txt, .box-table .box-status:hover .bottom-txt{
    color: #0d56a6;
}

.box-table .box-status:hover .more{
    color: #000000;
}

/* Table */

/* Back To Top */

.back-to-top{
    position: fixed;
    display: none;
    bottom: 100px;
    right: calc(100% - 1920px - ((100% - 1920px) / 2) + 20px);
    cursor: pointer;
    z-index: 9999;
}

.back-to-top:hover{
    opacity: 0.7;
}

.back-to-top.show{
    display: table;
}

.back-to-top .box-btn-top{
    position: relative;
    display: table;
    width: 60px;
    height: 60px;
    background: #0d56a6;
    border-radius: 50%;
}

.back-to-top .box-btn-top:hover{
    opacity: 0.7;
}

.back-to-top .box-btn-top .box-btn-arrow{
    position: relative;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    font-size: 24px;
    color: #ffffff;
}

/* Back To Top */

/* Add to cart badge */

.add-to-cart-badge{
    position: fixed;
    display: none;
    bottom: 30px;
    right: calc(100% - 1920px - ((100% - 1920px) / 2));
    cursor: pointer;
    z-index: 10000;
    padding: 20px 20px;
    background: #fc6500;
}

.add-to-cart-badge.active{
    display: block;
}

.add-to-cart-badge .icon-ic_cart{
    font-size: 50px;
    color: #ffffff;
    padding-right: 15px;
}

.add-to-cart-badge .txt{
    font-size: 20px;
    font-weight: var(--fw-medium);
    color: #fff;
}

/* Add to cart badge */

/* Paging */

.box-paging{
    position: relative;
    display: table;
    margin: auto;
    padding-top: 20px;
}

.pagination-container {
    display: flex;
    justify-content: center;
}

.pagination {
    list-style: none;
    padding: 0;
    display: flex;
    align-items: center;
}

.page-item {
    margin: 0 3px;
    display: table;
}

.page-link{
    position: relative;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.page-item a,
.page-item span {
    text-decoration: none;
    color: #ffffff;
    background-color: #3c3c3c;
    border: 1px solid #3c3c3c;
    border-radius: 5px;
    transition: background-color 0.3s, color 0.3s;
    font-family: 'Anuphan';
    font-weight: var(--fw-medium);
    width: 40px;
    height: 40px;
}

.page-item.active span {
    color: #fff;
    background-color: #fc6500;
    border-color: #fc6500;
}

.page-item.disabled span {
    background: #3c3c3c;
    color: #fff;
    cursor: not-allowed;
}

.page-item a:hover {
    color: #ffffff;
    background-color: #3c3c3c;
    border-color: #3c3c3c;
    opacity: 0.7;
}

.page-item.disabled a,
.page-item.disabled span {
    pointer-events: none;
    opacity: 0.5;
}

.page-item a[rel="prev"],
.page-item a[rel="next"] {
    font-size: 18px;
    background: #0d56a6;
    border-color: #0d56a6;
}

/* Paging */

/* Modal Error */

#errorModal .modal-content{
    border: none;
    border-radius: 0px;
}

#errorModal .modal-header{
    padding: 25px 20px;
    background: #0d56a6;
    border: none;
    border-radius: 0px;
}


#errorModal .modal-title{
    position: relative;
    display: table;
    width: 100%;
    text-align: center;
    font-weight: var(--fw-bold);
    color: #ffffff;
    font-size: 20px;
}

#errorModal .modal-body{
    padding: 30px 20px 30px 20px;
    font-weight: var(--fw-medium);
    color: #000000;
    font-size: 18px;
    text-align: center;
}

#errorModal .modal-close{
    position: absolute;
    top: 0px;
    right: 0px;
    color: #ffffff;
    background: #fc6500;
    border-radius: 0px;
    line-height: 0px;
    font-size: 25px;
    padding: 5px;
    margin: 0px;
}

#errorModal .modal-close:hover{
    opacity: 0.7;
}

#errorModal .btn-area{
    position: relative;
    display: table;
    margin: auto;
    padding: 0px 20px 30px 20px;
}

#errorModal .btn-area .btn-err-close {
    position: relative;
    display: table-cell;
    font-size: 18px;
    line-height: 18px;
    font-weight: var(--fw-medium);
    color: #ffffff;
    background: #fc6500;
    border: 1px solid #fc6500;
    padding: 3px 15px 3px 15px;
    border-radius: 0px;
    margin: 0;
    height: 40px;
    vertical-align: middle;
    width: 80px;
}

#errorModal .btn-area .btn-err-close:hover{
    opacity: 0.8;
    background: #fc6500;
    border: 1px solid #fc6500;
}

/* Modal Error */

/* Member */

.box-member-header{
    position: relative;
    display: block;
    width: 100%;
    padding: 0px 40px 30px 40px;
    border-bottom: 1px solid #e5e5e5;
}

.box-member-header .box-title{
    position: relative;
    display: block;
    color: #054891;
    font-size: var(--fs-9);
    font-weight: var(--fw-bold);
}

.box-member-header .box-nav-member{
    position: relative;
    top: 2px;
}

.box-member-header .box-nav-member .col-item a{
    color: #000000;
    font-size: var(--fs-10);
    font-weight: var(--fw-medium);
}

.box-member-header .box-nav-member .col-item a:hover{
    color: #054891;
    font-weight: var(--fw-medium);
}

.box-member-header .box-nav-member .col-pipe{
    padding: 0px 10px;
}

.box-member-header .box-nav-member .col-pipe .pipe{
    color: #054891;
    font-size: var(--fs-10);
    font-weight: var(--fw-medium);
}

.box-member-form{
    position: relative;
    display: block;
    width: 100%;
    padding: 20px 80px 20px 80px;
}

.box-member-form .alert{
    background-color: #f80000;
    border: none;
    color: #ffffff;
    font-family: 'Anuphan';
    border-radius: 3px;
    font-weight: 600;
}

/* Member */

/* Login Page */

.box-login{
    position: relative;
    display: table;
    width: 100%;
    height: 100%;
    padding: calc(100px + 30px) 0px 0px 0px;
    background: url("../../images/bg-logo-itac.png") no-repeat;
    background-size: auto calc(100% - 30px);
    background-position: calc(((1920px - 1190px) / 2) + 800px) bottom;
}

.box-login .content-container{
    height: 100%;
}

.box-login-area{
    position: relative;
    display: table;
    width: 800px;
    height: 100%;
    padding: 30px 0px;
    background: #ffffff;
    margin: auto;
}

/* Login Page */

/* Forgot Password Page */

.box-forgot{
    position: relative;
    display: table;
    width: 100%;
    height: 100%;
    padding: calc(100px + 30px) 0px 0px 0px;
    background: url("../../images/bg-logo-itac.png") no-repeat;
    background-size: auto calc(100% - 30px);
    background-position: calc(((1920px - 1190px) / 2) + 800px) bottom;
}

.box-forgot .content-container{
    height: 100%;
}

.box-forgot-area{
    position: relative;
    display: table;
    width: 800px;
    height: 100%;
    padding: 30px 0px;
    background: #ffffff;
    margin: auto;
}

/* Forgot Password Page */

/* New Password Page */

.box-new-password{
    position: relative;
    display: table;
    width: 100%;
    height: 100%;
    padding: calc(100px + 30px) 0px 0px 0px;
    background: url("../../images/bg-logo-itac.png") no-repeat;
    background-size: auto calc(100% - 30px);
    background-position: calc(((1920px - 1190px) / 2) + 800px) bottom;
}

.box-new-password .content-container{
    height: 100%;
}

.box-new-password-area{
    position: relative;
    display: table;
    width: 800px;
    height: 100%;
    padding: 30px 0px;
    background: #ffffff;
    margin: auto;
}

/* New Password Page */

/* Register Page */

.box-register{
    position: relative;
    display: table;
    width: 100%;
    height: 100%;
    padding: calc(100px + 30px) 0px 0px 0px;
    background: url("../../images/bg-logo-itac.png") no-repeat;
    background-size: auto calc(100% - 30px);
    background-position: calc(((1920px - 1190px) / 2) + 1000px) bottom;
}

.box-register .content-container{
    height: 100%;
}

.box-register-area{
    position: relative;
    display: table;
    width: 100%;
    height: 100%;
    padding: 30px 0px;
    background: #ffffff;
    margin: auto;
}

.box-register-area .row.form{
    margin-left: -10px;
    margin-right: -10px;
}

.box-register-area .row.form .col-form{
    padding-left: 10px;
    padding-right: 10px;
}

.box-register-area .row.form .col-form .box-input{
    margin: 10px 0px;
}

.box-register-area .row.form .col-form .box-input.attachment{
    background: #ececec;
    border: 1px solid #e5e5e5;
    padding: 20px 20px 20px 20px;
}

.box-register-area .row.form .col-form .box-input.attachment .jFiler-theme-default .jFiler-input{
    margin-bottom: 0px;
    width: 100%;
    height: 60px;
    border: none;
    border-radius: 0;
    background: #054891;
    box-shadow: none;
    display: table;
}

.box-register-area .row.form .col-form .box-input.attachment .jFiler-theme-default .jFiler-input:hover{
    opacity: 0.7;
}

.box-register-area .row.form .col-form .box-input.attachment .jFiler-theme-default .jFiler-input-caption {
    display: table-cell;
    float: unset;
    width: 100%;
    height: 100%;
    padding-top: 0px;
    padding-left: 15px;
    text-overflow: ellipsis;
    overflow: hidden;
    vertical-align: middle;
    font-family: 'Anuphan';
    font-size: 20px;
    color: #ffffff;
}

.box-register-area .row.form .col-form .box-input.attachment .jFiler-theme-default .jFiler-input-button {
    display: table;
    float: right;
    width: auto;
    height: 100%;
    padding: 0px 15px;
    border-left: none;
    color: #666666;
    text-align: center;
    background-color: #054891;
    background-image: unset;
    transition: all .1s ease-out;
}

.box-register-area .row.form .col-form .box-input.attachment .jFiler-theme-default .jFiler-input-button i{
    position: relative;
    display: table-cell;
    vertical-align: middle;
    font-size: 28px;
    color: #ffffff;
}

.box-register-area .row.form .col-form .box-input.attachment .jFiler-items-default .jFiler-item {
    position: relative;
    padding: 15px;
    margin-bottom: 0px;
    background: #f7f7f7;
    color: #4d4d4c;
    margin-top: 15px;
    font-family: 'anuphan';
}

.box-register-area .row.form .col-form .box-input.attachment .jFiler-items-default .jFiler-item-assets{
    right: 15px;
}

.box-register-area .row.form .col-form .box-input.attachment .jFiler-items-default .jFiler-item-assets ul.list-inline li{
    padding-right: 0px;
    padding-left: 0px;
}

.box-register-area .row.form .col-form .box-input.attachment .jFiler-items-default .jFiler-item .jFiler-item-title{
    font-weight: var(--fw-semi-bold);
    font-size: 15px;
    line-height: normal;
    color: #000000;
}

.box-register-area .row.form .col-form .box-input.attachment .jFiler-items-default .jFiler-item .jFiler-item-others {
    font-size: 13px;
    line-height: normal;
    color: rgba(0,0,0, 0.5);
    font-weight: 400;
    padding-top: 5px;
}

.box-register-area .row.form .col-form .box-input.attachment .icon-jfi-file-o:before {
    content: "\f15c";
    font-family: 'Font Awesome 6 Sharp';
    font-weight: 300;
    color: #054891;
}

.box-register-area .row.form .col-form .box-input.attachment .jFiler-items-default .jFiler-item-assets a {
    padding: 10px 12px 12px 12px;
    cursor: pointer;
    background: #054891;
    color: #ffffff;
    border-radius: 0px;
    border: none;
    text-decoration: none;
    font-size: 20px;
}

.box-register-area .row.form .col-form .box-input.attachment .jFiler-items-default .jFiler-item-assets a:hover {
    opacity: 0.7;
}

.box-register-area .row.form .col-form .box-input.attachment .jFiler-items-default .jFiler-item-assets a:before {
    content: "\e2b4";
    font-family: 'Font Awesome 6 Sharp';
    font-weight: 900;
    color: #ffffff;
}

.box-attachment-txt{
    position: relative;
    display: block;
    color: #054891;
    font-size: 24px;
    font-weight: var(--fw-medium);
    padding: 20px 0px 0px 0px;
}

.box_radio .sub_radio {
    display: inline-block;
    margin-right: 25px;
}

.box_radio .sub_radio .check_regist {
    font-size: 18px;
    color: #054891;
}

.check-container {
    display: flex;
    position: relative;
    padding-left: 29px;
    margin-bottom: 0px;
    cursor: pointer;
    align-items: center;
    font-size: 16px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.check-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 1px;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: transparent;
    border: 2px solid #054891;
    border-radius: 2px;
    cursor: pointer;
}

/* On mouse-over, add a grey background color */
.check-container:hover input ~ .checkmark {
    background-color: transparent;
}

/* When the checkbox is checked, add a blue background */
.check-container input:checked ~ .checkmark {
    border: 2px solid #fc6500;
}

.check-container.check_regist {
    display: inline-block;
}
.check-container.check_regist input:checked ~ .checkmark {
    background-color: #ffffff;
    border: 2px solid #fc6500;
}

.check-container.check_regist .checkmark:after {
    border: solid #054891;
    border-width: 0 5px 5px 0;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.check-container input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.check-container .checkmark:after {
    left: 8px;
    top: -10px;
    width: 10px;
    height: 25px;
    border: solid yellow;
    border-width: 0 5px 5px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.box-require-doc {
    padding-top: 10px;
    color: rgba(0, 0, 0, 0.7);
}

.box-require-doc .top-row{
    padding-top: 10px;
    font-weight: var(--fw-medium);
}

.box-require-doc .box-indent{
    position: relative;
    display: table;
    width: 100%;
    padding-top: 10px;
}

.box-require-doc .box-indent .box-h-indent{
    position: relative;
    display: block;
    width: 20px;
    float: left;
}

.box-require-doc .box-indent .box-h-indent i{
    position: relative;
    font-size: 7px;
    top: -3px;
}

.box-require-doc .box-indent .box-t-indent{
    position: relative;
    display: block;
    width: calc(100% - 20px);
    float: left;
}

/* Register Page */

/* Homepage */

.section-banner{
    position: relative;
    display: block;
    width: 1920px;
}

.box-banner-home{
    position: relative;
    display: block;
    width: 100%;
}

.main-slider .item img{
    width: 100%;
}

.banner-thumb{
    position: absolute;
    display: table;
    top: 0px;
    height: 100%;
    width: auto;
    right: 0px;
}

.banner-thumb .thumbnail-slider{
    display: table-cell;
    vertical-align: middle;
    margin: 0px;
}

.banner-thumb .thumbnail-slider .item{
    cursor: pointer;
    padding: 0px;
    background: #ffffff;
    border: 1px solid #e8e8e8;
    border-top: none;
}

.banner-thumb .thumbnail-slider .item.active{
    background: #0d56a6;
    border: 1px solid #0d56a6;
    border-top: none;
}

.banner-thumb .thumbnail-slider .item .box-thumb-detail{
    margin: 0px;
    padding: 15px 15px;
}

.banner-thumb .thumbnail-slider .item .box-thumb-detail .box-img{
    padding: 0px 15px 0px 0px;
}

.banner-thumb .thumbnail-slider .item .box-thumb-detail .box-img .img-inner{
    width: 65px;
}

.banner-thumb .thumbnail-slider .item .box-thumb-detail .box-img .img-inner img{
    border-radius: 50%;
}

.banner-thumb .thumbnail-slider .item .box-thumb-detail .box-txt{
    padding: 0px 5px 0px 0px;
}

.banner-thumb .thumbnail-slider .item .box-thumb-detail .box-txt .txt-inner{
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    width: 115px;
    font-size: 18px;
    line-height: 22px;
    font-weight: var(--fw-semi-bold);
    color: #000000;
}

.banner-thumb .thumbnail-slider .item.active .box-thumb-detail .box-txt .txt-inner{
    color: #ffffff;
}

.section-news-header-number{
    position: relative;
    display: table;
    width: 100%;
    background: #ffffff;
}

.section-news-header-number .section-news-header-number-inner{
    position: relative;
    display: table;
    width: 100%;
    padding: 0px 275px;
}

.section-news-header-number .section-news-header-number-inner .box-number-area{
    position: relative;
    display: table;
    margin-top: -165px;
    padding: 30px 80px 5px 80px;
    background: #ffffff;
}

.section-news-header-number .section-news-header-number-inner .box-number{
    position: relative;
    display: block;
    font-size: 220px;
    line-height: 220px;
    font-family: 'Oswald';
    font-weight: 700;
    color: #0d56a6;
}

.section-news-header-number .section-news-header-number-inner .box-number .icon-corner {
    position: absolute;
    left: -10px;
    bottom: 15px;
    font-size: 50px;
}

.section-news-home{
    position: relative;
    display: table;
    width: 100%;
    background: #ffffff;
}

.section-news-home .box-txt-header{
    position: relative;
    display: block;
    padding: 5px 0px 30px 0px;
    border-bottom: 1px #e5e5e5 solid;
}

.section-news-home .box-txt-header .txt{
    position: relative;
    display: block;
    font-family: 'Anuphan';
    font-weight: 700;
    font-size: 30px;
    line-height: 30px;
    color: #000000;
}

.section-news-home .box-txt-header .txt-line{
    position: relative;
    display: block;
    width: 65px;
    height: 6px;
    background: #3c3c3c;
    margin-bottom: 3px;
}

/* Homepage */

/* Section Category */

.section-category{
    position: relative;
    display: block;
    width: 1920px;
    background: #054891 url("../../images/bg-category-full.png") bottom center no-repeat;
    border-bottom: 1px solid #e5e5e5;
}

.section-category .box-category-title{
    position: relative;
    display: table;
    width: 100%;
}

.section-category .box-category-title.product-list{
    padding-top: 35px;
}

.section-category .box-category-title .box-number{
    position: relative;
    display: block;
    font-size: 220px;
    line-height: 220px;
    margin-top: -120px;
    font-family: 'Oswald';
    font-weight: 700;
    color: #0d56a6;
    margin-left: 35px;
}

.section-category .box-category-title .box-number .icon-corner {
    position: absolute;
    left: -10px;
    bottom: 15px;
    font-size: 50px;
}

.section-category .box-category-title .box-txt-area{
    position: relative;
    display: block;
    padding: 10px 0px 40px 0px;
}

.section-category .box-category-title .box-txt-area .txt{
    position: relative;
    display: block;
    font-family: 'Anuphan';
    font-weight: 700;
    font-size: 30px;
    line-height: 30px;
    color: #ffffff;
    padding-left: 45px;
}

.section-category .box-category-title .box-txt-area .txt-line{
    position: relative;
    display: block;
    width: 65px;
    height: 6px;
    background: #ffffff;
    margin-top: 3px;
}

.box-category-slide{
    position: relative;
    display: block;
    width: 100%;
    padding-bottom: 20px;
}

.box-category-slide .category-slider .item{
    padding: 0px 45px;
    cursor: pointer;
}

.box-category-slide .category-slider .item .box-img{
    position: relative;
    display: block;
}

.box-category-slide .category-slider .item .box-img img{
    position: relative;
    z-index: 1;
}

.box-category-slide .category-slider .item .box-img .box-bg-txt{
    position: absolute;
    display: block;
    line-height: normal;
    font-family: 'Oswald';
    font-weight: 700;
    text-transform: uppercase;
    z-index: 0;
    color: #2e66aa;
    width: 100%;
    text-align: center;
}

.box-category-slide .category-slider .item:hover .box-img .box-bg-txt, .box-category-slide .category-slider .item .box-item.active .box-img .box-bg-txt{
    color: #ffffff;
}

.box-category-slide .category-slider .item .box-img .box-bg-txt.car-1{
    bottom: 50px;
    font-size: 120px;
}

.box-category-slide .category-slider .item .box-img .box-bg-txt.car-2{
    bottom: 15px;
    font-size: 180px;
}

.box-category-slide .category-slider .item .box-img .box-bg-txt.car-3{
    bottom: 70px;
    font-size: 100px;
    line-height: 100px;
}

.box-category-slide .category-slider .item .box-img .box-bg-txt.car-4{
    bottom: 80px;
    font-size: 90px;
    line-height: 90px;
}

.box-category-slide .category-slider .item .box-img .box-bg-txt.car-5{
    bottom: 70px;
    font-size: 120px;
    line-height: 120px;
}

.box-category-slide .category-slider .item .box-img .box-bg-txt.car-6{
    bottom: 70px;
    font-size: 100px;
    line-height: 100px;
}

.box-category-slide .category-slider .item .box-img .box-bg-txt.car-7{
    bottom: 95px;
    font-size: 185px;
    line-height: 185px;
}

.box-category-slide .category-slider .item .box-img .box-bg-txt.car-8{
    bottom: 85px;
    font-size: 140px;
    line-height: 140px;
}

.box-category-slide .category-slider .item .txt-category{
    position: relative;
    display: block;
    width: 100%;
    font-family: 'Anuphan';
    font-weight: 500;
    font-size: 20px;
    line-height: 20px;
    color: #3572bd;
    text-align: center;
    padding: 10px 0px 30px 0px;
}

.box-category-slide .category-slider .item:hover .txt-category, .box-category-slide .category-slider .item .box-item.active .txt-category{
    color: #ffffff;
}

.box-category-slide .slick-prev{
    left: 0px;
    z-index: 1;
}

.box-category-slide .slick-next{
    right: 0px;
    z-index: 1;
}

.box-category-slide .slick-prev, .box-category-slide .slick-next{
    width: 110px;
    height: 75px;
    background: #3c3c3c;
}

.box-category-slide .slick-prev:hover, .box-category-slide .slick-next:hover{
    opacity: 0.75;
}

.box-category-slide .slick-prev:before {
    font-family: 'Font Awesome 6 Pro';
    content: "\f053";
    color: #ffffff;
    opacity: 1;
    font-size: 30px;
    line-height: 1;
    padding-left: 40px;
}

.box-category-slide .slick-next:before {
    font-family: 'Font Awesome 6 Pro';
    content: "\f054";
    color: #ffffff;
    opacity: 1;
    font-size: 30px;
    line-height: 1;
    padding-right: 40px;
}

.box-category-name{
    position: relative;
    display: block;
    width: 100%;
    border-top: 1px solid #305d8e;
}

.box-category-name .box-category-name-area{
    position: relative;
    display: table;
    width: 100%;
    height: 90px;
}

.box-category-name .box-category-name-area .category-txt{
    position: relative;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    font-family: 'Anuphan';
    font-weight: 700;
    color: #ffffff;
    font-size: 30px;
    line-height: 30px;
}

.box-category-name .box-category-name-area .category-txt span{
    font-size: 20px;
    line-height: 20px;
}

.box-category-name .box-category-name-area .btn-filter{
    position: absolute;
    display: table;
    width: 90px;
    height: 90px;
    background: #313c49;
    top: 0px;
    right: 1px;
    cursor: pointer;
    border: 1px solid #305d8e;
    border-top: none;
    border-bottom: none;
}

.box-category-name .box-category-name-area .btn-filter div {
    position: relative;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    font-size: 30px;
    color: #ffffff;
    cursor: pointer;
}

.box-category-name .box-category-name-area .btn-filter:hover div {
    color: #3d85d3;
}

.box-category-name .box-category-name-area .btn-filter i{
    display: none;
    font-size: 38px;
}

.box-category-name .box-category-name-area .btn-filter.active i{
    display: inline-block;
}

.box-category-name .box-category-name-area .btn-filter.active span{
    display: none;
}

/* Section Category */

/* Section Filter */

.section-filter{
    position: relative;
    display: none;
    width: 1920px;
    background: #ffffff;
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5
}

.section-filter.search{
    display: block;
}

.section-filter .box-filter-area{
    position: relative;
    display: block;
    width: 100%;
    padding: 25px 80px 35px 80px;
}

.section-filter .box-filter-area .box-header-filter{
    position: relative;
    display: block;
    font-weight: var(--fw-medium);
    font-size: 20px;
    line-height: 22px;
    color: #000000;
    padding-bottom: 10px;
}

.section-filter .box-filter-area .box-header-filter span{
    position: relative;
    top: 2px;
    left: 2px;
}

.section-filter .box-filter-area .row{
    margin-left: -8px;
    margin-right: -8px;
}

.section-filter .box-filter-area .row .col-item{
    padding-left: 8px;
    padding-right: 8px;
}

.section-filter .box-filter-area select{
    border: 1px solid #e5e5e5 !important;
    height: 60px !important;
    font-size: 18px !important;
    border-radius: 0px !important;
    background: #ececec url(../../images/arrow-dropdown.png) no-repeat !important;
    background-size: auto 60px !important;
    background-position: 100% !important;
    appearance: none !important;
    color: #000000;
    padding-left: 25px;
    padding-right: 70px;
}

.section-filter .box-filter-area select.place-holder{
    color: #838383;
}

.section-filter .box-filter-area .box-btn-area{
    position: relative;
    display: table;
    margin: 30px auto 0px auto;
}

.section-filter .box-filter-area .box-btn-area .btn-filter-search {
    position: relative;
    display: table-cell;
    font-size: 18px;
    line-height: 18px;
    font-weight: var(--fw-medium);
    color: #ffffff;
    background: #3c3c3c;
    border: 1px solid #3c3c3c;
    padding: 3px 15px 3px 15px;
    border-radius: 0px;
    margin: 0;
    height: 60px;
    vertical-align: middle;
    width: 215px;
}

.section-filter .box-filter-area .box-btn-area .btn-filter-search:hover{
    opacity: 0.8;
}

/* Section Filter */

/* Section Product */

.section-product{
    position: relative;
    display: block;
    width: 1920px;
    padding-bottom: 50px;
    background: url("../../images/bg-logo-itac.png") no-repeat;
    background-size: 989px auto;
    background-position: -45px bottom;
}

.section-product .bg-square-top .line-right {
    right: calc(((1920px - 1190px) / 2) - 270px);
}

.section-product.home{
    padding-bottom: 200px;
}

.box-product-list{
    position: relative;
    display: table;
    background: #7e7e7e;
    border: 1px solid #e5e5e5;
    border-top: none;
    border-bottom: none;
    margin: auto;
    width: 1120px;
}

.box-product-list .row{
    margin-left: 0px;
    margin-right: 0px;
}

.box-product-list .col-product{
    padding: 0px 0px;
    border: 1px solid #e5e5e5;
    border-top: none;
    border-left: none;
    background: #ffffff;
}

.box-product-list .col-product.active{
    border-bottom: 1px solid #033b78;
}

.box-product-list .col-product:nth-child(5n){
    border-right: 1px solid #e5e5e5;
}

.box-product-list .col-product .box-product-item{
    position: relative;
    cursor: pointer;
}

.box-product-list .col-product .box-product-item .box-img{
    position: relative;
    display: block;
    width: 100%;
    padding: 10px 60px;
    overflow: hidden;
}

.box-product-list .col-product .box-product-item .box-img img {
    position: relative;
    transition: transform 0.8s ease-in-out;
}

.box-product-list .col-product .box-product-item:hover .box-img img, .box-product-list .col-product .box-product-item.active .box-img img {
    /*top: 80px;*/

    transform: translateY(80px) scale(1.8);
}

.box-product-list .col-product .box-product-item .box-txt{
    position: relative;
    display: block;
    width: 100%;
    padding: 20px 5px;
    border-top: 1px solid #e5e5e5;
    text-align: center;
    font-size: 24px;
    line-height: 28px;
    font-weight: var(--fw-medium);
}


.box-product-list .col-product .box-product-item:hover .box-txt{
    opacity: 0.5;
}

.box-product-list .col-product .box-product-item.active .box-txt, .box-product-list .col-product .box-product-item.active:hover .box-txt{
    color: #ffffff;
    background: #033b78;
    opacity: 1;
}

.box-product-list-item{
    position: relative;
    display: none !important;
    width: 100%;
    background: #ffffff;
    padding: 45px 0px 20px 0px;
    border-top: 10px solid #033b78;
    border-bottom: 10px solid #033b78;
    transition: transform 0.3s ease-in-out;
}

.box-product-list-item.active{
    display: block !important;
}

.box-product-list-item .box-inner{
    position: relative;
    display: block;
}

.box-product-list-item .btn-close-tab{
    position: absolute;
    display: table;
    width: 45px;
    height: 45px;
    background: #033b78;
    color: #ffffff;
    top: 0px;
    right: 0px;
    cursor: pointer;
    z-index: 1;
}

.box-product-list-item .btn-close-tab:hover{
    color: #3d85d3;
}

.box-product-list-item .btn-close-tab i{
    position: relative;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    font-size: 32px;
}

.box-product-list-item .box-inner{
    position: relative;
}

.box-product-list-item .box-inner .row{
    margin-right: 0px;
    margin-left: 0px;
    padding: 20px 35px;
    border-top: 1px solid #e5e5e5;
}

.box-product-list-item .box-inner .row:hover{
    background: #e7f3ff;
}

.box-product-list-item .box-inner .row:first-child{
    border-top: none;
}

.box-product-list-item .box-inner .row .col-inner-item{
    padding-right: 0px;
    padding-left: 0px;
}

.box-product-list-item .box-inner .row .col-inner-item.col-product-name{
    width: 270px;
}

.box-product-list-item .box-inner .row .col-inner-item.col-product-name .product-name{
    position: relative;
    font-size: 22px;
    line-height: 26px;
    font-weight: var(--fw-bold);
    color: #000000;
}

.box-product-list-item .box-inner .row .col-inner-item.col-product-name .product-size{
    position: relative;
    font-size: 16px;
    line-height: 20px;
    font-weight: var(--fw-medium);
    color: #000000;
}

.box-product-list-item .box-inner .row .col-inner-item.col-product-name .product-dot{
    position: relative;
    font-size: 14px;
    line-height: 18px;
    font-weight: var(--fw-medium);
    color: #000000;
}

.box-product-list-item .box-inner .row .col-inner-item.col-product-name a:hover .product-name, .box-product-list-item .box-inner .row .col-inner-item.col-product-name a:hover .product-size, .box-product-list-item .box-inner .row .col-inner-item.col-product-name a:hover .product-dot{
    color: #0d56a6;
}

.box-product-list-item .box-inner .row .col-inner-item.col-stock{
    padding-left: 15px;
    padding-right: 15px;
    text-align: center;
}

.box-product-list-item .box-inner .row .col-inner-item.col-stock .product-stock{
    position: relative;
    font-size: 16px;
    line-height: 20px;
    font-weight: var(--fw-medium);
    color: #bebebe;
    padding-top: 2px;
}

.box-product-list-item .box-inner .row .col-inner-item.col-stock .badge{
    font-size: 16px;
    line-height: 16px;
    font-weight: var(--fw-medium);
    padding: 8px 0px;
    width: 60px;
    border-radius: 3px;
}

.box-product-list-item .box-inner .row .col-inner-item.col-stock .badge.stock{
    background: #0b7000;
}

.box-product-list-item .box-inner .row .col-inner-item.col-stock .badge.no-stock{
    background: #f80000;
}

.box-product-list-item .box-inner .row .col-inner-item.col-price{
    padding-left: 15px;
    padding-right: 15px;
}

.box-product-list-item .box-inner .row .col-inner-item.col-price .price{
    position: relative;
    font-size: 16px;
    line-height: 16px;
    font-weight: var(--fw-medium);
    color: #000000;
}

.box-product-list-item .box-inner .row .col-inner-item.col-price .price span{
    position: relative;
    font-size: 30px;
    line-height: 30px;
    font-weight: var(--fw-bold);
    color: #033b78;
}

.box-product-list-item .box-inner .row .col-inner-item.col-price .price span i{
    font-size: 26px;
    padding-right: 1px;
}

.box-product-list-item .box-inner .row .col-inner-item.col-price .discount-price{
    position: relative;
    font-size: 16px;
    line-height: 16px;
    font-weight: var(--fw-medium);
    color: #000000;
    padding-top: 2px;
}

.box-product-list-item .box-inner .row .col-inner-item.col-price .discount-price span{
    font-weight: var(--fw-bold);
}

.box-product-list-item .box-inner .row .col-inner-item.col-price .discount-price span.full-price{
    font-weight: var(--fw-medium);
    text-decoration: line-through;
}

.box-product-list-item .box-inner .row .col-inner-item.col-qty{
    padding-left: 15px;
    padding-right: 15px;
}

.box-product-list-item .box-inner .row .col-inner-item.col-qty .btn-quantity{
    border: 1px solid #e5e5e5;
    background: #ffffff;
}

.box-product-list-item .box-inner .row .col-inner-item.col-qty .btn-qty{
    position: relative;
    display: table-cell;
    vertical-align: middle;
    font-size: 30px;
    background: #ffffff;
    width: 50px;
    height: 60px;
    border: none;
    color: #033b78;
}

.box-product-list-item .box-inner .row .col-inner-item.col-qty .btn-qty:hover{
    opacity: 0.7;
}

.box-product-list-item .box-inner .row .col-inner-item.col-qty .btn-qty.button-plus:after{
    content: "\2b";
    font-family: 'Font Awesome 6 Sharp';
    font-weight: 900;
    color: #033b78;
}

.box-product-list-item .box-inner .row .col-inner-item.col-qty .btn-qty.button-minus:after{
    content: "\f068";
    font-family: 'Font Awesome 6 Sharp';
    font-weight: 900;
    color: #033b78;
}

.box-product-list-item .box-inner .row .col-inner-item.col-qty .btn-qty.disabled.button-plus:after{
    opacity: 0.7 !important;
    color: #7e7e7e;
}

.box-product-list-item .box-inner .row .col-inner-item.col-qty .btn-qty.disabled.button-minus:after{
    opacity: 0.7 !important;
    color: #7e7e7e;
}

.box-product-list-item .box-inner .row .col-inner-item.col-qty .btn-qty.disabled:hover{
    opacity: unset;
}

.box-product-list-item .box-inner .row .col-inner-item.col-qty .quantity-field{
    border: none;
    text-align: center;
    font-size: 18px;
    height: 60px;
    width: 50px;
    position: relative;
    vertical-align: middle;
    color: #000000;
    background: #ffffff;
}

.box-product-list-item .box-inner .row .col-inner-item.col-btn{
    padding-left: 30px;
    padding-right: 0px;
}

.box-product-list-item .box-inner .row .col-inner-item.col-btn .btn-add-to-cart{
    position: relative;
    display: table-cell;
    font-size: 18px;
    line-height: 18px;
    font-weight: var(--fw-medium);
    color: #ffffff;
    background: #fc6500;
    border: 1px solid #fc6500;
    padding: 3px 15px 3px 15px;
    border-radius: 0px;
    margin: 0;
    height: 60px;
    vertical-align: middle;
    width: 180px;
}

.box-product-list-item .box-inner .row .col-inner-item.col-btn .btn-add-to-cart.disabled{
    opacity: 0.7;
    background: #7e7e7e;
    border: 1px solid #7e7e7e;
}

.box-product-list-item .box-inner .row .col-inner-item.col-btn .btn-add-to-cart:hover{
    opacity: 0.8;
}

.box-not-found{
    position: relative;
    display: block;
    width: 100%;
    padding: 150px 20px;
    background: #ffffff;
}

.box-not-found .txt{
    position: relative;
    font-size: 40px;
    line-height: 0px;
    font-weight: var(--fw-bold);
    color: #033b78;
    text-align: center;
}

/* Section Product */

/* Purchase Order */

.box-purchase-order{
    position: relative;
    display: table;
    width: 100%;
    margin-top: 140px;
}

.box-purchase-order .box-use-money{
    position: relative;
    display: block;
    padding-left: 90px;
    padding-right: 40px;
}

.box-purchase-order .box-use-money .box-use-money-area{
    position: relative;
    display: block;
    width: 360px;
    background: #ffffff;
    padding: 0px 30px 0px 30px;
    box-shadow: -15px 15px 0px 0px #054891;
}

.box-purchase-order .box-use-money .box-use-money-area .box-title{
    position: relative;
    display: block;
    text-align: center;
    padding: 20px 0px 15px 0px;
    color: #054891;
    font-size: 30px;
    line-height: 30px;
    font-weight: var(--fw-bold);
}

.box-purchase-order .box-use-money .box-use-money-area .box-chart{
    position: relative;
    display: block;
    width: 100%;
}

.box-purchase-order .box-use-money .box-use-money-area .box-chart #chart{
    position: relative;
    z-index: 1;
}

.box-purchase-order .box-use-money .box-use-money-area .box-chart .box-chart-inner{
    position: absolute;
    display: table;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.box-purchase-order .box-use-money .box-use-money-area .box-chart .box-chart-inner .box-chart-inner-area{
    position: relative;
    display: table-cell;
    width: 100%;
    /*padding-top: 70px;*/
    vertical-align: middle;
    text-align: center;
}

.box-purchase-order .box-use-money .box-use-money-area .box-chart .box-chart-inner .box-chart-inner-area .icon{
    font-size: 25px;
}

.box-purchase-order .box-use-money .box-use-money-area .box-chart .box-chart-inner .box-chart-inner-area .txt-desc-use{
    position: relative;
    font-size: 22px;
    line-height: 22px;
    font-weight: var(--fw-medium);
    color: #000000;
    text-align: center;
    padding-top: 10px;
}

.box-purchase-order .box-use-money .box-use-money-area .box-chart .box-chart-inner .box-chart-inner-area .txt-desc-use-val{
    position: relative;
    font-size: 30px;
    line-height: 30px;
    font-weight: var(--fw-bold);
    color: #054891;
    text-align: center;
    padding-top: 2px;
}

.box-purchase-order .box-use-money .box-use-money-area .box-chart .box-chart-inner .box-chart-inner-area .txt-desc-amount{
    position: relative;
    font-size: 16px;
    line-height: 16px;
    font-weight: var(--fw-medium);
    color: #999999;
    text-align: center;
    padding-top: 8px;
}

.box-purchase-order .box-use-money .box-use-money-area .box-chart .box-chart-inner .box-chart-inner-area .txt-desc-amount-val{
    position: relative;
    font-size: 18px;
    line-height: 18px;
    font-weight: var(--fw-bold);
    color: #000000;
    text-align: center;
    padding-top: 4px;
}

.box-purchase-order .box-use-money .box-use-money-area .box-total{
    position: relative;
    display: table;
    margin: auto;
    padding: 20px 0px 30px 0px;
    color: #000000;
    font-size: 18px;
    line-height: 18px;
    font-weight: var(--fw-bold);
}

.box-purchase-order .box-use-money .box-use-money-area .box-total span{
    font-weight: var(--fw-regular);
    color: #999999;
    font-size: 16px;
    line-height: 16px;
    padding-right: 5px;
}

.box-purchase-order .box-order-list{
    position: relative;
    display: block;
    width: 100%;
}

.box-purchase-order .box-order-list .box-txt-title{
    position: relative;
    display: block;
    height: 45px;
    padding-top: 15px;
}

.box-purchase-order .box-order-list .box-txt-title .txt{
    position: relative;
    display: block;
    font-family: 'Anuphan';
    font-weight: var(--fw-bold);
    font-size: 30px;
    line-height: 30px;
    color: #054891;
}

.box-purchase-order .box-order-list .box-txt-title .txt-line{
    position: relative;
    display: block;
    width: 65px;
    height: 6px;
    background: #3c3c3c;
    margin-bottom: 3px;
}

.box-purchase-order .box-order-list .box-txt-order{
    position: relative;
    display: block;
    font-family: 'Anuphan';
    font-weight: var(--fw-regular);
    font-size: 18px;
    line-height: 22px;
    color: #000000;
}

.box-purchase-order .box-order-list .box-txt-order span{
    font-weight: var(--fw-bold);
    font-size: 20px;
    line-height: 22px;
}

.box-purchase-order-bg{
    position: absolute;
    display: block;
    width: 645px;
    height: 400px;
    top: 38px;
    right: 0px;
    background: #ffffff;
}

.box-purchase-order-bg .txt-line{
    position: absolute;
    display: block;
    width: 65px;
    height: 6px;
    background: #3c3c3c;
    top: -6px;
    right: calc(((1920px - 1190px) / 2));
}

.box-purchase-order-bg .bg-square-top .line-right{
    right: 0px;
}

.box-purchase-order-bg .box-number{
    position: absolute;
    display: block;
    font-size: 220px;
    line-height: 220px;
    top: -125px;
    font-family: 'Oswald';
    font-weight: 700;
    color: #0d56a6;
    left: -53px;
}

.box-purchase-order-bg .box-number .icon-corner {
    position: absolute;
    left: -32px;
    top: 120px;
    font-size: 50px;
}

.box-purchase-order .box-order-list .box-btn-area{
    position: relative;
    display: table;
    margin: 10px auto 0px auto;
    z-index: 1;
}

.box-purchase-order .box-order-list .box-btn-area .btn-more {
    position: relative;
    display: table-cell;
    font-size: 18px;
    line-height: 18px;
    font-weight: var(--fw-medium);
    color: #ffffff;
    background: #3c3c3c;
    border: 1px solid #3c3c3c;
    padding: 3px 15px 3px 15px;
    border-radius: 0px;
    margin: 0;
    height: 60px;
    vertical-align: middle;
    width: 215px;
}

.box-purchase-order .box-order-list  .box-btn-area .btn-more:hover{
    opacity: 0.8;
}

.box-purchase-order .box-not-found{
    padding: 150px 20px;
    border: 1px #e5e5e5 solid;
    border-right: none;
}

.box-purchase-order .box-not-found .txt{
    font-size: 24px;
}

.box-purchase-order.order-list-page{
    margin-top: 75px;
}

.page.box-order-id{
    width: 400px;
}

.page.box-price{
    width: 350px;
}

.box-paging.purchase-order{
    padding-top: 40px;
}

/* Purchase Order */

/* News List */

.box-news-content-list{
    position: relative;
    display: block;
    width: 100%;
}

.box-news-content-list.home{
    padding: 80px 0px 20px 0px;
}

.box-news-content-list.news{
    background: #ffffff;
    padding: 80px 0px 80px 0px;
}

.box-news-area{
    position: relative;
    display: block;
    width: 100%;
}

.box-news-area .row{
    margin-right: -30px;
    margin-left: -30px;
}

.box-news-area .row .col-item{
    padding-right: 30px;
    padding-left: 30px;
}

.box-news-area .box-news-item {
    position: relative;
    display: table;
    width: 100%;
    padding-bottom: 40px;
}

.box-news-area .box-news-item .box-img {
    position: relative;
    display: table;
    width: 100%;
    height: 100%;
    border: 1px #e5e5e5 solid;
}

.box-news-area .box-news-item:hover .box-img{
    opacity: 0.7;
}

.box-news-area .box-news-item .txt-date{
    position: relative;
    display: block;
    font-family: 'Anuphan';
    font-weight: var(--fw-medium);
    font-size: 18px;
    line-height: 22px;
    color: #999999;
    padding-top: 15px;
}

.box-news-area .box-news-item:hover .txt-date{
    color: #000000;
}

.box-news-area .box-news-item .box-h-txt {
    position: relative;
    display: inline-block;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #000;
    font-family: 'Anuphan';
    font-weight: var(--fw-medium);
    font-size: 22px;
    line-height: 28px;
    padding-top: 8px;
    height: 88px;
}

.box-news-area .box-news-item:hover .box-h-txt {
    font-weight: var(--fw-bold);
    color: #0d56a6;
}

.box-news-area .box-news-item .box-more{
    position: relative;
    display: block;
    font-family: 'Anuphan';
    font-weight: var(--fw-medium);
    font-size: 18px;
    line-height: 22px;
    color: #000000;
    padding-top: 40px;
}

.box-news-area .box-news-item .box-more span{
    position: relative;
    margin-left: 15px;
    top: 2px;
}

.box-news-area .box-news-item:hover .box-more{
    color: #0d56a6;
}

/* News List */

/* News Detail */

.box-news-title-detail {
    position: relative;
    display: block;
    font-family: 'Anuphan';
    font-weight: var(--fw-bold);
    font-size: 30px;
    line-height: 38px;
    color: #054891;
    padding-bottom: 20px;
}

.box-news-date-detail {
    position: relative;
    display: block;
    font-family: 'Anuphan';
    font-weight: var(--fw-medium);
    font-size: 24px;
    line-height: 24px;
    color: #000000;
    padding-bottom: 20px;
}

.box-news-date-detail i {
    position: relative;
    top: -1px;
}

.box-news-detail-img{
    position: relative;
    display: table;
    margin: 20px auto 40px auto;
}

.box-news-detail-img img{
    max-width: 100%;
}

.box-news-detail-txt{
    position: relative;
    display: block;
    width: 100%;
    font-family: 'Anuphan';
    font-weight: var(--fw-regular);
    font-size: 22px;
    line-height: 30px;
}

.box-news-detail-gallery{
    position: relative;
    display: block;
    width: 100%;
    padding: 40px 0px;
}

.box-news-detail-gallery .row{
    margin-left: -30px;
    margin-right: -30px;
}

.box-news-detail-gallery .row .col-item{
    padding-left: 30px;
    padding-right: 30px;
}

.box-news-detail-gallery .row .col-item .box-img{
    position: relative;
    display: block;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
    overflow: hidden;
    width: 100%;
    height: 160px;
}

.box-news-detail-gallery .row .col-item .box-img img{
    max-width: 100%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    will-change: initial;
    font-family: 'object-fit: cover;';
    border: 1px solid #e5e5e5;
}

/* News Detail */

/* Banner Inner Page */

.box-inner-banner{
    position: relative;
    display: table;
    width: 100%;
    height: 492px;
    background: #ececec url("../../images/bg-inner-page.jpg") bottom center;
    background-size: auto 492px;
}

.box-inner-banner .box-bottom-inner-banner{
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 90px;
}

.box-inner-banner .box-bottom-inner-banner .line{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 1px;
    background: #305d8e;
    z-index: 0;
}

.box-inner-banner .col-left{
    padding: 0px 0px;
}

.box-inner-banner .col-left .box-number {
    position: relative;
    display: block;
    font-size: 220px;
    line-height: 220px;
    font-family: 'Oswald';
    font-weight: 700;
    color: #0d56a6;
    margin: 65px 0px 0px 10px;
}

.box-inner-banner .col-left .box-number .icon-corner {
    position: absolute;
    left: -10px;
    bottom: 15px;
    font-size: 50px;
}

.box-inner-banner .col-left .box-content{
    position: relative;
    display: block;
    padding-left: 30px;
}

.box-inner-banner .col-left .box-breadcrumbs{
    position: relative;
    display: block;
}

.box-inner-banner .col-left .box-breadcrumbs .row{
    margin-left: -10px;
    margin-right: -10px;
}

.box-inner-banner .col-left .box-breadcrumbs .row .col-item{
    padding-left: 10px;
    padding-right: 10px;
}

.box-inner-banner .col-left .box-breadcrumbs .row .col-item a{
    font-family: 'Anuphan';
    font-weight: var(--fw-medium);
    font-size: 16px;
    line-height: 20px;
    color: #ffffff;
}

.box-inner-banner .col-left .box-breadcrumbs .row .col-item a:hover{
    color: #88c1ff;
}

.box-inner-banner .col-left .box-breadcrumbs .row .col-item .current-page{
    font-family: 'Anuphan';
    font-weight: var(--fw-medium);
    font-size: 16px;
    line-height: 20px;
    color: #88c1ff;
}

.box-inner-banner .col-left .box-breadcrumbs .row .col-item .space-line{
    position: relative;
    width: 35px;
    height: 1px;
    background: #ffffff;
}

.box-inner-banner .col-left .current-title-page{
    position: relative;
    display: block;
    font-family: 'Anuphan';
    font-weight: var(--fw-bold);
    font-size: 30px;
    line-height: 32px;
    color: #ffffff;
    padding-top: 15px;
}

.box-inner-banner .col-right{
    padding: 0px 0px;
}

.box-inner-banner .col-right .box-img{
    position: relative;
    height: 492px;
    z-index: 1;
}

.box-inner-banner .col-right .box-img img{
    width: auto;
    height: 492px;
}

.box-inner-banner .box-bottom-inner-banner .btn-back{
    position: absolute;
    display: table;
    width: 90px;
    height: 90px;
    top: 0px;
    right: 1px;
    cursor: pointer;
    border: 1px solid #305d8e;
    border-top: none;
    border-bottom: none;
    z-index: 1;
}

.box-inner-banner .box-bottom-inner-banner .btn-back div {
    position: relative;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    font-size: 22px;
    color: #ffffff;
    cursor: pointer;
    transform: rotate(180deg);
}

.box-inner-banner .box-bottom-inner-banner .btn-back:hover div {
    color: #3d85d3;
}

/* Banner Inner Page */

/* Product Detail */

.box-product-detail-top{
    position: relative;
    display: block;
    width: 100%;
    padding-top: 75px;
}

.box-product-detail-top .col-left{
    position: relative;
    padding: 0px;
}

.box-product-detail-top .col-left .box-gallery-area{
    position: relative;
    display: block;
    width: 655px;
    padding-right: 45px;
}

.box-product-detail-top .col-left .box-gallery-area .box-gallery-thumb{
    position: relative;
    display: block;
    float: left;
    border: 1px solid #e5e5e5;
    border-right: none;
    border-bottom: none;
}

.box-product-detail-top .col-left .box-gallery-area .box-gallery-thumb .thumb-img{
    position: relative;
    display: block;
    width: 120px;
    height: 120px;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
    overflow: hidden;
    background-color: #ffffff;
    border-bottom: 1px solid #e5e5e5;
    cursor: pointer;
}

.box-product-detail-top .col-left .box-gallery-area .box-gallery-thumb .thumb-img:hover{
    opacity: 0.7;
}

.box-product-detail-top .col-left .box-gallery-area .box-gallery-thumb .thumb-img.pattern{
    padding: 10px 25px;
}

.box-product-detail-top .col-left .box-gallery-area .box-gallery-thumb .thumb-img img{
    max-width: 100%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    will-change: initial;
    font-family: 'object-fit: cover;';
}

.box-product-detail-top .col-left .box-gallery-area .box-gallery-thumb .thumb-img .border-active{
    position: absolute;
    display: none;
    top: 0px;
    left: 0px;
    width: 4px;
    height: 100%;
    background: #054891;
}

.box-product-detail-top .col-left .box-gallery-area .box-gallery-thumb .thumb-img.active .border-active{
    display: block;
}

.box-product-detail-top .col-left .box-gallery-area .box-gallery-image{
    position: relative;
    display: block;
    width: calc(100% - 121px);
    float: left;
    background: #ffffff;
}

.box-product-detail-top .col-left .box-gallery-area .box-gallery-image .main-img{
    position: relative;
    display: none;
    width: 100%;
    height: 490px;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
    overflow: hidden;
    background-color: #ffffff;
    border: 1px solid #e5e5e5;
}

.box-product-detail-top .col-left .box-gallery-area .box-gallery-image .main-img.active{
    display: block;
}

.box-product-detail-top .col-left .box-gallery-area .box-gallery-image .main-img.pattern{
    padding: 20px 100px;
}

.box-product-detail-top .col-left .box-gallery-area .box-gallery-image .main-img img{
    max-width: 100%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    will-change: initial;
    font-family: 'object-fit: cover;';
}

.box-product-detail-top .col-left .box-gallery-area .box-gallery-image .main-img .btn-zoom{
    position: absolute;
    display: table;
    bottom: 0px;
    left: 0px;
    width: 60px;
    height: 60px;
    background: #636363;
    text-align: center;
}

.box-product-detail-top .col-left .box-gallery-area .box-gallery-image .main-img .btn-zoom span{
    position: relative;
    display: table-cell;
    color: #ffffff;
    vertical-align: middle;
    font-size: 24px;
}

.box-product-detail-top .col-left .box-gallery-area .box-gallery-image .main-img .btn-zoom:hover span{
    color: #3d85d3;
}

.box-product-detail-top .col-left .box-gallery-area .box-gallery-image .main-img .tag-sale{
    position: absolute;
    display: table;
    top: 0px;
    left: 0px;
    width: 67px;
    height: 60px;
    background: url("../../images/tag_sale.png");
    background-size: cover;
    text-align: center;
}

.box-product-detail-top .col-left .box-gallery-area .box-gallery-image .main-img .tag-sale .txt{
    position: relative;
    display: table-cell;
    color: #ffffff;
    vertical-align: middle;
    font-weight: var(--fw-bold);
    font-size: 20px;
    line-height: 20px;
    color: #ffffff;
}

.box-product-detail-top .col-right{
    position: relative;
    padding: 0px;
}

.box-product-detail-top .col-right .box-product-detail-title{
    position: relative;
    display: block;
    padding: 15px 0px 0px 5px;
}

.box-product-detail-top .col-right .box-product-detail-title .txt{
    position: relative;
    display: block;
    font-family: 'Anuphan';
    font-weight: var(--fw-bold);
    font-size: 26px;
    line-height: 26px;
    color: #000000;
}

.box-product-detail-top .col-right .box-product-detail-title .txt-line{
    position: relative;
    display: block;
    width: 65px;
    height: 6px;
    background: #3c3c3c;
    margin-bottom: 3px;
}

.box-product-detail-top .col-right .box-product-detail-desc{
    position: relative;
    display: block;
    font-family: 'Anuphan';
    font-weight: var(--fw-regular);
    font-size: 18px;
    line-height: 24px;
    color: #000000;
    padding: 15px 15px 0px 5px;
}

.box-product-detail-top .col-right .box-product-detail-dot{
    position: relative;
    display: block;
    font-family: 'Anuphan';
    font-weight: var(--fw-medium);
    font-size: 18px;
    line-height: 24px;
    color: #000000;
    padding: 5px 15px 0px 5px;
}

.box-product-detail-top .col-right .box-product-detail-price{
    position: relative;
    display: block;
    width: 100%;
    background: #ffffff;
    padding: 15px 20px;
    border: 1px solid #e5e5e5;
    margin-top: 30px;
}

.box-product-detail-top .col-right .box-product-detail-price .col-detail-price{
    padding-left: 0px;
    padding-right: 0px;
}

.box-product-detail-top .col-right .box-product-detail-price .col-detail-price .price{
    position: relative;
    font-size: 16px;
    line-height: 16px;
    font-weight: var(--fw-medium);
    color: #000000;
}

.box-product-detail-top .col-right .box-product-detail-price .col-detail-price .price span{
    position: relative;
    font-size: 30px;
    line-height: 30px;
    font-weight: var(--fw-bold);
    color: #033b78;
}

.box-product-detail-top .col-right .box-product-detail-price .col-detail-price .price span i{
    font-size: 26px;
    padding-right: 1px;
}

.box-product-detail-top .col-right .box-product-detail-price .col-detail-price .price .badge{
    font-size: 16px;
    line-height: 16px;
    font-weight: var(--fw-medium);
    padding: 8px 0px;
    width: 60px;
    border-radius: 3px;
    position: absolute;
    top: -5px;
    margin-left: 10px;
}

.box-product-detail-top .col-right .box-product-detail-price .col-detail-price .price .badge.stock{
    background: #0b7000;
}

.box-product-detail-top .col-right .box-product-detail-price .col-detail-price .price .badge.no-stock{
    background: #f80000;
}

.box-product-detail-top .col-right .box-product-detail-price .col-detail-price .discount-price{
    position: relative;
    font-size: 16px;
    line-height: 16px;
    font-weight: var(--fw-medium);
    color: #000000;
    padding-top: 2px;
}

.box-product-detail-top .col-right .box-product-detail-price .col-detail-price .discount-price span{
    font-weight: var(--fw-bold);
}

.box-product-detail-top .col-right .box-product-detail-price .col-detail-price .discount-price span.full-price{
    font-weight: var(--fw-medium);
    text-decoration: line-through;
}

.box-product-detail-top .col-right .box-product-detail-price .col-detail-qty{
    padding-left: 0px;
    padding-right: 0px;
}

.box-product-detail-top .col-right .box-product-detail-price .col-detail-qty .btn-quantity{
    border: 1px solid #e5e5e5;
    background: #ffffff;
}

.box-product-detail-top .col-right .box-product-detail-price .col-detail-qty .btn-qty{
    position: relative;
    display: table-cell;
    vertical-align: middle;
    font-size: 30px;
    background: #ffffff;
    width: 50px;
    height: 60px;
    border: none;
    color: #033b78;
}

.box-product-detail-top .col-right .box-product-detail-price .col-detail-qty .btn-qty:hover{
    opacity: 0.7;
}

.box-product-detail-top .col-right .box-product-detail-price .col-detail-qty .btn-qty.button-plus:after{
    content: "\2b";
    font-family: 'Font Awesome 6 Sharp';
    font-weight: 900;
    color: #033b78;
}

.box-product-detail-top .col-right .box-product-detail-price .col-detail-qty .btn-qty.button-minus:after{
    content: "\f068";
    font-family: 'Font Awesome 6 Sharp';
    font-weight: 900;
    color: #033b78;
}

.box-product-detail-top .col-right .box-product-detail-price .col-detail-qty .btn-qty.disabled.button-plus:after{
    opacity: 0.7 !important;
    color: #7e7e7e;
}

.box-product-detail-top .col-right .box-product-detail-price .col-detail-qty .btn-qty.disabled.button-minus:after{
    opacity: 0.7 !important;
    color: #7e7e7e;
}

.box-product-detail-top .col-right .box-product-detail-price .col-detail-qty .btn-qty.disabled:hover{
    opacity: unset;
}

.box-product-detail-top .col-right .box-product-detail-price .col-detail-qty .quantity-field{
    border: none;
    text-align: center;
    font-size: 18px;
    height: 60px;
    width: 50px;
    position: relative;
    vertical-align: middle;
    color: #000000;
    background: #ffffff;
}

.box-product-detail-top .col-right .box-product-detail-btn{
    position: relative;
    display: block;
    width: 100%;
    padding-top: 18px;
}

.box-product-detail-top .col-right .box-product-detail-btn .btn-add-to-cart-area{
    position: relative;
    display: table;
    float: left;
}

.box-product-detail-top .col-right .box-product-detail-btn .btn-add-to-cart-area .btn-add-to-cart{
    position: relative;
    display: table-cell;
    font-size: 18px;
    line-height: 18px;
    font-weight: var(--fw-medium);
    color: #ffffff;
    background: #fc6500;
    border: 1px solid #fc6500;
    padding: 3px 15px 3px 15px;
    border-radius: 0px;
    margin: 0;
    height: 60px;
    vertical-align: middle;
    width: 215px;
}

.box-product-detail-top .col-right .box-product-detail-btn .btn-add-to-cart-area .btn-add-to-cart.disabled{
    opacity: 0.7;
    background: #7e7e7e;
    border: 1px solid #7e7e7e;
}

.box-product-detail-top .col-right .box-product-detail-btn .btn-add-to-cart-area .btn-add-to-cart:hover{
    opacity: 0.8;
}

.box-product-detail-top .col-right .box-product-detail-btn .btn-fav-product{
    position: relative;
    display: table;
    float: left;
    margin-left: 10px;
}

.box-product-detail-top .col-right .box-product-detail-btn .btn-fav-product .btn-fav{
    position: relative;
    display: table;
    width: 60px;
    height: 60px;
    background: #3c3c3c;
    text-align: center;
}

.box-product-detail-top .col-right .box-product-detail-btn .btn-fav-product .btn-fav span{
    position: relative;
    display: table-cell;
    color: #ffffff;
    vertical-align: middle;
    font-size: 30px;
}

.box-product-detail-top .col-right .box-product-detail-btn .btn-fav-product .btn-fav:hover span{
    color: #3d85d3;
}

.box-product-detail-top .col-right .box-product-detail-btn .btn-fav-product .btn-fav.active span{
    color: #fc6500;
}

.box-product-detail-top .col-right .box-sku{
    position: relative;
    display: block;
    float: none;
    padding: 20px 0px;
    border-top: 1px solid #d3d3d3;
    border-bottom: 1px solid #d3d3d3;
    margin-top: 30px;
}

.box-product-detail-top .col-right .box-sku .sku-txt{
    position: relative;
    font-size: 16px;
    line-height: 16px;
    font-weight: var(--fw-medium);
    color: #000000;
}

.box-product-detail-top .col-right .box-sku .sku-txt span{
    color: #ffffff;
    background: #3c3c3c;
    padding: 3px 3px;
}

.box-spec{
    position: relative;
    display: block;
    width: 100%;
    margin-top: 70px;
    background: #ffffff;
    padding: 0px 0px;
    border: 1px solid #e5e5e5;
}

.box-spec .box-spec-title{
    position: relative;
    display: block;
    width: 100%;
    padding: 25px 0px 25px 45px;
    font-size: 20px;
    line-height: 20px;
    font-weight: var(--fw-bold);
    color: #0d56a6;
    border-bottom: 1px solid #e5e5e5;
}

.box-spec .box-spec-content{
    position: relative;
    display: block;
    width: 100%;
}

.box-spec .box-spec-content .col-left{
    padding: 0px 45px;
}

.box-spec .box-spec-content .col-left .box-img{
    position: relative;
    display: block;
    width: 100%;
    padding-top: 40px;
    padding-bottom: 40px;
}

.box-spec .box-spec-content .col-right{
    padding: 25px 0px 45px 0px;
    border-left: 1px solid #e5e5e5;
}

.box-spec .box-spec-content .col-right .box-table-spec{
    position: relative;
    display: table;
    width: 100%;
}

.box-table-spec-row{
    position: relative;
    padding: 10px 0px;
}

.box-table-spec-row:nth-child(odd) {
    background: #ffffff;
}

.box-table-spec-row:nth-child(even) {
    background: #e7f3ff;
}

.box-table-spec-row .col-header{
    padding-left: 35px;
    font-size: 18px;
    line-height: 22px;
    font-weight: var(--fw-regular);
    color: #000000;
}

.box-table-spec-row .col-header span{
    position: absolute;
    color: #054891;
    font-size: 20px;
    margin-left: 5px;
}

.box-table-spec-row .col-txt{
    padding-right: 70px;
    font-size: 18px;
    line-height: 22px;
    font-weight: var(--fw-medium);
    color: #000000;
    text-align: right;
}

/* Product Detail */

/* Shopping Cart */

.box-table-list{
    position: relative;
    display: block;
    width: 100%;
    background: #ffffff;
    margin-top: 75px;
    border: 1px solid #e5e5e5;
    /*border-bottom: none;*/
    border-top: none;
}

.box-table-header{
    position: relative;
    display: block;
    background: #033b78;
    padding: 25px 0px;
}

.box-table-header .row, .box-table-list-item .row{
    margin-left: 0px;
    margin-right: 0px;
}

.box-table-header .col-inner-item, .box-table-list-item .col-inner-item{
    padding-left: 10px;
    padding-right: 10px;
}

.box-table-header .col-inner-item .h-txt, .box-table-list-item .col-inner-item .h-txt{
    font-size: 22px;
    line-height: 22px;
    font-weight: var(--fw-bold);
    color: #ffffff;
}

.box-table-list .col-product-name{
    padding: 0px 10px;
}

.box-table-list .col-price{
    width: 240px;
    text-align: right;
    padding-right: 90px;
}

.box-table-list .col-qty{
    width: 172px;
    text-align: center;
}

.box-table-list .col-total-price{
    width: 180px;
    text-align: right;
    padding-right: 40px;
}

.box-table-list .col-btn{
    width: 80px;
    padding: 0px 10px 0px 30px;
}

.box-table-list-item .row{
    margin-right: 0px;
    margin-left: 0px;
    padding: 15px 0px;
    border-top: 1px solid #e5e5e5;
}

.box-table-list-item .row:hover{
    background: #e7f3ff;
}

.box-table-list-item .row:first-child{
    border-top: none;
}

.box-table-list-item .row .col-inner-item.col-product-name .product-name{
    position: relative;
    font-size: 22px;
    line-height: 26px;
    font-weight: var(--fw-bold);
    color: #000000;
}

.box-table-list-item .row .col-inner-item.col-product-name .product-pattern{
    position: relative;
    font-size: 16px;
    line-height: 20px;
    font-weight: var(--fw-medium);
    color: #000000;
}

.box-table-list-item .row .col-inner-item.col-product-name .product-dot{
    position: relative;
    font-size: 14px;
    line-height: 18px;
    font-weight: var(--fw-medium);
    color: #000000;
}

.box-table-list-item .row .col-inner-item.col-price .price{
    position: relative;
    font-size: 16px;
    line-height: 16px;
    font-weight: var(--fw-medium);
    color: #000000;
}

.box-table-list-item .row .col-inner-item.col-price .price span{
    position: relative;
    font-size: 20px;
    line-height: 20px;
    font-weight: var(--fw-medium);
    color: #033b78;
}

.box-table-list-item .row .col-inner-item.col-price .price span i{
    font-size: 18px;
    padding-right: 1px;
}

.box-table-list-item .row .col-inner-item.col-total-price .price{
    position: relative;
    font-size: 16px;
    line-height: 16px;
    font-weight: var(--fw-medium);
    color: #000000;
}

.box-table-list-item .row .col-inner-item.col-total-price .price span {
    position: relative;
    font-size: 20px;
    line-height: 20px;
    font-weight: var(--fw-medium);
    color: #033b78;
}

.box-table-list-item .row .col-inner-item.col-total-price .price span i{
    font-size: 18px;
    padding-right: 1px;
}

.box-table-list-item .row .col-inner-item.col-qty .btn-quantity{
    border: 1px solid #e5e5e5;
    background: #ffffff;
    display: table;
    margin: auto;
}

.box-table-list-item .row .col-inner-item.col-qty .btn-qty{
    position: relative;
    display: table-cell;
    vertical-align: middle;
    font-size: 30px;
    background: #ffffff;
    width: 50px;
    height: 60px;
    border: none;
    color: #033b78;
}

.box-table-list-item .row .col-inner-item.col-qty .btn-qty:hover{
    opacity: 0.7;
}

.box-table-list-item .row .col-inner-item.col-qty .btn-qty.button-plus:after{
    content: "\2b";
    font-family: 'Font Awesome 6 Sharp';
    font-weight: 900;
    color: #033b78;
}

.box-table-list-item .row .col-inner-item.col-qty .btn-qty.button-minus:after{
    content: "\f068";
    font-family: 'Font Awesome 6 Sharp';
    font-weight: 900;
    color: #033b78;
}

.box-table-list-item .row .col-inner-item.col-qty .btn-qty.disabled.button-plus:after{
    opacity: 0.7 !important;
    color: #7e7e7e;
}

.box-table-list-item .row .col-inner-item.col-qty .btn-qty.disabled.button-minus:after{
    opacity: 0.7 !important;
    color: #7e7e7e;
}

.box-table-list-item .row .col-inner-item.col-qty .btn-qty.disabled:hover{
    opacity: unset;
}

.box-table-list-item .row .col-inner-item.col-qty .quantity-field{
    border: none;
    text-align: center;
    font-size: 18px;
    height: 60px;
    width: 50px;
    position: relative;
    vertical-align: middle;
    color: #000000;
    background: #ffffff;
}

.box-table-list .col-btn .btn-del{
    position: relative;
    display: table;
    width: 40px;
    height: 40px;
    /*background: #3c3c3c;*/
    text-align: center;
}

.box-table-list .col-btn .btn-del i{
    position: relative;
    display: table-cell;
    color: #fc6500;
    vertical-align: middle;
    font-size: 20px;
}

.box-table-list .col-btn .btn-del:hover i{
    color: #3c3c3c;
}

.box-table-summary{
    position: relative;
    display: block;
    padding: 10px 0px;
    border-top: 1px solid #e5e5e5;
}

.box-table-summary .row{
    margin-right: 0px;
    margin-left: 0px;
    padding: 15px 0px;
}

.box-table-summary .row .col-inner-item.col-total-price .price{
    position: relative;
    font-size: 16px;
    line-height: 16px;
    font-weight: var(--fw-medium);
    color: #000000;
}

.box-table-summary .row .col-inner-item.col-total-price .price span {
    position: relative;
    font-size: 20px;
    line-height: 20px;
    font-weight: var(--fw-medium);
    color: #000000;
}

.box-table-summary .row .col-inner-item.col-total-price .price span i {
    font-size: 18px;
    padding-right: 1px;
}

.box-table-summary .row .col-inner-item.col-total-price .price span.summary {
    font-weight: var(--fw-bold);
}

.box-table-summary .row .col-inner-item.col-total-price .price span.condition {
    color: #033b78;
}

.box-table-summary .row .col-inner-item.col-h-txt .h-txt {
    position: relative;
    font-size: 20px;
    line-height: 20px;
    font-weight: var(--fw-bold);
    color: #000000;
    text-align: right;
    padding-right: 120px;
}

.box-table-summary .row .col-inner-item.col-h-txt .h-txt.vat{
    font-size: 18px;
    line-height: 18px;
    font-weight: var(--fw-medium);
    padding-top: 5px;
}

.box-table-summary .row .col-inner-item.col-h-txt .h-txt.condition {
    color: #033b78;
    font-weight: var(--fw-medium);
}

.box-control-cart{
    position: relative;
    display: block;
    width: 100%;
    margin-top: 20px;
    padding: 0px 0px;
}

.box-coupon{
    width: 600px;
}

.box-coupon .box-input{
    margin: 0px 0px;
    width: 320px;
    float: left;
}

.box-coupon .box-input input{
    background: #ffffff !important;
    border: 1px solid #fc6500;
    border-right: none;
}

.box-coupon .btn-coupon {
    position: relative;
    display: table-cell;
    font-size: 18px;
    line-height: 18px;
    font-weight: var(--fw-medium);
    color: #ffffff;
    background: #fc6500;
    border: 1px solid #fc6500;
    padding: 3px 15px 3px 15px;
    border-radius: 0px;
    margin: 0;
    height: 60px;
    vertical-align: middle;
    width: 180px;
}

.box-coupon .btn-coupon:hover{
    opacity: 0.8;
}

.btn-update-cart {
    position: relative;
    display: table-cell;
    font-size: 18px;
    line-height: 18px;
    font-weight: var(--fw-medium);
    color: #ffffff;
    background: #3c3c3c;
    border: 1px solid #3c3c3c;
    padding: 3px 15px 3px 15px;
    border-radius: 0px;
    margin: 0;
    height: 60px;
    vertical-align: middle;
    width: 180px;
}

.btn-update-cart:hover{
    opacity: 0.8;
    background: #3c3c3c;
    border: 1px solid #3c3c3c;
}

.btn-checkout {
    position: relative;
    display: table-cell;
    font-size: 18px;
    line-height: 18px;
    font-weight: var(--fw-medium);
    color: #ffffff;
    background: #fc6500;
    border: 1px solid #fc6500;
    padding: 3px 15px 3px 15px;
    border-radius: 0px;
    margin: 0;
    height: 60px;
    vertical-align: middle;
    width: 180px;
    margin-left: 5px;
}

.btn-checkout:hover{
    opacity: 0.8;
    background: #fc6500;
    border: 1px solid #fc6500;
}

.box-not-found-cart{
    position: relative;
    display: block;
    width: 100%;
    padding: 120px 20px;
    background: #ffffff;
    margin-top: 75px;
    border: 1px solid #e5e5e5;
}

.box-not-found-cart .txt{
    position: relative;
    font-size: 30px;
    line-height: 30px;
    font-weight: var(--fw-bold);
    color: #033b78;
    text-align: center;
}

.box-not-found-cart .box-btn-area{
    position: relative;
    display: table;
    margin: 20px auto 0px auto;
    z-index: 1;
}

.box-not-found-cart .box-btn-area .btn-more {
    position: relative;
    display: table-cell;
    font-size: 18px;
    line-height: 18px;
    font-weight: var(--fw-medium);
    color: #ffffff;
    background: #3c3c3c;
    border: 1px solid #3c3c3c;
    padding: 3px 15px 3px 15px;
    border-radius: 0px;
    margin: 0;
    height: 60px;
    vertical-align: middle;
    width: 215px;
}

.box-not-found-cart .box-btn-area .btn-more:hover{
    opacity: 0.8;
}

/* Shopping Cart */

/* Check Out */

.box-table-list-item.check-out.payment{
    padding: 0px 40px;
}

.box-table-list-item.check-out.payment .row{
    margin-left: -10px;
    margin-right: -10px;
}

.box-table-list-item.check-out .row:hover{
    background: #ffffff;
}

.box-table-list .col-product-name.check-out {
    padding: 0px 10px 0px 40px;
}

.box-table-list.bottom{
    margin-top: 30px;
}

.payment-method {
    display: table;
    width: 100%;
    padding: 0px;
    margin: 10px 0;
    border: 1px solid #e5e5e5;
    border-radius: 0px;
    background-color: #ffffff;
    cursor: pointer;
    transition: background-color 0.3s, box-shadow 0.3s;
}

.payment-method:hover {
    background-color: #e5e5e5;
}

.payment-method input {
    display: none;
}

.payment-method input:checked + label {
    background-color: #033b78;
    color: #fff;
    border-color: #033b78;
}

.payment-method label {
    display: table;
    width: 100%;
    cursor: pointer;
    font-size: 24px;
}

.payment-method span {
    font-size: 20px;
    color: #033b78;
    padding-left: 15px;
    font-weight: var(--fw-medium);
    display: table-cell;
    vertical-align: middle;
}

.payment-method span[class^="icon-"] {
    color: #ffffff;
    padding-left: 0px;
    width: 60px;
    height: 60px;
    text-align: center;
    background: #033b78;
}

.payment-method span[class^="icon-"] span{
    padding-left: unset;
    font-size: 24px;
}

.payment-method input:checked + label span{
    color: #ffffff;
}

.payment-method span.icon-ic_credit-card {
    font-size: 28px;
}

.payment-method span.icon-ic_schedule {
    font-size: 36px;
}

.payment-method span.icon-ic_qr-payment {
    font-size: 36px;
}

.payment-method span.icon-ic_passbook {
    font-size: 28px;
}

/* Check Out */

/* Payment */

.pay-button[_kpayment]{
    font-size: 18px !important;
    line-height: 18px !important;
    font-weight: var(--fw-medium) !important;
    font-family: 'Anuphan' !important;
    width: 180px !important;
    height: 60px !important;
}

.payment-type{
    position: relative;
    display: table;
    width: 100%;
}

.payment-type .icon{
    position: relative;
    display: table-cell;
    vertical-align: middle;
    width: 60px;
    height: 60px;
    text-align: center;
    background: #033b78;
    color: #ffffff;
}

.payment-type .icon span.icon-ic_credit-card {
    font-size: 28px;
    vertical-align: middle;
}

.payment-type .icon span.icon-ic_schedule {
    font-size: 36px;
    vertical-align: middle;
}

.payment-type .icon span.icon-ic_qr-payment {
    font-size: 36px;
    vertical-align: middle;
}

.payment-type .icon span.icon-ic_passbook {
    font-size: 28px;
    vertical-align: middle;
}

.payment-type .icon span.icon-ic_card {
    font-size: 28px;
    vertical-align: middle;
}

.payment-type .txt{
    position: relative;
    display: table-cell;
    vertical-align: middle;
    font-size: 20px;
    color: #033b78;
    padding-left: 15px;
    font-weight: var(--fw-medium);
}

.box-payment-bank{
    position: relative;
    display: block;
    padding-top: 15px;
    padding-bottom: 15px;
}

.btn-transfer {
    position: relative;
    display: table-cell;
    font-size: 18px;
    line-height: 18px;
    font-weight: var(--fw-medium);
    color: #ffffff;
    background: #fc6500;
    border: 1px solid #fc6500;
    padding: 3px 15px 3px 15px;
    border-radius: 0px;
    margin: 0;
    height: 60px;
    vertical-align: middle;
    width: 180px;
    margin-left: 5px;
}

.btn-transfer:hover{
    opacity: 0.8;
    background: #fc6500;
    border: 1px solid #fc6500;
}

.box-payment-bank .payment-txt{
    position: relative;
    display: block;
    font-size: 18px;
    line-height: 22px;
    font-weight: var(--fw-regular);
    color: #000000;
}

.box-table-bank{
    position: relative;
    display: table;
    width: 100%;
    padding-top: 15px;
}

.box-table-bank-row{
    position: relative;
    display: table;
    width: 100%;
    height: 90px;
    cursor: default;
}

.box-table-bank-row:nth-child(odd){
    background: #e6e6e6;
}

.box-table-bank-row:nth-child(even){
    background: #ffffff;
}

.box-table-bank-row.header{
    background: #0d56a6 !important;
    height: 70px;
}

.box-table-bank-row .row{
    display: table-row;
    margin-left: 0px;
    margin-right: 0px;
    background: transparent !important;
}

.box-table-bank-row .row .col-table{
    padding-left: 20px;
    padding-right: 20px;
    display: table-cell;
    vertical-align: middle;
    border-top: 1px #e5e5e5 solid;
}

.box-table-bank-row:last-child .row .col-table{
    border-bottom: 1px #e5e5e5 solid;
}

.box-table-bank-row .row .col-table .bank-icon{
    width: 400px;
}

.box-table-bank-row .row .col-table .bank-icon img{
    width: 64px;
    margin-right: 10px;
}

.box-table-bank-row.header .row .col-table .bank-icon{
    color: #ffffff;
    font-weight: var(--fw-bold);
    font-size: 18px;
    line-height: 18px;
}

.box-table-bank-row .row .col-table .branch{
    width: 300px;
}

.box-table-bank-row.header .row .col-table .branch{
    color: #ffffff;
    font-weight: var(--fw-bold);
    font-size: 18px;
    line-height: 18px;
}

.box-table-bank-row .row .col-table .bank-account{
    text-align: center;
    color: #033b78;
    font-weight: var(--fw-bold);
}

.box-table-bank-row.header .row .col-table .bank-account{
    color: #ffffff;
    font-weight: var(--fw-bold);
    font-size: 18px;
    line-height: 18px;
    text-align: center;
}

.box-table-bank-row .row .col-table .bank-icon.scb img{
    border: 3px solid #4b2886;
}

.box-table-bank-row .row .col-table .bank-icon.k-bank img{
    border: 3px solid #03b05e;
}

.box-table-bank-row .row .col-table .bank-icon.ktb img{
    border: 3px solid #00a3e4;
}

.box-table-bank-row .row .col-table .bank-icon.ttb img{
    border: 3px solid #00285f;
}

.box-table-bank-row .row .col-table .bank-icon.bbl img{
    border: 3px solid #003399;
}

/* Payment */

/* Order Detail */

.box-order-detail-id{
    position: relative;
    display: block;
    padding: 75px 0px 0px 0px;
}

.box-order-detail-id .txt{
    position: relative;
    display: block;
    font-family: 'Anuphan';
    font-weight: var(--fw-bold);
    font-size: 26px;
    line-height: 26px;
    color: #033b78;
}

.box-order-detail-id .txt-line{
    position: relative;
    display: block;
    width: 65px;
    height: 6px;
    background: #3c3c3c;
    margin-bottom: 3px;
}

.box-table-list.order-detail{
    margin-top: 25px;
}

.box-order-detail-date{
    position: relative;
    display: block;
    width: 100%;
    /*background: #ffffff;
    padding: 20px 40px;
    border: 1px solid #e5e5e5;
    margin-top: 20px;*/
    margin-top: 15px;
}

.box-order-date{
    position: relative;
    display: block;
    font-family: 'Anuphan';
    font-weight: var(--fw-bold);
    font-size: 18px;
    line-height: 18px;
    color: #033b78;
}

.box-order-date span{
    font-weight: var(--fw-medium);
    color: #000000;
}

.box-order-status{
    position: relative;
    display: block;
}

.box-order-status .txt{
    position: relative;
    display: block;
    font-family: 'Anuphan';
    font-weight: var(--fw-medium);
    font-size: 18px;
    line-height: 18px;
    float: left;
    color: #000000;
}

.box-order-status .bullet-status{
    position: relative;
    display: block;
    margin-right: 5px;
    margin-left: 5px;
    float: left;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    top: 2px;
}

.box-order-status .txt-status{
    position: relative;
    display: block;
    font-family: 'Anuphan';
    font-weight: var(--fw-bold);
    font-size: 18px;
    line-height: 18px;
    float: left;
    color: #033b78;
}

.box-bank-attachment{
    background: #ececec;
    border: 1px solid #e5e5e5;
    padding: 20px 20px 20px 20px;
    margin-top: 20px;
}

.box-bank-attachment .jFiler-theme-default .jFiler-input{
    margin-bottom: 0px;
    width: 100%;
    height: 60px;
    border: none;
    border-radius: 0;
    background: #054891;
    box-shadow: none;
    display: table;
}

.box-bank-attachment .jFiler-theme-default .jFiler-input:hover{
    opacity: 0.7;
}

.box-bank-attachment .jFiler-theme-default .jFiler-input-caption {
    display: table-cell;
    float: unset;
    width: 100%;
    height: 100%;
    padding-top: 0px;
    padding-left: 15px;
    text-overflow: ellipsis;
    overflow: hidden;
    vertical-align: middle;
    font-family: 'Anuphan';
    font-size: 20px;
    color: #ffffff;
}

.box-bank-attachment .jFiler-theme-default .jFiler-input-button {
    display: table;
    float: right;
    width: auto;
    height: 100%;
    padding: 0px 15px;
    border-left: none;
    color: #666666;
    text-align: center;
    background-color: #054891;
    background-image: unset;
    transition: all .1s ease-out;
}

.box-bank-attachment .jFiler-theme-default .jFiler-input-button i{
    position: relative;
    display: table-cell;
    vertical-align: middle;
    font-size: 28px;
    color: #ffffff;
}

.box-bank-attachment .jFiler-items-default .jFiler-item {
    position: relative;
    padding: 15px;
    margin-bottom: 0px;
    background: #f7f7f7;
    color: #4d4d4c;
    margin-top: 15px;
    font-family: 'anuphan';
}

.box-bank-attachment .jFiler-items-default .jFiler-item-assets{
    right: 15px;
}

.box-bank-attachment .jFiler-items-default .jFiler-item-assets ul.list-inline li{
    padding-right: 0px;
    padding-left: 0px;
}

.box-bank-attachment .jFiler-items-default .jFiler-item .jFiler-item-title{
    font-weight: var(--fw-semi-bold);
    font-size: 15px;
    line-height: normal;
    color: #000000;
}

.box-bank-attachment .jFiler-items-default .jFiler-item .jFiler-item-others {
    font-size: 13px;
    line-height: normal;
    color: rgba(0,0,0, 0.5);
    font-weight: 400;
    padding-top: 5px;
}

.box-bank-attachment .icon-jfi-file-o:before {
    content: "\f15c";
    font-family: 'Font Awesome 6 Sharp';
    font-weight: 300;
    color: #054891;
}

.box-bank-attachment .jFiler-items-default .jFiler-item-assets a {
    padding: 10px 12px 12px 12px;
    cursor: pointer;
    background: #054891;
    color: #ffffff;
    border-radius: 0px;
    border: none;
    text-decoration: none;
    font-size: 20px;
}

.box-bank-attachment .jFiler-items-default .jFiler-item-assets a:hover {
    opacity: 0.7;
}

.box-bank-attachment .jFiler-items-default .jFiler-item-assets a:before {
    content: "\e2b4";
    font-family: 'Font Awesome 6 Sharp';
    font-weight: 900;
    color: #ffffff;
}

.box-bank-attachment .btn-area{
    position: relative;
    display: block;
    text-align: right;
    margin-top: 20px;
}

.btn-bank-slip {
    position: relative;
    display: table-cell;
    font-size: 18px;
    line-height: 18px;
    font-weight: var(--fw-medium);
    color: #ffffff;
    background: #fc6500;
    border: 1px solid #fc6500;
    padding: 3px 15px 3px 15px;
    border-radius: 0px;
    margin: 0;
    width: 220px;
    height: 60px;
    vertical-align: middle;
}

.btn-bank-slip:hover{
    opacity: 0.8;
    background: #fc6500;
    border: 1px solid #fc6500;
}

.box-sel-payment{
    background: #ececec;
    border: 1px solid #e5e5e5;
    padding: 0px 20px 20px 20px;
    margin-top: 20px;
    margin-bottom: 40px;
}

.box-sel-payment .row{
    background: #ececec !important;
}

.box-sel-payment .btn-area{
    position: relative;
    display: block;
    text-align: right;
    margin-top: 0px;
}

.payment-type.sel-payment{
    margin-top: 40px;
}

.box-alert-upload-success{
    background: #ececec;
    border: 1px solid #e5e5e5;
    padding: 25px 20px 25px 20px;
    margin-top: 20px;
    margin-bottom: 10px;
    text-align: center;
    font-family: 'Anuphan';
    font-weight: var(--fw-bold);
    font-size: 22px;
    line-height: 22px;
    color: #033b78;
}

/* Order Detail */

/* Text Page */

.box-content-top{
    position: relative;
    display: table;
    width: 100%;
    margin-top: 75px;
}

.box-content-top .box-txt-title{
    position: relative;
    display: block;
    height: 45px;
}

.box-content-top .box-txt-title .txt{
    position: relative;
    display: block;
    font-family: 'Anuphan';
    font-weight: var(--fw-bold);
    font-size: 30px;
    line-height: 30px;
    color: #054891;
}

.box-content-top .box-txt-title .txt-line{
    position: relative;
    display: block;
    width: 65px;
    height: 6px;
    background: #3c3c3c;
    margin-bottom: 3px;
}

.box-content-page-area{
    position: relative;
    display: block;
    width: 100%;
    margin-top: 10px;
    background: #ffffff;
    padding: 40px 30px;
    border: 1px solid #e5e5e5;
}

.box-indent{
    position: relative;
    display: table;
    width: 100%;
}

.box-indent.block {
    border: 1px solid #000;
    padding: 20px 20px 15px 20px;
    margin-top: 20px;
}

.pd-top-indent{
    padding-top: 20px;
}

.pd-top-indent-s{
    padding-top: 10px;
}

.box-indent .box-h-indent{
    position: relative;
    display: block;
    width: 50px;
    float: left;
}

.box-indent .box-h-indent.bullet{
    width: 25px;
}

.box-indent .box-h-indent.bullet i{
    position: relative;
    font-size: 8px;
    top: -5px;
}

.box-indent .box-t-indent{
    position: relative;
    display: block;
    width: calc(100% - 50px);
    float: left;
}

.box-indent .box-t-indent.bullet{
    width: calc(100% - 25px);
}

.box-content .h-txt{
    position: relative;
    display: table;
    width: 100%;
    font-family: 'Anuphan';
    font-weight: var(--fw-bold);
    font-size: 24px;
    line-height: 30px;
    color: #000000;
}

.box-content .txt {
    position: relative;
    display: table;
    width: 100%;
    font-family: 'Anuphan';
    font-weight: var(--fw-regular);
    font-size: 22px;
    line-height: 30px;
    color: #000000;
}

.box-content .txt span{
    font-family: 'Anuphan';
    font-weight: var(--fw-bold);
    font-size: 22px;
    line-height: 28px;
}

.box-content.pd-top{
    padding-top: 20px;
}

.box-content.pd-top-s{
    padding-top: 10px;
}

.box-content.pd-top-more{
    padding-top: 40px;
}

.box-content .txt.pd-top{
    padding-top: 20px;
}

.box-content .txt.pd-top-s{
    padding-top: 10px;
}

.box-content .txt span.blue{
    color: #051969;
    font-family: 'Anuphan';
    font-weight: var(--fw-regular);
}

.box-content .txt span.blue .fa-solid.fa-square{
    position: relative;
    font-size: 8px;
    top: -2px;
}

.box-content .txt span.italic-underline{
    font-style: italic;
    text-decoration: underline;
    font-family: 'Anuphan';
    font-weight: var(--fw-regular);
}

.box-content .txt a{
    color: #000000;
    text-decoration: underline;
}

.box-content .txt a:hover{
    text-decoration: none;
}

.box-content .txt ol, .box-content .txt ul{
    margin-bottom: 0px;
    padding-left: 20px;
}

.box-content .txt ol li, .box-content .txt ul li{
    margin-bottom: 5px;
}

/* Text Page */

/* FAQ */

.box-faq-list-item-main{
    position: relative;
    display: table;
    width: 100%;
}

.box-faq-list-item{
    position: relative;
    display: table;
    width: 100%;
    padding: 15px 20px;
}

.box-faq-list-item .row{
    margin-left: -10px;
    margin-right: -10px;
}

.box-faq-list-item .row .col-faq-item{
    padding-left: 10px;
    padding-right: 10px;
}

.box-faq-list-item-main:nth-child(odd) .box-faq-list-item{
    background: #e7f3ff;
}

.box-faq-list-item-main:nth-child(even) .box-faq-list-item{
    background: #ffffff;
}

.box-faq-list-item-main:nth-child(odd) .box-faq-list-item.answer{
    background: #ffffff;
}

.box-faq-list-item-main:nth-child(even) .box-faq-list-item.answer{
    background: #ffffff;
}

.box-faq-list-item .icon-question{
    position: relative;
    width: 35px;
}

.box-faq-list-item .icon-question span{
    font-size: 35px;
}

.box-faq-list-item .box-btn{
    width: 180px;
}

.box-faq-list-item .btn-show{
    font-size: 20px;
    line-height: 20px;
    font-weight: var(--fw-medium);
    color: #ffffff;
    background: #fc6500;
    border: none;
    padding: 0px 10px 3px 10px;
    border-radius: 3px;
    height: 60px;
    width: 100%;
}

.box-faq-list-item .btn-show:hover{
    opacity: 0.8;
}

.box-faq-list-item .btn-show span{
    position: relative;
    margin-right: 5px;
    font-size: 23px;
    top: 3px;
}

.box-faq-list-item .btn-hide{
    font-size: 20px;
    line-height: 20px;
    font-weight: var(--fw-medium);
    color: #ffffff;
    background: #3c3c3c;
    border: none;
    padding: 0px 10px 3px 10px;
    border-radius: 3px;
    height: 60px;
    width: 100%;
}

.box-faq-list-item .btn-hide:hover{
    opacity: 0.8;
}

.box-faq-list-item .btn-hide span{
    position: relative;
    margin-right: 5px;
    font-size: 23px;
    top: 3px;
    color: #ffffff;
}

.box-faq-list-item .q-txt{
    position: relative;
    display: block;
    color: #000000;
    font-family: 'Anuphan';
    font-weight: var(--fw-medium);
    font-size: 22px;
    line-height: 28px;
}

.box-faq-list-item-main .box-faq-list-item.answer{
    display: none;
}

.box-faq-list-item-main.active .box-faq-list-item.answer{
    display: table;
    border-top: 1px solid #e7e7e7;
}

.box-faq-list-item-main .box-faq-list-item .btn-hide{
    display: none;
}

.box-faq-list-item-main.active .box-faq-list-item .btn-hide{
    display: block;
}

.box-faq-list-item-main .box-faq-list-item .btn-show{
    display: block;
}

.box-faq-list-item-main.active .box-faq-list-item .btn-show{
    display: none;
}

.box-faq-list-item .box-answer{
    position: relative;
    display: table;
    width: 100%;
    padding: 5px 20px;
    border-left: 5px solid #054891;
}

.box-faq-list-item .box-answer .txt{
    position: relative;
    display: block;
    color: #000000;
    font-family: 'Anuphan';
    font-weight: var(--fw-regular);
    font-size: 22px;
    line-height: 30px;
}

.box-faq-list-item .box-answer .txt ol, .box-faq-list-item .box-answer .txt ul{
    margin-bottom: 0px;
    padding-left: 25px;
}

.box-faq-list-item .box-answer .txt ol.pdt, .box-faq-list-item .box-answer .txt ul.pdt{
    margin-top: 10px;
}

.box-faq-list-item .box-answer .txt ol li, .box-faq-list-item .box-answer .txt ul li{
    margin-bottom: 5px;
}

.box-faq-list-item .box-answer .txt ul{
    list-style-type: square;
}

.box-faq-list-item .box-answer .txt p{
    margin-bottom: 0px;
}

.box-faq-list-item .box-answer .txt a{
    color: #000000;
    text-decoration: underline;
}

.box-faq-list-item .box-answer .txt .h-txt{
    position: relative;
    display: block;
    color: #000000;
    font-family: 'Anuphan';
    font-weight: var(--fw-bold);
    font-size: 22px;
    line-height: 30px;
    padding-bottom: 10px;
}

.box-faq-list-item .box-answer .txt .s-txt{
    position: relative;
    display: block;
    color: #000000;
    font-family: 'Anuphan';
    font-weight: var(--fw-regular);
    font-size: 18px;
    line-height: 26px;
    padding-bottom: 10px;
}

.box-faq-list-item .box-answer .txt ol li .h-txt, .box-faq-list-item .box-answer .txt ul li .h-txt{
    position: relative;
    display: block;
    color: #000000;
    font-family: 'Anuphan';
    font-weight: var(--fw-regular);
    font-size: 22px;
    line-height: 30px;
    padding-bottom: 0px;
}

.box-faq-list-item .box-answer .txt span.red{
    color: red;
}

.box-faq-list-item .box-answer .txt span.yellow{
    color: #ffd800;
}

.box-faq-list-item .box-answer .txt .box-quote{
    position: relative;
    display: block;
    width: 100%;
    padding: 15px 10px;
    text-align: center;
    margin-top: 10px;
    background: #054891;
    color: #ffffff;
}

.box-faq-list-item .box-answer .txt a:hover{
    text-decoration: none;
}

.box-faq-list-item .box-answer .txt .table{
    margin-bottom: 0px;
}

.box-faq-list-item .box-answer .txt .table thead{
    background: #054891;
    color: #ffffff;
}

.box-faq-list-item .box-answer .txt .table th{
    font-weight: normal;
    font-family: 'Anuphan';
    font-weight: var(--fw-medium);
    font-size: 22px;
    line-height: 30px;
    padding: 0.7rem 0.5rem;
}

.box-faq-list-item .box-answer .txt .table td{
    font-weight: normal;
    font-family: 'Anuphan';
    font-weight: var(--fw-regular);
    font-size: 22px;
    line-height: 30px;
    padding: 0.7rem 0.5rem;
}

.box-faq-list-item .box-answer .txt .table .row-span{
    vertical-align: middle;
    border-right: 1px solid #ffffff;
}

.box-faq-list-item .box-answer .txt .table tbody tr{
    border-color: #e7e7e7;
}

.box-faq-list-item .box-answer .txt .table .border-right-top{
    border-right: 1px solid #ffffff;
}

.box-faq-list-item .box-answer .txt .table .border-right-bottom{
    border-right: 1px solid #e7e7e7;
}

.box-faq-list-item .box-answer .txt .table .text-center{
    text-align: center;
}

.box-faq-list-item .box-answer .txt .table .text-right{
    text-align: right;
}

/* FAQ */


@media (min-width: 1600px) and (max-width: 1920px) {

    .section-header {
        width: 100%;
    }

    .section-content {
        width: 100%;
    }

    .section-footer {
        width: 100%;
    }

    /* Homepage */

    .section-banner{
        width: 100vw;
    }

    /* Homepage */

    /* Section Category */

    .section-category{
        width: 100vw;
    }

    /* Section Category */

    /* Section Filter */

    .section-filter{
        width: 100vw;
    }

    /* Section Filter */

    /* Section Product */

    .section-product{
        width: 100vw;
    }

    /* Section Product */

    /* Cookie Popup */

    .box-bottom-cookie .inner-area {
        width: 100vw;
    }

    /* Cookie Popup */

}

@media (min-width: 1440px) and (max-width: 1599px) {

    .section-header {
        width: 100%;
    }

    .section-content {
        width: 100%;
    }

    .section-footer {
        width: 100%;
    }

   /* Homepage */

    .section-banner{
        width: 100vw;
    }

    /* Homepage */

    /* Section Category */

    .section-category{
        width: 100vw;
    }

    /* Section Category */

    /* Section Filter */

    .section-filter{
        width: 100vw;
    }

    /* Section Filter */

    /* Section Product */

    .section-product{
        width: 100vw;
    }

    /* Section Product */

    /* Cookie Popup */

    .box-bottom-cookie .inner-area {
        width: 100vw;
    }

    /* Cookie Popup */

}

@media (min-width: 1300px) and (max-width: 1439px) {

    .section-header {
        width: 100%;
    }

    .section-content {
        width: 100%;
    }

    .section-footer {
        width: 100%;
    }

   /* Homepage */

    .section-banner{
        width: 100vw;
    }

    /* Homepage */

    /* Section Category */

    .section-category{
        width: 100vw;
    }

    /* Section Category */

    /* Section Filter */

    .section-filter{
        width: 100vw;
    }

    /* Section Filter */

    /* Section Product */

    .section-product{
        width: 100vw;
    }

    /* Section Product */

    /* Cookie Popup */

    .box-bottom-cookie .inner-area {
        width: 100vw;
    }

    /* Cookie Popup */

}

@media (min-width: 1200px) and (max-width: 1299px) {

    .section-header {
        width: 100%;
    }

    .section-content {
        width: 100%;
    }

    .section-footer {
        width: 100%;
    }

    .content-container {
        width: 100%;
        padding: 0px 40px;
    }

   /* Homepage */

    .section-banner{
        width: 100vw;
    }

    /* Homepage */

    /* Section Category */

    .section-category{
        width: 100vw;
    }

    /* Section Category */

    /* Section Filter */

    .section-filter{
        width: 100vw;
    }

    /* Section Filter */

    /* Section Product */

    .section-product{
        width: 100vw;
    }

    /* Section Product */

    /* Cookie Popup */

    .box-bottom-cookie .inner-area {
        width: 100vw;
    }

    /* Cookie Popup */

}

@media (min-width: 992px) and (max-width: 1199px) {

    .section-header {
        width: 100%;
    }

    .section-content {
        width: 100%;
    }

    .section-footer {
        width: 100%;
    }

    .content-container {
        width: 100%;
        padding: 0px 40px;
    }

   /* Homepage */

    .section-banner{
        width: 100vw;
    }

    /* Homepage */

    /* Section Category */

    .section-category{
        width: 100vw;
    }

    /* Section Category */

    /* Section Filter */

    .section-filter{
        width: 100vw;
    }

    /* Section Filter */

    /* Section Product */

    .section-product{
        width: 100vw;
    }

    .box-product-list {
        width: 100%;
    }

    .box-product-list .col-product:nth-child(5n){
        border-right: 1px solid #e5e5e5;
    }

    .box-product-list .col-product:nth-child(4n){
        border-right: 1px solid #e5e5e5;
    }

    /* Section Product */

    /* Cookie Popup */

    .box-bottom-cookie .inner-area {
        width: 100vw;
    }

    /* Cookie Popup */

}

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

    .section-header {
        width: 100%;
    }

    .section-content {
        width: 100%;
    }

    .section-footer {
        width: 100%;
    }

    .content-container {
        width: 100%;
        padding: 0px 20px;
    }

   /* Homepage */

    .section-banner{
        width: 100vw;
    }

    /* Homepage */

    /* Section Category */

    .section-category{
        width: 100vw;
    }

    /* Section Category */

    /* Section Filter */

    .section-filter{
        width: 100vw;
    }

    /* Section Filter */

    /* Section Product */

    .section-product{
        width: 100vw;
    }

    .box-product-list {
        width: 100%;
    }

    .box-product-list .col-product:nth-child(5n){
        border-right: 1px solid #e5e5e5;
    }

    .box-product-list .col-product:nth-child(4n){
        border-right: 1px solid #e5e5e5;
    }

    .box-product-list .col-product:nth-child(3n){
        border-right: 1px solid #e5e5e5;
    }

    /* Section Product */

    /* Cookie Popup */

    .box-bottom-cookie .inner-area {
        width: 100vw;
    }

    /* Cookie Popup */

}

@media screen and (max-width: 767px) {

    .section-header {
        width: 100%;
    }

    .section-content {
        width: 100%;
    }

    .section-footer {
        width: 100%;
    }

    .content-container {
        width: 100%;
        padding: 0px 20px;
    }

   /* Homepage */

    .section-banner{
        width: 100vw;
    }

    /* Homepage */

    /* Section Category */

    .section-category{
        width: 100vw;
    }

    /* Section Category */

    /* Section Filter */

    .section-filter{
        width: 100vw;
    }

    /* Section Filter */

    /* Section Product */

    .section-product{
        width: 100vw;
    }

    .box-product-list {
        width: 100%;
    }

    .box-product-list .col-product:nth-child(5n){
        border-right: 1px solid #e5e5e5;
    }

    .box-product-list .col-product:nth-child(4n){
        border-right: 1px solid #e5e5e5;
    }

    .box-product-list .col-product:nth-child(3n){
        border-right: 1px solid #e5e5e5;
    }

    .box-product-list .col-product:nth-child(2n){
        border-right: 1px solid #e5e5e5;
    }

    /* Section Product */

    /* Cookie Popup */

    .box-bottom-cookie .inner-area {
        width: 100vw;
    }

    /* Cookie Popup */

}

@media (min-width: 576px) and (max-width: 767px) {

}

@media screen and (max-width: 575px) {

    .section-header {
        width: 100%;
    }

    .section-content {
        width: 100%;
    }

    .section-footer {
        width: 100%;
    }

    .content-container {
        width: 100%;
        padding: 0px 20px;
    }

   /* Homepage */

    .section-banner{
        width: 100vw;
    }

    /* Homepage */

    /* Section Category */

    .section-category{
        width: 100vw;
    }

    /* Section Category */

    /* Section Filter */

    .section-filter{
        width: 100vw;
    }

    /* Section Filter */

    /* Section Product */

    .section-product{
        width: 100vw;
    }

    .box-product-list {
        width: 100%;
    }

    .box-product-list .col-product:nth-child(5n){
        border-right: 1px solid #e5e5e5;
    }

    .box-product-list .col-product:nth-child(4n){
        border-right: 1px solid #e5e5e5;
    }

    .box-product-list .col-product:nth-child(3n){
        border-right: 1px solid #e5e5e5;
    }

    .box-product-list .col-product:nth-child(2n){
        border-right: 1px solid #e5e5e5;
    }

    /* Section Product */

    /* Cookie Popup */

    .box-bottom-cookie .inner-area {
        width: 100vw;
    }

    /* Cookie Popup */

}

@media (min-width: 480px) and (max-width: 575px) {}

/* Iphone 6 Plus */
@media (min-width:414px) and (max-width: 479px) {}

/* Iphone 6 */
@media (min-width:375px) and (max-width: 413px) {}

@media (min-width:300px) and (max-width: 374px) {}

@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-moz-min-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi),
only screen and (min-resolution: 2dppx) {}

@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 568px) and (max-width: 768px),
only screen and (min--moz-device-pixel-ratio: 2) and (min-width: 568px) and (max-width: 768px),
only screen and (-moz-min-device-pixel-ratio: 2) and (min-width: 568px) and (max-width: 768px),
only screen and (-o-min-device-pixel-ratio: 2/1) and (min-width: 568px) and (max-width: 768px),
only screen and (min-device-pixel-ratio: 2) and (min-width: 568px) and (max-width: 768px),
only screen and (min-resolution: 192dpi) and (min-width: 568px) and (max-width: 768px),
only screen and (min-resolution: 2dppx) and (min-width: 568px) and (max-width: 768px) {}

@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 480px) and (max-width: 567px),
only screen and (min--moz-device-pixel-ratio: 2) and (min-width: 480px) and (max-width: 567px),
only screen and (-moz-min-device-pixel-ratio: 2) and (min-width: 480px) and (max-width: 567px),
only screen and (-o-min-device-pixel-ratio: 2/1) and (min-width: 480px) and (max-width: 567px),
only screen and (min-device-pixel-ratio: 2) and (min-width: 480px) and (max-width: 567px),
only screen and (min-resolution: 192dpi) and (min-width: 480px) and (max-width: 567px),
only screen and (min-resolution: 2dppx) and (min-width: 480px) and (max-width: 567px) {}

@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width:300px) and (max-width: 479px),
only screen and (min--moz-device-pixel-ratio: 2) and (min-width:300px) and (max-width: 479px),
only screen and (-moz-min-device-pixel-ratio: 2) and (min-width:300px) and (max-width: 479px),
only screen and (-o-min-device-pixel-ratio: 2/1) and (min-width:300px) and (max-width: 479px),
only screen and (min-device-pixel-ratio: 2) and (min-width:300px) and (max-width: 479px),
only screen and (min-resolution: 192dpi) and (min-width:300px) and (max-width: 479px),
only screen and (min-resolution: 2dppx) and (min-width:300px) and (max-width: 479px) {}