@charset "UTF-8";

/* 기본 색상 */
:root {
	--main-color: #69100B;
	--dark-main-color: #333;
	--text-bright-color: #fff;
	--icon-color: #fff;
	--icon-bk-color: #ddd;
	--gray-color: #ddd;
	--large-width: 1000px;
	--middle-width: 800px;
}


.libre-baskerville-regular {
  font-family: "Libre Baskerville", serif;
  font-weight: 400;
  font-style: normal;
}

.libre-baskerville-bold {
  font-family: "Libre Baskerville", serif;
  font-weight: 700;
  font-style: normal;
}

.libre-baskerville-regular-italic {
  font-family: "Libre Baskerville", serif;
  font-weight: 400;
  font-style: italic;
}


/* 기본 설정: 폰트 크기 */
@media (max-width: 599px) {
	:root {
		font-size: 14px;
	}
}

@media (min-width: 600px) and (max-width: 799px) {
	:root {
		font-size: 16px;
	}
}

@media (min-width: 800px) {
	:root {
		font-size: 18px;
	}
}

body {
	font-size: 16px;
}

/*header 헤더*/
header {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100;
	width: 100%;
	background-color: #000;
	border-bottom:1px solid #222; /*11주: 삽입했음*/
}

.nohero header {
	position: static;
	border-bottom: solid 1px #ddd;
	border-bottom: solid 1px var(--gray-color);
}

/*headA 사이트 이름*/
.headA img {
	margin-top: 10px;
	width: 70px;
	margin-bottom: 10px;
	padding-left:20px;

}

/*headB: 네비게이션 메뉴*/
.headB ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.headB a {
	display: block;
	padding: 15px;
	color: #fff;
	font-size: 12px;
	text-decoration: none; 
}

.headB a:hover {
	border-bottom: 1px solid #860000ff;
	color: rgb(204, 0, 0);
}

@media(min-width: 768px){
	header .container {
		display: flex;
		align-items: center;
		justify-content: space-between;
		max-width: var(--large-width);
		margin-left: auto;
		margin-right: auto;
	}
	.headB ul {
		display: flex;
	}
}

/*HeaderC: 토글버튼*/
@media (max-width: 767px) {			
	/*작은 화면 전용 설정*/
	header .container-small {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.headC {			
		margin-right: 10px;
		padding: 0;
		border: none;
		outline: none;
		background: none;
		font-size: 28px;
		opacity: 0.5;
		cursor: pointer;
		color: #fff;
	}
	.headC:hover {
		opacity: 0.3;
	}

	.headB {
		display: none;
	}
}

@media (min-width: 768px){
	/*큰화면 전용 설정*/
	.headC {
		display: none;
	}

	.headB {
		display: block!important;
	}
}
/* 기본 설정: 페이지 전체 */
body {
	margin: 0;

}

 


/* 콘텐츠A: main-banner-image 히어로 이미지 */
.conA {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	min-height: 450px;
	background-image:  url(img/main_img.jpg);
	background-position: center;
	background-size: cover;
	color: #fff;
	color: var(--text-bright-color);
	text-align: center;
	margin: 0;
}

/* 제품 목록부분의 sub배너 이미지작성이므로 나중에 작성합니다.*/
.conA.compact {
	height: 450px;
	min-height: 0;
	background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.78)), url(img/artwork_main.png);
	color: rgba(255, 255, 255, 0.619);
	margin: 0;
}

.conA h2 {
	font-size: 6vw;
	letter-spacing: 0.3em;
	font-family: "Libre Baskerville";
	text-align: center;
}

.conA h1{
	text-align: center;
	margin-bottom: 400px;
	margin-top: 0;
	letter-spacing: 0.1em;
	font-size:  9vw; /* view width, 모든 기기가 320px으로 맞춤 320px = 100vw */
	font-family: "Libre Baskerville";
	color: #8a0700;
}

.conA p {
	margin: 0;
	padding-top: 0px;
	font-size: 2em;
	color: #69100B;
}



/* Mobile size -콘텐츠A: main-banner-image(width=768px), pc 사이즈 */
@media (min-width: 768px) {
	.conA h1 {
		font-size: 90px;
		margin-bottom: 500px;
	}
}

@media (max-width: 767px) {
	.conA p {
		display: none;
	}
}

/*콘텐츠b :개요*/

.conB {
	background-image: linear-gradient(rgba(0, 0, 0, 0),  rgb(12, 10, 5)), url(img/back.jpg);
	padding: 0;
}

