html, body {
  bgcolor:#ffffff; margin: 0;
  padding: 0;
  box-sizing: border-box;
}
*, *::before, *::after {
  box-sizing: inherit;
}

div.MainCtn {position:relative; top:0px; left:0px; width:100%; height:auto; display:flex;flex-wrap:wrap; }

div.top-menu-container {position:relative; display:block; }
div.top-menu-container-MP {position:relative; display:none; }
	
/* These part of the css code for the new top-menu bar were saved into the construction-nav.css file in the css directory */

/* These part of the css code for the new top-menu bar were saved into the construction-nav.css file in the css directory */
 
div.ban-PCcnt {position: absolute; z-index:11; top:-90px; transform: translateY(-20px); left: 0; width: 100vw; display: block; }
div.ban-MPcnt {position:relative; display: none;}

img.ban-size  {width:95vw; height:auto; background-color:white; border-radius:2vw; }
div.SDCIntro, div.intro, div.addr 
				{position: absolute; z-index: 12; left:9.52vw; width:auto; height:auto; padding: 10px 15px; font-style:italic; 
				font-family: "Arial", "Helvetica", "sans-serif"; text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.8); line-height: 1.2;; 
			    border-radius: 1.1vw; transition: background-color 1s ease, transform 1s ease, opacity 1s ease; }
div.SDCIntro {top:9.15vw; font-size:1.9vw; color:white; font-weight:bold; background-color: rgba(255, 255, 255, 0.3); }
div.intro {top:13.2vw; font-size:1.54vw; color:white ; font-weight:normal;  background-color: rgba(255, 255, 255, 0); }
div.addr {top:26vw; font-size:2.05vw; color:#0000c0; font-weight:bold;  background-color: rgba(255, 255, 255, 0.5); }
div.zoom-img {display: none; opacity: 0; transform: scale(0.95); transition: opacity 0.6s ease, transform 0.6s ease; }

div.intro.active {color:black; background-color: rgba(255, 255, 255, 0.3); transform: scale(1.35); opacity: 1; }
div.intro.active div.zoom-img 
		{display: block; width: 25%; height: auto; color:black; margin: 10px auto 0; opacity: 0.7; transform: scale(1); }


div.to-smpl, div.to-inq  
              {position: absolute; z-index:12; top:28vw; width:auto; height:auto; }
div.to-smpl  {left:70%;  }
div.to-inq   {left:85%;  }

#smple { scroll-margin-top: 120px; }
#granite-vn { scroll-margin-top: 100px; }

/* ref PC viewpoint 1366 x 768 px, 1vw=13.66px 1vh=7.68px PC viewpoint */
a.inqa, a.inqb {font-size:1.17vw; color:white; padding: 0.37vw 0.37vw; border-radius:5px ; transition: background-color 0.8s ease;
                font-weight:normal; text-decoration:underline; font-family: "Arial", "Helvetica", "sans-serif"; 
				text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7); line-height: 1.2;  }
