#sub-type10 .gw-btn01{width: 240px;}
#sub-type10 .gw-img-container{overflow: hidden;}
#sub-type10 .gw-sub-title03{font-size: var(--main-title03);font-weight:800;line-height: 1.5;letter-spacing: -0.02em;}
#sub-type10 .gw-sub-text02{font-size: var(--main-text01);color: #666;line-height: 1.75;}
#sub-type10 .gw-sub-con02 .gw-sub-con-1200{padding: 0;}
#sub-type10 .sub-type10-list01 .gw-tit-box {position: relative;padding: 20px;margin: 0 auto 150px;width: 300px;text-align: center;border-radius: 10px;background: #222;z-index: 1;}
#sub-type10 .sub-type10-list01 .gw-tit-box:before {content:"";display:block;width: 2px;height: 90px;position: absolute;top: 100%;left: 50%;transform: translateX(-50%);background: #e5e5e5;}
#sub-type10 .sub-type10-list01 .gw-tit-box .gw-title {font-size: var(--main-title04);line-height: 1.55;letter-spacing: -0.05em;color: #fff;font-weight:800;}
#sub-type10 .sub-type10-list01 .gw-con-list {position: relative;display: flex;justify-content: space-between;}
#sub-type10 .sub-type10-list01 .gw-con-list:before {content: '';position: absolute;top: -90px;left: 50%;transform: translateX(-50%);width: 76.328%;height: 150px;border: 2px solid #e5e5e5;border-bottom: 0;border-radius: 0;}
#sub-type10 .sub-type10-list01 .gw-con-list .list-item {position: relative;padding: 20px;width: 23.4375%;border: 2px solid #222;border-radius: 10px;text-align: center;background: #fff;}
#sub-type10 .sub-type10-list01 .gw-con-list .list-item:before {content: '';display:block;position: absolute;top: -90px;left: 50%;transform: translateX(-50%);width: 2px;height: 88px;background: #e5e5e5;}
#sub-type10 .sub-type10-list01 .gw-con-list .list-item:first-child:before, #sub-type10 .sub-type10-list01 .gw-con-list .list-item:last-child:before {display: none;}
#sub-type10 .sub-type10-list01 .gw-con-list .list-item .gw-text {font-size: var(--main-title04);line-height: 1.5;letter-spacing: -0.05em;color: #000;font-family:"NotoKr_B", sans-serif;}
#sub-type10 .sub-con-list01{border-top: 2px solid #000;}
#sub-type10 .sub-con-list01 .sub-con-item{padding:2rem 0;display: flex;align-items: center;border-bottom:1px solid #ddd;}
#sub-type10 .sub-con-list01 .gw-left-box{display: flex;align-items: center;gap:1rem;}
#sub-type10 .sub-con-list01 .gw-left-box .gw-ico{width: 3rem;}
#sub-type10 .sub-con-list01 .gw-left-box .gw-ico > img{width: 100%;}
#sub-type10 .sub-con-list01 .gw-left-box .gw-text01{width: 310px;font-size: var(--main-title04);font-weight:800;}
#sub-type10 .sub-con-list01 .gw-right-box{width: calc(100% - 356px);}
#sub-type10 .gw-graph-box{padding: 0;padding-top: 20px;}
#sub-type10 .gw-graph-list{display:flex;place-content:center;width:100%; margin:auto ; padding:0; text-align:center; font-size:0;}
#sub-type10 .gw-graph-item{display:inline-block; width:102px; height:360px;  margin:0 24px; vertical-align:bottom; position:relative;}
#sub-type10 .gw-graph-item > .percent{position:absolute; bottom:0; left:0; width:100%; background:#999; font-size:1.2rem; color:#595959;transition: height 1s ease;height: 0; }
#sub-type10 .gw-graph-item .top{position:absolute; left:50%;transform:translateX(-50%); width:100%;top:-32px;}
#sub-type10 .gw-graph-item .bottom{position:absolute; left:50%;transform:translateX(-50%); width:100%;bottom:10px;color: #fff;}
#sub-type10 .gw-graph-item .gw-ico{top:-40px;}
#sub-type10 .gw-graph-item .gw-ico img{width:auto; height:30px;}
#sub-type10 .gw-rate-list {display: flex;flex-wrap: wrap;gap: 1rem; align-items: stretch;}
#sub-type10 .gw-rate-list .list-item {flex: 1;}
#sub-type10 .gw-rate-list .list-item .percent-box {padding: 20px;width: 100%;height:100%;border-radius: 12px;background: #fff;border: 2px solid #ddd;}
#sub-type10 .gw-rate-list .list-item .percent-box .img {text-align: center;}
#sub-type10 .gw-rate-list .list-item .percent-box .img img {max-width: 100%;}
#sub-type10 .gw-rate-list .list-item .list-tit {display: block;padding-top: 30px;text-align: center;font-size: var(--main-title04);line-height: 1.1;font-weight:800;}
#sub-type10 .gw-rate-list .percent-list li {padding: 10px 0;display: flex;flex-direction: column;gap:1rem;}
#sub-type10 .gw-rate-list .percent-list li .tit {font-weight:800;letter-spacing: -0.055em;color: #000;}
#sub-type10 .gw-rate-list .percent-list .percent-bar {position: relative;display: inline-block;height: 10px;border-radius: 6px;background: #f3f3f3;}
#sub-type10 .gw-rate-list .percent-list .percent-bar:before {content: '';position: absolute;top: 0;left: 0;height: 100%;border-radius: 6px; width: var(--bar-width, 0%);background: var(--bar-color, #000);transition: width 1s ease;}
#sub-type10 .gw-rate-list .percent-list .percent {display: inline-block;width:2rem;color: #000;font-family: "Outfit", sans-serif; font-weight: 700;}
#sub-type10 .gw-rate-list .percent-list li .percent-bar {width: calc(100% - 3rem);}
#sub-type10 .gw-rate-list .item02 .percent-box .img{margin-bottom: 20px;}

