@charset("euc-kr");
@import url(//fonts.googleapis.com/earlyaccess/nanumgothic.css);

.nanumgothic * {
 font-family: 'Nanum Gothic', sans-serif;
}
.sub-wrap{
    position:relative;
    display: block;
    width: 100%;
    padding-top:100px;
	z-index:10;
}

.top-container { position:relative;padding:10px; }

.container { width:98%;margin:0 auto; }

[class*=Area] section:not(.mTitleVisual),div[class*=template][class*=Area] section:not(.mTitleVisual) {
    padding: 4rem 0
}
.gInner {
    padding: 0 0.1rem;
   /*  max-width: 80rem; */
    margin: 0 auto
}
.no-gutter-m-left {
    margin-left: 0!important;
}
.no-gutter {
    padding: 0!important
}

.no-gutter-bottom {
    padding-bottom: 0!important
}

.no-gutter-top {
    padding-top: 0!important
}

.no-gutter-right {
    padding-right: 0!important
}

.no-gutter-left {
    padding-left: 0!important
}

.no-gutter-m {
    margin: 0!important
}

.no-gutter-m-bottom {
    margin-bottom: 0!important
}

.no-gutter-m-top {
    margin-top: 0!important
}

.no-gutter-m-right {
    margin-right: 0!important
}

.no-gutter-m-left {
    margin-left: 0!important
}

.gutter-auto-m {
    margin-left: auto!important;
    margin-right: auto!important
}
.cardArea {
    min-width: 100%;
    margin: -1rem -0.5rem 0;
}
.gridSet {
    display: flex;
    flex-wrap: wrap;
}

.gridSet[class*=grid-] .grid {
    width: 100%;
    border: 1px solid #d1d1d1;
	margin:0 0 1.5em 0;
}

.mCard .card-price-sub {
    font-size: var(--font-body2-size)
}

.mCard .card-price+.card-title-sub {
    margin-top: .5rem;
    font-size: var(--font-body1-size);
    font-weight: 700
}

.mCard .mList.themeCheck {
    margin: 2rem 0 0
}
.mCard .mList li{
    line-height:48px;
	border-bottom: 1px solid #d3d3d3;
}
.mCard .mList.themeCheck.gFlex1 {
    flex: 1
}

.mCard .mButton {
    margin: 2rem 0 0
}

.mCard .mButton.gFull [class*=btn] {
    min-width: initial
}

.mCard .card-info {
    margin: 2rem 0 0
}

.mCard .card-info .gridSet>li+li {
    margin: 2rem 0 0
}

.mCard .card-info ul>li {
    margin: .5rem 0 0;
    font-size: var(--font-body1-size)
}

.mCard .card-info .gridSet>li>ul>li+li {
    margin-top: .5rem
}

.mCard .card-info .gridSet .label {
    letter-spacing: 0
}

.mCard .card-info .gridSet .label>ul>li {
    margin-top: .5rem
}

.mCard .card-info ul li li {
    margin: .25rem 0 0
}

.mCard .card-spec {
    margin: 1.5rem 0 0;

}

.mCard .card-spec .title {
    color: #616161
}

.mCard .card-spec .mList {
    margin-top: 0
}

.mCard .card-spec .title+.mList {
    margin-top: .25rem
}

.mCard .card-spec .mList.themeCheck li+li {
    margin: .25rem 0 0
}

.mCard .txtLink {
    font-size: var(--font-body1-size)
}

.mCard.themeGallery {
    flex: 1;
    height: 100%
}

.mCard.themeGallery:hover {
    box-shadow: 0 0 0 2px var(--color-primary) inset
}

.mCard.themeGallery .card-title {
    flex: none
}

.mCard.themeGallery .card-title .card-title-txt {
    padding-top: 1.75rem
}

.mCard.themeGallery .card-spec {
    flex: 1
}

.mCard.themeGallery .card-price+.card-title-sub {
    min-height: 3rem
}

.mCard.themeGallery .txtLink {
    margin-top: 1rem;
    color: #2b2b2b;
    font-weight: 700
}

.mCard.themeGallery.typeAlign--charge .card-title {
    flex: auto
}

.mCard.themeEm {
    margin: 0 0 -1px 0;
    padding: 2rem 1.5rem 1.5rem;
    border-radius: 0;
	background-color: #f1f1e9;

}

.mCard.themeEm .card-title {
    display: flex;
    flex-direction: column;
    text-align: center;
	background-color: #c1d7e1;
	padding:10px;
}

.mCard.themeEm .card-title-txt {
    display: block;
    font-size: var(--font-body2-size);
    line-height: var(--font-body2-line)
}

.mCard.themeEm .card-title-txt.recommend::before {
    left: 50%;
    transform: translateX(-50%)
}

.mCard.themeEm .card-price,.mCard.themeEm .card-title-desc {
    margin: .5rem 0 0
}

.mCard.themeEm .mButton {
    margin: 1.5rem 0 0;
    z-index: 2
}

.mCard.themeIcon {
    padding: 0;
    margin: .75rem .75rem 0;
    box-shadow: none;
    border-radius: 0;
    background: #f5faff
}

.mCard.themeIcon .link {
    display: block;
    position: relative;
    height: 100%;
    box-sizing: border-box;
    padding: 1.5rem 1.5rem 1.5rem 3.56rem;
    transition: .3s
}

.mCard.themeIcon .title {
    display: block;
    margin-bottom: .88rem;
    color: #1c1c1c;
    font-size: var(--font-body1-size)
}

.mCard.themeIcon .desc {
    margin: 1rem 0 0;
    display: block;
    color: #666;
    font-size: var(--font-body1-size);
    line-height: var(--font-body1-line)
}

.mCard.themeIcon.typeApply .link::before {
    content: "";
    position: absolute;
    top: 25px;
    left: 1.333rem;
    width: 24px;
    height: 24px;
    background: url(/images/common/ico_card_icon.svg) no-repeat center center
}

.mCard.themeIcon .link .icoArrowTop {
    position: absolute;
    top: 32px;
    right: 28px;
    transition: .3s
}

.mCard.typeRecommend {
    background: #f5faff
}

.mCard.themeEm.typeRecommend {
    box-shadow: none
}

.mCard.themeEm.typeRecommend::after {
    content: '';
    border: 1px solid #80a0f9;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 1
}

.mCard.themeEm.typeRecommend .card-title .card-title-txt:before {
    border-radius: 6.25rem
}

.mCard.themeGallery.typeRecommend {
    box-shadow: 0 0 0 1px #80a0f9 inset
}
.title-zone { position:relative;padding:10px; }
.h4-tit01:before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
	top:20px;
    width: 19px;
    height: 2px;
    background: #e02962;
}
.h4-tit01 {
    padding: 0px 0 12px 20px;
    font-size: 18px;
    line-height: 23px;
}
.err_fnt { font-size:19px;color:#ff3300 !important; }

div.s-question {
    font-family: 'Nanum Gothic', sans-serif;
	padding: 0 5px;
    margin-bottom: .0em;
    border-top: 1px solid #ccc;
	border-bottom: 0px solid #ccc;
   background-color: rgba(241,241,233,1.0);
    color: #090909 !important;
    line-height: 150%;
}
.answer-unit-box {
  font-family: 'Nanum Gothic', sans-serif;
  color:#2f2f2f;
  font-size: 15px;
}
.display-flex {
    display: -webkit-flex !important;
    display: -moz-flex !important;
    display: -ms-flexbox !important;
    display: -o-flex !important;
    display: flex !important;
	padding: 10px 0px
}

div.s-question > div > div.flex-width-0 {
    padding: 5px 8px 5px 5px;
	border-radius:5px;
    
}
.flex-width-0 {
    flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    display: block;
	background-color: #616161;
    color: #ffffff;
}
div.s-question > div > div.flex-width-1 {
	padding: 5px;
	line-height: 140%;
}

div.s-answer {
    padding: 5px;
    border-bottom: 1px solid #ccc;
	margin-bottom: 0.5em;
	background-color: rgba(241,241,233,0.7);
}

div.s-check {
    margin-top: .5em;
   /* margin-left: .5em; */
    margin-bottom: .5em;
    margin-right: .5em;
    /* color: #141414; */
	line-height: 140%;
}

div.s-check label {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: -o-flex;
    cursor: pointer;
}


div.s-check span.check-value {
    display: block;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    max-width: 95%;
    width: 100%;
    padding-bottom: -2px;
    /* font-size: 15px; */
}

.check-out { position:relative; }

/* label > [type="radio"]:checked + span:before, label > [type="radio"]:not(:checked) + span:before */

label > [type="radio"] + span:before{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 1.2em;
    height: 1.2em;
    border: 1px solid #ddd;
    background: #fff;
}
/* label > [type="checkbox"]:checked + span:before, label > [type="checkbox"]:not(:checked) + span:before */

label > [type="checkbox"]+ span:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 1.2em;
    height: 1.2em;
    border: 1px solid #ddd;
    background: #fff;
}

