@charset "utf-8";
/* mainVisual */
#mainVisual{height:120px;position:relative;overflow:hidden;margin-top:0px;background:url("../images/main/mainVisual01.jpg") no-repeat 0 0;}

#contents{padding:35px;}
#contents::after{content:"";display:block;clear:both;}
#contents > table{width:100%;}
#contents > table tr td:first-child{border-left:0;}
.contentsBox_wrap{display:flex;flex-wrap:wrap;}
.contentsBox{width:25%;position:relative;padding:10px;text-align:center;float:left;}
.contentsBox.bigWide{width:75%;}
.contentsBox.wide{width:37.5%;}
.contentsBox .item{height:220px;padding:25px;box-sizing:border-box;border:1px solid #ccc;border-top:2px solid #31b0b8;}
.contentsBox.bigWide ~ .contentsBox.wide::before{width:calc(100% - 10px)}
.contentsBox h2{font-size:1.25rem ;font-weight:500;color:#666;text-align:left;margin-bottom:10px;}
.contentsBox .btnMore{position:absolute;right:30px;top:30px;}
#mainContents .auto{display:flex;width:inherit;}
#mainContents .auto .lnbBox{width:20%;}
#mainContents .auto #contents{width:80%;}
.mypageBox{display:flex;flex-wrap:wrap;}
@media screen and (max-width:1401px) {
    #mainContents .auto{display:block;}
    #mainContents .auto .lnbBox,
    #mainContents .auto #contents{width:inherit;}
}
@media screen and (max-width:1280px) {
    #mainContents .auto{margin:0;}
    .contentsBox.bigWide,
    .contentsBox.wide,
    .contentsBox::before{width:100%;}
    .contentsBox{width:50%;}
}
@media screen and (max-width:1024px) {
    #contents{padding:10px;}
    .contentsBox{width:100%;}
    .contentsBox .item{height:auto;}
}



/* common */
.list02 li {width: 50%; float: left;}
.list02 li div{margin:0 auto;text-align:center;}
.list03 li {width: 33.33%; float: left;}
.list04 li {width: 25%; float: left;}

.iconList dl{width:130px;padding:0 0 20px;}
.iconList dd{font-size:1.25rem;}
.iconList dd img{width:90px;margin-bottom:10px;}
.iconList,
.iconList > li{display:flex;}
.iconList > li{margin-right:10px;font-size:16px;}
.iconList > li:last-child{margin-right:0;}
.iconList > li > div{display:flex;flex-direction:column;padding:0 0 50px;text-align:left;}
.iconList > li{width:33.33%;}

.numberBox .number{border-radius:5px;border-width:3px;border-style:solid;text-align:center;display:inline-block;}
.numberBox .title{white-space:nowrap;}
.numberBox .title,
.contentsBox .title{font-size:1rem;color:#333;letter-spacing:-.05em;}
.numberBox.big .number{width:150px;height:80px;line-height:74px;margin-bottom:10px;}
.numberBox.big .number .num{font-size:1.88rem;font-weight:700;display:inline-block;}
.numberBox.big .number .unit{font-size:1.44rem;display:inline-block;margin-left:5px;}

.numberBox.big.round .number{width:100px;height:100px;line-height:86px;margin-bottom:10px;border-width:7px;border-radius:50%;}

.numberBox.middle .number{width:140px;height:70px;line-height:64px;margin-bottom:10px;}
.numberBox.middle .number .num{font-size:1.75rem;font-weight:700;display:inline-block;}
.numberBox.middle .number .unit{font-size:1.2rem;display:inline-block;margin-left:5px;}



.numberBox.small .number{width:140px;height:50px;line-height:44px;margin-bottom:0;}
.numberBox.small .number .num{font-size:1.56rem;font-weight:700;display:inline-block;}
.numberBox.small .number .unit{font-size:1rem;display:inline-block;margin-left:5px;}
.numberBox.small .title{font-size:0.88rem;margin-bottom:15px;}


.numberBox.darkBlue .number{border-color:#44318f;color:#44318f;}
.numberBox.green .number{border-color:#31b0b8;color:#31b0b8;}
.numberBox.brown .number{border-color:#aa0000;color:#aa0000;}
.numberBox.orange .number{border-color:#ed7c3b;color:#ed7c3b;}

.color.darkBlue{color:#44318f;}
.color.green{color:#31b0b8;}
.color.brown{color:#aa0000;}
.color.orange{color:#ed7c3b;}

/* 나중에 그래프 넣고 지울것 */
.graphBox{text-align:left;}
.barChart{height:170px;padding-top:40px;}
.barChart li{float:left;width:14%;float:left;margin:0 3%;position:relative;height:140px;text-align:center;}
.barChart li .year{display:block;position:absolute;bottom:0;width:100%;}
.barChart li .bar{position:absolute;display:block;width:100%;height:60%;bottom:0;margin-bottom:25px;}
.barChart.orangeChart li .bar{background:#ed7c3b;}
.barChart.greenChart li .bar{background:#31b0b8;}
.barChart li .bar .percent{display:block;position:relative;top:-25px;font-weight:700;}

.garoBarChart{height:170px;}
.garoBarChart li{display:flex;padding:10px 0;border-top:1px dotted #d9d9d9;justify-content:space-between;}
.garoBarChart li:first-child{border-top:none;}
.garoBarChart li span{flex-grow:1;}
.garoBarChart li .title{width:88px;min-width:88px;}
.garoBarChart li .num{text-align:right;white-space:nowrap;}
.garoBarChart li .barWrap{position:relative;display:block;width:60%;height:10px;top:8px;flex-grow:2;}
.garoBarChart li .barWrap .bar{position:absolute;display:block;width:100%;height:100%;}
.garoBarChart.orangeChart li .bar{background:#ed7c3b;}
.garoBarChart.greenChart li .bar{background:#31b0b8;}

@media screen and (max-width:1024px) {
    .iconList{display:block;margin-right:0;}
    .iconList > li{width:100%;margin-right:0;}
    .contentsBox.bigWide ~ .contentsBox.wide::before{width:100%;}
}
@media screen and (max-width:768px) {
    .iconList dl{width:110px;}
    .iconList dt{white-space:nowrap;}
    .garoBarChart,
    .contentsBox{height:inherit;}
    .contentsBox.bigWide ~ .contentsBox.wide::before{width:100%;}
}