@charset "utf-8"; 

html,body{
    font-family: 'Noto Sans KR', sans-serif;
    background-color: #cddde6;
}

.clearfix::after {
    content: "";
    clear: both;
    display: block;
}


.sub_section1{
    width: 100%;
    margin-top: 120px;
}
.sub_section1 .signin {
    width: 100%;
    margin: 0 auto;
}
.sub_section1 .signin .signin_wrap {
    /* width: 90%;  */
    margin: 0 auto;
}
.logo_wrap {
    width: 32%;
    height: 10vh;
    padding-top: 7vh;
    margin: 0 auto;
    padding-bottom: 7vh;
}
.sub_section1 .signin .signin_wrap .contents {
    text-align: center;
}
.sub_section1 .signin .signin_wrap .contents .title {
    display: block;
    font-size: 25px;
    font-weight: 900;
    color:#737373;
    margin-bottom: 30px;
}
.sub_section1 .signin .signin_wrap .contents .inputs input {
    width: 78%;
    height: 10vw;
    border-radius: 10px;
    background-color: #f0f0f0;
    border: 1px solid #f0f0f0;
    padding-left: 1vw;
    text-indent: 3vw;
}

.sub_section1 .signin .signin_wrap .contents .inputs select {
    width: 78%;
    height: 10vw;
    border-radius: 10px;
    background-color: #f0f0f0;
    border: 1px solid #f0f0f0;
    padding-left: 1vw;
    text-indent: 3vw;
}
.sub_section1 .signin .signin_wrap .contents .inputs input::placeholder {color:#585858; font-size: 16px;}
.sub_section1 .signin .signin_wrap .contents .button_login button {
    width: 81%;
    height: 45px;
    color:#fff;
    border-radius: 10px;
    background-color: #56ac8a;
    border: none;
    margin-top: 20px;
    margin-bottom: 20px;}
.sub_section1 .signin .signin_wrap .contents .a_signup {font-size: 13px; color:#133e73;}
.sub_section1 .signin .signin_wrap .contents .a_signup p {
    width: 81%;
    height: 40px;
    border-radius: 10px;
    color: #fff;
    background-color: #006991;
    margin: 0 auto;
    padding-top: 11px;
}
.sub_section1 .signin .signin_wrap .contents .a_signup p:first-child {
    margin-bottom: 0;
}

.section {width: 100%;}
.section .section_wrap {width: 1200px; height: 100%; background-color: #fafafa; margin:0 auto; padding-top: 50px;}
.section .section_wrap .in_wrap {width: 80%; height:100%; background: url(/images/bg_in.png) no-repeat; background-position: right top; margin:0 auto;}
.in_wrap .title {font-size: 22px; color: #f64b4b; padding-top: 50px; padding-bottom: 40px; line-height: 2.5rem;}
.in_wrap .title span {font-size: 60px; color:#1067b9; font-weight: bold;}
.in_wrap .title2 {font-size: 14px; color: #757575; line-height: 1.5rem; padding-bottom: 70px;}
.in_wrap .title2 span {font-size: 20px; font-weight: bold; color: #757575;}

.in_wrap .imformation {}
.in_wrap .imformation ul {overflow: hidden; float: left;}
.in_wrap .imformation ul li {float: left; color: #95a2ac; font-weight: bold; padding-right: 20px; font-size: 15px;}
.in_wrap .imformation .ul_left {}
.in_wrap .imformation .ul_right {float: right;color: #95a2ac; font-weight: bold; padding-left: 20px; font-size: 15px;}

.in_wrap .grape_bg {margin-bottom: 20px;}
.result {}


.main_section_wrap_bt {margin-top: 30px; padding-bottom: 30px;}
.main_section_wrap_bt a {margin: 0 auto; display: block; width: 230px; padding: 15px 0 15px 0; text-align: center;;background-color: #1067b9; border-radius: 50px; }
.main_section_wrap_bt button {margin: 0 auto; display: block; color: #ffffff; font-size: 21px; font-weight: 100; width: 230px; padding: 15px 0 15px 0; text-align: center;;background-color: #1067b9; border-radius: 50px; }
.main_section_wrap_bt span {color: #ffffff; font-size: 21px; font-weight: 100;}


/* 그래프 css */
.hdbx1{display: block;}
.hdbx2{display: none;}
.grape_bg{width:100%; background: #eaf2f7; border-radius: 20px; padding-top: 60px; padding-bottom: 20px;; margin-top: 40px;}
.grape_bg .grape_bx{width: 96%; margin: 0 auto;  overflow: hidden;;}
.grape_bg .grape_bx ul li{float: left;;  width: 7%; text-align: center; font-size: 12px;; padding-top: 15px; padding-bottom: 15px; color: #738390;;}
.grape_bg .grape_bx ul li span{display: block; width: 100%; font-size: 16px;  margin-bottom: 10px;; font-weight: bold;}
.grape_bottom_text{overflow: hidden;padding-top: 10px; padding-bottom: 10px; width: 96%; margin: 0 auto;}
.grape_bottom_text ul li{ float: left; text-align: center; border-right: 1px solid #838484;  font-size: 14px; color:#838484;}
.grape_bottom_text ul li:first-child{border-left: 1px solid #838484;}
.grape_bottom_text ul li.col1{ width: 7%;}
.grape_bottom_text ul li.col2{ width: 14%;}
.grape_bottom_text ul li.col3{ width: 21%;}
.grape_bottom_text ul li.col4{ width: 28%;}
.grape_bottom_text ul li.col5{ width: 35%;}
.result {width:100%; background-color: #eaf2f7; border-radius: 20px; padding-top: 20px; padding-bottom: 20px;; margin-top: 40px;}
.result .result_wrap {width: 96%; margin: 0 auto; overflow: hidden;}
.result .result_wrap p {display: inline; line-height: 2rem;}
.result .result_wrap p span {color:#116dbd; font-weight: bold; font-size:17px;}
.result .result_wrap .result_title {color: #116dbd; font-weight: bold; font-size: 18px; margin-right: 20px;}
.grape_bg2 {width:100%; background: #eaf2f7; border-radius: 20px; padding-top: 30px; padding-bottom: 30px;; margin-top: 40px;}
.grape_bg2 .grape_bx2 {width: 96%; margin: 0 auto;  overflow: hidden;}
.grape_bg2 .grape_bx2 p {text-align:center; line-height: 2rem; color: #95a2ac; font-weight: bold;}
.grape_bg3 {width:100%; overflow:hidden;background: #eaf2f7; border-radius: 20px; padding-top: 30px; padding-bottom: 30px;; margin-top: 20px;}
.grape_bg3 .grape_bx3{width: 30%; float: left;}
.grape_bg3 .grape_bx3 ul{overflow: hidden;}
.grape_bg3 .grape_bx3 ul li{width: 30%;margin-left: 3%; float: left; color: #95a2ac; text-align: center;}
.grape_bg3 .grape_bx3 ul li:first-child{margin-left: 0; font-weight: bold; font-size: 21px;}
.grape_bg3 .grape_bx3 ul li:nth-child(2n) {font-weight: bold;}
.grape_bg3 .grape_bg_wrap3 .number {position: absolute ; top: 30; right: 50px; color: #738390; font-weight: bold;}
.grape_bg3 .progressbar {float:left;width: 70%; height:18px;}
.grape_bg3 .progressbar .bar{width: 90%;; height:18px; background-color: #e0e0e0; border-radius: 50px;}
.grape_bg3 .progressbar .bar .bar_ok{background: #7c8a95; height: 100%; border-radius: 20px;}
/* bar 퍼센트 */
.grape_bg3 .progressbar .bar .bar_ok.aa{width:40%;}
.grape_bg3 .progressbar .bar .bar_ok.bb{width:44%;}
.grape_bg3 .progressbar .bar .bar_ok.cc{width:46%;}
.grape_bg3 .progressbar .bar .bar_ok.dd{width:47%;}
.grape_bg3 .progressbar .bar .bar_ok.ee{width:48%;}
.grape_bg3 .progressbar .bar .bar_ok.ff{width:49%;}
.grape_bg3 .progressbar .bar .bar_ok.gg{width:50%;}
.grape_bg3 .progressbar .bar .bar_ok.hh{width:54%;}
.grape_bg3 .progressbar .bar .bar_ok.ii{width:56%;}
.grape_bg3 .progressbar .bar .bar_ok.jj{width:57%;}
.grape_bg3 .progressbar .bar .bar_ok.kk{width:58%;}
.grape_bg3 .progressbar .bar .bar_ok.ll{width:71%;}
.grape_bg3 .grape_bx5 {background-color: #ccd8e0; width: 95%; margin-left:30px; margin-top:30px; overflow: hidden;}
.grape_bg3 .grape_bx5 p {text-align:left; line-height: 2rem; color: #67727b; margin-top:10px; font-weight: bold;}
.grape_bg3 .grape_bx5 hr {width: 100%; height: 10px;  border: 0;  box-shadow: 0 5px 5px -5px #a3b8c7 inset;}



/* @media screen and (max-width: 1750px) and (min-width: 1px){
    header .header_in .join {}
    .section .section_wrap {width: 100%;}
}
@media screen and (max-width: 1400px) and (min-width: 1px){
    .section .section_wrap .in_wrap{background:none;}
}


@media screen and (max-width: 1200px) and (min-width: 1px){
    .in_wrap .imformation .ul_left{float: none;}
    .in_wrap .imformation .ul_right{float: none;padding-left: 0;}
} */


@media (max-width: 767px) {
    .header_end {
        height: 0;
        position: fixed;
        width: 0;
        z-index: 0;
        background: transparent;
    }
    .
}

@media ( min-width: 480px ) {
    html,body{
        font-family: 'Noto Sans KR', sans-serif;
        width: 100%;
    }
    .clearfix::after {
        content: "";
        clear: both;
        display: block;
    }


    .sub_section1 {
        width: 100%;
        height: 100vh;
        background-image: url('../images/main_bg_web3.png');
        background-repeat: no-repeat;
        background-size: cover;
        overflow: hidden;
        margin-top: 0;
    }
    .sub_section1 .signin {
        width: 1024px;
        margin: 0 auto;
        background-color: #a5c3d2;
        border-radius: 10px;
        padding-top: 15vh;
        padding-bottom: 7vh;
        height: 640px;
        margin-top: 200px;
    }
    .sub_section1 .signin .signin_wrap {width: 90%; margin: 0 auto;}
    .logo_wrap {
        width: 95%;
        height: 10vh;
        padding: 4vh;
    }
    .sub_section1 .signin .signin_wrap .contents {text-align: center;}
    .sub_section1 .signin .signin_wrap .contents .title {
        display: block;
        font-size: 40px;
        font-weight: 500;
        color:#fff;
        margin-bottom: 60px;
        /* font-family: 'NanumSquare', sans-serif !important; */
    }
    .sub_section1 .signin .signin_wrap .contents .inputs input {
        width: 37.5%;
        height: 45px;
        border-radius: 10px;
        background-color: #f0f0f0;
        border: 1px solid #f0f0f0;
        padding-left: 1vw;
        text-indent: 0vw;
    }
    .sub_section1 .signin .signin_wrap .contents .inputs input::placeholder {color:#585858; font-size: 16px;}
    .sub_section1 .signin .signin_wrap .contents .button_login button {
        width: 37.5%;
        height: 45px;
        color:#fff;
        border-radius: 10px;
        background-color: #56ac8a;
        border: none;
        margin-top: 20px;
        margin-bottom: 20px;
        font-weight: bold;
    }
    .sub_section1 .signin .signin_wrap .contents .a_signup {font-size: 13px; color:#133e73;}
    .sub_section1 .signin .signin_wrap .contents .a_signup p {
        width: 37.5%;
        height: 40px;
        border-radius: 10px;
        color: #fff;
        background-color: #006991;
        margin: 0 auto;
        padding-top: 11px;
    }

    .section {width: 100%;}
    .section .section_wrap {width: 1200px; height: 100%; background-color: #fafafa; margin:0 auto; padding-top: 50px;}
    .section .section_wrap .in_wrap {width: 80%; height:100%; background: url(/images/bg_in.png) no-repeat; background-position: right top; margin:0 auto;}
    .in_wrap .title {font-size: 22px; color: #f64b4b; padding-top: 50px; padding-bottom: 40px; line-height: 2.5rem;}
    .in_wrap .title span {font-size: 60px; color:#1067b9; font-weight: bold;}
    .in_wrap .title2 {font-size: 14px; color: #757575; line-height: 1.5rem; padding-bottom: 70px;}
    .in_wrap .title2 span {font-size: 20px; font-weight: bold; color: #757575;}

    .in_wrap .imformation {}
    .in_wrap .imformation ul {overflow: hidden; float: left;}
    .in_wrap .imformation ul li {float: left; color: #95a2ac; font-weight: bold; padding-right: 20px; font-size: 15px;}
    .in_wrap .imformation .ul_left {}
    .in_wrap .imformation .ul_right {float: right;color: #95a2ac; font-weight: bold; padding-left: 20px; font-size: 15px;}

    .in_wrap .grape_bg {margin-bottom: 20px;}
    .result {}


    .main_section_wrap_bt {margin-top: 30px; padding-bottom: 30px;}
    .main_section_wrap_bt a {margin: 0 auto; display: block; width: 230px; padding: 15px 0 15px 0; text-align: center;;background-color: #1067b9; border-radius: 50px; }
    .main_section_wrap_bt button {margin: 0 auto; display: block; color: #ffffff; font-size: 21px; font-weight: 100; width: 230px; padding: 15px 0 15px 0; text-align: center;;background-color: #1067b9; border-radius: 50px; }
    .main_section_wrap_bt span {color: #ffffff; font-size: 21px; font-weight: 100;}


    /* 그래프 css */
    .hdbx1{display: block;}
    .hdbx2{display: none;}
    .grape_bg{width:100%; background: #eaf2f7; border-radius: 20px; padding-top: 60px; padding-bottom: 20px;; margin-top: 40px;}
    .grape_bg .grape_bx{width: 96%; margin: 0 auto;  overflow: hidden;;}
    .grape_bg .grape_bx ul li{float: left;;  width: 7%; text-align: center; font-size: 12px;; padding-top: 15px; padding-bottom: 15px; color: #738390;;}
    .grape_bg .grape_bx ul li span{display: block; width: 100%; font-size: 16px;  margin-bottom: 10px;; font-weight: bold;}
    .grape_bottom_text{overflow: hidden;padding-top: 10px; padding-bottom: 10px; width: 96%; margin: 0 auto;}
    .grape_bottom_text ul li{ float: left; text-align: center; border-right: 1px solid #838484;  font-size: 14px; color:#838484;}
    .grape_bottom_text ul li:first-child{border-left: 1px solid #838484;}
    .grape_bottom_text ul li.col1{ width: 7%;}
    .grape_bottom_text ul li.col2{ width: 14%;}
    .grape_bottom_text ul li.col3{ width: 21%;}
    .grape_bottom_text ul li.col4{ width: 28%;}
    .grape_bottom_text ul li.col5{ width: 35%;}
    .result {width:100%; background-color: #eaf2f7; border-radius: 20px; padding-top: 20px; padding-bottom: 20px;; margin-top: 40px;}
    .result .result_wrap {width: 96%; margin: 0 auto; overflow: hidden;}
    .result .result_wrap p {display: inline; line-height: 2rem;}
    .result .result_wrap p span {color:#116dbd; font-weight: bold; font-size:17px;}
    .result .result_wrap .result_title {color: #116dbd; font-weight: bold; font-size: 18px; margin-right: 20px;}
    .grape_bg2 {width:100%; background: #eaf2f7; border-radius: 20px; padding-top: 30px; padding-bottom: 30px;; margin-top: 40px;}
    .grape_bg2 .grape_bx2 {width: 96%; margin: 0 auto;  overflow: hidden;}
    .grape_bg2 .grape_bx2 p {text-align:center; line-height: 2rem; color: #95a2ac; font-weight: bold;}
    .grape_bg3 {width:100%; overflow:hidden;background: #eaf2f7; border-radius: 20px; padding-top: 30px; padding-bottom: 30px;; margin-top: 20px;}
    .grape_bg3 .grape_bx3{width: 30%; float: left;}
    .grape_bg3 .grape_bx3 ul{overflow: hidden;}
    .grape_bg3 .grape_bx3 ul li{width: 30%;margin-left: 3%; float: left; color: #95a2ac; text-align: center;}
    .grape_bg3 .grape_bx3 ul li:first-child{margin-left: 0; font-weight: bold; font-size: 21px;}
    .grape_bg3 .grape_bx3 ul li:nth-child(2n) {font-weight: bold;}
    .grape_bg3 .grape_bg_wrap3 .number {position: absolute ; top: 30; right: 50px; color: #738390; font-weight: bold;}
    .grape_bg3 .progressbar {float:left;width: 70%; height:18px;}
    .grape_bg3 .progressbar .bar{width: 90%;; height:18px; background-color: #e0e0e0; border-radius: 50px;}
    .grape_bg3 .progressbar .bar .bar_ok{background: #7c8a95; height: 100%; border-radius: 20px;}
    /* bar 퍼센트 */
    .grape_bg3 .progressbar .bar .bar_ok.aa{width:40%;}
    .grape_bg3 .progressbar .bar .bar_ok.bb{width:44%;}
    .grape_bg3 .progressbar .bar .bar_ok.cc{width:46%;}
    .grape_bg3 .progressbar .bar .bar_ok.dd{width:47%;}
    .grape_bg3 .progressbar .bar .bar_ok.ee{width:48%;}
    .grape_bg3 .progressbar .bar .bar_ok.ff{width:49%;}
    .grape_bg3 .progressbar .bar .bar_ok.gg{width:50%;}
    .grape_bg3 .progressbar .bar .bar_ok.hh{width:54%;}
    .grape_bg3 .progressbar .bar .bar_ok.ii{width:56%;}
    .grape_bg3 .progressbar .bar .bar_ok.jj{width:57%;}
    .grape_bg3 .progressbar .bar .bar_ok.kk{width:58%;}
    .grape_bg3 .progressbar .bar .bar_ok.ll{width:71%;}
    .grape_bg3 .grape_bx5 {background-color: #ccd8e0; width: 95%; margin-left:30px; margin-top:30px; overflow: hidden;}
    .grape_bg3 .grape_bx5 p {text-align:left; line-height: 2rem; color: #67727b; margin-top:10px; font-weight: bold;}
    .grape_bg3 .grape_bx5 hr {width: 100%; height: 10px;  border: 0;  box-shadow: 0 5px 5px -5px #a3b8c7 inset;}
}



@media screen and (min-width:480px) and (max-width:1024px) {
    html,body{
        font-family: 'NanumSquare', sans-serif !important;
        background-color: #cddde6;
    }



    .sub_section1{width: 100%;}
    .sub_section1 .signin {
        width: 100%;
        margin: 0 auto;
        background-color: transparent;
        padding-top: 0;
        margin-top: 200px;
    }
    .sub_section1 .signin .signin_wrap {
        /* width: 90%;  */
        margin: 0 auto;
    }
    .logo_wrap {
        width: 26%;
        height: 17vh;
        padding-top: 7vh;
        margin: 0 auto;
        padding-bottom: 7vh;
    }
    .sub_section1 {
        width: 100%;
        height: 100vh;
        background-image: url(../images/main_bg_web3.png);
        background-repeat: no-repeat;
        background-size: cover;
        overflow: hidden;
    }
    .sub_section1 .signin .signin_wrap .contents {
        text-align: center;
    }
    .sub_section1 .signin .signin_wrap .contents .title {
        display: block;
        font-size: 5vw;
        font-weight: 900;
        color:#333;
        margin-bottom: 30px;
    }
    .sub_section1 .signin .signin_wrap .contents .inputs input {
        width: 78%;
        height: 45px;
        border-radius: 10px;
        background-color: #f0f0f0;
        border: 1px solid #f0f0f0;
        padding-left: 1vw;
        text-indent: 3vw;
    }

    .sub_section1 .signin .signin_wrap .contents .inputs select {
        width: 78%;
        height: 10vw;
        border-radius: 10px;
        background-color: #f0f0f0;
        border: 1px solid #f0f0f0;
        padding-left: 1vw;
        text-indent: 3vw;
    }
    .sub_section1 .signin .signin_wrap .contents .inputs input::placeholder {color:#585858; font-size: 16px;}
    .sub_section1 .signin .signin_wrap .contents .button_login button {
        width: 78%;
        height: 45px;
        color:#fff;
        border-radius: 10px;
        background-color: #56ac8a;
        border: none;
        margin-top: 20px;
        margin-bottom: 20px;}
    .sub_section1 .signin .signin_wrap .contents .a_signup {font-size: 13px; color:#133e73;}
    .sub_section1 .signin .signin_wrap .contents .a_signup p {
        width: 78%;
        height: 40px;
        border-radius: 10px;
        color: #fff;
        background-color: #006991;
        margin: 0 auto;
        padding-top: 11px;
    }
    .sub_section1 .signin .signin_wrap .contents .a_signup p:first-child {
        margin-bottom: 0;
    }

    .section {width: 100%;}
    .section .section_wrap {width: 1200px; height: 100%; background-color: #fafafa; margin:0 auto; padding-top: 50px;}
    .section .section_wrap .in_wrap {width: 80%; height:100%; background: url(/images/bg_in.png) no-repeat; background-position: right top; margin:0 auto;}
    .in_wrap .title {font-size: 22px; color: #f64b4b; padding-top: 50px; padding-bottom: 40px; line-height: 2.5rem;}
    .in_wrap .title span {font-size: 60px; color:#1067b9; font-weight: bold;}
    .in_wrap .title2 {font-size: 14px; color: #757575; line-height: 1.5rem; padding-bottom: 70px;}
    .in_wrap .title2 span {font-size: 20px; font-weight: bold; color: #757575;}

    .in_wrap .imformation {}
    .in_wrap .imformation ul {overflow: hidden; float: left;}
    .in_wrap .imformation ul li {float: left; color: #95a2ac; font-weight: bold; padding-right: 20px; font-size: 15px;}
    .in_wrap .imformation .ul_left {}
    .in_wrap .imformation .ul_right {float: right;color: #95a2ac; font-weight: bold; padding-left: 20px; font-size: 15px;}

    .in_wrap .grape_bg {margin-bottom: 20px;}
    .result {}


    .main_section_wrap_bt {margin-top: 30px; padding-bottom: 30px;}
    .main_section_wrap_bt a {margin: 0 auto; display: block; width: 230px; padding: 15px 0 15px 0; text-align: center;;background-color: #1067b9; border-radius: 50px; }
    .main_section_wrap_bt button {margin: 0 auto; display: block; color: #ffffff; font-size: 21px; font-weight: 100; width: 230px; padding: 15px 0 15px 0; text-align: center;;background-color: #1067b9; border-radius: 50px; }
    .main_section_wrap_bt span {color: #ffffff; font-size: 21px; font-weight: 100;}


    /* 그래프 css */
    .hdbx1{display: block;}
    .hdbx2{display: none;}
    .grape_bg{width:100%; background: #eaf2f7; border-radius: 20px; padding-top: 60px; padding-bottom: 20px;; margin-top: 40px;}
    .grape_bg .grape_bx{width: 96%; margin: 0 auto;  overflow: hidden;;}
    .grape_bg .grape_bx ul li{float: left;;  width: 7%; text-align: center; font-size: 12px;; padding-top: 15px; padding-bottom: 15px; color: #738390;;}
    .grape_bg .grape_bx ul li span{display: block; width: 100%; font-size: 16px;  margin-bottom: 10px;; font-weight: bold;}
    .grape_bottom_text{overflow: hidden;padding-top: 10px; padding-bottom: 10px; width: 96%; margin: 0 auto;}
    .grape_bottom_text ul li{ float: left; text-align: center; border-right: 1px solid #838484;  font-size: 14px; color:#838484;}
    .grape_bottom_text ul li:first-child{border-left: 1px solid #838484;}
    .grape_bottom_text ul li.col1{ width: 7%;}
    .grape_bottom_text ul li.col2{ width: 14%;}
    .grape_bottom_text ul li.col3{ width: 21%;}
    .grape_bottom_text ul li.col4{ width: 28%;}
    .grape_bottom_text ul li.col5{ width: 35%;}
    .result {width:100%; background-color: #eaf2f7; border-radius: 20px; padding-top: 20px; padding-bottom: 20px;; margin-top: 40px;}
    .result .result_wrap {width: 96%; margin: 0 auto; overflow: hidden;}
    .result .result_wrap p {display: inline; line-height: 2rem;}
    .result .result_wrap p span {color:#116dbd; font-weight: bold; font-size:17px;}
    .result .result_wrap .result_title {color: #116dbd; font-weight: bold; font-size: 18px; margin-right: 20px;}
    .grape_bg2 {width:100%; background: #eaf2f7; border-radius: 20px; padding-top: 30px; padding-bottom: 30px;; margin-top: 40px;}
    .grape_bg2 .grape_bx2 {width: 96%; margin: 0 auto;  overflow: hidden;}
    .grape_bg2 .grape_bx2 p {text-align:center; line-height: 2rem; color: #95a2ac; font-weight: bold;}
    .grape_bg3 {width:100%; overflow:hidden;background: #eaf2f7; border-radius: 20px; padding-top: 30px; padding-bottom: 30px;; margin-top: 20px;}
    .grape_bg3 .grape_bx3{width: 30%; float: left;}
    .grape_bg3 .grape_bx3 ul{overflow: hidden;}
    .grape_bg3 .grape_bx3 ul li{width: 30%;margin-left: 3%; float: left; color: #95a2ac; text-align: center;}
    .grape_bg3 .grape_bx3 ul li:first-child{margin-left: 0; font-weight: bold; font-size: 21px;}
    .grape_bg3 .grape_bx3 ul li:nth-child(2n) {font-weight: bold;}
    .grape_bg3 .grape_bg_wrap3 .number {position: absolute ; top: 30; right: 50px; color: #738390; font-weight: bold;}
    .grape_bg3 .progressbar {float:left;width: 70%; height:18px;}
    .grape_bg3 .progressbar .bar{width: 90%;; height:18px; background-color: #e0e0e0; border-radius: 50px;}
    .grape_bg3 .progressbar .bar .bar_ok{background: #7c8a95; height: 100%; border-radius: 20px;}
    /* bar 퍼센트 */
    .grape_bg3 .progressbar .bar .bar_ok.aa{width:40%;}
    .grape_bg3 .progressbar .bar .bar_ok.bb{width:44%;}
    .grape_bg3 .progressbar .bar .bar_ok.cc{width:46%;}
    .grape_bg3 .progressbar .bar .bar_ok.dd{width:47%;}
    .grape_bg3 .progressbar .bar .bar_ok.ee{width:48%;}
    .grape_bg3 .progressbar .bar .bar_ok.ff{width:49%;}
    .grape_bg3 .progressbar .bar .bar_ok.gg{width:50%;}
    .grape_bg3 .progressbar .bar .bar_ok.hh{width:54%;}
    .grape_bg3 .progressbar .bar .bar_ok.ii{width:56%;}
    .grape_bg3 .progressbar .bar .bar_ok.jj{width:57%;}
    .grape_bg3 .progressbar .bar .bar_ok.kk{width:58%;}
    .grape_bg3 .progressbar .bar .bar_ok.ll{width:71%;}
    .grape_bg3 .grape_bx5 {background-color: #ccd8e0; width: 95%; margin-left:30px; margin-top:30px; overflow: hidden;}
    .grape_bg3 .grape_bx5 p {text-align:left; line-height: 2rem; color: #67727b; margin-top:10px; font-weight: bold;}
    .grape_bg3 .grape_bx5 hr {width: 100%; height: 10px;  border: 0;  box-shadow: 0 5px 5px -5px #a3b8c7 inset;}
}