@charset "UTF-8";
/* CSS Document */

.realTimePriceTable{width:100%; border:1px solid #999; font-size: 14px; line-height: 18px; margin:20px 0 50px; border-radius: 12px; color: #666;}
.realTimePriceTable .tHead{border-radius: 10px 10px 0 0; overflow: hidden;}
.realTimePriceTable .tRow{display: grid; grid-template-columns: repeat(2, 1fr) 2fr repeat(8, 1fr); margin: 2px; grid-column-gap: 2px;}
.realTimePriceTable .tColumn{display: flex; align-items: center; justify-content: center; padding: 8px 2px; flex-wrap: wrap;}
.realTimePriceTable .tHead .tColumn{background: linear-gradient(to bottom,#a68b2f,#D2AC2D); color: #fff; padding: 15px 2px;}
.realTimePriceTable span{white-space: nowrap;}
.realTimePriceTable li.caseContent:nth-child(odd) .tColumn{background: #eee;}
.realTimePriceTable li:last-child{border-radius: 0 0 10px 10px; overflow: hidden;}



@media screen and (max-width: 980px) {
    .realTimePriceTable{border:none; padding: 0;}
    .realTimePriceTable .tHead.tRow{display: none;}
    .realTimePriceTable li.caseContent.tRow{
        width:95%; margin: 0 auto 30px;
        border:1px solid #999;
        border-radius: 12px;
        overflow: hidden;
        grid-template-columns:repeat(4, 1fr);
        grid-template-rows:auto auto auto auto;
        grid-template-areas: 
            "t1 t2 t2 t2"
            "t1 t3 t3 t3"
            "t4 t5 t6 t7"
            "t8 t9 t10 t11";
        column-gap: 0;
        grid-row-gap: 0;
    }
    .realTimePriceTable li.caseContent.tRow .tColumn{background: none;}
    .realTimePriceTable li.caseContent.tRow .tColumn.t1{grid-area:t1; margin: 10px 0; border-right:1px solid #999;}
    .realTimePriceTable li.caseContent.tRow .t2{grid-area:t2; font-size:1.5em; line-height: 1.6em; font-weight: 700; justify-content: flex-start; padding-left: 10px; color:#ff6c00;}
    .realTimePriceTable li.caseContent.tRow .t3{grid-area:t3; font-size: 1.3em; line-height: 1.5em; color: #000637; padding-left: 10px; justify-content: flex-start;}
    .realTimePriceTable li.caseContent.tRow .t4{grid-area:t4;}
    .realTimePriceTable li.caseContent.tRow .t5{grid-area:t5;}
    .realTimePriceTable li.caseContent.tRow .t6{grid-area:t6;}
    .realTimePriceTable li.caseContent.tRow .t7{grid-area:t7;}
    .realTimePriceTable li.caseContent.tRow .t8{grid-area:t8;}
    .realTimePriceTable li.caseContent.tRow .t9{grid-area:t9;}
    .realTimePriceTable li.caseContent.tRow .t10{grid-area:t10;}
    .realTimePriceTable li.caseContent.tRow .t11{grid-area:t11;}
    #RTP .t4, #RTP .t5, #RTP .t6, #RTP .t7, #RTP .t8, #RTP .t9, #RTP .t10, #RTP .t11{padding:10px 4px; margin: 0; flex-direction: column; align-items: stretch; text-align: center; background: #333E50; color: #ccc;}
    #RTP .t4::before, #RTP .t5::before, #RTP .t6::before, #RTP .t7::before, #RTP .t8::before, #RTP .t9::before, #RTP .t10::before, #RTP .t11::before{display: block; padding:5px 2px; border-radius: 6px; background: #fff; color: #000637; margin-bottom: 5px;}
    #RTP .t4::before{content: "總價";}
    #RTP .t5::before{content: "總坪數";}
    #RTP .t6::before{content: "房屋坪數";}
    #RTP .t7::before{content: "房屋單價";}
    #RTP .t8::before{content: "車位單價";}
    #RTP .t9::before{content: "車位坪數";}
    #RTP .t10::before{content: "屋齡";}
    #RTP .t11::before{content: "車位";}
}