/*
 *  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 .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: 0;
    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: 0;
    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(../../gambling/image/btn_play.png) 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(../../gambling/image/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(../../gambling/image/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: 0 6px 10px rgba(0,0,0,.8);
    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(../../gambling/image/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: .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: .195vw;
        height: .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: .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: .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: .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;
    }
}