@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Figtree:ital,wght@0,300..900;1,300..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Nanum+Myeongjo&family=Sora:wght@100..800&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');


*
{
      margin: 0;    
      padding: 0;
      box-sizing: border-box;
}
html,
body
{
      width: 100%;
      height: 100vh;
      background-color: #f6f7f8;
}
body
{       
      scroll-behavior: smooth; 
}
li
{
      list-style-type: none;
}
a
{
      text-decoration: none;
}



.content-section-load
{
      width: 100%;
      height: auto;
      background-color: transparent;
}
.content-section-load
.load-container
{
      width: 100%;
      height: 100vh;
}
.content-section-load
.load-span
{     
      z-index: 999;            
      left: 0;
      top: 50%;      
      width: 50px;
      height: 50px;        
      display: block;
      margin: 0 auto;
      position: relative;      
      border-radius: 50%;    
      border: 1px solid transparent;
      border-top-color: #888;
      
      animation: animate-load 1.7s linear infinite;    
}
.content-section-load
.load-progress
{
      z-index: 10;
      top: 0;
      width: 100%;
      height: 100vh;
      position: fixed;     
      background-color: #f3f3f4;      
}
.content-section-load
.load-script
.load-span
{
      opacity: 0;
      transition: all 0.3s ease-out;
}



.content-section-navigation
{      
      width: 100%;
      height: auto;
      margin-top: 10px;
      background-color: transparent;

      font-family: "Figtree", sans-serif;
}
.content-section-navigation
.navigation-container
{     
      z-index: 10;          
      position: relative;
      text-align: center;
}
.content-section-navigation
.navigation-box
{      
	width: 95%;      
      height: 50px;            	
      padding: 0 0;
      margin: 0 auto;                
      border-radius: 15px;
      background-color: #242424;        
} 
.content-section-navigation
.navigation-logo
{            
      margin-top: -2px;
}
.content-section-navigation
.navigation-logo
.active:hover
{            
      opacity: 0.9;
      background-color: transparent;
}
.content-section-navigation
.navigation-logo
img
{
	width: 80px;
	height: auto;	                  

      transition: all 0.3s ease;  
}
.content-section-navigation
.navigation-logo
img:hover
{	
      opacity: 0.9;

      transition: all 0.3s ease;  
}
.content-section-navigation
.navigation-list
{	
      padding: 15px;
      display: block;
      margin: 0 auto;
      display: inline-flex;	  
}
.content-section-navigation
a
{     	  
      color: #fff;       
      font-size: 12px;
      font-weight: 700; 
      padding: 9px 15px;
      line-height: 18px;      
      border-radius: .75rem;                          
      text-transform: uppercase;     

      transition: all 0.3s ease;
}
.content-section-navigation
li a:hover
{	        
      color: #91d17d;            
}
.content-section-navigation
.navigation-open
{
      display: none;
}
.content-section-navigation
.navigation-dropdown
{
      opacity: 0;      
	line-height: 45px;
	position: absolute;
	visibility: hidden;
	border-radius: 10px;
      background-color: #91d17d;
}
.content-section-navigation
.navigation-dropdown
li 
a
{            
      width: 100%;
      color: #222;
      font-size: 12px;
      font-weight: 700;

      transition: all 0.5s;
}
.content-section-navigation
.navigation-hidden
{      
      font-size: 12px; 
      color: #91d17d; 
      font-weight: 700;
}
.content-section-navigation
.navigation-dropdown 
a:hover
{      
      font-size: 13px;
      font-weight: 900;
}
.content-section-navigation
.navigation-dropdown:hover
{
	border-radius: .75rem;
}
.content-section-navigation
.navigation-list 
li:hover 
.navigation-dropdown
{      
      top: 40px;
      opacity: 1;
      visibility: visible;	  

	transition: all 0.3s ease;
}
.content-section-navigation
.navigation-dropdown
a
{      
      width: 100%;
      display: block;
	font-size: 12px;
	font-weight: 700;            
	border-radius: .75rem;
      text-transform: uppercase;
}
.content-section-navigation
.navigation-button
{      
	display: none;
	color: #222;
	cursor: pointer;
      font-size: 20px;      
}
.content-section-navigation
.navigation-button.navigation-closed
{      
      top: 10px;
      right: 30px;
	position: absolute;
}
.content-section-navigation
input
{
      display: none;
}
.content-section-navigation
.navigation-option
{      
      margin-left: 20px;
}
.content-section-navigation
.navigation-option
a
{          
      padding: 0;
      margin: 5px;      
      font-size: 12px;
      font-weight: 700;
}
.content-section-navigation
.navigation-option
.active
{
      color: #91d17d;      
}
.content-section-navigation
.navigation-option
.inactive
{      
      color: #fff;
}
.content-section-navigation
.navigation-option
.inactive:hover
{
      opacity: 0.8;
}



