/*
  Css Name :regionalSupportView.css
  Description :지역특화 성장지원 페이지 CSS
  Modification Information

      수정일      수정자          수정내용
   ----------    --------  ---------------------------
   2021.01.23    이선호      지역특화 성장지원 페이지

    since    :2021.01.23
*/
@charset "utf-8";
.regionalSupp-content{ position: relative;}
.regionalSupp-content .content-title{
    display: inline-flex;
    padding: 4px 24px;
    justify-content: center;
    align-items: center;
    border-radius: 3px 20px 20px 20px;
    background: #0029B0;
    color: #FFF;
    font-family: Pretendard;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 140%; /* 28px */
    letter-spacing: -0.2px;
    margin-top: 30px;
}

.regionalSupp-img {
    margin-top: 20px;
}

.regionalSupp-img img {
    width: 100%;
    height: auto; /* ← 이미지 비율 유지하면서 반응형 처리 */
    display: block;
}

.page-title {
    padding-bottom: 0;
    margin-bottom: 0;
}

.board_list {
    margin: 20px 0 0;
}

.board_list thead tr th {
    padding: 12px;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    border-bottom: 1px solid #D3D3D3;
    background: #E5ECF6;
}

.board_list tbody tr th {
    padding: 12px;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    background: #F3F5F8;
}

.board_list tbody tr td {
    text-align: left;
    color: #111;
    font-family: Pretendard;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%; /* 24px */
    padding: 12px;
}

.board_list_center td{
    text-align: center !important;
}

.content-info {
    color: #111;
    font-family: Pretendard;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 22.4px */
    letter-spacing: -0.16px;
}

.board_list tbody tr td ul li {
    position: relative;
    padding-left: 15px;
    color: #111;
    font-family: Pretendard;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%; /* 24px */
}

.board_list tbody tr td ul li:before {
    content:'';
    position: absolute;
    left:0;
    top: 10px;
    background:#111111;
    width: 4px;
    height: 4px;
    border-radius: 100%;
}

.board_list_text_blue {
    color: #0678E9;
    font-family: Pretendard;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 150%;
}

.board_list_text_black {
    color: #000;
    font-family: Pretendard;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%; /* 30px */
    letter-spacing: -0.6px;
    margin-top: 30px;
}

.content-list {
    display: flex;
    padding: 12px;
    align-items: center;
    gap: 20px;
    flex-direction: row;
    border-radius: 10px;
    background: #F3F5F8;
    margin: 20px 0 60px;
}
.content-list li{
    display: flex;
    align-items: center;
    gap: 5px;
    color: #111;
    font-family: Pretendard;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
    letter-spacing: -0.16px;
}

.content-list span{
    font-weight: 700;
}

