/*------------------------------------*\
            default.css
\*------------------------------------*/


/*
    * General.....................General use
    * Banner
    * hub-feature
    * download-area
    * how-to-use
*/


/*------------------------------------
            $General
------------------------------------*/
a.anchor {
    position: relative;
    display: block;
    visibility: hidden;
    top: -60px;
}

.bullet {
    border-left: 10px solid #2d89d6;
    margin-right: 10px;
}

.banner .rl-btn-border {
    color:#ffffff;
    border-color: #ffffff;
    max-width: 250px;
}

.scenario {
    display: flex;
    align-items: flex-end;
}

.scenario > div {
    padding: 15px;
}

.scenario ul {
    margin: 0px; padding-bottom: 0px;
}

.remark-text {
    color: #2d89d6;
    display: inline-block;
}

/*------------------------------------
            $Banner
------------------------------------*/
.banner {
    background-image: url(../../images/Main-Banner.jpg);
    background-repeat: no-repeat;
    background-position: right;
    background-size: cover;
    /* 633px */
    height: 31.3vw;
    position: relative;
}
.banner .info-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    height: 100%;
}

#workgroup + section img {
    width: 120px;
}

@media screen and (max-width: 1440px) {
    .banner .info-container {
        margin: 0 9.11458333vw;
    }
}
.banner .title-wrapper {
    max-width: 820px;
    /*40-0*/
    padding-top: calc(2.5vw + -8px);
    padding-left: 2.34375vw; /*45px*/
    text-align: center;
}
.banner .title {
    font-size: calc(3.125vw + 26px); /*86-36*/
    line-height: 1;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.6);
    margin-bottom: calc(0.625vw + 3px);
}
.banner .sub-title {
    display: inline-block;
    font-size: calc(0.75vw + 21.6px); /*36-24*/
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.6);
}
.banner .sub-title button {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    font-size: calc(0.6944444444444444vw + 10.666666666666666px); /*1920:24-768:16*/
}
.banner .sub-title button img {
    width: calc(0.4340277777777778vw + 16.666666666666668px); /*1920:25-768:20*/
}
.banner .sub-title button .divide-line {
    border-left: 1px solid #95c4eb;
    margin-right: 10px;
    margin-left: 12px;
    height: 24px;
}

@media screen and (max-width: 767px) {
    .banner {
        background-image: url(../../images/Main-Banner_mobile.jpg);
         /* 900px */
        height: 117.1875vw;
    }
    .banner .info-container {
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        height: 40%;
    }
    .banner .title-wrapper {
        max-width: 100%;
        padding: 0;
    }
    .banner .title {
        font-size: calc(11.160714285714286vw + 0.2857142857142857px); /*768:86-320:36*/
    }
    .banner .sub-title {
        font-size: calc(3.571428571428571vw + 8.571428571428571px); /*768:36-320:20*/
    }
    .banner .sub-title button {
        /*768:24-320:16*/
        font-size: calc(1.7857142857142856vw + 10.285714285714286px);
        min-width: 250px;
    }
    .banner .sub-title button img {
        /*768:25-320:20*/
        width: calc(1.1160714285714286vw + 16.428571428571427px);
    }
}





/*------------------------------------
            $hub-feature
------------------------------------*/
.hub-feature.text-justify p.rl-text-desc {
    text-align: justify;
    text-justify: inter-ideograph;
    -ms-text-justify: inter-ideograph; /*IE9*/
    -moz-text-align-last:justify; /*Firefox*/
    -webkit-text-align-last:justify; /*Chrome*/
}
.hub-feature p.rl-text-desc {
    font-size: calc(0.125vw + 15.6px);  
}
.hub-feature .icon {
    /*150px*/
    width: 7.8125vw;
}
.hub-feature .divide-line {
    border-bottom: 1px solid #969696;
    margin-top: calc(0.75vw + 15.6px); /*30px*/
}

.hub-feature .explore-penitential-solutions {
    border-right: 1px solid #969696;
    padding-right: 25px;
}
.hub-feature .get-apps-faster {
    padding-left: 25px;
}
@media screen and (max-width: 767px) {
    .hub-feature .icon {
        /*150px*/
        width: 19.53125vw;
        min-width: 80px;
    }
    .hub-feature .explore-penitential-solutions {
        border-right: none;
    }
}
@media screen and (max-width: 480px) {
    .hub-feature .item {
        width: 100%;
    }
}





