@charset "UTF-8";
/*
 *  File Name : /ui_resource/css/responsive/applink.css
 *  Description : 모바일 앱 링크 관련 페이지 스타일
 *  Page : /play-mobile/*
 *  Selector : .page-applink
 */

/* common */
:root {
    --top-head-height: 157px;
}
.layout-inner {width: 1000px;}
.page-applink {padding-top: 0; background: #e8eaf4;}

/* section-top-head */
.section-top-head {height: var(--top-head-height); background: url(../../images/applink/bg_top_head.jpg) center no-repeat; background-size: cover;}
.section-top-head .layout-inner {display: grid; align-items: center;}
.section-top-head .btn-play {justify-self: end; width: 300px; height: 95px; background: url(../../images/applink/btn_play_off.png) center no-repeat; background-size: cover;}
.section-top-head .btn-play:hover {background-image: url(../../images/applink/btn_play_on.png);}

/* .section-applink */
.section-applink {min-height: calc(100vh - (var(--top-head-height) + var(--old-footer-maxheight))); padding: 50px 0; box-sizing: border-box;}
.section-applink * {color: #222;}
.section-applink .section-title {margin-bottom: 20px; font-family: var(--ft-family_Poppins-600); font-size: 34px;}
.section-applink .applink-list {display: flex;}
.section-applink .applink-list .list-item {position: relative; width: 320px; height: 422px; padding-top: 150px; margin-right: 20px; background: #fff; box-sizing: border-box; background-size: cover; background-repeat: no-repeat;}
.section-applink .applink-list .list-item:last-child {margin-right: 0;}
.section-applink .applink-list .list-item .top-area {display: flex; align-items: center; position: absolute; left: 0; top: 0; width: 100%; padding: 20px; box-sizing: border-box;}
.section-applink .applink-list .list-item img {width: 100%;}
.section-applink .applink-list .list-item .qr-img {width: 105px;}
.section-applink .applink-list .list-item .info-box {padding-left: 5px;}
.section-applink .applink-list .list-item .info-box .title {padding-left: 10px; margin-bottom: 5px; font-family: var(--ft-family_Poppins-600); font-size: 20px;}
.section-applink .applink-list .list-item .info-box .btn-download {width: 140px;}

/* 
 *  [해상도 769px ~ 1024px]
 *  - 낮은 해상도의 PC
 *  - 태블릿 가로모드
 */
@media all and (max-width:1024px) {
    /* common */
    :root {
        --min-width: auto;
        --top-head-height: 14vw;
    }
    .layout-inner {width: 90%;}

    /* section-top-head */
    .section-top-head .btn-play {width: 29.30vw; height: 9.277vw;}
    .section-top-head .btn-play:hover {background-image: url(../../images/applink/btn_play_off.png)}

    /* .section-applink */
    .section-applink {padding: 4.88vw 0;}
    .section-applink .section-title {margin-bottom: 1.953vw; font-size: 3.32vw;}
    .section-applink .applink-list .list-item {width: 31.25vw; height: 41.211vw; padding-top: 14.648vw; margin-right: 1.953vw;}
    .section-applink .applink-list .list-item .top-area {padding: 1.953vw;}
    .section-applink .applink-list .list-item .qr-img {width: 10.254vw;}
    .section-applink .applink-list .list-item .info-box {padding-left: 0.488vw;}
    .section-applink .applink-list .list-item .info-box .title {padding-left: 0.977vw; margin-bottom: 0.488vw; font-size: 1.953vw;}
    .section-applink .applink-list .list-item .info-box .btn-download {width: 13.671vw;}
}
 
/* 
 *  [해상도 481px ~ 768px]
 *  - 모바일 가로모드
 *  - 태블릿 세로모드
 */
@media all and (max-width:768px) {
    /* common */
    :root {
        --top-head-height: 14.5vw;
    }
    .layout-inner {width: 94%;}
}

/* 
 *  [해상도 ~ 480px]
 *  - 모바일 (최소 360px까지)
 */
@media all and (max-width:480px) {
    .section-applink {min-height: auto;}
    .section-applink .applink-list {flex-wrap: wrap;}
    .section-applink .applink-list .list-item {width: 100%; aspect-ratio: 320 / 422; padding-top: calc(422 / 320 * 100%); margin-right: 0; margin-bottom: 2.667vw;}
    .section-applink .applink-list .list-item:last-child {margin-bottom: 0;}
    .section-applink .applink-list .list-item .top-area {padding: 9vw 7vw;}
    .section-applink .applink-list .list-item .qr-img {width: 27vw;}
    .section-applink .applink-list .list-item .info-box {padding-left: 3vw;}
    .section-applink .applink-list .list-item .info-box .title {padding-left: 0; margin-bottom: 2vw; font-size: 6vw; text-align: center;}
    .section-applink .applink-list .list-item .info-box .btn-download {width: 42vw;}
}
