@import url('https://fonts.googleapis.com/css2?family=Aboreto&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

html, body, div{ margin:0; padding:0; }
html { 
	-ms-text-size-adjust: 100%; 
	-webkit-text-size-adjust: 100%;
	-webkit-box-sizing: border-box;
	box-sizing: border-box; 
}
*,
*:before,
*:after {
	-webkit-box-sizing: inherit;
	box-sizing: inherit;
}

body {
  margin: 0; padding: 0; width:100%; background:#ffffff;
  color:#242424; font-family: "Montserrat", sans-serif; min-width:320px; overflow-x:hidden;
  font-weight: 400; font-size:18px; line-height:1.6;    }
.fontH{ font-family: "Aboreto"; }

img{ border:none; max-width:100%; outline:0; vertical-align:middle;  }
:focus { outline:0; }
a:active { outline:none; }
.word-wrap { word-wrap: break-word; } 
.clear{ clear:both; }
.clearvdo{ clear:both; }
.box, .bx{ display:block; position:relative; }
.boxleft, .left{ float:left; }
.boxright, .right{ float:right; }

.txt-center{ text-align:center; }
.txt-left{ text-align:left; }
.txt-right{ text-align:right; }

.table{ display:table; width:100%; margin:0; padding:0; position:relative; }
.table-row{ display:table-row; }
.table-cell{ display:table-cell; }

a:link{ text-decoration:none; color:#242424; }
a:visited{ text-decoration:none; color:#242424; }
a:hover{ text-decoration:none; color:#242424; }

 
h1,.h1{ font-size:288.89%; line-height:1; padding:0; margin:0; font-weight:normal; }
h2,.h2{ font-size:200%; line-height:1; padding:0; margin:0; font-weight:normal; }
h3,.h3{ font-size:166.67%; line-height:1; padding:0; margin:0; font-weight:normal; }
h4,.h4{ font-size:144%; line-height:1; padding:0; margin:0; font-weight:normal; } 
h5,.h5{ font-size:133%; line-height:1; padding:0; margin:0; font-weight:normal; }
h6,.h6{ font-size:88.89%; line-height:1; padding:0; margin:0; font-weight:normal; }  

#page{ display:block; position: relative; }
.content{ display:block; position: relative; max-width:1780px; width:92.7%; margin:0 auto; }

#bxheader{ display:block; position:relative; top:0; left:0; right:0; z-index:60; }

.bxheader{ display:block; position:relative; }
.bxheader > .tb{ display:table; position:relative; width:100%; }
.bxheader > .tb > .tcl{ display:table-cell; position:relative; width:50%; vertical-align: top; }
.bxheader > .tb > .tcr{ display:table-cell; position:relative; width:50%; vertical-align: top; text-align: right; }
.bxheader > .tb > .tcl > .bxlogo{ display:block; position:relative; width:76.4%; margin-top:6.48%;  }
.bxheader > .tb > .tcl > .bxlogo > a{ display:block; position:relative; }
.bxheader > .tb > .tcr > .bxnav{ display:inline-block; position:relative; color:#242424; margin-top:3.33%; }
 
.bxheader > .tb > .tcr > .bxnav > div{ display:inline-block; position:relative; margin:0 6px; }
.bxheader > .tb > .tcr > .bxnav a{ color:#242424; transition:ease 0.5s; }

.bxheader > .tb > .tcr > .bxnav a.activ{ font-weight:bold; }
.bxheader > .tb > .tcr > .bxnav a:hover{ opacity:0.5; }
.bxheader > .tb > .tcr > .bxnav a.activ:hover{ opacity:1; }


#bxheader.pagehome{ position:fixed; top:0; left:0; right:0; z-index:60; }
#bxheader.pagehome .bxheader > .tb > .tcr > .bxnav{ color:#fff; }
#bxheader.pagehome .bxheader > .tb > .tcr > .bxnav a{ color:#fff; }

.menubx{ display:none; position:relative; vertical-align: middle;   } 
.bxnavmb{ display:none; position: relative; transition:ease 0.5s; z-index:899;   } 
#navmb{ 
  display:inline-block; width:32px; height:22px; position: relative; margin:0; cursor: pointer; vertical-align:middle; 
  -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;  }
#navmb span {
  display:block; position:absolute; height:3px; width:100%; background:#242424; opacity:1; left:0; vertical-align:middle; 
  -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;   }
#navmb span:nth-child(1) {
  top: 0px; -webkit-transform-origin: left center; -moz-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center; }
#navmb span:nth-child(2) {
  top: 9px;-webkit-transform-origin: left center; -moz-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center; }
#navmb span:nth-child(3) {
  top:18px; -webkit-transform-origin: left center; -moz-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center; }

#navmb.open span:nth-child(1) {
  -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); top:0px; left:0px; }
