@charset "UTF-8";
/*
 *  File Name : /ui_resource/css/responsive/vip.css
 *  Description : VIP 페이지 스타일
 *  Page : /vip/*
 *  Selector : .page-vip
 */

/* section-top-banner */
.section-top-banner {background-image: url(../../images/vip/bg_top_banner.jpg);}

/* vip-list-wrap */
.vip-list-wrap .vip-list {display: flex; flex-wrap: wrap;}
.vip-list-wrap .vip-list .list-item {overflow: hidden; display: flex; flex-direction: column; position: relative; width: 440px; height: 516px; margin-right: 40px; margin-bottom: 40px; border-radius: 30px; background: linear-gradient(180deg, #4C17E4 0%, #3811AE 80%); box-sizing: border-box; text-align: center;}
.vip-list-wrap .vip-list .list-item:nth-child(3n) {margin-right: 0 !important;}
.vip-list-wrap .vip-list .list-item:nth-last-child(-n+3) {margin-bottom: 0;}
.vip-list-wrap .vip-list .list-item .img-area {width: 400px; height: auto; margin: 0 auto; box-sizing: border-box;}
.vip-list-wrap .vip-list .list-item .img-area img {width: 100%;}
.vip-list-wrap .vip-list .list-item .info-area {margin-top: -30px;}
.vip-list-wrap .vip-list .list-item .info-area .title {color: #fff; font-family: var(--ft-family_Poppins-600); font-size: 50px; line-height: 1;}
.vip-list-wrap .vip-list .list-item .info-area .cont {margin-top: 15px; color: #DBD4EC; font-family: var(--ft-family_Poppins-300); font-size: 20px; line-height: 1.4;}

/* section-btm-banner */
.section-btm-banner {background-image: url(../../images/vip/bg_btm_banner.png?v=2);}
.section-btm-banner .img-character {left: 60px; top: -36px; width: 720px;}


/* 
 *  [해상도 1400px]
 *  - 컨텐츠 inner: 1400px 기준
 *  - 1920 기준 / DPR 1 / 16.6
 */
@media all and (max-width:1400px) {
    /* vip-list-wrap */
    .vip-list-wrap .vip-list .list-item {width: 26.506vw; height: 31.084vw; margin-right: 2.41vw; margin-bottom: 2.41vw; border-radius: 1.807vw;}
    .vip-list-wrap .vip-list .list-item .img-area {width: 24.096vw;}
    .vip-list-wrap .vip-list .list-item .info-area {margin-top: -1.807vw;}
    .vip-list-wrap .vip-list .list-item .info-area .title {font-size: 3.012vw;}
    .vip-list-wrap .vip-list .list-item .info-area .cont {margin-top: 0.904vw; font-size: 1.205vw;}

    /* section-btm-banner */
    .section-btm-banner .img-character {left: 3.614vw; top: -2.169vw; width: 43.373vw;}
}

/* 
 *  [해상도 481px ~ 1024px]
 *  1. 769px ~ 1024px
 *  - 낮은 해상도의 PC
 *  - 태블릿 가로모드
 *
 *  2. 481px ~ 768px]
 *  - 모바일 가로모드
 *  - 태블릿 세로모드
 *
 *  3. 768 기준 / DPR 2 / 7.68
 *  4. 태블릿 ui 적용 (mode-tablet)
 *  5. 터치 기반 디바이스 ui 적용 (mode-touch): 태블릿+모바일
 */
@media all and (max-width:1024px) {
    /* vip-list-wrap */
    .vip-list-wrap .vip-list .list-item {width: 30.208vw; height: 33.854vw; margin-right: 2.083vw; margin-bottom: 2.083vw; border-radius: 1.953vw;}
    .vip-list-wrap .vip-list .list-item .img-area {width: 95%;; padding: 0 1vw;}
    .vip-list-wrap .vip-list .list-item .info-area {margin-top: -2vw;}
    .vip-list-wrap .vip-list .list-item .info-area .title {font-size: 3.256vw;}
    .vip-list-wrap .vip-list .list-item .info-area .cont {margin-top: 1.302vw; font-size: 1.302vw;}

    /* section-btm-banner */
    .section-btm-banner .img-character {left: 3.255vw; top: -2.344vw; width: 46.875vw;}
}

/* 
 *  [해상도 ~ 480px]
 *  - 모바일 (최소 360px까지)
 *  - 360 기준 / DPR 3 / 3.6
 *  - 모바일 ui 적용 (mode-mobile)
 */
@media all and (max-width:480px) {
    /* vip-list-wrap */
    .vip-list-wrap .vip-list .list-item {flex-direction: row-reverse; justify-content: space-between; align-items: center; width: 100%; height: auto; padding: 7.407vw 3.704vw; margin-right: 0; margin-bottom: 2.222vw !important; border-radius: 3.704vw; box-sizing: border-box;}
    .vip-list-wrap .vip-list .list-item:last-child {margin-bottom: 0 !important;}
    .vip-list-wrap .vip-list .list-item .img-area {width: 27.778vw; height: auto; padding: 0;}
    .vip-list-wrap .vip-list .list-item .info-area {width: calc(100% - 27.778vw); margin-top: 0; text-align: left;}
    .vip-list-wrap .vip-list .list-item .info-area .title {font-size: 5.556vw;}
    .vip-list-wrap .vip-list .list-item .info-area .cont {margin-top: 3.704vw; font-size: 3.704vw;}

    /* section-btm-banner */
    .section-btm-banner .img-character {left: -20.648vw; top: 3.704vw; width: 67.963vw;}    
}