/*滑鼠游標挪動到聯結上方，自動出現彈跳視窗.用我   99999999999999999999999999999999999999999999999999999999999*/
#pup {
    position: absolute;
    z-index: 200; /* aaaalways on top*/
/* nhpup_1.1.js中，調整x_y = this.nudge(甲, 乙);中的甲、乙數值，可調整彈跳視窗的水平or垂直位置。例如：改成 甲 = x + 160，可調整彈跳視窗的水平位置 */
/* 或藉由調整auth.css中 margin-left: 丙; 的數值，例如：將 丙=-40px 或 33px 或26px等，也可調整彈跳視窗的水平位置 */
/*同理：nhpup_1.1.js中，調整x_y = this.nudge(甲, 乙);中的甲、乙數值，可調整彈跳視窗的水平or垂直位置。例如：改成 乙 = y+22，可調整彈跳視窗的垂直位置*/
/*同理：或藉由調整auth.css中 margin-top: 丁; 的數值，例如：將 丁=16px 或 20px 或14px等，也可調整彈跳視窗的垂直位置*/
    margin-left: -82px; /*瑋倫：本列為決定彈跳視窗之水平位置的參數。負越多，總整體往左偏移越多。本列數值越大，將帶領pup與.pup:before與.pup:after同時往右移動*/
    margin-top: 38px;   /*瑋倫：本列為決定彈跳視窗之垂直位置的參數。本列數值越大，將帶領pup與.pup:before與.pup:after同時往下墜，此處調38則為無縫接軌*/
    width: 250px; /*改此數值不會造成網頁影像產生變化*/
    background-color: #00F; /*倘若啟動此行，則彈跳視窗之背景則會啟動本行的顏色，而不會採用background-image的bg-pup.png，應該說是本列的單色背景+透明色的bg-pup.png同時啟動，導致本列若指定背景為藍色，再加bg-pup.png，最終會成為深藍色的背景*/
    text-align: left; /*文字靠左對齊，若right則靠右對齊*/
    font-size: 11pt !important; /*呈現於彈跳視窗方框中字體的大小*/
    line-height: 150%; /*彈跳視窗中，文字之列與列之間的距離*/
    padding: 14px !important; /*(見下D)彈跳視窗中，文字與邊框間距。若將此值提升，則文字狀態固定，邊框會往外推，而提升文字與邊框之間的距離*/
    color: #eeeeee !important; /*彈跳視窗中，文字的顏色*/
    font-family: tahoma, verdana, arial, sans-serif !important; /*彈跳視窗中的文字字型，例如可改成Times New Roman可見變化*/
    font-weight: normal !important; /*彈跳視窗中，文字字體的粗細，例如粗體為bold*/
    border: 8px solid #333333 !important; /*(聯繫G)彈跳視窗外框的邊框粗細，以及邊框的樣式，例如：groove=呈現兩色澤的框限、dashed=虛線、solid=實線*/
    /*  https://www.w3schools.com/css/css_border.asp  */
    /*background-image: url(./bg-pup.png) !important;*/ /*彈跳視窗背景所使用的圖片，bg-pup.png為一個半透明背景的圖片，將本處開啟時若background-color也有開啟，bg-pup.png會影響background-color的色澤*/
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 22px; /*彈跳視窗四個角的圓滑度，此數值越大則四個角越圓*/
}

