@import "font.css";
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 url("../img/bgtop.png") top center no-repeat; background-size:100%;
  color:#231f20; font-family: 'OzoneX';  min-width:320px;  overflow-x:hidden;
  font-weight: 400; font-size:40px; line-height:1.15;    }

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{ 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:#000000; }
a:visited{ text-decoration:none; color:#000000; }
a:hover{ text-decoration:none; color:#000000; }


#page{ display:block; position:relative; }
.content{ display:block; position:relative; width:86%; max-width:1640px;  margin:0 auto; }
.pagecontent{ 
   display:block; position:relative; background:url("../img/bgbtm.png") bottom center no-repeat; min-height:100vh ; background-size:100%;  }

.bxtxt1{ display:block; position:relative; text-align: center; padding:100px 0 0;  }
.bxtxt1 > .imgtxt1{ display:block; position:relative; width:76.6%; margin:0 auto; padding:0 0 52px;  }
.bxtxt1 > .imgtxt2{ display:block; position:relative; width:83%; margin:0 auto; padding:0 0 52px;   }
.bxtxt1 > .imgtxt3{ display:block; position:relative; width:66.67%; margin:0 auto; padding:0 0 39px;   }
.bxtxt1 > .imgtxt4{ display:block; position:relative; width:95%; margin:0 auto; }
 
.bxtxt2{  display:block; position:relative; margin-top:-8%;   }
.bxtxt2 > .bximg{ display:block; position:relative; width:71%; }
.bxtxt2 > .bxtxt{ display:block; position:absolute; top:0; left:0; right:0; bottom:0; z-index:3;  }
.bxtxt2 > .bxtxt > .tb{ display:table; position:relative; width:100%; height:100%; } 
.bxtxt2 > .bxtxt > .tb > .tc{ display:table-cell; position:relative; text-align:right; vertical-align:bottom; }
.bxtxt2 > .bxtxt .txtbx{ display:block; position:relative;  }
.bxtxt2 > .bxtxt .txtbx > .imgbx{ display:block; position:relative; width:53.69%; margin:0 0 0 auto; }
.bxtxt2 > .bxtxt .txtbx > .detailbx{ display:inline-block; position:relative; font-style: italic; font-weight:500;  }
 
.bxtxt2 .ullist{ list-style:none; padding: 0; width: 100%;  }
.bxtxt2 .ullist li{ text-align: right; position: relative;  padding-right:0; margin-bottom:0px; }
.bxtxt2 .ullist li::before {
  content: ""; display: inline-block;  
  width:10px; height:10px; background-color: #231f20; border-radius:50%; 
  margin-right:6px; vertical-align: middle; }


.bxtxt3{  display:block; position:relative; }
.bxtxt3 > .bximg{ display:block; position:relative; width:73.125%; margin:0 0 0 auto; }
.bxtxt3 > .bxtxt{ display:block; position:absolute; top:0; left:0; right:0; bottom:0; z-index:3;  }
.bxtxt3 > .bxtxt > .tb{ display:table; position:relative; width:100%; height:100%; } 
.bxtxt3 > .bxtxt > .tb > .tc{ display:table-cell; position:relative; text-align:left; vertical-align:bottom;  }
.bxtxt3 > .bxtxt .txtbx{ display:block; position:relative; padding:0 0 39px;  }
.bxtxt3 > .bxtxt .txtbx > .imgbx{ display:block; position:relative; width:58.6%; margin:0; }
.bxtxt3 > .bxtxt .txtbx > .detailbx{ display:inline-block; position:relative; font-style: italic; font-weight:500;  }
 
.bxtxt3 .ullist{ list-style: none; padding:0; text-align:left; }
.bxtxt3 .ullist li{ position: relative; padding-left: 25px; }
.bxtxt3 .ullist li::before {
  content: ""; display: inline-block;  
  width:10px; height:10px; background-color: #231f20; border-radius:50%; 
  margin-right:6px; vertical-align: middle;
  position: absolute; left: 5px; top:16px; }


.bxtxtbtm{ display: block; position:relative; width:72%; margin:0 auto; padding:80px 0 104px; }

#bxfooter{  display:block; position:relative; background:#000000; color:#e4e4e4; padding:52px 0; font-size:18px;  }
#bxfooter .txtlink{ font-weight:700; }
#bxfooter a{ color:#fff; transition:ease 0.5s;  }
#bxfooter a:hover{ color:#542e91; }
 
.hidden {
    opacity: 0;
    transform: translateY(50px); 
    transition: all 0.8s ease-in-out; 
}  
.show {
    opacity: 1;
    transform: translateY(0);
}

 /* Fade-in Animation สำหรับ Hero Text */
@keyframes fadeInHeader {
   from { opacity: 0; transform: scale(0.9); }
   to { opacity: 1; transform: scale(1); }
}

.hero-title {  animation: fadeInHeader 1.2s ease-out forwards; }
.scroll-hint{  animation: bounce 2s infinite; }

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-10px);}
    60% {transform: translateY(-5px);}
}
 
