@font-face {
    font-family: 'db_helvethaica_x';
    src: url('fonts/db_helvethaica_x.eot');
    src: url('fonts/db_helvethaica_x.eot?#iefix') format('embedded-opentype'), url('fonts/db_helvethaica_x.woff') format('woff'), url('fonts/db_helvethaica_x.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'PSL-Kanda-Bold';
    src: url('fonts/PSL-Kanda-Bold.eot');
    src: url('fonts/PSL-Kanda-Bold.eot?#iefix') format('embedded-opentype'), url('fonts/PSL-Kanda-Bold.woff') format('woff'), url('fonts/PSL-Kanda-Bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'db_helvethaica_x_med';
    src: url('fonts/db_helvethaica_x_med.eot');
    src: url('fonts/db_helvethaica_x_med.eot?#iefix') format('embedded-opentype'), url('fonts/db_helvethaica_x_med.woff') format('woff'), url('fonts/db_helvethaica_x_med.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'DBHelvethaicaX-55Regular';
    src: url('fonts/DBHelvethaicaX-55Regular.eot');
    src: url('fonts/DBHelvethaicaX-55Regular.eot?#iefix') format('embedded-opentype'), url('fonts/DBHelvethaicaX-55Regular.woff') format('woff'), url('fonts/DBHelvethaicaX-55Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

html {
    font-size: 14px;
}

body {
    font-family: 'DBHelvethaicaX-55Regular';
    cursor: default;
    position: relative;
    line-height: normal;
    color: #000000;
    font-size: 16px;
}

img {
    border: 0;
    margin: auto;
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

.h30 {
    clear: both;
    width: 100%;
    height: 3rem;
}

.h20 {
    clear: both;
    width: 100%;
    height: 2rem;
}

.h10 {
    clear: both;
    width: 100%;
    height: 10px;
}

a {
    text-decoration: none;
    color: inherit;
}

a:hover {
    color: inherit;
}

ul {
    padding-left: 0;
    margin-bottom: 0;
}

#back-to-top {
    width: 40px;
    height: 20px;
    position: fixed;
    z-index: 9999;
    bottom: 0;
    left: 50%;
    border-radius: 50px 50px 0 0;
    text-align: center;
    display: none;
    background-color: #d0d0d0;
    filter: alpha(opacity=90);
    padding-top: 0.2rem;
}

#back-to-top:hover {
    opacity: 1;
}

#back-to-top a {
    color: #FFF;
}

button:focus {
    outline: none;
}

#nav-icon3 {
    z-index: 88;
    width: 40px;
    height: 30px;
    position: absolute;
    left: 1rem;
    margin: 15px 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer;
}

#nav-icon3 span {
    display: block;
    position: absolute;
    height: 4px;
    width: 100%;
    background: #000;
    /*border-radius: 5px;*/
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
}

#nav-icon3 span:nth-child(1) {
    top: 0px;
}

#nav-icon3 span:nth-child(2),
#nav-icon3 span:nth-child(3) {
    top: 10px;
}

#nav-icon3 span:nth-child(4) {
    top: 20px;
}

#nav-icon3.open span:nth-child(1) {
    top: 18px;
    width: 0%;
    left: 50%;
}

#nav-icon3.open span:nth-child(2) {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

#nav-icon3.open span:nth-child(3) {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

#nav-icon3.open span:nth-child(4) {
    top: 18px;
    width: 0%;
    left: 50%;
}


/*head--//////////////////////////////////////////////////////////////////////////*/

.headbar-top {
    z-index: 300;
    width: 100%;
    padding: 1rem .5rem;
    background: #FFF;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
}

.hamburgers-box {
    width: 100%;
    text-align: center;
    /* display: flex;
    align-items: center;*/
}

.navbar-brand {
    width: 50%;
    padding: 0;
    text-align: center;
    margin: auto;
}

.navbar-brand img {
    width: 50px;
}

.navbar-logo-mobile {
    text-align: center;
    width: 100%;
    padding: 6% 0;
    background: #FFF;
    display: block;
}

.navbar-logo-mobile img {
    width: auto;
}

.navbar-collapse ul li {
    padding: 0 15px;
    font-size: 25px;
    /*text-transform: uppercase;*/
}

.navbar-collapse ul li a {
    width: 100%;
    color: #000;
    padding: 10px 0;
    position: relative;
}

.navbar-collapse ul li p {
    margin-bottom: 0;
}

.navbar-collapse ul li.active a,
.navbar-collapse ul li a:hover,
.menubar-top ul li.active a,
.menubar-top ul li a:hover {
    color: #00ab4e;
}

.btn-language {
    position: absolute;
    right: 0;
    top: 1rem;
    border-left: 1px solid #acacac;
    padding-left: .7rem;
    font-weight: 700;
}

.btn-language .btn-secondary {
    color: #000 !important;
    background-color: transparent !important;
    border-color: transparent !important;
}

.btn-language .btn {
    vertical-align: middle;
    border: none;
    padding: 0;
    font-size: 28px;
    line-height: normal;
    box-shadow: none !important;
}

.btn-language .dropdown-menu {
    left: auto;
    right: 0;
    min-width: auto;
    font-size: 22px;
}

.btn-language .btn:hover,
.btn-language .btn:focus {
    outline: none !important;
}

.btn-language .dropdown-toggle::after {
    margin-left: 0;
    vertical-align: inherit;
    border-top: 0.2em solid;
    border-right: 0.2em solid transparent;
    border-bottom: 0;
    border-left: 0.2em solid transparent;
}

.search-box {
    position: absolute;
    top: .4rem;
    right: 5rem;
    font-size: 30px;
    cursor: pointer;
    z-index: 55;
}

.search-box:after {
    content: "";
    background: #000;
    width: 1px;
    height: 12px;
    position: absolute;
    top: 28px;
    right: 0px;
    transform: rotate(135deg);
}

.search-box input {
    color: #000;
    font-size: 16px;
    background: #FFF;
    width: 25px;
    height: 25px;
    padding: 5px;
    border: solid 1px #000;
    outline: none;
    border-radius: 35px;
    transition: width 0.5s;
    transition: all 0.5s;
}

.search-box input::placeholder {
    color: #efefef;
    opacity: 1;
}

.search-box input::-ms-placeholder {
    color: #efefef;
}

.search-box input::-ms-input-placeholder {
    color: #efefef;
}

.search-box input:focus,
.search-box input:valid {
    width: 250px;
    height: 34px;
}

.contact-head {
    line-height: .5;
    margin: 1rem auto 1.5rem;
}

.contact-head,
.social-head {
    padding: 0 15px;
}

.contact-head p {
    margin-bottom: 0;
    font-size: 25px;
}

.contact-head h1 {
    margin-bottom: 0;
    font-size: 100px;
    line-height: 1;
}


/*slide-banner--//////////////////////////////////////////////////////////////////////////*/

#slide-zone .owl-dots {
    display: block !important;
    position: absolute;
    bottom: 1rem;
    left: 50%;
    z-index: 99;
    transform: translate(-50%, 0);
}

#slide-zone .owl-carousel button.owl-dot {
    width: 30px;
    height: 5px;
    margin: 0 4px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 5px;
}

#slide-zone .owl-carousel button.owl-dot.active {
    background: rgba(255, 255, 255, 1);
}

#slide-zone .banner-slide {
    width: 100%;
}

#slide-zone .banner-slide img {
    width: 100%;
}


/*content--//////////////////////////////////////////////////////////////////////////*/

.text-bold-helvethaica {
    font-family: 'db_helvethaica_x_med';
}

.text-bold-kanda {
    font-family: 'PSL-Kanda-Bold';
}

.text-green {
    color: #00ab4e;
}

.text-red {
    color: #ff0000;
}

.set-box {
    background: url("../images/bg-set.png") top center no-repeat;
    background-size: cover !important;
    padding: 7% 0;
}

.set-box {
    line-height: .5;
}

