@charset "utf-8";

/*CSS Common*/
*{box-sizing: border-box; font-family: 'pretendard'}
body{background-color: var(--color-background-lightest)}
.sec{max-width: 1600px; margin: 0 auto}
h2{font-family: "Playfair Display", serif; font-weight: 400; color: var(--color-text-3); line-height: 100%}
.page-title-inner{display: none}

@media screen and (max-width:1280px){
	h2{font-size: 2rem}
}

@media screen and (min-width:1281px){
	h2{font-size: 5.13rem}
}
/*CSS Common*/

/*브랜드 상징 섹션*/
.brand-txt1-wrap{text-align: center}
.brand-txt1-wrap h2{font-family: 'pretendard'; font-weight: 500}
.brand-txt1-wrap h2 > span{color: var(--color-primary)}
.brand-txt1-wrap p{line-height: 170%; font-weight: 300}
.brand-txt1-wrap strong{font-weight: 700}
.brand-txt1-wrap h2,
.brand-txt1-wrap p,
.brand-txt1-wrap strong{color: var(--color-text-2)}

@media screen and (min-width:428px) and (max-width:767px){
	.brand-txt1-wrap p{white-space: pre-line}
}

@media screen and (min-width:768px) and (max-width:1280px){
	.brand-txt1-wrap p{white-space: pre-line}
}

@media screen and (max-width:1280px){
	.sec-brand-txt1{padding: 7.25rem 1rem}
	.brand-txt1-wrap h2{font-size: 2rem}
	.brand-txt1-wrap p{margin: 2.44rem 0 2rem; font-size: 15px}
	.brand-txt1-wrap strong{font-size: 15px}
}

@media screen and (min-width:1281px){
	.sec-brand-txt1{padding: 12.5rem 1rem 13.44rem}
	.brand-txt1-wrap h2{font-size: 3.13rem}
	.brand-txt1-wrap p{font-size: 1.13rem; margin: 3.75rem 0 2.75rem; white-space: pre-line}
	.brand-txt1-wrap strong{font-size: 1.63rem}
}
/*브랜드 상징 섹션*/

/*브랜드 아이덴티티 섹션*/
.sec-brand-identity{padding: 0 1rem}
.brand-identity-wrap img{display: block}
.brand-identity-img{position: relative}
.brand-identity-img img:first-child{width: 100%}
.brand-identity-img img:last-child{position: absolute; bottom: -215px; left: 50px}
.brand-identity-symbol{display: flex}
.brand-identity-symbol p{font-weight: 300; line-height: 170%; max-width: 700px}
.brand-identity-symbol p > span{font-weight: 700}
.brand-identity-symbol > div > img{width: 100%}
.brand-identity-circle{display: flex; justify-content: center}
.brand-identity-circle .circle:first-child{margin-left: 0}
.brand-identity-circle .circle{border: 1px solid rgba(208, 85, 89, 0.2); border-radius: 50%; aspect-ratio: 1 / 1; width: 40vw; max-width: 210px; min-width: 110px; display: flex; justify-content: center; align-items: center; text-align: center; background-color: rgba(208, 85, 89, 0.1)}
.brand-identity-circle .circle span{color: var(--color-primary); font-weight: 600; font-family: "Playfair Display", serif}

@media screen and (min-width:428px) and (max-width:767px){
	.brand-identity-symbol p{white-space: pre-line}
}

@media screen and (max-width:767px){
	.brand-identity-circle .circle{margin-left: -20px}
}

@media screen and (min-width:768px) and (max-width:1280px){
	.brand-identity-symbol p{white-space: pre-line}
	.brand-identity-circle .circle{margin-left: -30px}
}

@media screen and (max-width:1280px){
	.brand-identity-wrap h2{text-align: center}
	.brand-identity-symbol{flex-direction: column; align-items: center}
	.brand-identity-symbol p{text-align: center; margin: 2.44rem 0 3.13rem; font-size: 15px}
	.brand-identity-circle .circle span{font-size: 15px}
	.brand-identity-img{display: none}
	.brand-identity-circle{padding: 3.13rem 0 0}
}

@media screen and (min-width:1281px){
	.brand-identity-wrap h2{margin-bottom: 2.63rem}
	.brand-identity-symbol{padding: 6.25rem 0 12.44rem; align-items: flex-end; justify-content: space-between}
	.brand-identity-symbol p{font-size: 1.13rem; margin-right: 30px; white-space: pre-line}
	.brand-identity-circle .circle{margin-left: -30px}
	.brand-identity-circle .circle span{font-size: 1.75rem}
	
}
/*브랜드 아이덴티티 섹션*/

