.location{
    padding: 100px 0;
}


@media screen and (max-width:1024px){

    .story-wrap > .inner{
        width: 100%;
        margin: 0 auto;
    }

    /* story */
     .story-wrap .con-tit.story{
        width: 90%;
        margin: 0 auto;
        margin-bottom: 30px;
    }
    .story-wrap .con-tit.story h2{
        margin: 0 auto;
        font-size: 25px;
        line-height: 35px;
        word-break: keep-all;
        margin-bottom: 10px;
    }

    .br{
        display: block;
    }

    .story-con-wrap {
        margin-top: 40px;
        width: 90%;
        margin: 0 auto;
    }

    .story-con-wrap .story-con .story-img{
        width: 100%;
    }

    .story-con-wrap .story-con .story-txt{
        width: 100%;
        margin-top: 0;
        margin-left: 0;
    }

    .story-con-wrap .story-con .story-txt h2{
        font-size: 40px;
        margin-top: -50px;
    }

    .story-con-wrap .story-con .story-txt p{
        width: 100%;
    }

    .story-con-wrap .story-con .story-txt b{
        margin-bottom: -15px;
    }

    .story-con-wrap .story-con.bottom {
        transform: none;
        padding-bottom: 50px;
    }

    .story-con-wrap .story-con.bottom .story-img {
        float: right;
        margin-top: -20px;
        margin-bottom: 70px;
    }

    .story-con-wrap .story-con.bottom .story-txt{
        margin-top: 0;
    }
}/*1024*/


