@charset "utf-8";
@font-face{
    font-family:myfont;
    src:url("font/upcjl.ttf");			
}
#container{
    font-family:myfont;
    margin:0 auto;
}
#all{
    clear:both;
    padding:20px 60px 20px 0px; /*บน ขวา ล่าง ซ้าย*/
    text-align:right;
}
#product_topic{
    text-align: center;
    background-color:#ffffff;
    box-shadow:0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    margin: 0px 0px 10px 0px;
}
#free_c{
    clear:both;
}

/*------------------menu------------------*/
/*#menu_nav{
    color: white;
    text-align: center;
}
#main{
    box-shadow:0 4px 8px 0 rgba(0,0,0,0.2),0 0px 20px 0 rgba(0,0,0,0.19);
    position: relative;
    list-style: none;
    background: #3b3e43;
    font-weight: 400;
    font-size: 25px;
    text-transform: uppercase;
    display: inline-block;
    padding: 0;
    margin: 50px 0px 0px 0px;
}
#main li{
    font-size: 1.5rem;
    display: inline-block;
    position: relative;
    padding: 15px 20px;
    cursor: pointer;
    z-index: 5;
    min-width: 200px;
    margin: 0;
}
#main a{
    color: #FFFFFF;
}
.drop_menu{
    overflow: hidden;
    list-style: none;
    position: absolute;
    padding: 0;
    width: 100%;
    left: 0;
    top: 48px;
}
.drop_menu div{
    -webkit-transform: translate(0, -100%);
    -moz-transform: translate(0, -100%);
    -ms-transform: translate(0, -100%);
    transform: translate(0, -100%);
    -webkit-transition: all 0.5s 0.1s;
    -moz-transition: all 0.5s 0.1s;
    -ms-transition: all 0.5s 0.1s;
    transition: all 0.5s 0.1s;
    position: relative;
}
.drop_menu li{
    display: block;
    padding: 0;
    width: 100%;
    background: #1b1c1f;
}
#marker{
    height: 6px;
    background: #1b1c1f;
    position: absolute;
    bottom: 0;
    width: 200px;
    z-index:3;
    -webkit-transition: all 0.35s;
    -moz-transition: all 0.35s;
    -ms-transition: all 0.35s;
    transition: all 0.35s;
}
#main li:nth-child(1):hover ul div{
    -webkit-transform: translate(200, 0);
    -moz-transform: translate(200, 0);
    -ms-transform: translate(200, 0);
    transform: translate(200, 0);
}
#main li:nth-child(1):hover ~ #marker{
    -webkit-transform: translate(0px, 0);
    -moz-transform: translate(0px, 0);
    -ms-transform: translate(0px, 0);
    transform: translate(0px, 0);
}
#main li:nth-child(2):hover ul div{
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
}
#main li:nth-child(2):hover ~ #marker{
    -webkit-transform: translate(200px, 0);
    -moz-transform: translate(200px, 0);
    -ms-transform: translate(200px, 0);
    transform: translate(200px, 0);
}
#main li:nth-child(3):hover ul div{
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
}
#main li:nth-child(3):hover ~ #marker{
    -webkit-transform: translate(400px, 0);
    -moz-transform: translate(400px, 0);
    -ms-transform: translate(400px, 0);
    transform: translate(400px, 0);
}*/
/*------------------news------------------*/
.card.card-carousel {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 10px 10px 0 rgba(0, 0, 0, 0.19);
    border: 0;
    color: rgba(0,0,0,.87);
    background: #fff;
    width: 1141px;
    margin: 50px 0px 0px 172px;
}
.carousel-caption h4{
    background: #fff;
    color: #000;
}
.card.card-carousel img{
    height: 400px;
    
}
.carousel-indicators {
    position: absolute;
    right: 0;
    bottom: 10px;
    left: 0;
    z-index: 15;
    display: flex;
    justify-content: center;
    padding-left: 0;
    list-style: none;
}
.carousel .carousel-indicators {
    bottom: 5px;
}
.carousel .carousel-indicators li {
    display: inline-block;
    width: 10px;
    height: 10px;
    text-indent: -999px;
    cursor: pointer;
    border: 1px solid #fff;
    background: #fff;
}
.carousel .carousel-indicators .active{
    margin: 11px 10px; 
} 
.carousel .carousel-indicators li {
    margin: 11px 10px;
}
.carousel .carousel-indicators .active {
    transform: scale(1.5);
    box-shadow: 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12), 0 2px 4px -1px rgba(0,0,0,.2);
}
.carousel-inner {
    position: relative;
    width: 100%;
    overflow: hidden;
}
.carousel-item {
    position: relative;
    display: none;
    align-items: center;
    width: 100%;
    transition: transform .6s ease;
    backface-visibility: hidden;
    perspective: 1000px;
}
.carousel-item.active {
    display: block;
}
.carousel .carousel-caption {
    padding-bottom: 45px;
}
.carousel .carousel-caption .material-icons {
    position: relative;
    top: 5px;
}
.carousel .carousel-control-next .material-icons{
    z-index: 5;
    display: inline-block;
    font-size: 50px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 50px;
    margin: auto;
    color: #000;
}
.carousel .carousel-control-prev .material-icons {
    z-index: 5;
    display: inline-block;
    font-size: 50px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 50px;
    margin: auto;
    color: #000;
}
.carousel-caption buttom{
display: inline-block;
  background: #4285f4;
  color: #fff;
  text-transform: uppercase;
  padding: 20px 30px;
  border-radius: 5px;
  box-shadow: 0px 17px 10px -10px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  -webkit-transition: all ease-in-out 300ms;
  transition: all ease-in-out 300ms;
}
.carousel-caption buttom a:hover{
    box-shadow: 0px 37px 20px -20px rgba(0, 0, 0, 0.2);
    -webkit-transform: translate(0px, -10px) scale(1.2);
            transform: translate(0px, -10px) scale(1.2);
}
/*-----------------*/
.button-row {
    display: -webkit-inline-box;
    display: -moz-inline-box;
    display: inline-box;
    display: -webkit-inline-flex;
    display: -moz-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
  }
  .button-row > div {
    position: relative;
    width: 160px;
    height: 50px;
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    perspective: 1000px;
  }
  .button-row > div > a {
    margin: 0px 0px 0px -80px;/*บน ขวา ล่าง ซ้าย*/
    width: 100%;
    height: 100%;
    position: absolute;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: translateZ(-25px);
    -moz-transform: translateZ(-25px);
    -ms-transform: translateZ(-25px);
    -o-transform: translateZ(-25px);
    transform: translateZ(-25px);
    -webkit-transition: -webkit-transform 0.25s;
    -moz-transition: -moz-transform 0.25s;
    transition: transform 0.25s;
  }
  .button-row > div > a::before, .button-row > div > a::after {
    justify-content: center;
    align-items: center;
    width: 160px;
    height: 50px;
    position: absolute;
    border: 5px solid black;
    box-sizing: border-box;
    content: attr(title);
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
  }
  .button-row > div > a::before {
    background-color: #000;
    color: #fff;
    -webkit-transform: rotateY(0deg) translateZ(25px);
    -moz-transform: rotateY(0deg) translateZ(25px);
    -ms-transform: rotateY(0deg) translateZ(25px);
    -o-transform: rotateY(0deg) translateZ(25px);
    transform: rotateY(0deg) translateZ(25px);
  }
  .button-row > div > a::after {
    background-color: #fff;
    border-color: #000;
    color: #000;
    -webkit-transform: rotateX(90deg) translateZ(25px);
    -moz-transform: rotateX(90deg) translateZ(25px);
    -ms-transform: rotateX(90deg) translateZ(25px);
    -o-transform: rotateX(90deg) translateZ(25px);
    transform: rotateX(90deg) translateZ(25px);
  }
  .button-row > div > a:hover {
    -webkit-transform: translateZ(-25px) rotateX(-90deg);
    -moz-transform: translateZ(-25px) rotateX(-90deg);
    -ms-transform: translateZ(-25px) rotateX(-90deg);
    -o-transform: translateZ(-25px) rotateX(-90deg);
    transform: translateZ(-25px) rotateX(-90deg);
  }
