.box {
    background-color: #fff;
    border-radius: 3px;
    overflow: hidden;
}

.tab-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    position: relative;
    border-radius: 30px;
    box-shadow: 0px 2px 4px 1px rgba(111, 111, 111, 0.1);


}

.tab-list::before {
    content: '';
    display: block;
    height: 2px;
    width: 33.333%;
    position: absolute;
    bottom: 0;
    background-color: #aaa;
    transition: .3s;
}

.tab-item {
    flex: 1;
    text-align: center;
    transition: .3s;
    opacity: 0.5;
}

.tab-toggle {
    display: none;
}

.tab-content {
    display: none;
}

.tab-toggle:nth-child(1):checked~.tab-list .tab-item:nth-child(1),
.tab-toggle:nth-child(2):checked~.tab-list .tab-item:nth-child(2),
.tab-toggle:nth-child(3):checked~.tab-list .tab-item:nth-child(3) {
    opacity: 1;
}

/* tab bar 底線位移控制 */
.tab-toggle:nth-child(2):checked~.tab-list::before {
    transform: translateX(100%);
}

.tab-toggle:nth-child(3):checked~.tab-list::before {
    transform: translateX(200%);
}

/* 內容顯示控制 */
.tab-toggle:nth-child(1):checked~.tab-container .tab-content:nth-child(1),
.tab-toggle:nth-child(2):checked~.tab-container .tab-content:nth-child(2),
.tab-toggle:nth-child(3):checked~.tab-container .tab-content:nth-child(3) {
    display: block;
}

.tab-trigger {
    display: block;
    padding: 10px 0;
}

.tab-container {
    padding: 15px 30px;
}