.content-section-carousel
{
      width: 100%;
      height: auto;
      margin-top: 50px;
      background-color: transparent;
}
.content-section-carousel
.carousel-container
{
      --slider-bg: hsl(0, 0%, 100%);
      width: 100%;
      display: flex;
      max-width: 98%;
      margin-left: auto;
      position: relative;
      margin-right: auto;     
      flex-direction: column;
      background-color: transparent;
}
.content-section-carousel
.carousel-box
{      
      overflow: clip;
      overflow: hidden;  
      position: relative;
}
.content-section-carousel
.carousel-button
{
      z-index: 1;            
      right: 0;
      left: 10px;
      bottom: 10px;
      padding: 15px 10px;      
      position: absolute;
}
.content-section-carousel
button
{          
      padding: 15px;
      color: #fff;
      font-size: 14px;
      font-weight: 500;            
      border-radius: 30px;       
      background-color: #374834;
      border: 1px solid transparent;

      backdrop-filter: blur(5px);
      -webkit-backdrop-filter: blur(5px);
      /*
      border: 1px solid rgba(255, 255, 255, 0.3);
      background-color: rgba(255, 255, 255, 0.2);
      */            
      font-family: "Figtree", sans-serif;
}
.content-section-carousel
button:hover
{      
      color: #ccc;
      cursor: pointer;
      border: 1px solid #bbb;
      background-color: #fff;
    
      transition: all 0.4s ease-in-out;
}
.content-section-carousel
.carousel-item
{
      display: flex;      
      will-change: transform;
      transform: translateX(0);
      backface-visibility: hidden;
      
      --slide-duration: calc(8 * var(--time-per-slide, 8s));
      --slide-total-width: calc(clamp(800px, 100vw, 1000px) + 500px);
}
.content-section-carousel
.carousel-item
{      
      animation: animate-carousel var(--slide-duration, 25s) linear infinite both;
      -webkit-animation: animate-carousel var(--slide-duration, 25s) linear infinite both;  
}
.carousel-item:hover, 
.carousel-container.paused 
.carousel-item
{      
      animation-play-state: paused;
      -webkit-animation-play-state: paused;
}
.content-section-carousel
.carousel-infinite
{             
      margin: 5px;
      height: auto;      
      min-width: 75%;      
      margin-right: 0;      
      position: relative;  
      place-items: center;      
      flex-direction: column;
      justify-content: center;
      backface-visibility: hidden;

      transition: transform 0.2s;        
}
.content-section-carousel
.carousel-article
{           
      width: 80%;      
      bottom: 50px;      
      display: flex;      
      position: absolute;      
      align-items: center;      
      justify-content: center;                 
}
.content-section-carousel
h5
{      
      color: #fff;
      font-size: 40px;
      font-weight: 500;
      margin-left: 50px;
      font-family: 'new-spirit', serif; 
}
.content-section-carousel
h6
{      
      color: #fff;            
      font-size: 20px;      
      font-weight: 500;         
      margin-bottom: 20px;
      font-family: "Figtree", sans-serif;
}
.content-section-carousel
img 
{
      width: 90%;    
      height: 80vh;             
      border-radius: 80px;
      background-size: cover;
      background-position: 50% 50%;	
}
/*
.content-section-carousel
.carousel-overlay
{      
      top: 0;
      left: 0;      
      width: 90%;
      height: 80vh;                   
      position: absolute;
      border-radius: 80px;      
      background-color: rgba(90, 90, 90, 0.2);           
}
*/



.content-section-navigate
{
	width: 100%;
	height: auto;      
      margin-top: 20px;	  
      font-family: "Figtree", sans-serif;  
}
.content-section-navigate
.navigate-container
{
      width: 100%;
      height: 5vh; 
      padding: 1% 0%;	        
      text-align: center;      
}
.content-section-navigate
p
{                  
      font-size: 12px; 
      color: #1a1a1a; 
      font-weight: 600;      
}
.content-section-navigate
span 
{
	font-size: 12px; 
      color: #0a5c36;	  
      font-weight: 600;
}



.content-section-spam
{
	width: 100%;
	height: auto;
      margin-top: 10px;
	background-color: transparent;
      font-family: "Figtree", sans-serif;  
}
.content-section-spam
.spam-container
{
      width: 100%;
      height: 25vh;
      display: flex;
      padding: 1% 8%;	              
      align-items: center;
      justify-content: center;      
      background-color: transparent;
}
.content-section-spam
h6
{                  
      font-size: 50px;            
      color: #0a5c36; 
      font-weight: 500;                  
      text-align: center;
      font-family: 'new-spirit', serif;      
}
.content-section-spam
p
{                  
      font-size: 50px; 
      color: #1a1a1a; 
      font-weight: 500;
      text-transform: uppercase;
      font-family: 'new-spirit', serif;             
}



