/* common */
*{ color: #fff; }
body{ background: #0A0A0A; }
#main{ overflow: hidden; }


/* title-box */
.title-box{ text-align: center; margin-bottom: 110px; opacity: 1; }
.title-box h3{ font-family: var(--Mulish); font-weight: 800; font-size: 8rem; line-height: 1.125; }
.title-box h3 span{ display: inline-block; line-height: inherit; position: relative; }
.title-box h3 span::after{ content: ""; width: 100%; height: 100%; background: #0A0A0A; position: absolute; top: 0; left: 0; transform: scaleY(1); transition: transform 1s; }
.title-box h3 span:nth-of-type(odd)::after{ transform-origin: top; }  
.title-box h3 span:nth-of-type(even)::after{ transform-origin: bottom; }  
.title-box p, .title-box a{  transform: translateY(100%); clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); }
.title-box p{ font-size: 2rem; font-weight: 400; line-height: 1.5; letter-spacing: -0.02em; margin-top: 40px; }

.title-box.black h3, .title-box.black h3 span{ color: #000; }
.title-box.black h3 span::after{ background: #fff; }
.title-box.black p{ color: #666; }

.title-box h3.kr{ font-family: var(--baseFont); font-size: 7rem; }

.title-box.aos-animate h3 span::after{ transform: scaleY(0); }
.title-box.aos-animate p, .title-box.aos-animate a{ animation: textClip 1s forwards; }
.title-box.aos-animate p{ animation-delay: 0.5s; }
.title-box.aos-animate a{ animation-delay: 0.7s; }

@media screen and (max-width: 1700px){
	.title-box{ margin-bottom: 80px; }
	.title-box h3{ font-size: 6rem; }
	.title-box p{ font-size: 1.9rem; }

	.title-box h3.kr{ font-size: 5rem; }
}

@media screen and (max-width: 1280px){
	.title-box{ margin-bottom: 60px; }
	.title-box h3{ font-size: 5rem; }
	.title-box p{ font-size: 1.8rem; margin-top: 20px; }

	.title-box h3.kr{ font-size: 4rem; }
}

@media screen and (max-width: 900px){
	.title-box{ width: 90%; margin: 0 auto; margin-bottom: 40px; }
	.title-box h3{ font-size: 4rem; }
	.title-box p{ font-size: 1.7rem; }

	.title-box h3.kr{ font-size: 3.5rem; }
}


/* VISUAL */
#visual{ position: relative; }
#visual .visual{ outline: none; }
#visual .visual .bg{ height: 100vh; transform: scale(1.2); transition: transform 1.5s ease-in-out; }
#visual .visual .bg01{ background: url("/img/main/visual01.jpg") no-repeat center center / cover; }
#visual .visual .bg02{ background: url("/img/main/visual02.jpg") no-repeat center center / cover; }

#visual .visual.slick-active .bg{ transform: scale(1); }

#visual .text-box{ position: absolute; top: 44%; left: 0; right: 0; transform: translateY(-50%); pointer-events: none; }
#visual .text-box h2{ max-width: max-content; font-family: var(--Mulish); font-size: 10rem; font-weight: 800; color: #111; line-height: 1.1; margin-bottom: 30px; overflow: hidden; padding-left: 2px; }
#visual .text-box h2 span{ display: inline-block; color: inherit; line-height: inherit; position: relative; }
#visual .text-box h2 span:first-of-type{ left: -100%; }
#visual .text-box h2 span:last-of-type{ left: 100%; }
#visual .text-box .overflow{ overflow: hidden; }
#visual .text-box .mb90{ margin-bottom: 90px; }
#visual .text-box p{ font-size: 2rem; font-weight: 400; color: #333; line-height: 1.5; transform: translateY(100%); }
#visual .text-box .viewmore{ transform: translateY(100%); pointer-events: auto; }

#visual .scroll{ position: absolute; bottom: 200px; left: 50%; transform: translate(-50%, 100%); }
#visual .scroll img{ transform: rotate(0deg); animation: rotate360 5s infinite linear; }
#visual .scroll::before{ content: ""; width: 10px; height: 10px; background: #000; border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

#visual .text-box.animated h2 span:first-of-type{ animation: spanLeft 1.5s cubic-bezier(0.215, 0.610, 0.355, 1.000) both; }
#visual .text-box.animated h2 span:last-of-type{ animation: spanRight 1.5s cubic-bezier(0.215, 0.610, 0.355, 1.000) both; }	
#visual .text-box.animated p, #visual .text-box.animated .viewmore{ animation: textUp 1.5s cubic-bezier(0.215, 0.610, 0.355, 1.000) both; }  

@keyframes rotate360{
	0%{ transform: rotate(0deg); }
	100%{ transform: rotate(360deg); }
}

@keyframes spanLeft{
	0%{ left: -100%; }
	100%{ left: 0; }
}

@keyframes spanRight{
	0%{ left: 100%; }
	100%{ left: 0; }
}

@keyframes textUp{
	0%{ transform: translateY(100%); }
	100%{ transform: translateY(0); }
}

@media screen and (max-width: 1700px){
	#visual .text-box h2{ font-size: 8rem; }
	#visual .text-box p{ font-size: 1.9rem; }
}

@media screen and (max-width: 1280px){
	#visual .text-box h2{ font-size: 7rem; }
	#visual .text-box .mb90{ margin-bottom: 60px; }
	#visual .text-box p{ font-size: 1.8rem; }	
}

@media screen and (max-width: 900px){
	#visual .text-box h2{ font-size: 6rem; margin-bottom: 15px; }
	#visual .text-box .mb90{ margin-bottom: 30px; }
	#visual .text-box p{ font-size: 1.7rem; }
}

@media screen and (max-width: 650px){
	#visual .text-box p{ width: 90%; }
	#visual .text-box p br{ display: none; }
}



/* COUNT */
#count{ position: relative; z-index: 20; margin-top: -50px; padding-bottom: 240px; }
#count ul{ max-width: 1310px; width: 100%; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 40px; }
#count ul li{ width: calc((100% - 80px) / 3); height: 205px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; background: linear-gradient(to bottom, #0C0C0C, #171717); border-radius: 5px; opacity: 1 !important; }

#count dl dd, #count dl dt{ transform: translateY(100%); clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); }
#count dl dd{ display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; font-size: 2rem; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 20px; }
#count dl dd span{ display: flex; justify-content: center; align-items: baseline; gap: 10px; }
#count dl dd.nogap span{ gap: 0; }
#count dl dd strong{ font-size: 6.5rem; font-weight: 700; letter-spacing: 0; position: relative; }
#count dl dd span sup{ font-size: 4rem; position: relative; top: -10px; left: -10px; letter-spacing: -0.02em; }
#count dl dt{ font-size: 1.7rem; font-weight: 400; color: rgba(255, 255, 255, 0.6); letter-spacing: 0; padding-bottom: 10px; }
#count dl dt span{ display: block; font-size: 1.4rem; color: inherit; margin-top: 5px; }

#count .aos-animate dl dd, #count .aos-animate dl dt{ animation: textClip 1s forwards; }

@media screen and (max-width: 1700px){
	#count{ padding-bottom: 180px; }
	#count ul li{ height: 190px; }
	#count dl dd{ font-size: 1.9rem; }
	#count dl dd strong{ font-size: 5rem; }
	#count dl dd span sup{ font-size: 3rem; }
}

@media screen and (max-width: 1280px){
	#count{ padding-bottom: 120px; }
	#count ul li{ height: 170px; }
	#count dl dd{ font-size: 1.8rem; margin-bottom: 10px; }
	#count dl dd strong{ font-size: 4rem; }
	#count dl dd span sup{ font-size: 2.5rem; }
	#count dl dt{ font-size: 1.6rem; }
}

@media screen and (max-width: 1200px){
	#count ul{ gap: 20px; }
	#count ul li{ width: calc((100% - 40px) / 3); height: 160px; }
}

@media screen and (max-width: 900px){
	#count ul li{ width: 100%; height: 130px; padding: 30px 20px; }
	#count dl{ width: 100%; display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: center; }
	#count dl dd{ font-size: 1.7rem; margin-bottom: 0; margin-top: -10px; }
	#count dl dt{ padding-bottom: 0; }
	#count dl dd span{ gap: 5px; }
	#count dl dd strong{ font-size: 3.5rem; }
	#count dl dd span sup{ font-size: 2rem; }
}

@media screen and (max-width: 650px){
	#count dl dt{ width: 40%; }
}


/* FUNDS */
#fund{ padding-top: 250px; }
#fund .flex-box{ display: flex; position: relative; }
#fund .flex-box > div{ width: 50%; }

#fund .figure-wrap{ position: relative; opacity: 1; }
#fund .figure-wrap::after{ content: ""; width: 100%; height: 100%; background: #0A0A0A; position: absolute; top: 0; left: 0; z-index: 50; transform: scaleX(1); transform-origin: left; transition: all 1s; } 
#fund .figure-wrap.aos-animate::after{ transform: scaleX(0); }
#fund .figure figure{ width: 100%; position: relative; overflow: hidden; padding-bottom: 73%; margin-bottom: -4px; }
#fund .figure figure img{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

#fund .text-wrap{ padding: 50px 110px; }
#fund .text .category{ display: inline-block; font-size: 1.6rem; font-weight: 600; line-height: 1; padding: 13px 30px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 990px; }
#fund .text h4{ font-size: 4rem; font-weight: 700; line-height: 1.5; margin: 40px 0 30px; }
#fund .text p{ font-size: 1.6rem; font-weight: 400; line-height: 1.75; }
#fund .text .viewmore{ margin-top: 100px; }

#fund .btn{ width: 100% !important; position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%); pointer-events: none; }
#fund .btn > div{ display: flex; justify-content: flex-end; gap: 45px; }
#fund .btn button{ pointer-events: auto; opacity: 0.4; transition: all 0.5s; }
#fund .btn button:hover{ opacity: 1; }

@media screen and (max-width: 1700px){
	#fund{ padding-top: 180px; }
	#fund .text-wrap{ padding: 40px 80px; }
	#fund .text .category{ padding: 10px 20px; }
	#fund .text h4{ font-size: 3rem; }
	#fund .text .viewmore{ margin-top: 80px; }

	#fund .btn{ bottom: 30px; }
}

@media screen and (max-width: 1500px){
	#fund{ padding-top: 120px; }
}

@media screen and (max-width: 1280px){
	#fund .text-wrap{ padding: 30px 60px; }
	#fund .text h4{ font-size: 2.6rem; margin: 25px 0 20px; }
	#fund .text .viewmore{ margin-top: 40px; }

	#fund .btn{ bottom: 20px; }
	#fund .btn > div{ gap: 30px; }
	#fund .btn button{ width: 50px; }
}

@media screen and (max-width: 1200px){ 
	#fund{ padding-bottom: 40px; }
	#fund br{ display: none; }	

	#fund .flex-box > div{ width: 100%; }
	#fund .flex-box{ flex-direction: column; }

	#fund .text-wrap{ padding: 40px 20px; }

	#fund .btn{ bottom: 0; }
}

@media screen and (max-width: 900px){
	#fund .text .category{ font-size: 1.5rem; padding: 8px 17px; }
	#fund .text h4{ font-size: 2.4rem; }
}


/* INVESTMENT PHILOSOPHY */
/* #invest{ padding: 250px 0; } */
#invest ul{ display: flex; flex-wrap: wrap; gap: 60px; }
#invest ul li{ width: calc((100% - 120px) / 3); display: flex; flex-direction: column; justify-content: center; gap: 70px 0; text-align: center; padding: 75px 35px; background: linear-gradient(to bottom, #0C0C0C, #171717); border-radius: 5px; }
#invest ul li h5{ font-size: 3rem; font-weight: 700; line-height: 1.5; margin-bottom: 20px; }
#invest ul li p{ font-family: var(--Mulish); font-size: 1.6rem; font-weight: 400; }

@media screen and (max-width: 1700px){
	/* #invest{ padding: 180px 0; } */
	#invest ul li{ padding: 60px 30px; gap: 50px 0; }
	#invest ul li h5{ font-size: 2.8rem; }
}

@media screen and (max-width: 1500px){
	/* #invest{ padding: 120px 0; } */
	#invest ul{ gap: 30px; }
	#invest ul li{ width: calc((100% - 60px) / 3); }
}

@media screen and (max-width: 1280px){
	#invest ul li{ gap: 30px 0; }
	#invest ul li h5{ font-size: 2.6rem; margin-bottom: 10px; }
}

@media screen and (max-width: 1200px){
	#invest ul li{ padding: 60px; } 
	#invest ul li{ width: 100%; flex-direction: row; gap: 0 120px; align-items: center; }
}

@media screen and (max-width: 900px){
	#invest ul li h5{ font-size: 2.4rem; }
}

@media screen and (max-width: 800px){
	#invest ul li{ gap: 0 55px; padding: 40px; }
}

@media screen and (max-width: 700px){
	#invest ul li{ flex-direction: column; gap: 50px 0; padding: 50px; }
}


/*  경영공시 */ 
#notice{ padding: 185px 0; background: #fff; }
#notice .flex-box{ display: flex; }

#notice .title{ width: 590px; }
#notice .title-box{ text-align: left; margin: 0; }
#notice .title-box .viewmore{ margin-top: 90px; }

#notice .list{ width: calc(100% - 590px); }
#notice ul li{ padding: 40px 0; border-bottom: 1px solid #EBEBEB; position: relative; }
#notice ul li:first-of-type{ padding-top: 0 !important; }
#notice ul li h6, #notice ul li p{ width: 100%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
#notice ul li h6{ font-size: 2.5rem; font-weight: 700; color: #222; letter-spacing: -0.02em; margin-bottom: 10px; }
#notice ul li span{ display: block; font-size: 1.6rem; font-weight: 400; color: #999; letter-spacing: -0.02em; }
#notice ul li p{ max-width: 995px; font-size: 1.8rem; font-weight: 400; color: rgba(102, 102, 102, 0.9); letter-spacing: -0.02em; margin-top: 30px; }
#notice ul li a{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; }

@media screen and (max-width: 1700px){
	#notice{ padding: 120px 0; }
	#notice .title{ width: 500px; }
	#notice .title-box .viewmore{ margin-top: 70px; }

	#notice .list{ width: calc(100% - 500px); }
	#notice ul li h6{ font-size: 2.2rem; }
	#notice ul li p{ font-size: 1.7rem; }
}

@media screen and (max-width: 1280px){
	#notice{ padding: 100px 0; }
	#notice .title{ width: 450px; }
	#notice .title-box .viewmore{ margin-top: 50px; }

	#notice .list{ width: calc(100% - 450px); }
	#notice ul li{ padding: 30px 0; }
	#notice ul li h6{ font-size: 2rem; }
	#notice ul li span{ font-size: 1.5rem; }
	#notice ul li p{ font-size: 1.6rem; margin-top: 20px; }
}

@media screen and (max-width: 1200px){
	#notice .flex-box{ flex-direction: column; }
	#notice .title{ width: 100%; }
	#notice .title-box{ width: 100%; display: flex; flex-direction: column; align-items: flex-end; margin-bottom: 20px; }
	#notice .title-box h3, #notice .title-box p{ width: 100%; }
	#notice .title-box .viewmore{ margin-top: 10px; }

	#notice .list{ width: 100%; }
}

@media screen and (max-width: 900px){
	#notice ul li{ padding: 20px 0; }
	#notice ul li h6{ font-size: 1.9rem; }
}



/* animation */
@keyframes textClip{
	0%{ transform: translateY(100%); clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); }
	100%{ transform: translateY(0); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}