@charset "UTF-8";
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
* { margin:0; padding:0; font:inherit; color:inherit; } 
*, :after, :before { box-sizing:border-box; flex-shrink:0; } 
:root { -webkit-tap-highlight-color:transparent; -webkit-text-size-adjust:100%; text-size-adjust:100%; cursor:default; line-height:1.5; overflow-wrap:break-word; -moz-tab-size:4; tab-size:4 } 
html, body { height:100%; line-height: 1; font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; letter-spacing: -0.025em; } 
img, picture, video, canvas, svg { display: block; max-width:100%; } 
video { box-sizing: border-box; } 
input { box-sizing: border-box; background: transparent; } 
button { background:none; border:0; cursor:pointer; box-sizing: border-box; background: transparent; } 
a { text-decoration:none; transition: 0.3s; } 
table { border-collapse:collapse; border-spacing:0 } 
ul, ol, li { list-style: none; } 
pre {white-space: pre-wrap;}

input[type=text], input[type=number], input[type=email], button, textarea, select , input[type=button], input[type=submit], input[type=reset] {
	 appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
	border-radius: 0;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
}
select { background: transparent url("../Images/sel_arrow.svg") no-repeat calc(100% - 1.18rem) 50%; } 
input,
input:focus {outline: none;}

.wrapper { max-width: 1080px; width: 100%; margin: 0 auto; }

.kaghCourse {width: 100%; display: flex ; flex-wrap: wrap; gap:20px;}
.kaghCourse a {width: calc(33.3% - (40px/3)); display: flex ; flex-direction: column; cursor: pointer;}
.kaghCourse a > .thum,
.kaghCourse a > .thum::after,
.kaghCourse a > .thum::before {cursor: pointer;}
.kaghCourse a:first-of-type {width: 100%; display: flex ; flex-direction: row;}
.kaghCourse a:first-of-type > img {border-radius: 10px;}
.kaghCourse a > .thum {width: 100%; height: 185px; position: relative; overflow: hidden; border-radius: 10px;}
.kaghCourse a:nth-of-type(1)  > .thum {height: 280px;}
.kaghCourse a > .thum img {position: absolute; width: 100%; height: 100%;  object-fit: cover; transition: all 0.3s ease-in-out; top: 0; left: 0; z-index: 1;  transform: scale(1) rotate(0deg); } 			
.kaghCourse a > .thum::before {content: ''; position: absolute; top: 0; left:0; width: 100%; height: 100%; background: #000; display: block; z-index: 5; opacity: 0;   transition: 0.3s;}
.kaghCourse a > .thum::after {content: '바로가기'; position: absolute; top: 50%; left:50%; transform: translate(-50%, -50%); display: block; z-index: 6; font-size: 16px; border: 1px solid #fff;  color: #fff; opacity: 0; border-radius: 4px; padding: 5px 20px; transition: 0.3s;}

.kaghCourse a > b {font-size: 20px; font-weight: 700; color: #343434; letter-spacing: -0.01em;  width: 100%; text-overflow: ellipsis; overflow: hidden; word-break: break-word; display: -webkit-box;  -webkit-line-clamp: 2; -webkit-box-orient: vertical; transition: 0.3s; padding: 10px 0 5px 0; line-height: 138%;}


@media (min-width: 990px) {
.kaghCourse a:hover > .thum img { transform: scale(1.05) rotate(2deg); }
.kaghCourse a:hover > .thum::before { opacity: 0.7; }
.kaghCourse a:hover > .thum::after { opacity: 0.9; }
.kaghCourse a:first-of-type:hover {opacity: 0.8;}
.kaghCourse a:nth-of-type(1):hover > .thum img { transform: scale(1.02) rotate(0);}
.kaghCourse a:nth-of-type(1):hover > .thum::before {opacity: 0.3;}
.kaghCourse a:nth-of-type(1):hover > .thum::after {opacity: 0;}
.kaghCourse a:hover > b { color: #005ded; }
}

@media (max-width: 990px) {
    .wrapper {  padding: 0 20px;}
    .kaghCourse {gap:14px}
    .kaghCourse a:nth-of-type(n+3) {width: calc(50% - 7px); }
    .kaghCourse a:first-of-type > img {border-radius: 6px;}
    .kaghCourse a:nth-of-type(2)> .thum {height: auto; border-radius: 6px; }
    .kaghCourse a:nth-of-type(2) > .thum img{position: relative; width: 100%;}
        .kaghCourse a:nth-of-type(n+3)> .thum  {height: auto; padding-bottom: 52%; border-radius: 6px; }
    .kaghCourse a > b {font-size: 2.6vw;}
}