@charset "UTF-8";

/* 기본 색상 */
:root {
	--main-color: #E15454;
	--background-color1:#E3D3D3;
	--background-color2:#F6F2EF;
	--accent-color: #844242;
	--dark-main-color: #825454;
	--text-bright-color: #FCF5EE;
	--text-dark-color: #372220;
	--icon-color: #fff;
	--sub-nav: #FFE6DA;
	--gray-color: #ddd;
	--large-width: 1000px;
	--middle-width: 800px;
}


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

/*타블렛 크기*/
@media (min-width: 600px) and (max-width: 799px) {
	:root {
		font-size: 17px;
	}
}

/*PC 크기*/
@media (min-width: 800px) {
	:root {
		font-size: 18px;
	}
}
*{
	padding: 0;
	margin: 0;
}
body {
	font-size: 0.89rem;
}


/* 기본 설정: 페이지 전체 */
body {
	margin: 0;
	font-family: 'Noto Sans KR',
		'Apple SD Gothic Neo','sans-serif';
}

/*기본 설정 : 텍스트 컬러*/
p{
	color: var(--text-dark-color);
}
h2{
	color: var(--text-dark-color);
	font-family: 'Playfair Display', serif;
	font-weight: 500;
	font-size: 3.56rem;
}

/* M-header 헤더*/
header{
	position: absolute;
	top:0;
	left: 0;
	z-index: 100;
	width: 100%;
	background-color: var(--main-color);
}
.nohero header{
	position: static;
	/*border-bottom: solid 1px #ddd;*/
}

/* M-head A: 사이트 이름*/
.headA{
	display: inline-block;
	padding: 15px 0;
	/*background-color: #6E888E;*/
	background-color: var(--main-color);
	/*color: #fff;*/
	/*color: var(--text-bright-color);
	font-family: 'Montserrat', sans-serif;
	font-size: 1.33rem;
	text-decoration: none;*/
}
.container-small{
	align-items: center
}
.headA img{
	width: 200px;
}

/* M-headB: 네비게이션 메뉴*/
.headB ul{
	margin: 0;
	padding: 0;
	list-style: none;
}
.headB a{
	display: block;
	padding: 15px;
	color: inherit;
	font-size: 0.67rem;
	text-decoration: none;
}
.headB .sidenav .dropdown-btn{
	color: var(--text-bright-color);
}
.headB .sidenav .dropdown-container a{
	color: var(--text-dark-color);
}
.headB .sidenav .dropdown-container a:hover{
	color: var(--main-color);
}
.headB .subnav{
	background-color: var(--main-color);
	color: var(--text-dark-color);
	padding: 10px 0;
}
.headB .subnav .subnavbtn{
	color: var(--background-color2);
}
.headB .subnav .subnav-content a:hover{
	color: var(--main-color);
}
.headB a.hover{
	color: var(--text-bright-color);
	padding-top: 24px;
	padding-bottom: 24px;
}
.headB a.hover:hover{
	opacity: 0.5;
}

/* PC-headB: 네비게이션 메뉴 [width=768px] 기준 */
@media (min-width: 768px) {
	header .container{
		display: flex;
		align-items: center;
		justify-content: space-between;
		max-width: var(--large-width);
		margin: auto;
	}

	.headB ul{
		display: flex;
	}

	/* PC Dropdown Base */
	.subnav {
		position: relative;      /* 드롭다운 부모 컨테이너 */
	}

	.subnav .subnavbtn {
		display: block;
		padding: 15px;
		font-size: 0.67rem;
		cursor: pointer;
	}

	/* Hover 했을 때 버튼 스타일 */
	.subnav:hover .subnavbtn {
		opacity: 0.5;
	}
	

	/* 드롭다운 콘텐츠 */
	.subnav-content {
		display: none;
		position: absolute;
		top: 100%;                /* 버튼 바로 아래에 배치 */
		left: 0;
		background-color: var(--sub-nav);
		min-width: 160px;
		box-shadow: 0px 8px 16px rgba(0,0,0,0.1);
		z-index: 10;
		padding: 0;
	}

	.subnav-content a {
		display: block;
		padding: 12px 16px;
		text-align: left;
		color: var(--text-dark-color);
		text-decoration: none;
		white-space: nowrap;
	}

	.subnav-content a:hover {
		color: var(--background-color2);
	}

	/* Hover 시 드롭다운 보이게 */
	.subnav:hover .subnav-content {
		display: block;
	}

	/* 모바일용 sidemenu 숨기기 */
	.sidenav{
		display: none !important;
	}
}


/* M-HeaderC: 토글 버튼*/
@media (max-width: 768px) {
	/*M 전용 설정*/
	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: 1.56rem;
		opacity: 0.8;
		cursor: pointer;
	}
	.headC:hover{
		opacity: 0.3;
	}
	.headC .fa-bars{
		color: var(--text-bright-color);
	}
	.headA{
	padding: 15px 0;
	padding-left: 15px;
	}
	.headB{
		display: none;
	}
	.headB a.hover{
	padding-top: 15px;
	padding-bottom: 15px;
	}
	/*subnav 안보이게 설정*/
	.subnav{
		display: none;
	}

	/*헤더 드롭다운 메뉴 설정 가져옴*/
	.sidenav {
	overflow-x: hidden;
	}
		/* Style the sidenav links and the dropdown button */
	.sidenav a, .dropdown-btn {
	border: none;
	background: none;
	width:100%;
	outline: none;
	}

	/* Main content */
	.main {
	margin-left: 200px; /* Same as the width of the sidenav */
	font-size: 1.11rem; /* Increased text to enable scrolling */
	padding: 0px 10px;
	}

	/* Add an active class to the active dropdown button */
	.active {
	background-color: green;
	color: white;
	}

	/* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */
	.dropdown-container {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
	background-color: var(--sub-nav);
}

	/* active 클래스가 붙으면 펼침 */
	.dropdown-btn.active + .dropdown-container {
		max-height: 500px; /* 충분히 큰 값으로 설정하여 모두 보이게 함 */
	}

}