/*หน้า------------------wel------------------*/
.btn-shine {
    padding: 12px 0px 12px 550px; /*บน ขวา ล่าง ซ้าย*/
    width:100%;
    margin: 0 auto;
    position: absolute;
    color: #fff;
    background: linear-gradient(to right, #4d4d4d 0, #fff 10%, #4d4d4d 20%);
    margin-left: -1040px;
    background-position: 0;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shine 3s infinite linear;
    animation-fill-mode: forwards;
    -webkit-text-size-adjust: none;
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    white-space: nowrap;
    
  }
  @-moz-keyframes shine {
    0% {
      background-position: 0;
    }
    60% {
      background-position: 900px;
    }
    100% {
      background-position: 900px;
    }
  }
  @-webkit-keyframes shine {
    0% {
      background-position: 0;
    }
    60% {
      background-position: 900px;
    }
    100% {
      background-position: 900px;
    }
  }
  @-o-keyframes shine {
    0% {
      background-position: 0;
    }
    60% {
      background-position: 900px;
    }
    100% {
      background-position: 900px;
    }
  }
  @keyframes shine {
    0% {
      background-position: 0;
    }
    60% {
      background-position: 900px;
    }
    100% {
      background-position: 900px;
    }
  }
.howto img{
    width: 80px;
    height: 80px;
    border-radius: 50%;
}
.how1{
    display: inline-block;
    cursor: pointer;
    margin: 15px 30px 15px 30px;
    border-radius: 50%;
    text-align: center;
    position: relative;
    color: rgb(255, 0, 0);
    background-color: rgba(255, 255, 255, 0.1);
    transition: 300ms;
}
.how1:after {
    pointer-events: none;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    content: '';
    box-sizing: content-box;
    box-shadow: 0 0 0 3px #33334d;
    top: 0;
    left: 0;
    opacity: 0;
    transition: 300ms;
  }
.how1:hover {
    background-color: #33334d;
    color: #00989A;
} 
.how1:hover:after {
    opacity: 1;
    transform: scale(1.15);
}
/*หน้า------------------list_product------------------*/
a[name="list_product"] {
    float: left;
    margin-top:-8px;
  }
.el-wrapper a[name="ctgr_list"]{
    float: left;
    margin-top:-10px;
}
.btn {
    border: 1px solid rgba(109, 109, 109, 0.76);
    font-size: 20px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 0;
    transition: 1s;
  }
  .btn::before, .btn::after {
    position: absolute;
    background: #fff;
    z-index: -1;
    transition: 1s;
    content: '';
  }
  .btn::before {
    height: 460px;
    width: 230px;
  }
  .btn::after {
    width: 2300px;
    height: 320px;
  } 
  .noselect {
    -webkit-touch-callout: none;
      -webkit-user-select: none;
       -khtml-user-select: none;
         -moz-user-select: none;
          -ms-user-select: none;
              user-select: none;
  }
  .btn:hover::before {
    width: 0px;
    background: #fff;
  }
  .btn:hover::after {
    height: 0px;
    background: #fff;
  }
  .btn:hover {
    background: #fff;
  }
/*--------------------*/
.container{
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 10px 10px 0 rgba(0, 0, 0, 0.19);
}
.navbar-nav .nav-link{
    color: #000;
    padding: 0.5rem 0rem;
    border-color: transparent;
    margin-left: 1.5rem;
    transition: none;
}
.navbar .navbar-toggler:focus{
    box-shadow: none;
}
.container .product-item{
    min-height: 300px;
    border: none;
    overflow: hidden;
    position: relative;
    border-radius: 0;
}
.container .product-item .product{
    width: 100%;
    height: 270px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}
.container .product-item .product img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.container .product-item .product .icons .icon{
    width: 40px;
    height: 40px;
    background-color: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.6s ease;
    transform: rotate(180deg);
    cursor: pointer;
}
.container .product-item .product .icons .icon:hover{
    background-color: #b71c1c;
    color: #fff;
}
.container .product-item .product .icons .icon:nth-last-of-type(3){
    transition-delay: 0.2s;
}
.container .product-item .product .icons .icon:nth-last-of-type(2){
    transition-delay: 0.15s;
}
.container .product-item .product .icons .icon:nth-last-of-type(1){
    transition-delay: 0.1s;
}
.container .product-item:hover .product .icons .icon{
    transform: translateY(-60px);
}
.container .product-item .tag{
    text-transform: uppercase;
    font-size: 0.75rem;
    font-weight: 500;
    position: absolute;
    top: 10px;
    left: 20px;
    padding: 0 0.4rem;
}
.container .product-item .title{
    font-size: 1.5rem;
    letter-spacing: 0.5px;
    text-align: center;
}
.container .product-item .fa-star{
    font-size: 0.65rem;
    color: goldenrod;
}
.container .product-item .price{
    margin-top: 5px;
    margin-bottom: 5px;
    font-weight: 600;
    text-align: center;
}
/*-------------------------products---------------------*/
.page-inner{
    background-color: #f7f7f7;
    width:70%;
    margin: 0 auto;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 10px 10px 0 rgba(0, 0, 0, 0.19);
}
.d-flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.el-wrapper {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 10px 10px 0 rgba(0, 0, 0, 0.19);
    width: 300px;
    padding: 15px;
    margin: 30px 0px 0px 40px;/*บน ขวา ล่าง ซ้าย*/
    background-color: #fff;
    float: left;
    
}
.el-wrapper a[name="pd"]{
    float: left;
    margin-top:-10px;
}
  @media (max-width: 991px) {
    .el-wrapper {
      width: 345px;
    }
  }
  @media (max-width: 767px) {
    .el-wrapper {
      width: 290px;
      margin: 30px auto;
    }
  }
.el-wrapper:hover .h-bg {
    left: 0px;
}
.el-wrapper:hover .price {
    left: 20px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    color: #818181;
}
.el-wrapper:hover .add-to-cart {
    left: 50%;
}
.el-wrapper:hover .img {
    webkit-filter: blur(7px);
    -o-filter: blur(7px);
    -ms-filter: blur(7px);
    filter: blur(7px);
    filter: progid:DXImageTransform.Microsoft.Blur(pixelradius='7', shadowopacity='0.0');
    opacity: 0.4;
}
.el-wrapper:hover .info-inner {
    bottom: 199px;
}
.el-wrapper:hover .a-size {
    -webkit-transition-delay: 300ms;
    -o-transition-delay: 300ms;
    transition-delay: 300ms;
    bottom: 50px;
    opacity: 1;
} 
.el-wrapper .box-down {
    width: 100%;
    height: 60px;
    position: relative;
    overflow: hidden;
} 
.el-wrapper .box-up {
    width: 100%;
    height: 300px;
    position: relative;
    overflow: hidden;
    text-align: center;
}
.el-wrapper .img {
    -webkit-transition: all 800ms cubic-bezier(0, 0, 0.18, 1);
    -moz-transition: all 800ms cubic-bezier(0, 0, 0.18, 1);
    -o-transition: all 800ms cubic-bezier(0, 0, 0.18, 1);
    transition: all 800ms cubic-bezier(0, 0, 0.18, 1);
    /* ease-out */
    -webkit-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
    -moz-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
    -o-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
    transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
    /* ease-out */
}
.h-bg {
    -webkit-transition: all 800ms cubic-bezier(0, 0, 0.18, 1);
    -moz-transition: all 800ms cubic-bezier(0, 0, 0.18, 1);
    -o-transition: all 800ms cubic-bezier(0, 0, 0.18, 1);
    transition: all 800ms cubic-bezier(0, 0, 0.18, 1);
    /* ease-out */
    -webkit-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
    -moz-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
    -o-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
    transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
    /* ease-out */
    width: 660px;
    height: 100%;
    background-color: #3f96cd;
    position: absolute;
    left: -659px;
}
.h-bg .h-bg-inner {
    width: 50%;
    height: 100%;
    background-color: #464646;
} 
.info-inner {
    -webkit-transition: all 400ms cubic-bezier(0, 0, 0.18, 1);
    -moz-transition: all 400ms cubic-bezier(0, 0, 0.18, 1);
    -o-transition: all 400ms cubic-bezier(0, 0, 0.18, 1);
    transition: all 400ms cubic-bezier(0, 0, 0.18, 1);
    /* ease-out */
    -webkit-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
    -moz-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
    -o-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
    transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
    /* ease-out */
    position: absolute;
    width: 100%;
    bottom: 25px;
}
.info-inner .p-name,
.info-inner .p-company {
    display: block;
}
.info-inner .p-name {
    font-size: 18px;
    color: #252525;
}
.info-inner .p-company {
    font-size: 12px;
    text-transform: uppercase;
    color: #8c8c8c;
}
.a-size {
    -webkit-transition: all 300ms cubic-bezier(0, 0, 0.18, 1);
    -moz-transition: all 300ms cubic-bezier(0, 0, 0.18, 1);
    -o-transition: all 300ms cubic-bezier(0, 0, 0.18, 1);
    transition: all 300ms cubic-bezier(0, 0, 0.18, 1);
    /* ease-out */
    -webkit-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
    -moz-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
    -o-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
    transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
    /* ease-out */
    position: absolute;
    width: 100%;
    bottom: -20px;
    color: #828282;
    opacity: 0;
} 
.a-size .size {
    color: #252525;
}
.cart {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
}
.cart .price {
    -webkit-transition: all 600ms cubic-bezier(0, 0, 0.18, 1);
    -moz-transition: all 600ms cubic-bezier(0, 0, 0.18, 1);
    -o-transition: all 600ms cubic-bezier(0, 0, 0.18, 1);
    transition: all 600ms cubic-bezier(0, 0, 0.18, 1);
    /* ease-out */
    -webkit-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
    -moz-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
    -o-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
    transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
    /* ease-out */
    -webkit-transition-delay: 100ms;
    -o-transition-delay: 100ms;
    transition-delay: 100ms;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    font-size: 16px;
    color: #252525;
} 
.cart .add-to-cart {
    -webkit-transition: all 600ms cubic-bezier(0, 0, 0.18, 1);
    -moz-transition: all 600ms cubic-bezier(0, 0, 0.18, 1);
    -o-transition: all 600ms cubic-bezier(0, 0, 0.18, 1);
    transition: all 600ms cubic-bezier(0, 0, 0.18, 1);
    /* ease-out */
    -webkit-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
    -moz-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
    -o-transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
    transition-timing-function: cubic-bezier(0, 0, 0.18, 1);
    /* ease-out */
    -webkit-transition-delay: 100ms;
    -o-transition-delay: 100ms;
    transition-delay: 100ms;
    display: block;
    position: absolute;
    top: 50%;
    left: 110%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.cart .add-to-cart .txt {
    font-size: 16px;
    color: #fff;
    letter-spacing: 0.045em;
    text-transform: uppercase;
    white-space: nowrap;
    padding:0px 0px 0px 60px ;/*บน ขวา ล่าง ซ้าย*/
}
#free_i{
    clear: both;
}
/*---------------------หน้าpopup---------------------*/
a[data-toggle="modal"] {
    margin: 5px;
  }
  .modal-dialog{
    border-radius: 2px;
    background-color:rgb(228, 228, 228);
    padding: 0px 1070px 0px 26px;
  }
  .modal-content {
    border: none;
    border-radius: 2px;
    box-shadow: 0 16px 28px 0 rgba(0,0,0,0.22),0 25px 55px 0 rgba(0,0,0,0.21);
  }
  .modal-header{
    border-bottom: 0;
    text-align: right;
    height: 20px;
    width: 1040px;
  }
  .modal-body{
    padding-left:40px;
    padding-bottom:30px;
  }
  .modal-dialogs{
      height: 500px;
  }

/*---------------popupหน้าblogs---------------*/
.modal{
    padding-top: 80px;
    padding-bottom: 80px;
}
.blog-dialog{
    border-radius: 2px;
    background-color:rgb(228, 228, 228);
    width: 1040px;
    margin: 0 auto;
  }
  .blog-content {
    border: none;
    border-radius: 2px;
    box-shadow: 0 16px 28px 0 rgba(0,0,0,0.22),0 25px 55px 0 rgba(0,0,0,0.21);
  }
  .blog-header{
    width: 20px;
    padding: 5px 10px 0px 1020px;
  }
  .blog-body{
    clear: both;
  }
/*หน้า------------------footer------------------*/
footer{
    background: #3b3e43;
    padding:10px 350px 40px 350px;
}
svg{
    color:#ffffff;
}
section {
    padding: 0px 20px 0px 20px;
}
section .section-title {
    text-align: center;
    color: #007b5e;
    margin-bottom: 50px;
    text-transform: uppercase;
}
.col-xs-12{
    text-align: center;
}
#footer h5{
    font-size: 25px;
	padding-left: 10px;
    border-left: 3px solid #eeeeee;
    padding-bottom: 6px;
    color:#ffffff;
}
#footer a {
    margin: 0 auto;
    color: #ffffff;
    text-decoration: none;
    background-color: transparent;
    -webkit-text-decoration-skip: objects;
}
#footer ul.social li{
	padding: 0px 30px 0px 30px;
}
#footer ul.social li a i {
    margin-right: 5px;
	font-size:25px;
	-webkit-transition: .5s all ease;
	-moz-transition: .5s all ease;
	transition: .5s all ease;
}
#footer ul.social li:hover a i {
	font-size:30px;
	margin-top:-10px;
}
#footer ul.social li a,
#footer ul.quick-links li a{
	color:#ffffff;
}
#footer ul.social li a:hover{
	color:#eeeeee;
}
#footer ul.quick-links li{
	padding: 3px 0;
	-webkit-transition: .10s all ease;
	-moz-transition: .10s all ease;
	transition: .10s all ease;
}
#footer ul.quick-links li:hover{
	padding: 3px 0;
	margin-left:5px;
	font-weight:700;
}
#footer ul.quick-links li a i{
	margin-right: 5px;
}
#footer ul.quick-links li:hover a i {
    font-weight: 700;
}
@media (max-width:767px){
	#footer h5 {
    padding-left: 0;
    border-left: transparent;
    padding-bottom: 0px;
    margin-bottom: 10px;
     }
}
/*------------------หน้าติดต่อ------------------*/
.contact_us1{
    width:1141px;
    margin:auto;
    padding-top: 30px;
    background-color: #ffffff;
}
.contact_us1 h1{
    text-align: left;
}
.contact_lv1 img{
    height: 40px;
    width: 40px;
}
.contact_lv1 h3 {
    text-align: left;
    padding: 10px;
}
.contact_lv1 p{
    text-align: left;
    padding: 10px;
    margin-top: -30px;
}
.contact_lv2, .contact_lv3{
    float: left;
    width: 100%;
}
.ct1, .ct3{
    float: left;
    text-align: left;
    width: 30%;
    margin-bottom: 20px;
}
.ct2, .ct4{
    float: left;
}
#mapp{
    text-align: center;
}
/*------------------ aboutus_lv1 ------------------*/
.aboutus_lv1{
    margin: 0 auto;
    width: 1400px;
}
.aboutus_level1{
    float: left;
    width: 50%;
}
.aboutus_level2{
    float: left;
    width: 50%;
}
.people1-content{
    width: 1040px;
}
.people1-header{
    width: 1040px;
}
.people1-body{
    width: 1040px;
    padding: 40px 20px 40px 20px;
}
/*------------------ type_lv2 ------------------*/
.type_lv2{
    padding: 20px 0px 20px 0px;
    background: #ffffff;
    margin: 0 auto;
    width: 1400px;
    /*border: 2px solid #007b5e;*/
}
.type_level1{
    height: 620px;
    width: 60%;
    padding-top: 40px;
    text-align: center;
    float: left;
    border-right:1px dashed #25252575;
}
.type_level2{
    width: 40%;
    text-align: center;
    float: left;
}
.type_level22{
    /*border: 2px solid #0051ff;*/
    text-align: center;
    
}
.type_level23{
    /*border: 2px solid #ff00f2;*/
    text-align: center;
    border-top:1px dashed #25252575;
}
/*----------------------*/
.demo{ background: #f8f7f6; }
#testimonial-slider{
    padding: 50px 20px 35px 20px;
    background: #fff;
    text-align: center;
    box-shadow: 0 0 115px 19px rgba(236, 236, 236, 1);
}
.testimonial .description{
    font-size: 14px;
    color: #777;
    line-height: 26px;
    text-indent: 30px;
    position: relative;
}
.testimonial .description:before{
    content: "\f10d";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    top: 0;
    left: -15px;
}
.testimonial .title{
    font-size: 24px;
    font-weight: bold;
    color: #363636;
    text-transform: capitalize;
    margin: 0;
}
.testimonial .post{
    display: block;
    font-size: 15px;
    color: #363636;
}
.owl-buttons{
    width: 100%;
    height: 40px;
    position: absolute;
    bottom: 40%;
    left: 0;
}
.owl-prev,
.owl-next{
    position: absolute;
    left: 0;
    transition: all 0.4s ease-in-out 0s;
}
.owl-next{
    left: auto;
    right: 0;
}
.owl-buttons .owl-prev:before,
.owl-buttons .owl-next:before{
    content: "\f104";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 60px;
    font-weight: 900;
    color: #cacaca;
    line-height: 20px;
    opacity: 0.8;
}
.owl-buttons .owl-next:before{
    content: "\f105";
}
.owl-buttons .owl-prev:hover:before,
.owl-buttons .owl-next:hover:before{
    opacity: 1;
}
.owl-theme .owl-controls .owl-buttons div{
    background: transparent;
}
.owl-theme .owl-controls{
    margin-top: 40px;
}
.owl-theme .owl-controls .owl-page span{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 4px solid #ccc;
    background: url("../images/img-1.jpg") no-repeat;
    background-size: cover;
    transition: all 0.3s ease-in-out 0s;
}
.owl-theme .owl-controls .owl-page:nth-child(2) span{
    background: url("../images/img-2.jpg") no-repeat;
    background-size: cover;
}
.owl-theme .owl-controls .owl-page:nth-child(3) span{
    background: url("../images/img-3.jpg") no-repeat;
    background-size: cover;
}
.owl-theme .owl-controls.clickable .owl-page:hover span{
    opacity: 0.5;
}
.owl-theme .owl-controls .owl-page.active span,
.owl-theme .owl-controls .owl-page.active:hover span{
    border-color: #d133ff;
    opacity: 1;
}
@media only screen and (max-width: 479px){
    .owl-buttons{ bottom: 30%; }
}
/*------------------login------------------*/
.wrapper h2{
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    display:inline-block;
    margin: 40px 8px 10px 8px; 
    color: #cccccc;
}
.formFooter a{
    color: #92badd;
    display:inline-block;
    text-decoration: none;
    font-weight: 400;
}