.set-box h1 {
    margin-bottom: 0;
    font-size: 55px;
    line-height: 1;
}

.set-box p {
    margin-bottom: 0;
    font-size: 25px;
}

.set-box span {
    font-size: 33px;
    font-family: 'db_helvethaica_x_med';
}

.priceoli-box .col-2 {
    flex: 0 0 20%;
    max-width: 20%;
}

.priceoli-box {
    background: #d9f2e5;
    padding: 7% 0;
}


/*.icon-oli{
    margin-bottom: 2rem;
}*/

.priceoli-box .icon-oli h1 {
    margin-bottom: 0;
    font-size: 30px;
    line-height: normal;
}

.priceoli-box p {
    font-size: 25px;
    margin-bottom: 1rem;
}

.priceoli-box .icon-oli img {
    width: 100%;
    transition: all 0.5s;
}

.icon-oli:hover img {
    transform: scale(1.05) translateY(-5px);
}

.icon-1 {
    color: #707679;
}

.icon-2 {
    color: #ec6c2c;
}

.icon-3 {
    color: #a6c846;
}

.icon-4 {
    color: #fecd22;
}

.icon-5 {
    color: #00afb2;
    margin-bottom: 0;
}

.priceoli-box h1 {
    margin-bottom: 0;
    font-size: 50px;
}

.priceoli-box img {
    width: 3em;
}

.content-box2 {
    padding: 10% 0;
    background: #ebfbf2;
}

.title-box {
    font-size: 50px;
}

.product-service {
    width: 99%;
    margin: auto;
}

.product-service.product-service2 {
    border: 1px solid #48bb53;
    overflow: hidden;
}

.img-product {
    width: 100%;
    overflow: hidden;
}

.img-product img {
    width: 100%;
    transition: all 0.5s;
}

.product-service:hover img {
    transform: scale(1.05);
}

.product-service h1 {
    margin: 0 auto;
    padding: 7% 0;
    background: #c8f0da;
    font-size: 20px;
}

.content-box3 {
    padding: 10% 0;
    background: #c8f0da;
}

.chance-box {
    width: 100%;
    overflow: hidden;
    position: relative;
    margin-bottom: 1.5rem;
}

.chance-box img {
    width: 100%;
    transition: all 0.5s;
}

.chance-box:hover img {
    transform: scale(1.05);
}

.detail-chance {
    width: 65%;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 55;
    transform: translate(-50%, -50%);
}

.detail-chance h1 {
    margin-bottom: 0;
    border: 1px solid #FFF;
    padding: 20px 5px;
    color: #FFF;
}

.content-box4 {
    padding: 10% 0;
}

.news-box {
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid #adadad;
}

.icon-size {
    font-size: 18px;
    color: #c8f0da;
}

.news-box.active .icon-size,
.news-box:hover .icon-size {
    color: #48bb53;
}

.news-detail {
    font-size: 20px;
    color: #434343;
}

.news-detail p {
    margin-bottom: 0;
}

.news-detail h1 {
    margin-bottom: 0;
    font-size: 24px;
    font-weight: 700;
}

.news-box.active h1,
.news-box:hover h1 {
    text-decoration: underline;
}

.content-box5 {
    background: #c8f0da;
    padding: 10% 0;
}

.title-box p {
    margin-bottom: 0;
    font-size: 23px;
    font-family: 'db_helvethaica_x';
}

.img-joinus {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.img-joinus img {
    width: 100%;
    transition: all 0.5s;
}

.detail-joinus {
    width: 70%;
    position: absolute;
    bottom: .8rem;
    color: #FFF;
    left: 50%;
    transform: translate(-50%, 0);
}

.detail-joinus h1 {
    margin-bottom: 0;
    font-size: 24px;
}

.detail-joinus p {
    margin-bottom: 0;
}

.search-map {
    color: #FFF;
    font-size: 24px;
    padding: 15px;
    border-radius: 10px;
    background-color: rgb(154, 202, 60);
    box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.35);
    width: 80%;
    overflow: hidden;
    margin: 2rem auto 0;
}


/*footer--//////////////////////////////////////////////////////////////////////////*/

.footer {
    background: #ebebeb;
    color: #000;
}

.footer a:hover {
    color: #b8b8b8;
}

.tabs-footer ul {
    list-style: none;
}

.tabs-footer ul li {
    padding: 5px 0;
    font-size: 20px;
}

.tabs-footer ul li a:hover {
    color: #48bb53;
}

.tabs-footer .card {
    border: none;
    border-radius: 0;
}

.tabs-footer .card-header:first-child {
    border-radius: 0;
}

.tabs-footer .card-header {
    padding: 0;
    margin-bottom: 0;
    background-color: #ebebeb;
    border-bottom: none;
}

.tabs-footer h2 {
    font-size: 100%;
    margin-bottom: 0;
    border-radius: 0;
}

.tabs-footer .btn-link {
    color: #000000;
    width: 100%;
    text-align: left;
    padding: 5px 15px;
    font-size: 23px;
    border-radius: 0;
    position: relative;
    font-weight: 700;
    border-bottom: 1px solid #2a2a2a;
}

.tabs-footer .btn-link:hover {
    text-decoration: inherit;
}

.tabs-footer .card-body {
    padding: 5px 15px;
}

.tabs-footer .icon-tabs {
    font-size: 16px;
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translate(0, -50%);
    vertical-align: inherit;
}

.social-footer {
    padding: 10px 15px;
}

.social-footer h1 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 1rem;
}

.social-footer img {
    transition: all 0.5s;
}

.social-footer img:hover {
    transform: translateY(-5px);
}

.call-center {
    line-height: 1;
    font-size: 25px;
    padding: 10px 0;
}

.call-center p {
    margin-bottom: 0;
}

.call-center h1 {
    margin-bottom: 0;
    line-height: .8;
    font-size: 80px;
}

.copyright-box {
    padding: 5% 0;
    border-top: 1px solid #2a2a2a;
}

.logo-footer {
    text-align: center;
}

.condition-copyright {
    color: #b8b8b8;
    text-align: center;
    font-size: 20px;
}

.condition-copyright span {
    margin: .5rem auto;
    display: block;
}

.condition-copyright a {
    padding: 0 5px;
    transition: all 0.5s;
}

.condition-copyright a:hover {
    color: #000;
}


/*************************DEV********************************/


/*************************PD********************************/

.flex-aligncenter {
    display: flex;
    align-items: center;
}

.all-pd .name-pd {
    font-size: 1.6rem;
    margin: 15px auto;
}

.all-pd .title-pd {
    font-size: 3rem;
    margin: 20px auto;
    text-align: center;
}

.all-pd .text-pd {
    font-size: 1.4rem;
    margin: 15px auto;
    text-align: center;
}

.all-pd .name-list-pd {
    padding: 10px 0;
    font-size: 1.4rem;
    color: #383838;
}

.all-pd .all-list-pd {
    margin: 15px auto 20px auto;
    border-bottom: solid 1px #e5e5e5;
    padding: 20px 0;
}

.all-pd .box-img-pd {
    margin-bottom: 10px;
}

.box-img-pd img {
    transition: all 0.5s;
}

.box-img-pd:hover img {
    transform: scale(1.05);
}


/*****************************************************/

.subtitle-oil {
    font-size: 2.4rem;
}

.name-oil {
    font-size: 1.4rem;
}

.text-oil {
    font-size: 1.4rem;
}

.oil-social img {
    transition: all 0.5s;
}

.oil-social img:hover {
    transform: translateY(-5px);
}

.oil-social a:hover {
    color: #06C;
}

.text-oil-title {
    font-size: 1.6rem;
    margin: 8px auto 5px auto;
}

.box-img-news-oil {
    margin: auto auto 10px auto;
}

.list-news-oil {
    font-size: 1.4rem;
    margin: 15px auto;
}