/* PC-HeaderC: 토글 버튼*/
@media (min-width: 768px) {
	/*PC 전용 설정*/
	.headC{
		display: none;
	}
	.headB{
		display: block !important;
	}
}




/* M-footer 푸터*/
footer{
	/*color: #fff;*/
	color: var(--text-bright-color);
	/*background-color: #3e6974;*/
	background-color: var(--dark-main-color);
}
footer .container{
	padding: 40px 20px;
}
.footA img{
	width: 40%;
}
/* 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 img{
		width: 60%;
	}	
	.footC{
		flex: 0 0 100%;
	}
	/*.footA{
		flex: 0 0 40%;
	}
	.footB{
		flex: 0 0 60%;
	}
	*/
}

/* M-푸터A : 로고*/
footer .container{
	flex-direction: column;
	align-items: center;
}
.footA{
	display: flex;
	justify-content: center;
	margin-bottom: 20px;
}
/*.footA img{
	min-width: 200px;
}*/
/* M-푸터B : 푸터 메뉴*/
.footB{
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0;
	color: #b88686;
	line-height:1;
	font-size: 0.78rem;
}
.footB a{
	display: block;
	padding: 5px;
	color: #c39196;
	font-size: 0.78rem;
	line-height:1;
	text-decoration: none;
	/*padding-right: 20px;*/
}
/*.footB .nomargin{
	padding-right: 3px;
}*/
.footB a:hover{
	color: #e7a8ae;
}

.footC {
	font-size: 0.67rem;
	text-align: center;
	font-family: 'Montserrat', sans-serif;
	padding: 10px 0 10px 0;
}
/* PC-footer B: [width=768px]를 기준으로*/
@media (min-width: 768px) {
	.footB{
		display: flex;
	}
}



/* M-Index ConA: main-banner-image 히어로 이미지*/
.conA {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	min-height: 450px;
	background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0)), url(img/IndexHero.png);
	background-position: center;
	background-size: cover;
	/*color: #fff;*/
	color: var(--text-bright-color);
	text-align: center;
}

.conA.compact {
	height: 450px;
	min-height: 0;
	background-image: linear-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.1)), url(img/collection1Banner.png);
	background-position: center;
}

.conA h1 {
	margin-top: 0;
	margin-bottom: 10px;
	font-family: 'Montserrat',sans-serif;
	letter-spacing: 0.2em;
	margin-left: 0.2em;
	font-size: 15vw;
}

.conA p {
	margin-top: 0;
	margin-bottom: 0;
	font-size: 0.67rem;
}
.conA img{
	min-width: 250px;
	margin-top: 150px;
}

/* PC-Index ConA: main-banner-image*/
@media (min-width: 768px) {
	.conA h1 {
		font-size: 115px;
	}

	.conA p {
		font-size: 1.33rem;
	}
}


/* M-Index ConB: 개요(글자 + 이미지 : 반대로 배치하기)*/
#index .conB .container{
	padding-top: 120px;
	padding-bottom: 110px;
	text-align: left;
}
#index .conB h2{
	margin-top: 0;
	margin-bottom: 10px;
	font-family: 'Playfair Display', serif;
	font-weight: 500;
	font-size: 3.56rem;
}
#index .conB p{
	margin-bottom: 0;
	font-size: 1rem;
	line-height: 1.8;
}
#index .conB .text{
	padding-left: 30px;
}
#index .conB .text .explanation{
	margin-top: 70px;
}
#index .conB a{
	display: inline-block;
	margin-top: 30px;
	margin-bottom: 80px;
	padding: 12px 40px;
	border-radius: 6px;
	/*background-color: #9D8AAE;*/
	background-color: transparent;
	border: solid 1px var(--main-color);
	/*color: #fff;*/
	color: var(--main-color);
	font-size: 0.78rem;
	text-decoration: none;
	transition: background-color 0.5s ease, color 0.5s ease;
}
#index .conB a:hover{
	color: var(--text-bright-color);
	background-color: var(--main-color);
}
#index .conB .photo{

	aspect-ratio: 3 / 4;
	background-image: url(img/IndexConB.png);
	background-position: top;
	background-size: cover;
	align-self: flex-start;
}

/* PC- Index ConB: 개요(아이콘 + 글자) [width=768px]를 기준으로*/
@media (min-width: 768px) {
	#index .conB .container{
		display: flex;
		/*max-width: 1000px;*/
		max-width: var(--large-width);
		margin: 0 auto;
		
	}
	#index .conB .photo{
		flex: 0 0 400px;
		border-top-left-radius: 135px;
		border-bottom-right-radius: 135px;
		
	}
	#index .conB .text{
		max-width: 500px;
		margin-right: 40px;
		padding-left: 0;
		margin-top: 120px;
		text-align: right;
	}
	#index .conB a{
		margin-top: 30px;/*버튼 위 공간*/
	}
}

/* PC- Index ConB: 개요(아이콘 + 글자) [width=768px]를 기준으로*/
@media (max-width: 1050px) {
	#index .conB .container{
		padding-left: 30px;
	}
}

@media (max-width: 768px) {
	#index .conB .container{
		padding-left: 0;
	}
	#index .conB .text .explanation{
		margin-top: 50px;
	}
	#index .conB .text{
		text-align: left;
	}
}


