@charset "utf-8";

#hl-wrapper.gradient-btmBg:before {
    content: '';
    display: block;
    pointer-events: none;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: -1;
    background: linear-gradient(180deg, #FFFFFF 0%, #6A86FF 100%), linear-gradient(180deg, #6A86FF 8.82%, #45BEE8 259.56%);
    opacity: 0.1;
    background-position: top;
}
#hl-panel{
    margin-top:2.5rem;
    border: 2px solid rgba(125, 151, 205, 0.5); 
    border-radius: 20px; 
    padding:2.5rem; 
    background:#FFFFFF; 
}
@media screen and (min-width: 768px) {
    #hl-panel{
        display:flex;
        padding:4rem; 
        margin-top:3.5rem;
    }
    html[lang=en] #hl-panel{
        padding-left:2rem;
        padding-right:2rem;
    }
    #hl-panel > div{
        flex:0 0 50%;
        max-width: 50%;
        padding-left: 3rem;
        border-left:solid 2px rgba(125, 151, 205, 0.5);
        text-align:center;
    }
    #hl-panel > div:first-child{
        border-left:none;
        padding-left:0;
        padding-right:3rem;
    }
    #hl-panel ul{
        display:inline-block;
    }
}
#hl-panel ul{
    list-style: none;
    margin:0;
    padding:0;
}
#hl-panel ul li{
    font-size:2.1rem;
    text-align:left;
}
html[lang=en] #hl-panel ul li{
    font-size:1.7rem;
}
#hl-panel div:first-child ul li:first-child{
    margin-top:0;
}
@media screen and (min-width: 768px) {
    #hl-panel div:not(:first-child) ul li:first-child{
        margin-top:0;
    }
}
/* hl - flow */
#hl-wrapper .hl-flow{
    display:flex;
    flex-direction:row;
    list-style:none;
    margin:0;
    padding:0;
    justify-content: center;
}
.hl-desc{
    width: 100%;
    flex: 1 auto;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.hl-desc h3{
    margin-top: 1.5rem;
    margin-bottom: 0;
    font-size: 2.1rem;

    flex: 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.hl-desc > p > span{
    background: #6A86FF;
    color: #FFFFFF;
    display: inline-block;
    padding: 0.3rem 1.8rem;
    border-radius: 3rem;
    font-size: 1.7rem;
    margin-top: 0;
    margin-bottom: 0rem;
    font-weight: 700;
}
html[lang=en] .hl-desc > p > span{
    font-weight:400;
}
.hl-desc p{
    margin-top: 1.5rem;
}
.hl-flow li{
    position: relative;
    width: 50%;
}
.hl-flow li:not(:last-child) .hl-item:after {
    content: '';
    position: absolute;
    width: 3.6rem;
    height: 3.6rem;
    background: url('/assets/img/userguide/arrow-forward.png') no-repeat center;
    top:5.6rem;
    right:-1.8rem;
    background-size:contain;
}
.hl-item{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content: flex-end;
    height:100%;
}
@media screen and (min-width: 768px) {
    #hl-wrapper .hl-flow li{
        width:27%;
        margin-top:3.5rem;
    }
}
.hl-ls .circle{
    display: inline-block;
    width: 4.5rem;
    height: 4.5rem;
    background-color: #9baef3;
    border-radius: 50%;
    position: relative;
    border: solid 3px #b7c5fd;
    color:#FFFFFF;
    font-weight: 700;
    text-align: center;
    font-size: 3.2rem;
    margin-left: 0.5rem;
    margin-right:1rem;
    line-height: 3.4rem;
    flex: 0 0 auto;
    text-shadow: 0px 0px 2px rgba(51, 51, 51, 0.5);
}
.hl-ls .circle:before{
    content: '';
    display: block;
    width:100%;
    height: 50%;
    background-color: #7e98f9;
    position: absolute;
    top:0;
    left:0;
    border-radius: 10rem 10rem 0 0;
    transform: rotate(135deg);
    transform-origin: 50% 100%;
    z-index: 0;
    pointer-events:none;
}
.hl-ls .hl-headline{
    display:flex;
    flex-direction:row;
    align-items:center;
    font-weight:700;
}
.hl-ls .hl-headline > span:first-child{
    color:#7e98f9;
}
.hl-ls .circle span{
    position: relative;
    z-index: 1;
}
.hl-ls > li:nth-child(2n) .hl-headline > span:first-child{
    color:#80c1e9;
}
.hl-ls > li:nth-child(2n) .circle{
    background-color:#a2d6f0;
    border-color:#cdeafc;
}
.hl-ls > li:nth-child(2n) .circle:before{
    background-color: #80c1e9;
}