@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 navigation)
 * header-wrap
 * ㄴ [1depth] header-fixed, button-menu (모바일)
 * ㄴ [2depth] header
 */
/* [str] button-menu 은 현재는 안씀 */
.header-wrap .button-menu {z-index: 102; position: fixed; left: 0; top: 0; padding: 0 15px; height: var(--header-height);}
.header-wrap .button-menu .menu {display: flex; flex-direction: column; justify-content: space-between; width: 38px; height: 24px;}
.header-wrap .button-menu .menu-item {display: block; width: 100%; height: 3px; background: #fff; border-radius: 10px; transition: all 0.5s ease;
}
.header-wrap .button-menu.active .menu .menu-item:nth-child(1) {transform: translateY(10px) 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(-10px) rotate(-45deg);}
.header-wrap .button-menu.active .menu .menu-item {background: #1b9bfe;}
.header-wrap .button-menu.al-r {left: initial; right: 0;}
.header-wrap .button-menu.al-r.active .menu .menu-item {background: #fff;}
/* [end] button-menu 은 현재는 안씀 */
.header-wrap .header-fixed {z-index: 100; 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.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,
.header-wrap .header .gnb .gnb-item:hover > 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: 150px;}
.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 36px; 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,
.header-wrap .header .lnb .lnb-item:hover > a {color: #1398FF; font-family: var(--ft-family_Poppins-500);}
.header-wrap .header .gnb .gnb-item.active .lnb,
.header-wrap .header .gnb .gnb-item:hover .lnb {opacity: 1; visibility: visible; transform: translateY(0);}
.header-wrap .header .btn-play {width: 210px; height: 58px; margin-left: 15px; transition: all 1s linear 0s;}
.header-wrap .header .btn-play::before {content: ""; display: block; width: 100%; height: 100%; background: url(../../../images/common/btn_play.png?ver=2502170001) 0 0 no-repeat; background-size: 210px;}
.header-wrap .header .btn-play:hover::before {background-position-y: -62px;}

/* 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 .site-links > *:hover {color: #1398FF;}
.footer-wrap .footer .download-links {display: flex;}
.footer-wrap .footer .download-links [class*=btn-item] {height: 82px; margin-right: 20px; background: url(../../../images/common/btn_download-app.png) 0 0 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;}
.footer-wrap .footer .download-links .btn-item-apple {width: 245px; background-position-y: -90px;}
.footer-wrap .footer .download-links .btn-item-amazon {width: 281px; background-position-y: -180px;}
.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 (구버전 - 앱링크, 게임) */
.footer-type-old {overflow: hidden; 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; height: var(--old-footer-top-height); 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 .footer .site-links > *:hover {color: #1398FF;}
.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; min-width: var(--min-width); 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: 75px 0 140px; 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: 20px; 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: 760px; */ height: 100%;}
.section-btm-banner .inner-box .section-title {margin-bottom: 20px; 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.1;}
.section-btm-banner .img-character {position: absolute;}
.section-btm-banner .img-character img {width: 100%;}

/* section-faq-comm */
.section-faq-comm {padding: 80px 0 140px !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; width: 1160px;}
.section-faq-comm .section-title {margin-bottom: 40px; font-size: 60px;}
.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 {position: relative; width: 100%; padding: 25px 40px 25px 0; line-height: 1.1; 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 .btn-faq-toggle::after {content: ""; display: inline-block; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 30px; height: 16px; 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 .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.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.visible-last-item {border-bottom: 3px solid #1398FF;}
.section-faq-comm .faq-list .list-item .type-list li {padding-left: 25px; text-indent: -25px;}

/* 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-]: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 [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:hover,
.pagination-comm .paging-area .paging-item.active {background: #1398FF;}

/* sub-newtab */
.sub-newtab .contents-wrap > [class^=section-] {min-height: calc(100vh - (var(--header-height) + var(--footbtm-height))); padding: 80px 0; box-sizing: border-box;}

/* 
 *  [해상도 769px ~ 1024px]
 *  - 낮은 해상도의 PC
 *  - 태블릿 가로모드
 */
@media all and (max-width:1024px) {     
    /* footer : footer-type-old */
    .footer-type-old * {letter-spacing: 0.048vw;}
    .footer-type-old .layout-inner {width: 90%;}
    .footer-type-old .footer {padding-bottom: 1.953vw;}
    .footer-type-old .footer .site-links > * {padding: 0 1.953vw; font-size: 1.464vw;}
    .footer-type-old .footer .site-links > *::after {width: 0.195vw; height: 0.976vw;}
    .footer-type-old .foot-bottom * {font-size: 1.37vw;}
}

/* 
 *  [해상도 481px ~ 768px]
 *  - 모바일 가로모드
 *  - 태블릿 세로모드
 */
@media all and (max-width:768px) {    
    /* header */
    /* [str] button-menu 은 현재는 안씀 */
	.header-wrap .button-menu {padding: var(--inner-padding);}
	.header-wrap .button-menu .menu {width: 10.133vw; height: 6.4vw;}
	.header-wrap .button-menu .menu-item {height: 0.8vw;}
	.header-wrap .button-menu.active .menu .menu-item:nth-child(1) {transform: translateY(2.667vw) rotate(45deg);}
	.header-wrap .button-menu.active .menu .menu-item:nth-child(3) {transform: translateY(-2.667vw) rotate(-45deg);}
    /* [end] button-menu 은 현재는 안씀 */

    /* footer : footer-type-old */
    .footer-type-old * {letter-spacing: 0.065vw;}
    .footer-type-old .layout-inner {width: 94%;}
    .footer-type-old .footer {padding-bottom: 2vw;}
    .footer-type-old .footer .site-links > * {padding: 0 1.4vw; font-size: 1.7vw;}
    .footer-type-old .footer .site-links > *::after {width: 0.26vw; height: 1.302vw;}
    .footer-type-old .foot-bottom * {font-size: 1.6vw;}

    /* section-faq-comm */
    .section-faq-comm .faq-list .list-item .type-list li {padding-left: 3.33vw; text-indent: -3.33vw;}
}


/* 
 *  [해상도 ~ 480px]
 *  - 모바일 (최소 360px까지)
 *  - 모바일 ui 적용 (mode-mobile)
 */
@media all and (max-width:480px) {
    /* header */
    .header-wrap .header .logo img {width: 12vw;}
    
    /* footer : footer-type-old */
    .footer-type-old {background: #240075;}
    .footer-type-old .footer {padding: 8vw 0 7vw;}
    .footer-type-old .footer .site-links > * {display: block; padding: 0; margin-bottom: 5vw; font-size: 4vw; 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; background: #1A0057;}
    .footer-type-old .foot-bottom * {font-size: 2.2vw;}
}