/* M Index ConC: 개요(icon+text)*/
#index .conC .container{
	max-width: var(--large-width);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}
#index .conC h2{
	margin-bottom: 10px;
	font-family: 'Playfair Display', serif;
	font-weight: 500;
	font-size: 3.56rem;
	display: inline-block;
	position: relative;
	top: 0;
	margin-left: 30px;
}
#index .conC p.explanation{
	font-size: 1rem;
	line-height: 1.8;
	text-align: right;
}
#index .conC a{
	display: inline-block;
	align-self: flex-end;
	margin-top: 10px;/*버튼 위 공간*/
	margin-left: 30px;
	padding: 12px 40px;
	border-radius: 6px;
	/*background-color: #9D8AAE;*/
	background-color: transparent;
	border: solid 1px var(--main-color);
	/*color: #fff;*/
	color: var(--main-color);
	font-size: 0.78rem;
	text-decoration: none;
	transition: background-color 0.5s ease, color 0.5s ease;
}
#index .conC a:hover{
	color: white;
	background-color: var(--main-color);
	border: solid 1px var(--main-color);
}

#index .conC .Kcontainer{
	padding-top: 100px;
	padding-bottom: 20px;
	display: block;
}
#index .conC .keyword{
	padding-bottom: 60px;
	width: 100%;
	text-align: center;
}
#index .conC p{
	margin-top: 10px;
	margin-bottom: 10px;
	font-size: 0.67rem;
}
#index .conC .keyword img{
	max-width: 300px;
	transition: all 0.4s ease;
}
#index .conC .keyword p{
	font-size: 0.78rem;
}
#index .conC .UDcontainer{
	width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    display: block; /* flex 제거해도 됨 */
    overflow: hidden; /* 혹시 삐져나올 경우를 대비 */
}
#index .conC img.under{
	margin-top: 150px;
	width: 95%;
	display: none;
}


/* PC-Index ConC: 개요(아이콘 + 글자) [width=768px]를 기준으로*/
@media (min-width: 768px) {
	#index .conC{
		position: relative;
		left: 50%;
		width: 100vw;
		margin-left: -50vw;
		background-image: url(img/IndexConCBack.png);
		background-repeat: no-repeat;
		background-position: center calc(50% + 10px);
		background-size: contain;
	}
	#index .conC .text{
		max-width: 700px;
		margin-left: auto;
	}
	#index .conC .Kcontainer {
        display: flex;
        max-width: var(--large-width);
        margin: 0 auto;
		justify-content: space-between;
		gap: 60px;
	}
    #index .conC .Kcontainer .keyword {
        flex: 1;
        min-width: 0; /* 넘침 방지 */
        text-align: center;
    }
	#index .conC .up {
		display: flex;
		margin-top: 0;
		margin-bottom: 10px;
		flex-direction: column-reverse;
		align-items: center;
	}
	#index .conC h2{
    	top: 60px;
		margin-right:340px;/*왼쪽 간격*/
		margin-left: 0;
	}
	#index .conC img.under{
		width: 100vw;
		max-width: 100vw;
		height: auto;
		margin-top: 150px;
		display: block;
	}
	#index .conC .Kcontainer .keyword.nomargin{
		margin-right: 0;
	}
	#index .conC .text {
		text-align: right;
	}
	#index .conC .text h2{
		text-align: left;
	}
	#index .conC a{
		margin-left: 0;
	}
}

@media (max-width: 1050px) {
	#index .conC .text{
		padding-right: 30px;
	}
	#index .conC .keyword img{
		max-width: 200px;
		transition: all 0.4s ease;
	}
}

@media (max-width: 767px) {
	#index .conC .keyword img{
		width: 85%;
		max-width: 400px;
		transition: none;
	}
	#index .conC .text .explanation{
		font-size: 0.78rem;
	}
}


/* M Index ConD: 개요(text + image3)*/
body {
  overflow-x: hidden;/*가로 스크롤이 생기지 않도록 방지*/
}
#index .conD .container{
	max-width: var(--large-width);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}
#index .conD h2.subtitle{
	margin-bottom: 10px;
	font-family: 'Playfair Display', serif;
	font-weight: 500;
	font-size: 3.56rem;
	display: inline-block;
	color: var(--text-bright-color);
}
#index .conD .text p.explanation{
	font-size: 1rem;
	line-height: 1.8;
	color: var(--text-bright-color);
}
#index .conD .Kcontainer .keyword h2{
	font-size: 1rem;
	color: var(--text-dark-color);
}
#index .conD .Kcontainer{
	padding-top: 80px;
	padding-bottom: 20px;
	display: block;
}
#index .conD .keyword{
	padding-bottom: 60px;
	width: 100%;
	text-align: center;
	display: flex;
  	flex-direction: column;
  	align-items: center;
}
#index .conD h2{
	margin-top: 20px;
	font-family: 'Noto Sans KR', sans-serif;
}
#index .conD p{
	margin-top: 10px;
	margin-bottom: 10px;
	font-size: 0.67rem;
	line-height: 1.8;
	color: var(--text-dark-color);
}
#index .conD .keyword img {
    width: 87%;
    height: auto;
	border-radius: 50%;
}

