@charset "utf-8";


.wrap-pko {position: relative; display: flex; align-items: center; min-height:70rem; background: url('../../images/main/bg-pko.jpg') no-repeat center / cover;}
.wrap-pko .flex-box {display:flex; justify-content: space-between;}
.wrap-pko .left {width: 60rem; margin-right: 5.5rem;}
.wrap-pko .right { display: flex; align-items: end;}
.wrap-pko .right img {width: 100%;}
.wrap-pko .text {text-align: center;}
.wrap-pko .text strong {font-family: pb; font-size: 5rem; color:#fff;}
.wrap-pko .text p {margin-top: 2.7rem; font-family: pr; font-size: 2.2rem; line-height: 3.5rem; color:#ccc;}
.wrap-pko .text p .color {color:#FFDB7A;}
.wrap-pko .num-box {width:57rem; margin:0 auto; background: #313131; display: flex; align-items: center; min-height:18rem; margin-top: 7rem; padding:0 4rem;}
.wrap-pko .num-box ul {display: flex; justify-content: space-between; flex:1;}
.wrap-pko .num-box li {padding:2rem 1rem 0 1rem;}
.wrap-pko .num-box li:last-child {align-self: end; }
.wrap-pko .num-box p {font-family: pr; font-size: 2rem; text-align: center; color:#bbb;}
.wrap-pko .num-box li:last-child p {padding-bottom:2rem; text-align:left; line-height: 1.2;}
.wrap-pko .num-box strong {font-family: pm; font-size: 6rem; color:#F1EC88; font-variant-numeric: tabular-nums;}
/* 그래프 */
.graph {width: 80rem; margin-bottom: 3.7rem;}
.graph .graph-head {position: absolute; top:0; right:0; display: flex; margin-top: 1.5rem;}
.graph .graph-head p {position: relative; padding-left:2.5rem; font-family: pb; font-size: 1.6rem; color:#BBBBBB;}
.graph .graph-head p::before {content:''; position: absolute; left:0; top:50%; width:1.7rem; height:1.7rem; transform: translateY(-50%);}
.graph .graph-head .color1::before {background:#FFDB7A;}
.graph .graph-head .color2 {margin-left: 3rem;}
.graph .graph-head .color2::before {background:#917424;}
.graph .line {position: relative; width:100%;}
.graph .line > ul {display: flex; padding:0 6rem; justify-content: space-between; border-bottom:0.3rem solid #4E4E4E;}
.graph .box {position: relative; height:100%;}
.graph .box strong {position: absolute; top:100%; left:50%; margin-top: 2.3rem; font-family: pb; font-size: 1.6rem; text-align: center; color:#FFDB7A; white-space: nowrap; transform: translateX(-50%);}
.graph .box .chart {position: relative; display: flex; align-items: end; height: 100%;}
.graph .line1 {margin-bottom: 10.4rem;}
.graph .box .chart > div {position: relative; width:2.5rem;}
.graph .box .chart1 {background:#FFDB7A;}
.graph .box .chart2 {background:#917424;}
.graph .box .chart span {position: absolute; bottom:100%; left:50%; margin-bottom: 0.5rem; font-family: pm; font-size: 1.3rem; white-space: nowrap; text-align: center; color:#fff; transform: translateX(-50%);}
.graph .box .chart span br {display: none;}

@media screen and (max-width:1500px) {
    .wrap-pko {padding:12rem 0 12rem 0;}
    .wrap-pko .flex-box {flex-direction: column;}
    .wrap-pko .left {margin-right: 0; margin:0 auto;}
    .wrap-pko .right {margin-top: 3rem; padding-top:6rem;}
    .graph {width:100%;}
    .graph .graph-head {margin-top: 0;}
}
@media screen and (max-width: 1200px) {
    .wrap-pko{padding:8rem 0; background: url(../../images/main/bg-pkot.jpg) no-repeat center / cover; min-height: 76rem;}
    .wrap-pko .left{width: 100%; margin-right: 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: start; margin-bottom: 4.4rem; margin-top: .8rem;}
    .wrap-pko .text {margin:0 auto; padding-bottom: 3rem;}
    .wrap-pko .text strong{font-size: 4rem;}
    .wrap-pko .text p{font-size: 2rem; line-height: 3rem; margin-top: 1.8rem;}
    .wrap-pko .num-box{margin-top: 0; min-height: auto; padding: 2.4rem 4rem;}
    .wrap-pko .num-box ul{gap: 6.7rem;}
    .wrap-pko .num-box li{padding: 0;}
    .wrap-pko .num-box p{font-size: 1.8rem;}
    .wrap-pko .num-box strong{font-size: 5rem; margin-top: .5rem;}
}
@media screen and (max-width:900px) {
    .wrap-pko .left{flex-direction: column; align-items: center; justify-content: center; margin-top: 0; margin-bottom: 4rem;}
    .wrap-pko .num-box{margin-top: 2.5rem;}
}
@media screen and (max-width: 768px) {
    .wrap-pko{min-height: auto; padding: 5.2rem 0 6.3rem;}
    .wrap-pko .text {padding-bottom: 0;}
    .wrap-pko .text strong{font-size: 3rem;}
    .wrap-pko .text p{font-size: 1.8rem; line-height: 2.5rem; margin-top: 2.8rem;}
    .wrap-pko .num-box{width:100%; margin-top: 2.5rem; padding: 2.2rem 3.5rem;}
    .wrap-pko .num-box p{font-size: 1.6rem;}
    .wrap-pko .num-box li:last-child p {padding-bottom: 1rem;}
    .wrap-pko .num-box strong{font-size: 3.5rem; margin-top: 0;}
    .graph .line > ul {padding:0 3rem;}
}
@media screen and (max-width:600px) {
    .graph .line > ul {padding:0 1rem;}
    .graph .box strong {font-size: 1.4rem;}
    .graph .box .chart > div {width:2rem;}
    .graph .box .chart span {font-size: 1rem;}
    .graph .box .chart span br {display: block;}
}