.name-news-oil {
    margin-bottom: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.title-news-oil {
    margin-bottom: 5px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.2;
    height: calc(1.4rem * 1.2 * 2);
}

.date-news-oil {
    font-size: 1.2rem;
}

.bt-more-oil {
    font-size: 1.8rem;
}

.bt-more-oil .svg-inline--fa {
    color: #535252;
    padding-top: 5px;
}

.bt-more-oil:hover {
    text-decoration: underline;
}

.product-other img {
    max-height: 95px;
    transition: all 0.5s;
}

.product-other img:hover {
    transform: translateY(-5px);
}

.box-banner img {
    width: 100%;
}


/********************Maxnitron*******************************/

.title-maxnitron {
    font-size: 3.4rem;
    padding-top: 20px;
}


/*************************END DEV P********************************/


/**************************DEV A*******************************/


/*other-product*/

html {
    font-size: 14px;
    position: relative;
}

.font-style1 {
    font-size: 1.4rem !important;
}

.font-style4 {
    font-size: 1.6rem !important;
}

.font-style2 {
    font-size: 1.8rem !important;
}

.font-style3 {
    font-size: 2.3rem !important;
}

.other-page {
    padding: 5% 0;
}

.hisclick ul {
    list-style: none;
}

.hisclick ul li {
    display: inline-block;
    color: #999999;
    font-size: 1.2rem;
}

.hisclick ul li a {
    padding: 0 8px;
}

.hisclick ul li a:hover {
    color: #000;
}

.banner-otherpage {
    margin-top: 1rem;
}

.title-otherpage {
    margin: 2rem auto 2rem;
}

.title-otherpage h1 {
    font-size: 2.7rem;
    margin-bottom: 0;
    line-height: 1;
}

.title-otherpage p {
    margin-bottom: 0;
}

.cardbox {
    margin-bottom: 2rem;
    border-bottom: 1px solid #cccccc;
    padding-bottom: 2rem;
}

.cardbox.cardbox-noneborder {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0
}

.title-table {
    text-align: center;
}

.title-table p {
    margin-bottom: 0;
}

.img-otherpage {
    text-align: center;
    margin: 1rem auto;
}

.img-otherpage img {
    width: auto;
}

.title-table a:hover {
    color: #009933;
}

.menu-card {
    padding: 2rem 0;
    margin-bottom: 2rem;
    border-bottom: 1px solid #cccccc;
}

.menu-card ul {
    list-style: none;
    display: flex;
    align-items: center;
}

.menu-card ul li {
    width: auto;
    margin: auto;
    text-align: center;
    color: #999999;
}

.menu-card ul li.active a,
.menu-card ul li a:hover {
    color: #00ab4e;
}

.menu-card.menu-maxnitron ul li.active a,
.menu-card.menu-maxnitron ul li a:hover {
    color: #000;
}

.menu-card.menu-card-corporate ul li.active a,
.menu-card.menu-card-corporate ul li a:hover {
    color: #cc9966;
}

.menu-card.menu-coffeworld ul li.active a,
.menu-card.menu-coffeworld ul li a:hover {
    color: #fad856;
}

.menu-card.menu-newyork ul li.active a,
.menu-card.menu-newyork ul li a:hover {
    color: #cc0033;
}

.title-table .fa-check-circle {
    color: #009f49;
    font-size: 2.8rem;
}

.title-table table {
    width: 100%;
}

.title-table table tr td:first-child {
    display: inline-flex;
}

.title-table table tr td {
    padding-bottom: 1rem;
}

.title-table table tr td:last-child {
    padding-left: 1rem;
}

.title-table table tr td img {
    width: auto;
}

.title-table .fa-chevron-right {
    font-size: .8rem;
    transition: all 0.5s;
}

.title-table table tr td:hover .fa-chevron-right {
    transform: translateX(5px);
}

.img-table {
    border: 1px solid #e1e1e1;
    padding: 10px;
}

.title-table table tr td .img-table img {
    width: auto;
}

.title-table .fa-chevron-left {
    font-size: .8rem;
    transition: all 0.5s;
}

.title-table table tr td:hover .fa-chevron-left {
    transform: translateX(-5px);
}

.title-table table tr td .social-other img {
    width: 3rem;
    transition: all 0.5s;
}

.title-table table tr td .social-other img:hover {
    transform: translateY(-5px);
}

.cardbox-inmobile .card {
    border: none;
    border-radius: 0;
}

.cardbox-inmobile .card-header {
    border: none;
    border-radius: 0;
    border-bottom: 1px solid #cccccc;
    background-color: transparent;
    padding: 0;
    position: relative;
}

.cardbox-inmobile .card-header .fa-chevron-down {
    position: absolute;
    right: 2rem;
    bottom: .5rem;
    font-size: 1.5rem;
    color: #585858;
    opacity: 1;
    transition: all 0.5s;
}


/*.cardbox-inmobile .card-header.active .fa-chevron-down{
    transform: rotateX(180deg);
}*/

.cardbox-inmobile .card-body {
    padding: 1rem 0;
}

.cardbox-inmobile .card-body .title-table {
    text-align: left;
}

.cardbox-inmobile .card-header .title-table {
    text-align: left;
}


/*search-map#6*/

.pagesearch-map {
    text-align: center;
}

.map {
    width: 100%;
    height: 300px;
}

.show-detailsearch {
    padding: 0 10px;
    position: relative;
    height: 290px;
    overflow-y: scroll;
    overflow-x: hidden;
    width: 100%;
}

.mapsearch-box {
    border: 1px solid #f1f1f1;
}

.form-search {
    width: 65%;
    background: #FFF;
    border: none;
    border-bottom: 1px solid #282828;
    padding: 4px;
    outline-offset: 0px;
    -webkit-appearance: none;
}

.show-detailsearch .form-inline {
    align-items: center;
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 55;
    left: 0;
    padding: 10px 0;
    background: #FFF;
}

.form-search:focus {
    outline: none !important;
    outline-offset: none !important;
}

.show-detailsearch a {
    padding-left: 10px;
    color: #999999;
}

.show-detailsearch img {
    margin: 0;
}

.show-detailsearch p {
    margin-bottom: 0;
}

.line-color {
    margin: 1rem auto;
    width: 100%;
    border-bottom: 1px solid #ccc;
    height: 1px;
}

.img-map img {
    width: 100%;
}

.show-detailsearch .text-box1 {
    font-weight: 700;
}

.show-detailsearch .text-box2 {
    margin-top: 2rem;
    font-weight: 700;
}

.show-detailsearch .row {
    margin-bottom: 2rem;
}


/*otherpage#5*/

.title-otherpage img,
.title-otherpage span {
    display: block;
}

.menu-card.menu-card-cream ul li.active a,
.menu-card.menu-card-cream ul li a:hover {
    color: #ff9900;
}

.title-otherpage.title-otherpage-maxnitron img {
    width: 40%;
}

.title-table-cream img {
    width: 3rem;
    margin: 0 10px;
    /* border: 1px solid #999;
    padding: 5px;*/
}

.social-other img {
    width: 4rem;
    transition: all 0.5s;
}

.img-cream {
    width: 100%;
    overflow: hidden;
}

.img-cream img {
    width: 100%;
    transition: all 0.5s;
}

.menu-card-oil ul li.active a,
.menu-card-oil ul li a:hover {
    color: #a1c617;
}


/*coffeworld#1*/

.img-otherpage img {
    width: 100%;
}

.menu-coffeworld .dropdown-toggle::after {
    display: none;
}

.menu-coffeworld .btn-secondary {
    color: #000;
    background-color: white;
    border-color: #cacaca;
}

.menu-coffeworld .btn {
    font-size: 1.6rem;
    padding: 0 10px;
}

.menu-coffeworld .dropdown-menu {
    width: 93%;
    min-width: auto;
    font-size: 1.4rem;
}

.menu-coffeworld .dropdown-menu:focus {
    outline: none;
}

.menu-coffeworld .btn-secondary:not(:disabled):not(.disabled):active:focus,
.menu-coffeworld .btn-secondary:not(:disabled):not(.disabled).active:focus,
.show>.btn-secondary.dropdown-toggle:focus {
    box-shadow: none !important;
}

.menu-coffeworld .btn-secondary:not(:disabled):not(.disabled):active,
.menu-coffeworld .btn-secondary:not(:disabled):not(.disabled).active,
.show.menu-coffeworld>.btn-secondary.dropdown-toggle {
    color: #000 !important;
    background-color: #FFF !important;
    border-color: #cacaca !important;
}

.icon-color {
    color: #d5d5d5;
    font-size: 15px;
}

.maxmart-service-box img {
    width: 4rem;
}

.maxmart-service-box {
    margin: 2rem auto;
}

.maxmart-service-box img,
.maxmart-service-box span {
    display: inline-block;
}

.maxmart-service-box span {
    margin-left: 1rem;
}

.title-menufood,
.logo-menufood {
    text-align: center;
}

.logo-menufood {
    padding: 0 5%;
    text-align: center;
}

.logo-menufood img {
    width: auto
}

.title-menufood {
    margin: 1rem auto;
}

.title-otherpage.title-punthai p {
    font-size: 1.7rem;
}

.img-maxcard1 {
    width: 30%;
    border-radius: 10px;
    overflow: hidden;
    margin-right: 10px
}

.img-maxcard1 img {
    width: 100%;
}

.img-maxcard2 {
    border-left: 2px solid #d4d4d4;
    padding-left: 10px;
}

.img-maxcard2 img {
    padding-bottom: 7px;
}

.maxcrad-table table {
    width: 100%;
}

.maxcrad-table table tr td {
    padding: 5px;
}

.maxcrad-table span {
    color: #99ca3c;
}

.maxcrad-table img {
    margin: 0;
    width: 5em;
}

.maxcrad-table p {
    font-size: 1.2rem;
}

.fa-check-circle {
    color: #009f49;
}

.franchise-oil h1 {
    margin: 1rem auto .5rem;
    border-bottom: 1px solid #d2d2d2;
    padding: 5px 0;
    position: relative;
    font-size: 1.8rem;
    background: url("../images/arrow-busi1.png") right center no-repeat;
}

.franchise-oil p {
    margin: 0 auto;
}

.franchise-box p {
    margin-bottom: 0;
}

.list-busi {
    list-style: none;
}

.list-busi li {
    padding: 5px 0;
}

.list-busi-indetail {
    list-style: none;
    padding-left: 1rem;
}

.list-busi-indetail li {
    padding: 5px 0;
}

.busi-franchise .icon-color {
    font-size: 2.5rem;
}

.busi-franchise p.font-style1 {
    font-size: 1.4rem;
    margin-bottom: .3rem;
}

.busi-franchise p.font-style1:hover {
    color: #009933;
}


/*.busi-franchise p{font-size: 1.2rem;}*/

.rotate-img {
    width: auto !important;
    transform: rotateY(180deg);
    transition: all .5s;
    margin: 0;
}

.busi-franchise p.font-style1:hover img {
    filter: invert(44%) sepia(87%) saturate(5288%) hue-rotate(130deg) brightness(95%) contrast(101%);
    transform: translateX(-5px) rotateY(180deg);
}

.title-table p:hover img {
    transform: translateX(-5px) rotateY(180deg);
    ;
    filter: invert(44%) sepia(87%) saturate(5288%) hue-rotate(130deg) brightness(95%) contrast(101%);
}

.title-table p img.rotate-img {
    margin: 0;
}

.detail-salestore h1 {
    margin: 0;
    font-size: 2.5rem;
}

.detail-salestore p {
    margin: 1rem auto;
}

.busi-icon {
    cursor: pointer;
}

.busi-icon.salestore-icon {
    margin-bottom: 2rem;
}

.busi-icon.salestore-icon p {
    margin: 0 auto;
    color: #009933;
}

.busi-icon.salestore-icon p img {
    width: auto;
    transition: all 0.5s;
    filter: invert(32%) sepia(99%) saturate(1155%) hue-rotate(116deg) brightness(94%) contrast(102%);
}

.timelinestep ul {
    width: 100%;
    list-style: none;
    display: flex;
    margin-bottom: 1rem;
    align-items: center;
}

.timelinestep ul li {
    width: 40%;
    margin: auto;
}

.timelinestep ul li p {
    font-size: 1.4rem;
}

.timelinestep ul li:first-child {
    width: 20%;
}

.timelinestep ul li img {
    margin: 0;
    width: auto;
}

.timelinestep {
    position: relative;
}

.line-timeline {
    width: 1px;
    min-height: 420px;
    border-left: 1px solid #000;
    position: absolute;
    top: 50%;
    left: 10%;
    transform: translate(-50%, -50%);
    z-index: -1;
}

.followus-box ul {
    list-style: none;
    display: flex;
    align-items: center;
}

.followus-box ul li {
    padding: 0 .5rem;
}

.followus-box ul li:first-child {
    border-right: 1px solid #999;
}

.busi-franchise {
    padding: 1rem 0;
    width: 100%;
}

.busi-franchise .card,
.busi-franchise .card-header {
    border: none;
    background: none;
}

.busi-franchise .card-header:first-child {
    border-radius: 0;
}

.busi-franchise .card-header {
    background-color: transparent;
}

.busi-franchise .card-header .detail-salestore {
    background: url("../images/arrow-busi2.png") right center no-repeat;
}

.busi-franchise .card-header .detail-salestore.collapsed {
    background: url("../images/arrow-busi3.png") right center no-repeat;
}

.busi-franchise .collapse {
    background-color: rgba(0, 0, 0, 0.03);
}

.busi-franchise .form-input {
    width: 100%;
    border: none;
    box-shadow: none;
}

.busi-franchise .form-input:focus {
    outline: none;
}

.busi-franchise .detail-box-input {
    padding: 10px 15px;
    background: #FFF;
    border-radius: 5px;
}

.detail-box-input .title-detail {
    color: #999;
}

.detail-box-input {
    margin: 1rem 0;
}

.detail-box-input .form-input:disabled::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: #000;
}

