@media screen and (max-width: 1545px){
    /* set */
    .container {width: calc(100vw*(1500/1545));}
    input:focus {box-shadow: 0 0 calc(100vw*(5/1545)) rgba(255,255,255,0.3);}


    /* ========================= login ========================= */
    /* 로그인 */
    .login_logo {_width: calc(100vw*(264/1545)); _margin: 0 auto calc(100vw*(10/1545)); _padding-top: calc(100vw*(120/1545));}
    .login_wrap {_height: calc(100vw*(440/1545));}
    .login_box {_width: calc(100vw*(840/1545));}
    .login_bg{height: 100%; width: auto;}

    .row {_width: calc(100vw*(330/1545));}
    .login_input {height: calc(100vw*(50/1545)); padding: calc(100vw*(12/1545));}
    .login_input:first-child {margin-bottom: calc(100vw*(20/1545));}
    .login_input label {width: calc(100vw*(50/1545)); font-size: calc(100vw*(13/1545)); padding-left: calc(100vw*(20/1545));}
    .login_input input {width: calc(100% - calc(100vw*(58/1545))); font-size: calc(100vw*(14/1545));}

    .login_info {gap: calc(100vw*(5/1545)); margin: calc(100vw*(15/1545)) 0 calc(100vw*(30/1545));}
    .login_info img {width: calc(100vw*(20/1545));}
    .login_info span {font-size: calc(100vw*(13/1545));}

    .login_btn {_width: calc(100vw*(280/1545)); height: calc(100vw*(50/1545)); font-size: calc(100vw*(15/1545));}
    .login_box .btn_box {gap: calc(100vw*(25/1545)); margin-top: calc(100vw*(24/1545));}
    .login_box .btn_box li {font-size: calc(100vw*(16/1545));}
    .login_box .btn_box li::after {_right: calc(100vw*(-14/1545)); _height: calc(100vw*(12/1545));}
    .login_box .btn_box li:hover a {text-shadow: 0 0 calc(100vw*(5/1545)) rgba(255,255,255,0.5);}

    /* ========================= index ========================= */
    /* main banner */
    .main_banner {_margin-top: calc(100vw*(-50/1545));}
    .main_banner_swiper {width: calc(100vw*(800/1545)); _padding: calc(100vw*(30/1545)) 0;}
    .slide_banner p {font-size: calc(100vw*(24/1545)); margin-bottom: calc(100vw*(10/1545));}
    .slide_banner p span {font-size: calc(100vw*(24/1545));}
    .detail_btn {width: calc(100vw*(154/1545)); height: calc(100vw*(38/1545)); font-size: calc(100vw*(14/1545));}
    .gr_btn {box-shadow: calc(100vw*(0/1545)) calc(100vw*(4/1545)) calc(100vw*(5/1545)) rgba(0, 0, 0, 0.5); border-radius: calc(100vw*(30/1545));}
    .main_banner .main_banner_swiper .swiper-pagination-bullet {width: calc(100vw*(8/1545)); height: calc(100vw*(8/1545)); margin: 0 calc(100vw*(7/1545));}

    /* game list */
    .map_img {width: calc(100% - calc(100vw*(20/1545))); margin-top: calc(100vw*(-50/1545));}
    .game_banner{margin: calc(100vw*(250/1545)) auto 0}
    .game_wrap {_padding-top: calc(100vw*(58/1545)); z-index: 1;}
    .game_wrap .tab_box {gap: calc(100vw*(46/1545)); margin-top: calc(100vw*(30/1545));}
    .game_wrap .tab_box .tab_box_logo{width: calc(100vw*(323/1545)); top: calc(100vw*(-160/1545)); left: 20%;}
    .tab_btn {gap: calc(100vw*(8/1545)); width: calc(100vw*(280/1545)); height: calc(100vw*(280/1545)); border-radius: calc(100vw*(10/1545));}


    .tab_area {margin-top: calc(100vw*(60/1545)); min-height: calc(100vw*(780/1545));}
    .card_list {gap: calc(100vw*(21/1545));}
    .card_box {width: calc(100vw*(224/1545)); height: calc(100vw*(334/1545)); padding: calc(100vw*(15/1545)) calc(100vw*(10/1545));}
    .card_box::after {border-radius: calc(100vw*(17/1545));}
    .card_box .start {width: calc(100vw*(40/1545)); right: calc(100vw*(-14/1545)); top: calc(100vw*(-18/1545));}
    .card_character {top: calc(100vw*(100/1545)); width: calc(100vw*(156/1545)); height: calc(100vw*(156/1545));}
    .game_logo {bottom: calc(100vw*(40/1545)); width: calc(100vw*(88/1545)); height: calc(100vw*(36/1545));}
    .card_box .name {font-size: calc(100vw*(16/1545)); margin: calc(100vw*(33/1545)) 0 0;}

    /* bank */
    .bank_section {margin-top: calc(100vw*(40/1545));}
    .pirate_box {width: calc(100vw*(570/1545));}
    .deposit_box, .withdraw_box {width: calc(100vw*(467/1545));}
    .bank_title {height: calc(100vw*(80/1545)); padding: 0 calc(100vw*(24/1545));}
    .bank_title p {font-size: calc(100vw*(12/1545));}
    .bank_title a {font-size: calc(100vw*(12/1545));}
    .bank_title span {font-size: calc(100vw*(24/1545));}
    .bank_list li {height: calc(100vw*(42/1545)); padding: 0 calc(100vw*(12/1545)) 0 calc(100vw*(24/1545));}
    .bank_list li * {font-size: calc(100vw*(14/1545));}
    .bank_list li span {width: calc(100vw*(128/1545));}
    .bank_list li p {width: calc(100% - calc(100vw*(300/1545)));}
    .bank_list li b {width: calc(100vw*(150/1545)); margin-right: calc(100vw*(20/1545));}
    .bank_list li span {width: calc(100vw*(130/1545));}
    .pirate_box li p {width: calc(100% - calc(100vw*(85/1545)));}
    .bank_menu_list {height: calc(100vw*(80/1545)); margin-top: calc(100vw*(34/1545));}
    .bank_menu_box {width: calc(100vw*(440/1545));}
    .bank_menu_box p {font-size: calc(100vw*(20/1545));}
    .bank_menu_box p:hover {text-shadow: 0 0 calc(100vw*(5/1545)) rgba(255,255,255,.3);}
    .bank_menu_box img {width: calc(100vw*(44/1545)); margin-right: calc(100vw*(12/1545));}
    .bank_menu_box span {font-size: calc(100vw*(12/1545)); margin-top: calc(100vw*(8/1545));}
    .bank_submenu_box {width: calc(100% - calc(100vw*(880/1545)));}
    .submenu_box img {width: calc(100vw*(32/1545)); margin-right: calc(100vw*(12/1545));}
    .submenu_box p {font-size: calc(100vw*(16/1545));}
    .submenu_box p:hover {text-shadow: 0 0 calc(100vw*(5/1545)) rgba(255,255,255,.3);}
}

