html {
    scroll-behavior: smooth;
}

/* 解決圖片縮小模糊問題 */
img {
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor;
}

header .container,
#riskAnalysis .container,
#productCovers,
#productType {
    max-width: 800px;
}

header h1 {
    text-shadow: 1px 1px 6px rgb(0 0 0 / 30%);
}

#riskAnalysis h2,
#productFeature h2 {
    font-size: 2rem;
}

#prductNotes .card {
    max-width: 370px;
}

#relatedProducts .card {
    max-width: 320px
}

#descrHeader {
    border: solid 1px white;
    background-color: rgb(0 0 0 / 8%);
}
#descrHeader p {
    /* max-width: 520px; */
    margin: 0.5rem 0;
}
#productCovers .d-flex > img {
    width: 60px;
}

/* 0728 */
#moreArticle {
    padding-top: 3rem;
}
#moreArticle > a {
    padding: 0.5rem 0;
    color: #757c73;
    text-decoration: none;
    border-bottom: 1px dashed rgb(216, 216, 216);
}
#moreArticle > a:hover {
    border-bottom: 1px solid rgb(115, 139, 93);
}

.container > hr {
    max-width: 500px;
    margin: 5rem auto; 
}


.list-arrow {
    list-style:none;
    padding-left: 0;
}
.list-arrow > li {
    background: url(../images/ins-intro/arrow-alt-circle-right-regular.png) no-repeat;
    /* left center; */
    padding-left: 1.75rem;
    /* the width of your image + some space */
     margin-bottom: 0.5rem;
}
.list-arrow ol {
    padding-inline-start: 20px;
}

.highlighter:after {
    content: "";
    display: block;
    margin: 0 auto;
    width: 100px;
    padding-top: 2rem;
    border-bottom: 6px solid #8AB93E;
}

.triangel {
    position: absolute;
    width: 20px;
    height: 20px;
    border-style: solid;
    border-width: 20px 20px 0 0;
    border-color: #007bff transparent transparent transparent;
}


/* colors-------- */

/* medical blue */
.border-medical:after {
    border-bottom: 6px solid #56CCF2;
}

.tri-medical {
    border-color: #56CCF2 transparent transparent transparent;
}