a.inqa			{background-color:#c00000 ; }
a.inqb 			{background-color:#0000c0 ; }
a.inqa:active, a.inqa:visited, a.inqb:active, a.inqa:visited {font-size:16px; color:white;}
a.inqa:hover, a.inqb:hover {font-size:1.20vw; color:black; text-decoration:none;  font-weight:bold; }

div.MP-content    {position:relative; display:none }
	
div.PC-content    {position:relative; display:block; top:25.0vw; left:0px; width:100vw; height:auto; display:flex;flex-wrap:wrap; }

div.Cnt-construct, div.PC-aboutus
					{position:relative; top:0; left:8vw; width:78vw; height:auto; padding-top:1.0vw; padding-bottom:1.5vw; 
					background-color: white ; font-size:clamp(8px, 1.8vw, 21px); color:#202020; font-weight:bold; 
					font-style:italic; font-family: "Arial", "Helvetica", "sans-serif"; line-height: 1.3;  }

div.MP-aboutus   {position:relative; display:none}

div.Cnt-Ban1, div.Cnt-Ban2, div.Cnt-Ban3, div.Cnt-Ban4  
		{position: relative; height: auto; padding-top: 0; padding-bottom: 20px; }
div.Cnt-Ban1  {width: 65.5%; padding-left:2.5vw; padding-right: 1vw; }
div.Cnt-Ban2  {width: 34.5%; padding-left:1vw; padding-right: 2.5vw; }
div.Cnt-Ban3  {width: 34.5%; padding-left:2.5vw; padding-right: 1vw; }
div.Cnt-Ban4  {width: 65.5%; padding-left:1vw; padding-right: 2.5vw; }

img.SDCvn { width: 100%;  height: auto;  display: block;  border-radius: 15px; }
/* Floating caption */
div.ban-caption {
  position: absolute;
  top: 8%;             /* adjust vertical position */
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: clamp(13px, 2.4vw, 20px);
  font-weight: bold;
  padding: 8px 16px;
  border-radius: 8px;
  text-align: center;
  font-family: "Arial", "Helvetica", sans-serif;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
  pointer-events: none;   /* lets clicks go through to the image */}

div.foot    {width:100%;height:auto; text-decoration:none; font-size:18px; color:#303030;
			font-family:"arial""Helvetica", "sans-serif";font-weight:normal; }



@media only screen and (max-width: 580px) {

html, body { bgcolor:#ffffff; margin: 0; padding: 0; box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

div.MainCtn {position:relative; top:0px; left:0px; width:100%; height:auto; display:flex;flex-wrap:wrap; }

div.top-menu-container {position:relative; display:none; }
div.top-menu-container-MP {position:relative; display:block; }
	
/* These part of the css code for the new top-menu bar were saved into the construction-nav.css file in the css directory */

/* These part of the css code for the new top-menu bar were saved into the construction-nav.css file in the css directory */

div.PC-blank-Cnt  {position:fixed ; z-index:10; top:0; left:0; width: 100vw; display: none; }
div.MP-blank-Cnt	{position:fixed ; z-index:10; display: none; }
div.PC-float-bar {position:fixed ; z-index:13; display:none; }


div.ban0-Cnt  {position:fixed; z-index:10; top:0; left:0; width: 100%; display:none ; }
div.float-buts {position:abolute; z-index:12; top:0; left:0; width:100%; display:none; }

div.ban-PCcnt {position: relative; top: 0; left: 0; width: 100%; display: none; }
div.ban-MPcnt {position:relative; top:0, left:0; width:100%; display: block; }
img.ban-size  {width:100%; height:auto; border-radius: 8px; }

div.SDCIntro, div.intro, div.addr 
              {position: absolute; z-index:3; left:25px; width:auto; height:auto; padding: 5px 5px;
              font-style:italic; font-family: "Arial", "Helvetica", "sans-serif";
			  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7); line-height: 1.2;  background-color: rgba(255, 255, 255, 0.3); 
			  border-radius: 10px; transition: background-color 1s ease, transform 1s ease, opacity 1s ease; }
div.SDCIntro {top:0; font-size:clamp(16px, 3.47vw, 40px); font-weight:bold; color:white; }
div.intro {top:50px; font-size:clamp(13px, 3.25vw, 39px); font-weight:normal; color:white; }
div.addr {top:200px; font-size:clamp(8px, 2.5vw, 24px); font-weight:bold; color:#0000c0; }
div.zoom-img {display: none; opacity: 0; transform: scale(0.95); transition: opacity 0.6s ease, transform 0.6s ease; }

div.intro.active { color:black; background-color: rgba(255, 255, 255, 0.75); transform: scale(1.3); opacity: 1; }
div.intro.active div.zoom-img {display: block; width: 30%; height: auto; margin: 10px auto 0; opacity: 1; transform: scale(1); }

div.to-smpl, div.to-inq  
              {position: absolute; z-index:3; top:208px; left:0; width:auto; height:auto; }
div.to-smpl  {left:63%;  }
div.to-inq   {left:86%;  }

div.PC-content  {position:relative; top:0px; left:0px; width:100%; height:auto; display:flex;flex-wrap:wrap; }	
div.Cnt-construct  {position:relative; top:0; left:8%; width:84%; height:auto; padding-top:1.5vw; padding-bottom:1.5vw; 
					background-color: rgba(255, 255, 255, 0.75); font-size:clamp(8px, 2vw, 24px); color:#303030; font-weight:normal; font-style:italic; 
					font-family: "Arial", "Helvetica", "sans-serif"; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7); line-height: 1.2;  }

a.inqa, a.inqb {font-size:10px; color:white; 
        padding-left:2px;padding-top:1px; padding-right:2px; padding-bottom:1px;
        font-weight:normal; text-decoration:underline; font-family: "Arial", "Helvetica", "sans-serif";}
a.inqa {background-color:#c00000; }
a.inqb {background-color:#0000c0; }
a.inqa:active, a.inqb:active, a.inqa:visited, a.inqb:visited {font-size:10px; color:white; }
a.inqa:hover,focus {font-size:10px; color:black; background-color:#ff3f3f; }
a.nqb:hover,focus  {font-size:10px; color:black; background-color:#3f3fff; }

#smple, #granite-vn {scroll-margin-top: 70px; }

div.PC-aboutus  {position: relative; display: none; }
div.Cnt-Ban1, div.Cnt-Ban2, div.Cnt-Ban3, div.Cnt-Ban4  
		{position: relative; height: auto; padding-top: 0; padding-bottom: 30px; }
div.Cnt-Ban1  {width: 100%; padding-left:1.5vw; padding-right: 1.5vw; }
div.MP-aboutus  {position:relative; top:0; left:0; width:100%; padding-top:0; padding-bottom:30px; padding-left:7vw; padding-right:7vw; display:block; 
				background-color: rgba(255, 255, 255, 0.75); font-size:clamp(8px, 1.67vw, 21px); color:#303030; font-weight:normal; font-style:italic; 
				font-family: "Arial", "Helvetica", "sans-serif"; text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7); line-height: 1.2;  }
div.Cnt-Ban2  {width: 50%; padding-left:1.5vw; padding-right: 0; }
div.Cnt-Ban3  {width: 50%; padding-left:0 ; padding-right: 1.5vw; }
div.Cnt-Ban4  {width: 100%; padding-left:1.5vw; padding-right: 1.5vw; }

img.SDCvn { width: 97%;  height: auto;  display: block;  border-radius: 8px; }

div.Cnt-Ban1 {
  position: relative; /* important for positioning the caption */
  width: 100%;
  height: auto;
  padding-top: 0;
  padding-bottom: 30px;
  padding-left: 2%;
  padding-right: 0.5%;
}

div.Cnt-Ban1 img.SDC {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}
/* Floating caption */
div.ban-caption {
  position: absolute;
  top : 2vw;             /* adjust vertical position */
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: clamp(8px, 2vw, 24px);
  font-weight: bold;
  padding: 4px 6px;
  border-radius: 4px;
  text-align: center;
  font-family: "Arial", "Helvetica", sans-serif;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
  line-height: 1.2; 
  pointer-events: none;   /* lets clicks go through to the image */
}

div.Cnt-Ban2 {width:50%; height:auto; padding-top:0; padding-bottom: 0; padding-left:0; padding-right:0; }
div.Cnt-Ban3 {width:50%; height:auto; padding-top:0; padding-bottom: 0; padding-left:0; padding-right:0; }
img.SDC {width:100%; height:auto; }
img.demo {width:100%; height:auto; }


div.Cnt-Ban4 {width:100%; height:auto; padding-top:0; padding-bottom: 0; padding-left:0; padding-right:0; }