/* STRUCTURE */
.wrapper {
    display: flex;
    align-items: center;
    flex-direction: column; 
    justify-content: center;
    width: 100%;
    min-height: 100%;
    box-shadow:none;
}
#formContent {
    -webkit-border-radius: 10px 10px 10px 10px;
    border-radius: 10px 10px 10px 10px;
    background: #fff;
    padding: 30px;
    width: 90%;
    max-width: 450px;
    position: relative;
    padding: 0px;
    -webkit-box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
    box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
    text-align: center;
}
#formFooter {
    background-color: #f6f6f6;
    border-top: 1px solid #dce8f1;
    padding: 25px;
    text-align: center;
    -webkit-border-radius: 0 0 10px 10px;
    border-radius: 0 0 10px 10px;
}
  
/* TABS */
h2.inactive {
    color: #cccccc;
}
h2.active {
    color: #0d0d0d;
    border-bottom: 2px solid #5fbae9;
}
  
/* FORM TYPOGRAPHY*/
input[name="register"], input[type=reset]  {
    background-color: #56baed;
    border: none;
    color: white;
    padding: 15px 80px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    text-transform: uppercase;
    font-size: 13px;
    -webkit-box-shadow: 0 10px 30px 0 rgba(95,186,233,0.4);
    box-shadow: 0 10px 30px 0 rgba(95,186,233,0.4);
    -webkit-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
    margin: 5px 20px 40px 20px;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
input[name="login"] {
    background-color: #fc8e35;
    border: none;
    color: white;
    padding: 15px 80px 15px 80px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    text-transform: uppercase;
    font-size: 13px;
    
    
    -webkit-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
    margin: 5px 20px 40px 20px;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
input[name="register"]:hover{
    background-color: #39ace7;
}
input[name="login"]:hover  {
    background-color: #ff7300;
}
input[type="button"]:active, input[type="submit"]:active, input[type="reset"]:active  {
    -moz-transform: scale(0.95);
    -webkit-transform: scale(0.95);
    -o-transform: scale(0.95);
    -ms-transform: scale(0.95);
    transform: scale(0.95);
}
input[type="text"], input[type="password"], textarea[type="text"], select[name="education"], select[name="province"], input[type="date"],input [type="radio"] {
    background-color: #f6f6f6;
    border: none;
    color: #0d0d0d;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 5px;
    width: 85%;
    border: 2px solid #f6f6f6;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    -webkit-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
}
input[type="text"]:focus {
    background-color: #fff;
    border-bottom: 2px solid #5fbae9;
}
input[type="password"]:focus {
    background-color: #fff;
    border-bottom: 2px solid #5fbae9;
}
textarea[type="text"]:focus {
    background-color: #fff;
    border-bottom: 2px solid #5fbae9;
}
input[type="text"]:placeholder {
    color: #cccccc;
}
  
/* ANIMATIONS */
/* Simple CSS3 Fade-in-down Animation */
.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
@-webkit-keyframes fadeInDown {
    0% {
      opacity: 0;
      -webkit-transform: translate3d(0, -100%, 0);
      transform: translate3d(0, -100%, 0);
    }
    100% {
      opacity: 1;
      -webkit-transform: none;
      transform: none;
    }
}
@keyframes fadeInDown {
    0% {
      opacity: 0;
      
      -webkit-transform: translate3d(0, -100%, 0); /*อนิเมชั่นบนลงล่าง*/
      transform: translate3d(0, -100%, 0);
    }
    100% {
      opacity: 1;
      -webkit-transform: none;
      transform: none;
    }
}

/* Simple CSS3 Fade-in Animation */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.fadeIn {
    opacity:0;
    -webkit-animation:fadeIn ease-in 1;
    -moz-animation:fadeIn ease-in 1;
    animation:fadeIn ease-in 1;
  
    -webkit-animation-fill-mode:forwards;
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
  
    -webkit-animation-duration:1s;
    -moz-animation-duration:1s;
    animation-duration:1s;
} 
.fadeIn.first {
    -webkit-animation-delay: 0.4s;
    -moz-animation-delay: 0.4s;
    animation-delay: 0.4s;
  }
.fadeIn.second {
    -webkit-animation-delay: 0.6s;
    -moz-animation-delay: 0.6s;
    animation-delay: 0.6s;
}
.fadeIn.third {
    -webkit-animation-delay: 0.8s;
    -moz-animation-delay: 0.8s;
    animation-delay: 0.8s;
}
.fadeIn.fourth {
    -webkit-animation-delay: 1s;
    -moz-animation-delay: 1s;
    animation-delay: 1s;
}
/* Simple CSS3 Fade-in Animation */
.underlineHover:after {
    display: block;
    left: 0;
    bottom: -10px;
    width: 0;
    height: 2px;
    background-color: #56baed;
    content: "";
    transition: width 0.2s;
  }
.underlineHover:hover {
    color: #5fbae9;
    text-decoration:none
}
.underlineHover:hover:after{
    width: 100%;
}
/*--------------พระอาทิตย์ในlogin--------------*/
.hot{ 
    top:18%;
	left:35%;
    position: absolute;
    width:130px;
	height:130px;
    border-radius: 40%;
	background:linear-gradient( to top right, rgba(255,87,34,1) 0%,
	rgba(251,140,0 ,1) 100%);
	box-shadow: 1px 1px 30px rgba(255,111,0 ,1);
}
.sun{
	position: absolute;
	top:-10%;
	left:65%;
	width:50px;
	height: 50px;
	border-radius: 100%;
	background:linear-gradient( to bottom left, rgba(255,235,59,1) 0%,
	rgba(249,168,37 ,1) 90%);
	box-shadow: 1px 1px 30px rgba(255,160,0 ,1);
	animation: inex 3s infinite linear ;
}
.sunx{
	position: absolute;
	top:30%;
	left:45%;
	width:10px;
	height: 10px;
	border-radius: 100%;
	background-color: #fff;
	opacity:0.2;
}
.cloudy{ 
    position: absolute;
	top:25%;
	left:45%;
	background:linear-gradient( to top right, rgba(63,81,181,1) 0%,
	rgba(3,155,229 ,1) 40%);
	box-shadow: 1px 1px 30px rgba(2,119,189 ,1);
}
.cloud{
    position: absolute;
	top:5%;
	left:70%;
	width:60px;
	height: 20px;
	border-radius:10px;
	background-color: rgba(129,212,250 ,1);
	box-shadow: 1px 1px 30px rgba(0,151,167 ,1);
    animation: move 3s infinite linear ;
}
.cloudx{
	position: absolute;
	top:23%;
	left:55%;
	width:60px;
	height: 20px;
	border-radius:10px;
	background-color: rgba(129,212,250 ,1);
	animation: move 3s infinite linear ;
}
.stormy{
	position: absolute;
	top:25%;
	left:70%;
	background:linear-gradient( to top right,rgba(117,117,117 ,1) 0%,
	rgba(33,33,33 ,1) 90%);
	box-shadow: 1px 1px 30px rgba(33,33,33 ,1);
}
.stormy li{
	position: absolute;
	list-style: none;
	width: 5px;
	height: 5px;
	border-radius: 100%;
	background-color:#777;
	box-shadow: 1px 1px 30px #555;
	animation: fall 3s infinite linear ;
    opacity:0;
}
.stormy li:nth-child(1){
    top:0%;
    left:100%;
}
.stormy li:nth-child(2){
    top:5%;
    left:90%;
}
.stormy li:nth-child(3){
    top:-10%;
    left:80%;
    animation-delay: 2s;
}
.stormy li:nth-child(4){
    top:10%;
    left:100%;
    animation-delay: 2s;
}
.stormy li:nth-child(5){
    top:20%;
    left:80%;
    animation-delay: 0.5s;
}
.stormy li:nth-child(6){
    top:35%;
    left:70%;
    background-color: #bbb;
    animation-delay: 0.5s;
}
.stormy li:nth-child(7){
    top:23%;
    left:60%;
    background-color: #bbb;
    animation-delay: 0.8s;
}
.stormy li:nth-child(8){
    top:5%;
    left:70%;
    background-color: #bbb;
    animation-delay: 0.8s;
}
.snowe{
    position: absolute;
	top:60%;
	left:40%;
	width:40px;
	height: 40px;
	border-radius:60px;
	background-color: #ddd;
}
.snowex{
	position: absolute;
	top:50%;
	left:50%;
	width:15px;
	height: 15px;	
	border-radius:15px;
	background-color: #bbb;
}
.stick{
	position: absolute;
	top:60%;
	left:40%;
	width:3px;
	height: 15px;	
	transform: rotate(-45deg);
	background-color: #333;
}
.stick2{
	position: absolute;
	top:60%;
	left:70%;
	width:3px;
	height: 15px;	
	transform: rotate(45deg);
	background-color: #333;
}
.breezy{
    width:130px;
	height:130px;
	border-radius: 40%;
	position: absolute;
	top:8%;
	left:44%;
	background:linear-gradient( to top right,rgba(156,204,101 ,1) 0%,
	rgba(38,198,218 ,1) 50%);
	box-shadow: 1px 1px 30px rgba(38,198,218 ,1);
}
.cloudr{
    position: absolute;
	top:5%;
	left:60%;
	width:60px;
	height: 20px;
	border-radius:10px;
	background-color: rgba(96,125,139 ,1);
	box-shadow: 1px 1px 30px rgba(84,110,122 ,1);
    animation: flash 1.5s infinite linear;
}
.breezy li{
	position: absolute;
	list-style: none;
	width: 2px;
	height: 7px;
	border-radius: 10%;
	background-color:#eee;
	opacity:0;
	animation: fall 3s infinite linear ;
	transform: rotate(25deg);
}
.breezy li:nth-child(1){	
    top:10%;
    left:95%;
}
.breezy li:nth-child(2){
    top:5%;
    left:83%;
    animation-delay:0.3s;
}
.breezy li:nth-child(3){
    top:4%;
    left:87%;
    animation-delay:0.6s;
}
.breezy li:nth-child(4){
    top:15%;
    left:70%;
    animation-delay:1s;
}
.breezy li:nth-child(5){
    top:10%;
    left:75%;
}
.night{
	position: absolute;
	left:35%;
    margin-top: 20px;
	background:linear-gradient( to bottom right,rgba(63,81,181,1) 0%,
	rgba(171,71,188 ,1) 70%);
	box-shadow: 1px 1px 30px rgba(81,45,168 ,1);
}
.moon{
	position: absolute;
	top:-10%;
	left:65%;
	width:70px;
	height: 70px;
	border-radius: 100%;
	background:rgba(255,241,118 ,1);
	box-shadow: 1px 1px 30px rgba(224,224,224 ,1);
}
.spot1{
	position: absolute;
	top:0%;
	left:85%;
	width:10px;
	height: 10px;
	border-radius: 100%;
	background-color: #777;
}
.spot2{
	position: absolute;
	top:30%;
	left:75%;
	width:5px;
	height: 5px;
	border-radius: 100%;
	background-color: #777;
}
.night li{
	position: absolute;
	list-style: none;
	width: 3px;
	height: 3px;
	border-radius: 100%;
	background-color:#fff;
	transform: rotate(45deg);
}
.night li:nth-child(1){	
    top:30%;
    left:65%;
}
.night li:nth-child(2){
    top:35%;
    left:53%;
}
.night li:nth-child(3){
    opacity: 0;
    top:20%;
    left:75%;
    width:2px;
    height: 2px;
    animation: meteor 1.5s infinite linear;
    animation-delay: 0.6s;
}
.night li:nth-child(4){
    top:5%;
    left:50%;
}
.night li:nth-child(5){
	opacity: 0;
    top:20%;
    left:55%;
    width:1px;
    height: 15px;
    animation: meteor 1.5s infinite linear;
}
@keyframes inex {
	50%{
	    opacity: 0.4;
	}
	60%{
		opacity: 1;
	}
}
@keyframes move {
	50%{
	    transform: translateX(-10px);
	}
}
@keyframes fall {
    10%{
        opacity:0.8;
    }
	50%{
		opacity:1;
	    transform: translate(-10px,30px);
	}
	100%{
		transform: translate(-25px,70px);
		
	}
}
@keyframes flash
{
	48%{
		background-color: rgba(96,125,139 ,1);
	}
	50%{
		background-color: #fff;
	}
	55%{
		background-color: rgba(96,125,139 ,1);
	}
	57%{
		background-color: #fff;	
	}
}
@keyframes meteor
{
    10%{
        opacity: 1;
    }
    80%	{
        left:10%;
        top:75%;
        opacity: 0;
    }
}
/*----------------popup_ligin_h----------------*/
.modal[name='modal_h']{
    padding-top: 20px;
    padding-bottom: 20px;
}
.loginh-dialog{
    border-radius: 2px;
    width: 450px;
    margin: 0 auto;
}
.loginh-header{
    width: 20px;
}   
.loginh-body{
    clear: both;
}
.wrapper button{
    padding-right: 20px;
    padding-top: 20px;
}
/*----------------popup_register_h----------------*/
.modal[name='modal_rh']{
    padding-top: 20px;
    padding-bottom: 20px;
}
.rh-dialog{
    border-radius: 2px;
    width: 1040px;
    margin: 0 auto;
    
}
.rh-header{
    width: 20px;
}   
.rh-body{
    clear: both;
}
#formContent_rh form{
    padding-left: 50px;
}
#formContent_rh {
    -webkit-border-radius: 10px 10px 10px 10px;
    border-radius: 10px 10px 10px 10px;
    background: #fff;
    padding: 30px;
    width: 100%;
    max-width: 1040px;
    position: relative;
    padding: 0px;
    -webkit-box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
    box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
    text-align: center;
}
/*----------------popup_product_detail----------------*/
.modal[name='modal_pd']{
    padding-top: 20px;
    padding-bottom: 20px;
}
.pd-dialog{
    border-radius: 2px;
    width: 1240px;
    margin: 0 auto;
}
.pd-header{
    width: 20px;
}   
.pd-body{
    clear: both;
}
/*------------------จัดการหน้า news_list------------------*/
    #newsindex{
        padding: 20px;
    }
    #list_newsindex{
        padding: 10px;
        background-color:#ffffff;
        box-shadow:0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    }
    #title_news{
        padding: 15px 0px 0px 0px;
        width: 200px;
        float: left;
    }
    #search_newslist{
        width: 300px;
        text-align: right;
        float:right;
        padding:10px 10px 10px 0px;
    }   
    #search_newslist input[type="search"],input[type="submit"]{
        height:40px;
    }
    #list_detail{
        background-color:#ffffff;
        box-shadow:0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    }
    #page_news{
        text-align: center;
        background-color:#ffffff;
        box-shadow:0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    }
    #page_news a{
        font-size: 20px;
    }
    
