/* 업무 관리 페이지 */
#worksense .hero { position: relative; padding: 0;}
#worksense .hero .container .content { position: relative; min-height: 800px; height: 100svh; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; z-index: 10; padding-top: 175px; text-align: center; }
#worksense .hero .container .content h1 { color: #000; font-family: 'Pretendard'; font-size: 45px; font-style: normal; font-weight: 800; line-height: 140%; letter-spacing: -1.3px; position: relative; }
#worksense .hero .container .content h1 > span { display: block; }
#worksense .hero .container .content h1 .typing-dummy { visibility: hidden; }
#worksense .hero .container .content h1 #typing-wrap { position: absolute; left: 50%; top: 0; transform: translate(-50%, 0); width: 100%; }
#worksense .hero .container .content p { color: #333; font-family: 'Pretendard'; font-size: 25px; font-style: normal; font-weight: 500; line-height: 150%; letter-spacing: 0.25px; margin: 20px 0 0; text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.7); }
#worksense .hero .container .content .button { position: absolute; bottom: 60px; left: 50%; transform: translateX(-50%); }
#worksense .hero .container .content .button a { display: block; border-radius: 15px; background: #7F40FF; box-shadow: 2px 2px 25px 2px rgba(0, 0, 0, 0.10); color: #FFF; font-family: 'Pretendard'; font-size: 17px; font-style: normal; font-weight: 500; line-height: normal; letter-spacing: -0.34px; padding: 20px 60px; }

#worksense .hero .video { position: absolute; left: 0; top: 0; width: 100%; height: 100%; inset: 0; z-index: 1; display:none; }
#worksense .hero .video video{ width: 100%; height: 100%; object-fit: cover; }

#worksense .hero .slide { position: absolute; left: 0; right: 0; width: 100%; padding: 0; z-index: 5; top: 340px; overflow: visible; }
#worksense .hero .slide .item { position: absolute; width: 750px; filter: blur(0.35px); z-index: 6; top: 0; opacity: 1; transition: top 1s ease, left 1s ease, width 1s ease, min-width 1s ease, filter 1s ease, transform 1s ease, opacity 0.6s ease, z-index 0s linear 0.7s; }
#worksense .hero .slide .item img { border-radius: 15px; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.08); }
#worksense .hero .slide .item img { -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 25%, rgba(0,0,0,1) 50%, rgba(0,0,0,0.4) 75%, rgba(0,0,0,0.2) 85%, rgba(0,0,0,0) 100%); mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 25%, rgba(0,0,0,1) 50%, rgba(0,0,0,0.4) 75%, rgba(0,0,0,0.2) 85%, rgba(0,0,0,0) 100%); }
#worksense .hero .slide .item.is-center { top: 90px; left: 50%; transform: translateX(-50%); width: 1000px; z-index: 7; filter: blur(0); }
#worksense .hero .slide .item.is-left { left: 50%; transform: translateX(calc(-50% - 425px)); }
#worksense .hero .slide .item.is-right { left: 50%; transform: translateX(calc(-50% + 425px)); }
#worksense .hero .slide .item.is-left-back { left: -100%; opacity: 0; z-index: 5; }
#worksense .hero .slide .item.is-right-back { left: 100%; opacity: 0; z-index: 5; }
#worksense .hero .slide .item.is-hidden { z-index: 5; opacity: 0;}
#worksense .hero .slide .item.is-hidden2 { z-index: 5; opacity: 0;}

@media screen and (max-width:1600px) {
    #worksense .hero .container .content { min-height: 750px; padding-top: 160px; }
    #worksense .hero .container .content h1 { font-size: 43px; }
    #worksense .hero .container .content p { font-size: 23.5px; margin: 18px 0 0; }
    #worksense .hero .container .content .button { bottom: 55px; }
    #worksense .hero .container .content .button a { border-radius: 14px; box-shadow: 2px 2px 23px 2px rgba(0, 0, 0, 0.10); font-size: 16.5px; padding: 19px 55px; }

    #worksense .hero .slide { top: 325px; }
    #worksense .hero .slide .item { width: 680px; }
    #worksense .hero .slide .item img { border-radius: 14px; box-shadow: 0 27px 54px rgba(0, 0, 0, 0.08); }
    #worksense .hero .slide .item.is-center { top: 80px; width: 900px; }
    #worksense .hero .slide .item.is-left { transform: translateX(calc(-50% - 390px)); }
    #worksense .hero .slide .item.is-right { transform: translateX(calc(-50% + 390px)); }
}
@media screen and (max-width:1280px) {
    #worksense .hero .container .content { min-height: 700px; padding-top: 145px; }
    #worksense .hero .container .content h1 { font-size: 41px; }
    #worksense .hero .container .content p { font-size: 22px; margin: 16px 0 0; }
    #worksense .hero .container .content .button { bottom: 50px; }
    #worksense .hero .container .content .button a { border-radius: 13px; box-shadow: 2px 2px 21px 2px rgba(0, 0, 0, 0.10); font-size: 16px; padding: 18px 50px; }

    #worksense .hero .slide { top: 310px; }
    #worksense .hero .slide .item { width: 610px; }
    #worksense .hero .slide .item img { border-radius: 13px; box-shadow: 0 24px 48px rgba(0, 0, 0, 0.08); }
    #worksense .hero .slide .item.is-center { top: 70px; width: 800px; }
    #worksense .hero .slide .item.is-left { transform: translateX(calc(-50% - 355px)); }
    #worksense .hero .slide .item.is-right { transform: translateX(calc(-50% + 355px)); }
}
@media screen and (max-width:1024px) {
    #worksense .hero .container .content { min-height: 650px; padding-top: 130px; }
    #worksense .hero .container .content h1 { font-size: 39px; }
    #worksense .hero .container .content p { font-size: 20.5px; margin: 14px 0 0; }
    #worksense .hero .container .content .button { bottom: 45px; }
    #worksense .hero .container .content .button a { border-radius: 12px; box-shadow: 2px 2px 19px 2px rgba(0, 0, 0, 0.10); font-size: 15.5px; padding: 17px 45px; }

    #worksense .hero .slide { top: 295px; }
    #worksense .hero .slide .item { width: 540px; }
    #worksense .hero .slide .item img { border-radius: 12px; box-shadow: 0 21px 42px rgba(0, 0, 0, 0.08); }
    #worksense .hero .slide .item.is-center { top: 60px; width: 700px; }
    #worksense .hero .slide .item.is-left { transform: translateX(calc(-50% - 320px)); }
    #worksense .hero .slide .item.is-right { transform: translateX(calc(-50% + 320px)); }
}
@media screen and (max-width:768px) {
    #worksense .hero .container .content { min-height: 600px; padding-top: 115px; }
    #worksense .hero .container .content h1 { font-size: 37px; }
    #worksense .hero .container .content p { font-size: 19px; margin: 12px 0 0; }
    #worksense .hero .container .content .button { bottom: 40px; }
    #worksense .hero .container .content .button a { border-radius: 11px; box-shadow: 2px 2px 17px 2px rgba(0, 0, 0, 0.10); font-size: 15px; padding: 16px 40px; }

    #worksense .hero .slide { top: 280px; }
    #worksense .hero .slide .item { width: 470px; }
    #worksense .hero .slide .item img { border-radius: 11px; box-shadow: 0 18px 36px rgba(0, 0, 0, 0.08); }
    #worksense .hero .slide .item.is-center { top: 50px; width: 600px; }
    #worksense .hero .slide .item.is-left { transform: translateX(calc(-50% - 285px)); }
    #worksense .hero .slide .item.is-right { transform: translateX(calc(-50% + 285px)); }
}
@media screen and (max-width:640px) {
    #worksense .hero .container .content { min-height: 550px; padding-top: 100px; }
    #worksense .hero .container .content h1 { font-size: 35px; }
    #worksense .hero .container .content p { font-size: 17.5px; margin: 10px 0 0; }
    #worksense .hero .container .content .button { bottom: 35px; }
    #worksense .hero .container .content .button a { border-radius: 10px; box-shadow: 2px 2px 15px 2px rgba(0, 0, 0, 0.10); font-size: 14.5px; padding: 15px 35px; }

    #worksense .hero .slide { top: 265px; }
    #worksense .hero .slide .item { width: 400px; }
    #worksense .hero .slide .item img { border-radius: 10px; box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08); }
    #worksense .hero .slide .item.is-center { top: 40px; width: 500px; }
    #worksense .hero .slide .item.is-left { transform: translateX(calc(-50% - 250px)); }
    #worksense .hero .slide .item.is-right { transform: translateX(calc(-50% + 250px)); }
}





