﻿#tb_STEP {margin:10px auto 0px auto}
.myUL {width:100%;padding:0;margin:10px auto}
.myUL li {position:relative;display:inline-block;box-sizing:border-box;width:144px;height:35px;cursor:default}

/* 圓形樣式 - 未完成 */
.myUL li .circle {z-index:100;position:absolute;top:0;left:0;right:0;margin:auto;height:26px;width:26px;line-height:26px;font-size:12px;color:#333;background:#edeff0;border-radius:50%;font-weight:bold}
/* 圓形樣式 - 已完成 */
.myUL li.visited .circle {z-index:100;height:26px;width:26px;line-height:26px;font-size:12px;color:#fff;background:#E85231;border-radius:50%;font-weight:bold}
.myUL li.visited:hover .circle {box-shadow: 0 0 0 3px rgba(232, 82, 49, 0.3);transition:.2s}
/* 圓形樣式 - 現階段 */
.myUL li.current .circle {z-index:100;height:26px;width:26px;line-height:26px;font-size:12px;color:#fff;background:#E85231;border-radius:50%;font-weight:bold;box-shadow: 0 0 0 6px rgba(232, 82, 49, 0.3);
/*animation-name: example;
animation-duration: 2s;
animation-iteration-count: infinite;*/
}
@keyframes example {
    0% {box-shadow: 0 0 0 0px rgba(232, 82, 49, 0.7)}
    100% {box-shadow: 0 0 0 8px rgba(232, 82, 49, 0)}
}     
/* 文字樣式 - 未完成 */
.myUL li .item {position:absolute;display:inline-block;width:64px;top:100%;left:50%;transform:translateX(-50%);color:#2c3f4c;font-size:15px;font-weight:bold;letter-spacing:1px}
/* 文字樣式 - 已完成 */
.myUL li.visited .item {position:absolute;display:inline-block;width:64px;top:100%;left:50%;transform:translateX(-50%);color:#E85231;font-size:15px;font-weight:bold;letter-spacing:1px}
/* 文字樣式 - 現階段 */
.myUL li.current .item {position:absolute;display:inline-block;width:64px;top:100%;left:50%;transform:translateX(-50%);color:#E85231;font-size:15px;font-weight:bold;letter-spacing:1px;border-bottom:2px solid #E85231}

/* 連接線 - 未完成 */
.myUL li::after {position:absolute;content:'';z-index:-100;top:11px;left:calc(50%);background:#edeff0;height:4px;width:calc(100%)}
/* 連接線 - 已完成 */
.myUL li.visited::after{position:absolute;content:'';z-index:-100;top:11px;left:calc(50%);background:#E85231;height:4px;width:calc(100%)}

/* 連接線 - 最後一個不顯示 */
.myUL li:last-child::after{display:none}

/* 開戶進度條分隔線 */
.STEP_SegmentLine{height:1px;border-top:1px solid #DADADA;margin:25px auto 0px auto;display:none;width:100%;max-width:720px}


/* ▁▁▁▁▁▁▂▄▆█ RWD Setting █▆▄▂▁▁▁▁▁▁ */
@media screen and (max-width: 431px) {
    /* 文字樣式 - 未完成 */
    .myUL li .item {visibility:hidden}
    /* 文字樣式 - 已完成 */
    .myUL li.visited .item {visibility:hidden}
    /* 文字樣式 - 現階段 */
    .myUL li.current .item {visibility:visible}
}