/*******************************************
        Web
*******************************************/
/* Common */
.subLayout .web h3 {padding: 0; font-size: 1rem; line-height: 1;}
.webInfo {background: var(--color-bg-2); padding: 4.375rem; border-radius: 0.625rem; display: flex; flex-direction: column; gap: 2.375rem;  letter-spacing: -0.025em;}
.webInfo h2 {display: flex; flex-direction: column; gap: 1.375rem; line-height: 1; font-size: 100%; padding: 0;}
.webInfo h2::after {display: none;}
.webInfo h2 span {font-size: 1.5rem; line-height: 142%; letter-spacing: -0.05em; font-weight: 800;}
.webInfo h2 b {color: var(--color-primary-1);}
.webInfo h2 strong {font-size: 2.5rem; font-weight: 800;}
.webInfo > .goLink {width: 100%; max-width: 18rem; height: 2.875rem; font-size: 1rem; color: var(--color-white); display: flex; justify-content: center; align-items: center; background: var(--color-primary-1); border-radius: 0.625rem; font-weight: 500; }
.webInfo > .goLink:hover {background: var(--color-primary-1-hover);}
.webSec {display: block; width: 100%;}


.webSec.def h3 {color: var(--color-bl2); font-size: 1.75rem; font-weight: 800; letter-spacing: -0.05em; padding-top: 6.875rem; padding-bottom: 1.25rem;}
.webSec.def .h3desc {display: block; font-size: 1.25rem; color: var(--color-bl2); font-weight: 400; letter-spacing: -0.025em; padding-bottom: 1.875rem; line-height: 160%; }
/* .webInfo + .webSec.def h3 {padding-top: 4.5rem;} */
h2.bb3 + .webSec.def h3 {padding-top: 3.5rem;}

