/*能力卡系列//////////////////////////////////////////////////////*/
 .portfolio {
    text-align:center;
    margin-top:20px;
    margin-bottom:20px;
    margin-left:0px;
    margin-right:0px;
}
.ResultCard {
  text-align:left;
  margin-top:20px;
  margin-bottom:20px;
  box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.3);
  background-color:white;
  border-radius:1em;
  position:relative;
  padding-left:0px;
  padding-right:0px; 
}
.ResultCardPic{
    /*chart + icon*/

}
.NotChart .ResultCardPic {
    height:500px;
    position:relative;
}
.NotChart.Trip .ResultCardPic {
    height:400px;
}
.NotChart .ResultCardPic img {
    margin:auto;
    top:0px;
    bottom:0px;
    right:0px;
    left:0px;
    position:absolute;

}
.ResultCardFunnel .ResultCardPic{
    position:relative;
    margin-top:80px;
}
.ResultCardDonut{
    /*甜甜圈*/  
    background-size :200px !important;
    background-repeat:no-repeat !important;
    background-position-x:center !important;   
    background-position-y:37%;
}
.ResultCardFunnel{
    margin:0 auto;
}
.IconHouse{
        background-image:url("../../../images/Icon/House.png") !important;
}
.IconCar{
        background-image:url("../../../images/Icon/Car.png") !important;
}
.ALayout .ResultCardTitle{
    text-align:center;
}
.ResultCardTitle h2{
    margin-top:10px;   
}
h2 .YellowUnderline{
    box-shadow:0px 5px rgb(248, 177, 24); /*黃*/
    padding-bottom:5px;
    font-size:2.5em;
    font-weight:900;
    line-height:2em;     
    /*超過7個字以上要加.FontSizeAdj_37px*/
}
.ResultCardContent{
    /*分析卡-整個內容框*/    
    margin-top:-300px;
    margin-bottom:67px;
}
.NotChart .ResultCardContent{
    /*分析卡-整個內容框-扶養能力*/    
    margin-top:-400px;
    margin-bottom:67px;
}
.NotChart.Trip .ResultCardContent{
    /*分析卡-整個內容框-旅遊*/    
    margin-top:-300px;
    margin-bottom:67px;
}
.ALayout .ResultCardContent{    
    margin-top:0px;
    padding-top:20px;
}
.ResultCardFunnel .ResultCardContent{
    margin-top:-360px; 
    margin-bottom:67px;
}
.MajorContent{
    /*分析卡-主內容*/
    padding-top:15px;
}
.MajorContent .Title{
    /*分析卡-主內容標題*/
    font-size:1.6em;
    font-weight:900;
    letter-spacing:3px;/*文字間距*/
}
.MajorContent .Price{
    /*分析卡-主內容文字*/
    font-size:3em;
    font-weight:900;
    color:rgb(248, 177, 24);/*黃*/
    padding-top:5px;
}
.MinorContent{
    /*分析卡-次內容*/
    padding-top:25px;
    font-size:1.3em;
    letter-spacing:3px;/*文字間距*/
}
.MinorContent > p+p {
    /*分析卡-次內容*/
    padding-top:5px;
}
.MinorContent-legend{ 
    font-size:0.75em;
    padding-top:10px;
}
.MinorContent-legend p+p{ 
    padding-top:3px;
}
.MinorContent-legend .inlineIcon {
    width:0.8em;
    margin : 3px;
    margin-right:8px;
    position:relative;
    bottom:-5px;      
}
.DetailContent{
    /*分析卡-細節*/
    padding-top:35px;
    font-size:1em;
    letter-spacing:3px;/*文字間距*/
}
.DetailContent div{
    display:inline-block;
        margin-right:6px;
}
.CardLogo{
    position:absolute;
    right:15px;
    bottom:13px;
}
.progressGreen{
    background-color:#2C3E50 /*暗藍*/
}
/*人生護照系列//////////////////////////////////////////////////////*/
.LifePassCardContainer{
    position:relative;
    display:inline-block;

}
.LifePassportCard {
    text-align:center;
    margin-top:20px;
    box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.3);
    background-color:white;
    border-radius:1em;
    position:relative;
    padding-left:0px;
    padding-right:0px; 
    padding-top:20px;
}

