/* BASIC css start */
.displaynone {
display: none !important;
}

#content {
width: 100% !important;
max-width: unset !important;
color: #111;
}

#contentWrap {
min-height: 100vh;
}

#contentWrapper {
background: #fafafa;
margin-top: 140px;
}

/* =========================
TITLE
========================= */

#content .title {
width: calc(100% - 160px);
max-width: 1400px;
margin: 0 auto;
padding: 80px 0;
}

#content .title img {
width: 180px;
display: block;
}

/* =========================
TOP GRID
========================= */

#content .grid-wrap {
width: calc(100% - 160px);
max-width: 1400px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}

#content .grid-wrap .image_grid {
overflow: hidden;
border-radius: 24px;
cursor: pointer;
transition: all .35s ease;
}

#content .grid-wrap .image_grid img {
width: 100%;
display: block;
}

#content .grid-wrap .image_grid:hover {
transform: translateY(-12px);
}

/* =========================
DETAIL SECTION
========================= */

#content .section {
width: calc(100% - 160px);
max-width: 1400px;
margin: 140px auto;
display: flex;
flex-direction: column;
gap: 140px;
}

#content .class_wrap {
display: flex;
flex-direction: column;
gap: 24px;
}

#content .class_title {
font-size: 42px;
font-weight: 600;
line-height: 1.2;
color: #111;
}

#content .class_desc {
font-size: 17px;
line-height: 1.8;
color: #666;
}

#content .image_wrap {
width: 100%;
min-height: 500px;
border-radius: 30px;
background: #fff;
border: 1px solid #ececec;

display: flex;
align-items: center;
justify-content: center;

color: #999;
font-size: 24px;
margin-top: 10px;
}

/* =========================
CARD (숨김영역)
========================= */

#content .card {
padding: 40px;
border-radius: 20px;
background: #f4e1d2;
}

#content .card-title {
font-size: 26px;
font-weight: 600;
margin-bottom: 15px;
}

#content .card-desc {
line-height: 1.8;
}

#content .card-point {
margin-top: 20px;
font-weight: 500;
}

/* =========================
TABLET
========================= */

@media all and (max-width:1024px){

#contentWrapper {
margin-top: 100px;
}

#content .title,
#content .grid-wrap,
#content .section {
width: calc(100% - 60px);
}

#content .grid-wrap {
grid-template-columns: repeat(2, 1fr);
}

#content .class_title {
font-size: 34px;
}

#content .image_wrap {
min-height: 380px;
}
}

/* =========================
MOBILE
========================= */

@media all and (max-width:768px){

#contentWrapper {
margin-top: 70px;
}

#content .title {
width: calc(100% - 32px);
padding: 50px 0;
}

#content .title img {
width: 140px;
}

#content .grid-wrap,
#content .section {
width: calc(100% - 32px);
}

#content .grid-wrap {
grid-template-columns: 1fr;
gap: 16px;
}

#content .section {
margin: 80px auto;
gap: 80px;
}

#content .class_title {
font-size: 28px;
}

#content .class_desc {
font-size: 15px;
}

#content .image_wrap {
min-height: 250px;
border-radius: 20px;
font-size: 18px;
}

#content .grid-wrap .image_grid:hover {
transform: none;
}
}

/* BASIC css end */