@media screen and (max-width:768px){
    .header{
        margin: 10px auto;
    }

    .header .container{
        height: 50px;
    }

    .header .logo{
        width: 150px;
    }

    .header .logo img{
        width: 100%;
    }

    .inner{
        width: 100%;
    }

    .sub-con-tit{
        margin-bottom: 25px;
    }

    .sub-con-tit h3{
        font-size: 25px;
    }

    .sub-con-tit h5{
        font-size: 16px;
        margin-bottom: 10px;
    }

    h1{
        font-size: 60px;
        line-height: 60px;
        margin-top: 0px;
        margin-bottom: 20px;
    }

    h6{
        font-size: 16px;
        margin-bottom: 5px;
    }

    h5{
        font-size: 16px;
        margin-bottom: 15px;
    }

    h4{
        font-size: 20px;
        margin: 0;
    }

    .con-btm{
        width: 100%;
        height: auto;
    }

    .red{
        color: #bf1d2d;
    }

    .txt22{
        font-size: 16px;
    }

    .con-top{
        text-align: center;
        margin-bottom: 20px;
    }

    .jokercard-img{
        width: 40%;
        margin: 0 auto;
    }

    .jokercard-img img{
        width: 100%;
    }

    .contxt{
        margin-top: 20px;
    }

    .con-txt{
        margin-bottom: 20px;
        text-align: left;
    }

    .con-txt h6{
        font-size: 15px;
        line-height: 22px;
        letter-spacing: -.05em;
        margin-bottom: 0;
    }

    .con-txt p{
        font-size: 13px;
        line-height: 18px;
        margin-top: 5px;
        margin-bottom: 5px;
        word-break: keep-all;
    }

    .sub-nav .snb .depth .submenu_1 li a{
        padding-left: 15px;
        font-size: 14px;
    }

    .sub-nav .snb .depth .submenu li a{
        padding-left: 15px;
        font-size: 14px;
    }

    .stores .col-md-3{
        width: 100%;
    }

    .story-img{
        margin-bottom: 10px;
    }

    .con-fl-r{
        position: relative;
    }

    .con-fl-r .joker-character{
        display: none;
    }

    .story-img img{
        width: 100%;
    }

    .contents{
        padding-top: 40px;
        padding-bottom: 40px;
    }
    
/* ceo */
    .con-top-ceo{
        background-image: url(/layouts/jokerdark/images/sub-bak/con-ceo-bg-mobile.png);
        background-position: center;
        background-size: cover;
        width: 90%;
        height: auto;
        margin: 0 auto;
        padding-bottom: 40px;
        border-radius: 10px;
    }

    .con-ceo-txt{
        color: #fff;
        width: 90%;
        margin-left: 0;
        margin: 0 auto;
    }

    .con-ceo-txt h2{
        font-size: 35px;
        font-family: 'OTEnjoystoriesBA';
        line-height: 40px;
        padding-top: 230px;
    }

    .con-ceo-txt p{
        font-size: 16px;
        margin-right: 0px;
        line-height: 23px;
        text-align: left;
        width: 90%;
        margin: 0 auto;
    }

    .ceo-btm{
        background-color: #f9f9f9;
        width: 100%;
        height: auto;
        padding-top: 40px;
        padding-bottom: 40px;
        margin-bottom: 0px;
    }

    .con-btm .inner{
        width: 90%; 
        margin: 0 auto;
    }

    .con-btm-ceo{
        text-align: center;
        margin: 0 auto;
    }

    .ceo-ment{
        text-align: left;
    }

    .ceo-ment p{
        font-size: 16px;
        line-height: 23px;
    }

    .txt-all{
        width: 90%;
        margin: 0 auto;
    }

    .txt-divide div{
        display: block;
    }

    .ceo-img{ 
        width: 100%;
        text-align: center;
        padding-top: 0px;
        margin: 0 auto;
    }

    .ceo-img img{
        width: 60%;
        margin-bottom: 30px;
    }

    .ceo-p-r{
        width: 90%;
        margin: 0 auto;
        padding-left: 0px;
    }

    .ceo-p-r p{
        width: 90%;
        margin: 0 auto;
    }

    .bg-none{
        background-image: none;
    }

    .ceo-ment .txt50{
        font-size: 40px;
        font-family: 'OTEnjoystoriesBA';
        margin-top: 30px;
        text-align: right;
    }
    
    /* hestory */
    .history-wrap .container{
        padding: 40px 0;
    }

    .history.con-tit{
        margin-bottom: 30px;
    }

    .history.con-tit h2{
        margin: 0 auto;
        font-size: 25px;
        line-height: 35px;
        word-break: keep-all;
        margin-bottom: 10px;
    }

    .hisrory-year .year p {
        font-size: 30px;
        margin-top: 5px;
    }

    .history-btm{
        padding-top: 50px;
        padding-bottom: 60px;
    }

    .history-img{
        position: relative;
        width: 100%;
    }

    .history-img img{
        width: 90%;
    }

    .history-img .joker-character{
        display: none;
    }

    .hisrory-year{
        text-align: left;
    }

    .history-box{
        vertical-align: top;
        padding: 0;
        text-align: center;
        margin: 0 auto;
    }

    .history-box01, .history-box02{
        width: 100%
    }

    .history-box01 img{
        width: 50%;
    }

    .txt40{
        font-size: 30px;
        font-weight: 700;
        margin-top: 0px;
        margin-left: 0px;
    }

    .history-box03{
        margin-left: 0;
    }


    .month p::before{
        width: 11px;
        height: 11px;
        background-color: #bf1d2d;
        content: '';
        border-radius: 5px;
        left: 0;
        top: 0;
        z-index: 999;
    }

    .history-table.month p{
        padding-left: 40px;
        font-size: 18px;
        line-height: 25px;
        margin-bottom: 25px;
        font-weight: 600;
    }

    .history-text p{
        padding-left: 15px;
        font-size: 16px;
        line-height: 25px;
        margin-bottom: 26px;
    }
    
    
    /* 오시는 길 */
    .location{
        padding: 40px 0 0;
    }

    .location-img{
        position: relative;
        width: 100%;
    }

    .location-img img{
        width: 90%;
    }

    .joker-standing{
        display: none;
    }

    .location-btm{
        margin-top: 40px;
    }

    .location-box{
        border-radius: 10px;
        width: 100%;
        margin: 0 auto;
        background-color: rgba(255,255,255,.7);
    }

    .location-box div{
        display: block;
        width: 100%;
        margin: 0 auto;
        padding-top: 0;
        padding-bottom: 10px;
    }

    .location-logo img{
        width: 50%;
    }

    .location-txt{
        text-align: center;
    }

    .location-txt p{
        font-size: 16px;
        line-height: 24px;
        margin-top: 10px;
    }

    .location-txt .txt30{
        font-size: 18px;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .menu-list{
        width: 100%;
    }

    .section-02{
        height: auto;
        padding-bottom: 100px;
        overflow: hidden;
    }

    .menu-list{
        width: 90%;
        margin: 0 auto;
        margin-left: 10%;
        margin-top: 100px;
    }

    .menu-list li{
        width: 20%;
    }

    .menu-list img{
        width: 100%;
    }

    .menu-list-txt{
        font-size: 28px;
        width: 100%;
        text-align: center;
    }

    .menu-list .menu-list-01{
        margin:0;
        margin-top: -150px;
    }

    .menu-list .menu-list-02{
        margin:0;
        margin-right: 30px;
        margin-left:30px;
    }

    .menu-list .menu-list-03{
        margin:0;
        margin-right:30px;
        margin-top: -70px;
    }

    .menu-list .menu-list-04{
        margin:0;
        margin-top: -140px;

    }

    .section-03{
        height: auto;
    }

    .section-03 .info-box img{
        width: 80%;
    }

    .info-box{
        height: 500px;
    }

    .section-04{
        height: 550px;
    }

    .section-04 .sec-04-bg .sec-04-joker-left{
        width: 20%;
    }
    .section-04 .sec-04-bg .sec-04-joker-right{
        width: 20%;
    }

    .section-04 .sec-04-tit h2{
        font-size: 40px;
        width: 65%;
        margin: 0 auto;
        line-height: 1.5em;
        padding-top:60px;   
    }

    .section-04 .sec-04-tit p{
        font-size: 15px;
        width: 57%;
        margin: 30px auto;
    }

    .sub-visual{
        width: 100vw;
        height: 200px;
    }

    .sub-visual .title{
        padding: 50px 0;
    }

    .sub-visual .title span{
        font-size: 16px;
        margin: 0 0 20px;
    }

    .sub-visual .title h2{
        font-size: 50px;
    }

    .sub-01{
        height: auto;
        padding-bottom: 100px;
    }

    .sub-01 .sub-tit{
        width: 80%;
    }

    .sub-01 .intro-wrap{
        width: 90%;
        height: auto;
        padding-bottom: 150px;
    }

    .sub-01 .txt-box{
        width: 90%;
    }

    .sub-01 .txt-box h2{
        font-size: 40px;
        font-weight: 800;
        margin: 50px auto;
        width: 249px;
        line-height: 1.2em;
    }

    .sub-01 .txt-box p{
        font-size: 15px;
        line-height: 1.8em;
    }

    .sub-01 .txt-box .joker-ceo{
        position: relative;
        margin-top: 20px;
        top:0;
        right: 0;
    }

    .sub-01 .txt-box .p01{
        width: 100%;
    }

    .sub-01 .txt-box .p02{
        width: 100%;
    }

    .sub-title-wrap{
        height: 150px;
    }

    .sub-title{
        padding-top:30px;
        width: 45%;
    }

    .inner{
        width: 100%;
        margin: 50px auto;
        box-sizing: border-box;
    }

    .priv-wrap{
        width: 100%;
        margin: 50px auto;
        padding: 0 20px;
        box-sizing: border-box; 
    }

    .priv-wrap h2{
        margin: 50px 0;
    }

    .priv-wrap p{
        font-size: 15px;
    }

    .foo-menu{
        display: none;
    }

    .foo-line{
        display: none;
    }
    
    .foo-con{
        width: 100%;
        padding: 0 20px;
        box-sizing: border-box;
    }

    .foo-con .foo-logo{
        text-align: center;
        margin: 30px auto;
        float: none;
    }

    .foo-con .foo-list .call{
        margin: 0 auto;
        float: none;
        margin-bottom: 20px;
    }

    .foo-con .foo-list {
        margin-left: 0;
        float: none;
        text-align: center;
        word-break: keep-all;

    }
    .sns-wrap{
        width: max-content;
        margin: 0 auto;
    }





  
}

@media screen and (max-width: 768px){
    .logo-tit{
        width: 100%;
    }
    .logo-tit img{
        width: 100%;
    }

    .main-visual {
        height: 650px;
    }

    .sub-01 .intro-wrap .joker-logo{
        width: 50%;
        padding-top: 50px;
    }

    .sub-01 .intro-wrap .joker-top {
        width: 5%;
        top: 30px;
        left: 20px;

    }
    .sub-01 .intro-wrap .joker-bottom {
        width: 5%;
        right: 20px;
        bottom:30px;
    }

    .sub-01 .txt-box{
        margin: 30px auto;
    }

    .step-box{
        width: 100px;
    }

    .step-wrap{
        width: fit-content;
    }

    .step-box img{
        width: 100%;
    }

    .step-arrow{
        margin: 0 20px;
        margin-top:100px;
    }

    .map-wrap .search_box{
        width: 100%;
        overflow:hidden;
        height: 178px;
        padding: 30px 20px;
        box-sizing: border-box;
    }

    .store-info-wrap {
        width: 90%;
        left: 55%;
        transform: translate(-56%,-50%);
        top: 50%;
    }

    .store-info-wrap .close{
        top:-50px;
        right: 0;
    }

    .store-info-wrap .store-info-box {
        padding: 20px 30px;
    } 

    .sub-title-wrap{
        width: auto;
        height: 160px;
        padding-top: 20px;
    }

    .sub-title-wrap h3{
        font-size: 30px;
        color: #fff;
        font-weight: 700;
        margin-top: 10px;
    }

    .sub-title{
        display: block;
        margin: 0 auto;
        padding-top: 40px;
    }
    .menu-con-tit{
        margin-top: 40px;
        font-size: 25px;
        columns: #222;
    }

    .inner{
        width: 100%;
        margin: 0px auto;
        text-align: center;
    }

    .container{ 
        width: 100%;
        margin: 0px auto;
        text-align: center;
        padding: 0;
    }

    .sub-nav{
        height: 50px;
    }

    .sub-nav .snb{
        height: 50px;
    }

    .sub-nav .snb .home{
        width: 3em;
    }

    .sub-nav .snb .depth_1{
        width: 130px;
    }

    .sub-nav .snb .depth_2{
        width: 150px;
    }

    .sub-nav .snb .depth .now {
        padding-left: 15px;
    }

    .sub-nav .snb .depth_2 .now {
        border-right: none;
    }

    .con-tit{
        margin-bottom: 30px;
    }
    .con-tit h2{
        width: 100vw;
        font-size: 40px;
        line-height: 1em;
        margin-bottom: 0px;
        word-break: keep-all;
    }
    .con-tit p{
        font-size: 16px;
    }
    .menu-signature{
        background-image: url("/layouts/default/images/sub/menu-sgnt-m.png");
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        width: 100%;
        height: auto;
        margin-top: 50px;
    }
    .menu-soonsal{
        background-image: url("/layouts/default/images/sub/menu-nugget-m.png");
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        width: 100%;
        height: auto;
        margin-top: 50px;
    }
    .menu-fried{
        background-image: url("/layouts/default/images/sub/menu-fried-m.png");
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        width: 100%;
        height: auto;
        margin-top: 50px;
    }
    .menu-sidemenu{
        background-image: url("/layouts/default/images/sub/menu-side-m.png");
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        width: 100%;
        height: auto;
        margin-top: 50px;
    }

    .menu-top-img{
        overflow: hidden;
    }

    .menu-sub-list{
        width: 100%;
        margin-top: 40px;
        margin-bottom: 40px;
    }
    .menu-img{
        width: 100%;
        margin: 0;
        text-align: center;
        margin-bottom: 25px;
        vertical-align: top;
    }

    .menu-img img{
        border-radius: 10px;
        width: 100%;
    }

    .menu-img .menu-tit{
        margin-top: 15px;
        margin-bottom: 10px;
        color: #b81c24;
        width: auto;
    }

    .menu-img .menu-tit h6{
        font-weight: 700;
        font-size: 14px;
        word-break: keep-all;
    }
    .menu-img .menu-desc{
        font-size: 19px;
        line-height: 20px;
        word-break: keep-all;
        margin-bottom: 0;
        padding-bottom: 5px;
        height: auto;
        vertical-align: middle;
    }

    .menu-img .menu-price{
        font-size: 14px;
        line-height: 25px;
        text-align: left;
        width: 100%;
        position: relative;
        margin: 0 auto;
    }

    .menu-side .menu-img .menu-price{
        height: 150px;
        vertical-align: top;
        width:95%;
        margin: 0 auto;
        text-align: center;
        padding-top: 5px;
    }

    .menu-img .menu-price div{
        display: inline-block;
    }

    .menu-img .menu-price .part{
        width: 100px;
        padding-right: 3px;
    }
    .menu-img .menu-price .part-side{
        width: auto;
        padding-right: 7px;
    }
    .menu-img .menu-price .txt{
        width: 50%;
        font-size: 12px;
        display: none;
    }
    .menu-img .menu-price .no{
        width: auto;
        position: absolute;
        top: 0;
        right: 0;
    }
    .stores{
        padding: 0;
        border-radius: 20px;
        width: 90% !important;
        margin:0 auto!important;
        padding:20px !important;
    }

    .store-sort{
        text-align: center;
    }

    .store-txt {
        text-align: left;
        width: auto;
        display: table;
        margin: 0 auto;
    }


    .store-img img{
        width: 90%;
    }
    .store00{
        height: auto;
    }
    .row{
        margin-right: 0;
        margin-left: 0;
        padding: 0 10px;
        width: 100%;
    }
    .col{
        flex-basis: unset;
        width: 50%;
        float: left;
        padding-left: 5px;
        padding-right: 5px;
    }
    .store00:nth-child(3),.store00:last-child{
        display: none;
    }
    
   
    .benefit-txt-box p{
        display: none;
    }
    .benefit-txt{
        margin-top: 60px;
        font-size: 17px;
    } 


    .btn-st-01.mt50-auto {
        margin: 25px auto 0 auto;
    }
    /* .btn-st-01 span{
        font-size: 14px; */
     /*여기가어디니?*/
    .no-page{
        width: 100%;
        height: 200px;
    }
    
    /* franchise_process*/
    .process-wrap .container{
        padding: 40px 0;
    }
    .process-wrap .tit{
        width: 100%;
    }
    .process-wrap h2, .process-wrap span{
        font-size: 40px;
    }
    .tit h2{
        width: 100vw;
        font-size: 40px;
        line-height: 1em;
        margin-bottom: 0px;
        word-break: keep-all;
    }
    .tit p{
        font-size: 16px;
        line-height: 22px;
    }
    .process-list {
        width: 90%;
        margin: 0 auto;
        margin-top: 30px;
    }
    .process-list li{
        background: #fff;
        margin-bottom: 0;
    }
    .process-list li .step{
        width: 30%;
        padding: 11px 10px;
        height: 50px;
    }
    .process-list li .con .step-tit{
        margin-bottom: 15px;
        width: 100%;
        margin-left: 0;
    }
    .process-list li .con{
        width: 68%;
        height: auto;
        float: left;
        text-align: left;
        padding: 11px 10px;
        word-break: keep-all;
    }
    .process-list li .con .txt{
        font-size: 16px;
        line-height: 20px;
    }
    .process-list img{
        margin: 15px auto;
    }
    
    /* franchise-type */
    .type-wrap .container{
        padding: 40px 0;
    }
    #tab-menu{
        margin-top: 0;
        width: 90%;
        margin: 0 auto;
    }
    #tab-btn li{
        padding: 10px;
    }
    #tab-btn li a{
        padding: 0;
        font-size: 16px;
    }
    #tab-cont{
        padding: 50px 0 0;
    }
    .type-wrap .type-tit{
        margin: 0;
    }
    .type-wrap .type-tit h2{
        font-size: 24px;
        margin-bottom: 10px;
    }
    .type-wrap .type-tit p{
        font-size: 16px;
    }
    .type-wrap .type-tit p span{
        display: block;
    }
    .type-wrap .slider-nav .slick-list {
        margin-top: 10px;
    }
    .type-wrap .slick-prev{
        background-repeat: no-repeat;
        width: 36px;
        height: 30px;
        margin-left: 10px;
    }
    .type-wrap .slick-next{
        background-repeat: no-repeat;
        width: 36px;
        height: 30px;
        margin-right: 10px;
    }
    .slick-cloned{
        width: 15%;
        height: auto;
    }
    .slick-dotted.slick-slider{
        margin-bottom: 0;
    }
    
  
    .fixed-sns-wrap {
        right: 14px;
        bottom: 75px;
    }

    .fixed-sns-wrap li:nth-child(2) {
        margin: 7px 0;
    }

    .fixed-sns-wrap li img {
        width: 50px;
    }

    

}