/* ==================================================

   CEO PREMIUM POPUP STYLE

   Part 1

================================================== */



/* ===========================
   RESET
=========================== */








/* ===========================
   POPUP OVERLAY
=========================== */


.popup-overlay{


    position:fixed;

    inset:0;

z-index:99999;
     display:none;   

    justify-content:center;

    align-items:center;


    padding:25px;


    overflow:hidden;


    background:


    radial-gradient(
        circle at 15% 20%,
        rgba(111,90,255,.25),
        transparent 35%
    ),


    radial-gradient(
        circle at 85% 80%,
        rgba(40,80,220,.25),
        transparent 35%
    ),


    rgba(7,12,35,.72);



    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);


    animation:

    overlayFade .5s ease;


}



/* Overlay 등장 */


@keyframes overlayFade{


    from{

        opacity:0;

    }


    to{

        opacity:1;

    }

}






/* ===========================
   PARTICLE AREA
=========================== */


/* 위치 */





/* ===========================
   POPUP CARD
=========================== */

.ceo-popup{

    position:relative;

    display:flex;
    flex-direction:column;

    width:100%;
    max-width:980px;

    height:92vh;

    overflow:hidden;

    border-radius:28px;

    background:rgba(255,255,255,.82);
}


.popup-header{

    flex:0 0 auto;

}

/* Popup 등장 */


@keyframes popupShow{


    0%{


        opacity:0;


        transform:

        translateY(40px)

        scale(.92);


    }



    100%{


        opacity:1;


        transform:

        translateY(0)

        scale(1);


    }


}






/* ===========================
   GOLD FRAME
=========================== */


.gold-frame{


    position:absolute;


    inset:8px;


    border-radius:22px;



    border:


    1px solid

    rgba(212,175,55,.55);



    pointer-events:none;


    z-index:20;


}



.ceo-popup::before{


    content:"";


    position:absolute;


    top:0;


    left:0;


    width:100%;


    height:3px;



    background:


    linear-gradient(

        90deg,

        #8c6823,

        #d4af37,

        #fff0a8,

        #d4af37,

        #8c6823

    );



    z-index:30;


}







/* ===========================
   HEADER
=========================== */


.popup-header{


    position:relative;


    overflow:hidden;



    padding:

    65px 55px;



    color:#fff;



    background:



    linear-gradient(

        135deg,

        #6554ee,

        #4058dc 45%,

        #173b8e

    );



}






/* 두번째 Glow */




/* Header Text */


.header-inner{


    position:relative;


    z-index:5;


}



.category{


    font-size:13px;


    letter-spacing:4px;


    opacity:.8;


}



.gold-title{


    margin-top:18px;


    font-size:32px;


    font-weight:800;


    position:relative;


    overflow:hidden;



    text-shadow:


    0 5px 20px rgba(0,0,0,.2);


}



.subtitle{


    margin-top:14px;


    opacity:.9;


    font-size:27px;


}



/* Gold Shine 준비 */



/* ==================================================

   CEO PREMIUM POPUP STYLE

   Part 2

================================================== */





/* ===========================
   GOLD SHINE ANIMATION
=========================== */





/* ===========================
   CEO CONTENT AREA
=========================== */

.popup-content{

    flex:1;

    min-height:0;

    overflow-y:auto;

    padding:45px 55px;

}





/* ===========================
   CUSTOM SCROLLBAR
=========================== */


.popup-content::-webkit-scrollbar{


    width:8px;


}



.popup-content::-webkit-scrollbar-track{


    background:

    rgba(100,90,220,.08);


    border-radius:20px;


}




.popup-content::-webkit-scrollbar-thumb{


    background:


    linear-gradient(

        180deg,

        #7d6cff,

        #4433d8

    );



    border-radius:20px;


}







/* ===========================
   CEO PROFILE
=========================== */


.ceo-profile{


    display:flex;


    align-items:center;


    gap:35px;


    margin-bottom:40px;


}




/* 사진 영역 */




/* 사진 뒤 보라 Glow */





/* CEO 이름 */


.ceo-info h2{


    color:#183b8e;


    font-size:25px;


    font-weight:700;


}



.ceo-info p{


    margin-top:8px;


    color:#777;


}



.gold-line{


    display:block;


    width:55px;


    height:2px;


    margin-top:14px;



    background:

    linear-gradient(

        90deg,

        #d4af37,

        #ffe99b

    );


}







