/*---- 2022/02 個資條款介面更新 ----*/
.tab-agreement {
    background-color: #fff;
    border: 1px solid #BEBEBE;
    border-radius: 0 0 6px 6px;
    padding: 25px;}

.newAgree-Option{
    position: relative;
    display: flex;
    box-sizing: border-box;
    padding: 20px;
    cursor: pointer;}
    
.newAgree-Option > .read-btn{
    position: relative;
    display: inline-block;
    padding: 10px 20px;
    margin-right: 15px;
    width: auto;
    max-height: 42px;
    line-height: 20px;
    color: #00817a;
    background: #fff;
    font-weight: 600;
    white-space: nowrap;
    border: 1px #00726a solid;
    cursor: pointer;
    border-radius: 40px;
    box-sizing: border-box;
    transition: 0.5s;
    cursor: pointer;}

.newAgree-Option > .read-btn:hover,
.newAgree-Option > .read-btn:active{background: #FFF8D1;}

/* 閱讀聲明鈕已確認樣式 */
.tab-agreement .newAgree-Option > .read-btn.check{background: #FFF8D1;}

/*第二、三、四checkbox後同意文字對齊*/
.tab-agreement .newAgree-Option:nth-of-type(2) > div:nth-of-type(2),
.tab-agreement .newAgree-Option:nth-of-type(2) > div:nth-of-type(3),
.tab-agreement .newAgree-Option:nth-of-type(2) > div:nth-of-type(4),
.tab-agreement .newAgree-Option:nth-of-type(3) > div:nth-of-type(2),
.tab-agreement .newAgree-Option:nth-of-type(3) > div:nth-of-type(3),
.tab-agreement .newAgree-Option:nth-of-type(3) > div:nth-of-type(4),
.tab-agreement .newAgree-Option:nth-of-type(4) > div:nth-of-type(2),
.tab-agreement .newAgree-Option:nth-of-type(4) > div:nth-of-type(3),
.tab-agreement .newAgree-Option:nth-of-type(4) > div:nth-of-type(4){
    padding: 10px 0;}

/* 未閱讀同意書提示 */
.read-btn.note::after{
    content: '請點選並詳閱';
    position: absolute;
    display: inline-block;
    color: #ED2E33;
    width: auto;
    font-size: 12px;
    left: 50%;
    bottom: -25px;
    transform: translateX(-50%);}


/*---- 客製版checkBox 樣式 ----*/
/*---- 我已同意鈕 ----*/
.newCheckbox{
    position: relative;
    display: inline-block;    
    padding-left: 45px !important;
    cursor: pointer;}

.newAgree-Option > div > .newCheckbox:nth-of-type(2){
    margin-top: 20px;}

.newCheckbox p{
     margin: 0;
     line-height: 24px;}

/* 同意、不同意 新增加強樣式 */
.newCheckbox p > span{
    color: #4ca7a7;
    font-weight: 800;}

/*預設無法點擊*/
.newCheckbox.checkbox-disabled {
    color: rgb(51, 51, 51,0.5);
    pointer-events: none;}

/*check外框*/
.newCheckbox > span{
    position: absolute;
    display: inline-block;
    vertical-align: middle;
    border: 1px solid #979797;
    border-radius: 5px;
    width: 22px;
    height: 22px;
    top: 0;
    left: 10px;}

/*check~箭頭*/
.newCheckbox > span > span {
    position: absolute;
    display: inline-block;
    opacity: 0;
    text-align: center;
    padding: 2px;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;}

.newCheckbox > span > span::after {
    content: '';
    position: absolute;
    display: inline-block;
    background: #24a09a;
    width: 4px;
    height: 80%;
    border-radius: 10px;
    -webkit-transform: translate(-50%, -50%) rotate(40deg);
            transform:translate(-50%, -50%) rotate(40deg);
    left: 65%;
    top: 50%;}

.newCheckbox > span > span::before {
    content: '';
    position: absolute;
    display: inline-block;
    background: #24a09a;
    width: 4px;
    height: 50%;
    border-radius: 10px;
    -webkit-transform: translate(-50%, -50%) rotate(135deg);
            transform: translate(-50%, -50%) rotate(135deg);
    left: 28%;
    top: 66%;}

/*控制開關*/
.newAgree-Option > div > input[type=checkbox]{display: none;}
#agreementChk:checked + .newCheckbox > span > span,
#secondaryChk:checked + .newCheckbox > span > span,
#coSellChk:checked + .newCheckbox > span > span,
#lineChk:checked + .newCheckbox > span > span,
#agreementChkAgree:checked + .newCheckbox > span > span,
#secondaryChkAgree:checked + .newCheckbox > span > span,
#coSellChkAgree:checked + .newCheckbox > span > span,
#lineChkAgree:checked + .newCheckbox > span > span,
#agreementChkDisagree:checked + .newCheckbox > span > span,
#secondaryChkDisagree:checked + .newCheckbox > span > span,
#coSellChkDisagree:checked + .newCheckbox > span > span,
#lineChkDisagree:checked + .newCheckbox > span > span{opacity: 1;}


/* 聲明註釋 */
.newAgree-note{ padding: 10px 20px;}
.newAgree-note p{
    font-size: 14px;
    margin: 4px 0;}
.newAgree-note p.red{color: #ED2E33;}

.newAgree-note p::before{
    content: '★';
    margin-right: 5px;}


/* 閱讀同意書&聲明書PopUp */
.termsPopup-wrap{
    display: inline-block;
    position: fixed;
    top: 0;
    left: 0;
    text-align: center;
    background: rgba(0, 0, 0, 0.4);
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 20px;
    z-index: 1;
    pointer-events: none;
    display: none;}

/* 開啟PopUp時，加入之樣式 */
.popUpOn{
    pointer-events: initial;
    display: inline-block;}

.termsPopup-wrap .termsPopup {
    position: absolute;
    display: inline-block;
    width: 100%;
    height: 100%;
    max-width: 780px;
    max-height: 600px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -60%);
    background: #fff;
    padding: 40px;
    margin: 0 auto;
    border-radius: 10px;
    box-sizing: border-box;
    opacity: 0;
    animation: popUpFadein-ani 1s ease forwards;}
    /* popup fadeIn*/
    @keyframes popUpFadein-ani{    
        0%{ opacity: 0.5;
            transform: translate(-50%, -60%);}
        100%{ opacity: 1;
            transform: translate(-50%, -50%);}
    }

/* PopUp 關閉鈕 */
.termsPopup .close-btn{
    position: absolute;
    display: inline-block;
    top: 15px;
    right: 15px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    z-index: 1;}

.termsPopup .close-btn > span{
    display: inline-block;
    position: absolute;
    top: 0;
    width: 2px;
    height: 90%;
    background: #333;
    transform: rotate(45deg);}

.termsPopup .close-btn > span:nth-of-type(2){transform: rotate(-45deg);}

/* 條款閱讀進度 */
.termsSteps-wrap{
    width: 100%;
    height: 60px;
    padding: 10px 0;
    box-sizing: border-box;
    text-align: center;
    margin-bottom: 40px;}
    
.termsSteps-wrap .termsSteps{
    display: flex;
    width: 100%;
    justify-content: space-evenly;
    align-items: center;
    margin:  0 auto;
    box-sizing: border-box;}

.termsSteps-wrap .termsSteps > span{
    position: relative;
    display: inline-block;
    width: 36px;
    height: 36px;
    line-height: 30px;
    background: #529E99;
    color: #fff;
    font-size: 24px;
    font-weight: 600;
    border: 3px solid #529E99;
    border-radius: 50%;
    margin: 0 20px;
    box-sizing: border-box;}

.termsSteps-wrap .termsSteps > span::before{
    content: '';
    position: absolute;
    display: inline-block;
    min-width: 90px;
    line-height: 16px;
    left: 50%;
    bottom: -40px;
    transform: translateX(-50%);
    font-size: 14px;
    color: #529E99;}
.termsSteps-wrap .termsSteps > span:nth-of-type(1)::before{content: '網路保險服務約定條款';}
.termsSteps-wrap .termsSteps > span:nth-of-type(2)::before{content: '網路投保約定條款';}
.termsSteps-wrap .termsSteps > span:nth-of-type(3)::before{content: '網路保險服務定型化契約';}
.termsSteps-wrap .termsSteps > span:nth-of-type(4)::before{content: '個人資料告知事項';}
.termsSteps-wrap .termsSteps > span:nth-of-type(5)::before{content: '聲明及同意事項確認';}

#secondaryWrap > .termsSteps-wrap .termsSteps > span:nth-of-type(1)::before{
    content: '特定目的外蒐集、處理、利用個人資料之聲明';
    white-space: nowrap;
    text-align: center;
    bottom: -30px;}

#coSellWrap > .termsSteps-wrap .termsSteps > span:nth-of-type(1)::before{
    content: '共同行銷個人資料之聲明';
    white-space: nowrap;
    text-align: center;
    bottom: -30px;}

#lineWrap > .termsSteps-wrap .termsSteps > span:nth-of-type(1)::before{
    content: 'LINE個人化服務會員身分驗證及服務條款';
    white-space: nowrap;
    text-align: center;
    bottom: -30px;}