.content-list-point { margin-left: 25px; max-width: 1230px;}
.content-list-point > li{list-style: none; padding: 10px 0px; padding-left: 20px; position: relative;}
.content-list-point > li:before{ content:''; position: absolute; left:1px; top: 13px; border-top: 6px solid transparent; border-right: 6px solid transparent;border-bottom: 6px solid transparent;border-left: 8px solid #55B6ED;}
.content-list-point > li > ul > li{list-style: none; padding: 10px 0px; padding-left: 20px; position: relative;}
.content-list-point > li > ul > li:before{ content:''; position: absolute; left:0; top: 1em; background:#55B6ED; width: 8px; height: 8px; border-radius: 100%}
.content-list-point > li > ul > li > ul > li{list-style: none; padding: 10px 0px; padding-left: 20px; position: relative;}
.content-list-point > li > ul > li > ul > li:before{ content:''; position: absolute; left:0; top: 1em; background:#99B8D8; width: 8px; height: 8px; border-radius: 100%}
.content-list-point > li > ul > li > ul > li > ul >li {list-style: none; padding: 10px 0px; padding-left: 10px; position: relative;}
.content-list-point > li > ul > li > ul > li > ul >li:before{ content:'-'; position: absolute; background:unset; width: 0; height: 0; top: 11px; left: -3px;}


.regionalSupp-dialog{width: 90%; margin: 0 auto; margin-top: 15px;}
.dialog-top {font-size: 1.2em; font-weight: 600}
.dialog-top li {display: inline-block; text-align: center; text-indent: 1.5em; padding: 10px; margin-right:10px;position: relative; }
.dialog-top li:before{ content: ''; width: 40px; height: 40px; -ms-transform: rotate(45deg); /* IE 9 */ -webkit-transform: rotate(45deg); transform: rotate(45deg); background: #fff; position: absolute; bottom: 5px; left: -23px; overflow: hidden; z-index: 1;}
.dialog-top li:after{ content: ''; width: 33px; height: 33px; -ms-transform: rotate(45deg); /* IE 9 */ -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */ transform: rotate(45deg); position: absolute; bottom: 7.5px; right: -17px; overflow: hidden; z-index: 2;}
.dialog-top li:nth-child(1){background: #D5E8F7; width: calc(10% - 32px);}
.dialog-top li:nth-child(1):after{background: #D5E8F7;}
.dialog-top li:nth-child(2){background: #AFD1EC; width: calc(28% - 32px);}
.dialog-top li:nth-child(2):after{background: #AFD1EC;}
.dialog-top li:nth-child(3){background: #7BB5DD; width: calc(30% - 32px);}
.dialog-top li:nth-child(3):after{background: #7BB5DD;}
.dialog-top li:nth-child(4){background: #279BCE; color: #fff; width: calc(30% - 32px);}
.dialog-top li:nth-child(4):after{background: #279BCE;}

.dialog-middle > li {display: inline-block; text-align: left; padding: 10px; margin-right:10px;position: relative; border-right: 2px solid #e0e0e0; border-bottom: 2px dashed #e0e0e0; min-height: 110px; vertical-align: top;}
.dialog-middle > li:nth-child(1){width: calc(10% - 34px);}
.dialog-middle > li:nth-child(2){width: calc(28% - 34px);}
.dialog-middle > li:nth-child(3){width: calc(30% - 34px);}
.dialog-middle > li:nth-child(4){width: calc(30% - 34px);}
.dialog-middle > li > * {position: absolute; left: 10px;}
.dialog-middle > li > ul > li{list-style: none; padding: 2px 0px; padding-left: 20px; position: relative;}
.dialog-middle > li > ul > li:before{ content:''; position: absolute; left:0; top: 0.5em; background:#55B6ED; width: 8px; height: 8px; border-radius: 100%}

.dialog-bottom > li {display: inline-block; text-align: left; padding: 10px; margin-right:10px;position: relative; border-right: 2px solid #e0e0e0; border-bottom: 2px solid #e0e0e0; min-height: 110px; vertical-align: top; border-radius: 0 0 20px 0;}
.dialog-bottom > li:nth-child(1){width: calc(10% - 34px);}
.dialog-bottom > li:nth-child(2){width: calc(28% - 34px);}
.dialog-bottom > li:nth-child(3){width: calc(30% - 34px);}
.dialog-bottom > li:nth-child(4){width: calc(30% - 34px);}
.dialog-bottom > li > * {position: absolute; left: 10px;}
.dialog-bottom > li > ul > li{list-style: none; padding: 2px 0px; padding-left: 20px; position: relative;}
.dialog-bottom > li > ul > li:before{ content:''; position: absolute; left:0; top: 0.5em; background:#55B6ED; width: 8px; height: 8px; border-radius: 100%}

.round-list{margin: 35px auto; width: 90%;}
.round-list-ellipse,
.round-list-circle{display:inline-block; vertical-align: middle}
.round-list-ellipse{width:calc(38% - 17px)}
.round-list-circle{width:calc(24% - 17px); margin: 0 15px; position: relative}
.round-list-ellipse > li,
.round-list-circle > li{text-align: center; vertical-align: middle}
.round-list-ellipse > li{border-radius: 80px; background: #F5F7FC; height: 120px; overflow:hidden; margin-bottom: 15px;}
.round-list-circle > li{border-radius: 100%; width: 250px; height: 250px; margin: -70px auto;background: #B1D0E9; overflow: hidden; }
.round-list-ellipse > li p,
.round-list-circle > li p{vertical-align: middle; display: table-cell;font-size: 1.5em;}
.round-list-ellipse > li p{height: 120px; width: 30%; background: #F5F7FC}
.round-list-circle > li p{height: 250px; width: 250px; color: #fff;}

.content-dialog-progress {width:90%; margin: 0 auto; text-align: center; position: relative; z-index: 1;}
.content-dialog-progress li{position: relative; display: inline-block; width: 240px; height: 240px; border-radius: 100%; vertical-align: middle; background: #fff; box-shadow: 0 0 10px #e0e0e0;}
.content-dialog-progress li > p{display: table-cell; vertical-align: middle; width: 240px; height: 240px; border-radius: 100%; font-size: 1.5em; color:#385A97; padding:0 15px;}
.content-dialog-progress li > p > img{width: 88%!important;}
.content-dialog-progress li > p > span{ width: 100%; color: #8B92A7; position: absolute; top: 20px; left: 0;}
.content-dialog-progress:before,
.content-dialog-progress:after{position: absolute; font-size: 2.0em;top: calc(50% - 5px);content: ''; width:10px; height: 10px; border-radius: 100%; background:#2261CE;  z-index: 1;}
.content-dialog-progress:before{left: 3px;}
.content-dialog-progress:after{right: 3px;}

.round-list-square,
.round-list-square-qu{border-radius: 20px; vertical-align: middle; display: inline-block; text-align: left; padding: 15px 0;}
.round-list-square {width:calc(38% - 17px); height: 450px; position: relative; background: #F5F7FC;}
.round-list-title{display: inline-block; text-align: center; text-indent: 1.5em; font-size: 1.5em; padding: 10px; margin-right: 10px; position: absolute;background : #D5E8F7; top: -35px; width: calc(96% - 2px);}
.round-list-title.right-title{background: #7BB5DD; color: #fff}
.round-list-title.right-title:before{background: #7BB5DD}
.round-list-title.right-title:after{background: #fff}
.round-list-square .content-list{margin-top: 11%}
.round-list-title:before{content: ''; width: 37px; height: 37px; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); background: #fff; position: absolute; bottom: 7.5px; left: -19px; overflow: hidden; z-index: 1;}
.round-list-title:after{content: ''; width: 37px; height: 37px; -ms-transform: rotate(45deg);-webkit-transform: rotate(45deg); transform: rotate(45deg); position: absolute; bottom: 7.5px; right: -17px; overflow: hidden; z-index: 2; background:#D5E8F7 ;}
.round-list-circle hr{border-bottom: 2px dashed #E8EBF1; position: absolute; width: 437%; top: calc(50% - 1px); left: -168%; z-index: 1;}

/* 모바일 */

/*.content-list { margin-left: 25px; max-width: 1230px;}*/
/*.content-list > li{list-style: none; padding: 10px 0px; padding-left: 20px; position: relative;}*/
/*.content-list > li:before{ content:''; position: absolute; left:0; top: 1em; background:#99B8D8; width: 8px; height: 8px; border-radius: 100%;}*/
/*.content-list > li > ul{margin-top: 10px;}*/
/*.content-list > li > ul > li{padding-left: 15px;}*/
/*.content-list > li > ul > li:before{ content:'-'; position: absolute; background:unset; width: 0; height: 0; top: 11px;}*/
/*.content-list > li > ul > .bgList{width: 100%; background-color: #F5F7FC; padding: 15px 15px 10px; margin-left: 10px;}*/
/*.content-list > li > ul > .bgList > p{color: #528DD9; margin-bottom: 5px;}*/

/*.content-list-point { margin-left: 25px; max-width: 1230px;}*/
/*.content-list-point > li{list-style: none; padding: 10px 0px; padding-left: 20px; position: relative;}*/
/*.content-list-point > li:before{ content:''; position: absolute; left:1px; top: 13px; border-top: 6px solid transparent; border-right: 6px solid transparent;border-bottom: 6px solid transparent;border-left: 8px solid #55B6ED;}*/
/*.content-list-point > li > ul > li{list-style: none; padding: 10px 0px; padding-left: 20px; position: relative;}*/
/*.content-list-point > li > ul > li:before{ content:''; position: absolute; left:0; top: 1em; background:#99B8D8; width: 8px; height: 8px; border-radius: 100%}*/
/*.content-list-point > li > ul > li > ul > li{list-style: none; padding: 10px 0px; padding-left: 20px; position: relative;}*/
/*.content-list-point > li > ul > li > ul > li:before{ content:''; position: absolute; left:0; top: 1em; background:#55B6ED; width: 8px; height: 8px; border-radius: 100%}*/
/*.content-list-point > li > ul > li > ul > li > ul >li {list-style: none; padding: 10px 0px; padding-left: 10px; position: relative;}*/
/*.content-list-point > li > ul > li > ul > li > ul >li:before{ content:'-'; position: absolute; background:unset; width: 0; height: 0; top: 11px; left: -3px;}*/

@media screen and (max-width: 800px) {
    .content-list {
        align-items: flex-start;
        flex-direction: column;
        color: #111;
        font-family: Pretendard;
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: 150%; /* 21px */
        letter-spacing: -0.14px;
        gap:10px;
    }

    .content-list span{
        display: inline-block;
        white-space: nowrap;
        font-weight: 700;
    }

    .content-list li{
        display: flex;
        align-items: flex-start;
        gap: 5px;
        align-self: stretch;
        word-break: break-all;
    }

    .content-list img {
        padding-top: 3px;
        width: 16px;
        height: 16px;
    }

    .regionalSupp-content .content-title {
        font-size: 18px;
    }

    .board_list tbody tr th {
        font-size: 16px;
    }

    .board_list tbody tr td {
        font-size: 14px;
    }

    .board_list tbody tr td ul li {
        font-size: 14px;
    }

    .board_list colgroup col:nth-child(1) {
        width: 35% !important;
    }

    .board_list colgroup col:nth-child(2) {
        width: 65% !important;
    }
}