.bg-gradient-medical {
    background: linear-gradient(-45deg, #169BD4, #7CD4F2);
}

.btn-outline-medical {
    color:#169BD4;
    border-color: #169BD4;
}

.btn-outline-medical:hover,
.btn-outline-medical:focus,
.btn-outline-medical:active:hover,
.btn-outline-medical:not(:disabled):not(.disabled).active {
    color: #fff;
    background-color: #169BD4;
}

/* cancer purple */
.border-cancer:after {
    border-bottom: 6px solid #885BB3;
}

.tri-cancer {
    border-color: #885BB3 transparent transparent transparent;
}

.bg-gradient-cancer {
    background: linear-gradient(-45deg, #7643A7, #8D87D1);
}

.btn-outline-cancer {
    color: #885BB3;
    border-color: #885BB3;
}

.btn-outline-cancer:hover,
.btn-outline-cancer:focus,
.btn-outline-cancer:active:hover,
.btn-outline-cancer:not(:disabled):not(.disabled).active {
    color: #fff;
    background-color: #885BB3;
}

/* disability pink */
.border-disability:after {
    border-bottom: 6px solid #FB5B8F;
}

.tri-disability {
    border-color: #FB5B8F transparent transparent transparent;
}

.bg-gradient-disability {
    background: linear-gradient(-45deg, #F64C96, #EF7592);
}

.btn-outline-disability {
    color: #FB5B8F;
    border-color: #FB5B8F;
}

.btn-outline-disability:hover,
.btn-outline-disability:focus,
.btn-outline-disability:active:hover,
.btn-outline-disability:not(:disabled):not(.disabled).active {
    color: #fff;
    background-color: #FB5B8F;
}

/* life red */
.border-life:after {
    border-bottom: 6px solid #DE4949;
}

.tri-life {
    border-color: #DE4949 transparent transparent transparent;
}

.bg-gradient-life {
    background: linear-gradient(-45deg, #DE4949, #EC7A7A);
}

.btn-outline-life {
    color: #DE4949;
    border-color: #DE4949;
}

.btn-outline-life:hover,
.btn-outline-life:focus,
.btn-outline-life:active:hover,
.btn-outline-life:not(:disabled):not(.disabled).active {
    color: #fff;
    background-color: #DE4949;
}

/* accident yellow */
.border-accident:after {
    border-bottom: 6px solid #F2C94C;
}

.tri-accident {
    border-color: #F2C94C transparent transparent transparent;
}

.bg-gradient-accident {
    background: linear-gradient(-45deg, #F2AD4C, #EFC562);
}

.btn-outline-accident {
    color: #E6992B;
    border-color: #E6992B;
}

.btn-outline-accident:hover,
.btn-outline-accident:focus,
.btn-outline-accident:active:hover,
.btn-outline-accident:not(:disabled):not(.disabled).active {
    color: #fff;
    background-color: #E6992B;
}




/* 車險&儲蓄險 car & saving----------------------------------------------------------------------------------------------*/
.btn-prefix {
    font-size: 1rem;
    margin-bottom: .5rem;
}

.bg-highlight {
    /* font-weight: bold; */
    background: linear-gradient(#fff2aa, #fff2aa) 0 60% / 100% .75rem no-repeat;
}

.bg-car {
    min-height: 420px;
    background: center/auto 100% url("../images/ins-intro/car/header-bg.svg");
}

.bg-saving {
    /* min-height: 500px; */
    background: bottom/cover no-repeat url("../images/ins-intro/saving/header-bg.svg");
}

.bg-saving img.hero-img {
    margin-bottom: -1.5rem;
}

@media (min-width: 576px){
    .bg-car .container {
        max-width: 540px;
    }
}
@media (min-width: 768px){
    .bg-car .container {
        max-width: 720px;
    }
}
@media (min-width: 992px){
    .bg-car .container {
        max-width: 960px;
    }
}
@media (min-width: 1200px) {
    .bg-car .container {
        max-width: 1140px;
    }
    .container {
        max-width: 960px;
    }
}

.bg-car h1,
.bg-saving h1 {
    text-shadow: none;
}

.car-descrip {
    font-size: 1.5rem;
}


/* --- */
.bg-grey {
    background-color: #F2F2F2;
}

.badge-primary1 { 
    color: #fff;
    background-color: #709B13; 
}
.cover-range {
    color: #343A40;
    font-weight: bold;
    padding-top: 0.125rem;
}

.car-title {
    font-size: 2.5rem;
}

.car-title:after {
    border-bottom: 6px solid #FF9100;
}

.car-title,
.car-subtitle {
    color: #000;
}

.car-subtitle,
#carIntro .card-title {
    font-size: 2rem;
    text-align: center;
}

/* --- */

#savingIntro,
#irrIntro,
#irrCalAd,
#howToBuy {
    font-size: 1.25rem;
    line-height: 1.8;
}

#savingIntro .risk-plus {
    border: 1px solid #709b13;
    padding: 1.5rem;
    /* background-color: #fff; */
}

#savingIntro .risk-plus__header {
    background-color: #709b13;
    text-align: center;
    color: #fff;
    padding: .5rem .25rem;
    margin-bottom: 1rem;
}


.round-card,
#carIntro .card,
#carOwnPeople .card,
#carBodyIntro,
.car-plan {
    background-color: #fff;
    border: none;
    border-radius: 20px;
    box-shadow: 0 3px 6px rgb(0 0 0 / 15%);
}

.round-card .card-body,
#carIntro .card-body,
#carOwnPeople .card-body,
#carBodyIntro {
    padding: 3rem;
}


.round-card .card-img-top {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

#irrIntro .round-card {
    margin-bottom: 1rem;
    background-color: #F9F9F9;
}

#irrIntro article,
#irrCalAd article,
#howToBuy article {
    max-width: 680px;
    margin: auto;
}