@media screen and (max-width: 1000px) {
    .popup.today {
        max-width: 500px !important;
        width: 90% !important;
        top: 50% !important;
        left: 50% !important;
        height: inherit !important;
    }

}

@media screen and (max-width: 700px){
    /* set */
    .container {width: calc(100vw*(328/360));}
    input:focus {box-shadow: 0 0 calc(100vw*(5/360)) rgba(255,255,255,0.3);}


    /* ========================= login ========================= */
    /* 로그인 */
    #wrap_content.login {background: url('/assets/img/xo/bg/login_bg.jpg') no-repeat right/cover;}
    .login_section{top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 90%;
        height: 90%;}
    .login_logo {width: calc(100vw*(200/360)); margin: 0 auto calc(100vw*(30/360)); padding-top: calc(100vw*(15/360));}
    .login_wrap {_height: calc(100vw*(265/360));}
    .login_bg {display: none;}
    .login:before{display: none}
    .login_bg_mb {display: block; width: 100%; height: 100%; object-fit: cover;}
    .login_box {width: 100%; padding: 0 40px;}
    .row {_width: calc(100vw*(215/360));}
    .login_input_wrap{gap: 18px;}
    .login_box_input{max-width: 100%}
    .login_input {height: calc(100vw*(38/360)); padding: calc(100vw*(12/360)); max-width: 100%; margin: 0 auto;}
    .login_input:first-child {margin-bottom: calc(100vw*(15/360));}
    .login_input label {width: calc(100vw*(50/360)); font-size: calc(100vw*(10/360)); padding-left: calc(100vw*(20/360));}
    .login_input input {width: calc(100% - calc(100vw*(58/360))); font-size: calc(100vw*(13/360));}

    .login_info {gap: calc(100vw*(5/360)); margin: calc(100vw*(15/360)) auto calc(100vw*(24/360));}
    .login_info img {width: calc(100vw*(15/360));}
    .login_info span {font-size: calc(100vw*(10/360));}

    .login_btn {display: block; _width: calc(100vw*(215/360)); height: calc(100vw*(38/360)); font-size: calc(100vw*(12/360)); margin: 0 auto;}
    .login_box .btn_box {gap: calc(100vw*(25/360)); justify-content: center; margin: calc(100vw*(16/360)) auto 0;}
    .login_box .btn_box li {font-size: calc(100vw*(11/360));}
    .login_box .btn_box li::after {right: calc(100vw*(-14/360)); height: calc(100vw*(12/360));}
    .login_box .btn_box li:hover a {text-shadow: 0 0 calc(100vw*(5/360)) rgba(255,255,255,0.5);}

    /* ========================= index ========================= */
    /* main banner */

    #wrap_content.main {background: url('/assets/img/xo/bg/main_bg.jpg') no-repeat top center/100% auto;}
    .main_banner {_margin-top: calc(100vw*(20/360));}
    .main_banner_swiper {width: calc(100vw*(308/360)); _padding: calc(100vw*(30/360)) 0;}
    .slide_banner p {font-size: calc(100vw*(17/360)); margin-bottom: calc(100vw*(10/360)); letter-spacing: -1px;}
    .slide_banner p span {font-size: calc(100vw*(17/360));}
    .detail_btn {width: calc(100vw*(110/360)); height: calc(100vw*(30/360)); font-size: calc(100vw*(12/360));}
    .gr_btn {box-shadow: calc(100vw*(0/360)) calc(100vw*(4/360)) calc(100vw*(5/360)) rgba(0, 0, 0, 0.5); border-radius: calc(100vw*(30/360)); margin-top: calc(100vw*(15/360));}
    .main_banner .main_banner_swiper .swiper-pagination-bullet {width: calc(100vw*(6/360)); height: calc(100vw*(6/360)); margin: 0 calc(100vw*(4/360));}

    /* game list */
    .map_img {display: none;}
    .game_banner{margin: calc(100vw*(20/360)) auto 0;}
    .game_wrap .tab_box .tab_box_wrap{padding: 80px 40px;}
    .game_wrap {padding-top: calc(100vw*(35/360)); z-index: 1;}
    .game_wrap .tab_box {gap: calc(100vw*(20/360)); margin-top: 0;}
    .game_wrap .tab_box .tab_box_logo{width: calc(100vw*(110/360)); top: calc(100vw*(-270/360))}
    .tab_btn {gap: calc(100vw*(3/360)); width: calc(100vw*(154/360)); height: calc(100vw*(154/360)); border-radius: calc(100vw*(10/360));}

    .tab_area {margin-top: calc(100vw*(30/360)); min-height: calc(100vw*(780/360));}
    .card_list {gap: calc(100vw*(4/360));}
    .card_box {width: calc(100%/3 - calc(100vw*(3/360))); height: calc(100vw*(162/360)); padding: calc(100vw*(12/360)) calc(100vw*(10/360));}
    .card_box::after {border-radius: calc(100vw*(17/360));}
    .card_box .start {width: calc(100vw*(40/360)); right: calc(100vw*(-14/360)); top: calc(100vw*(-18/360));}
    .card_character {top: calc(100vw*(48/360)); width: calc(100vw*(75/360)); height: calc(100vw*(75/360));}
    .game_logo {bottom: calc(100vw*(8/360)); width: calc(100vw*(64/360)); height: calc(100vw*(24/360));}
    .card_box .name {font-size: calc(100vw*(11/360)); margin: 0;}

    /* bank */
    .bank_section {margin-top: calc(100vw*(40/360));}
    .bank_box {flex-direction: column;}
    .pirate_box {width: 100%;}
    .deposit_box, .withdraw_box {width: 100%;}
    .bank_title {height: calc(100vw*(52/360)); padding: 0 calc(100vw*(15/360));}
    .bank_title p {font-size: calc(100vw*(12/360));}
    .bank_title a {font-size: calc(100vw*(12/360));}
    .bank_title span {font-size: calc(100vw*(12/360));}
    .bank_list li {height: calc(100vw*(42/360)); padding: 0 calc(100vw*(15/360)) 0 calc(100vw*(15/360));}
    .bank_list li * {font-size: calc(100vw*(12/360));}
    .bank_list li span {width: calc(100vw*(128/360));}
    .bank_list li p {width: calc(100% - calc(100vw*(300/360)));}
    .bank_list li b {width: calc(100vw*(150/360)); margin-right: calc(100vw*(20/360));}
    .bank_list li span {width: calc(100vw*(130/360));}
    .pirate_box li p {width: calc(100% - calc(100vw*(85/360)));}
    .bank_menu_list {flex-wrap: wrap; height: fit-content; margin-top: calc(100vw*(34/360));}
    .bank_menu_box {position: relative; justify-content: flex-start; width: 50%; height: calc(100vw*(63/360)); padding: 0 calc(100vw*(20/360)); border-right: none;}
    .bank_menu_box:first-child::after {content: ''; position: absolute; top: 50%; right: 0; width: 1px; height: calc(100vw*(24/360)); transform: translateY(-50%); background: rgba(255,255,255,0.1);}
    .bank_menu_box p {font-size: calc(100vw*(12/360));}
    .bank_menu_box p:hover {text-shadow: 0 0 calc(100vw*(5/360)) rgba(255,255,255,.3);}
    .bank_menu_box img {width: calc(100vw*(26/360)); margin-right: calc(100vw*(12/360));}
    .bank_menu_box span {display: none;}
    .bank_submenu_box {width: 100%;}
    .submenu_box {position: relative; justify-content: flex-start; width: 50%; height: calc(100vw*(63/360)); padding: 0 calc(100vw*(20/360));}
    .submenu_box:first-child::after {content: ''; position: absolute; top: 50%; right: 0; width: 1px; height: calc(100vw*(24/360)); transform: translateY(-50%); background: rgba(255,255,255,0.1);}
    .submenu_box img {width: calc(100vw*(26/360)); margin-right: calc(100vw*(12/360));}
    .submenu_box p {font-size: calc(100vw*(12/360));}
    .submenu_box p:hover {text-shadow: 0 0 calc(100vw*(5/360)) rgba(255,255,255,.3);}

}

@media screen and (max-width: 400px) {
    .popup.today .close_wrap span {
        font-size: calc(100vw * (15 / 360));
    }
}