/*จัดการหน้า news_detail*/
    #detail_news{
        padding: 50px;
    }
    #title_news1{
        background-color:#ffffff;
        padding:20px;
        box-shadow:0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    }
    #pic_news{
        box-shadow:0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
        text-align: center;
        background-color: #f9f9f9;
        padding:50px 10px 50px 10px; /*บน ขวา ล่าง ซ้าย*/
    }
    #pic_news img{
        width:400 ;
        height:400;
    }
    #dt_news{
        box-shadow:0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
        background-color: #f9f9f9;
        padding:20px 200px 20px 200px;
    }
/*หน้า pay ชำระเงิน*/
    #payment_method{
        margin: 0 auto;
        width: 1024px;
        padding:30px;
    }
    #address{
        background-color: #f9f9f9;
        box-shadow:0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
        padding:20px;
    }
    #order{
        background-color: #f9f9f9;
        padding:20px;
    }
    #order2{
        padding:10px;
    }
    #payment_method{
        background-color: #f9f9f9;
        padding:0px 30px 50px 30px;
    }
    #payment1{
        padding:30px;
        float:left;
        clear:both;
    }
    #payment1 input{
        height: 40px;
        width: 300px;
    }
    #payment2{
        padding:30px;
        float: left;
    }
    #payment2 input{
        height: 40px;
        width: 300px;
    }
    #pay_submit{
        padding:20px;
        text-align: center;
        background-color: #ffffff;
        box-shadow:0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    }
    #pay_submit input{
        margin: 10px;
        height: 40px;
        width: 200px;
    }
