@charset "utf-8";
/*
 * File       : main.css
 * Author     : Fastweb (IK)
 * Guideline  : FW_DesignSystem.1.0
 *
 * Dependency : css/reset.css
 * Dependency : css/fw-system.css
 * Dependency : css/font.css
 *
 * SUMMARY:
 * 01) MAIN
 */

 /* **************************************** *
 * 01) GLOBAL
 * **************************************** */

/* 대마 0경 */
#main .hero{background-image: url(../img/bg_hero_2.png); background-repeat: no-repeat; background-size: cover; height: 100vh; width: 100%; display: flex; align-items: center; background-position: center;}
#main .hero .title_layout{margin-bottom: 120px;}
#main .hero .title{display: block; font-size: 60px; color: #fff; font-weight: 700; line-height: 72px;}
#main .hero .sub_title{display: block; font-size: 26px; color: #fff; font-weight: 500; margin-bottom: 8px;}

#main .main_quick_menu{display: flex; margin-top: 72px; margin-bottom: 72px; background-color: #f7f7f7; padding: 30px 90px; border-radius: 90px; box-sizing: border-box; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); } /*  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); */
#main .main_quick_menu .title_layout{width: 25%;}
#main .main_quick_menu .title_layout .title{font-size: 28px; margin-bottom: 18px;}
#main .main_quick_menu .title_layout .title .point{color: #1D388C}
#main .main_quick_menu .title_layout .desc{font-size: 16px; color: #3E434A; line-height: 23px;}

#main .main_quick_menu .item_layout{ width: 75%; display: flex; justify-content: space-between;}
#main .main_quick_menu .item_layout .quick_item{ display: flex; flex-direction: column; align-items: center; }
#main .main_quick_menu .item_layout .quick_item .icon{height: 64px; display: inline-block;}
#main .main_quick_menu .item_layout .quick_item .item_title{font-size: 16px; color: #3E434A; margin-top: 12px; display: inline-block;}

#main .location_layout{width: 100%; display: flex; justify-content: space-between; height: 100%; margin-bottom: 16px;}
#main .location_title_layout{ width: 25%; display: inline-block; padding: 40px;}
#main .location{ width: 75%; display: inline-block;}
#main .location .mainSwiper .swiper-slide span{ overflow: hidden; position: absolute; z-index: 30; left: 0; bottom: 40px; width: 100%; padding: 0 20px; color: #fff; text-align: center; font-size: 19px; text-overflow: ellipsis; white-space: nowrap; }
#main .location .mainSwiper .swiper-slide .gd_bg{width: 100%; height: 100%; position: absolute; z-index: 20;background: rgb(0,0,0); background: linear-gradient(0deg, rgba(0,0,0,0.552280287114846) 0%, rgba(255,255,255,0) 60%);}
#main .location_title_layout .location_sub { display: inline-block; width: 100%; text-align: center; position: relative; margin: 6px 0 22px 0; }
#main .location_title_layout > p > span{ display: inline-block; position: relative; padding: 0 20px; background: #fff; color: #242424; font-size: 17px; }
#main .location_title_layout > p::before { display: block; position: absolute; content: ''; left: 0; top: 50%; width: 100%; height: 1px; background: #bdbdbd; }
#main .main_sec_layout {width: 100%; display: flex; justify-content: space-between; height: 100%;}

/* notice */
#main .main_sec_layout .notice_layout{width: calc(43.75% - 12px); background-color: #1D388C; padding: 36px 41px 15px 41px; color: #fff; height: 270px;}
#main .main_sec_layout .notice_layout > .title > h3{ font-size: 22px; margin-bottom: 32px;} 
#main .main_sec_layout .notice_layout > .content {display: flex; justify-content: space-between; margin-bottom: 15px; font-weight: 300;}
#main .main_sec_layout .notice_layout > .content > .title {font-size: 18px;}

/* 숙박 */
#main .main_sec_layout .hotel_layout{width: calc(18.75% - 12px); background-color: #f7f7f7; height: 270px; padding: 36px 41px 15px 41px; overflow: hidden;}
#main .main_sec_layout .hotel_layout > .title > h3{font-size: 22px; margin-bottom: 6px; color: #000;} 
#main .main_sec_layout .hotel_layout .sub_title {font-size: 15px; color: #3E434A;}  
#main .main_sec_layout .hotel_layout .ico_layout {overflow: hidden; position: relative; width: 100%; height: 100%;}
#main .main_sec_layout .hotel_layout .ico_layout > img{transform: translateY(50px);}

/* 특산품 */
#main .main_sec_layout .product_layout{width: calc(18.75% - 12px); background-color: #f7f7f7; height: 270px; padding: 36px 41px 15px 41px; overflow: hidden;}
#main .main_sec_layout .product_layout > .title > h3{font-size: 22px; margin-bottom: 6px; color: #000;} 
#main .main_sec_layout .product_layout .sub_title {font-size: 15px; color: #3E434A;}  
#main .main_sec_layout .product_layout .ico_layout {overflow: hidden; position: relative; width: 80%; height: 100%; margin: 0 auto;}
#main .main_sec_layout .product_layout .ico_layout > img{transform: translateY(10px);}

/* 특산품 */
#main .main_sec_layout .etc_layout{width: calc(18.75% - 12px); background-color: #0070BA; height: 270px; padding: 36px 41px 15px 41px; overflow: hidden;}
#main .main_sec_layout .etc_layout > .title > h3{font-size: 22px; margin-bottom: 6px; color: #fff;} 
#main .main_sec_layout .etc_layout .sub_title {font-size: 15px; color: #fff;}  
#main .main_sec_layout .etc_layout .ico_layout {overflow: hidden; position: relative; width: 80%; height: 100%; margin: 0 auto;}
#main .main_sec_layout .etc_layout .ico_layout > img{transform: translateY(10px);}

 /* swiper JS */ 
 .swiper {
    width: 100%;
    height: 100%;
  }
 .swiper-slide {
    text-align: center;
    font-size: 18px;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
  }
  .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .swiper-pagination{
    position: inherit !important;
  }