html{background: #333333;}
body{max-width:600px; margin: 0 auto; background: #fff; }
.img img{width: 100%; height:100%; object-fit:cover;}
.txt_red{color: darkred!important;}
.txt_blue{color: darkblue!important;}
a.link{ display: flex; align-items: center; justify-content: center; font-size: 20px; margin-top: 20px;}
a.link i{display: inline-block; width: 43px; height: 1px; background-color: #000; position: relative; margin-left: 10px;}
a.link i:after{content: ""; width: 10px; height: 10px; transform: rotate(45deg); border-top: 1px solid #000; border-right: 1px solid #000; display: block; position: absolute; right: 0; top: -5px;}

#hd {background: url(../img/randing/kenaf_after_bg.jpg) #333 bottom center/100% auto}
#hd #hd_wrapper{background:url("../img/randing/title_bg.jpg") no-repeat top center/100% auto;}
#hd ul#tnb{padding: 0 10px;position: relative;z-index: 999;}
#hd .area_top{}
#hd .vision{padding: 5% 10% 0 10%;}
#hd .vision .img{display: grid; grid-template-columns:1fr 1fr 1fr 1fr; z-index: 10; margin-top: 20px; position: relative; margin-bottom: -50px;}
#hd .vision .img p{width: 120%; aspect-ratio:1/1; border-radius: 50%; margin: 10% -10% -10% -10%; overflow: hidden;}
#hd .area_after{text-align: center; color: #fff; font-size: 3em; padding: 30% 10% 20% 10%; font-weight: 600;  }

#wrapper{font-size: 1.2em;}
#wrapper .title{font-size: 2em; text-align: center; margin-bottom: 30px;}
#wrapper .title,
#wrapper .title h4,
#wrapper .title h5{word-break: keep-all}

#wrapper section{padding: 60px 10px; }

#wrapper .btn{display: inline-block; background: #595959; color: #fff; border-radius: 4px; padding: 2px 10px; margin-left: 10px;}
#wrapper .vision{background:#a2b893;}
#wrapper .vision h3{font-size: 2em; text-align: center;}
#wrapper .vision .box{}
#wrapper .vision .box dl{background: rgba(0,0,0,0.05);padding: 20px 40px; border-radius: 20px;display: grid;grid-template-columns: 70px auto;}
#wrapper .vision .box dl:first-child{align-items: center;}
#wrapper .vision .box dl:first-child dd{font-size: 1.8em;}
#wrapper .vision .box dt{font-weight: 600;font-size: 1.3em;}
#wrapper .vision .box dd{padding: 0; margin: 0;}

#wrapper .bird_view{background: #1C1C1C; color: #fff;}
#wrapper .bird_view h4{ color: #ffd96f;}
#wrapper .slogan{background: #ffd96f;}
#wrapper .slogan .text p{font-size: 1.2em; font-weight: 600;}
#wrapper .slogan strong{color:#FF4040; display: inline-block; position: relative; }
#wrapper .slogan strong:before{content: ""; width: 4px; height: 4px; border-radius: 50%; background: #FF4040; position: absolute; top: 0; left: calc(50% - 2px);}
#wrapper .slogan .cus{background: rgba(0,0,0,0.1); text-align: center; padding: 20px; border-radius: 20px; margin-top: 20px; font-weight: 600;}
#wrapper .slogan .btn{width: 100%; display: block; padding: 20px; box-sizing: border-box; font-weight: 600;
    margin: 10px 0 0 0 ; border-radius: 20px; text-align: center;}
#wrapper .petition{background: #eee;}
#wrapper .link .img p{margin-bottom: 4px;}
#wrapper .card{background: #3b3c3f; color: #fff;}
#wrapper .card .img{margin-bottom: 20px;}
#wrapper .event{ border: 1px solid rgba(255,255,255,0.5); padding: 20px; font-size: 0.9em; border-radius: 4px; margin: 5px 0; background: rgba(0,0,0,0.1);}

@media screen and (max-width: 768px) {
    #hd .vision{position: 40px 10px;}
    #hd .vision .box dl{display: block; padding: 20px; text-align: center;}
    #hd .vision .box dl:first-child dd{font-size: 1.4em;}
    #hd .vision .box dt{margin-bottom: 10px;}
    #hd .vision .box dd{word-break: keep-all;}
    #hd .vision .img{display: grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr}
    #wrapper .title{font-size: 1.5em;}
}
@media screen and (max-width: 550px) {}