/* ==========================
   COMMON
========================== */
:root {
   --font-color2: #222;
   --font-color3: #333;
   --font-p: font-family: 'Pretendard';
   --font-pv: font-family: "Pretendard Variable";
   --background-color: #F2F5FC;
}
* {font-family: var(--font-pv); color: var(--font-color3); margin: 0; padding: 0; box-sizing: border-box; word-break: keep-all; overflow-wrap: break-word; white-space: normal;}
section {width: 100%; max-width: 1200px; margin: 0 auto;}

/* =====================
   º»¹® SECTION
===================== */
.content-wrap {position: relative; background: var(--background-color); padding-top: 60px;}
.content-wrap::before {content: ""; position: absolute; width: 716px; height: 555px; top: 0; left: 68.8%; transform: translateX(-50%); background-image: url(https://russeldata.megastudy.net/campus/images/russel/campus_common/info/bg.png); background-repeat: no-repeat; background-size: cover; pointer-events: none; z-index: 0;}

.paragraph-wrap {position: relative; padding: 0 60px;}
.paragraph-wrap h3 {display: flex; font-size: 32px; font-style: normal; font-weight: 400; line-height: 130%; letter-spacing: -0.64px; margin-top: 1px;}
.paragraph-wrap h3 span {display: flex; align-items: center; padding-top: 8px;}
.paragraph-wrap h3 strong {display: flex; width: 170px; height: 57px; align-items: center;}
.paragraph-wrap h3 strong img{display: inline-block; width: 165px; height: 39px;}
.paragraph-wrap p {font-size: 16px; font-style: normal; font-weight: 400; line-height: 140%; letter-spacing: -0.16px;margin-bottom: 20px;}
.paragraph-wrap p strong {font-weight: 700;}
.paragraph-wrap .p01 {font-size: 20px; font-style: normal; font-weight: 400; line-height: 140%; letter-spacing: -0.2px; margin-top: 12px; margin-bottom: 40px;}

/* =====================
   ¿øÀå SECTION
===================== */
.content-wrap.no-pic .wonjang-wrap {padding: 0 60px;}
.content-wrap.no-pic .wonjang-wrap .text-box {margin-right: 0;}

.wonjang-wrap {position: relative; display: flex; justify-content: flex-end; align-items: flex-end; text-align: right;}
.wonjang-wrap .text-box {margin-bottom: 60px; margin-right: calc(258px + 2px);}
.wonjang-wrap .text-box p { font-size: 20px; font-style: normal; font-weight: 700; line-height: 140%; letter-spacing: -0.2px;}
.wonjang-wrap .text-box p.wonjang-name { font-weight: 400;}
.wonjang-wrap .img-box {position: absolute; flex: 0 0 258px; width: 258px;}
.wonjang-wrap .img-box img { display: block; width: 100%; height: auto; color-scheme: only light !important;}
.wonjang-wrap a.detail-btn {width: 80px; height: 30px; font-size: 14px; border: 1px solid #DBDEE5; background: #FFF; text-align: center; line-height: 30px; border-radius: 4px; letter-spacing: -0.14px; margin-top: 10px;}

/* ====================================================
   RESPONSIVE (Media Queries)
==================================================== */
/* ÅÂºí¸´ ÀÌÇÏ (1199px ÀÌÇÏ) */
@media (max-width: 1199px) {
   .content-wrap {padding-top: 120px;}
   .content-wrap::before {width: 537px; height: 438px; left: 64%; background-image: url(https://russeldata.megastudy.net/campus/images/russel/campus_common/info/bg_ta.png);}
   .content-wrap.no-pic .paragraph-wrap p:not(.p01) {max-width: 100%;}

   .paragraph-wrap p {font-size: clamp(14px, calc(14px + (16 - 14) * ((100vw - 360px) / 840)), 16px);}
   .paragraph-wrap p:not(.p01) {max-width: calc(100% - 258px + 36px);}
   .paragraph-wrap .p01 {font-size: clamp(17px, calc(17px + (20 - 17) * ((100vw - 360px) / 840)), 20px);}

   .wonjang-wrap {margin-top: 40px;}
   .wonjang-wrap .text-box {margin-bottom: 60px; margin-right: calc(258px + 24px);}
   .wonjang-wrap .img-box {right: 24px;}
}

/* ¸ð¹ÙÀÏ ÀÌÇÏ (767px ÀÌÇÏ) */
@media (max-width: 767px) {
   .content-wrap {padding-top: clamp(80px, calc(80px + (120 - 80) * ((100vw - 360px) / 840)), 120px);}
   .content-wrap::before {width: clamp(253px, calc(253px + (537 - 253) * ((100vw - 360px) / 840)), 537px); height: clamp(284px, calc(284px + (537 - 284) * ((100vw - 360px) / 840)), 537px); left: auto; right: 0; transform: none; background-image: url(https://russeldata.megastudy.net/campus/images/russel/campus_common/info/bg_m.png);}
   .content-wrap.no-pic .wonjang-wrap {padding: 0 clamp(24px, calc(24px + (60 - 24) * ((100vw - 360px) / 840)), 60px);}
   .content-wrap.no-pic .wonjang-wrap .text-box .m-only {display: none;}

   .paragraph-wrap {padding: 0 clamp(24px, calc(24px + (60 - 24) * ((100vw - 360px) / 840)), 60px);}
   .paragraph-wrap h3 {color: var(--font-color2); font-size: 20px; font-style: normal; font-weight: 350; line-height: normal;}
   .paragraph-wrap h3 span {padding-top: 4px;}
   .paragraph-wrap h3 strong {width: 109px; height: 37px;}
   .paragraph-wrap h3 strong img{width: 106px; height: 25px;}
   .paragraph-wrap p {letter-spacing: -0.11px; margin-bottom: 16px;}
   .paragraph-wrap p:not(.p01) {max-width: 100%;}
   .paragraph-wrap .p01 {letter-spacing: -0.17px; margin-bottom: 32px;}

   .wonjang-wrap {margin-top: 16px; justify-content: right; gap: 8px; padding: 0 24px;}
   .wonjang-wrap .text-box {margin: 0 0 34.5px 0; padding-left: clamp(20px, calc(20px + (40 - 20) * ((100vw - 360px) / 840)), 40px);}
   .wonjang-wrap .text-box p {font-size: clamp(17px, calc(17px + (20 - 17) * ((100vw - 360px) / 840)), 20px); letter-spacing: -0.17px;}
   .wonjang-wrap .img-box {position: relative; flex: 0 0 140px; width: 140px; right: 0;}
   .wonjang-wrap a.detail-btn {width: 73px; font-size: 13px; letter-spacing: -0.13px;}
}