#irrIntro article h3,
#howToBuy article h3 {
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
    margin: 5rem 0 2.5rem;
}

#irrCalAd article>p,
#irrIntro article>h3,
#irrIntro article>p,
#howToBuy article>h3,
#howToBuy article>p {
    margin-left: 2rem;
    margin-right: 2rem;
}

#irrIntro article .card {
    margin-bottom: 2rem;
}

#irrIntro article .card-body {
    padding: 2rem;
}

#irrIntro article .card-title {
    font-weight: bold;
}

#irrIntro article .card-text {
    margin-bottom: 0;
}

#irrCalBanner {
    background-color: #fff;
    padding: 2rem;
    margin-top: 5rem;
}

#irrCalBannerImg {
    margin-top: -4rem;
    margin-left: -4rem;
}

#irrCalBannerText h3 {
    font-weight: bold;
    margin: 1rem 0 2rem;
}

#irrCalBannerText ul {
    list-style-image: url(../images/ins-intro/saving/irr-banner-list-style.svg);
    padding-left: 1rem;
}

#irrCalBannerText li {
    margin-bottom: .5rem;
}


#savingIntro .risk-header {
    display: flex;
    align-items: flex-start;
}

#savingIntro .risk-header img {
    width: 40%;
    max-width: 6.5rem;
}

#savingIntro .risk-header,
#carIntro .card-title {
    font-weight: bold;
    color: #343A40;
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid darkgray;
}

#savingIntro .card-title {
    font-weight: bold;
    margin-left: 1rem;
    margin-bottom: 0;
}

#savingIntro .card-title--main {
    font-size: 2rem;
}

#savingIntro .card-title--sup {
    font-size: 1.5rem;
    margin-bottom: .5rem;
}

#savingIntro .card-intro img {
    width: 100%;
    margin-bottom: 1.5rem;
}

#savingIntro .card-intro,
#savingCTAsBottom {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

#savingRisk {
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
}

#carIntro .card-text {
    font-size: 1.125rem;
}

/* 車險規劃 */
body {
	--car-color1: #FB5757;
	--car-color2: #FF9100;
	--car-color3: #5A9E4A;
}
.car-plan {
    padding: 2rem 0;
    border-left: 20px solid;
}

.car-plan .plan-name,
.car-plan .plan-content {
    padding: 0 2rem;
}
.car-plan .plan-content {
    border-left: 1px solid darkgray;
}
.car-plan h3 {
    font-size: 3rem;
    font-weight: bold;
}
.car-plan h4 {
    color: #343A40;
    font-size: 1.75rem;
    font-weight: bold;
}
.car-plan p {
    margin-bottom: 0.75rem;
}

/* 駕駛人&乘客險 */
#carOwnPeople .card-title{
    font-size: 2rem;
    font-weight: bold;
    color: #343A40;
    margin: 1rem 0;
}
#carOwnPeople .card-body img {
    max-width: 200px;
}


@media (max-width: 992px){
    .car-descrip {
        font-size: 1.25rem;
    }

    .car-title {
        font-size: 1.75rem;
    }

    .car-subtitle,
    #carIntro .card-title,
    #carOwnPeople .card-title {
        font-size: 1.5rem;
    }
    
    /* .card-text, */
    #carIntro .card-text,
    #carOwnPeople .card-text,
    #carBodyIntro {
        font-size: 1rem;
    }

    .car-plan h3 {
        font-size: 2.5rem;
    }
    .car-plan h4 {
        font-size: 1.5rem;
    }

    #savingIntro,
    #irrIntro,
    #irrCalAd,
    #howToBuy {
        font-size: 1.125rem;
    }

    #irrCalBanner {
        padding: 1.5rem;
        margin-top: 4rem;
    }

    #irrCalBannerImg {
        margin-top: -3rem;
        margin-left: -3rem;
    }
}