/*반응형------------------------------------------------------------------------------------------------------------------ */
@media screen and (max-width:1024px){
    #sub-type10 .gw-rate-list{flex-direction: column;gap: 4rem;}
    #sub-type10 .gw-rate-list .list-item{width: 100%;}
    #sub-type10 .gw-rate-list .list-item .percent-box{min-height: auto;}
    #sub-type10 .gw-rate-list .list-item .percent-box .img img{max-width:50%;}
    #sub-type10 .sub-con-list01 .sub-con-item{flex-direction:column;gap: 0.5rem;align-items: flex-start;}
    #sub-type10 .gw-sub-img-item:nth-of-type(2n){flex-direction:column;}
    #sub-type10 .sub-con-list01 .gw-left-box{width: 100%;}
    #sub-type10 .sub-con-list01 .gw-right-box{width: 100%;}
}

@media screen and (max-width:576px){
    #sub-type10 .sub-type10-list01 .gw-con-list{flex-direction: column;gap: 1rem;}
    #sub-type10 .sub-type10-list01 .gw-con-list:before{display: none;}
    #sub-type10 .sub-type10-list01 .gw-con-list .list-item{width: 100%;}
    #sub-type10 .sub-type10-list01 .gw-con-list .list-item:before{display: none;}
    #sub-type10 .sub-type10-list01 .gw-tit-box{margin: 0 auto 90px;}
    #sub-type10 .gw-graph-list{gap: 1rem;}
    #sub-type10 .gw-graph-item{margin:0;width: 20%;}
    #sub-type10 .gw-graph-item .top{font-size: 1rem;}
    #sub-type10 .gw-graph-item .bottom{font-size: 1rem;}
    #sub-type10 .gw-rate-list .list-item .percent-box .img img{max-width: 100%;}
}

@media screen and (max-width:320px){
    #sub-type10 .gw-graph-item .top{font-size: 0.8rem;}
    #sub-type10 .gw-graph-item .bottom{font-size: 0.8rem;}
}