/* ===========================
   ARTICLE
=========================== */


.ceo-article{


    background:


    rgba(255,255,255,.7);



    border:


    1px solid

    rgba(120,110,220,.12);



    border-radius:18px;



    padding:40px;



    box-shadow:


    inset 0 1px 10px

    rgba(255,255,255,.8);



}




.ceo-article p{


    font-size:17px;


    line-height:2;


    color:#444;


    margin-bottom:28px;


}







/* 첫 글자 Drop Cap


.ceo-article p::first-letter{


    float:left;


    font-family:

    Georgia,serif;



    font-size:65px;


    line-height:55px;


    padding-right:12px;



    color:#5b4ae6;



    font-weight:700;


}
 */






/* ===========================
   ARTICLE FADE ANIMATION
=========================== */





/* ===========================
   SIGNATURE
=========================== */


.signature{


    margin-top:55px;
 margin-bottom:55px;

    text-align:left;


}



.signature p{


    margin-bottom:5px;


}



.signature img{


    width:180px;


    opacity:.9;


    display:block;


    margin-left:auto;


}



.signature strong{


    display:block;


    margin-top:8px;


    color:#173b8e;


    font-size:18px;
  text-align: right;

}








/* ===========================
   FOOTER
=========================== */


.popup-footer{


    padding:

    20px 55px;


    border-top:


    1px solid

    rgba(120,120,180,.15);


}



.footer-inner{


    display:flex;


    justify-content:space-between;


    align-items:center;


    color:#777;


    font-size:13px;


}



.more-btn{


    border:none;


    background:


    linear-gradient(

        135deg,

        #5d4be7,

        #203c92

    );


    color:#fff;


    padding:

    10px 20px;


    border-radius:30px;


    cursor:pointer;


    transition:.3s;


}



.more-btn:hover{


    transform:

    translateY(-3px);


    box-shadow:


    0 10px 25px

    rgba(60,60,200,.3);


}








/* ===========================
   MOBILE RESPONSIVE
=========================== */


@media(max-width:768px){



.popup-overlay{


    padding:15px;


}




.ceo-popup{


    border-radius:20px;


}




.popup-header{


    padding:

    45px 25px;


}



.gold-title{


    font-size:32px;


}




.subtitle{


    font-size:14px;


}




.popup-content{


    padding:

    25px;


}




.ceo-profile{


    flex-direction:column;


    text-align:center;


}



.ceo-article{


    padding:25px;


}




.ceo-article p{


    font-size:15px;


}



.signature img{


    width:140px;


}



.popup-footer{


    padding:

    18px 25px;


}




.footer-inner{


    flex-direction:column;


    gap:15px;


}


}

/* =================================
   QUALITY OBJECTIVE LIST CARD
================================= */


.quality-box{

    margin-top:40px;

    padding:15px 30px;


    border-radius:20px;


    background:

    rgba(255,255,255,.75);


    border:

    1px solid rgba(212,175,55,.35);


    box-shadow:

    0 20px 45px rgba(30,45,100,.1);

}




.quality-row{

    display:flex;

    align-items:flex-start;


    gap:22px;


    padding:28px 10px;


}



.quality-row:not(:last-child){

    border-bottom:

    1px solid rgba(212,175,55,.25);

}





/* 번호 */

.quality-num{


    flex-shrink:0;


    width:48px;

    height:48px;



    display:flex;


    justify-content:center;


    align-items:center;



    border-radius:50%;


    border:

    1px solid #d4af37;



    background:

    linear-gradient(

        145deg,

        #fff,

        #faf0d0

    );


    color:#8c6823;


    font-size:18px;


    font-weight:700;



}





.quality-content h4{


    margin-top:4px;


    margin-bottom:10px;


    color:#173b8e;


    font-size:19px;


    font-weight:700;


}



.quality-content p{


    color:#555;


    font-size:15px;


    line-height:1.8;


    margin:0;


}



@media(max-width:768px){

    .quality-box{

        padding:10px 18px;

    }


    .quality-row{

        gap:15px;

        padding:22px 5px;

    }


    .quality-num{

        width:40px;

        height:40px;

        font-size:15px;

    }


    .quality-content h4{

        font-size:16px;

    }


    .quality-content p{

        font-size:14px;

    }

}