@media (max-width: 768px) {


    #irrCalBannerImg {
        margin-bottom: 2rem;
    }

    #irrIntro article h3,
    #howToBuy article h3 {
        font-size: 2rem;
        margin: 5rem 0 2.5rem;
    }

    #irrCalAd article>p,
    #irrIntro article>h3,
    #irrIntro article>p,
    #howToBuy article>h3,
    #howToBuy article>p {
        margin-left: 1rem;
        margin-right: 1rem;
    }



    .car-plan {
        padding: 0 1.25rem;
    }

    .car-plan .plan-name,
    .car-plan .plan-content {
        padding: 1.25rem 0;
    }
    .car-plan .plan-content {
        border: none;
        border-top: 1px solid darkgray;
    }

    .round-card,
    #carOwnPeople .card,
    #carBodyIntro,
    .car-plan {
        border-radius: 16px;
    }

    #irrIntro article .card-body {
        padding: 1.25rem;
}

    .round-card .card-body,
    #savingIntro .card-body,
    #carIntro .card-body,
    #carOwnPeople .card-body,
    #carBodyIntro {
        padding: 2rem;
    }

}

@media (max-width: 375px) {

    #irrIntro article h3,
    #howToBuy article h3 {
        font-size: 2rem;
    }

}

.car-border1 {
    border-color: var(--car-color1);
}

.car-border2 {
    border-color: var(--car-color2);
}

.car-border3 {
    border-color: var(--car-color3);
}

.car-color1 {
    color: var(--car-color1);
}

.car-color2 {
    color: var(--car-color2);
}

.car-color3 {
    color: var(--car-color3);
}


/* 車險表格 ---------------------------------------------------------------*/
/* info (hed, dek, source, credit) */
.rg-container {
    font-family: 'Lato', Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.4;
    margin: 0;
    padding: 2rem 0;
    color: #333;
}
/* table */
table.rg-table {
    width: 100%;
    margin-bottom: 0.5rem;
    font-size: 1em;
    border-collapse: collapse;
    border-spacing: 0;

    background-color: #fff;
    box-shadow: 0 3px 6px rgb(0,0,0,.15);
    border-radius: 20px;
}

table.rg-table tr {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    text-align: center;
    vertical-align: middle;
}


/* 背景顏色及圓角 */
table.rg-table thead tr {
    background: #6D6D6D;
}
table.rg-table thead th:first-child {
    border-top-left-radius: 20px;
}
table.rg-table thead th:last-child {
    border-top-right-radius: 20px;
}

table.rg-table.zebra tr:nth-child(even) {
    background-color: #FFF6EE;
}
table.rg-table tr:last-child td:first-child{
    border-bottom-left-radius: 20px;
}
table.rg-table tr:last-child td:last-child{
    border-bottom-right-radius: 20px;
}

/* tr border, last child除外*/
table.rg-table tr {
    border-bottom: 1px solid #C5C5C5;
}
table.rg-table tr:last-child {
    border-bottom: none;
}

/* 字體大小及padding */
table.rg-table th {
    color: #fff;
    font-weight: normal;
    padding: 1em 0.5em;
    font-size: 1em; 
}
table.rg-table td {
    padding: 0.75em;
    font-size: 1em;
}

table.rg-table tr.highlight {
    background-color: #dcf1f0 !important;
}
table.rg-table .highlight td {
    font-weight: bold;
}

table.rg-table th.number,
td.number {
    text-align: right;
}

table.rg-table .material-icons-outlined{
    color :#97B654;
    /* font-size: 1.25em; */
}

/* media queries */
@media screen and (max-width: 768px) {
    .rg-container {
        font-size: 14px;
    }

    #TcarBody tr td:first-child{
        text-align: left;
    }
}
@media screen and (max-width: 576px) {
    .rg-container {
        font-size: 13px;
    }

    table.rg-table th {
        padding: 1em 0.25em;
    }
    #TcarBasicPlan.rg-table th:first-child {
        width: 22%;
    }
    #TcarBasicPlan.rg-table th:last-child {
        width: 30%;
    }
    #TcarBody.rg-table th:first-child {
        width: 35%;
    }

    .__break {
        display: block;
    }
}
@media screen and (max-width: 355px) {
    .rg-container {
        font-size: 12px;
    }


    #TcarBasicPlan.rg-table th:first-child {
        width: 16%;
    }
    #TcarBasicPlan.rg-table th:last-child {
        width: 32%;
    }

}

