@import url(common.css);
@import url(map.css);

/*basic*/
.container{width: 1200px; margin: 0 auto; position: relative;}
.fl{float: left;}
.fr{float: right;}
a{text-decoration: none;}
a:hover{text-decoration: none;}

/*active*/
.white{color: #ffffff !important;}
.active{display: block !important;}

/*============================ defalut ==================================*/
/*======= 헤더 ======*/
#header{position: fixed;z-index:2000;width:100%;height:73px;background: rgba(255,255,255,0.8);top:0; left: 0px; padding-top: 10px; transition: top 0.2s ease-in-out; -webkit-transition: top 0.2s ease-in-out -moz-transition: top 0.2s ease-in-out; -ms-transition: top 0.2s ease-in-out; -o-transition: top 0.2s ease-in-out}
.header_bg{display: block;position:fixed;width:100%;height:73px;background-color:#ffffff;opacity: 1;z-index: 1900;top: 0; left: 0; margin-top: -80px;box-shadow: 1px 1px 6px gray;}
.container .h-logo{float: left;}

/*========= pc 메뉴 =======*/
.top-nav{position: relative; z-index: 3000; float: right;}
.top-nav > ul > li{float: left; padding: 10px 25px 22px; text-align: center;}
.top-nav > ul > li > a{display: block; font-size: 20px; font-weight: bold; color: #7e7e7e;}
.top-nav > ul > li:hover{border-bottom: 3px solid #000000;}
.top-nav > ul > li:hover > a{color: #000000; text-decoration: none;}

.top-nav > ul > li > a > .hover-anchur{display: block; position: absolute; bottom: 2px; z-index: 9999; width: 0;height: 0;border-right: 8px solid transparent;border-left: 8px solid transparent;border-bottom: 10px solid #000000;}
.top-nav > ul > li:hover > .hover-anchur{display: block;}

/*========= pc 서브메뉴 ========*/
.sub-gnb-wrap{position: absolute; width: 100%; min-width: 1140px; top: 63px; right: 0;}
.sub-gnb-head{width: 24%; height: 100%; float: left;}
.sub-gnb-head p{margin: 40px 0px 0px 0px; font-size: 23px; font-weight: bold; color: #ffffff; text-align: center;}
.sub-gnb-head .divide-line{display: block; width: 44px; height: 3px; background: #ffffff; margin: 27px auto 29px;}
.sub-gnb-head .sub-gnb-img{width: 140px; height: 140px; margin: 0px auto;}
.sub-gnb{width: 76%; height: 100%; float: left; padding: 0px 0px 0px 20px;}
.sub-gnb li{float: left; width: 31.3%; height: 40px; line-height: 40px; border: 1px solid #000000; margin: 30px 0px 0px 15px; }
.sub-gnb li a{display: block; color: #000000; font-size: 20px; text-align: center;}
.sub-gnb li:hover{background: #63dbda; border: none;}
.sub-gnb li:hover a{font-weight: bold; text-decoration: none;}


.sub-gnb-bg{width: 100%; height: 295px; margin: 62px auto 0px; background: url(../fnc_images/main/sub_lnb_bg2.png) no-repeat center center;}
.header-hover-bg{display: block; width: 100%; height: 100%; min-height: 100%; position: fixed; z-index: 1600;  background: rgba(0,0,0,0.5);}


/*========= 모바일 메뉴 =======*/
.menu_toggle_btn{display: none; width: 40px; height: 40px; position: relative; right: 0; top: 25px; cursor: pointer; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out;}
.menu_toggle_btn span{display: block; position:absolute;right:0;top:-2px;width:50%;height:3px;background:#333;content:'';transition:all 0.3s;margin-left:15%;border-radius: 4px;}

.menu_toggle_btn:before{position:absolute;right:0;width:60%;height:3px;background:#333;content:'';transition:all 0.3s;margin-left:15%;border-radius: 4px;}
.menu_toggle_btn:after{position:absolute;right:0;width:70%;height:3px;background:#333;content:'';transition:all 0.3s;margin-left:15%;border-radius: 4px;}

.menu_toggle_btn:hover:before{width: 70%}
.menu_toggle_btn:hover span{width: 70%;}

.menu_toggle_btn:before{transform:translateY(-12px);}
.menu_toggle_btn:after{transform:translateY(8px);}

/*jquery에서 불러낼 클래스 "menu-open" */
.menu_toggle_btn.menu-open:before{width: 70%; transform:translateY(0px) rotate(135deg);}
.menu_toggle_btn.menu-open:after{width: 70%; transform:translateY(0px) rotate(-135deg);}

.menu_toggle_btn.menu-open span{opacity:0;}

/*===토글버튼 클릭시 나오는 모바일메뉴===*/
#m_nav{display: none;}
.m_gnb_area{position: fixed;top:73px; right:0px; width:250px;height:100%;min-height:100%;background:#ffffff;z-index:3000;}

.m_gnb{width:250px;margin:0 auto;}

/*주메뉴 */ 
.m_gnb > li{background:#ababab;}
.m_gnb > li > a{display:block;height:40px;line-height:28px;color:#fff;font-size:1.125em;font-size:1.125rem;padding:7px 20px; border-bottom:1px solid #000000;}

/*서브메뉴*/
.m_gnb > li > ul{display:none;}
.m_gnb > li > ul > li{background:#ffffff;}
.m_gnb > li > ul > li> a{ display:block;height:35px;line-height:25px;font-size:1em;font-size:1rem;color:#000000;padding:5px 20px;}

.m-gnb-area-bg{display: block; width: 100%; height: 100%; min-height: 100%; position: fixed; z-index: 1600;  background: rgba(0,0,0,0.5);}

/*========= 메인비주얼 =========*/
#main_visual_area{width: 100%; height: auto;}
.swiper-slide{position: absolute; width: 100%; height: 763px; }
.swiper-slide > img{width: 100%; height: 100%;}


/*============ 메인컨텐츠 =========*/

/*==가맹점 찾기==*/
#merchant-find-area{width: 100%; max-width: 1200px; height: 580px; border: 12px solid red; background: #ffffff; position: absolute; top: -190px; left: 0; box-sizing: border-box; z-index: 1000; }
.find-top-area{width: 70%;height: 100%; min-height: 106px; margin: 30px auto 30px;}
.find-top-area h2{font-size: 35px;font-weight: bold;text-align: center;}
.find-top-area h2 > .red{display: inline-block; color: #ff0000;}
.find-top-area h2 .fta_line{display: block; width: 6%; height: 3px; margin: 20px auto 10px;background: #000000; }
.find-top-area > .red{font-size: 22px; font-weight: 400;}
.find-top-area p{font-size: 22px; font-weight: 400; text-align: center;}

.find-bottom-area{height: auto;}

/*왼쪽검색부분*/
.merchant-search-area{height: 100%; min-height: 190px; margin-top: 50px;} 
.shop-name-search{width: 80%; height: 50px !important; border: 2px solid #ff0000; border-radius: 23px; margin:0px auto 50px;}
.shop-name-search input{width: 100%; height: 45px !important; border: none; font-size: 25px; font-weight: bold; border-radius: 23px; text-align: center;}
input[type=text]::-ms-clear {display: none;} 
.industry-name-search{width: 80%; height: 50px; border: 2px solid #ff0000; border-radius: 23px; margin: 0 auto; }
.industry-name-search select{width: 100%; height: 45px; border: none; padding: 0px 0px 0px 115px !important; font-size: 25px; font-weight: bold; border-radius: 30px; -webkit-appearance: none;-moz-appearance: none;appearance: none; background: url(../fnc_images/main/map_icon_02.png) no-repeat 95% 50%;} 
.industry-name-search select::-ms-expand {display: none;}

.merchant-search-area div{position: relative;}
.merchant-search-area div div{position: absolute; top:0; right: 20px; top: 50%; transform: translateY(-50%);}
.merchant-search-area div div img{width: 100%; height: 100%; }

.search_btn{width: 137px; height: 67px; border: 3px solid #000000; margin: 60px auto 0px;}
.search_btn a{display: block; width: 125px; height: 56px; background: #000000; margin: 3px auto 0px; text-align: center; font-size: 38px;color: #ffffff;}
.search_btn a:hover{text-decoration: none; color: #ffffff;}


/*오른쪽지도부분*/
.map-search-area{height: 420px; height: 371px; background: url(../fnc_images/main/map_01.png) no-repeat top center; position: relative;}
.map-search-area ul li{position: absolute; background-size: contain;}
.map-search-area ul li a{display: block; position: absolute;width: 100%; font-size: 18px; color: #4f4f4f; font-weight: 600; cursor: pointer;text-align: center;}
.map-search-area ul li a:hover{text-decoration: none;}

/*이전버튼*/
.prev-map-btn{display: none; position: absolute; width: 44px; height: 44px; top: 0px; right: 60px; cursor: pointer;}
.prev-map-btn img{width: 100%; height: 100%;}

/*==퀵메뉴==*/
#main-quick-area{width: 100%; height: 235px; padding-top: 475px;padding-bottom: 315px;}


/*==콘텐츠배너==*/
#contents-banner{position: relative; width: 100%; height: 100%; min-height: 320px; background: url(../fnc_images/main/contents_banner_bg.png) no-repeat center center; text-align: center; background-size: cover; margin-bottom: 90px; padding-top: 45px;}
#contents-banner p{font-size: 40px; font-weight: bold; text-align: center; line-height: 58px; padding-top: 60px;}
#contents-banner .vouture-img-box img{display: block; margin-left: auto; margin-right: auto;}
#contents-banner p span{font-size: 30px; font-weight: normal;}

/*==팝업&공지사항존==*/
#section-bottom{height: 100%; height: 260px; overflow: hidden;}
/*팝업존*/
#popupzone-area{position: relative; float: left;width: 48.3%; min-height: 260px;}

.pop_num{display: none;}
.popup-title{width: 100%; height: 30px; background: #00221b;}
.popup-title p{float: left; font-size: 20px; color: #fff; padding-left: 3px;}
.popup-title ul{float: right;}
.popup-title ul li{float: left; width: 25px; height: 25px; margin: 2px 8px 0px 0px; cursor: pointer;}
.popup-title ul li img{width: 100%; height: 100%;}

.popupzone li{width: 100%; min-height: 231px; clear: both; position: absolute; display: none;}
.popupzone li:first-child{display: block;}
.popupzone li a img{width: 100%; height: 100%; min-height: 231px;}

/*공지사항존*/
#noicezone-area{float: right; width: 48.3%; height: 260px; border: 1px solid #dedede; box-sizing: border-box; overflow: hidden; position: relative;}

.noticezone-top{width: 100%; height: 46px; color: #686868; ; font-weight: bold; font-size: 20px;}
.noticezone-top ul {margin: 0px; padding: 0px;}
.noticezone-top ul li{float: left; line-height: 46px; cursor: pointer; text-align: center}
.notice-tab{border-right: 1px solid #dedede;}
/* .notice-tab, .question-tab{width: 45.0013%; height: 46px; background: #ffffff; border-bottom: 1px solid #000000; position: relative;} */
.notice-tab{width: 90%; height: 46px; background: #ffffff; border-bottom: 1px solid #000000; position: relative;}
.notice-tab .tab-triangle, .question-tab .tab-triangle{display: none; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); width: 0;height: 0;border-right: 8px solid transparent;border-left: 8px solid transparent;border-top: 10px solid #ff0000;}
.noticezone-top ul li:hover{background: #ff0000; color: #ffffff;}
.notice-more-btn{width: 10%; height: 46px; background: #000000;}
.notice-more-btn:hover{background: #000000 !important;}

.noticezone-bottom{height: 214px;clear: both;}
.noticezone-bottom ul{display: none; position: absolute; width: 100%; margin-top: 20px; background: #ffffff; left: 50%; transform: translateX(-50%);}
.noticezone-bottom ul.nb1{display: block;}
.noticezone-bottom ul li{height: 35px; border-bottom: 1px solid #d8d8d8;}
.noticezone-bottom ul li:last-child{border-bottom: none;}
.noticezone-bottom ul li a{display: block; font-size: 15px; color: #000000; font-weight: normal;padding: 0px 10px; margin: 0px 10px; line-height: 30px;}
.noticezone-bottom ul li .notice-txt{display: inline-block; float: left; width: 70%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;margin: 0px;}
.noticezone-bottom ul li .list-circle{color: #ff0000; font-size: 10px; margin-right: 11px;}
.noticezone-bottom ul li .notice-data{width: 20%;text-align: right;}

/*==롤링배너존==*/
#rolling_banner{clear: both; background: #ffffff; height:68px; margin-top: 88px; border-top: 1px solid #5a5a5a;}
.banner-img-see{width: 95%; margin: 0px auto; height: 68px; overflow: hidden; margin: 0 auto; padding-top: 15px;}
.banner-img-box{width: 4000px; height: 68px;}
.banner-img-box li{float: left; width: 170px; height: 44px; margin-right: 15px;}

.banner-left-btn{position: absolute; top: 0; left: 0px; width: 3%; height: 22px;cursor: pointer;margin-top: 20px;}
.banner-right-btn{position: absolute; top: 0; right: 0px; width: 3%; height: 22px;cursor: pointer;margin-top: 20px;}
.banner-right-btn > img{float: right;}


/*======= 푸터 =======*/

#footer {width: 100%; min-height: 150px; background: #5a5a5a; padding: 40px 0px;}
#footer p, #footer a{font-size: 12px; color: #dedede; margin-bottom: 5px;} 




/*=========================================== responsive =================================================*/
@media (max-width: 320px){
	


	


}




/* Extra Small */
@media (max-width: 767px){
    
    /*== 헤더 ==*/
    .container .h-logo img{width: 187px;height: auto;}

    /*== 메인비주얼 ==*/
    #main_visual_area{width: 100%; height: auto; margin-top: 0px;}
    #main_visual{display: none;}
    #mobile_visual{display: block;}
    .swiper-button-prev, .swiper-container-rtl .swiper-button-next{display: none;}
    .swiper-button-next, .swiper-container-rtl .swiper-button-prev{display: none;}
    
    /*== 모바일메뉴 ==*/
    .top-nav{display: none;}
    .menu_toggle_btn{display: block; float: right;}
    #m_nav{display: block;}
    
    /*==가맹점 찾기==*/
    #merchant-find-area{min-height: 720px; border: 8px solid red; position: static;  box-sizing: border-box; margin-top: 30px;}
    .find-top-area{width: 80%; height: 140px; margin: 30px auto 0px;}
    .find-top-area h2{font-size: 20px; }
    .find-top-area h2 .fta_line{width: 15%;}
    .find-top-area > .red{font-size: 15px; font-weight: 400;}
    .find-top-area p{font-size: 15px !important;}
    
    /*왼쪽검색부분*/
    .merchant-search-area{width: 100%; height: auto; margin: 20px 0px 30px 0px;} 
    
    .shop-name-search{width: 80%; height: 35px !important; border: 2px solid #ff0000; margin:0px auto 30px;}
    .shop-name-search input{width: 100%; height: 30px !important; font-size: 15px; line-height: 33px;}
    
    .industry-name-search{width: 80%; height: 35px; margin: 0 auto;}
    .industry-name-search select{width: 100%; height: 30px; border: none; font-size: 15px; font-weight: bold; border-radius: 30px; -webkit-appearance: none;-moz-appearance: none;appearance: none;background: url('../fnc_images/main/mselect-arrow.png') no-repeat 95% 50% !important; /* 화살표 아이콘 추가 */ padding: 0px 0px 0px 70px !important;} 
    .merchant-search-area div div{width: 18px; height: 18px; top: 50%; margin-top: -3px;}

    .search_btn{width: 80px; height: 40px; margin: 30px auto 0px; border: 2px solid #000000;}
    .search_btn a{width: 72px; height: 32px; margin: 2px auto 0; font-size: 20px; line-height: 30px;}


    /*오른쪽지도부분*/
    .map-search-area{width: 273px; height: 241px; margin: 0 auto; background-size: contain;}
    .map-search-area ul li a{font-size: 12px;}
    /*이전버튼*/
    .prev-map-btn{width: 30px; height: 30px; top: 0px; right: 0px; cursor: pointer;}
    
    /*==퀵메뉴==*/
    #main-quick-area{width: 100%; height: 350px; padding: 0px; margin: 85px 0px 65px 0px;}
    #main-quick-area .quick-menu div{width: 50%; margin-bottom: 30px;}
    #main-quick-area .quick-menu div img{width: 100%; height: 100%;}

    /*==콘텐츠배너==*/
    #contents-banner{clear: both; min-height: 330px; margin: 0 0px 65px 0px; padding: 60px 0px 20px;}
    #contents-banner p{font-size: 30px; padding-top: 30px; line-height: 30px;}
    #contents-banner p span{font-size: 20px;}

    /*==팝업&공지사항존==*/
    #section-bottom{min-height: 590px;}

    /*팝업존*/
    #popupzone-area{position: relative; float: none; width: 100%; min-height: 260px;}

    .popupzone li{width: 100%; min-height: 231px; clear: both; position: absolute; display: none;}
    .popupzone li:first-child{display: block;}
    .popupzone li a img{width: 100%; height: 100%; min-height: 231px;}


    /*공지사항존*/
    #noicezone-area{float: none; width: 100%; margin-top: 65px;}
    
    .notice-tab{width: 88%}
    .notice-more-btn{width: 12%;}

    .noticezone-bottom ul li .notice-txt {width: 65%;}
    .noticezone-bottom ul li .notice-data{width: 30%;}
    
    /*==롤링배너존==*/
    #rolling_banner{margin-top: 45px; }
    
    /*== 푸터 ==*/
    #footer p{margin: 25px 0px 0px 0px; line-height: 23px;}
    #footer p, #footer a, copy{font-size: 12px; color: #dedede;} 
}

/* Small */
@media(min-width: 768px) and (max-width: 991px){
    
    /*=== 메인비주얼 ===*/
    #main_visual{display: none;}
    #mobile_visual{display: block;}
    
    /*===모바일메뉴===*/
    .top-nav{display: none;}
    .menu_toggle_btn{display: block; float: right;}
    #m_nav{display: block;}
    
    /*==가맹점 찾기==*/
    #merchant-find-area{height: 100%; min-height: 1030px; border: 10px solid red; background: #ffffff; position: static; box-sizing: border-box; margin-top: 65px;}
    .find-top-area{width: 70%; margin: 30px auto 30px;}
    .find-top-area h2 .fta_line{width: 10%;}
    .find-bottom-area{height: 300px;}

    /*왼쪽검색부분*/
    .merchant-search-area{width: 100%; height: 100%; min-height: 190px; margin-top:10px;} 
    
    .shop-name-search{width: 80%; height: 50px !important; border: 2px solid #ff0000; border-radius: 24px; margin:0px auto 50px;}
    .shop-name-search input{width: 100%; height: 43px !important; border: none; font-size: 26px; font-weight: bold; border-radius: 24px; text-align: center;}
    .industry-name-search{width: 80%; height: 50px; border: 2px solid #ff0000;}
    .industry-name-search select{width: 100%; height: 45px; border: none; font-size: 26px;padding: 0px 0px 0px 160px !important;} 

    .search_btn{width: 120px; height: 57px; border: 3px solid #000000; margin: 30px auto 0px;}
    .search_btn a{display: block; width: 110px; height: 46px; background: #000000; margin: 3px auto 0px; text-align: center; font-size: 30px;color: #ffffff; line-height: 46px;}


    /*오른쪽지도부분*/
    .map-search-area{width: 60%; background: url(../fnc_images/main/map_01.png) no-repeat center center; margin: 30px auto 0px;}
    
    /*==퀵메뉴==*/
    #main-quick-area{height: 575px !important; padding: 0px; margin: 65px 0px 65px 0px;}
    #main-quick-area .quick-menu div{margin: 0px 0px 50px 0px;padding: 0px 50px 0px;}
    #main-quick-area .quick-menu div img{width: 100%; height: 100%;}

    /*==콘텐츠배너==*/
    #contents-banner{margin-bottom: 65px; padding: 45px 0px 30px;}
    #contents-banner p{font-size: 34px; padding-top: 30px; line-height: 38px;}
    #contents-banner p span{font-size: 24px;}

    /*==팝업&공지사항존==*/
    #section-bottom{min-height: 610px;}

    /*팝업존*/
    #popupzone-area{float: none; width: 100%;}

    .popupzone li{width: 100%;}
    .popupzone li a img{width: 100%; height: 100%; min-height: 231px;}


    /*공지사항존*/
    #noicezone-area{float: none; width: 100%;margin-top: 90px;}

   
    
}

/* Medium */
@media(min-width: 992px) and (max-width: 1199px){
    
    /*========= 메인비주얼 =========*/
    #main_visual{display: block;}
    #mobile_visual{display: none;}
    
    /*pc메뉴*/
    .top-nav > ul > li{padding: 10px 10px 22px; text-align: center;}
    
    /*========= pc 서브메뉴 ========*/
    .sub-gnb-wrap{min-width: 960px;}
    .sub-gnb-head{width: 18%; height: 100%; float: left;}
    .sub-gnb{width: 82%;}
    
    /*==== 메인컨텐츠 ====*/

    /*==가맹점 찾기==*/
    #merchant-find-area{width: 100%; min-height: 1000px; border: 12px solid red; background: #ffffff; position: absolute; top: -70px; left: 50%; transform: translateX(-50%); box-sizing: border-box; margin-bottom: 65px;}
    .find-top-area{width: 70%;height: 106px;margin: 30px auto 30px;text-align: center;}
    .find-top-area h2{font-size: 35px;font-weight: bold; }
    .find-top-area h2 > .red{display: inline-block; color: #ff0000;}
    .find-top-area h2 .fta_line{width: 8%;}
    .find-bottom-area{height: 371px; margin: 65px auto 30px;} 

    /*왼쪽검색부분*/
    .merchant-search-area{width: 100%;height: 100%; height: 330px; margin-top:10px;} 

    .search_btn{width: 120px; height: 57px; border: 3px solid #000000; margin: 30px auto 0px;}
    .search_btn a{display: block; width: 110px; height: 46px; background: #000000; margin: 3px auto 0px; text-align: center; font-size: 30px;color: #ffffff; line-height: 46px;}
    .search_btn a:hover{text-decoration: none; color: #ffffff;}
    
    .industry-name-search select{background-position: 98%; padding: 0px 0px 0px 280px !important;}


    /*오른쪽지도부분*/
    .map-search-area{width: 60%; height: 100%; background: url(../fnc_images/main/map_01.png) no-repeat center center; position: relative; margin: 0 auto;}
    .map-search-area ul li a:hover{text-decoration: none;}
    
    
    /*==퀵메뉴==*/
    #main-quick-area{width: 100%; height: 263px !important; margin: 0; padding: 965px 0px 275px 0px;}
    #main-quick-area .quick-menu div{width: 90%; height: 90%;}
    #main-quick-area .quick-menu div img{width: 100%; height: 100%;}
    
    /*==공지사항==*/
    .noticezone-bottom ul li .notice-txt{width: 65%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
    .noticezone-bottom ul li .notice-data{width: 30%;}
    
}

/* Large */
@media(min-width: 1200px){
    
    /*========== 헤더 =======*/
    .menu_toggle_btn{display: none;}
    .m_gnb_area{display: none;}

    /*======== pc 메뉴 =======*/
    .top-nav > ul > li{float: left; padding: 10px 25px 22px; text-align: center;}

    /*========= 메인비주얼 =========*/
    #main_visual_area{width: 100%;}
    #main_visual{display: block;}
    #mobile_visual{display: none;}
    .swiper-slide{position: absolute; width: 100%;height: 763px;}
    .swiper-slide > img{width: 100%; height: 100%;}


    /*========= 메인컨텐츠 ========*/

    /*==가맹점 찾기==*/
    .find-top-area{width: 70%;height: 106px;}
    .find-top-area p{font-size: 22px !important;}

    /*왼쪽검색부분*/
    .merchant-search-area{width: 50%;}

    /*오른쪽지도부분*/
    .map-search-area{width: 50%;}
    .map-search-area ul li a{font-size: 18px;}
    
}

/*230124*/
.row{justify-content: center;}
.quick-menu>div.col-lg-3:last-child{display:none;}