/* P02 교육소개. 기존 SERVER-EDU common.css #edu_landing(836~890행)·m_common.css(157~206행) 값을 따른다. */
.about img { display:block; max-width:100%; height:auto; }
.about picture { display:block; }
.about-layout { width:min(1200px, calc(100% - 64px)); margin-inline:auto; }
.about-title { padding-top:100px; text-align:center; font-size:43px; font-weight:700; letter-spacing:-2px; color:#363636; }
.about-title span { display:block; margin-top:10px; font-size:21px; font-weight:500; letter-spacing:0; color:#707070; }
.about-title::after { content:''; display:block; width:1px; height:44px; margin:40px auto; background:#fa6930; }

.about-visual img { width:100%; height:clamp(600px, 78vw, 940px); object-fit:cover; object-position:center top; }

.about-speciality { background:#fa6930; padding-bottom:110px; }
.about-speciality .about-title, .about-corporate .about-title { color:#fff; }
.about-speciality .about-title span { color:#ffdcce; }
.about-speciality .about-title::after, .about-corporate .about-title::after { background:#fff; }
.about-speciality__list { position:relative; display:flex; flex-wrap:wrap; justify-content:center; }
.about-speciality__list picture { width:340px; }
.about-speciality__date { position:absolute; right:100px; bottom:40px; font-size:16px; color:#ffdcce; }

.about-curriculum { background:#fbfbfb; padding:65px 0 120px; }
.about-curriculum__list { display:grid; grid-template-columns:1fr 1fr; border:3px solid #fa6930; padding:26px; background:#fff; }
.about-curriculum__list a { display:flex; align-items:center; padding:20px 10px 30px 30px; }
.about-curriculum__list a:nth-child(odd) { border-right:1px solid #d1d3d4; padding-left:10px; }
.about-curriculum__list a:nth-child(-n+2) { border-bottom:1px solid #d1d3d4; padding-top:10px; }

.about-popular { background:#3a3a3a url('/resource/images/about/introduce/popularity_bg.jpg') no-repeat center top; }
.about-popular .about-title { color:#fdfdfd; }
.about-popular .about-title span { color:#ccc; }
.about-popular__list { display:flex; justify-content:center; gap:10px; padding-bottom:95px; }
.about-popular__list a { flex:0 1 292px; min-width:0; }
.about-popular__list img { width:292px; }
.about-carousel__dots, .about-carousel__arrow { display:none; }
.about-band { background:#fa6930; }
.about-band .about-layout { position:relative; height:140px; }
.about-band img { position:absolute; left:0; bottom:0; }

.about-fields { background:#f5f5f5; }
.about-field { padding-bottom:50px; scroll-margin-top:20px; }
.about-field__title { position:relative; height:66px; margin-bottom:50px; border:2px solid #fa6930; text-align:center; font-size:25px; line-height:62px; letter-spacing:-1px; color:#363636; }
.about-field__title::before, .about-field__title::after { content:''; position:absolute; top:25px; width:30px; height:12px; background:#fa6930; }
.about-field__title::before { left:2px; }
.about-field__title::after { right:2px; }
.about-field__list { display:grid; grid-template-columns:repeat(4, 292px); gap:50px 10px; }
.about-card { position:relative; display:block; }
.about-card picture, .about-card img { width:100%; }
.about-card__hover { position:absolute; inset:0; opacity:0; transition:opacity .15s; }
.about-card:hover .about-card__hover, .about-card:focus-visible .about-card__hover { opacity:1; }
.about-card--mobile { display:none; }

.about-corporate { background:#d9673d url('/resource/images/about/introduce/6_bg.jpg') no-repeat center top; padding-bottom:40px; scroll-margin-top:20px; }
.about-corporate .about-title span { color:#fff; }
.about-corporate .about-title span img { margin:10px auto 0; }
.about-corporate .about-title::after { margin:40px auto 0; }
.about-corporate__pc { position:relative; }
.about-corporate__pc>img { margin:0 auto; }
.about-corporate__pc a { position:absolute; left:50%; bottom:72px; transform:translateX(-50%); }
.about-corporate__mobile { display:none; }

.about-review { padding-bottom:200px; }
.about-review .about-title::after { background:#363636; }

@media(max-width:1259px) {
    .about-field__list { grid-template-columns:repeat(4, minmax(0,1fr)); }
    .about-speciality__list picture { width:calc((100% - 40px) / 3); }
    .about-speciality__date { position:static; width:100%; text-align:right; margin-top:16px; }
    .about-popular__list img { width:100%; }
    .about-band img { width:100%; }
}
/* P02는 통이미지 가독성을 위해 1200px 미만부터 모바일 이미지·배치로 함께 전환한다. */
@media(max-width:1199.98px) {
    .about-layout { width:100%; max-width:720px; }
    .about-title { padding-top:50px; font-size:22px; }
    .about-title span { font-size:14px; margin-top:4px; }
    .about-title::after { height:22px; margin:20px auto; }
    .about-visual { background:#333; }
    .about-visual picture { max-width:720px; margin-inline:auto; }
    .about-visual img { height:auto; }
    .about-speciality { padding-bottom:50px; }
    .about-speciality__list { padding:0 25px; }
    .about-speciality__list picture { width:46%; margin:1%; }
    .about-speciality__list img { width:100%; }
    .about-speciality__date { margin:1%; text-align:center; font-size:12px; }
    .about-curriculum { padding:0 20px 50px; }
    .about-curriculum .about-title { border-bottom:1px solid #fa6930; margin-bottom:25px; }
    .about-curriculum .about-title::after { display:none; }
    .about-curriculum .about-title { padding-bottom:20px; }
    .about-curriculum__list { border:0; padding:0; background:none; }
    .about-curriculum__list picture { width:100%; }
    .about-curriculum__list a, .about-curriculum__list a:nth-child(odd), .about-curriculum__list a:nth-child(-n+2) { justify-content:center; padding:0 0 25px; border:0; }
    .about-curriculum__list img { width:90%; margin-inline:auto; }
    .about-popular { background:#fa6930 url('/resource/images/about/landing/edu/mo/5_bg.jpg') no-repeat center top; background-size:min(100%, 720px) auto; }
    .about-carousel { padding-bottom:30px; }
    .about-carousel__frame { position:relative; }
    .about-carousel__dots { display:flex; justify-content:center; gap:9px; padding-bottom:22px; }
    .about-carousel__dots button { width:10px; height:10px; padding:0; border-radius:50%; background:#aaa; position:relative; }
    .about-carousel__dots button::before { content:''; position:absolute; inset:-10px -5px; }
    .about-carousel__dots button[aria-current=true] { background:#fa6930; }
    .about-carousel__arrow { display:block; position:absolute; top:50%; transform:translateY(-50%); z-index:1; background:transparent; color:#fff; font-size:42px; font-weight:200; width:44px; height:60px; line-height:1; }
    .about-carousel__arrow--prev { left:3%; }
    .about-carousel__arrow--next { right:3%; }
    .about-popular__list { width:min(58%, 406px); margin-inline:auto; justify-content:flex-start; gap:0; overflow-x:auto; scroll-snap-type:x mandatory; padding:0; scrollbar-width:none; }
    .about-popular__list::-webkit-scrollbar { display:none; }
    .about-popular__list a { flex:0 0 100%; scroll-snap-align:start; }
    .about-popular__list img { width:100%; }
    .about-band { background:none; }
    .about-band .about-layout { height:auto; }
    .about-band img { position:static; width:100%; }
    .about-fields { padding:0 20px; }
    .about-fields .about-layout { max-width:1200px; }
    .about-field__title { height:33px; margin-bottom:25px; font-size:14px; line-height:29px; }
    .about-field__title::before, .about-field__title::after { top:12px; width:15px; height:6px; }
    .about-field { padding-bottom:0; }
    .about-field__list { gap:24px 16px; padding-bottom:30px; }
    .about-card { padding:0; }
    .about-card--mobile { display:block; }
    .about-card[hidden] { display:none; }
    .about .about-card__hover { display:none; }
    .about-corporate { background:#d9673d url('/resource/images/about/landing/edu/mo/6_bg.jpg') no-repeat center top; background-size:cover; padding:0 20px 50px; }
    .about-corporate .about-title span img { width:65px; }
    .about-corporate__pc { display:none; }
    .about-corporate__mobile { display:block; margin-top:20px; }
    .about-corporate__mobile img { width:100%; }
    .about-review { padding:0 20px 100px; }
    .about-review picture { max-width:640px; margin-inline:auto; }
    .about-review picture img { width:100%; }
}
@media(max-width:1023px) {
    .about-field__list { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(max-width:767px) {
    .about-field__list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 12px; }
}