/* 반응형 */
@media (max-width: 1280px) {
    .page_layout{grid-template-columns: 250px 1fr;}
    .search{max-width: 100%; margin-top: 5px; margin-left: 230px; position: relative; z-index: 1; background: none;}
}

@media (max-width: 1024px) {
    .page_layout{grid-template-columns: 1fr;}
    #side_menu {order: 2;width: 100%;}
    #content{order: 1; padding: 20px;}
    .menu_wrap{flex-direction: row; flex-wrap: wrap;}
    .menu{width: calc(50% - 10px);}
}

/* 햄버거 메뉴 기본적으로 숨김 */
.menu_toggle{display: none;}

/* 모바일 화면에서 햄버거 메뉴 활성화 및 로고 밀기 */
@media (max-width: 768px) {
    header{flex-direction: column; align-items: flex-start; height: auto; position: fixed;}
    .header_wrap{display: flex; align-items: center; height: 50px; padding: 0 10px;}
    .header_wrap>img{margin-top: -5px; margin-left: -10px; scale: 0.8; position: relative; z-index: 999;}
    .menu_wrap{padding-left: 10px;}
    .menu{width: 100%;}
    .p_wrap p{font-size: 1.2em;}
    .menu_toggle{display: block; margin-top: 0px; margin-right: 10px; position: relative; z-index: 999; cursor: pointer;}
    .main_logo{margin-left: 10px;}
    #globalSearchWrap{position: fixed; top: 50px; right: -100%; width: 100%; height: 100vh; overflow-x: hidden; background-color: #0b0a0b; z-index: 998; transition: right 0.4s ease; display: flex; flex-direction: column; align-items: center; padding: 80px 20px 20px; box-sizing: border-box;}
    #globalSearchWrap.active{right: 0;}
    #globalSearchWrap input{width: 80%; max-width: 500px; position: absolute; top: 0px; left: 20px;}
    #searchIcon{display: block; position: fixed; top: 9px; right: 20px; z-index: 999;}
    #searchTabs{width: 500px; margin-left: -10px;}
    .search_result_tab{background: none; padding: 0px; position: relative; z-index: 999;}

    #side_menu{position: fixed; top: 0; left: 0; width: 330px; height: 100%; background-color: #1a1a1a; z-index: 2; transform: translateX(-100%); transition: transform 0.3s ease;}
    #side_menu .menu_wrap{position: absolute; top: 50px; bottom: 0; left: 0; right: 0; overflow-y: auto; padding: 10px; background-color: inherit;}
    #side_menu.active{transform: translateX(0);}
    body.menu-open{overflow: hidden;}

    #wallet_nav{display: none;}

    section{flex-direction: column; width: 100%;}
    #content{width: 100%; padding-left: 0;}
    .content_wrap{padding: 10px; margin-top: 40px;}

    #manual h1{padding-top: 0px; font-size: 1.3em; width: 380px;}
    #manual h2{margin-bottom: 0px; font-size: 1em; margin-bottom: 40px;}
    #manual .menual_quickguide{width: 360px; padding: 10px; margin-top: -420px; margin-bottom: 500px;}
    #manual .menual_guide{width: 360px; padding: 10px; margin-top: -420px;}
    #manual p{display: block; width: 320px; line-height: 1.4;}
    #manual img{margin-bottom: 20px; scale: 0.4; position: relative; top: -220px; left: -320px;}

    #sign_up h1{padding-top: 0px; font-size: 1.3em; width: 380px;}
    #sign_up h2{margin-bottom: 0px; font-size: 1em;}
    #sign_up h4{margin-left: 40px; border-radius: 50px; margin-bottom: 20px;}
    #sign_up .steps{position: relative; top: 40px; left: -40px;}
    #sign_up .step_wrap{width: 380px;  margin-left: 40px; border-radius: 10px 10px 0px 0px;}
    #sign_up .step_wrap>img{margin-top: -50px; margin-left: -25px; scale: 0.85;}
    #sign_up .p_wrap{width: 360px; height: auto; margin-left: 40px; border-radius: 0px 0px 10px 10px;}
    #sign_up .p_wrap p{text-align: left; margin-top: -30px;}
    #sign_up .p_wrap .small{text-align: left; margin-top: 20px;}
    #sign_up .step{margin-bottom: 100px;}
    #sign_up .step8_img{margin-bottom: -20px;}

    #wallet_home h1{padding-top: 0px; font-size: 1.3em; width: 380px;}
    #wallet_home h2{margin-bottom: 0px; font-size: 1em;}
    #wallet_home .desktop_only{display: none;}
    #wallet_home .mobile_only{display: flex; flex-direction: column; gap: 15px; margin-top: -320px;}
    #wallet_home .mobile_only>img{width: 300px; margin-top: 80px; margin-left: -50px;}
    #wallet_home .mobile_only h4{width: auto; background-color: #2A238F; color: #ffffff; border-radius: 50px; margin-left: 150px; padding: 5px 15px; text-align: center; font-size: 1.2em; margin-left: -10px; margin-bottom: 15px; font-weight: normal;}
    #wallet_home .mobile_only .number{margin-top: 10px; margin-left: -55px;}
    #wallet_home .mobile_only .number>img{margin-top: 60px; margin-left: 150px; margin-bottom: 20px;}
    #wallet_home .mobile_only span{font-size: 1.1em; font-weight: bold;}
    #wallet_home .mobile_only p{display: inline-block; width: 380px; font-size: 1.2em; background-color: #434343; color: #f2f2f2; border-radius: 10px; padding: 20px; margin-top: 25px; margin-left: 150px; text-align: left;}
    #wallet_home .mobile_only h4{margin-left: 155px;}
    #wallet_home .no1{display: none;}
    #wallet_home .no2_1{display: none;}
    #wallet_home .no2_2{display: none;}
    #wallet_home .no2_3{display: none;}
    #wallet_home .no2_4{display: none;}
    #wallet_home .no3_1{display: none;}
    #wallet_home .no3_2{display: none;}
    #wallet_home .no3_3{display: none;}
    #wallet_home .no4_1{display: none;}
    #wallet_home .no4_2{display: none;}
    #wallet_home .no4_3{display: none;}
    #wallet_home .no4_4{display: none;}
    #wallet_home .no4_5{display: none;}

    #deposit h1{padding-top: 0px; font-size: 1.3em; width: 380px;}
    #deposit h2{margin-bottom: 0px; font-size: 1em; margin-bottom: 40px;}
    #deposit p{display: block; width: 380px;}
    #deposit .small{font-size: 1em;}
    #deposit .step{width: 300px;}
    #deposit .two{width: 380px;}

    #recharge h1{padding-top: 0px; font-size: 1.3em; width: 380px;}
    #recharge h2{margin-bottom: 0px; font-size: 1em; margin-bottom: 40px;}
    #recharge p{display: block; width: 380px;}
    #recharge>p{font-size: 3em; padding: 0px; margin: 0 auto; text-align: center; margin-left: -45px;}
    #recharge .small{font-size: 1em;}
    #recharge .step{width: 300px;}
    #recharge>img{padding-top: 0px;}
    #recharge .cs{width: 300px; margin: 0 auto; margin-left: 30px;}

    #withdraw h1{padding-top: 0px; font-size: 1.3em; width: 380px;}
    #withdraw h2{margin-bottom: 0px; font-size: 1em; margin-bottom: 40px;}
    #withdraw p{display: block; width: 380px;}
    #withdraw .small{font-size: 1em;}
    #withdraw .step{width: 300px;}
    #withdraw .two{width: 380px;}

    #swap h1{padding-top: 0px; font-size: 1.3em; width: 380px;}
    #swap h2{margin-bottom: 0px; font-size: 1em; margin-bottom: 40px;}
    #swap p{display: block; width: 380px;}
    #swap .small{font-size: 1em;}
    #swap .step{width: 300px;}
    #swap .two{width: 380px;}

    #information h1{padding-top: 0px; font-size: 1.3em; width: 380px;}
    #information h2{margin-bottom: 0px; font-size: 1em; margin-bottom: 40px;}
    #information p{display: block; width: 380px;}
    #information .small{font-size: 1em;}
    #information .step{width: 300px;}
    #information .two{width: 380px;}
    #information .three{width: 380px;}
    #information .four{width: 380px;}
    #information .desktop_only{display: none;}
    #information .mobile_only{display: flex; flex-direction: column; gap: 15px;}
    
    #platform h1{padding-top: 0px; font-size: 1.3em; width: 380px;}
    #platform h2{margin-bottom: 0px; font-size: 1em; margin-bottom: 40px;}
    #platform h5{display: inline-block; font-size: 1em; color: #ffffff; margin-top: 10px; margin-left: 10px; margin-right: 90px; margin-bottom: 5px;}
    #platform img{display: block; width: 380px;}
    #platform .desktop_only{display: none;}
    #platform .mobile_only{display: flex; flex-direction: column;}
    #platform .mobile_only>img{display: block; width: 300px;}
    #platform .mobile_only span{font-size: 1.1em; font-weight: bold;}
    #platform .mobile_only p{display: inline-block; width: 380px; font-size: 1.1em; background-color: #434343; color: #f2f2f2; border-radius: 10px; padding: 20px; margin-top: 20px; text-align: left;}
    #platform .mobile_only .mb{margin-bottom: 100px;}
    #platform .img_wrap>img{margin-top: 15px;}

    #partners h1{padding-top: 0px; font-size: 1.3em; width: 380px;}
    #partners h2{margin-bottom: 0px; font-size: 1em; margin-bottom: 40px;}
    #partners p{display: block; width: 380px;}
    #partners img{width: 380px;}
    
    #notices table, thead, tbody, th, td, tr {display: block;}
    #notices th{display: none;}
    #notices td{position: relative; padding-left: 50%; border-bottom: 1px solid #ddd; padding-left: 0px;}
    #notices td::before{content: attr(data-label); position: absolute; left: 1rem; font-weight: bold;}
    #notices img{padding: 50px; margin-left: -30px;}

    #FAQ h1{padding-top: 0px; font-size: 1.3em; width: 380px;}
    #FAQ h2{margin-bottom: 0px; font-size: 1em; margin-bottom: 40px;}
    #FAQ .QnA{width: 380px;}
    #FAQ .QnA .q>p{font-size: 0.8em; width: 320px; margin-top: -30px; margin-left: 30px;}
    #FAQ .QnA .q>img{margin-left: 310px;}
    #FAQ .QnA .a>img{width: 380px;}

    #customer h1{padding-top: 0px; font-size: 1.3em; width: 380px;}
    #customer h2{margin-bottom: 0px; font-size: 1em; margin-bottom: 20px;}
    #customer p{font-size: 1.4em; color: #aaaaaa; margin-top: -5px; margin-bottom: 15px;}
    #customer img{margin-bottom: 10px;}
    #customer .img_wrap{scale: 0.8; margin-top: -30px; margin-left: -20px; margin-bottom: -20px;}   
}

