@charset "utf-8";
/*메인에관한 css*/

/* 레이아웃 */
.clear:after{content: '';display: block;clear: both;}
#main {padding: 40px 0 50px; background: #fff; font-weight: 400; letter-spacing: -0.05em;}
.mainslide { background-color: #ebf5fa; text-align: center;}
.mainslidebg1 { display: block; height: 445px; background: url(../img/main/img_main_visual1.png) no-repeat left; background-color: #ebf5fa; text-align: center;}
.mainslidebg1{padding: 50px 0px 0px 0px; box-sizing:border-box; margin:0 auto; width: 1398px;}
.mainslidetxt{ display:block; position: absolute; top:180px; left:950px; text-align: left; }
.mainslidetxt p{font-size:20px; font-weight: 400;}
.mainslidetxt span{font-size:40px; font-weight: 600;}
.main_left {float: left; width: 680px;  margin-top: 40px; padding: 50px 38px 51px 59px; box-sizing: border-box;}

span.line1{display: block; background-color: #abd1f4; border-radius: 8px; width: 75px; height: 8px;}
h2.infotitle1{margin-top: 29px; width: 60%; font-weight: 600; font-size:26px; color:#121212;}
h3.infotxt1{ color: #121212; text-align: left; width: 60%;  line-height: 26px; font-size: 16px; padding: 29px 0px 23px 0px;}
a.btn_detail1{color: #151515 !important; background-color: #ddeaf7 !important; text-decoration: none; font-weight: 400; width: 145px; height: 35px; border-radius: 3px;}
a.btn_detail1:hover {background-color: #7eb3e8; width: 145px; height: 35px; border-radius: 3px;}
a.btn_detail1:active {ackground-color: #7eb3e8; width: 145px; height: 35px; border-radius: 3px;}
a.btn_detail1:link {background-color: #ddeaf7; width: 145px; height: 35px; border-radius: 3px;}
a.btn_detail1:visited {background-color: #ddeaf7; width: 145px; height: 35px; border-radius: 3px;}


.main_right {overflow: hidden; float: right; width: 680px; margin-top: 40px; padding: 50px 38px 51px 59px; box-sizing: border-box;}
/* .main_right section {padding: 31px 0;} */
.main_right section:nth-child(n+2) {border-top: 1px solid #ede9e9;}

span.line2{display: block; background-color: #bfcef2; border-radius: 8px; width: 75px; height: 8px;}
h2.infotitle2{margin-top: 29px; width: 60%; font-weight: 600; font-size:26px; color:#121212;}
h3.infotxt2{ color: #121212; text-align: left; width: 60%;  line-height: 26px; font-size: 16px; padding: 29px 0px 23px 0px;}
a.btn_detail2{color: #151515; background-color: #e3ebfe; text-decoration: none; font-weight: 400; width: 145px; height: 35px; border-radius: 3px;}
a.btn_detail2:hover {background-color: #76687d4; width: 145px; height: 35px; border-radius: 3px;}
a.btn_detail2:active {background-color: #76687d4; width: 145px; height: 35px; border-radius: 3px;}
a.btn_detail2:link {background-color: #e3ebfe; width: 145px; height: 35px; border-radius: 3px;}
a.btn_detail2:visited {background-color: #e3ebfe; width: 145px; height: 35px; border-radius: 3px;}



.mContBox1 {border: 1px solid #7eb5e7; border-radius: 13px; background: url(../img/main/mContBox1bg.png) no-repeat left; box-sizing:border-box;}
.mContBox2 {border: 1px solid #a4aaf0; border-radius: 13px; background: url(../img/main/mContBox2bg.png) no-repeat left; box-sizing:border-box;}
.mContBox3 {border-radius: 13px; background: url(../img/main/mContBox3bg.png) no-repeat left; box-sizing:border-box;}
.mContBox4 {border-radius: 13px; background: url(../img/main/mContBox4bg.png) no-repeat left; box-sizing:border-box;}
.tle {font-family: 'Nanum Gothic'; font-weight: 600;}
.mDashBoard h3.tle {font-size: 34px;}
.mContBox h3.tle {margin-bottom: 5px; font-size: 20px; line-height: 24px;}
.subTle {font-size: 15px; font-weight: 400; line-height: 19px; color: #555;}

ul.main_ul > li {position: relative; padding-left: 10px;}
ul.main_ul > li::before {content: ""; position: absolute; top: 50%; left: 0; width: 3px; height: 3px; margin-top: -1.5px; border-radius: 100%; background: #1ea5dc;}

.mDash_date select {height: 25px;padding: 0 23px 0 8px;font-weight: 300;}
.mDash_date *:nth-child(n+2) {margin-left: 3px;}
.mDash_date .dateLabel {font-size: 13px; font-weight: 300;}
.mBorder {width: 100%;min-height: 2px;margin: 12px 0 17px;text-align: right;background: url(../img/main/line_pattern.png) left center repeat-x;animation: mFade 0.4s ease both;animation-delay: 1.7s;}
.mBorder.ani2 {animation-delay: 2.0s;margin: 6px 0 10px;}
.mBorder > span {padding: 0 5px 0 10px; font-size: 13px; font-weight: 300; color: #696969; background: #f3f4f7;letter-spacing: 0;}

.mDb_info{width: 14px;height: 14px;background: url(../img/main/mDashB_info.png) no-repeat center;position: absolute; z-index: 10;top: 7px;right: 11px;}
.helpB{font-family: 'Noto Sans';position: absolute;left: 23px;z-index: 99;background: rgba(0,0,0,0.8);color: #fff;font-weight: 200;padding: 8px 15px;border-radius: 3px;white-space: nowrap;text-align: left;box-shadow: 2px 2px 5px rgba(0,0,0,0.5);top: -4px;font-size: 13px;display: none;line-height: 18px;}
.helpB:before{content: '';display: block;width: 0px;height: 0px;border-top: 4px solid transparent;border-right: 5px solid rgba(0,0,0,0.8);border-bottom: 4px solid transparent;position: absolute;left: -5px;top: 7px;}
.helpB ul li{line-height: 18px;margin-bottom: 10px}
.helpB ul li:last-child{margin-bottom: 0;}
.helpB ul li > b{font-size: 15px;font-weight: 500;}
.helpI:hover .helpB{display: block;}

/*대시보드*/
.mDashBoard > * {float: left;}
.mDash_head {width: 100%; margin-bottom: 17px;}
.mDash_tle {float: left;}
.mDash_tle > .tle {display: inline-block;}
.mDash_tle small {display: block;font-size: 17px; line-height: 1; color: #555;}
.mDash_tle b {font-weight: 800;letter-spacing: -1.7px;}
.mDash_tle b > span {display: inline-block; width: 36px; height: 35px; margin-right: 8px; padding-top: 2px; border: 1px solid #20a5db; font-family:'Noto Sans'; font-weight: 500; font-size: 13px; text-align: center; line-height: 14px; color: #20a5db; box-sizing: border-box;}
.mDash_tle > .mDash_date {margin-left: 20px;}
.mDash_caseNum {float: right;margin-top: 20px;font-size: 20px;font-weight: 500;position: relative;}
.mDash_caseNum::before {content: "";display: inline-block;width: 28px;height: 28px;margin-right: 10px;background-image: url(../img/main/ico_caseNum.png);vertical-align: -16px;}
.mDash_caseNum .num {display: block;margin: 3px 0 0 42px;width: 98px;height: 46px;border-radius: 23px;line-height: 46px;text-align: center;vertical-align: -4px;background: #ffe92f;float: right;}
.mDash_caseNum .num b {font-size: 31px; font-weight: 600; color: #db2d16;}
.mDash_caseNum .date {
    font-size: 13px;
    position: absolute;
    top: 29px;
    left: 38px;
    color: #636363;/* letter-spacing: normal; */
}

.mDashBox {position: relative; width: calc( (100% - 45px) / 4); height: auto; margin: 0 15px 10px 0; border-radius: 10px; color: #fff; animation: mDBzoom 1s ease backwards}
.mDashBox h4.tle {position: relative;height: 70px;padding-left: 75px;padding-top: 14px;font-family:'Noto Sans';font-weight: 500;font-size: 17px;line-height: 21px;letter-spacing: -0.075em;box-sizing: border-box;}
.mDashBox h4.tle:before {content: '';position: absolute; left: 20px;width: 44px;height: 44px;border-radius: 10px;background: rgba(0, 0, 0, .2) url(../img/main/ico_mDashB.png) no-repeat;display: inline-block;margin-bottom: 8px;transition-duration: 0.4s;}
.mDashBox.mDashBox1 h4.tle:before {background-position: left center;}
.mDashBox.mDashBox2 h4.tle:before {background-position: -45px center;}
.mDashBox.mDashBox3 h4.tle:before {background-position: -90px center;}
.mDashBox.mDashBox4 h4.tle:before {background-position: -135px center;}
.mDashBox .mDashB_data{overflow: hidden; height: 150px; padding: 20.5px 30px; border-radius: 0 0 10px 10px; box-sizing: border-box;}
.mDashBox.mDashBox1 {background: #3d62f4; animation-delay: 0.1s;}
.mDashBox.mDashBox1 .mDashB_data {background: rgba(6, 6, 6, .1);}
.mDashBox.mDashBox2 {background: #20a5db; animation-delay: 0.3s;}
.mDashBox.mDashBox2 .mDashB_data {background: rgba(6, 6, 6, .07);}
.mDashBox.mDashBox3 {background: #208edb; animation-delay: 0.5s;}
.mDashBox.mDashBox3 .mDashB_data {background: rgba(6, 6, 6, .09);}
.mDashBox.mDashBox4 {margin-right: 0; background: #6830cf; animation-delay: 0.7s;}
.mDashBox.mDashBox4 .mDashB_data {background: rgba(6, 6, 6, .14);}
.mDashBox.mDashBox3 .helpB, 
.mDashBox.mDashBox4 .helpB{left: auto;right: 23px}
.mDashBox.mDashBox3 .helpB:before, 
.mDashBox.mDashBox4 .helpB:before{border-right: 4px solid transparent;border-left: 5px solid rgba(0,0,0,0.8);left: auto;right: -8px;}
.mDashBox.on .helpB{display: block;}
.mDashB_data li {overflow: hidden; font-size: 16px; font-weight: 500; line-height: 35px;}
.mDashBox.mDashBox4 .mDashB_data li {line-height: 109px;}
.mDashB_data li > p {float: left;}
.mDashB_data li > a {float: right; font-weight: 300; color: #fff;}
.mDashB_data li > a span {margin-right: 3px;font-weight: 600; color: #eff63a;}

.mDashRank {width: calc( (100% - 37px) / 2 );}
.mDash_cTle {overflow: hidden;}
.mDash_cTle h4.tle {float: left; font-size: 18px; font-weight: 600; letter-spacing: -.075em;}
.mDash_cTle h4.tle b {color: #20a5db;}
.mDash_cTle .mDash_date {float: right; margin-top: 1px;}
.mDashRank_list{margin-top: 5px;}
.mDashRank_list li{transition-duration: 0.3s;overflow: hidden;}
.mDashRank_list li:hover {transform: scale(1.02);}
.mDashRank_list li a{/* color: #fff; */line-height: 31px;display: block;padding: 0 22px 0 10px;height: auto;overflow: hidden;position: relative;}
.mDashRank_list li .mDashR_move{position: absolute;top: 100%;width: calc(100% - 65px);left: 45px;}
.mDashRank_list li .mDashR_move:first-of-type{top: 0;}
.mDashRank_list li .mDr_num{float: left;width: 25px;display: inline-block;text-align: center;font-size: 15px;letter-spacing: 0;font-weight: 600;margin-right: 14px;color: #20a5db;}
.mDashRank_list li .mDr_num b{font-size: 15px;font-weight:600}
.mDashRank_list li .mDr_name{float: left;display: inline-block;width: 240px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;padding-left: 5px;font-size: 15px;letter-spacing: 0;}
.mDashRank_list li .mDr_won{float: right;font-size: 16px;letter-spacing: -0.16px; color: #555;}
.mDashRank_list li .mDr_won small {font-size: 14px;}
.mDashRank_list li.mDashR_first{background: #fff;border: 1px solid #e6e6e6;border-radius: 7px;height: 37px;}
.mDashRank_list li.mDashR_first .mDr_num{height: 30px;position: relative;background: #53c5ef;color: #fff;line-height: 24px;}
.mDashRank_list li.mDashR_first .mDr_num:after {content: "";position: absolute;left: 0;bottom: 0;width: 0;height: 0;border-bottom: 7px solid #fff;border-left: 12.5px solid transparent;border-right: 12.5px solid transparent;}
.mDashRank_list li.mDashR_first .mDr_name,
.mDashRank_list li.mDashR_first .mDr_won{line-height: 37px; font-weight: 600;}
.mDashRank.mDashRank1 {animation: mDshow 0.4s ease both; animation-delay: 1s;}
.mDashRank.mDashRank2 {float: right; animation: mDshow 0.4s ease both; animation-delay: 1.4s;}
.mDashRank.mDashRank2 .mDash_cTle h4.tle b {color: #e83330;}
.mDashRank.mDashRank2 .mDashRank_list li.mDashR_first .mDr_num {background: #e24f4d; color: #fff;}
.mDashRank.mDashRank2 .mDashRank_list li .mDr_num {color: #ea1616;}

/* ST */
.mLnk {height: 205px; padding: 25px 20px;}
.mLnk > ul > li:nth-child(n+2) {border-top: 1px dashed #ccc}
.mLnk1 {float: left; width: calc( (100% - 45px) * 0.25);}
.mLnk1 .tle {margin-left: 7px;}
.mLnk1 ul {margin-top: 12px;}
.mLnk1 li {padding: 8px 0 8px 10px; font-size: 15px; letter-spacing: -0.1em;}
.mLnk1 li a:hover {font-weight: 500;}
.mLnk1 li small {font-size: 13px;}

/* ST2 */
.mLnk2 {float: right; width: calc( (100% - 15px) * 0.75); background: #fff url(../img/main/bg_mLnk2.png) left 24px bottom 13px no-repeat;}
.mLnk2 h3.tle {float: left; padding: 5px 0 0 10px;}
.mLnk2 .mLnk_cont {float: right; width: 460px; margin-top: -14px; box-sizing: border-box;}
.mLnk2 .mLnk_cont > li {overflow: hidden; padding: 10px 15px;}
.mLnk2 h4.tle {float: left;width: 102px;font-family:'Noto Sans';font-size: 16px;font-weight: 500;color: #1a5b7b;}
.mLnk2 .main_ul {float: left;width: calc(100% - 103px);margin-top: 4px;}
.mLnk2 .main_ul > li {float: left;margin-left: 18px;line-height: 1.5;}
.mLnk2 .main_ul > li a:hover {font-weight: 500;}

/*정비사업 공사비 검증이란*/
#main .infoarea1 li > a {display: block; overflow: hidden;}
#main .infoarea1 li > a:hover{font-weight: 500}

/*정비사업 공사비 검증이란*/
#main .infoarea1 li > a {display: block; overflow: hidden;}
#main .infoarea1 li > a:hover{font-weight: 500}

/* 공지사항 */
#main .m_news{position:relative; width:100%; padding-bottom: 0px;}
#main .m_news h3.tle {margin-bottom: 8px; font-size: 20px;}
#main .m_news .m_newsGo {display: block; position: absolute;right: 0;top: 0px; width: 73px; height: 20px;}

#main .m_news li {padding: 0px 2px;}
#main .m_news li > a {display: block; overflow: hidden;  font-size: 16px;}
#main .m_news li > a:hover{font-weight: 500}
#main .m_news .m_newsHead{float: left;display: block;max-width: 69%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;position: relative;padding-right: 25px;color: #111;}
#main .m_news .m_newsHead .new{width: 18px;height: 18px;border-radius: 30%;background: #f31f3b; position: absolute;right: 0;top: 50%;transform: translateY(-50%);}
#main .m_news .m_newsHead .new:after{content: 'N';color: #fff;position: absolute;left: 5px;top: 3px;font-size: 11px;line-height: 1;}
#main .m_news .m_newsDate{float: left;color: #7c7c7e;padding-right: 8px;}

/* 자주하는질문 */
#main .m_faq{position:relative; width:100%; padding-bottom: 0px;}
#main .m_faq h3.tle {margin-bottom: 8px; font-size: 20px;}
#main .m_faq .m_faqGo {display: block; position: absolute;right: 0;top: 0px; width: 73px; height: 20px;}

#main .m_faq li {padding: 0px 2px;}
#main .m_faq li > a {display: block; overflow: hidden; font-size: 16px;}
#main .m_faq li > a:hover{font-weight: 500}
#main .m_faq .m_faqsHead{float: left;display: block;max-width: 69%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;position: relative;padding-right: 25px;color: #111;}
#main .m_faq .m_faqHead .new{width: 18px;height: 18px;border-radius: 100%;background: #f31f3b; position: absolute;right: 0;top: 50%;transform: translateY(-50%);}
#main .m_faq .m_faqHead .new:after{content: 'N';color: #fff;position: absolute;left: 5px;top: 3px;font-size: 11px;line-height: 1;}
#main .m_faq .m_faqDate{float: left;color: #7c7c7e;padding-right: 8px;}



/* ST3 */
#main .m_chart .m_chartList{overflow: hidden;}
#main .m_chart .m_chartList li{float: left;position: relative;width: 33.3%;text-align: center;font-size: 15px;line-height: 18px;letter-spacing: -1.1px;margin-top: 20px;padding-top: 2px;}
#main .m_chart .m_chartList li .m_chartTle{height: 35px;position: relative;}
#main .m_chart .m_chartList li .m_chartTle span{display: block;position: absolute;top: 50%;transform: translateY(-50%);width: 100%;}
#main .m_chart .m_chartList li a{}
#main .m_chart .m_chartList li a:before{content: '';width: 64px;height: 64px;border-radius: 20px;background: #f6f6f6;display: inline-block;margin-bottom: 8px;transition-duration: 0.4s;}
#main .m_chart .m_chartList li a:after{content: '';width: 64px;height: 64px;display: block;background: url(../img/main/ico_chart.png) no-repeat; position: absolute;top: 2px;left: 50%;margin-left: -32px;transition-duration: 0.3s;transition-timing-function: ease-in-out;}
#main .m_chart .m_chartList li a:hover  .m_chartTle span {font-weight: 500}
#main .m_chart .m_chartList li a:hover:after{transform: inherit;animation: aniTB 1s 1;}
#main .m_chart .m_chartList li.mCt_1 a:after{background-position: left center;}
#main .m_chart .m_chartList li.mCt_2 a:after{background-position: -64px center;}
#main .m_chart .m_chartList li.mCt_3 a:after{background-position: -128px center;}
#main .m_chart .m_chartList li.mCt_4 a:after{background-position: -192px center;}
#main .m_chart .m_chartList li.mCt_5 a:after{background-position: -256px center;}
#main .m_chart .m_chartList li.mCt_6 a:after{background-position: -320px center;}
#main .m_chart .m_chartList li.mCt_7 a:after{background-position: -384px center;}
#main .m_chart .m_chartList .bx-wrapper .bx-prev{left: -18px}
#main .m_chart .m_chartList .bx-wrapper .bx-next{right: -22px}
/* ST4*/
.m_manage > a h3.tle::after {content: ""; display: inline-block;width: 25px;height: 20px; vertical-align: -3px; background: url(../img/main/arrow.png) no-repeat center; opacity: 0; transition-duration: 0.2s;}
.m_manage > a:hover h3.tle::after {margin-left: 5px; opacity: 1;}
.m_manage .subTle {margin-top: 8px;}
#main .m_news > li.active .m_newsGo:hover{animation:aniLR 1s infinite;}
.m_manage > a {display: block; position: relative; padding-right: 83px;}
.m_manage > a:before{content: '';position: absolute; top: -7px; right: 16px;width: 82.5px;height: 82.5px;border-radius: 50%;background: #f6f6f6; display: inline-block;margin-bottom: 8px;}
.m_manage > a:after{content: '';position: absolute; top: -7px; right: 16px;width: 82.5px;height: 82.5px;border-radius: 50%;background: url(../img/main/ico_chart.png) right center no-repeat;display: inline-block;margin-bottom: 8px;transition-duration: 0.4s;}
.m_manage > a:hover {}
.m_manage > a:hover::after{transform: inherit;animation: aniTB 1s 1;}
/*기관 로고*/
.orglogoarea{display: flex;}
.orglogo{display: flex; flex-wrap:nowrap; overflow-x: auto; padding:10px 10px 70px 10px; width: 1398px; margin: 0 auto; box-sizing:border-box;}
.orglogo li{ text-align: center; padding: 0px 55px;}


/*애니메이션*/
@keyframes aniTB { 
    0%{transform:translateY(2.5px);} 
    50%{transform:translateY(-2.5px);} 
    70%{transform:translateY(2.5px);} 
    100%{transform:translateY(0px);} 
} 
@keyframes mDBzoom {
    0% {opacity: 0;transform: scale(1.1);} 
    100% {opacity: 1; transform: scale(1);} 
}
@keyframes mDshow {
    0% {opacity: 0;transform: translate(0, 20px);} 
    100% {opacity: 1; transform: translate(0)} 
}
@keyframes mFade {
    0% {opacity: 0;} 
    100% {opacity: 1;} 
}