/* POPUP CSS */
.new-layer-popup {
    position: absolute;
    display: table;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.new-layer-popup .cell {
    height:100%;
}

.cell {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.pop-content {
    z-index: 0;
    background: #fff;
    height: 100%;
    display: inline-block;
    overflow-x: auto;
    position: relative;
    -webkit-box-shadow: 0px 3px 31px -12px rgba(0,0,0,0.52);
    -moz-box-shadow: 0px 3px 31px -12px rgba(0,0,0,0.52);
    box-shadow: 0px 3px 31px -12px rgba(0, 0, 0, 0.52);
}

.poi-pop-width {
    width: 600px;
}

.common-pop-width {
    width: 500px;
}

.feed-pop-width {
    width:600px;
}

.planner-pop-width {
    width: 500px;
    height: 550px;
}

.create-plan-popup, .create-recommend-plan-popup {
    width: 580px;
    height: 550px;
}

.planner-add-poi-width {
    width: 550px;
    height: 100%;
}

.time-input {
    width:48%!important;
}

/* PLANNER CSS */

.main-recommend-list {
    background:#fff;padding: 20px 15%;
}



/* MAIN CSS */
.main-title-box {
    width: 100%;
    background-color: #FFF;
    text-align: center;
    overflow: hidden;
    margin-bottom:30px;
}

.title_t1 {
    clear:both;
    width:100%;
    font-size:3rem;
    display: block;
    text-align: center;
}

.center {
    /* display: -webkit-flex;
    display: flex; /** 공부해보자 **/
    justify-content: center;
    align-items: center;
}

.sub_title_t1 {
    margin:10px auto;
    font-size:.9rem
}

.main-city-list {
    top: 10%;
    width: 100%;
    font-weight:bold;
    padding:0 5px;
}

.main-city-list ul li {
    padding: 5px 10px;
    background:rgba(0, 0, 0, 0.5);
    /*border: 1px solid rgba(0, 0, 0, 0.5);*/
    float: left;
    margin: 8px;
    border-radius: 5px;
    cursor:pointer;
    width:calc(100%/6);
}

.main-city-list ul li:hover {
    padding: 5px 10px;
    /*border: 1px solid rgba(255, 255, 255, 0.5);*/
    background: rgba(255, 255, 255, 0.5);
    color: #000;
}

.main-category-img,
.main-category-recommended-img {
    height:360px;
    background-size: 180%;
    background-position: center center;
    position: relative;
    font-size:30px;
    font-weight: bold;
    display:inline-block;
    cursor: pointer;
    background-color: #fff;
    float:left;
}

.main-category-img .banner-bg-image {
    background-size: 200%;
    /* background-size: cover; */
    background-position: center center;
    transition: 0.5s;
    cursor: pointer;
    position:relative;
}



.main-category-img .banner-bg-act:hover {
    background-size: 198%;
    -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,.5);
    box-shadow: inset 0 2px 4px rgba(0,0,0,.5);
    color: #fff;
    font-size:2rem;
}

.main-category-recommended-img {
    height:230px;
    background-color: initial;
}

.main-category-recommended-img .banner-bg-image {
    background-size: 200%;
    /* background-size: cover; */
    background-position: center center;
    transition: 0.5s;
    cursor: pointer;
}

.main-category-recommended-img .banner-bg-act:hover {
    background-size: 195%;
    -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,.5);
    box-shadow: inset 0 2px 4px rgba(0,0,0,.5);
    color: #fff;
    font-size: 120%;
    text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
}

.main-category-l1 {width:calc((100% /3.001)*2); padding: 0 15px 25px 15px;}
.main-category-l2 {width:calc(100% / 2); padding: 0 15px 25px 15px;}
.main-category-l3 {width:calc(100% /3.001); padding: 0 15px 25px 15px;}
.main-category-l4 {width:calc(100% /4.001); padding: 0 15px 25px 15px;}

.text-center {
    text-align: center;
}
.text-contrast {
    color: #FFF;
}
.va-container {
    display: table;
    width: 100%;
}
.va-middle {
    vertical-align: middle;
    display: table-cell;
}


