@charset "utf-8";
@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);


/*------------------------------------------------------------------
	00. CSS Reset
-------------------------------------------------------------------*/

::-webkit-scrollbar,
::-webkit-scrollbar-button,
::-webkit-scrollbar-thumb:window-inactive,
::-webkit-scrollbar-thumb,
::-webkit-scrollbar-track {-webkit-appearance:none; display:none;}

* {margin:0; padding:0;}
*, *::after, *::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html {overflow-x: hidden;}
body {margin: 0;}
html, body {-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;}
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {display: block;}
audio, canvas, progress, video {display: inline-block; vertical-align: baseline;}
audio:not([controls]) {display: none; height: 0;}
[hidden], template {display: none;}
caption {display: none;}
a {background: transparent;}
/* a:active, a:hover {outline: 0;} */
abbr[title] {border-bottom: 1px dotted;}
b, strong, th {font-weight: 500;}
dfn {font-style: italic;}

mark {background: #ff0; color: #000;}
small {font-size: 80%;}
sub, sup {font-size: 75%; line-height: 0; position: relative; vertical-align: baseline;}
sup {top: -0.5em;}
sub {bottom: -0.25em;}
img {border: 0; max-width:100%; vertical-align: middle;}
svg:not(:root) {overflow: hidden;}
ol, ul, li {list-style:none}
label, button {cursor:pointer}
label {margin-left:5px; color:#353535; vertical-align:middle;}
figure {margin: 1em 40px;}
hr {-moz-box-sizing: content-box; box-sizing: content-box; height: 0;}
pre {overflow: auto;}
code, kbd, pre, samp {font-family: monospace, monospace; font-size: 1em;}
button, input, optgroup, select, textarea {color: inherit; font: inherit; margin: 0; outline:none;}
button {overflow: visible; cursor:pointer;}
button, select {text-transform: none;}
button, html input[type="button"], input[type="reset"], input[type="submit"] {-webkit-appearance: button; cursor: pointer;}
button[disabled], html input[disabled] {cursor: default;}
button::-moz-focus-inner, input::-moz-focus-inner {border: 0; padding: 0;}
input {line-height: normal;}
input[type="checkbox"], input[type="radio"] {box-sizing: border-box; padding: 0;}
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {height: auto;}
input[type="search"] {-webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box;}
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {-webkit-appearance: none;}
fieldset {border: 0; margin: 0; padding: 0;}
legend {border: 0; padding: 0; }
textarea {overflow: auto; resize: vertical;}
optgroup {font-weight: bold;}
table {border-collapse: collapse; border-spacing: 0; table-layout: fixed; word-break: break-all;}



/*------------------------------------------------------------------
	01. Typography
-------------------------------------------------------------------*/


p {margin-top: 0;}
a {color: inherit;}
/* a:hover {opacity: 0.95;} */
a, a:link, a:hover, a:active, a:focus {outline: 0; text-decoration: none;}
body, input, textarea, button, select, label, a {-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
/* blockquote {background: #f9f9f9; padding: 20px;} */
input, textarea, button, select, label {font-family:'Noto Sans KR', sans-serif, dotum, '돋움', gulim, '굴림', Arial, AppleGothic, verdana, helvetica;}
/* input, textarea, select, fieldset {margin-bottom: 1.5rem;} */
/* pre, blockquote, dl, figure, table, p, ul, ol, form {margin-bottom: 2.5rem;} */
/* hr {margin-top: 3rem; margin-bottom: 3.5rem; border-width: 0; border-top: 1px solid #E1E1E1;} */



/*------------------------------------------------------------------
	04. Input & Form Elements
-------------------------------------------------------------------*/

input:not([type]), input[type=text], input[type=password], input[type=email], input[type=url], input[type=time], input[type=date],
input[type=datetime], input[type=datetime-local], input[type=tel], input[type=number], input[type=search] {font-size: 10pt; padding-left: 5px;}

input[type='textarea'], textarea {font-size:10pt; margin:0; border:1px solid #ddd; color:#626262; background:#fafafa; padding:5px; vertical-align: middle;}
/* input[type='checkbox'] {background:#fff; border:solid 1px #c9c9c9; height:16px; width:16px; -webkit-appearance:none; -webkit-border-radius:3px; padding:0; border:0 0/IE8+9; margin-top:0; margin-top:2px 0/IE8+9;}
input[type='checkbox']:checked {background:#fff; border:solid 1px #c9c9c9; border:0 0/IE8+9;}
input[type='checkbox']:checked:after {content:""; display:block; width:8px; height:8px; background:#666; position:relative; top:3px; left:3px; -webkit-border-radius:0px;}  */
input[type='radio'] {background:#fff; border:solid 1px #c9c9c9; height:16px; width:16px; -webkit-appearance:none; -webkit-border-radius:10px; padding:0; border:0 \0/IE8+9; margin-top:0; margin-top:2px \0/IE8+9;}
input[type='radio']:checked {background:#fff; border:solid 1px #c9c9c9; border:0 \0/IE8+9;} 
input[type='radio']:checked:after {content:""; display:block; width:8px; height:8px; background:#666; position:relative; top:3px; left:3px; -webkit-border-radius:5px;} 


/* CheckBox Style */
input[type="checkbox"].chkBox {
display:inline-block;
width:18px;
height:18px;
vertical-align:middle;
background:#fff;
appearance: none;
-moz-appearance: none; /* Firefox */
-webkit-appearance: none; /* Safari and Chrome */
border:1px solid #ccc;
}

input[type="checkbox"].chkBox:checked {
display:inline-block;
width:18px;
height:18px;
vertical-align:middle;
background:url("/m/renewal2017/img/common/checkBox_bk.png");
background-size:100%;
background-repeat:no-repeat;
background-position:center center;
appearance: none;
-moz-appearance: none; /* Firefox */
-webkit-appearance: none; /* Safari and Chrome */
border:none;
}


/* SelectBox Style */
select {height:40px; width:100%; font-size:9pt; margin:0; color:#353535; padding-left:8px; padding-right:34px; vertical-align: middle; min-width:40px; box-sizing:border-box;
background: url("/m/renewal2017/img/common/select_arrow.png") no-repeat right center; /* 네이티브 화살표 대체 */  
background-size:auto 100%;
border:1px solid #c6c6c6;
font-family: inherit;  /* 폰트 상속 */
border-radius: 0px; /* iOS 둥근모서리 제거 */
-webkit-appearance: none; /* 네이티브 외형 감추기 */
-moz-appearance: none;
appearance: none;
}


input[type='text'], input[type='password'], input[type='name'], input[type='tel'], input[type='search'] {
height:40px; font-size:10pt; margin:0; color:#353535; background:#fff; padding:0 5px; vertical-align: middle; width:100%; box-sizing:border-box;
background-size:auto 100%;
border:1px solid #c6c6c6; 
font-family: inherit;  /* 폰트 상속 */
border-radius: 0px; /* iOS 둥근모서리 제거 */
-webkit-appearance: none; /* 네이티브 외형 감추기 */
-moz-appearance: none;
appearance: none;
}



input[type='text']:focus,
input[type='password']:focus,
input[type='name']:focus,
input[type='tel']:focus,
input[type='search']:focus,
select:focus,
textarea:focus {border:solid 1px #0897a8;}


textarea {
color:#353535;
box-sizing:border-box;
border:1px solid #c6c6c6;
font-family: inherit;  /* 폰트 상속 */
border-radius: 0px; /* iOS 둥근모서리 제거 */
-webkit-appearance: none; /* 네이티브 외형 감추기 */
-moz-appearance: none;
appearance: none;
padding:10px;
}


/*------------------------------------------------------------------
	06. Layout
-------------------------------------------------------------------*/

#wrap {min-width:320px; max-width:750px; width:100%; margin:0 auto; overflow:hidden; position:relative; /* background:url("/m/imgNew/common/bg_logo.png")no-repeat center top; */ background-size:40% auto;}
.clearfix {clear:both;}


.sectionLine {
height:5px;
background:#f5f5f5;
-webkit-box-shadow: inset 0px 1px 1px 0px rgba(0,0,0,0.1);
-moz-box-shadow: inset 0px 1px 1px 0px rgba(0,0,0,0.1);
box-shadow: inset 0px 1px 1px 0px rgba(0,0,0,0.1);
}

.tuitionTable {width:100%; font-size:10pt; border-top:solid 1px #bababa; margin-top:15px;}
.tuitionTable tr {border-bottom:solid 1px #dcdcdc;}
.tuitionTable tr th {padding:8px 10px; background:#f7f7f7; color:#212121; font-weight:400; letter-spacing:-0.07em; text-align:left;}
.tuitionTable tr td {padding:8px; background:#fff;}
.tuitionTable label {margin-left:0; line-height:1.4em; font-size:9pt;}

.telForm {display:inline-block; width:100%;}
.telForm li {display:block; width:27% !important; float:left; margin:0 !important;}
.telForm li:nth-child(1) {width:36% !important;}
.telForm li:nth-child(2),
.telForm li:nth-child(4){width:5% !important; text-align:center; height:40px; line-height:40px;}
.telForm li select {width:100%;}
.telForm li input {width:100%;}

.agreeArea {padding-top:10px; position:relative;}
.agreeArea a {position:absolute; right:0; top:10px; color:#666; padding-right:8px; background:url("/m/renewal2017/img/common/privacy_arrow.png")no-repeat right center; background-size:3px auto;}

.tuitionBtn {padding-top:15px; text-align:center;}
.tuitionBtn a,
.tuitionBtn span {
	display:inline-block; white-space:nowrap; min-width:200px; height:40px; line-height:40px; background:#2d2d2d; color:#fff;
	text-align:center; font-size:11pt; letter-spacing:-0.06em; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;
}



.mainTitle {height:22px; position:relative;}
.mainTitle h3 {height:22px; line-height:22px; color:#666; font-size:9pt; font-weight:300; letter-spacing:-0.06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.mainTitle h3 span {display:inline-block; height:22px; line-height:22px; padding:0 6px; font-size:8.5pt; white-space:nowrap; margin-right:6px; letter-spacing:-0.02em; color:#fff; background:#222;}
.mainTitle a {display:inline-block; width:20px; height:19px; position:absolute; top:1px; right:0; text-indent:-9999px; background:url("/m/renewal2017/img/common/common_arrow_bk.png")no-repeat center center; background-size:cover;}
/* 고객상담센터 */
.tuitionBanner {display:block;}
.tuitionForm {padding:0 15px;}
.tuitionTitle {height:53px; padding:15px 0;}

.tuitionList {}
.tuitionList input[type="checkbox"] {
display:inline-block;
width:20px;
height:20px;
border-radius:20px;
vertical-align:middle;
background:#fff;
appearance: none;
-moz-appearance: none; /* Firefox */
-webkit-appearance: none; /* Safari and Chrome */
border:1px solid #ddd;
}

.tuitionList input[type="checkbox"]:checked {
display:inline-block;
width:20px;
height:20px;
border-radius:20px;
vertical-align:middle;
background:url("/m/renewal2017/img/common/checkbox_circle.png");
background-size:100%;
background-repeat:no-repeat;
background-position:center center;
appearance: none;
-moz-appearance: none; /* Firefox */
-webkit-appearance: none; /* Safari and Chrome */
border:none;
}



.tuitionCourse {padding:10px 0; min-height:60px;}
.tuitionCourse .proc {display:inline-block; padding-left:13px; margin-top:5px; margin-bottom:5px; margin-right:3px; border:solid 1px #129bab; border-radius:30px;}
.tuitionCourse .courseName {display:inline-block; height:28px; line-height:28px; vertical-align:middle; color:#129bab; white-space:nowrap;}
.tuitionCourse .interestDel {display:inline-block; width:38px; height:28px; line-height:28px; background:Transparent; border:none; vertical-align:middle; background:url("/m/renewal2017/img/customer/curri_delete.png")no-repeat center center; background-size:12px auto;}
.tuitionCourse .interestDel .blind {display:inline-block; width:38px; height:28px; line-height:28px;}

.tuitionSearch {padding:15px 25px;}
.tuitionSearch a {display:block; background:#2d2d2d; color:#fff; letter-spacing:-0.06em; font-size:10pt; text-align:center; padding:10px 0; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px;}




/* 푸터 */
.footerMenu {display:block; border-bottom:solid 1px #252528; background:#2d2d31;}
.footerMenu li {display:block; width:25%; float:left;}
.footerMenu li a {display:block; height:50px; line-height:50px; text-align:center; color:#959595;}
.footerInfo {background:#2d2d31; padding:70px 0; text-align:center;}
.footerInfo p {color:#5c5c5f; letter-spacing:-0.045em;}
.footerLogo {width:33.3333%; display:inline-block; margin-bottom:15px; font-size:8pt;}





.blogTitle {height:270px; padding-top:55px; text-align:center; background:url("/blog/blog_title_bg.jpg")no-repeat center center; background-size:cover;}

.blogBtnArea {margin:0; height:88px; background:#f5f5f5; position:relative;}
.blogBtn {position:absolute; left:0; right:0; top:-30px; padding:0 25px;}
.blogBtn a {
	display:table; width:100%; padding-left:100px; height:93px; position:relative;
	background:#fff url("/blog/blog_call_arrow.png")no-repeat right center; background-size:42px auto;
	-webkit-box-shadow: 0px 3px 8px 0px rgba(0,0,0,0.09);
	-moz-box-shadow: 0px 3px 8px 0px rgba(0,0,0,0.09);
	box-shadow: 0px 3px 8px 0px rgba(0,0,0,0.09);
}
.blogBtnTxt {display:table-cell; vertical-align:middle; white-space:nowrap;}
.blogBtnTxt h6 {color:#828282; font-size:10pt; letter-spacing:-0.04em; font-weight:300;}
.blogBtnTxt h4 {color:#1e1e1e; font-size:13pt; letter-spacing:-0.06em; font-weight:600;}




.phoneCircle {
	position: absolute;
	height: 50px;
	width: 50px;
	left:54px;
	top: 50%;
	transform: translate(-50%, -50%);
	border-radius: 75px;
	border:solid 1px #464648; 
	animation: ring 3s infinite;
}

.phone {
	display:block;
	width:50px;
	height:50px;
	position: absolute;
	left:54px;
	top: 50%;
	transform: translate(-50%, -50%);
	color: #ffffff;
	animation: call 3s infinite;
	background:url("/blog/blog_call_ico.png")no-repeat center center; background-size:22px auto;
	
}

.backCircle {
	position: absolute;
	left:54px;
	top: 50%;
	transform: translate(-50%, -50%);
	background:#464648;
	opacity: 0;
	border-radius:100%;
	-moz-border-radius:100%;
	-webkit-border-radius:100%;
	animation: back 3s infinite;
	animation-delay: 0.3s;
}


@keyframes ring {
  0%{}
  50%{
    height: 55px;
    width: 55px;
  }
}

@keyframes call {
  0%{}
  2.5%{
    transform: translate(-45%, -50%);
  }
  5%{
    transform: translate(-55%, -50%);
  }
  7.5%{
    transform: translate(-45%, -50%);
  }
  10%{
    transform: translate(-55%, -50%);
  }
  15%{
    transform: translate(-45%, -50%);
  }
  20%{
    transform: translate(-50%, -50%);
  }
  100%{}
}

@keyframes back {
  0%{
    height: 0px;
    width: 0px;
  }
  60%{
    height: 50px;
    width: 50px;
    opacity: 0.1;
  }
  100%{
    height: 80px;
    width: 80px;
    opacity: 0;
  }
}




/*2024-05-10*/
.tuition-lists h3 , .sub-inner-wrap dt {font-weight: 400;font-size: 14px;}
.sbtIpt .red, .sub-inner-wrap .red{color:#ff3034;font-weight:700;}
.sbtIpt .grey, .sub-inner-wrap .grey {color: #999}


.tuitionTab, .tuitionTabb , .tuition-list , .tuition-listt {overflow: hidden;border: solid 1px #ddd;border-radius: 6px 6px 6px 6px;-moz-border-radius: 6px 6px 6px 6px;-webkit-border-radius: 6px 6px 6px 6px;}
.tuitionTab li input[type="checkbox"], .tuitionTabb li input[type="checkbox"] {display:none;}
.tuitionTab li , .tuitionTabb  li {justify-content:center;padding-left:0px;border-right: solid 1px #ddd; border-bottom: solid 1px #ddd;width:50%}
.tuition-lists {margin-top:15px;}
.tuition-list, .tuition-listt {display: flex;flex-wrap: wrap; flex-direction: row;margin-top:15px;margin-bottom:15px;}
.tuitionTab li a, .tuitionTab li label, .tuition-list p label ,   .tuitionTabb li a, .tuitionTabb li label, .tuition-listt p label{font-size:14px;}
.tuition-list p , .tuition-listt p {width: 50%;margin-top:0;}
.tuition-list p input, .tuition-listt p input {margin-right:5px;}
.tuition-list input[type='checkbox'], .tuition-listt input[type='checkbox'] {display:none;position: relative;width: 15px;height: 15px;-webkit-appearance: none;background: #fff;border: 1px solid #cfcfcf;vertical-align: -1px;cursor: pointer;margin-top:4px;}
.tuition-list input[type='checkbox']:checked + label, .tuition-listt input[type='checkbox']:checked + label {background: #129bab;color: #ffff;}
.tuitionCurri p,.tuitionCurri-sec p {position:relative;padding: 3px 30px;padding-left: 20px;display: block;align-items: center; min-width: 100px;height: 30px;border: 1px solid #e3e3e3; border-radius: 6px;text-align: center;font-size: 14px;background: #eee;background-color: #129bab; color: #ffff;}
.tuitionCurri, .tuitionCurri-sec {display: flex;flex-wrap: wrap; flex-direction: row;}
.tuitionTab li label , .tuitionTabb li label {text-align: center;padding-left:0px;}
.tuitionTab li:nth-child(7), .tuitionTabb li:nth-child(7) {border-bottom:none;}
.sbt-txt {font-size:12px;}
.tuitionTab li.on , .tuitionTabb li.on {background-color: #129bab;color:#ffff;}
.tuitionTab li.on > a, .tuitionTabb li.on > a {color:#ffff;}
.tuitionCurri p a, .tuitionCurri-sec p a {position: absolute;right: 8px;cursor:pointer;}
.tuition-type li {min-width:50%;border-right:none;}
.tuition-type {flex-wrap: wrap;flex-direction: row;justify-content: center;position: relative;}
.tuition-type li:nth-child(3n), .tuition-type li:first-child {border-right: solid 1px #ddd;}

.tuition-list p label, .tuition-listt p label {display:block;width:100%;text-align:center;padding:10px;}
.tuition-list p, .tuition-listt p { border-right: solid 1px #ddd;border-bottom: solid 1px #ddd;}
.tuition-list p:last-of-type, .tuition-listt p:last-of-type {border-bottom:none;}

.tuition-list input[type='checkbox']:checked + label, .tuition-listt input[type='checkbox']:checked + label {margin:0;}
.tuition-list p label, .tuition-listt p label {font-family: NotoSans, sans-serif;}
/* 영어 수강료 번역 추가 */
.eng {font-size: 12px;color:#828282;line-height: 0;}
.locSel .eng {font-size: 11px;}
.subtopMenu {margin-top:18px;}
#ctLoc li input[type="radio"] + label {line-height:14.5px;padding: 6px 2px !important;height:42px;}
#ctLoc li input[type="radio"]:checked + label .eng {color:#ffffff;}
.tuition-type li input[type="radio"]:checked + label .eng {color:#ffffff;}
.tuition-type li input[type="radio"] + label {line-height: 15.5px;padding: 5px !important;}
.csInt li label {line-height:16.5px;}
.curriSub-content {margin-top: 146px;}

.csAgree details {width:100%;font-size:12px;margin-top:5px;color: #666;text-align: right;}
.csAgree summary {position:relative;padding-right:15px; list-style:none;font-weight:400;cursor: pointer;}
.csAgree details .wrap {display:flex;}
.csAgree details .arrow {content: ""; display:block; width:10px; height: 10px; background: url(/2024/img/common/icon-slider-next-gr.png) center center / contain no-repeat;position:absolute;right:0;top:6px;}
.csAgree details[open] .arrow {transform:rotate(90deg);}
.csAgree u {text-decoration: none;}