.content-section-flexbox
{
      width: 100%;
      height: auto;
      background-color: transparent;
      font-family: "Figtree", sans-serif;  
}
.content-section-flexbox
.flexbox-container
{
      width: 95%;   
      height: 80vh;         
      margin: 0 auto;      
      padding: 5px 10px;
      max-width: calc(100rem + 10vw);
}
.content-section-flexbox
.flexbox-container *:first-child 
{
      margin-block-start: 0;
}
.content-section-flexbox
.flexbox-article
{
      width: 95%; 
      height: auto;
      margin: 0 auto;
}
.content-section-flexbox
.flexbox-article
h5
{      
      font-size: 12px; 
      font-weight: 500;
}
.content-section-flexbox
.flexbox-article
span
{      
      width: 50%; 
      float: right;       
      font-size: 12px; 
      text-align: right; 
      margin-top: -15px;      
}
.content-section-flexbox
.flexbox-box
{      
      gap: 25px;
      height: 25vw;
      display: flex;
      margin-top: 20px;
      overflow-x: auto;      
      min-height: 30rem;
      position: relative;      
      overflow-y: hidden;
      border-radius: 35px;           
      scroll-behavior: auto;
      scrollbar-width: none;
      outline: none !important;
      scroll-snap-type: x mandatory;      
      -webkit-overflow-scrolling: touch; 
}
.content-section-flexbox
.flexbox-box::-webkit-scrollbar 
{
      display: none;
}
.content-section-flexbox
.flexbox-box > div:empty 
{
      position: relative;
}
.content-section-flexbox
.flexbox-box > div:empty:first-child 
{
      inset-inline-start: 10%;
      margin-inline-end: calc(-1 * var(--carousel-gap));
}
.content-section-flexbox
.flexbox-box > div:empty:last-child 
{
      inset-inline-end: 10%;
      margin-inline-start: calc(-1 * var(--carousel-gap));
}
.content-section-flexbox
.flexbox-item
{     
      display: grid;
      flex: 1 0 auto;
      max-width: 100%;       
      min-height: 100%;     
      position: relative;
      scroll-snap-align: start;
      grid-template-columns: 1fr;
      aspect-ratio: var(--card-ratio); --card-ratio: ;
      grid-template-rows: [media-start] auto [media-end main-start] auto [main-end];      
}
.content-section-flexbox
.flexbox-flex
.flexbox-item
{      
      flex: 1 0 100%;
      aspect-ratio: auto;
}
.content-section-flexbox
.flexbox-overlay
{      
      --card-link-color: var(--theme-white);
      --card-hover-color: var(--theme-white);
      --card-shadow-color: var(--theme-black);
      --card-background-color: var(--theme-dark);
      --card-foreground-color: var(--theme-white);      
      grid-template-rows: [media-start] 1fr [overlay-start] 1rem [main-start] auto [main-end overlay-end media-end];
}
.content-section-flexbox
.flexbox-overlay::before 
{
      content: "";
      grid-column: 1/-1;
      grid-row: overlay-start/overlay-end;
      
      display: block;
      overflow: hidden;      
      border-bottom-left-radius: 1rem;
      border-bottom-right-radius: 1rem;
      background: linear-gradient(to top, hsla(var(--card-shadow-color), 0.8) 20%, hsla(var(--card-shadow-color), 0.3) 60%, transparent);
}
.content-section-flexbox
.flexbox-square
{
      --card-ratio: auto 0.6/1;
}
.content-section-flexbox
.flexbox-rounded
{
      --card-ratio: auto 1.2/1;
}
.content-section-flexbox
.flexbox-banner
{
      --card-ratio: auto 4/3;
}
.content-section-flexbox
.flexbox-portrait
{
      --card-ratio: auto 4/4;
}
.content-section-flexbox
.flexbox-wide
{
      --card-ratio: auto 1.8/1;
}
.content-section-flexbox
.flexbox-background
{
      z-index: -1;     
      grid-column: 1/-1;      
      max-width: 100%;
      overflow: hidden;
      position: relative;
      aspect-ratio: auto;
      border-radius: 1rem;
      aspect-ratio: var(--card-ratio);
      grid-row: media-start/media-end;
}
.content-section-flexbox
.flexbox-background > * 
{
      width: 100%;
      height: 100%;
      object-fit: cover;
      position: absolute;      
      border-radius: inherit;
}
.content-section-flexbox
img 
{      
      height: auto;
      display: block;
      max-width: 100%;
}
.content-section-flexbox
.flexbox-context 
{     
      color: #fff; 
      align-self: end;
      padding: 1.25rem;      

      grid-column: 1/-1;
      grid-row: main-start/main-end;     
}
.content-section-flexbox
.flexbox-context > * 
{
      margin: 0;
}
.content-section-flexbox
h6
{          
      font-size: 40px;
      font-weight: 700; 
      font-family: "Nanum Myeongjo", serif;   
}
.content-section-flexbox
.flexbox-context 
p 
{      
      font-size: 20px;
      font-weight: 500;
      margin-block: 5px;
      text-shadow: 0 0.0625rem 0.0625rem hsl(var(--card-shadow-color));        
}
.content-section-flexbox
.arrow
{
      opacity: 1;
      width: 3rem;
      height: 3rem;
      border: none;
      display: flex;      
      cursor: pointer;      
      padding: 0.5rem;
      appearance: none;
      align-items: center;      
      background: transparent;      
      justify-content: center;
      border-radius: 0.125rem;      
      color: hsl(var(--theme-blue));            
      
      transition: opacity 150ms, color 150ms;      
}
.content-section-flexbox
.arrow:hover 
{
      color: #bbb;
}
.content-section-flexbox
.arrow:focus 
{
      color: hsl(var(--theme-pink));
      outline: none;
}
.content-section-flexbox
.arrow:focus 
svg 
{
      box-shadow: 0 0 0 0.125rem hsla(#ccc, 1), 0 0 0 0.25rem currentColor;
}
.content-section-flexbox
.arrow:focus:not(:focus-visible) 
{
      color: #666;
}
.content-section-flexbox
.arrow:focus:not(:focus-visible) 
svg 
{
      box-shadow: none;
}
.content-section-flexbox
.arrow[disabled] 
{      
      opacity: 0.5;      
      color: #bbb;
      pointer-events: none;
}
.content-section-flexbox
svg 
{     
      width: 100%;
      height: 100%;
      fill: currentColor;
      border-radius: 100%;      
      transition: box-shadow 150ms;
}
[dir=rtl] 
.arrow 
svg 
{
      transform: scaleX(-1);
}
.content-section-flexbox
.flexbox-pagination
{      
      display: flex;      
      align-items: center;
      margin: 1rem -0.5rem;
      justify-content: center;      
}
.content-section-flexbox
.arrow 
{
      flex: 0 0 auto;
}
.content-section-flexbox
.arrow:first-of-type 
{
      
      order: -1;
      margin-inline-end: auto;
}
.content-section-flexbox
.arrow:last-of-type 
{      
      order: 1;
      margin-inline-start: auto;
}
.content-section-flexbox
.flexbox-dots
{         
      display: none;
      /*
      display: flex;
      */
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
}
.content-section-flexbox
.flexbox-dot
{
      width: 1.5rem;      
      height: 1.5rem;
      display: block;
      position: relative;
      border-radius: 100%;
}
.content-section-flexbox
.flexbox-dot::after 
{
      content: "";
      top: 50%;
      left: 50%;      
      display: block;      
      width: 0.375rem;
      height: 0.375rem;
      position: absolute;
      border-radius: 100%;
      background: currentColor;
      transform: translateX(-50%) translateY(-50%);
}
.content-section-flexbox
.flexbox-activated 
{
      color: hsl(var(--theme-pink)) !important;
}
.content-section-flexbox
.flexbox-span
{
      border: 0 !important;      
      width: 1px !important;
      padding: 0 !important;
      height: 1px !important;      
      margin: -1px !important;
      overflow: hidden !important;      
      position: absolute !important;      
      white-space: nowrap !important;
      clip: rect(0 0 0 0) !important;
      clip-path: inset(50%) !important;
}



.content-section-mapping
{
      width: 100%;
      height: auto;            
      background-color: transparent;         
      font-family: "Nanum Myeongjo", serif;
}
.content-section-mapping
.mapping-container
{          
      width: 98%;      
      height: auto;
      display: flex;
      margin: 0 auto;
      flex-wrap: wrap;         
      border-radius: 20px;                     
      background-color: #fff;
      /*
      
      border: .0625rem solid #daddd8;
      */
}
.content-section-mapping
.mapping-container
h3
{
      width: 100%;      
      font-size: 25px;
      font-weight: 700;
      color: #242424;
      padding-top: 20px;      
      text-align: center;      
}
.content-section-mapping
.mapping-box
{      
      width: 100%;         
      height: 80vh;      
      margin: 0 auto;      
      margin-top: -100px;
}
.content-section-mapping
.mapping-item
{
      width: 100%;
      height: auto;
      display: flex;    
      align-items: center;
      justify-content: center;
}
.content-section-mapping
.mapping-item
h4
{      
      padding: 15px;      
      font-size: 15px;
      color: #1a1a1a;
      font-weight: 700;
      text-align: center;                              
      text-transform: uppercase;
      font-family: "Figtree", sans-serif;
}
.content-section-mapping
.mapping-item
span
{          
      color: #0a5c36;      
}
.content-section-mapping
.mapping-item > * 
{    
      padding: 15px;
      width: calc(100% / 3);
}
.content-section-mapping
.box-a
{
      width: 15%;
      height: 90vh;
}
.content-section-mapping
.box-b
{
      width: 16%;  
      height: 100vh;    
}
.content-section-mapping
.box-c
{
      width: 15%;
      height: 90vh;
}
.content-section-mapping
img
{
      width: 100%;
      height: 40%;
      object-fit: cover;
      border-radius: 30px;
}
.content-section-mapping
.box-a
img
{      
      margin-top: 65%;
}
.content-section-mapping
.box-b
img
{
      margin-top: 90%;
}
.content-section-mapping
.box-c
img
{
      margin-top: 70%;
}



.content-section-tier
{
      width: 100%;
      height: auto;                   
      background-color: #f3f1ee;
}
.content-section-tier
.tier-container
{      
      width: 100%;      
      height: 90vh;
      display: flex;
      padding-top: 50px;          
      background-color: transparent;
      font-family: "Figtree", sans-serif;      
}
.content-section-tier
.tier-a
{     
      height: auto;         
      width: 33.33%;
}
.content-section-tier
.tier-a
.tier-article
{
      top: 5%;
      width: 40%;            
      float: right;
      height: auto;            
      position: relative;
      margin-right: 25px;
}
.content-section-tier
h4
{           
      opacity: 0.8;
      font-size: 40px;
      color: #242424;  
      margin-top: 40px;
      font-weight: 700;
      text-transform: uppercase;      
}
.content-section-tier
.tier-article
p
{            
      color: #666;      
      padding: 10px 0;
      font-size: 15px;
      font-weight: 500;
      line-height: 1.8;            
}
.content-section-tier
.tier-article
span
{            
      color: #444;              
      font-size: 15px;
      font-weight: 600;          
}
.content-section-tier
.tier-a
a
{
      width: 150px;
	height: 50px;	  
	display: flex;         
      color: #fff;    
      font-size: 15px; 
      font-weight: 600;
      margin-top: 10px;      
      align-items: center;      
	border-radius: 30px; 	  
	justify-content: center;
      background-color: #3f3f3f;

      transition: all 0.3s ease-in-out;
}
.content-section-tier
.tier-a
a:hover
{      
      color: #242424;          
      background-color: #eee;
}
.content-section-tier
.tier-heading
{        
      top: 30%;
      left: 25%;
      width: 50%;
      color: #fff;    
      font-size: 40px;      
      font-weight: 700;      
      position: absolute;          
      font-family: "Nanum Myeongjo", serif;  
}
.content-section-tier
.tier-b
{                 
      height: auto;
      width: 33.33%;   
      position: relative;
      text-align: center;
}
.content-section-tier
.tier-background
{
      width: 90%;
      height: 80%;      
      margin: 0 auto;
}
.content-section-tier
.tier-b
img
{
      width: 80%;
      height: 100%;      
      object-fit: cover;
      border-radius: 30px;
}
.content-section-tier
.tier-c
{          
      height: auto;     
      width: 33.33%;           
}
.content-section-tier
.tier-c
.tier-conext
{
      top: 15%;
      width: 50%;                  
      height: auto;
      margin-left: 25px;
      position: relative;
}
.content-section-tier
h6
{           
      opacity: 0.8;
      font-size: 20px;
      color: #242424; 
      margin-top: 40px;
      font-weight: 700;
      text-transform: uppercase;      
}
.content-section-tier
.tier-conext
p
{            
      color: #666;       
      padding: 10px 0;      
      font-size: 15px;
      font-weight: 500;
      line-height: 1.8;            
}



.content-section-flexcontainer
{
      width: 100%;
      height: auto;
      margin: 0 auto;      
      background-color: #fff;
      font-family: "Figtree", sans-serif;  
}
.content-section-flexcontainer
.flexcontainer-container
{
      width: 100%;
      height: auto;        
      margin: 0 auto;  
      background-color: transparent;      
}
.content-section-flexcontainer
h5
{                
      font-size: 15px;
      color: #242424;
      font-weight: 500;          
      text-align: center;        
}
.content-section-flexcontainer
.flexcontainer-box
{      
      width: 98%;
      height: 80vh;
      display: flex;     
      margin: 0 auto;       
      align-items: center;       
      justify-content: center;      
}
.content-section-flexcontainer
aside:not(:last-child) 
{
      margin-right: 15px;
}
.content-section-flexcontainer
.flexcontainer-a
{
      width: 68%;
      height: auto;
}
.content-section-flexcontainer
.flexcontainer-b
{
      width: 32%;
      height: auto;
      position: relative;
}
.content-section-flexcontainer
.flexcontainer-b
h5
{      
      top: 35%;      
      width: 40%;           
      color: #fff;      
      margin: 0 auto;
      font-size: 35px;
      font-weight: 800;      
      text-align: start;
      position: absolute;            
      padding-left: 10px;      
      text-transform: uppercase;      
}
.content-section-flexcontainer
img 
{
      width: 100%;
      height: 70vh;      
      object-fit: cover;
      border-radius: 15px;      
}
.content-section-flexcontainer
.swiper-button-next::after, 
.content-section-flexcontainer
.swiper-button-prev::after 
{          
      font-size: 15px;     
}
.content-section-flexcontainer
.swiper-button-prev,
.content-section-flexcontainer
.swiper-button-next 
{     
      width: 40px;
      height: 40px;
      color: #242424;      
      border-radius: 50%;
      background-color: #fff;     

      display: flex;
      align-items: center;
      justify-content: center;

      transition: color 0.3s ease, transform 0.3s ease;
}
.content-section-flexcontainer
.swiper-button-prev:hover,
.content-section-flexcontainer
.swiper-button-next:hover 
{
      color: #fff;     
      border: 1px solid #fff; 
      background-color: transparent; 

      transform: scale(1.05);
}
.content-section-flexcontainer
.swiper-pagination-bullet 
{
      opacity: 1;
      width: 5px;
      height: 5px;
      margin: 0 5px;
      border-radius: 50%;
      background-color: #fff;            

      transition: background-color 0.3s;
}
.content-section-flexcontainer
.swiper-pagination-bullet-active 
{      
      width: 8px;
      height: 8px;
      background-color: #ccc;
}



.content-section-modal
{
      width: 100%;
      height: auto;        
      font-family: "Figtree", sans-serif;
}
.content-section-modal
.modal-container
{
      width: 100%;
      height: 40vh;
      margin: 0 auto;
      padding-top: 100px;            
      background-color: #fff;      
}
.content-section-modal
.modal-container
h4
{                 
      font-size: 35px;
      color: #242424;
      font-weight: 700;     
      text-align: center;
      letter-spacing: 1px;
      font-family: "Nanum Myeongjo", serif;
}
.content-section-modal
button
{	  	
	width: 200px;      
      color: #fff;
      padding: 25px;
      outline: none;      
      margin: 0 10px;      
      cursor: pointer;              
	border-radius: 50px;            
	justify-content: center;       
      background-color: #374834;
      border: solid 2px transparent;	                 
/*      
      --border-angle: 0turn;
      --main-bg: conic-gradient(
      from var(--border-angle),#f6f7f8 100% ); 
      --gradient-border: conic-gradient(from var(--border-angle), transparent 70%, #ccc, #222 99%, transparent);
      background: var(--main-bg) padding-box, var(--gradient-border) border-box, var(--main-bg) border-box;
      background-position: center center;
      
      animation: animate-modal 3s linear infinite;
      -webkit-animation: animate-modal 3s linear infinite;
*/
}
.content-section-modal
button:hover
{     
      color: #242424;     
      background-color: #ececec;

      transition: all 0.6s ease-out;
}
.content-section-modal
#modal-button
{      
      font-size: 15px;
      font-weight: 700;      
}
.content-section-modal
.modal-article
{
      height: auto;      
      padding: 15px;
      margin: 0 auto;
      max-width: 85%;                 
}
.content-section-modal
.modal-article
h5
{                 
      font-size: 24px;
      color: #0a5c36;
      font-weight: 400;                  
      text-align: center;      
      font-family: 'new-spirit', serif;   
}
.content-section-modal
.modal-article
h6
{                
      color: #222;      
      font-size: 15px;            
      font-weight: 600;                  
      text-align: center;
}
.content-section-modal
.modal-article
hr
{
      margin: 10px 0;
}
.content-section-modal
.modal-article
span
{           
      font-size: 12px;      
      color: #242424; 
      font-weight: 500;     
}    
.content-section-modal
.modal-box 
{      
      z-index: 11;      
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;      
      display: none;
      overflow: auto;
      position: fixed;
      background-color: transparent;            

      animation-name: animate-fade;
      -webkit-animation-name: animate-fade;
         
      animation-duration: 0.4s;
      -webkit-animation-duration: 0.4s;   
}
.content-section-modal
.modal-context
{      
      bottom: 0;
      width: 45%;
      height: 100vh;            
      position: fixed;
      overflow-y: auto;	
      overflow-y: scroll;  	            
      background-color: #fff;              
      box-shadow: 0px -10px 25px -5px #e4e4e4;     

      transition: all 0.5s ease-out;
      
      animation-name: animate-scroll;
      animation-duration: 0.4s;
      -webkit-animation-name: animate-scroll;
      -webkit-animation-duration: 0.4s;   
}
.content-section-modal
.modal-context::-webkit-scrollbar 
{
      width: 2px;
}
.content-section-modal
.modal-context::-webkit-scrollbar-thumb 
{          
      background-color: #888;
}
.content-section-modal
.modal-context::-webkit-scrollbar-track 
{ 
      background-color: #fff;
}
.content-section-modal
.modal-span 
{      
      z-index: 99;
      float: left;
      color: #fff;         
      position: fixed;
      font-size: 22px;     
      margin: 15px 15px;
      padding: 5px 12px;
      border-radius: 50%;     
      background-color: rgb(78, 78, 78);

      transition: all 0.5s ease-out;
}
.content-section-modal
.modal-span:hover,
.content-section-modal
.modal-span:focus 
{           
      cursor: pointer;
      color: #242424;     
      background-color: #eee;      
}
.content-section-modal
.modal-arrow
{     
      z-index: 99;
      width: 35px;
      height: 35px;         
      cursor: pointer;            
      position: fixed;     
      margin: 60px 16px;   
      border-radius: 50%;
      border: solid 1px #ccc; 

      transform: rotate(270deg);     

      transition: 0.5s;
}
.content-section-modal
.modal-arrow:hover
{          
      border: solid 1px transparent; 
}
/*
.content-section-modal
.arrow:after
{
      content: "";
      top: -10px;     
      width: 20px;
      height: 15px;      
      display: block;
      color:#232323;      
      position: absolute;
      border-bottom: solid 1px;
      transform: translatex(4px);
}
*/
.content-section-modal
.modal-arrow:before
{
      content: "";
      top: 50%;
      left: 4px;      
      width: 8px;
      height: 8px;        
      display: block;      
      color:#242424;
      position: absolute;
      border-top: solid 2px;
      border-left: solid 2px;
      
      transform-origin: 0% 0%;
      transform: rotatez(-45deg);
}
.content-section-modal
.modal-arrow:hover:before
{      
      animation: animate-arrow 2s cubic-bezier(0, 0.6, 1, 0.4) infinite 0.9s;
      -webkit-animation: animate-arrow 1s cubic-bezier(0, 0.6, 1, 0.4) infinite 0.9s;
}
.content-section-modal
.modal-arrow:hover:after
{      
      animation: animate-border 2s cubic-bezier(0, 0.6, 1, 0.4) infinite 0.9s;
      -webkit-animation: animate-border 1s cubic-bezier(0, 0.6, 1, 0.4) infinite 0.9s;
}
.content-section-modal
.modal-body
{
      width: 100%;      
      height: auto;
      padding: 20px;
      margin: 0 auto;      
}
.content-section-modal
.modal-info
{
      width: 100%;
      height: auto;                   
}
.content-section-modal
.modal-box
h5
{      
      width: 98%;
      margin: 0 auto;
      padding: 10px 0;      
      font-size: 12px;
      color: #242424;      
      font-weight: 600;     
      margin-top: 100px;
      text-align: justify;
      text-transform: uppercase;            
}
.content-section-modal
.modal-box
h5 
span
{     
      font-size: 15px; 
      color: #0a5c36; 
      font-weight: 600;    
      padding-left: 5px;   
}
.content-section-modal
.modal-info
h1
{      
      padding: 40px 0;
      font-size: 25px;
      color: #231f1d;
      font-weight: 600;      
      text-transform: uppercase;
}
.content-section-modal
.modal-banner 
{      
      width: auto;   
      height: auto;             
      text-align: center;
}
.content-section-modal
.modal-banner
img
{      
      width: 100%;
      height: 800px;               
      max-width: 100%;      
      margin-top: 10px;
      border-radius: 20px;
      background-size: cover;      
      background-attachment: fixed;
      background-position: center center;
}
.content-section-modal
.modal-background
{
      width: 300px;               
      margin-top: 30px;
      position: relative;
      display: inline-block;  
      
      transform: translateZ(0);
      -webkit-transform: translateZ(0);
}
.content-section-modal
.modal-background:after 
{      
      transform: rotate(-45deg);
      -webkit-transform: rotate(-45deg);
}
.content-section-modal
.modal-background:before,
.content-section-modal
.modal-background:after 
{                  
      content: '';
      z-index: -1;      
      top: 0;      
      left: 0;
      right: 0;      
      bottom: 0;      
      position: absolute;
      border-radius: 50%;
      border: 1px solid #bbb;
      border-color: transparent #bbb;
}
.content-section-modal
.modal-background
img 
{
      width: 100%;           
      padding: 20px;          
      border-radius: 50%;
      vertical-align: top;
      backface-visibility: hidden;
}
.content-section-modal
.modal-box
h6
{ 
      width: 80%;
      margin: 0 auto;
      font-size: 20px;
      color: #242424;
      margin-top: 50px;
      font-weight: 700;                   
}
.content-section-modal
.modal-box
p
{      
      width: 80%;
      margin: 0 auto;
      font-size: 13px;
      color: #242424;
      font-weight: 400;      
      line-height: 1.5;      
}
.content-section-modal
.modal-cirlce
{     
      width: 100%;     
      height: auto;            
      margin-top: 50px;      
      position: relative;
      text-align: center;                      
}
.content-section-modal
.modal-cirlce:before,
.content-section-modal
.modal-cirlce:after 
{
      width: 40vw;
      height: 40vw;      
      margin: 0 auto;
}
.content-section-modal
.modal-cirlce:before,
.content-section-modal
.modal-cirlce:after 
{        
      content: '';      
      top: 0;      
      left: 0;
      right: 0;  
      bottom: 0;
      position: absolute;
      border-radius: 50%;
      border: 1px solid rgba(0, 0, 0, .08);
      /*
      border-color: transparent #bbb;
      */
}
.content-section-modal
.modal-cirlce
img
{
      width: 40vw;
      height: 40vw;      
      padding: 15px;
      object-fit: cover;
      border-radius: 50%;         
      
      background-position: center;
      background-repeat: no-repeat;                  
}
.content-section-modal
.modal-thumbnails
{     
      gap: 10px;
      width: 100%;      
      height: 40vh;
      display: flex;            
      align-items: center;
      justify-content: center;      
}
.content-section-modal
.modal-thumbnails
img 
{      
      width: 180px;
      height: 180px;
      object-fit: cover;
      border-radius: 50%;
}
.content-section-modal
.modal-infinite
{      
      --slider-bg: hsl(0, 0%, 100%);
      width: 100%;
      display: flex;
      max-width: 100%;
      margin-top: 50px;
      margin-left: auto;
      position: relative;
      margin-right: auto;     
      flex-direction: column;
}
.content-section-modal
.infinite-carousel
{
      z-index: 10;          
      overflow: hidden;  
}
.content-section-modal
.infinite-box
{
      display: flex;      
      will-change: transform;
      transform: translateX(0);
      backface-visibility: hidden;
      
      --slide-duration: calc(10 * var(--time-per-slide, 8s));
      --slide-total-width: calc(clamp(800px, 100vw, 1000px) + 500px);
}
.content-section-modal
.infinite-box
{      
      animation: animate-infinite var(--slide-duration, 25s) linear infinite both;
      -webkit-animation: animate-infinite var(--slide-duration, 25s) linear infinite both;  
}
.infinite-box:hover, 
.modal-infinite.paused 
.infinite-box
{      
      animation-play-state: paused;
      -webkit-animation-play-state: paused;
}
.content-section-modal
.infinite-item
{             
      height: 600px;
      display: flex;        
      min-width: 450px;            
      margin-left: 5px;
      position: relative;       
      border-radius: 20px; 
      place-items: center;            
      flex-direction: column;
      justify-content: center;
      backface-visibility: hidden;

      transition: transform 0.2s;
}
.content-section-modal
.modal-infinite
img 
{
      width: 100%;    
      height: 100%;  
      object-fit: cover;            
      border-radius: 20px;            
      background-position: center;
      background-repeat: no-repeat;
}
.content-section-modal
.btn-wrapper
{      
      padding: 15px 0;
      text-align: center;
}
.content-section-modal
.modal-infinite
button
{
      width: 80px;                
      padding: 10px;
      color: #222;
      font-size: 15px;
      font-weight: 600;           
      border-radius: 30px;                              
      background-color: #eee;
      font-family: "Figtree", sans-serif;
}
.content-section-modal
.modal-infinite
button:hover
{      
      color: #242424;      
      background-color: #fff;
      border: 1px solid transparent;
    
      transition: all 0.4s ease-in-out;
}



.content-section-news
{
      width: 100%;
      height: auto;
      background-color: transparent;
      font-family: "Figtree", sans-serif;  
}
.content-section-news
.news-container
{
      width: 100%;
      height: auto;
      background-color: #374834;
}
.content-section-news
.news-article
{
      width: 100%;
      height: 25vh;      
      padding-top: 120px;
      background-color: transparent;
}
.content-section-news
.news-article
h4
{
      color: #fcfcfb;            
      font-weight: 400;      
      font-size: 11.5px;
      text-align: center;
      line-height: 15.25px;
      letter-spacing: 0.2em;            
      text-transform: uppercase;      
}
.content-section-news
.news-article
h5
{          
      font-size: 35px;
      color: #fcfcfb;  
      font-weight: 300;
      text-align: center;      
      line-height: 52.8px;
      font-family: 'new-spirit', serif;   
}
.content-section-news
.news-article
b
{
      color: #e6ded1;
}
.content-section-news
.news-flex
{
      width: 100%;
      height: auto;  
      text-align: center;
}
.content-section-news
.news-flex
img 
{
      width: 40%;     
      height: auto;          
      border-radius: 15px;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
}
.content-section-news
.news-paragraph
{
      width: 100%;
      padding: 100px;
      margin: 0 auto;
      text-align: center;
}
.content-section-news
.news-paragraph
img
{
      width: 120px;
      height: auto;
      object-fit: cover;
      background-repeat: no-repeat;
}
.content-section-news
.news-paragraph
h6
{
      font-size: 35px;
      color: #fcfcfb;  
      font-weight: 300;
      text-align: center;      
      line-height: 52.8px;
      font-family: 'new-spirit', serif;   
}
.content-section-news
.news-paragraph
.paragraph-a
{     
      margin-top: 10px;
}
.content-section-news
.news-paragraph
.paragraph-b
{          
      margin-top: 50px;
}
.content-section-news
.news-paragraph
p
{
      width: 40%;
      color: #fff;         
      margin: 0 auto;      
      font-size: 18px;      
      font-weight: 300;      
}



.content-section-pattern
{
      width: 100%;
      height: 40vh;            
      background-color: #fff;
      font-family: "Figtree", sans-serif;
}
.content-section-pattern
h5
{                 
      padding: 50px 0;
      font-size: 60px;      
      color: #242424;
      font-weight: 900;                              
      text-align: center;      
      font-family: "Nanum Myeongjo", serif;        
}
.content-section-pattern
h5
span
{     
      font-size: 30px;      
      color: #0A5C36; 
}
.content-section-pattern
.pattern-container 
{      
      height: auto;      
      display: flex;
      margin: 0 auto;
      max-width: 80%;                     
      padding-top: 50px;
      border-radius: 25px;              
      background-color: transparent;        
}
.content-section-pattern
.pattern-item 
{          
      margin: 20px;
      height: auto;            
      padding: 5px 10px;                   
      border-right: 1px solid rgba(158, 158, 158, 0.16);       
      
      transition: all 0.6s ease-in;
}
.content-section-pattern
.item-a
{
      width: 15%;           
}
.content-section-pattern
.item-b
{
      width: 15%;                  
}
.content-section-pattern
.item-c
{
      width: 25%;          
}
.content-section-pattern
.item-d
{
      width: 25%;            
}
.content-section-pattern
.item-e
{
      width: 25%;            
}
.content-section-pattern
.pattern-background
{
      width: 100%;
      height: auto;    
      padding: 8px;
}
.content-section-pattern
.pattern-article
h6
{           
      padding: 8px;      
      font-size: 16px;
      color: #0a5c36;
      font-weight: 600;                  
}
.content-section-pattern
.pattern-article
p
{          
      padding: 8px;
      font-size: 15px;
      color: #242424;
      font-weight: 500;            
}



.content-section-catalogue
{
      width: 100%;
      height: auto;
      background-color: #fff;
      font-family: "Figtree", sans-serif;
}
.content-section-catalogue
.catalogue-container
{          
      width: 90%;
      height: auto;
      display: flex;
      margin: 0 auto;
      flex-wrap: wrap;                  
}
.content-section-catalogue
.catalogue-a
{      
      width: 60%;                       
      background-color: transparent;    
      border-radius: 30px 0 0 0;      
}
.content-section-catalogue
.catalogue-a
.catalogue-article
{
      padding: 10px 20px;
}
.content-section-catalogue
.catalogue-a
h5
{      
      font-size: 15px;      
      color: #d0342d;
      font-weight: 700;                 
      padding: 15px 5px;      
      text-decoration: underline;
}
.content-section-catalogue
.catalogue-a
h6
{      
      font-size: 14px;
      padding: 5px 5px;      
      font-weight: 700;      
}
.content-section-catalogue
.catalogue-a
p
{
      font-size: 14px;
      color: #4c4c4c;
      line-height: 1.3;
      font-weight: 500;
}
.content-section-catalogue
.catalogue-b
{
      flex: 2;
      width: 40%;                
      background-color: transparent;   
      border-radius: 0 30px 0 0;      
}
.content-section-catalogue
.catalogue-b
.catalogue-article
{
      padding: 10px 20px;
}
.content-section-catalogue
.catalogue-b
h5
{            
      font-size: 15px;      
      color: #d0342d;
      font-weight: 700;                 
      padding: 15px 5px;
      text-decoration: underline;
}
.content-section-catalogue
.catalogue-b
h6
{
      font-size: 14px;
      padding: 5px 5px;      
      font-weight: 700;              
}
.content-section-catalogue
.catalogue-b
p
{
      font-size: 14px;
      color: #4c4c4c;
      line-height: 1.3;
      font-weight: 500;
}



.content-section-accordion
{
      width: 100%;
      height: auto;      
      background-color: #fff;
      font-family: "Figtree", sans-serif;
}
.content-section-accordion
.accordion-container
{
      width: 90%;
      height: auto;
      margin: 0 auto;
      border-radius: 30px;      
      /*
      background: linear-gradient(#fff 23.85%, #f3f1ee00 70.72%);
      */
}
.content-section-accordion
h4 
{          
      font-size: 15px;
      color: #242424;
      font-weight: 700;      
      padding: 10px 20px;           
      font-family: "Nanum Myeongjo", serif;  
}
.content-section-accordion
.accordion-list
{     
      padding: 10px 20px;
}
.content-section-accordion
li 
{          
      position: relative;
      border-bottom: 1px solid #e7e7e7;
}
.content-section-accordion
a 
{
      width: 100%;      
      line-height: 3;
      display: block;
      cursor: pointer;      
      font-size: 14px;
      padding: 5px 5px;      
      font-weight: 700;      
      user-select: none;      
}
.content-section-accordion 
a:after 
{
      content: " ";
      top: 17px;
      width: 10px;
      right: 10px;
      height: 10px;            
      position: absolute;
      border-right: 1px solid #242424;
      border-bottom: 1px solid #242424;      

      transform: rotate(-45deg);
      -moz-transition: all 0.2s ease-in-out;
      -webkit-transition: all 0.2s ease-in-out;      

      transition: all 0.2s ease-in-out;
}
.content-section-accordion
a.active:after 
{
      transform: rotate(45deg);      
      -moz-transition: all 0.2s ease-in-out;
      -webkit-transition: all 0.2s ease-in-out;

      transition: all 0.2s ease-in-out;
}
.content-section-accordion
span
{
      font-weight: 700;
}
.content-section-accordion
p 
{            
      display: none;
      color: #6b97a4;
      padding: 0 5px 10px;
}
.content-section-accordion
p 
{                            
      font-size: 14px;
      color: #4c4c4c;
      line-height: 2.0;
      font-weight: 500;      
}



.content-section-testimonial
{
      width: 100%;      
      height: auto;            
      background-color: transparent;
      font-family: "Figtree", sans-serif;
}
.content-section-testimonial
.testimonial-container
{
      width: 100%;
      height: auto;
      margin: 0 auto;            
      text-align: center;
      background-color: #f3f1ee;
}
.content-section-testimonial
h5 
{               
      font-size: 14px;
      color: #0a5c36;
      font-weight: 700;       
      padding-top: 40px;      
}
.content-section-testimonial
.testimonial-box
{
      width: 100%;
      height: auto;
      margin-top: 30px;           
}
.content-section-testimonial
.testimonial-avatar
{
      padding: 20px 0;
}
.content-section-testimonial
img 
{
      width: 80px;
      height: 80px;      
      margin: 0 10px;
      cursor: pointer;
      border-radius: 50%;
      filter: grayscale(100%);            

      transition: all .3s ease-in;
}
.content-section-testimonial img:hover, 
.content-section-testimonial img.active 
{          
      filter: none;
}
.content-section-testimonial
.testimonial-article
{
      width: 80%;      
      height: 80px;
      margin: 0 auto;
      padding: 0 10px;            
}
.content-section-testimonial
.testimonial-item
{
      display: none;
}
.content-section-testimonial
.testimonial-item.active 
{
      display: block;
}
.content-section-testimonial
h6
{           
      font-size: 18px;            
      font-weight: 700;  
      padding: 10px 15px;
      text-transform: uppercase;
}
.content-section-testimonial
.testimonial-rating
{                        
      border: none;      
      margin-left: 15px;
      margin-bottom: -2px;
      display: inline-block;
}
.content-section-testimonial
label:before 
{ 
      content: "\f005";
      margin: 2px;
      font-size: 12px;      
      font-family: FontAwesome;     
}
.content-section-testimonial
label 
{       
      float: right; 
      color: #ccc;            
}
.content-section-testimonial
p 
{         
      font-size: 15px;      
      color: #242424;
      padding: 5px 15px;
}



.content-section-brochure
{
      width: 100%;
      height: auto;
      background-color: transparent;
      font-family: "Figtree", sans-serif;
}
.content-section-brochure
.brochure-container
{
      width: 100%;
      height: 45vh;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #f3f1ee;
}
.content-section-brochure
.brochure-background
{          
      width: 100%;
      height: auto;      
      position: relative;
      text-align: center;
      display: inline-block;            
}
.content-section-brochure
img
{
      width: 300px;
      height: 300px;      
      border-radius: 50%;   
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;            
}
/*
.content-section-brochure
img:hover
{
      opacity: 0.8;      
      height: auto;            
      margin-left: 2px;
}
.content-section-brochure
.brochure-overlay
{
      z-index: 99;
      top: 0;
      left: 0;
      display: none;
      position: absolute;      

      transition: .2s ease-in-out;
}
.content-section-brochure
.brochure-background:hover
.brochure-overlay
{      
      display: inline;
    	transition: .2s ease-in-out;
}
*/
.content-section-brochure
.brochure-article
{
      width: 100%;
      height: 10vh;     
      text-align: center;
      background-color: #f3f1ee;
}
.content-section-brochure
h5
{      
      font-size: 18px;
      color: #242424;
      font-weight: 700;            
}
.content-section-brochure
p
{      
      font-size: 12px;
      color: #242424;
      font-weight: 400;            
}
.content-section-brochure
.brochure-button
{
      width: 100%;
      height: 12vh;
      display: flex;
      align-items: center;
      justify-content: center;      
      background-color: #f3f1ee;
}
.content-section-brochure
ul
{	  
	display: flex;
      margin-top: -100px;	  	        
}
.content-section-brochure
li
{	  	      	  
      margin: 2px;
	width: 140px;
	height: 60px;	  
	display: flex;           
      align-items: center;      
	border-radius: 30px; 	  
	justify-content: center; 	  
      background-color: #3f3f3f;
      /*
	background-color: #f2aa4c;
      */

	transition: all 0.25s ease-out;
}
.content-section-brochure
li:hover
{	    	    
	opacity: 0.8;      
      cursor: pointer;
      background-color: #333;

	transition: all 0.25s ease-out;
}
.content-section-brochure
.button-path
{	  
	padding: 10px;   	        
      color: #fff;       
	font-size: 15px;
      font-weight: 700;      
      /*
      color: #4c4c4c;       
      */
}
.content-section-brochure
.brochure-button
svg
{
      width: 20px;
      height: auto;
      fill: #fff;
}
.content-section-brochure
i
{	  	        
      font-size: 12px;  	  	    
      color: #242424;	  
      transform: rotate(90deg);	    
}



.content-section-banner
{
      width: 100%; 
      height: auto;
      margin: 0 auto;          
      background-color: #f3f1ee;
      font-family: "Figtree", sans-serif;
}
.content-section-banner
.banner-container
{      
      width: 98%;     
      height: auto;                    
      margin: 0 auto;
      position: relative;       
      border-radius: 15px;     
}
.content-section-banner
.banner-article
{	 
	width: fit-content;            
      gap: 2px;
      height: 10vh;              
      display: flex;
      margin: 0 auto;          
      align-items: center;      
}
.content-section-banner
.article-a
{          
      padding: 15px;         
      font-size: 16px;
      font-weight: 700;      
      color: #4c4c4c;       
      border-radius: 20px;  
      border: 1px solid #ccc;
}
.content-section-banner
.article-b
{     
      padding: 15px;         
      font-size: 16px;
      color: #0a5c36;
      font-weight: 700;     
      border-radius: 20px;     
      border: 1px solid #ccc;    
}
.content-section-banner
img 
{
      width: 100%;
      max-width: 100%;
      max-height: 80vh;           
      background-size: cover;        
      background-repeat: no-repeat;      
      background-position: center center;
}
.content-section-banner
.banner-heading
{      
      top: 60%;
      left: 50%;
      position: absolute;
      border-radius: 20px;
      transform: translate(-50%, -50%);
}
.content-section-banner
h6
{           
      padding: 20px;
      font-size: 40px;
      color: #242424;
      font-weight: 700;      
      text-transform: uppercase;         
      background: rgba(255, 255, 255, 0.2);      
      box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);

      backdrop-filter: blur(5px);
      -webkit-backdrop-filter: blur(5px);   
}