#cms-app-wrapper{width:100%}
#cms-app-container{max-width:1130px;margin:0 auto;padding:0 20px}
#breadcrumb-wrapper{width:100%;text-align:center;margin-top:20px}
#breadcrumb-container{display:inline-block}
#breadcrumb-container>li{float:left;margin-left:8px}
#breadcrumb-container>li:first-child{margin-left:0}
#breadcrumb-container>li>a,#breadcrumb-container>li>div{font-family:Commissioner,serif;font-size:14px;font-weight:600;color:#262626;text-transform:uppercase}
#cms-app-h1{margin-top:10px;font:700 clamp(2rem,2.083vw,2.5rem)/1 Commissioner;color:#262626;text-align:center}
#area-guide-categories-container{margin-top:25px;width:100%;text-align:center}
#area-guide-categories-list{display:inline-flex;justify-content:center}
#area-guide-categories-list>li{margin-left:10px;margin-top:10px}
#area-guide-categories-list>li:first-child{margin-left:0}
#area-guide-categories-list>li>a{border:1px solid #dcdcdc;border-radius:10px;padding:10px 12px;font:400 clamp(0.95rem,0.833vw,1rem)/1 Commissioner;color:#262626}
#area-guide-categories-list>li.selected>a{background-color:#262626;border:1px solid #262626;color:#fff}
#area-guide-list-container{margin:60px auto 0;max-width:1090px}
#area-guide-list{width:100%}
.area-guide-content{border-radius:20px;overflow:hidden;cursor:pointer}
.area-guide-content figure{position:relative;width:100%;padding-bottom:57.57%;overflow:hidden}
.area-guide-content figure img{position:absolute;width:100%;height:100%;inset:0;margin:auto;object-fit:cover}
.area-guide-titles{background:#f4f4f4 url("../img/app/inside.svg") 97% 50% no-repeat;padding:8px 35px 8px 10px}
.area-guide-title{font:600 clamp(1.025rem,0.938vw,1.125rem)/1 Commissioner;color:#262626}
.area-guide-distance{margin-top:5px;padding-left:18px;background:url("../img/app/arrow-distance.svg") 0 50% no-repeat;font:400 clamp(1.025rem,0.938vw,1.125rem)/1 Commissioner;color:#262626}
.area-guide-popUp-window{position:fixed;width:100%;height:100%;top:0;left:0;background-color:rgba(38,38,38,.8);z-index:999999;align-items:center;justify-content:center;opacity:0;visibility:hidden;pointer-events:none}
.area-guide-popUp-window.open{opacity:1;visibility:visible;pointer-events:auto}
.area-guide-popUp{position:relative;width:600px;border-radius:20px;overflow:hidden}
.area-guide-popUp-close{position:absolute;width:50px;height:50px;top:20px;right:20px;z-index:20;cursor:pointer}
.area-guide-popUp-photo-container{width:100%}
.area-guide-popUp-photo{position:relative;width:100%;padding-bottom:57.57%;overflow:hidden}
.area-guide-popUp-photo img{position:absolute;width:100%;height:100%;inset:0;margin:auto;object-fit:cover}
.area-guide-popUp-contents{padding:20px 30px;background-color:#fff}
.area-guide-popUp-header{align-items:flex-start}
.area-guide-popUp-header-title{font:700 clamp(1.14rem,1.25vw,1.5rem)/1 Commissioner;color:#262626}
.area-guide-popUp-header-category{margin-top:10px;display:inline-block;padding:10px;background-color:#f1f1f1;border-radius:5px;font:400 clamp(0.95rem,0.833vw,1rem)/1 Commissioner;color:#262626}
.area-guide-popUp-link{margin-left:auto}
.area-guide-popUp-desc{margin-top:40px;position:relative;padding:6px 20px 16px 20px;border:1px dotted #262626;border-radius:12px;font:400 clamp(0.95rem,0.833vw,1rem)/1.3 Commissioner;color:#767676}
.area-guide-popUp-desc>span{display:inline-block;padding:0 10px;background-color:#fff;font:700 clamp(0.95rem,0.833vw,1rem)/1 Commissioner;color:#767676;position:absolute;left:13px;top:-11px;z-index:2}
.area-guide-popUp-linkDirections{margin-top:30px;width:100%;padding:15px 20px;background-color:#b0a06c;border-radius:5px;font:400 clamp(1.025rem,0.938vw,1.125rem)/1 Commissioner;color:#fff;text-align:center}
.area-guide-popUp-col{margin-top:18px;width:100%}
.area-guide-popUp-colTitle{font:700 clamp(0.95rem,0.833vw,1rem)/1 Commissioner;color:#262626}
.area-guide-popUp-colVal{margin-left:6px;font:400 clamp(0.95rem,0.833vw,1rem)/1 Commissioner;color:#767676}

@media (min-width:1200px) {
    #area-guide-list>li{margin-top:60px;margin-left:3.5%;width:31%}
    #area-guide-list>li:nth-child(-n+3){margin-top:0}
    #area-guide-list>li:nth-child(3n+1){margin-left:0}
}
@media (min-width:765px) and (max-width:1199px) {
    #area-guide-list>li{margin-top:50px;margin-left:4%;width:48%}
    #area-guide-list>li:nth-child(-n+2){margin-top:0}
    #area-guide-list>li:nth-child(2n+1){margin-left:0}
}
@media (max-width:1199px) {
    #cms-app-left{width:100%;text-align:center;margin-bottom:25px}
    #cms-app-right{padding-left:0;width:100%}
    .cms-app-breakfast{display:inline-flex}
    #area-guide-categories-container{margin-top:25px}
    #area-guide-list-container{margin:30px auto 0}
    .area-guide-popUp{position:relative;width:500px;border-radius:20px;overflow:hidden}
    .area-guide-popUp-contents{padding:17px 20px;background-color:#fff}
    .area-guide-popUp-desc{margin-top:30px}
    .area-guide-popUp-linkDirections{margin-top:20px}
}
@media (max-width:764px) {
    #area-guide-list>li{margin-top:40px;width:100%}
    #area-guide-list>li:first-child{margin-top:0}
    #cms-app-container{padding:0 10px}
    #area-guide-categories-container{margin-top:15px}
    #area-guide-categories-list>li{margin-top:10px}
    .area-guide-popUp-close{position:absolute;width:40px;height:40px;top:10px;right:10px;z-index:20;cursor:pointer}
    .area-guide-popUp-close img{width:40px;height:auto}
    .area-guide-popUp{position:relative;width:calc(100% - 20px);margin: 0 auto}
    .area-guide-popUp-contents{padding:15px 12px;background-color:#fff}
}