/*------------------product_detail------------------*/
.product_detail{
    display: grid;
    grid-template-rows: 1fr;
    height: 100%;
}
.product_detail h3{
    font-size: 0.7em;
    letter-spacing: 1.2px;
    color: #a6a6a6;
}
/* ----- Product Section ----- */
.product1 {
    box-shadow: 4px 4px 25px -2px rgba(0, 0, 0, 0.3);
    display: grid;
    grid-template-columns: 0.9fr 1fr;
    width: 1200px;
    margin:0 auto;
    padding: 2.8em 0;
    background-color: rgb(255, 255, 255);
    border-radius: 5px;
    margin-left: -350px;
  }
  /* ----- Photo Section ----- */
  .product__photo {
    position: relative;
  }
  
  .photo-main img {
    position: absolute;
    left: -2.5em;
    display: grid;
    grid-template-rows: 1fr;
    width: 500px;
    height: 500px;
    border-radius: 6px;
    box-shadow: 4px 4px 25px -2px rgba(0, 0, 0, 0.3);
  }

  .photo-main .controls {
    display: flex;
    justify-content: space-between;
    padding: 0.8em;
    color: #fff;
    
  }
  .photo-main .controls i {
    cursor: pointer;
  }
  
  /* ----- Informations Section ----- */
  .product__info {
    width: 650px;
    padding: 20px;
    text-align: left;
  }
  
  .title h1 {
    margin-bottom: 0.1em;
    color: #4c4c4c;
    font-size: 1.0em;
    font-weight: 900;
  }
  .title span {
    font-size: 0.9em;
    color: #a6a6a6;
  }
  .price {
    margin: 10px 0px 0px 0px;
    color: #ff3f40;
    font-size: 1.2em;
  }
  .price span {
    padding-left: 0.15em;
    font-size: 2.9em;
  }
  .price input{
      width: 100px;
      padding-left: 0.15em;

  }
  .description{
    clear: left;
    margin: 10px 0px 0px 0px;
  }
  .description h3 {
    margin-bottom: 1em;
  }
  .description ul {
    font-size: 0.8em;
    list-style: disc;
    margin-left: 1em;
  }
  .description li {
    text-indent: -0.6em;
    margin-bottom: 0.5em;
  }
  
  .buy--btn {
    padding: 1.5em 3.1em;
    border: none;
    border-radius: 7px;
    font-size: 0.8em;
    font-weight: 700;
    letter-spacing: 1.3px;
    color: #fff;
    background-color: #ff3f40;
    box-shadow: 2px 2px 25px -7px #4c4c4c;
    cursor: pointer;
  }
  .buy--btn:active {
    transform: scale(0.97);
  }
  
