@charset "utf-8";
/* Font Face */
/* ================================================================== */
@font-face {
    font-family: 'promptregular'; font-weight: normal; font-style: normal;
    src: url('../webfonts/prompt-regular-webfont.woff2') format('woff2'),
         url('../webfonts/prompt-regular-webfont.woff') format('woff');
}
@font-face {
    font-family: 'promptsemibold'; font-weight: normal; font-style: normal;
    src: url('../webfonts/prompt-semibold-webfont.woff2') format('woff2'),
         url('../webfonts/prompt-semibold-webfont.woff') format('woff');
}
@font-face {
    font-family: 'fredoka_oneregular'; font-weight: normal; font-style: normal;
    src: url('../webfonts/fredokaone-regular-webfont.woff2') format('woff2'),
         url('../webfonts/fredokaone-regular-webfont.woff') format('woff');
}
/* @font-face {
  font-family: 'mitrregular'; font-weight: normal; font-style: normal;
  src: url('../webfonts/mitr-regular-webfont.woff2') format('woff2'),
       url('../webfonts/mitr-regular-webfont.woff') format('woff');
} */
@font-face {
  font-family: 'mitrmedium'; font-weight: normal; font-style: normal;
  src: url('../webfonts/mitr-medium-webfont.woff2') format('woff2'),
       url('../webfonts/mitr-medium-webfont.woff') format('woff');
}

/* Root */
/* ================================================================== */
:root {
	--blue: #2b2f7d;
  --red: #ac121c;
  --orange :#f06c00;
	--gray: #444;
  --light_gray: #f5f5f5;
  --mid_gray: #ccc;
  --light_blue: #eaf5f9;
  --green: #86c998;
  /* --green: #a8c357; */
  --gold: #dfaf4b;
  --bs-blue: #2b2f7d;
  --bs-red: #ac121c;
  --font_main: 'fredoka_oneregular','mitrmedium';
	--font_prompt: 'promptregular';
	--font_promt_bold: 'promptsemibold';
  --font_mitr: 'mitrregular';
	--font_mitr_bold: 'mitrmedium';
}

/* Fixed Bootstrap */ 
/* ================================================================== */
.container-fluid { max-width: 1920px; }
p {margin-bottom: 0;}
figure {margin: 0;}

/*btn animation*/
.btn { border-radius: 25px; transition: .5s ease-out;}
.btn span { cursor: pointer; display: inline-block; position: relative; transition: .5s ease-out; }
.btn span:after { content: '»'; position: absolute; opacity: 0; top: 0; right: -1px;}
.btn:hover span { padding-right: 25px; }
.btn:hover span:after { opacity: 1; right: 0;}
.btn:hover {/*transform: translateY(-3px);*/}

.selector-for-some-widget { box-sizing: content-box; }
.navbar-toggler { border: 0;}
.navbar-toggler:focus { box-shadow: none;}
.dropdown-item.active, .dropdown-item:active { background-color: var(--blue); }

.card { border-radius: 1.5rem; }
.card-img, .card-img-top { border-top-left-radius: 1.5rem; border-top-right-radius: 1.5rem; }
.card-footer { background-color:transparent; border-top:0; }

.carousel-indicators [data-bs-target] {background-color: var(--blue); border-radius: 50%; margin: 0 10px; transition: opacity .6s ease;}
.carousel-control-next, .carousel-control-prev { opacity: .7;}

/* Fixed Smooth Product */ 
/* ================================================================== */
.sp-wrap { border: 0; background: none; max-width: 450px; margin: 0;}
.sp-thumbs a:link, .sp-thumbs a:visited {width: 80px;height: 80px;margin-top: 5px;}


/* Custom CSS */
/* ================================================================== */
html {
  -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
  scroll-behavior: smooth;
}

*, *:before, *:after { -webkit-box-sizing: inherit; -moz-box-sizing: inherit; box-sizing: inherit; }

body {
	font-family: var(--font_prompt);
  font-size: 16px;
  color: var(--gray);
  line-height: 1.5;
  overflow-x: hidden;
}

a, a:link, a:active, a:visited {
	color: var(--gray);
  text-decoration: none;
	transition: .25s ease-out;
  -webkit-transition: .25s ease-out;
}

a:hover { color: var(--orange); }

h1, h3, h4, h5 {
  font-family: var(--font_main);
  color: var(--blue);
  /* letter-spacing: 1px; */
}

.space { text-indent: 25px; }

