/* ------------ about ------------- */
.roi-hero .hero-banner {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.roi-hero {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
}

.hero-overlay {
  position: relative;
  width: 100%;
  height: 100%;
}

.hero-banner {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 2.5rem;
  font-weight: bold;
  /* padding: 1rem 2rem; */
  border-radius: 8px;
  z-index: 2;
  text-align:center;
  width:95%; 
}

.roi-vision {
  padding: 4rem 0rem;
  width:100%;
  background-color: #fff;
  color: #222;
  font-family: 'Pretendard', sans-serif;
}

.roi-vision-block {
  position: relative;
  background: linear-gradient(to bottom, #fff 45%, #f5f5f5 45%);
  padding: 7rem 1.5rem 0rem;
}

.vision-container {
  padding: 2rem 0rem 2rem;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  position: relative;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.vision-images {
  /*position: absolute;
  left: 0;
  top: 30%; */
  transform: translateY(-5%);
  width: 50%;
  max-width: 600px;
  padding:5rem 5rem 0 0rem;
}

.vision-img-top {
  width: 90%;
  position: relative;
  z-index: 2;
  border-radius: 12px;
}

.vision-img-front {
  width: 80%;
  position: absolute;
  bottom: -60px;
  left: 40px;
  z-index: 1;
  border-radius: 12px;
}
.vision-text-box {
  width: 50%;
  margin-left: auto;
  padding: 2rem;
}

.roi-vision-block h3 {
  width:100%; 
  font-size: 2.5rem;
  margin-bottom: 1rem;
  text-align:center; 
}

.roi-vision-block h4 {
  width:100%; 
  font-size: 1rem;
  margin-bottom: 1rem;
  text-align:center; 
  margin-left:170px;
}

.vision-text-box blockquote {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 1rem;
  line-height: 1.6;
  color: #222;
}
.vision-text-box p {
  font-size: 1.125rem;
  color: #444;
  line-height: 1.8;
  margin-bottom: 1rem;
}

.vision-text-box span{
  display:block;
}
.vision-text p {
  line-height: 1.8;
  margin-bottom: 1rem;
}

.vision-mission {
  padding: 7rem 0;
  text-align: center;
  background-color:#fff; 
}


.mission-icons {
  display: flex;
  justify-content: center;
  gap: 4rem;
  margin-top: 4rem;
  flex-wrap: wrap;
}

.mission-item {
  max-width: 260px;
  text-align: center;
}

.mission-item h4 {
  color:#A67C52;
}

.mission-item img {
  height: 160px;
  margin-bottom: 1rem;
}

.vision-paragraph.vision-dark {
  background-image: url('../images/sub_about_lower.png');
  background-size:cover;
  background-attachment: fixed;
  color: #fff;
  padding: 11rem 2rem;
  font-size: 1.1rem;
  line-height: 1.8;
}

.vision-paragraph-warp{
  max-width: 1200px;
  min-width: 768px; 
  width:100%;
  margin:0 auto; 
  text-align:center;
  font-size:1.5rem;
  text-shadow: 0.5px 0.5px 0.5px black;
}

.core-values {
  max-width: 800px;
  margin: 8rem auto;
  padding: 0 1.5rem;
  text-align: center;
}

.vision-mission h3,
.core-values h3 {
  font-size: 2rem;
  margin-bottom: 3rem;
  font-weight: 700;
}

.values-grid {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.value-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  padding: 0.5rem 0;
}

.value-item strong {
  font-size: 1.2rem;
  color: #A67C52;
  min-width: 140px;
  white-space: nowrap;
  background: #f9f9f9; /* 줄과 겹치지 않게 */
  z-index: 2;
  padding-right: 2.5rem;
}

.value-item p {
  margin: 0;
  font-size: 1rem;
  color: #333;
  white-space: nowrap;
  background: #f9f9f9; /* 줄과 겹치지 않게 */
  z-index: 2;
  padding-left: 2.5rem;
  text-align:left;
  line-height:1.8rem;
}

.value-item::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 140px;
  right: 140px;
  height: 1px;
  background-color: #ccc;
  z-index: 1;
}

/* ----------- 모바일 대응 ---------- */

@media screen and (max-width: 768px) {
  /* about 모바일 대응 */
  .roi-vision-block h3, .vision-mission h3, .core-values h3 {
	font-size: 1.4rem;
  }

  .roi-vision-block h4 {
	margin-left: 0px; 
  }

  .vision-text-box span{
	  display:flex;
   }

  .value-item {
    flex-direction: column;
    align-items: flex-start;
    padding: 1rem 0;
  }

  .value-item::after {
    display: none;
  }

  .value-item strong {
    padding: 0;
  }

  .value-item p {
    white-space: normal;
    padding: 0;
  }

   .roi-hero .hero-banner{  
    height:100%; 
   }

  .vision-container {
    flex-direction: column;
    align-items: center;
	padding:0rem 0rem;
  }

  .vision-paragraph-warp{
   width:100%;
   min-width:320px;
   font-size : 0.9rem;
  }

  .vision-images {
    position: relative !important;
    top: auto;
    left: auto;
    transform: none;
    width: 100%;
    margin-bottom: 2rem;
	padding: 1rem 2rem 2rem 2rem;  
  }

  .vision-img-top{
	width:100%;
  }

  .vision-text-box {
    width: 100%;
    margin: 0;
	padding:0rem; 
  }

  .vision-text-box span{
    display:inline;
	}

  .roi-vision-block {
    background: #f5f5f5;
	padding:3.5rem 1.5rem;
  }

  .vision-text-box blockquote{
    font-size: 1.35rem
  }

  .vision-text-box p {
    font-size: 1rem;
	line-height : 1.5;
  }

  .value-item{
    display:block; 
  }

  .value-item::after{
    width:1px;
	height:40px; 
	left:50%; top:0%;
  }

  .value-item strong {
    text-align:center; 
    min-width:100%;
	padding-bottom: 15px;
  }

  .value-item p{
    text-align:center; 
    padding-left:0rem;
	padding-top:10px;
  }

}


/* ------------ brend ------------- */


	.full-wrap { width: 100%; padding-top:150px; }
    .brand-container{ 
		margin: 0 auto;
		max-width: 1200px; 
		box-sizing: border-box;
	}

    .brand-title {
		font-size: 2.4em;
	}

    .section-subtitle{
		font-size: 2.4em; 
		padding: 0.5rem 0.5rem; 
		max-width: 100%; 
		margin-left: auto; 
		margin-right: auto; 
	}

	.brand-total{
		width:100%; 
		background:url('../images/sub_bg.png');
		background-attachment: fixed;
		padding:13rem 2rem;
		line-height:3rem;
		position:relative; 
	}

	.brand-total-overay{
		position:absolute; 
		top:0; 
		left:0; 
		width:100%; 
		height:100%; 
		vertical-align:middle;
		background: rgba(0, 0, 0, 0.6);
	}

	.brand-total-title{
		text-align:center;
		font-size: 1.8rem;
		color:#fff;
		height:100%;
		display: flex;
	    justify-content: center;
	    align-items: center;
	}

	.brand-warp{
		padding:7rem 0; 
	}
    
	.brand-feature {display:flex; padding:3rem 2rem; gap: 40px;  position: relative; }
    .brand-feature.even { flex-direction: row-reverse; background: #f8f8f8; }
    .brand-feature img { width: 50%; border-radius: 16px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1); }
    .brand-text { width: 50%; position: relative; padding: 50px 20px 0;  }
    .brand-text h3 { font-size: 2em; margin-bottom: 25px; position: relative; color: #222; }
    .brand-text p { font-size: 1.125em; line-height: 1.8; margin-top: 20px; color: #444;  }

    .brand-tagline {
      font-size: 1.1em;
      font-weight: bold;
      color: #A67C52;
      border-left: 5px solid #A67C52;
      padding: 5px 0 0 15px;
      margin-bottom: 30px;
    }

    .brand-text a {
      display: inline-block;
      margin-top: 20px;
      padding: 10px 20px;
      background: #A67C52;
      color: #fff;
      text-decoration: none;
      border-radius: 5px;
	  font-size:12px;
    }

    @media (max-width: 1024px) {
	  .brand-warp{
		 padding: 3.5rem 0; 
	  }
	  .brand-feature {
		flex-direction: column !important;
	  }
	  .brand-feature.even {
		flex-direction: column !important;
	  }
	  .brand-feature {
		flex-direction: column;
		text-align: center;
		padding: 2rem 1rem 3.5rem;;
	  }
	  .brand-feature img,
	  .brand-text {
		width: 100%;
	  }
	  .brand-total-title{
		font-size:1.2rem;	  
		line-height:1.9rem; 
		padding-left:10px;
		padding-right:10px; 
	  }

	  .brand-text {
		padding: 0 16px;
	  }

	  .brand-tagline {
		text-align: center;
		border-left: none;
		border-top: 3px solid #A67C52;
		padding: 10px 0;
		margin: 15px 0 30px;
	  }
	  .brand-text h3{
	  font-size:1.5em;
	  }
	  .brand-text p{
		font-size:1em;
		line-height: 1.5;
	  }
    }


/*brand */
.full-wrap { width: 100%; padding-top:150px; }
    .brand-container{ 
		margin: 0 auto;
		max-width: 1200px; 
		box-sizing: border-box;
	}

    .brand-title {
		font-size: 2.4em;
	}

	.sub-effect {
		padding-left: 10px;
		margin-bottom: 0px;
	}

    .section-subtitle{
		font-size: 2.4em; 
		padding: 0.5rem 0.5rem; 
		max-width: 100%; 
		margin-left: auto; 
		margin-right: auto; 
	}

	.brand-total{
		width:100%; 
		background:url('../images/sub_bg.png');
		background-attachment: fixed;
		padding:13rem 2rem;
		line-height:3rem;
		position:relative; 
	}

	.brand-total-overay{
		position:absolute; 
		top:0; 
		left:0; 
		width:100%; 
		height:100%; 
		vertical-align:middle;
		background: rgba(0, 0, 0, 0.6);
	}

	.brand-total-title{
		text-align:center;
		font-size: 1.8rem;
		color:#fff;
		height:100%;
		display: flex;
	    justify-content: center;
	    align-items: center;
	}

	.brand-warp{
		padding:7rem 0; 
	}
    
	.brand-feature {display:flex; padding:3rem 2rem; gap: 40px;  position: relative; }
    .brand-feature.even { flex-direction: row-reverse; background: #f8f8f8; }
    .brand-feature img { width: 50%; border-radius: 16px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1); }
    .brand-text { width: 50%; position: relative; padding: 50px 20px 0;  }
    .brand-text h3 { font-size: 2em; margin-bottom: 25px; position: relative; color: #222; }
    .brand-text p { font-size: 1.125em; line-height: 1.8; margin-top: 20px; color: #444;  }

    .brand-tagline {
      font-size: 1.1em;
      font-weight: bold;
      color: #A67C52;
      border-left: 5px solid #A67C52;
      padding: 5px 0 0 15px;
      margin-bottom: 30px;
    }

    .brand-text a {
      display: inline-block;
      margin-top: 20px;
      padding: 10px 20px;
      background: #A67C52;
      color: #fff;
      text-decoration: none;
      border-radius: 5px;
	  font-size:12px;
    }

    @media (max-width: 1024px) {
	  .brand-warp{
		 padding: 3.5rem 0; 
	  }
	  .brand-feature {
		flex-direction: column !important;
	  }
	  .brand-feature.even {
		flex-direction: column !important;
	  }
	  .brand-feature {
		flex-direction: column;
		text-align: center;
		padding: 2rem 1rem 3.5rem;;
	  }
	  .brand-feature img,
	  .brand-text {
		width: 100%;
	  }
	  .brand-total-title{
		font-size:1.2rem;	  
		line-height:1.9rem; 
		padding-left:10px;
		padding-right:10px; 
	  }

	  .brand-text {
		padding: 0 16px;
	  }

	  .brand-tagline {
		text-align: center;
		border-left: none;
		border-top: 3px solid #A67C52;
		padding: 10px 0;
		margin: 15px 0 30px;
	  }
	  .brand-text h3{
	  font-size:1.5em;
	  }
	  .brand-text p{
		font-size:1em;
		line-height: 1.5;
	  }
    }

/*------- roi f&b --------*/
.full-section { width: 100%; line-height:1.8em; }
    .container {margin: auto; max-width: 1200px; width: 100%; box-sizing: border-box; }
	.bg-image1 .container,
	.bg-image2 .container,
	.bg-image3 .container,
	.bg-image4 .container,
	.bg-beige{
		padding :7rem 0;
	}

	.fnb-up { padding: 100px 20px 60px; }
	.fnb-up p{
		font-size: 2em;
		line-height:1.8em;
	}
    .section-title {font-size: 2.5em; padding:0rem 0 2rem; margin-bottom: 20px; text-align: center; }
    .features { display: flex; flex-wrap: wrap; justify-content: space-evenly; }
    .feature { width: 35%; margin: 10px 0; font-size: 1.1em; text-align:center; }
    .icon-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 60px; }
    .icon-card { background: rgba(0,0,0,0.4); padding: 30px; border-radius: 12px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); backdrop-filter: blur(2px); text-align: center; }
	.icon-card1 { background: #fffbf1; padding: 30px; border-radius: 12px; text-align: center; }
    .icon-card h3 { margin-top: 0; font-size: 1.3em; color:#fff4dd;  }
    .icon-card img, .icon-card1 img { height: 60px; margin-bottom: 20px; }
    .logos { display: flex; justify-content: center; flex-wrap: wrap; gap: 20px; }
    .logos img { height: 50px; }
    .cta { text-align: center; margin-top: 40px; }
    .bg-beige { background: #fffaf5; }
    .bg-light { background: #f8f8f8; }
    .bg-image1 { background: url('https://images.unsplash.com/photo-1600891964599-f61ba0e24092?auto=format&fit=crop&w=1500&q=80') center/cover no-repeat; color: white; }
    .bg-image2 { background-color:#fff; }
    .bg-image3 { background: url('https://images.unsplash.com/photo-1589302168068-964664d93dc0?auto=format&fit=crop&w=1500&q=80') center/cover no-repeat; color: white; }
    .bg-image4 { background: url('https://images.unsplash.com/photo-1581091012184-de1919cdd0af?auto=format&fit=crop&w=1500&q=80') center/cover no-repeat; color: white; }
    .overlay { background: rgba(0, 0, 0, 0.5); }
	.fbbtn {
	 display: inline-block;
      padding: 10px 20px;
      background: #A67C52;
      color: #fff;
      text-decoration: none;
      border-radius: 5px;
	  font-size:14px;
	}
    @media (max-width: 1024px) {
      .icon-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 600px) {
	  .container {width:98%; margin:0 auto; }
      .icon-grid { grid-template-columns: 1fr; width:95%; margin:0 auto; }
	  
    }

	/* certification -*/
	.certification{}

    .certification-container{ 
		margin: 0 auto;
		max-width: 1200px; 
		box-sizing: border-box;
		display: flex;
		 gap: 20px;
		flex-wrap: wrap;
	}
	.certification .certifi-title{
	  padding:7rem 0 4rem;
	  text-align:center;
	}
	.certification .trandreport-container{
		display: flex;
		gap: 1.5rem;
		margin-bottom:100px; 
	}
	.certification .brand-container h2 {
		padding:4rem 5rem 0rem;
		text-align:center;
	}

	.certification .brand-container p {
		text-align:center;
		margin-top:10px;
		color:#888;
	}

	.certification-box{
		flex: 1 1 calc(50% - 20px); /* 2개 */
		 box-sizing: border-box;
		padding:5rem 2rem;
		text-align:center;
		border:1px solid #eee; 
		background:#fff; 
		border-top: 7px solid #A67C52;
	}

	.certification-box dl{
		padding:3rem 2rem 0rem;; 
		text-align:center;
		line-height:1.8rem;
	}
	.certification-box dt{
		font-size:1.8rem;
		text-align:center;
	}
	.certification-box dd{

		text-align:center;
	}

  @media screen and (max-width: 768px) {
    h1 { font-size:1.5rem;}
	h3{ font-size:1.2rem;}
	.section-title { font-size:1.5rem;}
	.hero-title { font-size:2rem;}
	
	.certification .certifi-title {
		padding: 3rem 0 3rem
	}
	 .certification-container{ 
		display:block; 
	 }


	.certification .brand-container{
		display: block; 		
	}

	.certification-box {
		width:95%;
		margin:0 auto;
		padding: 2rem 10px;
		margin-bottom: 35px;
	}

	.certification-box img {
		width:70%;
	}
  }
 

 /* menulist */

 @media screen and (max-width: 768px) {
	.menulist-warp {padding: 0 10px;
	}
  }

 
 /* board */
 .board-warp {
	padding:2rem 0 ;
 }