/*------------------purchase------------------*/
    #listproduct_1{
        padding:20px;
    }
    #title_list{
        background-color: #f9f9f9;
        box-shadow:0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
        padding:20px;
    }
    #list_product{
        background-color: #f9f9f9;
        box-shadow:0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
        padding:20px;
    }

/*category_list*/
    #ctgr_content{
        float: left;
        width:200px;
        margin:60px 0px 0px 43px;
        box-shadow:0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    }
    #ctgr_content a{
        text-decoration:none
    }
    #ctgr{
        text-align:center;
        height:50px;
    }
    #ctgr_list{
        text-align:center;
        float:left;
        width:1024px;
        clear: both;

    }
/*------------------blogs------------------*/
.blog{
    background-color: rgb(255, 255, 255);
    display: grid;
    place-items: center;
    min-height: 100vh;
}
.containerss {
    background-color: #fff;
    position: relative;
    display: grid;
    grid-template-columns: 250px 590px;
    border-radius: 5px;
    box-shadow: 0 15px 20px rgba(0, 0, 0, 0.356);
    
  }
  .containerss img {
    width: 250px;
    height: 250px;
    border-radius: 5px 0 0 5px;
  }
  .containerss .butadd {
    position: absolute;
    bottom: -20px;
    right: -20px;
    border: none;
    outline: none;
    display: flex;
    align-items: center;
    background-color: #fc9400;
    color: #fff;
    padding: 22px 45px;
    font-size: 1rem;
    text-transform: uppercase;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.294);
  }
  .containers__text {
    padding: 20px 20px 0;
  }
  .containers__text h2 {
    color: #351897;
    font-weight: 400;
  }
  .containers__text p {
    font-size: 0.9rem;
  }
  /*------------------------*/
  .blog_but {
    border-radius: 5px;
    border: 2px solid rgba(109, 109, 109, 0.521);
    font-size: 20px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 0;
    transition: 1s;
    padding: 5px;
    margin-bottom: 50px;
  }
  .blog_but::before, .blog_but::after {
    position: absolute;
    background: #FFF;
    z-index: -1;
    transition: 1s;
    content: '';
  }
  .blog_but::before {
    background: rgb(255, 255, 255);
    height: 270px;
    width: 820px;
  }
  .blog_but::after {
    background: rgb(255, 255, 255);
    width: 860px;
    height: 270px;
  } 
  .noselect {
    -webkit-touch-callout: none;
      -webkit-user-select: none;
       -khtml-user-select: none;
         -moz-user-select: none;
          -ms-user-select: none;
              user-select: none;
  }
  .blog_but:hover::before {
    width: 0px;
    background: #fff;
  }
  .blog_but:hover::after {
    height: 0px;
    background: #fff;
  }
  .blog_but:hover {
    background: #fff;
  }