@media screen and (max-width:1600px){   
  body{ font-size:36px;   }		
}

@media screen and (max-width:1280px){  
	
body { background-size:100%;  font-size:32px;    }
   
.content{ width:80%; max-width:100%;  }
.pagecontent{ background-size:100%; }
 
.bxtxtbtm{ padding:60px 0 104px; }	
	
}

@media screen and (max-width:960px){  
	
body { font-size:28px;    }
   
.content{ width:86%;   }
	
.bxtxt1{ padding:65px 0 0;  }
.bxtxt1 > .imgtxt1{ width:80%; padding:0 0 39px;  }
.bxtxt1 > .imgtxt2{ width:86%;  padding:0 0 39px;   }
.bxtxt1 > .imgtxt3{ width:72%; padding:0 0 39px;   }
.bxtxt1 > .imgtxt4{ width:100%;  }


.bxtxt2{ margin-top:0;   }
.bxtxt2 > .bximg{ position:absolute; top:0; left:0; width:60%; }
.bxtxt2 > .bxtxt{ display:block; position:relative; } 
.bxtxt2 > .bxtxt > .tb > .tc{ vertical-align:middle; }
.bxtxt2 > .bxtxt .txtbx{ padding:52px 0; }
.bxtxt2 > .bxtxt .txtbx > .imgbx{ width:54%; }
 
.bxtxt3 > .bximg{ position:absolute; width:60%; top:0; right:0; }
.bxtxt3 > .bxtxt{ position:relative;  } 
.bxtxt3 > .bxtxt > .tb > .tc{ vertical-align:middle;  }
.bxtxt3 > .bxtxt .txtbx{ padding:0;  }
.bxtxt3 > .bxtxt .txtbx > .imgbx{ width:58%;  }
 
 
}

@media screen and (max-width:640px){  
	
body { font-size:20px; }
   
.content{ width:90%;   }
	
.bxtxt1{ padding:52px 0 0;  }
.bxtxt1 > .imgtxt1{ width:96%; padding:0 0 26px;  }
.bxtxt1 > .imgtxt2{ width:90%;  padding:0 0 26px;   }
.bxtxt1 > .imgtxt3{ width:90%; padding:0 0 16px;   }
 
.bxtxt2{ margin-top:0;   }
.bxtxt2 > .bximg{  top:10%; left:0; width:60%; } 
.bxtxt2 > .bxtxt .txtbx{ padding:65px 0 52px;  }
.bxtxt2 > .bxtxt .txtbx > .imgbx{ width:74%; }
.bxtxt2 > .bxtxt .txtbx > .detailbx {   width:96%;  }	
.bxtxt2 > .bxtxt .txtbx > .detailbx ul { padding:0;}
.bxtxt2 > .bxtxt .txtbx > .detailbx ul li div{ display:inline-block;  }
 
.bxtxt3 > .bximg{   width:60%; top:-26px; right:0; }
.bxtxt3 > .bxtxt{ position:relative;  } 
.bxtxt3 > .bxtxt > .tb > .tc{ vertical-align:middle;  }
.bxtxt3 > .bxtxt .txtbx{ padding:0;  }
.bxtxt3 > .bxtxt .txtbx > .imgbx{ width:76%;  }
.bxtxt3 > .bxtxt .txtbx > .detailbx ul li div{ display: inline-block; }
.bxtxt3 .ullist li{  padding-left: 25px; }
	
.bxtxt2 .ullist li::before { width:8px; height:8px; } 
.bxtxt3 .ullist li::before {width:8px; height:8px; top:8px; margin-right:0px;  left:10px;  }	
 
.bxtxtbtm{  width:100%;  padding:39px 0 65px; }

#bxfooter{ padding:39px 0;  }
 
}