.conB .two-col {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  padding: 50px 0;
}

.conB-left {
  flex: 1;
  margin-top: 30px;
  max-width: 400px;
  color:#fff
}

.conB-left h2 {
  font-size: 28px;
  margin-bottom: 18px;
  font-family: "Libre Baskerville"
}

.conB-left p {
  line-height: 1.6;
  margin-bottom: 14px;
}

.conB-right {
    flex: 1 1 auto;
    min-width: 0;        /* ← 이거 반드시 필요함 */
    overflow: hidden;
    position: relative;
}


.conB-slider {
    width: 100%; /* 교수님 지시사항 */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.slider-wrapper {
    width: 100%;       /* 핵심: 보여지는 영역은 100% */
    overflow: hidden;  /* 넘치는 이미지들은 숨김 */
	min-width: 0;  
}

.slider-track {
    display: flex;
    gap: 2px;
    min-width: 0;  
}

.conB-slider .slider-track img {
    width: 120px;              
    height: 200px;             
    object-fit: cover;         
    flex-shrink: 0;          
    border-radius: 4px;
	margin: 0;
}

.conB-slider  .prev-btn {
	background: none;
	color: #ffffff;
	padding: 5px 3px;
}

.conB-slider  .next-btn {
	background: none;
	color: #ffffff;
	padding: 5px 3px;
}


@media (max-width: 767px) {
	.conB-left {
		padding-left: 10px;
	}

  .conB-right {
    width: 100%;
    min-width: 0;
    overflow: hidden;
  }

  .conB-slider {
    width: 100%;
    overflow: hidden; 
  }

  .slider-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    min-width: 0;
  }

  .slider-track {
    display: flex;
    overflow: hidden !important;
    min-width: 0;
  }
}






/* pc-콘텐츠B :개요(아이콘 + 글자)[width= 768px] 를 기준으로*/
@media (min-width: 768px) {
  .conB-slider {
    width: calc((180px * 4) + (20px * 3));  
    margin: 0 auto;
  }

	.conB .container.two-col {
    max-width: var(--large-width);
    margin: 0 auto;
    display: flex;
	}


  .conB-slider .slider-track img {
    width: 180px;
    height: 320px;
  }

  .conB-slider .slider-track {
    gap: 20px;
  }
}


/*콘텐츠C 개요(이미지 + 글자)*/
.cbe {
	background-color: #0d0a05;
}

.conC .text {
	padding: 0;
	margin: 0;
}

.conC h2 {
	margin-top: 0;
	margin-bottom: 10px;
	font-size: 18px;
	font-family:"Libre Baskerville"
	
}

.conC {
	margin: 0;
	font-size: 14px;
	line-height: 1.8;
	opacity: 0.8;
	padding: 0 20px;
	color: #fff;
}

.conC a {
	display: inline-block;
	margin-top: 20px;
	padding: 10px 30px;
	border: solid 3px currentColor;
	border-radius: 6px;
	background-color: #b2a83d;
	background-color: var(--accent-color);
	color: #fff;
	color: var(--text-bright-color);
	font-size: 14px;
	text-decoration: none;
}

.conC a:hover {
	background-image: linear-gradient(rgba(255,255,255,0.2),rgba(255.255,255,0.2));
}

.conC .photo {
	min-height: 300px;
	background-image: url(img/conD.png);
	background-position: center;
	background-size: cover;
}

/* PC-콘텐츠C: 개요(image + text ) [width=768px]를 기준으로 */
@media (min-width: 768px) {
	.conC .container {
		display: flex;
		max-width: 1000px;
		max-width: var(--large-width);
		margin-left: auto;
		margin-right: auto;
	}
	.conC .photo { 
		flex: 3;
	}
	.conC .text {
		flex: 2;
		padding: 50px;
	}
}

/*콘텐츠D 개요(글자 + 이미지 :반대로 배치하기)*/
.conD .container {
	padding: 0;
	margin: 0;
}

.conD .text {
	padding: 20px;
	color: #fff
}

.conD {
	margin: 0;
	padding: 0;
	font-size: 14px;
	line-height: 1.8;
	opacity: 0.8;
	background: url(img/conC_1.png) no-repeat fixed ;
	background-size: 100%;
}


.conD h2 {
	margin-top: 0;
	margin-bottom: 10px;
	font-size: 18px;
	font-family:"Libre Baskerville"
}

