#header{
    background-color:transparent;
}
.section{
    background-color:#f7f7f9;
}

.probanner{
    position:relative;
}
.probanner .tobottom{
    border:2px solid var(--theme-purple);
    width:4.5em;
    height:4.5em;
    position:absolute;
    right:4%;
    top:25%;
    z-index:50;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
}
.probanner .tobottom svg{
    width:50%;
    animation:moveArrows 3s ease-in-out infinite;
}
.probanner .tobottom svg *{
    stroke:var(--theme-purple);
}


@keyframes moveArrows {
    0% {
        transform: translateY(0%);
    }
    50% {
        transform: translateY(30%);
    }
    100% {
        transform: translateY(0%);
    }

}


.sec1{
    padding:3.125% 0;
}
.sec1 .tab-control{
    display:flex;
    align-items:stretch;
    justify-content:center;
    flex-direction:row;
    overflow-x:auto;
    text-align:center;
    color:#333;
}
.sec1 .tab-control a{
    fill:var(--theme-purple);
    background-color:#fff;
    width:13.375em;
    margin-right:1.5em;
    padding-bottom:1.25em;
}
.sec1 .tab-control a:last-child{
    margin-right:0;
}
.sec1 .tab-control a.active{
    fill:#fff;
}
.sec1 .tab-control a::before{
    content:"";
    display:block;
    background-color: #eeecf6;
    width:100%;
    height:5.3125em;
}
.sec1 .tab-control a.active::before{
    background-color:var(--theme-purple);
}
.sec1 .tab-control .icon-box{
    width:9.375em;
    height:9.375em;
    border:1px solid #eeecf6;
    border-radius:50%;
    margin:-4.6875em auto 1.25em;
    background-color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
}
.sec1 .tab-control a.active .icon-box{
    background-color:var(--theme-purple);
}
.sec1 .tab-control svg{
    height:66%;
}
.sec1 .tab-control p{
    font-size:1.25em;
    line-height:1.4;
}




.sec2{
    padding:3.125% 0 3.4%;
    text-align:center;
}
.sec2 .tab-list{
    display:none;
    align-items:stretch;
    justify-content:center;
    flex-direction:row;
    overflow-x:auto;
    position:relative;
    max-width:100%;
    background-repeat:no-repeat;
    background-image:url(../images/product_list_bgline.png);
    background-size:100% 1px;
    background-position:center bottom;
}
.sec2 .tab-list.active{
    display:inline-flex;
}
.sec2 .tab-list a{
    font-size:1.5em;
    color:#333;
    line-height:1.67;
    padding-bottom: 1.75em;
    display:block;
    z-index:1;
    min-width:3.33em;
    margin-right:4.2em;
    white-space:pre-wrap;
    border-bottom:3px solid transparent;
}
.sec2 .tab-list a:last-child{
    margin-right:0;
}
.sec2 .tab-list a.active{
    color:var(--theme-purple);
    border-color:var(--theme-purple);
}


.sec3{
    padding:3.4% 0 10.4%;
}
.sec3 .inner,.sec3 .cata-box{
    display:none;
}
.sec3 .inner.active,.sec3 .cata-box.active{
    display:block;
}
.sec3 .list{
    display:flex;   
    align-items:stretch;
    justify-content:center;
    flex-direction:row;
    flex-wrap:wrap;
}
.sec3 .list.juststart{
    justify-content:flex-start;
}
.sec3 .list li{
    margin-bottom:4.7%;
    width:23.53%;
    margin-right:1.96%;
    position:relative;
    background-color:#fff;
    box-shadow: 0px 0.3125em 1em rgba(86, 78, 122, 0.13);
}
.sec3 .list li:last-child{
    margin-right:0;
}
.sec3 .list .text-box{
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    padding:2.5em 2.25em;
    color:var(--theme-purple);
}
.sec3 .list .text-box.haschildren{
    padding:2.5em 2.25em;
}
.sec3 .list .text-box h5{
    font-size:1.375em;
    font-weight:normal;
    line-height:1.45;
    color:inherit;
    display:block;
    height:4.35em;
    opacity:0.8;
}
.sec3 .list .text-box.haschildren h5{
    height:auto;
}
.sec3 .list .text-box h5 a{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    flex-direction:row;
}
.sec3 .list .text-box h5 a::after{
    font-family: 'FontAwesome400';
    content:"\f138";
    margin-left:0.5em;
    flex-shrink:0;
}
.sec3 .list .p-box{
    font-size:0.9375em;
    line-height:1.4;
    min-height:6.8em;
    margin-top:2em;
}
.sec3 .list .p-box p{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    flex-direction:row;
    margin-bottom:0.4em;
    padding-left:0.5em;
    letter-spacing:-1px;
}
.sec3 .list .p-box p:last-child{
    margin-bottom:0;
}
.sec3 .list .p-box p a::before{
    content:"·";
    display:inline-block;
    width:0.5em;
    margin-left:-0.5em;
}
.sec3 .list .p-box p::after{
    font-family: 'FontAwesome400';
    content:"\f054";
    display:none;
}

@media only screen and (min-width:1025px){
    .sec1 .tab-control a:hover{
        fill:#fff;
    }
    .sec1 .tab-control a:hover::before{
        background-color:var(--theme-purple);
    }
    .sec1 .tab-control a:hover .icon-box{
        background-color:var(--theme-purple);
    }

    .sec2 .tab-list a:hover{
        color:var(--theme-purple);
        border-color:var(--theme-purple);
    }
    .sec3 .list .p-box p:hover::after{
        display:block;
    }

    .sec3 .list li:nth-child(4n){
        margin-right:0;
    }
    .sec3 .list li:hover .text-box{
        background-color:var(--theme-purple);
        color:#fff;
    }
    .sec3 .list li:hover .text-box h5{
        opacity:1;
    }
}
@media only screen and (max-width:1024px){
    .section{
        font-size:1.25em;
    }


    .sec1{
        padding:10% 0 7.5%;
    }
    .sec1 .tab-control{
        justify-content:flex-start;
        padding:0 5%;
    }
    .sec1 .tab-control a{
        flex-shrink:0;
    }


    .sec2{
        padding:7.5% 0 5%;
    }
    .sec2 .tab-list{
        justify-content:flex-start;
    }
    .sec2 .tab-list a{
        flex-shrink:0;
    }


    .sec3{
        padding:5% 0 15%;
    }
    .sec3 .list{
        display:block;
    }
    .sec3 .list li{
        margin-bottom:10%;
        width:100%;
        margin-right:0;
    }
    .sec3 .list .text-box h5{
        font-size:1.9375em;
    }
    .sec3 .list .p-box{
        font-size:1.375em;
    }
}