.main-schedule-contents-list {text-align:center;width:100%;background: #fff;}
.main-schedule-contents-list-box {display:inline-block;overflow: hidden;}
.main-schedule-contents-list-box-part {float:left;width:33.3%}
.main-schedule-list-img { margin:10px; background-position:center center; background-size:cover; }
.main-schedule-list-title-box {position:relative }
.main-schedule-list-title { position:absolute;bottom:-1px;font-size:15px; }
.main-schedule-list-user-profile-box { color:#fff;padding:10px;margin-bottom:0px;background-color: rgba(20, 20, 20, 0.7);height:20% }
.main-schedule-list-user-profile-name { margin:10px 0;font-style:italic;color:#eee }


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

    .nav-top-logo-image {
        width:150px;
    }

    .main-box-container-control-area-title {
        font-size: 2.5rem;
    }

    .main-box-container-control-area-subtitle {
        font-size: 1.2rem;
    }

    .main-recommend-list {
        padding: 10px;
    }


    /* PROFILE CSS */

    .layer-personal-page-box .page-view-layer-top-contents ul li {
        float: left!important;
        width: calc(100%/2)!important;
        text-align: center!important;
        overflow: hidden!important;
    }


    .layer-select-language-box .pop-content {
        width: 100%!important;
    }

    .poi-main-category-select-popup-box .pop-content,
    .poi-sub-category-select-popup-box .pop-content,
    .poi-search-option-select-popup-box .pop-content,
    .poi-info-popup-box .pop-content{
        width:100%!important;
    }

    .wish-select-form .planner-pop-width{
        width: 100%!important;
        max-width: 100%!important;
    }


    /* POPUP CSS */
    .poi-pop-width, .common-pop-width, .feed-pop-width {
        width: 100%!important;
        height: 100%!important;
    }


    .pop-layer-login-box, .pop-layer-signup-box {
        width: 100%!important;
    }


    .form-line-box-left-input {
        width: 100%!important;
    }

    .form-line-box-left-text {
        display:none!important;
    }

    .planner-map-set-city-list .planner-map-set-city-list-width, .planner-page-set-city-list-width  {
        /*width: auto!important;*/
    }

    .planner-add-poi-width {
        width:100%!important;
    }

    /*PLANNER CSS*/

    .planner-contents-list>ul li {
        float: left!important;
        width: calc(100% / 1)!important;
        padding: 10px!important;
    }

    /* MAIN CSS */
    .main-category-l1 {width:100%; padding:0;height: 250px;}
    .main-category-l2 {width:100%; padding:0;height: 250px;}
    .main-category-l3 {width:100%; padding:0;height: 250px;}
    .main-category-l4 {width:100%; padding:0;}

    .main-page .grid-default {
        padding-left:0!important;
    }

    .index-content .inner {
        max-width: 1200px!important;
        margin: 0 auto;
        padding: 0!important;
    }


    .main-top-contents-text {
        text-align:left;
        font-size:1rem!important;
        line-height:1.2rem!important;
        font-weight: bold;
    }

    .main-top-contents-text>p:nth-child(1) {
        font-size:1.1rem!important;
    }


    .main-people-list ul li {
        float: left;
        text-align: center;
        width: calc(100%/2)!important;
        margin:10px 0;
    }

    .main-people-list .main-profile-img-thumb {
        height: 120px!important;
        width: 120px!important;
        border-radius: 80px!important;
        -moz-border-radius: 80px!important;
        -webkit-border-radius: 80px!important;
    }

    .main-people-list .main-profile-name {
        line-height:1.5rem!important;

    }

    .main-people-list .main-profile-explain {
        line-height:1.5rem!important;
    }

    .main-city-list ul li {
        padding: 2px 5px;
        margin:3px;
        font-size:.7rem!important;
    }

    .main-city-list ul li:hover {
        padding: 2px 5px;
        margin:3px;
        font-size:.7rem!important;
    }

    .planner-page-set-city-list ul {
        /*width:338px!important;*/
    }


    /*popup*/

    #new-popup-layer .pop-layer {
        width:100%!important;
    }

}

@media screen and (min-width: 580px) and (max-width: 1080px) {

    .main-box-container-control-area-title {
        font-size: 3rem;
    }

    .main-box-container-control-area-subtitle {
        font-size: 1.4rem;
    }


    /* PROFILE CSS */

    .layer-personal-page-box .page-view-layer-top-contents ul li {
        float: left!important;
        width: calc(100%/4)!important;
        text-align: center!important;
        overflow: hidden!important;
    }

    /* POPUP CSS */
    .poi-pop-width, .common-pop-width,
    .feed-pop-width {
        width: 100%!important;
        height: 100%!important;
    }

    .layer-select-language-box .pop-content {
        width: 100%!important;
    }


    .pop-layer-login-box, .pop-layer-signup-box {
        width: 100%!important;
    }

    .form-line-box-left-input {
        width: 100%!important;
    }

    .form-line-box-left-text {
        display:none!important;
    }

    .planner-map-set-city-list .planner-map-set-city-list-width, .planner-page-set-city-list-width  {
        /*width: auto!important;*/
    }

    .planner-add-poi-width {
        width:100%!important;
    }

    /*PLANNER CSS*/
    .planner-contents-list>ul li {
        float: left;
        width: calc(100% / 2)!important;
        padding: 10px;
    }

    /* MAIN CSS */
    .main-category-l1 {width:100%; padding:0;height: 250px;}
    .main-category-l2 {width:100%; padding:0;height: 250px;}
    .main-category-l3 {width:100%; padding:0;height: 250px;}


    .main-page .grid-default {
        padding-left:0!important;
    }

    .index-content .inner {
        max-width: 1200px!important;
        margin: 0 auto;
        padding: 0!important;
    }


    .main-top-contents-text {
        text-align:left;
        font-size:1rem!important;
        line-height:1.5rem!important;
        font-weight: bold;
    }

    .main-top-contents-text>p:nth-child(1) {
        font-size:1.5rem!important;
    }

    .main-people-list ul li {
        float: left;
        text-align: center;
        width: calc(100%/3)!important;
        margin:10px 0;
    }

    .main-people-list .main-profile-img-thumb {
        height: 120px!important;
        width: 120px!important;
        border-radius: 80px;
        -moz-border-radius: 80px;
        -webkit-border-radius: 80px;
    }

    .main-people-list .main-profile-name {
        line-height:1.5rem!important;

    }

    .main-people-list .main-profile-explain {
        line-height:1.5rem!important;
    }


    .main-city-list ul li {
        padding: 2px 5px;
        margin:3px;
        font-size:.7rem!important;
    }

    .main-city-list ul li:hover {
        padding: 2px 5px;
        margin:3px;
        font-size:.7rem!important;
    }

    .planner-page-set-city-list ul {
        /*width:338px!important;*/
    }

}

@media screen and (min-width: 1080px) {


    .main-box-container-control-area-title {
        font-size: 4rem;
    }

    .main-box-container-control-area-subtitle {
        font-size: 1.6rem;
    }


    /* PROFILE CSS */

    .layer-personal-page-box .page-view-layer-top-contents ul li {
        float: left!important;
        width: calc(100%/4)!important;
        text-align: center!important;
        overflow: hidden!important;
    }

    /* POPUP CSS */
    .poi-pop-width {
        width: 600px;
    }

    .common-pop-width {
        width: 500px;
    }

    .feed-pop-width {
        width:600px;
    }

    .layer-create-finder-box  .common-pop-width {
        height:580px;
    }

    .pop-layer-login-box, .pop-layer-signup-box {
        width: 450px;
    }

    .planner-map-set-city-list .planner-map-set-city-list-width, .planner-page-set-city-list-width  {
        /*width: 800px;;*/
    }

    .layer-select-language-box .pop-content {
        width: 450px;
    }

    /*PLANNER CSS*/

    .planner-contents-list>ul li {
        float: left;
        width: calc(100% / 3);
        padding: 10px;
    }

    /* MAIN CSS */
    .main-category-l1 {width:calc((100% /3.001)*2); padding: 0 15px 25px 15px;}
    .main-category-l2 {width:calc(100% / 2); padding: 0 15px 25px 15px;}
    .main-category-l3 {width:calc(100% /3.001); padding: 0 15px 25px 15px;}
    .main-category-l4 {width:calc(100% /4.001); padding: 0 15px 25px 15px;}

    .index-content .inner {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 10px;
    }

    .main-top-contents-text {
        text-align:left;
        font-size:1.8rem;
        line-height:2.1rem;
    }

    .main-top-contents-text>p:nth-child(1) {
        font-size:2.2rem;
    }

    .planner-page-set-city-list ul {
        /*width:390px;*/
    }

}