/* PC-콘텐츠D: 개요(image + text ) [width=768px]를 기준으로 */
@media (min-width: 768px) {
	.conD .container {
		display: flex;
		flex-direction: row-reverse;
		max-width: 1000px;
		max-width: var(--large-width);
		margin-left: auto;
		margin-right: auto;
		padding: 0;


	}
	.conD .photo { 
		flex: 0 0 400px;
	}
	.conD .text {
		flex: 1;
		padding: 50px;
	}
}

/*conE*/
.conE {
  padding: 60px 0 80px;
}

.conE .container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
}

.conE-title {
  text-align: center;
  color: var(--main-color);
  margin-bottom: 30px;
  font-family:"Libre Baskerville"
}

.conE-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  grid-template-rows: repeat(2, auto);
  gap: 18px;
}

.conE-grid .img-small {
  width: 100%;
  position: relative;
}

.conE-grid .img-small::before {
  content: "";
  display: block;
  aspect-ratio: 4 / 3;   
}

.conE-grid .img-small img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.conE-grid .img-big {
  grid-column: 2;
  grid-row: 1 / span 2;  
  position: relative;
}

.conE-grid .img-big::before {
  display: block;
  aspect-ratio: 9 / 16;   
}

.conE-grid .img-big img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.conE-line {
  width: 100%;
  height: 5px;
  margin-top: 35px;
  background: #666;
}

@media (max-width: 767px) {

  /* conB */
  .conB .two-col {
    flex-direction: column;
    gap: 20px;
    padding: 30px 0;
  }

  .conB-left h2 {
    font-size: 22px;
  }

  .conB-left p {
    font-size: 14px;
  }

.conB-slider .slider-wrapper {
    width: calc((150px * 2) + (20px * 1));  
    overflow: hidden;
  }

  .conB-slider .slider-track img {
    width: 150px;
    height: 250px;
  }


  /* conC */
  .conC .container {
    flex-direction: column;
  }

  .conC .text {
    padding: 20px 0;
  }

  .conC h2 {
    font-size: 16px;
  }

  /* conD */
  .conD .container {
    flex-direction: column;
  }

  .conD .text {
    padding: 20px;
  }

  .conD h2 {
    font-size: 18px;
  }


  /* conE */
  .conE-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .conE-grid .img-big {
    grid-column: 1;
    grid-row: auto;
  }

  .conE-title {
    font-size: 20px;
  }
}



/* footer 푸터*/
footer {
	color: #fff;
	color: var(--text-bright-color);
	background-color: #000;
}

footer .container {     
	padding: 40px 20px;
}

/* PC- footer: 구조 레이아웃 [width=768px]를 기준으로*/
@media (min-width: 768px) {
	footer .container {
		display: flex;
		flex-wrap: wrap;
		max-width: 1000px;
		max-width: var(--large-width);
		margin:0 auto;
	}
	/*.footA {
		flex: 0 0 100%;
	}
	.footB {
		flex: 0 0 60%;
	}
	.footC {
		flex: 0 0 100%;
	}*/
	
}

.footA {
	margin-bottom: 30px;
	text-align: center;
	width: 100%;
}

.footA h2 {
	margin-top: 0;
	margin-bottom: 10px;
	font-family: 'Montserrat', sans-serif;
	font-size: 24px;
	color: #ddd;
}

.footA p {
	margin-top: 0;
	margin-bottom: 20px;
	font-size: 12px;
	color: #ccc;
}

.footA a {
	color: inherit;
	text-decoration: none;
}

/*.footB div {
	margin-left: 500px;
	margin-bottom: 20px;
}

.footB h3 {
	text-align: left;
	text-decoration: none;
	color: #fff;
	margin-top: 0;
	border-bottom: solid 1px currentColor;
	font-size: 14px;
}
*/

/*PC-footer B:[width=768px]를 기준으로*/
@media (min-width: 768px) {
	/*.footB {
		display: flex;
	}

	.footB div {
		flex: 1;
	}

	.footB div:not(:first-child) {
		margin-left: 40px;
	}*/
}

/*푸터C: 저작권*/
.footC {
	font-size: 12px;
	width: 100%;
	color: #888;
	text-align: center;
	font-family: 'Monstserrat', sans-serif;
}