.detail-box-input.detail-box-input2 {
    background-image: url("../images/map.png");
    background-position: right 10px top 10px;
    background-repeat: no-repeat;
    background-size: 1em;
}

.form-input::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: #000;
}

.form-input::-moz-placeholder {
    /* Firefox 19+ */
    color: #000;
}

.form-input:-ms-input-placeholder {
    /* IE 10+ */
    color: #000;
}

.form-input:-moz-placeholder {
    /* Firefox 18- */
    color: #000000;
}

.box-input-bt {
    border-radius: 20px;
    padding: 5px;
    text-align: center;
    color: #FFF;
    background: #009e3d;
    width: 100%;
    box-shadow: none;
    border: none;
}

.menu-service .title-otherpage {
    margin: 2rem auto 0;
}

.menu-service {
    padding: 1rem 0;
}

.menu-service ul {
    list-style: none;
    display: flex;
    align-items: center;
    margin-top: .6rem;
}

.menu-service ul li {
    width: auto;
    margin: 1rem auto;
    text-align: left;
    color: #999999;
}

.menu-service ul li a.active,
.menu-service ul li a:hover {
    color: #00ab4e;
}

.select-list .btn-secondary {
    border: 1px solid #999;
    background-color: #FFF;
    color: #000;
    width: 100%;
    font-size: 1.4rem;
    background-image: url("../images/arrow-busi3.png");
    background-position: right 5px center;
    background-repeat: no-repeat;
    background-size: .8rem;
}

.select-list .dropdown-menu {
    width: 100%;
    height: 150px;
    overflow-y: scroll;
}

.select-list .dropdown-menu::-webkit-scrollbar-track {
    /*-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);*/
    border-radius: 0px;
    background-color: #F5F5F5;
}