#worksense .problem { background-image: url('../img/worksense/problem_bg.png');}
#worksense .problem .content { margin: 70px 0 0; position: relative; text-align: center;}
#worksense .problem .list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); text-align: center;}
#worksense .problem .list .item { position: relative;}
#worksense .problem .list .card { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 92%;}
/* #worksense .problem .list .card .messageCard { transform: translateY(10vw); opacity: 0; } */
#worksense .problem .list .cardText{ position: relative; background-image: linear-gradient(#FFF, #FFF), linear-gradient(180deg, rgba(127, 64, 255, 0.4), rgba(66, 123, 191, 0.4)); background-origin: border-box; background-clip: padding-box, border-box; filter: drop-shadow(0 0 30px rgba(0, 0, 0, 0.15)); padding: 20px 10px; display: inline-block; width: 100%; font-size: 21px; color: #565656; line-height: 150%; font-weight: 400; border-radius: 25px; border: 3px solid transparent; z-index: 2;}
#worksense .problem .list .cardText strong{ color: #000;}
#worksense .problem .list .cardText::before{ position: absolute; bottom: -40px; left: 50%; transform: translateX(-50%); z-index: 2; content: ''; background: url(../img/worksense/problem_icon1.png) no-repeat center; width: 50px; height: 70px;}
#worksense .problem .list .cardText::after{ position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 3; content: ''; width: 50px; height: 20px; background: #fff;}
#worksense .problem .list .figure{ margin-top: 200px;}
#worksense .problem .list .figure img{ height: 455px; width: auto; background-origin: border-box; background-clip: padding-box, border-box; filter: drop-shadow(0 0 70px rgba(252, 113, 151, 0.50));}

#worksense .problem .content .message { display: inline-block; position: relative; color: #000; text-align: center; font-family: 'Pretendard'; font-size: 35px; font-style: normal; font-weight: 600; line-height: normal; letter-spacing: 0.35px; margin: 60px 0 0; padding: 0 38px;}
#worksense .problem .content .message:after { content: ''; position: absolute; top: 26px; left: 0; right: 0; width: 100%; height: 30px; background: rgba(127, 64, 255, 0.20);}

@media screen and (max-width:1600px) {
    #worksense .problem .content{ margin: 54px 0 0;}

    #worksense .problem .list .card{ width: 90%;}
    #worksense .problem .list .cardText{ padding: 19px 9px; font-size: 19.5px;}
    #worksense .problem .list .cardText::before{ bottom: -40px; width: 50px; height: 70px;}
    #worksense .problem .list .cardText::after{ bottom: 0; width: 50px; height: 20px;}
    #worksense .problem .list .figure{ margin-top: 175px;}
    #worksense .problem .list .figure img{ height: 455px;}

    #worksense .problem .content .message { font-size: 31.25px; margin: 54px 0 0; padding: 0 34px;}
    #worksense .problem .content .message:after { top: 23px; height: 26.5px;}
}
@media screen and (max-width:1280px) {
    #worksense .problem .content{ margin: 48px 0 0;}

    #worksense .problem .list { gap: 18px;}
    #worksense .problem .list .card{ width: 100%;}
    #worksense .problem .list .cardText{ padding: 18px 8px; font-size: 18px;}
    #worksense .problem .list .cardText::before{ bottom: -40px; width: 50px; height: 70px;}
    #worksense .problem .list .cardText::after{ bottom: 0; width: 50px; height: 20px;}
    #worksense .problem .list .figure{ margin-top: 150px;}
    #worksense .problem .list .figure img{ height: 355px;}

    #worksense .problem .content .message { font-size: 27.5px; margin: 48px 0 0; padding: 0 30px;}
    #worksense .problem .content .message:after { top: 20px; height: 23px;}
}
@media screen and (max-width:1024px) {
    #worksense .problem .content{ margin: 42px 0 0;}

    #worksense .problem .list { gap: 16px;}
    #worksense .problem .list .card{ width: 100%;}
    #worksense .problem .list .cardText{ padding: 17px 7px; font-size: 16.5px;}
    #worksense .problem .list .cardText::before{ bottom: -20px; width: 40px; height: 30px; background-position: bottom center;}
    #worksense .problem .list .cardText::after{ bottom: 0; width: 50px; height: 10px;}
    #worksense .problem .list .figure{ margin-top: 150px;}
    #worksense .problem .list .figure img{ height: 295px;}

    #worksense .problem .content .message { font-size: 23.5px; margin: 42px 0 0; padding: 0 26px;}
    #worksense .problem .content .message:after { top: 17px; height: 19.5px;}
}
@media screen and (max-width:768px) {
    #worksense .problem .content{ margin: 42px 0 0;}

    #worksense .problem .list{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;}
    #worksense .problem .list .card{ width: 100%;}
    #worksense .problem .list .cardText{ padding: 16px 6px; font-size: 15px; word-break: keep-all; border-radius: 15px;}
    #worksense .problem .list .cardText::before{ bottom: -20px; width: 40px; height: 30px; background-position: bottom center;}
    #worksense .problem .list .cardText::after{ bottom: 0; width: 50px; height: 10px;}
    #worksense .problem .list .figure{ margin-top: 115px;}
    #worksense .problem .list .figure img{ height: 295px;}

    #worksense .problem .content .message { font-size: 20px; margin: 36px 0 0; padding: 0 22px;}
    #worksense .problem .content .message:after { top: 14px; height: 16px;}
}
@media screen and (max-width:640px) {
    #worksense .problem .content{ margin: 30px 0 0;}

    #worksense .problem .list{ gap: 12px;}
    #worksense .problem .list .card{ width: 100%;}
    #worksense .problem .list .cardText{ padding: 15px 5px; font-size: 13.5px; word-break: keep-all; border-radius: 15px;}
    #worksense .problem .list .cardText::before{ bottom: -20px; width: 40px; height: 30px; background-position: bottom center;}
    #worksense .problem .list .cardText::after{ bottom: 0; width: 50px; height: 10px;}
    #worksense .problem .list .figure{ margin-top: 125px;}
    #worksense .problem .list .figure img{ height: 245px;}

    #worksense .problem .content .message { font-size: 16.25px; margin: 30px 0 0; padding: 0 18px;}
    #worksense .problem .content .message:after { top: 11px; height: 12.5px;}
}





#worksense .info{ background-image: url('../img/worksense/info_bg.png');}
#worksense .info .content { position: relative; width: min(100%, 1600px); margin: 0 auto; padding: 70px 0 0; display: grid; grid-template-columns: 1fr 760px 1fr; align-items: center; gap: 20px;}

#worksense .info .attendance_feature_list { list-style: none; margin: 0; padding: 0;}
#worksense .info .feature_item { font-size: 25px; font-weight: 500; line-height: 150%; color: #000; word-break: keep-all; letter-spacing: 0.01em;}
#worksense .info .feature_item03{ margin-left: -40px;}
#worksense .info .feature_item05{ margin-left: -80px;}
#worksense .info .attendance_feature_listLeft { display: grid; gap: 140px; justify-items: end; text-align: right;}
#worksense .info .attendance_feature_listRight {display: grid; gap: 130px; justify-items: start; text-align: left;}
#worksense .info .attendance_feature_visual {position: relative; width: 760px; aspect-ratio: 1 / 1; margin: 0 auto;}
#worksense .info .attendance_feature_ring { position: absolute; border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%, -50%);}
#worksense .info .attendance_feature_ringOuter { width: 680px; height: 680px; border: 5px solid rgba(115, 152, 221, 0.45); box-shadow: 0 0 30px rgba(0, 0, 0, 0.15)}
#worksense .info .attendance_feature_ringInner { width: 500px; height: 500px; border: 5px solid rgba(161, 119, 246, 0.45); box-shadow: 0 0 30px rgba(0, 0, 0, 0.15)}
#worksense .info .attendance_feature_center { position: absolute; left: 50%; top: 50%; width: 280px; height: 280px; transform: translate(-50%, -50%); border-radius: 50%; background: linear-gradient(132deg, rgba(255, 255, 255, 1), rgba(241, 243, 247, 1)); box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.10) inset; filter: drop-shadow(4px 4px 20px rgba(0, 0, 0, 0.15)) drop-shadow(-4px -4px 20px rgba(255, 255, 255, 0.70)); display: grid; place-items: center;}
#worksense .info .attendance_feature_center img { width: 120px; display: block;}
#worksense .info .attendance_feature_icon { position: absolute; width: 104px; height: 104px; border-radius: 50%; background: rgba(255, 255, 255, 0.8); box-shadow: 0 0 30px rgba(0, 0, 0, 0.15); display: grid; place-items: center;}
#worksense .info .attendance_feature_icon img { width: 68px; display: block; filter: drop-shadow(0 0 30px rgba(161, 119, 246, 0.35));}