/* PC-Index ConD: 개요(글자 + 이미지3) [width=768px]를 기준으로*/
@media (min-width: 768px) {
	#index .conD{
		padding-top: 40px;
		position: relative;
		left: 50%;
		width: 100vw;
		margin-left: -50vw;
		background: url(img/IndexConDBack.png) no-repeat top center / cover;
	}
	#index .conD .Kcontainer {
        display: flex;
		width: 100%;
		max-width: var(--large-width);
	}
    #index .conD .Kcontainer .keyword{
        flex: 1;
        min-width: 0; /* 넘침 방지 */
        text-align: center;
		padding-right: 50px;
    }
	#index .conD .Kcontainer .nomargin{
		padding-right: 0;
	}
	#index .conD .keyword img {
    width: 100%;
	}
}

/*너비가 769px 이하의 미디어에서*/
@media (max-width: 768px){
	#index .conD{
		background-color: var(--background-color);
	}
	#index .conD h2.subtitle{
		color: var(--text-dark-color);
		margin-left: 30px;
	}
	#index .conD .text p.explanation{
		color: var(--text-dark-color);
		margin-left: 30px;
	}
}


/* M-Index ConE: 개요(이미지2 + 텍스트) [width=768px]를 기준으로*/
#index .conE{
	padding-top: 40px;
	padding-bottom: 100px;
	background-color: var(--background-color2);
}
#index .conE .container{
	max-width: var(--large-width);
    margin: 0 auto;
    display: flex;
}
#index .conE h2{
	margin-top: 0;
	margin-bottom: 10px;
	font-family: 'Playfair Display', serif;
	font-weight: 500;
	font-size: 3.56rem;
	color: var(--text-dark-color);
}
#index .conE .text p{
	font-size: 0.89rem;
	width: 90%;
}
#index .conE p{
	margin-top: 0px;
	margin-bottom: 0;
	font-size: 0.67rem;
	line-height: 1.8;
	color: var(--text-dark-color);
}
#index .conE .img {
	max-width: 300px;
	display: block;
	margin: 0 auto;
}
#index .conE .imgCon .img p{
	display: block;
	margin-top: 10px;
	color: var(--text-dark-color);
}
#index .conE .img img {
	width: 100%;
	height: auto;
	display: block;
}
#index .conE a{
	display: inline-block;
	padding: 12px 40px 16px 40px;
	border-radius: 6px;
	/*background-color: #9D8AAE;*/
	background-color: transparent;
	/*color: #fff;*/
	color: var(--main-color);
	border: solid 1px var(--main-color);
	font-size: 0.78rem;
	text-decoration: none;
	margin-top: 20px;
	transition: background-color 0.5s ease, color 0.5s ease;
}
#index .conE a:hover{
	color: white;
	background-color: var(--main-color);
}



/* PC-Index ConE: 개요(글자 + 이미지3) [width=768px]를 기준으로*/
@media (min-width: 768px) {
	#index .conE{
		padding-top: 150px;
	}
	#index .conE .container {
	display: flex;
	}
	#index .conE .imgCon {
		display: flex;
		flex: 2;
		display: flex;
	}
	#index .conE .imgCon .img{
		margin-right: 40px;
	}
	#index .conE .text {
		flex: 1;
	}
}

/* M-Index ConE: 개요(글자 + 이미지3) [width=768px]를 기준으로*/
@media (max-width: 767px) {
    #index .conE .img {
        max-width: 83vw; /* 전체 화면의 80% */
    }
	#index .conE .container{
    	flex-direction: column;
	}
	#index .conE h2{
		margin-left: 30px;
	}
	#index .conE p{
		margin-left: 0px;
		margin-bottom: 30px;
	}
	#index .conE .text p{
		margin-left: 30px;
		width: 60%;
	}
	#index .conE a{
		margin-left: 30px;
	}
	
}



/*M-about1 conB : 텍스트 + 이미지*/
#about1 .conB{
	margin-top: 80px;
}
#about1 .conB .container{
	display: flex;
	max-width: var(--large-width);
	margin: 0 auto;
	justify-content: space-between;
	flex-direction: column;
  	align-items: center;
}
#about1 .conB h2{
	font-family: 'Playfair Display', serif;
	font-weight: 500;
	font-size: 3.56rem;
	margin-top: 40px;
}
#about1 .conB p.subtitle{
	font-size: 1.39rem;
}
#about1 .conB p{
	margin-top: 20px;
	font-size: 1rem;
	line-height: 1.8;
}
#about1 .conB .img {
	width: 80%;
	margin-top: 80px;
}
#about1 .conB .img img {
	width: 100%;
	height: auto;
	display: block;
	border-bottom-left-radius: 135px;
}
#about1 .conB .mini{
    width: 100%;
    border-collapse: collapse;
}
#about1 .conB table{
	margin-top: 20px;
}
#about1 .conB .mini td {
    border: none;
    vertical-align: middle;
}
#about1 .conB .mini .miniImg{
	max-width: 130px;
}
#about1 .conB .mini .miniImg img{
	width: 100%;
}
#about1 .conB .mini .miniText{
	padding-left: 20px;
}
#about1 .conB .mini .miniText p{
	margin-top: 0;
}

/* PC-about1 conB: 개요(이미지 + 텍스트) [width=768px]를 기준으로*/
@media (min-width: 768px) {
	#about1 .conB {
    margin-top: 120px;
  	}
	#about1 .conB .text{
		width: 50%;
	}
  	#about1 .conB .container {
    	flex-direction: row;
		justify-content: space-between;
		text-align: left;
		align-items: flex-start;
	}

	#about1 .conB h2 {
		font-size: 3.56rem;
		margin-top: 0;
	}

	#about1 .conB p {
		font-size: 1rem;
	}

	#about1 .conB .img {
		max-width: 445px;
		margin-top: 0;
	}
}

/*너비가 769px 이하의 미디어에서*/
@media (max-width: 768px){
	#about1 .conB .text{
		padding: 0 30px;
		width: 80%;
	}
	#about1 .conB .text h2{
		font-size: 2.78rem;
	}
}