/*------------------------------------
            $download-area
------------------------------------*/
.download-area {
    background-image: url(../../images/ReallusionHub_background.jpg);
    background-attachment: fixed;
    background-size: cover;
}
.download-area .btn-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
}
.download-area .btn-container a {
    text-decoration: none;
}
.download-area button {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin: 0 30px;
    width: 340px;
}
.download-area button .product-cc {
    background-image: url(../../images/CCicon-01.svg);
    width: 40px;
    height: 34px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.download-area button .product-ic {
    background-image: url(../../images/ICicon-01.svg);
    width: 40px;
    height: 34px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.download-area button:hover .icon-display,
.download-area button:focus .icon-display {
    fill: #2d88d6;
}
@media screen and (max-width: 1024px) {
    .download-area {
        background-image: url(../../images/ReallusionHub_background_mobile.jpg);
        background-attachment: scroll;
    }
}
@media screen and (max-width: 991px) {
    .download-area .btn-container button {
        min-width: 320px;
        width: auto;
    }
}
@media screen and (max-width: 767px) {
    .download-area .btn-container {
        display: block;
    }
    .download-area .btn-container .btn-wrapper {
        margin-bottom: 10px;
    }
    .download-area .btn-container .btn-wrapper:last-child {
        margin-bottom: 0;
    }
    .download-area .btn-container button {
        margin: 0 auto;
        min-width: 420px;
    }
    .rl-text-md {
        font-size: calc(3.125vw + 16px);
    }
}
@media screen and (max-width: 480px) {
    .download-area .btn-container button {
        min-width: 280px;
        width: 100%;
    }
}

@media screen and (max-width: 480px) {
    .download-area .btn-container button {
        min-width: 280px;
        width: 100%;
    }

    .scenario {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media screen and (max-width: 380px) {
    .download-area .btn-container button {
        min-width: 280px;
        width: 100%;
    }
    .rl-text-md {
        font-size: calc(3.125vw + 13px);
    }
    .rl-text-xs {
        font-size: calc( 16.8px + 0.375vw);
    }
}





/*------------------------------------
            $how-to-use
------------------------------------*/
.how-to-use .hub-ui {
    /* 712px */
    /* width: 37.08333333vw; */
}
.how-to-use .message {
    position: absolute;
}
.how-to-use .message-mobile{
    text-align: center;
}
    .how-to-use .message .title,    
    .how-to-use .message-mobile .title {
        color: #2d88d6;
        font-weight: 500;
    }
    .how-to-use .message .title {
        /*24px*/
        font-size: 1.25vw;
        margin-bottom: 0.78125vw; /*15px*/
    }
    .how-to-use .message-mobile .title { 
        /*768:24-320:18*/ 
        font-size: calc(1.3392857142857142vw + 13.714285714285714px); 
        margin-bottom: 15px;
    }
    .how-to-use .message .desc {
        font-size: 0.9375vw; /*18px*/
        margin-bottom: 0.78125vw; /*15px*/
    }
    .how-to-use .message-mobile .desc { 
        margin-bottom: 20px;
    }

.how-to-use .message.position-left {
    /* 315px */
    max-width: 22.82608%;
    left: 0;
}
.how-to-use .message.update { top: -0.9840098%; }
.how-to-use .message.view-product { top: 30.75%; }

.how-to-use .message.position-right {
    /* 370px */
    max-width: 26.811594%;
    /*1060px*/
    left: 76.811594%
}
.how-to-use .message.login { top: -2.706%; }
.how-to-use .message.refresh { top: 44.28044%; }
.how-to-use .message.product-webiste { top: 63.345633%; }
.how-to-use .message.manage-apps { top: 81.1808%; }

.how-to-use .divide-line {
    border-bottom: 1px solid #969696;
    margin: 40px 0;
}
.padding-left-20{
    padding-left:20px;
}
.multiple-button{
    display:inline-block;
}
.multiple-button a {
    display:inline-block;
    padding:10px 15px 0px 0px;
}
.margin-top-down-0 {
    margin-bottom: 0px;margin-top: 0px;
}