/* ----------------------------
 *
 * Your very own modification ;)
 *
 * --------------------------- */
        .color-blue-bg
        {
          background-color: #428fdc;
        }
        .color-orange-bg
        {
          background-color: #f36b2d;
        }
        .color-blue-boonterm-bg
        {
          background-color: rgb(0, 183, 241);
        }
        .color-orange-boonterm-bg
        {
          background-color: rgb(243, 119, 32);
        }
        .color-blue-boonterm
        {
          color: rgb(0, 183, 241);
        }
        .color-orange-boonterm
        {
          color: rgb(243, 119, 32);
        }
        .color-blue
        {
          color: #428fdc;
        }
        .color-orange
        {
          color: #f36b2d;
        }
        .MP
        {
          margin: 0 !important;
          padding: 0 !important;
        }
        .your_own_class {
          color: red;
        }
        .btn{
          border: none;
        }

        .loading {
          position: fixed;
          margin: 0 auto;
          width: 150px;
          z-index: 100000;
          width: 100%;
          height: 100%;
          text-align: center;
          display:none;
        }  

        .boxload {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          background-color: rgba(73, 73, 73, 0.88);
          padding: 20px;
        }     
        
        .loading_resurt{
             font-size: 100px;
             color: #25f4f5;
             display:none;
        }
        .loading > h1 {
          text-align: center;
          font-size: 2.5em;
          margin-bottom: 2em;
          font-weight:bold;
          color: #ffb300;
        }
        #load {
          width: 150px;
          animation: loading 3s linear infinite;
        }
        #load #loading-inner {
          stroke-dashoffset: 0;
          stroke-dasharray: 300;
          stroke-width: 10;
          stroke-miterlimit: 10;
          stroke-linecap: round;
          animation: loading-circle 2s linear infinite;
          stroke:#ffb300;
          fill: transparent;
        }

        @keyframes loading {
          0% {
            transform: rotate(0);
          }
          100% {
            transform: rotate(360deg);
          }
        }
        @keyframes loading-circle {
          0% {
            stroke-dashoffset: 0;
          }
          100% {
            stroke-dashoffset: -600;
          }
        }

        .icon-search-input{
          position: absolute;
          z-index: 5;
          top: 0px;
          right: 0px;
          width: 74px !important;
          line-height: 45px !important;
          text-align: center;
          color: #fff !important;
          border-top-right-radius: 30px;
          border-bottom-right-radius: 30px;
          background-color: #428fdc !important;
        }

        .agileits_header {
            background: #fff;
            padding: 0;
            height: 30px;
            font-size: 11px;
        }

        .main-header{
           position: relative;
           z-index: 42;
        }

        .header-bmall{
          background-color: #fff;
          z-index: 5;
          transition: all 0.5s ease-out;
        }

        
        
        .navbar-brand {
            height: 100%;
            padding: 0px;
        }


        .header-bmall-fixed{
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          z-index: 100;
          transition: all 0.5s ease-out;
          box-shadow:  1px 1px 7px rgba(88, 88, 88, 0.53);
          transform: translateY(0) !important;
        }

        .header-bmall-fixed .agileits_header{
          display:none;
        }

        .header-bmall-down{
          transform: translateY(44%);
          background-color: rgba(0, 0, 0, 0.70);
        }

        

        #header.navbar .navbar-toolbar .navbar-nav > .dropdown.custom:hover > .dropdown-menu{
          display: block;
        }

        #header.navbar .navbar-toolbar .navbar-nav > .dropdown.custom > .dropdown-menu:before {
            content: '';
            width: 0;
            height: 0;
            position: absolute;
            top: -5px;
            left: 512px;
            border-left: 10px solid transparent;
            border-bottom: 10px solid rgb(255, 255, 255);
            border-right: 10px solid transparent;
            transform: translateY(-50%);
        }
        .navbar-nav > li:hover,
        .navbar-nav > li:active {
            background-color: #2776c5;
        }

        .agile-login {
            float: right;
            width: 100%;
            text-align: right;
            padding: 9px 0  2px 0;
        }
        .agile-login ul li {
            display: inline-block;
            padding: 0em 1em;
            border-right: 1px solid #d9c9c9;
        }
        .agile-login ul li a {
            font-size: 1em;
            text-transform: capitalize;
            color: #000;
            text-decoration: none;
        }

        .head-box{
            display: -webkit-box;      /* 2009 - Chrome, Safari , iOS Safari */
            display: -moz-box;         /* 2009 - Firefox */
            display: -ms-flexbox;      /* early 2012 - IE 10 */
            display: -webkit-flex;     /* 2012 - Chrome */
            display: flex;             /* 2012 - Opera 12.1, Firefox 22+ */
            height: 100%;
        }
        .head-box-logo{
          flex-grow: 1;
          padding-left: 60px;

        }
        .head-box-search{
          flex-grow: 6;
          display: inline-block;
        }
        .head-box-auth{
          display: inline-block;
        }
        .nav-user{
          position: relative;
          margin: 0;
          float: left;
          background-color: #428fdc;
          border-radius: 60px;
          height: 45px;
          top: 50%;
          transform: translateY(-50%);
        }
        .nav-user span{
          color:#fff;
        }

        .navbar-nav > li > a {
            line-height: 15px;
        }

        .wrapper-tap ul {
          font-size: 0;
          position: relative;
          padding: 0;
          margin: 0px 0 0 0;
          -webkit-user-select: none;
             -moz-user-select: none;
              -ms-user-select: none;
                  user-select: none;
          background-color: get-color(blue);
          white-space: nowrap;
          overflow: hidden;
          box-shadow: none;
          -webkit-transition: box-shadow .3s ease-out;
          transition: box-shadow .3s ease-out;
        }

        .topbarTabs {
            background-color: #428fdc;
            border-top: 1px solid #fff;
        }
        @media (max-width: 738px) {
          .wrapper-tap ul {
            box-shadow: inset -7px 0 12px -9px rgba(0, 0, 0, 0.4);
          }
        }

        .wrapper-tap ul li {
          display: inline-block;
          height: 50px;
          font-size: 14px;
          text-align: center;
          line-height: 50px;
          color: #fff;
          position: relative;
          overflow: hidden;
          cursor: pointer;
          padding: 0 5px;
          white-space: nowrap;
          text-overflow: ellipsis;
          -webkit-transition: all 150ms ease-out;
          transition: all 150ms ease-out;
        }
        .wrapper-tap ul li.active {
          color: white;
          font-weight: 700;
        }
        .wrapper-tap ul li:hover {
          box-shadow: inset 0px -4px 0px 0px #ff9518;
          background-color: #5ca5ef;
        }

        .slider {
          display: block;
          position: absolute;
          bottom: 0;
          left: 0;
          height: 4px;
          -webkit-transition: 0.6s all cubic-bezier(0.34, 0.51, 0.15, 1);
          transition: 0.6s all cubic-bezier(0.34, 0.51, 0.15, 1);
        }

        .ripple {
          width: 0;
          height: 0;
          border-radius: 50%;
          background: #fff;
          -webkit-transform: scale(0);
          transform: scale(0);
          position: absolute;
          opacity: 1;
        }

        .rippleEffect {
          -webkit-animation: rippleDrop .6s linear;
                  animation: rippleDrop .6s linear;
        }

        @-webkit-keyframes rippleDrop {
          100% {
            -webkit-transform: scale(2);
            transform: scale(2);
            opacity: 0;
          }
        }

        @keyframes rippleDrop {
          100% {
            -webkit-transform: scale(2);
            transform: scale(2);
            opacity: 0;
          }
        }
        .btn--link {
          font-size: 16px;
          background: transparent;
          border: none;
          fill: #fff;
          -webkit-transition: opacity 300ms ease-out;
          transition: opacity 300ms ease-out;
        }
        .btn--link:focus {
          outline: none;
        }
        .btn--link.disable {
          opacity: .2;
        }

        .right {
          float: right;
        }

        .right,
        .left {
          min-width: 50px;
          display: block;
          visibility: visible;
          -webkit-transition: visbility .3s ease-out;
          transition: visbility .3s ease-out;
          font-size: 34px;
          color: #fff;
          display: table-cell;
          text-align: center;
/*        box-shadow: -1px -1px 15px -3px #7a7a7a;*/
        }
        @media (min-width: 738px) {
   /*       .right,
          .left {
            visibility: hidden;
          }*/
        }

        .wrapper-tap {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
        }

        .nav-list-item {
          opacity: 1;
          -webkit-transition: opacity 150ms 175ms cubic-bezier(0, 0, 0.2, 1);
          transition: opacity 150ms 175ms cubic-bezier(0, 0, 0.2, 1);
        }
        .slide-up {
          -webkit-transform: translateY(-100%);
                  transform: translateY(-100%);
          -webkit-transition: 175ms cubic-bezier(0.4, 0, 1, 1);
          transition: 175ms cubic-bezier(0.4, 0, 1, 1);
        }
        .slide-up .nav-list-item {
          opacity: 0;
          -webkit-transition: opacity .1s ease-out;
          transition: opacity .1s ease-out;
        }

        .topbar {
          height: 80px;
          z-index: 5;
          width: 100%;
          background-color: #000;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-pack: center;
              -ms-flex-pack: center;
                  justify-content: center;
          -webkit-box-align: center;
              -ms-flex-align: center;
                  align-items: center;
          padding: 0 20px;
          position: relative;
          -webkit-transition: -webkit-box-pack 200ms ease-out;
          transition: -webkit-box-pack 200ms ease-out;
          transition: justify-content 200ms ease-out;
          transition: justify-content 200ms ease-out, -webkit-box-pack 200ms ease-out, -ms-flex-pack 200ms ease-out;
        }
        @media (min-width: 768px) {
          .topbar {
            -webkit-box-pack: justify;
                -ms-flex-pack: justify;
                    justify-content: space-between;
          }
        }
        .topbar .logo img {
          max-height: 55px;
          border-radius: 50%;
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
          border: 2px solid white;
        }
        .topbar span {
          font-size: 20px;
          color: white;
          margin-left: 10px;
        }
        .topbar .action-items {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-orient: horizontal;
          -webkit-box-direction: normal;
              -ms-flex-direction: row;
                  flex-direction: row;
        }
        .topbar .action-items .action-item-button {
          width: 100px;
          height: 42px;
          display: none;
          border-radius: 2px;
          background-color: #000;
          -webkit-transition: width 400ms ease-out;
          transition: width 400ms ease-out;
        }
        @media (min-width: 768px) {
          .topbar .action-items .action-item-button {
            display: block;
            width: 50px;
          }
        }
        @media (min-width: 1024px) {
          .topbar .action-items .action-item-button {
            width: 100px;
          }
        }
        .topbar .action-items .action-item-button + .action-item-button {
          margin-left: 20px;
        }

        .side-nav {
          position: relative;
          width: 250px;
          left: 10px;
          top: 10px;
          bottom: 0px;
          height: 100%;
          -webkit-transition: 225ms ease-out;
          transition: 225ms ease-out;
        }
        .side-nav.slide-up {
          -webkit-transform: translateY(-50px);
                  transform: translateY(-50px);
        }
        .side-nav .nav-item {
          font-size: 14px;
          color: #000;
          height: 42px;
          padding: 10px;
          width: 225px;
          -webkit-transition: background-color 125ms ease-out;
          transition: background-color 125ms ease-out;
          cursor: pointer;
        }
        .side-nav .nav-item:hover {
          background-color: #000;
        }

        .picture {
            position: relative;
            -webkit-box-shadow: 0px 3px 7px 0px #a8a8a8;
            -moz-box-shadow: 0px 3px 7px 0px #a8a8a8;
            box-shadow: 0px 3px 7px 0px #a8a8a8;
            height:190px;
        }
        .picture img {
            width: 100%;
            height: auto;
            position: relative;
            z-index: 50;
        }

        .picture:hover .image-overlay-link-news{
           opacity: 1 !important;
        }

        .picture-linear {
              height: 100%;
              width: 100%;
              left: 0;
              top: 0;
              position: absolute;
              z-index: 60;
              display: block;
              background-color: #fff;
              background: linear-gradient(to bottom, rgba(0, 220, 255, 0.72) 0%, rgba(255, 255, 255, 0) 100%);
              cursor: pointer;
              text-align: center;
              color: #fff;
              font-size: 20px;
              font-weight: bold;
              padding: 6px;
        }

        .image-overlay-link-news {
              -webkit-transition: all 0.3s ease-in-out;
              -moz-transition: all 0.3s ease-in-out;
              -o-transition: all 0.3s ease-in-out;
              -ms-transition: all 0.3s ease-in-out;
              transition: all 0.3s ease-in-out;
              height: 100%;
              width: 100%;
              left: 0;
              top: 0;
              position: absolute;
              z-index: 60;
              display: block;
              background-color: #222;
              background: rgba(0, 0, 0, 0.44);
              cursor: pointer;
              opacity: 0; 
        }

        .title-overlay-link {
            position: absolute;
            top: 20%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 50%;
            margin: auto auto;
            text-align: center;
            font-size: 18px;
            font-weight: bold;
            color: #FFF;
            padding: 5px;
        }

        .text-overlay-link {
             position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 50%;
            margin: auto auto;
            text-align: center;
            font-size: 14px;
            font-weight: bold;
            color: #FFF;
            padding: 5px;
            border: 1px solid #fff;
        }

        
        .box-news {
            position: relative;
            height: 100%;
            background-color: #fff;
            padding-top: 10px;
        }

        .box-news p{
            display: inline;
            font-size: 12px;
        }
        .box-news img {
            width: 50%;
            position: relative;
        }


        .box-news .image-overlay-link-news {
              height: 100%;
              width: 100%;
              left: 0;
              top: 0;
              position: absolute;
              z-index: 60;
              display: block;
              cursor: pointer;
              opacity: 1; 
        }

        .box-news .title {
            position: absolute;
            top: 30%;
            left: 5%;
            width: 50%;
            margin: auto auto;
            font-size: 26px;
            font-weight: bold;
            color: #FFF;
            padding: 5px;
        }

        .box-news .text {
            position: absolute;
            top: 50%;
            left: 5%;
            width: 50%;
            margin: auto auto;
            font-size: 20px;
            font-weight: bold;
            color: #FFF;
            padding: 5px;
        }
        
        .thumbnail{
          cursor: pointer;
          transition: all 0.5s ease;
        }

        .btn-cart{
          position: absolute;
          width: 100%;
          background-color: #428fdc;
          font-size: 22px;
          text-align: center;
          padding: 5px 0;
          color: #fff;
          display: none;
          z-index: 2;
          transition: all 1s ease;
        }
        .thumbnail:hover{
           box-shadow:1px 1px 10px #bfbfbf;
           border: 1px solid #428fdc;
           /*border: 1px solid rgb(243, 119, 32);*/           
        }
        .thumbnail:hover .btn-cart{
          display:block !important;
          transition: all 1s ease;
        }

        .thumbnail {
            height: 330px;
        }

         .thumbnail .sell {
            position: absolute;
            width: 60px;
            height: 60px;
            text-align: center;
            border-radius: 50%;
            top: 4px;
            right: 1%;
            font-size: 15px;
            font-weight: bold;
            background-color: #ff4242;
            z-index: 1;
            padding: 10px 10px;
            color: #fff;
        }

        .thumbnail > img, .thumbnail a > img {
            margin-right: auto;
            margin-left: auto;
            position: relative;
            width: 100%;
            height: 64%;
            display: inline-block;
            overflow: hidden;
            vertical-align: middle;
            padding: 0 2px;
        }

        .caption > p.price{
              color : #428fdc;
              font-weight:bold;
              font-size:20px;
        }

        .wrapper {
          width: 100%;
          margin: 1em auto;
        }
        .wrapper:after {
          content: '';
          display: block;
          width: 100%;
          clear: both;
        }

        .products {
          position: relative;
          /*padding: 0 0.5em;*/
        }

        .product {
          float: left;
          padding: 0 5px;
          /*border-right: 0.5em solid transparent;*/
          /*border-left: 0.5em solid transparent;*/
          border-bottom: 0.5em solid transparent;
          color: #666;
          text-decoration: none;
          width: 20%;
        }
        @media screen and (max-width: 1900px) {
          .product {
            width: 20%;
          }
        }
        @media screen and (max-width: 1400px) {
          .product {
            width: 20%;
          }
        }
        @media screen and (max-width: 1140px) {
          .product {
            width: 25%;
          }
        }
        @media screen and (max-width: 900px) {
          .product {
            width: 33.33%;
          }
        }
        @media screen and (max-width: 700px) {
          .product {
            width: 50%;
          }
        }


        .input-number {
          width: 80px;
          padding: 0 12px;
          vertical-align: top;
          text-align: center;
          outline: none;
        }

        .hide-spin-button::-webkit-inner-spin-button, 
        .hide-spin-button::-webkit-outer-spin-button{
           -webkit-appearance: none; 
           margin: 0; 
        }

        .input-number,
        .input-number-decrement,
        .input-number-increment {
          border: 1px solid #ccc;
          height: 40px;
          user-select: none;
        }

        .input-number-decrement,
        .input-number-increment {
          display: inline-block;
          width: 30px;
          line-height: 38px;
          background: #f1f1f1;
          color: #444;
          text-align: center;
          font-weight: bold;
          cursor: pointer;
        }
        .input-number-decrement:active,
        .input-number-increment:active {
          background: #ddd;
        }

        .input-number-decrement {
          border-right: none;
          border-radius: 4px 0 0 4px;
        }

        .input-number-increment {
          border-left: none;
          border-radius: 0 4px 4px 0;
        }

        /* form login and register */
        .container-login {
          position: relative;
          max-width: 95%;
          width: 100%;
          padding: 10px 0;
        }
        .container-login.active #box-login {
          display:none;
        }
        .container-login.active .card:first-child {
          background: #f2f2f2;
          margin: 0 15px;
        }
        .container.active .card:nth-child(2) {
          background: #fafafa;
          margin: 0 10px;
        }
        .container-login.active .card.register{
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
          position:relative;
          top: 0;
          right: 0;
          width: 100%;
          min-width: 100%;
          height: auto;
          border-radius: 5px;
          padding: 60px 10px 40px;
          overflow: hidden;
          transition: .3s ease;
          background-color: #ffffff;
        }
        .container-login.active .card.register .toggle {
          position: absolute;
          top: 40px;
          right: 500px;
          height:100%;
          box-shadow: none;
          -webkit-transform: scale(11);
          transform: scale(11);
          -webkit-transition: -webkit-transform .4s ease;
          transition: -webkit-transform .4s ease;
          transition: transform .4s ease;
          transition: transform .4s ease, -webkit-transform .4s ease;
        }
        .container-login.active .card.register .toggle:before {
          content: '';
        }
        .container-login.active .card.register .title,
        .container-login.active .card.register .input-container,
        .container-login.active .card.register .button-container {
          left: 0;
          opacity: 1;
          visibility: visible;
          -webkit-transition: .3s ease;
          transition: .3s ease;
        }
        .container-login.active .card.register .title {
          -webkit-transition-delay: .4s;
                  transition-delay: .4s;
        }
        .container-login.active .card.register.input-container {
          -webkit-transition-delay: .5s;
                  transition-delay: .5s;
        }
        .container-login.active .card.register .input-container:nth-child(2) {
          -webkit-transition-delay: .6s;
                  transition-delay: .6s;
        }
        .container-login.active .card.register .input-container:nth-child(3) {
          -webkit-transition-delay: .7s;
                  transition-delay: .7s;
        }
        .container-login.active .card.register .input-container:nth-child(4) {
          -webkit-transition-delay: .8s;
                  transition-delay: .8s;
        }
        .container-login.active .card.register .input-container:nth-child(5) {
          -webkit-transition-delay: .9s;
                  transition-delay: .9s;
        }
        .container-login.active .card.register .input-container:nth-child(6) {
          -webkit-transition-delay: 1s;
                  transition-delay: 1s;
        }
        .container-login.active .card.register .input-container:nth-child(7) {
          -webkit-transition-delay: 1.1s;
                  transition-delay: 1.1s;
        }
        .container-login.active .card.register .input-container:nth-child(8) {
          -webkit-transition-delay: 1.2s;
                  transition-delay: 1.2s;
        }
        .container-login.active .card.register .button-container {
          -webkit-transition-delay: 1.3s;
                  transition-delay: 1.3s;
        }

        .button-container button{
          padding: 10px 40px;
          font-size: 12px;
          background-color: #ff9518;
          border:none;
          outline: none;
          color: #fff;
          -webkit-transition: all .3s ease;
          transition: all .3s ease;
        }
        .button-container button:hover{
          background-color:  #327dc8;
          color:  #fff;
        }
        /* Card */
        .card {
          position: relative;
          background: #ffffff;
          border-radius: 5px;
          padding: 60px 0 40px 0;
          box-sizing: border-box;
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
          -webkit-transition: .3s ease;
          transition: .3s ease;
        }
        .card:first-child {
          background: #fafafa;
          height: 10px;
          border-radius: 5px 5px 0 0;
          margin: 0 10px;
          padding: 0;
        }
        .card .title {
            position: relative;
            z-index: 1;
            /*border-bottom: 2px solid rgb(243, 119, 32);*/
            border-bottom: 2px solid #428fdc;
            margin: 0 0 35px;
            padding: 10px 0 10px 50px;
            color: #767676;
            font-size: 16px;
            font-weight: 600;
            text-transform: uppercase;
        }
        .card .input-container {
          position: relative;
        }
        .card .input-container input{
          border-radius: 0;
          outline: none;
          z-index: 1;
          background-color:transparent;
          transition:0.2s ease all; 
          -moz-transition:0.2s ease all; 
          -webkit-transition:0.2s ease all;
        }
        .card .input-container input[type="text"].error, 
        .card .input-container input[type="password"].error{
           background-color: #ffe7e7;
           border-color: #ffe7e7;
        }

        .card .input-container input[type="text"] ~ label.error, 
        .card .input-container input[type="checkbox"] ~ label.error,
        .card .input-container input[type="password"] ~ label.error{
          margin-top: 2px;
          color: #ff8e8e;
          font-size:14px;
          font-weight:normal;
          transition:0.2s ease all; 
          -moz-transition:0.2s ease all; 
          -webkit-transition:0.2s ease all;
        }

        .card .input-container  .text-input {
          overflow: hidden;
          margin-bottom: .875em;
        }

       
        .card .button-container button {
          position: relative;
        }

        .card.register {
          position: absolute;
          top: 100%;
          right: 300%;
          z-index: 10;
          width: 0;
          height: 0;
          background: none;
          border-radius: 100%;
          box-shadow: none;
          padding: 0;
          -webkit-transition: .3s ease;
          transition: .3s ease;
        }
        .card.register .toggle {
          position: relative;
          background:#fff;
          width: 140px;
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
          color: #6e6e6e;
          font-size: 20px;
          line-height: 50px;
          text-align: center;
          cursor: pointer;
        }
        .card.register .toggle:before {
          content: 'สมัครสมาชิก';
          display: inline-block;
          font: normal normal normal 14px/1 FontAwesome;
          font-size: inherit;
          text-rendering: auto;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
          -webkit-transform: translate(0, 0);
                  transform: translate(0, 0);
        }
        .card.register .title,
        .card.register .input-container,
        .card.register .button-container {
          left: 100px;
          opacity: 0;
          visibility: hidden;
        }
        .card.register .title {
          position: relative;
          /*border-color: rgb(243, 119, 32);*/
          border-color: #428fdc;
          color: #2c2c2c;
        }
        .card.register .title .close {
          cursor: pointer;
          position: absolute;
          top: 0;
          right: 0px;
          display: inline;
          /*background-color: rgb(243, 119, 32);*/
          background-color: #428fdc;
          color: #ffffff;
          font-size: 12px;
          font-weight: 400;
          padding: 10px;
          text-shadow: none;
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
          opacity: 1;
        }
        .card.register .title .close:before {
          content: 'เข้าสู่ระบบ';
        }

        .input-container .radio {
          margin: 0.5rem;
          display: inline;
        }
        .input-container .radio label{
          font-size:18px;
        }
        .input-container .radio input[type="radio"] {
          position: absolute;
          opacity: 0;
        }
        .input-container .radio input[type=radio] ~ label{
          font-size: 12px !important;
        }
        .input-container .radio input[type="radio"] + .radio-label:before {
          content: '';
          background: #fff;
          border-radius: 100%;
          border: 1px solid #b4b4b4;
          display: inline-block;
          width: 1.4em;
          height: 1.4em;
          position: relative;
          top: -0.2em;
          margin-right: 1em;
          vertical-align: top;
          cursor: pointer;
          text-align: center;
          -webkit-transition: all 250ms ease;
          transition: all 250ms ease;
        }
        .input-container .radio input[type="radio"]:checked + .radio-label:before {
          /*background-color: rgb(243, 119, 32);*/
          background-color: #428fdc;
          box-shadow: inset 0 0 0 4px #ffffff;
          /*border-color: rgb(243, 119, 32);*/
          border-color: #428fdc;
        }
        .input-container .radio input[type="radio"]:focus + .radio-label:before {
          outline: none;
          border-color: #3197EE;
        }
        .input-container .radio input[type="radio"]:disabled + .radio-label:before {
          box-shadow: inset 0 0 0 4px #f4f4f4;
          border-color: #b4b4b4;
          background: #b4b4b4;
        }
        .input-container .radio input[type="radio"] + .radio-label:empty:before {
          margin-right: 0;
        }
        .input-container .radio input[type=radio]:checked ~ label{
          /*color: rgb(243, 119, 32) !important;*/
          color: #428fdc !important;
          font-weight: bold !important;
        }

        .bv-form .help-block{margin-bottom:0}.bv-form .tooltip-inner{text-align:left}.nav-tabs li.bv-tab-success>a{color:#3c763d}.nav-tabs li.bv-tab-error>a{color:#a94442}

        .alert-toast {
          color: #3c3a36 !important;
          background-color: rgba(208, 208, 208, 0.45) !important;
          border-color: #e7e7e7 !important;
        }

        li.list-breadcrumb{
          display: inline;
          padding:0 5px;
          cursor: pointer;
        }
        li.list-breadcrumb:after{
           content: '>';
           margin-left: 10px;
        }
          li.list-breadcrumb.active:after{
           content: '';
           margin-left: 0px;
        }
        li.list-breadcrumb.active{
          color:#3197EE;
        }
        li.list-breadcrumb:hover{
          color:#3197EE;
        }
        .inline-form {
            display: inline !important;
        }

        .table .table-cart{
          font-family: 'Montserrat' ;
        }
        .table .table-cart > thead {
            border-bottom: 4px solid #00b1e1 !important;
            font-size: 18px;
        }



        /*///////////////////////////// header mobile /////////////////////////////// */



        
            .flex, .flex-wrap, .flex-left, .flex-right, .flex-center, .flex-between {
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            align-items: center;
            }
            .flex-wrap {
            -webkit-flex-wrap: wrap;
                -ms-flex-wrap: wrap;
                    flex-wrap: wrap;
            }
            .flex-left {
            -webkit-box-pack: start;
            -webkit-justify-content: flex-start;
                -ms-flex-pack: start;
                    justify-content: flex-start;
            }
            .flex-right {
            -webkit-box-pack: end;
            -webkit-justify-content: flex-end;
                -ms-flex-pack: end;
                    justify-content: flex-end;
            }
            .flex-inline {
            display: -webkit-inline-box;
            display: -webkit-inline-flex;
            display: -ms-inline-flexbox;
            display: inline-flex;
            }
            .flex-center {
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -webkit-align-items: center;
                -ms-flex-align: center;
                    align-items: center;
            -webkit-box-pack: center;
            -webkit-justify-content: center;
                -ms-flex-pack: center;
                    justify-content: center;
            }
            .flex-between {
            -webkit-box-pack: justify;
            -webkit-justify-content: space-between;
                -ms-flex-pack: justify;
                    justify-content: space-between;
            }

            .align-center {
            -webkit-box-align: center;
            -webkit-align-items: center;
                -ms-flex-align: center;
                    align-items: center;
            }


            .account-ripple {
            position: relative;
            overflow: hidden;
            transform: translateZ(0);
            }
            .account-ripple .rippling {
            width: 5px;
            height: 5px;
            background: #FFF;
            border-radius: 50%;
            position: absolute;
            opacity: .4;
            pointer-events: none;
            transform: translate3d(-50%, -50%, 0);
            }

            .btn, .btn-round {
            cursor: pointer;
            }
            .btn-round {
            border-radius: 100%;
            }
            .header-mobile {
            position: fixed;
            z-index: 43;
            top: 0;
            right: 0;
            background: #428fdc;
            width: 100%;
            justify-content: space-between;
            align-items: center;
            color: white;
            transition: box-shadow .3s;
            display:none;
            }

            header.shadow {
            box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12);
            }
            header .flex, header .flex-wrap, header .flex-left, header .flex-right, header .flex-center, header .flex-between {
            align-items: center;
            }
            header .flex-left .menu {
            width: 58px;
            height: 58px;
            margin-left: 10px;
            text-align: center;
            font-size: 30px;
            padding: 7px;
            }
            header .flex-left .logo {
            width: 30px;
            }
            header .flex-left .logo:first-of-type {
            width: 40px;
            margin-right: 6px;
            }
            header .center {
            width: 100%;
            height: 50px;
            position: relative;
            }

            header .flex-right [class^='btn'] {
            margin-left: 8px;
            width: 30px;
            height: 30px;
            }

            header .flex-right .profile {
            width: 32px;
            height: 32px;
            }

            .opened + .menu-overlay {
                opacity: 1;
                visibility: visible;
            }

            .account.active + .menu-overlay {
                opacity: 1;
                visibility: visible;
            }



            .account {
            background: #fff;
            position: fixed;
            top: 62px;
            right: 1px;
            z-index: 50;
            opacity: 0;
            visibility: hidden;
            transform: scale(0.5);
            transform-origin: top right;
            transition: .15s;
            box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12);
            z-index:51;
            }
            .account:after {
            content: '';
            width: 15px;
            height: 15px;
            background: inherit;
            position: absolute;
            top: -6px;
            right: 8px;
            opacity: 0;
            visibility: hidden;
            transform: rotate(45deg) scale(0.5);
            transition: .15s;
            }
            .account.active {
            opacity: 1;
            visibility: visible;
            transform: scale(1);
            }
            .account.active:after {
            opacity: 1;
            visibility: visible;
            transform: rotate(45deg) scale(1);
            }
            .account li {
            padding: 12px 16px;
            list-style: none;
            font: 300 16px Roboto;
            cursor: pointer;
            transition: .3s;
            }
            .account li:hover {
            background: #e1e1e1;
            }

            nav {
            background: #eee;
            color: #444;
            margin: 0;
            width: 232px;
            position: fixed;
            top: 0;
            left: 0;
            height: 100vh;
            max-height: 100vh;
            overflow-Y: hidden;
            transform: translateX(-232px);
            transition: transform .3s;
            will-change: transform;
            z-index: 51;
            box-sizing: content-box;
            }

            nav.opened {
            transform: translateX(0);
            }

            nav:hover {
            overflow-y: auto;
            }

            .menu-overlay {
              background: rgba(0, 0, 0, 0.72);
              height: 150vh;
              width: 150vw;
              position: fixed;
              top: 0;
              left: 0;
              transition: .3s;
              opacity: 0;
              visibility: hidden;
              z-index:50;
            }

            .box-flex{
              display: flex;
            }

            .box-flex-image{
              display: inline;
            }
            .box-flex-image img{
              width: 100%;
              height: 100%;
              padding-bottom: 4px;
            }

            .box-flex-promotion-cate{
              width: 100%;
            }

            .box-promotion-cate{
              padding:0 2px;
              height: 30vh;
            }

            .promotion-cate-left-detail{
              padding:0 2px;
            }
            .promotion-cate-right-detail{
              /*padding: 0;*/
              width: 24%;
              height: 50%;
              display: inline-block;
              text-align: center;
              padding-bottom: 4px;
            }

            .bars-cate-sidebar{
              position: fixed;
              bottom: 20px;
              right: 6px;
              width: 58px;
              height: 58px;
              text-align: center;
              font-size: 40px;
              color: #fff;
              background-color: #428fdc;
              box-shadow: -2px 4px 20px #525252;
              z-index: 53;
              display: none;
            }

            .footer-cart-btn{
              position: fixed;
              width: 100%;
              display: none;
              z-index: 1;
              bottom: 0;
            }

            .option-addcart{
              display:none;
            }

            @media (max-width: 1199px) {
                .box-news p {
                  display: block;
                }
            }

            @media (min-width: 769px) {
               .hide-width-max768{
                  display:block;
               }
               .show-width-max768{
                 display:none;
               }
            }

            @media (max-width: 768px) {

                .box-container-purchase {
                    display: block !important;
                }
                .box-purchase {
                  border-right: 1px solid #adadad !important;
                  text-align: center;
                }

                .option-addcart{
                  position: fixed;
                  display:block;
                  width: 100%;
                  z-index: 1;
                  bottom: -500px;
                  background-color: #fff;
                  padding: 20px;
                  transition: all 0.3s ease-out;
                }

                
                .option-addcart-active{
                  bottom: 0px !important;
                }
              
              
                .box-flex{
                  display:block;
                }
                .box-news p {
                  display: block;
                }

                .box-flex-image{
                  height: auto;
                }
                .box-flex-image img{
                  width: 100%;
                  height: auto;
                }
                .box-flex-promotion-cate{
                  width: 100%;
                  height: auto;
                }
                .carousel-control .icon-prev, .carousel-control .icon-next, .carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right {
                  display: none;
                }
                .slick-prev, .slick-next {
                  visibility: hidden;
                }
                .header-bmall,
                .cate-sidebar,
                .hide-width-max768{
                   display:none;
                }
                .header-mobile,
                .show-width-max768{
                   display:block;
                }

                .footer-cart-btn{
                  display: flex;
                }

                .button-container button{
                   width: 100%;
                }

                .box-promotion-cate{
                  padding:0px;
                  height: 20vh;
                }

                .box-promotion-cate .promotion-cate-left-detail{
                  padding:0px;
                  height: 20vh;
                }
                .box-promotion-cate .promotion-cate-right-detail{
                  padding:0;
                  height: 10vh;
                }

                .container {
                    padding-right: 12px;
                    padding-left: 12px;
                }

                .carousel-indicators {
                    display: none;
                }

            }

            @media (max-width: 414px) {
               .thumbnail {
                    height: 260px;
                }

                .caption > p.price {
                  font-size: 16px;
                }
            }

            @media (max-width: 320px) {
              .thumbnail {
                   height: 220px;
                   font-size: 10px;
               }
               .caption > p.price {
                font-size: 15px;
               }
            }


            .profile-account {
            background: #fff;
            position: absolute;
            top: 32px;
            right: -10px;
            z-index: 50;
            opacity: 0;
            visibility: hidden;
            transform: scale(0.5);
            transform-origin: top right;
            transition: .15s;
            box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12);
            z-index:51;
            }
            .profile-account::before{
            content: '';
            width: 15px;
            height: 15px;
            background: inherit;
            position: absolute;
            top: -6px;
            right: 47%;
            opacity: 0;
            visibility: hidden;
            transform: rotate(45deg) scale(0.5);
            transition: .15s;
            }
            .profile-account.active {
            opacity: 1;
            visibility: visible;
            transform: scale(1);
            }
            .profile-account.active:before {
            opacity: 1;
            visibility: visible;
            transform: rotate(45deg) scale(1);
            }
            .profile-account li {
            padding: 12px 16px;
            list-style: none;
            font: 300 16px Roboto;
            cursor: pointer;
            transition: .3s;
            }
            .profile-account li:hover {
            background: #e1e1e1;
            }

            .profile-account ul li.account-ripple{
              display: block;
              text-align: left;
              border: none;
              padding: 10px;
              padding: 10px 20px;
            }

            /* .profile-account-active{
              opacity: 1;
              visibility: inherit;
              transform: 1;
            } */

            figure.snip1091 {
              font-family: 'Raleway', Arial, sans-serif;
              position: relative;
              display: inline-block;
              min-width: 220px;
              max-width: 310px;
              max-height: 310px;
              width: 100%;
              overflow: hidden;
              text-align: center;
              background: #000000;
              box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
            }

            figure.snip1091 * {
              -webkit-transition: all 0.35s ease-in-out;
              transition: all 0.35s ease-in-out;
            }

            figure.snip1091 img {
              opacity: 0.25;
              max-width: 100%;
              position: relative;
              top: 0;
              left: 0;
            }

            figure.snip1091 figcaption {
              position: absolute;
              top: 50%;
              left: 30px;
              right: 30px;
              -webkit-transform: rotate(0deg) translateY(-50%) scale(1);
              transform: rotate(0deg) translateY(-50%) scale(1);
              -webkit-transform-origin: center 0;
              transform-origin: center 0;
            }

            figure.snip1091 figcaption h2 {
              top: 50%;
              letter-spacing: -1px;
              color: #ffffff;
              text-transform: uppercase;
              padding: 10px 0;
              margin: 0;
              font-weight: 400;
            }

            figure.snip1091 figcaption h2 span {
              font-weight: 800;
            }

            figure.snip1091 figcaption:before,
            figure.snip1091 figcaption:after {
              background-color: rgba(255, 255, 255, 0.8);
              width: 100%;
              height: 2px;
              position: absolute;
              content: "";
              display: block;
              -webkit-transition: all 0.35s ease-in-out;
              transition: all 0.35s ease-in-out;
            }

            figure.snip1091 figcaption:before {
              left: 0;
              top: 0;
            }

            figure.snip1091 figcaption:after {
              bottom: 0;
              right: 0;
            }

            figure.snip1091.blue {
              background: #091b27;
            }

            figure.snip1091.red {
              background: #2e0e0a;
            }

            figure.snip1091.yellow {
              background: #4f3204;
            }

            figure.snip1091.green {
              background: #061c10;
            }

            figure.snip1091.navy {
              background: #000000;
            }

            figure.snip1091 a {
              left: 0;
              right: 0;
              top: 0;
              bottom: 0;
              position: absolute;
            }

            figure.snip1091:hover img,
            figure.snip1091.hover img {
              opacity: 1;
            }

            figure.snip1091:hover figcaption,
            figure.snip1091.hover figcaption {
              -webkit-transform: rotate(-45deg) translateY(-50%) scale(0.9);
              transform: rotate(-45deg) translateY(-50%) scale(0.9);
            }

            figure.snip1091:hover figcaption:before,
            figure.snip1091.hover figcaption:before,
            figure.snip1091:hover figcaption:after,
            figure.snip1091.hover figcaption:after {
              width: 200%;
            }

  
    select
    {
        border-radius: 0;
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
        color: #858585;
        background-color: #ffffff;
        border: 1px solid #d5d5d5;
    }
    .form-control:focus,
    select:focus
    {
        color: #696969;
        border-color: #f59942;
        background-color: #ffffff;
        outline: none;
    }
    select
    {
        padding: 3px 4px;
        height: 35px;
    }
    /*//////////////////////////////////////////////// page list shop////////////////////////////////////////////////////////*/
    .img_contant_listshop
    {
      width: 100%;
    }
    .section-listshop
    {
      
    }
    .text-head
    {
      text-align: center;
      font-size: 36px;
      font-weight: 700;
    }
    .text-bthead
    {
      text-align: center;
      font-size: 16px;
    }
    .listshop
    {
      float: left;
      padding: 5px 5px;
      border-bottom: 0.5em solid transparent;
      color: #666;
      width: 25%;
    }
    .listshop-2
    {
      background-color: #fff;
      text-align: left;
      padding: 10px;
      text-align: left;
    }
    .img-shop
    {
      width: 100%;
    }
    .img-product
    {
      width: 100%;
    }
    .img_shop2
    {
      margin-right: auto;
      margin-left: auto;
      position: relative;
      width: 100%;
      height: 350px;
      /* height: 64%; */
      display: inline-block;
      overflow: hidden;
      vertical-align: middle;
      padding: 0 2px;
    }
    .img-shop2
    {
      margin-right: auto;
      margin-left: auto;
      position: relative;
      width: 100%;
      height: 225px;
      /* height: 64%; */
      display: inline-block;
      overflow: hidden;
      vertical-align: middle;
      padding: 0 2px;
    }
    .img-product2
    {
      margin-right: auto;
      margin-left: auto;
      position: relative;
      width: 100%;
      height: 225px;
      /* height: 64%; */
      display: inline-block;
      overflow: hidden;
      vertical-align: middle;
      padding: 0 2px;
    }
    .nameshop
    {
      height: 28px;
      color: #333;
      font-weight: 700 !important;
      font-size: 18px !important;
      margin-bottom: 0px !important;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      margin: 0 0 1px !important;
      padding-top: 2px;

    }
    .shortdesshop
    {
      font-size: 16px;
      /* height: 44px; */
      margin: 0 0 1px !important;
      white-space: inherit;
      text-overflow: ellipsis;
      overflow: hidden;
      padding-top: 10px;
}
    }
    .nameshopdetail
    {
      height: 28px;
      color: #333;
      font-weight: 700 !important;
      font-size: 20px !important;
      margin-bottom: 0px !important;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      margin: 0 0 20px !important;
    }
    .nameProductDetail
    {
      height: 56px;
      color: #333;
      font-size: 13px !important;
      margin-bottom: 0px !important;
      white-space: inherit;
      text-overflow: ellipsis;
      overflow: hidden;
      padding-left: 5px;
    }
    .priceProductDetail
    {
      color: #428fdc;
      font-weight: 700 !important;
      font-size: 20px !important;
      margin-bottom: 0px !important;
      white-space: inherit;
      text-overflow: ellipsis;
      overflow: hidden;
      padding-left: 5px;
    }
    .shortdesshopdetail
    {
      font-size: 18px;
      /*height: 50px;*/
      margin: 0 0 20px !important;
      /*white-space: inherit;
      text-overflow: ellipsis;
      overflow: hidden;*/
    }
    .textdetailshop
    {
      font-size: 18px;
      margin: 0 0 20px !important;
    }
    .center {
      text-align: center;
    }

    .pagination {
      display: inline-block;
    }

    .pagination a {
      color: black;
      float: center;
      padding: 8px 16px;
      text-decoration: none;
      transition: background-color .3s;
      border: 1px solid #ddd;
      margin: 0 4px;
      background-color: #fff;
    }

    .pagination a.active {
      background-color: #428fdc;
      color: white;
      border: 1px solid #428fdc;
    }

    .pagination a:hover:not(.active) {background-color: #ddd;}

    .img_shop
    {
      /*height: 350px;*/
      width: 100%;
      padding-right: 30px;
      overflow: hidden;
    }
    .fontsizehead
    {
      font-weight: 700;
      font-size: 18px;
    }
    .fontsize2
    {
      font-size: 14px;
    }
    .text_head
    {
      padding: 0px 0 20px 0;
    }
    .col-12-top-detail{
      padding: 0px 0 20px 0;
    }
    .col-4-img
    {
      padding: 0px 0px 0px 0px !important;
    }
    .col-8-detailShop
    {
      background-color: #fff !important;
      padding: 20px 20px 20px 20px;
      height: 350px !important;
    }
    .widthicon
    {
      width: 6%;
    }
    .widthicons
    {
      width: 20%;
    }
    .textleft
    {
      text-align: left;
    }
    .textright
    {
      text-align: right;
    }
    .texthead2
    {
      font-size: 24px;
      font-weight: 700;
    }
    .pdleft15
    {
      padding-left: 15px;
    }
    .col-12-shopPartner
    {
      padding: 20px 0 20px 0;
    }
    .taxtproductall
    {
      font-weight: 700;
      font-size: 20px;
    }
    .nopadding
    {
      padding-right: 0px !important;
      padding-left: 0px !important;
    }
    @media only screen and (max-width: 768px)
    {
      .img_shop
      {
        /*height: 350px;*/
        padding-right:0px;
        width: 100%;
        overflow: hidden;
      }
       .mgcontact
      {
        margin-left: 0px !important;
      }
      .mgcontact2
      {
        margin-left: 0px  !important;
      }
      .form-searchShop
      {
        width: 70% !important;
      }
      .btn-searchShop
      {
        width: 30% !important;
      }
    }

    @media only screen and (min-width: 415px) and (max-width: 767px)
    {
      .listshop {
        float: left;
        padding: 5px 5px;
        border-bottom: 0.5em solid transparent;
        color: #666;
        width: 33%;
      }
      
    }
    @media only screen and (max-width: 414px)
    {
      .listshop {
        float: left;
        padding: 5px 5px;
        border-bottom: 0.5em solid transparent;
        color: #666;
        width: 50%;
      }
    }

    @media only screen and (min-width: 992px) and (max-width: 1199px)
    {
      .col-8-detailShop {
          background-color: #fff !important;
          padding: 10px 10px 10px 10px;
          height: 284.33px !important;
      }
      
    }
    @media only screen and (min-width: 769px) and (max-width: 991px)
    {
      .col-8-detailShop {
          background-color: #fff !important;
          padding: 10px 10px 10px 10px;
          height:210px !important; 
      }
      .fontsizehead
      {
        font-weight: 700;
        font-size: 13px;
      }
      .texthead2
      {
        font-size: 22px;
        font-weight: 700;
      }
      .fontsize2
      {
        font-size: 11px;
      }
      .pdleft15 {
        padding-left: 2px;
        font-size:12px;
      }
      .nameshopdetail
      {
        height: 28px;
        color: #333;
        font-weight: 700 !important;
        font-size: 20px !important;
        margin-bottom: 0px !important;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        margin: 0 0 1px !important;
      }
      .shortdesshopdetail
      {
        font-size: 18px;
        height: 50px;
        margin: 0 0 1px !important;
        white-space: inherit;
        text-overflow: ellipsis;
        overflow: hidden;
      }
      .textdetailshop
      {
        font-size: 18px;
        margin: 0 0 8px !important;
      }
      
    }
    @media only screen and (max-width: 768px)
    {
      .col-8-detailShop {
          background-color: #fff !important;
          padding: 10px 10px 10px 10px;
          height:auto !important; 
      }
      .mobile_listshop_contact
      {
        border-left: none !important;
        padding-left: 0px;
        padding-right: 0px;
        /*padding-top: 30px;*/
      }
      .widthicons
      {
        width: 18%;
      }
      .contactbm
      {
        width: 50%
      }
      .fontsizehead
      {
        font-weight: 700;
        font-size: 14px;
        height: 32px;
      }
      .fontsize2
      {
        font-size: 14px;
        height: 40px;
      }
      .text-head
      {
        text-align: center;
        font-size: 24px;
        font-weight: 700;
      }
      .text-bthead {
        text-align: center;
        font-size: 12px;
      }
    }
    @media only screen and (max-width: 991px)
    {
      .btnsearchshop
      {
        
        text-align: center;
      }
      .form-searchShop
      {
        width: 80%;
      }
      .btn-searchShop
      {
        width: 20%;
      }
    }
    .pdtop
    {
      padding-top: 20px;
    }
    .btnsearchshop
      {

      }
    /*////////////////////////////////////////////////end  page list shop////////////////////////////////////////////////////////*/


/* Start CSS leaning page*/
/* All Header */
  .header_intro a
  {
    color: #FFFFFF;
  }
  .laout_width
  {
    width: 100%;
  }
  .header_intro
  {
    z-index: 100;
    transition: all 0.5s ease-out;
    top: 0%;
    width: 100%;
    position: fixed;
    background-color: rgba(245, 245, 245, 0.88);
  }
  .header_intro a:hover
  {
    color: #FFFFFF;
    border-color: #FFFFFF;
  }
  .header_intro_down
  {
    color: #ffffff;
    transform: translateY(-100%);
  }
  .header_intro_down a
  {
    color: #ffffff;
  }
  .header_intro_fixed
  {
    position: fixed;
    z-index: 100;
    transition: all 0.5s ease-out;
    box-shadow:  1px 1px 7px rgba(88, 88, 88, 0.53);
    transform: translateY(0) !important;
  }
  .header_intro_fixed .agileits_header
  {
    display:none;
  }
  /* header main  */
  .header_intro_main a
  {
    color: #FFFFFF;
  }
  .header_intro_main
  {
    z-index: 100;
    transition: all 0.5s ease-out;
    top: 0%;
    width: 100%;
    position: fixed;
  }
  .header_intro_down_main
  {
    color: #ffffff;
    transform: translateY(-100%);
    background-color: rgba(66, 143, 220, 0.88);
  }
  .header_intro_down_main a
  {
    color: #ffffff;
  }
  .header_intro_main a:hover
  {
    color: #FFFFFF;
    border-color: #FFFFFF;
  }
  .header_intro_fixed_main
  {
    position: fixed;
    z-index: 100;
    transition: all 0.5s ease-out;
    box-shadow:  1px 1px 7px rgba(88, 88, 88, 0.53);
    transform: translateY(0) !important;
  }
  .header_intro_fixed_main .agileits_header
  {
    display:none;
  }
  .set_img_app
    {
      width: 55%;
    }
/* Header VDO */
  .btn
  {
    padding: 7px 10px;
  }
/* End Header*/

/* Body responsive */
@media (min-width: 2101px)
  {
    a,p,b
    {
      font-size: 20px;
    }
    .set_font_header
    {
      font-size: 18px !important;
    }
    .font_header
    {
      color: rgb(255, 109, 6);
      -webkit-text-stroke: 2px #FFFFFF;
      font-weight: 700;
    }
    .img_header_intro
    {
      width: 6%;
    }
    div .content_header
    {
      padding-top: 12%;
      padding-left: 50%;
      margin-bottom: 18%;
      color: #FFFFFF;
    }
    .setfontheader
    {
      font-size: 30px !important;
    }
    .set_img
    {
        width: 40%;
        padding-bottom: 20px;
    }
    .set_img_content
    {
      width: 40%;
      padding-bottom: 20px;
    }
    .set_img_bewallet
    {
      width: 90%;
    }
    .sizeimg-bewalet
    {
      width: 20% !important;
    }
    .sizeimg_footer
    {
      width: 100%;
    }
    .sizeimg_bewalet_footer
    {
      width: 45% !important;
    }
    .font_footer
    {
      font-size: 14px !important;
    }
  }
  @media (max-width: 2100px)
  {
    a,p,b
    {
      font-size: 20px;
    }
    .set_font_header
    {
      font-size: 18px !important;
    }
    .font_header
    {
      color: rgb(255, 109, 6);
      -webkit-text-stroke: 2px #FFFFFF;
      font-weight: 700;
    }
    .img_header_intro
    {
      width: 6%;
    }
    div .content_header
    {
      padding-top: 12%;
      padding-left: 50%;
      margin-bottom: 18%;
      color: #FFFFFF;
    }
    .setfontheader
    {
      font-size: 30px !important;
    }
    .set_img
    {
        width: 40%;
        padding-bottom: 20px;
    }
    .set_img_content
    {
      width: 40%;
      padding-bottom: 20px;
    }
    .set_img_bewallet
    {
      width: 90%;
    }
    .sizeimg-bewalet
    {
      width: 20% !important;
    }
    .sizeimg_footer
    {
      width: 100%;
    }
    .sizeimg_bewalet_footer
    {
      width: 45% !important;
    }
    .font_footer
    {
      font-size: 14px !important;
    }
  }
  @media (max-width: 1900px)
  {
    a,p,b
    {
      font-size: 20px;
    }
    .set_font_header
    {
      font-size: 18px !important;
    }
    .font_header
    {
      color: rgb(255, 109, 6);
      -webkit-text-stroke: 2px #FFFFFF;
      font-weight: 700;
    }
    .img_header_intro
    {
      width: 6%;
    }
    div .content_header
    {
      padding-top: 12%;
      padding-left: 50%;
      margin-bottom: 17%;
      color: #FFFFFF;
    }
    .setfontheader
    {
      font-size: 30px !important;
    }
    .set_img
    {
        width: 40%;
        padding-bottom: 20px;
    }
    .set_img_content
    {
      width: 40%;
      padding-bottom: 20px;
    }
    .set_img_bewallet
    {
      width: 90%;
    }
    .sizeimg-bewalet
    {
      width: 20% !important;
    }
    .sizeimg_footer
    {
      width: 100%;
    }
    .sizeimg_bewalet_footer
    {
      width: 45% !important;
    }
    .font_footer
    {
      font-size: 14px !important;
    }
  }
  @media (max-width: 1700px)
  {
    a,p,b
    {
      font-size: 20px;
    }
    .set_font_header
    {
      font-size: 18px !important;
    }
    .font_header
    {
      color: rgb(255, 109, 6);
      -webkit-text-stroke: 2px #FFFFFF;
      font-weight: 700;
    }
    .img_header_intro
    {
      width: 6%;
    }
    div .content_header
    {
      padding-top: 12%;
      padding-left: 50%;
      margin-bottom: 15%;
      color: #FFFFFF;
    }
    .setfontheader
    {
      font-size: 30px !important;
    }
    .set_img
    {
        width: 40%;
        padding-bottom: 20px;
    }
    .set_img_content
    {
      width: 40%;
      padding-bottom: 20px;
    }
    .set_img_bewallet
    {
      width: 90%;
    }
    .sizeimg-bewalet
    {
      width: 25% !important;
    }
    .sizeimg_footer
    {
      width: 100%;
    }
    .sizeimg_bewalet_footer
    {
      width: 45% !important;
    }
    .font_footer
    {
      font-size: 14px !important;
    }
  }
  @media (max-width: 1440px )
  {
    a,p,b
    {
      font-size: 19px;
    }
    .set_font_header
    {
      font-size: 13px !important;
    }
    .font_header
    {
      color: rgb(255, 109, 6);
      -webkit-text-stroke: 2px #FFFFFF;
      font-weight: 700;
    }
    .img_header_intro
    {
      width: 6%;
    }
    .setfontheader
    {
      font-size: 30px !important;
    }
    div .content_header
    {
      padding-top: 13%;
      padding-left: 47%;
      margin-bottom: 10%;
      color: #FFFFFF;
    }
    .set_img
    {
        width: 35%;
        padding-bottom: 20px;
    }
    .set_img_content
    {
      width: 30%;
      padding-bottom: 20px;
    }
    .set_img_bewallet
    {
      width: 80%;
    }
    .sizeimg-bewalet
    {
      width: 20% !important;
    }
    .sizeimg_footer
    {
      width: 80%;
    }
    .sizeimg_bewalet_footer
    {
      width: 32% !important;
    }
    .font_footer
    {
      font-size: 14px !important;
    }
  }
  @media (max-width: 1024px)
  {
    a,p,b
    {
      font-size: 22px;
    }
    .img_header_intro
    {
      width: 7%;
    }
    .font_header
    {
      color: rgb(255, 109, 6);
      -webkit-text-stroke: 2px #FFFFFF;
      font-weight: 700;
    }
    .setfontheader
    {
      font-size: 30px !important;
    }
    div .content_header
    {
      padding-top: 12%;
      padding-left: 50%;
      margin-bottom: 7%;
      color: #FFFFFF;
    }
    .set_img
    {
        width: 40%;
        padding-bottom: 20px;
    }
    .set_img_content
    {
      width: 40%;
      padding-bottom: 20px;
    }
    .set_img_bewallet
    {
      width: 100%;
    }
    .sizeimg-bewalet
    {
      width: 25% !important;
    }
    .sizeimg_footer
    {
      width: 100%;
    }
    .sizeimg_bewalet_footer
    {
      width: 45% !important;
    }
    .font_footer
    {
      font-size: 14px !important;
    }
  }
  @media (max-width: 991px)
  {
    a,p,b
    {
      font-size: 20px;
    }
    .img_header_intro
    {
      width: 9%;
    }
    .font_header
    {
      color: #f37720;
      -webkit-text-stroke: 1px #FFFFFF;
      font-weight: 700;
    }
    div .content_header
    {
      padding-top: 17%;
      padding-left: 45%;
      margin-bottom: 13%;
      color: #FFFFFF;
    }
    .set_img
    {
        width: 60%;
        padding-bottom: 20px;
    }
    .set_img_content
    {
      width: 25%;
      padding-bottom: 20px;
    }
    .set_img_app
    {
      width: 40%;
    }
    .set_img_bewallet
    {
      width: 50%;
    }
    .sizeimg-bewalet
    {
      width: 25% !important;
    }
    .setfontheader
    {
      font-size: 30px !important;
    }
    .sizeimg_footer
    {
      width: 90%;
      margin-top: 15%;
    }
    .sizeimg_bewalet_footer
    {
      width: 40% !important;
    }
    .font_footer
    {
      font-size: 14px !important;
    }
  }
  @media (max-width: 768px)
  {
    a,p,b
    {
      font-size: 20px;
    }
    .img_header_intro
    {
      width: 9%;
    }
    .font_header
    {
      color: #FFFFFF;
      -webkit-text-stroke: 0px #FFFFFF;
      font-weight: 700;
    }
    div .content_header
    {
      padding-top: 17%;
      padding-left: 45%;
      margin-bottom: 13%;
      color: #FFFFFF;
    }
    .set_img
    {
        width: 25%;
        padding-bottom: 20px;
    }
    .set_img_content
    {
      width: 25%;
      padding-bottom: 20px;
    }
    .set_img_app
    {
      width: 40%;
    }
    .set_img_bewallet
    {
      width: 50%;
    }
    .sizeimg-bewalet
    {
      width: 25% !important;
    }
    .setfontheader
    {
      font-size: 30px !important;
    }
    .sizeimg_footer
    {
      width: 45%;
      margin-top: 15%;
    }
    .sizeimg_bewalet_footer
    {
      width: 30% !important;
    }
    .font_footer
    {
      font-size: 14px !important;
    }
    .show-width-min769
    {
      display:none;
    }
    .show-width-max768
    {
      display:block;
    }
  }
  @media (max-width: 525px)
  {
    a,p,b
    {
      font-size: 15px;
    }
    .img_header_intro
    {
      width: 13%;
    }
    .font_header
    {
      color: #FFFFFF;
      -webkit-text-stroke: 0px #FFFFFF;
      font-weight: 700;
    }
    div .content_header
    {
      padding-top: 15%;
      padding-left: 43%;
      margin-bottom: 13%;
      color: #FFFFFF;
    }
    .sizeimg-bewalet
    {
      width: 30% !important;
    }
    .set_img
    {
        width: 30%;
        padding-bottom: 10px;
    }
    .set_img_content
    {
      width: 30%;
      padding-bottom: 10px;
    }
    .set_img_app
    {
      width: 60% !important;
    }
    .set_img_bewallet
    {
      width: 55%;
    }
    .setfontheader
    {
      font-size: 30px !important;
    }
    .sizeimg_footer
    {
      width: 65%;
      margin-top: 20%;
    }
    .sizeimg_bewalet_footer
    {
      width: 45% !important;
    }
    .font_footer
    {
      font-size: 14px !important;
    }
  }
  @media (max-width: 425px)
  {
    a,p,b
    {
      font-size: 16px;
    }
    .img_header_intro
    {
      width: 14%;
      margin-top: 2px;
    }
    .font_header
    {
      color: #FFFFFF;
      -webkit-text-stroke: 0px #FFFFFF;
      font-weight: 700;
    }
    div .content_header
    {
      padding-top: 16%;
      padding-left: 43%;
      margin-bottom: 12%;
      color: #FFFFFF;
    }
    .set_img
    {
        width: 30%;
        padding-bottom: 10px;
    }
    .set_img_content
    {
      width: 25%;
      padding-bottom: 10px;
    }
    .set_img_bewallet
    {
      width: 80%;
    }
    .sizeimg-bewalet
    {
      width: 30% !important;
    }
    .setfontheader
    {
      font-size: 30px !important;
    }
    .sizeimg_footer
    {
      width: 65%;
      margin-top: 30%;
    }
    .sizeimg_bewalet_footer
    {
      width: 45% !important;
    }
    .font_footer
    {
      font-size: 14px !important;
    }
  }
  @media (max-width: 375px)
  {
    a,p,b
    {
      font-size: 13px;
    }
    .img_header_intro
    {
      width: 15%;
      margin-top: 3px;
    }
    .font_header
    {
      color: #FFFFFF;
      -webkit-text-stroke: 0px #FFFFFF;
      font-weight: 700;
    }
    div .content_header
    {
      padding-top: 17%;
      padding-left: 42%;
      margin-bottom: 10%;
      color: #FFFFFF;
    }
    .set_img
    {
        width: 20%;
        padding-bottom: 10px;
    }
    .set_img_content
    {
      width: 30%;
      padding-bottom: 10px;
    }
    .set_img_bewallet
    {
      width: 80%;
    }
    .sizeimg-bewalet
    {
      width: 29% !important;
    }
    .setfontheader
    {
      font-size: 30px !important;
    }
    .sizeimg_footer
    {
      width: 65%;
      margin-top: 40%;
    }
    .sizeimg_bewalet_footer
    {
      width: 45% !important;
    }
    .font_footer
    {
      font-size: 14px !important;
    }
  }
  @media (max-width: 320px)
  {
    .img_header_intro
    {
      width: 15%;
    }
    .font_header
    {
      color: #FFFFFF;
      -webkit-text-stroke: 0px #FFFFFF;
      font-weight: 700;
    }
    div .content_header
    {
      padding-top: 18%;
      padding-left: 40%;
      margin-bottom: 10%;
      color: #FFFFFF;
    }
    a,p,b
    {
      font-size: 13px;
    }
    .set_img
    {
      width: 25%;
      padding-bottom: 10px;
    }
    .set_img_content
    {
      width: 25%;
      padding-bottom: 10px;
    }
    .set_img_bewallet
    {
      width: 60%;
    }
    .sizeimg-bewalet
    {
      width: 26% !important;
    }
    .setfontheader
    {
      font-size: 18px !important;
    }
    .sizeimg_footer
    {
      width: 65%;
      margin-top: 50%;
    }
    .sizeimg_bewalet_footer
    {
      width: 45% !important;
    }
    .font_footer
    {
      font-size: 14px !important;
    }
  }

  .ui-tabs .ui-tabs-nav li
    {
        width: 20%;
    }

/* End Body */

/* Footer*/
  .footer
  {
    height: auto;
    position: relative;
    width: 100%;
    color: #FFFFFF;
    background-color: rgb(243, 119, 32);
  }
  .footer p {
      margin: 0;
      color: #FFFFFF;
  }
  .footer a {
      color: #FFFFFF;
  }
  /*.footer img {
      max-width: 100%;
  }*/
  .footer ul {
      font-size: 13px;
      list-style-type: none;
      margin-left: 0;
      padding-left: 0;
      margin-top: 15px;
      color: #7F8C8D;
  }
  .footer ul li a {
      padding: 0 0 5px 0;
      display: block;
  }
  
  .footer-bottom {
      background: #E3E3E3;
      border-top: 1px solid #DDDDDD;
      padding-top: 10px;
      padding-bottom: 10px;
  }
  .footer-bottom p.pull-left {
      padding-top: 6px;
  }
  .footer-mobile-contact a{
      border-right:1px solid #000;
      color:#000;
      padding:0 5px;
  }
  .footer-mobile-contact a:last-child{
      border-right:none;
  }
/* End Footer*/
/* End CSS leaning page*/

/*///////// ศูนย์ช่วยเหลือ /////////////*/
.mgheader
{
  padding-top: 5%;
  padding-bottom: 5%;
}
.mgcontact
{
  margin-left: 50px;
}
.mgcontact2
{
  margin-left: -50px;
}

ul.ui-tabs-nav.ui-corner-all.ui-helper-reset.ui-helper-clearfix.ui-widget-header {
    border: 0px;
    background: transparent;
    width: 100%;
}
.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr{
  border-top-right-radius: 0px;
  border-top-left-radius: 0px;
}