/*---------------------*/
.blog{
    background-color: rgb(255, 255, 255);
    display: grid;
    place-items: center;
    min-height: 100vh;
}
.containerss {
    background-color: #fff;
    position: relative;
    display: grid;
    grid-template-columns: 250px 590px;
    border-radius: 5px;
    box-shadow: 0 15px 20px rgba(0, 0, 0, 0.356);
    
  }
  .containerss img {
    width: 250px;
    height: 250px;
    border-radius: 5px 0 0 5px;
  }
  .containerss .butadd {
    position: absolute;
    bottom: -20px;
    right: -20px;
    border: none;
    outline: none;
    display: flex;
    align-items: center;
    background-color: #fc9400;
    color: #fff;
    padding: 22px 45px;
    font-size: 1rem;
    text-transform: uppercase;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.294);
  }
  .containers__text {
    padding: 20px 20px 0;
  }
  .containers__text h2 {
    color: #351897;
    font-weight: 400;
  }
  .containers__text p {
    font-size: 0.9rem;
  }
  /*------------------------*/
.blogs{
    background-color:rgb(228, 228, 228);
    display: grid;
    place-items: center;
    min-height: 70vh;
}
.containers1 {
    background-color: #fff;
    position: relative;
    display: grid;
    grid-template-columns: 250px 690px;
    border-radius: 5px;
    box-shadow: 0 15px 20px rgba(0, 0, 0, 0.356);
  }
  .containers1 img {
    width: 300px;
    height: 300px;
    border-radius: 5px 0 0 5px;
  }
  .containers1__text {
    padding: 30px 75px 0;
    
  }
  .containers1__text h2 {
    color: #351897;
    font-weight: 400;
  }
  .containers1__text p {
    font-size: 0.9rem;
  }
/*------------------------blogs_list------------------------*/
.blog_listv1{
    width: 100%;
    height: 0% auto;
    margin: 0 auto;
    padding-left: 75px;
    padding-top: 10px;
    padding-bottom: 20px;
}
.blog_list{
    height: 300px;
    width: 300px;
    margin: 20px;
    float: left;
}
.blog-card {
    max-width: 300px;
    width:100%;
    height: 300px;
    position: absolute;
    color:#fff;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 0px;
    box-shadow: 0px 10px 20px -9px rgba(0, 0, 0, 0.5);
    text-align: center;
    transition:all 0.4s;
    background-size: 100%;
  }
  .blog-card a{ 
  color:#fff;
    text-decoration:none;
    transition:all 0.2s
  }
  .blog-card .color-overlay {
    background: rgba(64, 84, 94,0.5);
    width: 300px;
    height: 300px;
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    transition: background 0.3s cubic-bezier(0.33, 0.66, 0.66, 1);
  }
  .blog-card .gradient-overlay {  
    background-image: linear-gradient(transparent 0%, rgba(0, 0, 0, 0.6) 21%);
    width: 300px;
    height: 300px;
    position: absolute;
    top: 350px;
    left: 0;
    z-index: 15;
  }
  .blog-card:hover{
      box-shadow: 0px 18px 20px -9px rgba(0, 10, 30, 0.75);
  }
  .blog-card:hover .card-info {
    opacity: 1;
    bottom: 0px;
  }
  .blog-card:hover .color-overlay {
    background: rgba(64, 64, 70,0.8);
  }
  .blog-card:hover .title-content{
    margin-top:30px
  }
  .title-content {
    text-align: center;
    margin: 170px 0 0 0;
    position: absolute;
    z-index: 20;
    width: 100%;
    top: 0;
    left: 0;
    transition:all 0.6s
  }
  
  .blog-card:hover h6:after{
   
    animation: changeLetter 0.3s 1 linear;
    width:80%
  }
  
  .blog-card h6 {
    font-size: 1.0em;
    font-weight: 400;
    letter-spacing: 1px;
    margin-bottom: 0;
    display:inline-block;
  }
  .blog-card h6 a{  
    text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);  
    transition:all 0.2s
  }
  .blog-card h6 a:hover{
    text-shadow: 0px 8px 20px rgba(0, 0, 0, 0.95);
  }
  .blog-card h6:after {
    content: " ";
    display: block; 
    width: 10%;
    height: 2px;
    margin: 5  px auto;
    border: 0;
    background: #00a859;
    transition:all 0.2s
  }
  
  @keyframes changeLetter {
    0% {
      width: 10%;
    }
    100% {
      width: 80%;
    }
  }
  .intro {
    width: 170px;
    margin: 0 auto;
    color: #ddd;
    font-style: italic;
    line-height: 18px;
  }
  .intro a{
    color: #ddd
  }
  .intro a:hover{
    text-decoration:underline
  }
  .card-info {
    box-sizing: border-box;
    padding: 0;
    width: 100%;
    position: absolute;
    bottom: -20px;
    left: 0;
    margin: 0 auto;
    padding: 0 50px;
    font-style: 16px;
    line-height: 24px;
    z-index: 20;
    opacity: 0;
    transition: bottom 0.64s, opacity 0.63s cubic-bezier(0.33, 0.66, 0.66, 1);
  }
  .utility-info {
    position: absolute;
    bottom: 0px;
    left: 0;
    z-index: 20;
    width:100%;
    text-align:left
  }
  .utility-info:after{
    content:" ";
    background: url(https://rawcdn.githack.com/Nodws/NodPen/ffad95aa5244b4b09a3c7c1508a018959bbedb7e/postItem/licons.svg) center no-repeat;
    background-size: 30px auto;
    display:block;
    opacity: 0.4;
    position:absolute;
    bottom:25px;
    right:15px;
    width:30px;
    height:15px
  }
  .utility-info a:hover{
    text-decoration:underline
  }
  .utility-list {
    list-style-type: none;
    margin: 0 0 10px 20px;
    padding: 0;
    width: 100%;
  
  }
  .utility-list li {
    margin: 0 5px 0 0;
    padding: 3px 0 15px 0px;
    display: inline-block;
    
    font-size:0.8em
  }
  
  .licon{
    position:relative;  
     width:23px;
     height:15px;
     display:inline-block;
     vertical-align:middle;
  }
  .licon:before{
    content:"";
     background:url(https://rawcdn.githack.com/Nodws/NodPen/ffad95aa5244b4b09a3c7c1508a018959bbedb7e/postItem/licons.svg?) -2px -6px no-repeat;
     background-size:250px;
     width:26px;
     height:20px;
     display:inline-block;
     vertical-align:middle;
     position:absolute;
     top:-3px;
     left:0;
  }
  .icon-white{
     filter: brightness(10);
  }
  .icon-black{
     filter: brightness(0);
     opacity:0.6
  }
  .icon-like:before{
    background-position: -183px -6px;
  
  }
  .icon-com:before{
    background-position: -63px -4px;
  
  }
  .icon-dat:before{
    background-position: -94px -7px;
  }
  .icon-tag:before{
    background-position: -33px -6px;
  
  }
  
  @media (max-width:750px)
  {
    .utility-info {
      text-align:center;
    }
    .utility-info ul{
      width:100%;
      margin:0;
      box-sizing:border-box
    }
    .utility-info li{
      width:49%;
      display:inline-block;
      box-sizing:border-box;
      margin:0
    }
  }
  
  @media (max-width:500px){
    .utility-info li:last-of-type{
      width:100%
    }
    .card-info{
      display:none
    }
    .blog-card:hover .title-content,.title-content{
    margin-top:40px
  }
  .blog-card{
    height:300px
  }
  .blog-card h3{
    font-size:1.3em
  }
  .intro{
    font-size:0.8em
  }
  }
  
  #profile-badges:after {
      content: "BRO";
      
      font-size:13px;
      font-weight: 500;
      text-transform: uppercase;
      padding: 1px 4px 1px 4px;
      color: black !important;
      border-radius: 3px;
      position: relative;
      top: -2px;
      text-shadow: none !important;
      white-space: nowrap;
      letter-spacing: 0;
      background: #FFDD40;
  }
  .profile-header{ background:#333 url(https://images.unsplash.com/photo-1435783099294-283725c37230?dpr=1&auto=compress,format&fit=crop&w=1376&h=635&q=80&cs=tinysrgb&crop=&bg=) top center no-repeat; background-size:cover; font-size:3em;position:relative}
  .profile-header:after{
    position:absolute;
    content:"";
    display:block;
    width:100%;
    height:100%;
    top:0;
    left:0;
    background:rgba(23, 23, 31, 0.42);
    z-index:0
  }
  #profile-links a{
    font-family: 'Abril Fatface', serif;
    font-size:1.2em
  }
  .profile-links a[href*=nodws\.com]:before{
      content:"\2616";
      color:#0a45b5;
      padding-right:3px
  }
  .profile-links a[href*=twitter]:before{
      content:"\1f426";
      color:#08c
  }
  .profile-links a[href*=dribbble]:before{
      content:"\26BE";
      color:#d055bf
  }
  #following-this-user{
    pointer-events:none
  }
  #follow-this-user{
      font-size:1.2em;
      border-color:#359ef9
  }
  #follow-this-user:after{
      content:"\1f448"
  }
  .links-and-stats {
      background: rgb(20, 20, 21);
  }
  .profile-name h1 {
     text-shadow:0 6px 9px rgba(0, 0, 0, 0.48)
  }
  .profile-avatar {
      bottom: -10px;
      width: 150px;
      height: 150px;
      border: 0px solid #1E1E1E;
      background: rgba(2, 2, 2, 0.49);
      box-shadow:0 19px 19px -10px rgba(0, 0, 0, 0.63)
  }
  .profile-username, .upsell,.profile-location,.primary-pro{
    opacity:0;
  }
  .upsell,#pen-as-header-question{
    display:none
  }
  .profile-nav-1 a{
    font-size:1.2rem;
  }
  .profile-bio, .profile-nav-1 a.active,.profile-nav-1 a:hover {
      color: rgba(20, 20, 21, 0.59) !important;
      font-size: 1.2rem
  }
  .meta .pen-title {
    font-family: 'Droid Serif', serif;
    text-align:center
  }
  .pagination-button{
    background-color:#2f2f31;
    border-color:#2f2f31;
    transition:all 0.2s
  }
  .pagination-button:hover{
    box-shadow:0 3px 8px rgba(0,0,0,0.2)
  }
  .single-project .stats,.single-pen .stats {
      text-align:center;
      width:100%
  }
  .stats svg {
      fill: #bda26b;
  }
  .stats svg, .loves .icon-heart {
      fill: rgba(47, 47, 49, 0) !important;
      stroke:#ba6 !important;
      stroke-width:0.1em !important;
  }
  .loves .icon-heart {
     stroke-width:0.5em !important;
  }
  .comments svg {
     stroke-width:0.35em !important;
  }
  .single-stat.loves.loved-1 svg
  {
      stroke:#fff !important
  }
  
  .single-pen:hover h3:after{
      width:40%;
      transition:all 0.2s
  }
  .pen-actions{
    border:0px !important
  }
  .meta{
    box-shadow:none !important
  }
  /*--------------------popup blogslist------------------*/