.select-list .dropdown-menu::-webkit-scrollbar {
    width: 4px;
    background-color: #F5F5F5;
}

.select-list .dropdown-menu::-webkit-scrollbar-thumb {
    border-radius: 5px;
    /*-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);*/
    background-color: #C3C3C3;
}

.select-list .btn-secondary:not(:disabled):not(.disabled):active:focus,
.select-list .btn-secondary:not(:disabled):not(.disabled).active:focus,
.show>.select-list .btn-secondary.dropdown-toggle:focus {
    box-shadow: none;
}

.select-list .btn-secondary:not(:disabled):not(.disabled):active,
.select-list .btn-secondary:not(:disabled):not(.disabled).active,
.show>.select-list .btn-secondary.dropdown-toggle {
    color: #000;
    background-color: #FFF;
}

.select-list .btn:hover,
.btn:focus {
    text-decoration: none;
    box-shadow: none;
    outline: none;
}

.areabox {
    cursor: pointer;
    margin-bottom: 1rem;
}

.img-area {
    width: 100%;
    overflow: hidden;
}

.img-area img {
    width: 100%;
    transition: all 0.5s;
}

.img-area iframe {
    width: 100%;
    height: 100%;
}

.img-csr.view-vdo iframe {
    width: 100%;
    height: 100%;
}

.areabox:hover img {
    transform: scale(1.05);
}

.detailarea {
    margin: 2rem auto 1rem;
}

.detailarea p {
    margin-bottom: 0;
    color: #999;
    font-size: 1.2rem;
}

.detailarea h1 {
    margin-bottom: 1.5rem;
    font-size: 1.4rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.2;
    height: calc(1.4rem * 1.18 * 3);
}

.readmore-bt-area {
    margin-top: 1rem;
}

.busi-icon img {
    width: 100%;
    transition: all 0.5s;
}

.busi-icon:hover img {
    transform: translateY(-5px);
}

.busi-icon:hover p img {
    transform: translateX(5px);
}


/*END-25-05-2020*/

.gray-color {
    color: #999;
}

.social-other img:hover {
    transform: translateY(-5px);
}

.other-page.register-page {
    position: relative;
    padding-bottom: 0%;
}

.popup-show {
    /*    bottom: 0;
    left: 0;
    position: absolute;*/
    width: 100%;
    background: #FFF;
    padding: 3rem 0;
    text-align: center;
    z-index: 99;
    box-shadow: 0px -10px 18px 0px rgba(1, 1, 1, 0.2);
}

.popup-show span {
    padding: 5px 15px;
    border-radius: 20px;
    color: #FFF;
    background: #999;
    width: 200px;
    margin-left: 1rem;
    transition: all 0.5s;
    border: 1px solid #999;
}

.popup-show span:hover {
    background: #40af4c;
    color: #FFF;
}

.popup-show .fa-check-circle {
    font-size: 3rem;
    vertical-align: middle;
    color: #999;
}

.guidepartners-box {
    background: #f0f0f0;
    padding: 7% 0 0;
}

.guidebox {
    font-size: 1.4rem;
    padding: 1rem;
    background: #FFF;
    border-radius: 10px;
    margin-bottom: 1rem;
    box-shadow: 0 0 5px rgba(0, 0, 0, .2);
}

.guidebox ul {
    list-style: none;
    display: flex;
    align-items: center;
}


/*.guidebox ul li{
    padding-right: 10px;
}*/

.guidebox ul li p {
    margin-bottom: 0;
}

.guidebox img {
    transition: all 0.5s;
    width: 4rem;
}

.guidebox:hover img {
    transform: translateY(-5px);
}


/*Edit-2-06-2020*/

.chk-condition input[type=checkbox] {
    visibility: hidden;
    color: #999;
    margin-right: 2rem;
    vertical-align: text-top;
}

.chk-condition input[type=checkbox]::before {
    visibility: visible;
    display: inline-block;
    letter-spacing: 0;
    content: "\f058";
    font-size: 1.8rem;
    font-weight: 900;
    font-family: 'Font Awesome 5 Free';
}

.chk-condition input[type=checkbox]:checked::before {
    content: "\f058";
    letter-spacing: 0;
    font-family: 'Font Awesome 5 Free';
    color: #40af4c;
}


/*csrpage*/

.img-csr {
    width: 100%;
    overflow: hidden;
}

.img-csr img {
    width: 100%;
    transition: all .5s;
}


/*END-2-06-2020*/

.cardbox-inmobile .card {
    border: none;
    border-radius: 0;
}

.cardbox-inmobile .card-header {
    border: none;
    border-radius: 0;
    border-bottom: 1px solid #cccccc;
    background-color: transparent;
    padding: 0;
    position: relative;
}

.cardbox-inmobile .card-header .fa-chevron-down {
    position: absolute;
    right: .5rem;
    bottom: .5rem;
    font-size: 1.5rem;
    color: #585858;
    opacity: 1;
    transition: all 0.5s;
    /*  display: none;*/
}

.cardbox-inmobile .card-header .fa-chevron-up {
    position: absolute;
    right: .5rem;
    bottom: .5rem;
    font-size: 1.5rem;
    color: #585858;
    opacity: 1;
    transition: all 0.5s;
    /*  display: none;*/
}


/*.cardbox-inmobile .card-header .title-table {background: url("../businessopportunity/images/arrow-busi3.png") right center no-repeat;}*/


/*.cardbox-inmobile .card-header .title-table.collapsed{background: url("../businessopportunity/images/arrow-busi2.png") no-repeat right center;}*/

.cardbox-inmobile .card-body {
    padding: 1rem 0;
}

.cardbox-inmobile .card-body .title-table {
    text-align: left;
}

.cardbox-inmobile .card-header .title-table {
    text-align: left;
}

.img-oil img {
    width: auto;
}

.followus-box img {
    display: inline-block;
    vertical-align: middle;
}

.followus-box span {
    display: inline-block;
    vertical-align: middle;
}


/**************************END DEV A*******************************/

@media (max-width: 767px) {
    body {
        max-width: 100% !important;
    }
    .navbar-collapse {
        position: fixed;
        width: 100%;
        background: #ebebeb;
        height: 100% !important;
        max-height: none !important;
        top: 0;
        display: block;
        left: -250px;
        margin: 0 !important;
        z-index: 55;
        overflow-y: scroll;
        /*box-shadow: 5px 0px 5px 0px rgba(0, 0, 0, 0.35);*/
    }
    .navbar-collapse.in {
        left: 0 !important;
    }
    .navbar-collapse.show {
        display: block;
        left: 0 !important;
    }
    .all-container {
        width: 100%;
    }
    .all-container.-collapse {
        /*margin-left: 250px;*/
    }
    .headbar-top,
    .navbar-collapse,
    .navbar-collapse.collapsing,
    .all-container.all-container.all-container {
        transition: all 0.5s !important;
    }
    .headbar-top.-collapse {
        /*margin-left: 250px;*/
        width: 100%;
    }
    /**********************************************/
    html {
        font-size: 14px;
    }
    .mb-h-100 {
        height: 100%;
    }
    .all-pd .text-pd {
        font-size: 1.24rem;
    }
    /***********************07/05/2020***********************/
    .product-other img {
        max-height: 45px;
    }
    .maxnitron-img {
        margin: auto -15px;
    }
}

@media (min-width: 768px) {
    /*****************DEV A***************************/
    html {
        font-size: 16px;
    }
    .other-page {
        padding: 2% 0;
    }
    .title-table {
        text-align: left;
    }
    .img-otherpage {
        text-align: left;
    }
    .menu-card ul li {
        padding: 0 15px;
        margin: 0;
    }
    .title-table.title-table-fleet {
        margin-top: 2rem;
    }
    .title-table table tr td .social-other img {
        width: auto;
    }
    .title-table table tr td img {
        width: 1.5rem;
    }
}


/*///////////////////////////////////////////////////////////////////////////media///////////////////////////////////////////////////////////////////////////*/