@media (max-width: 320px){
	#about1 .conB .text{
		max-width: 250px;
	}
}


/*M-about1 conC : 이미지3 + 텍스트*/
#about1 .conC .background{
	background-image: url(img/about1ConCBack.png);
	background-position: center;
	background-size: cover;
}
#about1 .conC .container{
	display: flex;
	max-width: var(--large-width);
	margin: 0 auto;
	flex-direction: column;
}
#about1 .conC .Kimg {
	width: 80%;
	margin-top: 80px;
	margin: 0 auto;
}
#about1 .conC .Kimg img {
	width: 100%;
	height: auto;
	display: block;
	margin-right: 0;
	margin-top: 80px;
}
#about1 .conC .text{
	margin: 70px 0;
}

/* PC-about1 conC: 개요(이미지3 + 텍스트) [width=768px]를 기준으로*/
@media (min-width: 768px) {
	#about1 .conC {
    	margin-top: 150px;
  	}
  	#about1 .conC .container {
    	justify-content: space-between;
	}
	#about1 .conC .text{
		display: flex;
		width: 100%;
	}
	#about1 .conC h2 {
		font-size: 3.56rem;
		margin-top: 0;
		margin-top: 0;
	}
	#about1 .conC p {
		font-size: 1rem;
		margin-left: 130px;
		margin-top: 15px;
	}
	#about1 .conC .Kimg {
		width: 100%;
		margin-top: 0;
		display: flex;
	}
	#about1 .conC .Kimg img {
		width: calc((100% / 3) - 13.333px); /* gap에 따라 조정 */
		margin-right: 20px;
		margin-top: 0;
	}
	#about1 .conC img.nomargin{
		margin-right: 0;
	}
}

@media (max-width: 768px){
	#about1 .conC .text{
		padding: 0 30px;
		max-width: 700px;
	}
	#about1 .conC .text p{
		margin-top: 20px;
		font-size: 0.89rem;
	}
	#about1 .conC .text h2{
		font-size: 2.78rem;
	}
}



/*M-about1 conD : 이미지 + 텍스트 + 타임라인*/
#about1 .conD{
	margin-top: 140px;
}
#about1 .conD  .circle{
	display: flex;
	justify-content: center;
}
#about1 .conD .circle.bottom{
	margin-top: 50px;
	margin-bottom: 100px;
}
#about1 .conD .Microcopy .circle img{
	max-width: 20px;
}
#about1 .conD .Microcopy .text{
	margin-top: 50px;
}
#about1 .conD .Microcopy .text.bottom{
	margin-top: 90px;
}
#about1 .conD .Microcopy .text p{
	font-size: 1.89rem;
	text-align: center;
	line-height: 1.6;
}


/*타임라인 가져옴*/
/* Media queries - Responsive timeline on screens less than 600px wide */
#about1 .conD .timeline * {
	box-sizing: border-box;
}

/* The actual timeline (the vertical ruler) */
#about1 .conD .timeline {
	position: relative;
	max-width: 1000px;
	margin: 0 auto;
	margin-top: 80px;
	padding: 70px 0;
}

/* The actual timeline (the vertical ruler) */
#about1 .conD .timeline::after {
	content: '';
	position: absolute;
	width: 2px; /*선 두께 조정*/
	background-color: var(--gray-color);
	top: 0;
	bottom: 0;
	left: 50%;
	margin-left: -2px;
}

/* Container around content */

#about1 .conD .timeline .container {
	padding: 10px 40px;
	position: relative;
	background-color: inherit;
	width: 50%;
	margin-bottom: 50px;/*컨테이너 간 위 아래 간격*/
}
#about1 .conD .timeline .container:last-child{
	margin-bottom: 0;
}
/* The circles on the timeline */
#about1 .conD .timeline .container::after {
	content: '';
	position: absolute;
	width: 15px; /*원 가로 길이*/
	height: 15px; /*원 세로 길이*/
	right: -9px; /*원 위치 조정*/
	background-color: white;
	border: 2px solid var(--dark-main-color);/*원 색상 및 선 두께 지정*/
	top: 15px;
	border-radius: 50%;
	z-index: 1;
}

/* Place the container to the left */
#about1 .conD .timeline .left {
  	left: 0;
}
#about1 .conD .timeline .left {
  	text-align: right;
}

/* Place the container to the right */
#about1 .conD .timeline .right {
  	left: 50%;
}


/* Fix the circle for containers on the right side */
#about1 .conD .timeline .right::after {
  	left: -9px; /*원 위치 조정*/
}

/* The actual content */
#about1 .conD .timeline .content {
  	background-color: white;
  	position: relative;
  	border-radius: 6px;
}

#about1 .conD .timeline h2{
	font-family: 'Noto Sans KR', sans-serif;/*서체 변경*/
	font-size: 1.56rem;
	margin-bottom: 8px;
}
#about1 .conD .timeline p{
	line-height: 1.8;
}
#about1 .conD .timeline img{
	width: 90%;
	margin-top: 16px;
}

/* Media queries - Responsive timeline on screens less than 600px wide */
@media screen and (max-width: 600px) {
	/* Place the timelime to the left */
		#about1 .conD .timeline::after {
			left: 31px;
		}

	/* Full-width containers */
		#about1 .conD .timeline .container {
			width: 100%;
			padding-left: 70px;
			padding-right: 25px;
		}

	/* Make sure that all arrows are pointing leftwards */
		#about1 .conD .timeline .container::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 */
		#about1 .conD .timeline .left::after, .right::after {
			left: 20px;
		}
		#about1 .conD .timeline .right::after {
			left: 21px; /*원 위치 조정*/
		}

	/* Make all right containers behave like the left ones */
		#about1 .conD .timeline .right {
			left: 0%;
		}

		#about1 .conD .timeline .left {
			text-align: left;
		}
		#about1 .conD .Microcopy .text p{
			font-size: 1.44rem;
		}
}