.LifePassportCardContent{
    /*人生護照-主內容*/
    padding-top:15px;
}
.LifePassportCardContent .Title{
    /*人生護照-主內容標題*/
    font-size:2em;
    font-weight:900;
    letter-spacing:3px;/*文字間距*/
    line-height:1.5em;
}

.LifePassportCardContent .Subtitle{
    /*人生護照-主內容次標題*/
    font-size:1.4em;
    font-weight:900;
    letter-spacing:1px;/*文字間距*/
    line-height:1.5em;
}

.LifePassportCardContent .Price{
    /*人生護照-主內容文字*/
    font-size:4em;
    font-weight:900;
    color:rgb(248, 177, 24);/*黃*/
    padding-top:10px;
}

.CardRemark{
    position:absolute;
    left:30px;
    bottom:13px;
}

.CardRemark span{
    font-size:1em;
    font-weight:500;
    letter-spacing:1px; /*文字間距*/
    line-height:1.5em;
}

.IconPiggyBank{
    background-image:url("../../../images/Icon/PiggyBank.png")  !important;        
}
.LifePassportCardMinor{
    /*人生護照分析小卡整體*/
    position:relative;
    padding-left:0px;
    padding-right:0px;
}

.SingleCard/*,.SingleCard-sm*/ {
    /*能力分析小卡 & sm-旅遊*/
    margin-top:20px;
    margin-bottom:0px;
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.3);
    background-color:white;
    border-radius:1em;
    position:relative;
    /*padding-left:0px;
    padding-right:0px;*/
    width:100%;
}
.SingleCard:after{ /*同clearfix功能*/
    /*能力分析小卡 & sm-旅遊*/
    content: '';
    display: block;
    clear: both;
}

.SingleCardPic{
    float:left;
    width:22%;
    margin:auto;
    top:0px;
    bottom:0px;
    /*right:0px;*/ /*取消的原因是要讓圖靠左*/
    left:0px;
    position:absolute;


}

.SingleCardContent {
    /*能力分析小卡-主內容*/
    text-align:left;
    position:relative;  
    padding-top:15px;  
    padding-bottom:30px;
    float:left;
    width:78%;/*配合圖片22% 加起來100%*/
    margin-left:22%; /*左邊的22% 留給圖片 + SingleCardPic 的position:absolute 不佔空間，所以才能讓他們左右排 */
}

.SingleCardContent .ContentTitle {
    /*能力分析小卡-標題*/
    font-size:1.5em;
    font-weight:900;
    color:rgb(4, 129, 133); /*深綠*/
    letter-spacing:3px;/*文字間距*/
    padding-bottom:10px;
}

.SingleCardContent .ContentSubtitle{
    /*能力分析小卡-內容*/
    font-size:1.2em;
    letter-spacing:2px;/*文字間距*/
    padding-bottom:5px;
}

.SingleCardContent .ContentDetail{
    /*能力分析小卡-細節*/
    font-size:0.9em;
    letter-spacing:2px;/*文字間距*/
}

.ContentDetail div{
    display:inline-block;
    margin-right:1px;
}

.SavingPeriod p{
    /*能力分析小卡-儲蓄期間*/
    font-size:0.9em;
    color:rgb(128,130,133);
    position:absolute;
    right:10px;
    bottom:5px;
}

.Mask {
    /*灰底遮罩*/
    background-color:rgb(165, 177, 184) !important;
    height:120px; /*new*/

}
.Mask:hover {
    /*灰底遮罩*/
    background-color:rgba(165, 177, 184,0.8) !important;/*new*/
}
.Mask a:hover {
    background-color:rgb(165, 177, 184) !important;
    text-decoration: none;/*new*/
}

.MaskContent{
    /*遮罩文字*/
    font-size:1.4em;
    font-weight:900;
    letter-spacing:2px;/*文字間距*/
    color:#2C3E50; /*暗藍*/
    /*margin-top:40px;*/ /*改在mask設定高度*/
    line-height:120px; /*new*/
    width:78%; /*new*/
    margin-left:22%;/*new*/
    text-align:left;/*new*/
}

.LoginMask{
    /*讓div滿版都可點選超連結*/
    position:absolute; 
    width:100%;
    height:100%;
    top:0;
    left: 0;
    z-index: 1;
    background-color:rgba(140, 183, 189 ,0.8) !important;

}

.LoginMask a {
    font-size:3em;
    font-weight:900;
    letter-spacing:2px ;/*文字間距*/
    color:#2C3E50; /*暗藍*/
    display:flex;
    align-items:center;
    justify-content: center;
    height:100%;
    width:100%;
    flex-wrap:wrap;
}