#navmb.open span:nth-child(2){ width:0%; opacity:0; }
#navmb.open span:nth-child(3){
  -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); top:22px; left: 0px; width:100%; }

#bxheader.pagehome #navmb span{ background:#fff;  }
#bxnavmobile{ display:none; }


#bxfooter{ display:block; position:relative; padding:52px 0 26px; }
.bxfooter{ display:block; position:relative; }
.bxfooter > .tbbx{ display:table; position:relative; width:100%;  }
.bxfooter > .tbbx > .tcl{ display:table-cell; position:relative; width:50%; vertical-align:top; }
.bxfooter > .tbbx > .tcr{ display:table-cell; position:relative; width:50%; vertical-align:top;  text-align:right; }
.bxfooter > .tbbx > .tcl > .bx{ display:block; position:relative;    }
.bxfooter > .tbbx > .tcr > .bx{ display:inline-block; position:relative; color:#7f7f7f; line-height:1.2; margin-right:3.65%; text-align: left; font-size:122%; }
.bxfooter > .tbbx > .tcr > .bx > .bxsocial{ display:block; position:relative; padding:6px 0 0; }
.bxfooter > .tbbx > .tcr > .bx > .bxsocial > a{ margin-right:10px; }
.bxfooter > .copybx{ display:block; position:relative; color:#7f7f7f; padding:39px 0 0; }
.bxfooter a{ color:#000; transition:ease 0.5s;  }
.bxfooter a:hover{ opacity:0.5;  }



#bxhome{ display:block; position:relative;  }
#bxslide{ display:block; position:relative; background:#242424;  }
#bxslide .slidebx{  display:block; position: relative; height:100vh; width:100%; background:#242424;  }
 
 
.homebx{ display:block; position:relative; width:100%; height:100%; color:#fff; margin-left:-1px;  }
.homebx > .bximg{ display:block; position:relative; width:50%; height:100%; float:left;  }
.homebx > .bximg > .imgbx{ display:block; position:relative; width:100%; height:100%; }
.homebx > .bxtxt{ display:block; position:relative; width:50%; height:100%; float:left; }
.homebx > .bxtxt > .bx{ display:block; position:relative; width:82.9%; margin:0 auto; top:20%; }
.bxhometxt{ display:block; position:relative; }
.bxhometxt > .mname{ display:block; position:relative; padding:0 0 20px; }
.bxhometxt > .catname{ display:block; position:relative; padding:0 0 36px; }
.bxhometxt > .catname.h1{ font-weight:700; }
.bxhometxt > .name{ display:block; position:relative; padding:0 0 46px; font-weight:700; }
.bxhometxt > .name > .desc{ font-weight:400;}
.bxhometxt > .link{ display:block; position:relative; padding:0 0 0; }
.bxhometxt > .link a{ color:#fff; transition:ease 0.5s; }
.bxhometxt > .link a:hover{ opacity:0.5; }

.animated-text {
    opacity: 0;
   transform: translateY(30px); /*  Start 30px below */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out; /* Smooth transition */
}
.animated-img{
    opacity: 0;
   transform: translateY(-30px);  /*  Start 30px below */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out; /* Smooth transition */
} 

#bxhomebile{ display:none; }

#bxpageinner{ display:block; position:relative; margin:52px 0; }

.bxhead{ display:none; position:relative; text-align: center; font-weight:700; padding:0 0 20px; }
.bxcatname{ display:block; position:relative; text-align: center; padding:0 0 52px; }
.bxcatname > a{ transition:ease 0.5s; }
.bxcatname > a:hover{ opacity:0.5; }
.bxcatname > a.selcat{ font-weight:700; }
.bxcatname > a.selcat:hover{ opacity:1; }
.bxcatname > .line{ display:inline-block; margin:0 16px; }

.bxgallery{ display:block; position:relative;   }
.gallerybxlist{ 
    display: grid;
    /* สร้างคอลัมน์แบบ Responsive:
       - auto-fill: จะสร้างคอลัมน์ให้เต็มพื้นที่เท่าที่จะทำได้
       - minmax(180px, 1fr): แต่ละคอลัมน์มีขนาดขั้นต่ำ 180px และขยายได้สูงสุดเท่ากับ 1fr (ส่วนแบ่งเท่าๆ กัน) หน้าจอขนาดใหญ่จะมีหลายคอลัมน์ และหน้าจอเล็กจะมีคอลัมน์น้อยลงโดยอัตโนมัติ */
    grid-template-columns: repeat(auto-fill, minmax(9.8%, 1fr)); 
    gap: 3px; /* ระยะห่างระหว่างรูปภาพทั้งแนวตั้งและแนวนอน */
    padding: 0 0 104px; /* Padding ภายใน Grid เพื่อให้รูปภาพไม่ชิดขอบมากเกินไป */
}
.gallerybxlist > .bxitem{
    /* เทคนิคการสร้าง Aspect Ratio 2:3:
       - อัตราส่วน 2:3 หมายถึง กว้าง 2 หน่วย, สูง 3 หน่วย
       - ถ้า width เป็น 100% (ของตัวเอง)
       - height จะเป็น (3 / 2) * 100% = 150% ของ width
       - เราใช้ padding-bottom แทน height เพื่อให้อัตราส่วนคงที่และ responsive */
    width: 100%; /* ทำให้ item กินพื้นที่เต็มความกว้างของคอลัมน์ Grid */
    padding-bottom: 104%; /* (3 / 2) * 100% = 150% */
    
    position: relative; /* จำเป็นสำหรับรูปภาพที่ position absolute */
    overflow: hidden; /* สำคัญ: ซ่อนส่วนที่เกินของรูปภาพที่ถูกครอป */
 
}
.gallerybxlist > .bxitem img{ 
    position: absolute; /* จัดตำแหน่งรูปภาพให้อยู่ในคอนเทนเนอร์ photo-item */
    top: 0;
    left: 0;
    width: 100%; /* ทำให้รูปภาพกินพื้นที่เต็มความกว้างของ photo-item */
    height: 100%; /* ทำให้รูปภาพกินพื้นที่เต็มความสูงของ photo-item */
    
    /* object-fit: cover; คือคุณสมบัติสำคัญที่ทำให้รูปภาพถูก "ครอป" */
    /* รูปภาพจะถูกปรับขนาดให้เต็มพื้นที่ของ parent โดยรักษาสัดส่วน และตัดส่วนที่เกินออกไป */
    object-fit: cover; 
    
    /* object-position: center center; (ค่าเริ่มต้น) จะทำให้รูปภาพถูกจัดกลางก่อนครอป */
    /* หากต้องการครอปจากมุมอื่น เช่น object-position: top; */
    object-position: center center; 
    
    display: block; /* แก้ปัญหาช่องว่างเล็กๆ ใต้รูปภาพที่เกิดจาก inline-block */
    user-select: none; /* ป้องกันการเลือกรูปภาพด้วยเมาส์ */
}
.gallerybxlist > .bxitem > a.thumbbx{ transition:ease 0.5s; }
.gallerybxlist > .bxitem > a.thumbbx:hover{ opacity:0.3; }


.bxpageload{ display:block; position:absolute; bottom:0; left:0; right:0; text-align:center; padding:0; width:100%; }
.bxpageload > a{ transition:ease 0.5s; cursor: pointer; }
.bxpageload > a:hover{ opacity:0.5; }

.bxbiography{ display:block; position:relative; }
.bxbiography > .bximg{ display:block; position:relative; width:26%; float:left; }
.bxbiography > .bximg > .bx{ display:block; position:relative; width:90%;  }
.bxbiography > .bxtxt{ display:block; position:relative; width:74%; float:left; }
.bxbiography > .bxtxt > .bx{ display:block; position:relative; width:93.5%;  }
.bxbiography > .bxtxt > .bx b, 
.bxbiography > .bxtxt > .bx strong{ font-weight:700; }

#topcontrol{ z-index:199; }
#btntop{ 
	display:block; position: relative; width:16px; height:25px; text-align: center; bottom:42px; right:36px;  
	background: url("../img/icon-top.png"); background-size:100%; 
    -webkit-transform: translateY(0px); transform: translateY(0px); transition: ease 0.5s; }
#btntop:hover{ -webkit-transform: translateY(-12px); transform: translateY(-12px);  }