@charset "utf-8";

#shopSkill{margin-bottom: 210px;}
#shopSkill .inner{}
#shopSkill .tit{padding-bottom: 50px;text-align: center;}
#shopSkill .tit .tip{}
#shopSkill .tit h2{font-size: 45px}
#shopSkill .cont{position: relative;}
#shopSkill .cont .swiper-container{}
#shopSkill .cont .swiper-wrapper{}
#shopSkill .cont .swiper-slide{}
#shopSkill .cont .link-skill{display: flex;flex-direction: column;align-items: center;}
#shopSkill .cont .link-skill .thumb-box{width: 100%;aspect-ratio: 415 / 273;overflow: hidden;border-radius: 5px;}
#shopSkill .cont .link-skill .thumb-box img{width: 100%;height: 100%;object-fit: cover;transition:transform 0.2s}
#shopSkill .cont .link-skill .txt-box{position: relative;z-index:1;width: 100%;padding: 0 38px;margin-top: -50px;}
#shopSkill .cont .link-skill .txt-box .wrap{display: flex;flex-direction: column;align-items: center;width: 100%;padding: 24px 0;text-align: center;background-color: #fff;border-radius: 13px;}

#shopSkill .cont .link-skill .txt-box h3{font-family: var(--mainfont);font-size: 16px;font-weight: 500;color: #aaa;white-space: pre-line;line-height: 1.5;word-break:keep-all}
#shopSkill .cont .link-skill .txt-box h3 strong{font-size: 20px;font-weight: 600;color: #000;}
#shopSkill .cont .link-skill .txt-box p.desc{padding: 18px 0 28px;font-size: 14px;line-height: 1.4;color: #777;white-space: pre-line;word-break:keep-all}
#shopSkill .cont .link-skill .txt-box span.btn{display: flex;align-items: center;justify-content: center;width: 100%;padding: 8px 10px;border: 1px solid #e1e1e1;border-radius: 5px;font-size: 14px;font-weight: 600;color: #aaa;transition:background-color 0.2s, color 0.2s,border-color 0.2s}
#shopSkill .cont .link-skill:hover .txt-box span.btn{background-color: var(--primary);color:#fff;border-color: var(--primary);}
#shopSkill .cont .link-skill:hover .thumb-box img{transform: scale(1.1);}


/* 반응형 [s] */
@media (max-width:1600px){
    #shopSkill{margin-bottom: 100px;}
    #shopSkill .tit{padding-bottom: 40px;}
    #shopSkill .tit h2{font-size: 38px;}
}
@media (max-width:1300px){
    #shopSkill .tit h2{font-size: 34px;}
    #shopSkill .cont .link-skill .txt-box{padding: 0 28px;}
}
@media (max-width:1200px){
    #shopSkill{margin-bottom:80px;}
    #shopSkill .cont .link-skill .txt-box .wrap{border-radius:10px}
    #shopSkill .cont .link-skill .txt-box h3{font-size: 15px;}
    #shopSkill .cont .link-skill .txt-box h3 strong{font-size: 18px;}
    #shopSkill .cont .link-skill .txt-box p.desc{padding: 12px 0 22px;}
}
@media (max-width:1024px){
    #shopSkill .cont .link-skill .txt-box{padding: 0 14px;margin-top: -70px;}
    #shopSkill .cont .link-skill .txt-box .wrap{padding: 18px 0;}
    #shopSkill .cont .link-skill .txt-box h3{font-size: 14px;}
    #shopSkill .cont .link-skill .txt-box h3 strong{font-size: 16px;}
    #shopSkill .cont .link-skill .txt-box p.desc{padding: 10px 0 18px;}
}
@media (max-width:768px){
        #shopSkill{margin-bottom:60px;}

      #shopSkill .tit{padding-bottom: 26px;}
    #shopSkill .tit h2{font-size: 28px;}
    #shopSkill .cont .link-skill .txt-box{margin-top: -60px;}
}
@media (max-width:620px){
    #shopSkill .inner{padding: 0 !important;}
        #shopSkill .cont .link-skill .txt-box{margin-top: -40px;}

}
@media (max-width:480px){
    /* #shopSkill{margin-bottom: 40px;} */
            #shopSkill{margin-bottom:40px;}
            
            #shopSkill .tit h2{font-size: 24px;}
            #shopBoard .board--faq .board__cont{border-radius:5px}
        }
        @media (max-width:390px){
    #shopSkill .inner{padding: 0 20px !important;}

}