@charset "utf-8";


/* sub-list */
.subHeader__section.--bgType1{background: #bfcaf3;} /* 하이타리트 */
.subHeader__section.--bgType2{background: #b8d7f7;} /* 위키 */
.subHeader__section.--bgType3{background: #dcd1f5;} /* 이벤트&notice */

.subHeader__area.--imgType1::before{width: 230px; height: 230px; bottom: 30px; right: 40px; opacity: 1; background-repeat: no-repeat; background-size: 100% auto;}
.subHeader__area.--imgType1.highlight::before{background-image: url(/static/front/thingsToDo/foodTrip/images/sub/Highlight_icon.png); }
.subHeader__area.--imgType1.notice::before{background-image: url(/static/front/thingsToDo/foodTrip/images/sub/notice_icon.png); }
.subHeader__area.--imgType1.wiki::before{background-image: url(/static/front/thingsToDo/foodTrip/images/sub/wiki_icon.png); }


.recommend{margin-top: 40px; display: flex; align-items: center; padding-top: 40px;}
.recommend strong{font-size: 22px; position: relative; padding: 0 60px 0 72px;}
.recommend strong::before{content: ''; position: absolute; left: 0; top: -40px; display: inline-block; width: 124px; height: 72px; background: url(/static/front/thingsToDo/foodTrip/images/sub/bg_reco_tit.png) 0 0 / 100% 100% no-repeat;}
.slide-container{position: relative;}
.js-recommend-swiper{margin: 0 20px; position: static;}
.recommend ul{height: 52px;}
.recommend ul li{height: 100%; width: auto;}
.recommend ul li a{font-size: 20px; line-height: 50px; height: 100%; padding: 0 25px; border-radius: 26px; background-color: #fff; display: block; border: 1px solid #bbbbbb;}
.recommend ul li a.on{background-color: #18237c; color: #fff; border: 1px solid #18237c;}
.js-recommend-swiper .swiper-button-prev, .js-recommend-swiper .swiper-button-next{text-indent: -9999px; border-radius: 50%; width: 36px; height: 36px; margin-top: 0; transform: translateY(-50%); box-shadow: 0px 4px 13px 0px rgba(0, 0, 0, 0.09);}
.js-recommend-swiper .swiper-button-prev{left: 0;}
.js-recommend-swiper .swiper-button-next{right: 0;}
.js-recommend-swiper .swiper-button-prev::after, .js-recommend-swiper .swiper-button-next::after{width: 36px; height: 36px; background: url(/static/front/thingsToDo/foodTrip/images/sub/list_slide_arrow.png) 0 0 / 100% auto no-repeat;}
.js-recommend-swiper .swiper-button-next::after{background-position: 0 -36px;}


/* sub-view */
.info-wrap{border: 1px solid #e0e0e0; border-radius: 20px; padding: 10px 30px;}
.info-wrap ul li{color: #333; border-bottom: 1px solid #e0e0e0; padding: 20px 0 20px 30px; position: relative;}
.info-wrap ul li:last-child{border-bottom: none;}
.info-wrap ul li::before{content: ''; position: absolute; left: 0; top: 24px; display: inline-block; width: 19px; height: 19px; background: url(/static/front/thingsToDo/foodTrip/images/sub/viewbg_info.png) 0 0 / 100% auto no-repeat;}
.info-wrap ul li.address::before{background-position: 0 -19px;}
.info-wrap ul li.phone::before{background-position: 0 -38px;}
.info-wrap ul li.hour::before{background-position: 0 -57px;}
.info-wrap ul li.traffic::before{background-position: 0 -76px;}
.info-wrap ul li .btn-map{display: inline-block; position: relative; margin-left: 10px; text-align: left; padding: 0 10px; font-size: 14px; color: #6768ab; height: 26px; line-height: 24px; border-radius: 13px; border: 1px solid #e0e0e0; width: 116px; }
.info-wrap ul li .btn-map::after{content: ''; display: inline-block; position: absolute; right: 10px; top: 9px; width: 11px; height: 7px; background: url(/static/front/thingsToDo/foodTrip/images/sub/btn_map_arrow.png) 0 0 / 100% 100% no-repeat;}
.info-wrap ul li .btn-map.off::after{transform: rotate(180deg);}
.map-area{margin: 20px 0 0 -30px; position: relative; height: 510px; width:100%}
.map-area > img{height: 100%;}
.map-area .marker{width: 35px; height: 50px; display: inline-block; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}

.template__type1__section h3{font-size: 24px; font-weight: 800; color: #333; margin-bottom: 20px;}
.js-releated-swiper{padding-bottom: 40px;}
.js-releated-swiper .thumbnail{width: 100%; border-radius: 10px; display: block; height: 210px; overflow: hidden;}
.js-releated-swiper .thumbnail img{width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;}
.js-releated-swiper .swiper-slide{width: calc((100% - 36px) / 4);}
.js-releated-swiper .title{margin-top: 15px;}
.js-releated-swiper .title p{display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 17px; overflow: hidden;}
.js-releated-swiper .swiper-pagination-bullets{bottom: 0;}
.js-releated-swiper .swiper-pagination-bullet{width: 14px; height: 14px; background-color: #333; margin: 0 7px;}

  @media (max-width: 1200px) {

    /* sub-list */
    .subHeader__area.--imgType1::before{width: 120px; height: 120px; right: 20px;}

    .recommend strong{padding: 0; margin-bottom: 24px; font-size: 18px;}
    .recommend strong::before{width: 74px; height: 43px; left: 145px; bottom: 0; top: auto;}
    .recommend{display: block; padding-top: 20px; margin-top: 20px;}
    .slide-container{margin-top: 20px;}
    .js-recommend-swiper{margin: 0;}
    .recommend ul{height: 40px;}
    .recommend ul li a{font-size: 11px; height: 40px; line-height: 38px; padding: 0 12px; border-radius: 20px;}
    .js-recommend-swiper .swiper-button-prev, .js-recommend-swiper .swiper-button-next{display: none;}


    /* sub-view */
    .info-wrap{border-top: 2px solid #cccccc; border-radius: 0; border-left: none; border-right: none; border-bottom: none; padding: 0;}
    .info-wrap ul li{font-size: 13px; padding: 15px 0 15px 25px;}
    .info-wrap ul li::before{width: 15px; height: 15px; top: 18px;}
    .info-wrap ul li.address::before{background-position: 0 -15px;}
    .info-wrap ul li.phone::before{background-position: 0 -30px;}
    .info-wrap ul li.hour::before{background-position: 0 -45px;}
    .info-wrap ul li.traffic::before{background-position: 0 -60px;}
    .info-wrap ul li .btn-map{margin: 5px 0 0 0; width: 85px; font-size: 10px; height: 20px; line-height: 18px; padding: 0 7px; border-radius: 10px;}
    .info-wrap ul li .btn-map::after{width: 7px; height: 5px; top: 7px; right: 7px;}
    .map-area{margin-left: -25px; height: 330px;}
    .map-area .marker{width: 26px; height: 36px;}

    .template__type1__section h3{font-size: 18px; margin-bottom: 12px;}
    .js-releated-swiper{padding-bottom: 25px;}
    .js-releated-swiper .swiper-slide{width: calc((100% - 10px) / 2);}
    .js-releated-swiper .thumbnail{height: 105px;}
    .js-releated-swiper .title p{font-size: 12px;}
    .js-releated-swiper .swiper-pagination-bullet{width: 10px; height: 10px; margin: 0 5px;}
    
  }
  @media all and (max-width:799px) {
    #moFix {display : none;}
  }