#TcarIntro.rg-table td:last-child {
    background: #fff;
    border-left: 1px solid #C5C5C5;
}

.bg-carIntro1 {
    background-color: #cce694;
    background-color: #97B654;
}
.bg-carIntro2 {
    background-color: #f8b880;
    background-color: #ff8317;
}
.bg-carIntro3 {
    background-color: #d4e9f5;
}
.bg-whiter {
    background: rgba(256, 256, 256, .60);
}
.bg-whiter-er {
    background: rgba(256, 256, 256, .80);
}






#TcarBasicPlan.rg-table th:nth-child(2){
    background: var(--car-color2);
    vertical-align: top;

}
#TcarBasicPlan.rg-table th:nth-child(3){
    background: var(--car-color3);
    vertical-align: top;
}
#TcarBasicPlan.rg-table th div:first-child {
    padding-bottom: 0.5em;
    margin-bottom: 0.5em;
    border-bottom: 1px solid #fff;
}

#TcarBasicPlan .btn {
    display: none;
}

#CTAs {
    color: white;
    text-shadow: 0 0px 6px rgb(0, 0, 0, .15);
}

#CTAs .btn-light {
    text-shadow: none;
}

#CTAs {
    padding-top: 6rem;
    padding-bottom: 6rem;
}

#CTAs .cta-sales {
    background-color: #fff;
    color: #383838;
    text-shadow: none;


    align-items: center;
    justify-content: center;
    border-radius: 1rem;
    border: 5px solid #fff;

}

#CTAs .cta-sales__imgbox img {
    border-radius: 1rem;
}

#CTAs .cta-sales__text {
    padding: 1rem 1.5rem;
}

.ins-links__btn {
    padding: .25rem 0;
    margin: .25rem 0;
    border-radius: .5rem;
}

.ins-links__imgbox img {
    max-width: 6rem;
    margin: .25rem 0;
}


/* 寵物險&旅平險 (類blog頁面) ----------------------------------------------------------------------------------------------*/

.ins-blog {
    font-size: 1.125rem;
}

.ins-blog a{
    color: #709B13;
}

.ins-blog header {
    text-align: center;
    padding: 3rem 0;
}

