@charset "UTF-8";
/*
 *  File Name : /resources/css/responsive/main.css
 *  Description : 메인 스타일
 *  Page : index
 *  Selector : .page-main
 */

/* common */
.header-wrap {position: absolute; left: 0; top: 0; background: transparent;}
.header-wrap .btn-back {display: none !important;}
.contents-wrap {padding-top: 0; background: #E9E9E9;}

/* section-banner-slider */
.section-banner-slider {position: relative;}
.section-banner-slider .bg-banner {height: 558px; background: #101224 50% / cover no-repeat;}
.section-banner-slider .layout-inner {position: absolute; left: 50%; top: 0; transform: translateX(-50%); padding-top: var(--header-height);}
.section-banner-slider .swiper {overflow: hidden; position: relative; width: 1280px; height: 580px; border-radius: 20px;}
.section-banner-slider .swiper-container {position: relative;}
.section-banner-slider .swiper-container::before {content: ""; display: block; z-index: 10; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 85%, rgba(0, 0, 0, 0.80) 100%);}
.section-banner-slider .swiper-slide img {width: 100%;}
.section-banner-slider .swiper-pagination {position: absolute; bottom: 30px; width: 100%;}
.section-banner-slider .swiper-pagination-bullet {opacity: 1; width: 14px; height: 14px; margin-right: 22px ; background: #BDBBC3; border-radius: 14px; /* transition: all .3s ease; */}
.section-banner-slider .swiper-pagination-bullet-active {width: 88px; background: #0486FF;}
.section-banner-slider .swiper-pagination-bullet:last-child {margin-right: 0 !important;}
.section-banner-slider .swiper-navigation [class*=swiper-button] {opacity: 1; z-index: 11; position: absolute; bottom: 30px; top: auto; width: 46px; height: 30px;}
.section-banner-slider .swiper-navigation [class*=swiper-button]::after {display: none;}
.section-banner-slider .swiper-navigation [class*=swiper-button]:hover::before {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='74' height='48' viewBox='0 0 74 48' fill='none'%3E%3Crect width='74' height='48' rx='24' transform='matrix(-1 0 0 1 74 0)' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M36.2678 9.87868C35.2915 8.70711 33.7085 8.70711 32.7322 9.87868L22.7322 21.8787C21.7559 23.0503 21.7559 24.9497 22.7322 26.1213L32.7322 38.1213C33.7085 39.2929 35.2915 39.2929 36.2678 38.1213C37.2441 36.9497 37.2441 35.0503 36.2678 33.8787L30.5355 27H49.5C50.8807 27 52 25.6569 52 24C52 22.3431 50.8807 21 49.5 21H30.5355L36.2678 14.1213C37.2441 12.9497 37.2441 11.0503 36.2678 9.87868Z' fill='%230486FF'/%3E%3C/svg%3E");}
.section-banner-slider .swiper-navigation .swiper-button-prev {left: 40px;}
.section-banner-slider .swiper-navigation .swiper-button-next {right: 40px;}

/* section-main-contents */
.section-main-contents {padding: 55px 0 70px; margin-top: 98px;}
.section-main-contents .game-list-wrap .game-list {display: flex; flex-wrap: wrap;}
.section-main-contents .game-list-wrap .game-list .list-item {overflow: hidden; width: 412px; height: 475px; margin-right: 20px; margin-bottom: 20px; border-radius: 20px; box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); transition: transform 0.3s ease;}
.section-main-contents .game-list-wrap .game-list .list-item:nth-child(3n) {margin-right: 0;}
.section-main-contents .game-list-wrap .game-list .list-item > a {display: block; height: 100%;}
.section-main-contents .game-list-wrap .game-list .list-item .thumbnail {overflow: hidden; position: relative; height: 311px;}
.section-main-contents .game-list-wrap .game-list .list-item .thumbnail > img {width: 100%; object-fit: cover;}
.section-main-contents .game-list-wrap .game-list .list-item .mask {opacity: 0; display: flex; justify-content: center; align-items: center; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); transition: opacity 0.5s ease;}
.section-main-contents .game-list-wrap .game-list .list-item .mask img {width: 100%;}
.section-main-contents .game-list-wrap .game-list .list-item .btm-wrap {display: flex; align-items: center; height: calc(100% - 311px); padding: 0 48px; box-sizing: border-box; background: #fff;}
.section-main-contents .game-list-wrap .game-list .list-item .btm-wrap .icon-img {overflow: hidden; display: block; width: 88px; height: 88px; box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.25); border-radius: 20px;}
.section-main-contents .game-list-wrap .game-list .list-item .btm-wrap .info-area {width: calc(100% - 88px); padding-left: 24px; box-sizing: border-box;}
.section-main-contents .game-list-wrap .game-list .list-item .btm-wrap .info-area .game-name {color: #101224; font-family: var(--ft-family_Poppins-600); font-size: 26px; letter-spacing: -1px; /* overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; text-overflow: ellipsis; line-clamp: 2; -webkit-line-clamp: 2; line-height: 1; max-height: calc(1em * 2); */}
.section-main-contents .game-list-wrap .game-list .list-item .btm-wrap .info-area .btn-view {display: flex; align-items: center; margin-top: 10px; color: #0486FF; font-family: var(--ft-family_Poppins-500); font-size: 16px;}
.section-main-contents .game-list-wrap .game-list .list-item .btm-wrap .info-area .btn-view .ico-arrow {width: 36px; height: 24px; margin-left: 20px;}
.section-main-contents .game-list-wrap .game-list .list-item:not(.disabled):hover {transform: translateY(-14px);}
.section-main-contents .game-list-wrap .game-list .list-item:not(.disabled):hover .mask {opacity: 1;}
.section-main-contents .game-list-wrap .game-list .list-item.disabled {display: flex; justify-content: center; align-items: center; background: #959595; color: #E5E5E5; font-family: var(--ft-family_Poppins-600); font-size: 26px;}

/* 
 *  [해상도 ~1919px] 
 */
@media all and (max-width:1919px) {
    /* section-banner-slider */
    .section-banner-slider .bg-banner {height: 29.063vw;}
    .section-banner-slider .swiper {width: 66.458vw; height: 30.208vw; border-radius: 1.042vw;}
    .section-banner-slider .swiper-pagination {bottom: 1.5625vw;}
    .section-banner-slider .swiper-pagination-bullet {width: 0.729vw; height: 0.729vw; margin-right: 1.146vw; border-radius: 0.729vw;}
    .section-banner-slider .swiper-pagination-bullet-active {width: 4.583vw;}
    .section-banner-slider .swiper-navigation [class*=swiper-button] {bottom: 1.5625vw; width: 2.34375vw; height: 1.5625vw; border-radius: 0.9375vw;}
    .section-banner-slider .swiper-navigation [class*=swiper-button]::before {width: 0.729vw; height: 0.729vw;}
    .section-banner-slider .swiper-navigation .swiper-button-prev {left: 2.083vw;}
    .section-banner-slider .swiper-navigation .swiper-button-next {right: 2.083vw;}

    /* section-main-contents */
    .section-main-contents {padding: 2.865vw 0 3.646vw; margin-top: 5.104vw;}
    .section-main-contents .game-list-wrap .game-list .list-item {width: 21.458vw; height: 24.74vw; margin-right: 1.0417vw; margin-bottom: 1.0417vw; border-radius: 1.0417vw; box-shadow: 0px 0.208vw 0.208vw 0px rgba(0, 0, 0, 0.25);}
    .section-main-contents .game-list-wrap .game-list .list-item .thumbnail {height: 16.198vw;}
    .section-main-contents .game-list-wrap .game-list .list-item .btm-wrap {height: calc(100% - 16.198vw); padding: 0 2.5vw;}
    .section-main-contents .game-list-wrap .game-list .list-item .btm-wrap .icon-img {width: 4.583vw; height: 4.583vw; box-shadow: 0 0.15625vw 0.15625vw 0 rgba(0, 0, 0, 0.25); border-radius: 1.0417vw;}
    .section-main-contents .game-list-wrap .game-list .list-item .btm-wrap .info-area {width: calc(100% - 4.583vw); padding-left: 1.25vw;}
    .section-main-contents .game-list-wrap .game-list .list-item .btm-wrap .info-area .game-name {font-size: 1.354vw; letter-spacing: -0.052vw;}
    .section-main-contents .game-list-wrap .game-list .list-item .btm-wrap .info-area .btn-view {margin-top: 0.521vw; font-size: 0.833vw;}
    .section-main-contents .game-list-wrap .game-list .list-item .btm-wrap .info-area .btn-view .ico-arrow {width: 1.875vw; height: 1.25vw; margin-left: 1.042vw;}
    .section-main-contents .game-list-wrap .game-list .list-item:not(.disabled):hover {transform: translateY(-0.729vw);}
    .section-main-contents .game-list-wrap .game-list .list-item.disabled {font-size: 1.354vw;}
}

/* 
 *  [해상도 769px ~ 1024px]
 *  - 낮은 해상도의 PC
 *  - 태블릿 가로모드
 */
@media all and (max-width:1024px) {
    /* section-banner-slider */
    .section-banner-slider .swiper-navigation [class*=swiper-button]:hover {background: #0486FF;}
    .section-banner-slider .swiper-navigation [class*=swiper-button]:hover::before {background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath id='union-1' fill-rule='evenodd' clip-rule='evenodd' d='M7.34171 0.410051C7.79732 -0.136683 8.53601 -0.136683 8.99162 0.410051L13.6583 6.01005C14.1139 6.55679 14.1139 7.44322 13.6583 7.98995L8.99162 13.5899C8.53601 14.1367 7.79732 14.1367 7.34171 13.5899C6.8861 13.0432 6.8861 12.1568 7.34171 11.6101L10.0168 8.4H1.16667C0.522334 8.4 0 7.7732 0 7C0 6.2268 0.522334 5.6 1.16667 5.6H10.0168L7.34171 2.38995C6.8861 1.84322 6.8861 0.956785 7.34171 0.410051Z' fill='white'/%3E%3C/svg%3E%0A");}

    /* section-main-contents */
    .section-main-contents .game-list-wrap .game-list .list-item:not(.disabled):hover {transform: translateY(0);}
    .section-main-contents .game-list-wrap .game-list .list-item:not(.disabled):hover .mask {opacity: 0;}
}

/* 
 *  [해상도 481px ~ 768px]
 *  - 모바일 가로모드
 *  - 태블릿 세로모드
 */
@media all and (max-width:768px) {

}

/* 
 *  [해상도 ~ 480px]
 *  - 모바일 (최소 360px까지)
 *  - 모바일 ui 적용 (mode-mobile)
 */
@media all and (max-width:480px) {    
    /* section-banner-slider */
    .section-banner-slider .bg-banner {display: none;}
    .section-banner-slider .layout-inner {position: relative;}
    .section-banner-slider .swiper {width: 100%; height: 58.667vw; padding-bottom: 8vw; border-radius: 0;}
    .section-banner-slider .swiper-pagination {bottom: 0;}
    .section-banner-slider .swiper-pagination-bullet {width: 4vw; height: 4vw; margin-right: 1.333vw; border-radius: 13.333vw; background: #C1BEC7;}
    .section-banner-slider .swiper-pagination-bullet-active {width: 25.867vw; background: #0486FF;}
    .section-banner-slider .swiper-navigation [class*=swiper-button] {display: none;}

    /* section-main-contents */
    .section-main-contents {padding: 5.867vw 0 13.333vw; margin-top: 0;}
    .section-main-contents .layout-inner {padding: 0 var(--inner-padding);}
    .section-main-contents .section-title {font-size: 5.333vw;}
    .section-main-contents .game-list-wrap .game-list .list-item {width: 100%; height: 104.533vw; margin-right: 0 !important; margin-bottom: 5.333vw; border-radius: 2.667vw; box-shadow: 0 0.533vw 0.533vw 0 rgba(0, 0, 0, 0.25);}
    .section-main-contents .game-list-wrap .game-list .list-item .thumbnail {height: 68.533vw;}
    .section-main-contents .game-list-wrap .game-list .list-item .btm-wrap {height: calc(100% - 68.533vw); padding: 0 10.667vw;}
    .section-main-contents .game-list-wrap .game-list .list-item .btm-wrap .icon-img {width: 19.333vw; height: 19.333vw; box-shadow: 0 0.533vw 0.533vw 0 rgba(0, 0, 0, 0.25); border-radius: 4vw;}
    .section-main-contents .game-list-wrap .game-list .list-item .btm-wrap .info-area {width: calc(100% - 19.333vw); padding-left: 4vw;}
    .section-main-contents .game-list-wrap .game-list .list-item .btm-wrap .info-area .game-name {font-size: 6.133vw; letter-spacing: -0.052vw;}
    .section-main-contents .game-list-wrap .game-list .list-item .btm-wrap .info-area .btn-view {margin-top: 1.333vw; font-size: 4vw;}
    .section-main-contents .game-list-wrap .game-list .list-item .btm-wrap .info-area .btn-view .ico-arrow {width: 12vw; height: 8vw; margin-left: 2.667vw;}
    .section-main-contents .game-list-wrap .game-list .list-item.disabled {font-size: 6.133vw;}
}