@charset "utf-8";

#inc03{padding:100px 0 145px;overflow:hidden}
/* swiper */
#inc03 .swiper-wrapper{transition-timing-function:linear !important}
#inc03 .swiper-slide{max-width:710px;width:100%}
#inc03 .swiper-slide a{position:relative;display:flex;align-items:center;gap:35px;padding:42px 55px;background-color:#f5f5f5;border-radius:20px;max-width:710px;width:100%;transition:background-color 0.2s}
#inc03 .swiper-slide a .thumb-box{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:136px;aspect-ratio:1;border-radius:100px;background-color:#fff;background-repeat:no-repeat;background-position:center}
#inc03 .swiper-slide.benefit a .thumb-box{background-image:url(./img/inc03_icon01.png)}
#inc03 .swiper-slide.suit a .thumb-box{background-image:url(./img/inc03_icon02.png);background-position:34px 20px}
#inc03 .swiper-slide.counseling a .thumb-box{background-image:url(./img/inc03_icon03.png)}

#inc03 .swiper-slide a .txt-box h2{padding-bottom:15px;font-family:var(--main-font);font-size:20px;font-weight:700;color:#111}
#inc03 .swiper-slide a .txt-box p.desc{font-family:var(--main-font);font-size:15px;line-height:1.6;color:#777;white-space:pre-line;word-break:keep-all}

#inc03 .swiper-slide a .arrow{position:absolute;bottom:0;right:0;display:flex;align-items:flex-end;justify-content:flex-end;width:63px;aspect-ratio:1;border-radius:var(--main-radius) 0 0 0;background-color:#fff}
#inc03 .swiper-slide a .arrow .ic-arrow{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:50px;aspect-ratio:1;border-radius:100px;background-color:#f5f5f5;transition:background-color 0.2s}
#inc03 .swiper-slide a .arrow .ic-arrow svg{stroke:#111;transition:stroke 0.2s, transform 0.2s}
#inc03 .swiper-slide a .arrow .radius.left{position:absolute;bottom:0;left:-20px;height:20px;width:50px;background-color:#fff}
#inc03 .swiper-slide a .arrow .radius.left::before{position:absolute;content:'';bottom:0;left:0;width:20px;aspect-ratio:1;border-radius:0 0 100px 0;background-color:#f5f5f5;transition:background-color 0.2s}
#inc03 .swiper-slide a .arrow .radius.right{position:absolute;top:-20px;right:0;width:20px;height:50px;background-color:#fff}
#inc03 .swiper-slide a .arrow .radius.right::before{position:absolute;content:'';top:0;right:0;width:20px;aspect-ratio:1;border-radius:0 0 100px 0;background-color:#f5f5f5;transition:background-color 0.2s}

@media (hover:hover){
#inc03 .swiper-slide a:hover{background-color:var(--primary)}
#inc03 .swiper-slide a:hover .txt-box h2{color:#fff}
#inc03 .swiper-slide a:hover .txt-box p.desc{color:rgba(255,255,255,0.9)}
#inc03 .swiper-slide a:hover .ic-arrow{background-color:var(--primary)}
#inc03 .swiper-slide a:hover .ic-arrow svg{stroke:#fff;transform:rotate(-45deg)}
#inc03 .swiper-slide a:hover .arrow .radius.left::before, #inc03 .swiper-slide a:hover .arrow .radius.right::before{background-color:var(--primary)}
}

/* 반응형 [s] */
@media(max-width:1600px){
    #inc03{padding: 0 0 100px;}
    #inc03 .swiper-slide{max-width:640px}
    #inc03 .swiper-slide a{max-width:640px;padding: 40px;}
    #inc03 .swiper-slide a .thumb-box{width: 115px;}
    #inc03 .swiper-slide.suit a .thumb-box{background-position:25px 13px;}
}
@media (max-width:1400px){
    #inc03 .swiper-slide{max-width:580px}
    #inc03 .swiper-slide a{gap: 24px;max-width:580px}
    #inc03 .swiper-slide a .thumb-box{width:100px;background-size: 65px;}
    #inc03 .swiper-slide a .txt-box h2{padding-bottom: 6px;font-size: 18px;}
    #inc03 .swiper-slide a .txt-box p.desc{white-space:normal}
    #inc03 .swiper-slide a .arrow .ic-arrow svg{width: 22px;height: 22px;}
}
@media (max-width:1024px){

    #inc03 .swiper-slide a{flex-direction: column;justify-content: center;gap: 14px;padding: 40px 70px 40px 30px;text-align:center}
    #inc03 .swiper-slide a .thumb-box{width: 85px;background-size: 54px;}
    #inc03 .swiper-slide.suit a .thumb-box{background-position: 20px 13px;}
    #inc03 .swiper-slide a .txt-box h2{font-size: 17px;}
    #inc03 .swiper-slide a .txt-box p.desc{white-space: pre-line;}

    #inc03 .swiper-slide a .arrow{border-radius:32px 0 0 0}
    #inc03 .swiper-slide a .arrow .ic-arrow svg{width: 20px;height: 20px;}
    /* #inc03 .swiper-slide a .arrow .radius.left{left:-10px;height:10px;}
#inc03 .swiper-slide a .arrow .radius.left::before{width:10px}
#inc03 .swiper-slide a .arrow .radius.right{top:-10px;width:10px}
#inc03 .swiper-slide a .arrow .radius.right::before{width:10px} */

}
@media (max-width:768px){
    #inc03 .swiper-slide{max-width:500px}
    #inc03 .swiper-slide a{max-width:500px;padding: 32px 70px 30px 30px;}

    #inc03 .swiper-slide a .txt-box p.desc{white-space: pre-line;}
    #inc03 .swiper-slide a .txt-box h2{padding-bottom: 4px;font-size: 16px;}
}
@media (max-width:480px){
    #inc03 .swiper-slide{max-width:480px}
    #inc03 .swiper-slide a{gap: 8px;max-width:480px;padding: 24px 70px 24px 20px;}
    #inc03 .swiper-slide a .txt-box h2{font-size: 15px;}
    #inc03 .swiper-slide a .txt-box p.desc{font-size: 14px;}
    #inc03 .swiper-slide a .thumb-box{width: 70px;background-size: 40px;}
    #inc03 .swiper-slide.suit a .thumb-box{background-position: 18px 13px;}
    #inc03 .swiper-slide a .arrow{width: 54px;}
    #inc03 .swiper-slide a .arrow .ic-arrow{width: 42px;}
        #inc03 .swiper-slide a .arrow .ic-arrow svg{width: 18px;height: 18px;}

}
/* 반응형 [e] */