/*푸터D: SNS 메뉴
.footD {
	margin-bottom: 20px;
}

.footD ul {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}

.footD a {
	display: block;
	margin-right: 8px;
	padding: 0;
	color: inherit;
	font-size: 16px;
	text-decoration: none;
	border: solid 1px currentColor;
	width: 2em;
	line-height: 2em;
	border-radius: 50%;
	text-align: center;
}

.footD a:hover {
	background-color: rgba(0,0,0,0.3);
}*/

/*about 페이지: post 작성 모바일*/

.about1 {
	color: #333;
}

.about1 .text {
	padding: 20px;
}

.about1 h2 {
	margin-top: 0;
	margin-bottom: 10px;
	font-size: 1.5em;
}

.about1 .photo {
	min-height: 300px; /*~500px*/
	background-image: url(img/about1.png);
	background-position: center;
	background-size: cover;
}

.about1 table {
	border-collapse: collapse;
	border-top: solid 1px #ddd;
	font-size: 0.875rem;
	width: 100%;
	margin-left: 10px;
}

/*.history tr*/
.about1 th, .history td {
	padding-top:  1.8rem;
	padding-bottom: 1.8rem;
}

.about1 th {
	padding-right: 5px;
	text-align: start;
	width: 100px;
}

/* histoy [width=768px]를 기준으로 */
@media (min-width: 768px) {
	.about1 .container {
		display: flex;
		max-width: 1000px;
		max-width: var(--large-width);
		margin-left: auto;
		margin-right: auto;
	}
	.about1 .photo { 
		flex: 3;
	}
	.about1 .text {
		flex: 2;
		padding: 50px;
	}
}

/* timeline */

* {
  box-sizing: border-box;
}

section.timeline h1{
	font-size:30px;
	font-weight:bold;
	text-align:center;
}
	

/*CSS 박스 모델의 기본값에서, 지정한 너비와 높이는 요소의 콘텐츠 박스 크기에만 적용됩니다. 요소에 테두리나 안쪽 여백이 있으면 너비와 높이에 더해서 화면에 그립니다. 따라서 크기를 설정할 때, 원하는 크기를 얻으려면 테두리나 안쪽 여백을 고려해야 합니다.

box-sizing 속성을 사용해 이 방식을 바꿀 수 있습니다.

content-box는 기본 CSS 박스 크기 결정법을 사용합니다. 요소의 너비를 100 픽셀로 설정하면 콘텐츠 영역이 100 픽셀 너비를 가지고, 테두리와 안쪽 여백은 이에 더해집니다.
border-box는 테두리와 안쪽 여백의 크기도 요소의 크기로 고려합니다. 너비를 100 픽셀로 설정하고 테두리와 안쪽 여백을 추가하면, 콘텐츠 영역이 줄어들어 총 너비 100 픽셀을 유지합니다. 대부분의 경우 이 편이 크기를 조절할 때 쉽습니다.*/

/* The actual timeline (the vertical ruler) */
.timeline {
  position: relative;
  max-width: 800px;
  margin: 80px auto;
}

/* The actual timeline (the vertical ruler) */
.timeline::after {
  content: '';
  position: absolute;
  width: 3px;
 /* background-color: white;*/
  background-color: #ccc;
  top: 100px;
  bottom: 100px;
  left: 50%;
  margin-left: 8px;
}

/* Container around content */
.container-time {
  padding: 10px 40px;
  position: relative;
  background-color: inherit;
  width: 50%;
}

/* The circles on the timeline */
.container-time::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  right: -20px;
  background-color: #ddd;
  border: 3px solid #b2a83d;
  top: 80px;
  border-radius: 50%;
  z-index: 1;
}

/* Place the container to the left */
.left {
  left: 0;
}

/* Place the container to the right */
.right {
  left: 50%;
}

/* Add arrows to the left container (pointing right) */
.left::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 80px;
  width: 0;
  z-index: 1;
  right: 30px;
  border: medium solid white;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent #ddd;
}

/* Add arrows to the right container (pointing left) */
.right::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 80px;
  width: 0;
  z-index: 1;
  left: 30px;
  border: medium solid white;
  border-width: 10px 10px 10px 0;
  border-color: transparent #ddd transparent transparent;
}

/* Fix the circle for containers on the right side */
.right::after {
  left: 0;
}

/* The actual content */
.content {
  padding: 20px 30px;
 /* background-color: white; background-color: rgba(255,255,255,0.3);*/
  position: relative;
  /*border-radius: 6px;*/
  color:#222;
}

