/*========================== 表格樣式共用設定 ============================*/

#it233 .FORM_BOX{
    height: 100%;   
    border: 1px solid #bbbbbb;
    margin: 0 auto;
    border-bottom: none;    
}
    .PC #it233 .FORM_BOX{
        width: 98%;
    }
    .MOBILE #it233 .FORM_BOX{
       width: 100%;
    }
    #it233 .FORM_BOX .BOXS{
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
    }
    .PC #it233 .FORM_BOX .BOXS .BOX_L{
        width: 120px;
    }
    .PC #it233 .FORM_BOX .BOXS .BOX_R{
        display: flex;
        width: calc(100% - 120px);       
    }
    .MOBILE #it233 .FORM_BOX .BOXS .BOX_L{
        width: 60px;
    }
    .MOBILE #it233 .FORM_BOX .BOXS .BOX_R{
        display: flex;
        width: calc(100% - 60px);
    }
    #it233 .FORM_BOX .BOXS .BOX_R .F_TOP{
        width: calc(100% / 6);
    }


#it233 .FORM_BOX .F_TOP{ /*第一排右邊內文*/
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    border-left: 1px solid #bbbbbb;
    border-bottom: 1px solid #bbbbbb;
    border-top: none;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
}

#it233 .FORM_BOX .F_L{ /*左欄-能力主標*/
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
            flex-wrap: nowrap;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    border-bottom: 1px solid #bbbbbb;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-flow: row;
        -ms-flex-flow: row;
            flex-flow: row;
    /*background-color: #fffdf0;*/
}

#it233 .FORM_BOX .BOX_CON{/*右欄*/
    border-left: 1px solid #bbbbbb;
    border-bottom: 1px solid #bbbbbb;   
    width: 100%;
    padding: 12px 0;
}

#it233 .FORM_BOX .BOX_CON .PERCENT{/*右欄-能量條*/
    height: 28px;
    margin: auto 0;
    line-height: 28px;
}

#it233 .FORM_BOX .BOX_CON .PERCENT:nth-of-type(2){
    margin-top: 4px;
}

/*========================== 框架設定 ============================*/


/*========================== 樣式設定 ============================*/
#it233 .RADIUS_ALL{border-radius: 4px;}
#it233 .RADIUS_UP_L{border-top-left-radius:4px;}
#it233 .RADIUS_UP_R{border-top-right-radius:4px;}
#it233 .RADIUS_DOWN_L{border-bottom-left-radius:4px;}
#it233 .RADIUS_DOWN_R{border-bottom-right-radius:4px;}


.BG_energy-LOW{
    background-color: #a4895f;color: #ffffff;}
.BG_energy-MID_L{
    background-color: #8fa45b;color: #ffffff;}
.BG_energy-NOR{
    background-color: #5c80a4;color: #ffffff;}
.BG_energy-MID_H{
    background-color: #785fa2;color: #ffffff;}
.BG_energy-HIGH{
    background-color: #a2547e;color: #ffffff;}
.BG_energy-OVER_H{
    background-color: #bc5353;color: #ffffff;}

.TXT_energy-LOW{color: #a4895f;}
.TXT_energy-MID_L{color: #8fa45b;}
.TXT_energy-NOR{color: #5c80a4;}
.TXT_energy-MID_H{color: #785fa2;}
.TXT_energy-HIGH{color: #a2547e;}
.TXT_energy-OVER_H{color: #bc5353;}
.TXT_energy-WHITE{color: #ffffff;font-size: 1rem;font-weight: normal;text-align: center;}

/*========================== 文字設定 ============================*/  

#it233 .FORM_BOX .F_TOP{/*上方欄位*/
    height: 48px;
    font-size: 1.1rem;
    font-weight: bold;
    text-align: center; 
}

.MOBILE #it233 .FORM_BOX .BOXS .BOX_L p:first-child{/*左欄-能量發展*/
    padding: 4px;
    line-height: 1.1;
}


#it233 .FORM_BOX .BOXS .TXT_energy{ /*左欄-介紹*/
	font-family: "微軟正黑體", "Microsoft JhengHei",  Helvetica, Arial, sans-serif;
	line-height: 1.2;
    text-decoration: none;
    font-weight: bold;
    text-align: center;
    clear: both;
}
	.PC #it233 .FORM_BOX .BOXS .TXT_energy{
	    font-size: 1.3rem;
	}
	.MOBILE #it233 .FORM_BOX .BOXS .TXT_energy{
	    font-size: 1.1rem;
	}

#it233 .FORM_BOX .BOXS .BOX_L .TXT_career{/*左欄-純文字*/
    font-family: "微軟正黑體", "Microsoft JhengHei",  Helvetica, Arial, sans-serif;	
    font-weight: normal;
    text-align: center;
    font-size: 1.1rem;
    line-height: 1.2;
    padding: 4px;
}

#it233 .FORM_BOX .BOX_CON .TXT_energy-intro{/*右欄-能量介紹*/
    font-family: "微軟正黑體", "Microsoft JhengHei",  Helvetica, Arial, sans-serif;
    font-size: 1.1rem;
    line-height: 1.8rem;
    margin: 8px auto 0 8px;
    text-align: left;
    clear: both;
}

#it233 .FORM_BOX .BOX_L .TXT_energy span{ /*左欄-數值*/
    font-size: 1.8rem;
    font-weight: bold;
}

/*========================== 職業-下方數值分隔 ============================*/  

#it233 .BOX_NUM{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}
.PC #it233 .BOX_NUM{
    width: 98%;
    margin: 4px auto 0 auto;
}
    .PC #it233 .BOX_NUM .BOX_L{
        width: 120px;
    }
    .PC #it233 .BOX_NUM .BOX_R{
        display: flex;
        width: calc(100% - 120px);
    }
    .MOBILE #it233 .BOX_NUM .BOX_L{
        width: 60px;
    }
    .MOBILE #it233 .BOX_NUM .BOX_R{
        display: flex;
        width: calc(100% - 60px);
    }

#it233 .BOX_NUM > .BOX_R > .NUM{
    display: inline-flex;
    flex-direction: row;
    justify-content: space-between;
    flex-grow: 1;
    margin-top: 4px;    
}

/*========================== 左側-icon ============================*/ 
#it233 .BOXS .BOX_L .ENERGY_ICON{
    height: 100%;
    width: 100%;    
    text-align: center;
    margin: 0 auto;
    clear: both;    
}
#it233 .BOXS .BOX_L .ICON{
    width: 100%;
    height: 0;
    padding-bottom: 58%;
    display: block;
    background-position: center;
    background-repeat: no-repeat; 
    margin-top: 12px;
    margin-bottom: 8px;
    background-size: contain;    
}