.header_top {
  /* background-color: var(--light_blue); */
  background-color: #ddd;
  padding: 7px 0;
  filter: grayscale(1);
}
.font_prompt { font-family: var(--font_promt); }
.font_prompt_bold { font-family: var(--font_promt_bold); }
.font_blue { color: var(--blue); }
.font_orange { color: var(--orange); }
.font_red { color: var(--red); }
.font_gold { color: var(--gold); }
.font_green { color: var(--green); }

#bg_mainNav {
  background-color: rgba(255,255,255,0.92);
  backdrop-filter: blur(5px);
  z-index: 1030;
  transition: ease .2s;
  filter: grayscale(1);
}

#mainNav ul {
  border: 0; border-radius: 0;
  padding-bottom: 0; padding-top: 0;
}

#mainNav > ul > li > a {
  font-family: var(--font_promt_bold);
  color: var(--blue);
}

#mainNav > ul > li > a.active {
  color: var(--red);
}

#menu_th.active, #menu_en.active { border-bottom: 2px var(--blue) dotted; }

.cloud_divider {
  position: absolute;
  bottom: 0;
  z-index: 2;
  width: 100%; height: 155px;
  pointer-events: none;
  background-image: url("../images_main/cloud_divider.png");
  background-size: cover;
  background-position: center bottom;
}

.cloud_divider_header {
  position: absolute;
  bottom: 0;
  z-index: 2;
  width: 100%; height: 155px;
  pointer-events: none;
  background-image: url("../images_main/cloud_divider_header.png");
  background-size: cover;
  background-position: center bottom;
}

.bg_img01 { background-image: url("../images_main/bg_img01.jpg"); background-size: contain; }
.bg_img02 { background-image: url("../images_main/bg_img02.jpg"); background-size: contain; }
.bg_img03 { background-image: url("../images_main/bg_img03.jpg"); background-size: contain; }
.bg_img04 { background-image: url("../images_main/bg_img04.jpg"); background-size: contain; }

.img_hover01, .img_hover02 {
  /* box-shadow: 0 0 15px rgba(0, 0, 0, 0.15); */
  display: block; position: relative;
  transition: all 0.4s ease 0s;
}
.img_hover01:hover { box-shadow: 0 15px 30px rgb(0 0 0 / 15%); transform: translateY(50px); }
.img_hover02:hover { box-shadow: 0 15px 30px rgb(0 0 0 / 15%); transform: translateY(-10px); }

/* #bg_tv {
  background-image: url('../images_main/bg_cloud.jpg');
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: cover;
  background-attachment: fixed;
} */

.bg_white_mask::after { content: url(../images_main/white_mask.png); z-index: 1000; position: absolute; top: -3px; left: 0; }

#bg_sahagroup {
  background: url('../images_main/bg_sahagroup.jpg') no-repeat;
  background-size: cover; background-position: top center;
}