.pup:before{ /*底層的三角形-被遮擋後變成外框造型*/
    position: absolute;
    content: ""; /*僅留存雙引號*/
    width: 0px;
    height: 0px; /*將此值提升，三角形會變成梯形*/
    left: 77px; /*與彈跳視窗左邊的距離，必須大到不會觸碰到滑鼠游標以避免無法呈現彈跳視窗(聯繫A)*/
    /*top: 0px; 垂直位置，將此值提升會讓三角形往下掉*/
margin: -44px 0px 0px 0px; /*將此margin的頭一個值變大，會使得三角形往下墜。註：#pup中padding的值(見上D)+border-top(見下E)+border-bottom(見下F)*/
/*●●●就是因為此，建議要重寫CSS，讓所生成的三角形並非藉由transparent隱藏法來達成，而是要確實呈現所有情況下仍是三角形●●●
這個困擾瑋倫很久20230725使用三角形法的缺點：當滑鼠由左滑到右側，會先通過左+上+右方隱藏的三角形，然後再跑到右方三角形的外部，重新觸發popup.html中的onmouseover，導致彈跳出的視窗又得再次向右飄移
瑋倫最終找到解法，那就是要將border-top給砍掉，只留下半邊的三角形
*/
    border-left: 30px solid transparent; /*左側三角形(左平、右尖)為透明，參考：willy左邊的邊框線被呈現為紅色border-top: 100px solid transparent搭配border-left呈現左側平底&右側為尖之三角形、搭配border-right呈現右側平底&左側為尖之三角形*/
    border-right: 30px solid transparent; /*右側三角形(左尖、右平)為透明*/
    /*border-top: 30px solid transparent;*/ /*上側三角形(上平、下尖)為透明，可將本處顏色改成#f00呈現(見上E)*/ /*●●●重點是要砍掉此列(不能夠有top)，只能有bottom，使得所呈現的三角形無(不存在)透明的top處，以避免滑鼠滑過去的時候會先跑到三角形上，又重新觸發彈跳視窗*/
    border-bottom: 30px solid #333333; /*下側三角形(上尖、下平)有顏色，(見上F)*/
/*border-left、border-right、border-top、border-bottom*/
/*(見下B)willy border-top: 30px solid transparent=上邊的邊框線存在，但設定為透明，此時下邊框線(border-bottom)也是存在並為透明、border-bottom=無上邊的邊框線(border-top)，僅呈現下邊框線(border-bottom)*/
/*border-right: 30px solid #0f0;*/ /*willy右邊的邊框線被呈現為綠色(可練習將此部分開啟)*/
}


.pup:after{ /*頂層的三角形-拿來遮擋底層三角形*/
    position: absolute;
    content: "";
    width: 0px;
    height: 0px;
    left: 85px; /*頂層三角形的水平位置=底層三角形的水平位置+線寬=77(聯繫A)+8(聯繫G)*/
    /*top: 50px;*/ /*註銷此處，改成margin*/
margin: -142px 0px 0px 0px; 
/*  border-radius: 70px 0 0 0;*/ /*將此打開可讓上邊變弧形*/
    border-left: 22px solid transparent; /*willy左邊的邊框線被呈現為紅色border-top: 100px solid transparent搭配border-left呈現左側平底&右側為尖之三角形、搭配border-right呈現右側平底&左側為尖之三角形*/
    border-right: 22px solid transparent; 
    /*border-top: 22px solid transparent;*/ /*可將本處顏色改成#f00呈現(見上E)*/ /*●●●重點是要砍掉此列(不能夠有top)，只能有bottom，使得所呈現的三角形無(不存在)透明的top處，以避免滑鼠滑過去的時候會先跑到三角形上，又重新觸發彈跳視窗*/
    border-bottom: 22px solid #00F; /*(見上F)*/
/*    border-image: url(./bg-pup.png) !important;*/
}


#jump_out_pup_willy:hover {
    text-decoration: underline;
}

/*滑鼠游標挪動到聯結上方，自動出現彈跳視窗.用我   666666666666666666666666666666666666666666666666666666666666*/




/*滑鼠游標挪動到聯結上方，自動出現彈跳視窗.用我   99999999999999999999999999999999999999999999999999999999999*/
#pup_willyup {
    position: absolute;
    z-index: 200; /* aaaalways on top*/
    margin-left: -91px; /*瑋倫：本列為決定彈跳視窗之水平位置的參數。負越多，總整體往左偏移越多。本列數值越大，將帶領pup_willyup與.pup_willyup:before同時往右移動*/
    margin-top: -210px; /*此margin-top數值變小(負越多)，將帶領方框(#pup_willyup)以及三角形(.pup_willyup:before)之位置同時向上提升。此處填-210為恰到好處無縫接軌*/
    width: 250px;
    /*background-color: #777;*/
    text-align: left;
    font-size: 11pt !important;
    line-height: 150%;
    padding: 14px !important;
    color: #eeeeee !important;
    font-family: tahoma, verdana, arial, sans-serif !important;
    font-weight: normal !important;
    border: 8px solid #333333 !important; /*(聯繫G)彈跳視窗外框的邊框粗細，以及邊框的樣式，例如：groove=呈現兩色澤的框限、dashed=虛線、solid=實線*/
    /*  https://www.w3schools.com/css/css_border.asp  */
    background-color: #00F; /*倘若啟動此行，則彈跳視窗之背景則會啟動本行的顏色，而不會採用background-image的bg-pup.png，應該說是本列的單色背景+透明色的bg-pup.png同時啟動，導致本列若指定背景為藍色，再加bg-pup.png，最終會成為深藍色的背景*/
    /*background-image: url(./bg-pup.png) !important;*/ /*彈跳視窗背景所使用的圖片，bg-pup.png為一個半透明背景的圖片，將本處開啟時若background-color也有開啟，bg-pup.png會影響background-color的色澤*/
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 22px;
}



