@charset "utf-8";

/*
 * File       : jt-chart.css
 * Author     : STUDIO-JT (KMS)
 * Guideline  : JTstyle.1.1
 *
 * Dependency : css/reset.css
 *
 * SUMMARY:
 * 01) JT CHART
 */

/* **************************************** *
 * CSS Variables
 * **************************************** */

/* **************************************** *
 * JT CHART
 * **************************************** */

/* Container */

#jt_chart_outer {position: relative;}

#jt_chart {width: 100%;height: 100%;position: relative;}

#jt_chart:after {content: '';display: block;clear: both;}

/* Category */

#jt_chart_category {margin-bottom: 86px;font-size: 0;line-height: 1;text-align: right;}

#jt_chart_category > li {display: inline-block;padding-left: 22px;position: relative;vertical-align: top;}

#jt_chart_category > li:first-child {padding-left: 0;}

#jt_chart_category > li > span {display: inline-block;vertical-align: middle;font-size: 14px;color: #666;}

#jt_chart_category > li > span:before {display: inline-block;vertical-align: sub;padding-right: 8px;font-family: 'jt-font';content: '\e947';font-size: 18px;line-height: 1;font-weight: normal;}

#jt_chart_category > li:nth-child(1) > span:before {color: #1b9ad6;}

#jt_chart_category > li:nth-child(2) > span:before {color: #417b96;}

#jt_chart_category > li:nth-child(3) > span:before {color: #7693a0;}

/* Title */

.jt_chart_title {padding-top: 32px;padding-left: 0.5em;font-size: 18px;font-weight: 600;text-align: center;letter-spacing: 0.5em;}

/* Chart board */

#jt_chart_board {float: right;width: -webkit-calc(100% - 55px);width: calc(100% - 55px);height: 100%;}

#jt_chart_ground {float: left;width: 100%;height: -webkit-calc(100% - 59px);height: calc(100% - 59px);border-bottom: 1px solid #ededed;}

#jt_chart_ground > li {float: left;width: 100%;height: 100%;font-size: 0;line-height: 1;text-align: center;position: relative;}

.jt_chart_col_1 #jt_chart_ground > li {width: 100%;}

.jt_chart_col_2 #jt_chart_ground > li {width: 50%;}

.jt_chart_col_3 #jt_chart_ground > li {width: 33.33%;}

.jt_chart_col_4 #jt_chart_ground > li {width: 25%;}

.jt_chart_col_5 #jt_chart_ground > li {width: 20%;}

/* Chart item */

#jt_chart_ground .items { position: absolute;  bottom: 0; left: 0; width: 100%; height: 100%;}

#jt_chart_ground .item {display: inline-block;width: 34px;height: 100%;position: relative;}

#jt_chart_ground .item .bar {width: 14px;height: 0%;position: absolute;bottom: 0;left: 50%;margin-left: -7px;border-radius: 10px 10px 0 0;}

#jt_chart_ground .item .annotation {display: block;position: absolute;top: -24px;left: 50%;-webkit-transform: translateX(-50%);-ms-transform: translateX(-50%);transform: translateX(-50%);font-family: 'Titillium';font-size: 11px;}

#jt_chart_ground .item:nth-child(1) {color: #1b9ad6;}

#jt_chart_ground .item:nth-child(1) .bar {background: #1b9ad6;}

#jt_chart_ground .item:nth-child(2) {color: #417b96;}

#jt_chart_ground .item:nth-child(2) .bar {background: #417b96;}

#jt_chart_ground .item:nth-child(3) {color: #7693a0;}

#jt_chart_ground .item:nth-child(3) .bar {background: #7693a0;}

/* Horizontal Axis */

#jt_chart_haxis {float: left;width: 100%;height: 59px;}

#jt_chart_haxis > span {float: left;padding-left: 0.5em;font-size: 18px;font-weight: 600;line-height: 59px;letter-spacing: 0.5em;text-align: center;color: #222;}

.jt_chart_col_1 #jt_chart_haxis > span {width: 100%;}

.jt_chart_col_2 #jt_chart_haxis > span {width: 50%;}

.jt_chart_col_3 #jt_chart_haxis > span {width: 33.33%;}

.jt_chart_col_4 #jt_chart_haxis > span {width: 25%;}

.jt_chart_col_5 #jt_chart_haxis > span {width: 20%;}

/* Vertical Axis */

#jt_chart_vaxis {float: left;width: 45px;height: -webkit-calc(100% - 59px);height: calc(100% - 59px);margin-right: 10px;position: relative;}

#jt_chart_vaxis > span {position: absolute;right: 0;font-family: 'Titillium';font-size: 14px;line-height: 1;color: #666;}

#jt_chart_vaxis > span:nth-child(1) {top: 0;}

#jt_chart_vaxis > span:nth-child(2) {top: 20%;}

#jt_chart_vaxis > span:nth-child(3) {top: 40%;}

#jt_chart_vaxis > span:nth-child(4) {top: 60%;}

#jt_chart_vaxis > span:nth-child(5) {top: 80%;}

#jt_chart_vaxis > span:nth-child(6) {bottom: -5px;}

/* MEDIA */

@media (max-width: 1023px) {
    /* Category */
    #jt_chart_category {margin-bottom: 44px;}

    /* Title */
    .jt_chart_title {padding-top: 20px;font-size: 16px;}

    /* Chart item */
    #jt_chart_ground {height: -webkit-calc(100% - 45px);height: calc(100% - 45px);}

    /* Horizontal Axis */
    #jt_chart_haxis {height: 45px;}
    #jt_chart_haxis > span {font-size: 16px;line-height: 45px;}
}

@media (max-width: 767px) {
    /* Category */
    #jt_chart_category {margin-bottom: 25px;}
    #jt_chart_category > li {padding-left: 17px;}
    #jt_chart_category > li > span {font-size: 13px;}
    #jt_chart_category > li > span:before {vertical-align: text-top;padding-right: 5px;font-size: 16px;}

    /* Title */
    .jt_chart_title {padding-top: 10px;font-size: 15px;}

    /* Chart item */
    #jt_chart_ground {height: -webkit-calc(100% - 35px);height: calc(100% - 35px);}
    #jt_chart_ground .item {width: 30px;}
    #jt_chart_ground .item .bar {width: 10px;margin-left: -5px;}
    #jt_chart_ground .item .annotation {top: -18px;font-size: 10px;}

    /* Horizontal Axis */
    #jt_chart_haxis {height: 35px;}
    #jt_chart_haxis > span {font-size: 15px;line-height: 35px;}

    /* Vertical Axis */
    #jt_chart_vaxis > span {font-size: 12px;}
}