.spot-search-area { position: relative; margin: auto; margin-bottom: 60px; padding: 55px 0; font-size: 0; background: #eeeeee; }

.spot-search-input { width: 100%; }
.spot-search-select { max-width: 600px; width: 50%; margin: auto; }

.spot-search-input .sel { display: none; }

.spot-search-box { position: relative; height: 70px; }
.spot-search-box input{
    position: relative; z-index: 5;
    padding: 0 30px; width: 100%; height: 100%;
    font-size: 22px; font-weight: 300; color: #aaaaaa;
    border: none;
}
.spot-search-box button{
    position: absolute; z-index: 10; top: 0; right: 0; width: 70px; height: 100%;
    background: url('/adm/bbs/skin/bbsSpot/image/spot-search.png') no-repeat center;
}

.spot-select-wrap { position: relative; margin: -10px 0; display: flex; align-items: center; justify-content: center; flex-direction: column;}
.spot-select-wrap button{
    position: absolute; z-index: 10; top: 0; right: 0;
    width: 65px; height: 100%;
    background: url('/adm/bbs/skin/bbsSpot/image/spot-search.png') no-repeat center;
}
.spot-select { margin: 10px 0; width: 100%; height: 70px; }
.spot-select select { padding: 0 30px; width: 100%; height: 100%; font-size: 22px; color: #aaaaaa; font-weight: 300; }
.spot-select select option { color: #333; }

.htitle { display: block; margin-bottom: 15px; }

@media(min-width:1025px){
    .spot-search-box input{
        position: relative; z-index: 5;
        padding: 0 30px; width: 100%; height: 100%;
        font-size: 22px; font-weight: 300; color: #aaaaaa;
        border: none;
    }

}
@media (max-width:1024px){
    .spot-search-area { padding: 30px 0; }
    .spot-search-input { display: block; margin-bottom: 5px; width: 100%; padding: 0; }
    .spot-search-box { padding-right: 0; height: 40px; }
    .spot-search-box input { padding: 0 15px;  font-size: 16px; }
    .spot-search-box button { width: 45px; background-size: auto 20px; }

    .spot-search-select { display: block; padding: 0; width: 100%; }
    .spot-select { height: 40px; margin: 5px 0; }
    .spot-select-wrap { padding-right: 0; }
    .spot-select-wrap button { width: 40px; background-size: auto 20px; }



    .spot-select select { padding: 0 15px; font-size: 16px; }

    .htitle { display: block; margin-bottom: 10px; }
}
@media (max-width:768px){
}





/* 리스트 */
.spot-table { width: 100%; text-align: center; }
.spot-table thead tr th { padding: 20px 2px; font-size: 22px; font-weight: bold; background: #4d78da; color: #fff; }
.spot-table thead tr th:last-child { width: 38%; }
.spot-table tbody tr { border-bottom: 1px solid #e5e5e5; }
.spot-table tbody tr td { padding: 20px 5px; font-size: 20px; color: #333; font-weight: 300; }
.spot-table tbody tr td a { font-size: inherit; }

.spot-i-search { display: inline-block; vertical-align: top; width: 34px; height: 34px; background: url('/child/img/icon/spot-i-search.png') no-repeat center; }
.spot-i-n { display: inline-block; vertical-align: top; width: 90px; height: 42px; background: url('/child/img/icon/spot-i-n.png') no-repeat center; }
.spot-i-detail { display: inline-block; vertical-align: top; width: 150px; height: 42px; background: url('/child/img/icon/spot-i-detail.png') no-repeat center; }
.spot-i-r1 { display: inline-block; vertical-align: top; width: 42px; height: 42px; background: url('/child/img/icon/spot-i-r1.png') no-repeat center; }
.spot-i-r2 { display: inline-block; vertical-align: top; width: 42px; height: 42px; background: url('/child/img/icon/spot-i-r2.png') no-repeat center; }
@media (max-width:1024px){
    .spot-table { display: block; text-align: left; border-top: 2px solid #4d78da;}
    .spot-table thead { display: none; }
    .spot-table tbody,
    .spot-table tbody tr { display: block; padding: 7px 0; }
    .spot-table tbody tr td { padding: 5px; display: block; font-size: 13px; }
    .spot-table tbody tr td:nth-child(5) { display: inline-block; padding-right: 20px; }
    .spot-table tbody tr td:nth-child(6) { display: inline-block; }
    .spot-table tbody tr td:nth-child(7) { display: inline-block; }
    .spot-table tbody tr td .sp { display: inline-block; width: 55px; }
    .spot-table tbody tr td strong { font-weight:600; color: #666; }
    .spot-table tbody tr td .sp ~ span { display: inline-block; vertical-align: top; width: calc(100% - 55px); }

    .spot-i-search { width: 20px; height: 20px; background-size: auto 20px; }
    .spot-i-n { width: 74px; height: 34px; background-size: auto 34px; }
    .spot-i-detail { width: 100px; height: 34px; background-size: auto 28px; }
    .spot-i-r1 { width: 34px; background-size: 34px; }
    .spot-i-r2 { width: 34px; background-size: 34px; }
}
@media (max-width:768px){
}





/* 뷰 */
.spot-view-head { margin-bottom: 50px; padding: 30px 0; border-top: 1px solid #333; border-bottom: 1px solid #e1e1e1; }

.spot-preview { display: inline-block; vertical-align: top; width: 50%; }
.spot-info { display: inline-block; vertical-align: top; padding: 20px 0 0 45px; width: 50%; }
.spot-info h3 { margin-bottom: 45px; line-height: 34px; }

.top-img{
    overflow: hidden;7
    position: relative;
    padding-top: calc(380 / 520 * 100%); width: 100%; height: 0;
}
.top-img img{
    position: absolute; top: 0; left: 50%;
    max-width: none; width: auto; height: 100%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}

.spot-preview .thumbnail-ul { margin-top: 10px; }
.spot-preview .thumbnail-ul:after { content: ''; display: block; clear: both; }
.spot-preview .thumbnail-ul > li { float: left; padding: 2px; width: 20%; cursor: pointer; }
.spot-preview .thumbnail-ul > li .img{
    position: relative; overflow: hidden;
    padding-top: calc(72 / 100 * 100%); width: 100%; height: 0;
    background-repeat: no-repeat; background-position: center; background-size: cover;
    filter: saturate(0);
}
.spot-preview .thumbnail-ul > li .img:before{
    content: ''; z-index: 2; position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    border: 1px solid #e1e1e1;
    box-sizing: border-box;
}
.spot-preview .thumbnail-ul > li .img img{
    position: absolute; top: 0; left: 50%;
    max-width: none; width: auto; height: 100%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}

.spot-preview .thumbnail-ul > li.on .img{
    filter: saturate(1);
}
.spot-preview .thumbnail-ul > li.on .img:before{
    border: 4px solid #333333;
}



.spot-info-table .row { padding: 8px 0; font-size: 0; }
.spot-info-table .row i { display: inline-block; vertical-align: top; position: relative; width: 20px; height: 20px; }
.spot-info-table .row i:before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; margin: auto; width: 100%; height: 1px; background: #333; }
.spot-info-table .row .td{
    display: inline-block; vertical-align: top;
    padding: 0 8px; width: calc(100% - 20px);
    font-size: 18px; color: #777777; font-weight: 200;
}

.spot-btn-wrap { margin-top: 45px; text-align: right; font-size: 0; }
.spot-btn-wrap a { display: inline-block; vertical-align: top; margin-left: 10px; }
.spot-btn-wrap a:first-child { margin-left: 0; }



.spot-view-body { margin-bottom: 80px; padding-bottom: 45px; border-bottom: 1px solid #e1e1e1; }
.spot-map { margin-top: 25px; }
.spot-map #map { height: 250px !important; }
.spot-contents { font-size: 18px; color: #777777; font-weight: 200; }

.spot-bottom-button .button { width: 180px; }
@media (max-width:1024px){
    .spot-preview { display: block; margin-bottom: 30px; padding: 0; width: 100%; }
    .spot-info { display: block; padding: 0; width: 100%; }
    .spot-info h3 { margin-bottom: 5px; }
    .spot-info-table .row { padding: 5px 0; }
    .spot-info-table .row .td { font-size: 14px; }
    .spot-btn-wrap { margin-top: 30px; text-align: left; }
    .spot-btn-wrap a { margin-left: 3px; }
    .spot-btn-wrap a img { width: auto; height: 35px; }

    .spot-view-body { margin-bottom: 50px; }
    .spot-contents { font-size: 15px; }
}
@media (max-width:768px){
    .spot-contents { font-size: 13px; }
}