@charset "UTF-8";
/* ------- main - section1 ------- */
.section_main1 .tit_main{padding-right: 20%}
.section_main1 .tit_main img{width: 100%;max-width: 629px}
.section_main1 .inner{padding-top: 40px}
.list_main_graph{display: flex;row-gap:20px;flex-wrap: wrap;padding-top: 30px}
.list_main_graph li{flex:1;min-width: 0;flex-basis: 50%}
.list_main_graph a{display: flex;align-items: center;justify-content: center;width: 88px;height:30px;margin:7px auto 0;border:1px solid #1F99E5;border-radius: 18px;font-weight: 700;font-size: 14px;line-height: 17px;color:#1F99E5;transition:all .3s}
.list_main_graph li:nth-child(3) a{border-color: #70A932;color:#70A932}
.list_main_graph li:nth-child(2) a{border-color: #F28D28;color:#F28D28}
.list_main_graph li:nth-child(4) a{border-color: #E54C94;color:#E54C94}
.list_main_graph .wrap_chart{padding:0 10px}
.list_main_graph canvas{margin:0 auto}
.list_main_graph .txt_img{padding:10px 20% 0;text-align: center}
.list_main_graph .txt_img img{width: 100%;max-width: 122px}

.img_director{position: relative;padding-top: 40px;text-align: center}
.img_director img{width: 75%}
.img_director .txt_director{position: absolute;bottom:20px;right: 0;padding:6px 27px;border-radius: 25px;font-weight: 600;font-size: 15px;line-height: 16px;color:#fff;background:rgba(0,0,0,.6)}
.img_director .txt_director strong{font-weight: 600;font-size: 26px;line-height: 30px;color:#fff}
/* // ------- main - section1 ------- */

/* ------- main - section2 ------- */
.section_main2{background: #1B63EB}
.list_service{display: grid;row-gap:15px;grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));overflow: hidden;margin-left:-42px;padding:30px 0}
.list_service li{position: relative;padding:0 20px 0 42px;word-break: keep-all}
.list_service li:before{position: absolute;top:50%;left:-1px;width:1px;height:30px;background:rgba(255,255,255,.2);transform: translateY(-50%);content:''}
.list_service a{display: flex;gap:10px;align-items: center;color: #fff}
.list_service .ico_comm{flex:none;width: 45px;height:45px;border-radius: 50%;background-size: 45px 45px;background-color:rgba(255,255,255,.1)}
.list_service .ico_service1{background-image: url(/home/mayor/images/main/ico_service1.png)}
.list_service .ico_service2{background-image: url(/home/mayor/images/main/ico_service2.png)}
.list_service .ico_service3{background-image: url(/home/mayor/images/main/ico_service3.png)}
.list_service .ico_service4{background-image: url(/home/mayor/images/main/ico_service4.png)}
.list_service .cont_service{flex:1;min-width: 0}
.list_service strong{display: inline-block;position: relative;font-size: 20px;line-height: 25px}
.list_service strong:before{position: absolute;bottom:-1px;left: 0;width:0;height:2px;background:#fff;transition:all .3s;content: ''}
.list_service a:hover strong:before, .list_service a:focus strong:before{width: 100%}
.list_service .txt_service{padding-top: 5px;font-weight: 500;font-size: 12px;line-height: 15px;opacity: .4}
/* // ------- main - section2 ------- */

/* ------- main - section3 ------- */
.section_main3{padding-bottom: 80px}
.section_main3 .inner{padding-top: 40px}
.section_main3 .tit_main{overflow: hidden;width: 223px;height:30px;margin:0 auto;font-size: 1px;line-height: 0;color:transparent;background: url(/home/mayor/images/main/img_txt_main2.png) 0 0 no-repeat;background-size: 223px 30px}
.list_picture{display: grid;gap:40px;grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));padding-top: 20px}
.list_picture a{display: block}
.list_picture a .wrap_thumb:after{position: absolute;top:0;left: 0;right: 0;bottom:0;background-color: #1D3C90;opacity: 0;transition: all .6s;content:''}
.list_picture a:hover .wrap_thumb:after, .list_picture a:focus .wrap_thumb:after{opacity: .35}
.list_picture a:hover img, .list_picture a:focus img{transform: scale(1.1)}
.list_picture a:hover strong, .list_picture a:focus strong{text-decoration: underline}
.list_picture .wrap_thumb{overflow: hidden;position: relative;padding-top:67.4418%;border-radius: 15px}
.list_picture img{position: absolute;top:0;left:0;width: 100%;height:100%;object-fit: cover;transition: all .6s}
.list_picture .cont_thumb{padding-top: 15px}
.list_picture strong{display: -webkit-box;overflow: hidden;font-size: 18px;line-height: 22px;color:#000;-webkit-line-clamp: 2;-webkit-box-orient: vertical;word-break: break-all;word-wrap:break-word}
.list_picture .txt_date{padding-top: 6px;font-size: 14px;line-height: 17px;color:#7B7B7B}
.section_main3 .link_moreview{display: flex;align-items: center;justify-content: center;width: 200px;height:40px;margin:40px auto 0;border-radius: 20px;font-weight: 700;font-size: 15px;line-height: 26px;color:#fff;background: #244FC9}
/* // ------- main - section3 ------- */

@media
only screen and (min-width:480px) {
  /* ------- main - section2 ------- */
  .list_service{grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));margin-left: 0}
  .list_service li{padding:0 20px}
  .list_service a{flex-direction: column}
  .list_service .cont_service{text-align: center}
  /* // ------- main - section2 ------- */
}

@media
only screen and (min-width:768px) {
  /* ------- main - section1 ------- */
  .section_main1 .tit_main{padding-right: 40%}
  .list_main_graph{flex:0 0 50%;padding:30px 0}
  .list_main_graph a{width: 108px;height: 36px;font-size: 16px;line-height: 19px;border-radius: 18px;margin:7px auto 0}
  .img_director{flex:1 1 auto;padding-top:0}
  .img_director .txt_director{font-size: 20px;line-height: 24px;text-align: right}
  .img_director .txt_director strong{font-size: 32px;line-height: 38px}
  .img_director img{width: 100%}

  .group_spot{display: flex;align-items: flex-end;position: relative}
  /* // ------- main - section1 ------- */
  
  /* ------- main - section2 ------- */
  .list_service{grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));margin-left:-42px;padding:35px 0}
  .list_service li{padding:0 20px 0 42px}
  .list_service a{flex-direction: row}
  .list_service .cont_service{text-align: left}
  .list_service .ico_comm{width: 65px;height:65px;background-size: 65px 65px}
  .list_service strong{font-size: 24px;line-height: 29px}
  .list_service .txt_service{font-size: 16px;line-height: 19px}
  /* // ------- main - section2 ------- */
  
  /* ------- main - section3 ------- */
  .section_main3 .inner{padding-top: 60px}
  .section_main3 .tit_main{width: 267px;height:36px;background-size: 267px 36px}
  .list_picture{gap: 30px;padding-top: 25px}
  .section_main3 .link_moreview{width: 230px;height:46px;border-radius: 23px;font-size: 17px}
  /* // ------- main - section3 ------- */
}

@media
only screen and (min-width:1024px) {
  /* ------- main - section1 ------- */
  .section_main1{overflow: hidden}
  .section_main1 .inner{position: relative}
  .section_main1 .inner:before, .section_main1 .inner:after{position: absolute;content: ''}
  .section_main1 .inner:before{position: absolute;top:15px;right: 106px;width:300px;height:215px;background: url(/home/mayor/images/main/img_item_main.png) 0 0 no-repeat;background-size: contain}
  .section_main1 .inner:after{position: absolute;bottom:0;right:-1248px;z-index: -10;width: 1706px;height:644px;background: url(/home/mayor/images/main/img_bg_main2.png) 0 100% no-repeat;background-size: contain}
  .group_spot{margin-top: -120px}
  .list_main_graph{flex:0 0 60%;margin-left: -10px}
  .list_main_graph li{flex-basis: 25%}
  .list_main_graph li .txt_img + a:hover, .list_main_graph li .txt_img + a:focus{border-color: transparent;color:#fff}
  .list_main_graph li:nth-child(1) a:hover, .list_main_graph li:nth-child(1) a:focus{background-color: #1F99E5}
  .list_main_graph li:nth-child(3) a:hover, .list_main_graph li:nth-child(3) a:focus{background-color: #70A932}
  .list_main_graph li:nth-child(2) a:hover, .list_main_graph li:nth-child(2) a:focus{background-color: #F28D28}
  .list_main_graph li:nth-child(4) a:hover, .list_main_graph li:nth-child(4) a:focus{background-color: #E54C94}
  .img_director{display: flex;height: 460px}
  .img_director img{max-width: 390px;margin:auto 0 0 auto}
  /* // ------- main - section1 ------- */

  /* ------- main - section2 ------- */
  .list_service{grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));padding:46px 0}
  /* // ------- main - section2 ------- */

  /* ------- main - section3 ------- */
  .section_main3 .inner{padding-top: 80px}
  .section_main3 .tit_main{width: 315px;height:43px;background-size: 315px 43px}
  .list_picture{gap: 55px;padding-top: 45px}
  .list_picture .cont_thumb{padding-top: 22px}
  .list_picture strong{font-size: 22px;line-height: 26px}
  .list_picture .txt_date{padding-top: 13px;font-size: 18px;line-height: 21px}
  .section_main3 .link_moreview{width: 282px;height:56px;margin:50px auto 0;border-radius: 28px;font-size: 22px}
  .section_main3 .link_moreview:hover, .section_main3 .link_moreview:focus{background-color: #3761db}
  /* // ------- main - section3 ------- */
}

@media
only screen and (min-width:1440px) {
  /* ------- main - section1 ------- */
  .section_main1 .inner{padding-top: 80px}
  .section_main1 .inner:after{right:-1176px}
  .section_main1 .inner:before{top:59px;right:99px;width: 454px}
  .group_spot{margin-top: -59px}
  .list_main_graph{flex: 0 0 67%;padding-bottom: 53px}
  .img_director{height: 500px}
  .img_director img{max-width: 460px;margin-right: 26px}
  .img_director .txt_director{bottom:33px}
  
  /* // ------- main - section1 ------- */

  /* ------- main - section3 ------- */
  .list_picture{grid-template-columns: repeat(auto-fill, minmax(360px, 1fr))}
  /* // ------- main - section3 ------- */
}