.blog1-content{
    width: 1040px;
    margin-top: -80px;
}
.blog1-header{
    width: 1040px;
}
.blog1-body{
    width: 1040px;
    padding: 40px 20px 40px 20px;
}
.blog1-pic{
    float: left;
}
.blog1-detail{
    float: left;
    width: 590px;
}
/*blogs_detail*/
    #detail_blogs{
        padding: 50px;
    }
    #title_blogs1{
        text-align: center;
        background-color: #f9f9f9;
        box-shadow:0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    }
    #pic_blogs{
        text-align: center;
        background-color: #f9f9f9;
        box-shadow:0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    }
    #dt_blogs{
        box-shadow:0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
        background-color: #f9f9f9;
        padding:20px 100px 20px 100px;
    }
/*หน้า sanpapao*/
    #title_otop{
        text-align: center;
        background-color:#ffffff;
        box-shadow:0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
        margin: 0px 0px 10px 0px;
    }
    #table_otop{
        padding: 30px;
    }
/*-------------------------------------------------- pay --------------------------------------------------*/

.bottom_cart{
    float: right;
}
.bottom_cart input{
    padding:10px;
    margin-right:10px;
    width: 250px;
}
.cart_level1{
    background: -webkit-linear-gradient(left, #f8f9fa,#f8f9fa,#f8f9fa, #f8f9fa);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    border-radius: 20px;
}
.cart_level2{
    width: 60%;
    height: 100%;
    padding: 20px 5px 20px 5px;
    background: #9cdebf;
    border-radius: 20px 0px 0px 20px;
}
.cart_level3{
    float:left;
    width: 40%;
    padding: 20px 5px 20px 20px;
    
    border-radius: 0px 20px 20px 0px;
    max-width: 100%;
    margin:0 auto;
}
/*-------------------------welcometo---------------------*/

.center{
    padding: 100px 0px 50px 0px;/*บน ขวา ล่าง ซ้าย*/
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.center p{
    width: 70%;
    font-size: 30px;
    display: block;
    text-align: center;
}
.char{
    font-size: 40px;
    height: 40px;
    animation: an 1s ease-out 1 both;
    display: inline-block;
}

@keyframes an{
    from{
        opacity: 0;
        transform: perspective(500px) translate3d(-35px, -40px, -150px) rotate3d(1, -1, 0, 35deg);
    }
    to{
        opacity: 1;
        transform: perspective(500px) translate3d(0, 0, 0);
    }
}
.mylink{
position: absolute;
z-index: 150;
bottom: 0;
right: 0;
width: 100%;
text-align: right;
padding: .6rem;
}

.mylink a{
font-family: Calibri;
color: #fff;
border-bottom: 1px solid #fff;
opacity: .5;
transition: opacity .3s;
text-decoration: none
}
.mylink a:hover{
opacity: 1
}

/*category_list*/
    #ctgr_content{
        background-color:#ffffff;
    }
    #ctgr_list2{
        text-align: center;
            background-color:#ffffff;
            box-shadow:0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
            margin: 0px 0px 10px 0px;
            padding: 30px;
    }
    #ctgr_list{
        padding:0px 0px 50px 0px;
    }
    #clickup{
        padding: 10px;
        text-align: right;
        clear:both;
    }
    a:link{
        color:#000000;
        text-decoration: none;
    }
    a:hover{
        color:#000000;
        text-decoration: none;
    }
    a:visited {
        color:#000000;
        text-decoration: none;
    }
/*-------------------------register---------------------*/
.cardd {
    margin: -50px 0px 0px 0px;/*บน ขวา ล่าง ซ้าย*/
    padding: 30px 40px;
    border: none;
    box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.2)
}
.blue-text {
    color: #00BCD4
}
.form-control-label {
    margin-bottom: 0
}
input,
textarea,
button {
    padding: 8px 15px;
    border-radius: 5px;
    margin: 5px 0px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    font-size: 18px;
    font-weight: 300
}
input:focus,
textarea:focus {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: 1px solid #00BCD4;
    outline-width: 0;
    font-weight: 400
}
.btn-block {
    text-transform: uppercase;
    font-size: 15px;
    font-weight: 400;
    height: 43px;
    cursor: pointer
}
.btn-block:hover {
    color: #fff;
}
button:focus {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    outline-width: 0;
    
}
/*-------------------------top up---------------------*/
.scroll {
    color: #fff;
    margin-top: 100px;
}
#toTopBtn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 999;
    padding: 10px 15px 10px 15px;
    background-color: hsla(5, 76%, 62%, .8);
}
.js .cd-top--fade-out {
    opacity: .5;
}
.js .cd-top--is-visible {
    visibility: visible;
    opacity: 1;
}
.js .cd-top {
    visibility: hidden;
    opacity: 0;
    transition: opacity .3s, visibility .3s, background-color .3s;
}
.cd-top {
    position: fixed;
    bottom: 20px;
    bottom: var(--cd-back-to-top-margin);
    right: 20px;
    right: var(--cd-back-to-top-margin);
    display: inline-block;
    height: 40px;
    height: var(--cd-back-to-top-size);
    width: 40px;
    width: var(--cd-back-to-top-size);
    box-shadow: 0 0 10px rgba(0, 0, 0, .05) !important;
    background-color: hsla(5, 76%, 62%, .8);
    background-color: hsla(var(--cd-color-3-h), var(--cd-color-3-s), var(--cd-color-3-l), 0.8);
}
/*-------------------------wel_1---------------------*/
.wel_1{
    padding-top: 10px;
    margin: 0 auto;
}
.howto1-content{
    width: 1040px;
    border-radius: 5px;
}
.howto1-header{
    width: 1040px;
}
.howto1-body{
    width: 1040px;
    padding: 40px 20px 40px 20px;
}