/*스타일*/

.contents {width:100%; position:relative; overflow:hidden;}

.contents .sub-visual {width:100%; max-width:var(--wide-w); height:220px; margin:0 auto; background:url(/theme/oklass20/img/conts/sub_visual.jpg) center no-repeat; background-size:cover; display:flex; align-items:center; justify-content:center;}
.contents .sub-visual > .wrap {width:90%; margin:0 auto;}
.contents .sub-visual .title-box {width:100%;}
.contents .sub-visual .title-box h1 {font-size:var(--font-36); font-weight:700; color:#444; width:fit-content; position:relative; margin:0 auto; padding-bottom:20px;}
.contents .sub-visual .title-box h1:after {content:""; width:40px; height:6px; background:#444; position:absolute; left:50%; bottom:0; transform:translateX(-50%);}

@media screen and (max-width: 768px) {
    .contents .sub-visual {display:none;}
}


.contents .contents-area {width:100%; padding:var(--gap-30) 0 calc(var(--gap-40) * 2) 0;} /*25.2.24 하단여백변경*/
.contents .contents-area > .wrap {width:90%; max-width:var(--max-w); margin:0 auto;}

.contents .page-title {width:100%; padding:0 10px; margin-bottom:var(--gap-30);}
.contents .page-title h2 {font-size:var(--font-30); font-weight:700;}

@media screen and (max-width: 1024px) {
    .contents .page-title {padding:0;}
    .contents .page-title h2 {font-size:var(--font-30);}
}


.contents .snb-tab {width:100%; margin-bottom:calc(var(--gap-80) * 0.875);}
.contents .snb-tab .snb-tab-wrap {width:100%; overflow-x:auto; overflow-y:hidden;}
.contents .snb-tab .snb-tab-wrap::-webkit-scrollbar {background:transparent;}
.contents .snb-tab .snb-tab-wrap::-webkit-scrollbar-thumb {background:var(--white);}
.contents .snb-tab .tab-box {width:100%; height:50px; display:flex; align-items:center;}
.contents .snb-tab .tab-box .tab {flex:1; height:100%; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; padding:0 var(--gap-16); font-size:var(--font-18); font-weight:700; color:var(--white); background:var(--light-purple); text-align:center; line-height:1.3; position:relative;}
.contents .snb-tab .tab-box .tab.on,
.contents .snb-tab .tab-box .tab:hover {background:var(--baby-blue);}

@media screen and (max-width: 1024px) {
    .contents .snb-tab {border-top:1px solid var(--light-purple);}
    .contents .snb-tab .tab-box .tab,
    .contents .snb-tab .tab-box .tab.on,
    .contents .snb-tab .tab-box .tab:hover {background:#dde0ed;}
    .contents .snb-tab .tab-box {height:calc(var(--n-80) * 0.8);}
    .contents .snb-tab .tab-box .tab {color:#5a5e71; font-size:var(--font-20);}
    .contents .snb-tab .tab-box .tab.on {color:var(--light-purple);}
    .contents .snb-tab .tab-box .tab.on:after {content:""; width:100%; height:var(--gap-8); background:var(--light-purple); position:absolute; left:0; bottom:0;}
}

@media screen and (max-width: 648px) {
    .contents .snb-tab .tab-box {width:fit-content; min-width:100%;}
    .contents .snb-tab .tab-box .tab {flex:auto; width:fit-content; padding:0 var(--gap-24); white-space:nowrap;}
}

.contents .contents-area .section-wrap {width:100%; max-width:1150px; margin:0 auto; }
.contents .contents-area .section-wrap.wide {max-width:100%;}
.contents .contents-area .section-wrap section {width:100%; margin-top:var(--gap-80);}
.contents .contents-area .section-wrap section:first-child {margin-top:0;}
.contents .contents-area .section-wrap section article {width:100%; margin-top:var(--gap-24);}
.contents .contents-area .section-wrap section article:first-child {margin-top:0;}



/*대학소개*/
.about ul.about-com-layout {width:100%;}
.about ul.about-com-layout li {width:100%; padding:var(--gap-40) 0; display:flex; align-items:flex-start; position:relative;}
.about ul.about-com-layout li:after {content:""; width:calc(100% - 230px); height:100%; box-sizing:border-box; border-bottom:2px dashed #e5e5e5; position:absolute; right:0; bottom:0; z-index:0;}
.about ul.about-com-layout li > * {position:relative; z-index:10;}
.about ul.about-com-layout li .head {width:230px; font-size:var(--font-30); font-weight:800; color:var(--blue); display:flex; align-items:center; gap:0 var(--gap-16);}
.about ul.about-com-layout li .head span {position:relative;}
.about ul.about-com-layout li .conts-box {width:calc(100% - 230px); color:#373737;}
.about ul.about-com-layout li .conts-box > * {margin-top:var(--gap-60);}
.about ul.about-com-layout li .conts-box > *:first-child {margin-top:0;}
.about ul.about-com-layout li.wide {flex-direction:column; gap:var(--gap-16) 0;}
.about ul.about-com-layout li.wide .head, .about ul.about-com-layout li.wide .conts-box {width:100%;}

.about ul.about-com-layout.typeA li .head .num:after {content:""; width:100%; height:var(--gap-8); background:var(--blue); position:absolute; left:0; bottom:calc(var(--gap-8) * -1);}

.about ul.about-com-layout.typeB li {flex-direction:column; gap:var(--gap-32) 0; padding:0; margin-top:var(--gap-60);}
.about ul.about-com-layout.typeB li:first-child {margin-top:0;}
.about ul.about-com-layout.typeB li:after {display:none;}
.about ul.about-com-layout.typeB li .head, 
.about ul.about-com-layout.typeB li .conts-box {width:100%;}
.about ul.about-com-layout.typeB li .head {display:block; text-align:center;}

.about ul.about-com-layout.typeC li {padding:0; margin-top:var(--gap-60);}
.about ul.about-com-layout.typeC li:first-child {margin-top:0;}
.about ul.about-com-layout.typeC li:after {display:none;}
.about ul.about-com-layout.typeC li .head .title {padding-left:var(--gap-24);}
.about ul.about-com-layout.typeC li .head .title:before {content:""; width:var(--font-14); height:var(--font-14); border-radius:50%; box-sizing:border-box; border:3px solid var(--blue); position:absolute; left:0; top:50%; transform:translateY(-50%);}

.about ul.about-com-layout.typeD li .head .title {padding-left:var(--gap-24);}
.about ul.about-com-layout.typeD li .head .title:before {content:""; width:var(--font-14); height:var(--font-14); border-radius:50%; box-sizing:border-box; border:3px solid var(--blue); position:absolute; left:0; top:50%; transform:translateY(-50%);}




@media screen and (max-width: 1024px) {
    .about ul.about-com-layout li {flex-direction:column; gap:var(--gap-40);}
    .about ul.about-com-layout li:after {display:none;}
    .about ul.about-com-layout li .head,
    .about ul.about-com-layout li .conts-box {width:100%;}

    .about ul.about-com-layout.typeD li {gap:var(--gap-24) 0;}
    .about ul.about-com-layout.typeD li {padding:var(--gap-24) 0;}
    .about ul.about-com-layout.typeD li:after {width:100%; display:block;}
}

@media screen and (max-width: 768px) {
    .about ul.about-com-layout li .head {font-size:var(--font-24);}
}



.about .round-conts-wrap {width:100%; display:flex; gap:0 var(--gap-24);}
.about .round-conts-wrap .col {flex:1; color:var(--font-gray);}

.about .round-box {background:var(--white); box-shadow:6px 6px 14px rgba(7, 36, 82, 0.15); position:relative;}
.about .round-box .conts {position:relative; font-size:var(--font-24); letter-spacing:-1px;}
.about .round-box .conts .bold {font-weight:700;}

.about .round-box.typeA {height:var(--n-80); border-radius:200px; display:flex; align-items:center; justify-content:center; padding:0 var(--gap-32); text-align:center; flex-wrap:wrap;}
.about .round-box.typeA .conts {font-weight:800; color:var(--blue);}
.about .round-box.typeA:before {content:""; width:20px; height:20px; border-radius:50%; box-sizing:border-box; border:4px solid var(--blue); position:absolute; left:50%; top:-10px; transform:translateX(-50%);}

.about .round-box.typeB {border:1px solid var(--blue); min-height:100px; border-radius:var(--gap-32); display:flex; align-items:center; justify-content:center; flex-wrap:wrap; font-size:var(--font-20); text-align:center; font-weight:500; line-height:1.3; padding:var(--gap-16);}
.about .round-box.typeB:before {content:""; width:var(--gap-32); height:var(--gap-32); border-radius:var(--gap-32) 0 0 0; border:solid var(--blue); border-width:7px 0 0 7px; position:absolute; left:-3px; top:-3px;}

.about .round-box.typeC {width:fit-content; border:1px solid var(--blue); min-height:100px; border-radius:var(--gap-32); display:flex; align-items:center; justify-content:center; flex-wrap:wrap; font-size:var(--font-20); text-align:center; font-weight:500; line-height:1.3; padding:var(--gap-16) var(--gap-80);}
.about .round-box.typeC:before,
.about .round-box.typeC:after {content:""; width:var(--gap-32); height:var(--gap-32); border:solid var(--blue); position:absolute;}
.about .round-box.typeC:before {border-radius:var(--gap-32) 0 0 0; border-width:7px 0 0 7px; left:-3px; top:-3px;}
.about .round-box.typeC:after {border-radius:0 0 var(--gap-32) 0; border-width:0 7px 7px 0; right:-3px; bottom:-3px;}


.about .com-txt {font-size:var(--font-24);}
.about .com-txt .bold {font-weight:700;}
.about .com-txt .point {color:var(--blue);}


.about .round-conts-box {width:100%; padding:var(--gap-32) 0; background:var(--white); border-radius:200px; box-shadow:6px 6px 14px rgba(7, 36, 82, 0.15);}
.about .round-conts-box > .inner {width:85%; margin:0 auto; max-width:880px;}

.about .round-conts-box.typeA {width:fit-content; max-width:100%; padding:var(--gap-32) var(--gap-60);}
.about .round-conts-box.typeA > .inner {width:100%; max-width:100%;}

.about .round-conts-box.small {border-radius:var(--gap-60);}


@media screen and (max-width: 768px) {
    .about .round-conts-wrap {gap:0 var(--gap-16);}
    .about .round-box .conts {font-size:var(--font-18);}

    .about .round-box.typeA {height:var(--n-60); padding:0 var(--gap-16);}

    .about .round-box.typeB {min-height:80px;}

    .about .round-box.typeC {min-height:80px;}
    
    .about .com-txt {font-size:var(--font-18);}

    .about .round-conts-box {border-radius:var(--gap-60);}
}

@media screen and (max-width: 648px) {
    .about .round-box.typeA:before {width:14px; height:14px; top:-7px; border-width:3px;} 

    .about .round-box.typeB {min-height:60px;}
    .about .round-box.typeB:before {border-width:5px 0 0 5px; left:-2px; top:-2px;}

    .about .round-box.typeC {min-height:60px;}
    .about .round-box.typeC:before {border-width:5px 0 0 5px; left:-2px; top:-2px;}
    .about .round-box.typeC:after {border-width:0 5px 5px 0; right:-2px; bottom:-2px;}
}

.about .note-wrap .row {width:100%; display:flex; gap:var(--gap-32); font-size:var(--font-24);}
.about .note-wrap .row .num {font-weight:800; color:var(--blue); padding:5px 0;}
.about .note-wrap .row .rows-conts {flex:1;}
.about .note-wrap .row .rows-conts .conts {width:fit-content; border-bottom:2px dashed #e5e5e5; padding:5px 0;}

@media screen and (max-width: 768px) {
    .about .note-wrap .row {font-size:var(--font-18);}
}

@media screen and (max-width: 648px) {
    .about .note-wrap .row {gap:0 var(--gap-24);}
}




/*설립이념*/
/*.ideology * {font-family:var(--Paperlogy);}*/
.ideology .sec-1 .main-conts {width:100%;}
.ideology .sec-1 .main-conts .logo {width:50%; max-width:266px; margin:0 auto; margin-bottom:var(--gap-32);}
.ideology .sec-1 .main-conts .logo span {display:block; width:100%; height:0; padding-bottom:calc(160 / 266 * 100%); position:relative;}
.ideology .sec-1 .main-conts .logo span img {display:block; width:100%; height:100%; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); object-fit:cover;}
.ideology .sec-1 .main-conts .conts-box {width:fit-content; padding:var(--gap-32) calc(var(--gap-80) * 1.25); border-radius:150px; background:var(--bg-light-blue); text-align:center; font-weight:600; color:#737373; font-size:var(--font-24); line-height:1.3; margin:0 auto;}
.ideology .sec-1 .main-conts .conts-box .conts span {color:#313131;}

@media screen and (max-width: 768px) {
    .ideology .sec-1 .main-conts .conts-box {font-size:var(--font-18); padding:var(--gap-32) calc(var(--gap-80));}
}

.ideology .sec-2 .round-box.typeC .conts:before, 
.ideology .sec-2 .round-box.typeC .conts:after {position:absolute; top:50%; transform:translateY(-50%);}
.ideology .sec-2 .round-box.typeC .conts:before {content:"“"; left:calc(var(--gap-24) * -1);}
.ideology .sec-2 .round-box.typeC .conts:after {content:"”"; right:calc(var(--gap-24) * -1);}

@media screen and (max-width: 1280px) {
    .ideology .sec-2 ul.about-com-layout li[data-id='goals'] .round-conts-wrap {flex-wrap:wrap; gap:var(--gap-16);}
    .ideology .sec-2 ul.about-com-layout li[data-id='goals'] .round-conts-wrap .col {width:calc((100% - var(--gap-16)) / 2); flex:none;}
}

@media screen and (max-width: 1024px) {
    .ideology .sec-2 ul.about-com-layout li[data-id='goals'] .conts-box {height:360px; display:flex; align-items:center; position:relative;}
    .ideology .sec-2 ul.about-com-layout li[data-id='goals'] .conts-box:before {content:""; width:360px; height:360px; border-radius:50%; background:#dae6f5; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);}
    .ideology .sec-2 ul.about-com-layout li[data-id='goals'] .conts-box > .inner {width:100%; margin-left:auto; margin-right:auto; position:relative;}
    .ideology .sec-2 ul.about-com-layout li[data-id='goals'] .round-conts-wrap {gap:var(--gap-40) var(--gap-16);}
    .ideology .sec-2 ul.about-com-layout li[data-id='goals'] .round-conts-wrap .col:first-child {width:100%;}
    .ideology .sec-2 ul.about-com-layout li[data-id='goals'] .round-conts-wrap .col:first-child .round-box {width:calc((100% - var(--gap-16)) / 2); margin:0 auto;}

    .ideology .sec-2 ul.about-com-layout li[data-id='vision'] .conts-box {text-align:center;}
    .ideology .sec-2 ul.about-com-layout li[data-id='vision'] .round-box {margin:0 auto;}
}

@media screen and (max-width: 648px) {
    .ideology .sec-2 ul.about-com-layout li[data-id='goals'] .conts-box {height:300px;}
    .ideology .sec-2 ul.about-com-layout li[data-id='goals'] .conts-box:before {width:300px; height:300px;}
}

@media screen and (max-width: 480px) {
    .ideology .sec-2 ul.about-com-layout li[data-id='goals'] .conts-box {height:250px;}
    .ideology .sec-2 ul.about-com-layout li[data-id='goals'] .conts-box:before {width:180px; height:180px;}
    .ideology .sec-2 ul.about-com-layout li[data-id='goals'] .conts-box .round-box .conts {font-size:var(--font-16);}
}



/*교육목적*/
/*.goal * {font-family:var(--Paperlogy);}*/

.goal .sec-1 .education-purpose-wrap {text-align:center;}

.goal .sec-1 .education-goals-wrap {width:100%; display:flex; align-items:center; justify-content:space-between; padding:0 var(--gap-32); position:relative;}
.goal .sec-1 .education-goals-wrap:before {content:""; width:100%; height:2px; background:#cfe2f5; position:absolute; left:0; top:50%; transform:translateY(-50%);}
.goal .sec-1 .education-goals-wrap .layout-box {width:287px; height:287px; border-radius:50%; background:var(--white); border:1px solid #dbdbdb; position:relative; z-index:10; display:flex; align-items:center;}
.goal .sec-1 .education-goals-wrap .layout-box:before {content:""; width:292px; height:146px; background:var(--blue); border-radius:0 0 146px 146px; position:absolute; left:50%; bottom:-2px; transform:translateX(-50%); z-index:0;}
.goal .sec-1 .education-goals-wrap .layout-box:after {content:""; width:284px; height:142px; background:var(--white); border-radius:0 0 142px 142px; position:absolute; left:50%; bottom:3px; transform:translateX(-50%); z-index:0;}
.goal .sec-1 .education-goals-wrap .layout-box > .inner {width:100%; position:relative; z-index:10;}
.goal .sec-1 .education-goals-wrap .layout-box .icon {width:100%; height:143px; display:flex; align-items:flex-end; justify-content:center; margin-bottom:calc(var(--gap-24) / 2);}
.goal .sec-1 .education-goals-wrap .layout-box .icon span {display:block; width:100%;}
.goal .sec-1 .education-goals-wrap .layout-box .icon span img {display:block; max-height:100%; margin:0 auto;}
.goal .sec-1 .education-goals-wrap .layout-box .conts {width:100%; height:143px; display:flex; align-items:flex-start; margin-top:calc(var(--gap-24) / 2);}
.goal .sec-1 .education-goals-wrap .layout-box .conts .txt {font-size:20px; font-weight:500; text-align:center; width:90%; max-width:230px; margin:0 auto;}
.goal .sec-1 .education-goals-wrap .layout-box .conts span {color:var(--blue);}
.goal .sec-1 .education-goals-wrap .layout-box.goals-1 .icon span {height:77%; max-height:110px;}
.goal .sec-1 .education-goals-wrap .layout-box.goals-2 .icon span {height:55%; max-height:78px;}
.goal .sec-1 .education-goals-wrap .layout-box.goals-3 .icon span {height:72%; max-height:102px;}

@media screen and (max-width: 1280px) {
    .goal .sec-1 .education-goals-wrap .layout-box {width:250px; height:250px;}
    .goal .sec-1 .education-goals-wrap .layout-box:before {width:255px; height:128px;}
    .goal .sec-1 .education-goals-wrap .layout-box:after {width:247px; height:124px;}
    .goal .sec-1 .education-goals-wrap .layout-box .icon,
    .goal .sec-1 .education-goals-wrap .layout-box .conts {height:125px;}
}

@media screen and (max-width: 1024px) {
    .goal .sec-1 .education-goals-wrap {flex-direction:column; gap:var(--gap-40) 0;}
    .goal .sec-1 .education-goals-wrap:before {display:none;}
    .goal .sec-1 .education-goals-wrap:after {content:""; width:90%; max-width:500px; height:85%; border-radius:var(--gap-32); background:#e8f1fa; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:0;}
}

@media screen and (max-width: 648px) {
    .goal .sec-1 .education-goals-wrap .layout-box {width:200px; height:200px;}
    .goal .sec-1 .education-goals-wrap .layout-box:before {width:205px; height:103px;}
    .goal .sec-1 .education-goals-wrap .layout-box:after {width:197px; height:99px;}
    .goal .sec-1 .education-goals-wrap .layout-box .icon,
    .goal .sec-1 .education-goals-wrap .layout-box .conts {height:100px;}
    .goal .sec-1 .education-goals-wrap .layout-box .conts .txt {width:85%; font-size:var(--font-18);}
}


.goal .sec-1 .education-policy-wrap {width:fit-content; max-width:100%; margin:0 auto;}



/*비전*/
/*.vision * {font-family:var(--Paperlogy);}*/

.vision .sec-1 .title-box {width:100%; position:relative;}
.vision .sec-1 .title-box:before,
.vision .sec-1 .title-box:after {content:""; width:100%; position:absolute; left:0; z-index:0;}
.vision .sec-1 .title-box:before {height:30%; background:#fbe7f3; bottom:0;}
.vision .sec-1 .title-box:after {height:20%; background:#f8f6fa; bottom:30%;}
.vision .sec-1 .title-box .title {width:fit-content; max-width:100%; margin:0 auto; text-align:center; font-size:60px; font-weight:900; letter-spacing:-1.5px; background: linear-gradient(169deg, rgba(215,10,132,1) 0%, rgba(81,18,127,1) 100%); background-clip:text; -webkit-background-clip:text; color:transparent; position:relative; z-index:10;}

@media screen and (max-width: 1024px) {
    .vision .sec-1 .title-box .title {font-size:calc(var(--font-24) * 2);}
}

@media screen and (max-width: 648px) {
    .vision .sec-1 .title-box .title {font-size:calc(var(--font-18) * 2);}
}

@media screen and (max-width: 480px) {
    .vision .sec-1 .title-box .title {font-size:24px;}
}


@media screen and (max-width: 1024px) {
    .vision .sec-2 .round-conts-box.typeA {width:100%;}
}


.vision .sec-2 .specialization-wrap {width:100%; padding-top:calc(60px - var(--gap-16)); padding-bottom:var(--gap-32);}
.vision .sec-2 .specialization-wrap .layout-box {width:100%; margin-top:30px; height:50px; position:relative;}
.vision .sec-2 .specialization-wrap .layout-box .layout-wrap {width:100%; height:100%; display:flex; align-items:center; position:relative;}
.vision .sec-2 .specialization-wrap .layout-box .layout-wrap:before {content:""; width:100%; height:100%; position:absolute; left:0; top:0; z-index:0;}
.vision .sec-2 .specialization-wrap .layout-box .conts {width:100%; font-size:var(--font-30); font-weight:800; color:var(--white); position:relative; z-index:10; text-align:center;}

.vision .sec-2 .specialization-wrap .layout-box.typeA .shape-wrap {width:100%; height:60px; position:absolute; left:0; top:-60px; background:linear-gradient(90deg, rgba(48,201,205,1) 0%, rgba(51,13,105,1) 100%); opacity:0.7;}
.vision .sec-2 .specialization-wrap .layout-box.typeA .shape-wrap:before,
.vision .sec-2 .specialization-wrap .layout-box.typeA .shape-wrap:after {content:""; width:calc(((100% - 160px)/ 2) + 2px); height:40px; background:var(--white); position:absolute; top:0;}
.vision .sec-2 .specialization-wrap .layout-box.typeA .shape-wrap:before {left:0;}
.vision .sec-2 .specialization-wrap .layout-box.typeA .shape-wrap:after {right:0;}
.vision .sec-2 .specialization-wrap .layout-box.typeA .shape-wrap span {display:block; width:100%; position:relative;}
.vision .sec-2 .specialization-wrap .layout-box.typeA .shape-wrap span.triangle {height:40px;}
.vision .sec-2 .specialization-wrap .layout-box.typeA .shape-wrap span.triangle:before,
.vision .sec-2 .specialization-wrap .layout-box.typeA .shape-wrap span.triangle:after {content:""; width:0; height:0; border-top:40px solid var(--white); position:absolute; top:0; transform:translateX(-50%);}
.vision .sec-2 .specialization-wrap .layout-box.typeA .shape-wrap span.triangle:before {border-right:80px solid transparent; left:calc(50% - 40px);}
.vision .sec-2 .specialization-wrap .layout-box.typeA .shape-wrap span.triangle:after {border-left:80px solid transparent; left:calc(50% + 40px);}
.vision .sec-2 .specialization-wrap .layout-box.typeA .shape-wrap span.bar {height:20px;}
.vision .sec-2 .specialization-wrap .layout-box.typeA .shape-wrap span.bar:before,
.vision .sec-2 .specialization-wrap .layout-box.typeA .shape-wrap span.bar:after {content:""; width:calc((100% - 60px) / 2); height:100%; background:var(--white); position:absolute; bottom:0;}
.vision .sec-2 .specialization-wrap .layout-box.typeA .shape-wrap span.bar:before {left:0;}
.vision .sec-2 .specialization-wrap .layout-box.typeA .shape-wrap span:after {right:0;}
.vision .sec-2 .specialization-wrap .layout-box.typeA .layout-wrap:before {background:linear-gradient(90deg, rgba(48,201,205,1) 0%, rgba(51,13,105,1) 100%); opacity:0.7;}
.vision .sec-2 .specialization-wrap .layout-box.typeA .mask {width:100%; height:100%; position:absolute; left:0; top:0; z-index:20;}
.vision .sec-2 .specialization-wrap .layout-box.typeA .mask:before,
.vision .sec-2 .specialization-wrap .layout-box.typeA .mask:after {content:""; width:20%; height:100%; position:absolute; top:0;}
.vision .sec-2 .specialization-wrap .layout-box.typeA .mask:before {background: linear-gradient(-90deg, rgba(255,255,255,0) 30%, rgba(255,255,255,1) 100%); left:0;}
.vision .sec-2 .specialization-wrap .layout-box.typeA .mask:after {background: linear-gradient(90deg, rgba(255,255,255,0) 30%, rgba(255,255,255,1) 100%); right:0;}

.vision .sec-2 .specialization-wrap .layout-box.typeB:before,
.vision .sec-2 .specialization-wrap .layout-box.typeB:after {content:""; width:0; height:0; border:solid transparent; border-width:50px 0; position:absolute; top:50%; transform:translateY(-50%); opacity:0.7;}
.vision .sec-2 .specialization-wrap .layout-box.typeB:before {border-right:60px solid #30c9cd; left:0;}
.vision .sec-2 .specialization-wrap .layout-box.typeB:after {border-left:60px solid #330d69; right:0;}
.vision .sec-2 .specialization-wrap .layout-box.typeB .layout-wrap {width:calc(100% - 120px); margin:0 auto;}
.vision .sec-2 .specialization-wrap .layout-box.typeB .layout-wrap:before {background: linear-gradient(90deg, rgba(48,201,205,1) 0%, rgba(51,13,105,1) 100%); opacity:0.7;}


@media screen and (max-width: 768px) {
    .vision .sec-2 .specialization-wrap .layout-box .conts {font-size:var(--font-20);}
}

@media screen and (max-width: 648px) {
    .vision .sec-2 .specialization-wrap {padding-top:var(--gap-16);}
    .vision .sec-2 .specialization-wrap .layout-box {margin-top:20px;}
    .vision .sec-2 .specialization-wrap .layout-box.typeA .shape-wrap {height:45px; top:-45px;}
    .vision .sec-2 .specialization-wrap .layout-box.typeA .shape-wrap:before,
    .vision .sec-2 .specialization-wrap .layout-box.typeA .shape-wrap:after {width:calc(((100% - 100px)/ 2) + 2px); height:30px;}
    .vision .sec-2 .specialization-wrap .layout-box.typeA .shape-wrap span.triangle {height:30px;}
    .vision .sec-2 .specialization-wrap .layout-box.typeA .shape-wrap span.triangle:before,
    .vision .sec-2 .specialization-wrap .layout-box.typeA .shape-wrap span.triangle:after {border-top:30px solid var(--white);}
    .vision .sec-2 .specialization-wrap .layout-box.typeA .shape-wrap span.triangle:before {border-right:50px solid transparent; left:calc(50% - 25px);}
    .vision .sec-2 .specialization-wrap .layout-box.typeA .shape-wrap span.triangle:after {border-left:50px solid transparent; left:calc(50% + 25px);}
    .vision .sec-2 .specialization-wrap .layout-box.typeA .shape-wrap span.bar {height:15px;}
    .vision .sec-2 .specialization-wrap .layout-box.typeA .shape-wrap span.bar:before,
    .vision .sec-2 .specialization-wrap .layout-box.typeA .shape-wrap span.bar:after {width:calc((100% - 50px) / 2);}
    .vision .sec-2 .specialization-wrap .layout-box.typeA .mask:after {width:15%;}
    .vision .sec-2 .specialization-wrap .layout-box.typeA .mask:before {background: linear-gradient(-90deg, rgba(255,255,255,0) 15%, rgba(255,255,255,1) 100%);}
    .vision .sec-2 .specialization-wrap .layout-box.typeA .mask:after {background: linear-gradient(90deg, rgba(255,255,255,0) 15%, rgba(255,255,255,1) 100%);}

    .vision .sec-2 .specialization-wrap .layout-box.typeB:before,
    .vision .sec-2 .specialization-wrap .layout-box.typeB:after {border-width:40px 0; position:absolute;}
    .vision .sec-2 .specialization-wrap .layout-box.typeB:before {border-right:30px solid #30c9cd; left:0;}
    .vision .sec-2 .specialization-wrap .layout-box.typeB:after {border-left:30px solid #330d69; right:0;}
    .vision .sec-2 .specialization-wrap .layout-box.typeB .layout-wrap {width:calc(100% - 60px); margin:0 auto;}
}



.vision .sec-2 .strategy-wrap {width:100%; padding:0 60px; position:relative;}
.vision .sec-2 .strategy-wrap:before {content:""; width:calc(100% - 60px); height:60px; background:#e4eaf1; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:0;}
.vision .sec-2 .strategy-wrap .strategy-box {width:100%; display:flex; justify-content:space-between; position:relative; z-index:10;}
.vision .sec-2 .strategy-wrap .strategy-box:before,
.vision .sec-2 .strategy-wrap .strategy-box:after {content:""; width:0; height:0; border:solid transparent; border-width:50px 0; position:absolute; top:50%; transform:translateY(-50%);}
.vision .sec-2 .strategy-wrap .strategy-box:before {border-right:30px solid #e4eaf1; left:-60px;}
.vision .sec-2 .strategy-wrap .strategy-box:after {border-left:30px solid #e4eaf1; right:-60px;}
.vision .sec-2 .strategy-wrap .strategy-box .layout-box {width:180px; height:180px; border-radius:50%; position:relative; z-index:10; display:flex; align-items:center;}
.vision .sec-2 .strategy-wrap .strategy-box .layout-box:before {content:""; width:160px; height:160px; border-radius:50%; background: linear-gradient(120deg, rgba(255,255,255,0) 40%, rgba(255,255,255,1) 100%); opacity:0.24; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:1;}
.vision .sec-2 .strategy-wrap .strategy-box .layout-box:after {content:""; width:140px; height:140px; border-radius:50%; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2;}
.vision .sec-2 .strategy-wrap .strategy-box .layout-box .conts {width:80%; margin:0 auto; position:relative; z-index:11; font-size:var(--font-20); font-weight:500; text-align:center; line-height:1.3; color:var(--white);}
.vision .sec-2 .strategy-wrap .strategy-box .layout-box:nth-child(1),
.vision .sec-2 .strategy-wrap .strategy-box .layout-box:nth-child(1):after {background:var(--blue);}
.vision .sec-2 .strategy-wrap .strategy-box .layout-box:nth-child(2),
.vision .sec-2 .strategy-wrap .strategy-box .layout-box:nth-child(2):after {background:#5fbbcd;}
.vision .sec-2 .strategy-wrap .strategy-box .layout-box:nth-child(3),
.vision .sec-2 .strategy-wrap .strategy-box .layout-box:nth-child(3):after {background:#7486e3;}
.vision .sec-2 .strategy-wrap .strategy-box .layout-box:nth-child(4),
.vision .sec-2 .strategy-wrap .strategy-box .layout-box:nth-child(4):after {background:#a589f2;}

@media screen and (max-width: 1024px) {
    .vision .sec-2 .strategy-wrap {width:400px; margin:0 auto; padding:0;}
    .vision .sec-2 .strategy-wrap:before {width:80%; height:80%; border-radius:50%; background:#e7ebfa;}
    .vision .sec-2 .strategy-wrap .strategy-box:before,
    .vision .sec-2 .strategy-wrap .strategy-box:after {display:none;}
    .vision .sec-2 .strategy-wrap .strategy-box {width:100%; gap:40px; flex-wrap:wrap;}
}

@media screen and (max-width: 768px) {
    .vision .sec-2 .strategy-wrap .strategy-box .layout-box .conts {font-size:var(--font-18);}
}

@media screen and (max-width: 648px) {
    .vision .sec-2 .strategy-wrap {width:330px;}
    .vision .sec-2 .strategy-wrap .strategy-box {gap:30px;}
    .vision .sec-2 .strategy-wrap .strategy-box .layout-box {width:150px; height:150px;}
    .vision .sec-2 .strategy-wrap .strategy-box .layout-box:before {width:130px; height:130px;}
    .vision .sec-2 .strategy-wrap .strategy-box .layout-box:after {width:110px; height:110px;}
}

@media screen and (max-width: 480px) {
    .vision .sec-2 .strategy-wrap {width:240px;}
    .vision .sec-2 .strategy-wrap .strategy-box {gap:20px;}
    .vision .sec-2 .strategy-wrap .strategy-box .layout-box {width:110px; height:110px;}
    .vision .sec-2 .strategy-wrap .strategy-box .layout-box:before {width:94px; height:94px;}
    .vision .sec-2 .strategy-wrap .strategy-box .layout-box:after {width:78px; height:78px;}
    .vision .sec-2 .strategy-wrap .strategy-box .layout-box .conts {font-size:var(--font-16);}
}



/*찾아오시는길*/
/*.location * {font-family:var(--Paperlogy);}*/
.location .sec-1 .map-wrap .map-box {width:100%; border:1px solid #3d3d3d;}
.location .sec-1 .map-wrap .map-box .root_daum_roughmap {width:100%; height:537px; margin:0 auto;}
.location .sec-1 .map-wrap .map-box .root_daum_roughmap .wrap_controllers {display:none;}
.location .sec-1 .map-wrap .map-box .root_daum_roughmap .wrap_map {height:100%;}
.location .sec-1 .map-wrap .map-box .root_daum_roughmap .wrap_btn_zoom {display:none;}

@media screen and (max-width: 1280px) {
    .location .sec-1 .map-wrap .map-box .root_daum_roughmap {height:420px;}
}

@media screen and (max-width: 768px) {
    .location .sec-1 .map-wrap .map-box .root_daum_roughmap {height:380px;}
}

@media screen and (max-width: 480px) {
    .location .sec-1 .map-wrap .map-box .root_daum_roughmap {height:250px;}
}

.location .sec-1 .location-wrap {margin-top:var(--gap-32);}
.location .sec-1 ul.about-com-layout li[data-id='tel'] .conts-box .conts {line-height:1.8;}





.contents .bg-round-box {width:100%; border-radius:var(--gap-32); background:#dbe5f1; border:1px solid var(--light-purple ); padding:var(--gap-24) var(--gap-60);}

@media screen and (max-width: 1024px) {
    .contents .bg-round-box {border-radius:0; border:none; padding:var(--gap-24);}
}


.contents .attendance-wrap {width:100%; display:flex; align-items:center;}
.contents .attendance-wrap .head {font-size:var(--font-30); font-weight:800; color:var(--light-purple); width:200px;}
.contents .attendance-wrap .conts-box {flex-shrink:1; border-left:4px solid var(--light-purple); padding-left:var(--gap-20); font-size:var(--font-18);}
.contents .attendance-wrap .conts-box em {font-weight:700; color:var(--light-purple);}
.contents .attendance-wrap .conts-box span {font-weight:700;}

@media screen and (max-width: 1024px) {
    .contents .attendance-wrap {align-items:flex-start;}
}

@media screen and (max-width: 768px) {
    .contents .attendance-wrap .head {font-size:var(--font-20); width:120px;}
    .contents .attendance-wrap .conts-box {font-size:var(--font-14);}
}

@media screen and (max-width: 480px) {
    .contents .attendance-wrap .head {width:95px;}
    .contents .attendance-wrap .conts-box {border-left-width:3px; padding-left:var(--gap-16);}
}


.contents .select-box {height:var(--n-30); border-radius:4px; border:2px solid var(--baby-blue); background:var(--white); overflow:hidden; position:relative;}
.contents .select-box:after {content:""; width:0; height:0; border:solid transparent; border-width:0 5px; border-top:6px solid #565656; position:absolute; right:calc(var(--gap-16) / 2); top:50%; transform:translateY(-50%);}
.contents .select-box select {width:100%; height:100%; border:none; background:var(--white); padding:0 calc(var(--gap-16) * 2) 0 var(--gap-16); font-size:var(--font-16); font-weight:500; -webkit-appearance:none; -moz-appearance:none; appearance:none;}
.contents .select-box select::-ms-expand {display:none;}
.contents .select-box.auto {width:fit-content;}

.contents .button {width:fit-content; height:var(--n-30); border-radius:4px; display:flex; align-items:center; justify-content:center; padding:0 var(--gap-32); font-size:var(--font-16);}
.contents .button.dark-blue {background:#38588f; color:var(--white);}

@media screen and (max-width: 1024px) {
    .contents .select-box {height:var(--n-40);}
    .contents .button {height:var(--n-40);}
}



.contents .search-wrap {width:100%; display:flex; align-items:center; justify-content:center; gap:var(--gap-16);}
.contents .search-wrap .filter-wrap {display:flex; align-items:center; gap:var(--gap-16);}
.contents .search-wrap .filter-wrap .filter-box {width:120px; height:var(--n-30); border-radius:4px; border:2px solid var(--baby-blue); background:var(--white); overflow:hidden; position:relative;}
.contents .search-wrap .filter-wrap .filter-box {width:120px; height:var(--n-30); border-radius:4px; border:2px solid var(--baby-blue); background:var(--white); overflow:hidden; position:relative;}
.contents .search-wrap .filter-wrap .filter-box:after {content:""; width:0; height:0; border:solid transparent; border-width:0 5px; border-top:6px solid #565656; position:absolute; right:calc(var(--gap-16) / 2); top:50%; transform:translateY(-50%);}
.contents .search-wrap .filter-wrap .filter-box select {width:100%; height:100%; border:none; background:var(--white); padding:0 calc(var(--gap-16) * 2) 0 var(--gap-16); font-size:var(--font-16); font-weight:500; -webkit-appearance:none; -moz-appearance:none; appearance:none;}
.contents .search-wrap .filter-wrap .filter-box select::-ms-expand {display:none;}
.contents .search-wrap .filter-wrap .filter-box2 {width:200px; height:var(--n-30); border-radius:4px; border:2px solid var(--baby-blue); background:var(--white); overflow:hidden; position:relative;}
.contents .search-wrap .filter-wrap .filter-box2 {width:200px; height:var(--n-30); border-radius:4px; border:2px solid var(--baby-blue); background:var(--white); overflow:hidden; position:relative;}
.contents .search-wrap .filter-wrap .filter-box2:after {content:""; width:0; height:0; border:solid transparent; border-width:0 5px; border-top:6px solid #565656; position:absolute; right:calc(var(--gap-16) / 2); top:50%; transform:translateY(-50%);}
.contents .search-wrap .filter-wrap .filter-box2 select {width:100%; height:100%; border:none; background:var(--white); padding:0 calc(var(--gap-16) * 2) 0 var(--gap-16); font-size:var(--font-16); font-weight:500; -webkit-appearance:none; -moz-appearance:none; appearance:none;}
.contents .search-wrap .filter-wrap .filter-box2 select::-ms-expand {display:none;}
.contents .search-wrap .search-box {flex-shrink:1; display:flex; align-items:center; gap:var(--gap-16);}
.contents .search-wrap .search-box .input-box {flex-shrink:1; width:430px; height:var(--n-30); background:var(--white); border-radius:4px; border:2px solid var(--baby-blue);}
.contents .search-wrap .search-box .input-box input[type='text'] {width:100%; padding:0 10px; height:100%; font-size:var(--font-16); border:none; background:transparent; }
.contents .search-wrap .search-box .input-box input::placeholder {color:var(--black);}
.contents .search-wrap .search-box .btn-search {width:120px; height:var(--n-30); border-radius:4px; background:var(--baby-blue); font-size:var(--font-16); color:var(--white); border:none;}

@media screen and (max-width: 1280px) {
    .contents .search-wrap .search-box .input-box {width:320px;}
}

@media screen and (max-width: 1024px) {
    .contents .search-wrap {flex-direction:column;}
    .contents .search-wrap .filter-wrap {width:100%; justify-content:left;} /*25.2.18 정렬수정*/
    .contents .search-wrap .filter-wrap .filter-box {flex:1; max-width:120px; height:var(--n-40);}
    .contents .search-wrap .search-box {width:100%; justify-content:center;}
    .contents .search-wrap .search-box .input-box {width:100%; max-width:430px; height:var(--n-40);}
    .contents .search-wrap .search-box .btn-search {height:var(--n-40);}

    .contents .search-wrap.typeB {flex-direction:row;}
    .contents .search-wrap.typeB .filter-wrap {width:120px;}
    .contents .search-wrap.typeB .search-box .input-box {max-width:100%;}

}

@media screen and (max-width: 648px) {
    .contents .search-wrap {gap:5px;}
    .contents .search-wrap .filter-wrap,
    .contents .search-wrap .search-box {gap:5px;}

    .contents .search-wrap.typeB .filter-wrap {width:100px;}
}

@media screen and (max-width: 648px) {
    .contents .search-wrap.typeB .filter-wrap {width:80px;}
}

/*정규과정*/
.contents .board-wrap .tb-card {width:100%; display:flex; gap:20px; flex-wrap:wrap;}
.contents .board-wrap .tb-card .course-box {width:calc((100% - 60px) / 4); position:relative;}
.contents .board-wrap .tb-card .course-box.regular {background:#7a81c5;}
.contents .board-wrap .tb-card .course-box.irregular {background:#7ec859;}

.contents .board-wrap .tb-card .course-box .title-wrap {width:100%;}
.contents .board-wrap .tb-card .course-box .title-wrap > .inner {width:100%;}
.contents .board-wrap .tb-card .course-box .title-wrap span {width:fit-content; height:var(--n-32); font-size:var(--font-14); font-weight:700; color:var(--white); padding:0 10px; margin-left:auto; margin-right:0; display:flex; align-items:center; background:var(--purple);}
.contents .board-wrap .tb-card .course-box .title-wrap .title-box {width:100%; height:100px; padding:0 var(--gap-24); display:flex; align-items:center; gap:0 var(--gap-16);}
.contents .board-wrap .tb-card .course-box .title-wrap .title-box .icon {width:var(--n-40); height:var(--n-40); background:url(/theme/oklass20/img/main/icon_course.png) center no-repeat; background-size:cover;}
.contents .board-wrap .tb-card .course-box .title-wrap .title-box .title {width:calc(100% - (var(--n-40) + var(--gap-16))); height:52px; font-size:var(--font-20); font-weight:700; color:var(--white); line-height:1.3; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}

.contents .board-wrap .tb-card .course-box .info-wrap {width:100%; height:70px; background:#373737; display:flex; align-items:center; padding:0 var(--gap-24); color:var(--white); font-size:var(--font-16);}
.contents .board-wrap .tb-card .course-box .info-wrap .info-box {width:100%;}
.contents .board-wrap .tb-card .course-box .info-wrap .info-box .conts-box {width:100%; display:flex; align-items:center; gap:5px; margin-top:3px;}
.contents .board-wrap .tb-card .course-box .info-wrap .info-box .conts-box:first-child {margin-top:0;}
.contents .board-wrap .tb-card .course-box .info-wrap .info-box .conts-box .label {width:fit-content; height:var(--n-24); border-radius:5px; background:var(--black); font-size:12px; display:flex; align-items:center; justify-content:center; padding:0 10px; visibility:hidden;}
.contents .board-wrap .tb-card .course-box .info-wrap .info-box .conts-box.class {justify-content:space-between;}

.contents .board-wrap .tb-card .course-box a {display:block; width:100%; height:100%; position:absolute; left:0; top:0;}

@media screen and (max-width: 1280px) {
    .contents .board-wrap .tb-card {max-width:800px; margin:0 auto; flex-wrap:wrap;}
    .contents .board-wrap .tb-card .course-box {width:calc((100% - 20px) / 2);}

    .contents .board-wrap .tb-card .course-box .title-wrap .title-box .title {height:auto;}
}

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

    .contents .board-wrap .tb-card {gap:10px;}
    .contents .board-wrap .tb-card .course-box {width:100%; border-radius:var(--gap-32); overflow:hidden;}
    .contents .board-wrap .tb-card .course-box.regular {background:var(--light-purple);}
    .contents .board-wrap .tb-card .course-box.irregular {background:#a4c25e;}

    .contents .board-wrap .tb-card .course-box .title-wrap {height:100px; display:flex; align-items:center; padding:0 var(--gap-32);}
    .contents .board-wrap .tb-card .course-box .title-wrap span {background:transparent; margin-left:0; margin-right:auto; padding:0;}
    .contents .board-wrap .tb-card .course-box .title-wrap .title-box {height:auto; padding:0;}
    .contents .board-wrap .tb-card .course-box .title-wrap .title-box .title {display:block; white-space:nowrap;}

    .contents .board-wrap .tb-card .course-box .info-wrap {height:70px; padding:0 var(--gap-32);}
    .contents .board-wrap .tb-card .course-box .info-wrap .info-box .conts-box {justify-content:space-between; margin-top:0;}
    .contents .board-wrap .tb-card .course-box .info-wrap .info-box .conts-box .label {width:50px; font-size:10px; visibility:visible;}
    .contents .board-wrap .tb-card .course-box.regular .info-wrap .info-box .conts-box .label {background:var(--light-purple);}
    .contents .board-wrap .tb-card .course-box.irregular .info-wrap .info-box .conts-box .label {background:#a4c25e;}
}


@media screen and (max-width: 648px) {
    .contents .board-wrap .tb-card .course-box .title-wrap {height:90px;}
    .contents .board-wrap .tb-card .course-box .info-wrap {height:60px;}
}

/*비정규과정*/
.contents .board-wrap .tb-card-ir {width:100%; display:flex; gap:20px; flex-wrap:wrap;}
.contents .board-wrap .tb-card-ir .course-box {width:calc((100% - 60px) / 4); position:relative;background-size: 100% 169px;}
.contents .board-wrap .tb-card-ir .course-box.regular {background:#7a81c5;}
.contents .board-wrap .tb-card-ir .course-box.irregular {background:#7ec859;}

.contents .board-wrap .tb-card-ir .course-box .title-wrap {width:100%;}
.contents .board-wrap .tb-card-ir .course-box .title-wrap > .inner {width:100%;}
.contents .board-wrap .tb-card-ir .course-box .title-wrap span {width:fit-content; height:var(--n-32); font-size:var(--font-14); font-weight:700; color:var(--white); padding:0 10px; margin-left:auto; margin-right:0; display:flex; align-items:center; background:var(--purple);}
.contents .board-wrap .tb-card-ir .course-box .title-wrap .title-box {width:100%; height:137px; padding:0 var(--gap-24); display:flex; align-items:center; gap:0 var(--gap-16);}
.contents .board-wrap .tb-card-ir .course-box .title-wrap .title-box .icon {width:var(--n-40); height:var(--n-40); background:url(/theme/oklass20/img/main/icon_course.png) center no-repeat; background-size:cover;}
.contents .board-wrap .tb-card-ir .course-box .title-wrap .title-box .title {width:calc(100% - (var(--n-40) + var(--gap-16))); height:52px; font-size:var(--font-20); font-weight:700; color:var(--white); line-height:1.3; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}

.contents .board-wrap .tb-card-ir .course-box .info-wrap {width:100%; height:70px; background:#373737; display:flex; align-items:center; padding:0 var(--gap-24); color:var(--white); font-size:var(--font-16);}
.contents .board-wrap .tb-card-ir .course-box .info-wrap .info-box {width:100%;}
.contents .board-wrap .tb-card-ir .course-box .info-wrap .info-box .conts-box {width:100%; align-items:center; gap:5px; margin-top:3px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size:var(--font-20);} /*25.2.24 썸네일수정*/
.contents .board-wrap .tb-card-ir .course-box .info-wrap .info-box .conts-box:first-child {margin-top:0;}
.contents .board-wrap .tb-card-ir .course-box .info-wrap .info-box .conts-box .label {width:fit-content; height:var(--n-24); border-radius:5px; background:var(--black); font-size:12px; display:flex; align-items:center; justify-content:center; padding:0 10px; visibility:hidden;}
.contents .board-wrap .tb-card-ir .course-box .info-wrap .info-box .conts-box.class {justify-content:space-between;font-size:var(--font-16);}

.contents .board-wrap .tb-card .course-box a {display:block; width:100%; height:100%; position:absolute; left:0; top:0;}

@media screen and (max-width: 1280px) {
    .contents .board-wrap .tb-card-ir {max-width:800px; margin:0 auto; flex-wrap:wrap;}
    .contents .board-wrap .tb-card-ir .course-box {width:calc((100% - 20px) / 2);}
    .contents .board-wrap .tb-card-ir .course-box .title-wrap .title-box .title {height:auto;}
}

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

    .contents .board-wrap .tb-card-ir {gap:10px;}
    .contents .board-wrap .tb-card-ir .course-box {width:100%; border-radius:var(--gap-32); overflow:hidden;background-size: 100% 169px;}
    .contents .board-wrap .tb-card-ir .course-box.regular {background:var(--light-purple);}
    .contents .board-wrap .tb-card-ir .course-box.irregular {background:#a4c25e;}

    .contents .board-wrap .tb-card-ir .course-box .title-wrap {height:100px; display:flex; align-items:center; height:169px;}
    .contents .board-wrap .tb-card-ir .course-box .title-wrap span {background:transparent; margin-left:auto; margin-right:0; padding:0;}
    .contents .board-wrap .tb-card-ir .course-box .title-wrap .title-box {height:auto; padding:0;}
    .contents .board-wrap .tb-card-ir .course-box .title-wrap .title-box .title {display:block; white-space:nowrap;}

    .contents .board-wrap .tb-card-ir .course-box .info-wrap {height:70px; padding:0 var(--gap-32);}
    .contents .board-wrap .tb-card-ir .course-box .info-wrap .info-box .conts-box {justify-content:space-between; margin-top:0;}
    .contents .board-wrap .tb-card-ir .course-box .info-wrap .info-box .conts-box .label {width:50px; font-size:10px; visibility:visible;}
    .contents .board-wrap .tb-card-ir .course-box .regular .info-wrap .info-box .conts-box .label {background:var(--light-purple);}
    .contents .board-wrap .tb-card-ir .course-box .irregular .info-wrap .info-box .conts-box .label {background:#a4c25e;}
}

@media screen and (max-width: 648px) {
    .contents .board-wrap .tb-card-ir .course-box .title-wrap {width:100%;height:169px;}
    .contents .board-wrap .tb-card-ir .course-box .title-wrap span {margin-left:auto; margin-right:0; padding:0;height:var(--n-40); width:20%;
    
        justify-content: center;
        align-items: center;
        display: flex;
        font-size:var(--font-16);
    
    }
    .contents .board-wrap .tb-card-ir .course-box .title-wrap .title-box {height:140px; padding:0;}
    .contents .board-wrap .tb-card-ir .course-box .title-wrap .title-box .title {display:block; white-space:nowrap;}    
    .contents .board-wrap .tb-card-ir .course-box .info-wrap {height:60px;}
    .contents .board-wrap .tb-card-ir .course-box .info-wrap .info-box .conts-box {width:100%; align-items:center; gap:5px; margin-top:3px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size:var(--font-28);} /*25.2.24 썸네일수정*/    
}

.contents .board-wrap .board-pagination {width:100%; margin-top:var(--gap-32); padding:var(--gap-24); background:#f5f5f5; display:flex; align-items:center; justify-content:center; gap:var(--gap-8);}
.contents .board-wrap .board-pagination a {font-size:var(--font-16); position:relative; height:var(--n-24); display:flex; align-items:center; justify-content:center; border-bottom:1px solid var(--black);}
.contents .board-wrap .board-pagination a.arrow {font-size:0;}
.contents .board-wrap .board-pagination a.arrow:before,
.contents .board-wrap .board-pagination a.arrow:after {content:""; width:0; height:0; border:solid transparent; position:absolute; top:50%; transform:translateY(-50%);}
.contents .board-wrap .board-pagination a.begin,
.contents .board-wrap .board-pagination a.end {width:16px;}
.contents .board-wrap .board-pagination a.prev,
.contents .board-wrap .board-pagination a.next {width:7px;}
.contents .board-wrap .board-pagination a.begin:before,
.contents .board-wrap .board-pagination a.begin:after,
.contents .board-wrap .board-pagination a.prev:before {border-width:4px 0; border-right:7px solid var(--black);}
.contents .board-wrap .board-pagination a.begin:before {left:0;}
.contents .board-wrap .board-pagination a.begin:after {right:0;}
.contents .board-wrap .board-pagination a.prev:before {left:0;}
.contents .board-wrap .board-pagination a.end:before,
.contents .board-wrap .board-pagination a.end:after,
.contents .board-wrap .board-pagination a.next:before {border-width:4px 0; border-left:7px solid var(--black);}
.contents .board-wrap .board-pagination a.end:before {left:0;}
.contents .board-wrap .board-pagination a.end:after {right:0;}
.contents .board-wrap .board-pagination a.next:before {left:0;}
.contents .board-wrap .board-pagination a.on {color:var(--red); font-weight:600; border-bottom-color:var(--red);}


.contents .board-wrap .tb-basic {width:100%; border-top:6px solid var(--baby-blue); border-bottom:6px solid #d4e5f7}
.contents .board-wrap .tb-basic .tr {width:100%; border-bottom:1px solid var(--light-purple); min-height:50px; padding:10px 0; display:flex; align-items:center; justify-content:space-between; position:relative; flex-wrap:wrap;}
.contents .board-wrap .tb-basic .tr:last-child {border-bottom:none;}
.contents .board-wrap .tb-basic .tr.head {background:#e9eff6; text-align:center;}
.contents .board-wrap .tb-basic .tr .td {font-size:var(--font-18); padding:0 var(--gap-8); position:relative;}
.contents .board-wrap .tb-basic .tr > a {display:block; width:100%; height:100%; position:absolute; left:0; top:0;}
.contents .board-wrap .tb-basic .tr.reply {padding-left:var(--gap-40);}
.contents .board-wrap .tb-basic .tr.reply:before {content:""; width:16px; height:10px; box-sizing:border-box; border:solid #cdcdcd; border-width:0 0 1px 1px; position:absolute; left:calc(var(--gap-40) - 18px); top:50%; transform:translateY(-50%);}
.contents .board-wrap .tb-basic .tr.reply .subject {padding-left:60px; min-height:30px; display:flex; align-items:center; flex-wrap:wrap;}
.contents .board-wrap .tb-basic .tr.reply .subject span {width:fit-content; max-width:100%; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.contents .board-wrap .tb-basic .tr.reply .subject:before {content:"답변"; width:45px; height:24px; border-radius:4px; background:var(--light-purple); display:flex; align-items:center; justify-content:center; position:absolute; left:0; top:50%; transform:translateY(-50%); font-size:var(--font-14); color:var(--white);}
.contents .board-wrap .tb-basic .tr.reply .subject:after {content:""; width:0; height:0; border:solid transparent; border-width:0 3px; border-top:4px solid var(--light-purple); position:absolute; left:10px; top:32px;}


#tb-status .tr .td {text-align:center;}
#tb-status .tr .term {width:100px;}
#tb-status .tr .category {width:100px;}
#tb-status .tr .professor {width:150px;}
#tb-status .tr .subject {width:calc(100% - 860px);}
#tb-status .tr .department {width:220px;}
#tb-status .tr .grade {width:100px;}
#tb-status .tr .credit {width:80px;}
#tb-status .tr .button-box {width:260px; display:flex; align-items:center; gap:5px;}
#tb-status .tr:not(.head) .subject {overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:left;}
#tb-status .tr .term .short {display:block;}
#tb-status .tr .term .mo {display:none;}
#tb-status .tr .category .label {width:70px; height:30px; border-radius:4px; display:flex; align-items:center; justify-content:center; color:var(--white); font-size:var(--font-16); margin:0 auto;}
#tb-status .tr .category .label.regular {background:#7a81c5;}
#tb-status .tr .category .label.irregular {background:#77c06d;}
#tb-status .tr .button-box span {width:50%; flex:1;}
#tb-status .tr .td .btn {width:100%; height:30px; border-radius:4px; display:flex; align-items:center; justify-content:center; font-size:var(--font-16); color:var(--white); margin:0 auto;}
#tb-status .tr .td .btn-progress {background:var(--baby-blue);}
#tb-status .tr .td .btn-classroom {background:#38588f;}

@media screen and (max-width: 1280px) {
    #tb-status .tr .subject {width:calc(100% - 780px);}
    #tb-status .tr .department {width:180px;}
    #tb-status .tr .button-box {width:220px;}
}

@media screen and (max-width: 1024px) {
    .contents .board-wrap .tb-basic {border-top-color:var(--light-purple); border-bottom:none;}
    .contents .board-wrap .tb-basic .tr {padding:var(--gap-24) var(--gap-16); gap:5px var(--gap-16); justify-content:flex-start;}
    .contents .board-wrap .tb-basic .tr:last-child {border-bottom:1px solid var(--light-purple);}
    .contents .board-wrap .tb-basic .tr.head {display:none;}
    .contents .board-wrap .tb-basic .tr .td {padding:0;}
    .contents .board-wrap .tb-basic .tr.reply:before {top:calc(var(--gap-24) + ((var(--gap-40) - 10px) / 2));}
    .contents .board-wrap .tb-basic .tr.reply .subject {height:var(--gap-40);}

    #tb-status .tr .td {text-align:left;}
    #tb-status .tr .term {width:100%;}
    #tb-status .tr .term .short {display:none;}
    #tb-status .tr .term .mo {display:block;}
    #tb-status .tr .category {width:fit-content; position:absolute; right:var(--gap-16); bottom:var(--gap-24);}
    #tb-status .tr .subject {width:100%; font-size:var(--font-24); font-weight:600;}
    #tb-status .tr .department, #tb-status .tr .grade, #tb-status .tr .credit {width:fit-content;}
    #tb-status .tr .button-box {width:100%;}
    #tb-status .tr .button-box span {width:fit-content; flex:none;}
    #tb-status .tr .td .btn {width:120px;}
    #tb-status .tr .category .label {border:1px solid;}
    #tb-status .tr .category .label.off {background:#e6e7f7; border-color:#5870df; color:#52aeff;}
    #tb-status .tr .category .label.regular {background:#e6e7f7; border-color:#5870df; color:#5870df;}
    #tb-status .tr .category .label.irregular {background:#f7efe6; border-color:#ff9344; color:#b75a22;}
}

@media screen and (max-width:768px) {
    .contents .board-wrap .tb-basic .tr.reply .subject {padding-left:55px;}
    .contents .board-wrap .tb-basic .tr.reply .subject:before {width:40px;}
    .contents .board-wrap .tb-basic .tr.reply .subject:after {top:28px;}
}

@media screen and (max-width: 648px) {
    #tb-status .tr .category .label {width:70px;}
    #tb-status .tr .button-box {width:calc(100% - 80px); }
    #tb-status .tr .button-box span {width:calc((100% - 5px) / 2); max-width:120px;}
    #tb-status .tr .td .btn {width:100%;}
}

@media screen and (max-width: 480px) {
    .contents .board-wrap .tb-basic .tr.reply {padding-left:var(--gap-32);}
    .contents .board-wrap .tb-basic .tr.reply:before {width:10px; height:8px; left:calc(var(--gap-32) - 12px); top:calc(var(--gap-24) + ((var(--gap-40) - 8px) / 2));}
    .contents .board-wrap .tb-basic .tr.reply .subject {padding-left:40px;}
    .contents .board-wrap .tb-basic .tr.reply .subject:before {width:36px; height:20px; font-size:11px;}
    .contents .board-wrap .tb-basic .tr.reply .subject:after {top:24px;}

    #tb-status .tr .category .label {width:60px;}
    #tb-status .tr .button-box {width:calc(100% - 70px); }
    #tb-status .tr .button-box span {max-width:90px;}
}



#tb-notice .tr .subject {width:calc(100% - 420px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
#tb-notice .tr .name, 
#tb-notice .tr .date {width:150px;}
#tb-notice .tr .views {width:120px;}
#tb-notice .tr:not(.head) .td:not(.subject) {text-align:center;}
#tb-notice .tr a {position:absolute; left:0; top:0;}

@media screen and (max-width: 1024px) {
    #tb-notice .tr .td:not(.subject):before {content:""; width:1px; height:50%; background:var(--black); position:absolute; left:calc((var(--gap-16) / 2) * -1); top:50%; transform:translateY(-50%);}
    #tb-notice .tr .subject {width:100%; font-size:var(--font-24); font-weight:600;}
    #tb-notice .tr .name, 
    #tb-notice .tr .date,
    #tb-notice .tr .views {width:fit-content;}
    #tb-notice .tr.reply .name {padding-left:60px;}
    #tb-notice .tr .name:before {display:none;}
}

@media screen and (max-width: 768px) {
    #tb-notice .tr.reply .name {padding-left:55px;}
}

@media screen and (max-width: 480px) {
    #tb-notice .tr .td:not(.subject) {font-size:var(--font-16);}
    #tb-notice .tr.reply .name {padding-left:40px;}
}


.contents .board-wrap .board-list-top {width:100%; display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--gap-16);}


.contents .board-wrap .tb-view {width:100%; border-top:6px solid var(--baby-blue); border-bottom:6px solid #d4e5f7;}
.contents .board-wrap .tb-view .tr {width:100%; padding:var(--gap-16) var(--gap-24); border-bottom:1px solid var(--light-purple);}
.contents .board-wrap .tb-view .tr:last-child {border-bottom:none;}
.contents .board-wrap .tb-view .tr .td {width:100%;}
.contents .board-wrap .tb-view .tr .td * {font-size:var(--font-18);}
.contents .board-wrap .tb-view .tr:has(.subject) {background:#e9eff6;}
.contents .board-wrap .tb-view .tr .subject {text-align:center; font-weight:500;font-size:var(--font-30);}
.contents .board-wrap .tb-view .tr .contents-info {width:100%; display:flex; align-items:center; justify-content:center; gap:5px var(--gap-24); flex-wrap:wrap;}
.contents .board-wrap .tb-view .tr .contents-info span {position:relative; font-size:var(--font-14);}
.contents .board-wrap .tb-view .tr .contents-info span:before {content:""; width:1px; height:50%; background:var(--black); position:absolute; left:calc((var(--gap-24) / 2) * -1); top:50%; transform:translateY(-50%);}
.contents .board-wrap .tb-view .tr .contents-info span:first-child:before {display:none;}
.contents .board-wrap .tb-view .tr .view-contents {padding:var(--gap-40) 0; line-height:1.6;}
.contents .board-wrap .tb-view .tr .view-contents img {max-width:100%; display:block;}
.contents .board-wrap .tb-view .tr .attach {width:100%; display:flex;}
.contents .board-wrap .tb-view .tr .attach .head {width:100px;}
.contents .board-wrap .tb-view .tr .attach .file-list {width:calc(100% - 100px); display:flex; align-items:center; gap:5px var(--gap-16); flex-wrap:wrap;}
.contents .board-wrap .tb-view .tr .attach .file-list a {font-size:var(--font-18); background-image:linear-gradient(var(--black), var(--black)); background-repeat:no-repeat; background-size:100% 1px; background-position:left bottom; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

@media screen and (max-width: 1024px) {
    .contents .board-wrap .tb-view {border-top-color:var(--light-purple); border-bottom-color:#d3d6ee;}
    .contents .board-wrap .tb-view .tr {border-bottom-color:#d3d6ee;}
    .contents .board-wrap .tb-view .tr .subject {font-size:var(--font-24);}
}

@media screen and (max-width: 768px) {
    .contents .board-wrap .tb-view .tr .attach .head {width:80px;}
    .contents .board-wrap .tb-view .tr .attach .file-list {width:calc(100% - 80px);}
}

@media screen and (max-width: 480px) {
    .contents .board-wrap .tb-view .tr .attach .head {width:60px;}
    .contents .board-wrap .tb-view .tr .attach .file-list {width:calc(100% - 60px);}
}



.contents .board-wrap .board-button-wrap {display:flex; align-items:center; gap:var(--gap-8); width:100%; margin-top:var(--gap-16);}


/*로그인*/

.contents .bg-round-box-login {width:100%; border-radius:var(--gap-12); background:#ffffff; border:1px solid #999; padding:var(--gap-24) var(--gap-60);text-align: center;}

@media screen and (max-width: 1024px) {
    .contents .bg-round-box-login {width:98%; border-radius:var(--gap-12); border:1px solid #999; padding:var(--gap-24);}
}

.login-img {width:40%;padding-top:30px;padding-bottom:30px;}

@media screen and (max-width: 1024px) {
    .login-img {width:80%;padding-top:30px;padding-bottom:30px;}
}

.idf {height:48px; margin-bottom: 10px;}
.idf input[type=text] {width:40%; height:100%;padding-left: 10px;border-radius: 10px; border:#dbdbdb solid 1px;}
.idf input::placeholder {color:#999;}
.idf input::-webkit-input-placeholder {color:#999;}
.idf input:-ms-input-placeholder {color:#999;}
.pwf{height:48px; margin-bottom: 20px;}
.pwf input[type=password]{width:40%; height: 100%; padding-left: 10px; border-radius: 10px; border:#dbdbdb solid 1px;}
.pwf input::placeholder {color:#999;}
.pwf input::-webkit-input-placeholder {color:#999;}
.pwf input:-ms-input-placeholder {color:#999;}
.bt{width:100%; height: 60px; margin-bottom: 20px;}
.bt button{width:40%; height:60px; background:#38588f; border-radius:10px; color:#fff; font-size: 18px; font-weight:700}

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

.idf {height:48px; margin-bottom: 10px;}
.idf input[type=text]{width:80%; height:100%;padding-left: 10px;border-radius: 10px; border:#dbdbdb solid 1px;}
.idf input::placeholder {color:#999;}
.idf input::-webkit-input-placeholder {color:#999;}
.idf input:-ms-input-placeholder {color:#999;}
.pwf{height:48px; margin-bottom: 20px;}
.pwf input[type=password]{width:80%; height: 100%; padding-left: 10px; border-radius: 10px; border:#dbdbdb solid 1px;}
.pwf input::placeholder {color:#999;}
.pwf input::-webkit-input-placeholder {color:#999;}
.pwf input:-ms-input-placeholder {color:#999;}
.bt{width:100%; height: 60px; margin-bottom: 20px;}
.bt button{width:80%; height:60px; background:#38588f; border-radius:10px; color:#fff; font-size: 18px; font-weight:700}

}

@media screen and (max-width: 1024px) {}
@media screen and (max-width: 768px) {}
@media screen and (max-width: 480px) {}