@charset "UTF-8";

/* skipnavi-S */
.skip-navigator {
  width: 100%; 
  font-size: 0;
  position: relative; 
}
.skip-navigator a {
  width: 100%; height: 30px; padding: 10px 20px; 
  font-size: 14px; line-height: 30px; color: #212121; text-align: center; text-decoration: none;
  background-color: #f4f4e7;  
  position: absolute; top:-1000px; left: 0; z-index: 100;
}
.skip-navigator a:active, .skip-navigator a:focus{top: 0;}
/* skipnavi-E */

/* TopBanner-S */
aside.event-area {
  width: 100%; height:82px; 
  background-image: linear-gradient(90deg , #150e38 50%, #22c9cf 51%);
}
aside.event-area a {display: block; 
  width: 1080px; height: 82px; margin: 0 auto;
  background-image: url(https://image3.masterprep.net/content/main_202012/top_banner.png);
  text-indent: -10000px;
}
aside.event-area img {width: 100%;}
/* TopBanner-E */

/********************
      Header-S 
********************/
header.header {position: relative; z-index: 10000;}
.header .top-area {position: relative}

/* logo & search-S */
.logo {
  width: 100%; height: 131px; border-top: 1px solid #e6e6e6;
  position: relative; z-index: 0; 
}
.logo {
  width: 100%; height: 121px; border-top: 1px solid #e6e6e6;
  position: relative; z-index: 0; 
}
.logo::before{content: ""; 
  width: 100%; height: 1px;
  background-color: #e6e6e6;
  position: absolute;left: 0;top: 31px;
}
.logo .container{padding-top: 32px;}
.logo h1 {text-align: center;
  width: 100%;height: 89px; margin: 0;
}
/*.logo h1 {float: left;
  width: 342px;height: 89px; margin: 0;
}*/
.logo h1 a {width: 100%;height: 89px;}


.search {
  height: 89px;
  position: absolute; top: 80px; right: 0;
}
.search2 {
  height: 89px;
  position: absolute; top: 80px; 
}
/*.search {
  height: 89px;
  position: absolute; top: 60px; right: 0;
}*/
.link {
  height: 89px;
  position: absolute; top: 70px; right: 0;
}
.mypage-section .search {top: 0;}
.mypage-section .search2 {top: 0;}
.mypage-section .link {top: 0;}
.private + .mypage-section .search {top: 0px;}
.private + .mypage-section .search2 {top: -20px;}

.mypage-section .search span {position: relative;}
.mypage-section .search span img {position: absolute !important; top: 0; z-index: 100;}
/*.mypage-section .search > span:nth-of-type(1) img{left: -240px;}
.mypage-section .search > span:nth-of-type(3) img{left: -125px;}*/
.mypage-section .search > span:nth-of-type(1) img{left: -160px;}
.mypage-section .search > span:nth-of-type(3) img{left: -5px;}

.search input{float: left;}
.search .search-btn{float: right;}
.search .search-btn a{float: left;
  padding-top: 7px;
}
.search .search-btn button{float: left;
  margin-right: 0;
}
.search2 input{float: left;}
.search2 .search-btn{float: right;}
.search2 .search-btn a{float: left;
  padding-top: 7px;
}
.search2 .search-btn button{float: left;
  margin-right: 0;
}


/* .search {
  height: 89px;
  position: absolute; top: 0; right: 0;
}
.search span {position: relative;}
.search span img {position: absolute !important; top: 0; z-index: 100;}
.search > span:nth-of-type(1) img{left: -240px;}
.search > span:nth-of-type(3) img{left: -125px;}

.search input{float: left;}
.search .search-btn{float: right;}
.search .search-btn a{float: left;
  padding-top: 7px;
}
.search .search-btn button{float: left;
  margin-right: 0;
} */


/* 삭제된 콘텐츠로 예상됨  .top-area .top-banner {position: absolute; top: 25px; left: 0;}  */
/* logo & search-E */

/* util-menu-S */ 

.util-menu {
  height: 32px; margin-left: -540px; 
  line-height: 32px;
  position: absolute; left: 50%;top: 0; z-index: 10000;
}
.util-menu ul {float: right;}
.util-menu li {float: left; 
  margin-right: 24px;
  position: relative;
  
}
.util-menu > li:nth-child(n+1):nth-child(-n+3){ font-size: 15px; color: #765d9f;}
.util-menu li.violet {color: #9765c7;}

.util-menu li:nth-child(n+5):nth-child(-n+8) { font-size: 12px; color: #666;}
.util-menu li:nth-child(4){margin-right:50px}
.util-menu > ul > li::after {content: "";  
  width: 1px; height: 10px;
  background-color: #dcdcdc;
  position: absolute; right: -12px; top: 11px; 
}
.util-menu > ul > li:last-child {height: 28px;padding-top: 4px; margin: 0;}
.util-menu li:last-child::after{display: none;}
.util-menu .mypage-tooltip ul {padding: 22px 0 0 23px;}
.util-menu .mypage-tooltip li {line-height:22px;}
.util-menu a:hover {text-decoration: underline; color: #765d9f;}
.util-menu > ul > li:nth-child(n+1):nth-child(-n+3) a:hover {text-decoration: none;}
/* util-menu-E */

/* mypage-S  수정하지않았습니다. */
.mypage-tooltip {display: block;
  width: 156px; height: 210px;
  background: url(https://image3.masterprep.net/content/main/util-mymenu2.png) no-repeat 0 0; background-size: 100%; 
  position: absolute; top: 20px; left: -50px; z-index: 1000;
}
.mypage-tooltip ul {padding: 18px 0 0 23px;}
.mypage-tooltip li {line-height: 1.4em;}
.mypage-tooltip a {font-family: 'Gulim', 'sans-serif'; font-size: 12px;}
/* mypage-E */

/* GNB-S html,CSS은 접근성 고려 하여 수정. */
/* nav-common-S */
.nav {
  width: 100%;height: 46px; border-top: 1px solid #e3e7ee; border-bottom: 1px solid #e3e7ee;  
  position: relative; 
}
.nav > .container {position: relative;}
.nav .depth1 {float: left;
  padding: 0 22px;
}
.nav .depth1 > a { font:300 15px/46px  'Noto Sans KR', sans-serif; color: #000; }
.nav .depth2 {z-index: 100;}
.nav .depth2 .title { display: block;
  width: 100%;  padding: 6px 0 5px 13px; margin-bottom: 5px;
  font: bold 14px/1  'Roboto', sans-serif; 
  background-color: #f1f3f6; 
}
.nav .depth3 {padding-left: 13px;}
.nav .depth3 li a {display: block; 
  font:500 14px/1.9em 'Roboto', sans-serif;
}
/* nav-common-E */

/* lectureList-S */
.expand-menu {
  width: 180px; border-left: 1px solid #e3e7ee; border-right: 1px solid #e3e7ee;
  text-align: center;
}
.expand-menu > ul { 
  width: 1080px; height: 600px;
  position: absolute; left: 0;top: 45px; z-index: 100;
}
.expand-menu li.category { float: left;
  width: 16.6666%;  margin-top: 20px; padding: 0 3px; border-left: 1px solid #f1f3f6;
}
.expand-menu li:nth-child(1) , .expand-menu li:nth-child(8) , .expand-menu li:nth-child(14) {border-left: none;}
/* lectureList-E */

/* Product-S */
.nav-wrap .depth1 > a.nav-title{text-align: center;}
.nav-wrap .depth2{
  width: 216px; margin-top: 20px; padding: 0 3px;border-left: 1px solid #f1f3f6;
  position: absolute; top: 50px;
}
.nav-wrap  li:nth-child(1) .depth2 {left: 0;}
.nav-wrap  li:nth-child(1) .depth2 .title{padding:20px 0;background:#9869ff;text-align:center; color:#f1f3f6;}
.nav-wrap  li:nth-child(2) .depth2 {left: 0;top:120px;}
.nav-wrap  li:nth-child(3) .depth2 {left: 216px;}
.nav-wrap  li:nth-child(4) .depth2 {left: 432px;}
.nav-wrap  li:nth-child(5) .depth2 {left: 648px;}
.nav-wrap  li:nth-child(6) .depth2 {left: 864px;}
.nav-wrap  li:nth-child(7) .depth2 {left: 216px; top: 470px;}
.nav-wrap  li:nth-child(8) .depth2 {left: 432px; top: 470px;}
/* Product-E */

.nav .gnb-bg{
  width: 100%; height: 650px; border-top: 2px solid #4e2a84;border-bottom: 1px solid #4e2a84;
  background-color: #fff;
  position: absolute; left: 0; top: 30px; z-index: -1;
}
.nav .nav-util a:hover {color: #4e2a84;}
.nav a:hover {color: #9765c7;}
.nav-wrap  li:nth-child(1) .depth2 a:hover {color: #f1f3f6;}
/* GNB-E */

/* 서브 페이지 적용 스타일로 수정하지 않았습니다.  */
.divied-content {-webkit-box-sizing: border-box; box-sizing: border-box; padding-top: 70px;}
.divied-content .local-area {float: left;}
.lnb * {-webkit-box-sizing: border-box; box-sizing: border-box; text-align: left;}
.lnb {width: 200px; margin-right: 30px; border-top: 3px solid #4e2a84; text-align: left;}
.lnb h2 {font-size: 30px; border-bottom: 1px solid #e6e6e6; color: #4e2a84; margin: 0; padding: 25px 0 28px; display: inline-block; font-weight: 400; width: 200px;}
.lnb h2.md {font-size: 26px;}
.lnb li {display: table; width: 100%; border-bottom: 1px solid #e6e6e6;}
.lnb li > a {display: block; color: #4b4b4b; font-size: 15px; padding: 15px 23px 15px 17px; line-height:1.2; -webkit-box-sizing: border-box; box-sizing: border-box; position: relative;}
.lnb li > a.active,
.lnb li > a:hover {color: #fff; background-color: #4e2a84;}
.lnb li > a i {float: right; top: 50%; margin-top: -6px; position: absolute; right: 0;}
.lnb li > a.active i,
.lnb li > a:hover i {background-position: -208px -42px;}
.lnb li > a.active.down i {background-position: -216px -42px; width: 11px; height: 6px; position: relative; top: 10px;}
.lnb li .lnb-sub-menu {border-top: 1px solid #e6e6e6; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 6px 0 6px 32px;}
.lnb li .lnb-sub-menu a {display: block; color: #999999; font-size: 14px; line-height: 2.4em;}
.lnb li .lnb-sub-menu a.active,
.lnb li .lnb-sub-menu a:hover {text-decoration: underline; color: #4e2a84;} 
/********************
      Header-E 
********************/

/********************
  아래의 내용은 공통으로 적용되는 스타일이어서 
  수정하지 않았습니다.
  FOOTER 이전까지 입니다. 
********************/
/* layout */
select, input[type='text'], input[type='number'], input[type='password'] {height: 33px; border: 1px solid #d5d5d5; vertical-align: middle; padding-left: 10px; font-size: 14px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}

button,
.button {border: none; background-color: #fff; margin: 0 4px;}
.button.lg {width: 282px; height: 48px; font-size: 19px;}
.button.md {min-width: 120px; height: 45px; font-size: 14px;}
.button.min {width: 45px; height: 23px; font-size: 12px;}
.button.violet {background-color: #684c96; color: #fff;}
.button.default {background-color: #fff; color: #684c96; border: 1px solid #684c96;}
.button.search-button {height: 33px; vertical-align: middle; font-size:12px; border: 1px solid #b6aad0; color:#9084a6;}
.button.search-button:hover {color: #4e2a84; border-color: #4e2a84;}
.button.complete {color: #684c96; border: 1px solid #684c96;}
.button.receipt {color: #666666; border: 1px solid #d5d5d5;}
.button.form {color: #fff; background-color: #727479; height: 32px; vertical-align: middle; padding: 0 10px;}

textarea {border: 1px solid #cccccc; padding: 0 10px; margin: 0; width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box;}
input[type='text'].ip {height: 27px; border: 1px solid #cccccc; margin: 0; width: 100%;}
input[type='text'].one-quarter {width: 25%;}
input[type='text'].half, select.half {width: 50%;}
input[type='text'].w70 {width: 70%;}
input[type='text'].w90 {width: 90%;}
input[type='text'].three-quarters {width: 33%;}
input[type='radio'] {margin: 0 2px;}
input[type='radio'].radio-after {margin-left: 18px;}
select.w280 {width:280px;}

em {font-style: normal;}

a.black {border-radius: 10px; display: inline-block; line-height: 45px; text-align: center; background-color: #1d1c27; color: #fff; width: 180px; height: 45px; -webkit-box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.2); box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.2);}
a.violet {border-radius: 5px; display: inline-block; background-color: #684c96; color: #fff; height: 36px; line-height: 34px; letter-spacing: 0; text-align: center; padding: 0px 50px; -webkit-box-sizing: border-box; box-sizing: border-box;}

.message {border-radius: 3px; width: 100%; background-color: #ecebee; height: 50px; line-height: 50px; font-size: 14px; color: #333333;}
.message a.black {height: 30px; line-height: 30px; box-shadow: none; width: 106px; border-radius: 4px;}

.en-text{padding-left:0;color:#888;line-height:1.2;}
.en-text:before{display:none;}

/* sprite */
.sprite {display: inline-block; vertical-align: middle; background-image: url('https://image3.masterprep.net/content/sprite.png'); background-repeat: no-repeat; background-size: 500px auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}

.search-zoom {background-position: -70px -10px; width: 21px; height: 20px; margin: 0 14px 0 10px;}
.nav-arrow {background-position: -70px -32px; width: 10px; height: 6px; margin-left: 6px;}
.util-nav-arrow {background-position: -70px -40px; width: 10px; height: 6px; margin-left: 6px;}
.util-log {background-position: -94px -10px; width: 18px; height: 18px; vertical-align: text-top; margin-right: 6px;}
.notice-more {background-position: -114px -10px; width: 20px; height: 20px;}
.first-page {background-position: -200px -10px; width: 13px; height: 13px;}
.prev-page {background-position: -230px -10px; width: 7px; height: 13px; margin-right: 10px;}
.next-page {background-position: -250px -10px; width: 7px; height: 13px; margin-left: 10px;}
.last-page {background-position: -274px -10px; width: 13px; height: 13px;}
.first-page.active {background-position: -200px -24px; width: 13px; height: 13px; margin-right: 18px;}
.prev-page.active {background-position: -230px -24px; width: 7px; height: 13px;}
.next-page.active {background-position: -250px -24px; width: 7px; height: 13px;}
.last-page.active {background-position: -274px -24px; width: 13px; height: 13px; margin-right: 18px;}
.lecture {background-position: -297px -10px; width: 27px; height: 21px; margin-right: 14px;}
.icoreply {background-position: -94px -40px; width: 12px; height: 13px; margin-right: 5px;}
.icoreplyBalloon {background-position: -330px -10px; width: 15px; height: 12px; margin-right: 5px;}
.icoreplyArrow {background-position: -350px -10px; width: 7px; height: 4px; margin-left: 5px;}
.icoreplyDel {background-position: -360px -10px; width: 6px; height: 6px; margin-left: 5px;}
.ico-question {background-position: -370px -10px; width: 18px; height: 18px;}
.ico-answer {background-position: -390px -10px; width: 18px; height: 18px;}
.ico-file {background-position: -414px -10px; width: 20px; height: 28px; margin-left: 5px;}
.ico-empty-info {background-position: -10px -140px; width: 61px; height: 61px;}
.ico-star {background-position: -330px -30px; width: 15px; height: 15px;}
.ico-star-violet {background-position: -350px -30px; width: 15px; height: 15px;}
.ico-ie {background-position: -82px -140px; width: 38px; height: 35px; margin-left: 10px; position: relative; top: -2px;}
.ico-windows {background-position: -144px -140px; width: 31px; height: 29px; margin: 0 5px; position: relative; top: -2px;}
.ico-lnb-arrow {background-position: -200px -42px; width: 6px; height: 11px; margin-right: 15px}
.ico-lnb-arrow_w {background-position: -208px -42px; width: 6px; height: 11px; margin-right: 15px}
.ico-lnb-arrow_d {background-position: -216px -42px; width: 11px; height: 6px; margin-right: 15px}
.ico-company-q {background-position: -188px -140px; width: 28px; height: 28px;}
.ico-company-a {background-position: -188px -170px; width: 28px; height: 28px;}
.ico-naver {background-position: -234px -140px; width: 23px; height: 23px;}
.ico-id-search {background-position: -260px -140px; width: 17px; height: 17px;}
.ico-pw-search {background-position: -278px -140px; width: 12px; height: 18px;}
.ico-join {background-position: -292px -140px; width: 14px; height: 18px;}
.ico-arrow {background-position: -308px -140px; width: 10px; height: 16px;}
.ico-step-01 {background-position: -82px -206px; width: 69px; height: 69px;}
.ico-step-02 {background-position: -152px -206px; width: 69px; height: 69px;}
.ico-step-03 {background-position: -222px -206px; width: 69px; height: 69px;}
.ico-step-04 {background-position: -292px -206px; width: 69px; height: 69px;}
.ico-arrow-down {background-position: -234px -170px; width: 22px; height: 18px;}
.ico-dates-arrow-on {background-position: -330px -140px; width: 13px; height: 23px;}
.ico-dates-arrow-off {background-position: -350px -140px; width: 13px; height: 23px;}
.ico-layer-close {background-position: -444px -10px; width: 25px; height: 25px;}
.ico-calendar {background-position: -260px -170px; width: 15px; height: 14px;}
.ico-table-delete {background-position: -474px -10px; width: 17px; height: 17px;}
.ico-button-arrow {background-position: -480px -10px; width: 15px; height: 7px; vertical-align: 3px; margin-left: 20px;}
.ico-arrow-02 {background-position: -480px -22px; width: 15px; height: 7px;}
.ico-best-arrow {background-position: -440px -40px; width: 40px; height: 40px;}
.ico-slider-next {background-position: -440px -85px; width: 24px; height: 47px;}
.ico-slider-prev {background-position: -440px -134px; width: 24px; height: 47px;}

i.icon {display: inline-block; line-height: 0 !important;}

.layer * {-webkit-box-sizing: border-box; box-sizing: border-box;}
.layer {position: absolute; background-color: #fff; padding: 34px 30px; z-index: 10000; -webkit-box-sizing: border-box; box-sizing: border-box;}
.layer .head {border-bottom: 2px solid #4e2a84; padding-bottom: 20px; margin-bottom: 32px;}
.layer .head span {color: #4e2a84; font-size: 22px;}
.layer .head:after {content: ''; display: block; clear: both;}
.layer .head a {text-indent: -9999px; float: right;}
.layer .content .summary {color: #666666; font-size: 14px; word-break: keep-all; line-height: 1.4em;}
.layer .content .info {margin-top: 30px;}
.layer .content .info .title {color: #684c96; font-size: 16px; font-weight: 600;}
.layer .content .info .title:before {content: ''; display: block; background-color: #927fb6; width: 30px; height: 2px; margin-bottom: 10px;}
.layer .content ul {margin-top: 18px;}
.layer .content li {position: relative; margin: 8px 0; padding-left: 10px; font-size: 14px; line-height: 1.5em; word-break: keep-all;}
.layer .content li:before {content: ''; position: absolute; top: 8px; left: 0; width: 3px; height: 3px; background-color: #927fb6;}
.layer .content .lecture-type {border: 1px solid #5b3c8c; color: #fff; background-color: #836ea9; font-size: 12px; line-height: 1; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 3px 14px 4px 12px; display: inline-block; margin-bottom: 8px;}
.layer .content .buttons {margin-top: 30px; text-align: center;}
.layer .content button {padding: 0px 20px; text-align: center;}
.layer .text-description {color: #999999; font-size: 14px;}
.layer .segment {float: left; width: 100%; background-color: #f7f7f7; padding: 5px 0; margin: 0;}
.layer .segment ul {margin:0}
.layer .footer {border: none; padding: 0; margin: 0; padding-top: 25px; text-align: center;}


/********************
      FOOTER-S 
********************/
.footer {
  height: 250px; padding: 40px 0 65px; border-top: 1px solid #e6e6e6; 
  background-color: #f5f5f5; 
}
.footer .logo {float: left;
  width: 126px; margin:0 75px 100px 0;
  text-align: center;
}
.footer .logo strong {font-size: 14px; color: #333333; font-weight: bold; text-align: center;}
.footer .footer-menu {float: left;
  margin-bottom: 25px;
}
.footer .footer-menu li {float: left; 
  height: 26px; margin-right: 38px;
  line-height: 26px;
  position: relative;
}
.footer .footer-menu li:nth-child(n+1):nth-child(-n+3)::after {content: "";
  width: 1px; height: 12px;
  background-color: #777;
  position: absolute; right: -20px;top: 8px;
}
.footer .footer-menu li a {font-size: 14px; color: #555; font-weight: bold;}
.footer .footer-menu .content-rule a {display: inline-block;
  height: 26px; padding: 0 10px; border-radius: 2px;  
  font-weight: 400; line-height: 26px; color: #fff; 
  background-color: #4d2a84; 
}
.footer .cs {float: right;
  width: 150px;
  color: #333; text-align: right;
  position: relative; top: 5px;
}
.footer .cs:before {content: ''; 
  height: 95px; border-left: 1px solid #d4d4d4; 
  position: absolute; top: 0; left: -20px; 
}
.footer .cs .phone {display: block;
  font: 20px/1.5 'Noto Sans CJK KR-BK', sans-serif; letter-spacing: -1px;
}
.footer .cs .work { display: block;
  margin: 5px 0 38px; 
  font-weight: bold; font-size: 12px; 
}
.footer .cs .terms a {
  margin-left: 10px; 
  font-size: 12px; text-align: right;
}
.footer .cs .terms a.privacy {color: #4d2a84;}
.footer .addr { float: left;
  width: 650px;
  font-size: 12px; color: #777; line-height: 1.6em; letter-spacing: 0;
}
.footer .addr ul{height: 72px;}
.footer .addr li{float: left;
  height: 18px; margin-right: 20px;
  line-height: 18px;
  position: relative
}
.footer .addr li::after {content: "";
  width: 1px; height: 10px;
  background-color: #aaa;
  position: absolute; right: -10px;top: 4px;
}
.footer .addr li:nth-child(2) {margin-right: 100px;}
.footer .addr li:nth-child(2)::after , 
.footer .addr li:nth-child(5)::after , 
.footer .addr li:nth-child(8)::after , 
.footer .addr li:nth-child(9)::after {display: none;}
.footer .addr address {font-style: normal;}
.footer .addr .copy{ color: #999;}
/********************
      FOOTER-E 
********************/

.site-quickmenu {
    position: fixed;
    bottom: 4vh;
    right: 1.5vw;
    z-index: 151;
    font-family: 'Noto Sans KR';
}