@charset "utf-8";
/* 당근고양이 'ㅅ' */

/* for styles */
@import url("default.css");

/* header */
.header {position:fixed; top:0; left:0; width:100%; height:100px; z-index:100; background:#fff; transition:.2s linear;}
.header .logo {position:absolute; top:0; left:3.6458vw; line-height:100px; font-size:0;}
.header .logo h1 {font-size:0; opacity:0; width:0; height:0;}
.header .gnb {display:flex; justify-content:center;}
.header .gnb .menu {position:relative;}
.header .gnb .menu > a {display:block; font-size:20px; color:#222; font-weight:500; line-height:100px; padding:0 60px;}
.header .gnb .menu.on > a {color:#000;}
.header .right {position:absolute; top:0; right:3.6458vw; height:100%; display:flex; justify-content:center; align-items:center; gap:10px;}
.header .right .btn {display:block; font-size:16px; font-weight:500; line-height:30px; height:32px; padding:0 16px; border:1px solid; border-radius:16px;}
.header .right .btn_l {color:#222; background:#fff; border-color:#ddd;}
.header .right .btn_b {color:#fff; background:#222; border-color:#222;}
.header.fixed {box-shadow:0px 4px 20px 0px rgba(0, 0, 0, 0.08);}
.header .gnb .menu {position: relative;}
.header .gnb .menu .submenu {position: absolute; top: 100%; left: 50%; transform: translateX(-50%); display: none; background: #fff; padding: 12px 0; border-radius: 8px; box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.08); min-width: 320px; text-align: center; z-index: 10;}
.header .gnb .menu .submenu a {display: block; padding: 10px 20px; font-size: 16px; color: #555; transition: background 0.3s, color 0.3s;}
.header .gnb .menu:hover .submenu {display: block; animation: dropdown 0.3s ease forwards;}
/* 서브메뉴 드롭다운 모션 */
@keyframes dropdown {
    0% {opacity: 0; transform: translate(-50%, 10px);}
    100% {opacity: 1; transform: translate(-50%, 0px);}
}
/* 서브메뉴 hover 효과 */
.header .gnb .menu .submenu a:hover {background: #22B573; color: #fff;}
.header .gnb .menu .snb {position:relative;}
.header .gnb .menu .depth {position:absolute; top:0; left:100%; width:100%; background:#fff; border-radius:8px; box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.08); display:none;}
.header .gnb .menu .depth a {display:block;}
.header .gnb .menu .snb:hover .depth {display: block; animation: dropside 0.3s ease forwards;}
/* 서브3메뉴 드롭다운 모션 */
@keyframes dropside {
    0% {opacity: 0; transform: translate(-10px, 0);}
    100% {opacity: 1; transform: translate(0, 0);}
}
/* 서브3메뉴 hover 효과 */

/* footer */
.footer {position:relative; background:#fff; color:#222;}
.footer .gotop {position:fixed; bottom:60px; right:60px; width:80px; height:80px; font-size:16px; color:#fff; font-weight:600; background:#178FCF; border-radius:50%; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:4px; z-index:10; transition:none;}
.footer .gotop:before {content:""; display:block; width:100%; height:14px; background:url('/pub/images/arrow_gotop.svg') no-repeat 50% 50% / contain;}
.footer.unfixed .gotop {position:absolute; bottom:calc(100% - 40px);}
.footer .inner {position:relative;}
.footer .fbanner {border-bottom:#EBEBEB 1px solid;}
.footer .fbanner_slide {position:relative; padding:14px 156px 14px 0;}
.footer .fbanner_slide .slick-arrow {position:absolute; top:50%; width:32px; height:32px; margin-top:-16px; font-size:0; border:#ddd 1px solid; border-radius:50%; background:url('/pub/images/arrow_f_slide.svg') no-repeat 50% 50%;}
.footer .fbanner_slide .slick-prev {right:80px;}
.footer .fbanner_slide .slick-next {right:40px; transform:scaleX(-1);}
.footer .fbanner_slide .slick-slide {padding-right:12px; font-size:0;}
.footer .fbanner_slide .slick-slide a {height:60px; display:flex !important; justify-content:center; align-items:center;}
.footer .papl {position:absolute; top:50%; right:20px; width:32px; height:32px; margin-top:-16px; background:no-repeat 50% 50%; border:#ddd 1px solid; border-radius:50%; font-size:0; display:none;}
.footer .papl.on {display:block;}
.footer .pause {background-image:url('/pub/images/btn_pause.svg');}
.footer .play {background-image:url('/pub/images/btn_play.svg'); background-size:10px;}
.footer .f_cont {padding:40px 0 48px;}
.footer .f_cont .inner {display:flex; flex-wrap:wrap; justify-content:space-between;}
.footer .f_info {max-width:830px;}
.footer .link {display:block; font-size:16px; font-weight:700; line-height:1.4;}
.footer .name {font-size:24px; font-weight:700; line-height:1.4; margin:24px 0;}
.footer .address {display:flex; flex-wrap:wrap; gap:10px;}
.footer .address span {font-size:16px; color:#2229; display:flex; gap:10px;}
.footer .address strong {font-weight:500; color:#222;}
.footer .contacts {display:flex; gap:40px; margin-top:40px;}
.footer .contacts li {position:relative; padding-left:82px; line-height:1.4;}
.footer .contacts li:before {content:""; position:absolute; top:0; left:0; width:64px; height:64px; background:#2222220A no-repeat 50% 50%; border-radius:50%;}
.footer .contacts strong {display:block; font-size:18px; color:#22B573; font-weight:600;}
.footer .contacts b {display:block; font-size:24px; font-weight:500; margin-top:8px;}
.footer .contacts li.i1:before {background-image:url('/pub/images/icon_contact01.svg');}
.footer .contacts li.i2:before {background-image:url('/pub/images/icon_contact02.svg');}
.footer .contacts li.i3:before {background-image:url('/pub/images/icon_contact03.svg');}
.footer .gboxs {width:460px;}
.footer .gboxs .gbox {position:relative; background:#F2F4F6; border-radius:10px; width:100%; letter-spacing:-.4px;}
.footer .gboxs strong {font-size:22px;}
.footer .gboxs p {font-size:16px; line-height:1.6; margin-top:16px; letter-spacing:-.6px;}
.footer .gboxs div.gbox {padding:40px 32px; margin-bottom:16px;}
.footer .gboxs a.gbox {padding:20px 24px; display:block;}
.footer .gboxs a.gbox:after {content:""; position:absolute; top:0; right:32px; width:24px; height:100%; background:url('/pub/images/arrow_links.svg') no-repeat 50% 50% / contain;}

/* main */
.navi {display:flex; align-items:center;}
.mvisual_wrap {padding:0 4.1667vw; display:flex; gap:2.29vw; margin-top:130px; color:#222;}
.mvisual_area {position:relative; width:64.1667vw; border-radius:20px; overflow:hidden;}
.mvisual_wrap .links {width:25.208vw;}
.mvisual_area .slick-slide {position:relative; font-size:0;}
.mvisual_area .box {height:740px; display:flex !important;}
.mvisual_area .box img {object-position:100% 100%;}
.mvisual_area .txt {position:absolute; top:6.6vw; left:3.75vw; color:#fff;}
.mvisual_area .txt strong {display:block; font-size:52px; font-weight:800;}
.mvisual_area .txt dl {display:flex; gap:34px; margin-top:16px; font-size:22px; line-height:1.6;}
.mvisual_area .txt dt {position:relative; font-weight:700;}
.mvisual_area .txt dt:after {content:""; position:absolute; top:50%; right:-18px; width:2px; height:14px; background:#ffffff80; transform:translateY(-50%);}
.mvisual_wrap .navi {position:absolute; bottom:13vw; left:3.75vw;}
.navi .paging {padding-right:12px;}
.navi .slick-dots {position:relative;}
.navi .slick-dots li {position:relative; display:none; font-size:16px; color:#ffffff80; line-height:24px;}
.navi .slick-dots span {width:70px;}
.navi .slick-dots strong {color:#fff; font-weight:600;}
.navi .slick-dots i {position:relative; display:block; width:215px; height:3px; background:#ffffff80; border-radius:2px;}
.navi .slick-dots i:before {content:""; position:absolute; top:0; left:0; width:0; height:100%; background:#fff; border-radius:2px;}
.navi .slick-dots .slick-active {display:flex; align-items:center;}
.navi .slick-dots .slick-active i:before {animation:dots_active 5s forwards;}
@keyframes dots_active {
	0% {width:0;}
	100% {width:100%;}
}
.slick_stop .slick-dots li i:before {animation:none !important;}
.navi button {width:24px; height:24px; background:no-repeat 50% 50%;}
.navi .arrow {background-image:url('/pub/images/arrow_slide.svg'); font-size:0;}
.navi .next {transform:scale(-1);}
.navi .papl {margin-left:4px; display:none; font-size:0;}
.navi .on {display:block;}
.navi .pause {background-image:url('/pub/images/btn_pause_w.svg');}
.navi .play {background-image:url('/pub/images/btn_play_w.svg'); background-size:10px;}
.mvisual_wrap .info {margin-bottom:10px;}
.mvisual_wrap .info .tt {font-size:26px; color:#178FCF; font-weight:700; margin-bottom:5px;}
.mvisual_wrap .info p {font-size:16px;}
.mvisual_wrap .links .wide a {position:relative; display:flex; align-items:center; width:100%; height:90px; padding:0 32px; border-radius:10px; background:linear-gradient(90deg, #22B573 0%, #178FCF 100%); font-size:22px; color:#fff; font-weight:600; border: 1px solid transparent; transition: all 0.6s ease;}
.mvisual_wrap .links .wide a + a {margin-top:16px;}
.mvisual_wrap .links .wide a:after {content:""; position:absolute; top:0; right:32px; width:24px; height:100%; background:url('/pub/images/arrow_link.svg') no-repeat 50% 50% / contain;}
.mvisual_wrap .links .wide a.btn_payback i {width:28px; height:28px; background:url('/pub/images/icon_won.svg') no-repeat 50% 50% / contain; margin-left:8px;     animation: floatUpDown 2s ease-in-out infinite; /* 추가 */
}

@keyframes floatUpDown {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0);
    }
}

.mvisual_wrap .links .halfs {display:flex; flex-wrap:wrap; gap:16px; margin-top:30px;}
.mvisual_wrap .links .halfs a {position:relative; width:calc(50% - 8px); height:140px; background:#F2F4F6; border:#F2F4F6 1px solid; border-radius:10px; font-size:22px; font-weight:700; line-height:1.6; padding:24px 28px;}
.mvisual_wrap .links .halfs a:after {content:""; position:absolute; bottom:24px; right:24px; width:58px; height:58px; background:no-repeat 50% 50% / contain;}
.mvisual_wrap .links .halfs a.i1:after {background-image:url('/pub/images/icon_mv01.svg');}
.mvisual_wrap .links .halfs a.i2:after {background-image:url('/pub/images/icon_mv02.svg');}
.mvisual_wrap .links .halfs a.i3:after {background-image:url('/pub/images/icon_mv03.svg');}
.mvisual_wrap .links .halfs a.i4:after {background-image:url('/pub/images/icon_mv04.svg');}

.mcon {padding:130px 0;}
.mtit {position:relative; font-size:44px; font-weight:700; line-height:1.5; margin-bottom:60px;}
.mtit strong {color:#22B573;}
.mcon .more {position: relative; display:block; font-size:18px; font-weight:600; line-height:1.4; width:180px; padding-bottom:8px; background:url('/pub/images/arrow_more.svg') no-repeat 100% 0;  overflow: hidden;}
.mcon .more::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 0;
    background: #222;
    transition: width 0.4s ease;
}
.mcon .more:hover::after {
    width: 100%;
}
.mtit .more {position:absolute; bottom:0; right:0;}

.mc01 {margin-top:120px; padding-top:120px; background:url('/pub/images/bg_mc01.jpg') no-repeat 50% 50% / cover;}
.mc01 .inner {position:relative; display:flex; gap:5.3333%;}
.mc01 .mc01_slide {width:52.26667%; border-radius:16px; overflow:hidden;}
.mc01 .mc01_slide .box {font-size:0; aspect-ratio:392/327; overflow:hidden; border-radius:16px;}
.mc01 .box {display:flex !important; width:100%;}
.mc01 .box .state {display:inline-block; font-size:20px; color:#fff; font-weight:700; line-height:44px; height:44px; padding:0 24px; background:#22B573; border-radius:22px;}
.mc01 .box .tit {font-size:44px; font-weight:700; line-height:1.5; margin-top:12px; letter-spacing:-0.88px; overflow:hidden; text-overflow:ellipsis; white-space:normal; word-wrap:break-word; display:-webkit-box; -webkit-box-orient:vertical; line-clamp:2; -webkit-line-clamp:2;}
.mc01 .txtbox {width:42.4%; z-index:1;}
.mc01 .txtbox .box {flex-direction:column; align-items:flex-start;}
.mc01 .navi {margin-top:60px;}
.mc01 .navi .slick-dots li {color:#22222280;}
.mc01 .navi .slick-dots span {width:80px;}
.mc01 .navi .slick-dots li strong {color:#222;}
.mc01 .navi .slick-dots i:before {background:#222;}
.mc01 .navi .arrow {width:40px; height:40px; background:#fff url('/pub/images/arrow_slide_b.svg') no-repeat 50% 50%; border-radius:50%; border:#ddd 1px solid;}
.mc01 .navi .next {margin-left:4px;}
.mc01 .btns {margin-top:110px; display:flex; gap:20px;}
.mc01 .btns a {position:relative; width:calc(50% - 10px); display:block; font-size:16px; color:#22B573; font-weight:600; line-height:70px; padding:0 32px; background:#fff; border-radius:10px; box-shadow:0px 4px 20px 0px rgba(0, 0, 0, 0.08); overflow:hidden;}
.mc01 .btns a:before,
.mc01 .btns a:after {content:""; position:absolute; top:0; left:0; height:100%; border-radius:inherit; transition:.2s linear;}
.mc01 .btns a:before {left:0; width:0; background:linear-gradient(90deg, #22B573 0%, #178FCF 100%);}
.mc01 .btns a:after {width:100%; border:#22B573 2px solid;}
.mc01 .btns a i {position:absolute; top:0; right:32px; width:24px; height:100%; background:#22B573; mask:url('/pub/images/arrow_link.svg') no-repeat 50% 50% / contain; -webkit-mask:url('/pub/images/arrow_link.svg') no-repeat 50% 50% / contain;}
.mc01 .btns a span {position:relative; z-index:1;}

.mc02 {padding-bottom:170px;}
.mc02 .inner {display:flex;}
.mc02 .tit {width:380px;}
.mc02 .arrow {width:61px; height:61px; border:#ddd 1px solid; border-radius:50%; margin-top:64px; background:#fff url('/pub/images/arrow_slide_b2.svg') no-repeat 50% 50%; background-size: 20px 20px; transition: all 0.4s ease;}
.mc02 .arrow:hover {background: #000 url(/pub/images/arrow_slide_w.svg) no-repeat 50% 50%; background-size: 20px 20px; border-color: #000;}
.mc02 .prev {margin-right:12px;}
.mc02 .con {width:calc(100% - 380px); overflow:hidden;}
.mc02 .con .slick-list {margin:0 -11px;}
.mc02 .con .slick-slide {padding:0 12px; font-size:0;}
.mc02 .con .box {display:block !important; width:100%; border:#EBEBEB 1px solid; border-radius:16px; padding:32px;}
.mc02 .con span {display:block;}
.mc02 .con .imgfit {width:100%; aspect-ratio:293/284;}
.mc02 .con .txt {padding-top:32px; line-height:1.4;}
.mc02 .con b {display:block; font-size:18px; font-weight:500; margin-bottom:10px; word-break:break-word;}
.mc02 .con strong {display:block; font-size:24px; font-weight:600; word-break:break-word;}
.mc02 .con .txt i {display:block; width:120px; height:30px; line-height:30px; text-align:center; border-radius:4px; font-size:15px; color:#666; background:#eee; margin-top:5px;}

.mc03 {background:url('/pub/images/bg_mc03.jpg') no-repeat 50% 100% / cover; padding-top:0 !important;}
.mc03 .list {display:flex; gap:24px;}
.mc03 .list a {position:relative; width:calc((100% - 72px)/4); border-radius:16px; background:#F2F4F6; padding:40px 32px 120px; transition: all 0.4s ease;}
.mc03 .list a * {transition: color 0.4s ease;}
.mc03 .list a:hover {background: #22B573; color: #fff;}
.mc03 .list a:hover * {color: #fff;}
.mc03 .list .type {font-size:16px; color:#00C261; font-weight:700; line-height:1; margin-bottom:24px;}
.mc03 .list .tit {font-size:24px; font-weight:600; line-height:1.6; height:77px; word-break:break-word; overflow:hidden; text-overflow:ellipsis; white-space:normal; word-wrap:break-word; display:-webkit-box; -webkit-box-orient:vertical; line-clamp:2; -webkit-line-clamp:2;}
.mc03 .list p {border-top:#ddd 1px solid; padding-top:32px; margin-top:32px; font-size:18px; color:#666; line-height:1.6; word-break:break-word; overflow:hidden; text-overflow:ellipsis; white-space:normal; word-wrap:break-word; display:-webkit-box; -webkit-box-orient:vertical; line-clamp:3; -webkit-line-clamp:3;}
.mc03 .list .date {position:absolute; bottom:40px; left:32px; font-size:18px; color:#666;line-height:1.6;}

/* 팝업 */
.popup,
.popup .dm {position:fixed; top:0; left:0; width:100%; height:100%;}
.popup {z-index:101; display:none;}
.popup .dm {background:rgba(0,0,0,.5);}
.popup .inbox {position:absolute; top:50%; left:50%; width:540px; background:#fff; transform:translate(-50%,-50%); padding:40px; max-width:calc(100% - 40px); max-height:calc(100vh - 40px); color:#222;}
.popup .btn_close {position:absolute; top:26px; right:24px; width:40px; height:40px; border:#e6e6e6 1px solid; background:url('/pub/images/btn_close.svg') no-repeat 50% 50%; font-size:0;}
.popup .tit {font-size:32px; font-weight:600; line-height:1.5; text-align:center; margin-bottom:24px; padding-right:28px;}
.popup select,
.popup input {width:100%; height:50px; font-size:16px;}
.popup select {margin-bottom:10px;}
.popup dl {display:flex; align-items:center;}
.popup dt {width:120px; font-size:16px;}
.popup dd {width:calc(100% - 120px); display:flex; align-items:center;}
.popup dd input {width:calc(100% - 20px);}
.popup dd span {width:20px; text-align:right;}
.popup .btn {display:block; width:100%; height:50px; line-height:50px; text-align:center; font-size:16px; color:#fff; font-weight:700; background:#178FCF; border-radius:10px; margin-top:20px;}
.popup p {line-height:1.6;}
.popup .pay {font-size:22px; color:#222; margin-top:20px;}
.popup .pt {font-size:15px; color:#666; margin-top:30px;}
.popup .top_txt {padding:10px; border-radius:10px; margin-bottom:10px; padding:20px; background:#f5f5f5;}
.popup .top_txt .tt {font-size:18px; font-weight:700; margin-bottom:5px;}
.popup .top_txt p {font-size:14px; color:#666; line-height:1.4;}