.pup_willyup:before{ /*底層的三角形-被遮擋後變成外框造型*/
    position: absolute;
    content: ""; /*僅留存雙引號*/
    width: 0px;
    height: 0px; /*將此值提升，三角形會變成梯形*/
    left: 77px; /*與彈跳視窗左邊的距離，必須大到不會觸碰到滑鼠游標以避免無法呈現彈跳視窗(聯繫A)*/
    /*top: 0px; 垂直位置，將此值提升會讓三角形往下掉*/
margin: 162px 0px 0px 0px; /*將此margin的頭一個值變大，會使得三角形往下墜*/

    border-left: 30px solid transparent; /*左側三角形(左平、右尖)為透明，參考：willy左邊的邊框線被呈現為紅色border-top: 100px solid transparent搭配border-left呈現左側平底&右側為尖之三角形、搭配border-right呈現右側平底&左側為尖之三角形*/
    border-right: 30px solid transparent; /*右側三角形(左尖、右平)為透明*/
    border-top: 30px solid #333333; /*上側三角形(上平、下尖)有顏色，可將本處顏色改成#f00呈現(見上E)*/
    /*border-bottom: 30px solid transparent;*/ /*下側三角形(上尖、下平)為透明，(見上F)*/    /*●●●重點是要砍掉此列(不能夠有bottom)，只能有top，使得所呈現的三角形無(不存在)透明的bottom處，以避免滑鼠滑過去的時候會先跑到三角形上，又重新觸發彈跳視窗*/

/*border-left、border-right、border-top、border-bottom*/
/*(見下B)willy border-top: 30px solid transparent=上邊的邊框線存在，但設定為透明，此時下邊框線(border-bottom)也是存在並為透明、border-bottom=無上邊的邊框線(border-top)，僅呈現下邊框線(border-bottom)*/
/*border-right: 30px solid #0f0;*/ /*willy右邊的邊框線被呈現為綠色(可練習將此部分開啟)*/
}







.pup_willyup:after{ /*頂層的三角形-拿來遮擋底層三角形*/
    position: absolute;
    content: "";
    width: 0px;
    height: 0px;
    left: 85px; /*頂層三角形的水平位置=底層三角形的水平位置+線寬=77(聯繫A)+8(聯繫G)*/
    /*top: 50px;*/ /*註銷此處，改成margin*/
margin: 49px 0px 0px 0px;  /*將此margin的頭一個值變大，會使得三角形往下墜*/
/*  border-radius: 70px 0 0 0;*/ /*將此打開可讓上邊變弧形*/
    border-left: 22px solid transparent; /*willy左邊的邊框線被呈現為紅色border-top: 100px solid transparent搭配border-left呈現左側平底&右側為尖之三角形、搭配border-right呈現右側平底&左側為尖之三角形*/
    border-right: 22px solid transparent; 
    border-top: 22px solid #00F; /*可將本處顏色改成#f00呈現(見上E)*/
    /*border-bottom: 22px solid transparent;*/ /*(見上F)*/    /*●●●重點是要砍掉此列(不能夠有bottom)，只能有top，使得所呈現的三角形無(不存在)透明的bottom處，以避免滑鼠滑過去的時候會先跑到三角形上，又重新觸發彈跳視窗*/
/*    border-image: url(./bg-pup.png) !important;*/
}



#jump_out_pup_willy_willyup:hover {
    text-decoration: underline;
}

/*滑鼠游標挪動到聯結上方，自動出現彈跳視窗.用我   666666666666666666666666666666666666666666666666666666666666*/