.webSec.def .tbWrap {display:flex; flex-direction: column; width: 100%; border: 1px solid #dcdcdc;}
.webSec.def .tbWrap .row {display: grid;  border-bottom: 1px solid #dcdcdc;}
.webSec.def .tbWrap .row:last-of-type {border-bottom: 0;}
.webSec.def .tbWrap .row .th {background: var(--color-bg-3); display: flex; justify-content: center; align-items: center;}
.webSec ol li:nth-of-type(1) > p:first-of-type::before {content: '①'; }
.webSec ol li:nth-of-type(2) > p:first-of-type::before {content: '②'; }
.webSec ol li:nth-of-type(3) > p:first-of-type::before {content: '③'; }
.webSec ol li:nth-of-type(4) > p:first-of-type::before {content: '④'; }
.webSec ol li:nth-of-type(5) > p:first-of-type::before {content: '⑤'; }

.webCon {background: var(--color-bg-2); border-radius: 0.625rem; padding: 5.625rem 0 4.375rem 0; display: flex; flex-direction: column; text-align: center; justify-content: center; align-items: center; }

.gridTable > span,
.gridTable > div {padding: 1rem 1.875rem; border-bottom: 1px solid #dcdcdc; border-right: 1px solid #dcdcdc; display: flex; flex-direction: column; justify-content: center; align-items: center;}
.gridTable > span {text-align: center;}
.gridTable > span.th { font-size: 1.25rem; font-weight: 700; color: var(--color-bl2); padding: 1.125rem 1.875rem;}
.gridTable .row-2 { grid-row: span 2; }
.gridTable .row-3 { grid-row: span 3; }
.gridTable .row-4 { grid-row: span 4; }
.gridTable > div.desc {align-items: flex-start; text-align: left; gap: 0.375rem;}
.gridTable > div.desc b {display: block; color: var(--color-bl1); font-weight: 700; padding-bottom: 0.25rem;}
.gridTable > div.desc p {color: var(--color-bl2);}
.gridTable > div.desc p.dash::before {top: 0;}

.stepGrid > strong { display: block; font-size: 1.5rem; font-weight: 700; color: var(--color-bl2); padding: 2rem 0 1rem 0;}
.stepGrid > strong:first-of-type {padding-top: 0;}
.stepGrid .row {display: grid; grid-template-columns: repeat(auto-fit, minmax(1rem, 1fr)); gap: 1.875rem;}
.stepGrid .row span {background: var(--color-bg-3); display: flex;  flex-direction: column; align-items: center; justify-content: center;  min-height: 6.25rem; border-radius: 0.625rem; text-align: center; font-size: 1.25rem; line-height: 140%; color: var(--color-bl2); position: relative; padding : 1.25rem;}
.stepGrid .row span::after { content: '\f054'; font: var(--fa-font-solid); position: absolute; top: 50%; right: -0.9375rem; transform: translate(50%, -50%); opacity: 0.7; font-size: 1rem;}
.stepGrid .row span:last-of-type:after {display: none;}
.stepGrid .row span b {font-size: 1rem; line-height: 1; color: var(--color-primary-1); font-weight: 600; padding-bottom: 0.375rem;}



/* 교육센터 소개*/
.contactUs .webInfo  {background: var(--color-bg-2) url('/application/views/Client/safety/Images/sub/ContacUs_top_bg.png') no-repeat calc(100% - 7.125rem) 100%; }
.contactUs .webSec {text-align: center;  padding: 3.125rem;}
.contactUs .webSec.sec1 {display: flex; flex-wrap: wrap; gap: 3.1875rem 1.125rem;} 
.contactUs .webSec.sec1 h4 {text-align: center; width: 100%;}
.contactUs .webSec.sec1 h4 img{ margin: 0 auto;}
.contactUs .webSec.sec1 h4 > span {display: block; font-weight: 800; color: var(--color-bl2); letter-spacing: -0.025rem; font-size: 1.75rem; line-height: 142.85%; }
.contactUs .webSec.sec1 h4 > span.mb {padding-bottom: 1rem;}
.contactUs .webSec.sec1 h4 > span b {color: var(--color-primary-1);}
.contactUs .webSec.sec1 .icBox {width: calc(50% - 0.5625rem); height: 6.75rem; border-radius: 0.625rem;; display: flex; align-items: center; justify-content: center; background: var(--color-bg-2); color: var(--color-bl1); font-weight: 700; font-size: 2.125rem;}
.contactUs .webSec.sec1 .icBox:first-of-type {gap: 1rem;}
.contactUs .webSec.sec1 .icBox:last-of-type {gap: 1.5rem;}

.contactUs .webSec.sec2 h4 {font-size: 2.5rem; font-weight: 800; text-align: center; line-height: 125%; margin-bottom: 3.75rem} 


.contactUs .webSec.sec2 .webCon h5 {color: var(--color-bl2); font-size: 1.875rem; font-weight: 700; line-height: 134%; padding-bottom: 2.215rem; }
.contactUs  .appraisal {position: relative;  width: 100%;}
.contactUs  .appraisal::before {content: ''; height: 70%; background: url(/application/views/Client/safety/Images/sub/ContacUs_bgjpg.jpg) no-repeat top center ; position: absolute; bottom: 0; left: 0; z-index: 1; width: 100%;}

.contactUs .sRankCon {display: grid; grid-template-columns: 17.5rem auto 17.5rem; width: 100%;  max-width:55rem;  justify-content: space-between; align-items: center; position: relative; z-index: 2; padding-top: 1.375rem; margin: 0 auto;}
.contactUs .sRankCon .logoBox {flex: 1; background: var(--color-white); border-radius: 100rem;  display: flex; justify-content: center; align-items: center; overflow: hidden; }
.contactUs .sRankCon > .sRank {color: #5e48d4; letter-spacing: -0.05em;}
.contactUs .sRankCon > .sRank > b {font-size: 18.125rem; font-weight: 800; position: relative;}
.contactUs .sRankCon > .sRank > b::after { content: ''; width: 8.375rem; height: 5.4375rem; display: block; position: absolute; background: url('/application/views/Client/safety/Images/common/rating_img1.png') no-repeat; top: 0; left: 50%; transform: translate(-50%, 11%); }
.contactUs .sRankCon > .sRank > span {font-size: 2.625rem; font-weight: 900; position: relative; left: -0.5rem;}
.contactUs .appraisal > strong {position: relative; z-index: 2; font-size: 1.5rem; line-height: 150%; font-weight: 700; color: var(--color-bl2); }
.contactUs .appraisal > strong b {color: var(--color-primary-1);}
.contactUs .appraisal > div:last-of-type {position: relative ; z-index: 2; display: flex; flex-direction: column; background: var(--color-white); width: calc(100% - 2rem); max-width: 42.5rem;  text-align: left; padding: 1.75rem 2rem; border-radius: 0.625rem; font-size: 0.9375rem; line-height: 173.3%;   margin: 2rem auto;}
.contactUs .appraisal > div:last-of-type b {color: var(--color-gy1); font-weight: 600; }
.contactUs .appraisal > div:last-of-type p {width: 100%; color: var(--color-gy1)}

.contactUs .award {position: relative; width: 100%; padding: 1.75rem 0 3.5625rem 0;}
.contactUs .award b {color: var(--color-primary-1);}
.contactUs .award > strong {font-weight: 700 ; font-size: 1.875rem; display: block; line-height: 150%; }
.contactUs .award > span { font-size: 1.5rem; font-weight: 700; color: var(--color-bl2); line-height: 150%; display: block;}
.contactUs .award > img {margin: 2.75rem auto 2.375rem;}

.contactUs .special {display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.75rem; width: calc(100% - 2.8125rem * 2); margin: 0 auto;}
.contactUs .special > div {background: var(--color-white); display: flex; flex-direction: column; text-align: left; align-items: flex-start; padding: 2.25rem; gap: 1rem; border-radius: 0.625rem;}
.contactUs .special > div > b {font-size: 1.375rem; font-weight: 800;}
.contactUs .special > div > span {color: var(--color-primary-1); font-size: 1.875rem; font-weight: 800; gap: 2px; display: inline-flex; align-items: flex-end;}
.contactUs .special > div > span strong {font-size: 2.75rem; letter-spacing: -0.05em; position: relative; top: 0.25rem;}
.contactUs .licenses  {padding: 3.4375rem 2.8125rem 0 2.8125rem; width: 100%; display: flex; flex-direction: column; gap: 1.9375rem;}
.contactUs .licenses strong {font-size: 1.75rem; font-weight: 800; color: var(--color-bl2);}
.contactUs .licenses .row { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr;  gap: 0.5625rem; }
.contactUs .licenses .row .col { display: flex ; flex-direction: column; align-items: center;}
.contactUs .licenses .row .col .thum {width: 100%; border-radius: 0.625rem; overflow: hidden; position: relative; }
.contactUs .licenses .row .col .cir {border: 0.25rem solid var(--color-primary-1); background: var(--color-white); width: 7.25rem; height: 7.25rem; display: flex; justify-content: center; align-items: center; border-radius: 50%; flex-direction: column; position: relative; margin-top: -25%; font-weight: 800; color: var(--color-bl2); gap: 0.125rem;}
.contactUs .licenses .row .col .cir span { font-size:  1.25rem;}
.contactUs .licenses .row .col .cir b {color: var(--color-primary-1); font-size:  1.25rem;}
.contactUs .licenses .row .col:nth-of-type(1) .cir { flex-direction: row;  }
.contactUs .licenses .row .col:nth-of-type(1) .cir span {font-size: 1.5rem; padding-top: 0.375rem;}
.contactUs .licenses .row .col:nth-of-type(1) .cir b { font-size: 2.5rem; }
.contactUs .licenses .row .col:nth-of-type(2) .cir b { font-size: 1.625rem; }
.contactUs .licenses .row .col:nth-of-type(2) .cir span {line-height: 1.5rem; }
.contactUs .licenses .row .col:nth-of-type(1) p {padding-top: 0.625rem;}
.contactUs .licenses .row .col p {color: var(--color-bl2); line-height: 137%; padding-top: 1.25rem; }

.contactUs .sec3 h4 {color: var(--color-bl1); font-weight: 800; font-size: 2.5rem; letter-spacing: -0.025em;}
.contactUs .sec3 > span:first-of-type {font-size: 1.625rem; color: var(--color-gy1); display: block; padding:1.5rem 0 2.875rem 0;}
.contactUs .sec3  .webCon {background: var(--color-bg-2); padding: 3.375rem 5rem; position: relative;}
.contactUs .sec3  .webCon > * {position: relative; z-index: 2;}
.contactUs .sec3  .webCon::before  {content: ''; height: 82%; background: url(/application/views/Client/safety/Images/sub/ContacUs_bgjpg.jpg) no-repeat top center ; position: absolute; bottom: 0; left: 0; z-index: 1; width: 100%;}

.contactUs .sec3  .webCon {letter-spacing: -0.025em;}
.contactUs .sec3  .webCon > img:first-of-type {margin: 0 auto; position: relative; z-index: 2; border-radius: 0.625rem;}

.contactUs .sec3  .webCon h5 {font-size: 2.5rem; font-weight: 800; color: var(--color-bl2); padding: 1.75rem 0 1rem 0;}
.contactUs .sec3  .webCon b {color: var(--color-primary-1);}
.contactUs .sec3  .webCon > span:first-of-type {display: block; font-size: 1rem ; padding-bottom: 3.125rem;}
.contactUs .sec3  .webCon > strong {font-size: 1.875rem; font-weight: 700; display: block; }
.contactUs .sec3  .webCon > strong:nth-of-type(2) {display: block; padding-bottom: 3.375rem;}
.contactUs .sec3  .webCon .row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; padding: 2.125rem 0 7.5rem 0;}
.contactUs .sec3  .webCon .row .col {background: var(--color-white); border-radius: 0.625rem; padding: 2.5rem 2.125rem ; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; text-align: left; position: relative; gap:1rem 0;}
.contactUs .sec3  .webCon .row .col  > b {font-size: 1.625rem ; font-weight: 700; color: var(--color-bl1); line-height: 130%; }
.contactUs .sec3  .webCon .row .col  > span {font-size:1.25rem; font-weight: 500; color: var(--color-gy1);  line-height: 130%; padding-right: 6.25rem;}
.contactUs .sec3  .webCon .row .col  > img { position: absolute; right: 2.125rem; bottom: 2.5rem;}
.contactUs .sec3  .webCon .partner {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;}




.webSec.sec4 h4 {font-size: 2.5rem; font-weight: 800; padding: 1.25rem 0 3.375rem 0; }
.webSec.sec4  {letter-spacing: -0.025em;}
.rowType1 > .row { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap:0.625rem; }
.rowType1 > .row .col {background: var(--color-bg-2); border-radius: 0.625rem; padding: 2.25rem 1.375rem; text-align: left; display: flex; flex-direction: column; gap: 1.125rem 0; }
.rowType1 > .row .col > span {font-weight: 800; color: var(--color-primary-1);}
.rowType1 > .row .col > b {font-size: 1.75rem; font-weight: 800; letter-spacing: -0.05em; color: var(--color-bl1); line-height: 121.5%;}
.rowType1 > .row .col > div > p {font-size:0.9375rem; font-weight: 500; letter-spacing: -0.05em; color: var(--color-gy1); line-height: 133%; margin-bottom: 0.5rem;}

.rowType1  > strong:first-of-type{padding-top: 4.375rem;}
.rowType1  > strong {font-size: 1.875rem; display: block; font-weight: 700; padding-bottom: 1.875rem; line-height: 133.3%;}
.rowType1  b {color: var(--color-primary-1);}

/*단체교육신청 */
.groupAppInfo  b {color: var(--color-primary-1);}
.groupAppInfo .webInfo  {background: var(--color-bg-2) url('/application/views/Client/safety/Images/sub/GroupAppInfo_top_bg.png') no-repeat calc(100% - 4.375rem) 100%; letter-spacing: -0.025em; }
.groupAppInfo .sec1  {text-align: center;  padding: 3.125rem; padding-bottom: 0;}
.groupAppInfo .sec1 h3 {font-size: 1.75rem; color: var(--color-bl2); font-weight: 800; line-height: 142.85%; padding: 1.875rem 0 3rem 0;}
.groupAppInfo .sec1 h4 {font-size: 2.5rem; color: var(--color-bl1); font-weight: 800; line-height: 125%; padding-top: 3.125rem;}
.groupAppInfo .sec1 > img {margin: 0 auto;}

.groupAppInfo .sec2 > .tbWrap .row { grid-template-columns: 11.5625rem auto; }
.groupAppInfo .sec2 > .tbWrap .row .th b {color: var(--color-bl2); font-weight: 700; font-size: 1.25rem;}
.groupAppInfo .sec2 > .tbWrap .row .td ol { display: flex; flex-direction: column; padding: 1.5rem 1.25rem;}
.groupAppInfo .sec2 > .tbWrap .row .td ol li {display: flex; flex-direction: column; }
.groupAppInfo .sec2 > .tbWrap .row .td ol li p {font-size: 1.25rem; color: var(--color-bl2); letter-spacing: -0.025em; line-height: 130%; padding: 0.1875rem 0;}
.groupAppInfo .sec2 > .tbWrap .row .td ol li p:first-of-type::before { padding-right: 0.25rem; }
.groupAppInfo .sec2 > .tbWrap .row .td ol li p.dash {padding-left: 1.75rem; font-size: 1rem; padding-bottom: 0.5rem;}
.groupAppInfo .sec2 > .tbWrap .row .td ol li p.dash::before {left: 1.125rem; top: 0.1875rem;}

.groupAppInfo .sec3 > .row {display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.75rem;}
.groupAppInfo .sec3 > .row .col {color: var(--color-white); padding:2.5rem 1.875rem; border-radius: 0.625rem;  display: flex; flex-direction: column; gap: 4.6875rem; }
.groupAppInfo .sec3 > .row .col > strong {font-size: 1.875rem; font-weight: 800; line-height: 120%; }
.groupAppInfo .sec3 > .row .col > div {display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-end; width: 100%;} 
.groupAppInfo .sec3 > .row .col > div > span:first-of-type { font-size: 1.625rem; font-weight: 700; letter-spacing: -0.025em; text-decoration: line-through;}
.groupAppInfo .sec3 > .row .col > div > span:nth-of-type(2) {font-size: 1.875rem; font-weight: 700;}
.groupAppInfo .sec3 > .row .col > div > span:nth-of-type(2) b {color: var(--color-white); font-weight: 800; font-size: 2.875rem;}

.groupAppInfo .sec3 > .row .col:nth-of-type(1)  {background: var(--color-primary-1-dk);}
.groupAppInfo .sec3 > .row .col:nth-of-type(1) > div > span:first-of-type { color: #8d87b7;}
.groupAppInfo .sec3 > .row .col:nth-of-type(2)  {background: var(--color-primary-1);}
.groupAppInfo .sec3 > .row .col:nth-of-type(2) > div > span:first-of-type { color: #cac5e4;}
.groupAppInfo .sec3 > .row .col:nth-of-type(3)  {background: #2a2a2a;}
.groupAppInfo .sec3 > .row .col:nth-of-type(3) > div > span:first-of-type { color: #afafaf;}

.groupAppInfo .sec5 { display: flex; justify-content: center; flex-direction: column; text-align: center; padding: 4.5rem 0 4.5rem 0 ;}
.groupAppInfo .sec5 > span { font-size: 1.75rem; font-weight: 700; color: var(--color-bl2); }
.groupAppInfo .sec5 > span:last-of-type {font-size: 1.625rem;}
.groupAppInfo .sec5 > strong { font-size: 2.5rem; font-weight: 800; padding: 0.625rem 0 1.625rem 0;}
.groupAppInfo .sec5 > .contact {background: var(--color-bg-2); height: 6.25rem; border-radius: 0.625rem; display: flex; justify-content: center; align-items: center; margin-top: 2.5rem ; width: 100%;}
.groupAppInfo .sec5 > .contact p {color: var(--color-bl1); font-size: 1.875rem; font-weight: 700; letter-spacing: -0.025em; } 
.webSec.btnWrap {display: flex; justify-content: center; align-items: center;}
.webSec.btnWrap  a {background: var(--color-primary-1); color: var(--color-white); width: 100%; max-width: 18.75rem; height: 2.875rem; border-radius: 0.625rem; display: inline-flex; justify-content: center; align-items: center; font-weight: 500;}
.webSec.btnWrap  a:hover {background: var(--color-primary-1-hover);}

/* 교육안내 */
.eduInfo {letter-spacing: -0.025em;}
.eduInfo .webInfo {padding-top: 4rem; padding-bottom: 4rem; gap: 1.875rem;background: var(--color-bg-2) url('/application/views/Client/safety/Images/sub/eduInfop_bg.png') no-repeat calc(100% - 7.125rem) 74%; }
.eduInfo .webInfo h2 {gap: 1.25rem;}
.eduInfo .webInfo h2 > span {padding-bottom: 2px;}
.eduInfo .webInfo h2 > p {font-weight: 500; font-size: 1rem; letter-spacing: -0.05em; line-height: 137%; color: var(--color-gy1);}

.eduInfo .sec2 .h3desc {padding-bottom: 0.5rem;}
.eduInfo .sec2 > p {font-size: 1.25rem; padding-top: 0.5rem; padding-bottom: 0.5rem; color: var(--color-bl2); }
.eduInfo .sec2 > p b {font-weight: 600; color: var(--color-bl1);}

.eduInfo .sec3 h3 {padding-bottom: 1.25rem; }
.eduInfo .sec3 > div:first-of-type { display: flex; flex-direction: column; padding-bottom: 2.5rem;}
.eduInfo .sec3 > div:first-of-type > strong { font-size: 1.25rem; font-weight: 700; padding-bottom: 0.875rem; }
.eduInfo .sec3 > div:first-of-type > p {color: var(--color-bl2); padding: 0.3125rem 0 ;}
.eduInfo .sec3.rowType1 > .row {grid-template-columns: 1fr 1fr 1fr;}
.eduInfo .sec3.rowType1 > .row .col {padding: 2rem 1.875rem;}
.eduInfo .sec3.rowType1 > .row .col b { font-size: 600; font-size: 1.5rem;}
.eduInfo .sec3.rowType1 > .row .col p { font-size: 1.125rem; line-height: 155.5%; color: var(--color-bl2);}

.eduInfo .sec4 .gridTable {display: grid; grid-template-columns: 11.625rem 11.625rem 11.625rem 1fr; grid-template-rows: auto; border-top: 2px solid var(--color-primary-1); border-left: 1px solid #dcdcdc; color: var(--color-bl2);}

.eduInfo .sec6 .webCon {margin-top: 7.125rem; padding: 3.5rem 4rem 4.625rem 4rem ;  letter-spacing: -0.025em;}
.eduInfo .sec6 .webCon > span {font-size: 1.25rem; font-weight: 600; line-height: 140%;}
.eduInfo .sec6 .webCon > span:nth-of-type(1) {color: var(--color-gy1);}
.eduInfo .sec6 .webCon > span:nth-of-type(2) {color: var(--color-bl2); font-size: 1.75rem; font-weight: 800; padding: 1.6125rem 0 ;}
.eduInfo .sec6 .webCon > span:nth-of-type(2) b {color: var(--color-primary-1);}
.eduInfo .sec6 .webCon > span:nth-of-type(3) {color: var(--color-gy1);}
.eduInfo .sec6 .webCon > strong {font-size: 2.75rem; font-weight: 800; color: var(--color-bl2); padding-bottom: 1.5rem;}
.eduInfo .sec6 .webCon .row  {display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1.5625rem; width: 100%; padding: 3.25rem 0 2.625rem 0;}
.eduInfo .sec6 .webCon .row .col {display: flex; flex-direction: column; align-items: flex-start; text-align: left;  background: var(--color-white); border-radius: 0.625rem; display: flex; padding: 1.875rem 1.875rem  3.75rem 1.875rem; gap: 1rem; }
.eduInfo .sec6 .webCon .row .col:nth-of-type(1) {background: var(--color-white) url('/application/views/Client/safety/Images/sub/EduInfo_obj1.png') no-repeat 100% 100%; }
.eduInfo .sec6 .webCon .row .col:nth-of-type(2) {background: var(--color-white) url('/application/views/Client/safety/Images/sub/EduInfo_obj2.png') no-repeat 100% 100%; }
.eduInfo .sec6 .webCon .row .col:nth-of-type(3) {background: var(--color-white) url('/application/views/Client/safety/Images/sub/EduInfo_obj3.png') no-repeat 100% 100%; }

.eduInfo .sec6 .webCon .row .col b {font-size: 1.625rem; font-weight: 700; }
.eduInfo .sec6 .webCon .row .col p {font-size: 1.25rem; color: var(--color-gy1); line-height: 130%; }
.eduInfo .sec6 .webCon .btnWrap {display: flex; justify-content: center; align-items: center; width: 100%;}
.eduInfo .sec6 .webCon .btnWrap > a{background: var(--color-primary-1); color: var(--color-white); width: 100%; max-width: 18.75rem; height: 2.875rem; border-radius: 0.625rem; display: inline-flex; justify-content: center; align-items: center; font-weight: 500;}
.eduInfo .sec6 .webCon .btnWrap > a:hover {background: var(--color-primary-1-hover);}

.acoQaA {display: flex; flex-direction: column; gap: 0.625rem;}
.acoQaA .row {background: var(--color-bg-3); padding: 0 2.6875rem; border-radius: 0.625rem;}
.acoQaA .row > strong,
.acoQaA .row > div { color: var(--color-gy1); font-size: 1.25rem; line-height: 140%; font-weight: 600; padding-left: 1.875rem; position: relative;}
.acoQaA .row > strong {display: grid; grid-template-columns: 1.875rem 1fr; padding: 1.875rem 0; grid-template-columns: 1.875rem 1fr 1.875rem; cursor: pointer;}
.acoQaA .row > div { opacity: 0; visibility: hidden; max-height: 0; overflow-y: hidden; transition: 0.4s; width: 100%; line-height: 160%; }
.acoQaA .row strong::before {content: 'Q.'; color: var(--color-primary-1) ;}
.acoQaA .row > strong::after {content: '\f107'; font:var(--fa-font-solid); transform: rotate(0); width: 1.875rem; height: 1.875rem; transition: 0.4s; transform-origin: 50% 50%; display: inline-flex; justify-content: center; align-items: center; }
.acoQaA .row > div::before {content: 'A.'; color: var(--color-primary-1); position: absolute; top: 1.875rem; left: 0; opacity: 0; visibility: hidden; transition: 0.3s;}
.acoQaA .row.has > div { opacity: 1; visibility: visible; max-height: 1000rem; padding: 1.875rem 0 1.875rem 1.875rem; border-top: 1px solid #e1e1e1;}
.acoQaA .row.has > strong::after {transform: rotate(180deg);}
.acoQaA .row.has > div b { color: var(--color-bl1); font-weight: 800; display: inline;}
.acoQaA .row.has > div a { color: var(--color-blue);}
.acoQaA .row.has > div::before {opacity: 1; visibility: visible;}
.acoQaA .row > strong:hover {color: var(--color-primary-1);}


/* 교육별 안내 */
.eduZoomInfo .sec2 > div {display: flex; flex-direction: column;}
.eduInfoDef .stepGrid .row span p { min-height: 3.75rem; display: flex; justify-content: center; align-items: center; font-size: 1.125rem; line-height: 135%; }
.eduBookInfo.eduInfoDef .row span p {min-height: 4.5625rem}
.eduInfoDef {letter-spacing: -0.025em;}
.eduInfoDef .webInfo h2 p { font-weight: 500; font-size: 1rem; letter-spacing: -0.05em; line-height: 137%; color: var(--color-gy1);}
.eduInfoDef .webInfo {padding-top: 4rem; padding-bottom: 4rem;}

.eduInfoDef h4 { font-size: 1.5rem; font-weight: 700; color: var(--color-bl2); padding: 2rem 0 1rem 0;}
.eduInfoDef h4:first-of-type {padding-top: 0.875rem;}
.eduInfoDef .tbWrap {display:flex; flex-direction: column; width: 100%; border: 1px solid #dcdcdc;}
.eduInfoDef .tbWrap .row { grid-template-columns: 11.5625rem auto;}
.eduInfoDef .tbWrap .row .th b { color: var(--color-bl2); font-weight: 700; font-size: 1.25rem ; }
.eduInfoDef .tbWrap .row .td {padding: 1.5rem 1.25rem;}
.eduInfoDef .tbWrap .row .td p { font-size: 1.25rem; color: var(--color-bl2); letter-spacing: -0.025em;  line-height: 130%;  padding-top: 0.1875rem; padding-bottom: 0.1875rem; }

.eduStepGrid {border: 1px solid #efefef; border-radius: 0.625rem; padding: 3rem 2.5rem ; display: grid;  grid-template-columns: 23rem 1fr; gap: 2.5rem 1.5rem; background: var(--color-bg-2);}
.eduStepGrid strong {font-size: 1.25rem; font-weight: 800; padding-bottom: 0.875rem; display: flex; color: var(--color-bl1); }
.eduStepGrid p {padding-top: 0.25rem; padding-bottom: 0.25rem; line-height: 130%; font-size: 1.125em;} 
.eduStepGrid p span {display: block; font-size: 1rem; color: var(--color-bl2); padding-top: 0.125rem; padding-bottom: 0.125rem; line-height: 130%;}
.eduStepGrid p span::before {top: 0.125rem;}
.eduStepGrid p span:first-of-type {padding-top: 0.5rem;}
.eduStepGrid p span:first-of-type::before {top: 0.5rem;}
.eduStepGrid .col-2 { grid-column: span 2;}

.eduZoomInfo .webInfo { background: var(--color-bg-2) url('/application/views/Client/safety/Images/sub/EduZoomInfo_bg.png') no-repeat calc(100% - 7.125rem) 80%;}
.eduBookInfo .webInfo { background: var(--color-bg-2) url('/application/views/Client/safety/Images/sub/EduBookInfo_bg.png') no-repeat calc(100% - 7.125rem) 72%;}
.eduOnlineInfo .webInfo { background: var(--color-bg-2) url('/application/views/Client/safety/Images/sub/EduOnlineInfo_bg.png') no-repeat calc(100% - 7.125rem) 65%;}

.eduZoomInfo .sec2 > div:first-of-type {display: flex; flex-direction: column; padding-bottom: 2.5rem;}
.eduZoomInfo .sec2 > div:first-of-type strong {font-size: 1.25rem; font-weight: 700; padding-bottom: 0.875rem;}
.eduInfo .sec3 > div:first-of-type > p {color: var(--color-bl2); padding: 0.3125rem 0;}


/*개인정보 처리방침 */
.policyInfo {padding-bottom: 0.875rem; padding-top: 1rem;}
.policyInfo .mb {margin-bottom: 1rem;}

.infoTabTitle {width: 100% ; background: var(--color-bg-1); text-align: center; color: var(--color-gl1); font-weight: 600;  padding: 0.5rem 0; border: 1px solid #ddd; border-bottom: 0;}	
.infoTab {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; margin-bottom: 4rem;}
.infoTab li {border-right: 1px solid #ddd;}
.infoTab li:nth-of-type(2) {grid-column: 2 span;} 
.infoTab li:nth-of-type(1),
.infoTab li:nth-of-type(6) {border-left: 1px solid #ddd;}
.infoTab li:nth-of-type(n-6) {border-top: 1px solid #ddd;} 
.infoTab li:nth-of-type(n+6) {border-top: 1px solid #ddd; border-bottom: 1px solid #ddd;}

.infoTab li a {display: flex; align-items: center; justify-content: center; text-align: center; line-height: 130%; flex-wrap: wrap; padding: 1rem; gap: 0.625rem 0;}
.infoTab li a img {max-width: 3.25rem;}
.infoTab li a span {width: 100%; }
.infoTab li a:hover {background: #f0ebf92e;}
.infoTab li a:hover  span { color: var(--color-bl1);;}
.article {padding-bottom: 3rem; letter-spacing: -0.025em;}
.article > strong,
.subLayout main .textCon .article > strong { font-weight: 600; color: var(--color-primary-1); font-size: 1.5rem; line-height:1; display: flex; align-items: center; gap: 0.5rem; padding-bottom: 0.875rem;}
.article > strong i { width: 1.625rem; height: 1.625rem; display: inline-flex;  } 
.article > strong i img { width: 100%;}
#policy2.article > strong i {width: 3.25rem;; }
#policy2.article > strong i img {width: 50%;}

.article .row.th {margin-top: 0.875rem;}
.article .row.th span {text-align: center; background: var(--color-bg-2); border-top: 1px solid #ddd; font-size: 0.875rem; font-weight: 600; color: var(--color-bl2); padding: 0.625rem 1rem;}
.article .row.col-4 {display: grid; grid-template-columns:1fr 1fr 1fr 1fr;}
.article .row.col-2 {display: grid; grid-template-columns:1fr 2fr;}
#policy2.article .row.col-4 { grid-template-columns: 12rem 1fr 1fr 10rem;}
.article .row span:first-of-type {border-left: 1px solid #ddd;}
.article .row span {border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; padding: 1rem; display: flex; flex-direction: column;  font-size: 0.9375rem; gap: 0.625rem 0;}
.article .row span:first-of-type  {justify-content: center;  align-items: center; text-align: center; gap: 0.25rem;}
.article .row span:last-of-type {justify-content: center; align-items: center; text-align: center;} 
.article .row span b {font-weight: 600; color: var(--color-bl1);}
.article .row span em,
.article .row span p {line-height: 133%;}
.article .row:last-of-type {margin-bottom: 0.875rem;}

.article > p {padding-top:0.375rem; padding-bottom: 0.25rem; line-height: 148%;}
.article > p b {color: var(--color-bl1); font-weight: 700;}
.article ol li > .txt-d1.mb:last-of-type,
.article .mb {margin-bottom: 0.625em;}
.article ol li > .txt-d1:first-of-type {margin-top: 0.25rem;}
.article ol li > .txt-d1:last-of-type {margin-bottom: 0.25rem;}
.article .txt-d1 {position: relative; }
.article .dot {padding-left: 1.125rem;}
.article .dot::before {content: '•'; position: absolute; left: 0.25rem; top: 0;}

.article .txt-d1.danggu {padding-left: 1.125rem;}
.article .txt-d1.danggu::before {content: '※'; position: absolute; left: 0rem; top: 0;}
.article .txt-d2 {display: block; position: relative; }
.article .txt-d2.dash::before {top: 0;}
.article .txt-d3 {display: block; position: relative; padding-left: 2rem;}
.article .txt-d3.dash::before {top: 0; left: 1.125rem;}


.div-notice { background: var(--color-bg-2); padding: 1rem 1.5rem; border-radius: 0.25rem; margin-top: 0.5rem;}
.div-notice b {font-weight: 700; color: var(--color-bl1);}

.article > b {font-size: 1.125rem; font-weight: 600; color: var(--color-bl1); padding-top: 2rem; padding-bottom: 0.5rem; display: block;}
.article > b:first-of-type {padding-top: 0;} 

.subLayout main .textCon .agreement .article > strong  {padding-bottom: 1.625rem;}

.article > ol li {padding-left: 1.625rem; position: relative; margin: 0.5rem 0;}
.article:first-of-type {padding-top: 1.5rem;}
.article > ol li::before { position: absolute; left: 0.5rem; top: 0;}
.article > ol li > b {display: block; font-weight: 700; color: var(--color-bl1);}
.article > ol li > b:first-of-type {padding-top: 0.625rem;}
.article > ol li:nth-of-type(1)::before {content: '1.';}
.article > ol li:nth-of-type(2)::before {content: '2.';}
.article > ol li:nth-of-type(3)::before {content: '3.';}
.article > ol li:nth-of-type(4)::before {content: '4.';}
.article > ol li:nth-of-type(5)::before {content: '5.';}
.article > ol li:nth-of-type(6)::before {content: '6.';}
.article > ol li:nth-of-type(7)::before {content: '7.';}
.article > ol li:nth-of-type(8)::before {content: '8.';}
.article > ol li:nth-of-type(9)::before {content: '9.';}

.article > ol li > .order-d2 {position: relative; padding-left: 1.25rem;}
.article > ol li > .order-d2:first-of-type {margin-top: 0.25rem;}
.article > ol li > .order-d2::before {position: absolute; left: 0rem; top: 0rem;}
.article > ol li > .order-d2:nth-of-type(1)::before {content: '①';}
.article > ol li > .order-d2:nth-of-type(2)::before {content: '②';}
.article > ol li > .order-d2:nth-of-type(3)::before {content: '③';}
.article > ol li > .order-d2:nth-of-type(4)::before {content: '④';}
.article > ol li > .order-d2:nth-of-type(5)::before {content: '⑤';}
.article > ol li > .order-d2:nth-of-type(6)::before {content: '⑥';}

.marketing .article {padding-bottom: 2rem;}
.marketing .article > b,
.refund .article > b, 
.marketing .article > b:first-of-type, 
.refund .article > b:first-of-type {padding-bottom: 0;}
.refund .article > p > span {padding-top: 0.25rem; padding-bottom: 0.25rem;}
.refund .article > p > .txt-d2.dash::before {top: 0.25rem;}
.refund .article > p  .red {color: var(--color-red);}
.refund .article > strong, 
.subLayout main  .textCon .refund .article > strong {padding-bottom: 0.5rem;}

@media (max-width: 1440px) {
    .contactUs .sRankCon {padding-left: 1.5rem; padding-right: 1.5rem;}
    .contactUs .sRankCon {grid-template-columns: 15rem auto 15em;}
    .contactUs .sRankCon > .sRank > b {font-size: 15rem;}
    .contactUs .sRankCon .logoBox {padding: 0 2rem;}
    .contactUs .special > div {padding: 2.2rem 1.5rem;}
    .contactUs .special > div > span strong {font-size: 2.125rem;}
    .contactUs .special > div > span {font-size: 1.5rem;}

    .eduInfo .webInfo {background-position: calc(100% - 4rem) 74%; background-size: 42%;}
    .eduZoomInfo .webInfo {background-position: calc(100% - 4rem) 70%; background-size: 30%;}
    .eduBookInfo .webInfo {background-position: calc(100% - 4rem) 65%; background-size: 22%;}
    .eduOnlineInfo .webInfo {background-position: calc(100% - 4rem) 68%; background-size: 20%;}
    .stepGrid .row span {padding: 1.2rem 1rem;}

    .groupAppInfo .webInfo { padding-top: 3rem; background-size: 35%;}
    .groupAppInfo .webInfo h2  {gap: 1.25rem;}
    .groupAppInfo .webInfo h2 span {font-weight: 600; line-height: 138%; font-size: 1.375rem;}
}

@media (max-width: 990px) {
    .webInfo {padding: 3rem 2rem 2rem 2rem; gap: 1.875rem;}
    .subLayout main h2 {gap: 1rem;}
    .contactUs .webInfo {background-position: calc(100% - 3rem) 100%; background-size: 20%;}
    .eduInfo .webInfo {background-position: calc(100% - 2rem) 80%; background-size: 42%;}
    .eduZoomInfo .webInfo {background-position: calc(100% - 2rem) 70%; background-size: 26%;}
    .eduBookInfo .webInfo {background-position: calc(100% - 2rem) 65%; background-size: 22%;}
    .eduOnlineInfo .webInfo {background-position: calc(100% - 2rem) 65%; background-size: 20%;}
    .webInfo > .goLink {border-radius: 0.5rem;}    

    .contactUs .webSec,
    .contactUs .webSec.sec1 {padding-left: 0; padding-right: 0;}
    .contactUs .special {display: flex; flex-wrap: wrap;}
    .contactUs .special > div {padding: 2.2rem 1.5rem; align-items: center; text-align: center; width: calc(50% - 0.375rem); gap: 0.625rem;}  
    .contactUs .special > div:nth-of-type(2) {width: 100%; order: 9;}
    .rowType1 > .row {grid-template-columns: 1fr 1fr;}
    .rowType1 > .row .col {padding: 2.25rem 2.85rem 2rem 2.85rem; gap: 0.875rem;}
    .rowType1 > .row .col > div > p {margin-bottom: 0;}

    .eduInfo .sec4 .gridTable {display: grid; grid-template-columns: 6rem 6rem 6rem 1fr;}
    .gridTable > span,
    .gridTable > div {padding: 0.875rem 1rem;}

    
    .eduInfo .sec6 .webCon {padding: 10% 2rem;}
    .eduInfo .sec6 .webCon .row { gap: 0.5rem;}
    .eduInfo .sec6 .webCon .row .col {padding: 1.875rem 1.5rem 3.75rem 1.5rem; }
    .eduInfo .sec6 .webCon .row .col p {font-size: 1.125rem;}   
    .eduInfo .sec3.rowType1 > .row .col {padding: 2rem 1.5rem;}
    .eduInfo .sec3.rowType1 > .row .col p {font-size: 1rem;} 

    .eduInfo .sec6 .webCon .row .col:nth-of-type(1),
    .eduInfo .sec6 .webCon .row .col:nth-of-type(2),
    .eduInfo .sec6 .webCon .row .col:nth-of-type(3) {background-position: calc(100% - 1.5rem) calc(100% -1.5rem); background-size: 30%;}

    .eduInfoDef .tbWrap .row .th b {font-size: 1rem;}
    .eduInfoDef .tbWrap .row .td p {font-size: 1rem;}
    .stepGrid .row span b {font-size: 0.875rem;}
    .eduInfoDef .stepGrid .row span p {font-size: 1rem; min-height: 2.75rem;}
    .eduStepGrid {display: flex; flex-direction: column; padding: 0; gap: 0.625rem; border: 0; border-radius: 0; background: transparent; }
    .eduStepGrid .col {border: 1px solid #efefef; border-radius: 0.5rem; background: var(--color-bg-2); padding: 2rem 1.875rem;}
    .eduStepGrid .col p {font-size: 1rem ; color: var(--color-gy1); } 

    .groupAppInfo .webInfo {padding-top: 3rem; padding-bottom: 5rem; background-position: calc(100% - 2rem) bottom; }
    .groupAppInfo .sec1 { padding-left: 0; padding-right: 0;}
    .groupAppInfo .sec1 h3 { font-size: 2rem; padding: 10% 0 5% 0;}
    .groupAppInfo .sec1 > img {width: 96%; padding-left: 4%; margin: 0;}
    .groupAppInfo .sec1 h4 {font-size: 1.75rem; padding-top:7%;}
    .groupAppInfo .sec3 > .row {grid-template-columns: 1fr 1fr;} 
    .groupAppInfo .sec3 > .row .col {gap: 1.5rem;}
    .groupAppInfo .sec3 > .row .col:first-of-type {grid-column: 1 / 2 span;}

}

@media (max-width: 786px) {    
    .eduInfo .webInfo,
    .webInfo {padding: 2rem 2.25rem 2.25rem 2.25rem; gap: 1.375rem;}
    .subLayout main h2 {gap: 0.625rem;}
    .webInfo h2 span {font-size: 1.125rem; font-weight: 600; line-height: 130%;}
    .webInfo h2 strong {font-size: 2.25rem;} 
    .webInfo > .goLink {max-width: 12rem; height: 2.5rem; font-size: 1rem;}
    .eduZoomInfo .webInfo {background-position: calc(100% - 2rem) calc(100% - 1rem);}
    .eduInfo .webInfo h2 {gap: 0.625rem;}
    .eduInfo .webInfo h2 > p {display: none;}

    .webSec.def h3 {padding-top: 12%; padding-bottom: 0.625rem;}
    .webSec.def .h3desc,
    .eduInfo .sec2 > p {font-size: 1rem;}
    .webSec.def .h3desc {padding-bottom: 0.625rem;}
    .eduInfo .sec2 > p {padding-top: 0.25rem; padding-bottom: 0.25rem;}

    .webCon { padding: 10% 0;}

    .eduInfo .sec3 h3,
    .eduZoomInfo .sec2 > div:first-of-type strong,
    .eduInfo .sec3 > div:first-of-type > strong {padding-bottom: 2%; line-height: 135%;}
    .eduZoomInfo .sec2 > div:first-of-type strong,
    .eduInfo .sec3 > div:first-of-type > strong {font-size: 1.125rem;}
    .eduInfo .sec3 > div:first-of-type > p { line-height: 142%;}
    .eduInfo .sec3.rowType1 > .row {grid-template-columns: 1fr 1fr; gap: 0.375rem;}
    .eduInfo .sec3.rowType1 > .row .col:first-of-type {grid-column: 1/2 span;}
    .eduZoomInfo .sec2 > div:first-of-type p {line-height: 130%;}
    .acoQaA .row {padding: 0 1.5rem;}
    
    .contactUs .webSec.sec1 {gap: 5vw 0.5rem; padding: 10% 0 15% 0; }    
    .contactUs .webSec.sec2 h4 {font-size: 1.875rem; margin-bottom: 7%;}
    .contactUs .webSec.sec2 .webCon h5,
    .contactUs .webSec.sec1 h4 > span {font-size: 1.5rem;}
    .contactUs .webSec.sec1 .icBox {font-size: 2rem; height: 5rem;}
    .contactUs .sRankCon { grid-template-columns: 33% 1fr 33%; gap: 0; padding-bottom: 3%;}
    .contactUs .appraisal::before {height: 73.5%;}
    .contactUs .appraisal > strong {font-size: 1.25rem; }
    .contactUs .sRankCon > .sRank {display: flex; flex-direction: column;}
    .contactUs .sRankCon > .sRank > b {font-size: 30vw;}
    .contactUs .sRankCon > .sRank > b::after {width: 16vw; height: auto; padding-bottom: 30%; transform: translate(-50%, -32%); background-size: cover;}
    .contactUs .sRankCon > .sRank > span {position: relative;  transform: translate(4%, -50%); font-size: 1.5rem;}    
    .contactUs .webSec.sec2 .webCon h5 {padding-bottom: 7%;}
    .contactUs .webSec {padding: 10% 0;}
    .contactUs .appraisal > div:last-of-type {gap: 0.625rem;}
    .contactUs .appraisal > div:last-of-type b { font-weight: 800; font-size: 1rem;}
    .contactUs .appraisal > div:last-of-type p { line-height: 130%;}    
    .contactUs .award > span:last-of-type {font-size: 1.25rem; padding-top: 1rem;}
    .contactUs .award > span:last-of-type br:not(.mobBr){display: none;}
    .contactUs .special { width: calc(100% - 3rem); gap: 0.5rem;}
    .contactUs .special > div {border-radius: 0.375rem; gap: 0.375rem; padding: 1.5rem 1.125rem;}
    .contactUs .special > div > b {font-size: 1.125rem; }
    .contactUs .licenses {padding: 20% 1.5rem 0 1.5rem; gap: 1.75rem;}
    .contactUs .licenses strong {font-size: 2rem;}
    .contactUs .licenses .row { grid-template-columns: 1fr 1fr; gap: 1.5rem 0.5rem;}
    .contactUs .licenses .row .col img {width: 100%;}
    .contactUs .licenses .row .col p,
    .contactUs .licenses .row .col:nth-of-type(1) p {padding-top: 0.875rem; font-weight: 500;}
    
    .contactUs .sec3 h4,
    .webSec.sec4 h4,
    .rowType1 > strong:first-of-type,
    .rowType1 > strong {font-size: 1.875rem; line-height: 135%;}
    .contactUs .sec3 > span:first-of-type {font-size: 1.125rem; padding: 3.5% 0 10% 0;}
    .contactUs .sec3 .webCon .row {grid-template-columns: 1fr; width: 100%;}
    .contactUs .sec3 .webCon .row .col {width: 100%;}
    .contactUs .sec3 .webCon > strong {font-size: 1.5rem; line-height: 148%;}
    .contactUs .sec3 .webCon {padding: 10% 1.5rem 5% 1.5rem;}    
    .contactUs .sec3 .webCon .partner {grid-template-columns: 1fr 1fr 1fr 1fr;}
    .webSec.sec4 h4 {padding: 0 0 9% 0;}

    .stepGrid .row {grid-template-columns: 1fr; gap: 1rem;}
    .stepGrid .row span {padding: 0.625rem; min-height: 0; font-size: 1rem;}
    .stepGrid .row span br {display: none;}
    .stepGrid .row span::after {top: auto; bottom: 0; left: 50%; transform: translate(-50%, 120%) rotate(90deg); font-size: 0.625rem;}
    .infoTab {grid-template-columns: 1fr 1fr 1fr;}
    .infoTab li:nth-of-type(1),
    .infoTab li:nth-of-type(3),
    .infoTab li:nth-of-type(6),
    .infoTab li:nth-of-type(9) {border-left: 1px solid #ddd;}
    .infoTab li:nth-of-type(n-9) {border-top: 1px solid #ddd;} 
    .infoTab li:nth-of-type(n+9) {border-top: 0; border-bottom: 1px solid #ddd;}   
    
    .eduInfo .sec6 .webCon {margin: 12% 0 0 0;}
    .eduInfo .sec6 .webCon > span:nth-of-type(1) {font-size: 1.125rem;}
    .eduInfo .sec6 .webCon > span:nth-of-type(2) {padding: 4% 0;}
    .eduInfo .sec6 .webCon > strong {font-size: 2rem;}
    .eduInfo .sec6 .webCon .row {display: flex; flex-direction: column; padding: 7% 0 4% 0;}
    .eduInfo .sec6 .webCon .row .col {padding: 2rem 1.5rem; gap: 1rem;}
    .eduInfo .sec6 .webCon .row .col p br {display: none;}
    .eduInfo .sec6 .webCon .row .col:nth-of-type(1),
    .eduInfo .sec6 .webCon .row .col:nth-of-type(2),
    .eduInfo .sec6 .webCon .row .col:nth-of-type(3) {background-position: calc(100% - 1.5rem) center; background-size: 17.5%;}
    .eduInfo .sec6 .webCon .row .col b {font-size: 1.5rem;}
    .eduInfo .sec6 .webCon .row .col p {font-size: 0.9375rem;}
    .eduInfo .sec6 .webCon .btnWrap, 
    .eduInfo .sec6 .webCon .btnWrap > a {width: 100%; max-width: 100%;}

    .stepGrid .row span b {padding-bottom: 0.25rem; padding-top: 0.25rem; font-size: 0.8125rem; }
    .eduInfoDef .stepGrid .row span p {min-height: 0;}
    .webSec.def .tbWrap .row {grid-template-columns: 9rem 1fr;}
    .eduInfoDef .tbWrap .row .td {padding: 1.25rem;}

    .groupAppInfo .sec2 > .tbWrap .row .td ol {padding: 1rem 1.25rem;}
    .groupAppInfo .sec2 > .tbWrap .row .th b,
    .groupAppInfo .sec2 > .tbWrap .row .td ol li p {font-size: 1rem;}
    .groupAppInfo .sec3 > .row {gap: 0.5rem;}
    .groupAppInfo .sec3 > .row .col { padding: 2rem 1.5rem; gap:1rem}
    .groupAppInfo .sec3 > .row .col > strong {font-size: 1.5rem;}    
    .groupAppInfo .sec3 > .row .col > div > span:first-of-type { font-size: 1rem;}
    .groupAppInfo .sec3 > .row .col > div > span:nth-of-type(2) {font-size: 1.25rem;}
    .groupAppInfo .sec3 > .row .col > div > span:nth-of-type(2) b{ font-size: 1.875rem;}

    .groupAppInfo .sec5 {padding: 10% 0 5% 0;}
    .groupAppInfo .sec5 > span,
    .groupAppInfo .sec5 > span:last-of-type,
    .groupAppInfo .sec5 > .contact p {font-size: 1.25rem;}
    .groupAppInfo .sec5 > strong {font-size: 1.875rem;}
    .groupAppInfo .sec5 > .contact  {height:  auto; padding: 1.5rem 1rem; line-height: 135%; margin-top: 4%;}

}

@media (max-width: 550px) {  
    /*webInfo*/
    .eduBookInfo .webInfo,
    .eduOnlineInfo .webInfo,
    .eduZoomInfo .webInfo,
    .eduInfo .webInfo,
    .webInfo {padding: 10% 1.5rem 30% 1.5rem; gap: 1.375rem;}
    .subLayout main h2 {gap: 0.625rem;} 
    .webInfo h2 span {font-size: 1rem;}
    .webInfo h2 strong {font-size: 1.875rem;}
    .webInfo > .goLink {font-size: 0.875rem; border-radius: 0.25rem; height: 2.125rem; max-width: 50%;}
    .contactUs .webInfo { background-size: 27%; background-position: calc(100% - 1.5rem) 100%;}
    .contactUs .webSec.sec1 h4 > span.mb { padding-bottom: 0.875rem;}

    .eduInfo .webInfo {background-position: calc(100% - 2rem) 90%; background-size: 50%;}
    .eduZoomInfo .webInfo {background-position: calc(100% - 2rem) 90%; background-size: 38%;}
    .eduBookInfo .webInfo {background-position: calc(100% - 2rem) 90%; background-size: 28%;}
    .eduOnlineInfo .webInfo {background-position: calc(100% - 2rem) 90%; background-size: 30%;}
    /*소개*/
    .contactUs .webSec.sec1 h4 img {margin-bottom: 3%;}
    .contactUs .webSec.sec1 h4 > span {font-size: 1.25rem;}
    .contactUs .webSec.sec2 h4 {font-size: 1.5rem;}
    .contactUs .webSec.sec2 .webCon h5 { padding: 6% 0 6% 0; font-size: 1.25rem; line-height: 138%;}
    .contactUs .sRankCon { grid-template-columns: 1fr 1fr; gap: 3rem  0.625rem;  }
    .contactUs .sRankCon > .sRank {order: 9; grid-column: 1 / 2 span;}
    .contactUs .sRankCon > .sRank > b {font-size: 40vw;}
    .contactUs .sRankCon > .sRank > b::after {width: 21vw; padding-bottom: 14%; transform: translate(-50%, -28%);}
    .contactUs .appraisal::before {height: 68.5%; }
    .contactUs .appraisal > strong {font-size: 1.25rem;}
    .contactUs .appraisal > strong br:not(.mobBr) {display: none;}
    .contactUs .appraisal > div:last-of-type {padding: 1.5rem; margin: 5.5% auto; width: calc(100% - 3rem);}
    .contactUs .appraisal > div:last-of-type p {line-height: 148%;}
    
    .contactUs .special > div > span {font-size: 1rem;}
    .contactUs .special > div > span strong {font-size: 1.5rem;}

    .contactUs .award {padding: 10% 1.5rem 7% 1.5rem;}
    .contactUs .award > span {font-size: 1.125rem; padding-top: 3%;}
    .contactUs .award > img {margin: 8% auto 5%;  max-width: 40vw; width: 100%;}
    .contactUs .award > strong  {font-size: 1.5rem;}    
    .contactUs .award > span:last-of-type {font-size: 1rem;}
    .contactUs .licenses strong {font-size: 1.5rem;}
    .contactUs .licenses .row .col .cir {width: 5rem; height: 5rem;}
    .contactUs .licenses .row .col:nth-of-type(1) .cir b {font-size: 1.375rem;}
    .contactUs .licenses .row .col .cir b,
    .contactUs .licenses .row .col:nth-of-type(2) .cir b,
    .contactUs .licenses .row .col .cir span,
    .contactUs .licenses .row .col:nth-of-type(1) .cir span,
    .contactUs .licenses .row .col:nth-of-type(2) .cir span {font-size: 0.875rem; padding-top: 0; line-height: 1;}
    .contactUs .sRankCon .logoBox {padding: 0 1rem;}
    .contactUs .webSec.sec1 .icBox {font-size: 5.5vw; height: 4rem;}
    .contactUs .webSec.sec1 .icBox:first-of-type,
    .contactUs .webSec.sec1 .icBox:last-of-type {gap: 0.625rem;}
    .contactUs .webSec.sec1 .icBox:nth-of-type(1) > img {width: 8vw;}
    .contactUs .webSec.sec1 .icBox:nth-of-type(2) > img {width: 10vw;}
    .contactUs .licenses .row .col p,
    .contactUs .licenses .row .col:nth-of-type(1) p {font-size: 0.875rem; }
    .contactUs .sec3 .webCon > img:first-of-type {width: 50%;}
    .contactUs .sec3 .webCon > span:first-of-type {padding-bottom: 10%;}
    .contactUs .sec3 .webCon h5 {font-size: 2rem;}
    .contactUs .sec3 .webCon::before {height: 83%;}
    .contactUs .sec3 .webCon .row {padding-top: 5%; padding-bottom: 18%;}
    .contactUs .sec3 .webCon .row .col > img {width: 15%;}
    .contactUs .sec3 .webCon .row .col > span {padding-right: 17%;}
    .contactUs .sec3 .webCon > strong:nth-of-type(2) {padding-bottom: 9%;}
    .rowType1 > .row .col {padding: 2rem 1.5rem;}
    .rowType1 > .row .col > b {font-size: 1.375rem;}
    .rowType1 > .row .col > div > p {font-size: 0.875rem;}
    .rowType1 > .row .col > div > p br {display: none;}

    .eduInfo .sec4 .gridTable { display: grid; grid-template-columns: 1fr; border-left: none; border-top: 1px solid;}
    .gridTable > span {display: none;}

    .article > strong, .subLayout main .textCon .article > strong {font-size: 1.25rem; padding-bottom: 0.25rem;} 
    .article {padding-bottom: 2rem;}
    
    .eduInfo .sec6 .webCon {padding-left: 1rem; padding-right: 1rem;}
    .eduInfo .sec6 .webCon > span:nth-of-type(1) {font-size: 1rem;}
    .eduInfo .sec6 .webCon > span:nth-of-type(1) br {display: none;}
    .eduInfo .sec6 .webCon > span:nth-of-type(2) {font-size: 1.5rem;}
    .eduInfo .sec6 .webCon > strong {font-size: 1.5rem;}
    .eduInfo .sec6 .webCon > span:nth-of-type(3) {font-size: 1.125rem;}
    .eduInfo .sec3.rowType1 > .row {display: flex; flex-direction: column;}
    .eduInfo .sec3.rowType1 > .row .col {padding: 1.25rem 1.85rem; gap: 0.5rem; }
    .eduInfo .sec6 .webCon .row .col {gap: 0.625rem;}
    
    .eduInfo .sec6 .webCon .row .col:nth-of-type(1),
    .eduInfo .sec6 .webCon .row .col:nth-of-type(2),
    .eduInfo .sec6 .webCon .row .col:nth-of-type(3) {background-position: calc(100% - 1rem) center; background-size: 15%; padding: 1.25rem calc(16% + 1rem) 1.25rem 1.85rem;} 
    .acoQaA .row > strong {padding: 1.125rem 0; font-size: 1.125em;}
    .acoQaA .row > strong::after {font-size: 1.125rem; }
    .acoQaA .row > div b,
    .acoQaA .row > div {font-size: 1rem;}
    .acoQaA .row.has > div {padding: 1.125rem 0 1.125rem 1.5rem;}
    .acoQaA .row > div::before {top: 1.125rem;}

    /* 시간 한 줄 표시 */
    .gridTable .desc,
    .gridTable > span.line-1,
    .gridTable > span.line-2,
    .gridTable > span.line-3,
    .gridTable > span.line-4,
    .gridTable > span.line-5,
    .gridTable > span.line-6 { display: block; border-bottom: 1px solid #dcdcdc; border-right: 0; text-align: left ;}
    .gridTable > span.line-1::after {content: '~ 09:00 (10분)';}
    .gridTable > span.line-2::after {content: '~ 11:50 (150분)';}
    .gridTable > span.line-3::after {content: '~ 13:00 (60분)';}
    .gridTable > span.line-4::after {content: '~ 15:50 (50분)';}
    .gridTable > span.line-5::after {content: '~ 17:50 (200분)';}
    .gridTable > span.line-6::after {content: '~ 18:00 (10분)';}
    .gridTable > span { background: var(--color-bg-2); font-weight: 600; }

    .eduInfoDef h4 {font-size: 1.125rem; padding: 5% 0 0.625rem 0;}
    .webSec.def .tbWrap .row {grid-template-columns: 7rem 1fr;} 
    .eduStepGrid .col {padding: 1.25rem 1.25rem 1rem 1.25rem;}
    .eduStepGrid strong {padding-bottom: 0.5rem;}

    .groupAppInfo .webInfo h2 span {font-size: 1.125rem;}
    .groupAppInfo .webInfo h2 {gap: 0.875rem;}
    .groupAppInfo .webInfo {padding: 2rem 2rem 28% 2rem; background-size: 46%; background-position: calc(100% - 1.5rem ) bottom;}
    .groupAppInfo .sec1 {padding-top: 5%;}
    .groupAppInfo .sec1 h3,
    .groupAppInfo .sec1 h4 {font-size: 1.5em; line-height: 138%;}
    .groupAppInfo .sec3 > .row {display: flex; flex-direction: column; gap: 0.375rem;}
    .groupAppInfo .sec3 > .row .col {gap: 0; padding: 1.5rem;  border-radius: 0.375rem;}
    .rowType1 > .row {gap: 0.375rem;}
    .rowType1 > .row .col {padding: 1.5rem; border-radius: 0.375rem;}
    .groupAppInfo .sec5 > .contact p  {width: 100%;}
    .webSec.btnWrap a {width: 100%; max-width: 100%;}
}


@media  (max-width: 410px) {
    .webInfo {gap: 1.25rem; }
    .contactUs .sRankCon {gap: 2rem 0.5rem;}
    .contactUs .sRankCon > .sRank > b {font-size: 36vw;}
    .contactUs .sec3 .webCon,
    .contactUs .sRankCon,
    .contactUs .award {padding-left: 1rem; padding-right: 1rem;}
    .eduZoomInfo .webInfo {background-size: 32%;}
    .contactUs .award > span,
    .contactUs .award > strong {letter-spacing: -0.05em; line-height: 138%;}
    .contactUs .appraisal > div:last-of-type,
    .contactUs .special {width: calc(100% - 2rem);}
    .contactUs .special {gap: 0.375rem;}
    .contactUs .special > div {width: 100%; padding: 1.25rem; gap: 0.25rem;}
    .contactUs .licenses {gap: 1.25rem;}
    .contactUs .licenses .row .col .thum {border-radius: 0.375rem;}
    
    .webSec.def .h3desc {padding-bottom: 8%;}
    .webSec.def .h3desc, 
    .eduZoomInfo .sec2 > div:first-of-type strong, 
    .eduInfo .sec3 > div:first-of-type > strong {font-size: 1rem;}
    .webSec.def .h3desc, .eduInfo .sec2 > p {font-size: 0.9375rem;}

    .contactUs .sec3 h4, 
    .webSec.sec4 h4, .rowType1 > strong:first-of-type, 
    .rowType1 > strong,
    .contactUs .sec3 .webCon h5 {font-size: 1.5rem;}
    .contactUs .sec3 .webCon > strong {font-size: 1.375rem; line-height: 135%;}
    .contactUs .sec3 > span:first-of-type {font-size: 1rem; letter-spacing: -0.05em;}
    .contactUs .sec3 .webCon .row {gap: 0.5rem;}
    .contactUs .sec3 .webCon .row .col {padding: 2rem 1.5rem; border-radius: 0.375rem;}
    .contactUs .sec3 .webCon .row .col > b {font-size: 1.375rem;}
    .contactUs .sec3 .webCon .row .col > span {font-size: 1rem;}
    .contactUs .sec3 .webCon .row .col > img {right: 1.5rem; bottom: 2rem; width: 14%;}
    .contactUs .webSec.sec1,
    .webSec.sec4 h4,
    .contactUs .sec3 .webCon > strong:nth-of-type(2) {padding-bottom: 8%;}

    .webSec.def h3 {padding-top: 10%; font-size: 1.375rem; padding-bottom: 0.5rem;}

    .rowType1 > .row {gap: 0.375rem; }
    .rowType1 > .row .col {padding: 1.625rem 0.875rem; border-radius: 0.375rem; gap: 0.5rem;}
    .rowType1 > .row .col > b {font-size: 1.125rem; ;}
    .rowType1 > strong:first-of-type {padding-top: 18%;}    
    .rowType1 > strong {padding-bottom: 9%;}
    .eduInfo .sec6 .webCon .row .col:nth-of-type(1), .eduInfo .sec6 .webCon .row .col:nth-of-type(2), .eduInfo .sec6 .webCon .row .col:nth-of-type(3) {padding-left: 1.25rem; background-position: calc(100% - 0.625rem) center; background-size: calc(16% + 0.625rem); }
    
    .eduInfo .sec6 .webCon > span:nth-of-type(2) {font-size: 1.2rem;}
    .acoQaA .row {padding: 0 1rem;}
    .acoQaA .row > strong {padding: 1rem 0; font-size: 1em; line-height: 135%; grid-template-columns: 1.25rem 1fr 1.25rem;}
    .acoQaA .row > strong::after {font-size: 1rem; width: 1.25rem; height: 100%; font-size: 0.875rem;} 
    
    .webSec.def .tbWrap .row { grid-template-columns: 5.5rem 1fr;}
    .eduStepGrid .col {padding: 1rem;}
    .eduInfoDef .tbWrap .row .td p,
    .eduInfoDef .tbWrap .row .th b {font-size: 0.9375rem;}
    .eduInfoDef .tbWrap .row .td {padding: 0.625rem 1rem }

    .groupAppInfo .sec3 > .row .col > strong {font-size: 1.25rem;}
    .groupAppInfo .sec3 > .row .col > div > span:nth-of-type(2) {font-size: 1rem;}
    .groupAppInfo .sec3 > .row .col > div > span:nth-of-type(2) b {font-size: 1.5rem;}
    .groupAppInfo .sec1 > img {padding-left: 0; width: 100%;}

    .groupAppInfo .sec5 > span, .groupAppInfo .sec5 > span:last-of-type, .groupAppInfo .sec5 > .contact p {font-size: 1rem;}
    .groupAppInfo .sec5 > strong {font-size: 1.5rem; padding-bottom: 1rem;}
    
}