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

.landing.recruiter section {
    overflow: hidden;
}

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

.recruiter .banner  h1, .recruiter .banner p, .recruiter .banner .switch-box h4, .recruiter .banner .switch-box p,
.recruiter .compare ul, .recruiter .compare h4 {
    text-align: left;
}


.recruiter .landing-adbox > h2 {
    margin-bottom:16px;
}
.recruiter .landing-adbox > h3, .way h3 {
    text-align: center;
}
.recruiter .banner-box,
.recruiter .landing-adbox .img {
    display: flex;
    align-items: center;
    justify-content: center;
 }

.tag-group {
    display: flex;
    flex-wrap: wrap;
}  
 .tag-group span {
    color: #6D01BE;
    padding: 4px 12px;
    background: #F9F1FF;
    margin-right: 8px;
    border-radius: 4px;
    margin-bottom: 8px;
}


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

.recruiter .banner {
    background: linear-gradient(180deg, rgba(240, 219, 255, 0.6) 0%, rgba(240, 219, 255, 0) 100%);
    overflow: hidden;
}
.recruiter .banner .container {
    padding: 80px 0;
}
.recruiter .banner .slgan p {
    padding-top: 24px;
}
.recruiter .banner .banner-box {
    position: relative;
}
.recruiter .banner .switch-box-content .btn-box {
    padding: 0;
}

.switch-box {
    padding-top: 60px;
}
.switch-box-content {
    padding-top: 24px;
}

 /* 預設狀態：透明且不佔空間 */
