@charset "UTF-8";

/* mode */
.dark_active {
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(5%, #1e1e20), color-stop(38%, #1e1f21));
  background-image: -o-linear-gradient(top, #1e1e20 5%, #1e1f21 38%);
  background-image: linear-gradient(to bottom, #1e1e20 5%, #1e1f21 38%);
}
.dark_active .sub_con .row p, .dark_active .interview h4 span, .dark_active .row .step_tit, .dark_active .row .step, .dark_active .archive .row h4, .dark_active .archive .row h5, .dark_active .archive .row h6, .dark_active .tab li a {
  color: #e3e3e3;
}
.dark_active .sub_con .row h3, /*.dark_active .interview h4,*/ .dark_active .interview p .tit, .dark_active .news_tit {
  color: #a2bcf9;
}
.dark_active .sub_con .row .roundbox, .dark_active .sub_con .row h3.txtb {color: #fff;}
.dark_active .tab li a:hover, .dark_active .tab li a:active {background: transparent;}
.dark_active .sub_con .row .source p  {
  color: #555;
}
/*.dark_active .interview p {
  border: 1px solid #a2bcf9;
}*/
.dark_active .interview p .tit::before {
  filter: brightness(10);
}
.dark_active .sub_txt i, .dark_active .sub_con .row p.mark, .dark_active .sub_con .row .box_bg {
	color: #fff;
}
.dark_active .blockq {color: #fff;text-decoration-color: #96addf;}
.dark_active .top_wrap .desc, .dark_active .top_wrap .write_info, .dark_active .top_wrap h2, .dark_active .sub-visual-tabs a {color: #fff;}
/*추가*/
.dark_active .interview p .txt {color:#222;}

/* zoom */
#contents.zoom .top_wrap { font-size: 1.1em; }
#contents.zoom .sub_con { font-size: 1.1em; }
#contents.zoom img { zoom: 100%; }

/* common */
.tac {text-align: center;}
.fsi {font-style: italic;}
.fwb {font-weight: 600;}
.img {display: block;}
.tdu {text-decoration: underline;text-underline-position: under;}
#contents .mb0 {margin-bottom: 0;}
sup {color: #09adff;font-weight: 400;margin-right: 3px;}

/* sub header */
.top_wrap {-webkit-transition: .4s;transition: .4s;margin: 0 auto;border-bottom-left-radius: 80%;border-bottom-right-radius: 0%;background: #4267b2;color: #fff;}
.top_wrap .title {color: #f2f6ff;position: absolute;left: 7%;top: 30%;line-height: 1.2;}
.top_wrap .title::after {content:'';display: block;background: #0194e1;width: 300px;height: 300px;border-radius: 100%;position: absolute;top: -80px;left: -200px;opacity: 0.4;}
.top_wrap .title strong {font-size: 1.5em;font-weight: 600;position: relative;z-index: 1;}
.top_wrap .title strong:before { position: absolute; left: -2rem; top: -2rem; width: 4.6rem; height: 4.6rem; border-radius: 50%; content: ''; background: #fff; opacity: .15; animation: pulse 1.3s infinite ease-in-out alternate; }
@keyframes pulse {
  from {
    transform: scale(0.8);
  }

  to {
    transform: scale(1.2);
  }
}
.top_wrap .title p {font-size: 2.2em;font-weight: 700;position: relative;z-index: 1;}
.top_wrap .desc {font-size: 1.3em;max-width: 1000px;margin: 0 auto;font-weight: 500;word-break: keep-all;padding: 150px 0 30px;}
.top_wrap h2 {font-size: 4em;text-align: center;line-height: 1.2;margin: 70px 0 30px;font-weight: 600;}
.top_wrap h2 span:first-child {display: inline-block;}
.top_wrap h2 span {display: block;}
.top_wrap h2 .small {font-size: .5em;font-weight: 300;margin-top: 20px;}
.top_wrap .write_info {font-size: 1.2em;display: flex;justify-content: center;gap: 20px;}
.top_wrap .write_info.one {font-size: 1.2em;display: flex;justify-content: center;gap: 20px;padding-top: 150px;}
.top_wrap .image-wrapper {position: relative; border-radius: 30px;max-width: 1200px;margin: 0 auto;}
.top_wrap .title_img { width: 100%; height: 100%; border-radius: 300px; position: relative;transition: all 0.3s ease-out; transform-origin: top;}
.profile {-webkit-transition: 0.6s 0.4s;transition: 0.6s 0.4s;position: absolute;left: 0;bottom: 0;}
.profile img {border-radius: 20px;}

/* contents */
.sub_txt { max-width: 800px; margin: 0 auto; text-align: center; }
.sub_con { max-width: 1280px; margin: 160px auto 0; padding: 0 1rem; -webkit-transition: .4s; transition: .4s;}
.sub_con .row h3 { font-size: 1.6em; color: #445d98; }
.sub_con .row h3.txtb { font-size: 1.6em; color: #000000; }
.sub_con .row p { font-size: 1.3em; }
.sub_con .row .small { font-size: .85em; }
.sns_box {position: fixed;right: -5rem;bottom: 29rem;z-index: 50;opacity: 0;-webkit-transition: 0.7s;transition: 0.7s;}
#contents .row.profile_m {display: none;}

/* grid */
#contents .row { display: flex; justify-content: space-evenly; }
.contwrap::after, .row::after { clear: both; }
.contwrap {margin-bottom: 50px;}
.row { margin-bottom: 30px; }
.column.full { width: calc(100% - 30px); }
.column.half { width: calc(50% - 30px); }
.column.one-third { width: calc(33.5% - 30px); }
.column.one { width: calc(30% - 30px); }
.column.one2 { width: calc(70% - 30px); }
.column.one4 { width: calc(25.3% - 30px); }

/* sns공유하기 */
.sns_wrap {position: relative;z-index: 5;}
.sns_wrap .tit {display: none;}
.sns_box.fix {opacity: 1;right: 2rem;}
.sns_box a {display: block;text-align: center;width: 5rem;height: 5rem;margin-bottom: 10px;}
.sns_box a.share { background: #6d6d6d; color: #fff; border-radius: 50%; margin: 0; font-size: 2.8rem; line-height: 8rem; }
.sns_box a img { max-width: 100%; width: 100%; }
.page_wrap {display: flex;border: 1px solid #b1b1b1;flex-direction: column;background: #fff;margin-top: 35px;}
.page_wrap .btn_page {border-bottom: 1px solid #b1b1b1;margin-bottom: 0;box-sizing: border-box;}
.page_wrap .btn_page:last-child {border-bottom: none;}
.page_wrap .page_txt {display: none;}
.btn_page i {color: #515151;}

/* interview */
#contents .row.interview {display: block;text-align: center;background-color: #edf9fe;border: 1px solid #009edb;padding: 3rem 3rem 2rem 3rem;max-width: 107rem;margin: 0 auto;border-radius: 8rem;}
.interview h4 {font-size: 2em;color: #445d98;line-height: 1.3;margin-bottom: 20px;}
.interview h4 span {color: #292929;font-size: 0.7em;font-weight: 400;display: block;}
.interview p {/* width: 100%; */max-width: 935px;margin: 0 auto;text-align: left;/*border: 1px solid #009edb;*/padding: 0 20px 20px;}
.interview p .tit {display: block;color: #445d98;font-weight: 600;line-height: 1.2;margin: 15px 0;font-size: 1.4em;text-align: center;}
/*.interview p .tit::before {content: '';display: block;clear: both;background: url(../img/sub/m1/ico_interview.png) 50% 50% no-repeat;height: 42px;margin: auto;background-size: contain;margin-bottom: 20px;}*/
hr.interview {border-style: dashed;color: #a3a3a3;width: 100%;margin: 70px 0 40px;}

/* component */
.row .step {text-align: left;}
.row .step_tit {display: block;text-align: left;font-size: 1.8em;font-weight: 400;border-bottom: 1px dashed #8d8d8d;margin-bottom: 10px;}
.row .step li {font-size: 1.75em;font-weight: 200;}
.row .step li.disabled {color: #bdbdbd;}
.mark {background: #f79a84;color: #fff;display: inline-block;padding: 5px 7px;line-height: 1.2;}
.blockq {color: #855311;font-size: 1.6em;padding: 0;margin: 0 auto;text-align: center;position: relative;text-decoration: underline;text-underline-position: under;text-decoration-color: #96addf;text-decoration-thickness: 1px;}
.row blockquote {font-size: 1.6em;margin: 0;font-family: 'Gyeonggi_Batang_Regular';}
.row blockquote.none {max-width: 750px;margin: 0 auto;font-style: italic;}
.row blockquote.none::before, .row blockquote.none::after {display: none;}
/*추가*/
.row blockquote.orange {max-width: 750px;margin: 0 auto;color: #ed8871;text-decoration-color: #ed8871;}
.row blockquote.orange::before, .row blockquote.orange::after {display: none;}
.row blockquote.yellow {max-width: 750px;margin: 0 auto;color: #c6b21e; text-decoration: none;}
.row blockquote.yellow::before {content: '';width: 66px;height: 66px;display: block;background: url(../img/common/y_block_a.png);margin: 0 auto 20px;}
.row blockquote.yellow::after {content: '';width: 66px;height: 66px;display: block;background: url(../img/common/y_block_b.png);margin: 20px auto 0;}
/*추가*/
.row blockquote::before {content: '';width: 66px;height: 66px;display: block;background: url(../img/common/block_a.png);margin: 0 auto 20px;}
.row blockquote::after {content: '';width: 66px;height: 66px;display: block;background: url(../img/common/block_b.png);margin: 20px auto 0;}
.row blockquote.green::before {content: '';width: 66px;height: 66px;display: block;background: url(../img/common/g_block_a.png);margin: 0 auto 20px;}
.row blockquote.green::after {content: '';width: 66px;height: 66px;display: block;background: url(../img/common/g_block_b.png);margin: 20px auto 0;}

.row blockquote.beige::before {content: '';width: 66px;height: 66px;display: block;background: url(../img/common/b_block_a.png);margin: 0 auto 20px;}
.row blockquote.beige::after {content: '';width: 66px;height: 66px;display: block;background: url(../img/common/b_block_b.png);margin: 20px auto 0;}

.row blockquote.pink::before {content: '';width: 66px;height: 66px;display: block;background: url(../img/common/p_block_a.png);margin: 0 auto 20px;}
.row blockquote.pink::after {content: '';width: 66px;height: 66px;display: block;background: url(../img/common/p_block_b.png);margin: 20px auto 0;}
.row blockquote.gray {text-decoration: none;margin: 0;}
.row blockquote.gray::before {filter: grayscale(1);}
.row blockquote.gray::after {filter: grayscale(1);}
.imgwrap {margin: 0 auto 30px;}

/* 교정 아카이브 */
.archive sup {color: #09adff;font-weight: 400;margin-right: 3px;}
.archive .row h3 {font-size: 2em;font-weight: 600;}
.archive .row h4 {margin-top: 10px;font-size: 1.5em;font-weight: 600;}
.archive .row h5 {color: #353535;font-size: 1.3em;font-weight: 600;}
.archive .row h6 {color: #353535;font-size: 1.25em;font-weight: 600;}
.row .point {display: block; font-size: 0.8em; line-height: 1.5; text-align: left; border-top: 1px solid rgb(133, 133, 133); padding-top: 10px; margin-top: 20px; }
.archive .row .small { font-size: 1.05em; display: block; display: inline-block; line-height: 1.5;margin-top: 10px;}
.archive .row .box_bd {border: 1px solid #dd9c59;padding: 5px 10px;color: #dd9c59;margin-top: 10px;font-size: 1.2em;}
.archive .row .box_bg {background: #7f7e5b;padding: 5px 10px;color: #fff;margin-top: 10px;font-size: 1.2em;}
.archive .row .fz24 {font-size: 1.5em;}
.archive .row .fz24 .fwb {font-weight: 700;}
.archive .row .caption {font-size: 1.1em;}
.archive .row .box_bg .small {font-size: .9em;margin-top: 0;}
.row .box_bg {background: #7f7e5b;padding: 5px 10px;color: #fff;margin-top: 10px;font-size: 1.2em;}
.archive .source {background: rgb(239, 239, 239);padding: 32px;}
.archive .source strong {font-size: 1.3em;margin-bottom: 20px;display: inline-block;}
.archive .source p {word-break: break-all;font-size: 1.2em;}
.archive .source strong::before {content: "";clear: both;display: block;width: 55px;height: 1px;background: rgb(188, 185, 184);margin-bottom: 22px;}
.swiper-button-next, .swiper-rtl .swiper-button-prev, .swiper-button-prev, .swiper-rtl .swiper-button-next {font-weight: 600;}
.row.event_info { text-align: center; }
.row.event_info h3 {color: #67a2e6;font-size: 2.5em;display: inline-block;border-bottom: 2px solid #67a2e6;font-weight: 700;line-height: 1.2;}
.row.event_info p {color: #030000; font-size: 2.5em; font-weight: 500; margin: 5px 5px 35px;}
.sub_con .row .roundbox {font-size: 1.8em; font-weight: 700; color: #ffffff; background: #67a2e6; padding: 2px 23px; border-radius: 35px; display: inline-block; margin-bottom: 15px;}

/* news */
.sub-visual-tabs { z-index: 5; display: flex; justify-content: center; position: sticky; margin-bottom: 50px; margin-right: auto; margin-left: auto; transition: top ease .35s; }
.sub-visual-tabs .toggle { display: none; position: relative; padding: 0 24px; width: 100%; height: 50px; text-align: left; font-weight: 600; color: #fff; background: rgba(255, 255, 255, 0.2); box-shadow: 0 0 0px 1px rgba(24, 24, 24, .11); -webkit-backdrop-filter: saturate(150%) blur(25px); backdrop-filter: saturate(150%) blur(25px); border-radius: 16px; transition: all ease .15s; }
.sub-visual-tabs .toggle::after { content: ''; position: absolute; top: 0; bottom: 0; right: 24px; margin: auto; width: 24px; height: 24px; background: url(../imag/common/scroll_arr.png) no-repeat center / auto 100%; transition: all ease .15s; }
.sub-visual-tabs .list { -webkit-backdrop-filter: saturate(150%) blur(25px); backdrop-filter: saturate(150%) blur(25px); }
.sub-visual-tabs .list { display: inline-flex; align-items: center; justify-content: center; margin-left: auto; margin-right: auto; padding: 6px; background: rgba(255, 255, 255, 0.2); border-radius: 100px; box-shadow: 0 0 0px 1px rgba(24, 24, 24, .11); }
.sub-visual-tabs a { display: block; position: relative; padding: 0 20px; height: 43px; line-height: 43px; font-weight: 600; border-radius: 45px;font-size: 1.3em;}
.sub-visual-tabs a.on { background: #1d446d; color: #fff;}
.fix .sub-visual-tabs { top: 13%; z-index: 20;}
.news_tit {color: #445d98;font-weight: 700;}
.news_tdu {font-weight: 700;text-decoration: underline;text-underline-position: under;}

/* 독자마당 */
.sub_con .event_txt p {font-size: 1.6em; font-weight: 500; color: #000; line-height: 1.4;}
.quizwrap {text-align: center;position: relative;z-index: 10;}
.quizwrap h3 {background: #179de3; color: #ffffff; border-radius: 30px; width: 65%; margin: auto; font-size: 1.6em; padding: 2%; border: 3px dashed rgb(0, 0, 0); line-height: 1.5;}
.quizwrap h3 span {font-size: 1.7em;display: block;}
.quizwrap ul {border: 4px dashed rgb(0, 0, 0);display: block;font-size: 16px;position: relative;top: 0px;left: 50%;transform: translate(-50%, -22%);width: 80%;z-index: -1;background: url("../img/sub/m4/quiz_bg.jpg") 0px 0px repeat;padding: 124px 20px 98px;}
.quizwrap ul li {display: inline-block;vertical-align: bottom;font-size: 5em;font-weight: 500;color: black;}
.quizwrap ul li.hint {font-size: 2em;display: block;}
.quizwrap ul li.hint a {color: #e91776;}

@media (max-width: 1280px) {
  .top_wrap {margin: 0 auto;padding: 0 2%;text-align: center;border-bottom-left-radius: 0;border-bottom-right-radius: 0;padding-bottom: 30px;background: linear-gradient(to bottom, #4267b2 0%, #6a89cc 70%, #fff 100%);}
  .top_wrap .title {position: relative;left: 0;top: 0;padding: 80px 0 0;}
  .top_wrap .title::after {top: -80%;left: -20%;}
  .top_wrap .desc {margin: 0 auto 20px;padding: 120px 0 20px;}
  .sns_box {bottom: 42rem;}
  .top_wrap .desc {margin: 0 auto;padding: 30px 0 12px;position: relative;z-index: 1;}
  .top_wrap .write_info.one {padding: 30px 0 12px;gap: 5px;}
}
@media (max-width: 1024px) {
  .sub_con {margin: 14% auto 0;}
  .profile {display: none;}
  #contents .row.profile_m {display: flex;}
  #contents .row.profile_m .img {border-radius: 20px;display: inline-block;}
}
@media (max-width: 768px) {
  .sub_con {margin: 20px auto 0;}
  .contwrap {margin-bottom: 35px;}
  .column.full {width: calc(100% - 20px);}
  .column.half {width: calc(50% - 20px);}
  .row.half {flex-wrap: wrap;gap: 20px;}
  .row.one3 {flex-wrap: wrap;gap: 20px;}
  .row.one4 {flex-wrap: wrap;gap: 20px;}
  .column.one4 {width: calc(50% - 20px);}
  .imgwrap {margin: 0 auto 20px;}

  .interview p {width: 100%;}
  .interview p .tit {font-size: 1.2em;}
  hr.interview {margin: 30px 5px;width: auto;}
  .archive .source {padding: 25px;}

  .sub-visual-tabs .list {width: 100%;flex-wrap: wrap;border-radius: 10px;}
  .sub-visual-tabs .list .item {width: 50%;text-align: center;}

  .page_wrap {margin-top: 0;order:-1;width: 100%;border-left: none;border-right: none;flex-direction: row;justify-content: space-between;background: #f9f9f9;padding: 5px 0;}
  .page_wrap .btn_page {border-bottom: none;width: 30%;display: flex;align-items: center;justify-content: center;}
  .page_wrap .page_txt {display: inline-block;font-size: 18px;}
  .sns_box {position: relative;right: 0;bottom: 0;display: flex;flex-direction: column;justify-content: center;flex-wrap: wrap;gap: 15px;-webkit-transition: 0s;transition: 0s;}
  .sns_box.fix {right: 0;}
  .sns_box a {margin-bottom: 0;}
  .sns_box .copy-btn {display: none;}
  .sns_wrap .sns {display: flex;justify-content: center;gap: 15px;}
  .sns_wrap .tit {display: block;text-align: center;font-size: 1.5em;color: #434343;}
  
}
@media (max-width: 640px) {
  .top_wrap .write_info {flex-direction: column;gap: 5px;}
  .top_wrap h2 {font-size: 3em;margin: 50px 0 20px;}
  .top_wrap {padding-bottom: 30px;}
  .top_wrap .title {position: relative;left: 0;top: 0;padding: 37px 0 0;}
  .top_wrap .title::after {top: -100px;left: 50%;width: 200px;height: 200px;transform: translateX(-50%);}
  .top_wrap .title strong {font-size: 1.1em;}
  .top_wrap .title strong:before {width: 2.5rem;height: 2.5rem;left: -1.2rem;top: -1.2rem;}
  .top_wrap .title p {font-size: 1.8em;}
}
@media (max-width: 600px) {
  .quizwrap h3 {width: 90%;}
  .quizwrap ul li {font-size: 2.5em;}
  .quizwrap ul li.hint {font-size: 1.5em;}
}
@media (max-width: 500px) {
  .top_wrap h2 {font-size: 2.2em;margin: 40px 0 20px;}
  .sub_con .row h3 {font-size: 1.8em;line-height: 1.2;margin-bottom: 10px;}
  .sub_con .row p {font-size: 1.4em;}
  .sub_con .row .caption {line-height: 1.2;font-size: 1.25em;}
  .sub_con .event_info p {text-align: center;}
	.sub_txt .row p {text-align: center;}
  .top_wrap {padding-bottom: 20px;}
  .top_wrap h2 .small {font-size: .7em;}

  .row {margin-bottom: 20px;}
  .row .caption {font-size: 0.9em;padding-top: 8px;text-align: center;}
  .row p {font-size: 1em;text-align: justify;}
  .row.tac .fwb {text-align: center;line-height: 1.2;margin-bottom: 8px;}
  .contents .row, .row.r12, .event_txt {flex-direction: column;gap: 20px;}
  .column.full,
  .column.half,
  .column.one,
  .column.one2,
  .column.one-third,
  .column.one4 {width: 100%;}
  .sns_box a {width: 5rem;height: 5rem;}
  .sns_box a i {margin-right: 3px;}
  .sns_box a.share {line-height: 5rem;font-size: 2.4rem;}
  .archive .source strong {font-size: 1.45em;}
  .archive .source {padding: 18px;}

  .sub-visual-tabs {margin-bottom: 40px;}
  .sub-visual-tabs a {font-size: 1.1em;height: 36px;line-height: 36px;}
}
@media (max-width: 320px) {
  .sub_con .row h3 {font-size: 1.8em;}
  .sub_con .row p {font-size: 1.25em;}
  .fix .sub-visual-tabs {top: 15%;z-index: 20;}
}