@media (max-width: 376px){
	#about1 .conD .Microcopy .text p{
		font-size:1.11rem;
	}
}


/*M-about2 conB : 텍스트 + 이미지*/
#about2 .conB{
	margin-top: 80px;
}
#about2 .conB .container{
	display: flex;
	max-width: var(--large-width);
	margin: 0 auto;
	justify-content: space-between;
	flex-direction: column;
  	align-items: center;
}
#about2 .conB h2{
	font-family: 'Playfair Display', serif;
	font-weight: 500;
	font-size: 3.56rem;
}
#about2 .conB p{
	margin-top: 20px;
	font-size: 1rem;
	line-height: 1.8;
}
#about2 .conB .img {
	width: 80%;
	margin-top: 30px;
}
#about2 .conB .img img {
	width: 100%;
	height: auto;
	display: block;
}
#about2 .conB .under {
	display: none;
}

/* PC-about2 conB: 개요(텍스트 + 이미지) [width=768px]를 기준으로*/
@media (min-width: 768px) {
	#about2 .conB {
    margin-top: 80px;
  	}
	#about2 .conB .text{
		width: 50%;
	}
  	#about2 .conB .container {
    	flex-direction: row;
		justify-content: space-between;
		text-align: left;
		align-items: flex-start;
	}

	#about2 .conB h2 {
		font-size: 3.56rem;
	}

	#about2 .conB p {
		font-size: 1rem;
	}

	#about2 .conB .img {
		max-width: 400px;
		margin-top: 0;
		text-align: right;
	}
	#about2 .conB .under {
		display: block;
		width: 100vw;
		position: relative;
		left: 50%;
		margin-left: -50vw; /* 화면 전체폭 맞추기 */
		margin-top: 120px;
		text-align: center;
		overflow: hidden; /* 혹시 넘치면 숨김 */
	}
	#about2 .conB .under img {
		width: 100vw;
		max-width: 100vw;
		height: auto;
		display: block;
	}
}
/*너비가 769px 이하의 미디어에서*/
@media (max-width: 768px){
	#about2 .conB .text{
		padding: 0 30px;
	}
	#about2 .conB .text h2{
		font-size: 2.33rem;
	}
	#about2 .conB .img{
		margin-bottom: 30px;
	}
}

@media (max-width: 320px){
	#about2 .conB .text{
		max-width: 250px;
	}
	#about2 .conB .text h2{
		font-size: 2.56rem;
	}
}

/*M-about2 conC : 텍스트 + 이미지*/
#about2 .conC{
	padding: 40px 0;
	background-color: var(--background-color1);
}
#about2 .conC.reverse{
	background-color: var(--background-color2);
}
#about2 .conC .container{
	display: flex;
	max-width: var(--large-width);
	margin: 0 auto;
	justify-content: space-between;
	flex-direction: column;
  	align-items: center;
}
#about2 .conC .text{
	margin-top: 20px;
}
#about2 .conC h2{
	font-family: 'Playfair Display', serif;
	font-weight: 500;
	font-size: 2.78rem;
}
#about2 .conC .subtitle{
	margin-top: 10px;
	margin-bottom: 20px;
	font-size: 1rem;
	line-height: 1.8;
}
#about2 .conC .text p{
	font-size: 0.89rem;
}
#about2 .conC .explanation{
	margin-top: 20px;
	font-size: 0.67rem;
	line-height: 1.8;
}
#about2 .conC .img {
	width: 80%;
	margin-top: 30px;
}
#about2 .conC .img img {
	width: 100%;
	height: auto;
	display: block;
}
#about2 .conC .side{
	display: none;
}

/* PC-about2 conC: 개요(텍스트 + 이미지) [width=768px]를 기준으로*/
@media (min-width: 768px) {
  	#about2 .conC .container {
    	flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	#about2 .conC.reverse .container{
		flex-direction: row-reverse;
	}
	#about2 .conC .text{
		width: 50%;
		margin-top: 0;
		margin-left: 30px;
	}
	#about2 .conC .text p{
		width: 90%;
	}
	#about2 .conC .img {
		width: 40%;
		margin-top: 0;
		text-align: right;
		margin-right: 20px;
	}
	#about2 .conC .side{
		width: 4%;
		display: block;
	}
	#about2 .conC .side img{
		width: 80%;
	}
}

/*너비가 769px 이하의 미디어에서*/
@media (max-width: 768px){
	#about2 .conC .text{
		padding: 0 30px;
	}
}


/* product 소개*/
.listA h1{
	font-size: 2rem;
	text-align: center;
}
.listA .container{
	display: flex;
	flex-wrap: wrap;
	/*max-width: 1000px;*/
	max-width: var(--large-width);
	margin: 30px auto;
}
.listA article{
	flex: 1 1 300px;
	display: flex;
}
.listA a{
	flex: 1;
	display: block;
	border: solid 1px #ddd;
	border: solid 1px var(--gray-color);
	color: inherit;
	text-decoration: none;
}
.listA a:hover{
	background-color: rgba(52, 15, 15, 0.505);
	color: var(--text-bright-color);
	/*opacity: 0.8;*/
}
.listA .photo{
	min-height: 200px;
	background-position: center;
	background-size: cover;
}
.listA .text{
	margin:10px;
}
.listA h2{
	font-size: 1rem;
}
.listA p{
	font-size: 0.78rem;
	opacity: 0.8;
}



