@charset "UTF-8";
/*
 *  File Name : /resources/css/responsive/game_intro.css
 *  Description : 게임소개 페이지 스타일
 *  Page : /game_intro/*
 *  Selector : .page-game-intro
 */

/* common */
.store-btns-comm {display: flex; justify-content: center;}
.store-btns-comm [class*=btn-store] {background-size: cover; background-repeat: no-repeat;}
.store-btns-comm [class*=btn-store]:last-child {margin-right: 0 !important;}
.store-btns-comm .btn-store-apple {background-image: url(../../images/game_intro/btn_store_apple.png);}
.store-btns-comm .btn-store-google {background-image: url(../../images/game_intro/btn_store_google.png);}

/* section-visual */
.section-visual {position: relative; height: 1080px;}
.section-visual > img {width: 100%; height: 100%; object-fit: cover;}
.section-visual .layout-inner {position: absolute; left: 50%; top: 0; transform: translateX(-50%);}
.section-visual .store-btns-comm {position: absolute; bottom: 27.3%; width: 100%;}
.section-visual .store-btns-comm [class*=btn-store] {width: 256px; height: 77px; margin-right: 12px;}

/* section-features */
.section-features {padding: 70px 0 80px;}
.section-features .layout-inner {display: flex; flex-direction: column; align-items: center;}
.section-features .section-title {margin-bottom: 0;}
.section-features .swiper {position: relative; width: 1100px; padding-bottom: 44px;}
.section-features .swiper .swiper-container {width: 100%; padding: 210px 0;}
.section-features .swiper-slide {overflow: hidden; position: relative; perspective: 0; border-radius: 10px; box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); transform-origin: center center; transition: transform 0.3s ease;}
.section-features .swiper-slide::before {content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; background: linear-gradient(270deg, rgba(0, 0, 0, 0.08) 0.62%, rgba(0, 0, 0, 0.20) 18.49%), rgba(0, 0, 0, 0.20);}
.section-features .swiper-slide img {display: block;}
.section-features .swiper-slide-next, 
.section-features .swiper-slide-prev, 
.section-features .swiper-slide-duplicate-next, 
.section-features .swiper-slide-duplicate-prev {z-index: 50; transform: scale(1.5);}
.section-features .swiper-slide-active, 
.section-features .swiper-slide-duplicate-active {z-index: 100; transform: scale(2.04544);}
.section-features .swiper-slide-active::before, 
.section-features .swiper-slide-duplicate-active::before {display: none;}
.section-features .swiper-slide.masked-first {box-shadow: 2px 4px 4px 0px rgba(0, 0, 0, 0.25);}
.section-features .swiper-slide.masked-last {box-shadow: -2px 4px 4px 0px rgba(0, 0, 0, 0.25);}
.section-features .navigation-area {display: flex; align-items: center; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); height: 44px; padding: 0 67px; box-sizing: border-box;}
.section-features .swiper-pagination {display: flex; justify-content: center; align-items: center; position: relative; bottom: 0; width: 100%; margin: 0 40px;}
.section-features .swiper-pagination .swiper-pagination-bullet {opacity: 1; width: 15px; height: 15px; margin-right: 10px; border-radius: 30px; background: #D9D9D9; /* transition: all .3s ease; */}
.section-features .swiper-pagination .swiper-pagination-bullet:last-child {margin-right: 0 !important;}
.section-features .swiper-pagination .swiper-pagination-bullet-active {width: 96px; background: #0486FF;}
.section-features .swiper-navigation [class*=swiper-button] {opacity: 1; z-index: 11; position: absolute; top: 50%; transform: translateY(-50%); width: 67px; height: 44px; margin-top: 0;}
.section-features .swiper-navigation [class*=swiper-button]::after {display: none;}
.section-features .swiper-navigation [class*=swiper-button]:hover {opacity: .4;}
.section-features .swiper-navigation .swiper-button-prev {left: 0;}
.section-features .swiper-navigation .swiper-button-next {right: 0;}

/* section-download */
.section-download .layout-inner {display: flex; justify-content: space-between; align-items: center; padding: 60px 110px; border-top: 2px solid #E5E5E5;}
.section-download .section-title {display: flex; align-items: center;}
.section-download .section-title .icon {overflow: hidden; display: block; width: 198px; height: 198px; box-shadow: 0px 4px 3px 0px rgba(0, 0, 0, 0.25); border-radius: 34px;}
.section-download .section-title .title {margin-left: 16px; font-family: var(--ft-family_Poppins-600); font-size: 40px;}
.section-download .store-btns-comm [class*=btn-store] {width: 205px; height: 60px; margin-right: 12px;}
.section-download .section-title.mode-mobile {display: none;}

/* section-support */
.section-support {position: relative; height: 296px;}
.section-support > [class*=wrapper] {position: absolute; top: 0; width: 50%; height: 100%;}
.section-support .bg-img {display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.section-support .bg-img img {width: 100%; height: 100%; object-fit: cover;}
.section-support .layout-inner {display: flex; flex-direction: column; justify-content: center; align-items: center; position: absolute; top: 0; width: 640px;}
.section-support .section-title {color: #fff;}
.section-support .btn-link {display: flex; justify-content: flex-end; align-items: center; width: 284px; height: 72px; padding-right: 25px; box-sizing: border-box; background: #0486FF; border-radius: 85px;}
.section-support .btn-link .txt {color: #fff; font-family: var(--ft-family_Poppins-600); font-size: 24px;}
.section-support .btn-link .ico-arr {display: inline-block; position: relative; width: 45px; height: 45px; margin-left: 25px; border-radius: 50%; background: #fff;}
.section-support .btn-link .ico-arr::before {content: ""; display: inline-block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 23px; height: 23px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 25 25' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.8144 1.25937C13.5892 0.333139 14.8454 0.333139 15.6202 1.25937L23.5564 10.7464C24.3312 11.6727 24.3312 13.1744 23.5564 14.1006L15.6202 23.5877C14.8454 24.5139 13.5892 24.5139 12.8144 23.5877C12.0396 22.6614 12.0396 21.1597 12.8144 20.2335L17.3636 14.7953H2.31313C1.21738 14.7953 0.329102 13.7334 0.329102 12.4235C0.329102 11.1136 1.21738 10.0518 2.31313 10.0518H17.3636L12.8144 4.61355C12.0396 3.68732 12.0396 2.1856 12.8144 1.25937Z' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.8144 1.25937C13.5892 0.333139 14.8454 0.333139 15.6202 1.25937L23.5564 10.7464C24.3312 11.6727 24.3312 13.1744 23.5564 14.1006L15.6202 23.5877C14.8454 24.5139 13.5892 24.5139 12.8144 23.5877C12.0396 22.6614 12.0396 21.1597 12.8144 20.2335L17.3636 14.7953H2.31313C1.21738 14.7953 0.329102 13.7334 0.329102 12.4235C0.329102 11.1136 1.21738 10.0518 2.31313 10.0518H17.3636L12.8144 4.61355C12.0396 3.68732 12.0396 2.1856 12.8144 1.25937Z' fill='%230486FF'/%3E%3C/svg%3E"); background-size: cover; background-repeat: no-repeat;}
.section-support .btn-link:hover .txt {color: #000;}
.section-support .wrapper-faq {left: 0;}
.section-support .wrapper-faq .layout-inner {right: 0;}
.section-support .wrapper-contact {right: 0;}
.section-support .wrapper-contact .layout-inner {left: 0;}

/* section-terms */
.section-terms {background: #1F223E; padding: 60px 0;}
.section-terms .layout-inner {display: flex; justify-content: center; align-items: center;}
.section-terms .layout-inner .link-area {display: flex;}
.section-terms .layout-inner .link-area > li {margin-right: 20px;}
.section-terms .layout-inner .link-area > li:last-child {margin-right: 0 !important;}
.section-terms .layout-inner .link-area > li a {color: #fff; font-family: var(--ft-family_Poppins-500); font-size: 18px;}
.section-terms .layout-inner .link-area > li a:hover {color: #0486FF;} 

/* page-game-intro - intro-jj */
.intro-jj .section-visual {height: 56.25vw;}
.intro-jj .section-visual .layout-inner {left: 0; width: 100%; transform: translateX(0);}
.intro-jj .section-visual .store-btns-comm {width: auto; right: 8%;}
.intro-jj .section-visual .store-btns-comm [class*=btn-store] {width: 13.333vw; height: 4.010vw; margin-right: 0.625vw;}

/* 
 *  [해상도 ~1919px] 
 */
@media all and (max-width:1919px) {
    /* section-visual */
    .section-visual {height: 56.25vw;}
    .section-visual .store-btns-comm [class*=btn-store] {width: 13.333vw; height: 4.010vw; margin-right: 0.625vw;}

    /* section-features */
    .section-features {padding: 3.646vw 0 4.167vw;}
    .section-features .swiper {width: 57.292vw; padding-bottom: 2.292vw;}
    .section-features .swiper .swiper-container {padding: 10.9375vw 0;}
    .section-features .swiper-slide {border-radius: 0.521vw; box-shadow: 0 0.208vw 0.208vw 0 rgba(0, 0, 0, 0.25);}
    .section-features .swiper-slide.masked-first {box-shadow: 0.104vw 0.208vw 0.208vw 0 rgba(0, 0, 0, 0.25);}
    .section-features .swiper-slide.masked-last {box-shadow: -0.104vw 0.208vw 0.208vw 0 rgba(0, 0, 0, 0.25);}
    .section-features .navigation-area {height: 2.292vw; padding: 0 3.49vw;}
    .section-features .swiper-pagination {margin: 0 2.083vw;}
    .section-features .swiper-pagination .swiper-pagination-bullet {width: 0.78125vw; height: 0.78125vw; margin-right: 0.5201vw; border-radius: 1.5625vw;}
    .section-features .swiper-pagination .swiper-pagination-bullet-active {width: 5vw;}
    .section-features .swiper-navigation [class*=swiper-button] {width: 3.49vw; height: 2.292vw;}

    /* section-download */
    .section-download .layout-inner {padding: 3.125vw 5.729vw; border-width: 0.104vw;}
    .section-download .section-title .icon {width: 10.3125vw; height: 10.3125vw; box-shadow: 0px 0.208vw 0.15625vw 0 rgba(0, 0, 0, 0.25); border-radius: 1.771vw;}
    .section-download .section-title .title {margin-left: 0.833vw; font-size: 2.083vw;}
    .section-download .store-btns-comm [class*=btn-store] {width: 10.677vw; height: 3.125vw; margin-right: 0.625vw;}

    /* section-support */
    .section-support {height: 15.417vw;}
    .section-support .layout-inner {width: 33.333vw;}
    .section-support .btn-link {width: 14.792vw; height: 3.75vw; padding-right: 1.302vw; border-radius: 4.427vw;}
    .section-support .btn-link .txt {font-size: 1.25vw;}
    .section-support .btn-link .ico-arr {width: 2.34375vw; height: 2.34375vw; margin-left: 1.302vw;}
    .section-support .btn-link .ico-arr::before {width: 1.198vw; height: 1.198vw;}

    /* section-terms */
    .section-terms {padding: 3.125vw 0;}
    .section-terms .layout-inner .link-area > li {margin-right: 1.042vw;}
    .section-terms .layout-inner .link-area > li a {font-size: 0.9375vw;}
}

/* 
 *  [해상도 769px ~ 1024px]
 *  - 낮은 해상도의 PC
 *  - 태블릿 가로모드
 */
@media all and (max-width:1024px) { 
    /* section-features */
    .section-features .swiper-navigation [class*=swiper-button]:hover {opacity: 1;}   

    /* section-support */
    .section-support .btn-link:hover .txt {color: #fff;}

    /* section-terms */
    .section-terms .layout-inner .link-area > li a:hover {color: #fff;} 
}

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

}

/* 
 *  [해상도 ~ 480px]
 *  - 모바일 (최소 360px까지)
 *  - 모바일 ui 적용 (mode-mobile)
 */
@media all and (max-width:480px) {
    /* section-visual */
    .page-game-intro .section-visual {height: 113.333vw;}
    .page-game-intro .section-visual .store-btns-comm {bottom: 11.2vw;}
    .page-game-intro .section-visual .store-btns-comm [class*=btn-store] {width: 40vw; height: 12vw; margin-right: 2vw;}

    /* section-features */
    .section-features {padding: 5.333vw 0 4vw;}
    .section-features .layout-inner {padding: 0 10vw;}
    .section-features .section-title {margin-bottom: 5.333vw;}
    .section-features .swiper {width: 80vw; padding-bottom: 15.2vw;}
    .section-features .swiper .swiper-container {padding: 0;}
    .section-features .swiper-slide {transform: scale(1) !important; border-radius: 2.667vw; box-shadow: 0 0.8vw 0.533vw 0 rgba(0, 0, 0, 0.25) !important;}
    .section-features .swiper-slide::before {display: none;}    
    .section-features .navigation-area {height: 9.6vw; padding: 0 14.667vw;}
    .section-features .swiper-pagination {margin: 0 2.667vw;}
    .section-features .swiper-pagination .swiper-pagination-bullet {width: 3.733vw; height: 3.733vw; margin-right: 1.333vw; border-radius: 6vw;}
    .section-features .swiper-pagination .swiper-pagination-bullet-active {width: 24.8vw;}
    .section-features .swiper-navigation [class*=swiper-button] {width: 14.667vw; height: 9.6vw;}

    /* section-download */
    .section-download {padding: 0 10vw;}
    .section-download .layout-inner {justify-content: flex-start; padding: 8vw 0 13.333vw; border-width: 0.267vw;}
    .section-download .section-title {margin-bottom: .5vw;}
    .section-download .section-title .icon {width: 18.667vw; height: 18.667vw; box-shadow: 0 0.533vw 0.533vw 0 rgba(0, 0, 0, 0.25); border-radius: 3.333vw;}
    .section-download .section-title .title {margin-left: 0; font-size: 6.133vw;}
    .section-download .section-content {display: flex; flex-direction: column; align-items: flex-start; margin-left: 2.4vw;}
    .section-download .store-btns-comm [class*=btn-store] {width: 28vw; height: 8.267vw; margin-right: 2.933vw;}

    /* section-support */
    .section-support {display: flex; flex-direction: column; height: auto;}
    .section-support > [class*=wrapper] {position: relative; width: 100%; height: 48.533vw;}
    .section-support .layout-inner {width: 100%;}
    .section-support .btn-link {width: 45.333vw; height: 11.467vw; padding-right: 3.733vw; border-radius: 9.333vw;}
    .section-support .btn-link .txt {font-size: 3.733vw;}
    .section-support .btn-link .ico-arr {width: 7.467vw; height: 7.467vw; margin-left: 4.533vw;}
    .section-support .btn-link .ico-arr::before {width: 4vw; height: 4vw;}

    /* section-terms */
    .section-terms {padding: 12vw 0;}
    .section-terms .layout-inner .link-area {display: flex; flex-direction: column; align-items: center;}
    .section-terms .layout-inner .link-area > li {margin-right: 0vw; margin-bottom: 6.667vw;}
    .section-terms .layout-inner .link-area > li:last-child {margin-bottom: 0 !important;}
    .section-terms .layout-inner .link-area > li a {font-size: 6.133vw;}   
}