@import url('page-landing.css'); /* landing page basic*/

.profilecard .landing-adbox .spotlight {   
    background-position: center 45px;
}
.profilecard .landing-adbox .spotlight::before {
    width: 10%;   
    bottom: -5px;
    left: -10px;
}
.profilecard .landing-adbox .spotlight::after {
    width: 10%;   
    bottom: -5px;
    right: -10px;
}

.profilecard .banner  h1, .profilecard .banner p, .profilecard .landing-aditem h2 {
    text-align: left;
}

.profilecard .landing-adbox > h2, .landing.profilecard .landing-h2 {
    margin-bottom:24px;
}
.profilecard .landing-adbox > h3 {
    text-align: center;
}
.profilecard .landing-adbox .img {
    display: flex;
    align-items: center;
    justify-content: center;
 }

 .profilecard .slick-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 16px;
}

.profilecard .slick-dots li {
    width: 10px;
    height: 10px;
    margin: 0 4px;
    box-shadow: none;
    background: #E8E8E8;
}
.profilecard .slick-dots li.slick-active, .profilecard .slick-dots li:after {  
    width: 10px;
    height: 10px;
    background-color:#6D01BE;    
}

/* section  banner ------------------------------*/

.banner {
    overflow: hidden;
}
.banner .container {
    padding: 164px 0;
}
.banner .container::after {
    content:"";
    width: 780px;
    height: 100%;
    background: url(../images/landing/profilecard-ad01.png) center center no-repeat; 
    position: absolute;
    top: 0;
    right: -200px;
}
.banner .slgan {
    max-width: 540px;
}
.banner .slgan p {
    padding-top: 24px;
}

.lightstart {
    position: relative;
    z-index: 1;
    font-weight: auto;
}
.lightstart::after {
    content:"";
    width: 60px;
    height: 60px;   
    background: url(../images/landing/profilecard-star.svg) center center no-repeat;   
    background-size: contain;
    position: absolute;
    top: 18px;
    left: 5px;
    z-index: -1;
}

/* section  feature -----------------------------*/

.feature .container {
    padding: 40px 0;
}
.feature .iconmode .landing-aditem {
    padding-top: 0px;
} 

/* section  featuread -----------------------------*/

.featuread .landing-aditembox:first-child {
    width: 40%;
    max-width: 500px;
}
.featuread .lightstart::after{
    width: 36px;
    height: 36px;
    top: -15px;
    left: -55px;
}
.featuread .featuread-text {
    padding-left: 60px;
}

.enlang .featuread .lightstart::after {
    top: -75px;
    left: 55px;
}

/* section  senserole -----------------------------*/

.profilecard .senserole  .landing-aditem {   
    align-items: start;
    position: relative;
}
.profilecard .senserole .special-list {
    padding-bottom: 60px;
}
.profilecard .senserole .senserole-box {
    position: relative;
    width: 30%;
    height: 100%;
    padding-right: 60px;
}
.profilecard .senserole .senserole-box h2 {
    position: relative;
}
.profilecard .senserole .senserole-box .img {
    position: relative;   
    align-items: center;
    justify-content: start;
}
.profilecard .senserole .special-list ul li {   
    width: 49%;
    padding: 0 8px 60px;
}
.profilecard .senserole .special-list ul li:nth-child(2n-1) {
    padding-left: 0;
}
.profilecard .senserole .special-list ul li:nth-child(2n) {
    padding-right: 0;
}
.profilecard .senserole h5, .profilecard .senserole p {
    text-align: left;
}
.profilecard .senserole h5 {
    padding-bottom: 8px;
}

/* section  senserole three picture -----------------------------*/