#worksense .info .attendance_feature_icon01 { top: 220px; left: 0; animation: floatY 4s ease-in-out infinite; animation-delay: 0s;}
#worksense .info .attendance_feature_icon01 img{ width: 57px;}
#worksense .info .attendance_feature_icon02 { top: 120px; right: 40px; animation: floatSoft 5s ease-in-out infinite; animation-delay: 1s;}
#worksense .info .attendance_feature_icon03 { top: 320px; right: 0; width: 110px; height: 110px; animation: floatSlow 6s ease-in-out infinite; animation-delay: 2s;}
#worksense .info .attendance_feature_icon03 img{ width: 61px;}
#worksense .info .attendance_feature_icon04 { bottom: 120px; right: 95px; width: 130px; height: 130px; animation: floatY 4.5s ease-in-out infinite; animation-delay: 0.5s;}
#worksense .info .attendance_feature_icon04 img{ width: 81px;}
#worksense .info .attendance_feature_icon05 { bottom: 200px; left: 0px; width: 130px; height: 130px; z-index: 10; animation: floatSoft 5.5s ease-in-out infinite; animation-delay: 1.5s;}
#worksense .info .attendance_feature_icon05 img{ width: 75px;}
#worksense .info .attendance_feature_icon06 { bottom: 180px; left: 110px; width: 115px; height: 115px; animation: floatSlow 6.5s ease-in-out infinite; animation-delay: 2.5s;}
#worksense .info .attendance_feature_icon07 { top: 100px; left: 280px; width: 75px; height: 75px; animation: floatY 7s ease-in-out infinite; animation-delay: 3s;}
#worksense .info .attendance_feature_icon07 img{ width: auto; height: 45px;}

#worksense .info .attendance_feature_dot {position: absolute; width: 35px; height: 35px; border-radius: 50%; background: rgba(255, 255, 255, 0.65); animation: floatSoft2 6s ease-in-out infinite; opacity: 0.7;}

#worksense .info .attendance_feature_dot01 { top: 69px; left: 210px; width: 25px; height: 25px;}
#worksense .info .attendance_feature_dot02 { top: 90px; right: 162px;}
#worksense .info .attendance_feature_dot03 { bottom: 130px; left: 450px;}

@keyframes floatY {
  0% { transform: translateY(0);}
  50% { transform: translateY(-12px);}
  100% { transform: translateY(0);}
}
@keyframes floatSoft {
  0% { transform: translate(0, 0);}
  50% { transform: translate(-8px, -10px);}
  100% { transform: translate(0, 0);}
}
@keyframes floatSoft2 {
  0% { transform: translate(0, 0);}
  50% { transform: translate(-15px, 2px);}
  100% { transform: translate(0, 0);}
}
@keyframes floatSlow {
  0% { transform: translateY(0);}
  50% { transform: translateY(-20px);}
  100% { transform: translateY(0);}
}