/* Media queries - Responsive timeline on screens less than 600px wide */
@media screen and (max-width: 767px) {
  /* Place the timelime to the left */
  .timeline::after {
  left: 31px;
  }
  
  /* Full-width containers */
  .container-time {
  width: 100%;
  padding-left: 70px;
  padding-right: 25px;
  }
  
  /* Make sure that all arrows are pointing leftwards */
  .container-time::before {
  left: 60px;
  border: medium solid white;
  border-width: 10px 10px 10px 0;
  border-color: transparent white transparent transparent;
  }

  /* Make sure all circles are at the same spot */
  .left::after, .right::after {
  left: 30px;
  }
  
  /* Make all right containers behave like the left ones */
  .right {
  left: 0%;
  }
}







/*.timeline {
  width: 100%;
  padding: 80px 0;
}

.timeline h1 {
	padding: 20px;
	text-align: center;
}

.timeline-inner {
  width: 90%;
  max-width: 800px;
  margin: 0 auto;
  position: relative;
}
*/
/* 세로선 */
/*.timeline-inner::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: #ccc;
  transform: translateX(-50%);
  z-index: 0;
}*/

/* 아이템 공통 */
/*.tl-item {
  width: 50%;
  position: relative;
  padding: 50px 0;
}

.tl-item.left {
  text-align: right;
  padding-right: 0;
}

.tl-item.right {
  margin-left: 50%;
  padding-left: 40px;
}*/

/* 점 */
/*.tl-item::before {
  content: "";
  position: absolute;
  top: 50%;
  width: 16px;
  height: 16px;
  background: #fff;
  border: 3px solid #b2a83d;
  border-radius: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

.tl-item.left::before {
  right: -8px;
}

.tl-item.right::before {
  left: -8px;
}
*/
/* 내용 */
/*.tl-content {
  display: inline-block;
  max-width: 280px;
  margin-right: 40px;
}*/

.tl-img {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 15px;
}

.tl-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tl-title {
  font-size: 22px;
  margin-bottom: 8px;
  color: #333;
}

.tl-text {
  font-size: 14px;
  line-height: 1.6;
  color: #555;
}


/* 모바일 반응형*/ /* Q.교수님!!! 모바일 반응형이 자주 틀어지는데 문제가 무엇일까요? 오른쪽 아이템이 자꾸 정렬이 안맞아요..ㅜㅜ*/
/*@media (max-width: 767px) {

  .timeline-inner::before {
    left: 20px;
    transform: none;
  }

  .tl-item {
    width: 100%;
    margin: 0;
    text-align: left;
	padding: 0;
  }

  .tl-item::before {
    left: 12px;
    right: auto;
  }

  .tl-content {
    max-width: 100%;
	margin: 0;
  }

  .tl-img {
    width: 150px;
    height: 150px;
  }
  .tl-item.left::before {
	  left: 10px;
	}

  .tl-item.right::before {
	  left: -170px;
	}
}*/




/*Artwork 소개*/

.listB { 
	padding: 60px 0; 
	background-color: #222;
}

.listB .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  
}

/* 필터 버튼 */
.listB-filter {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-bottom: 40px;
}

.listB-filter button {
  padding: 8px 16px;
  border: none;
  background: #333;
  border-radius: 4px;
  font-size: 15px;
  cursor: pointer;
  transition: .2s;
  color: #fff;
}

.listB-filter button.active {
  background: #870000ff;
  color: #fff;
}

.listB-filter button:hover {
  background: #572121ff ;
  color: #fff;
}

.listB-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px 24px;
}

.listB-card {
  text-align: center;
}

.listB-card .thumb {
  position: relative;
  width: 100%;
}

.listB-card .thumb::before {
  content:"";
  display:block;
  aspect-ratio: 9 / 16;
}

.listB-card .thumb img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  border-radius: 4px;
}

.listB-card .title {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #eee;
}

@media(max-width: 900px){
  .listB-grid { grid-template-columns: repeat(3, 1fr); }
}

@media(max-width: 600px){
  .listB-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 384px) {
	.listB .photo {
		flex: 1;
	}
	
	.listB p {
		display: none;
	}
}

/*brand*/
.con0.compact {
	height: 1000px;
	width: 100%;
	background-image: linear-gradient(rgb(0, 0, 0), rgba(255, 255, 255, 0.1)), url(img/brand_main.png);
	color: #ffffffff;
	margin-top: -50px;
	background-size: cover;
    background-position: center;
}

.herocon {
    background-color: #fff;
}