header.box-pattern {
    background-color: #c7da9e;
    opacity: 1;
    background-image:  linear-gradient(#eee 1px, transparent 1px), linear-gradient(to right, #eee 1px, #c7da9e 1px);
    background-size: 20px 20px;
}

.ins-blog header h1 {
    text-shadow: none;
}

.ins-blog article {
    max-width: 800px;
}

.ins-blog article h2 {
    font-size: 2.25rem;
    font-weight: bold;
    margin: 3rem 0 2rem;
}

.ins-blog article h3 {
    font-size: 1.5rem;
    font-weight: bold;
    margin: 3rem 0 2rem;
}


.ins-blog article p {
    line-height: 1.8;
    margin-bottom: 1.5rem;
}

.ins-blog article hr {
    border-color: #FF7800;
    width: 75%;
    margin: 4rem auto;
}

.ins-blog article img {
    border-radius: 1rem;
    box-shadow: 0 3px 6px rgb(0, 0, 0, .15);;
}

.ins-blog article ul {
    list-style-type: circle;
    color: #383838;
}
.ins-blog article ul>li {
    margin-bottom: .75em;
}
.ins-blog article ul>li::marker {
    color: #FF7800;
}

.ins-blog .arrow-point:is(h3, h4, h5, h6) {
    position: relative;
    padding-left: 1em;
    margin-left: -.25em;
}

.ins-blog .arrow-point:is(h3, h4, h5, h6)::before {
    font-family: 'Material Icons';
    content: '\e5df';
    color: #709B13;
    position: absolute;
    /* font-size: .75em; */
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}


nav.article-menu {
    border: 1px solid #C5C5C5;
    border-radius: 1rem;
}
nav.article-menu a{
    color: inherit;
}
nav.article-menu>.menu-header{
    border-bottom: 1px solid #C5C5C5;
    padding: 1.25rem 1.75rem;
    font-weight: bold;
    font-size: 1.25rem;
}
nav.article-menu>.menu-body{
    padding: 1.5rem 1.75rem;
}
nav.article-menu>ul.menu-body {
    list-style: none;
    margin-bottom: 0;
}
nav.article-menu>ul.menu-body>li:not(:last-child) {
    margin-bottom: .5rem;
}
nav.article-menu>ul.menu-body>li {
    padding-left: 1.5rem;
    position: relative;
}
nav.article-menu>ul.menu-body>li:before {
    font-family: 'Material Icons';
    content: '\e866';
    color: #FF7800;
    position: absolute;
    left: 0;
}

.ins-blog nav.company-menu .menu-items{
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.ins-blog nav.company-menu .menu-items a {
    color: #FFF;
}

.ins-blog article .analysis-table-box {
    margin-left: -126px;
    margin-right: -126px;
    /* (1020-770)/2 */

    overflow: auto;
    /* height: 100vh; */
}

.table-and-ctrl {
    position: relative;
}
.analysis-table-ctrl {
    /* display: none; */
    position: sticky;
    z-index: 12;
    top: 50%;
}
.analysis-table-ctrl>button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background-color: #fff;
    box-shadow: 0 3px 6px rgb(0, 0, 0, .15);

    position: absolute;
}
.analysis-table-ctrl>button.scroll-L {
    left: calc( -126px - 20px);
}
.analysis-table-ctrl>button.scroll-R {
    right: calc( -126px - 20px);
}
.ins-blog {
    overflow-x: hidden;
}

@media (max-width: 1060px){
    .ins-blog article .analysis-table-box {
        margin-left: 0;
        margin-right: 0;
    }
    .analysis-table-ctrl {
        display: block;
    }
    .analysis-table-ctrl>button.scroll-L {
        left: -20px;
    }
    .analysis-table-ctrl>button.scroll-R {
        right: -20px;
    }
}


table.analysis-table{
    border-spacing: 0;
    text-align: center;
    font-size: 1rem;

    width: 100%;
}
table.analysis-table :is(th, td) {
    white-space: wrap;
    padding: .5rem 0;
}
/* fixed */
table.analysis-table thead {
    position: sticky;
    top: 0;
    z-index: 11;
}
table.analysis-table thead.fixed {
    position: fixed;
    top: 0;
    z-index: 11;
}
table.analysis-table tr th:first-child {
    position: sticky;
    left: 0;
    z-index: 10;
}


/* th td size */
table.analysis-table tr th:first-child {
    min-width: 120px;
    max-width: 120px;
}
table.analysis-table td, table.analysis-table thead th:not(:first-child) {
    min-width: 120px;
    max-width: 120px;
}
table.analysis-table .tr-notice td {
    white-space: wrap;
}
table.analysis-table .tr-notice td>ul {
    text-align: left;
    margin-bottom: 0;
    padding-left: 1rem;
    padding-inline-start: 1.5em;
}

/* align, color and border */
.ins-blog article .analysis-table-box{
    border: 1px solid #709B13;
    border-radius: 1rem;
}
table.analysis-table tr th:first-child {
    background: #ebece8;
}
table.analysis-table tr.tr-title>:is(th,td) {
    background: #c7da9e;
    /* color: #fff; */
}
table.analysis-table tbody tr {
    border-top: 1px dashed #ebece8;
}
table.analysis-table thead th:not(:last-child) {
    border-right: 1px solid #fff;
}
table.analysis-table td:not(:last-child) {
    border-right: 1px solid #c7da9e;
}
table.analysis-table thead {
    background-color: #709B13;
    color: #fff;
}