@media screen and (max-width:1600px) {
    #worksense .info .content { width: min(100%, 1600px); padding: 54px 0 0; grid-template-columns: 1fr 730px 1fr; gap: 18px;}

    #worksense .info .attendance_feature_list { list-style: none; margin: 0; padding: 0;}
    #worksense .info .feature_item { font-size: 22.75px;}
    #worksense .info .feature_item.feature_item03{ margin-left: -40px;}
    #worksense .info .feature_item.feature_item05{ margin-left: -80px;}
    #worksense .info .attendance_feature_listLeft { gap: 130px;}
    #worksense .info .attendance_feature_listRight { gap: 120px;}
    #worksense .info .attendance_feature_visual {position: relative; width: 730px; aspect-ratio: 1 / 1; margin: 0 auto;}
    #worksense .info .attendance_feature_ring { position: absolute; left: 50%; top: 50%;}
    #worksense .info .attendance_feature_ringOuter { width: 650px; height: 650px;}
    #worksense .info .attendance_feature_ringInner { width: 470px; height: 470px;}
    #worksense .info .attendance_feature_center { position: absolute; left: 50%; top: 50%; width: 260px; height: 260px;}
    #worksense .info .attendance_feature_center img { width: 120px; display: block;}
    #worksense .info .attendance_feature_icon { position: absolute; width: 104px; height: 104px;}
    #worksense .info .attendance_feature_icon img { width: 68px;}

    #worksense .info .attendance_feature_icon01 { top: 220px; left: 0;}
    #worksense .info .attendance_feature_icon01 img{ width: 57px;}
    #worksense .info .attendance_feature_icon02 { top: 120px; right: 40px;}
    #worksense .info .attendance_feature_icon03 { top: 320px; right: 0; width: 110px; height: 110px;}
    #worksense .info .attendance_feature_icon03 img{ width: 61px;}
    #worksense .info .attendance_feature_icon04 { bottom: 120px; right: 95px; width: 130px; height: 130px;}
    #worksense .info .attendance_feature_icon04 img{ width: 81px;}
    #worksense .info .attendance_feature_icon05 { bottom: 200px; left: 0px; width: 130px; height: 130px; z-index: 10;}
    #worksense .info .attendance_feature_icon05 img{ width: 75px;}
    #worksense .info .attendance_feature_icon06 { bottom: 180px; left: 110px; width: 115px; height: 115px;}
    #worksense .info .attendance_feature_icon07 { top: 100px; left: 280px; width: 75px; height: 75px;}
    #worksense .info .attendance_feature_icon07 img{ width: auto; height: 45px;}

    #worksense .info .attendance_feature_dot {position: absolute; width: 35px; height: 35px;}

    #worksense .info .attendance_feature_dot01 { top: 69px; left: 210px; width: 25px; height: 25px;}
    #worksense .info .attendance_feature_dot02 { top: 90px; right: 162px;}
    #worksense .info .attendance_feature_dot03 { bottom: 130px; left: 450px;}
}
@media screen and (max-width:1280px) {
    #worksense .info .content { width: min(100%, 1600px); padding: 48px 0 0; grid-template-columns: 1fr 500px 1fr; gap: 18px;}

    #worksense .info .attendance_feature_list { list-style: none; margin: 0; padding: 0;}
    #worksense .info .feature_item { font-size: 20.5px;}
    #worksense .info .feature_item.feature_item03{ margin-left: -30px;}
    #worksense .info .feature_item.feature_item05{ margin-left: -60px;}
    #worksense .info .attendance_feature_listLeft { gap: 130px;}
    #worksense .info .attendance_feature_listRight { gap: 120px;}
    #worksense .info .attendance_feature_visual {position: relative; width: 500px; aspect-ratio: 1 / 1; margin: 0 auto;}
    #worksense .info .attendance_feature_ring { position: absolute; left: 50%; top: 50%;}
    #worksense .info .attendance_feature_ringOuter { width: 500px; height: 500px;}
    #worksense .info .attendance_feature_ringInner { width: 350px; height: 350px;}
    #worksense .info .attendance_feature_center { position: absolute; left: 50%; top: 50%; width: 200px; height: 200px;}
    #worksense .info .attendance_feature_center img { width: 105px; display: block;}
    #worksense .info .attendance_feature_icon { position: absolute; width: 91px; height: 91px;}
    #worksense .info .attendance_feature_icon img { width: 59px;}

    #worksense .info .attendance_feature_icon01 { top: 110px; left: 0;}
    #worksense .info .attendance_feature_icon01 img{ width: 55px;}
    #worksense .info .attendance_feature_icon02 { top: 30px; right: 20px;}
    #worksense .info .attendance_feature_icon03 { top: 220px; right: -10px; width: 80px; height: 80px;}
    #worksense .info .attendance_feature_icon03 img{ width: 41px;}
    #worksense .info .attendance_feature_icon04 { bottom: 30px; right: 55px; width: 110px; height: 110px;}
    #worksense .info .attendance_feature_icon04 img{ width: 63px;}
    #worksense .info .attendance_feature_icon05 { bottom: 90px; left: 0px; width: 120px; height: 120px; z-index: 10;}
    #worksense .info .attendance_feature_icon05 img{ width: 67px;}
    #worksense .info .attendance_feature_icon06 { bottom: 60px; left: 100px; width: 95px; height: 95px;}
    #worksense .info .attendance_feature_icon07 { top: 90px; left: 130px; width: 55px; height: 55px;}
    #worksense .info .attendance_feature_icon07 img{ width: auto; height: 25px;}

    #worksense .info .attendance_feature_dot {position: absolute; width: 35px; height: 35px;}

    #worksense .info .attendance_feature_dot01 { top: 10px; left: 150px; width: 25px; height: 25px;}
    #worksense .info .attendance_feature_dot02 { top: 0px; right: 142px;}
    #worksense .info .attendance_feature_dot03 { bottom: 65px; left: 270px;}
}
@media screen and (max-width:1024px) {
    #worksense .info .content { width: min(100%, 1600px); padding: 50px 0 0; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 0;}

    #worksense .info .attendance_feature_list { list-style: none; margin: 0; padding: 0;}
    #worksense .info .feature_item { font-size: 18.25px; text-align: center; margin: 0 auto;}
    #worksense .info .feature_item.feature_item03{ margin-left: auto; margin-top: -30px;}
    #worksense .info .feature_item.feature_item04{ margin-top: 30px;}
    #worksense .info .feature_item.feature_item05{ margin-left: auto; margin-top: -30px;}
    #worksense .info .attendance_feature_listLeft { gap: 0px; grid-template-columns: repeat(2, minmax(0, 1fr));}
    #worksense .info .attendance_feature_listRight { gap: 20px; grid-template-columns: repeat(3, minmax(0, 1fr));}
    #worksense .info .attendance_feature_visual {position: relative; width: 500px; aspect-ratio: 1 / 1; margin: 0 auto;}
    #worksense .info .attendance_feature_ring { position: absolute; left: 50%; top: 50%;}
    #worksense .info .attendance_feature_ringOuter { width: 500px; height: 500px;}
    #worksense .info .attendance_feature_ringInner { width: 350px; height: 350px;}
    #worksense .info .attendance_feature_center { position: absolute; left: 50%; top: 50%; width: 200px; height: 200px;}
    #worksense .info .attendance_feature_center img { width: 105px; display: block;}
    #worksense .info .attendance_feature_icon { position: absolute; width: 91px; height: 91px;}
    #worksense .info .attendance_feature_icon img { width: 59px;}

    #worksense .info .attendance_feature_icon01 { top: 15px; left: 50px;}
    #worksense .info .attendance_feature_icon01 img{ width: 55px;}
    #worksense .info .attendance_feature_icon02 { top: auto; right: auto; bottom: 50px; left: 0;}
    #worksense .info .attendance_feature_icon03 { top: auto; right: 200px; width: 80px; height: 80px; bottom: -35px;}
    #worksense .info .attendance_feature_icon03 img{ width: 41px;}
    #worksense .info .attendance_feature_icon04 { bottom: 30px; right: 55px; width: 110px; height: 110px;}
    #worksense .info .attendance_feature_icon04 img{ width: 63px;}
    #worksense .info .attendance_feature_icon05 { bottom: auto; left: auto; width: 120px; height: 120px; z-index: 10; top: 20px; right: 70px;}
    #worksense .info .attendance_feature_icon05 img{ width: 67px;}
    #worksense .info .attendance_feature_icon06 { bottom: auto; left: auto; width: 95px; height: 95px; top: 140px; right: 50px;}
    #worksense .info .attendance_feature_icon07 { top: 190px; left: 50px; width: 75px; height: 75px;}
    #worksense .info .attendance_feature_icon07 img{ width: auto; height: 35px;}

    #worksense .info .attendance_feature_dot {position: absolute; width: 35px; height: 35px;}

    #worksense .info .attendance_feature_dot01 { top: 95px; left: 150px; width: 25px; height: 25px;}
    #worksense .info .attendance_feature_dot02 { top: 160px; right: auto; left: 5px;}
    #worksense .info .attendance_feature_dot03 { bottom: 125px; left: auto; right: 5px}
}
@media screen and (max-width:768px) {
    #worksense .info .content { width: min(100%, 1600px); padding: 50px 0 0; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 15px;}

    #worksense .info .attendance_feature_list { list-style: none; margin: 0; padding: 0;}
    #worksense .info .feature_item { font-size: 16px; text-align: center; margin: 0 auto;}
    #worksense .info .feature_item.feature_item03{ margin-left: auto; margin-top: -30px;}
    #worksense .info .feature_item.feature_item04{ margin-top: 30px;}
    #worksense .info .feature_item.feature_item05{ margin-left: auto; margin-top: -30px;}
    #worksense .info .attendance_feature_listLeft { gap: 0px; grid-template-columns: repeat(2, minmax(0, 1fr));}
    #worksense .info .attendance_feature_listRight { gap: 20px; grid-template-columns: repeat(3, minmax(0, 1fr));}
    #worksense .info .attendance_feature_visual {position: relative; width: 400px; aspect-ratio: 1 / 1; margin: 0 auto;}
    #worksense .info .attendance_feature_ring { position: absolute; left: 50%; top: 50%;}
    #worksense .info .attendance_feature_ringOuter { width: 400px; height: 400px;}
    #worksense .info .attendance_feature_ringInner { width: 300px; height: 300px;}
    #worksense .info .attendance_feature_center { position: absolute; left: 50%; top: 50%; width: 200px; height: 200px;}
    #worksense .info .attendance_feature_center img { width: 105px; display: block;}
    #worksense .info .attendance_feature_icon { position: absolute; width: 91px; height: 91px;}
    #worksense .info .attendance_feature_icon img { width: 47px;}

    #worksense .info .attendance_feature_icon01 { top: 5px; left: 50px;}
    #worksense .info .attendance_feature_icon01 img{ width: 41px;}
    #worksense .info .attendance_feature_icon02 { top: auto; right: auto; bottom: 50px; left: 0;}
    #worksense .info .attendance_feature_icon03 { top: auto; right: 160px; width: 80px; height: 80px; bottom: -45px;}
    #worksense .info .attendance_feature_icon03 img{ width: 39px;}
    #worksense .info .attendance_feature_icon04 { bottom: 30px; right: 35px; width: 80px; height: 80px;}
    #worksense .info .attendance_feature_icon04 img{ width: 55px;}
    #worksense .info .attendance_feature_icon05 { bottom: auto; left: auto; width: 90px; height: 90px; z-index: 10; top: 10px; right: 70px;}
    #worksense .info .attendance_feature_icon05 img{ width: 49px;}
    #worksense .info .attendance_feature_icon06 { bottom: auto; left: auto; width: 75px; height: 75px; top: 80px; right: 33px;}
    #worksense .info .attendance_feature_icon07 { top: 120px; left: 45px; width: 55px; height: 55px;}
    #worksense .info .attendance_feature_icon07 img{ width: auto; height: 27px;}

    #worksense .info .attendance_feature_dot {position: absolute; width: 35px; height: 35px;}

    #worksense .info .attendance_feature_dot01 { top: 45px; left: 150px; width: 25px; height: 25px;}
    #worksense .info .attendance_feature_dot02 { top: 160px; right: auto; left: 0;}
    #worksense .info .attendance_feature_dot03 { bottom: 115px; left: auto; right: 0}
}
@media screen and (max-width:640px) {
    #worksense .info .content { width: min(100%, 1600px); padding: 50px 0 0; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 20px;}

    #worksense .info .attendance_feature_list { list-style: none; margin: 0; padding: 0;}
    #worksense .info .feature_item { font-size: 13.75px; text-align: center; margin: 0 auto;}
    #worksense .info .feature_item.feature_item03{ margin-left: auto; margin-top: 0;}
    #worksense .info .feature_item.feature_item04{ margin-top: 40px;}
    #worksense .info .feature_item.feature_item05{ margin-left: auto; margin-top: 0;}
    #worksense .info .attendance_feature_listLeft { gap: 0px; grid-template-columns: repeat(2, minmax(0, 1fr));}
    #worksense .info .attendance_feature_listRight { gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr));}
    #worksense .info .attendance_feature_visual {position: relative; width: 350px; aspect-ratio: 1 / 1; margin: 0 auto;}
    #worksense .info .attendance_feature_ring { position: absolute; left: 50%; top: 50%;}
    #worksense .info .attendance_feature_ringOuter { width: 350px; height: 350px;}
    #worksense .info .attendance_feature_ringInner { width: 250px; height: 250px;}
    #worksense .info .attendance_feature_center { position: absolute; left: 50%; top: 50%; width: 150px; height: 150px;}
    #worksense .info .attendance_feature_center img { width: 75px; display: block;}
    #worksense .info .attendance_feature_icon { position: absolute; width: 81px; height: 81px;}
    #worksense .info .attendance_feature_icon img { width: 47px;}

    #worksense .info .attendance_feature_icon01 { top: 0px; left: 50px;}
    #worksense .info .attendance_feature_icon01 img{ width: 41px;}
    #worksense .info .attendance_feature_icon02 { top: auto; right: auto; bottom: 10px; left: 0;}
    #worksense .info .attendance_feature_icon03 { top: auto; right: 135px; width: 80px; height: 80px; bottom: -45px;}
    #worksense .info .attendance_feature_icon03 img{ width: 39px;}
    #worksense .info .attendance_feature_icon04 { bottom: 10px; right: 35px; width: 80px; height: 80px;}
    #worksense .info .attendance_feature_icon04 img{ width: 55px;}
    #worksense .info .attendance_feature_icon05 { bottom: auto; left: auto; width: 80px; height: 80px; z-index: 10; top: 5px; right: 70px;}
    #worksense .info .attendance_feature_icon05 img{ width: 49px;}
    #worksense .info .attendance_feature_icon06 { bottom: auto; left: auto; width: 65px; height: 65px; top: 70px; right: 33px;}
    #worksense .info .attendance_feature_icon07 { top: 140px; left: 25px; width: 55px; height: 55px;}
    #worksense .info .attendance_feature_icon07 img{ width: auto; height: 27px;}

    #worksense .info .attendance_feature_dot {position: absolute; width: 35px; height: 35px;}

    #worksense .info .attendance_feature_dot01 { top: 40px; left: 150px; width: 25px; height: 25px;}
    #worksense .info .attendance_feature_dot02 { top: 210px; right: auto; left: 0;}
    #worksense .info .attendance_feature_dot03 { bottom: 85px; left: auto; right: 0}
}




