body { font-family: CS ChatThaiUI; background: #f9f9fb; }

main.main{display: flex;flex-direction: column;}

.top10 .swiper-wrapper {padding-bottom: 40px;}

/* @import url(../../icons/material-design-iconic-font/css/materialdesignicons.min.css); */
/* @import url(../icons/simple-line-icons/css/simple-line-icons.css); */

/* main */
.f8{font-size:8px;} .f9{font-size:9px;} .f10{font-size:10px;} .f11{font-size:11px;} .f12{font-size:12px !important;} .f13{font-size:13px !important;} .f14{font-size:14px !important;} .f15{font-size:15px !important;} .f16{font-size:16px !important;} .f17{font-size:17px !important;} .f18{font-size:18px !important;} .f19{font-size:19px !important; } .f20{font-size:20px !important;} .f22{font-size:22px !important;} .f24{font-size:24px !important;} .f26{font-size:26px !important;} .f28{font-size:28px !important;} .f30{font-size:30px !important;} .f32{font-size:32px;} .f34{font-size:34px;} .f36{font-size:36px;} .f38{font-size:38px;} .f40{font-size:40px;} .f42{font-size:42px;} .f44{font-size:44px;} .f46{font-size:46px;} .f48{font-size:48px;} .f50{font-size:50px;} .f52{font-size:52px;} .f54{font-size:54px;} .f56{font-size:56px;} .f58{font-size:58px;} .f60{font-size:60px;} .f70{font-size:70px;} .f80{font-size:80px;} .f90{font-size:90px;} .f100{font-size:100px;} .f110{font-size:110px;} .f120{font-size:120px;}

.word-breke{word-break: break-word;}
h1, h2, h3, h4, h5, h6{ font-weight:normal}

.fco_orange{ color:#F60 !important}

.fco_black{ color:#000 !important}
.fco_black a{ color:#000}
.fco_black a:hover{ color:#e02121}

.fco_white{ color:#FFF !important}
.fco_white a{ color:#FFF}
.fco_white a:hover{ color:#FF0}

.fco_green1{ color:#22b573 !important}
.fco_green1 a{ color:#22b573}
.fco_green1 a:hover{ color:#18cd7c}

.fco_purple{ color:#6753D8 !important}
.fco_purple a{ color:#6753D8}
.fco_purple a:hover{ color:#735AFF}

.fco_green2{ color:#4a7b0e !important}
.fco_green2 a{ color:#4a7b0e}
.fco_green2 a:hover{ color:#305800}

.fco_blue1{ color:#0084FF !important}
.fco_blue1 a{ color:#0084FF}
.fco_blue1 a:hover{ color:#006CFF}

.fco_blue2{ color:#009BFF !important}
.fco_blue2 a{ color:#009BFF}
.fco_blue2 a:hover{ color:#0074FF}

.fco_bluesky1{ color:#00ccff !important}
.fco_bluesky1 a{ color:#00ccff}
.fco_bluesky1 a:hover{ color:#00a7ed}

.fco_gray0{ color:#333 !important}
.fco_gray0 a{ color:#333}
.fco_gray0 a:hover{ color:#e02121}

.fco_gray1{ color:#666 !important}
.fco_gray1 a{ color:#666}
.fco_gray1 a:hover{ color:#e02121}

.fco_gray2{ color:#999 !important}
.fco_gray2 a{ color:#999}
.fco_gray2 a:hover{ color:#e02121}

.fco_gray3{ color:#BBB !important}
.fco_gray3 a{ color:#BBB}
.fco_gray3 a:hover{ color:#e02121}

.fco_red{ color: #F00 !important}
.fco_red a{ color: #F00}
.fco_red a:hover{ color:#000}

.fco_pink{ color: #EF4288 !important}
.fco_pink a{ color: #EF4288}
.fco_pink a:hover{ color:#ff7676}

.fco_yellow{ color: #FF3 !important}
.fco_yellow a{ color: #FF3}
.fco_yellow a:hover{ color:#F00}

.fco_yellow1{ color: #ffb800 !important}
.fco_yellow1 a{ color: #ffb800}
.fco_yellow1 a:hover{ color:#FFA600}

.line-height-18{ line-height:18px}
.line-height-20{ line-height:20px}
.line-height-22{ line-height:22px}
.line-height-24{ line-height:24px}
.line-height-26{ line-height:26px}
.line-height-28{ line-height:28px}
.line-height-30{ line-height:30px}
.line-height-32{ line-height:32px}

.bg_white{ background:#FFF}
.bg_none{ background:none !important}

.t_sha1{text-shadow: 0 2px 1px rgba(0,0,0,0.3);}
.t_sha2{text-shadow:0 1px 0.5px rgba(0,0,0,0.3);}

.text_underline{ text-decoration:underline}
.text_hover_underline:hover{  text-decoration:underline}

.mg_auto {margin:auto;}
.clear_both{clear:both; display:block;}
.clear_after:after{ clear:both; display:block; content:""; }

.dpBlock { display:block; }
.dpInBlock { display:inline-block; }
.dpNone { display: none; }

.posi_relative { position:relative; }
.posi_absolute { position:absolute; }
.tagA_float{ display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1}

.ovf_hidden { overflow:hidden; }
.ovf_inherit { overflow: inherit; }
.ovf_auto { overflow: auto; }
.v_align_mid{ vertical-align:middle !important}
.v_align_sub{vertical-align: sub !important}
.v_align_bottom{vertical-align: bottom !important}
.v_align_top{vertical-align: top !important}

.origin_top_right{transform-origin: top right}
.origin_top_left{transform-origin: top left}
.origin_bottom_right{transform-origin: bottom right}
.origin_bottom_left{transform-origin: bottom left}

.indent-xs {text-indent: 24px;}
.indent-md {text-indent: 50px;}
.indent-lg {text-indent: 100px;}


.text3dot{ overflow:hidden;white-space: nowrap;text-overflow: ellipsis;}

.cursor_pt{ cursor:pointer}

.imgblock{width:100%; height:auto; display:block;}

.w100p{ width: 100%}
.w-respond1200{ width:1200px; margin:auto;}
.w-respond1000{ width:1000px; margin:auto;}

.t_align_c {text-align:center !important;}
.t_align_r {text-align:right;}
.t_align_l {text-align:left;}
.fl_l {float:left;}
.fl_r {float:right;}
.fl_n {float:none;}
.f_style_nom{ font-style:normal !important;}
.f_style_italic{ font-style:italic !important;}
.f_weight_nom{font-weight:normal !important;}
.f_weight_bold{font-weight:bold !important;}

.f_weight_200{font-weight: 200 !important;}
.f_weight_300{font-weight: 300 !important;}
.f_weight_400{font-weight: 400 !important;}
.f_weight_500{font-weight: 500 !important;}
.f_weight_600{font-weight: 600 !important;}
.f_weight_700{font-weight: 700 !important;}

.pad0-0{ padding:0 !important;}
.pad4-0{ padding:4px 0 !important;}
.pad6-0{ padding:6px 0 !important;}
.pad8-0{ padding:8px 0 !important;}
.pad16-0{ padding:16px 0 !important;}
.pad24-0{ padding:24px 0 !important;}
.pad32-0{ padding:32px 0 !important;}

.pad0-4{ padding:0 4px !important;}
.pad0-6{ padding:0 6px !important;}
.pad0-8{ padding:0 8px !important;}
.pad0-16{ padding:0 16px !important;}
.pad0-24{ padding:0 24px !important;}
.pad0-32{ padding:0 32px !important;}

.pad4-4{ padding:4px !important;}
.pad6-6{ padding:6px !important;}
.pad8-8{ padding:8px !important;}
.pad8-16{ padding:8px 16px !important;}
.pad16-8{ padding:16px 8px !important;}
.pad16-16{ padding:16px !important;}
.pad16-24{ padding:16px 24px !important;}
.pad24-16{ padding:24px 16px !important;}
.pad24-24{ padding:24px !important;}

.padT0{padding-top:0 !important;}
.padT4{padding-top:4px !important;}
.padT6{padding-top:6px !important;}
.padT8{padding-top:8px !important;}
.padT16{padding-top:16px !important;}
.padT24{padding-top:24px !important;}
.padT32{padding-top:32px !important;}

.padB0{padding-bottom:0 !important;}
.padB4{padding-bottom:4px !important;}
.padB6{padding-bottom:6px !important;}
.padB8{padding-bottom:8px !important;}
.padB16{padding-bottom:16px !important;}
.padB24{padding-bottom:24px !important;}
.padB32{padding-bottom:32px !important;}

.padL0{padding-left:0 !important;}
.padL4{padding-left:4px !important;}
.padL6{padding-left:6px !important;}
.padL8{padding-left:8px !important;}
.padL16{padding-left:16px !important;}
.padL24{padding-left:24px !important;}
.padL32{padding-left:32px !important;}

.padR0{padding-right:0 !important;}
.padR4{padding-right:4px !important;}
.padR6{padding-right:6px !important;}
.padR8{padding-right:8px !important;}
.padR16{padding-right:16px !important;}
.padR24{padding-right:24px !important;}
.padR32{padding-right:32px !important;}

.mar0-0{ margin:0 !important;}
.mar4-0{ margin:4px 0 !important;}
.mar6-0{ margin:6px 0 !important;}
.mar8-0{ margin:8px 0 !important;}
.mar16-0{ margin:16px 0 !important;}
.mar24-0{ margin:24px 0 !important;}

.mar0-4{ margin:0 4px !important;}
.mar0-6{ margin:0 6px !important;}
.mar0-8{ margin:0 8px !important;}
.mar0-16{ margin:0 16px !important;}
.mar0-24{ margin:0 24px !important;}

.mar4-4{ margin:4px !important;}
.mar6-6{ margin:6px !important;}
.mar8-8{ margin:8px !important;}
.mar8-16{ margin:8px 16px !important;}
.mar16-8{ margin:16px 8px !important;}
.mar16-16{ margin:16px !important;}
.mar16-24{ margin:16px 24px !important;}
.mar24-16{ margin:24px 16px !important;}
.mar24-24{ margin:24px !important;}

.marT0{margin-top:0 !important;}
.marT4{margin-top:4px !important;}
.marT6{margin-top:6px !important;}
.marT8{margin-top:8px !important;}
.marT12{margin-top:12px !important;}
.marT16{margin-top:16px !important;}
.marT24{margin-top:24px !important;}
.marT32{margin-top:32px !important;}

.marB0{margin-bottom:0 !important;}
.marB4{margin-bottom:4px !important;}
.marB6{margin-bottom:6px !important;}
.marB8{margin-bottom:8px !important;}
.marB12{margin-bottom:12px !important;}
.marB16{margin-bottom:16px !important;}
.marB24{margin-bottom:24px !important;}
.marB32{margin-bottom:32px !important;}

.marL0{margin-left:0 !important;}
.marL4{margin-left:4px !important;}
.marL6{margin-left:6px !important;}
.marL8{margin-left:8px !important;}
.marL12{margin-left:12px !important;}
.marL16{margin-left:16px !important;}
.marL24{margin-left:24px !important;}
.marL32{margin-left:32px !important;}

.marR0{margin-right:0 !important;}
.marR4{margin-right:4px !important;}
.marR6{margin-right:6px !important;}
.marR8{margin-right:8px !important;}
.marR12{margin-right:12px !important;}
.marR16{margin-right:16px !important;}
.marR24{margin-right:24px !important;}
.marR32{margin-right:32px !important;}

.bgTransWhite01{ background-color:rgba(255,255,255,0.1)}
.bgTransWhite02{ background-color:rgba(255,255,255,0.2)}
.bgTransWhite03{ background-color:rgba(255,255,255,0.3)}
.bgTransWhite04{ background-color:rgba(255,255,255,0.4)}
.bgTransWhite05{ background-color:rgba(255,255,255,0.5)}
.bgTransWhite06{ background-color:rgba(255,255,255,0.6)}
.bgTransWhite07{ background-color:rgba(255,255,255,0.7)}
.bgTransWhite08{ background-color:rgba(255,255,255,0.8)}
.bgTransWhite09{ background-color:rgba(255,255,255,0.9)}
.bgTransWhite{ background-color:#FFF}
.bgTransDark005{ background-color:rgba(0,0,0,0.05) !important}
.bgTransDark01{ background-color:rgba(0,0,0,0.1) !important}
.bgTransDark02{ background-color:rgba(0,0,0,0.2) !important}
.bgTransDark03{ background-color:rgba(0,0,0,0.3) !important}
.bgTransDark04{ background-color:rgba(0,0,0,0.4) !important}
.bgTransDark05{ background-color:rgba(0,0,0,0.5) !important}
.bgTransDark06{ background-color:rgba(0,0,0,0.6) !important}
.bgTransDark07{ background-color:rgba(0,0,0,0.7) !important}
.bgTransDark08{ background-color:rgba(0,0,0,0.8) !important}
.bgTransDark09{ background-color:rgba(0,0,0,0.9) !important}
.bgTransDark{ background-color:#000}

/*
hr {
    height: 0;
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-color: #000;
    border-top: 1px solid;
    box-sizing: border-box;}
*/
hr.hr-xs {
  margin-top: 10px;
  margin-bottom: 10px; }
hr.hr-md {
  margin-top: 16px;
  margin-bottom: 16px; }
hr.hr-lg {
  margin-top: 24px;
  margin-bottom: 24px; }
hr.hr-color-w{border-top: 1px solid; border-color: #FFF;}
hr.hr-color-b{border-top: 1px solid; border-color: #000;}
hr.hr-line-2{border-top: 2px solid;}
hr.hr-line-3{border-top: 3px solid;}
hr.hr-line-4{border-top: 4px solid;}

.opa_1{ opacity:1}.opa9{ opacity: 0.9}.opa8{ opacity: 0.8}.opa7{ opacity: 0.7}.opa6{ opacity: 0.6}.opa5{ opacity: 0.5}.opa4{ opacity: 0.4}.opa3{ opacity: 0.3}.opa2{ opacity: 0.2} .opa1{ opacity: 0.1}  .opa05{ opacity: 0.05} .opa_0{ opacity:0}

.border-d1 {border-color: #d1d1d1 !important; }
/* //main */


.overlay {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    background: #222;
    z-index:2000;
    opacity: 0.8;
}

.overlay__inner {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    position: absolute;
}

.overlay__content {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}

.spinner {
    width: 75px;
    height: 75px;
    display: inline-block;
    border-width: 2px;
    border-color: rgba(255, 255, 255, 0.05);
    border-top-color: #fff;
    animation: spin 1s infinite linear;
    border-radius: 100%;
    border-style: solid;
}

@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}

.promotionBadge{ position: absolute; top: 0; right: 0; z-index: 1; background: #e94b2c; color: #FFF; font-size: 13px; padding: 3px 6px 3px 16px; border-radius: 0 0.25rem 0 20px;} 

.top-bar{background: #1d89e4;color:#fff;padding: 10px 0;}
.top-bar hgroup h1, .top-bar hgroup h2 { font-size:16px; display: inline-block; margin:0 10px 0 0}



*[class^='section']{text-align: center;padding: 20px 0;}
.section-ticket{background: #fff; border-radius: 12px; box-shadow: 0 1px 5px rgba(0,0,0,0.2); margin: 5px; padding: 40px 60px;}
.section-1{background: blue;}
.section-2{background: purple;}
.flag img{height: 20px;}
.logo{height: 40px;}

.navbar-dark .navbar-nav .show > .nav-link, .navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .nav-link.active {
    color: rgba(255, 255, 255, 0.8);}

.navbar-dark .navbar-nav .nav-link { color: rgba(255, 255, 255, 1);}

.navbar-nav { margin:0 auto}

.swiper-button-next,.swiper-button-prev { background-color: rgba(227, 227, 227, 0.5); padding: 30px; color: #000 !important; fill: black !important;
    stroke: black !important; border-radius: 50%}

.mt-10 { margin-top: 10px }
.mt-20 { margin-top: 20px }
.mt-30 { margin-top: 30px }

.pt-160 { padding-top: 160px }

.flex-2 { flex-grow: 2 }
.flex-3 { flex-grow: 3 }
.flex-4 { flex-grow: 4 }
.flex-5 { flex-grow: 5 }

.row { margin-right: 0; margin-left: 0 }

.swiper-wrapper600 { height: 600px !important }
.flex-row-container { display: flex;  }
.flex-row-container .flex-row-item { margin: 10px; }
.content-wrapp h1 { font-size: 32px; font-weight: bold; text-align: left; padding-left: 20px; }
.content-wrapp h2, .content-wrapp strong , .content-wrapp em { text-align: left; padding: 0 5px 0 20px; }
.content-wrapp h2 { font-size: 26px; font-weight: bold }
.content-wrapp .details { display: block; overflow:hidden; margin-bottom: 10px; }
.content-wrapp .details strong { font-size: 19px; font-weight: normal; text-align: left;  float: left;  }
.content-wrapp .details a.more { float: right; margin-right: 20px; font-size: 15px; }
.content-wrapp em { font-style: normal; font-size: 12px; font-weight: bold; display: block; color: #1d89e4; margin-bottom: 10px; margin-top: 10px; }
.content-wrapp em:before {display: block; float: left; margin-top: .7em; /* half the line-height */  border-top: 2px solid #fe9807;
  width: 20px; margin-right: 10px;  content: "";}
/*header.header-nongnuch { background: url(../assets/images/bg-nongnuchpark.png)  no-repeat center top ; background-size: 100% auto;
    z-index: 0; top: 0;  left: 0;  position: relative;     height: auto; }*/

header.header-nongnuch { position: relative; }
.section-header { padding: 0 !important; width: 100%; margin: 0 auto; height: 600px }

.section-header .slide-page { height: 100%; /*padding: 20px 110px;*/padding-bottom: 300px }
.section-header .slide-page .slide-wrapp { width: 1100px; display: block; margin:0 auto; padding: 50px }
.section-header .slide-page .slide-wrapp strong { text-align: left ; color: #3d5b4f; display: block; font-size: 55px; line-height: 70px; font-weight: bold; width: 43%;}
.section-header .slide-page .slide-wrapp span { text-align: left; color: #3d5b4f ; display: block;width: 45%;}

.section-header .slide-pic-01 { background-size: 100% auto;
    z-index: 0; top: 0;  left: 0;  position: relative;   } 
.section-header .slide-pic-02 { background-size: 100% auto;
 z-index: 0; top: 0;  left: 0;  position: relative;   } 
 .section-header .slide-pic-03 { background-size: 100% auto;
 z-index: 0; top: 0;  left: 0;  position: relative;   } 
  .section-header .slide-pic-04 { background-size: 100% auto;
 z-index: 0; top: 0;  left: 0;  position: relative;   } 
  .section-header .slide-pic-05 { background-size: 100% auto;
 z-index: 0; top: 0;  left: 0;  position: relative;   } 


.section-ticket { width: 1000px;  position: absolute; bottom: -150px;  z-index: 999; left: 50%;    margin-left: -500px; }
h2.title-ticket { font-weight: bold; color:#1d89e4; font-size: 26px; border-bottom: 1px solid #e3e3e3; padding-bottom: 20px; margin-bottom: 20px }


.article { padding:5px; width: 29%;   float: left;}
.article a img { width: 100%; margin-bottom: 10px; }
.article a h3 { text-align: left; font-size: 17px; line-height: 27px; display: block; color:#3d5b4f; font-weight: bold ;  }
.article a p, .article a span { text-align: left; font-size: 15px; line-height: 22px; display: block; color: #000}
.article-all-service { display: block; overflow: hidden; width: 88%;  margin: 0 auto; }
.article-all-service .article { position: relative !important; padding: 5px 10px }
.article-all-service .article img { display: block; width: 100%; height: 142px; object-fit: cover;}
.article-all-service .big-thump { width: 42% !important; float: left ; position: relative;}
.article-all-service .big-thump img {  height: 305px;}


.pagination-content { padding: 20px 0;}
.pagination-content ul li span,.pagination-content ul li a{ border-radius: 5px !important; border: none !important; background:#dedede !important;}
.pagination-content ul li.active span{ background:#1d89e4 !important; color:#FFF}

.simple-pagination { overflow: visible !important; padding:0 !important;}
.simple-pagination li { display: inline-block; text-align: center; float: none !important;}
.compact-theme a, .compact-theme span { display: block; min-width: 40px !important; float: none !important; background: #ffffff !important; padding:8px !important; border: 1px solid #aaa !important; margin: 4px; box-shadow: 0 0 0 rgba(0,0,0,0) !important;}

.article-all-service .article a h3 {position: absolute; bottom: 7px !important; left: 10px !important; width: calc(100% - 20px);
    height: auto !important; padding: 40px 10px 10px 10px !important; color: #fff !important; overflow: hidden;
background: rgba(0,0,0,0);
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(246,246,246,0.05) 5%, rgba(0,0,0,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,0)), color-stop(5%, rgba(246,246,246,0.05)), color-stop(100%, rgba(0,0,0,1)));
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(246,246,246,0.05) 5%, rgba(0,0,0,1) 100%);
background: -o-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(246,246,246,0.05) 5%, rgba(0,0,0,1) 100%);
background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(246,246,246,0.05) 5%, rgba(0,0,0,1) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(246,246,246,0.05) 5%, rgba(0,0,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000', GradientType=0 );
}

.section-category .article a img { width: 100%; height:157px; object-fit: cover; }


.article-hot-product { display: block; overflow: hidden; width: 88%;  margin: 0 auto; }

.article-hot-product .article { padding: 5px 10px; width: 25% }
.article-hot-product .article a h3 { width: calc(100% - 20px); height: auto !important; color: #000 !important;  overflow: hidden;

}
.article-hot-product .article .price { color: #000; font-size: 18px; display: block; text-align: left; font-weight: bold; margin-top: 10px; }

/*.section-all-service { margin:160px auto 0; }*/
.section-banner2 img { width: 100%; height: auto; }

/*.section-resort .container .article:nth-child(2) , .section-resort .article:nth-child(3) { flex: 0 0 29% !important; max-width: 29% !important}*/
.section-resort .article img { display: block; width: 100%; height: 269px; object-fit: cover }
.section-resort2 .article img { display: block; width: 100%; height: 177px; object-fit: cover }
.section-resort2 a p { height: 66px; overflow: hidden;}
.section-resort2 a h3 { height: 54px; overflow: hidden; }

.nav-product { float: right; margin-top: 40px;}
.nav-product li { display: inline-block; margin:0 5px;}
.nav-product li a { display: block; padding: 6px 24px 4px 24px; min-width:100px; border-radius: 16px; background: #D6D6D6; color:#686868; font-weight: 600;}
.nav-product li.active a, .nav-product li a:hover { background: #FF9100; color:#000; }
.nav-product li a img { width: 22px; height: 22px; display: block; float: left; margin-right:8px;}
.content-tab .more { display: block; margin: 0 20px;}
.content-tab { display: none; opacity: 0; transition: all .5s linear;}
.content-tab.active { display: block; opacity: 1; transition: all .5s linear;}

/*h3 height auto*/
.section-covid .container .article h3 , .section-article-microsite .container .article h3 ,.section-resort  .container .article h3 , .section-article .container .article h3 , .section-pr .container .article h3{ height: auto; }

.section-article  .container .article { background: #fff;border: 8px #f9f9fb solid; }
.section-covid  .container .article img { display: block; width: 100%; height: 175px; object-fit: cover; }
.swiper-button-next, .swiper-container-rtl .swiper-button-prev {/* background-image: url(); */right: 10px; left: auto;}
.container-slide { width: 87%; margin: 0 auto; }
.d-block { display: inline-block; }

.content-product .article a img { height: 150px !important;   object-fit: cover; }
.section-travel .article a img { height: 175px !important;   object-fit: cover; }

/*Microsite*/
.section-intro-pic {}
header.header-microsite { min-height: 400px; }
header.header-microsite h2 { font-size: 50px; color: #fff; font-weight: bold;text-shadow: 2px 3px 2px rgba(0, 0, 0, 0.41); text-align: center; display: block; margin:140px auto 0; }
.menu-microsite{ background: #fafafa; box-shadow: 0 1px 2px rgba(0,0,0,.3);}
.nav-micro-nongnuch { padding: 6px 30px 0px 30px  !important; border-bottom: none !important;  }
.nav-microsite { border-top-left-radius: 10px !important; border-top-right-radius: 10px !important; border-color: #fafafa #fafafa #fff !important;
    padding: 10px 40px 10px 40px !important; font-weight: bold; color: #4a4a4a}
 .nav-microsite:hover { background: #fff }
 .nav-tabs .nav-item {    margin-bottom:0}
.section-intro { margin-top: 30px;}
.article-microsite-wrapp { text-align: left; padding: 20px 20px; height: 470px; overflow: hidden; overflow-y: scroll; }
.article-microsite-wrapp p { text-indent: 30px; margin-bottom: 15px; }
.nongnuch-contact-wrapp { background: #f9f9fb; padding: 30px 40px 10px 40px }
.nongnuch-contact-wrapp em { padding: 0 }
.nongnuch-contact-wrapp h2 { font-size: 20px; margin-top: 15px; padding: 0 }
.nongnuch-contact-wrapp ul {display: block;
    list-style-type: disc;
    margin-block-start: 0em;
    margin-block-end: 0em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 0px; margin-bottom: 20px;}
.nongnuch-contact-wrapp ul li { list-style: none; text-align: left; margin-left: 20px; font-size: 18px; }
.nongnuch-contact-wrapp ul li img { width: 18px; margin-right: 8px; }
ul.social-icon2 li { width: 13%; display: inline-block; text-align: center; margin-left: 0 !important}
ul.social-icon2 li img { margin:0 auto; display: block; width: 30px ; height: auto; }



.section-article-microsite .article a img, .section-article .article a img { width: 100%; height: 174px; object-fit:cover; }
.section-pr .article a img { width: 100%; height:217px; object-fit:cover; }
.signin { color:#FFF; font-size: 14px; border:1px solid #FFF; border-radius: 6px; margin-right: 16px; padding: 2px 10px;}
.signin:hover { color:#FFF; }


/*Gallery Microsite*/

.gall-thumb {
  margin-bottom: 0px;
}
.gall-thumb:last-child {
  margin-bottom: 0;
}
/* CSS Image Hover Effects: https://www.nxworld.net/tips/css-image-hover-effects.html */
.gall-thumb figure img {
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
.gall-thumb figure:hover img {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}
.gall-thumb figure { margin:0; position: relative; height: 160px;
    overflow: hidden;}
.gall-thumb figure .img-thumbnail { padding: 0.05rem;
    border-radius: 0;
    object-fit: cover;
    min-height: 100%;
    max-width: 100%;
    width: 100%;

}
.gall-thumb figure:hover:after { position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); content:""; width:24px; height:24px; display: block; background: url(data:image/svg+xml;base64,PCEtLSBHZW5lcmF0ZWQgYnkgSWNvTW9vbi5pbyAtLT4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIiB2aWV3Qm94PSIwIDAgMzIgMzIiPgo8dGl0bGU+ZW5sYXJnZTwvdGl0bGU+CjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0zMiAwaC0xM2w1IDUtNiA2IDMgMyA2LTYgNSA1eiI+PC9wYXRoPgo8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMzIgMzJ2LTEzbC01IDUtNi02LTMgMyA2IDYtNSA1eiI+PC9wYXRoPgo8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMCAzMmgxM2wtNS01IDYtNi0zLTMtNiA2LTUtNXoiPjwvcGF0aD4KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTAgMHYxM2w1LTUgNiA2IDMtMy02LTYgNS01eiI+PC9wYXRoPgo8L3N2Zz4K) no-repeat 50%; background-size: 24px;}


.img-thumbnail { border:none; }
.wrapper-map img { width: 100%; height: 350px; object-fit: cover; object-position: center center; border: 1px solid #ddd;}
/*.section-map { margin-bottom:100px;}*/
.section-map a { position: relative;}
.section-map a .overlay-map { display: none; width: 100%; height: 100%; text-align: center; transition: opacity linear 1s; position: absolute; top: 0; left: 0; background:rgba(0,0,0,0.8); color:#FFF}
.section-map a:hover .overlay-map { display:block;}
.overlay-map span { width:24px; height:24px; display: inline-block; vertical-align: middle; margin-right: 10px; background: url(data:image/svg+xml;base64,PCEtLSBHZW5lcmF0ZWQgYnkgSWNvTW9vbi5pbyAtLT4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIiB2aWV3Qm94PSIwIDAgMzIgMzIiPgo8dGl0bGU+ZW5sYXJnZTwvdGl0bGU+CjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0zMiAwaC0xM2w1IDUtNiA2IDMgMyA2LTYgNSA1eiI+PC9wYXRoPgo8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMzIgMzJ2LTEzbC01IDUtNi02LTMgMyA2IDYtNSA1eiI+PC9wYXRoPgo8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMCAzMmgxM2wtNS01IDYtNi0zLTMtNiA2LTUtNXoiPjwvcGF0aD4KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTAgMHYxM2w1LTUgNiA2IDMtMy02LTYgNS01eiI+PC9wYXRoPgo8L3N2Zz4K) no-repeat 50%; background-size: 16px;}
.btn-overlay { position: absolute; top: 50%; left:50%; width:300px; transform: translate(-50%,-50%);}


.login_box{ position:relative; }
.login_box a,.login_box a:hover{ color: #666}

.btn_open_menu{ padding:6px 8px 0; box-sizing: border-box; height: 42px; margin: -9px 0; cursor: pointer;}
.btn_open_menu:hover{background: #FFF; color: #666}
.btn_open_menu span{ width: 30px; height: 30px; overflow: hidden; border-radius: 50%; display: inline-block; vertical-align: middle;}
.btn_open_menu span img{ width: 100%; height: auto; display: block;}
.login_action_box{background: #FFF; position:absolute; top:32px; right:8px; z-index: 9; width: 225px; padding:8px 8px; box-sizing: border-box; color: #666; opacity: 0; visibility: hidden; transition: all 0.3s ease; transform: translateY(-10px); box-shadow: 0 10px 10px rgba(0,0,0,0.2); border-radius: 4px 0 4px 4px;}
.btn_open_menu:hover .login_action_box{ opacity:1; visibility: visible; transform: translateY(0)}
.login_action_box:hover{ cursor: default;}
.login_action_box .btn{ line-height: normal; padding:10px 0.75rem}
.befor_login{ overflow: hidden;}
.befor_login p{ padding-bottom: 16px}
.befor_login ul{ padding: 0; margin: 0;}
.befor_login ul li{ list-style: none; border-bottom: 1px solid #eee;}
.befor_login ul li a{ display: block; cursor: pointer; text-decoration:none; color:#1d89e4; padding:6px 16px;}
.befor_login ul li a:hover{ background:#eee}
.befor_login ul li a img{ display: inline-block; vertical-align: middle; width: 17px; height: auto; margin: 0 16px 0 0;}
.befor_login ul li:last-child{ border-bottom: none;}

/* checkbox */
.switch_check{ width: 50px; height:26px; display: inline-block; vertical-align: middle; position: relative; overflow: hidden; cursor: pointer;}
.switch_check:hover input + label {background: #808080;}
.switch_check input{position: absolute; top: 0; left: 0; z-index: 3; width:100%; height:100%; opacity:0; cursor: pointer; }
.switch_check label {cursor: pointer;text-indent: -9999px;width:100%;height: 100%;background: #a0a0a0;display: block;border-radius: 100px;position: relative;}
.switch_check label:after {content: "";position: absolute;top: 2px;left: 2px;width: 22px;height: 22px;background: #fff;border-radius: 50px;transition: 0.3s;}
.switch_check:hover input:checked + label {background: #00c997;}
.switch_check input:checked + label {background: #02b386;}
.switch_check input:checked + label:after {left: calc(100% - 2px);transform: translateX(-100%);}
.switch_check:active label:after {width: 36px;}
/* end checkbox */

.checkCus{ position: relative; width: 18px; height: 18px; display: inline-block;}
.checkCus .regular-checkbox {width: 100%; height:100%; display: block; position: absolute;z-index: 1; opacity: 0;}
.checkCus .regular-checkbox + label {
    background-color: #fafafa;
    border: 1px solid #cacece;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
    padding: 9px;
    border-radius: 3px;
    display: inline-block;
    position: relative;
}
.checkCus .regular-checkbox:checked + label {
    background-color: #ee4d2d;
    border: 1px solid #ee4d2d;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1);
    color: #99a1a7;
}
.checkCus .regular-checkbox:checked + label:after {
    content: '\2714';
    font-size: 14px;
    position: absolute;
    top: 0px;
    left: 3px;
    color: #FFF !important;
}


/* Hook bootstrap */
.hooking .badge-secondary {
    color: #686d70;
    background-color: #e5e9ec;
}
.hooking .btn-rounded,.hooking .badge-rounded {
    border-radius: 60px;
    padding: 7px 18px;
}
.hooking .text-warning{ color:#ee4d2d !important}
.btn-submit{ background-color: #007bff; color: #FFF;}
.btn-submit:hover{ background-color: #3f9cff; color: #FFF;}


/* vue anmate */
.fade-enter-active, .fade-leave-active {transition: opacity .5s;}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {opacity: 0;}





/*footer*/
footer { width: 100%; overflow: hidden; /*width: 100%; top: 0;  left: 0;  position: relative;     height: auto;*/ }
.email-box { background: url('/assets/images/bg-footer.png')  no-repeat center top;background-size: 100% auto;
    z-index: 0;
    padding: 60px 0 60px 0; display: flex; }
.email-box .container { background: #fff; border-radius: 12px; box-shadow: 0 1px 5px rgba(0,0,0,0.2);  padding: 0px 60px 40px 60px;}

.email-box .container .form-tt { width: 22%; display: inline-block; margin: 40px 0 0 0px}
.email-box .container .form-tt strong { font-size: 20px !important;  display: block; margin-top: 10px }
.email-box .container .form-tt  span { font-size: 15px; }

.form-email-footer { display: inline-block;  width: 76%; margin-top: 10px; }
.form-email-footer .form-control { width: 70%; display: inline-block; margin-top: 50px }

.footer-nongnuch { display: flex ; background: #1d89e4; padding: 50px 0 0px; text-align: left; color: #fff } 

.footer-nongnuch img.logo-footer { width: 120px; height: auto !important; margin-bottom: 20px }

.footer-nongnuch strong { font-size: 18px; }
.footer-nongnuch ul { padding-inline-start: 0px;margin-block-start: 0em;    margin-block-end: 0em; }
.footer-nongnuch ul li { list-style: none; text-indent: 0; font-size: 14px; margin-top: 7px}
.footer-nongnuch ul li img { margin-right:10px; }

.footer-nongnuch ul.social-icon li { width: 28%; display: inline-block; text-align: center; }
.footer-nongnuch ul.social-icon li img { margin:0 auto; display: block; width: 28px ; height: auto; }

.allright-re { text-align: center; border-top: 1px solid #2db8f9; padding: 15px 0; display: block; width: 100%;
    margin-top: 20px; font-size: 13px;}

@media (min-width: 768px)
{
    .nav-nong .nav-link { padding-right: 0rem;  padding-left: 0rem; font-size: 0.9rem;}
}

/*Mobile*/
@media (max-width: 767px)
{
.content-wrapp h2, .content-wrapp strong, .content-wrapp em {  padding: 0 5px 0 0px;}
.content-wrapp .details a.more { margin-right: 0 }
.article-all-service .big-thump , .article-all-service , .article-hot-product , .section-header ,.section-header .slide-page span ,.email-box .container .form-tt { width: 100% !important }
.article{ display: block !important; width: 100% !important; margin-bottom: 15px }
.container .article a h3 { height: auto !important; }
.content-wrapp h2 { font-size: 23px;}
.section-header .slide-page .slide-wrapp { width: 100%; padding:10px 20px;}
.pt-160 { padding-top: 20px;}
.section-header .slide-pic-01 ,.section-header .slide-pic-02 , .section-header .slide-pic-03 ,.section-header .slide-pic-04 ,.section-header .slide-pic-05{ background-size: cover; }
.section-header .slide-page { padding: 20px; /*height: 580px;*/ }
.section-header .slide-page .slide-wrapp strong { width: 100% !important; display: block !important; font-size: 35px !important; line-height: 45px; }
.header-nongnuch { background-size: auto !important;  height: auto; margin-bottom: 0px; }
.swiper-slide { padding: 0;}
.email-box .container , .section-ticket{ width: 95%; display: block; margin:0 auto; }
.email-box .container { padding: 20px }
.email-box .container .form-tt { margin:0; }
.check-price { margin-top: 10px; }
.form-email-footer { width: 100%; }
.form-email-footer .form-control { width: 100%; display: block; margin-top: 10px; margin-bottom: 10px;}
.footer-nongnuch ul { margin-bottom: 20px; }
.section-ticket {padding: 40px 20px 20px;position: unset;  bottom: unset;  left: unset;}
.email-box { background-size: inherit;     padding: 60px 0 50px 0; }
.footer-nongnuch ul.social-icon li { width: 13% }
.section-all-service .container ,.section-covid .container ,.section-artilce-microsite .container ,.section-resort .container  ,.section-hot-product .container  ,.section-travel .container, .section-article .container  ,.section-pr .container { padding-right: 0px !important; padding-left: 0px !important;}

.nav-micro-nongnuch .nav-item { display: block; width: 100%;  border-bottom: 1px solid #fff; margin-bottom: 0px;}
.nav-micro-nongnuch { padding: 0px !important;}
.nav-microsite {  border-top-left-radius:0px !important; border-top-right-radius: 0px !important; padding: 10px 20px !important;}

.menu-microsite .container { padding-left: 0; padding-right: 0 }
.content-wrapp h1 { padding-left: 0 }
.article-microsite-wrapp { padding: 20px 0 ; height: auto !important;}
.nongnuch-contact-wrapp { padding: 20px 10px 10px 20px }
/* .p-2 { padding: 0 !important } */

*[class^='section'] .container { padding-right: 5px; padding-left: 5px; }

.gall-thumb { margin-bottom: 0px;  padding-left: 0;  padding-right: 0;}
header.header-microsite {  min-height: 200px;}
header.header-microsite h2 { font-size: 30px; margin: 50px auto 0; }

.gall-thumb figure .img-thumbnail { width: 100% }
.section-resort .article img { height: 200px;}
.content-product .article { height: auto !important;  width:95% !important ; }

.section-header.slide { height: 500px !important;} 
.swiper-wrapper600 { height: 500px !important;}
.section-header .slide-page { height:250px !important; padding: 10px !important; }
.section-header .slide-page .slide-wrapp { margin-top:250px !important; padding:0 !important}
.section-header .slide-page .slide-wrapp strong { font-size: 20px !important; line-height: 26px !important;}
.section-header .slide-page .slide-wrapp span { height:90px; overflow: hidden;}
.section-header .slide-page .slide-wrapp .btn.btn-primary.float-left.mt-10 { float: none !important; margin-top: 20px;}
.section-header.slide .swiper-button-next, .section-header.slide .swiper-button-prev { top:120px !important}

}


/*product zone*/
.wrapp-products { border: 1px solid #d3d3d3; width: 100%; overflow: hidden; padding: 0 ;background: #ef9108}
.menu-product { width: 25%; float: left; background: #fff }
.content-product { width: 75%; float: left; padding: 10px;    }
.content-product .article { background: #fff;   width: 31.3%; padding: 0 ; max-height: 260px; }
.content-product .article .price { color: #000; text-align: right; font-weight: bold; font-size: 20px; padding: 0 10px ; margin-bottom: 10px;  position: absolute;
    bottom: 0; right: 10px;}
.content-product .article a h3 {  height: 53px;  padding: 0 10px;    overflow: hidden;  padding: 0 10px; }
.content-product .article a span { padding: 0 10px }
.menu-product ul { overflow: hidden; display: block;
    list-style-type: disc;
    margin-block-start: 0em;
    margin-block-end: 0em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 0px; }
.menu-product ul li { list-style: none;
    width: 50%;
    float: left;
    height: 175px;
    text-align: center;
}

.menu-product ul li a{
    margin: 0px;
    background: #fff;
    width: 100%;
    overflow: hidden;
    display: block;
    height: inherit;padding: 10px;
    color: #000;
}
.menu-product ul li:first-child a {border-bottom: 1px solid #dcdcdc; }
.menu-product ul li:last-child a {border-left: 1px solid #dcdcdc; }
.menu-product ul li:nth-child(2) a { background: #ef9108 ; border-bottom-left-radius: 35px; }
.menu-product ul li:nth-child(4) a { background: #fff ; border-top-right-radius: 35px; }
.menu-product ul li:nth-child(4) { background: #ef9108 ; }
.menu-product ul li a img { width: 40px ;display: block; margin: 30px auto 0; }
.menu-product ul li a strong { display: block; font-size: 13px; text-align: center; padding: 0 !important }
.menu-product ul li a span { display: block; font-size: 15px; }

.section-agriculture .article a img, .section-ticketproduct .article a img, .section-restaurants .article a img, .section-meeting .article a img { width: 100%; height: 217px; object-fit: cover; object-position: center center;}
.section-spa .article a img, .section-room .article a img { width: 100%; height: 174px; object-fit: cover; object-position: center center;}
.section-room .article p { height: 66px; overflow: hidden;}

.responsive {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}
.responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

/*Mobile*/
@media (max-width: 1024px){

}

@media (max-width: 767px)
{
.hdNav{ padding-right: 0; padding-left: 0;}
.menu-product , .content-product { width: 100% !important }  
.content-product .article {max-height: none !important; margin-bottom: 10px !important;}
.m-1 { margin:0 !important; }


.nav-product { float: none; margin: 10px 0; padding: 0;}
.nav-product li { width: 50%; float: left; margin: 0; padding: 5px;}
.nav-product li a img { width:40px; height: 40px; float: none; margin: 0 auto 10px !important}
.nav-product li a { padding:6px 0;}
}

@media (max-width: 576px){
    .login_action_box{right: inherit; left: 0;}
    .section-header.slide { height: 400px !important;} 
.swiper-wrapper600 { height: 400px !important;}
.section-header .slide-page { height:150px !important; padding: 10px !important; }
.section-header .slide-page .slide-wrapp { margin-top:150px !important; padding:0 !important}
.section-header .slide-page .slide-wrapp strong { font-size: 20px !important; line-height: 26px !important;}
.section-header .slide-page .slide-wrapp span { height:90px; overflow: hidden;}
.section-header .slide-page .slide-wrapp .btn.btn-primary.float-left.mt-10 { float: none !important; margin-top: 20px;}
.section-header.slide .swiper-button-next, .section-header.slide .swiper-button-prev { top:70px !important}
}