@charset "utf-8";
#main-latest{position:relative;display:flex;gap:40px;padding:50px calc((100% - 1440px) / 2)}
#main-latest>div{width:calc(50% - 20px)}
#main-latest .qna .tit{background-color:var(--primary)}
#main-latest .free .tit{background-color:var(--second)}
#main-latest .tit{display:flex;justify-content:space-between;align-items:center;padding:16px 40px;border-radius:10px}
#main-latest .tit>div:first-child{display:flex;align-items:center;gap:10px}
#main-latest .tit h2{font-size:24px;font-weight:700;color:#fff}
#main-latest .tit span{font-size:15px;font-weight:600;color:rgb(255, 255, 255, 0.6)}
#main-latest .tit .more{display:flex;justify-content:center;align-items:center;padding:8px;border-radius:5px;color:#fff;background-color:rgb(17, 17, 17, 0.15)}
#main-latest .tit .more svg{width:21px;height:21px;transition:all.5s}
#main-latest .slide{position:relative;margin-top:20px;width:100%;height:600px} 
#main-latest .slide ul li+li{border-bottom:1px solid #e1e1e1}
#main-latest .slide a{display:flex;align-items:baseline;gap:20px;padding:35px 20px;width:100%;height:100%}
#main-latest .slide .subj{display:flex;align-items:center;width:100%;font-size:17px;font-weight:600;color:var(--dark);transition:all .3s}
#main-latest .slide .subj p{max-width:85%}
#main-latest .slide .post{width:calc(100% - 100px)}
#main-latest .slide .cont{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;width:85%;margin:15px 0;font-weight:300;color:#777}
#main-latest .slide .date{font-size:14px;color:#aaa}
#main-latest .slide .answer{display:flex;justify-content:space-between;align-items:center;padding:5px 15px;border:1px solid #e1e1e1;border-radius:5px;font-size:14px;font-weight:500;color:#aaa;transition:all .3s}
#main-latest .slide .answer span{font-size:14px;font-weight:700;color:var(--primary);transition:all .3s}
#main-latest .slide .cop{display:flex;justify-content:center;padding:5px 18px;border:1px solid #e1e1e1;border-radius:5px;font-size:15px;font-weight:600;color:var(--dark);transition:all .3s}
#main-latest .slide ul li .answer{flex-shrink:0;width:100px} 
#main-latest .empty{padding-top:50px;text-align:center}
#main-latest .rightSlide a > div:first-child{min-width:90px} 
#main-latest .rightSlide .subj{display:flex;align-items:center}
#main-latest .rightSlide .cate{display:flex;justify-content:center;padding:5px 15px;margin-right:10px;border:1px solid #111;border-radius:5px;font-size:15px;font-weight:600;color:var(--dark);transition:all .3s}
@media (hover:hover){
#main-latest .tit .more:hover svg{transform:rotate(180deg)}
#main-latest .leftSlide a:hover .subj{color:var(--primary)}
#main-latest .leftSlide a:hover .answer{border:1px solid var(--primary);color:rgb(255, 255, 255, 0.6);background-color:var(--primary)}
#main-latest .leftSlide a:hover  span{color:#fff}
#main-latest .rightSlide a:hover .subj{color:var(--second)}
#main-latest .rightSlide a:hover .cate{border:1px solid var(--second);color:var(--second)}
#main-latest .rightSlide a:hover .cop{border:1px solid var(--second);color:#fff;background-color:var(--second)}
}
#main-recruit{display:flex;gap:50px;padding:80px calc((100% - 1300px) / 2);background:var(--pale)}
#main-recruit .tit{flex-shrink:0;width:240px;padding-top:20px;font-size:18px}
#main-recruit .tit h2{font-size:32px;font-weight:700;color:var(--dark)}
#main-recruit .tit a{display:flex;gap:10px;align-items:center;margin-top:30px;font-size:14px;font-weight:700;color:var(--primary)}
#main-recruit .tit a svg{width:18px;height:18px}
#main-recruit .slide{width:calc(100% - 240px);padding:10px 20px}
#main-recruit ul{margin-left:auto}
#main-recruit ul li{border-radius:12px;background:#fff;transition:all .2s}
#main-recruit ul li a{display:block;padding:30px;color:#777}
#main-recruit ul li span{padding:6px 15px;border-radius:4px;font-size:14px;color:#fff;background:var(--primary)}
#main-recruit ul li p{margin:50px 0 5px 0;font-size:17px;font-weight:700;color:var(--dark)}
#main-recruit ul li:hover{transform:translate(-5px, -5px);box-shadow:3px 3px 16px var(--primary-15)}
#main-recruit ul li.empty{padding:50px}

@media(max-width:1480px){
#main-latest{padding:50px 15px}
#main-recruit{gap:30px}
#main-recruit .tit{padding:20px 0 0 20px}
}
@media(max-width:1024px){
#main-latest{gap:20px}    
#main-latest .tit{padding:12px 20px;}    
#main-latest .tit h2{font-size:18px}
#main-latest .slide .subj{font-size:16px}
#main-latest .slide ul li .answer{width:85px;font-size:13px}
}
@media(max-width:768px){
#main-latest{display:block;padding:0 15px 25px}    
#main-latest>div{width:100%}
#main-latest .tit{padding:8px 8px 8px 15px}
#main-latest .tit h2{font-size:16px}
#main-latest .tit span{font-size:13px}
#main-latest .tit .more{padding:5px}
#main-latest .slide{height:135px;margin-top:0}
#main-latest .slide a{gap:15px;padding:15px}
#main-latest .slide ul li+li{border:none}
#main-latest .slide ul li .answer{gap:10px;width:auto;padding:5px 10px;font-size:12px}
#main-latest .slide .post{width:calc(100% - 80px)}
#main-latest .slide .answer span{font-size:12px}
#main-latest .slide .subj{font-size:14px}
#main-latest .slide .subj p{max-width:calc(100% - 20px)}
#main-latest .slide .cont{margin:10px 0}
#main-latest .slide .date{font-size:12px}
#main-recruit{display:block;padding:40px 0}
#main-recruit .tit{width:100%;padding:0;font-size:16px;text-align:center}
#main-recruit .tit h2{font-size:24px}
#main-recruit .tit a{justify-content:center;margin:10px 0}
#main-recruit .slide{width:100%}
#main-recruit ul li a{padding:15px}
#main-recruit ul li span{padding:3px 10px;font-size:13px}
#main-recruit ul li p{margin-top:25px;font-size:16px}
}