@charset "utf-8";

/* #content */
.intro {background-image: url(../images/gangnam/img_top_banner.png);}
.intro .inner ul {gap: 10px;}
.intro .inner ul li {width: 34%; gap: 10px;}
.intro .inner ul li .img_box {width: 38%;}
.intro .inner ul li .title_box {width: 62%;}


.biography .inner ul li > .img_box > .xray_box {position: relative; color: #fff; height: 50%;}
.biography .inner ul li > .img_box > .xray_box p {font-size: 25px; font-weight: 300; line-height: 1.6; letter-spacing: -1.25px; position: absolute; bottom: 2%; left: 3%;}
.biography .inner ul li > .img_box > .xray_box span {display: inline-block; min-width: 222px; text-align: center; padding: 12px 20px;
    font-family: 'Roboto KR'; font-size: 28px; font-weight: 500; line-height: 1.36; letter-spacing: -0.28px; position: absolute; bottom: 0; right: 0;}
.biography .inner ul li > .img_box > .xray_box:nth-of-type(1) span {background: #3a3a3a;}
.biography .inner ul li > .img_box > .xray_box:nth-of-type(2) span {background: #0C82FE;}
.biography .inner ul li > .img_box > .xray_box + p.mo_ver {display: none;}

.biography .inner .banner {background-image: url(../images/gangnam/img_banner01.png);}

    
.banner_area {background-image: url(../images/gangnam/img_banner02.png);}
.banner_area .text_box .sign {width: 192px; height: 69px;}

/* PC (해상도 1440px ~ 1540px) */
@media screen and (max-width:1540px) {


}
/* PC (해상도 1058px ~ 1440px) */
@media screen and (max-width:1440px) {

}
/* PC (해상도 1024px ~ 1058px) */
@media screen and (max-width:1058px) {

}


/* 태블릿 (해상도 769px ~ 1024px) */
@media screen and (max-width:1024px) {
    /* content */
    .intro .inner ul {gap: 6px;}
    .intro .inner ul li {gap: 2px;}
   

    .biography .inner ul li > .img_box > .xray_box p {font-weight: 500; font-size: 16px; line-height: 20px; letter-spacing: -1px;}
    .biography .inner ul li > .img_box > .xray_box span {min-width: 114px; padding: 0; font-size: 16px; line-height: 32px; letter-spacing: -1px;}

        
    .banner_area .text_box .sign {width: 103px; height: 38px;}
}

/* 모바일 가로, 모바일 세로 (해상도 375px ~ 768px)*/
@media screen and (max-width:768px) {
    .wrap { min-width: 375px; }
    /* content */
    .intro {background-image: url(../images/gangnam/img_top_banner_mo.png); background-position: right 35% top;}
    .intro .inner ul {justify-content: center;}
    .intro .inner ul li {width: 50%;}
    .intro .inner ul li .img_box {width: 78%; margin: 0 auto;}
    .intro .inner ul li .title_box {width: 100%; min-height: 54px;}

    .biography .inner ul li > .img_box {position: relative;}
    .biography .inner ul li > .img_box > .xray_box {width: 50%; display: inline-block; float: left;}
    .biography .inner ul li > .img_box > .xray_box p {display: none;}
    .biography .inner ul li > .img_box > .xray_box span {min-width: 77px; font-size: 14px; line-height: 22px; height: 22px; padding: 0 14px; bottom: auto; top: 0; right: 0;}
    .biography .inner ul li > .img_box > .xray_box:nth-of-type(2) span {right: auto; left: 0;}
    .biography .inner ul li > .img_box > .xray_box + p.mo_ver {display: block; width: 100%; text-align: center; 
        font-size: 14px; font-weight: 500; line-height: 22px; letter-spacing: -1px; color: #fff;
        position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);}

    .biography .inner .banner_area {background-image: url(../images/gangnam/img_banner01.png);}
    
        
    .banner_area {background-image: url(../images/gangnam/img_banner02_mo.png); background-position: right top;}

    .img_box .overlay {
        font-size: 1.2rem !important;
    }
}


/*20241204 dim 추가*/
.img_box {
    position: relative;
    display: inline-block;
}

.img_box .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8); /* 반투명 배경 */
    color: white;
    font-size: 1.8rem;
    font-weight: bold;
    text-align: center;
    line-height: 100%; /* 이미지 높이에 따라 조정 */
    display: flex;
    align-items: center; /* 수직 가운데 정렬 */
    justify-content: center; /* 수평 가운데 정렬 */
}