/* PRESS 소개*/
#press1 .listA h1{
	font-family: 'Playfair Display', serif;
	font-weight: 500;
	font-size: 3.56rem;
	text-align: center;
	margin: 50px 0;
}

#press1 .listA .container{
	display: flex;
	flex-wrap: wrap;
	/*max-width: 1000px;*/
	max-width: var(--large-width);
	margin: 70px auto;
}
#press1 .listA article{
	flex: 1 1 300px;
	display: flex;
}
/* 첫 번째 article 통일 스타일 */
#press1 .listA article.photoText {
    display: flex;
    flex: 1 1 300px;
    flex-direction: column; /* 이미지가 위->아래 구조처럼 */
}

#press1 .listA article.photoText a {
    display: block;
    flex: 1; /* article 전체 영역 차지 */
    margin: 10px;
}

#press1 .listA article.photoText img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 비율 유지하면서 꽉 채우기 */
    display: block;
}
#press1 .listA a{
	display: block; 
	margin: 10px;
	border: solid 1px #ddd;
	border: solid 1px var(--gray-color);
	color: inherit;
	text-decoration: none;
}
#press1 .listA .photoText a{
	border: none;
}
#press1 .listA a:hover{
	color: var(--text-bright-color);
	background-color: var(--background-color2);
	/*opacity: 0.8;*/
}
#press1 .listA a.none{
	border: none;
	cursor: default;
}
#press1 .listA a.none:hover{
	background-color: transparent;
	cursor: default;
}
#press1 .listA .photo{
	min-height: 400px;
}

#press1 .listA .text{
	margin:15px;
}
#press1 .listA h2{
	font-size: 1.33rem;
	font-family: 'Noto Sans KR', sans-serif;
}
#press1 .listA p{
	font-size: 0.89rem;
	opacity: 0.8;
	margin-top: 10px;
}

/*너비가 769px 이하의 미디어에서*/
@media (max-width: 768px) {  /* 원하는 모바일 기준 */
  	#press1 .listA a.none {
    	display: none;
  	}
  	#press1 .listA h1{
		font-size: 2.78rem;
	}
}


/* 라이트박스 기본 */
.lightbox {
  display: none;
  position: fixed;
  z-index: 9999;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  justify-content: center;
  align-items: center;
}

/* 큰 이미지 */
.lightbox-img {
  width: 500px;
  object-fit: contain;
}
#collection .lightbox-img {
  width: 480px;
  object-fit: contain;
}
/* 닫기 버튼 */
.lightbox .close {
  position: absolute;
  top: 30px;
  right: 40px;
  font-size: 25px;
  color: var(--gray-color);
  cursor: pointer;
}

/* 화살표 */
.lightbox .arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 25px;
  color: var(--gray-color);
  cursor: pointer;
  padding: 10px;
  user-select: none;
}
.lightbox .prev { left: 40px; }
.lightbox .next { right: 40px; }

/* 모바일에서 이미지 최적화 */
@media (max-width: 768px) {
  .lightbox-img {
    max-width: 95%;
    max-height: 80%;
  }
}
@media (max-width: 426px) {
	.lightbox .prev { left: 0; }
	.lightbox .next { right: 0; }
	.lightbox .close {
		top: 10px;
		right: 20px;
		}
}



/* COLLECTION 소개*/
#collection .subBanner{
	margin-bottom: 50px;
}

#collection .subBanner img{
	display: block;
	max-width: 98%;
	margin: 0 auto;
}
#collection .listA .text h1{
	font-family: 'Playfair Display', serif;
	font-weight: 500;
	font-size: 3.56rem;
	margin-bottom: 30px;
	text-align: left;
}
#collection .listA .text span{
	font-family: 'Noto Serif HK', serif;
	font-weight: 600;
}
#collection .listA .text p{
	text-align: left;
	line-height: 1.8;
	margin-bottom: 50px;
}
#collection .listA .container{
	display: flex;
	flex-wrap: wrap;
	/*max-width: 1000px;*/
	max-width: var(--large-width);
	margin: 70px auto;
	margin-top: 70px;
}
#collection .listA article{
	flex: 1 1 300px;
	display: flex;
}
#collection .listA a{
	display: block; 
	margin: 10px;
	color: inherit;
	text-decoration: none;
	border: none;
}
#collection .listA a:hover{
	color: var(--text-bright-color);
	background-color: transparent;
	/*opacity: 0.8;*/
}
#collection .listA a.none{
	cursor: default;
}
#collection .listA a.none:hover{
	background-color: transparent;
	cursor: default;
}
#collection .listA .photo{
	min-height: 450px;/*최소 높이*/
}

#collection .listA .text.explanation{
	margin:15px;
	max-width: 80%;
}
#collection .listA h2{
	font-size: 1.33rem;
	font-family: 'Noto Sans KR', sans-serif;
}
#collection .listA p{
	font-size: 0.89rem;
	opacity: 0.8;
	margin-top: 10px;
	text-align: center;
}

#collection .listA .container .text p{
	text-align: center;
}
#collection .listA .container .text.explanation p{
	text-align: left;
}


/*너비가 769px 이하의 미디어에서*/
@media (max-width: 768px) {  /* 원하는 모바일 기준 */
	#collection .listA a.none {
		display: none;
	}
	#collection .listA .text{
		padding: 0 20px;
	}
	#collection .listA .text.explanation{
		max-width: 100%;
	}
	#collection .listA .text h1{
		font-size: 2.78rem;
	}
}