/*livechat*/

.livechat-btn {
    width: 150px;
    height: 30px;
    position: fixed;
    right: 0;
    bottom: 0;
    padding: 5px 15px;
    color: #FFF;
    z-index: 555;
    border-radius: 20px 10px 0 0;
    background: #ed1c24;
    cursor: pointer;
}

.livechat-btn img,
.livechat-box img {
    filter: brightness(0) invert(1);
}

.livechat-btn p.text-top {
    position: absolute;
    left: 1.8rem;
    top: 1.4rem;
}

.livechat-btn p.text-bottom {
    position: absolute;
    right: 1.8rem;
    bottom: 1.3rem;
}

.livechat-box {
    border-radius: 10px;
    width: 240px;
    height: 345px;
    overflow: hidden;
    background: #f3f3f3;
    position: fixed;
    z-index: 555;
    bottom: 5%;
    right: 0%;
    transform: translate(-10%, 0%);
    box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
    display: none;
}

.show-talking {
    height: 325px;
    overflow-y: scroll;
}

.show-talking::-webkit-scrollbar-track {
    /*-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);*/
    border-radius: 0px;
    background-color: #F5F5F5;
}

.show-talking::-webkit-scrollbar {
    width: 4px;
    background-color: #F5F5F5;
}

.show-talking::-webkit-scrollbar-thumb {
    border-radius: 5px;
    /*-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);*/
    background-color: #C3C3C3;
}

.livechat-box h1 {
    padding: 8px 15px;
    color: #FFF;
    background: -webkit-linear-gradient(left, rgba(151, 202, 60, 1) 0%, rgba(14, 174, 76, 1) 100%);
    background: -o-linear-gradient(left, rgba(151, 202, 60, 1) 0%, rgba(14, 174, 76, 1) 100%);
    background: linear-gradient(to right, rgba(151, 202, 60, 1) 0%, rgba(14, 174, 76, 1) 100%);
}

.openchat1,
.openchat2 {
    display: none;
}

.chatbox-group {
    width: 90%;
    margin: 1rem auto;
}

.form-chatbox {
    width: 100%;
    margin: auto;
    padding: 5px 15px;
    border: none;
    border-radius: 5px;
    background: #FFF;
    color: #999;
}

.sendbox-group {
    width: 90%;
    margin: auto;
}

.send-chatbox {
    cursor: pointer;
    width: 100%;
    color: #FFF;
    text-align: center;
    margin: 0rem auto 0;
    padding: 5px;
    border: none;
    border-radius: 5px;
    background: #0eae4c;
    transition: all 0.5s;
}

.send-chatbox:hover {
    background: #99ca3c;
}

.btn-chatbox2 {
    position: absolute;
    top: .5rem;
    right: .5rem;
    color: #FFF;
    z-index: 5;
    padding: 5px 15px;
    background: none;
    border: none;
    cursor: pointer;
}

.form-talkbar {
    width: 75%;
    padding: 5px 5px;
    border: none;
    border-bottom: 1px solid #c5c5c5;
    background: #FFF;
    color: #c5c5c5;
    margin: 0 .5rem 0 1rem;
}

.form-talkbar:focus {
    outline: none;
}

.position-relative {
    position: relative;
}

.talkbar {
    width: 100%;
    position: sticky;
    bottom: 0;
    background: #FFF;
    padding: 15px 0;
    display: flex;
    align-items: center;
}

.usertalk {
    margin-bottom: 10px;
}

.usertalk h1 {
    font-size: .9rem;
    color: #6d6d6d;
    background: none;
    padding: 0 21px;
    margin-bottom: .5rem !important;
}

.show-talking {
    padding-top: 15px;
}

.talkbar .fa-arrow-circle-up {
    color: #0eae4c;
    font-size: 2rem;
    cursor: pointer;
}

.talkbar .fa-smile {
    color: #c5c5c5;
    margin-right: 5px;
}

.usertalk {
    padding: 15px;
}

.talking-box {
    font-size: 1rem;
    color: #ababab;
}

.talking-box span {
    background: #FFF;
    padding: 5px 10px;
    margin-bottom: 0;
    border-radius: 5px;
    box-shadow: 0 2px 3px rgba(0, 0, 0, .1);
    position: relative;
    color: #000;
    display: inline-block;
}

.talking-box .bg-green {
    background: #3cb847;
    color: #FFF;
}

.talking-box .fa-user-circle {
    font-size: 1.8rem;
    color: #999;
}

.talking-box .gray-color {
    color: #999;
}

.talking-box img.left-arrowimg {
    position: absolute;
    left: -.5rem;
    top: 50%;
    transform: translate(0, -50%);
    filter: none;
}

.right-arrowimg {
    right: -.5rem;
    top: 50%;
    position: absolute;
    transform: rotateY(180deg) translate(0, -50%);
}


/*aboutus*/

.img-box {
    width: 100%;
    overflow: hidden;
}

.img-box img {
    width: 100%;
    transition: all 0.4s;
}

.detail-salestore.mis-fontnumber h1 {
    font-size: 9rem;
    margin: 0;
    line-height: 1;
}

.bord-person {
    text-align: center;
    margin-bottom: 30px;
}

.bord-person h1 {
    margin: 1rem auto 0;
    line-height: 1;
    font-size: 1.4rem;
}

.bord-person img {
    width: 100%;
}

.accordion-bordperson .collapse {
    background-color: transparent;
}

.img-boxmaping {
    position: relative;
    z-index: 5;
}

.detail-maping {
    background: #eff0f0;
    border: 1px solid #cccccc;
    padding: 1.5rem;
}

.detail-maping {
    margin: 2rem auto 0;
}

.list-maping {
    list-style: none;
    margin-bottom: 1rem;
}

.list-maping li .fa-circle {
    font-size: .4rem;
    vertical-align: middle;
}

.download-setbox .card-header {
    padding: 0;
}

.download-setbox .card-header h1 {
    /*background: url("../businessopportunity/images/arrow-busi2.png") right  center no-repeat;*/
    position: relative;
    cursor: pointer;
}

.download-setbox .card-header h1 .fa-chevron-down,
.download-setbox .card-header h1 .fa-chevron-up {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(0, -50%);
    color: #585858;
}

.download-setbox .card-header.boxreadmore h1 .fa-chevron-down {
    right: 35%;
}

.download-setbox .card-header.boxreadmore h1 .fa-chevron-up {
    right: 40%;
}

.career-fullbox .download-setbox .card-header.boxreadmore h1 .fa-chevron-down {
    right: 35%;
}

.career-fullbox .download-setbox .card-header.boxreadmore h1 .fa-chevron-up {
    right: 40%;
}

.card-header.boxreadmore h1 {
    cursor: pointer;
    background: none;
}

.card-header.boxreadmore h1 span {
    display: block;
}

.download-setbox .collapse {
    background-color: transparent;
}

.card-download-setbox {
    background: #f0f0f0;
    padding: 1.5rem 0 .5rem;
    margin-top: 1.5rem;
}

.list-ethicsperson {
    list-style: none;
}

.list-ethicsperson li {
    padding: 4px 5px;
}

.detail-salestore img {
    margin: 0;
}

.epot-box {
    text-align: center;
    margin-bottom: 1.5rem;
}

.detail-epotbox {
    margin: 1rem auto;
}

.detail-epotbox h1 {
    color: #4c4d4f;
    font-size: 1.6rem;
}

.detail-epotbox .goto-map {
    width: 30%;
    margin: 1rem auto;
    padding: 4px;
    border-radius: 20px;
    text-align: center;
    border: 1px solid #000;
    transition: all 0.5s;
}

.detail-epotbox .goto-map:hover {
    color: #FFF;
    background: #00ab4e;
    border-color: #00ab4e;
}

.detail-epotbox .goto-map .fa-directions {
    vertical-align: middle;
}

.epotoil-accordion .collapse {
    background-color: transparent;
}

