@charset "utf-8";

/* CSS Default */


/*------------------------------------*
SETUP Color Default
*------------------------------------*/

body {
    /*font-family: 'Kanit', sans-serif;
  
  color: #000;
  background: linear-gradient(90deg, #f5e3c7 1px, transparent 1%) center, linear-gradient(#ffffff 1px, transparent 1%) center, #F2F2F2;
  background-size: 3px 3px;*/
}


/*------------------------------------*
MainHeader
*------------------------------------*/

#MainHeader .boxLogo {
    display: block;
    margin: 0.15rem auto;
    text-align: left;
}

#MainHeader #FormLogin .btn-sm {
    padding: .35rem 1.5rem;
    border: none !important;
}

#MainHeader #FormLogin .btn.btn-sm.login {
    border: none;
    border-radius: 32px;
    background: #155f43;
}

.btn.btn-sm.btngreen {
    border: none;
    width: 100%;
    border-radius: 32px;
    background: #03c700;
}

.btn.btn-sm.btnyellow {
    /* width: 90%; */
    border-radius: 32px;
    background-color: #FED703;
    background: linear-gradient(to bottom, rgba(248, 207, 83, 1) 0%, rgba(248, 239, 167, 1) 23%, rgba(204, 152, 48, 1) 76%, rgba(204, 152, 48, 1) 100%);
    color: black;
    font-weight: 500;
}

.notice>.marquee-wrap {
    background-color: #d1f2ff;
    padding: 0rem 0rem 0rem 6.2rem;
    font-size: 14px;
    color: #000;
    overflow: hidden;
    width: 100%;
}

.notice .marquee {
    height: 36px;
    overflow: hidden;
    border: solid 1px #25aae1;
}


/*---------------------------------
TEXT RUN
---------------------------------*/

.notice {
    width: 100%;
    display: block;
    height: 36px;
    line-height: 36px;
    overflow: hidden;
    position: relative;
    background: #313131;
}

.notice span {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100px;
    color: #fff;
    font-size: 14px;
    text-align: center;
    background: #0e99d2;
    background: -moz-linear-gradient(top, #0e99d2 4%, #1198d0 5%, #0b85bd 100%);
    background: -webkit-linear-gradient(top, #0e99d2 4%, #1198d0 5%, #0b85bd 100%);
    background: linear-gradient(to bottom, #0e99d2 0%, #1198d0 23%, #0b85bd 76%, #1478ce 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#0e99d2', endColorstr='#1198d0', GradientType=0);
    border-right: solid 1px #0688da;
}


/*------------------------------------*
NavMenu
*------------------------------------*/

#NavMenu .nav-pc {}

#NavMenu a sup {
    background: red;
    color: #fff;
    padding: 0rem 0.25rem;
    font-size: 0.25rem;
    position: relative;
    height: 10px;
    line-height: 10px;
    margin-left: 2px;
    float: none !important;
    left: 0 !important;
}


/*------------------------------------*
MainContent
*------------------------------------*/

#MainContent {
    /*background-color:#fbfbfb;*/
}

#MainContent .box3homebanner {}

#MainContent .box3homebanner .boximg {
    display: block;
    background-color: #820808;
    width: 100%;
    border-radius: 15px;
    border: 1px dashed #f8e07f;
    margin: 0.5rem auto;
}

#MainContent .box3homebanner .boximg img {
    border-radius: 15px;
    width: 100%;
    height: 198px;
}


/*------------------------------------*
MainFooter
*------------------------------------*/

#MainFooter {
    background-color: transparent;
}

#MainFooter a {
    text-decoration: none;
    color: #fff !important;
    font-weight: 300;
}

#MainFooter a:hover {
    color: #fff !important;
}

#MainFooter .linecolor {
    height: 2px;
}

#MainFooter .textpc {
    font-weight: 400;
    text-align: center;
    font-size: 0.8rem;
    padding-top: 0.5rem;
}

#MainFooter .copyright {
    background-color: transparent;
    text-align: center;
    padding: 0.25rem;
}