#worksense .step{ background-image: url('../img/worksense/step_bg.png');}
#worksense .step .container .list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 170px; margin: 70px 0 0; text-align: center;}
#worksense .step .container .list dl dd:first-child{ padding: 14px 0; border-radius: 25px; box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.25); background-color: rgba(255,255,255,0.8);}
#worksense .step .container .list dl dd img { width: 90%; height: auto; object-fit: cover;}
#worksense .step .container .list dl dd.stepPoint{ font-size: 25px; letter-spacing: 0.01em; color: #7F40FF; font-weight: 700; padding-top: 30px;}
#worksense .step .container .list dl dt{ font-size: 35px; letter-spacing: -0.02em; font-weight: 700; padding: 10px 0 15px;}
#worksense .step .container .list dl dd.stepText{ font-size: 17px; letter-spacing: 0.01em; color: #444; font-weight: 400; line-height: 150%;}

@media screen and (max-width:1600px) {
    #worksense .step .container .list { gap: 140px; margin: 63px 0 0;}
    #worksense .step .container .list dl dd:first-child{ padding: 13px 0;}
    #worksense .step .container .list dl dd.stepPoint{ font-size: 23px; padding-top: 30px;}
    #worksense .step .container .list dl dt{ font-size: 31.5px; padding: 9px 0 14px;}
    #worksense .step .container .list dl dd.stepText{ font-size: 16.5px;}
}
@media screen and (max-width:1280px) {
    #worksense .step .container .list { gap: 110px; margin: 56px 0 0;}
    #worksense .step .container .list dl dd:first-child{ padding: 12px 0;}
    #worksense .step .container .list dl dd.stepPoint{ font-size: 21px; padding-top: 28px;}
    #worksense .step .container .list dl dt{ font-size: 28px; padding: 8px 0 13px;}
    #worksense .step .container .list dl dd.stepText{ font-size: 16px;}
}
@media screen and (max-width:1024px) {
    #worksense .step .container .list { gap: 80px; margin: 49px 0 0;}
    #worksense .step .container .list dl dd:first-child{ padding: 11px 0;}
    #worksense .step .container .list dl dd.stepPoint{ font-size: 19px; padding-top: 26px;}
    #worksense .step .container .list dl dt{ font-size: 24.5px; padding: 7px 0 12px;}
    #worksense .step .container .list dl dd.stepText{ font-size: 15.5px;}
}
@media screen and (max-width:768px) {
    #worksense .step .container .list { gap: 50px; margin: 42px 0 0;}
    #worksense .step .container .list dl dd:first-child{ padding: 10px 0;}
    #worksense .step .container .list dl dd.stepPoint{ font-size: 17px; padding-top: 20px;}
    #worksense .step .container .list dl dt{ font-size: 21px; padding: 6px 0 11px;}
    #worksense .step .container .list dl dd.stepText{ font-size: 15px;}
}
@media screen and (max-width:640px) {
    #worksense .step .container .list { gap: 20px; margin: 35px 0 0;}
    #worksense .step .container .list dl dd:first-child{ padding: 9px 0;}
    #worksense .step .container .list dl dd.stepPoint{ font-size: 15px; padding-top: 15px;}
    #worksense .step .container .list dl dt{ font-size: 17.5px; padding: 5px 0 10px;}
    #worksense .step .container .list dl dd.stepText{ font-size: 14.5px;}
}





#worksense .view{ background-image: url('../img/worksense/view_bg.png');}
#worksense .view .tab-scroll { position: relative; overflow: hidden; margin: 30px auto 0; max-width: 1060px;}
#worksense .view .tab-scroll::before, #worksense .view .tab-scroll::after { content: ''; position: absolute; top: 0; bottom: 0; width: 25%; z-index: 3; pointer-events: none; opacity: 0; transition: opacity 0.25s ease;}
#worksense .view .tab-scroll::before { left: 1px; border-radius: 999px 0 0 999px; background: linear-gradient(90deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);}
#worksense .view .tab-scroll::after { right: 1px; border-radius: 0 999px 999px 0; background: linear-gradient(270deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);}
#worksense .view .tab-scroll.can-left::before { opacity: 1;}
#worksense .view .tab-scroll.can-right::after { opacity: 1;}
#worksense .view .tab-scroll .tab { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; border: 1px solid #999; border-radius: 999px;}
#worksense .view .tab-scroll .tab { cursor: grab; user-select: none; }
#worksense .view .tab-scroll .tab.is-dragging { cursor: grabbing; }
#worksense .view .tab-scroll .tab::-webkit-scrollbar { display: none;}
#worksense .view .tab-scroll .tab .list { display: flex; align-items: center; width: 100%; min-width: max-content; white-space: nowrap;}
#worksense .view .tab-scroll .tab .list li { flex: 1 1 auto; min-width: 0;}
#worksense .view .tab-scroll .tab .list li button { padding: 17px 29px; color: #565656; text-align: center; font-family: 'Pretendard'; font-size: 21px; font-style: normal; font-weight: 500; line-height: normal; letter-spacing: 0.21px; white-space: nowrap; border-radius: 999px; width: 100%;}
#worksense .view .tab-scroll .tab .list li button.active { background: rgba(0, 0, 0, 0.10); font-weight: 800; color: #000;}

#worksense .view .worksense_view { position: relative; padding: 80px 0 0; display: none;}
#worksense .view .worksense_view.worksense_view_event { display: block;}
#worksense .view .worksense_view_inner { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 60px; max-width: 1600px; margin: 0 auto;}
#worksense .view .worksense_view_visual{ border-radius: 28px; overflow: hidden; box-shadow: 10px 10px 30px 0 rgba(66, 123, 191, 0.50); height: 670px; min-width: 0; flex: 1 1 0; overflow: hidden; }
#worksense .view .worksense_view_image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top;}

#worksense .view .worksense_view_content { flex: 0 0 540px; }
#worksense .view .worksense_view_title { display: block; margin: 0; font-size: 35px; font-weight: 600; line-height: 140%; letter-spacing: -0.02em;}
#worksense .view .worksense_view_list { margin: 20px 0 0; padding: 0; list-style: none;}
#worksense .view .worksense_view_item { margin-top: 10px; font-size: 21px; color: #565656; letter-spacing: 0.01em; position: relative; padding-left: 31px; display: inline-block; }
#worksense .view .worksense_view_item:after { content: ''; display: block; }
#worksense .view .worksense_view_item img{ height: 23px; position: absolute; top: 50%; left: 0; transform: translate(0, -50%);}
#worksense .view .worksense_view_item:first-child { margin-top: 0;}
#worksense .view .worksense_view_button { display: inline-block; vertical-align: top; border-radius: 15px; box-shadow: 2px 2px 25px 2px rgba(0, 0, 0, 0.10); text-align: center; font-family: 'Pretendard'; font-size: 17px; font-style: normal; font-weight: 500; line-height: normal; letter-spacing: -0.34px; padding: 20px 40px; transition: all 0.5s; background: #7F40FF; color: #FFF; margin-top: 50px;}

