@charset "UTF-8";
/* ERB30ers */

html, body { margin: 0 0 30px 0 ; font-family: Arial, Helvetica, "Microsoft JhengHei", Heiti, sans-serif; background:#e6e9f0;}

h1 { color:#FFF; font-size:1.9em; display:block; line-height:1em; letter-spacing:5px;
margin: 0 0 20px 0; padding: 12px 30px; border-radius : 8px;
background: rgb(0,0,0); background: linear-gradient(45deg, rgba(67,151,223,1) 22%, rgba(230,233,240,1) 22%); 
}

h3 { color:#FFF; font-size:1.9em; display:block; line-height:1em; letter-spacing:5px;
margin: 0 0 20px 0; padding: 12px 30px; border-radius : 8px;
background: rgb(0,0,0); background: linear-gradient(45deg, rgba(113,196,96,1) 22%, rgba(230,233,240,1) 22%); 
}

h4 { color:#FFF; font-size:1.9em; display:block; line-height:1em; letter-spacing:5px;
margin: 0 0 20px 0; padding: 12px 30px; border-radius : 8px;
background: rgb(0,0,0); background: linear-gradient(45deg, rgba(244,114,41,1) 22%, rgba(230,233,240,1) 22%); 
}


h2 { color:/*#f2743f*/#00887A; font-size:2.5em; padding:0; margin:10px 0; vertical-align:middle; letter-spacing:2px;}
h2 img { width:40px; height:40px; vertical-align:middle; padding:0 12px 6px 12px; }

h2.eng { color:/*#f2743f*/#00887A; font-size:2em; padding:0; margin:10px 0; vertical-align:middle; letter-spacing:0px; text-align:left !important;}
h2.eng img { width:40px; height:40px; vertical-align:middle; padding:0 12px 6px 12px; }



.to-top{ position:fixed; right:60px; bottom:100px; width:40px; height:40px; background:url(../images/totop.png) no-repeat; cursor:pointer; z-index:900; background-size: 40px 40px;}

.fixed { margin:0 auto;position: fixed; top: 0; left:0; width:100%; z-index:999; background:#FFF;}

.speech {    
background: #fe8c00;  
background: -webkit-linear-gradient(to right, #f83600, #fe8c00); 
background: linear-gradient(to right, #f83600, #fe8c00); 
	position: relative;
    color: #FFFFFF;
    font-size: 1.4em;
    line-height: 30px;
    text-align: center;
    width: calc(100% - 30px);
    height: auto;
    border-radius: 5px;
    padding: 10px 15px;
	margin:20px 0 30px 0;
	letter-spacing:2px;
}
.speech:after {
    content: '';
    position: absolute;
    display: block;
    width: 0;
    z-index: 1;
    border-style: solid;
    border-color: #fe8c00 transparent;
    border-width: 20px 12px 0;
    bottom: -20px;
    left: 4%;
    margin-left: -10px;
}

#wrapper { margin: 0 auto; width:1400px; padding:0 25px 25px 25px; 
border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;
background:#FFF; }
#top-container { height:160px; padding: 25px 35px 20px 0; }
#logo-container { width:auto; margin:0 auto; display:table; }
#logo-container > div { display:inline-block; }
.erblogo { padding-right:0; vertical-align:top;}
.erblogo img { height:140px; width:auto;  }
.mainheading { padding-left:25px; }
.mainheading img { height:155px; width:auto; }

#nav-container { padding:0; }
.topnav { display: flex; justify-content: center; width:100%; overflow: hidden; 
border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;  
box-shadow: rgba(0, 0, 0, 0.2) 0px 25px 25px -20px; 
}

.topnav a {
  float: left;
  display: inline-block;
  color: #00897A;
  text-align: center;
  padding: 15px 30px;
  margin: 0 ;
  text-decoration: none;
  font-size: 1.2em;
  letter-spacing:2px;
  font-weight:500; 
  border-left: dotted 1px #CCC;
}
.topnav a:nth-last-child(2) { border-right: dotted 1px #CCC;}

.topnav a:hover { background-color: #F27333; color: #FFF; transition: 0.3s; }
.topnav a.active { background-color:#00897A; color: #FFF;}
.topnav .icon { display: none; }

.Mainbanner {}
.MainVisual { width: 100%; height: auto; border-radius:5px; }

.mainpagetxt { padding:50px 170px; text-align:center; font-size:1.2em; line-height:1.6em; letter-spacing:1px; color:#000; }
.mainpagetxt span { display:block;}
.quickbox{
  display: grid;
  grid-template-columns: auto auto auto ;
  padding: 5px 50px; grid-gap: 15px; justify-items: center; 
}

/*.quickbox { min-height:200px; width:auto; margin:0 auto; display:table; }*/

/*.box1, .box2, .box3 { display:inline-block; width:400px; padding:12px; }*/
.box1 img, .box2 img, .box3 img { width:100%; height:auto;  border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; }
.box-txt1, .box-txt2, .box-txt3 { display:block; color:#FFF; font-size:1.7em; border-top-left-radius: 10px; border-top-right-radius: 10px; padding: 8px 20px;}
.box-txt1 { background:#4397DF; }
.box-txt2 { background:#74C365; }
.box-txt3 { background:#F27336; }

.socialmedia { text-align:center; padding: 0 0 15px 0; }
.socialmedia ul { list-style:none; margin:0;  }
.socialmedia ul li { display: inline-block; padding: 10px 15px; }
.socialmedia ul li img { height:40px; padding-right:5px; vertical-align:middle;}
.socialmedia ul li a { text-decoration:none; vertical-align:middle; color:#000; }
.socialmedia ul li a:hover { color:#F27333; }

#footer { background:#F2F2F2; text-align:center; border-radius:10px; padding:25px 20px; margin:20px 0 0 0; display:block;  }
#footer p { margin:0; padding:15px 0 0 0; font-size:0.9em; border-top : solid 1px #DDD; }

.insidepagetxt { min-height:300px; border-radius:10px; padding:0; text-align:justify; font-size:1.1em; line-height:1.3em; letter-spacing:1px; color:#333; }

.insidepagetxt iframe { text-align:center; width:800px; height:450px; margin:0 auto; display:block;padding:30px 0;}

/* story grid*/
.cover-container {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto;
  padding: 10px; grid-gap: 10px;
}

.photo-container {
  position: relative;display : inline-block;
  width: auto;
  height:auto;
}

.cover-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}

/*cover style - blue*/
.photo-container:hover .cover-overlay1 { opacity: 0.85; border-radius : 4px; }

.cover-overlay1 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
background-image: linear-gradient(to top, #95BDE9 0%, #e7f0fd 100%);
}

.photo-text1 {
  width:85%;
  color: #004C8F;
  font-size: 1.4em;
  position: absolute;
  top: 60%;
  left:50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
  font-weight:bold;
}
.photo-text1 p { margin:10px 0;}
.photo-text1 p.post { font-size:0.7em !important; font-weight:normal !important; }


/*cover style - yellow*/
.photo-container:hover .cover-overlay2 { opacity: 0.85; border-radius : 4px; }

.cover-overlay2 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-image: linear-gradient(180deg, #f6d365 0%, #FCAE18 100%);
}

.photo-text2 {
  width:85%;
  color: #713C23;
  font-size: 1.4em;
  position: absolute;
  top: 60%;
  left:50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
  font-weight:bold;
}
.photo-text2 p { margin:10px 0;}
.photo-text2 p.post { font-size:0.7em !important; font-weight:normal !important; }


/*cover style - orange*/
.photo-container:hover .cover-overlay3 { opacity: 0.85; border-radius : 4px; }

.cover-overlay3 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
 background-image: linear-gradient(180deg, #ff9a44 0%, #F36C3F 100%);
}

.photo-text3 {
  width:85%;
  color: #6F0104;
  font-size: 1.4em;
  position: absolute;
  top: 60%;
  left:50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
  font-weight:bold;
}
.photo-text3 p { margin:10px 0;}
.photo-text3 p.post { font-size:0.7em !important; font-weight:normal !important; }


/*cover style - green*/
.photo-container:hover .cover-overlay4 { opacity: 0.85; border-radius : 4px; }

.cover-overlay4 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-image: linear-gradient(180deg, #c1dfc4 0%, #89C388 100%);
}

.photo-text4 {
  width:85%;
  color: #204B1B;
  font-size: 1.4em;
  position: absolute;
  top: 60%;
  left:50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
  font-weight:bold;
}
.photo-text4 p { margin:10px 0;}
.photo-text4 p.post { font-size:0.7em !important; font-weight:normal !important; }


/* story details*/
.story-container { padding:20px 65px; display: grid; grid-template-columns: 65% 35%; grid-gap: 25px;}
.story-text {}
.story-photo {}
.story-photo img { width:400px; height:auto; border-radius:8px; }
.story-text span { font-size: 1.5em; }
.story-text ul { padding:0; margin:0; list-style:none; font-weight:bold; }
.story-text ul li { padding:5px 0; border-bottom: dashed #CCC 1px; }
.story-text p { color:#666; line-height:1.5em; margin-bottom:40px; }


/*promotion*/
.promotion-wrap { padding:30px 80px; display: grid; grid-template-columns: 320px 320px 320px; grid-gap: 25px; }
.promotion-item {  }
.promotion-img { }
.promotion-img img { box-shadow: rgba(17, 17, 26, 0.15) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;}
.promotion-txt { font-size:1.2em; font-weight:bold; background:#f47229; display:inline-block; padding: 8px 30px; color:#FFF; border-top-right-radius:8px; border-top-left-radius:8px;}



/* button */
.click1 {
	border-radius: 5px;
	font-size: 17px;
	font-weight: bold;
	padding: 5px 25px;
	color:#FFF;
	border: 3px solid #FFF; 
	z-index : 11;
}
.click1:hover { background:none; color:#713C23; border: 3px solid #713C23; }
a.click1  { color:#FFF; }

         
.btn-grad {
  background: linear-gradient(to right, #00bf8f 0%, #146667  65%, #00bf8f  100%);
  margin: 10px 0;
  padding: 10px 40px;
  text-align: center;
  transition: 0.5s;
  background-size: 150% auto;
  color: #FFF;            
  border-radius: 20px;
  text-decoration:none;
}

.btn-grad:hover {
  background-position: right center; /* change the direction of the change here */
  color: #fff;
  text-decoration: none;
}

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

h1 { color:#FFF; font-size:1.9em; display:block; line-height:1em; letter-spacing:5px;
margin: 0 0 20px 0; padding: 12px 30px; border-radius : 8px;
background: rgb(0,0,0); background: linear-gradient(45deg, rgba(67,151,223,1) 28%, rgba(230,233,240,1) 28%); 
}

h3 { color:#FFF; font-size:1.9em; display:block; line-height:1em; letter-spacing:5px;
margin: 0 0 20px 0; padding: 12px 30px; border-radius : 8px;
background: rgb(0,0,0); background: linear-gradient(45deg, rgba(113,196,96,1) 28%, rgba(230,233,240,1) 28%); 
}

h4 { color:#FFF; font-size:1.9em; display:block; line-height:1em; letter-spacing:5px;
margin: 0 0 20px 0; padding: 12px 30px; border-radius : 8px;
background: rgb(0,0,0); background: linear-gradient(45deg, rgba(244,114,41,1) 28%, rgba(230,233,240,1) 28%); 
}

	
#wrapper { margin: 0 auto;  width: calc(100% - 50px); padding:0 25px 25px 25px; 
border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;
background:#FFF; }

#top-container { height:auto; padding: 30px 0 20px 0; }
#logo-container { width:auto; margin:0 auto; display:table; }
#logo-container > div { display:inline-block; }
.erblogo { padding-right:0; vertical-align:top; }
.erblogo img { height:135px;  width: auto;  }
.mainheading { padding-left:20px; margin-top:-10px;}
.mainheading img { height:140px; width: auto; }

#nav-container { padding:0; }
.topnav { display: flex; justify-content: center; width:100%; overflow: hidden; 
border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;  
box-shadow: rgba(0, 0, 0, 0.2) 0px 25px 25px -20px; 
}

.topnav a {
  float: left;
  display: inline-block;
  color: #00897A;
  text-align: center;
  padding: 15px 30px;
  margin: 0 ;
  text-decoration: none;
  font-size: 1.2em;
  letter-spacing:2px;
  font-weight:500; 
  border-left: dotted 1px #CCC;
}
.topnav a:nth-last-child(2) { border-right: dotted 1px #CCC;}

.topnav a:hover { background-color: #F27333; color: #FFF; transition: 0.3s; }
.topnav a.active { background-color:#00897A; color: #FFF;}
.topnav .icon { display: none; }

.mainpagetxt { padding:50px ; text-align:center; font-size:1.2em; line-height:1.55em; letter-spacing:1px; color:#000; }

/* story grid*/
.cover-container {
  display: grid;
  grid-template-columns: auto auto auto auto auto ;
  padding: 5px; grid-gap: 5px;
}

.photo-container {
  position: relative;display : inline-block;
  width: auto;
  height:auto;
}

/*cover style - blue*/
.photo-container:hover .cover-overlay1 { opacity: 0.85; border-radius : 4px; }

.cover-overlay1 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
background-image: linear-gradient(to top, #95BDE9 0%, #e7f0fd 100%);
}

.photo-text1 {
  width:80%;
  color: #004C8F;
  font-size: 1.4em;
  position: absolute;
  top: 60%;
  left:50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
  font-weight:bold;
}
.photo-text1 p { margin:10px 0;}
.photo-text1 p.post { font-size:0.7em !important; font-weight:normal !important; }


/*cover style - yellow*/
.photo-container:hover .cover-overlay2 { opacity: 0.85; border-radius : 4px; }

.cover-overlay2 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-image: linear-gradient(180deg, #f6d365 0%, #FCAE18 100%);
}

.photo-text2 {
  width:80%;
  color: #713C23;
  font-size: 1.4em;
  position: absolute;
  top: 60%;
  left:50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
  font-weight:bold;
}
.photo-text2 p { margin:10px 0;}
.photo-text2 p.post { font-size:0.7em !important; font-weight:normal !important; }


/*cover style - orange*/
.photo-container:hover .cover-overlay3 { opacity: 0.85; border-radius : 4px; }

.cover-overlay3 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
 background-image: linear-gradient(180deg, #ff9a44 0%, #F36C3F 100%);
}

.photo-text3 {
  width:80%;
  color: #6F0104;
  font-size: 1.4em;
  position: absolute;
  top: 60%;
  left:50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
  font-weight:bold;
}
.photo-text3 p { margin:10px 0;}
.photo-text3 p.post { font-size:0.7em !important; font-weight:normal !important; }


/*cover style - green*/
.photo-container:hover .cover-overlay4 { opacity: 0.85; border-radius : 4px; }

.cover-overlay4 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-image: linear-gradient(180deg, #c1dfc4 0%, #89C388 100%);
}

.photo-text4 {
  width:80%;
  color: #204B1B;
  font-size: 1.4em;
  position: absolute;
  top: 60%;
  left:50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
  font-weight:bold;
}
.photo-text4 p { margin:10px 0;}
.photo-text4 p.post { font-size:0.7em !important; font-weight:normal !important; }


/* story details*/

/*.story-container { padding:10px; display: flex;  gap: 0; flex-direction: column; flex-wrap :wrap}*/
.story-container { padding:20px; display: grid; grid-template-columns: auto auto; grid-gap: 25px;}
.story-photo { }
.story-photo img { width:400px; height:auto; } 
.story-text { width:100%;}
.story-text span { font-size: 1.5em; }
.story-text ul { padding:0; margin:0; list-style:none; font-weight:bold; }
.story-text ul li { padding:5px 0; border-bottom: dashed #CCC 1px; }
.story-text p { color:#666; line-height:1.5em; }


/*promotion*/
.promotion-wrap { padding:20px; display: grid; grid-template-columns: auto auto auto; grid-gap: 20px; }
.promotion-item {  }
.promotion-img { }
.promotion-img img { box-shadow: rgba(17, 17, 26, 0.15) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;}
.promotion-txt { font-size:1.2em; font-weight:bold; background:#f47229; display:inline-block; padding: 8px 30px; color:#FFF; border-top-right-radius:8px; border-top-left-radius:8px;}



}

@media screen and (max-width: 992px) and (min-width: 601px) {
.mainpagetxt span { display:inline-block;}

h1 { color:#FFF; font-size:1.9em; display:block; line-height:1em; letter-spacing:5px;
margin: 0 0 20px 0; padding: 12px 30px; border-radius : 8px;
background: rgb(0,0,0); background: linear-gradient(45deg, rgba(67,151,223,1) 40%, rgba(230,233,240,1) 40%); 
}

h3 { color:#FFF; font-size:1.9em; display:block; line-height:1em; letter-spacing:5px;
margin: 0 0 20px 0; padding: 12px 30px; border-radius : 8px;
background: rgb(0,0,0); background: linear-gradient(45deg, rgba(113,196,96,1) 40%, rgba(230,233,240,1) 40%); 
}

h4 { color:#FFF; font-size:1.9em; display:block; line-height:1em; letter-spacing:5px;
margin: 0 0 20px 0; padding: 12px 30px; border-radius : 8px;
background: rgb(0,0,0); background: linear-gradient(45deg, rgba(244,114,41,1) 40%, rgba(230,233,240,1) 40%); 
}

.insidepagetxt iframe { text-align:center; width:100%; height:450px; margin:0 auto; display:block;padding:30px 0;}


#top-container { height:auto; padding: 10px 0; }
#logo-container { width:auto; margin:0 auto; }
#logo-container > div { display:block; }
.erblogo { padding-left:10px; vertical-align:top; text-align:center;}
.erblogo img { height:125px; width:auto; }
.mainheading { padding-left:0; }
.mainheading img { height:130px; width:auto; }
.quickbox{
  display: grid;
  grid-template-columns: auto auto;
  padding: 5px; grid-gap: 15px;
}


/* story grid*/
.cover-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
  padding: 5px; grid-gap: 5px;
}

.photo-container {
  position: relative;display : inline-block;
  width: auto;
  height:auto;
}

/*cover style - blue*/
.photo-container:hover .cover-overlay1 { opacity: 0.85; border-radius : 4px; }

.cover-overlay1 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
background-image: linear-gradient(to top, #95BDE9 0%, #e7f0fd 100%);
}

.photo-text1 {
  width:80%;
  color: #004C8F;
  font-size: 1.4em;
  position: absolute;
  top: 60%;
  left:50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
  font-weight:bold;
}
.photo-text1 p { margin:10px 0;}
.photo-text1 p.post { font-size:0.7em !important; font-weight:normal !important; }


/*cover style - yellow*/
.photo-container:hover .cover-overlay2 { opacity: 0.85; border-radius : 4px; }

.cover-overlay2 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-image: linear-gradient(180deg, #f6d365 0%, #FCAE18 100%);
}

.photo-text2 {
  width:80%;
  color: #713C23;
  font-size: 1.4em;
  position: absolute;
  top: 60%;
  left:50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
  font-weight:bold;
}
.photo-text2 p { margin:10px 0;}
.photo-text2 p.post { font-size:0.7em !important; font-weight:normal !important; }


/*cover style - orange*/
.photo-container:hover .cover-overlay3 { opacity: 0.85; border-radius : 4px; }

.cover-overlay3 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
 background-image: linear-gradient(180deg, #ff9a44 0%, #F36C3F 100%);
}

.photo-text3 {
  width:80%;
  color: #6F0104;
  font-size: 1.4em;
  position: absolute;
  top: 60%;
  left:50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
  font-weight:bold;
}
.photo-text3 p { margin:10px 0;}
.photo-text3 p.post { font-size:0.7em !important; font-weight:normal !important; }


/*cover style - green*/
.photo-container:hover .cover-overlay4 { opacity: 0.85; border-radius : 4px; }

.cover-overlay4 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-image: linear-gradient(180deg, #c1dfc4 0%, #89C388 100%);
}

.photo-text4 {
  width:80%;
  color: #204B1B;
  font-size: 1.4em;
  position: absolute;
  top: 60%;
  left:50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
  font-weight:bold;
}
.photo-text4 p { margin:10px 0;}
.photo-text4 p.post { font-size:0.7em !important; font-weight:normal !important; }



.story-container { padding:20px; display: grid; grid-template-columns: auto ; grid-gap: 25px;}
.story-photo { }
.story-photo img { width:400px; height:auto;  } 
.story-text { width:100%;}
.story-text span { font-size: 1.5em; }
.story-text ul { padding:0; margin:0; list-style:none; font-weight:bold; }
.story-text ul li { padding:5px 0; border-bottom: dashed #CCC 1px; }
.story-text p { color:#666; line-height:1.5em; }

/*promotion*/
.promotion-wrap { padding:20px; display: grid; grid-template-columns: auto auto; grid-gap: 20px; }
.promotion-item {  }
.promotion-img { }
.promotion-img img { box-shadow: rgba(17, 17, 26, 0.15) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;}
.promotion-txt { font-size:1.2em; font-weight:bold; background:#f47229; display:inline-block; padding: 8px 30px; color:#FFF; border-top-right-radius:8px; border-top-left-radius:8px;}


}

@media screen and (max-width: 600px) {
html, body { margin: 0; }
.mainpagetxt span { display:inline;}

h1 { color:#FFF; font-size:1.9em; display:block; line-height:1em; letter-spacing:5px;
margin: 0 0 20px 0; padding: 12px 20px; border-radius : 8px;
background: rgb(0,0,0); background: linear-gradient(45deg, rgba(67,151,223,1) 50%, rgba(230,233,240,1) 50%); 
}

h3 { color:#FFF; font-size:1.9em; display:block; line-height:1em; letter-spacing:5px;
margin: 0 0 20px 0; padding: 12px 20px; border-radius : 8px;
background: rgb(0,0,0); background: linear-gradient(45deg, rgba(113,196,96,1) 50%, rgba(230,233,240,1) 50%); 
}

h4 { color:#FFF; font-size:1.9em; display:block; line-height:1em; letter-spacing:5px;
margin: 0 0 20px 0; padding: 12px 20px; border-radius : 8px;
background: rgb(0,0,0); background: linear-gradient(45deg, rgba(244,114,41,1) 50%, rgba(230,233,240,1) 50%); 
}


h2 { color:#00887A; font-size:2.3em; padding:0; margin:10px 0; vertical-align:middle; letter-spacing:0px;}
h2 img { width:40px; height:40px; vertical-align:middle; padding:0 10px 6px 10px; }

h2.eng { color:/*#f2743f*/#00887A; font-size:1.8em; padding:0; margin:10px 0; vertical-align:middle; letter-spacing:0px; text-align:left !important;}
h2.eng img { width:40px; height:40px; vertical-align:middle; padding:0 12px 6px 12px; }

	
#wrapper { margin: 0 auto; width: calc(100% - 20px); padding:0 10px 10px 10px; }
.topnav { display: table;  justify-content: center; width:100%; overflow: hidden;   
border-top:none; 
border-left:#E5E5E5 1px solid; 
border-right:#E5E5E5 1px solid; 
border-bottom:#E5E5E5 1px solid; 
}
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon { float: right; display: block; }
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0; 
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  
.topnav a { border-left: none; }
.topnav a:nth-last-child(2) { border-right: none;}
.topnav a.active { /*background-color:#FFF; color: #00897A;*/}

#top-container { height:auto; padding: 10px 0; }
#logo-container { width:auto; margin:0 auto; }
#logo-container > div { display:block; }
.erblogo { padding-left:20px; vertical-align:top; text-align:center;}
.erblogo img { height:125px; width:auto; }
.mainheading { padding-left:0; margin-top:-10px; }
.mainheading img { height:auto; width:100%; }

.quickbox{
  display: grid;
  grid-template-columns: auto;
  padding: 5px; grid-gap: 15px;
}

.socialmedia { text-align:center; padding: 0 0 15px 0; }
.socialmedia ul { list-style:none; margin:0;  }
.socialmedia ul li { display: block; padding: 10px 15px; }
.socialmedia ul li img { height:40px; padding-right:5px; vertical-align:middle;}
.socialmedia ul li a { text-decoration:none; vertical-align:middle; color:#000; }
.socialmedia ul li a:hover { color:#F27333; }
 #footer { background:#F2F2F2; text-align:center; border-radius:10px; padding:10px; margin:20px 0 0 0; display:block;  }
#footer p { margin:0; padding:15px 0 5px 0; font-size:0.9em; border-top : solid 1px #DDD; } 

.mainpagetxt { padding:30px 20px ; text-align:center; font-size:1.2em; line-height:1.55em; letter-spacing:1px; color:#000; }

/* story details*/
.story-container { padding:20px; display: grid; grid-template-columns: auto ; grid-gap: 25px;}
.story-photo { }
.story-photo img { width:calc(100% - 40px); height:auto;  } 
.story-text { width:100%;}
.story-text span { font-size: 1.5em; }
.story-text ul { padding:0; margin:0; list-style:none; font-weight:bold; }
.story-text ul li { padding:5px 0; border-bottom: dashed #CCC 1px; }
.story-text p { color:#666; line-height:1.5em; }

/*promotion*/
.promotion-wrap { padding:20px; display: grid; grid-template-columns: auto; grid-gap: 20px; }
.promotion-item {  }
.promotion-img { }
.promotion-img img { box-shadow: rgba(17, 17, 26, 0.15) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;}
.promotion-txt { font-size:1.2em; font-weight:bold; background:#f47229; display:inline-block; padding: 8px 30px; color:#FFF; border-top-right-radius:8px; border-top-left-radius:8px;}



.speech {    
background: #fe8c00;  
background: -webkit-linear-gradient(to right, #f83600, #fe8c00); 
background: linear-gradient(to right, #f83600, #fe8c00); 
	position: relative;
    color: #FFFFFF;
    font-size: 1.4em;
    line-height: 30px;
    text-align: center;
    width: calc(100% - 30px);
    height: auto;
    border-radius: 5px;
    padding: 10px 15px;
	margin:20px 0 30px 0;
}
.speech:after {
    content: '';
    position: absolute;
    display: block;
    width: 0;
    z-index: 1;
    border-style: solid;
    border-color: #fe8c00 transparent;
    border-width: 20px 12px 0;
    bottom: -20px;
    left: 4%;
    margin-left: -5px;
} 


/* story grid*/
.cover-container {
  display: grid;
  grid-template-columns: auto auto auto ;
  padding: 10px; grid-gap: 5px;
}

.photo-container {
  position: relative;display : inline-block;
  width: auto;
  height:auto;
}

/*cover style - blue*/
.photo-container:hover .cover-overlay1 { opacity: 0.85; border-radius : 4px; }

.cover-overlay1 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
background-image: linear-gradient(to top, #95BDE9 0%, #e7f0fd 100%);
}

.photo-text1 {
  width:85%;
  color: #004C8F;
  font-size: 1.2em;
  position: absolute;
  top: 60%;
  left:50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
  font-weight:bold;
}
.photo-text1 p { margin:3px 0;}
.photo-text1 p.post { font-size:0.7em !important; font-weight:normal !important; line-height:1.2em !important;}


/*cover style - yellow*/
.photo-container:hover .cover-overlay2 { opacity: 0.85; border-radius : 4px; }

.cover-overlay2 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-image: linear-gradient(180deg, #f6d365 0%, #FCAE18 100%);
}

.photo-text2 {
  width:85%;
  color: #713C23;
  font-size: 1.2em;
  position: absolute;
  top: 60%;
  left:50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
  font-weight:bold;
}
.photo-text2 p { margin:3px 0;}
.photo-text2 p.post { font-size:0.7em !important; font-weight:normal !important; line-height:1.2em !important;}


/*cover style - orange*/
.photo-container:hover .cover-overlay3 { opacity: 0.85; border-radius : 4px; }

.cover-overlay3 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
 background-image: linear-gradient(180deg, #ff9a44 0%, #F36C3F 100%);
}

.photo-text3 {
  width:85%;
  color: #6F0104;
  font-size: 1.2em;
  position: absolute;
  top: 60%;
  left:50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
  font-weight:bold;
}
.photo-text3 p { margin:3px 0;}
.photo-text3 p.post { font-size:0.7em !important; font-weight:normal !important; line-height:1.2em !important;}


/*cover style - green*/
.photo-container:hover .cover-overlay4 { opacity: 0.85; border-radius : 4px; }

.cover-overlay4 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-image: linear-gradient(180deg, #c1dfc4 0%, #89C388 100%);
}

.photo-text4 {
  width:85%;
  color: #204B1B;
  font-size: 1.2em;
  position: absolute;
  top: 60%;
  left:50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
  font-weight:bold;
}
.photo-text4 p { margin:3px 0;}
.photo-text4 p.post { font-size:0.7em !important; font-weight:normal !important; line-height:1.2em !important;}

 .insidepagetxt iframe { text-align:center; width:100%; height:450px; margin:0 auto; display:block;padding:30px 0;}
 
}