@media (max-width: 480px) {
    header{flex-direction: column; align-items: flex-start; height: auto; position: fixed;}
    .header_wrap{display: flex; align-items: center; height: 50px; padding: 0 10px;}
    .header_wrap>img{margin-top: -5px; margin-left: -10px; scale: 0.8; position: relative; z-index: 999;}
    .menu_wrap{padding-left: 10px;}
    .menu{width: 100%;}
    .p_wrap p{font-size: 1.2em;}
    .menu_toggle{display: block; margin-top: 0px; margin-right: 10px; position: relative; z-index: 999; cursor: pointer;}
    .main_logo{margin-left: 10px;}
    #globalSearchWrap{position: fixed; top: 50px; right: -100%; width: 100%; height: 100vh; overflow-x: hidden; background-color: #0b0a0b; z-index: 998; transition: right 0.4s ease; display: flex; flex-direction: column; align-items: center; padding: 80px 20px 20px; box-sizing: border-box;}
    #globalSearchWrap.active{right: 0;}
    #globalSearchWrap input{width: 80%; max-width: 500px; position: absolute; top: 0px; left: 20px;}
    #searchIcon{display: block; position: fixed; top: 9px; right: 20px; z-index: 999;}
    #searchTabs{width: 500px; margin-left: -10px;}
    .search_result_tab{background: none; padding: 0px; position: relative; z-index: 999;}
    

    #side_menu{position: fixed; top: 0; left: 0; width: 330px; height: 100%; background-color: #1a1a1a; z-index: 2; transform: translateX(-100%); transition: transform 0.3s ease;}
    #side_menu .menu_wrap{position: absolute; top: 50px; bottom: 0; left: 0; right: 0; overflow-y: auto; padding: 10px; background-color: inherit;}
    #side_menu.active{transform: translateX(0);}
    body.menu-open{overflow: hidden;}

    #wallet_nav{display: none;}

    section{flex-direction: column; width: 100%;}
    #content{width: 100%; padding-left: 0;}
    .content_wrap{padding: 10px; margin-top: 40px;}

    #manual h1{padding-top: 0px; font-size: 1.3em; width: 380px;}
    #manual h2{margin-bottom: 0px; font-size: 1em; margin-bottom: 40px;}
    #manual .menual_quickguide{width: 360px; padding: 10px; margin-top: -420px; margin-bottom: 500px;}
    #manual .menual_guide{width: 360px; padding: 10px; margin-top: -420px;}
    #manual h4{font-size: 1.2em;}
    #manual p{display: block; width: 320px; font-size: 1em; line-height: 1.4;}
    #manual img{margin-bottom: 20px; scale: 0.4; position: relative; top: -220px; left: -320px;}

    #sign_up h1{padding-top: 0px; font-size: 1.3em; width: 380px;}
    #sign_up h2{margin-bottom: 0px; font-size: 1em;}
    #sign_up h4{margin-left: 40px; border-radius: 50px; margin-bottom: 20px;}
    #sign_up .steps{position: relative; top: 40px; left: -40px;}
    #sign_up .step_wrap{width: 380px;  margin-left: 40px; border-radius: 10px 10px 0px 0px;}
    #sign_up .step_wrap>img{margin-top: -50px; margin-left: -25px; scale: 0.85;}
    #sign_up .p_wrap{width: 360px; height: auto; margin-left: 40px; border-radius: 0px 0px 10px 10px;}
    #sign_up .p_wrap p{text-align: left; margin-top: -30px;}
    #sign_up .p_wrap .small{text-align: left; margin-top: 20px;}
    #sign_up .step{margin-bottom: 100px;}
    #sign_up .step8_img{margin-bottom: -20px;}

    #wallet_home h1{padding-top: 0px; font-size: 1.3em; width: 380px;}
    #wallet_home h2{margin-bottom: 0px; font-size: 1em;}
    #wallet_home .desktop_only{display: none;}
    #wallet_home .mobile_only{display: flex; flex-direction: column; gap: 15px; margin-top: -320px;}
    #wallet_home .mobile_only>img{width: 300px; margin-top: 80px; margin-left: -50px;}
    #wallet_home .mobile_only h4{width: auto; background-color: #2A238F; color: #ffffff; border-radius: 50px; padding: 5px 15px; text-align: center; font-size: 1.2em; margin-left: -10px; margin-bottom: 15px; font-weight: normal;}
    #wallet_home .mobile_only .number{margin-top: 10px; margin-left: -55px;}
    #wallet_home .mobile_only .number>img{margin-top: 60px; margin-left: 150px; margin-bottom: 20px;}
    #wallet_home .mobile_only span{font-size: 1.1em; font-weight: bold;}
    #wallet_home .mobile_only p{display: inline-block; width: 380px; font-size: 1.2em; background-color: #434343; color: #f2f2f2; border-radius: 10px; padding: 20px; margin-top: 25px; margin-left: 150px; text-align: left;}
    #wallet_home .mobile_only h4{margin-left: 155px;}
    #wallet_home .no1{display: none;}
    #wallet_home .no2_1{display: none;}
    #wallet_home .no2_2{display: none;}
    #wallet_home .no2_3{display: none;}
    #wallet_home .no2_4{display: none;}
    #wallet_home .no3_1{display: none;}
    #wallet_home .no3_2{display: none;}
    #wallet_home .no3_3{display: none;}
    #wallet_home .no4_1{display: none;}
    #wallet_home .no4_2{display: none;}
    #wallet_home .no4_3{display: none;}
    #wallet_home .no4_4{display: none;}
    #wallet_home .no4_5{display: none;}

    #deposit h1{padding-top: 0px; font-size: 1.3em; width: 380px;}
    #deposit h2{margin-bottom: 0px; font-size: 1em; margin-bottom: 40px;}
    #deposit p{display: block; width: 380px;}
    #deposit .small{font-size: 1em;}
    #deposit .step{width: 300px;}
    #deposit .two{width: 380px;}

    #recharge h1{padding-top: 0px; font-size: 1.3em; width: 380px;}
    #recharge h2{margin-bottom: 0px; font-size: 1em; margin-bottom: 40px;}
    #recharge p{display: block; width: 380px;}
    #recharge>p{font-size: 3em; padding: 0px; margin: 0 auto; margin-left: -45px; text-align: center;}
    #recharge .small{font-size: 1em;}
    #recharge .step{width: 300px;}
    #recharge>img{padding-top: 0px;}
    #recharge .cs{width: 300px; margin: 0 auto; margin-left: 30pxs;}

    #withdraw h1{padding-top: 0px; font-size: 1.3em; width: 380px;}
    #withdraw h2{margin-bottom: 0px; font-size: 1em; margin-bottom: 40px;}
    #withdraw p{display: block; width: 380px;}
    #withdraw .small{font-size: 1em;}
    #withdraw .step{width: 300px;}
    #withdraw .two{width: 380px;}

    #swap h1{padding-top: 0px; font-size: 1.3em; width: 380px;}
    #swap h2{margin-bottom: 0px; font-size: 1em; margin-bottom: 40px;}
    #swap p{display: block; width: 380px;}
    #swap .small{font-size: 1em;}
    #swap .step{width: 300px;}
    #swap .two{width: 380px;}

    #information h1{padding-top: 0px; font-size: 1.3em; width: 380px;}
    #information h2{margin-bottom: 0px; font-size: 1em; margin-bottom: 40px;}
    #information p{display: block; width: 380px;}
    #information .small{font-size: 1em;}
    #information .step{width: 300px;}
    #information .two{width: 380px;}
    #information .three{width: 380px;}
    #information .four{width: 380px;}

    #platform h1{padding-top: 0px; font-size: 1.3em; width: 380px;}
    #platform h2{margin-bottom: 0px; font-size: 1em; margin-bottom: 40px;}
    #platform img{display: block; width: 380px;}
    #platform .no{margin-bottom: 0px;}
    #platform .desktop_only{display: none;}
    #platform .mobile_only{display: flex; flex-direction: column;}
    #platform .mobile_only>img{display: block; width: 300px;}
    #platform .mobile_only span{font-size: 1.1em; font-weight: bold;}
    #platform .mobile_only p{display: inline-block; width: 380px; font-size: 1.1em; background-color: #434343; color: #f2f2f2; border-radius: 10px; padding: 20px; margin-top: 20px; text-align: left;}
    #platform .mobile_only .mb{margin-bottom: 100px;}
    #platform .img_wrap>img{margin-top: 15px;}

    #partners h1{padding-top: 0px; font-size: 1.3em; width: 380px;}
    #partners h2{margin-bottom: 0px; font-size: 1em; margin-bottom: 40px;}
    #partners p{display: block; width: 380px;}
    #partners img{width: 380px;}
    
    #notices table, thead, tbody, th, td, tr {display: block;}
    #notices th{display: none;}
    #notices td{position: relative; padding-left: 50%; border-bottom: 1px solid #ddd; padding-left: 0px;}
    #notices td::before{content: attr(data-label); position: absolute; left: 1rem; font-weight: bold;}  
    #notices img{padding: 50px; margin-left: -30px;}

    #FAQ h1{padding-top: 0px; font-size: 1.3em; width: 380px;}
    #FAQ h2{margin-bottom: 0px; font-size: 1em; margin-bottom: 40px;}
    #FAQ .QnA{width: 380px;}
    #FAQ .QnA .q>p{font-size: 0.8em; width: 320px; margin-top: -30px; margin-left: 30px;}
    #FAQ .QnA .q>img{margin-top: 10px; margin-left: 310px; margin-bottom: -5px;}
    #FAQ .QnA .a>img{width: 380px;}

    #customer h1{padding-top: 0px; font-size: 1.3em; width: 380px;}
    #customer h2{margin-bottom: 0px; font-size: 1em; margin-bottom: 20px;}
    #customer p{font-size: 1.4em; color: #aaaaaa; margin-top: -5px; margin-bottom: 15px;}
    #customer img{margin-bottom: 10px;}
    #customer .img_wrap{scale: 0.8; margin-top: -30px; margin-left: -20px; margin-bottom: -20px;}
}