@charset "utf-8";

/*기본화면-pc기준*/
*{margin: 0; padding: 0;}
ul, ol{list-style: none;}
a{text-decoration: none;}
img{border: 0;/*vertical-align: top;*/}
input{vertical-align: top;}
button{vertical-align: top;cursor: pointer;}

/* 메인공통 */
.clearfix:after{content: ""; display: block; clear: both;}
.cont{width: 100%; max-width: 1480px; margin: 0 auto; box-sizing: border-box;}

/* 헤더 */
#header{position: relative; height: 100px; text-align: center; background-color: #fff;}
.header_in{position: relative; display: flex; width: 100%; max-width: 1480px; height: 100%; margin: 0 auto; justify-content: space-between; align-items: center; box-sizing: border-box;}
.logo a{display: block; width: 203px; height: 54px; background-image: url(../../../../../images/domain/mayor/main/logo.png); text-indent: -9999px; background-repeat: no-repeat; background-size: contain;}
.gnb{display: inline-flex; height: 100%; align-items: center; justify-content: center; transition: all 0.2s;}
.gnb .d1{position: relative; min-width: 200px; height: 100%;}
.gnb .d1 .m{display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; font-size: 21px; color: #000; font-weight: 500; transition: all 0.2s;}
.gnb .d1 .sub{display: none; position: absolute; top: 100px; left: 0; width: 100%; height: 240px; z-index: 100; border-left: 1px solid #ddd; transition: all 0.2s; overflow: hidden;}
.gnb .d1:last-child .sub{border-right: 1px solid #ddd;}
.gnb .d1 .sub li a{position: relative; display: inline-block; margin-top: 12px; color: #000; font-size: 17px;}
.gnb .d1 .sub li a:after{content: ""; display: block; width: 0; height: 2px; background-color: #fff; position: absolute; bottom: 0; left: 0; transition: all 0.2s;}

.allmenu{display: inline-block; width: 35px; height: 35px; text-indent: -9999px; background-image: url(../../../../../images/domain/mayor/main/i_menu.png); background-repeat: no-repeat; background-position: center; vertical-align: middle;}
.allmenu.mo{display: none; background-color: transparent;  border: 0;}

.head_ect{font-size:0}
.head_ect .juggugo{display:inline-block; vertical-align: middle; margin-left: 15px;}
.head_ect .juggugo a{font-size:15px; position:relative; font-weight:400;}
.head_ect .juggugo a:hover{color:#1848d1;}
.head_ect .juggugo a:after{display: block; background-color: #474747; width: 1px; height: 15px; content: ""; position: absolute; top: 50%; left: -8px; transform: translateY(-50%);}

/* 메뉴 호버시 */
.gnb .d1:hover .m{color: #1845d1;}
.gnb .d1:hover .sub{background-color: #2f4ead;}
.gnb .d1:hover .sub li a{color: #fff;}
.gnb .d1 .sub li a:hover:after{width: 100%;}
.gnb.on .d1 .sub{display: block;}
.gnb .d1:focus-within .sub{display: block; background-color: #2f4ead;}
.gnb .d1:focus-within .sub li a{color: #fff;}

.gnb_bg{position: absolute; top: 100px; left: 0; width: 100%; height: 0; background-color: #fff; box-sizing: border-box; box-shadow: 0 25px 30px rgba(0, 0, 0, 0.1); z-index: 1;}
.gnb_bg.on{height: 240px; border-top: 1px solid #ddd;}

/* 모바일 사이드 메뉴 */
.mobile_menu{position: fixed; top: 0; right: -100%; width: 100%; height: 100%; max-width: 360px; background-color: #fff; z-index: 100; transition: all 0.3s;}
.mobile_menu .top_utill{padding: 20px 15px; background: linear-gradient(121deg, #3f61b2 10.2%, #008A9C 95.47%);}
.mobile_menu .top_utill:after{content: ""; display: block; clear: both;}
.mobile_menu .top_utill .close{float: left; display: block; width: 25px; height: 25px; background-image: url(../../../../../images/domain/mayor/main/i_close.png); background-repeat: no-repeat; background-position: center; text-indent: -9999px; border: 0; background-color: transparent;}
.mobile_menu .top_utill .home{float: right; display: block; width: 25px; height: 25px; background-image: url(../../../../../images/domain/mayor/main/i_home.png); background-repeat: no-repeat; background-position: center; text-indent: -9999px;}

.mobile_menu_bg{width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); position: fixed; top: 0; right: 0; display: none; z-index: 99;}

.mo_gnb .d1{border-bottom: 1px solid #ddd;}
.mo_gnb .d1 .m{display: block; padding: 0 30px; line-height: 60px; color: #000; font-size: 18px; font-weight: 700; background-image: url(../../../../../images/domain/mayor/main/mo_down.png); background-repeat: no-repeat; background-position: center right 30px;}
.mo_gnb .d1 .sub{display: none; padding: 10px 30px;}
.mo_gnb .d1 .sub li a{display: block; padding: 7px 10px; color: #000; font-weight: 500; background-image: url(../../../../../images/domain/mayor/main/mo_down.png); background-repeat: no-repeat; background-position: right center;}

/* 모바일 메뉴 오버시 */
.mobile_menu.on{right: 0; opacity: 1;}
.mo_gnb .d1 .m.over{color: #fff; background-color: #3568af; background-image: url(../../../../../images/domain/mayor/main/mo_up.png); }
.mo_gnb .d1 .sub li a:focus{background-image: url(../../../../../images/domain/mayor/main/mo_up02.png); color: #0030c3;}


/* 메인비주얼 */
.main_visual{position: relative; width 100%; height: calc(100vh - 100px); min-height: 800px; border-bottom-right-radius: 200px; overflow: hidden; }
.main_visual:before{position: absolute; top: 0; left: 0; content: ""; display: block; width: 100%; height: 820px; background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 15%, rgba(0, 212, 255, 0) 67%);}
.video_Wrap{width: 100%;}
.video_Wrap video{width: auto !important;}

.main_visual .cont{position: absolute; top: 0; left: 50%; transform: translateX(-50%); height: 100%; z-index: 1;}

/* 메인비주얼_날씨 */
.weather{position: absolute; top: 30px; right: 0;}
.weather a{display: block; color: #fff;}
.weather a.top{display: flex; align-items: center; margin-bottom: 6px;}
.weather a.top p{margin-left: 10px; font-weight: 500; font-size: 21px;}
.weather a.top p strong{font-weight: 500; font-size: 28px;}
.weather a.bottom{font-size: 13px;}

/* 메인비주얼_텍스트 */
.mainTxt{position: absolute; top: 110px; left: 320px; color: #fff; padding-left: 70px; background-image: url(../../../../../images/domain/mayor/main/i_mainTxt.png); background-size: 49px; background-repeat: no-repeat; background-position: left top;}
.mainTxt .t1{font-size: 57px; font-weight: 600;}
.mainTxt .t1 span{font-size: 76px;}
.mainTxt .t2{line-height: 1.3em; font-size: 22px;}

/* 메인비주얼_구청장에게 바란다 */
.main_visual:after{content: ""; display: block; width: 627px; height: 643px; position: absolute; bottom: 0; left: 0; background-image: url(../../../../../images/domain/mayor/main/Mayor.png); background-repeat: no-repeat; background-size: contain;}
.wish{position: absolute; top: 360px; left: 300px; display: block; width: 165px; height: 186px; background-image: url(../../../../../images/domain/mayor/main/i_wish.png); background-repeat: no-repeat; background-size: contain; text-indent: -9999px; transition: all 0.2s;}
.wish:hover{transform: translate(-5px, -5px); background-image: url(../../../../../images/domain/mayor/main/i_wish_hover.png);}

/* 공개일정 */
.schedule{position: absolute; bottom: 70px; right: 0; max-width: 600px;}
.schedule .top{margin-bottom: 10px;}
.schedule h3{float: left; padding-left: 45px; color: #fff; font-size: 30px; background-image: url(../../../../../images/domain/mayor/main/i_calendar.png); background-repeat: no-repeat; background-position: left center;}
.schedule .btn_more{float: right; display: block; padding-right: 30px; margin-top: 11px; color: #fff; background-image: url(../../../../../images/domain/mayor/main/i_plus.png); background-repeat: no-repeat; background-position: right center;}
.schedule li{margin-bottom: 20px; padding: 20px 40px; background-color: rgba(0,0,0,0.7); border-radius: 20px; transition: all 0.2s;}
.schedule li:last-child{margin-bottom: 0;}
.schedule li a{display: flex; color: #fff;}
.schedule li a .date{margin-right: 25px; font-size: 16px;}
.schedule li a .date span{display: block; font-size: 47px; line-height: 1em; font-weight: 600;}
.schedule li a .txt p{width: 100%; overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;}
.schedule li a .txt span{display: block; width: 100%; overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical; color: #c4c4c4;}

/* 공개일정_호버시 */
.schedule li:hover{background-color: rgba(0,0,0,0.9);}
.schedule li:hover .txt p{text-decoration: underline;}

/* 생생현장 */
.news{padding: 100px 0 70px 0; background-image: url(../../../../../images/domain/mayor/main/newBg.png); background-repeat: no-repeat; background-position: left top;}
.news .Left{float: left; width: 520px; padding-right: 50px; box-sizing: border-box;}
.news .Left h3{font-size: 21px; color: #0a7fd9;}
.news .Left p{margin-bottom: 130px; font-size: 37px; font-weight: 600; line-height: 1.4em;}
.news .Left a{position: relative; display: block; padding-left: 70px; font-size: 28px; color: #0a7fd9; font-weight: 600; background-image: url(../../../../../images/domain/mayor/main/tab_point.png); background-repeat: no-repeat; background-position: left center;}
.news .Left a:after{position: absolute; bottom: -7px; left: 70px; content: ""; display: block; width: 213px; height: 29px; background-image: url(../../../../../images/domain/mayor/main/i_arrow.png); transition: all 0.2s;}
.news .Left a:hover:after{left: 95px;}

.news .Right{float: left; width: calc(100% - 520px);}
.news .Right .first_news{margin-bottom: 40px; overflow:hidden;}
.news .Right .first_news a{display: block;}
.news .Right .first_news .image{float: left; width: 50%; border-radius: 20px; overflow: hidden;}
.news .Right .first_news .image img{width: 100%; transition: all 0.4s;}
.news .Right .first_news .txt{float: left; width: 50%; padding-left: 25px; margin-top: 20px; box-sizing: border-box;}
.news .Right .first_news .txt span{display: inline-block; padding: 5px 15px; margin-bottom: 20px; font-weight: 500; color: #fff; background-color: #287cdc;}
.news .Right .first_news .txt .t1{width: 100%; margin-bottom: 20px; font-size: 28px; color: #000; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-break:break-all;}
.news .Right .first_news .txt .t2{margin-bottom: 50px; font-weight: 500; font-size: 18px; color: #666; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-break:break-all;}
.news .Right .first_news .txt .date{font-size: 18px; color: #818181; font-weight: 500;}

.news .Right li{float: left; width: 31%; margin-right: 3.5%;}
.news .Right li:last-child{margin-right: 0;}
.news .Right li a .image{width: 100%; margin-bottom: 10px; border-radius: 20px; overflow: hidden;}
.news .Right li a .image img{width: 100%; transition: all 0.4s;}
.news .Right li a .txt{width: 100%; padding: 0 20px; box-sizing: border-box; color: #000; font-size: 17px; font-weight: 400; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-break:break-all;}

/* 생생현장_호버시 */
.news .Right .first_news:hover .image img{transform: scale(1.2);}
.news .Right .first_news:hover .txt .t1{text-decoration: underline;}
.news .Right li a:hover .image img{transform: scale(1.2);}
.news .Right li a:hover .txt{text-decoration: underline;}

/* 공약과 실천 */
.pledge{position: relative; width: 100%; overflow: hidden;}
.pledge .cont{position: relative; padding: 110px 20px 110px 140px;}
.pledge:after{position: absolute; top: 0; left: 50%; transform: translateX(-740px); content: ""; display: block; background-color: #e3f7ff; width: 200%; height: 100%; z-index: -1; border-top-left-radius: 200px;}
.pledge .slideWrap{position: relative; width: 100%; margin-bottom: 0;}
.pledge .slideWrap>.slick-list{overflow: visible;}
.pledge .slide .image{float: left; width: 45%;  border-radius: 20px; overflow: hidden; box-shadow: 5px 5px 15px rgba(0,0,0,0.15);}
.pledge .slide .image img{width: 100%;}
.pledge .slide .txt{float: left; width: 55%; padding-left: 80px; box-sizing: border-box;}
.pledge .slide .txt p{margin-bottom: 20px; font-size: 32px; font-weight: 600;}
.pledge .slide .txt h4{margin-bottom: 25px; line-height: 1.4em; font-size: 35px; color: #293c9e;}
.pledge .slide .txt h4 span{font-size: 64px; letter-spacing: -3px; background: linear-gradient(to right, #26b8d6, #1653b7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;}
.pledge .slide .txt li{position: relative; padding-left: 20px; margin-bottom: 5px; font-size: 20px;}
.pledge .slide .txt li:before{position: absolute; top: 50%; transform: translateY(-50%); left: 0; content: ""; display: block; width: 4px; height: 4px; border-radius: 50%; background-color: #333;}
.pledge .slide .btn_more{position: absolute; top: 50%; right: 0; transform: translateY(-50%); display: block; width: 95px; height: 95px; padding-top: 56px; text-align: center; color: #000; font-weight: 400; background-color: #fff; border-radius: 20px; border: 1px solid #ccc; box-sizing: border-box; background-image: url(../../../../../images/domain/mayor/main/i_plus02.png); background-repeat: no-repeat; background-position: top 20px center; transition: all 0.2s;}
.pledge .slide .btn_more:hover{color: #fff; background-color: #3749a4; background-image: url(../../../../../images/domain/mayor/main/i_plus03.png); }

.pledge .btnBox{position: absolute; bottom: 110px; left: 55%;}
.pledge .btnBox button{width: 50px; height: 50px; text-indent: -9999px; border: 0; background-color: transparent; background-repeat: no-repeat; background-size: contain;}
.pledge .btnBox .prev{background-image: url(../../../../../images/domain/mayor/main/i_prev.png);}
.pledge .btnBox .next{background-image: url(../../../../../images/domain/mayor/main/i_next.png);}
.pledge .btnBox .stop{background-image: url(../../../../../images/domain/mayor/main/i_stop.png);}
.pledge .btnBox .play{display: none; background-image: url(../../../../../images/domain/mayor/main/i_play.png);}

/* 푸터 */
.footer{padding: 45px 0; background-color: #1e2337;}
.footer>div{display: flex; align-items: center;}
.footer .ft_info{margin-left: 40px; font-size: 15px; color: #c6c6c6;}
.footer .ft_info address{font-style: inherit;}


/***********************************************/
/* 1700 이하(~1700)  */
@media screen and (max-width: 1700px) {
    /* 메인비주얼_구청장에게 바란다 */
    .main_visual:after{width: 477px; height: 489px;}
    
}

/***********************************************/
/* 1480 이하(~1480)  */
@media screen and (max-width: 1480px) {
    /* 메인공통 */
    .cont{padding: 0 70px;}
    
    /* 헤더 */
    .header_in{padding: 0 20px;}
    
    /* 메인비주얼 */
    .main_visual{border-bottom-right-radius: 100px;}
    
    /* 메인비주얼_날씨 */
    .weather{right: 20px;}
    
    /* 메인비주얼_텍스트 */
    .mainTxt{left: 20px;}
    
    /* 메인비주얼_구청장에게 바란다 */
    .main_visual:after{display: none;}
    .wish{top: 550px; left: 60px;}
    
    /* 공개일정 */
    .schedule{right: 50px;}
    
    /* 생생현장 */
    .news .Left{width: 440px;}
    .news .Left p{font-size: 32px;}
    .news .Right .first_news .txt{margin-top: 10px;}
    .news .Right .first_news .txt span{margin-bottom: 10px;}
    .news .Right .first_news .txt .t2{margin-bottom: 30px;}
    
    /* 공약과 실천 */
    .pledge .cont{padding: 110px 70px 110px 70px;}
    .pledge .slide .image{width: 40%;}
    .pledge .slide .txt{width: 60%; padding-left: 50px;}
    .pledge .slide .txt p{margin-bottom: 10px; font-size: 21px;}
    .pledge .slide .txt h4{margin-bottom: 10px; font-size: 29px;}
    .pledge .slide .txt h4 span{font-size: 49px;}
    .pledge .slide .txt li{margin-bottom: 0; font-size: 17px;}
    .pledge .btnBox{left: 45%;}
    
}
/***********************************************/
/* 1200 이하(~1200)  */
@media screen and (max-width: 1200px) {
    /* 헤더 */
    #header{height: 85px;}
    .gnb{display: none;}
    .allmenu.pc{display: none;}
    .allmenu.mo{display: inline-block; vertical-align: middle;}
    
    /* 메인비주얼 */
    .main_visual{height: 810px; min-height: auto;}
    
    /* 메인비주얼_날씨 */
    .weather{display: none;}
    
    /* 메인비주얼_텍스트 */
    .mainTxt{position: static; margin-top: 100px;}
    .mainTxt .t1{font-size: 40px;}
    .mainTxt .t1 span{font-size: 65px;}
    
    /* 메인비주얼_구청장에게 바란다 */
    .wish{top: 80px; left: calc(100% - 240px);background-image: url(../../../../../images/domain/mayor/main/i_wish02.png);}
    
    /* 공개일정 */
    .schedule{position: static; margin-top: 50px; max-width: 100%;}
    .schedule li{margin-bottom: 10px;}
    
    /* 생생현장 */
    .news{padding: 60px 0;}
    .news .Left{width: 100%; margin-bottom: 40px;}
    .news .Left p{margin-bottom: 20px;}
    .news .Right{width: 100%;}
    
    /* 공약과 실천 */
    .pledge .cont{padding: 80px 70px;}
    .pledge .slide .image{width: 50%;}
    .pledge .slide .txt{width: 50%; padding-left: 40px;}
    .pledge .slide .btn_more{width: 75px; height: 75px; padding-top: 45px; background-size: 22px; font-size: 15px; background-position: top 16px center;}
    .pledge .btnBox{bottom: 70px; left: calc(50% + 40px);}
    
    
}
/***********************************************/
/* 1024 이하 (~1024)  */
@media screen and (max-width: 1024px) {
    /* 메인공통 */
    .cont{padding: 0 50px;}
    
    /* 공약과 실천 */
    .pledge .cont{padding: 50px;}
    .pledge .slide .image{position: relative; float: none; width: 100%; margin: 0 auto;}
    .pledge .slide .txt{position: absolute; bottom: 0; left: 0; float: none; width: 100%; padding-left: 0; padding: 30px; background-color: rgba(255, 255, 255, 0.9); border-bottom-left-radius: 20px; border-bottom-right-radius: 20px;}
    .pledge .slide .btn_more{top: 60%; right: 30px; transform: translateY(0);}
    .pledge .btnBox{bottom: 80px; left: calc(100% - 240px);}
}
/***********************************************/
/* 모바일 (0~767) */
@media screen and (max-width: 767px) {
    /* 메인공통 */
    .cont{padding: 0 20px;}
    
    /* 헤더 */
    #header{height: 60px;}
    .logo a{width: 150px; height: 41px;}
    .allmenu{background-size: 21px;}
    
    /* 메인비주얼 */
    .main_visual{height: 650px; border-bottom-right-radius: 0;}
    
    /* 메인비주얼_텍스트 */
    .mainTxt{padding-left: 45px; margin-top: 60px; margin-bottom: 20px; background-size: 30px;}
    .mainTxt .t1{font-size: 26px;}
    .mainTxt .t1 span{font-size: 41px;}
    .mainTxt .t2{font-size: 15px;}
    
    /* 메인비주얼_구청장에게 바란다 */
    .wish{position: static; width: 120px; height: 135px; margin-left: calc(100% - 135px);}
    
    /* 공개일정 */
    .schedule{margin-top: 20px;}
    .schedule h3{padding-left: 35px; font-size: 23px; background-size: 22px;}
    .schedule .btn_more{margin-top: 5px;}
    .schedule li{padding: 20px 30px;}
    .schedule li:nth-child(3){display: none;}
    .schedule li a{align-items: center;}
    .schedule li a .date{font-size: 13px;}
    .schedule li a .date span{font-size: 40px;}
    .schedule li a .txt{font-size: 15px;}
    .schedule li a .txt p{-webkit-line-clamp: 1;}
    
    /* 생생현장 */
    .news{padding: 30px 0;}
    .news .Left{margin-bottom: 30px;}
    .news .Left p{font-size: 20px;}
    .news .Left a{padding-left: 40px; font-size: 20px; background-size: 25px;}
    .news .Left a:after{left: 40px; width: 130px; height: 20px; background-size: contain; background-repeat: no-repeat;}
    .news .Right .first_news{margin-bottom: 15px;}
    .news .Right .first_news .image{width: 100%;}
    .news .Right .first_news .txt{width: 100%; padding: 0;}
    .news .Right .first_news .txt span{padding: 2px 10px; margin-bottom: 3px; font-size: 13px;}
    .news .Right .first_news .txt .t1{margin-bottom: 5px; font-size: 20px;}    
    .news .Right .first_news .txt .t2{display: none;}
    .news .Right .first_news .txt .date{font-size: 15px;}
    .news .Right li{width: 48%; margin-right: 4%;}
    .news .Right li:nth-child(2){margin-right: 0;}
    .news .Right li:nth-child(3){display: none;}
    .news .Right li a .txt{font-size: 15px;}
    
    /* 공약과 실천 */
    .pledge:after{left: 0; transform: translateX(0); border-top-left-radius: 0;}
    .pledge .cont{padding: 40px 20px;}
    .pledge .slide .image{max-height: 250px;}
    .pledge .slide .txt{position: static; padding: 20px 10px 0 10px; background-color: transparent;}
    .pledge .slide .txt p{font-size: 18px;}
    .pledge .slide .txt h4{font-size: 20px;}
    .pledge .slide .txt h4 span{font-size: 25px; letter-spacing: -1px;}
    .pledge .slide .txt li{font-size: 15px;}
    .pledge .slide .btn_more{position: static; width: 120px; height: auto; margin-top: 10px; margin-left: calc(100% - 120px); padding: 10px 20px; text-align: left; background-position: right 20px center; background-size: 16px;}
    .pledge .btnBox button{width: 40px; height: 40px;}
    .pledge .btnBox{bottom: 40px; left: 25px;}
    
    /* 푸터 */
    .footer{padding: 25px 0;}
    .footer>div{display: block;}
    .footer .logo{width: 170px;}
    .footer .logo img{width: 100%;}
    .footer .ft_info{margin-left: 0; margin-top: 10px; font-size: 13px;}
    
}          



/***********************************************/
/* 모바일 (0~500) */
@media screen and (max-width: 500px) {


/*헤더*/
.head_ect .juggugo a{font-size: 12px;  font-weight: 500;}



}