.color_dot { width:30px; height:30px; border-radius: 50%; border: 1px solid #dfdfdf; }

.circle {
  width: 200px; height: 200px; line-height: 140px; border-radius: 50%; text-align: center;
  background-color: #fff; box-shadow: 0 0 4.222rem rgb(82 190 229 / 24%);
}

#footer_logo { filter: opacity(100%) brightness(100) invert(0); }
/* #footer_menu { background-color: #23265d; }
#footer_menu a, #footer_menu a:link, #footer_menu a:active, #footer_menu a:visited { background-color: #23265d; color: #FFF; } */
#footer_menu { background-color: #292929; }
#footer_menu a, #footer_menu a:link, #footer_menu a:active, #footer_menu a:visited { background-color: #292929; color: #FFF; }
#footer_menu a:hover { color: #50cde1; }
#footer_menu h4 { font-family: var(--font_main); letter-spacing: 1px; font-size: 20px; }
.bg_red { background-color: var(--red); }
.font_credit { letter-spacing: 1px; font-size:11px; }


/* Shape Divider */
/* ================================================================== */
.custom-shape-divider-bottom-01 { position: absolute; bottom: 0; left: 0; width: 100%; overflow: hidden; line-height: 0; transform: rotate(180deg); }
.custom-shape-divider-bottom-01 svg { position: relative; display: block; width: calc(100% + 1.3px); height:95px; }
.custom-shape-divider-bottom-01 .shape-fill { fill: #FFFFFF; }


/* View Point for Screen */
/* ================================================================== */

/* X-Small devices (portrait phones, less than 576px) */
@media (min-width: 1px) {
  .font_small { font-size: 10px; }
  .cloud_divider, .cloud_divider_header { height: 40px; }
  #mainSlide .carousel-indicators { bottom: 10px;}
  .menu_dash_underline { border-bottom: 1px dashed #cacbdb; }
  .font_bottom_menu { font-size: 16px;}
  .img_hover01:hover { transform: translateY(25px) rotate(5deg);}
  .custom-shape-divider-bottom-01 svg { height:35px; }
  #tv_box { padding-top: 35px; }
  .font_size_chart_header { font-size: 16px;}
  .modal-title { font-size: 17px; }
  .carousel-indicators [data-bs-target] {width: 10px; height: 10px; margin: 0 8px;}
} /* End Media */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  #mainSlide .carousel-indicators { bottom: 20px;}
  .font_bottom_menu { font-size: 13px;}
  .img_hover01:hover { transform: translateY(37px) rotate(5deg);}
  .custom-shape-divider-bottom-01 svg { height: 50px; }
  .font_size_chart_header { font-size: 20px;}
  .modal-title { font-size: 1.5rem; }
}  /* End Media */

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
	.cloud_divider, .cloud_divider_header { height: 90px; }
  #mainSlide .carousel-indicators { bottom: 40px;}
  .font_bottom_menu { font-size: 16px;}
  .img_hover01:hover { transform: translateY(50px) rotate(5deg);}
  custom-shape-divider-bottom-01 svg { height: 75px; }
} /* End Media */

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
	.font_small { font-size: 12px; }
  .cloud_divider, .cloud_divider_header { height: 110px; }
  #mainSlide .carousel-indicators { bottom: 40px;}
  .menu_dash_underline { border-bottom: 0; }
  .img_hover01:hover { transform: translateY(35px) rotate(5deg);}
  .custom-shape-divider-bottom-01 svg { height: 95px; }
  .carousel-indicators [data-bs-target] {width: 15px; height: 15px; margin: 0 10px;}
} /* End Media */

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .cloud_divider, .cloud_divider_header{ height: 120px; }
	#mainSlide .carousel-indicators { bottom: 65px;}
  #footer_menu h4 {font-size: 1.5rem;}
  .img_hover01:hover { transform: translateY(40px) rotate(5deg);}
} /* End Media */

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
  .cloud_divider, .cloud_divider_header { height: 155px; }
  #mainSlide .carousel-indicators { bottom: 75px;}
  .img_hover01:hover { transform: translateY(55px) rotate(5deg);}
} /* End Media */


