@charset "utf-8";
@font-face{font-family:Roboto; src:url('font/Roboto-Regular.ttf');}
@font-face{font-family:Roboto; font-weight:bold; src:url('font/Roboto-Bold.ttf');}
@font-face{font-family:Roboto; font-style:italic; src:url('font/Roboto-Italic.ttf');}


body{padding:0; margin:0; font-family:Roboto; font-size:1.1em; height: 100vh;}
a{text-decoration:inherit; color:inherit;}
a:hover{text-decoration:underline;}

.hs{display:flex; align-items:center; justify-content:center; margin:70px 0 0 0; padding:20px 0; position:relative; text-align:center; flex-direction:column;}
.hs::before{content: ""; height:3px; background-color:#CCCCCC; width:100%; position:absolute; top:50%; transform:translateY(-50%); z-index:0;}
.hs:first-child{margin:40px 0 0 0;}
.hdt{background-color:#FFFFFF; font-size:2em; font-weight:bold; padding:0 20px; position:relative; z-index:1; display:inline-block; text-align:center;}

#header{background:#d8d8d8; height:120px;}
#footer{background-color: #acc997; height: 150px;}
#content{padding:0 10px;}
#headernav{display:none; position:absolute; top:120px; background-color:#CCCCCC; width:calc(100% - 20px); z-index:2;}
#headercontent{margin:0 10px;}
#smmenu{width:30px; height:29px; background-image:url('menu.png'); background-size:100%; position:absolute; right:10px; top:45px;}
.headernavbtn{padding:10px; font-size:1.2em; font-weight:bold; background-color:#FFFFFF; margin-top:5px;}

.fndimg, .uniimg{margin:20px 5%; max-width:90%;}
.logo{height:60px; margin-top:30px;}

.fpx{height:5px;}
.f0px{height:50px;}

.icon-outline-circle{border:2px solid #acc997; border-radius:50%; padding:10px; color:#acc997; align-items:center; justify-content:center; width:16px; height:16px; font-size:16px; margin-right:10px; display:inline-block;text-align:center; line-height:16px; vertical-align:middle;}
.footerbox{display:grid; align-content:center; padding-left:20px;}
.footerwra{display:block; margin-top: 15px;}
.gmif{width:95vw; height:95vw; border:0;}

.sfc{position:fixed; bottom:0; width:100%;}
.coog{color:#acc997;}


@media only screen and (min-width:900px){
	h1:first-child{margin:70px 0 0 0;}
	#header{height:150px;}
	.logo{height:80px; margin-top:35px;}
	#headernav{right:0; top:25px; background-color:initial; width:initial; display:block;}
	#smmenu{display:none;}
	.headernavbtn{display:inline-block; padding:30px 10px; font-size:1.5em; margin:auto; background-color:initial;}
	.fndimgcont{display:block; text-align:center; margin: 30px 0 0 0;}
	.fndimg{width:50%; margin:initial;}
  .uniimgcont{display:inline-block; width:49%;}
	.uniimg{margin:initial; max-width:25%;}
  .gmif{width:500px; height:350px;}
  .fnddiv{display: inline-block; width:49%;}
}

@media only screen and (min-width:1300px){
	#content{width:1280px; margin:auto;}
	#headercontent{width:1280px; margin:auto; position:relative;}
  #footercont{width:1280px; margin:auto;}
  .footergrid{display:grid; grid-template-columns:1fr 1fr; place-items:center; height:149px; gap:2rem;}
  .footerbox{width:49%; height:149px; display:flex; align-items:center; justify-content:center; padding-left:initial;}
  .footerwra{margin-top:initial;}
}