.LoginMask a:hover{
    text-decoration: none;
     background-color:rgba(140, 183, 189 ,0.5) !important;
}

.LoginMask a div{
    align-items:center;
    justify-content: center;
    display:block;
}

/*SelectStyle已有設定，但護照卡這因設計而改至下列顏色*/
.btn-bg-lightyellow:hover, .btn-bg-gray:hover{
    background-color:rgba(29, 129, 117,0.5);
    color:rgba(29, 129, 117,0.5);
    border:1px solid rgb(29, 129, 117);
}
.btn-bg-lightyellow:hover .SelectSet.Yellow > button, .btn-bg-gray:hover .SelectSet.Gray > button {
  background-color:rgb(29, 129, 117) !important;
    border-color:rgb(29, 129, 117)!important;
    color:black  !important;
}

/*---黃---*/
.btn-bg-lightyellow,button.btn-bg-lightyellow:focus{
    background-color:rgba(248, 177, 24, 0.4);
    color:black;
    border:1px solid rgb(248, 177, 24); 
}

/*---灰---*/
.btn-bg-gray,button.btn-bg-gray:focus{
    background-color:rgb(202, 204, 205);
    color:black;
    border:1px solid rgb(202, 204, 205);
}

.btn-bg-gray:disabled{ /*護照卡用*/
    background-color:rgb(202, 204, 205);
    color:#2C3E50; /*暗藍*/
    border:1px solid rgb(202, 204, 205);
    font-size:18px;
    font-weight:bold;
    letter-spacing:2px;/*文字間距*/
    opacity:1; /*不透明度*/
}


/*人生護照modal btn內物件置中*/
.ObjectMiddle{
    display:flex;
    align-items:center;
    margin-bottom:10px;
    margin-left:0px !important;
    margin-right:0px;
}

@media all and (max-width: 480px) {
     /*分析卡-調整*/
    .ResultCard{
        text-align:center !important;
    }
    /*分析卡-圖塊調整*/
    .ResultCardPic{
        /*chart + icon*/

    }
    .ResultCardFunnel .ResultCardPic{
        margin-top:30px;
    }
    /*分析卡-內容位置調整*/
    .ResultCardContent , .ResultCardFunnel .ResultCardContent , .NotChart .ResultCardContent ,.NotChart.Trip .ResultCardContent {
       margin-top:0px;
    }
    /*分析卡-內容位置調整--旅遊*/
    .NotChart.Trip .ResultCardPic {
        height:250px;
    }
    /*分析卡-次內容調整*/
    .MinorContent{    
        margin-left:-10px;
        margin-right:-10px;
    }

    .ALayout .ResultCardContent .MinorContent{    
        /*text-align:left;
        margin-left:10px;*/
    }
    .ALayout.portfolio {
        padding-left:0 !important;
        padding-right:0 !important;
    }
     /*分析卡-細節調整*/
    .DetailContent{   
        margin-left:-10px;
        margin-right:-10px;
    }
}
@media all and (min-width: 481px) and (max-width: 767px) {
      /*分析卡-內容位置調整*/
    .ResultCardContent , .ResultCardFunnel .ResultCardContent ,.NotChart .ResultCardContent , .NotChart.Trip .ResultCardContent {
       margin-top:0px;
    }
    /*分析卡-內容位置調整--旅遊*/
    .NotChart.Trip .ResultCardPic {
        height:250px;
    }
    .btn-bg-gray:disabled{
        font-size:15px !important;
    }
}
@media all and (min-width: 768px) and (max-width: 991px) { /*ipad*/
   
}
@media all and (min-width: 992px) and (max-width: 1199px) {
     .LifePassCardContainer {
        /*人生護照與小卡等長*/
        display:flex;
        flex-wrap:wrap;
    }   
     .LifePassportCardMinor{
        /*人生護照分析小卡整體-調整*/
        padding-left:15px !important; /*改為15px*/     
    }
}
@media all and (min-width: 1200px) {
    .LifePassCardContainer {
        /*人生護照與小卡等長*/
        display:flex;
        flex-wrap:wrap;
    }
    .LifePassportCardMinor{
        /*人生護照分析小卡整體-調整*/
        padding-left:15px !important; /*改為15px*/
    }

}