@import url('sub.css'); 


section{overflow: hidden;}

/* About us - AUM / FUND */
.aum-fund{display: flex; width: 100%; height: 900px; border-radius: var(--borderR20); overflow: hidden;}
.aum-fund_item{position: relative; display: flex; flex-direction: column; justify-content: space-between; flex: 1 1 25%; min-width: 0; padding: 60px; box-sizing: border-box; cursor: pointer; transition: flex 0.55s cubic-bezier(0.22, 0.61, 0.36, 1); overflow: hidden;}
.aum-fund_item.is-active{flex: 2 1 50%;}
.aum-fund_bg{position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; z-index: 0;}
.aum-fund_bg-img{position: absolute; z-index: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-size: cover; opacity: 0; }
.aum-fund_item--01 .aum-fund_bg{background: var(--main);}
.aum-fund_item--01.is-active .aum-fund_bg-img{opacity: 1; transition: opacity 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);}
.aum-fund_item--02 .aum-fund_bg{background: var(--sub_logo);}
.aum-fund_item--02.is-active .aum-fund_bg-img{opacity: 1; transition: opacity 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);}
.aum-fund_item--03 .aum-fund_bg{background: var(--footBg);}
.aum-fund_item--03.is-active .aum-fund_bg-img{opacity: 1; transition: opacity 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);}
.aum-fund_num{position: relative; z-index: 1; color: var(--white); font-weight: 900; opacity: 0.5;}
.aum-fund_con{position: relative; z-index: 1; width: 100%;}
.aum-fund_tit{color: var(--white); transition: font-size 0.35s ease; line-height: 130%;}
.aum-fund_list{display: flex; flex-direction: column; gap: 10px; width: 100%;}
.aum-fund_list li{display: flex; align-items: center; justify-content: space-between; gap: 20px;}
.aum-fund_lbl{display: flex; align-items: center; gap: 10px; color: var(--white); white-space: nowrap;}
.aum-fund_val{color: var(--white); white-space: nowrap;}
.aum-fund_ico{display: block; width: 24px; height: 24px; flex-shrink: 0; object-fit: contain;}
.aum-fund_desc{color: var(--white); margin-top: -15px;}
.aum-fund_check{display: flex; flex-direction: column; gap: 6px; width: 100%;}
.aum-fund_check li{display: flex; flex-direction: column; gap: 2px; width: 100%;}
.aum-fund_check_hd{display: flex; align-items: center; gap: 5px;}
.aum-fund_check_ico{display: block; width: 20px; height: 20px; flex-shrink: 0; object-fit: contain;}
.aum-fund_check_hd strong{display: inline-block; font-family: var(--eng); font-size: 1rem; font-weight: 600; line-height: 150%; color: var(--white); letter-spacing: 0.3pt;}
.aum-fund_check li p{color: var(--white);}

.aum-fund_hover{position: absolute; left: 0; bottom: 0; display: flex; flex-direction: column; gap: 30px; opacity: 0; transform: translateY(100%); transition: all .3s;}
.aum-fund_item.is-active .aum-fund_hover{opacity: 1; transform: translateY(0); width: 100%; transition: all .3s .3s linear;}
.aum-fund_hover .aum-fund_check_hd strong{white-space: nowrap;}
.aum-fund_up{position: absolute; left: 0; bottom: 0; opacity: 1; transition: all .3s;}
.aum-fund_item.is-active .aum-fund_up{opacity: 0; transition: all .3s;}