.profilecard .senserole .landing-adbox .img {   
    justify-content: start;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
}
.senserole-piclist .landing-aditembox {
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    margin: 0 12px;
}
.senserole-piclist .landing-aditembox:first-child {
    margin-left: 0;
}
.senserole-piclist .landing-aditembox:last-child {
    margin-right: 0;
}
.senserole-piclist .landing-aditembox::after {
    content:"";
    width: 100%;
    height: 100%;
    background: linear-gradient(transparent 60%, #000 90%);
    opacity: 0.8;
    position: absolute;
    top: 0;
    left: 0;    
} 
.senserole-piclist .landing-aditembox .senserole-txt h4 {    
    color: #fff;
    position: absolute;
    text-align: center;
    width: 100%;
    bottom: 20px;
    z-index: 1;
}

/* section  cardstyle  -----------------------------*/

.cardstyle .landing-aditembox .style-box {
    padding: 60px 32px 0;
   text-align: center;
}
.cardstyle .landing-aditembox:first-child .style-box {
    padding-left: 0;
}
.cardstyle .landing-aditembox:last-child .style-box {
    padding-right: 0;
}
.cardstyle .text-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.cardstyle .text-box h5, .cardstyle .text-box p, 
.cardstyle .socialimg-box, .cardstyle .businessimg-box, 
.cardstyle .style-box p {
    padding-top: 16px;
}
.cardstyle .style-box span {
    display: flex;
    align-items: center;
    justify-content: center;    
    color: #fff;
    background: #6D01BE;
    width: max-content;
    padding: 8px 16px;
    border-radius: 20px;
}
.cardstyle .img-boxitem {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cardstyle .style-box p .button {
    padding: 8px 16px;
    width: max-content;
}

/* section  recommender-list -----------------------------*/

.recommender-list .landing-aditembox:first-child {
    width: 40%;
    max-width: 480px;
}

.profilecard .recommender-list h2 {
    margin-bottom: 40px;
}

.recommender-step-for {
    padding-left: 60px;
}
.recommender-box {
    position: relative;
    z-index: 1;
    /* padding-left: 100px; */
}
.recommender-stepitem {
    width: 480px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.recommender-box::after {
    content: "";
    width: 480px;
    height: 480px;
    background: #F9F1FF;
    border-radius: 50%;
    position: absolute;
    top: calc( 50% - 240px );
    left: calc( 50% - 240px );
    z-index: -1;
}

.recommender-step-for ul::after {
    content:"";
    width: 1px;
    height: 80%;
    background: url(../images/beginner/card-dashine.png) center center repeat; 
    position: absolute;
    top: 10%;
    left: 49px;
    z-index: -1;
}
.recommender-step-for li {
    background: #fff;
}

ul.text-step li {
    display: flex;
    align-items: center;
    justify-content: start;
    box-shadow: none;
    padding: 16px 24px;
    width: 95%;
    margin-bottom: 60px;
}

ul.text-step li span.tag {
    font-size: 24px;    
    background: #F9F1FF;
    font-weight: 700;   
    border-radius: 100%;
    margin-right: 16px;    
    height: max-content;
    padding: 5px 17px;    
    color: #6D01BE;
    height: max-content;
}
.text-step h5 {
    font-weight: 700;
    font-size: 32px;
    line-height: 140%;
    text-align: left;
}
.text-step p {
    font-weight: 400;
    font-size: 18px;
    line-height: 160%;
    text-align: left;
    padding-top: 8px;
}
ul.text-step li {
    padding-top: 60px;
}
ul.text-step {
    padding-top: 40px;
}

ul.text-step li {
    display: flex;
    align-items: center;
    justify-content: start;
    box-shadow: none;
    padding: 16px 24px;
    width: 100%;
    margin-bottom: 60px;
    border-radius: 10px;
}

ul.text-step.text-step1 li:first-child,
ul.text-step.text-step2 li:nth-child(2),
ul.text-step.text-step3 li:nth-child(3),
ul.text-step.text-step4 li:nth-child(4),
ul.text-step.text-step5 li:nth-child(5),
ul.text-step.text-step6 li:last-child {       
    box-shadow: 0px 16px 24px 0px #6061701F;
}

/* section  readygo -----------------------------*/

.readygo  {
    background: #F9F1FF;
}

.readygo .landing-aditembox:first-child {
    width: 40%;
}

/* section  asker -----------------------------*/

.profilecard .asker .landing-adbox h2 {
    color: #fff;
    padding: 0;
    margin: 0;
}

.asker {    
    background: url(../images/landing/profilecard-ad06b.png) #6D01BE center center no-repeat;
    background-size: cover;
    overflow: hidden;
    min-height: 200px;
}
.asker h2 {   
    position: relative;
    z-index: 1;
}
.asker-box h2::after {
    content: "";
    width: 60%;
    height: 100px;
    background: #C270FF;
    position: absolute;
    filter: blur(40px);
    top: -10px;
    right: 20%;
    z-index: -1;
}


/* section  sharecard -----------------------------*/

.sharecard-text {
    margin-right: 60px;
}

.sharecard ul.icon {
    padding-top: 0;
}

.sharecard ul.icon li {
    padding-bottom: 32px;
}
.sharecard ul.icon li:last-child {
    padding-bottom: 0;
}
.sharecard .btn-box {
    padding-top: 32px;
}
.sharecard .img {
    background: #F9F1FF;
    border-radius: 40px;
    max-width: 580px;
}
.sharecard .img img {
    max-width: 420px;
}

/* section  question -----------------------------*/

.profilecard .question h2 {
    margin-bottom: 40px;
}
.question .container {
    border-top:1px solid #E1B9FF;
}
.profilecard  .question-item {
    margin: 30px auto;
}
.question .question-tab.btngroup {
    display: flex;
    align-items: center;
    justify-content: center;
}
.question-tab .button {
    margin-right: 16px;
}
.question-tab .button.active {
    background: #6D01BE;
    color: #fff;
}
.question .link-btn {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin-top: 40px;
}
.question .link-btn span {
    margin-right: 16px;
}

/* section  getcard -----------------------------*/

.getcard {
    background: #F9F1FF;
}
.profilecard .getcard .container {
    padding: 0;
}

.getcard .btn-box {
    padding-top: 40px;
}

.getcard .landing-picbox {
    width: 40%;
    max-width: 480px;
    position: relative;
}

.getcard .landing-picbox::before {
    content: "";
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #c270ff;
    filter: blur(20px);
    position: absolute;
    bottom: 10%;
    left: 45%;
    mix-blend-mode: plus-lighter;
    animation-name: lighthelper;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
@keyframes lighthelper {
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
    }
}



/* RWD 1441 ========================================================================== */

@media (max-width:1441px) {}

/* RWD 1366 ========================================================================== */

@media (max-width:1366px) {

    .banner-box .banner-p1, .banner-box .banner-p2, .banner-box .banner-p3 {       
        width: 50%;
    }   
    .compare-ad .compare-item .landing-aditembox.huntbyte ul {
        padding-right: 100px;
    }
    .compare-demand .compare-item .landing-aditembox {
       min-height: 355px;
    }
    .enlang .featuread .lightstart::after {
        top: -120px;
        left: 290px;
    }
   
}

@media (max-width:1240px) {

    .banner .container::after {
        background-size: 80%;
    }

    .profilecard .senserole .special-list ul li {
        max-width: unset;
        width: 100%;
        padding: 0 20px 24px;
    }
    .profilecard .senserole .special-list ul li:nth-child(2n),
    .profilecard .senserole .special-list ul li:nth-child(2n-1) {
        padding-left: 0;
        padding-right: 0;
    } 
    .profilecard .senserole .special-list ul li .special-textbox {
        width: 100%;
    }  
    .senserole-piclist .landing-aditembox .senserole-txt h4 {
        font-size: 16px;
    }  
    
    .recommender-box::after {
        left:calc( 50% - 218px )
    }
}

/* RWD 1199 ========================================================================== */

@media (max-width:1199px) {

    .profilecard .banner .landing-aditem > div:first-child {
        width: 50%;
    }
    .profilecard .senserole .senserole-box h2::after {       
        top: 60%;
        right: 30%;
    }
   
   
}

/* RWD 1099 ========================================================================== */

@media (max-width:1099px) {
    .banner .container::after {
        background-size: 70%;
    }
}

/* RWD 992 ========================================================================== */

@media (max-width:992px) {

    .banner .container::after {
        background-size: 40%;
        right: -320px;
    }
    .iconmode .landing-aditembox {       
        margin: 0 8px;
        padding: 0;
    }
    .profilecard .senserole .senserole-box {      
        padding-right: 16px;
    }
    .profilecard .senserole .special-list {
        padding-bottom: 16px;
    }  
    .recommender-stepitem {
        width: 345px;
    }   
    .recommender-box::after {       
        width: 345px;
        height: 345px;
        top: calc(50% - 172px);
        left:calc(50% - 164px);
    }   
   
    .profilecard .senserole .senserole-box h2::after {       
        right: 10%;
    }  

    .getcard .getcard-text {
        padding: 60px 0;
    }
    .getcard  .landing-aditem {       
        align-items: end;
    }

    .enlang .featuread .lightstart::after {
        top: -170px;
    }
    .enlang .question .link-btn span {
        margin-right: 0;
        margin-bottom: 16px;
    }
}

/* RWD 767 ========================================================================== */

@media (max-width: 767px) {    

    .landing section .container, .landing section .container-fluid {
        padding: 40px 15px;
    }

    .profilecard .landing-aditem h2 {
        text-align: center;
    }

    .profilecard .banner .landing-aditem > div:first-child,
    .featuread .landing-aditembox:first-child,
    .profilecard .senserole .senserole-box,
    .recommender-list .landing-aditembox:first-child,
    .readygo .landing-aditembox:first-child,
    .getcard .landing-picbox {
        width: 100%;
        max-width: unset;
    }   
    
    .profilecard .landing-adbox .spotlight {
        background-position: center 35px;
    }
    .profilecard .landing-adbox > h2, .profilecard .landing-adbox .landing-aditembox h2 {
        margin-bottom: 16px;
    }      
    
    .profilecard .banner .banner-box {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* section  -----------------------------*/

    .lightstart::after {
        width: 28px;
        height: 28px;
    }
    .profilecard .banner .container {
        padding: 40px 15px;
    }
    .banner .container::after {
        display: none;
    }
    .profilecard .banner .banner-box {
        padding-top: 25px;
    }
    .profilecard .banner .banner-box::before, .profilecard .banner .banner-box::after {       
        bottom: 5%;
        transform: scale(0.7);
    }   
    .profilecard .slgan .landing-h1 i {
        font-size: 40px;       
    }   

    .feature .iconmode .landing-aditembox.three-column .picbox {
        margin-bottom: 24px;
        margin-right: 0;
    }
    .feature .landing-aditem > div.three-column {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-bottom: 24px;
    }
    .feature .iconmode .landing-aditembox h5, .feature .iconmode .landing-aditembox p {
        text-align: center;
    }
    .featuread .featuread-text {
        padding-left: 0px;
        padding-top: 40px;
    }
    .featuread .lightstart::after {    
        width: 32px;
        height: 32px;    
        top: -20px;
        left: -33px;
    }
    
    .profilecard .senserole  .container {
        padding-bottom: 0;
    }   
   
    .profilecard .senserole .special-list {
        padding-bottom: 0;
        padding-top: 40px;
    }   
    .profilecard .senserole .landing-adbox .img {        
        position: initial;
        justify-content: start;
        max-width: 60%;
    }  
    .profilecard .senserole .senserole-piclist .landing-aditembox {
        margin: 0 0 24px;
    }    
    .senserole .senserole-piclist .senserole-box {   
        width: 100%;    
        padding-right: 0;
    }
    .senserole .senserole-piclist .landing-aditembox img {
        width: 100%;
    } 
    .senserole-piclist .landing-aditembox .senserole-txt h4 {
        font-size: 26px;
    }   

    .cardstyle .style-box, 
    .cardstyle .landing-aditembox:first-child .style-box, 
    .cardstyle .landing-aditembox:last-child .style-box {
        padding: 40px 0px 0;
    } 
    .cardstyle .style-box p .button {
        width: auto;
    }
    
    .recommender-list .landing-aditembox:first-child {
        width: 100%;
        max-width: auto;
    }
    .recommender-box::after {      
        left:calc(50% - 180px);
    }
    .recommender-stepitem {
        width: 98vw;
        max-width: 500px;
        min-width: 340px;
    }
    .recommender-step-for {
        padding-left: 0;
    }

    .profilecard .readygo .landing-aditem h2 {
        text-align: left;
    }
    .readygo .landing-adbox .img {
        padding-bottom: 24px;
    }    

    .asker {
        min-height: auto;
    }
    .profilecard  .asker .container {
        padding: 32px 15px;
    }

    .sharecard-text {
        margin-right: 0px;
        padding-bottom: 40px;
    }   
    .sharecard .btn-box {
        padding-top: 16px;
        text-align: center;
    }

    .question .link-btn {
        flex-direction: column;
    }
    .question .link-btn span {
        margin-right: 0;
        margin-bottom: 16px;
    }
   
    .getcard .getcard-text {
        padding: 40px 15px 30px;
    }
    .getcard .getcard-text h2 {
        text-align: left;
    }

    .enlang .featuread .lightstart::after {
        top: -65px;
        left: 145px;
    }
}

/* RWD 640 ========================================================================== */

@media (max-width: 640px) {}

/* RWD 575 ========================================================================== */

@media (max-width: 575px) {

    .profilecard .senserole .senserole-box h2::after {
        right: 0;
    }
    .enlang .featuread .lightstart::after {       
        left: 0;
    }
}
/* RWD 480 ========================================================================== */

@media (max-width: 480px) {
   
    .recommender-box::after {      
        left:calc(50% - 164px);
    }
}

/* RWD 440 ========================================================================== */
@media (max-width: 440px) {

}

/* RWD 400 ========================================================================== */
@media (max-width: 400px) {

    .profilecard .banner p > .button {
            padding: 6px 16px;
            width: 100%;
    }   
    .enlang .featuread .lightstart::after {
        top: -125px;
    }
   
 
}