/*브랜드 슬로건 섹션*/
.brand-slogan-wrap{text-align: center}
.brand-slogan-wrap p{font-weight: 300; line-height: 170%; padding: 0 1rem}
.brand-slogan-wrap div{background-color: var(--color-primary); display: flex; align-items: center; justify-content: center; padding: 0 1rem}
.brand-slogan-wrap div > span{color: var(--color-text-1); font-family: "Playfair Display", serif}

@media screen and (min-width:428px) and (max-width:767px){
	.brand-slogan-wrap p{white-space: pre-line}
}

@media screen and (max-width:767px){
	.brand-slogan-wrap div > span{font-size: 2rem}
}

@media screen and (min-width:768px) and (max-width:1280px){
	.brand-slogan-wrap div > span{font-size: 2.5rem}
	.brand-slogan-wrap p{white-space: pre-line}
}

@media screen and (max-width:1280px){
	.sec-brand-slogan{padding: 7.25rem 0 0}
	.brand-slogan-wrap p{margin: 2.44rem 0 3.13rem; font-size: 15px}
	.brand-slogan-wrap div{height: 200px}
}

@media screen and (min-width:1281px){
	.sec-brand-slogan{padding: 13.13rem 0 0}
	.brand-slogan-wrap p{font-size: 1.125rem; margin: 4.31rem 0; white-space: pre-line}
	.brand-slogan-wrap div{height: 300px}
	.brand-slogan-wrap div > span{font-size: 3.75rem}
}
/*브랜드 슬로건 섹션*/

/*브랜드 심볼 섹션*/
.brand-symbol-cont{display: flex; align-items: center}
.left-img img{width: 100%; display: block}
.right-txt-btn p{line-height: 170%; font-weight: 300} 
.right-txt-btn p > span{font-weight: 700}
.right-txt-btn a{display: flex; align-items: center; justify-content: center; border: 1px solid var(--color-border-1); border-radius: 36px; color: var(--color-text-6); font-family: "Playfair Display", serif; width: 190px; height: 60px; transition: 0.3s}
.right-txt-btn a:hover{background-color: var(--color-background-3); color: var(--color-text-1)}

@media screen and (min-width:428px) and (max-width:767px){
	.right-txt-btn p{white-space: pre-line}
}

@media screen and (max-width:767px){
	.brand-symbol-wrap h2{text-align: center}
	.brand-symbol-cont{flex-direction: column; gap: 4rem}
	.right-txt-btn p{text-align: center}
	.right-txt-btn a{margin: 0 auto}
}

@media screen and (min-width:768px) and (max-width:1280px){
	.brand-symbol-cont{gap:7rem}
	.right-txt-btn p{white-space: pre-line}
}

@media screen and (max-width:1280px){
	.sec-brand-symbol{padding: 7.25rem 1rem 0}
	.brand-symbol-wrap h2{margin-bottom: 2.44rem}
	.right-txt-btn p{font-size: 15px; margin-bottom: 1.88rem}
	.right-txt-btn a{font-size: 14px; width: 120px; height: 40px}
}

@media screen and (min-width:1281px){
	.sec-brand-symbol{padding: 13rem 1rem 0}
	.brand-symbol-cont{gap:12.5rem}
	.brand-symbol-wrap h2{margin-bottom: 2.69rem}
	.right-txt-btn p{font-size: 1.13rem; margin-bottom: 5.63rem; white-space: pre-line}
	.right-txt-btn a{font-size: 1.13rem}
}
/*브랜드 심볼 섹션*/

/*브랜드 마우스오버 섹션*/
.brand-img-mover-wrap{display: flex}
.brand-img-mover-1{background: url(/image/brand/img_mover_1.png) no-repeat center; background-size: cover}
.brand-img-mover-2{background: url(/image/brand/img_mover_2.png) no-repeat center; background-size: cover}
.brand-img-mover-3{background: url(/image/brand/img_mover_3.png) no-repeat center; background-size: cover}
.mover{position: relative; width: 100%}
.mover .overlay{position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); opacity: 0; transition: opacity 0.3s ease; z-index: 1; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px)}
.brand-img-mover-txt-wrap{text-align: center; z-index: 1; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 100%; transition: 0.6s}
.brand-img-mover-txt-wrap h3, .brand-img-mover-txt p, .brand-img-mover-txt span{color: var(--color-text-1); text-shadow: -2px 5px 6px rgba(0, 0, 0, 0.4)}
.brand-img-mover-txt-wrap h3{font-family: "Playfair Display", serif; font-weight: 400; line-height: 100%}
.brand-img-mover-txt{opacity: 0; transition: 0.2s}
.brand-img-mover-txt p{line-height: 160%}
.brand-img-mover-txt div{cursor: pointer; margin-bottom: 5px; position: relative}
.brand-img-mover-txt div span{font-weight: 600}
.brand-img-mover-txt div i{position: absolute; top: 1px; margin-left: 5px}
.brand-img-mover-txt div i > svg{fill: var( --color-text-1); width: 21px; height: 15px}