/* Mobile */
.con0 h3{
	text-align: center;
	margin: 0;
	padding-top: 300px;
	font-family: 'Montserrat', sans-serif;
	letter-spacing: 0.1em;
	font-size:  8vw; /* view width, 모든 기기가 320px으로 맞춤 320px = 100vw */
}

	.con0 p {
		text-align: center;
	}


/* Mobile size -콘텐츠A: main-banner-image(width=768px), pc 사이즈 */
@media (min-width: 768px) {
	.con0 .compact {
		height: 1050px;
	}
	.con0 h3 {
		font-size: 75px;
	}

	.con0 p {
		font-size: 24px;
	}
}



.con1 {
	color: #333;
}

.con1 .text {
	padding: 20px;
	margin: 0;
}

.con1 h2 {
	margin-top: 0;
	margin-bottom: 10px;
	font-size: 18px;
	color: var(--main-color);
 	font-family: "Libre Baskerville";
}

.con1 {
	margin-top: 0;
	margin-bottom: 20px;
	font-size: 14px;
	line-height: 1.8;
	opacity: 0.8;
}


.con1 .photo {
	min-height: 300px;
	background-image: url(img/con1.png);
	background-position: center;
	background-size: cover;
}

/* PC-콘텐츠C: 개요(image + text ) [width=768px]를 기준으로 */
@media (min-width: 768px) {
	.con1 .container {
		display: flex;
		max-width: 1000px;
		max-width: var(--large-width);
		margin-left: auto;
		margin-right: auto;
	}
	.con1 .photo { 
		flex: 3;
	}
	.con1 .text {
		flex: 2;
		padding: 50px;
	}
}

/*콘텐츠2 개요(글자 + 이미지 :반대로 배치하기)*/
.con2 .container {
	padding: 0;
	margin: 0;
}

.con2 .text {
	padding: 20px;
	color: #333
}

.con2 { 
	margin: 0;
	padding: 0;
	font-size: 14px;
	line-height: 1.8;
}


.con2 .photo { 
    width: 100%;
    background-image: url('img/con2.png');
    background-size: cover;  
    background-position: center;
	margin: 0;
}

.con2 h2 {
	margin-top: 0;
	margin-bottom: 10px;
	font-size: 18px;
	color: var(--main-color);
 	font-family: "Libre Baskerville";
}

/* PC-콘텐츠D: 개요(image + text ) [width=768px]를 기준으로 */
@media (min-width: 768px) {
	.con2 .container {
		display: flex;
		flex-direction: row-reverse;
		max-width: 1000px;
		max-width: var(--large-width);
		margin-left: auto;
		margin-right: auto;
		padding-top: 40px;
		padding-bottom: 40px;

	}
	.con2 .photo { 
		flex: 0 0 400px;
	}
	.con2 .text {
		flex: 1;
		padding: 50px;
	}
}

.con3 .text {
	padding: 20px;
	margin: 0;
}

.con3 h2 {
	margin-top: 0;
	margin-bottom: 10px;
	font-size: 18px;
	color: var(--main-color);
 	font-family: "Libre Baskerville";
}

.con3 {
	margin-top: 0;
	margin-bottom: 20px;
	font-size: 14px;
	line-height: 1.8;
	opacity: 0.8;
		color: #333;
}


.con3 .photo {
	min-height: 300px;
	background-image: url(img/con3.png);
	background-position: center;
	background-size: cover;
}

/* PC-콘텐츠C: 개요(image + text ) [width=768px]를 기준으로 */
@media (min-width: 768px) {
	.con3 .container {
		display: flex;
		max-width: 1000px;
		max-width: var(--large-width);
		margin-left: auto;
		margin-right: auto;
	}
	.con3 .photo { 
		flex: 3;
	}
	.con3 .text {
		flex: 2;
		padding: 50px;
	}
}

/* ==========================
   con4 – 이미지 3개 균등 배치
=========================== */

.con4 {
  padding: 60px 0 80px;
}

.con4 .container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
}

.con4-title {
  text-align: center;
  color: var(--main-color);
  margin-bottom: 40px;
  font-family: "Libre Baskerville";
}

.con4-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.con4-grid .img-box {
  position: relative;
  width: 100%;
  height: 400px;
}

.con4-grid .img-box::before {
  content: "";
  display: block;
  aspect-ratio: 4 / 3;  /* 이미지 비율 통일 */
}

.con4-grid .img-box img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 767px) {
  .con4-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
}