body{
background: #fff;
margin: 0;
padding: 0;
font-family: 'Prompt', sans-serif;
}
header{
z-index:5;
position: relative;
max-width: 1000px;
margin: 15px auto 5px auto;
padding: 7px;
padding-bottom:5px ;
background-color:#205272;
box-sizing: border-box;
border-radius: 4px;
box-shadow: 0 2px 5px rgba(0,0,0,.2)
}
.logoimg{
color:#7BE495;
height: 45px;
line-height: 60px;
padding-left: 12px;
box-sizing: border-box;
float: left;
}
.logo{
color:#A0CA68;
font-size: 14px;
line-height: 50px;
padding: 0 15px;
text-align: center;
box-sizing: border-box;
float: left;
font-weight: 700;
text-decoration: none;
}
.logo:hover{
transition: 0.3s;
color:#FFF;
font-size: 15px;
}
nav{
position: relative;
float: right;
padding-bottom:7px;
}
.clearfix{
clear: both;
}
nav ul{
margin: 0;
padding: 0;
display: flex;
}
nav .fa{
margin-right: 5px;
}
nav ul li{
list-style: none;
}
nav ul li a {
font-size: 10px;
display: block;
text-decoration: none;
color: #fff;
display: block;
margin-top: 10px;
padding: 8px 15px;
}
nav ul li a.active,
nav ul li a:hover{
background: #329D9C;
color: #fff;
transition: 0.5s;
}
nav ul li a:hover{
background: #329d9C;
color: #262626;
transition: 0.5s;
}
nav ul ul{
display: none;
text-decoration: none;
}
nav ul ul a{
font-size: 0.6vw;
margin: 0;
background:#FFF;
color:#069370;
}
nav ul ul a.active,
nav ul ul a:hover{
background: #329D9C;
color: #fff;
transition: 0.5s;
}
nav ul li:hover ul{
position: absolute;
display: block;
background:#fff;
color:#fff;
}
.sub a{
text-align: left;
color:skyblue;
background: #fff;
font-size: 10px;
margin-left: 8px;
padding-left: 15px;
}
/********************* scroll bar**************/
::-webkit-scrollbar {
width: 15px;
} /* this targets the default scrollbar (compulsory) */
::-webkit-scrollbar-track {
background-color:#205272;
} /* the new scrollbar will have a flat appearance with the set background color */
::-webkit-scrollbar-thumb {
background-color: #329D9C;
} /* this will style the thumb, ignoring the track */
::-webkit-scrollbar-button {
background-color: #329D9C;
} /* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */
::-webkit-scrollbar-corner {
background-color: black;
} /* if both the vertical and the horizontal bars appear, then perhaps the right bottom corner also needs to be styled */
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
@media (max-width:1020px)
{
header{
margin:15px;
}
}
/************************เธเธเธซเธเนเธฒเธเธญ เน€เธกเธเธนเธเธฒเธฃเน *************************************/
.slider {
margin: 0 auto;
max-width: 980px;
height: auto;
}
.slide_viewer {
height: 410px;
overflow: hidden;
position: relative;
}
.slide_group {
height: 100%;
position: relative;
width: 100%;
}
.slide {
display: none;
height: 100%;
position: absolute;
width: 100%;
}
.slide:first-child {
display: block;
}
.slide:nth-of-type(1) {
background:url(../img/activity/project62.9.jpeg);
background-size:cover;
background-position: center;
background-position-y: -120px;
}
.slide:nth-of-type(2) {
background:url(../img/activity/project61.2.jpg);
background-size:cover;
background-position: center;
background-position-y: -220px;
}
.slide:nth-of-type(3) {
background:url(../img/activity/project60.1.jpg);
background-size:cover;
background-position: center;
background-position-y: -100px;
}
.slide:nth-of-type(4) {
background:url(../img/activity/project51.19.jpg);
background-size:cover;
background-position: center;
background-position-y: -200px;
}
.slide:nth-of-type(5) {
background:url(../img/activity/project51.11.jpg);
background-size :cover;
background-position: center;
background-position-y: -200px;
}
.slide:nth-of-type(6) {
background:url(../img/activity/project59.3.jpeg);
background-size:cover;
background-position: center;
}
.slide:nth-of-type(7) {
background:url(../img/activity/project59.4.jpeg);
background-size:cover;
background-position: center;
}
.slide:nth-of-type(8) {
background:url(../img/activity/head1.jpg);
background-size:cover;
background-position: center;
background-position-y: -200px;
}
.slide:nth-of-type(9) {
background:url(../img/activity/head2.jpg);
background-size :cover;
background-position: center;
background-position-y: -200px;
}
.slide:nth-of-type(10) {
background:url(../img/activity/head3.jpg);
background-size:cover;
background-position: center;
background-position-y: -210px;
}
.slide:nth-of-type(11) {
background:url(../img/activity/head4.jpg);
background-size:cover;
background-position: center;
background-position-y: -200px;
}
.slide:nth-of-type(12) {
background:url(../img/activity/head5.jpg);
background-size:cover;
background-position: center;
}
.slide:nth-of-type(13) {
background:url(../img/activity/head6.jpg);
background-size:cover;
background-position: center;
background-position-y: -200px;
}
.slide:nth-of-type(14) {
background:url(../img/activity/head7.jpg);
background-size:cover;
background-position: center;
}
.slide:nth-of-type(15) {
background:url(../img/activity/head8.jpg);
background-size:cover;
background-position: center;
}
.slide:nth-of-type(16) {
background:url(../img/activity/head9.jpg);
background-size:cover;
background-position: center;
}
.slide:nth-of-type(17) {
background:url(../img/activity/mou01.jpg);
background-size:cover;
background-position: center;
}
.slide:nth-of-type(18) {
background:url(../img/activity/appraise.jpg);
background-size:cover;
background-position: center;
}
.slide:nth-of-type(19) {
background:url(../img/activity/shareKNL.jpg);
background-size:cover;
background-position: center;
background-position-y: -220px;
}
.slide:nth-of-type(20) {
background:url(../img/activity/act1.jpg);
background-size:cover;
background-position-x: -30px;
background-position-y: -200px;
}
.slide:nth-of-type(21) {
background:url(../img/activity/act3.jpg);
background-size:cover;
background-position: center;
background-position-y: -145px;
}
.slide:nth-of-type(22) {
background:url(../img/activity/act4.jpg);
background-size:cover;
background-position: center;
}
.slide:nth-of-type(23) {
background:url(../img/activity/act5.jpg);
background-size:cover;
background-position-x: 0px;
background-position-y: 0px;
}
.slide:nth-of-type(24) {
background:url(../img/activity/rally63012.jpg);
background-size:cover;
background-position: center;
background-position-x: 0px;
background-position-y: -170px;
}
.slide_buttons {
height: 6.5%;
margin: 0 auto;
max-width: 980px;
left: 0;
position: absolute;
right: 0;
text-align: center;
background: #D7A151;
}
a.slide_btn {
color: #474544;
font-size: 32px;
margin: 0 0.18em;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.slide_btn.active, .slide_btn:hover {
color: #428CC6;
cursor: pointer;
}
.directional_nav {
height: 340px;
margin: -150px auto;
max-width: 1130px;
position: relative;
top:-340px;
}
.previous_btn {
bottom: 0;
left: 100px;
margin: auto;
position: absolute;
}
.next_btn {
bottom: 0;
margin: auto;
position: absolute;
right: 85px;
text-justify: 50px;
}
.previous_btn, .next_btn {
cursor: pointer;
height: 20%;
opacity: 0.5;
-webkit-transition: opacity 0.4s ease-in-out;
-moz-transition: opacity 0.4s ease-in-out;
-ms-transition: opacity 0.4s ease-in-out;
-o-transition: opacity 0.4s ease-in-out;
transition: opacity 0.4s ease-in-out;
width: 65px;
}
.previous_btn:hover, .next_btn:hover {
opacity: 1;
}
@media only screen and (max-width: 920px) {
.slider{
display: block;
max-width:100%;
height: auto;
}
.slide_viewer{
width:100%;
height: 350px;
}
}
@media only screen and (max-width: 776px) {
.slider{
display: block;
max-width:100%;
height: 300px;
}
.slide_viewer{
width:100%;
height: 300px;
}
.slide_group {
height: 100%;
position: relative;
width: 100%;
}
.slide {
display: none;
height: 100%;
position: absolute;
width: 100%;
}
.previous_btn {
top:115%;
left: 50px;
}
.next_btn {
top: 115%;
right: 50px;
}
.directional_nav {
max-width: 100%;
}
a.slide_btn {
color: #474544;
font-size: 25px;
margin: 0 0.175em;
}
.slide:nth-of-type(1) {
background-size:cover;
background-position-y:0px;;
}
.slide:nth-of-type(2) {
background-size:cover;
background-position: center;
}
.slide:nth-of-type(3) {
background-size:cover;
background-position: center;
}
.slide:nth-of-type(4) {
background-size:cover;
background-position: center;
}
.slide:nth-of-type(5) {
background-size:cover;
background-position: center;
}
.slide:nth-of-type(6) {
background-size:cover;
background-position: center;
}
.slide:nth-of-type(7) {
background-size:cover;
background-position: center;
}
.slide:nth-of-type(8) {
background-size:cover;
background-position: center;
}
.slide:nth-of-type(9) {
background-size:cover;
background-position: center;
}
.slide:nth-of-type(10) {
background-size:cover;
background-position: center;
}
.slide:nth-of-type(11) {
background-size:cover;
background-position: center;
}
.slide:nth-of-type(12) {
background-size:cover;
background-position: center;
}
.slide:nth-of-type(13) {
background-size:cover;
background-position: center;
}
.slide:nth-of-type(14) {
background-size:cover;
background-position: center;
}
.slide:nth-of-type(15) {
background-size:cover;
background-position: center;
}
}
/**********************end slider***************************************/
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.carousel {
width: 800px;
margin: 30px auto;
}
.carousel h1 {
font-size: 36px;
margin: 0px 0px 30px 0px;
font-weight: normal;
}
.carousel h2{
font-size: 16px;
}
.carousel .box {
margin: 15px;;
float: left;
width: 100%;
margin-bottom: 20px;
}
.carousel .box p {
font-size: 11px;
color: #979797;
text-align: center;
margin: 0;
}
.carousel .box p img {
width: 100%;
height: 150px;
margin-bottom: 10px;
margin: auto;
transition: .3s;
}
.carousel .box p:hover img {
transform: scale(1.1);
}
.slick-prev, .slick-next {
background: url(../img/arrows.png);
width: 20px;
height: 31px;
position: absolute;
top: 30%;
display: block;
padding: 0;
cursor: pointer;
color: transparent;
border: none;
outline: none;
z-index: 100;
}
.slick-prev {
background-position: 0px;
left: -25px;
}
.slick-next {
background-position: -22px;
right: -25px;
}
@media only screen and (max-width: 1180px) {
.carousel {
width: 90%;
}
}
/********************************end block news and green news*****************/
/*********************** start content***********************************/
.container{
z-index:10;
max-width: 980px;
width: 100%;
margin: 0 auto;
background: fff;
}
.content{
z-index:10;
margin-top: 20px;
width: 100%;
height: auto;
background: fff;
}
.content-heading{
background-color: #fff;
font-size: 24px;
color: black;
margin-top: 50px;
padding: 10px 0 0 20px;
}
.content-heading p{
margin: 0;
padding: 0;
font-size: 17px;
color: black;
font-weight: 550;
}
.descrip{
position:relative;
margin: 0;
width: 100%;
height: auto;
}
.descrip-grid{
background: rgb(255, 255, 255);
display: grid;
grid-template-columns:repeat(2,1fr);
grid-gap:1rem;
height: auto;
}
.descrip-item:nth-child(1){
padding: 10px 20px 10px 20px;
height: 260px;
border: 1px solid #e4e4e4;
background: #fff;
}
.descrip-item:nth-child(2){
height:260px;
background: #fff;
}
.descrip-item iframe{
width: 100%;
height:280px;
border-radius: 2px;
}
.descrip-item p{
color: #474544;
font-size:11px;;
}
.vdo-pbru{
margin-top:30px;
position: relative;
width: 100%;
height: auto;
}
.vdo-grid{
margin:0px;
display: grid;
grid-template-columns: repeat(2,1fr);
grid-template-rows: repeat(1,1fr);
grid-gap:1rem;
}
.vdo-item{
height: 130px;
background: #fff;
}
.vdo-item iframe{
width: 100%;
height:125px;
}
.vdo-pbru{
margin-top:30px;
position: relative;
width: 100%;
height: auto;
}
.vdo-pbru-grid{
margin:20px;
display: grid;
grid-template-columns: repeat(4,1fr);
grid-gap:1rem;
}
.vdo-pbru-item{
height: 125px;
background: #fff;
}
.vdo-pbru-item iframe{
width: 100%;
height:130px;
}
/*****************present news*********************/
.present-new{
margin-top: 40px;
width: 100%;
height:auto;
text-align: left;
}
.present-new-grid{
margin-top:20px;
display: grid;
grid-template-columns:repeat(5,1fr);
text-align: left;
grid-gap:1rem;
}
.present-new-item{
margin: 0;
overflow: hidden;
display: block;
border: 1px solid #e4e4e4;
padding: 10px 10px;
transition: .3s ease-in-out;
background: #fff;
cursor: pointer;
}
.present-new-item a{
margin: 0;
overflow: hidden;
display: block;
}
.present-new-item img{
width: 100%;
height: 150px;
transition: 300ms;
}
.present-new-item:hover img{
transform: scale(1.3);
}
.present-new-item:hover p{
padding-top: 20px;
font-size: 14px;
color: #262626;
}
.present-new-item p{
position: relative;
font-size: 12px;
color:#979797;
transition: .3s;
}
.present-new-item:hover{
border: 1px solid #40aed7;
padding: 20px 20px;
transition: .3s ease-in-out;
background: #fff;
cursor: pointer;
}
.btn-present-new{
width: 100%;
height: auto;
display: grid;
grid-template-areas: 1fr;
justify-items: center;
margin-top:5%;
}
.btn-present-new li{
list-style: none;
}
.btn-present-new li a{
color: #000;
text-decoration: none;
transition: .2s ease-in-out;
padding: 5px 10px;
font-size: 11px;
border: 1px solid #069370;
border-radius: 2px;
}
.btn-present-new li:hover a{
font-size: 12px;
padding: 5px 10px;
border-radius: 5px;
color: #fff;
background:#069370;
border-radius: 3px;
}
.btn-seeall{
width: 100%;
height: auto;
display: grid;
grid-template-areas: 1fr;
justify-items:right;
}
.btn-seeall li{
list-style: none;
}
.btn-seeall li a{
color: #000;
text-decoration: none;
transition: .2s ease-in-out;
padding: 5px 10px;
font-size: 11px;
border: 1px solid #40aed7;
border-radius: 2px;
}
.btn-seeall li:hover a{
font-size: 13px;
padding: 5px 10px;
border-radius: 5px;
color: #fff;
background:#40aed7;
border:2px solid #40aed7;
border-radius: 3px;
}
.new{
width: 100%;
height: auto;
}
.new-grid{
margin-top: 1rem;
margin-bottom: 2rem;
display: grid;
grid-template-columns: repeat(4,1fr);
grid-gap:1rem;
}
.new-item{
box-shadow: 1px 4px 5px #d1d1d1;
border: 1px solid #e4e4e4;
padding: 20px 20px;
background: #fff;
}
.new-item img{
width: 100%;
height: auto;
}
.new-item:hover{
border-radius: 5px;
transition: 0.3s;
background: #262626;
color: #D1D1D4;
}
.btn{
position: relative;
width: 100%;
height: auto;
display: block;
justify-items: center;
margin-top: 6%;
}
.btn li{
list-style: none;
}
.btn li a{
background: #fff;
font-size: 16px;
color: #000;
text-decoration: none;
transition: .2s ease-in-out;
padding: 5px 10px;
border: 1px solid #d1d1d1;
border-radius: 5px;
}
.new-item .btn:hover li a{
font-size: 16px;
padding: 5px 10px;
border-radius: 5px;
color: #fff;
background:#fde05d;
border:2px solid#fde05d;
border-radius: 3px;
}
.policy1{
background-color:#d1d1d1;
width: 100%;
height: auto;
}
.policy1-grid{
margin-bottom: 20px;
display: grid;
grid-template-columns:repeat(2,1fr);
grid-gap: 2rem;
}
.policy1-item{
width: 100%;
height: 100%;
}
.policy1-grid img{
padding: 0%;
margin: 0%;
width:100%;
height:100%;
}
.policy1 h2{
text-align: center;
font-size: 18px;
}
.policy1 h3{
text-align:center;
font-size: 13px;
}
.policy1 h4{
text-align: center;
font-size: 11px;
padding-right: 5%;
}
.policy1 p{
margin-right: 5%;
text-align:justify;
font-size: 11px;
}
.policy2{
background-color:#329D9C;
width: 100%;
height: auto;
}
.policy2-grid{
margin-bottom: 0px;
display: grid;
grid-template-columns:repeat(2,1fr);
}
.policy2-item{
width: 100%;
height: 100%;
}
.poliframe{
padding-top: 2%;
padding-left:5%;
padding-right:5%;
}
.policy2-grid img{
padding: 0;
margin: 0;
width:100%;
height:auto;
}
.policy2 h2{
text-align: center;
font-size: 1.5vw;
color: rgb(245, 245, 245);
}
.policy2 h3{
color: #fff;
text-align:center;
font-size: 14px;
}
.policy2 h4{
color: #fff;
text-align: center;
font-size: 1.02vw;
padding-right: 5%;
}
.policy2 p{
color: #fff;
margin-left: 5%;
padding-top: 2%;
margin-right: 5%;
text-align:justify;
font-size: 11px;
}
.policy{
margin-top: 10%;
background-color: #069370;
width: 100%;
height: auto;
text-align: center;
}
.policy-grid{
margin-bottom: 0px;
display: grid;
grid-template-columns: 1fr;
padding: 5px 20px 10px 20px;
}
.policy h2{
margin: 1%;
color: #fff;
padding: 0px;
font-size: 16px;
text-align: center;
}
.policy h3{
color: #fff;
font-size: 0.6vw;
text-align: left;
padding-left: 25px;
}
.policy h4{
color: #fff;
font-size: 5vw;
text-align: center;
}
.policy span{
color: #fff;
display: inline-block;
padding-top:10px;
padding-bottom: 20px;
font-size: 1.05vw;
text-align:left;
}
.policy p{
color: #fff;
font-size: 1.05vw;
text-align:left;
}
.policy-g{
text-align: center;
width: 100%;
height:auto;
}
.policy-g img{
width: 30%;
height: auto;
}
.policy-g h3{
color: #069370;
font-size: 16px;
margin: 0;
padding-left: 20px;
}
.policy-g-grid{
padding:20px 155px;
padding-bottom: 40px;
display: grid;
grid-template-columns:repeat(3,1fr);
text-align: center;
grid-gap:1rem;
}
.policy-g-item{
border-radius: 10%;
border: 1px solid #e4e4e4;
padding: 20px 20px;
transition: .3s;
background-color: #1d8eb8;
cursor: pointer;
}
.policy-g-item .fa{
font-size: 5rem;
color: #FDD741;
}
.policy-g-item h2{
transition: 0.5s;
font-size: 12px;
text-transform: uppercase;
color:#eff5be;
margin:20px 0;
transition: 0.3s;
}
.policy-g-item p{
text-align:justify;
font-size: 8px;
color:#fff;
text-indent: 30px;
transition: 0.3s;
}
.policy-g-item a{
list-style: none;
text-decoration: none;
color: #069370;
display: none;
}
.policy-g-item:hover a{
display: block;
}
.policy-g-item:hover{
border: 1px solid #40aed7;
padding: 20px;
background: #58c2e9;
border-radius: 3%;
transition: 0.3s;
}
.policy-g-item:hover h2{
transition: 0.3s;
font-size: 13.5px;
text-transform: uppercase;
color: #fff;
margin:20px 0;
}
.policy-g-item:hover p{
font-size: 10px;
color:#fff;
transition: 0.3s;
}
.policy-r{
text-align: center;
width: 100%;
height:auto;
}
.policy-r img{
width: 30%;
height: auto;
}
.policy-r h3{
color: #069370;
font-size: 16px;
margin: 0;
padding-left: 20px;
}
.policy-r-grid{
padding-bottom: 40px;
padding-left:27%;
padding-right:27%;
display: grid;
grid-template-columns:repeat(2,1fr);
vertical-align: middle;
grid-gap:1.5rem;
}
.policy-r-item{
margin-top: 10%;
background-color: #40aed7;
border-radius: 10%;
border: 1px solid #e4e4e4;
padding: 20px 20px;
transition: .3s ease-in-out;
}
.policy-r-item .fa{
font-size: 5rem;
color: #ffea97;
}
.policy-r-item h2{
transition: 0.3s;
font-size: 12px;
text-transform: uppercase;
color: #fde5b0;
margin:20px 0;
}
.policy-r-item p{
text-align:justify;
font-size: 10px;
color:#e9e9e9;
text-indent: 30px;
transition: 0.3s;
}
.policy-r-item a{
list-style: none;
text-decoration: none;
color: #069370;
display: none;
}
.policy-r-item:hover a{
display: block;
}
.policy-r-item:hover{
border: 1px solid #40aed7;
padding: 20px;
background: #58c2e9;
border-radius: 3%;
}
.policy-r-item:hover .fa{
transition: 0.3s;
color:#fff;
}
.policy-r-item:hover h2{
font-size: 14px;
text-transform: uppercase;
color: #fff;
margin:20px 0;
}
.policy-r-item p{
font-size: 10px;
color:#fff;
transition: 0.3s;
}
.policy-r-item:hover p{
font-size: 10px;
color:#fff;
transition: 0.3s;
}
.policy-L{
text-align: center;
width: 100%;
height:auto;
}
.policy-L img{
width: 30%;
height: auto;
}
.policy-L h3{
color: #069370;
font-size: 16px;
margin: 0;
padding-left: 20px;
}
.policy-L-grid{
padding-bottom: 70px;
padding:20px 40px;
display: grid;
grid-template-columns:repeat(4, 1fr);
text-align: center;
grid-gap: 1rem;
padding-bottom: 30px;
margin-bottom: 30px;
}
.policy-L-item{
border-radius: 10%;
border: 1px solid #e4e4e4;
padding: 20px 20px;
transition: .3s ease-in-out;
background-color: #006083;
cursor: pointer;
}
.policy-L-item .fa{
font-size: 5rem;
color: #FDD741;
}
.policy-L-item h2{
transition: 0.3s;
font-size: 12px;
text-transform: uppercase;
color: #b9db7a;
margin:20px 0;
}
.policy-L-item a{
transition: 0.5s;
list-style: none;
text-decoration: none;
color: #069370;
display: none;
}
.policy-L-item:hover a{
transition: 0.5s;
display: block;
}
.policy-L-item:hover{
border: 1px solid #40aed7;
padding: 20px;
background: #58c2e9;
border-radius: 5px;
}
.policy-L-item:hover .fa{
color:#fff;
}
.policy-L-item:hover h2{
transition: 0.3s;
font-size: 14px;
text-transform: uppercase;
color: #fff;
margin:20px 0;
}
.policy-L-item p{
text-align: justify;
font-size: 10px;
color:#fff;
transition: 0.3s;
}
.policy-L-item:hover p{
font-size: 10px;
color:#fff;
transition: 0.3s;
}
.activity{
margin-top: 5%;
width: 100%;
height:auto;
text-align: center;
}
.activity-grid{
padding-top: 30px;
padding-bottom:30px;
padding-left: 50px;
padding-right: 50px;
margin-top:20px;
display: grid;
grid-template-columns:repeat(4,1fr);
text-align: center;
grid-gap:2rem;
}
.activity-item{
margin: 0;
overflow: hidden;
display: block;
border: 1px solid #e4e4e4;
padding: 6px 6px 8px 6px;
transition: .3s ease-in-out;
background: #fff;
cursor: pointer;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.activity-item a{
margin: 0;
overflow: hidden;
display: block;
}
.activity-item img{
width: 100%;
height: 115px;
transition: 300ms;
}
.activity-item:hover img{
transform:scale(1.3);
}
.activity-item:hover p{
transition: 0.3s;
color: #262626;
padding-top: 20px;
}
.activity-item p{
transition: 0.3s;
position: relative;
font-size: 10px;
color:#979797;
}
.activity-item:hover{
border: 1px solid none;
padding: 20px 20px;
transition: .3s ease-in-out;
background: #fff;
cursor: pointer;
}
.btn-activity{
width: 100%;
height: auto;
display: grid;
grid-template-areas: 1fr;
justify-items: center;
margin-top: 6%;
}
.btn-activity li{
list-style: none;
}
.btn-activity li a{
transition: 0.3s;
color: #006083;
text-decoration: none;
padding: 5px 11px;
font-size: 10px;
border: 1px solid #069370;
border-radius: 2px;
}
.btn-activity li:hover a{
transition: 0.3s;
font-size: 12px;
padding: 5px 10px;
border-radius: 5px;
color: #fff;
background:#069370;
border-radius: 3px;
}
/*******************************end content***************************/
/*****************************pic hover **********************************/
/*****************************end pic hover **********************************/
/******************************start footer*********************/
.footer {
padding: 13px;
text-align: center;
background: #329D9C;
margin-top: 20px;
}
.footer p {
font-size: 13px;
color: #f1f1f1;
padding: 0;
margin: 0;
}
/******************************end footer*************************/
/************************* start group btn********************/
.gbtn{
padding-right: 4%;
float: right;
margin-bottom: 7%;
margin-top: 1%Fpicc-item;
}
.gbtn ul{
margin: 0;
padding: 0;
display: flex;
}
.gbtn ul li{
border: 1px solid #e4e4e4;
list-style: none;
}
.gbtn ul li a {
background: #262626;
font-size: 14px;
display: block;
padding: 10px 0;
text-decoration: none;
color: #fff;
display: block;
padding: 10px 20px;
}
.gbtn ul li a.active,
.gbtn ul li a:hover{
background: #069370;
color: #fff;
transition: 0.5s;
}
.gbtn ul li a:hover{
background: #069370;
color: #262626;
transition: 0.5s;
}
/**********************end group btn****************/
@media (max-width:800px)
{
.menu-toggle{
display:block;
width: 30px;
height: 30px;
margin: 10px;
background:#ccc;
float:right;
cursor: pointer;
text-align: center;
font-size: 20px;
color: #069370;
}
.menu-toggle:before{
content:'\f0c9';
font-family: fontAwesome;
line-height: 0px;
}
.menu-toggle.active:before{
content:'\f00d';
}
nav{
margin-top: 5px;
display: none;
}
nav.active{
display: block;
width: 100%;
}
nav.active ul{
display: block;
}
nav.active ul li a{
text-align: left;
margin: 0;
}
nav.active ul li {
margin-bottom: 2px;
}
nav ul ul{
margin-bottom: 0;
display: none;
margin-left: 20px;
}
nav ul li:hover ul{
display: block;
position: relative;
}
.sub.active{
display: block;
padding-left: 6px;
}
.logoimg {
margin-top: 10px;
color: #069370;
height: 30px;
line-height: 20px;
padding-left: 5px;
box-sizing: border-box;
float: left;
}
.logo {
color:#A0CA68;
font-size: 12px;
line-height: 50px;
padding: 0 15px;
text-align: center;
box-sizing: border-box;
float: left;
font-weight: 700;
text-decoration: none;
}
.logo:hover{
font-size: 13px;
}
nav ul ul a
{
font-size: 10px;
}
.descrip-grid{
display: block;
}
.vdo-pbru-grid{
grid-template-columns: 1fr 1fr;
}
.btn-present-new li a{
font-size: 11px;
}
.btn-present-new li a:hover{
font-size: 12px;
border: 1px solid #40aed7;
}
.btn-seeall li a{
font-size: 11px;
}
.btn-seeall li a:hover{
font-size: 13px;
border: 1px solid #40aed7;
}
.btn-activity li a{
font-size: 0.7vw;
}
.btn-activity li a:hover{
font-size: 0.8vw;
}
.policy-r-grid{
display: block;
}
.policy-r-item .fa{
font-size: 3rem;
}
.policy-r-item{
margin-bottom: 20px;
}
.policy-g-grid{
padding-left: 25%;
padding-right: 25%;
display: block;
}
.policy-g-item{
margin-bottom: 20px;
}
.policy-L-grid{
padding-left: 25%;
padding-right: 25%;
display: block;
}
.policy-L-item{
margin-bottom: 20px;
}
.activity-grid{
grid-template-columns: repeat(3,1fr);
}
.activity-item:hover{
padding: 15px 10px;
}
.activity-item img{
height: 110px;
}
.activity-item:hover p{
font-size:11px;
}
.policy p{
font-size: 14px;
}
.policy span{
font-size: 15px;
}
.carousel .box p img{
height: 130px;
}
.policy2-grid{
margin-bottom: 0px;
display: grid;
grid-template-columns:repeat(1,1fr);
}
footer{
font-size: 0.6rem;
}
}
@media (max-width:680px)
{
.activity-grid{
grid-template-columns:repeat(2,1fr);
}
.activity-item img{
height: 120px;
}
.activity-item p{
font-size: 10px;
}
.activity-item:hover{
padding: 10px 10px;
}
}
@media (max-width:450px)
{
.activity-grid{
grid-template-columns:repeat(1,1fr);
}
.activity-item img{
height: 150px;
}
}