@media screen and (max-width:1600px) {
    #worksense .view .tab-scroll {margin: 27px auto 0;}
    #worksense .view .tab-scroll .tab .list li button { padding: 16px 27px; font-size: 19.5px;}
    #worksense .view .worksense_view { padding: 72px 0 0; }
    #worksense .view .worksense_view_inner { gap: 55px;}
    #worksense .view .worksense_view_visual{ border-radius: 26px; height: 610px;}
    #worksense .view .worksense_view_content { flex: 0 0 450px;}
    #worksense .view .worksense_view_title { font-size: 32px;}
    #worksense .view .worksense_view_list { margin: 18px 0 0;}
    #worksense .view .worksense_view_item { margin-top: 9px; font-size: 19.5px; padding-left: 29px; }
    #worksense .view .worksense_view_item img{ height: 21.5px;}
    #worksense .view .worksense_view_button { border-radius: 14px; box-shadow: 2px 2px 23px 2px rgba(0, 0, 0, 0.10); font-size: 16.5px; padding: 19px 37px; margin-top: 45px;}
}
@media screen and (max-width:1280px) {
    #worksense .view .tab-scroll {margin: 24px auto 0;}
    #worksense .view .tab-scroll .tab .list li button { padding: 15px 25px; font-size: 18px;}
    #worksense .view .worksense_view { padding: 64px 0 0; }
    #worksense .view .worksense_view_inner { gap: 50px;}
    #worksense .view .worksense_view_visual{ border-radius: 24px; height: 550px;}
    #worksense .view .worksense_view_content { flex: 0 0 430px;}
    #worksense .view .worksense_view_title { font-size: 29px;}
    #worksense .view .worksense_view_list { margin: 16px 0 0;}
    #worksense .view .worksense_view_item { margin-top: 8px; font-size: 18px; padding-left: 27px; }
    #worksense .view .worksense_view_item img{ height: 20px;}
    #worksense .view .worksense_view_button {border-radius: 13px; box-shadow: 2px 2px 21px 2px rgba(0, 0, 0, 0.10); font-size: 16px; padding: 18px 34px; margin-top: 40px;}
}
@media screen and (max-width:1024px) {
    #worksense .view .tab-scroll {margin: 21px auto 0;}
    #worksense .view .tab-scroll .tab .list li button { padding: 14px 23px; font-size: 16.5px;}
    #worksense .view .worksense_view { padding: 35px 0 0; }
    #worksense .view .worksense_view_inner { gap: 45px; flex-direction: column;}
    #worksense .view .worksense_view_visual{ flex: none; border-radius: 22px; height: 490px; width: 100%; }
    #worksense .view .worksense_view_content { flex: 1 1 0; width: 100%; text-align: center; }
    #worksense .view .worksense_view_title { font-size: 26px; }
    #worksense .view .worksense_view_list { margin: 14px 0 0; }
    #worksense .view .worksense_view_item { margin-top: 7px; font-size: 16.5px; padding-left: 25px; }
    #worksense .view .worksense_view_item img{ height: 18.5px;}
    #worksense .view .worksense_view_button { border-radius: 12px; box-shadow: 2px 2px 19px 2px rgba(0, 0, 0, 0.10); font-size: 15.5px; padding: 18px 34px; margin-top: 35px;}
}
@media screen and (max-width:768px) {
    #worksense .view .tab-scroll {margin: 18px auto 0;}
    #worksense .view .tab-scroll .tab .list li button { padding: 13px 21px; font-size: 15px;}
    #worksense .view .worksense_view { padding: 30px 0 0; }
    #worksense .view .worksense_view_inner { gap: 40px; flex-direction: column;}
    #worksense .view .worksense_view_visual{ border-radius: 20px; height: 430px;}
    #worksense .view .worksense_view_content { width: 100%;}
    #worksense .view .worksense_view_title { font-size: 23px;}
    #worksense .view .worksense_view_list { margin: 12px 0 0;}
    #worksense .view .worksense_view_item { margin-top: 6px; font-size: 15px; padding-left: 23px; }
    #worksense .view .worksense_view_item img{ height: 17px;}
    #worksense .view .worksense_view_button { border-radius: 11px; box-shadow: 2px 2px 17px 2px rgba(0, 0, 0, 0.10); font-size: 15px; padding: 16px 28px; margin-top: 30px;}
}
@media screen and (max-width:640px) {
    #worksense .view .tab-scroll {margin: 15px auto 0;}
    #worksense .view .tab-scroll .tab .list li button { padding: 12px 19px; font-size: 13.5px;}
    #worksense .view .worksense_view { padding: 25px 0 0; }
    #worksense .view .worksense_view_inner { gap: 35px; flex-direction: column;}
    #worksense .view .worksense_view_visual{ border-radius: 18px; height: 360px;}
    #worksense .view .worksense_view_content { width: 100%;}
    #worksense .view .worksense_view_title { font-size: 20px;}
    #worksense .view .worksense_view_list { margin: 10px 0 0;}
    #worksense .view .worksense_view_item { margin-top: 5px; font-size: 14.5px; padding-left: 21px; }
    #worksense .view .worksense_view_item img{ height: 15.5px;}
    #worksense .view .worksense_view_button { border-radius: 10px; box-shadow: 2px 2px 15px 2px rgba(0, 0, 0, 0.10); font-size: 14.5px; padding: 15px 25px; margin-top: 25px;}
}





#worksense .service{ background-image: url('../img/worksense/service_bg.png');}
#worksense .service .container{ display: grid; grid-template-columns: repeat(2, 35% 65%);}
#worksense .service .title{ display: inline-block; width: 100%; margin-top: 70px;}
#worksense .service .service_content{ display: inline-block; width: 100%;}
#worksense .service .comparison_layout{  display: grid; grid-template-columns: repeat(2, 35% calc(65% - 30px)); width: 100%; height: auto; gap: 30px;}

#worksense .service .brand_card{ display: inline-block; width: 100%; height: auto; background: rgba(255,255,255,0.3); border-radius: 15px; border: 3px solid #fff; box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.10) inset, -2px -2px 20px 0 rgba(255, 255, 255, 0.20), 10px 10px 20px 0 rgba(0, 0, 0, 0.10); padding: 25px;}
#worksense .service .brand_card__header{ display: inline-block; width: 100%; height: auto; text-align: center; padding: 10px 0 25px;}
#worksense .service .brand_card__header img{ width: auto; height: 120px;}
#worksense .service .feature_panel{ display: inline-block; width: 100%; height: auto; border-radius: 15px; background: linear-gradient(156deg, #FFF 0%, #F5F6F7 100%); box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.10) inset, -2px -2px 20px 0 rgba(255, 255, 255, 0.20), 10px 10px 20px 0 rgba(0, 0, 0, 0.10); padding: 30px;}
#worksense .service .feature_list{ display: inline-block; width: 100%; height: auto;}
#worksense .service .feature_item{ display: inline-block; width: 100%; height: auto; padding-bottom: 20px; font-size: 21px; color: #7F40FF; font-weight: 600; letter-spacing: 0.01em;}
#worksense .service .feature_item:last-child{ padding-bottom: 0;}
#worksense .service .feature_item img{ margin-right: 10px; margin-top: -1px;}

#worksense .service .comparison_table{ display: inline-block; width: 100%; height: auto; margin: 71px 0; overflow: hidden; border-radius: 15px; background: rgba(255,255,255,0.3); border: 1px solid #fff;}
#worksense .service .comparison_table table th{ padding: 25px 0 20px; border-right: 1px solid #fff; border-bottom: 1px solid #fff;}
#worksense .service .comparison_table table th:last-child{ border-right: 0;}
#worksense .service .comparison_table table th img{ height: 96px;}
#worksense .service .comparison_table table td{ padding: 30px; border-right: 1px solid #fff;}
#worksense .service .comparison_table table td:last-child{ border-right: 0;}
#worksense .service .comparison_table table .service_list{ display: inline-block; width: 100%; height: auto;}
#worksense .service .comparison_table table .service_item{ display: inline-block; width: 100%; font-size: 17px; color: #565656; padding-bottom: 15px;}
#worksense .service .comparison_table table .service_item:last-child{ padding-bottom: 0;}
#worksense .service .comparison_table table .is_supported{ color: #7F40FF;}
#worksense .service .comparison_table table .service_item img{ height: 15px; margin-right: 10px; margin-top: 2px;}
#worksense .service .comparison_table table .is_supported img{ height: 19px; margin-right: 6px; margin-top: 0; margin-left: -2px;}