.number-runing {
    animation-duration: 1s;
    animation-delay: 0s;
}

.station-runing {
    line-height: .5;
    margin-bottom: 1.5rem;
}

.station-runing p {
    font-weight: 700;
}

.station-runing h1 {
    font-size: 5rem;
    line-height: 1;
}

.show-detailsearch::-webkit-scrollbar-track {
    /*-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);*/
    border-radius: 0px;
    background-color: #F5F5F5;
}

.show-detailsearch::-webkit-scrollbar {
    width: 4px;
    background-color: #F5F5F5;
}

.show-detailsearch::-webkit-scrollbar-thumb {
    border-radius: 5px;
    /*-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);*/
    background-color: #C3C3C3;
}

.detail-station {
    padding-left: 1.5rem;
}

.transport-timing table td {
    padding: 8px 0px;
}

.station-servicebox {
    margin-bottom: 1.5rem;
}

.vdo-transport iframe {
    width: 100%;
    height: 250px;
}

.map.map-stationservice {
    height: 250px;
}

.station-detailsearc .img-map img {
    width: auto;
}

.list-ethicsperson img.ic-correct {
    width: 1.5rem;
}

.icon-box img {
    width: 5rem;
}

.icon-box p img {
    width: auto;
}

.list-ethicsperson img.icon-gas {
    width: 65%;
}

.list-ethicsperson img.icon-gas2 {
    width: 100%;
}


/*sustainable*/

.busi-franchise.sub-policies .collapse {
    background-color: #FFF;
}

.busi-franchise.sub-policies .card-body {
    padding: 0;
}

.busi-franchise.sub-policies .card-header {
    padding: .5rem 0;
}

.busi-franchise.sub-policies .card-header h1 {
    background: url(../images/arrow-busi2.png) right center no-repeat;
}

.timeline-box {
    position: relative;
}

.timeline-box img {
    width: 100%;
}

.timeline-box .linecolor-timeline {
    position: absolute;
    width: 2px;
    height: 79%;
    border-left: 1px solid #666666;
    top: 50%;
    left: 16.5%;
    transform: translate(0, -50%);
}

.timeline-box .row {
    margin: 1rem auto;
}

.table-boxsub {
    margin: 1rem auto;
    overflow-x: auto;
}

.bg-title {
    background: #e7e7e7;
    border-right: 1px solid #FFF;
}

.bg-centerdetail {
    background: #f0f0f0;
}

.vertical-alignstyle {
    vertical-align: bottom;
}

.detail-table {
    padding: 0 8px;
}

.detail-table img {
    width: 100%;
}

.table-boxsub .table-insub {
    border-top: 1px solid #FFF;
}

.table-boxsub .table-insub td {
    border-right: 1px solid #FFF;
}

.table-boxsub td .fa-circle {
    color: #c7c7c7;
    font-size: .7rem;
}

.table-boxsub .table-insub td:last-child {
    border-right: none;
}


/*.circle-insub td:nth-child(1), .circle-insub td:nth-child(4), .circle-insub td:nth-child(2), .circle-insub td:nth-child(6){padding-left: 5px;}
.circle-insub td:nth-child(7){padding-left: 10px;}
.circle-insub td:nth-child(3){padding-left: 13px;}*/

.download-otherapp {
    border: 1px solid #c7c7c7;
    border-radius: 10px;
    padding: 7% 0 0;
}

.download-otherapp .list-ethicsperson {
    width: 100%;
    margin-top: 15px;
    border-top: 1px solid #c7c7c7;
}

.download-otherapp .list-ethicsperson li {
    width: 50%;
    border-right: 1px solid #c7c7c7;
}

.download-otherapp .list-ethicsperson li:last-child {
    border-right: none;
}

.download-otherapp .list-ethicsperson li img {
    transition: all 0.5s;
}

.download-otherapp .list-ethicsperson li a:hover {
    color: #00ab4e;
}

.download-otherapp .list-ethicsperson li a:hover img {
    filter: invert(35%) sepia(77%) saturate(2142%) hue-rotate(129deg) brightness(99%) contrast(102%);
}

.download-otherapp {
    cursor: pointer;
}

.table-boxsub table td {
    padding: 1rem .5rem;
}

.table-boxsub.table-boxsub2 table td {
    vertical-align: initial;
}

.table-boxsub.table-boxsub2 .title-head-table td {
    vertical-align: inherit;
}

.img-box.img-boxsub {
    text-align: center;
    margin: 2rem auto;
}

.busi-icon p {
    margin-top: 1.5rem;
}

.detail-comunity .col-4,
.detail-comunity .col-8 {
    margin: 15px 0;
}

.list-comunity li {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}


/*เพิ่ม css 07-07-2020*/

#filtermap.modal.show .modal-dialog {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0%);
}

.search-filtermap {
    margin-bottom: 2rem;
}

.form-searcharea {
    border: 1px solid #d7d7d7;
    border-radius: 5px;
    width: 98% !important;
    margin: 1.5rem auto;
}

.form-searcharea .btn-light {
    background-color: transparent;
}

.form-searcharea:focus {
    outline: none !important;
}

.send-btn {
    border-radius: 7px;
    color: #FFF;
    padding: 7px;
    transition: all 0.5s;
    background: #13944a;
    border: 1px solid #13944a;
}

.send-btn:hover {
    color: #13944a;
    background: #FFF;
}

.products-filtermap {
    height: auto;
    width: 100%;
    overflow-x: scroll;
    padding-bottom: 10px;
}

.products-filtermap::-webkit-scrollbar-track {
    background-color: #F5F5F5;
}

.products-filtermap::-webkit-scrollbar {
    height: 5px;
    background-color: #FFF;
}

.products-filtermap::-webkit-scrollbar-thumb {
    background-color: #00c045;
}

.busi-franchise .hidandshow-store {
    background-color: transparent;
}

.showsearch {
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid #ECECEC;
}

.pagination ul {
    width: 100%;
    list-style: none;
}

.pagination ul li {
    width: auto;
    margin: auto;
    display: inline-block;
}

.pagination a {
    color: black;
    padding: 8px 10px;
    text-decoration: none;
}

.pagination a.active {
    background-color: #4CAF50;
    color: white;
}

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

.pagination .icon-size {
    font-size: 16px;
    color: #181818;
    opacity: 1;
}


/*เพิ่ม css 07-07-2020 -end*/


/*เพิ่ม css 09-07-2020*/

.box-imgitem iframe {
    width: 100%;
}

#thumbs .item video,
#thumbs .item img {
    height: 90px;
}

#slideshow .item iframe,
#slideshow .item video {
    height: 280px;
}

.owl-nav {
    position: absolute;
    width: 100%;
    top: 50%;
    z-index: -1;
    transform: translate(0, -50%);
}

.owl-nav .owl-prev .fa-chevron-left {
    font-size: 18px;
    position: absolute;
    left: -12px;
    top: 0;
    transform: translate(0, 0%);
    color: #00ab4e;
}

.owl-nav .owl-next .fa-chevron-right {
    font-size: 18px;
    position: absolute;
    right: -12px;
    top: 0;
    transform: translate(0, 0%);
    color: #00ab4e;
}

.owl-nav .owl-next.disabled {
    display: none;
}


/*เพิ่ม css 09-07-2020 -end*/


/*เพิ่ม css 15-07-2020*/

.choose-pro {
    border: none;
    box-shadow: none;
    background: none;
    cursor: pointer;
}

.choose-pro img {
    border-radius: 50%;
    padding: 5px;
    border: 2px solid #e3e3e3;
}

.choose-pro:hover img,
.choose-pro.active img {
    border-color: #a7c846;
}


/*เพิ่ม css 15-07-2020-end*/