.mover:hover{align-items: center}
.mover:hover .overlay{opacity: 1}
.mover:hover .brand-img-mover-txt-wrap{transform: translate(-50%, -50%); top: 50%; bottom: unset}
.mover:hover .brand-img-mover-txt{opacity: 1}

@media screen and (min-width:428px) and (max-width:767px){
	.brand-img-mover-txt p{white-space: pre-line}
}	

@media screen and (max-width:767px){
	.mover{height: 300px}
	.brand-img-mover-txt-wrap{padding: 0 1rem}
}

@media screen and (max-width:1024px){
	.brand-img-mover-wrap{flex-direction: column}
}

@media screen and (min-width:768px) and (max-width:1280px){
	.mover{height: 360px}
	.brand-img-mover-txt p{white-space: pre-line}
}	

@media screen and (max-width:1280px){
	.sec-brand-img-mover{padding: 7.25rem 1rem 0}
	.brand-img-mover-txt-wrap h3{font-size: 2rem}
	.brand-img-mover-txt p, .brand-img-mover-txt span{font-size: 15px}
	
	.mover:hover .brand-img-mover-txt p:first-of-type{margin: 4.25rem 0 3.44rem}
}

@media screen and (min-width:1281px){
	.sec-brand-img-mover{padding: 13rem 1rem 0}
	.mover{height: 600px}
	.brand-img-mover-txt-wrap h3{font-size: 2.72rem}
	.brand-img-mover-txt p, .brand-img-mover-txt span{white-space: pre-line; font-size: 1.13rem}
	
	.mover:hover .brand-img-mover-txt p:first-of-type{margin: 4.25rem 0 3.44rem}
}
/*브랜드 마우스오버 섹션*/

/*브랜드 컬러 섹션*/
.brand-color-wrap{text-align: center}
.brand-color-cont{display: flex; justify-content: center}
.brand-color-cont div{height: 130px; display: flex; justify-content: center; align-items: center}
.brand-color-cont .w-1{color: var(--color-primary); flex: 1}
.brand-color-cont .w-2{color: var(--color-text-1)}
.brand-color-cont .color-1{background-color: var(--color-primary)}
.brand-color-cont .color-2{background-color: var(--color-background-4)}
.brand-color-cont .color-3{background-color: var(--color-background-5)}
.brand-color-cont .color-4{background-color: var(--color-background-6)}
.brand-color-cont .color-5{background-color: var(--color-background-7)}
.brand-color-wrap p{line-height: 170%; font-weight: 300; padding: 0 1rem}
.brand-color-wrap p span{font-weight: 700}

@media screen and (min-width:428px) and (max-width:767px){
	.brand-color-wrap p{white-space: pre-line}
}

@media screen and (max-width:767px){
	.brand-color-cont .w-2{flex: 1.5}
}

@media screen and (min-width:768px) and (max-width:1280px){
	.brand-color-cont .w-2{flex: 2}
	.brand-color-wrap p{white-space: pre-line}
}

@media screen and (max-width:1280px){
	.sec-brand-color{padding: 7.25rem 0 0}
	.brand-color-cont{margin: 2.44rem 0 3.13rem; font-size: 13px}
	.brand-color-wrap p{font-size: 15px}
}

@media screen and (min-width:1281px){
	.sec-brand-color{padding: 13.44rem 0 0}
	.brand-color-wrap p{font-size: 1.13rem; white-space: pre-line}
	.brand-color-cont div{font-size: 1.13rem; margin: 3.63rem 0 6.94rem}
	.brand-color-cont .w-2{flex: 3}
}
/*브랜드 컬러 섹션*/

/*브랜드 바텀 이미지 섹션*/
.brand-bottom-img-wrap{background: url('../image/brand/brand_bottom_img.png') no-repeat; background-size: cover; background-position: center}

@media screen and (max-width:1280px){
	.brand-bottom-img-wrap{height: 360px}
	.sec-brand-bottom-img{padding-top: 6.25rem}
}

@media screen and (min-width:1281px){ 
	.brand-bottom-img-wrap{height: 590px}
	.sec-brand-bottom-img{padding-top: 13.25rem}
}
/*브랜드 바텀 이미지 섹션*/