.termsSteps-wrap .termsSteps > span.agreeCheck::after{
    content: '';
    display: inline-block;
    position: absolute;
    background: #529E99 url(../images/agreeCheck.svg) center no-repeat;
    top: 0;
    left: 0;
    border-radius: 50%;
    width: 100%;
    height: 100%;
    opacity: 0;
    animation: checked-ani 1s ease forwards;}
    /* checked-ani 動畫*/
    @keyframes checked-ani{
        0%{ opacity: 0.2;
            transform: scale(0.6);}
        50%{transform: scale(1.4);}
        100%{
            opacity: 1;
            transform: scale(1);}
    }

#agreementWrap .termsSteps-wrap .termsSteps > span.agreeCheck::after,
#secondaryWrap .termsSteps-wrap .termsSteps > span.agreeCheck::after,
#coSellWrap .termsSteps-wrap .termsSteps > span.agreeCheck::after,
#lineWrap .termsSteps-wrap .termsSteps > span.agreeCheck::after{animation-delay: 1.5s;}

.termsSteps-line1{
    position:absolute;
    display: inline-block;
    width: 60%;
    height: 2px;
    background: #eeeeee;}

.termsSteps-line2{
    position:absolute;
    display: inline-block;
    width: 30%;
    height: 2px;
    background: #eeeeee;}

/* 調款內容 */
.terms-wrap{
    display: inline-block;
    box-sizing: border-box;
    width: 100%;
    height: 100%;}

/* 閱讀同意書提示 */
.terms-wrap > .callout-title{
    vertical-align: middle;
    position: relative;}

.terms-wrap > .callout-title.note::after{
    content: '(請下拉並詳閱相關內容)';
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin-left: 5px;
    color: #fd9394;
    width: auto;
    font-size: 14px;}

.terms-wrap .terms{
    position: relative;
    display: inline-block;
    text-align: left;
    padding: 10px 5px;
    width: 100%;
    height: calc(100% - 220px);
    background: #eeeeee;
    box-sizing: border-box;}

.terms-wrap .terms > div{
    display: inline-block;
    width: 100%;
    height: 100%;
    background: #eeeeee;
    overflow: hidden;
    overflow-y: auto;}

.terms-wrap .terms > div > div > h3{
    display: inline-block;
    position: sticky;
    top: 0;
    left: 0;
    width: auto;
    height: 30px;
    line-height: 30px;
    padding: 0 10px;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    background: rgba(82, 158, 153,0.8);
    box-sizing: border-box;
    transition: 0.5s;}

.terms-wrap .terms > div > div > h3::after{
    content: '';
    position: absolute;
    top: 0;
    right: -15px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 30px 15px 0 0;
    border-color: rgba(82, 158, 153,0.8) transparent transparent transparent;}

.terms-wrap .terms ol,
.terms-wrap .terms ul{
    margin: 0;
    padding: 10px 10px 10px 40px;}

/* 調整縮排 */
.terms-wrap .terms #secondaryTerms1 > ol{ padding-left: 10px;}
.terms-wrap .terms #coSellTerms1 > ol{ padding-left: 10px;}
.terms-wrap .terms #lineTerms1 > ol{ padding-left: 10px;}

/*無編號li*/
.ul-style > li{list-style: none;}    
.ul-style > li > p{
    margin: 5px 0;
    padding-left: 56px;}  

.ul-style > li > .termsl2{padding-left: 85px;}

.terms-wrap .terms ol li,
.terms-wrap .terms ul li{
    font-size: 14px;
    line-height: 22px;
    margin-bottom: 5px;}
        
.terms-wrap .terms ol > p,
.terms-wrap .terms ul > p{
    font-size: 14px;
    margin: 0;
    margin-bottom: 5px;
    line-height: 20px;}

.termsl1 > li{list-style: trad-chinese-formal;}
.termsl2 > li{list-style: cjk-ideographic;}
.termsl2 > li > ol {list-style: decimal;}
.termsl3 {list-style: decimal;}
.termsl3 li {list-style: decimal;}


/*條款分區線*/
.terms .content-split{
    display: block;
    height: 1px;
    margin: 30px 15px;
    background: #9e9e9e;
    box-sizing: border-box;}

/*條款蓋版內容提示*/
.terms-note{
    position: relative;
    display: inline-block;
    font-size: 14px;
    line-height: 18px;
    color: #ED2E33;
    padding: 10px 10px 10px 25px;}

.terms-note::before{
    content: '※';
    position: absolute;
    left: 10px;
    display: inline-block;
    vertical-align: middle;}

/* 條款同意鈕、不同意鈕 */
#agreementAllTermsYes,
#secondaryAllTermsYes, #secondaryAllTermsNo,
#coSellAllTermsYes, #coSellAllTermsNo,
#lineAllTermsYes, #lineAllTermsNo
{display: none;}

.termsAgreeBtn-warp {
    display: flex;
    justify-content: space-evenly;
    width: 100%;}

.termsAgreeBtn-warp .termsAgree-btn{
    position: relative;
    display: inline-block;
    margin: 20px 0;
    padding: 10px 20px;
    width: auto;
    color: #00726a;
    font-weight: 700;
    font-size: 17px;
    box-sizing: border-box;
    border-radius: 6px;
    border: 1px solid #00726a;
    background: #fff;
    transition: all 0.2s ease-in-out;
    cursor: pointer;}

/* 不同意鈕預設樣式 */
.termsAgreeBtn-warp .termsDisagree-btn{
    position: relative;
    display: inline-block;
    margin: 20px 0;
    padding: 10px 20px;
    width: auto;
    color: #9e9e9e;
    font-weight: 700;
    font-size: 17px;
    box-sizing: border-box;
    border-radius: 6px;
    border: 1px solid #9e9e9e;
    background: #fff;
    transition: all 0.2s ease-in-out;
    cursor: pointer;}

/*已選控制*/
.termsAgreeBtn-warp .termsAgree-btn:hover,
#agreementAllTermsYes:checked + .termsAgree-btn,
#secondaryAllTermsYes:checked + .termsAgree-btn,
#secondaryAllTermsNo:checked + .termsDisagree-btn,
#coSellAllTermsYes:checked + .termsAgree-btn,
#coSellAllTermsNo:checked + .termsDisagree-btn,
#lineAllTermsYes:checked + .termsAgree-btn,
#lineAllTermsNo:checked + .termsDisagree-btn{
    color: #fff;
    border: 1px solid #00726a;
    background:#00726a !important;}


/*以下為預設樣式，當符合行為時，移除class樣式 disable*/
/* 條款同意鈕預設disable */
.termsAgreeBtn-warp .termsAgree-btn.disable{
    pointer-events: none;
    background: #fff;
    border-color: #bebebe;
    color: #bebebe;}

/* 條款同意預設disable */
label.newCheckbox.disable{
    color: #bebebe;
    pointer-events: none;}

.newCheckbox.disable > span{
    border-color: #bebebe;
    pointer-events: none;}

/*條款內容蓋版預設隱藏*/
#agreementWrap, #secondaryWrap,
#coSellWrap, #lineWrap{
    display: none;}

/* 下拉滾動提示箭頭 */
.terms-wrap .terms > div.scrollingArrow-wrap{
    display: inline-block;
    position: absolute;
    text-align: center;
    background: transparent;
    overflow: initial;
    width: 100%;
    height: 20px;
    left: 0;
    bottom: 20px;
    pointer-events: none;}

.terms-wrap .terms > div.scrollingArrow-wrap > span{
    position: relative;
    display: inline-block;
    text-align: center;
    width: 30px;
    height: 20px;}

.terms-wrap .terms > div.scrollingArrow-wrap > span > span{
    position: absolute;
    display: inline-block;
    top: 50%;
    transform: translateY(-50%);
    width: 25px;
    height: 4px;
    background: #24a09a;
    opacity: 0;
    animation: scrollingArrow-ani 2s ease infinite;}
    /* 下拉滾動提示箭頭動畫 */
    @keyframes scrollingArrow-ani{
        0%{
            top: 0px;
            opacity: 0;}
        50%{
            opacity: 1;}
        100%{
            top: 20px;
            opacity: 0;}
    }

.terms-wrap .terms > div.scrollingArrow-wrap > span > span:nth-of-type(1){
    left: -7px;
    border-radius: 10px 0 10px 10px;
    transform: translateY(-50%) rotate(30deg);}

.terms-wrap .terms > div.scrollingArrow-wrap > span > span:nth-of-type(2){
    right: -7px;
    border-radius: 0px 10px 10px 10px;
    transform: translateY(-50%) rotate(-30deg);}


/*-- LINE連結鈕 --*/
.btn-line{
    position: absolute;
    display: inline-block;
    width: auto;
    height: 30px;
    line-height: 30px;
    font-size: 15px;
    font-weight: 600;
    right: 0;
    bottom: -13px;
    padding: 0 10px;
    color: #fff;
    background: #4ca7a7;
    text-decoration: none;}

.btn-line::before{
    content: '';
    position: absolute;
    top: 0;
    left: -15px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 30px 15px;
    border-color: transparent transparent #4ca7a7 transparent;}

/*-- LINE好友未綁定提示小窗 --*/

.alertPopup-wrap{
    display: inline-block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.4);
    display: none;}

.alertPopup-wrap .alertPopup{
    display: inline-block;
    position: absolute;
    width: 280px;
    height: 240px;
    background: #fff;
    border-radius: 10px;
    padding: 50px 20px 20px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    animation: alertPopup-ani 0.5s ease-in-out forwards;}
    /* alertPopup-ani */
    @keyframes alertPopup-ani{
        0%{ opacity: 0;
            transform: translate(-50%, -50%) scale(0.8);}
        50%{ opacity: 1;
            transform: translate(-50%, -50%) scale(1.1);}
        100%{ opacity: 1;
            transform: translate(-50%, -50%) scale(1);}
    }

.alertPopup-wrap .alertPopup div p{
    font-weight: 600;
    line-height: 28px;
    margin: 0;}

.alertPopup-wrap .alertPopup div .termsAgree-btn{
    position: relative;
    display: inline-block;
    padding: 10px 20px;
    width: auto;
    max-height: 42px;
    line-height: 20px;
    margin: 20px 0;
    color: #fff;
    background: #00817a;
    font-weight: 600;
    white-space: nowrap;
    border: 1px #00726a solid;
    cursor: pointer;
    border-radius: 40px;
    box-sizing: border-box;
    transition: 0.5s;
    cursor: pointer;}