.content-text {
    opacity: 0;
    visibility: hidden;
    height: 0;
    overflow: hidden;
    transform: translateY(5px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}

/* 啟動狀態：淡入顯示 */
.content-text.active {
    opacity: 1;
    visibility: visible;
    height: auto;
    transform: translateY(0);
    margin-top: 20px; /* 視需求調整間距 */
}

.content-text h4 {
    display: flex;
    align-items: center;
}
.content-text .iconpic {
    width: 40px;
    min-width: 40px;
    height: 40px;
    background: url(../images/landing/aboutus-icon03.svg) center center no-repeat;
    background-size: contain;
    display: inline-block;
    margin-right: 8px;    
}
.content-text[data-btn="recommender"] .iconpic {    
    background: url(../images/landing/talents-icon09.svg) center center no-repeat;
    background-size: contain;
}
.content-text > p {
    padding-top: 8px;
    text-align: left;
}
.content-text ul.icon {
    padding: 24px 0;
}

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

.feature .summary {
    display: flex;
    align-items: center;
    justify-content: center;
   
}
.feature .summary p {
   margin: 0 8px;
}
.feature .summary p .button {    
    font-size: 18px;
    font-weight: 400;
    line-height: 160%;
    letter-spacing: 0%;
    padding: 6px 16px;
    min-width: max-content;
}

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

.question .link-btn {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    padding-top: 40px;
}
.question p.link-btn  a.button {
    color: #1a1a1a;
    margin-left: 16px;
}
.question p.link-btn  a.button:hover {
    color: #fff;
}

/* section  way -----------------------------*/
.list-box {
    position: relative;
    padding: 60px 0;
}
.list-box .img {
    position: absolute;
    bottom: 0;
    left: -30px;
    z-index: 1;
}
.list-box .list-itembox {
    display: flex;
    margin-left: 120px;
}
.list-box .list-itembox ul {    
    flex-grow: 1;
}


/* section  way -----------------------------*/

.way.pay .switch-box {   
    display: flex;
    flex-direction: column;
    align-items: center;
}
.way.pay .switch-box-content {
    width: 100%;
    padding-top: 30px;
}

.way.pay .list-itembox ul {
    display: flex;
    flex-wrap: wrap;
    position: relative;
}
.way.pay .list-itembox ul::after {
    content: "";
    width: 360px;
    height: 360px;
    background: url("../images/landing/recruiter-ad03.png");
    position: absolute;
    bottom: -40px;
    right: 48px;
    pointer-events: none;
}
.way.pay .list-itembox ul li {
    width: 75%;
    text-align: left;    
}
.way.pay .list-itembox ul li:nth-child(odd) {
    width: 25%;
}
.way.pay .list-itembox ul li .button {
    padding: 6px 16px;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
    color: #fff;
    margin-left: 24px;
}


.count-box {
    border-radius: 16px;
    padding: 24px;
    background: linear-gradient(130deg, #F0DBFF 0%, rgba(240, 219, 255, 0.3) 30%, rgba(240, 219, 255, 0) 78%);
    border: 1px solid #E1B9FF;
    margin-top: 30px;
}
.way.pay .count-box h5 {
    text-align: left;
}
.way.pay .count-box p.countnum {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: start;
    padding: 24px 0;
}

.count-box p > span {
    padding: 12px;
    border: 1px solid #8500EA;
    border-radius: 4px;
    background: #fff;
}
.count-box p > span.countnum-pay {   
    border: none;
    background: transparent;
    text-align: left;
}
.count-box p > i {
    padding: 8px;
}
.way.pay .content-text > p {
    padding-top: 16px;
}

.enlang .way.pay .list-itembox ul::after {
    right:0;
    z-index: 1;
    transform: scale(0.6);
    transform-origin: bottom right;
}
.enlang .way.work .list-itembox ul li {
    min-height: 91px;
}
.enlang .way.pay .list-itembox ul li .button {
    position: relative;
    z-index: 2;
}
.enlang .way.pay .count-box p.countnum span {
    flex-grow: 1;
}

/* section  compare -----------------------------*/

.compare .compare-item {
    padding-top: 40px;
}
.compare .compare-tit {
    display: block;
    width: max-content;
}
.compare.compare-item .landing-aditembox.huntbyte {   
    border: 1px solid #E1B9FF;
    position: relative;
}


.compare-case .compare-item .landing-aditembox {
    background: #fff;
    border: 1px solid #E1B9FF;
    position: relative;
    min-height: 520px;
}
.compare-case .compare-item .compare-tit {
    background: #6D01BE;
    color: #fff;
}
.compare-case .compare-item h4, .compare-case .compare-item p {
    padding-top: 24px;
}
.compare-case .compare-item p.point {
    padding-top: 8px;
}
.compare-case .compare-item .landing-aditembox:first-child {
    margin-right: 40px;
}

.compare-demand .compare-item p {
    padding-top: 8px;
}
.compare-demand  .compare-item .landing-aditembox ul {
    padding-bottom: 0;
}
.compare-demand .compare-item ul.disc li {
    padding: 13px;
}
.compare-demand .compare-item ul.disc li::before {
    top: 26px;
    left: 0;
}
.compare-demand  .compare-item ul li h3 {
   text-align: left;
   padding: 0;
   padding-left: 16px;
}
.compare-demand  .compare-item ul li h3 span {
    padding-left: 8px;
}
.compare-item .vs {
    color: #666;
}

.enlang .compare-case .compare-item .landing-aditembox {
    min-height: 676px;
}

/* section  process -----------------------------*/

.process ul.evolution-list {
    max-width: 100%;
    
}
.process  ul.evolution-list > li {    
    padding-bottom: 40px;
    align-items: start;
}
.process .list-itembox {
    padding-top: 24px;
}
.process .list-itembox ul  {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid #F0DBFF;
    border-radius: 16px;
}
.process .list-itembox ul li {
    width: 30%;
    padding: 12px;
    border-left: 0px;
    border-right:0px;
    border-top: 0px;
}
.process .list-itembox ul li:nth-child(3n) {
    flex-grow: 1;
}
.process .list-itembox ul li.cornerrb {       
    padding-bottom: 16px;
}
.process  .evolution-list li .evolution-text::before {
    height: 100%;
    top: -75px;  
}
.process  .evolution-list li:nth-child(2) .evolution-text::before {
    height: 100px;
    top: -100px;
}

.process  .evolution-list li:last-child .evolution-text::before {
    height: 320px;
    top: -320px;
}
/* ::after 與 ::before 同尺寸，由 JS 控制 clip-path */
.process .evolution-list li .evolution-text::after {
    height: 100%;
    top: -75px;
}
.process .evolution-list li:nth-child(2) .evolution-text::after {
    height: 100px;
    top: -100px;
}
.process .evolution-list li:last-child .evolution-text::after {
    height: 320px;
    top: -320px;
}

.enlang .process .evolution-list li:last-child .evolution-text::before {
    height: 360px;
    top: -360px;
}
.enlang .process .evolution-list li:last-child .evolution-text::after {
    height: 360px;
    top: -360px;
}
.enlang .process .evolution-list li h4 {
    text-align: left;
}

/* section  startact -----------------------------*/

.startact {
    background: url(../images/landing/employer-ad07bg.png) center bottom no-repeat #F9F1FF;
    background-size: contain;
}
.startact .landing-aditem h2 {
    text-align: left;
   
}
.startact .btn-group {
    padding-top: 60px;
}
.startact .landing-aditem > div:first-child {
    width: 75%;
}
.startact .landing-picbox {
    position: relative;
}
.startact .landing-picbox::before {
    content: "";
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #c270ff;
    filter: blur(20px);
    position: absolute;
    top: 45%;
    left: 25%;
    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) {
      
    .compare-case .compare-item .landing-aditembox {
        min-height: 550px;
    }

    .way.work .list-itembox ul li {
        padding: 16px;
    }
    .way.pay .list-itembox ul::after {        
        right: 0;
    }
   
}

@media (max-width:1240px) {

    .banner ul.icon li {
        align-items: start;
    }
    .banner ul.icon li:before {
        margin-right: 8px;
    }
    .way.work .list-itembox ul li {
        min-height: 91px;
    }
    .way.pay .list-itembox ul li .button {
        position: relative;
        z-index: 2;
    }
    .compare-case .compare-item .landing-aditembox {
        min-height: 650px;
    } 
    
    .enlang .way.pay .list-itembox ul li {       
        display: flex;
        flex-wrap: wrap;
    }
    .enlang .way.pay .list-itembox ul li .button{
        margin-left: 0; 
        margin-top: 8px;
    }   
    .enlang .way.pay .list-itembox ul::after {       
        transform: scale(0.4);
        bottom: -100px;
    }
    .enlang  .compare-case .landing-aditem {
        flex-direction: column;
    }
    .enlang  .compare-case .landing-aditem .landing-aditembox {
        width: 100%;
    }
    .enlang  .compare-case .compare-item .landing-aditembox:first-child {
        margin-right: 0;
        margin-bottom: 24px;
    } 

}

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

@media (max-width:1199px) {

    .recruiter .iconmode .landing-aditembox {
        margin: 0;
    }
   
   
   
}

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

@media (max-width:1099px) {

}

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

@media (max-width:992px) {

    .way.work .list-box .img {
        bottom: -65px;
        left: 0;
    }
    .way.pay .list-itembox ul::after {
        right: 0;
        transform: scale(0.6);
        transform-origin: right bottom;
    }
    .way.pay .list-itembox ul li {       
        display: flex;
        flex-wrap: wrap;
    }
    .way.pay .list-itembox ul li .button{
        margin-left: 0; 
        margin-top: 8px;
    }   
   
    .compare-item .landing-aditembox {
        padding: 24px;
    }
    .compare-case .compare-item .landing-aditembox {
        min-height: 778px;
    }
    .compare-case .compare-item .landing-aditembox:first-child {
        margin-right: 16px;
    }
    
    .process  .evolution-list li.overtext .list-itembox {
        width: 100%;
        overflow: auto;
    }
    .process .evolution-list li.overtext .list-itembox ul {
        min-width: 780px;
    } 

    .enlang .question p.link-btn a.button {
        margin-left: 0;
        margin-top: 16px;
        padding: 6px 16px;
    }
    .enlang .way.work .list-box .img {
        bottom: auto;
        left: -20px;
        top: -10px;
        transform: scale(0.6);
        transform-origin: top left;
    }
    .enlang .way.work .list-box .list-itembox {
        margin-left: 0;
        flex-direction: column;
    }
    .enlang .way.work .list-itembox ul li {
        min-height: auto;
    }
    .enlang .way.work .list-box .list-itembox ul:last-child {
        padding-top: 24px;
    }
    .enlang .way.work .list-itembox ul li.list-tit {
        justify-content: center;
    }
    .enlang .compare-demand .compare-item .landing-aditembox {       
        position: relative;
    }  
       
    /* .enlang .compare-demand .compare-item .vs {
        display: none;
    } 
    .enlang .compare-demand .compare-item .landing-aditembox:not(.huntbyte)::after {
        content: "VS";
        font-weight: 600;
        font-size: 26px;
        line-height: 135%;
        letter-spacing: 0%;
        position: absolute;
        top: calc(50% - 15px);
        right: -42px;
    }
    .enlang .compare-demand .compare-item .landing-aditembox.huntbyte::after {
        display: none;
    } */
    .enlang .process .evolution-list li:last-child .evolution-text::before {
        height: 420px;
        top: -420px;
    }
    .enlang .process .evolution-list li:last-child .evolution-text::after {
        height: 420px;
        top: -420px;
    }

}

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

@media (max-width: 767px) {    

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

    .recruiter .banner h1, .recruiter .banner p, .recruiter .landing-aditem h2, 
    .recruiter .compare ul {
        text-align: center;
    }

    .startact .landing-aditem > div:first-child {
        width: 100%;
    }
    
    .recruiter .landing-adbox .spotlight {
        background-position: center 35px;
    }
    .recruiter .landing-adbox > h2, .recruiter .landing-adbox .landing-aditembox h2 {
        margin-bottom: 16px;
    }      
    
    .recruiter .banner .banner-box {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .switch-box {
        padding-top: 40px;
    }

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

    .recruiter .banner .container {
        padding: 40px 15px;
    }
    .recruiter .banner .banner-box {
        padding-top: 40px;
    }
    .recruiter .banner .switch-box {        
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .recruiter .banner .switch-box-content {
        width: 435px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .recruiter .banner .switch-box-content .btn-box {
        text-align: center;
    }   

    .feature .summary h3 {
        text-align: left;
    }
    .question .link-btn {
        flex-direction: column;
    }
    .question p.link-btn a.button {
        margin-left: 0;
        margin-top: 16px;
        padding: 6px 16px;
    }

    .way.work .list-box {
        padding: 40px 0 0;
    }
    .way.work .list-box .list-itembox {
        margin-left: 0;
        flex-direction: column;
    }    
    .way.work .list-box .list-itembox ul:last-child {
        padding-top: 24px;
    }
    .way.work .list-itembox ul li {
        min-height: auto;
    }
    .way.work .list-itembox ul li.list-tit {       
        justify-content: center;
    }    
    .way.work .list-itembox ul li.cornerlt, .way.work .list-itembox ul li.cornerrt {
        border-radius: 16px 16px 0 0;
    }
    .way.work .list-itembox ul li.cornerlb, .way.work .list-itembox ul li.cornerrb {
        border-radius: 0 0 16px 16px;
    }
    .way.work .list-box .img {
        bottom: auto;
        left: -20px;
        top: -10px; 
        transform: scale(0.6);
        transform-origin: top left;        
    }
    .way.pay .list-itembox ul::after {
        display: none;
    }
    .way.pay .switch-box-content {        
        padding-top: 20px;
    }
    .way.pay .count-box p.countnum span {
        margin: 4px 0;
        flex-grow: 1;
    }

    .count-box {
        position: relative;
    }
    .count-box::after {
        content: "";
        width: 120px;
        height: 120px;
        background: url("../images/landing/recruiter-ad03.png") center center no-repeat;
        background-size: contain;
        position: absolute;
        top: -60px;
        right: 0;
    }

    
    .compare .landing-aditem {
        flex-direction: column;
    }
    .compare .landing-aditem .landing-aditembox {
        width: 100%;
    }
    .compare-case .compare-item .landing-aditembox:first-child {
        margin-right: 0;
        margin-bottom: 24px;
    }
    .compare-case .compare-item .landing-aditembox, .compare-demand .compare-item .landing-aditembox {
        min-height: auto;
    }    
    .recruiter .compare-case .compare-item .landing-aditembox::after {
        display: none;
    }
    .recruiter .compare-case .landing-adbox h2 {
        margin-bottom:16px;
    } 

    .recruiter .compare-demand .landing-adbox h2 {
        margin-bottom:16px;
    } 
    /* compare-demand: scroll snap peek carousel */
    .compare-demand .compare-item {
        flex-direction: row;
        overflow-x: scroll;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        /* padding: 0; */
        gap: 0;
    }
    .compare-demand .compare-item::-webkit-scrollbar { display: none; }
    .compare-demand .compare-item > .landing-aditembox {
        flex: 0 0 calc(100% - 80px);
        width: calc(100% - 80px);
        margin-right: 0;
        min-height: 450px;
    }
    .compare-demand .compare-item > .landing-aditembox:not(.huntbyte) {
        scroll-snap-align: start;
    }
    .compare-demand .compare-item > .landing-aditembox.huntbyte {
        scroll-snap-align: end;
    }    
    .compare-demand .compare-item > .vs {
        flex: 0 0 60px;
        min-width: 60px;
        width: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    /* enlang: 停用 992px 的 pseudo-element VS，還原真實 VS */
    /* .enlang .compare-demand .compare-item > .vs {
        display: flex;
    }
    .enlang .compare-demand .compare-item > .landing-aditembox::after {
        display: none;
    } */

    .process .landing-aditembox {
        margin-top: 40px;
    }     
    
    .startact {
        background-position: center bottom;
        background-size: initial;
    }
    .recruiter .startact .landing-picbox img {
        max-width: 70%;
    }  
    .recruiter .startact .landing-picbox, .startact .btn-group {
        padding-top: 24px;
    }    
    .recruiter .startact  .landing-aditem h2 {
        text-align: left;
    }

    .enlang .way.pay .count-box p.countnum span {
        width: 85%;
    }
    .enlang .way.pay .count-box p.countnum span:first-child {
        width: 100%;
    }

}

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

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

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

@media (max-width: 575px) {       

    .enlang .way.pay .list-itembox ul li {
        width: 65%;
    }
    .enlang  .way.pay .list-itembox ul li:nth-child(odd) {
        width: 35%;
    }
    .enlang .compare .compare-tit {
        width: auto;
    }    

    .compare-demand .compare-item > .landing-aditembox {      
        min-height: 476px;
    }    
    
    
}
/* RWD 480 ========================================================================== */

@media (max-width: 480px) {   
    
    .switch-box .switch-box-btn {
        width: 100%;
    }
    .switch-box .switch-box-btn span {
        flex-grow: 1;
    }
    .recruiter .banner .switch-box-content {
        width: auto;       
    }
    .way.pay .count-box p.countnum span {
        width: 85%;
    }
    .way.pay .count-box p.countnum span:first-child {
        width: 100%;
    }
    .process .evolution-list li .evolution-text::before {
        top: -95px;
    }
    .process .evolution-list li .evolution-text::after {
        top: -95px;
    }
    .process .evolution-list li:last-child .evolution-text::before {
        height: 360px;
        top: -360px;
    }
    .process .evolution-list li:last-child .evolution-text::after {
        height: 360px;
        top: -360px;
    }   
    .process .evolution-list li:nth-child(2) .evolution-text::before {
        height: 120px;
        top: -120px;
    }
    .process .evolution-list li:nth-child(2) .evolution-text::after {
        height: 120px;
        top: -120px;
    }
    .enlang .process .evolution-list li:last-child .evolution-text::before {
        height: 480px;
        top: -480px;
    }
    .enlang .process .evolution-list li:last-child .evolution-text::after {
        height: 480px;
        top: -480px;
    }  

}

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

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

    .recruiter .banner p > .button {
            padding: 6px 16px;
            width: 100%;
    }   
    .recruiter .startact .landing-picbox img {
        max-width: 100%;
    }  
    .compare-demand .compare-item > .landing-aditembox {
        flex: 0 0 calc(100% - 50px);
        width: calc(100% - 50px);       
    } 
    .compare-demand .compare-item > .vs {
        flex: 0 0 40px;
        min-width: 40px;
        width: 40px;       
        font-size: 22px;
    }  
   
    .enlang .process .evolution-list li:last-child .evolution-text::before {
        height: 520px;
        top: -520px;
    }
    .enlang .process .evolution-list li:last-child .evolution-text::after {
        height: 520px;
        top: -520px;
    }
    .enlang .compare .compare-tit {       
        min-height: 66px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    

}