@media screen and (max-width:1600px) {
    #worksense .service .container{ grid-template-columns: repeat(2, 35% 65%);}
    #worksense .service .title{ margin-top: 70px;}
    #worksense .service .comparison_layout{ grid-template-columns: repeat(2, 35% calc(65% - 25px)); gap: 25px; padding-left: 25px;}

    #worksense .service .brand_card{ padding: 25px;}
    #worksense .service .brand_card__header{ padding: 10px 0 25px;}
    #worksense .service .brand_card__header img{ height: 105px;}
    #worksense .service .feature_panel{ padding: 30px;}
    #worksense .service .feature_item{ padding-bottom: 20px; font-size: 19px;}
    #worksense .service .feature_item img{ margin-right: 10px; margin-top: -1px; height: 23px;}

    #worksense .service .comparison_table{ margin: 67px 0; overflow: hidden;}
    #worksense .service .comparison_table table th{ padding: 21px 0 16px;}
    #worksense .service .comparison_table table th img{ height: 92px;}
    #worksense .service .comparison_table table td{ padding: 23px 0 23px 23px;}

    #worksense .service .comparison_table table .service_item{ font-size: 16.5px; padding-bottom: 15px;}
    #worksense .service .comparison_table table .service_item img{ height: 14px; margin-right: 8px; margin-top: 2px;}
    #worksense .service .comparison_table table .is_supported img{ height: 19px; margin-right: 6px; margin-top: 0; margin-left: -2px;}
}
@media screen and (max-width:1280px) {
    #worksense .service .container{ grid-template-columns: repeat(1, minmax(0, 1fr));}
    #worksense .service .title{ margin-top: 0; text-align: center;}
    #worksense .service .comparison_layout{ grid-template-columns: repeat(2, 35% calc(65% - 20px)); gap: 20px; padding-left: 0; padding-top: 40px;}

    #worksense .service .brand_card{ padding: 25px;}
    #worksense .service .brand_card__header{ padding: 10px 0 25px;}
    #worksense .service .brand_card__header img{ height: 85px;}
    #worksense .service .feature_panel{ padding: 25px;}
    #worksense .service .feature_item{ padding-bottom: 20px; font-size: 18px;}
    #worksense .service .feature_item img{ margin-right: 10px; margin-top: -1px; height: 21px;}

    #worksense .service .comparison_table{ margin: 65px 0;}
    #worksense .service .comparison_table table th{ padding: 21px 0 16px;}
    #worksense .service .comparison_table table th img{ height: 65px;}
    #worksense .service .comparison_table table td{ padding: 20px 0 20px 21px;}

    #worksense .service .comparison_table table .service_item{ font-size: 16px; padding-bottom: 15px;}
    #worksense .service .comparison_table table .service_item img{ height: 14px; margin-right: 8px; margin-top: 2px;}
    #worksense .service .comparison_table table .is_supported img{ height: 19px; margin-right: 6px; margin-top: 0; margin-left: -2px;}
}
@media screen and (max-width:1024px) {
    #worksense .service .comparison_layout{ grid-template-columns: repeat(2, 35% calc(65% - 20px)); gap: 20px; padding-left: 0; padding-top: 35px;}

    #worksense .service .brand_card{ padding: 23px;}
    #worksense .service .brand_card__header{ padding: 10px 0 23px;}
    #worksense .service .brand_card__header img{ height: 85px;}
    #worksense .service .feature_panel{ padding: 23px;}
    #worksense .service .feature_item{ padding-bottom: 18px; font-size: 17.5px;}
    #worksense .service .feature_item img{ margin-right: 10px; margin-top: -1px; height: 21px;}

    #worksense .service .comparison_table{ margin: 63px 0;}
    #worksense .service .comparison_table table th{ padding: 21px 0 16px;}
    #worksense .service .comparison_table table th img{ height: 65px;}
    #worksense .service .comparison_table table td{ padding: 20px 0 20px 19px;}

    #worksense .service .comparison_table table .service_item{ font-size: 15.5px; padding-bottom: 13px;}
    #worksense .service .comparison_table table .service_item img{ height: 13px; margin-right: 8px; margin-top: 2px;}
    #worksense .service .comparison_table table .is_supported img{ height: 18px; margin-right: 6px; margin-top: 0; margin-left: -2px;}
}
@media screen and (max-width:768px) {
    #worksense .service .comparison_layout{ grid-template-columns: repeat(2, 35% calc(65% - 15px)); gap: 15px; padding-left: 0; padding-top: 30px;}

    #worksense .service .brand_card{ padding: 18px;}
    #worksense .service .brand_card__header{ padding: 8px 0 18px;}
    #worksense .service .brand_card__header img{ height: 75px;}
    #worksense .service .feature_panel{ padding: 18px;}
    #worksense .service .feature_item{ padding-bottom: 16px; font-size: 16.5px;}
    #worksense .service .feature_item img{ margin-right: 8px; margin-top: -1px; height: 19px;}

    #worksense .service .comparison_table{ margin: 63px 0;}
    #worksense .service .comparison_table table th{ padding: 21px 0 16px;}
    #worksense .service .comparison_table table th img{ height: 45px;}
    #worksense .service .comparison_table table td{ padding: 13px 10px;}

    #worksense .service .comparison_table table .service_item{ font-size: 15px; padding-bottom: 10px;}
    #worksense .service .comparison_table table .service_item img{ height: 12px; margin-right: 7px; margin-top: 2px;}
    #worksense .service .comparison_table table .is_supported img{ height: 16px; margin-right: 5px; margin-top: 0; margin-left: -2px;}
}
@media screen and (max-width:640px) {
    #worksense .service .comparison_layout{ grid-template-columns: repeat(2, 56% calc(44% - 10px)); gap: 10px; padding-left: 0; padding-top: 25px;}

    #worksense .service .brand_card{ padding: 10px;}
    #worksense .service .brand_card__header{ padding: 5px 0 14px;}
    #worksense .service .brand_card__header img{ height: 45px;}
    #worksense .service .feature_panel{ padding: 15px;}
    #worksense .service .feature_item{ padding-bottom: 15px; font-size: 15px;}
    #worksense .service .feature_item img{ margin-right: 6px; margin-top: -1px; height: 17px;}

    #worksense .service .comparison_table{ margin: 0;}
    #worksense .service .comparison_table table th{ padding: 15px 0;}
    #worksense .service .comparison_table table th img{ height: 45px;}
    #worksense .service .comparison_table table td{ padding: 13px 10px 25px;}

    #worksense .service .comparison_table table .service_item{ font-size: 14.5px; padding-bottom: 8px; padding-top: 8px; text-align: center; border-bottom: 1px solid #ddd;}
    #worksense .service .comparison_table table .service_item:last-child{ border-bottom: 0;}
    #worksense .service .comparison_table table .service_item:first-child{ padding-top: 0;}
    #worksense .service .comparison_table table .service_item span{ display: none;}
    #worksense .service .comparison_table table .service_item img{ height: 12px; margin-right: 0; margin-top: 2px;}
    #worksense .service .comparison_table table .is_supported img{ height: 16px; margin-right: 0; margin-top: 1px; margin-left: -2px;}
}




#worksense .after{ background-image: url('../img/worksense/after_bg.png');}
#worksense .after .container .list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 50px; margin: 70px 0 0; text-align: center;}
#worksense .after .container .list dl{ padding: 50px 50px 30px; border-radius: 15px; box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.15); background-color: #fff;}
#worksense .after .container .list dl.beforeBox{ background-color: #E2E7ED; border: 1px solid #ddd;}
#worksense .after .container .list dl dt{ padding: 17px 0 15px; font-size: 21px; letter-spacing: 0.01em; font-weight: 400; color: #fff; background-color: #7F40FF; border-radius: 65px; margin: 0 auto; max-width: 120px;}
#worksense .after .container .list dl.beforeBox dt{ background-color: #f5f6f7; color: #888;}
#worksense .after .container .list dl dd.afterText{ font-size: 25px; line-height: 150%; letter-spacing: 0.01em; font-weight: 600; padding: 30px 0 15px;}
#worksense .after .container .list dl dd img{ width: auto; height: 305px;}

@media screen and (max-width:1600px) {
    #worksense .after .container .list { gap: 45px; margin: 63px 0 0;}
    #worksense .after .container .list dl{ padding: 45px 45px 27px;}
    #worksense .after .container .list dl dt{ padding: 16px 0 14px; font-size: 19px; max-width: 115px;}
    #worksense .after .container .list dl dd.afterText{ font-size: 23.5px; padding: 27px 0 14px;}
    #worksense .after .container .list dl dd img{ width: auto; height: 285px;}
}
@media screen and (max-width:1280px) {
    #worksense .after .container .list { gap: 40px; margin: 56px 0 0;}
    #worksense .after .container .list dl{ padding: 40px 40px 24px;}
    #worksense .after .container .list dl dt{ padding: 15px 0 13px; font-size: 18px; max-width: 110px;}
    #worksense .after .container .list dl dd.afterText{ font-size: 22px; padding: 24px 0 13px;}
    #worksense .after .container .list dl dd img{ width: auto; height: 265px;}
}
@media screen and (max-width:1024px) {
    #worksense .after .container .list { gap: 35px; margin: 49px 0 0;}
    #worksense .after .container .list dl{ padding: 35px 35px 21px;}
    #worksense .after .container .list dl dt{ padding: 14px 0 12px; font-size: 17px; max-width: 105px;}
    #worksense .after .container .list dl dd.afterText{ font-size: 20.5px; padding: 21px 0 12px;}
    #worksense .after .container .list dl dd img{ width: auto; height: 245px;}
}
@media screen and (max-width:768px) {
    #worksense .after .container .list { grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 30px; margin: 42px 0 0;}
    #worksense .after .container .list dl{ padding: 30px 30px 18px;}
    #worksense .after .container .list dl dt{ padding: 13px 0 11px; font-size: 16px; max-width: 100px;}
    #worksense .after .container .list dl dd.afterText{ font-size: 19px; padding: 18px 0 11px;}
    #worksense .after .container .list dl dd img{ width: auto; height: 225px;}
}
@media screen and (max-width:640px) {
    #worksense .after{ background-position: right; }
    #worksense .after .container .list { gap: 25px; margin: 35px 0 0;}
    #worksense .after .container .list dl{ padding: 25px 25px 12px;}
    #worksense .after .container .list dl dt{ padding: 12px 0 10px; font-size: 15px; max-width: 95px;}
    #worksense .after .container .list dl dd.afterText{ font-size: 17.5px; padding: 15px 0 10px;}
    #worksense .after .container .list dl dd img{ width: auto; height: 205px;}
}




