@charset "utf-8";
/*
*worklist
*/
.slick-cata {
    border-bottom: 1px solid #FF8A28;
    margin-bottom: 1rem;

}
.slick-cata li {
    font-size: 1.1rem;
    font-weight: bolder;
    height: 100%;
    color: #ffffff;
    cursor: pointer;
    padding: 0.5rem 1rem;
}
.slick-cata li.active{
    background-color: #FF8A28;;
}
.section-msg{
    border-radius: 20px;
    border:1px solid rgba(255,255,255,0.3);
    padding: 1.5rem;
    color: #ffffff;
    font-weight: bold;
}
.msgbtn{
    margin-top: -15px;
   display: flex;
   justify-content: end;
    margin-bottom: 2rem;
}
.worklistli-in{
    background-color: #ffffff;
    padding: 1.5rem;
}
.worklistli-in img{position: relative;z-index: 0;}
.box-tag{
    position: relative;
    z-index: 1;   
    margin-top: -40px; 
    margin-right: -24px;
    text-align: right;
   
}
.box-tag span{
    background-color: #EA5432;
    color: #ffffff;
    padding:0.2rem 1rem;
    font-size: 1.2rem;
    font-weight: bold;
    white-space: pre-wrap;
    height: 30px; }
.box-tag span:after{
    content: '';
    position: absolute;
    top:3px;
    right:-30px;
    height: 100%; 
    width: 30px;
    background-image: url(../img/page/bg-tag.svg);
    background-size: auto 100%;
    background-repeat:no-repeat ;
}
.worklist_cata span{
    color:#FF8A28;
    padding: 0.1rem;
    border:1px solid #FF8A28;
}
.worklist_name{ color:#FF8A28; gap: 1rem;}
.worklist__p{
    background-repeat:no-repeat ;
    background-position: center;
    background-size:100% auto ;
    transition: all 0.5s cubic-bezier(.19, 1, .22, 1);
}
.worklist li:hover .worklist__p{
    background-size:110% auto ;
}

.tooltip-container{
    position: relative;
    margin-top: -25px;
}
.tooltip-text {
    visibility: hidden;
    width: 150px;
    background-color: #333;
    color: #fff;
    text-align: center;
    padding:3px;
    border-radius: 5px;
    position: absolute;
    bottom: 125%; /* Position above the text */
    left: 10%;
    transform: translateX(-50%);
    z-index: 1;
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  .tooltip-text::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
  }
  
  .tooltip-container:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
  }
.wrapper-signmsg{
    padding: 1rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
    border: 1px solid rgba(var(--bs-primary-rgb),0.2);
    border-radius:5px;
    font-weight: bold;
}
.col-lottie{
    flex:0 0 auto;
    width: 40px;
}
.bodywrapper {
	width: 100%;
	height: auto;
	overflow: hidden;
	position: relative;
}
.bodywrapper_in{
    width: 100%;
    height: auto;
    position: relative;
    flex-direction: column;
}

.section-banner{
    flex:0 0 auto;
    width: 100%;
    height: auto;
    position: relative; 
    overflow: hidden; 
}
.section-main{
    flex:0 0 auto;
    width: 100%;
    height: auto;
    overflow: hidden; 
}
.section-main main{
    padding: 5%;
}
.pc-vi{
    display: none;
}
.mb-vi{
    display: block;
}
.mb-vi__run{
    position:relative;
    z-index: 0;
    width: 50%;
    left: 15%;
}
.mb-vi__ladder{
    position:absolute;  
    z-index: 1;
    width: 10%;
    left: 30%;
    top:10%;
}
.mb-vi__paper{
    position:relative;  
    z-index: 2;
    width: 100%;
    margin-top: -30%;
    margin-left: -29%;
}
.mb-vi__climb{
    position:absolute;  
    z-index: 3;
    width: 5%;
    left: 2%;
    top:15%;
}
.mb-vi__write{
    position:absolute;  
    z-index: 3;
    width: 40%;
    left: 30%;
    top:47%;
}
.mb-vi__hatman{
    position:absolute;  
    z-index: 3;
    width: 32%;
    left:85%;
    top:42%;
    transform: scaleX(-1);
}
.mb-vi__book{
    position:absolute;  
    z-index: 3;
    width: 15%;
    right: 15%;
    top:60%;
}
.mb-vi__call{
    position:absolute;  
    z-index: 3;
    width: 16%;
    left: 1%;
    top:42%;
}
@media screen and (min-width: 576px) {
    .mb-vi__hatman{
        width: 34%;
        left: 65%;
        top:6%;
    }
    .mb-vi__book{
        width: 10%;
        right: 10%;
        top:50%;
    }
}
@media screen and (min-width: 768px) {
    .mb-vi{
        display: none;
    }
    .pc-vi{
        display: block;
    }
    .bodywrapper {
        /*width: 100vw;
         height: 100vh;
        overflow: hidden; */
        width: 100%;
        overflow-x: hidden;
        position: relative;
    }
    .bodywrapper_in{
        width: 100%;
        height: 100%;
        position: relative;
        flex-direction: row;
    }
    
    .section-banner{
        flex:0 0 auto;
        width: 35%;
        height: 100%;
        position: fixed;  
    }
    .section-main{
        flex:0 0 auto;
        width: 100%;
        padding-right:var(--headerWidth) ;
        height: 100%;
        padding-left:35%;
        overflow-x:hidden;
        overflow-y: auto;
    }
    .section-main main{
        padding:0px 5% 0px 0px;
    }
}
/*
*section-banner
*/
.pc-vi{
    width: 130%;
    position: relative;
    z-index:0;
    left: -33%;
}
.vi-logo{
    width: 25%;
    position: absolute;
    left: 5%;
    top:3%;
    z-index:10;
}
@media screen and (min-width: 768px) {
    .vi-logo{
        width: 40%;
        left: 10%;
        top:3%;
    }
    .wrapper-content{
        padding-top: 13%;
        position: relative;
        z-index: 1;
    }
}
@media screen and (min-width: 850px) {
    .wrapper-content{
        padding-top: 14%;
    }
}
@media screen and (min-width: 950px) {
    .wrapper-content{
        padding-top: 10%;
    }
}