.content-section-tag
{
      width: 100%;
      height: auto;      
      background-color: transparent;
      font-family: "Figtree", sans-serif;
}
.content-section-tag
.tag-container
{	        
      width: 100%;
      height: 50px;      
      display: flex;
      align-items: center;                      
      justify-content: center;
}
.content-section-tag
ul
{	     
	display: flex;	      
	margin: 0 50px;      
}
.content-section-tag
li
{	    
	width: 90px;
	height: 40px;	  
	display: flex;
      align-items: center;         
	border-radius: 15px; 	  
	justify-content: center; 	  
	background-color: transparent;	 

	transition: all 0.25s ease-out;
}
.content-section-tag
li:hover
{
      opacity: 0.8;      
	cursor: pointer;	   

	transition: all 0.25s ease-out;
}
.content-section-tag
.tag-button
{	     	  	  
	color: #222;  
      font-size: 14px;
	font-weight: 700;	
}
.content-section-tag
.tag-button:hover
{	     	  	  
	color: #44862f;       
      transition: all 0.25s ease-out; 
}
.content-section-tag
.tag-container
i
{	  	  	       
      font-size: 14px;
      color: #44862f;   
	padding: 15px 5px;
	  
	transition: all 0.25s ease-out;
}


.content-section-span
{
	width: 100%;
	height: auto;
	background-color: #f6f7f8;
}
.content-section-span
.span-heading
{
      width: 100%;
      height: auto;    
      padding-top: 50px;
}
.content-section-span
h5
{      
      font-size: 50px; 
      font-weight: 700;
      text-align: center;
      text-transform: uppercase;
      font-family: "Nanum Myeongjo", serif;
}
.content-section-span
h6
{      
      font-size: 50px; 
      color: #0c5c36;
      font-weight: 500;
      text-align: center;
      text-transform: uppercase;
      font-family: "Figtree", sans-serif;
}



.content-section-horizontal
{
      width: 100%;
      height: auto;
      background-color: transparent;
}
.content-section-horizontal
.horizontal-container
{
      width: 98%;
      height: 10vh;      
      display: flex;
      margin: 0 auto;      
      align-items: center;
      flex-direction: row;      
      justify-content: center;      
}
.content-section-horizontal
.horizontal-container:before,
.content-section-horizontal
.horizontal-container:after 
{
      content: "";
      flex: 1 1;
      margin: auto;
      border-bottom: .0625rem solid #daddd8;
}
.content-section-horizontal
img
{
      width: 90px;      
      height: auto;
      padding: 10px;
      background-size: contain;
      background-repeat: no-repeat;
      background-color: transparent;
}



.content-sectio-path
{
      width: 100%;
      height: auto;
      background-color: #fff;
}
.content-sectio-path
.path-container
{
      width: 95%;
      height: auto;
      margin: 0 auto;           
}
.content-sectio-path
h3
{
      font-size: 60px;
      color: #242424;
      font-weight: 900;
      padding-top: 40px;       
      text-align: center;               
      font-family: "Nanum Myeongjo", serif;        
}
.content-sectio-path
span
{
      font-size: 30px;
      color: #0a5c36;      
}