#worksense .finalCta{ background-image: url('../img/worksense/banner_bg.png');}
#worksense .finalCta .s{ color: #7F40FF;}




#worksense .faq { background-image: url('../img/worksense/faq_bg.png'); }
#worksense .faq .list { display: flex; flex-direction: column; gap: 30px; margin: 60px 0 0; }
#worksense .faq .list .item { border-radius: 15px; border: 1px solid #DDD; background: rgba(255, 255, 255, 0.70); }
#worksense .faq .list .item.is-open { background: #FFF; box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.25); }
#worksense .faq .list .item .question .button { position: relative; width: 100%; display: flex; align-items: center; gap: 24px; cursor: pointer; color: #222; padding: 35px; }
#worksense .faq .list .item .question .button span { color: #555; font-family: 'Pretendard'; font-size: 25px; font-style: normal; font-weight: 500; line-height: normal; letter-spacing: 0.25px; text-align: left; }
#worksense .faq .list .item.is-open .question .button { padding-bottom: 20px; }
#worksense .faq .list .item.is-open .question .button span { color: #000; }
#worksense .faq .list .item .question .button .icon { position: relative; flex: 0 0 27px; width: 27px; height: 27px; }
#worksense .faq .list .item .question .button .icon::before,
#worksense .faq .list .item .question .button .icon::after { content: ''; position: absolute; top: 50%; left: 50%; background: #7F40FF; border-radius: 1.5px; transform: translate(-50%, -50%); transition: all 0.25s ease; }
#worksense .faq .list .item .question .button .icon::before { width: 27px; height: 3px; }
#worksense .faq .list .item .question .button .icon::after { width: 3px; height: 27px; }
#worksense .faq .list .item .question .button[aria-expanded="true"] .icon::before { background: #FF4949; }
#worksense .faq .list .item .question .button[aria-expanded="true"] .icon::after { height: 3px; opacity: 0; }
#worksense .faq .list .item .answer { display: none; }
#worksense .faq .list .item .answer .inner { padding: 0 35px 35px 87px; color: #333; font-family: 'Pretendard'; font-size: 17px; font-style: normal; font-weight: 500; line-height: 150%; letter-spacing: 0.17px; }

@media screen and (max-width:1600px) {
    #worksense .faq .list { gap: 27px; margin: 54px 0 0; }
    #worksense .faq .list .item { border-radius: 14px; }
    #worksense .faq .list .item.is-open { box-shadow: 0 0 27px 0 rgba(0, 0, 0, 0.25); }
    #worksense .faq .list .item .question .button { gap: 22px; padding: 32px; }
    #worksense .faq .list .item.is-open .question .button { padding-bottom: 19px; }
    #worksense .faq .list .item .question .button span { font-size: 23.25px; }
    #worksense .faq .list .item .question .button .icon { flex: 0 0 25px; width: 25px; height: 25px; }
    #worksense .faq .list .item .question .button .icon::before { width: 24.5px; height: 3px; }
    #worksense .faq .list .item .question .button .icon::after { width: 3px; height: 24.5px; }
    #worksense .faq .list .item .question .button[aria-expanded="true"] .icon::after { height: 3px; opacity: 0; }
    #worksense .faq .list .item .answer .inner { padding: 0 32px 32px 80px; font-size: 16.3px; }
}
@media screen and (max-width:1280px) {
    #worksense .faq .list { gap: 24px; margin: 48px 0 0; }
    #worksense .faq .list .item { border-radius: 13px; }
    #worksense .faq .list .item.is-open { box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.25); }
    #worksense .faq .list .item .question .button { gap: 20px; padding: 29px; }
    #worksense .faq .list .item.is-open .question .button { padding-bottom: 18px; }
    #worksense .faq .list .item .question .button span { font-size: 21.5px; }
    #worksense .faq .list .item .question .button .icon { flex: 0 0 23px; width: 23px; height: 23px; }
    #worksense .faq .list .item .question .button .icon::before { width: 22px; height: 2.5px; }
    #worksense .faq .list .item .question .button .icon::after { width: 2.5px; height: 22px; }
    #worksense .faq .list .item .question .button[aria-expanded="true"] .icon::after { height: 2.5px; opacity: 0; }
    #worksense .faq .list .item .answer .inner { padding: 0 29px 29px 73px; font-size: 15.6px; }
}
@media screen and (max-width:1024px) {
    #worksense .faq .list { gap: 21px; margin: 42px 0 0; }
    #worksense .faq .list .item { border-radius: 12px; }
    #worksense .faq .list .item.is-open { box-shadow: 0 0 21px 0 rgba(0, 0, 0, 0.25); }
    #worksense .faq .list .item .question .button { gap: 18px; padding: 26px; }
    #worksense .faq .list .item.is-open .question .button { padding-bottom: 17px; }
    #worksense .faq .list .item .question .button span { font-size: 19.75px; }
    #worksense .faq .list .item .question .button .icon { flex: 0 0 21px; width: 21px; height: 21px; }
    #worksense .faq .list .item .question .button .icon::before { width: 19.5px; height: 2.5px; }
    #worksense .faq .list .item .question .button .icon::after { width: 2.5px; height: 19.5px; }
    #worksense .faq .list .item .question .button[aria-expanded="true"] .icon::after { height: 2.5px; opacity: 0; }
    #worksense .faq .list .item .answer .inner { padding: 0 26px 26px 66px; font-size: 14.9px; }
}
@media screen and (max-width:768px) {
    #worksense .faq .list { gap: 18px; margin: 36px 0 0; }
    #worksense .faq .list .item { border-radius: 11px; }
    #worksense .faq .list .item.is-open { box-shadow: 0 0 18px 0 rgba(0, 0, 0, 0.25); }
    #worksense .faq .list .item .question .button { gap: 16px; padding: 23px; }
    #worksense .faq .list .item.is-open .question .button { padding-bottom: 16px; }
    #worksense .faq .list .item .question .button span { font-size: 18px; }
    #worksense .faq .list .item .question .button .icon { flex: 0 0 19px; width: 19px; height: 19px; }
    #worksense .faq .list .item .question .button .icon::before { width: 17px; height: 2px; }
    #worksense .faq .list .item .question .button .icon::after { width: 2px; height: 17px; }
    #worksense .faq .list .item .question .button[aria-expanded="true"] .icon::after { height: 2px; opacity: 0; }
    #worksense .faq .list .item .answer .inner { padding: 0 23px 23px 59px; font-size: 14.2px; }
}
@media screen and (max-width:640px) {
    #worksense .faq .list { gap: 15px; margin: 30px 0 0; }
    #worksense .faq .list .item { border-radius: 10px; }
    #worksense .faq .list .item.is-open { box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.25); }
    #worksense .faq .list .item .question .button { gap: 14px; padding: 20px; }
    #worksense .faq .list .item.is-open .question .button { padding-bottom: 15px; }
    #worksense .faq .list .item .question .button span { font-size: 16.25px; }
    #worksense .faq .list .item .question .button .icon { flex: 0 0 17px; width: 17px; height: 17px; }
    #worksense .faq .list .item .question .button .icon::before { width: 14.5px; height: 2px; }
    #worksense .faq .list .item .question .button .icon::after { width: 2px; height: 14.5px; }
    #worksense .faq .list .item .question .button[aria-expanded="true"] .icon::after { height: 2px; opacity: 0; }
    #worksense .faq .list .item .answer .inner { padding: 0 20px 20px 52px; font-size: 13.5px; }
}

@media screen and (max-width:1600px) {
}
@media screen and (max-width:1280px) {
}
@media screen and (max-width:1024px) {
}
@media screen and (max-width:768px) {
}
@media screen and (max-width:640px) {
}