/* M contact ConB: 개요(text + image3)*/
#contact .conB .container{
	max-width: var(--large-width);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}
#contact .conB h2.subtitle{
	margin-bottom: 10px;
	margin-top: 40px;
	font-weight: 500;
	font-size: 2.78rem;
	display: inline-block;
}
#contact .conB .text{
	display: flex;
	justify-content: center;
	margin-top: 0;
}
#contact .conB .Kcontainer .keyword h2{
	font-size: 0.78rem;
	font-family: 'Noto Sans KR', sans-serif;
	margin-top: 20px;
}
#contact .conB .Kcontainer .keyword p{
	margin-top: 10px;
	line-height: 1.6;
	font-size: 0.67rem;
}
#contact .conB .Kcontainer{
	padding-top: 80px;
	padding-bottom: 20px;
	display: block;
}
#contact .conB .keyword{
	padding: 10px;
	text-align: center;
	display: flex;
  	flex-direction: column;
  	align-items: center;
	border: solid 1px var(--gray-color);
	margin: 0 30px 50px 30px;
	padding: 20px 20px;
	border-radius: 40px;
}
#contact .conB h2{
	margin-top: 0;
	text-align: center;
}
#contact .conB .keyword img {
    width: 25%;
    height: auto;
}


/* PC-contact ConB: 개요(글자 + 이미지3) [width=768px]를 기준으로*/
@media (min-width: 768px) {
	#contact .conB{
		padding-top: 40px;
		position: relative;
		left: 50%;
		width: 100vw;
		margin-left: -50vw;
		background: url(img/contactBack.png) no-repeat top center / cover;
	}
	#contact .conB .subContainer{
		max-width: var(--large-width);
		display: flex;
		align-items: center;
		margin: 0 auto; /* ➜ 이거 추가 */
	}
	#contact .conB h2.subtitle{
		font-size: 3.56rem;
	}
	#contact .conB .Kcontainer {
        display: flex;
		width: 700px;
		justify-content: space-between;
		gap: 40px;
	}
    #contact .conB .Kcontainer .keyword{
        flex: 1;
        min-width: 0; /* 넘침 방지 */
        text-align: center;
		margin: 0;
    }
	#contact .conB .Kcontainer .nomargin{
		margin-right: 0;
	}
	#contact .conB .keyword img {
    	width: 70px;
	}
}

/*너비가 769px 이하의 미디어에서*/
@media (max-width: 768px){
	#contact .conB{
		background-color: var(--background-color);
	}
}

/*컨택 페이지 가져옴*/
#contact .conC{
	margin-top: 40px;
	margin-bottom: 80px;
	color: var(--text-dark-color);
}
#contact .conC input[type=text], select, textarea {
	width: 100%; /* Full width */
	padding: 12px; /* Some padding */ 
	border: 1px solid #ccc; /* Gray border */
	border-radius: 4px; /* Rounded borders */
	box-sizing: border-box; /* Make sure that padding and width stays in place */
	margin-top: 6px; /* Add a top margin */
	margin-bottom: 16px; /* Bottom margin */
	resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}

/* Style the submit button with a specific background color etc */
#contact .conC input[type=submit] {
	background-color: transparent;
	color: var(--main-color);
	padding: 12px 20px;
	border: solid 1px var(--main-color);
	border-radius: 4px;
	cursor: pointer;
	margin: 0 auto;
	margin-top: 20px;
    display: block;
	transition: background-color 0.5s ease, color 0.5s ease;
}
/* When moving the mouse over the submit button, add a darker green color */
#contact .conC input[type=submit]:hover {
 	background-color: var(--main-color);
	color: var(--text-bright-color);
}

/* Add a background color and some padding around the form */
#contact .conC .container {
	border-radius: 5px;
	padding: 20px;
	max-width: var(--large-width);
    margin: 0 auto;
}

#contact .conC .form-row {
	display: flex;
	gap: 10px; /* 필드 사이 간격 */
}

#contact .conC .form-row .form-group {
 	 flex: 1 1 45%; /* 각각 40% 정도 차지 */
}
#contact .conC .form-row {
	display: block; /* 모바일에서는 세로로 쌓이게 */
	gap: 0; 
}

/* PC-contact .conC: 개요(글자 + 이미지3) [width=768px]를 기준으로*/
@media (min-width: 768px) {
	#contact .conC .form-row {
		display: flex;
		gap: 10px; /* 필드 사이 간격 */
	}

	#contact .conC .form-row .form-group {
		flex: 1 1 45%; /* 각각 40% 정도 차지 */
	}

}

/*conE : 비디오*/
#plan .conB{
	/*background-color: var(--main-color);*/
	color: var(--text-bright-color);
	vertical-align: bottom;/*세로 정렬 아래*/
	background-color: #000;
	background-image: url(img/planUnder.png);
	background-repeat: no-repeat;   /* 반복 없음 */
	background-position: bottom center; /* 아래 중앙에 붙이기 */
}
#plan .conB .text{
	padding: 20px;
}
#plan .conB h2{
	margin-top: 0;
	margin-bottom: 10px;
	font-size: 1.11rem;
}
#plan .conB p{
	margin-top: 0;
	margin-bottom: 20px;
	font-size: 0.78rem;
	line-height: 1.8;
	opacity: 0.8;
}
#plan .conB video{
	width: 100%;
	position: center;
}

/*PC-콘텐츠E: 개요(image + text)[width=768px]를 기준으로*/
@media (min-width: 768px) {
	#plan .conB .container{
		display: block;
		width: 1050px;
		/*margin-left: auto;
		margin-right: auto;*/
		margin: 0 auto;
	}
}