.img-box-maxnitron {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.viewmore-maxnitron {
    position: absolute;
    z-index: 9;
    padding: 4px 5px;
    color: #FFF;
    text-align: center;
    border: 1px solid #FFF;
    background: rgb(0 171 78 / 60%);
    right: 9px;
    bottom: 2px;
}

.viewmore-maxnitron .fa-chevron-right {
    transition: all 0.5s;
    vertical-align: middle;
}

.viewmore-maxnitron:hover .fa-chevron-right {
    transform: translateX(5px);
}

.line-social-btn,
.facebook-social-btn,
.youtube-social-btn {
    text-align: center;
}

.line-social-btn img {
    transition: all 0.4s;
}

.line-social-btn:hover {
    color: #00B900;
}

.line-social-btn:hover img {
    filter: invert(44%) sepia(71%) saturate(2945%) hue-rotate(90deg) brightness(103%) contrast(107%);
    transform: translateY(-5px);
}

.facebook-social-btn img {
    transition: all 0.4s;
}

.facebook-social-btn:hover {
    color: #1877f2;
}

.facebook-social-btn:hover img {
    filter: invert(34%) sepia(32%) saturate(6130%) hue-rotate(204deg) brightness(101%) contrast(91%);
    transform: translateY(-5px);
}

.youtube-social-btn img {
    transition: all 0.4s;
}

.youtube-social-btn:hover {
    color: #FF0000;
}

.youtube-social-btn:hover img {
    filter: invert(18%) sepia(87%) saturate(6256%) hue-rotate(360deg) brightness(96%) contrast(121%);
    transform: translateY(-5px);
}

.radiocheck {
    display: block;
    position: relative;
    padding-left: 20px;
    margin-bottom: 0;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


/* Hide the browser's default radio button */

.radiocheck input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}


/* Create a custom radio button */

.checkmark {
    position: absolute;
    top: 5px;
    left: 0;
    height: 15px;
    width: 15px;
    background-color: #FFF;
    border-radius: 50%;
    border: 1px solid #13944a;
}


/* On mouse-over, add a grey background color */

.radiocheck:hover input~.checkmark {
    border: 1px solid #13944a;
}


/* When the radio button is checked, add a blue background */

.radiocheck input:checked~.checkmark {
    border: 1px solid #13944a;
}


/* Create the indicator (the dot/circle - hidden when not checked) */

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}


/* Show the indicator (dot/circle) when checked */

.radiocheck input:checked~.checkmark:after {
    display: block;
}


/* Style the indicator (dot/circle) */

.radiocheck .checkmark:after {
    top: 3px;
    left: 3px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #13944a;
}


/*27-07-2020*/

#showpopup .modal-content {
    height: 400px;
}

#showpopup button.close {
    text-align: center;
    padding: 15px;
    width: 60px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 99;
    color: #888888;
}

#showpopup button.close:hover {
    color: #009e3d;
}

#showpopup .modal-dialog {
    margin: 10rem auto;
    height: auto;
}

.vdo-box {
    width: 100%;
    height: 280px;
    border-radius: 10px;
    overflow: hidden;
}

.detail-salestore.detail-career p {
    padding: 5px;
    color: #FFF;
    width: 50%;
    margin: .7rem auto;
    border-radius: 20px;
    background: #009e3d;
    border: 2px solid #009e3d;
}

.detail-salestore.detail-career p:hover {
    background: #FFF;
    color: #009e3d;
    border-color: #009e3d;
}

.careerus-box {
    border: 2px solid #b4b4b4;
    padding: 10px;
    margin-bottom: 1.4rem;
    transition: all 0.5s;
}

.careerus-box:hover {
    border-color: #99ca3c;
    box-shadow: 0 0 8px rgba(0, 0, 0, .3);
}

.careerus-box img {
    transition: all 0.5s;
}

.careerus-box:hover img {
    transform: scale(1.03);
    box-shadow: 0 0 8px rgba(0, 0, 0, .3);
}

.careerus-box h1 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: normal;
    height: calc(1.8rem * 1.2 * 2);
    margin-bottom: 0;
}

.careerus-box .col-xl-9 {
    padding-left: 15px;
}

.slide-growtogether {
    width: 100%;
    overflow: hidden;
    margin: auto;
}

.banner-together {
    cursor: pointer;
    background: #f6f6f6;
    border: 1px solid #969696;
}

.owl-carousel .owl-item .banner-together img {
    width: auto;
    margin: 0;
    display: initial;
}

.owl-growtogether .item {
    margin: 15px;
}

.owl-growtogether.owl-carousel.owl-drag .owl-item .item {
    transform: scale(.9);
    transition: ease-in-out .8s;
}

.owl-growtogether.owl-carousel.owl-drag .owl-item.active .item {
    transform: scale(1);
    transition: ease-in-out .8s;
}

.owl-carousel.owl-growtogether .owl-stage-outer {
    overflow: inherit;
}

.owl-growtogether.owl-carousel.owl-drag .owl-item.active .banner-together {
    background: #FFF;
}


/*27-07-2020-end*/


/*Small devices (landscape phones, 576px and up)*/

@media (min-width: 576px) {
    .navbar-brand img {
        width: 80px;
    }
    #nav-icon3 {
        margin: 25px 0;
    }
    .priceoli-box p {
        padding: 0 10%;
    }
    .news-detail h1 {
        font-size: 22px;
    }
    .search-map {
        padding: 20px;
        width: 60%;
    }
    .detail-joinus h1 {
        font-size: 40px;
    }
    .detail-joinus {
        font-size: 24px;
        bottom: 1.8rem;
        left: 48%;
    }
}

.navbar-collapse ul li {
    padding: 0 15px;
    font-size: 25px;
    /* text-transform: uppercase; */
}

.select-list .dropdown-menu {
    width: 100%;
    height: 180px;
    overflow-y: scroll;
    min-width: 100%;
    padding: 0;
}

.select-list .dropdown-item {
    font-size: 1.2rem !important;
    padding: .5rem;
    white-space: inherit;
}

.select-list .dropdown-item:focus,
.select-list .dropdown-item.active,
.select-list .dropdown-item:active {
    background: #eee;
}

.textheader {
    font-size: 28px;
    font-family: 'PSL-Kanda-Bold';
}

.textboder {
    padding: 10px 0px;
    border-bottom: 1px #e0e0e0 solid;
}

.textboder:hover {
    border-bottom: 1px #28a745 solid !important;
}

.btn-menu {
    text-align: left;
    font-size: 28px;
    font-family: 'PSL-Kanda-Bold';
    width: 100%;
    cursor: pointer
}

.btn-menu:hover {
    color: #28a745 !important;
}

.button {
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 1.4rem !important;
    margin: 4px 2px;
    cursor: pointer;
}

.button1 {
    background-color: #77cda0;
}
/* Green */
/* สไตล์ของปุ่ม Dropdown */
.dropdown {
    position: relative;
    display: inline-block;
}

/* สไตล์ของรายการ Dropdown */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    /* ปรับตำแหน่งให้อยู่ด้านขวาของปุ่ม */
    left: 100%; /* หรือใช้ right: -100%; เพื่อให้เมนูอยู่ด้านซ้าย */
    top: 0; /* เพื่อให้เมนูเริ่มต้นที่ระดับเดียวกับปุ่ม */
}

    /* สไตล์ของลิงก์ในรายการ */
    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }

        /* สไตล์เมื่อ hover บนลิงก์ */
        .dropdown-content a:hover {
            background-color: #f1f1f1;
        }

/* แสดงรายการ Dropdown เมื่อ hover บนปุ่ม */
.dropdown:hover .dropdown-content {
    display: block;
}

/* CSS สำหรับวิดีโอที่ responsive */
.responsive-video {
    width: 60%;
    height: auto;
    max-width: 800px;
}

/* สร้าง responsive layout สำหรับขนาดหน้าจอต่างๆ */
@media (max-width: 768px) {
    .responsive-video {
        max-width: 600px;
    }
}

@media (max-width: 480px) {
    .responsive-video {
        max-width: 100%;
        width: 100%;
    }
}