/********************************** 반응형 **********************************/

@media screen and (min-width:1025px) {
    #wrap {min-width:1400px;}

    /*pc 오버효과*/
    .mayor-link02 > li > a:hover{background:#fff;box-shadow:0 10px 25px rgba(0,0,0,0.12);}
    .mayor-link02 > li > a:hover:after{ right:24px;}
    .mayor-link01 li:hover a:before{transform:translateY(-6px);}
    .btn-gomayor:hover{background-color:#1d3f95}
    .btn-gomayor:hover:before{transform:translateY(-50%) rotate(180deg);}
    .btn-gomayor:hover:after{transform:translateY(-50%) rotate(270deg);}
    .ico-list .item:hover{transform:translateY(-6px);box-shadow:0 12px 30px rgba(0,0,0,0.12);}
    .cate-list li a:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(0,0,0,0.08);}
    .theme-item:hover img{transform:scale(1.08);}
    .art-item:hover:before {transform:rotateY(360deg);transition-duration:.4s;}
    .show-box .item:hover .pic img{transform:scale(1.08);}
    .life-box .item:hover .pic img{transform:scale(1.08);}
}

@media screen and (max-width:1600px) {
    .sec-nav{right: 10px;width: 40px;}
}

@media screen and (max-width:1400px) {
    .sec-nav{display: none;}
}

@media screen and (max-width:1024px) {
    .main_contents{font-size: 14px;}
    .slide-num{font-size: 12px;}
    .slide-num .current{font-size: 14px;}
    .slide-btns{margin-left: 0;}
    .main-box .inner{padding: 0 10px;}
    .flex-direction-nav{gap: 24px;}
    .flex-direction-nav > li{width: 15px;height: 15px;}
    .flex-direction-nav a{width: 7px;height: 15px;background-size: 100% auto;top:0;margin: 0 auto;}
    .flex-pauseplay a{background-size: 100% auto;width: 8px;margin: 0 auto;}

    /*비주얼*/
    .visual .ctr-box01{width: 135px;height: 27px; right: 10px;bottom: 10px;}
    .visual-slide .slide-num{margin-top: 0;}

    /*시장실*/
    .mayor .inner{min-height: auto;padding:30px 10px;align-items: flex-end;}
    .mayor-left{margin-right: 20px;width: calc(61.5% - 20px);}
    .mayor-img{padding-left:10px;}
    .mayor-img img{max-width: 100%;}
    .mayor-img .pic{width: 45%;}
    .mayor-img .txt{width: 55%;}
    .mayor-banner{padding: 0 15px 0 15px;height: 210px;margin-bottom: 25px;}
    .mayor-banner .mtit01{font-size: 15px;margin-bottom:5px }
    .mayor-banner .mtit01 strong{font-size: 23px;margin-top: 10px;}
    .mayor-banner .mtit01 .slogan{width: 200px;}
    .btn-gomayor{font-size: 13px;height: 36px;width: 195px}
    .mayor-link01{padding: 0 20px;margin-top: -20px;}
    .mayor-link02 > li > a{min-height: 40px;padding: 12px 0px 12px 15px;font-size: 13px;border-radius: 12px;}
    .mayor-link02 > li > a:after{right: 12px;background-image : url('/files/web148/images/main_new03/mb/arr01.png');width: 13px;}

    /*알림*/
    .board{padding: 32px 0;}
    .board .inner{flex-direction: column;padding: 0;}
    .board::after{display: none;}
    .news-area{order:1;width: 100%;margin-bottom: 30px;padding: 0 10px;}
    .notice-area{order:2;width: 100%;margin-right: 0;}
    .notice-area .tab-cont{width: calc(100% - 20px);left: 10px;}
    .btn-more01{right: 10px;}
    .tab-list{padding-left: 10px;}
    .tab-list > li:nth-child(1) .tab-btn{left:10px}
    .tab-slide{width: calc(100% - 20px);left: 10px;}
    .board-card-list{padding-left: 0;}
    .board-list{padding-left: 0;}
    .board-list li{margin-top: 20px}

    /*서비스*/
    .service{padding: 0 0 30px 0;}
    .service-area{height:465px;}
    .service::after{top:0}
    .service .inner{padding: 0;}
    .service-area .tab-cont{padding: 90px 0 0 0;margin: 0 10px;height:435px; overflow-x:auto;overflow-y:hidden; width: calc(100% - 20px);}
    .service-area .ico-list{min-width: 1024px;}
    .ico-list .item a[target="_blank"]:after{top:5px;right: 10px;width: 14px;height: 12px;}
    .category .item a:before{background-size: 40px auto;}
    .category .ico01 a:before{background-size: 38px auto;}
    .category .ico02 a:before{background-size: 34px auto;}
    .category .ico03 a:before{background-size: 35px auto;}
    .category .ico04 a:before{background-size: 37px auto;}
    .category .ico05 a:before{background-size: 33px auto;}
    .category .ico06 a:before{background-size: 30px auto;}
    .category .ico07 a:before{background-size: 34px auto;}
    .category .ico08 a:before{background-size: 34px auto;}
    .category .ico09 a:before{background-size: 33px auto;}
    .category .ico10 a:before{background-size: 32px auto;}

    .ico-list > li{width: calc((100% - 90px) / 9);}
    .favorite{padding:0 10px;gap:10px;}
    .favorite .item a{padding: 12px 0;}
    .favorite .txt{font-size: 13px;word-break: break-all;}
    .favorite .ico01 a:before{background-size: 22px auto;}
    .favorite .ico02 a:before{background-size: 28px auto;}
    .favorite .ico03 a:before{background-size: 27px auto;}
    .favorite .ico04 a:before{background-size: 27px auto;}
    .favorite .ico05 a:before{background-size: 27px auto;}
    .favorite .ico06 a:before{background-size: 27px auto;}
    .favorite .ico07 a:before{background-size: 27px auto;}
    .favorite .ico08 a:before{background-size: 27px auto;}
    .favorite .ico09 a:before{background-size: 24px auto;}
    .favorite .ico10 a:before{background-size: 27px auto;}
    .favorite .ico11 a:before{background-size: 27px auto;}
    .favorite .ico12 a:before{background-size: 27px auto;}
    .favorite .ico13 a:before{background-size: 27px auto;}
    .favorite .ico14 a:before{background-size: 27px auto;}
    .favorite .ico15 a:before{background-size: 27px auto;}
    .favorite .ico16 a:before{background-size: 27px auto;}
    .favorite .ico17 a:before{background-size: 27px auto;}
    .favorite .ico18 a:before{background-size: 27px auto;}
    .favorite .ico19 a:before{background-size: 27px auto;}
    .favorite .ico20 a:before{background-size: 27px auto;}
    .favorite .ico21 a:before{background-size: 27px auto;}
    .favorite .ico22 a:before{background-size: 27px auto;}
    .favorite .ico23 a:before{background-size: 27px auto;}
    .favorite .ico24 a:before{background-size: 27px auto;}
    .favorite .ico25 a:before{background-size: 27px auto;}
    .favorite .ico26 a:before{background-size: 27px auto;}
    .favorite .ico27 a:before{background-size: 27px auto;}

    .category{gap:10px;padding: 0 55px;}
    .service-area .category{min-width: 870px;}
    .category > li{width: calc((100% - 40px) / 5);}
    .category .item{height: auto;}
    .cate-wrap{padding: 0 10px;gap:13px}
    .cate-tit{height: 44px;}

    .cate-list{padding:15px 25px;gap: 10px;height: 300px;align-content: center;}
    .cate-list li{width: calc((100% - 20px) / 3);}
    .cate-list li a:before{width: 100%;height: 50px;background-size: 44px auto;}
    .type .cate-list li a:before{ width: 55px;height: 50px;}
    .type .cate-list li a.ico01:before{background-size: 38px auto;}
    .type .cate-list li a.ico02:before{background-size: 29px auto;}
    .type .cate-list li a.ico03:before{background-size: 19px auto;}
    .type .cate-list li a.ico04:before{background-size: 27px auto;}
    .type .cate-list li a.ico05:before{background-size: 33px auto;}
    .type .cate-list li a.ico06:before{background-size: 33px auto;}

    /*문화*/
    .culture-area{flex-direction: column;height: auto;}
    .culture-left,
    .culture-right{width: 100%;}
}

@media screen and (max-width:800px) {
    
    /*시장실*/
    .mayor{background-image: url('/files/web148/images/main_new03/mb/bg_mayor.jpg');}
    .mayor .inner{flex-direction: column;gap:20px;}
    .mayor-left{width: 100%;margin-right: 0;}
    .mayor-right{width: 100%;}
}


@media screen and (max-width:768px){

    .main_contents {font-size: 13px;}

    /*비주얼슬라이드*/
    .visual-slide{padding-top: 66.5%;}
    .visual-slide .slides .pc-mode{display: none;}
    .visual-slide .slides .mb-mode{display: block;}

    /*시장실*/
    .mayor-link01{padding: 15px 8px;height: auto;}
    .mayor-link01 li a:before{margin-bottom: 5px;}
    .mayor-link01 li a .txt{font-size: 12px;height: auto;min-height: 30px;}
    .mayor-banner .mtit01{margin-bottom: 15px}
    .mayor-banner .mtit01 .slogan{width: 200px;height: 20px;background-image: url("/files/web148/images/main_new03/mb/txt_slogan.png") }
    
    
    /*알림*/
    .board .inner{align-items: flex-start;}
    .tab-list::before{height: 32px;top:2px;width: calc(100% - 50px);}
    .tab-btn{height: 37px;width: 80px;font-size: 13px;top:0;margin-top: 0;}
    .tab-btn.on{height: 37px;margin-top: 0;box-shadow: none;}
    .tab-btn.on::before{width: 14px;height: 14px;}
    .tab-slide{padding-top: 37px;}
    .tab-slide .tab-btn{height:37px;font-size: 13px;font-weight: 500;}
    .tab-slide > li:nth-child(1) .tab-btn{border-radius: 20px 0 0 0;}
    .tab-slide > li:nth-child(2) .tab-btn{border-radius: 0 20px 0 0;}
    .x-scroll {display: block;margin-right: 40px; overflow-x:auto;margin-right: 70px;}
    .btn-more01{width: 32px;height: 32px;right: 0;}
    .btn-more01:before, .btn-more01:after{right: 10px;}
    .news-area::before{padding-top: 73%;}
    .news-area .tab-cont{padding-top: 37px;}
    .news-slide .ctr-box01{width: 180px;height: 47px;}
    .news-slide .slide-btns{margin-left: 0;}
    .notice-area{height: 350px;}
    .notice-area .tab-cont{padding-top: 67px;height: 370px;line-height: 17px;height: 17px;}
    .board-card{padding: 15px;}
    .board-card-list{gap: 10px;margin-bottom: 20px;}
    .board-date,
    .board-card .part span{font-size: 11px;}
    .board-tit{font-size: 12px;-webkit-line-clamp: 3;margin-bottom: 10px;}
    .board-card-top{margin-bottom: 10px;}
    .board-acc .badge,
    .board-acc .new{height: 22px;font-size: 11px;}
    .board-list li{margin-top: 10px;}
    .board-list .board-txt{padding-left: 10px;}
    .board-list .board-txt:before{width: 4px;height: 4px;border-radius: 0;top:6px}
    .board-date{background: none;padding-left: 0;}

    /*서비스*/
    .service-area{height: 380px;}
    .service::after{display: none}
    .service-area .tab-btn{width:120px ;}
    .service-area .tab-cont{padding-top: 55px;height: 380px;}
    .service-area .tab-list{gap: 10px;position: static;padding-left: 0;}
    .service-area .tab-list::before{width: calc(100% - 10px);}
    .service-area .x-scroll{margin-right: 30px;}
    
    .ico-list{padding:0;}
    .ico-list .txt{font-size: 12px;}
    .ico-list .item a{padding: 5px 0;}
    .favorite .item{height: 94px;border-radius: 8px;}
   
    .service-area .category{min-width: 768px;}
    .category{padding: 0 0;}
    .category .item a:before{height: 60px;}
    .category .item a{justify-content: center;}
    .cate-wrap{padding: 0;}
    .cate-tit span{font-size: 13px;}
    .cate-list{height: 255px;}
    .cate-list li a{border-radius: 8px;}
    .cate-list .txt{font-size: 12px;margin-top: 6px;}
    .service-area .welfare{overflow-x: auto;overflow-y: hidden;}
    .cate-wrap{min-width: 768px;}

    /*문화*/
    .culture-area{gap: 20px;}
    .m-tit01,
    .m-tit02{font-size:16px;}
    .culture{padding: 40px 0;}
    .culture-tit{padding-top: 0} 
    .culture-tit p{font-size: 15px;}
    .culture-tit h3{font-size: 23px;}
    .tour-link{margin: 25px 0 15px 0;}
    .tour-link-list li a{min-height:43px;font-size:12px;border-radius:8px;justify-content: flex-start;text-align: left;padding: 0 15px;}
    .tour-link-list li a br{display: none;}
    .tour-link-list li a[target="_blank"]:after{position: static;display: inline-block;margin-left: 8px; background: url('/files/web148/images/main_new03/mb/ico_blank02.png') center no-repeat;background-size: 11px 11px;}
    .theme-tour{padding:20px;margin-bottom: 0;}
    .culture-art{padding:20px 20px 0 20px;margin-bottom: 20px;height: 185px;}
    .box-head,
    .culture-art .box-head{margin-bottom:17px;}
    
    
    .art-item:before{width: 100%;height: 50px;}
    .art-item .txt{font-size: 13px;}
    .culture-card .item .box-head{padding-left: 10px;}
    .theme-item .txt{font-size: 13px;}
    .theme-tour .ctr-box02,
    .culture-art .ctr-box02 {right: 20px;top: 13px;}
    .theme-list{gap: 10px;}
    .ctr-box02{width: 94px;height: 23px;}
    .culture-card{grid-template-columns: 1fr 1fr;gap: 10px;}
    .culture-card .btn-more01{width: 32px;height: 32px;right: 10px;}
    .culture-card .btn-more01:before, .culture-card .btn-more01:after{right: 10px;}
    .culture-card > div{min-height: 120px;overflow: hidden;}
    .culture-card .youtube-box{grid-column: span 2;height: auto}
    .youtube-box .box-head{margin-bottom: 20px;}
    .youtube-box .item .pic{position: relative; height: calc(100% - 60px); }
    .youtube-box .item .pic{content: "";display: block;margin: 0 auto;width: 488px;height: 253px;background: url('/files/web148/images/main_new03/mb/img_youtube01.png') center bottom no-repeat;background-size: 100% auto;}
    .youtube-box .item .pic img{display: none;}
    .all-youtube .close-btn{width: 30px;height: 30px;top:35px;right: 10px;}
    .youtube-tit h2{font-size: 16px;}
    .youtube-tit{height: 44px;}
    .all-youtube .popup-inner{padding:40px 10px 24px;}
    .all-youtube .youtube-list{grid-template-columns:repeat(2, 1fr);gap:20px 14px;}
   .all-youtube .youtube-list .tit{height: 32px;padding-bottom: 10px;}
   .all-youtube .youtube-list .tit em{font-size: 12px;}
}

@media screen and (max-width:600px){
    
     /*문화*/
    .youtube-box .item .pic{width: 360px;height: 185px;}
}

@media screen and (max-width:480px){
    
    /*시장실*/
    .mayor-img{gap: 10px;padding: 0 15px;}
    .mayor-img .pic{width: 42%;}
    .mayor-img .txt{width: 55%;}
    .mayor-link01{margin-top: -2px;}
    .mayor-link01 li a:before{width: 34px;height: 34px;}
    .mayor-link01 .ico01 a:before{background-size: auto 34px;}
    .mayor-link01 .ico02 a:before{background-size: auto 34px;}
    .mayor-link01 .ico03 a:before{background-size: auto 34px;}
    .mayor-link01 .ico04 a:before{background-size: auto 34px;}
    .mayor-link01 .ico05 a:before{background-size: auto 34px;}
    .mayor-banner{margin-bottom: 15px;height: 184px;}
    .mayor-link02{gap:10px}
    .btn-gomayor{width: 140px;padding-left: 17px;}
    .btn-gomayor:before, 
    .btn-gomayor:after{width: 10px;right: 15px;}
    
    /*문화*/
    .culture-art{padding: 20px 10px 0 10px;height: 165px;}
    .culture-art .ctr-box02{right: 10px;}
    .youtube-box .item .pic{width: 300px;height: 155px;}
    .art-item .txt{line-height: 1;}
    .tour-link-list li a{padding: 5px 15px;}
}

@media screen and (max-width:400px){
	
	 /*문화*/
	.culture-card > div{height: 275px;}
	.life-box .box-head{margin-bottom:20px }
    .life-box .pic{max-width: 150px}
    
    
}