@charset "UTF-8";
/*
 *  File Name : /ui_resource/css/responsive/common/layout.css
 *  Description : [공통] 레이아웃 스타일
 *  ====================================================================================================================
 *  1) 헤더 & 푸터 
 *  : [ account / store / terms / support ] 제외한 모든 페이지
 *  2) 콘텐츠 
 *  : [ main / account / store / terms / support ] 제외한 모든 페이지
 *  ====================================================================================================================
 */

/* header (z-index : menu(햄버거버튼 102) => layer(101) => header-fixed(100) => layer dimmed(99) => header)
 * header-wrap
 * ㄴ [1depth] header-fixed, button-menu (모바일)
 * ㄴ [2depth] header
 * (참고) 기존엔 header-fixed(100) 였으나, 레이어 딤드 처리가 헤더 가려지게 바뀌면서 header-fixed(99) 로 변경 (추후 수정될 경우 고려해 구조는 유지함)
 */
.header-wrap .button-menu {display: none;}
.header-wrap .header-fixed {/* z-index: 100; */ z-index: 99; position: fixed; top: 0; width: 100%;}
.header-wrap .header {display: flex; justify-content: space-between; align-items: center; height: var(--header-height); background: #240075; border-bottom: 4px solid #1398FF; box-sizing: border-box;}
.header-wrap .header .layout-al-left,
.header-wrap .header .layout-al-right {display: flex; align-items: center; height: 100%;}
.header-wrap .header .logo > a {display: flex; align-items: center; height: 100%;}
.header-wrap .header .logo img {width: 60px;}
.header-wrap .header .gnb {height: 100%; margin-left: 120px;}
.header-wrap .header .gnb .gnb-menu {display: flex; height: 100%;}
.header-wrap .header .gnb .gnb-item {margin: 0 1px;}
.header-wrap .header .gnb .gnb-item > a {display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; height: 100%; padding: 0 20px; color: #fff; font-family: var(--ft-family_Poppins-300); font-size: 20px; transition: background-color .2s ease-in-out;}
.header-wrap .header .gnb .gnb-item > a::before {content: attr(title); display: block; height: 0px; visibility: hidden; font-family: var(--ft-family_Poppins-600);}
.header-wrap .header .gnb .gnb-item > a::after {background-size: cover;}
.header-wrap .header .gnb .gnb-item.has-depth > a::after,
.header-wrap .header .gnb .gnb-item.new-tab > a::after {content: ""; display: inline-block; position: absolute;}
.header-wrap .header .gnb .gnb-item.has-depth > a {padding-right: 42px;}
.header-wrap .header .gnb .gnb-item.has-depth > a::after {right: 20px; width: 12px; height: 6px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='6' viewBox='0 0 12 6' fill='none'%3E%3Cpath d='M12 0L0 0L5.73913 6L12 0Z' fill='white'/%3E%3C/svg%3E");}
.header-wrap .header .gnb .gnb-item.new-tab > a {padding-right: 38px;}
.header-wrap .header .gnb .gnb-item.new-tab > a::after {right: 10px; width: 24px; height: 24px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M10.768 5.25H13.232C14.045 5.25 14.701 5.25 15.232 5.293C15.778 5.338 16.258 5.433 16.702 5.659C17.4081 6.01837 17.9822 6.59214 18.342 7.298C18.568 7.742 18.662 8.222 18.707 8.768C18.75 9.299 18.75 9.955 18.75 10.768V13.232C18.75 14.045 18.75 14.701 18.707 15.232C18.662 15.778 18.567 16.258 18.341 16.702C17.9816 17.4081 17.4079 17.9822 16.702 18.342C16.258 18.568 15.778 18.662 15.232 18.707C14.701 18.75 14.045 18.75 13.232 18.75H9.622C7.617 18.75 6.612 16.326 8.03 14.909L12.44 10.5H10.875C10.6761 10.5 10.4853 10.421 10.3447 10.2803C10.204 10.1397 10.125 9.94891 10.125 9.75C10.125 9.55109 10.204 9.36032 10.3447 9.21967C10.4853 9.07902 10.6761 9 10.875 9H14.25C14.4489 9 14.6397 9.07902 14.7803 9.21967C14.921 9.36032 15 9.55109 15 9.75V13.125C15 13.3239 14.921 13.5147 14.7803 13.6553C14.6397 13.796 14.4489 13.875 14.25 13.875C14.0511 13.875 13.8603 13.796 13.7197 13.6553C13.579 13.5147 13.5 13.3239 13.5 13.125V11.561L9.091 15.97C8.98624 16.0749 8.91492 16.2085 8.88603 16.3539C8.85715 16.4993 8.872 16.65 8.92871 16.7869C8.98542 16.9239 9.08145 17.041 9.20467 17.1234C9.32788 17.2058 9.47276 17.2499 9.621 17.25H13.2C14.053 17.25 14.647 17.25 15.11 17.212C15.563 17.174 15.824 17.105 16.022 17.005C16.445 16.789 16.789 16.445 17.005 16.022C17.105 15.824 17.175 15.563 17.212 15.109C17.249 14.647 17.25 14.053 17.25 13.2V10.8C17.25 9.948 17.25 9.353 17.212 8.89C17.174 8.437 17.105 8.176 17.005 7.979C16.7895 7.55541 16.4454 7.21095 16.022 6.995C15.824 6.895 15.563 6.825 15.109 6.788C14.647 6.751 14.053 6.75 13.2 6.75H10.8C9.948 6.75 9.353 6.75 8.89 6.788C8.437 6.825 8.176 6.895 7.979 6.995C7.55526 7.21078 7.21078 7.55526 6.995 7.979C6.895 8.176 6.825 8.437 6.788 8.891C6.751 9.353 6.75 9.948 6.75 10.8V13.5C6.75 13.6989 6.67098 13.8897 6.53033 14.0303C6.38968 14.171 6.19891 14.25 6 14.25C5.80109 14.25 5.61032 14.171 5.46967 14.0303C5.32902 13.8897 5.25 13.6989 5.25 13.5V10.768C5.25 9.955 5.25 9.299 5.293 8.768C5.338 8.222 5.433 7.742 5.659 7.298C6.01837 6.59192 6.59214 6.0178 7.298 5.658C7.742 5.432 8.222 5.338 8.768 5.293C9.299 5.25 9.955 5.25 10.768 5.25Z' fill='white'/%3E%3C/svg%3E");}
.header-wrap .header .gnb .gnb-item.active > a {background: #1398FF;}
.header-wrap .header .lnb {opacity: 0; visibility: hidden; z-index: -1; position: absolute; left: 0; top: var(--header-height); width: 100%; height: var(--lnb-height); background: #240075; transition: all .4s ease-in-out; transform: translateY(-100%);}
.header-wrap .header .lnb .lnb-menu {display: flex; align-items: center; height: 100%; padding: var(--inner-padding); margin-left: 130px;}
.header-wrap .header .lnb .lnb-item {display: flex; height: 100%;}
.header-wrap .header .lnb .lnb-item > a {display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0 20px; color: #fff; font-family: var(--ft-family_Poppins-300); font-size: 20px;}
.header-wrap .header .lnb .lnb-item > a::before {content: attr(title); display: block; height: 0px; visibility: hidden; font-family: var(--ft-family_Poppins-600);}
.header-wrap .header .lnb .lnb-item.active > a {color: #1398FF; font-family: var(--ft-family_Poppins-400);}
.header-wrap .header .gnb .gnb-item.active .lnb {opacity: 1; visibility: visible; transform: translateY(0);}
.header-wrap .header .btn-play {width: 260px; height: 58px; margin-left: 15px;}
.header-wrap .header .btn-play .bg-back,
.header-wrap .header .btn-play .bg-front {height: 54px; border-radius: 30px;}
.header-wrap .header .btn-play .bg-back {top: 4px; box-shadow: none;}
.header-wrap .header .btn-play .front-inner {left: 2px; top: 2px; width: calc(100% - 4px); height: calc(100% - 4px); border-radius: 30px;}
.header-wrap .header .btn-play .front-inner::before,
.header-wrap .header .btn-play .front-inner::after {left: 2px; width: calc(100% - 4px); height: calc(50% - 2px);}
.header-wrap .header .btn-play .front-inner::before {top: 2px; border-radius: 300px 300px 0 0; }
.header-wrap .header .btn-play .front-inner::after {bottom: 2px; border-radius: 0 0 300px 300px;}
.header-wrap .header .btn-play .txt-area .txt {font-size: 32px;}
.header-wrap .header .btn-play .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;}

/* footer */
.footer-wrap {background:#240075;}
.footer-wrap .footer {display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 50px 0 90px;}
.footer-wrap .footer * {color: #fff; font-family: var(--ft-family_Poppins-300); letter-spacing: 0;}
.footer-wrap .footer .logo {display: flex; flex-direction: column; align-items: center;}
.footer-wrap .footer .logo .link {display: inline-block; width: 120px; font-size: 0;}
.footer-wrap .footer .logo .link img {width: 100%;}
.footer-wrap .footer .inner {display: flex; flex-direction: column; align-items: center;}
.footer-wrap .footer .inner > * {margin-top: 50px;}
.footer-wrap .footer .site-links {display: flex;}
.footer-wrap .footer .site-links > * {display: inline-block; position: relative; padding: 0 20px; color: #DBD4EC; font-size: 24px;}
.footer-wrap .footer .site-links > *::after {content: ""; display: inline-block; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 2px; height: 17px; background: #D5D5D5;}
.footer-wrap .footer .site-links > *:last-child::after {display: none; width: 0;}
.footer-wrap .footer .download-links {display: flex;}
.footer-wrap .footer .download-links [class*=btn-item] {height: 82px; margin-right: 20px; background-size: contain; background-repeat: no-repeat;}
.footer-wrap .footer .download-links [class*=btn-item]:last-child {margin-right: 0;}
.footer-wrap .footer .download-links .btn-item-google {width: 276px; background-image: url(../../../images/common/btn_app-google.png);}
.footer-wrap .footer .download-links .btn-item-apple {width: 245px; background-image: url(../../../images/common/btn_app-apple.png);}
.footer-wrap .footer .download-links .btn-item-amazon {width: 281px; background-image: url(../../../images/common/btn_app-amazon.png);}
.footer-wrap .footer .sns-btns-comm [class*=btn-item] {width: 40px; height: 40px; margin: 0 25px;}
.footer-wrap .foot-bottom {display: flex; justify-content: center; align-items: center; height: var(--footbtm-height); background: #1A0057; box-sizing: border-box;}
.footer-wrap .foot-bottom .copyright {color: #DBD4EC; font-family: var(--ft-family_Poppins-200); font-size: 20px;}

/* footer : footer-type-old (구버전 - 앱링크, 게임) : 인게임의 경우 태블릿부터 hide */
.footer-type-old {overflow: hidden; padding: 50px 0; background: #1A0057;}
.footer-type-old * {font-family: var(--ft-family_Poppins-400); letter-spacing: .5px;}
.footer-type-old .footer {display: flex; justify-content: center; align-items: end; padding-bottom: 20px; box-sizing: border-box;}
.footer-type-old .footer .site-links {font-size: 0;}
.footer-type-old .footer .site-links > * {display: inline-block; position: relative; padding: 0 20px; color: #fff; font-size: 15px;}
.footer-type-old .footer .site-links > *::after {content: ""; display: inline-block; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 2px; height: 10px; background: #3c5eb4;}
.footer-type-old .footer .site-links > *:last-child::after {display: none; width: 0;}
.footer-type-old .foot-bottom {height: var(--old-footer-btm-height); text-align: center;}
.footer-type-old .foot-bottom * {color: #DBD4EC; font-size: 14px;}

/* contents : common */
.contents-wrap {overflow: hidden; padding-top: calc(var(--header-height) + var(--navi-height));}
.header-wrap.lnb-active + .contents-wrap {padding-top: calc(var(--header-height) + var(--navi-height) + var(--lnb-height));}

/* section-top-banner (top-banner) */
.section-top-banner {height: 420px; background-size: cover; background-position: top center;}

/* section-main-contents (main-contents) */
.section-main-contents {padding: 100px 0 120px; background: linear-gradient(180deg, #240075 40%, #1A0057 80%);}
.section-main-contents .comm-title-wrap .title,
.section-main-contents .comm-content-wrap > .title {color: #fff; font-family: var(--ft-family_Poppins-600); font-size: 60px;}
.section-main-contents .comm-title-wrap .description,
.section-main-contents .comm-content-wrap > .content {margin-top: 25px; color: #DBD4EC; font-family: var(--ft-family_Poppins-300); font-size: 24px; line-height: 1.4;}
.section-main-contents .comm-title-wrap {margin-bottom: 40px;}

/* section-btm-banner (btm-banner) */
.section-btm-banner {height: 464px; padding: 0 !important; background: url(../../../images/common/bg_section_banner.jpg) center center no-repeat; background-size: cover;}
.section-btm-banner .inner-box {display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 1; position: absolute; right: 0; width: 770px; height: 100%;}
.section-btm-banner .inner-box .section-title {margin-bottom: 30px; color: #fff; font-family: var(--ft-family_Poppins-700); font-size: 60px; text-align: center; letter-spacing: -.5px; text-shadow: 0px 6px 10px rgba(0, 0, 0, 0.80); line-height: 1;}
.section-btm-banner .img-character {position: absolute;}
.section-btm-banner .img-character img {width: 100%;}

/* section-faq-comm */
.section-faq-comm {padding: 100px 0 120px !important; background: #1A0057 url(../../../images/common/bg_faq.jpg) bottom center repeat-x !important;}
.section-faq-comm .layout-inner {display: flex; flex-direction: column; justify-content: center; align-items: center;}
.section-faq-comm .section-title {margin-bottom: 50px !important; color: #fff; font-family: var(--ft-family_Poppins-600); font-size: 60px !important;}
.section-faq-comm .section-content {width: 100%;}
.section-faq-comm .faq-list .list-item,
.section-faq-comm .faq-list .list-item .content-area {border-top: 2px solid #1398FF;}
.section-faq-comm .faq-list .list-item > * {letter-spacing: 0; line-height: 1;}
.section-faq-comm .faq-list .list-item .btn-faq-toggle {display: flex; align-items: center; position: relative; width: 100%; min-height: 90px; padding: 20px 30px 20px 0;}
.section-faq-comm .faq-list .list-item .btn-faq-toggle::after {content: ""; display: inline-block; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 30px; height: 18px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='21' viewBox='0 0 34 21' fill='none'%3E%3Cpath d='M32 18.8501L17 2.8501L2 18.8501' stroke='%231398FF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: cover;}
.section-faq-comm .faq-list .list-item .btn-faq-toggle .txt {line-height: 1.4; color: #fff; font-family: var(--ft-family_Poppins-500); font-size: 34px; letter-spacing: .5px; text-align: left;}
.section-faq-comm .faq-list .list-item .content-area {display: none; padding: 25px 0;}
.section-faq-comm .faq-list .list-item .content-area,
.section-faq-comm .faq-list .list-item .content-area * {color: #DBD4EC; font-family: var(--ft-family_Poppins-300); font-size: 24px; line-height: 1.4;}
.section-faq-comm .faq-list .list-item .noti {padding-left: 15px; text-indent: -15px;}
.section-faq-comm .faq-list .list-item .link {text-decoration: underline;}
.section-faq-comm .faq-list .list-item .type-list li {padding-left: 25px; text-indent: -25px;}
.section-faq-comm .faq-list .list-item.active .btn-faq-toggle::after {transform: translateY(-50%) rotate(180deg);}
.section-faq-comm .faq-list .list-item.active .content-area {display: block;}
.section-faq-comm .faq-list .list-item:last-child {border-bottom: 3px solid #1398FF;}

/* section-faq-comm: default-type */
.section-faq-comm.default-type .faq-list .list-item .btn-faq-toggle {padding-right: 0; cursor: default;}
.section-faq-comm.default-type .faq-list .list-item .btn-faq-toggle::after {display: none;}
.section-faq-comm.default-type .faq-list .list-item .content-area {display: block;}

/* pagination-comm */
.pagination-comm {display: flex; justify-content: center; align-items: center; padding-top: 30px;}
.pagination-comm [class^=btn-] {display: flex; align-items: center; position: relative; color: #fff; font-family: var(--ft-family_Poppins-300); font-size: 24px; letter-spacing: .5px;}
.pagination-comm [class^=btn-]::before {content: ""; display: inline-block; width: 20px; height: 20px; position: absolute; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M13.75 2.5L6.25 10L13.75 17.5' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-size: cover;}
.pagination-comm [class^=btn-].disabled {pointer-events: none; opacity: .6;}
.pagination-comm .btn-prev {padding-left: 25px;}
.pagination-comm .btn-prev::before {left: 0;}
.pagination-comm .btn-next {padding-right: 25px;}
.pagination-comm .btn-next::before {right: 0; transform: rotate(180deg);}
.pagination-comm .paging-area {display: flex; margin: 0 10px;}
.pagination-comm .paging-area .paging-item {width: 60px; height: 60px; margin: 0 10px; background: #3811AE; border-radius: 10px;}
.pagination-comm .paging-area .paging-item > a {display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; color: #fff; font-family: var(--ft-family_Poppins-400); font-size: 24px;}
.pagination-comm .paging-area .paging-item.active {background: #1398FF;}

/* sub-newtab */
.sub-newtab .header-wrap .header .layout-inner {max-width: calc(100% - (var(--inner-padding-side)* 3) ); height: var(--header-height);}
.sub-newtab .header-wrap .header .logo {position: absolute; left: var(--inner-padding-side); top: 50%; transform: translateY(-50%);}
.sub-newtab .header-wrap .header .gnb {margin: 0 auto !important;}
.sub-newtab .contents-wrap > [class^=section-] {min-height: calc(100vh - (var(--header-height) + var(--footbtm-height))); box-sizing: border-box; background: #fff;}
.sub-newtab .contents-wrap > [class^=section-] .section-title {margin-bottom: 50px; color: #240075; font-family: var(--ft-family_Poppins-700); font-size: 60px; text-align: center;}

/* 
 * [해상도 1921px ~]
 * - 1921px 이상부터는 헤더 inner 영역 고정 
 */
@media (min-width: 1921px) { 
	.header-wrap .header {padding: 0 calc( calc(100% - 1920px) / 2);}
}

/* 
 *  [해상도 1400px]
 *  - 컨텐츠 inner: 1400px 기준
 *  - 1920 기준 / DPR 1 / 16.6
 */
@media all and (max-width:1400px) {
    /* header */
    .header-wrap .header {border-width: 0.241vw;}
    .header-wrap .header .logo img {width: 3.614vw;}
    .header-wrap .header .gnb {margin-left: 7.229vw;}
    .header-wrap .header .gnb .gnb-item {margin: 0 0.06vw;}
    .header-wrap .header .gnb .gnb-item > a {padding: 0 1.205vw; font-size: 1.205vw;}
    .header-wrap .header .gnb .gnb-item.has-depth > a {padding-right: 2.53vw;}
    .header-wrap .header .gnb .gnb-item.has-depth > a::after {right: 1.205vw; width: 0.723vw; height: 0.361vw;}
    .header-wrap .header .gnb .gnb-item.new-tab > a {padding-right: 2.289vw;}
    .header-wrap .header .gnb .gnb-item.new-tab > a::after {right: 0.602vw; width: 1.446vw; height: 1.446vw;}
    .header-wrap .header .lnb .lnb-menu {margin-left: 7.831vw;}
    .header-wrap .header .lnb .lnb-item > a {padding: 0 1.205vw; font-size: 1.205vw;}
    .header-wrap .header .btn-play {width: 15.663vw; height: 3.494vw; margin-left: 0.904vw;}
    .header-wrap .header .btn-play .bg-back,
    .header-wrap .header .btn-play .bg-front {height: 3.253vw; border-radius: 1.807vw;}
    .header-wrap .header .btn-play .bg-back {top: 0.241vw;}
    .header-wrap .header .btn-play .front-inner {left: 0.120vw; top: 0.120vw; width: calc(100% - 0.241vw); height: calc(100% - 0.241vw); border-radius: 1.807vw;}
    .header-wrap .header .btn-play .front-inner::before,
    .header-wrap .header .btn-play .front-inner::after {left: 0.120vw; width: calc(100% - 0.241vw); height: calc(50% - 0.120vw);}
    .header-wrap .header .btn-play .front-inner::before {top: 0.120vw; border-radius: 18.072vw 18.072vw 0 0; }
    .header-wrap .header .btn-play .front-inner::after {bottom: 0.120vw; border-radius: 0 0 18.072vw 18.072vw;}
    .header-wrap .header .btn-play .txt-area .txt {font-size: 1.928vw;}
    .header-wrap .header .btn-play .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;}
    
    /* footer */
    .footer-wrap .footer {padding: 3.012vw 0 5.422vw;}
    .footer-wrap .footer .logo .link {width: 7.229vw;}
    .footer-wrap .footer .inner > * {margin-top: 3.012vw;}
    .footer-wrap .footer .site-links > * {padding: 0 1.205vw; font-size: 1.446vw;}
    .footer-wrap .footer .site-links > *::after {width: 0.120vw; height: 1.024vw;}
    .footer-wrap .footer .download-links [class*=btn-item] {height: 4.94vw; margin-right: 1.205vw;}
    .footer-wrap .footer .download-links .btn-item-google {width: 16.627vw;}
    .footer-wrap .footer .download-links .btn-item-apple {width: 14.759vw;}
    .footer-wrap .footer .download-links .btn-item-amazon {width: 16.928vw;}
    .footer-wrap .footer .sns-btns-comm [class*=btn-item] {width: 2.41vw; height: 2.41vw; margin: 0 1.506vw;}
    .footer-wrap .foot-bottom .copyright {font-size: 1.205vw;}
    
    /* section-top-banner (top-banner) */
    .section-top-banner {height: 25.301vw;}

    /* section-main-contents (main-contents) */
    .section-main-contents {padding: 6.024vw 0 7.229vw;}
    .section-main-contents .comm-title-wrap .title,
    .section-main-contents .comm-content-wrap > .title {font-size: 3.614vw;}
    .section-main-contents .comm-title-wrap .description,
    .section-main-contents .comm-content-wrap > .content {margin-top: 1.506vw; font-size: 1.446vw;}
    .section-main-contents .comm-title-wrap {margin-bottom: 2.41vw;}

    /* section-btm-banner (btm-banner) */
    .section-btm-banner {height: 27.952vw;}
    .section-btm-banner .inner-box {width: 46.386vw;}
    .section-btm-banner .inner-box .section-title {margin-bottom: 1.807vw; font-size: 3.614vw; letter-spacing: -0.030vw; text-shadow: 0 0.361vw 0.602vw rgba(0, 0, 0, 0.80);}

    /* section-faq-comm */
    .section-faq-comm {padding: 6.024vw 0 7.229vw !important;}
    .section-faq-comm .section-title {margin-bottom: 3.012vw !important; font-size: 3.614vw !important;}
    .section-faq-comm .faq-list .list-item,
    .section-faq-comm .faq-list .list-item .content-area {border-width: 0.120vw;}
    .section-faq-comm .faq-list .list-item .btn-faq-toggle {min-height: 5.422vw; padding: 1.205vw 1.807vw 1.205vw 0;}
    .section-faq-comm .faq-list .list-item .btn-faq-toggle::after {width: 1.807vw; height: 1.084vw;}
    .section-faq-comm .faq-list .list-item .btn-faq-toggle .txt {font-size: 2.048vw; letter-spacing: 0.030vw;}
    .section-faq-comm .faq-list .list-item .content-area {padding: 1.506vw 0;}
    .section-faq-comm .faq-list .list-item .content-area,
    .section-faq-comm .faq-list .list-item .content-area * {font-size: 1.446vw;}
    .section-faq-comm .faq-list .list-item .noti {padding-left: 0.904vw; text-indent: -0.904vw;}
    .section-faq-comm .faq-list .list-item .type-list li {padding-left: 1.506vw; text-indent: -1.506vw;}
    .section-faq-comm .faq-list .list-item:last-child {border-width: 0.181vw;}

    /* pagination-comm */
    .pagination-comm {padding-top: 1.807vw;}
    .pagination-comm [class^=btn-] {font-size: 1.446vw; letter-spacing: 0.030vw;}
    .pagination-comm [class^=btn-]::before {width: 1.205vw; height: 1.205vw;}
    .pagination-comm .btn-prev {padding-left: 1.506vw;}
    .pagination-comm .btn-next {padding-right: 1.506vw;}
    .pagination-comm .paging-area {margin: 0 0.602vw;}
    .pagination-comm .paging-area .paging-item {width: 3.614vw; height: 3.614vw; margin: 0 0.602vw; border-radius: 0.602vw;}
    .pagination-comm .paging-area .paging-item > a {font-size: 1.446vw;}

    /* sub-newtab */
    .sub-newtab .contents-wrap > [class^=section-] {padding: 4.819vw 0;}
    .sub-newtab .contents-wrap > [class^=section-] .section-title {margin-bottom: 3.012vw; font-size: 3.615vw;}
}

/* 
 *  [해상도 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) {
    /* header */
	.header-wrap .button-menu {display: block; z-index: 102; position: fixed; left: 0; top: 0; padding: var(--inner-padding); height: var(--header-height);}
    .header-wrap .button-menu .menu {display: flex; flex-direction: column; justify-content: space-between; width: 4.167vw; height: 3.385vw;}
    .header-wrap .button-menu .menu-item {display: block; width: 100%; height: 0.521vw; background: #fff; border-radius: 1.953vw; transition: all 0.5s ease;}
    .header-wrap .button-menu.active .menu .menu-item:nth-child(1) {transform: translateY(calc((3.385vw - 0.521vw) / 2)) rotate(45deg);}
    .header-wrap .button-menu.active .menu .menu-item:nth-child(2) {opacity: 0;}
    .header-wrap .button-menu.active .menu .menu-item:nth-child(3) {transform: translateY(calc(-1 * (3.385vw - 0.521vw) / 2)) rotate(-45deg);}   
    .header-wrap .button-menu.al-r {left: initial; right: 0;}    
    .header-wrap .header {border-width: 0.260vw;}
    .header-wrap .header .logo img {width: 5.859vw;}
    .header-wrap .header .gnb,
    .header-wrap .header .layout-al-right {display: none;}

    /* footer */
    .footer-wrap .footer {padding: 3.255vw 0 5.859vw;}
    .footer-wrap .footer .logo .link {width: 7.8125vw;}
    .footer-wrap .footer .inner > * {margin-top: 3.255vw;}
    .footer-wrap .footer .site-links > * {font-size: 2.214vw;}
    .footer-wrap .footer .site-links > *::after {width: 0.15vw; height: 1.8vw;}
    .footer-wrap .footer .download-links [class*=btn-item] {margin-right: 1.302vw;}
    .footer-wrap .footer .sns-btns-comm [class*=btn-item] {width: 5.208vw; height: 5.208vw; margin: 0 1.953vw;}
    .footer-wrap .foot-bottom .copyright {font-size: 1.5625vw;}
   
    /* footer : footer-type-old (구버전 - 앱링크, 게임) : 인게임의 경우 태블릿부터 hide */
    .footer-type-old {padding: 0; background: #240075;}
    .footer-type-old .footer {padding: 4vw 0;}
    .footer-type-old .footer .site-links > * {display: block; padding: 0; margin-bottom: 3vw; font-size: 2vw; text-align: center;}
    .footer-type-old .footer .site-links > *:last-child {margin-bottom: 0;}
    .footer-type-old .footer .site-links > *::after {display: none;}
    .footer-type-old .foot-bottom {display: flex; justify-content: center; align-items: center; padding: 1vw 0; background: #1A0057;}
    .footer-type-old .foot-bottom * {font-size: 1.6vw;}
        
    /* section-top-banner (top-banner) */
    .section-top-banner {height: 27.344vw;}

    /* section-main-contents (main-contents) */
    .section-main-contents {padding: 6.510vw 0 7.813vw;}
    .section-main-contents .comm-title-wrap .title,
    .section-main-contents .comm-content-wrap > .title {font-size: 3.906vw;}
    .section-main-contents .comm-title-wrap .description,
    .section-main-contents .comm-content-wrap > .content {margin-top: 2.604vw; font-size: 1.5625vw;}
    .section-main-contents .comm-title-wrap {margin-bottom: 2.41vw;}

    /* section-btm-banner (btm-banner) */
    .section-btm-banner {height: 30.208vw;}
    .section-btm-banner .inner-box {width: 57.943vw;}
    .section-btm-banner .inner-box .section-title {margin-bottom: 1.302vw; font-size: 3.90625vw;}

    /* section-faq-comm */
    .section-faq-comm {padding: 5.208vw 0 8.464vw !important;}
    .section-faq-comm .layout-inner {width: 74.74vw;}
    .section-faq-comm .section-title {margin-bottom: 2.604vw !important; font-size: 3.906vw !important;}
    .section-faq-comm .faq-list .list-item,
    .section-faq-comm .faq-list .list-item .content-area {border-width: 0.130vw;}
    .section-faq-comm .faq-list .list-item .btn-faq-toggle {min-height: 5.599vw; padding: 0.260vw 2.214vw 0.260vw 0;}
    .section-faq-comm .faq-list .list-item .btn-faq-toggle::after {width: 2.214vw; height: 1.302vw;}
    .section-faq-comm .faq-list .list-item .btn-faq-toggle .txt {font-size: 2.214vw;}
    .section-faq-comm .faq-list .list-item .content-area {padding: 1.302vw 0;}
    .section-faq-comm .faq-list .list-item .content-area,
    .section-faq-comm .faq-list .list-item .content-area * {font-size: 1.5625vw;}
    .section-faq-comm .faq-list .list-item:last-child {border-width: 0.130vw;}

    /* pagination-comm */
    .pagination-comm {padding-top: 1.953vw;}
    .pagination-comm [class^=btn-] {font-size: 2.214vw;}
    .pagination-comm [class^=btn-]::before {width: 1.693vw; height: 1.693vw;}
    .pagination-comm .btn-prev {padding-left: 2.214vw;}
    .pagination-comm .btn-next {padding-right: 2.214vw;}
    .pagination-comm .paging-area {margin: 0 1.302vw;}
    .pagination-comm .paging-area .paging-item {width: 5.208vw; height: 5.208vw; margin: 0 1.302vw; border-radius: 1.302vw;}
    .pagination-comm .paging-area .paging-item > a {font-size: 2.214vw;}

    /* sub-newtab */
    .sub-newtab .contents-wrap > [class^=section-] {padding: 5.208vw 0 8.464vw;}
    .sub-newtab .contents-wrap > [class^=section-] .section-title {margin-bottom: 3.255vw; font-size: 3.906vw;}
}

/* 
 *  [해상도 ~ 480px]
 *  - 모바일 (최소 360px까지)
 *  - 360 기준 / DPR 3 / 3.6
 *  - 모바일 ui 적용 (mode-mobile)
 */
@media all and (max-width:480px) {
    /* header */
    .header-wrap .header-fixed {z-index: 102;}
    .header-wrap .button-menu .menu {width: 8.519vw; height: 6.852vw;}
    .header-wrap .button-menu .menu-item {height: 1vw; border-radius: 2.778vw;}
    .header-wrap .button-menu.active .menu .menu-item:nth-child(1) {transform: translateY(2.8705vw) rotate(45deg);}
    .header-wrap .button-menu.active .menu .menu-item:nth-child(3) {transform: translateY(-2.8705vw) rotate(-45deg);}   
    .header-wrap .header {border-width: 0.556vw;}
    .header-wrap .header .logo img {width: 10.741vw;}

    /* footer */
    .footer-wrap .footer {padding: 9.259vw 0 11.111vw;}
    .footer-wrap .footer .logo .link {width: 20vw;}
    .footer-wrap .footer .inner > * {margin-top: 7.407vw;}
    .footer-wrap .footer .site-links {flex-direction: column; align-items: center;}
    .footer-wrap .footer .site-links > * {display: block; margin-top: 5.556vw; font-size: 6.667vw;}
    .footer-wrap .footer .site-links > *::after {display: none;}
    .footer-wrap .footer .site-links > *:first-child {margin-top: 0;}
    .footer-wrap .footer .download-links [class*=btn-item] {height: 8.797vw; margin-right: 2.222vw;}
    .footer-wrap .footer .download-links .btn-item-google {width: 29.63vw;}
    .footer-wrap .footer .download-links .btn-item-apple {width: 26.111vw;}
    .footer-wrap .footer .download-links .btn-item-amazon {width: 30.185vw;}
    .footer-wrap .footer .sns-btns-comm [class*=btn-item] {width: 8.519vw; height: 8.519vw; margin: 0 4.63vw;}
    .footer-wrap .foot-bottom .copyright {font-size: 2.778vw;}

    /* footer : footer-type-old (구버전 - 앱링크, 게임) : 인게임의 경우 태블릿부터 hide */
    .footer-type-old .footer {padding: 8vw 0;}
    .footer-type-old .footer .site-links > * {margin-bottom: 6vw; font-size: 4vw;}
    .footer-type-old .foot-bottom {padding: 3.2vw 0;}
    .footer-type-old .foot-bottom * {font-size: 2.8vw;}
        
    /* section-top-banner (top-banner) */
    .section-top-banner {height: 46.296vw;}

    /* section-main-contents (main-contents) */
    .section-main-contents {padding: 9.259vw 0 11.111vw;}
    .section-main-contents .comm-title-wrap .title,
    .section-main-contents .comm-content-wrap > .title {font-size: 7.407vw;}
    .section-main-contents .comm-title-wrap .description,
    .section-main-contents .comm-content-wrap > .content {margin-top: 4.167vw; font-size: 3.704vw;}
    .section-main-contents .comm-title-wrap {margin-bottom: 2.41vw;}

    /* section-btm-banner (btm-banner) */
    .section-btm-banner {height: 50.926vw;}
    .section-btm-banner .inner-box {width: 55.556vw;}
    .section-btm-banner .inner-box .section-title {margin-bottom: 4.63vw; font-size: 7.407vw;}
    .section-btm-banner .btn-play {width: 46.296vw; height: 10.926vw;}
    .section-btm-banner .btn-play .bg-back,
    .section-btm-banner .btn-play .bg-front {height: 10.185vw; border-radius: 5.556vw;}
    .section-btm-banner .btn-play .bg-back {top: 0.741vw; box-shadow: 0 0.463vw 0.37vw 0 rgba(0, 0, 0, 0.30);}    
    .section-btm-banner .btn-play .front-inner {left: 0.278vw; top: 0.278vw; width: calc(100% - 0.556vw); height: calc(100% - 0.556vw); border-radius: 5.556vw;}
    .section-btm-banner .btn-play .front-inner::before,
    .section-btm-banner .btn-play .front-inner::after {left: 0.37vw; width: calc(100% - 0.741vw); height: calc(50% - 0.37vw);}
    .section-btm-banner .btn-play .front-inner::before {top: 0.37vw; border-radius: 44.907vw 44.907vw 0.326vw 0.326vw;}
    .section-btm-banner .btn-play .front-inner::after {bottom: 0.37vw; border-radius: 0.326vw 0.326vw 44.907vw 44.907vw;}
    .section-btm-banner .btn-play .txt-area .txt {font-size: 5.556vw;}
    .section-btm-banner .btn-play .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-faq-comm */
    .section-faq-comm {padding: 9.259vw 0 11.111vw !important; background: #1A0057 url(../../../images/common/bg_faq_mo.png) bottom center no-repeat !important; background-size: cover !important;}
    .section-faq-comm .section-title {margin-bottom: 6.481vw !important; font-size: 7.407vw !important;}
    .section-faq-comm .faq-list .list-item,
    .section-faq-comm .faq-list .list-item .content-area {border-width: 0.37vw;}
    .section-faq-comm .faq-list .list-item .btn-faq-toggle {min-height: 10.741vw; padding: 2.778vw 0;}
    .section-faq-comm .faq-list .list-item .btn-faq-toggle::after {display: none; width: 0;}
    .section-faq-comm .faq-list .list-item .btn-faq-toggle .txt {font-size:4.63vw;}
    .section-faq-comm .faq-list .list-item .content-area {display: block !important; padding: 2.778vw 0;}
    .section-faq-comm .faq-list .list-item .content-area,
    .section-faq-comm .faq-list .list-item .content-area * {font-size: 3.704vw;}
    .section-faq-comm .faq-list .list-item:last-child {border-width: 0.37vw;}

    /* pagination-comm */
    .pagination-comm {padding-top: 2.778vw;}
    .pagination-comm [class^=btn-] {font-size: 4.63vw;}
    .pagination-comm [class^=btn-]::before {width: 2.037vw; height: 3.241vw;}
    .pagination-comm .btn-prev {padding-left: 4.815vw;}
    .pagination-comm .btn-next {padding-right: 4.815vw;}
    .pagination-comm .paging-area {margin: 0 2.778vw;}
    .pagination-comm .paging-area .paging-item {width: 11.111vw; height: 11.111vw; margin: 0 2.778vw; border-radius: 1.389vw;}
    .pagination-comm .paging-area .paging-item > a {font-size: 3.704vw;}

    /* sub-newtab */
    .sub-newtab .contents-wrap > [class^=section-] {padding: 9.259vw 0 11.111vw;}
    .sub-newtab .contents-wrap > [class^=section-] .section-title {margin-bottom: 7.407vw; font-size: 7.407vw;}    
}

/* 
 *  [hover 스타일 적용]
 *  - 터치 디바이스 제외
 */
@media (any-hover: hover) and (pointer: fine) {
    /* header */
    .header-wrap .header .gnb .gnb-item:hover > a {background: #1398FF;}
    .header-wrap .header .lnb .lnb-item:hover > a {color: #1398FF; font-family: var(--ft-family_Poppins-400);}
    .header-wrap .header .gnb .gnb-item:hover .lnb {opacity: 1; visibility: visible; transform: translateY(0);}

    /* footer */
    .footer-wrap .footer .site-links > *:hover {color: #1398FF;}

    /* footer : footer-type-old */
    .footer-type-old .footer .site-links > *:hover {color: #1398FF;}

    /* pagination-comm */
    .pagination-comm [class^=btn-]:hover {color: #1398FF;}
    .pagination-comm [class^=btn-]:hover::before {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M13.75 2.5L6.25 10L13.75 17.5' stroke='%231398FF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");}
    .pagination-comm .paging-area .paging-item:hover {background: #1398FF;}
}