@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_box {_width: calc(100vw*(563/1545));}


    .login_bar_bottom{width: calc(100vw*(264/1545)); bottom: calc(100vw*(-45/1545));}
    .row {width: calc(100vw*(330/1545));}
    .login_input {_height: calc(100vw*(50/1545)); padding: calc(100vw*(12/1545)) 0;}
    .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_input input {width: calc(100% - calc(100vw*(58/1545))); font-size: calc(100vw*(25/1545));}

    .login_info {gap: calc(100vw*(5/1545)); margin: calc(100vw*(15/1545)) 0 calc(100vw*(30/1545));}

    .login_info span {font-size: calc(100vw*(13/1545));}


    .login_box .btn_box {gap: calc(100vw*(25/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 */

    .banner_contents {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 .banner_contents .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_wrap {z-index: 1;}
    .game_wrap .tab_box {gap: calc(100vw*(46/1545)); border: 1px solid red }
    .tab_btn {gap: calc(100vw*(8/1545)); height: calc(100vw*(82/1545));}
    .tab_btn span {font-size: calc(100vw*(12/1545));}
    .tab_btn p {font-size: calc(100vw*(24/1545));}
    .tab_area {margin-top: calc(100vw*(30/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_character {top: calc(100vw*(53/1545));  width: calc(100vw*(175/1545)); height: calc(100vw*(175/1545));}
    /*.game_logo {bottom: calc(100vw*(43/1545)); width: calc(100vw*(88/1545)); height: calc(100vw*(36/1545));}*/
    /*.card_box .name {font-size: calc(100vw*(16/1545)); margin: calc(100vw*(35/1545)) 0 0;}*/
    .card_box .name {bottom: calc(100vw*(43/1545)); width: calc(100vw*(88/1545)); height: calc(100vw*(36/1545));}

    /* bank */




    .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);}


    .slide_banner button{width: calc(100vw*(310/1545)); height: calc(100vw*(86/1545));}

}

@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/troy/bg/login_bg.jpg') no-repeat center/cover; background-color: #261B10;}

    .login_bar_bottom{max-width: 208px; width: calc(100vw*(208/360)); bottom: calc(100vw*(-20/360));}
    .login_section{max-width: 90%;}
    .login_wrap {max-width: 100%;}


    .login_box {width: 100%; padding-top: 95px;}
    .row {width: calc(100vw*(215/360));}
    .login_logo{width: calc(100vw*(240/360))}
    .login_input {max-width: 85%; width: calc(100vw*(343/360)); height: calc(100vw*(38/360)); padding: calc(100vw*(12/360)) 0; margin: 0 auto;}
    .login_input:first-child {margin-bottom: calc(100vw*(8/360));}
    .login_input label {width: calc(100vw*(35/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 span {font-size: calc(100vw*(10/360));}
    .login_img_side{
        display: none;
    }

    .login_btn {display: block; width: calc(100vw*(189/360)); font-size: calc(100vw*(12/360)); margin: 44px auto 0;}
    .login_box .btn_box {gap: calc(100vw*(25/360)); justify-content: center;}
    .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/troy/bg/mb_main_bg.jpg') no-repeat top center/100% auto;}
    .main_banner {margin-top: calc(100vw*(20/360));}
    .banner_contents {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));}

    /* game list */
    .map_img {display: none;}
    .game_wrap {z-index: 1;}
    .game_wrap .tab_box {gap: calc(100vw*(20/360));}
    .tab_btn {gap: calc(100vw*(3/360)); height: calc(100vw*(52/360)); }
    .tab_btn span {font-size: calc(100vw*(8/360));}
    .tab_btn p {font-size: calc(100vw*(16/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*(154/360)); padding: calc(100vw*(12/360)) calc(100vw*(10/360));}
    .card_box::after {border-radius: calc(100vw*(17/360));}

    .card_character {top: calc(100vw*(22/360)); width: calc(100vw*(85/360)); height: calc(100vw*(85/360));}
    /*.game_logo {bottom: calc(100vw*(18/360)); width: calc(100vw*(50/360)); height: calc(100vw*(20/360));}*/
    /*.card_box .name {font-size: calc(100vw*(8/360));}*/
    .card_box .name {bottom: calc(100vw*(18/360)); width: calc(100vw*(50/360)); height: calc(100vw*(20/360));}

    /* bank */


    .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);}



    .slide_banner button{width: calc(100vw*(189/360)); height: calc(100vw*(52/360));}


}

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