/* About us - Core Values */
.core-values{display: flex; flex-direction: column; gap: 30px; width: 100%;}
.core-values_row{display: flex; gap: 30px; align-items: stretch; width: 100%;}
.core-values_card{flex: 1 1 0; min-width: 0; border-radius: 20px; padding: 50px; box-sizing: border-box;}
.core-values_card--01{display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; background: var(--green); color: var(--white);}
.core-values_card--01 .core-values_hd{display: flex; flex: 1 1 0; flex-direction: column; gap: clamp(40px, 9.7vw, 150px); min-width: 0;}
.core-values_card--01 .core-values_list{flex: 1 1 0; min-width: 0;}
.core-values_card--02{flex: 640 1 0; background: #dae2df; color: var(--black);}
.core-values_card--02 .core-values_list li{color: var(--basic);}
.core-values_card--03{flex: 890 1 0; background: #3f4140; color: var(--white);}
.core-values_card--04{flex: 890 1 0; background: #c39a79; color: var(--white);}
.core-values_card--05{flex: 640 1 0; background: #583520; color: var(--white);}
.core-values_inner{display: flex; flex-direction: column; justify-content: flex-start; gap: 60px; height: 100%;}
.core-values_top{display: flex; flex-direction: column; gap: clamp(30px, 6.5vw, 100px);}
.core-values_num{font-family: var(--eng2); font-size: 1.333rem; font-weight: 700; line-height: 141.67%; letter-spacing: 0;}
.core-values_titwrap{display: flex; flex-direction: column; gap: 10px;}
.core-values_titwrap p{font-size: 1.222rem; font-weight: 600; line-height: 160%; letter-spacing: var(--letter-spacing-default);}
.core-values_titwrap h4{font-family: var(--eng2); font-size: clamp(2.222rem, 3.4vw, 3.333rem); font-weight: 700; line-height: 125%; letter-spacing: 0; color: inherit;}
.core-values_list{display: flex; flex-direction: column; gap: 10px; width: 100%;}
.core-values_list li{position: relative; padding-left: 15px; font-size: 1.111rem; font-weight: 400; line-height: 166.67%; letter-spacing: var(--letter-spacing-default); color: inherit;}
.core-values_list li::before{content: ''; position: absolute; left: 0; top: 14px; width: 5px; height: 5px; border-radius: 50%; background: var(--sub);}
.core-values_card--03 .core-values_list li::before,
.core-values_card--04 .core-values_list li::before{background: var(--white);}





/* About us - Group Chart */
/* About us - Group Chart */
.group-chart_wrap { 
    width: 100%; 
    max-width: 472px; /* cqw가 무한히 커지는 것을 방지하기 위한 최대 너비 */
    margin: 0 auto; 
    container-type: inline-size; /* cqw 단위의 기준점 선언 */
    display: flex; 
    justify-content: center; 
}

.group-chart { 
    position: relative;  
    width: 100cqw; 
    height: calc(572 * 100cqw / 472); 
    margin: 0 auto; 
    flex-shrink: 0; 
}

.group-chart-img{text-align: center;}
.group-chart-img img{max-width: 100%; height: auto;}

.group-chart_lines { 
    position: absolute; 
    left: 0; 
    top: 0; 
    width: 100cqw; 
    height: calc(572 * 100cqw / 472); 
    pointer-events: none; 
    z-index: 0; 
}

.group-chart_row { 
    position: absolute; 
    left: 0; 
    z-index: 1; 
    display: flex; 
    box-sizing: border-box; 
}

.group-chart_row--01 { 
    top: 0; 
    left: 0; 
    width: 100cqw; 
    height: calc(186 * 100cqw / 472); 
    justify-content: center; 
    align-items: flex-start; 
}

.group-chart_row--02 { 
    top: calc(246 * 100cqw / 472); 
    left: calc(10 * 100cqw / 472); 
    width: calc(452 * 100cqw / 472); 
    height: calc(80 * 100cqw / 472); 
    gap: calc(100 * 100cqw / 472); 
    justify-content: flex-start; 
    align-items: flex-start; 
}

.group-chart_row--03 { 
    top: calc(386 * 100cqw / 472); 
    left: 0; 
    width: 100cqw; 
    height: calc(186 * 100cqw / 472); 
    justify-content: space-between; 
    align-items: flex-start; 
}

.group-chart_logo { 
    position: relative; 
    width: calc(186 * 100cqw / 472); 
    height: calc(186 * 100cqw / 472); 
    flex-shrink: 0; 
    box-sizing: border-box; 
}

.group-chart_logo img { 
    position: relative; 
    z-index: 0; 
    display: block; 
    width: 100%; 
    height: 100%; 
    object-fit: contain; 
}

.group-chart_box { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    width: calc(176 * 100cqw / 472); 
    height: calc(80 * 100cqw / 472); 
    flex-shrink: 0; 
    background: var(--white); 
    border: 1px solid var(--black); 
    border-radius: calc(5 * 100cqw / 472); 
    box-sizing: border-box; 
    font-family: var(--eng); 
    font-size: calc(18 * 100cqw / 472); /* 18px 기준 변환 */
    font-weight: 500; 
    line-height: 166.67%; 
    letter-spacing: 0; 
    text-align: center; 
    color: var(--black); 
}

/* 선(Line) 및 점(Dot) 위치 스케일링 */
.group-chart_line { position: absolute; background: var(--border); }

/* 💡 선의 두께(1px)는 스케일링하지 않고 1px로 유지해야 화면이 작아졌을 때 선이 사라지는 현상을 막을 수 있습니다. */
.group-chart_line--v-center { left: calc(235 * 100cqw / 472); top: calc(186 * 100cqw / 472); width: 1px; height: calc(288 * 100cqw / 472); }
.group-chart_line--h-mid    { left: calc(98 * 100cqw / 472);  top: calc(215 * 100cqw / 472); width: calc(276 * 100cqw / 472); height: 1px; }
.group-chart_line--v-left   { left: calc(97 * 100cqw / 472);  top: calc(216 * 100cqw / 472); width: 1px; height: calc(30 * 100cqw / 472); }
.group-chart_line--v-right  { left: calc(373 * 100cqw / 472); top: calc(216 * 100cqw / 472); width: 1px; height: calc(30 * 100cqw / 472); }
.group-chart_line--h-btm    { left: calc(186 * 100cqw / 472); top: calc(473 * 100cqw / 472); width: calc(100 * 100cqw / 472); height: 1px; }

.group-chart_dot { 
    position: absolute; 
    width: calc(5 * 100cqw / 472); 
    height: calc(5 * 100cqw / 472); 
    border-radius: 50%; 
    background: var(--sub); 
    transform: translate(-50%, -50%); 
}

.group-chart_dot--l { left: calc(98 * 100cqw / 472);  top: calc(215 * 100cqw / 472); }
.group-chart_dot--c { left: calc(235 * 100cqw / 472); top: calc(215 * 100cqw / 472); }
.group-chart_dot--r { left: calc(374 * 100cqw / 472); top: calc(215 * 100cqw / 472); }
.group-chart_dot--b { left: calc(235 * 100cqw / 472); top: calc(473 * 100cqw / 472); }

/* About us - Invest Philosophy */
.invest-philosophy_cont{overflow: hidden;}
.invest-philosophy_cont .title-area { padding: 0; }

.invest-philosophy_wrap {
    width: 100%; 
    max-width: 1487px; 
    margin: 0 auto; 
    container-type: inline-size; 
    display: flex; 
    justify-content: center; 
    /* 파이어폭스 오류 해결: 단위를 빼고 순수 숫자로 곱셈/나눗셈 처리 */
    height: calc(567 * 100cqw / 1487); 
}

.invest-philosophy {
    width: 100%; /* 고정 1487px에서 100%로 변경 */
    min-height: calc(567 * 100cqw / 1487); 
    flex-shrink: 0; 
    position: relative; 
    /* transform: scale(...) 및 transform-origin 제거됨 */
    display: flex; 
    flex-direction: column;  
    justify-content: center; 
    align-items: center;
}

.invest-philosophy_visual { position: relative; z-index: 1; }
.invest-philosophy_visual img { 
    display: block; 
    max-width: calc(567 * 100cqw / 1487); /* 567px 변환 */
    margin: 0 auto; 
    width: 100%; 
    object-fit: contain;
}

.invest-philosophy_item {
    position: absolute; 
    top: 50%; 
    left: 50%; 
    z-index: 4; 
    display: flex; 
    gap: calc(92 * 100cqw / 1487); /* 92px 변환 */
    align-items: center; 
    box-sizing: border-box;
}

/* 포지셔닝 마진값 변환 */
.invest-philosophy_item--01 { 
    margin-left: calc(-690 * 100cqw / 1487); 
    margin-top: calc(-260 * 100cqw / 1487); 
    flex-direction: row-reverse;
}
.invest-philosophy_item--02 { 
    margin-left: calc(120 * 100cqw / 1487); 
    margin-top: calc(-110 * 100cqw / 1487); 
    flex-direction: row;
}
.invest-philosophy_item--03 { 
    margin-left: calc(-710 * 100cqw / 1487); 
    margin-top: calc(170 * 100cqw / 1487); 
    flex-direction: row-reverse;
}

.invest-philosophy_txt {
    display: flex; 
    flex-direction: column; 
    gap: calc(10 * 100cqw / 1487); /* 10px 변환 */
    flex-shrink: 1; 
    min-width: 0; 
    max-width: calc(350 * 100cqw / 1487); 
    position: relative;
    word-break: keep-all;
}

/* 텍스트 장식 선 변환 */
.invest-philosophy_txt::before {
    content: ''; 
    display: block; 
    width: calc(70 * 100cqw / 1487); /* 70px 변환 */
    height: 1px; 
    background: var(--border); 
    position: absolute; 
    top: 50%;
}
.invest-philosophy_item--01 .invest-philosophy_txt::before { right: calc(-87 * 100cqw / 1487); }
.invest-philosophy_item--02 .invest-philosophy_txt::before { left: calc(-87 * 100cqw / 1487); }
.invest-philosophy_item--03 .invest-philosophy_txt::before { right: calc(-87 * 100cqw / 1487); }

/* 폰트 사이즈 변환 (1rem = 16px, 1.444rem = 약 23.1px 가정) */
.invest-philosophy_txt h4 {
    font-family: var(--eng); 
    font-size: calc(23.1 * 100cqw / 1487); 
    font-weight: 600; 
    line-height: 138.46%; 
    letter-spacing: 0; 
    color: var(--black); 
    white-space: nowrap;
}
.invest-philosophy_item--01 .invest-philosophy_txt h4,
.invest-philosophy_item--03 .invest-philosophy_txt h4 { text-align: right; }
.invest-philosophy_item--02 .invest-philosophy_txt h4 { text-align: left; }

.invest-philosophy_txt p {
    font-size: calc(18 * 100cqw / 1487); 
    font-weight: 400; 
    line-height: 166.67%; 
    letter-spacing: var(--letter-spacing-default); 
    color: var(--basic);
    word-break: keep-all;
}
.invest-philosophy_item--01 .invest-philosophy_txt p,
.invest-philosophy_item--03 .invest-philosophy_txt p { text-align: right; }
.invest-philosophy_item--02 .invest-philosophy_txt p { text-align: left; }

/* 점(Dot) 및 효과 변환 */
.invest-philosophy_dot {
    display: block; 
    width: calc(16 * 100cqw / 1487); 
    height: calc(16 * 100cqw / 1487); 
    border-radius: 50%; 
    box-sizing: border-box; 
    background: var(--sub); 
    border: calc(3 * 100cqw / 1487) solid var(--white); 
    position: absolute; 
    top: 50%; 
    margin-top: calc(-8 * 100cqw / 1487); 
    left: calc(-8 * 100cqw / 1487); 
    box-shadow: 0 0 0 calc(10 * 100cqw / 1487) rgba(161, 119, 85, 0.2);
}
.invest-philosophy_item--02 .invest-philosophy_dot { left: auto; right: calc(-8 * 100cqw / 1487); }

/* 아이콘 래퍼 및 이미지 변환 */
.invest-philosophy_ico {
    display: flex; 
    align-items: center; 
    justify-content: center; 
    width: calc(150 * 100cqw / 1487); /* 150px 변환 */
    aspect-ratio: 1; 
    border-radius: 50%; 
    background: var(--white); 
    z-index: 3; 
    position: relative; 
    flex-shrink: 0;
}
.invest-philosophy_ico img {
    display: block; 
    width: calc(50 * 100cqw / 1487); /* 50px 변환 */
    aspect-ratio: 1; 
    object-fit: contain;
}




/* Invest Strategy - Sector */
.invest-sector-wrap{background: url('/company/img/invest-strategy-bg.png') no-repeat center bottom/100% auto;}
.invest-sector{display: flex; flex-wrap: wrap; justify-content: center; gap: 60px 30px; width: 100%; counter-reset: my-counter;}
.invest-sector_item{width: calc((100% - 120px)/5); display: flex; flex-direction: column; align-items: center;}
.invest-sector_ico{position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 1; width: 100%; max-width: 220px; border-radius: 50%; background: var(--greenBg); flex-shrink: 0; transition: background 0.35s ease;}
.invest-sector_ico::before{counter-increment: my-counter; content: counter(my-counter, decimal-leading-zero); position: absolute; left: 50%; top: -11px; transform: translateX(-50%); padding: 2px 12px; border-radius: 100px; background: var(--main); font-family: var(--eng); font-size: 0.889rem; font-weight: 600; line-height: 142.86%; letter-spacing: 0; color: var(--white); white-space: nowrap; transition: background 0.35s ease;}
.invest-sector_ico img{display: block; width: 60px; height: 60px; object-fit: contain; transition: filter 0.35s ease;}
.invest-sector_item .in{display: flex; flex-direction: column; align-items: center; gap: 15px; max-width:220px; width: 100%;}
.invest-sector_item .in:hover .invest-sector_ico{background: var(--main);}
.invest-sector_item .in:hover .invest-sector_ico::before{background: var(--sub);}
.invest-sector_item .in:hover .invest-sector_ico img{filter: brightness(0) invert(1);}
.invest-sector_item p{text-align: center; color: var(--black);}




/*******************************************************************************
    @media 1950px
*******************************************************************************/
@media all and (max-width:1950px){

}
/*******************************************************************************
    @media 1500px
*******************************************************************************/
@media all and (max-width:1500px){


/* About us - AUM / FUND */
.aum-fund_item{padding: 40px;}


/* Invest Strategy - Sector */
.invest-sector{gap: 60px 30px;}
.invest-sector_item{width: calc((100% - 60px)/3)}

}
/*******************************************************************************
    @media ~1300px
*******************************************************************************/
@media all and (max-width:1300px){

/* About us - AUM / FUND */
.aum-fund_tit.fsE34{font-size:1.667rem;}
.aum-fund_tit.fsE30{font-size:1.333rem;}
.aum-fund_hover{gap:20px;}

.aum-fund{height: auto; flex-direction: column;}
.aum-fund_item{flex: auto; height: auto; padding: 30px; gap:40px;}
.aum-fund_item.is-active{flex: auto;}
.aum-fund_hover{gap:15px; display: none; position: relative; left: auto; bottom: auto;}
.aum-fund_item.is-active .aum-fund_hover{display: flex;}
.aum-fund_up{position: relative; left: auto; bottom: auto; display: block;}
.aum-fund_item.is-active .aum-fund_up{display: none;}
.aum-fund_item.is-active .aum-fund_tit{white-space:wrap;}

}
/*******************************************************************************
    @media  ~980px               
*******************************************************************************/
@media all and (max-width:980px){


/* About us - AUM / FUND */
.aum-fund_hover{gap:15px;}

.aum-fund_item{gap:30px; }

/* Invest Strategy - Sector */
.invest-sector-wrap{background-size: 150% auto;}
.invest-sector_ico img{width: 50px; height: 50px;}
.invest-sector{gap: 40px 20px;}
.invest-sector_item{width: calc((100% - 40px)/3)}


/* About us - Invest Philosophy */
.invest-philosophy_cont .title-area{padding: 0 0 40px;}
.invest-philosophy_wrap{height: auto;}
.invest-philosophy{width: 100%; min-height: auto; transform: scale(1); border-radius: var(--borderR20); overflow: hidden; counter-reset: invest-counter;}
.invest-philosophy_visual{display: none;}
.invest-philosophy_item{position: relative; top: auto; left: auto; gap: 50px; width: 100%; box-sizing: border-box; padding:0; align-items: center;}
.invest-philosophy_item ~ .invest-philosophy_item{margin-top: 20px;}
.invest-philosophy_item::after{counter-increment: invest-counter; content: counter(invest-counter, decimal-leading-zero); font-size: 1rem; color: var(--white); opacity: 0.5; line-height: 120%; position: absolute; right: 30px; top:30px;}
.invest-philosophy_item--01{margin-left: 0; margin-top: 0; flex-direction: row;}
.invest-philosophy_item--02{margin-left: 0; margin-top: 0; flex-direction: row;}
.invest-philosophy_item--03{margin-left: 0; margin-top: 0; flex-direction: row;}
.invest-philosophy_txt{gap: 5px; width: calc(100% - 170px); max-width: 100%;}
.invest-philosophy_txt p{font-size: 1.111rem; width: 100%;}
.invest-philosophy_txt p br{display: none;}
.invest-philosophy_txt::before{right: auto !important; left: -50px !important; width: 40px !important;}
.invest-philosophy_txt h4{font-size: 1.222rem; white-space:unset; color: var(--black);}
.invest-philosophy_txt p{color: var(--basic);}
.invest-philosophy_item--01 .invest-philosophy_txt h4,
.invest-philosophy_item--03 .invest-philosophy_txt h4{text-align: left;}
.invest-philosophy_item--01 .invest-philosophy_txt p,
.invest-philosophy_item--03 .invest-philosophy_txt p{text-align: left;}
.invest-philosophy_dot{left: auto !important; right: -6px !important; width: 13px !important; height: 13px !important; border-width:2px !important; margin-top: -6px !important;}
.invest-philosophy_ico{width: 120px;}
.invest-philosophy_ico img{width: 40px;}


/* About us - Core Values */
.core-values{gap:20px;}
.core-values_row{gap:20px;}
.core-values_card--01{flex-direction: column; align-items: flex-start; gap: 20px;}
.core-values_card{padding: 35px;}
.core-values_inner{gap: 20px;}
.core-values_list li::before{top: 11px;}


}

/*******************************************************************************
    @media 768px
*******************************************************************************/
@media all and (max-width:768px){


/* About us - Core Values */
.core-values{gap:10px;}
.core-values_row{gap:10px; flex-direction: column;}
.core-values_card--01{gap: 20px;}
.core-values_card{padding: 25px; border-radius: var(--borderR10);}
.core-values_inner{gap: 15px;}
.core-values_titwrap{gap:8px;}
.core-values_list{gap:6px;}
.core-values_list li{padding-left: 12px;}
.core-values_list li::before{width: 4px; height: 4px;}
.core-values_card--02,
.core-values_card--03,
.core-values_card--04,
.core-values_card--05{flex: 1 1 auto;}
.core-values_titwrap h4 br{display: none;}



}

/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){


/* About us - AUM / FUND */
.aum-fund{border-radius: var(--borderR10);}
.aum-fund_item{padding: 25px; gap:20px; }
.aum-fund_bg-img{}
.aum-fund_list{gap: 8px;}
.aum-fund_list li{gap: 10px;}
.aum-fund_lbl{gap: 5px;}
.aum-fund_ico{width: 20px; height: 20px;}
.aum-fund_check_ico{width: 16px; height: 16px;}
.aum-fund_hover{gap:15px; display: none; position: relative; left: auto; bottom: auto;}
.aum-fund_item.is-active .aum-fund_hover{display: flex;}
.aum-fund_up{position: relative; left: auto; bottom: auto; display: block;}
.aum-fund_item.is-active .aum-fund_up{display: none;}
.aum-fund_desc{margin-top: -10px;}


/* Invest Strategy - Sector */
.invest-sector-wrap{background-size: 200% auto;}
.invest-sector{gap: 30px 20px;}
.invest-sector_item{width: calc((100% - 20px)/2);}


.invest-sector_item .in{gap: 10px;}
.invest-sector_ico{max-width:140px;}


/* About us - Invest Philosophy */
.invest-philosophy_cont .title-area{padding: 0 0 20px;}

.invest-philosophy_item{gap:30px;}
.invest-philosophy_txt{width: calc(100% - 130px);}
.invest-philosophy_ico{width: 100px;}



}
