@import url('sub.css');

/* PE - Strategy */
.pe-strategy_wrap{position: relative; width: 100%;}
.pe-strategy{display: flex; width: 100%;}
.pe-strategy_item{flex: 1; display: flex; flex-direction: column; align-items: center; padding: 0 30px; box-sizing: border-box; gap: 30px; min-width: 0; position: relative;}
.pe-strategy_item::after{content: '\e145'; display: block; width: 40px; height: 40px; line-height: 40px; font-size: 42px; font-family: var(--icon); position: absolute; right: -20px; top:130px; font-weight: 400; color: var(--sub);}
.pe-strategy_item:last-child:after{display: none;}
.pe-strategy_visual{position: relative; max-width: 300px; width: 100%; aspect-ratio: 1; flex-shrink: 0; box-sizing: border-box;}
.pe-strategy_ring{position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: contain;}
.pe-strategy_shadow{position: absolute; left: 50%; top:50%; width: 70%; height: 70%; object-fit: contain; transform: translate(-50%, -50%); border-radius: 50%; filter: drop-shadow(4px 4px 12px rgba(99, 127, 140, 0.05)) drop-shadow(15px 15px 21px rgba(99, 127, 140, 0.04)) drop-shadow(33px 34px 29px rgba(99, 127, 140, 0.03)) drop-shadow(59px 61px 34px rgba(99, 127, 140, 0.01));}
.pe-strategy_icon{position: absolute; left: 50%; top: 50%; width: 70px; height: 70px; transform: translate(-50%, -50%); object-fit: contain;}
.pe-strategy_txt{display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; text-align: center;}
.pe-strategy_txt h4{font-family: var(--eng); font-size: 1.444rem; font-weight: 600; line-height: 138.46%; color: var(--black);}
.pe-strategy_txt p{font-size: 1.111rem; font-weight: 400; line-height: 166.67%; letter-spacing: var(--letter-spacing-default); color: var(--basic);}

/* PE - FP Highlights */
.fp-highlights{display: flex; flex-wrap: wrap; gap: 30px; width: 100%;}
.fp-highlights_card{flex: 1 1 0; min-width: 0; height: 320px; perspective: 1000px;}
.fp-highlights .flipper{position: relative; width: 100%; height: 100%; transition: transform 0.8s; transform-style: preserve-3d;}
.fp-highlights_card:hover .flipper{transform: rotateY(180deg);}
.fp-highlights .front,
.fp-highlights .back{position: absolute; top: 0; left: 0; width: 100%; height: 100%; backface-visibility: hidden; border-radius: var(--borderR20); padding: 40px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between;}
.fp-highlights .front{background: var(--white); transform: rotateY(0deg);}
.fp-highlights .back{background: var(--main); transform: rotateY(180deg);}
.fp-highlights_hd{display: flex; flex-direction: column; gap: 10px;}
.fp-highlights_hd img{display: block; width: 40px; height: 40px; object-fit: contain;}
.fp-highlights .front .fp-highlights_hd strong{font-family: var(--eng); font-size: 1.222rem; font-weight: 600; line-height: 150%; color: var(--main);}
.fp-highlights .back .fp-highlights_hd strong{font-family: var(--eng); font-size: 1.222rem; font-weight: 600; line-height: 150%; color: var(--white);}
.fp-highlights .front .fp-highlights_val{display: flex; align-items: flex-end; justify-content: flex-end; width: 100%; color: var(--main);}
.fp-highlights .back .fp-highlights_val{display: flex; align-items: flex-end; justify-content: flex-end; width: 100%; color: var(--white);}
.fp-highlights .back .fp-highlights_hd img{filter: brightness(0) invert(1);}
.fp-highlights_card:first-child .front .fp-highlights_hd img{filter: brightness(0) saturate(100%) invert(28%) sepia(35%) saturate(1500%) hue-rotate(118deg) brightness(0.9);}
.fp-highlights_num{font-family: var(--kor); font-size: 3.333rem; font-weight: 300; line-height: 116.67%;}
.fp-highlights_unit{margin-left: 4px; line-height: 120%;}




/*******************************************************************************
    @media 1950px
*******************************************************************************/
@media all and (max-width:1950px){
}
/*******************************************************************************
    @media 1500px
*******************************************************************************/
@media all and (max-width:1500px){

/* PE - Strategy */
.pe-strategy{}
.pe-strategy_item::after{top:35%; margin-top: -20px;}
.pe-strategy_txt p br{display: none;}



}
/*******************************************************************************
    @media ~1300px
*******************************************************************************/
@media all and (max-width:1300px){

/* PE - FP Highlights */
.fp-highlights{gap: 30px; flex-wrap: wrap;}
.fp-highlights_card{flex: auto; width: calc((100% - 30px)/2);}



}
/*******************************************************************************
    @media  ~980px
*******************************************************************************/
@media all and (max-width:980px){


/* PE - Strategy */
.pe-strategy{}
.pe-strategy_item{gap: 20px;}
.pe-strategy_item::after{width: 30px; height: 30px; line-height: 30px; font-size: 32px; right: -15px; margin-top: -15px;}
.pe-strategy_icon{width: 50px; height: 50px;}


/* PE - FP Highlights */
.fp-highlights{gap: 20px;}
.fp-highlights_card{width: calc((100% - 20px)/2); height: 300px;}
.fp-highlights .front,
.fp-highlights .back{padding: 30px;}
.fp-highlights_num{font-size: 2.778rem;}



}
/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){


/* PE - Strategy */
.pe-strategy{flex-direction: column;}
.pe-strategy_item{padding: 20px 0; gap: 15px;}
.pe-strategy_item::after{right: 50%; margin-right: -15px; top:auto; margin-top:0; bottom: -15px;}
.pe-strategy_visual{max-width: 200px;}
.pe-strategy_icon{width: 50px; height: 50px;}
.pe-strategy_txt{gap: 10px;}


/* PE - FP Highlights */
.fp-highlights{gap: 10px;}
.fp-highlights_card{width: 100%; height: 185px; }
.fp-highlights .front,
.fp-highlights .back{border-radius:var(--borderR10); padding: 25px;}
.fp-highlights_hd{gap: 5px;}
.fp-highlights_hd img{width: 30px; height: 30px;}



}