.content-section-card
{
      width: 100%;
      height: auto;              
      background-color: transparent;
      font-family: "Figtree", sans-serif;         
}
.content-section-card
.card-container
{          
      width: 100%;
      height: 50vh;                  
      margin: 0 auto;
      background-color: transparent;
}
.content-section-card
.card-box
{           
      gap: 10px;        
      width: 100%;       
      padding: 4% 10%;
      grid-template-columns: 1fr;
}
.content-section-card
.card-item
{     
      z-index: 10;                
      width: 240px;
      height: 340px;            
      position: relative;           
}
.content-section-card
img
{     
      z-index: 10;                 
      width: 100%;
      height: 90%;
      display: block;
      object-fit: cover; 
      border-radius: 30px;       
      filter: brightness(0.8);

      transition: all 0.4s;
}
.content-section-card
img:hover
{            
      filter: brightness(0.9);      
}
.content-section-card
.card-description
{
      width: 100%;        
      height: auto;  
}
.content-section-card
.card-link
{     
      left: 20px;
      bottom: 15%;      
      color: #fff;          
      font-size: 20px;
      font-weight: 700;      
      position: absolute;              
}
.content-section-card
.card-link::before 
{
      content: '';      
      left: 0;      
      width: 100%;      
      height: 1px;
      bottom: -5px;
      position: absolute;
      background: linear-gradient(to left, #fff);
      
      transform: scaleX(0);
      transform-origin: left;

      transition: transform 0.4s ease-out;
}
.content-section-card
.card-link:hover::before 
{
      transform: scaleX(1);
}
.content-section-card
h5
{          
      left: 20px;
      bottom: 30%;      
      color: #fff;      
      font-size: 25px;
      font-weight: 700;
      position: absolute;          
}
.content-section-card
.card-button
{     
      width: 28px;
      height: 28px;
      display: grid;
      position: absolute;
      place-items: center;
      border-radius: 40px;
      background-color: #fff;     
}
.content-section-card
.button-link 
{      
      top: 10px;      
      right: 10px;
      background-color: #fff;
}
.content-section-card
.button-favourite
{
      top: 10px;
      left: 10px;
}
.content-section-card
i
{      
      font-size: 16px;      
      color: #242424;

      transition: all 0.2s ease-out;
}
.content-section-card
.arrow-link i:hover
{
      color: #888;
      margin-left: 2px;
}



.content-section-grid
{
      width: 100%;
      height: auto;
      font-family: "Figtree", sans-serif;
}
.content-section-grid
.grid-heading
{
      width: 100%;
      height: auto;    
      padding-top: 50px;
}
.content-section-grid
.grid-heading
h5
{      
      font-size: 50px; 
      font-weight: 700;
      text-align: center;
      text-transform: uppercase;
      font-family: "Nanum Myeongjo", serif;
}
.content-section-grid
.grid-heading
h6
{      
      font-size: 50px; 
      color: #0c5c36;
      font-weight: 500;
      text-align: center;
      text-transform: uppercase;      
}
.content-section-grid
.grid-container
{
      width: 100%;
      height: 70vh;               
      object-fit: cover;       
      background-color: #f6f7f8;
      background-image: url('img/grid/grid-topography.png');      
}
.content-section-grid
.grid-box
{
      gap: 5px;
      width: 60%;
      height: auto;
      padding: 5px;
      display: grid;       
      margin: 0 auto;      
      margin-top: 20px;
      grid-template-columns: 1fr;     

      transition: 0.3s;
}
.content-section-grid
.grid-item
{      
      height: 300px;
      overflow: hidden;
      max-height: 400px;
      border-radius: 10px;
}
.content-section-grid
img
{      
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;

      transition: 0.3s;
}
.content-section-grid
img:hover 
{
      transform: scale(1.1);
}
.content-section-grid
.grid-item:hover
img
{
      filter: grayscale(0.8);
}



.content-section-button
{
	width: 100%;
	height: auto;
	font-family: "Figtree", sans-serif;	  
}
.content-section-button
.button-container
{	  
	width: 95%;
	height: 30vh;	  	 
	display: flex; 
	margin: 0 auto;	  
	align-items: center;
	border-radius: 90px;    
	justify-content: center;	    
	background-color: transparent;	  
}
.content-section-button
.button-box
{	
	margin: 2%;
	height: auto;	  	
}
.content-section-button
ul
{	  
	display: flex;	  	  
}
.content-section-button
li
{	  
	margin: 5px;	  	  
	width: 140px;
	height: 80px;	  
	display: flex;
      align-items: center;         
	border-radius: 9999px; 	  
	justify-content: center; 	  
	background-color: #eee; 		 
	transition: all 0.25s ease-out;
}
.content-section-button
li:hover
{
	cursor: pointer;
	padding-right: 10px;
	background-color: #fff;
	transition: all 0.25s ease-out;
}
.content-section-button
.button-path
{	      
	font-size: 16px;
	color: #2f2411;	  
	font-weight: 500;
}
.content-section-button
i
{	  	        
      margin: 5px;
      font-size: 16px;  	  
	padding: 10px 10px;
	border-radius: 30px; 	  
	background-color: #fff;	  
}



.content-section-footer
{          
      bottom: 0;
      width: 100%;
      height: auto;            
      position: relative;      
      background-color: #0a5c36;
      font-family: "Figtree", sans-serif;     
}
.content-section-footer
h4
{           
      color: #ccc;      
      font-size: 20px;       
      font-weight: 600;
      padding-top: 100px;
      text-align: center;   
      font-family: "Nanum Myeongjo", serif;
}
.content-section-footer
h5
{                 
      color: #fff;
      font-size: 45px;
      margin-top: 5px;
      font-weight: 700;
      line-height: 1em;      
      text-align: center;         
      font-family: "Nanum Myeongjo", serif;
}
.content-section-footer
.grid-container
{                 
      width: 50%;      
      height: auto;      
      display: flex;            
      padding-top: 20px;
      grid-template-columns: 1fr;

      transition: 0.3s;
}
.content-section-footer
.grid-item
{      
      width: 100%;
      height: 300px;                       
}
.content-section-footer
.grid-background
{      
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      border-radius: 15px;
      filter: grayscale(0);      

      transition: all 0.5s ease-in;
}
.content-section-footer
.grid-item:hover 
.grid-background
{
      filter: grayscale(0.5);
}
.content-section-footer
.grid-background:hover 
{
      transform: scale(1.02);
}
.content-section-footer
.footer-container
{     
      width: 90%;      
      height: 40vh;
      margin: 0 auto;             
      background-color: #0a5c36;
}
.content-section-footer
.footer-address
{            
      width: 100%;      
      margin-top: 20px;     
}
.content-section-footer
.footer-address
ul
{
      display: flex;      
      padding: 0px 25px;
}
.content-section-footer
.footer-address
li
{      
      padding: 10px;      
}
.content-section-footer
.footer-address
a
{      
      font-size: 15px;
      color: #f2aa4c;
      font-weight: 500;
      padding-left: 5px;

      transition: all 0.3s ease-out;
}
.content-section-footer
.footer-address
a:hover
{          
      font-weight: 700;   
}
.content-section-footer
.footer-box
{                        
      display: grid;
      grid-gap: 40px;                  
      padding: 0 40px;      
      grid-template-columns: 1fr auto;      
}
.content-section-footer
.footer-box
ul
{
      padding-top: 0;
}
.content-section-footer
.footer-box
li
{
      padding: 5px 0;
}
.content-section-footer
.footer-box
h6
{     
      color: #fff;
      font-size: 20px;            
      font-weight: 700;     
      text-transform: uppercase;      
      font-family: "Nanum Myeongjo", serif;
}
.content-section-footer
.footer-box
.button-a
{          
      font-size: 15px;     
      font-weight: 400;     
      padding-top: 40px;
}
.content-section-footer
.footer-box
.button-b
{
      font-size: 15px;  
      font-weight: 400;     
      padding-top: 10px;    
}
.content-section-footer
.footer-box
.button-c
{
      font-size: 15px;      
      font-weight: 400;     
      padding-top: 10px;         
}
.content-section-footer h6, 
.content-section-footer a, 
.content-section-footer p 
{
      color: #fff;
}
.content-section-footer
.time-calendar
{      
      bottom: 2%;
      padding: 0px 40px;
      position: absolute;
}
.content-section-footer
.time-calendar
span
{       
      font-size: 12px;
      color: #f3f1ee;
      font-weight: 500;
      font-family: "Work Sans", sans-serif;
}
.content-section-footer
.time-calendar
.time-clock
{
      color: #f3f1ee;
}