@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: 310px; height: 80px; background: url(../../images/freechips/btn_link.png) 0 0 no-repeat; background-size: 310px;}
.freechips-list-wrap .freechips-list .list-item .title.multi-line {margin-top: 0;}
.freechips-list-wrap .freechips-list .list-item:hover::before {opacity: 1;}
.freechips-list-wrap .freechips-list .list-item:hover .info-area {opacity: 0;}
.freechips-list-wrap .freechips-list .list-item:hover .btn-link {background-position-y: -90px;}

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

/* 
 *  [해상도 769px ~ 1024px]
 *  - 낮은 해상도의 PC
 *  - 태블릿 가로모드
 */
 @media all and (max-width:1024px) {

}