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

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

/* freechips-list-wrap */
.freechips-list-wrap .freechips-list {display: flex; flex-wrap: wrap;}
.freechips-list-wrap .freechips-list .list-item {overflow: hidden; display: grid; place-items: center; align-items: start; position: relative; width: 440px; height: 516px; padding: 30px 0 40px; margin-right: 40px; margin-bottom: 40px; border-radius: 30px; background: linear-gradient(180deg, #4C17E4 0%, #3811AE 80%); box-sizing: border-box; text-align: center;}
.freechips-list-wrap .freechips-list .list-item:nth-child(3n) {margin-right: 0 !important;}
.freechips-list-wrap .freechips-list .list-item:nth-last-child(-n+3) {margin-bottom: 0;}
.freechips-list-wrap .freechips-list .list-item::before {opacity: 0; content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; transition: opacity 0.5s ease;}
.freechips-list-wrap .freechips-list .list-item:nth-child(1):before {background-image: url(../../images/freechips/bg_freechips_list01.jpg);}
.freechips-list-wrap .freechips-list .list-item:nth-child(2):before {background-image: url(../../images/freechips/bg_freechips_list02.jpg?v=2);}
.freechips-list-wrap .freechips-list .list-item:nth-child(3):before {background-image: url(../../images/freechips/bg_freechips_list03.jpg);}
.freechips-list-wrap .freechips-list .list-item:nth-child(4):before {background-image: url(../../images/freechips/bg_freechips_list04.jpg);}
.freechips-list-wrap .freechips-list .list-item:nth-child(5):before {background-image: url(../../images/freechips/bg_freechips_list05.jpg);}
.freechips-list-wrap .freechips-list .list-item:nth-child(6):before {background-image: url(../../images/freechips/bg_freechips_list06.jpg);}
.freechips-list-wrap .freechips-list .list-item:nth-child(7):before {background-image: url(../../images/freechips/bg_freechips_list07.jpg);}
.freechips-list-wrap .freechips-list .list-item:nth-child(8):before {background-image: url(../../images/freechips/bg_freechips_list08.jpg);}
.freechips-list-wrap .freechips-list .list-item:nth-child(9):before {background-image: url(../../images/freechips/bg_freechips_list09.jpg);}
.freechips-list-wrap .freechips-list .list-item:nth-child(10):before {background-image: url(../../images/freechips/bg_freechips_list10.jpg);}
.freechips-list-wrap .freechips-list .list-item > * {opacity: 1; position: relative; z-index: 1; transition: opacity 0.5s ease;}
.freechips-list-wrap .freechips-list .list-item .title {margin-top: 20px; color: #fff; font-family: var(--ft-family_Poppins-600); font-size: 50px; line-height: 1;}
.freechips-list-wrap .freechips-list .list-item .info-area {display: grid;}
.freechips-list-wrap .freechips-list .list-item .info-area .thumb img {width: 100%;}
.freechips-list-wrap .freechips-list .list-item .info-area .cont {color: #DBD4EC; font-family: var(--ft-family_Poppins-300); font-size: 20px; line-height: 1.4;}
.freechips-list-wrap .freechips-list .list-item .btn-link {align-self: self-end; display: inline-block; width: 340px; height: 80px;}
.freechips-list-wrap .freechips-list .list-item .btn-link .bg-back,
.freechips-list-wrap .freechips-list .list-item .btn-link .bg-front {height: 74px; border-radius: 100px;}
.freechips-list-wrap .freechips-list .list-item .btn-link .bg-back {top: 6px; box-shadow: 0 5px 4px 0 rgba(0, 0, 0, 0.30);}
.freechips-list-wrap .freechips-list .list-item .btn-link .front-inner {left: 2px; top: 2px; width: calc(100% - 4px); height: calc(100% - 4px); border-radius: 100px;}
.freechips-list-wrap .freechips-list .list-item .btn-link .front-inner::before,
.freechips-list-wrap .freechips-list .list-item .btn-link .front-inner::after {left: 3px; width: calc(100% - 6px); height: calc(50% - 3px);}
.freechips-list-wrap .freechips-list .list-item .btn-link .front-inner::before {top: 3px; border-radius: 340px 340px 5px 5px;}
.freechips-list-wrap .freechips-list .list-item .btn-link .front-inner::after {bottom: 3px; border-radius: 5px 5px 340px 340px;}
.freechips-list-wrap .freechips-list .list-item .btn-link .txt-area .txt {font-size: 36px;}
.freechips-list-wrap .freechips-list .list-item .btn-link .txt-area .txt:nth-child(1) {-webkit-text-stroke-width: 4px; -moz-text-stroke-width: 4px; -ms-text-stroke-width: 4px; text-stroke-width: 4px;}
.freechips-list-wrap .freechips-list .list-item .title.multi-line {margin-top: 0;}

/* section-btm-banner */
.section-btm-banner {background-image: url(../../images/freechips/bg_btm_banner.jpg);}
.section-btm-banner .img-character {left: -25px; top: -45px; width: 900px;}

/* 
 *  [해상도 1400px]
 *  - 컨텐츠 inner: 1400px 기준
 *  - 1920 기준 / DPR 1 / 16.6
 */
@media all and (max-width:1400px) {
    /* freechips-list-wrap */
    .freechips-list-wrap .freechips-list .list-item {width: 26.506vw; height: 31.084vw; padding: 1.807vw 0 2.41vw; margin-right: 2.41vw; margin-bottom: 2.41vw; border-radius: 1.807vw;}
    .freechips-list-wrap .freechips-list .list-item .title {margin-top: 1.205vw; font-size: 3.012vw;}
    .freechips-list-wrap .freechips-list .list-item .info-area .cont {font-size: 1.205vw;}
    .freechips-list-wrap .freechips-list .list-item .btn-link {width: 20.482vw; height: 4.819vw;}
    .freechips-list-wrap .freechips-list .list-item .btn-link .bg-back,
    .freechips-list-wrap .freechips-list .list-item .btn-link .bg-front {height: 4.458vw; border-radius: 6.024vw;}
    .freechips-list-wrap .freechips-list .list-item .btn-link .bg-back {top: 0.361vw; box-shadow: 0 0.301vw 0.241vw 0 rgba(0, 0, 0, 0.30);}
    .freechips-list-wrap .freechips-list .list-item .btn-link .front-inner {left: 0.120vw; top: 0.120vw; width: calc(100% - 0.241vw); height: calc(100% - 0.241vw); border-radius: 6.024vw;}
    .freechips-list-wrap .freechips-list .list-item .btn-link .front-inner::before,
    .freechips-list-wrap .freechips-list .list-item .btn-link .front-inner::after {left: 0.181vw; width: calc(100% - 0.361vw); height: calc(50% - 0.181vw);}
    .freechips-list-wrap .freechips-list .list-item .btn-link .front-inner::before {top: 0.181vw; border-radius: 20.482vw 20.482vw 0.301vw 0.301vw;}
    .freechips-list-wrap .freechips-list .list-item .btn-link .front-inner::after {bottom: 0.181vw; border-radius: 0.301vw 0.301vw 20.482vw 20.482vw;}
    .freechips-list-wrap .freechips-list .list-item .btn-link .txt-area .txt {font-size: 2.169vw;}
    .freechips-list-wrap .freechips-list .list-item .btn-link .txt-area .txt:nth-child(1) {-webkit-text-stroke-width: 0.241vw; -moz-text-stroke-width: 0.241vw; -ms-text-stroke-width: 0.241vw; text-stroke-width: 0.241vw;}

    /* section-btm-banner */
    .section-btm-banner .img-character {left: -1.506vw; top: -2.711vw; width: 54.217vw;}
}

/* 
 *  [해상도 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) {
    /* freechips-list-wrap */
    .freechips-list-wrap .freechips-list .list-item {width: 30.208vw; height: 33.854vw; padding: 1.953vw 0 2.604vw; margin-right: 2.083vw; margin-bottom: 2.083vw; border-radius: 1.953vw;}
    .freechips-list-wrap .freechips-list .list-item .title {margin-top: 1.302vw; font-size: 3.255vw;}
    .freechips-list-wrap .freechips-list .list-item .info-area .cont {font-size: 1.5625vw;}
    .freechips-list-wrap .freechips-list .list-item .btn-link {width: 22.135vw; height: 5.208vw;}
    .freechips-list-wrap .freechips-list .list-item .btn-link .bg-back,
    .freechips-list-wrap .freechips-list .list-item .btn-link .bg-front {height: 4.818vw; border-radius: 6.510vw;}
    .freechips-list-wrap .freechips-list .list-item .btn-link .bg-back {top: 0.391vw; box-shadow: 0 0.326vw 0.260vw 0 rgba(0, 0, 0, 0.30);}    
    .freechips-list-wrap .freechips-list .list-item .btn-link .front-inner {left: 0.130vw; top: 0.130vw; width: calc(100% - 0.260vw); height: calc(100% - 0.260vw); border-radius: 6.510vw;}
    .freechips-list-wrap .freechips-list .list-item .btn-link .front-inner::before,
    .freechips-list-wrap .freechips-list .list-item .btn-link .front-inner::after {left: 0.195vw; width: calc(100% - 0.391vw); height: calc(50% - 0.195vw);}
    .freechips-list-wrap .freechips-list .list-item .btn-link .front-inner::before {top: 0.195vw; border-radius: 22.135vw 22.135vw 0.326vw 0.326vw;}
    .freechips-list-wrap .freechips-list .list-item .btn-link .front-inner::after {bottom: 0.195vw; border-radius: 0.326vw 0.326vw 22.135vw 22.135vw;}
    .freechips-list-wrap .freechips-list .list-item .btn-link .txt-area .txt {font-size: 2.169vw;}
    .freechips-list-wrap .freechips-list .list-item .btn-link .txt-area .txt:nth-child(1) {-webkit-text-stroke-width: 0.260vw; -moz-text-stroke-width: 0.260vw; -ms-text-stroke-width: 0.260vw; text-stroke-width: 0.260vw;}

    /* section-btm-banner */
    .section-btm-banner .img-character {left: -1.506vw; top: -1.302vw; width: 58.594vw;}
}

/* 
 *  [해상도 ~ 480px]
 *  - 모바일 (최소 360px까지)
 *  - 360 기준 / DPR 3 / 3.6
 *  - 모바일 ui 적용 (mode-mobile)
 */
@media all and (max-width:480px) {
    /* freechips-list-wrap */
    .freechips-list-wrap .freechips-list .list-item {width: 100%; height: auto; padding: 7.407vw 5.556vw; margin-right: 0; margin-bottom: 2.222vw !important; border-radius: 3.704vw;}
    .freechips-list-wrap .freechips-list .list-item:last-child {margin-bottom: 0 !important;}
    .freechips-list-wrap .freechips-list .list-item .title {margin: 0 0 2vw; font-size: 5.556vw;}
    .freechips-list-wrap .freechips-list .list-item .info-area .cont {font-size: 3.704vw;}
    .freechips-list-wrap .freechips-list .list-item .btn-link {width: 46.296vw; height: 10.926vw; margin-top: 4.63vw;}
    .freechips-list-wrap .freechips-list .list-item .btn-link .bg-back,
    .freechips-list-wrap .freechips-list .list-item .btn-link .bg-front {height: 10.185vw; border-radius: 5.556vw;}
    .freechips-list-wrap .freechips-list .list-item .btn-link .bg-back {top: 0.741vw; box-shadow: 0 0.463vw 0.37vw 0 rgba(0, 0, 0, 0.30);}    
    .freechips-list-wrap .freechips-list .list-item .btn-link .front-inner {left: 0.278vw; top: 0.278vw; width: calc(100% - 0.556vw); height: calc(100% - 0.556vw); border-radius: 5.556vw;}
    .freechips-list-wrap .freechips-list .list-item .btn-link .front-inner::before,
    .freechips-list-wrap .freechips-list .list-item .btn-link .front-inner::after {left: 0.37vw; width: calc(100% - 0.741vw); height: calc(50% - 0.37vw);}
    .freechips-list-wrap .freechips-list .list-item .btn-link .front-inner::before {top: 0.37vw; border-radius: 44.907vw 44.907vw 0.326vw 0.326vw;}
    .freechips-list-wrap .freechips-list .list-item .btn-link .front-inner::after {bottom: 0.37vw; border-radius: 0.326vw 0.326vw 44.907vw 44.907vw;}
    .freechips-list-wrap .freechips-list .list-item .btn-link .txt-area .txt {font-size: 4.63vw;}
    .freechips-list-wrap .freechips-list .list-item .btn-link .txt-area .txt:nth-child(1) {-webkit-text-stroke-width: 0.556vw; -moz-text-stroke-width: 0.556vw; -ms-text-stroke-width: 0.556vw; text-stroke-width: 0.556vw;}

    /* section-btm-banner */
    .section-btm-banner {background-position: 80% 50%;}    
    .section-btm-banner .img-character {left: -31.481vw; top: 3.426vw; width: 88.519vw;}
}

/* 
 *  [hover 스타일 적용]
 *  - 터치 디바이스 제외
 */
@media (any-hover: hover) and (pointer: fine) {
    .freechips-list-wrap .freechips-list .list-item:hover::before {opacity: 1;}
    .freechips-list-wrap .freechips-list .list-item:hover .info-area {opacity: 0;}
}