@import url('https://fonts.googleapis.com/css?family=Kanit:300,400,700');


     /*ค่าส่วน body*/
     body {
         font-family: -apple-system, BlinkMacSystemFont, "kanit", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
         font-size: 16px;
         color: #0D0D0D;
         background-color: white;
         margin: 0px;
         padding: 0px;
     }

     img {
         max-width: 100%;
     }

     p {
         font-weight: 300;
     }


     /*เว้นระยะความสูงหัวข้อ ข้อความ*/
     .min_height_space_title {
         min-height: 65px;
     }

     /*เว้นระยะความสูง ท้ายข้อความ*/
     .min_height_space {
         min-height: 70px;
     }

     .btn-mutiline{
        white-space:normal !important;
            max-width:300px;
        }

     .card-deck {
         padding: 12px;
     }

     .card-deck .card {
         padding: 7px;
     }

     .main_shadow_fixed {
         box-shadow: 0 9px 0px 0px white, 0 -9px 0px 0px white, 12px 0 15px -4px rgba(150, 150, 150, 0.3), -12px 0 15px -4px rgba(150, 150, 150, 0.3);
     }

     .banner_shadow_fixed {
         border: none;
         -webkit-box-shadow: 0rem 0.5rem 1.6rem 0 rgba(0, 0, 0, 0.1);
         -moz-box-shadow: 0rem 0.5rem 1.6rem 0 rgba(0, 0, 0, 0.1);
         box-shadow: 0rem 0.5rem 1.6rem 0 rgba(0, 0, 0, 0.1);
     }

     .card_shadow_fixed {
         border: none;
         -webkit-box-shadow: 1rem 1rem 2.6rem 0 rgba(0, 0, 0, 0.1);
         -moz-box-shadow: 1rem 1rem 2.6rem 0 rgba(0, 0, 0, 0.1);
         box-shadow: 1rem 1rem 2.6rem 0 rgba(0, 0, 0, 0.1);
     }

     .font_title_01 {
         font-family: 'Kanit', sans-serif;
         font-size: 26px;
         font-size: 2.6rem;
         margin-bottom: -5px;
         color: #3A68A4;
         text-shadow: 0.5rem 0.5rem 0.6rem 0 rgba(0, 0, 0, 0.1);
     }

     .font_title_02 {
         font-size: 14px;
         font-size: 1.4rem;
         color: #3A68A4;
         margin-bottom: 10px;
     }

     .font_title_03 {
         font-size: 1px;
         font-size: 1.1rem;
         color: #3A68A4;
         margin-bottom: 5px;
     }

     .font_title_04 {
         font-size: 18px;
         font-size: 1.8rem;
         color: #3A68A4;
         margin-bottom: 5px;
     }

     .font_sub_title_01 {
         font-family: 'Kanit', sans-serif;
         font-size: 13px;
         font-size: 1.3rem;
         color: #444444;
         position: relative;
     }

     .font_sub_title_02 {
         font-size: 15px;
         font-size: 1.5rem;
         color: #3A68A4;
     }

     .font_footer_01 {
         font-family: 'Arial', sans-serif;
         font-size: 14px;
         color: #444444;
     }

     .font_footer_01 a {
         font-family: 'Arial', sans-serif;
         font-size: 14px;
         color: #F2F2F2;
         ;
         padding-bottom: 10px;
     }

     .font_footer_01 ul li {
         text-decoration: none;
         list-style-type: none;
     }

     .font_footer_02 {
         color: #f2f2f2;
     }

     .font_link {
         text-align: center;
     }

     .font_link a {
         color: #444444;
     }

     .font_justify {
         text-align: justify;
     }

     .font_center {
         text-align: center;
     }

     .font_weight ul {
         font-weight: 300;
     }

     .font_weight li ol {
         font-weight: 300;
     }

     .bg_footer {
         text-align: center;
         padding: .5rem 1.5rem;
         background: url(../main/images_main/bg_footer.jpg) repeat-x;
     }

     .bg_box_info {
        background: url(../main/images_main/backgrounds/box-info.jpg);
    }
    
     .bg_footer a {
         color: #F2F2F2;
     }

     .bg_address {
         background-color: #327AD9;
     }

     .bg_seminar{
        background: url(../seminar/images_seminar/head_seminar.jpg);
     }

     .footer_space {
         padding: 25px 0px 25px 0px;
     }

     .footer_space ul {
         margin: 0px;
         padding: 0px;
     }

     .medium-paragraph {
         font-size: 17px;
         line-height: 32px;
     }




     /***** General style, all sections *****/

     .section-container {
         margin: 0 auto;
     }

     .section-container-gray-bg {
         background: #f8f8f8;
     }

     .section-container-image-bg,
     .section-container-image-bg h2,
     .section-container-image-bg h3 {
         color: #327AD9;
     }

     .section-container-image-bg .divider-1 span {
         border-color: #fff;
     }

     .section-description {
         margin-top: 60px;
         padding-bottom: 10px;
     }

     .section-description p {
         margin-top: 20px;
         padding: 0 120px;
     }

     .section-container-image-bg .section-description p {
         opacity: 0.8;
     }

     .section-bottom-button {
         padding-top: 60px;
     }


     /***** Divider *****/

     .divider-1 span {
         display: inline-block;
         width: 200px;
         border-bottom: 1px dotted #aaa;
     }


     /***** Top menu *****/

     .navbar {
         background: #327AD9;
         -o-transition: all .8s;
         -moz-transition: all .8s;
         -webkit-transition: all .8s;
         -ms-transition: all .8s;
         transition: all .8s;
         backface-visibility: hidden;
         color: #cccccc !important;
     }

     .navbar.navbar-no-bg {
         background: rgba(50, 122, 217, 0.0);
         transition: all .8s;
     }
     
     .navbar-dark .navbar-nav {
         font-size: 16px;
         color: #f2f2f2;
         text-transform: uppercase;
     }

     .navbar-dark .navbar-nav .nav-link {
         font-size: 16px !important;
         border: 0;
         color: #222222;

     }

     .navbar-dark .navbar-nav .nav-link:hover {
         color: #ffffff;
     }

     .navbar-dark .navbar-nav .nav-link:focus {
         color: #ffffff;
         outline: 0;
     }

     .navbar-expand-md .navbar-nav .nav-link {
         padding-left: 1rem;
         padding-right: 1rem;
     }

     .navbar-brand {
         width: 100px;
         height: 70px;
         background: url(../main/images_main/logo.png) left center no-repeat;
         border: 0;
         text-indent: -99999px;
     }

     .dropdown-item.active, .dropdown-item:active {
        color: #fff;
        text-decoration: none;
        background-color: #327AD9;
    }

     /***** Top content *****/

     .inner-bg {
         padding: 210px 0;
     }

     .top-content-scroll {
         position: absolute;
         bottom: 60px;
         width: 200px;
         margin: auto;
         display: block;
         cursor: pointer;
         padding-bottom: 40px;
         left: 0;
         right: 0;
         text-transform: uppercase;
         text-align: center;
     }

     .arrow {
         margin-top: 20px;
         display: block;
         color: white;
         position: relative;
         -moz-animation: bounce 3s infinite;
         -webkit-animation: bounce 3s infinite;
         animation: bounce 3s infinite;
     }

     @-moz-keyframes bounce {

         0%,
         20%,
         50%,
         80%,
         100% {
             -moz-transform: translateY(0);
             transform: translateY(0);
         }

         40% {
             -moz-transform: translateY(-30px);
             transform: translateY(-30px);
         }

         60% {
             -moz-transform: translateY(-15px);
             transform: translateY(-15px);
         }
     }

     @-webkit-keyframes bounce {

         0%,
         20%,
         50%,
         80%,
         100% {
             -webkit-transform: translateY(0);
             transform: translateY(0);
         }

         40% {
             -webkit-transform: translateY(-30px);
             transform: translateY(-30px);
         }

         60% {
             -webkit-transform: translateY(-15px);
             transform: translateY(-15px);
         }
     }

     @keyframes bounce {

         0%,
         20%,
         50%,
         80%,
         100% {
             -moz-transform: translateY(0);
             -ms-transform: translateY(0);
             -webkit-transform: translateY(0);
             transform: translateY(0);
         }

         40% {
             -moz-transform: translateY(-30px);
             -ms-transform: translateY(-30px);
             -webkit-transform: translateY(-30px);
             transform: translateY(-30px);
         }

         60% {
             -moz-transform: translateY(-15px);
             -ms-transform: translateY(-15px);
             -webkit-transform: translateY(-15px);
             transform: translateY(-15px);
         }
     }

     .fadeInDown {
         animation-name: fadeInDown;
     }

     .top-content-about {
         padding: 100px 0px;
     }

     .top-content .text {
         color: #fff;
         text-align: center;
     }

     .top-content .text h1 {
         margin-top: 25px;
         color: #144a8a;

     }

     .top-content .description {
         margin: 30px 0 10px 0;
     }

     .top-content .description p {
         opacity: 0.8;
     }

    /***** Abount MAP *****/

    .map-responsive{
        overflow:hidden;
        padding-bottom:50%;
        position:relative;
        height:0;
    }
    .map-responsive iframe{
        left:0;
        top:0;
        height:100%;
        width:100%;
        position:absolute;
    }


     /***** Section 1 *****/

     .section-1-box {
         padding-top: 30px;
         text-align: left;
     }

     .section-1-box .section-1-box-icon {
         width: 80px;
         height: 80px;
         margin: 0 auto;
         font-size: 40px;
         color: #fff;
         line-height: 80px;
         text-align: center;
         -moz-border-radius: 50%;
         -webkit-border-radius: 50%;
         border-radius: 50%;
         -o-transition: all .6s;
         -moz-transition: all .6s;
         -webkit-transition: all .6s;
         -ms-transition: all .6s;
         transition: all .6s;
     }

     .section-1-box h3 {
         margin-top: 0;
         padding: 0 0 10px 0;
     }


     /***** Section 2 *****/

     .section-2-box {
         margin-top: 30px;
         text-align: left;
     }

     .section-2-box h3 {
         margin-top: 0;
     }

     .section-2-box-text .medium-paragraph {
         margin-top: 20px;
         margin-bottom: 20px;
     }


     /*-----Section 3----*/

     .section-4 {
         margin-top: 0;
         padding: 10px 0px;
     }

     .section-4 h3 {
         margin-top: 0;
         padding: 0 0 10px 0;
     }

     .section-4-box a {
         width: 60px;
         height: 60px;
         margin: 0 auto;
         font-size: 28px;
         color: #444444;
         line-height: 60px;
         text-align: center;
         -moz-border-radius: 50%;
         -webkit-border-radius: 50%;
         border-radius: 50%;
     }

     /*----------หน้าล๊อคอิน---------*/
     /*--------------------------------------------------------------------*/
     .bg_login {
         background: rgba(50, 122, 217, 1);
         background: -moz-linear-gradient(-45deg, rgba(50, 122, 217, 1) 0%, rgba(50, 122, 217, 1) 40%, rgba(58, 104, 164, 1) 100%);
         background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(50, 122, 217, 1)), color-stop(40%, rgba(50, 122, 217, 1)), color-stop(100%, rgba(58, 104, 164, 1)));
         background: -webkit-linear-gradient(-45deg, rgba(50, 122, 217, 1) 0%, rgba(50, 122, 217, 1) 40%, rgba(58, 104, 164, 1) 100%);
         background: -o-linear-gradient(-45deg, rgba(50, 122, 217, 1) 0%, rgba(50, 122, 217, 1) 40%, rgba(58, 104, 164, 1) 100%);
         background: -ms-linear-gradient(-45deg, rgba(50, 122, 217, 1) 0%, rgba(50, 122, 217, 1) 40%, rgba(58, 104, 164, 1) 100%);
         background: linear-gradient(135deg, rgba(50, 122, 217, 1) 0%, rgba(50, 122, 217, 1) 40%, rgba(58, 104, 164, 1) 100%);
         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#327ad9', endColorstr='#3a68a4', GradientType=1);
     }

     .login {
         display: flex;
         align-items: center;
         flex-direction: column;
         justify-content: center;
         width: 100%;
         min-height: 100%;
         padding: 20px;
     }

     .form_content {
         -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;
     }


     .form_footer {
         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;
     }

     .form_footer a {
         color: #444444;
     }

     textarea.form-control {
        height: 350px;
        border-radius: 4px;
        padding: 10px 15px 15px 10px;
        box-sizing: border-box;
        transition: 0.3s;
        display: flex;
        width: 100%;
        /* margin-bottom: 25px; */
      }
     /*--------------------------------------------------------------------*/


     /*----------หน้าล๊อคอิน ฟอร์ม---------*/
     /*--------------------------------------------------------------------*/
     /* input[type="text"]{  
        text-align: center; 
    }
    input[type="email"]{  
        text-align: center; 
    } 
    input[type="tel"]{  
        text-align: center; 
    }  */

     input[type=button],
     input[type=submit],
     input[type=reset] {
         background-color: #2A6BBF;
         border: none;
         color: white;
         padding: 15px 70px;
         text-align: center;
         text-decoration: none;
         display: inline-block;
         text-transform: uppercase;
         font-size: 18px;
         -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: 10px 20px 20px 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[type=button]:hover,
     input[type=submit]:hover,
     input[type=reset]:hover {
         background-color: #327AD9;
     }

     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);
     }

     .login_text {
         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;
     }

     .login_password {
         background-color: #f6f6f6;
         border: none;
         color: #0d0d0d;
         padding: 15px 32px;
         text-align: center;
         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=text]:placeholder {
         color: #f2f2f2;
     }

     /*--------------------------------------------------------------------*/


     /*----------หน้าล๊อคอิน อนิเมชั่น---------*/
     /*--------------------------------------------------------------------*/
     /*-------อนิเมชั่น จางจากด้านบนลงมา------*/
     .fade_down {
         -webkit-animation-name: fade_down;
         animation-name: fade_down;
         -webkit-animation-duration: 1s;
         animation-duration: 1s;
         -webkit-animation-fill-mode: both;
         animation-fill-mode: both;
     }

     @-webkit-keyframes fade_down {
         0% {
             opacity: 0;
             -webkit-transform: translate3d(0, -100%, 0);
             transform: translate3d(0, -100%, 0);
         }

         100% {
             opacity: 1;
             -webkit-transform: none;
             transform: none;
         }
     }

     @keyframes fade_down {
         0% {
             opacity: 0;
             -webkit-transform: translate3d(0, -100%, 0);
             transform: translate3d(0, -100%, 0);
         }

         100% {
             opacity: 1;
             -webkit-transform: none;
             transform: none;
         }
     }

     /*--------------------------------------------------------------------*/


     /*-------อนิเมชั่น จางไล่ระดับ------*/
     /*--------------------------------------------------------------------*/
     @-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;
         }
     }

     .fade_in {
         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;
     }

     .fade_in.first {
         -webkit-animation-delay: 0.4s;
         -moz-animation-delay: 0.4s;
         animation-delay: 0.4s;
     }

     .fade_in.second {
         -webkit-animation-delay: 0.6s;
         -moz-animation-delay: 0.6s;
         animation-delay: 0.6s;
     }

     .fade_in.third {
         -webkit-animation-delay: 0.8s;
         -moz-animation-delay: 0.8s;
         animation-delay: 0.8s;
     }

     .fade_in.fourth {
         -webkit-animation-delay: 1s;
         -moz-animation-delay: 1s;
         animation-delay: 1s;
     }

     .fade_in.fifth {
         -webkit-animation-delay: 1.2s;
         -moz-animation-delay: 1.2s;
         animation-delay: 1.2s;
     }

     .fade_in.sixth {
         -webkit-animation-delay: 1.4s;
         -moz-animation-delay: 1.4s;
         animation-delay: 1.4s;
         font-size: 22px;
     }

     *:focus {
         outline: none;
     }

     .icon_login {
         width: 30%;
         padding: 15px;
     }

     /*--------------------------------------------------------------------*/
     /* Zoom In #1 */
     .figure_hover {
         margin: 0;
         padding: 0;
         background: #fff;
         overflow: hidden;
     }

     .figure_hover:hover+span {
         bottom: -36px;
         opacity: 1;
     }

     .hover  .figure_hover img {
         -webkit-transform: scale(1);
         transform: scale(1);
         -webkit-transition: .3s ease-in-out;
         transition: .3s ease-in-out;
     }

     .hover .figure_hover:hover img {
         -webkit-transform: scale(1.1);
         transform: scale(1.1);
     }