#MainFooter .copyright div {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-size: 0.8rem;
    font-weight: 400;
}


/*----------------------------------
Footer Menu Mobile
-----------------------------------*/


/*------------ Rich Menu ---------*/

#richmenu {
    position: fixed;
    bottom: -100%;
    width: 100%;
    height: auto;
    padding: 2px;
    background-color: #9a0000;
    -webkit-transition: bottom 0.5s;
    transition: bottom 0.5s;
}

#richmenu .grid-container {
    display: grid;
    grid-template-columns: 33.33% 33.33% 33.33%;
    grid-gap: 0px;
    padding: 2px;
}

#richmenu .grid-container>a {
    text-align: center;
    color: #fff;
    border: solid 1px #fff;
}

#richmenu .grid-container>a:nth-child(2) {
    border-left: none;
    border-right: none;
}

#richmenu .grid-icon {
    padding: 0.8rem;
}

#richmenu .grid-icon img {
    width: 88%;
    max-width: 120px;
}

#richmenu .grid-text {
    font-size: 90%;
    font-weight: 300;
}

#richmenu_contect {
    position: fixed;
    z-index: 9999;
    bottom: 56px;
    width: 100%;
    height: auto;
    padding: 2px;
    background-color: #292828;
    -webkit-transition: bottom 0.5s;
    transition: bottom 0.5s;
    display: none;
}

#richmenu_contect.active {
    display: block;
}

#richmenu_contect .grid-container {
    display: grid;
    grid-template-columns: 100%;
    grid-gap: 0px;
    padding: 2px;
}

#richmenu_contect .grid-container>a {
    text-align: center;
    color: #fff;
    border: solid 1px #8a8a8a;
}

#richmenu_contect .grid-container>a:nth-child(2) {
    border-top: none;
    border-bottom: none;
}

#richmenu_contect .grid-icon {
    padding: 0.8rem;
}

#richmenu_contect .grid-icon img {
    width: 88%;
    max-width: 120px;
}

#richmenu_contect .grid-text {
    font-size: 2rem;
    font-weight: 300;
}

#MobileFooter {
    position: fixed;
    bottom: 0rem;
    width: 100%;
    height: 60px;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
    z-index: 888;
    -webkit-transition: bottom 0.5s;
    transition: bottom 0.5s;
    background: rgba(5 116 181, 1);
    background: -moz-linear-gradient(top, rgba(5 116 181, 1) 0%, rgba(0 132 183, 1) 50%, rgba(37 170 225, 1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(5 116 181, 1)), color-stop(50%, rgba(0 132 183, 1)), color-stop(100%, rgba(37 170 225, 1)));
    background: -webkit-linear-gradient(top, rgba(5 116 181, 1) 0%, rgba(0 132 183, 1) 50%, rgba(37 170 225, 1) 100%);
    background: -o-linear-gradient(top, rgba(5 116 181, 1) 0%, rgba(0 132 183, 1) 50%, rgba(37 170 225, 1) 100%);
    background: -ms-linear-gradient(top, rgba(5 116 181, 1) 0%, rgba(0 132 183, 1) 50%, rgba(37 170 225, 1) 100%);
    background: linear-gradient(to bottom, rgb(5 116 181) 0%, rgb(0 132 183) 50%, rgb(37 170 225) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#027fb7', endColorstr='#027fb7', GradientType=0);
}

#MobileFooter .grid-container {
    display: grid;
    grid-template-columns: 20% 20% 20% 20% 20%;
    /*grid-gap: 2px;
  padding: 2px;*/
}

#MobileFooter .grid-container>a {
    text-align: center;
    color: #fff;
}

#MobileFooter .grid-icon img {
    height: 35px;
}

#MobileFooter .grid-icon i {
    font-size: 5.5vw;
}

#MobileFooter .grid-text {
    padding-top: 0rem;
    font-size: 80%;
    font-weight: 200;
}


/*---------- END Footer Menu Mobile -----------*/