label > [type="radio"]:not(:checked) + span:after {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
}

label > [type="checkbox"]:not(:checked) + span:after {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
}

/* label > [type="radio"]:checked + span, label > [type="radio"]:not(:checked) + span */

label > [type="radio"] + span, label {
    display: inline-block;
    position: relative;
   /* padding-left: 1.6em; */
    cursor: pointer;
    line-height: 1.428em;
    margin-left: 5px;
}

/* label > [type="checkbox"]:checked + span, label > [type="checkbox"]:not(:checked) + span */
label > [type="checkbox"] + span {
    display: inline-block;
    position: relative;
   /*  padding-left: 1.6em; */
    cursor: pointer;
    line-height: 1.428em;
    margin-left: 5px;
}

/* label > [type="radio"]:checked + span:after, label > [type="radio"]:not(:checked) + span:after */
label > [type="radio"] + span:after{
    content: '';
    width: 1.3em;
    height: 1.3em;
    background: #55b0f3;
    position: absolute;
    top: 0px;
    left: 0px;
    border: 0px solid #9c3458;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

label > span.answer-snum + [type="radio"]:checked   {
   font-size:20px;
}

label > [type="radio"]:checked + span > div { font-size:16px;font-weight:700; color:#000000; }


label > [type="checkbox"]:checked + span:after {
    content: '';
    width: 1.3em;
    height: 1.3em;
    background: #ff0000;
    position: absolute;
    top: 0px;
    left: 0px;
    border: 0px solid #9c3458;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

/* , label > [type="checkbox"]:not(:checked) + span:after */


label {
    cursor: pointer;
    align-items: baseline;
}
label > [type="radio"]:checked, label > [type="radio"]:not(:checked) {
    position: absolute;
	left: -9999px;
}
label > [type="checkbox"]:checked, label > [type="checkbox"]:not(:checked) {
    position: absolute;
	left: -9999px;
}
div.s-check input[type=radio] {
    display: inline;
    min-width: 1em;
    width: 1em;
    min-height: 1em;
    height: 1em;
}
div.s-check input[type=checkbox] {
    display: inline;
    min-width: 1em;
    width: 1em;
    min-height: 1em;
    height: 1em;
}
.check-value div { margin-left:1.6em;word-wrap: break-word; line-height: 1.2em;  }

.ans-text { width:98%;height:100px; }
.ans-text:focus { background-color:#e4f2fc; }
.ans-text:blur { background-color:#e4f2fc; }

.gde-inq-list { margin: 0 auto 2em auto;width:98%; }
.gde-inq-list  table{ border-top: 2px solid #6b2c2e;}
.gde-inq-list  table td,.gde-inq-list  table th { padding:10px; }
.gde-inq-list  table  th { background-color:#e6e6e6; font-weight: 700;  }
 a .click-able:after {
    border-top: 2px solid #0033cc;
    border-right: 2px solid #0033cc;
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    position: absolute;
    right: 5px;
    top: 40%;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
.complete-mark {display:inline-block;color:#ffffff;background-color:#ff6600;padding:3px;text-align:center; }
.ex-exam { background-color:#dceef5; font-weight:bold; color:#ff6633; }

td.tob {  color: #0066ff; }
.bt { border-top: 1px solid #cfcfcf; }
.bl { border-left: 1px solid #cfcfcf; }
.br { border-right: 1px solid #cfcfcf; }
.bf { border-bottom: 1px solid #cfcfcf; }
.hk-tit { font-size: 1.2em; }
.hk-tit:before { 
						content: '';
						display: block;
						position: absolute;
						top: 0;
						left: 0;
						width: 2px;
						height: 20px;
						background: #E63B53;
						margin-top : 12px;
	}
.info-box { display: flex ;width: 90%;margin: 0 auto; }
.info-box2 { display: block;  }
input.i-ebox { 
		width: 100%; 
		margin: 3px 0;
		box-sizing: border-box;
		border:0;
		border-bottom: solid 1px #d5d5d5;
		outline:0;
		font-size:16px;
		padding: 5px 0;
}
.col0{
		 width:100%;
		 &:after{ 
		  display:block;
		  content: '';
		  width:100%;
		  border-bottom: solid 3px #0066cc;  
		  transform: scaleX(0);  
		  transition: transform 250ms ease-in-out;
		  margin-top:-5px;
		  }
		  &:hover { 
		          &:after { transform: scaleX(1);
				  }
		 }
}

.col3{
		 width:100%;
		text-align:center;
}
.same-col{ float:left;width: 33%; }

.col4{
		margin : 20px auto;
		 width:100%;
		 text-align: center;
		 &:after{ 
		  display:block;
		  content: '';
		  width:100%;
		  border-bottom: solid 3px #0066cc;  
		  transform: scaleX(0);  
		  transition: transform 250ms ease-in-out;
		  margin-top:-5px;
		  }
		  &:hover { 
		          &:after { transform: scaleX(1);
				  }
		 }
}



.col1{
		 width:40%;
		 &:after{ 
		  display:block;
		  content: '';
		  border-bottom: solid 3px #0066cc;  
		  transform: scaleX(0);  
		  transition: transform 250ms ease-in-out;
		  margin-top:-5px;
		  }
		  &:hover { 
		          &:after { transform: scaleX(1);
				  }
		 }
}

.col2{
		 margin-left:10%;
		 width: 40%;
		 &:after{ 
		  display:block;
		  content: '';
		  border-bottom: solid 3px #0066cc;  
		  transform: scaleX(0);  
		  transition: transform 250ms ease-in-out;
		  margin-top:-5px;
		  }
		  &:hover { 
		          &:after { transform: scaleX(1);
				  }
		 }
}

.s-sel {
     width: 75px;
    height: 33px;
    border: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: url("/images/common/arrow_select.png") no-repeat 95% 50%;
    font-size: 14px;
    color: #000;
    border-bottom: 1px solid  #707070;
    padding-left: 10px;
    cursor: pointer;
    outline: none;
    border-radius: 0;
	}

.notice-li { display: flex;cursor:pointer; position: relative; padding:10px 0px 10px 20px; border-top: 1px solid #cccccc;border-bottom: 1px solid #cccccc;}
.notice-li.on { background-color: #ffffff;}
.notice-li.off { background-color: #ffffff; }

.notice-list-title { width: 75%; font-size:16px; }
.date { width:25%; font-size:12px; }
.date:after { 
    content:'';
    border-top: 2px solid #727272;
    border-right: 2px solid #727272;
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    position: absolute;
    right: 5px;
    top: 40%;
    -webkit-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    transform: rotate(135deg);
			 }
.date_on:after { 
    content:'';
    border-top: 2px solid #727272;
    border-right: 2px solid #727272;
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    position: absolute;
    right: 5px;
    top: 40%;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.scroll-content { padding:10px 20px 10px 20px;margin:0 auto 20px;width:calc(100% - 40px); border:0px solid #cccccc; }
#plus10 { text-align:center;margin: 20px auto; }
#plus10 a{ display:inline-block; padding:5px 20px; border: 1px solid #cccccc; text-align:left;}

.ths { font-size:14px; font-weight: 900; color: #0099cc; }
.tht { font-size:17px; font-weight: 400; color: #0099cc; }