/* View Point for Print */
/* ================================================================== */
@media print {
	
	/* Object not display when printing Ex Navbar */
	.noprint { display: none !important; }
	
	/* Fixed link underline */
	a, a:visited { text-decoration: underline; }

	/* Fixed URL after Link */
	a[href]:after { content: none; }
	
	/* Fixed Table Display */
	.table { border-collapse: collapse !important; }
	.table td,.table th { background-color: #fff !important; }
	.table-bordered th,	.table-bordered td { border: 1px solid #ddd !important;	}
	
	/* Fixed Bootstrap Display Grid */
	.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6,
    .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 { float: left; }
    .col-sm-12 { width: 100%; }
    .col-sm-11 { width: 91.66666666666666%; }
    .col-sm-10 { width: 83.33333333333334%; }
    .col-sm-9 { width: 75%; }
    .col-sm-8 { width: 66.66666666666666%; }
    .col-sm-7 { width: 58.333333333333336%; }
    .col-sm-6 { width: 50%; }
    .col-sm-5 { width: 41.66666666666667%; }
    .col-sm-4 { width: 33.33333333333333%; }
    .col-sm-3 { width: 25%; }
    .col-sm-2 { width: 16.666666666666664%; }
    .col-sm-1 { width: 8.333333333333332%; }
	
} /* end media print */

/* Fixed Animation */
/* ================================================================== */
.animate__animated.animate__delay-25s {
    -webkit-animation-delay: .25s;
    animation-delay: .25s;
    -webkit-animation-delay: calc(var(--animate-delay) * .25);
    animation-delay: calc(var(--animate-delay) * .25);
}

.animate__animated.animate__delay-5s {
    -webkit-animation-delay: .5s;
    animation-delay: .5s;
    -webkit-animation-delay: calc(var(--animate-delay) * .5);
    animation-delay: calc(var(--animate-delay) * .5);
}

.animate__animated.animate__delay-75s {
    -webkit-animation-delay: .75s;
    animation-delay: .75s;
    -webkit-animation-delay: calc(var(--animate-delay) * .75);
    animation-delay: calc(var(--animate-delay) * .75);
}

.animate__animated.animate__delay-1s {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
    -webkit-animation-delay: calc(var(--animate-delay) * 1);
    animation-delay: calc(var(--animate-delay) * 1);
}

.animate__animated.animate__delay-125s {
    -webkit-animation-delay: 1.25s;
    animation-delay: 1.25s;
    -webkit-animation-delay: calc(var(--animate-delay) * 1.25);
    animation-delay: calc(var(--animate-delay) * 1.25);
}

.animate__animated.animate__delay-15s {
    -webkit-animation-delay: 1.5s;
    animation-delay: 1.5s;
    -webkit-animation-delay: calc(var(--animate-delay) * 1.5);
    animation-delay: calc(var(--animate-delay) * 1.5);
}

.animate__animated.animate__delay-175s {
    -webkit-animation-delay: 1.75s;
    animation-delay: 1.75s;
    -webkit-animation-delay: calc(var(--animate-delay) * 1.75);
    animation-delay: calc(var(--animate-delay) * 1.75);
}

.animate__animated.animate__delay-225s {
    -webkit-animation-delay: 2.25s;
    animation-delay: 2.25s;
    -webkit-animation-delay: calc(var(--animate-delay) * 2.25);
    animation-delay: calc(var(--animate-delay) * 2.25);
}

.animate__animated.animate__delay-255s {
    -webkit-animation-delay: 2.5s;
    animation-delay: 2.5s;
    -webkit-animation-delay: calc(var(--animate-delay) * 2.5);
    animation-delay: calc(var(--animate-delay) * 2.5);
}

.animate__animated.animate__delay-275s {
    -webkit-animation-delay: 2.75s;
    animation-delay: 2.75s;
    -webkit-animation-delay: calc(var(--animate-delay) * 2.75);
    animation-delay: calc(var(--animate-delay) * 2.75);
}
/*
	animate__slow	2s
	animate__slower	3s
	animate__fast	800ms
	animate__faster	500ms
*/
.parallax-window { min-height: 60vh; background: transparent; }

/* Scroll Bar */ 
/* ================================================================== */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track {
  background: var(--light_gray);
  border-radius: 6px;
  /*box-shadow: inset 0 0 6px rgba(0,0,0,0.2);*/
}
::-webkit-scrollbar-thumb {
  border-radius: 6px;
  background: var(--blue);
}

/* Hamberger Menu */
/* ================================================================== */
.line { fill: none; stroke: black; stroke-width: 6; transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1), stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1); }
.line1 { stroke-dasharray: 60 207; stroke-width: 6; }
.line2 { stroke-dasharray: 60 60; stroke-width: 6; }
.line3 { stroke-dasharray: 60 207; stroke-width: 6; }
.opened .line1 { stroke-dasharray: 90 207; stroke-dashoffset: -134; stroke-width: 6; }
.opened .line2 { stroke-dasharray: 1 60; stroke-dashoffset: -30; stroke-width: 6; }
.opened .line3 { stroke-dasharray: 90 207; stroke-dashoffset: -134; stroke-width: 6; }

/* Shrink Logo */
/* ================================================================== */
#logo {
  max-width: 100%; transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out;
  /*filter: opacity(50%) brightness(0) invert(0);*/
  filter: grayscale(1);
}
#logo.shrink {
  max-width: 70px;
  /*filter: none;*/
  filter: grayscale(1);
}


/* Navbar Stroke Underline Animation */
/* ================================================================== */
#bg_mainNav ul li a, 
#bg_mainNav ul li a:before { 
  transition: width 0.45s ease 0s, left 0.45s ease 0s;
}

/* stroke - put class stoke into #div */
#bg_mainNav.stroke ul li a { position: relative; }
#bg_mainNav.stroke ul li a:before {
  position: absolute; bottom: 0; left: 0; right: 0;
  margin: auto; width: 0%; content: ""; display: block; color: transparent;
  background: var(--blue); height: 3px;
}
#bg_mainNav.stroke ul li a:hover:before { width: 100%; }


/* Slide Zoom Img Animation */
/* ================================================================== */
#mainSlide .carousel-inner .carousel-item img {
	-webkit-animation: zoomIn 15s;
	-o-animation: zoomIn 15s;
	animation: zoomIn 15s;
}

@keyframes zoomIn {
	from { transform: scale(1,1); }
	to { transform: scale(1.1, 1.1); }
}


/* Image Hover Effect */
/* ================================================================== */
.hover figure { 
  position: relative; overflow: hidden; 
  border-top-left-radius: 1.5rem; border-top-right-radius: 1.5rem; /* Fixed Bootstrap card border radius */
}
.hover figure img { max-width: 100%; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s; }
.hover figure:hover img { -moz-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); }


/* Selection Drag Mouse Background Color */
/* ================================================================== */
::selection {background-color: var(--red); color: #FFF;}