@charset "utf-8";

.title_wrap h2 {margin-bottom: 16px; line-height: 132%;}
.title_wrap p {font-weight: 300; font-size:24px;}
.function .area_function {max-width: none;}
.promotion.function .area_function {padding: 150px 0 !important;}

/* 상단 비주얼 */
.promotion .content_head {position: relative; background-color: #8376FF; padding: 104px 0 156px;}
.promotion .content_head::before{ content:""; position:absolute;inset:0; background: url("https://hr.daouoffice.com/lp/2026/0101_promotion/images/img_promotion_pc_bg01.png") center/cover no-repeat; opacity:.8; z-index:0; pointer-events:none;}
.promotion .content_head > *{ position:relative; z-index:1;}

.white.badge {padding: 10px 30px; margin-bottom: 32px; border: 1px solid #ffffff33; border-radius: 16px; color: #fff; background-color: #A69CFF;}

.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}

.promotion .content_head .main_title h1 {max-width: 900px; width: 100%; margin-bottom: 2px;}
.promotion .content_head .main_title h2 {margin-bottom: 10px;}
.promotion .content_head .main_title p {font-size: 24px; font-weight: 300; line-height: 140%; color: #ffffffb9;}
.promotion .content_head .title_wrap {margin: 0 !important;}
.promotion .content_head .btn_wrap {padding: 52px 0 72px; margin: 0 !important;}
.promotion .content_head .btn_wrap .btn_general {padding-left: 40px; background-color: #252727;}
.promotion .content_head .btn_wrap .btn_ghost {padding-left: 40px; background-color: #efecff;}

.promotion .content_head .deco_img01 {position: absolute; top: 718px; left: calc(50% + 358px); width: 228px; height: 249px; background: url("https://hr.daouoffice.com/lp/2026/0101_promotion/images/img_promotion_pc_deco01.png") no-repeat; background-size: contain; z-index: 5;}
.promotion .content_head .deco_img02 {position: absolute; top: 1192px; left: calc(50% + 510px); width: 228px; height: 249px; background: url("https://hr.daouoffice.com/lp/2026/0101_promotion/images/img_promotion_pc_deco02.png") no-repeat; background-size: contain; z-index: 5;}
.promotion .content_head .deco_img03 {position: absolute; top: 982px; left: calc(50% - 710px); width: 228px; height: 300px; background: url("https://hr.daouoffice.com/lp/2026/0101_promotion/images/img_promotion_pc_deco03.png") no-repeat; background-size: contain; z-index: 5;}

/* 인트로 */
.promotion.function .area_intro {padding: 100px 0; background-color: #252727; max-width: none;}
.function .area_intro .inner {max-width: none; overflow: hidden;}
.area_intro .title_wrap h2 {color: #fff; font-weight: 400;}
.area_intro .cont {display: flex; gap: 24px; margin-top: 24px; max-width: 1920px;}
.area_intro .cont .box {background-color: #464646; padding: 24px 48px; border-radius: 20px; border: 1px solid #464646;}
.area_intro .cont .box .tit {font-size: 22px; font-weight: 400; color: #C5A5FF; line-height: 140%; white-space: nowrap; }

/* 롤링 */
.rolling_box{ --speed: 20s; overflow: hidden; width: 100%;}
.rolling_box .cont{ display: flex; gap: 16px; width: max-content; will-change: transform; animation: rollX var(--speed) linear infinite;}
.rolling_box .box{ flex: 0 0 auto;}

@keyframes rollX{ to{ transform: translateX(-20%); }}
@media (prefers-reduced-motion: reduce){ .rolling_box .cont{ animation: none; }}

/* HR 기능 */
.ic_function {display: inline-block; background: url("https://hr.daouoffice.com/lp/2026/0101_promotion/images/ic_function.svg") no-repeat; background-size: 200px 120px;}
.ic_function.brief {width: 24px; height: 24px; background-position: -49px -28px; vertical-align: middle; margin: -4px 8px 0 0;}
.ic_function.person {width: 24px; height: 24px; background-position: -89px -28px; vertical-align: middle; margin: -4px 8px 0 0;}
.ic_function.beach {width: 24px; height: 24px; background-position: -129px -28px; vertical-align: middle; margin: -4px 8px 0 0;}
.ic_function.calender {width: 24px; height: 24px; background-position: -49px -68px; vertical-align: middle; margin: -4px 8px 0 0;}
.ic_function.paper {width: 24px; height: 24px; background-position: -89px -68px; vertical-align: middle; margin: -4px 8px 0 0;}
.ic_function.plane {width: 24px; height: 24px; background-position: -129px -68px; vertical-align: middle; margin: -4px 8px 0 0;}

.function .area_function .title_wrap {margin-bottom: 52px;}
.area_function .feature_grid:last-child {margin-top: 48px;}
.area_function .feature_grid .feature_card {background-color: #FAFAFC !important; border: 1px solid #EDEDED; box-shadow: 0 2px 12px 0 rgba(82, 27, 174, 0.10);; overflow: hidden;}
.function .area_function .feature_grid h3 {margin-bottom: 12px !important;}

/* 혜택 */
.area_function.purple {background-color:#F2F0FF; position: relative; overflow: hidden; padding: 100px 0;}
.area_function.purple::before{ content:""; position:absolute;inset:0; background: url("https://hr.daouoffice.com/lp/2026/0101_promotion/images/img_promotion_pc_bg02.png") center/cover no-repeat; opacity:.8; z-index:0; pointer-events:none;}
.area_function.purple > *{ position:relative; z-index:1;}
.area_function.purple .feature_grid.wide .feature_card:first-child {background-color: #7F71FF !important; border: 2px solid #ffffffeb; }
.area_function.purple .feature_grid.wide .feature_card:last-child {background-color: #252727 !important; border: 2px solid #ffffffeb; }
.area_function.purple .feature_grid.wide .feature_card .wrap_title {padding: 48px 72px 0; }
.area_function.purple .feature_grid.wide .feature_card .wrap_title .badge{display: inline-block; padding: 4px 12px; border-radius: 8px; margin-bottom: 32px;}
.area_function.purple .feature_grid.wide .feature_card .wrap_title .badge.black{ background-color: #252727; color: #fff;}
.area_function.purple .feature_grid.wide .feature_card .wrap_title .badge.purple{ background-color: #7F71FF; color: #fff;}
.area_function.purple .feature_grid.wide .feature_card .wrap_title h3 {margin-bottom: 8px !important; color: #fff;}
.area_function.purple .feature_grid.wide .feature_card .wrap_title p {font-weight: 300; color: #fff;}
.area_function.purple .desc {display: block; text-align: center;}
.area_function.purple .desc p {color: #999EA0;}
.area_function.purple .feature_grid .feature_card {box-shadow: 0 4px 10px 0 rgba(255, 255, 255, 0.518) inset ;}

/* 도입 */
.area_function .feature_card .box {margin: 24px 0; padding: 24px 32px; background-color: #FCFAFF; border-radius: 12px; border: 1px solid #ECECEC;}
.area_function .feature_card .box li {position: relative; padding-left: 12px; margin-bottom: 12px;}
.area_function .feature_card .box li:last-child {margin-bottom: 0;}
.area_function .feature_card .box li::before {content: "•"; position: absolute; left: 0; top: 0; color: #B475FF;}
.area_function .feature_grid .feature_card.white {background-color: #ffffff !important; border: 2px solid #E8D8FF; box-shadow: 0 2px 12px 0 rgba(82, 27, 174, 0.10);; overflow: hidden;}
.function .area_function .feature_grid .feature_card.white .wrap_title p{font-weight: 400; color:#B475FF;}
.function .area_function .feature_grid .feature_card.white .wrap_title span{margin-right: 4px; font-weight: 600; color:#B475FF;}
.function .area_function .feature_grid .feature_card .wrap_title {max-height: 330px; padding: 40px;}
.function .area_function .feature_grid .feature_card.purple {flex-direction: row; background-color: #CDC0FD !important; border: 1px solid #d0afff;}
.function .area_function .feature_grid .feature_card.purple span {display: inline-block; padding: 4px 8px; margin-bottom: 16px; border-radius: 8px; background-color: #B475FF; color: #fff;}
.function .area_function .feature_grid .feature_card.purple p {color: #333;}
.function .area_function .feature_grid .feature_card.purple .img_card {flex: 1; max-width: 70%;}
.function .area_function .feature_grid .feature_card.purple .btn_wrap a {padding: 10px 20px; font-size: 18px; color:#B475FF; border: 1px solid #B475FF; background-color: #fff;}

@media screen and (max-width: 1400px) {
    .promotion .content_head .deco_img01, .promotion .content_head .deco_img02, .promotion .content_head .deco_img03 {display: none;}
}

@media screen and (max-width: 1200px) {
    .function .area_function .feature_grid h3 {margin-bottom: 4px !important; font-size: 20px;}
    .area_function.purple .feature_grid.wide .feature_card .wrap_title {padding: 40px;}

}

@media screen and (max-width: 959px) {
    /* 롤링 */
    .rolling_box{ overflow: visible; }
    .rolling_box .box:nth-child(n+5){ display:none; }
    .rolling_box .cont{ flex-direction: column;  width: 100%; animation: none;
    transform: none; will-change: auto; gap: 16px; margin-top: 0;}
    

    /* 공통 */
    br.pc {display: none;}
    .title_wrap h2 {margin-bottom: 8px;}
    .title_wrap p {font-size: 20px;}

    .area_intro .cont .box .tit {font-size: 16px; white-space: wrap;}
    .function .area_function .title_wrap {margin-bottom: 32px;}
    .function .area_function .feature_grid .feature_card.purple .img_card {display: none;}
    .area_intro .cont .box {border-radius: 12px;}
    .area_function .feature_card .box {margin: 12px 0; padding: 16px 24px;}
    .function .area_function .feature_grid .feature_card.purple {flex-direction: column;}
    .area_function.purple .feature_grid.wide .feature_card .wrap_title .badge {margin-bottom: 16px;}
    .function .area_function .feature_grid .feature_card .wrap_title {padding: 32px 24px;}
    .function .area_function .feature_grid .feature_card.white .wrap_title p {font-size: 14px;}
    .function .area_function .feature_grid .feature_card.purple .btn_wrap {margin:12px 0 ;}
    .function .area_function .feature_grid .feature_card.purple .btn_wrap a {font-size: 16px;}
    .area_function .feature_grid:last-child {margin-top: 24px;}
    .area_faq {padding-inline: 6% !important;}
}