@charset "utf-8";


/* font */
@import url('https://fonts.googleapis.com/earlyaccess/nanumgothic.css');
@import url('https://fonts.googleapis.com/earlyaccess/notosanskr.css');
@import url('https://fonts.googleapis.com/earlyaccess/nanummyeongjo.css');


/*==========================================================================
Base
==========================================================================*/
*,
*:after,
*:before {	margin: 0;	padding: 0; -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;	box-sizing: border-box;}

::selection {*background: rgba(245, 122, 29, 0.8); /* Firefox */ background: rgba(245, 122, 29, 0.8); /* Safari */    color: #fff;}
::-moz-selection {*background: rgba(245, 122, 29, 0.8); /* Firefox */ background: rgba(245, 122, 29, 0.8); /* Firefox */    color: #fff;}

/* word-break: break-all; word-wrap: break-word; */

html, body,div,dl,dt,dd,ul,ol,li,pre,code,form,fieldset,legend,textarea,p,blockquote,p,iframe,span,strong,em { margin:0; padding:0; font-size:inherit; word-break:break-word; word-break:keep-all; -webkit-text-size-adjust:none; }
html { font-size: 62.5%; }
body{font-family: 'Nanum Gothic', '나눔고딕' , '돋움',Dotum,AppleGothic,sans-serif;color:#585858;line-height:auto;font-weight:300; padding:0px;margin:0px;letter-spacing:-.025em; word-break:keep-all;}
html, body {width:100%;height:100%;}
header, hgroup, footer, section, article, aside, nav, canvas, figure, figcaption { display:block; }
table { font-size:inherit; border-collapse:separate /*collapse*/; border-spacing:0; table-layout:fixed; }
th, td { word-wrap:break-word; word-break:break-all;font-weight:normal }
fieldset, iframe { border:0; vertical-align:top; }
small { font-size:12px; color:#666; }
img { border:0; font-size:0; vertical-align:top; }
address,cite,code,dfn,em,var { font-style:normal; font-weight:normal; }
li, dd { list-style:none; word-break:break-word; word-break:keep-all; }
hr { display:none; }
caption { overflow:hidden;width:100%;height:1px;font-size:1px;line-height:0;text-indent:-9999px; margin-top:-1px; }
legend {  overflow:hidden; left:-9999px; text-indent:9999px; width:0; height:0; overflow:hidden; line-height:0; white-space:nowrap; color:#000; }
button { padding:0; border:0; cursor:pointer; background:none; vertical-align:middle; font-size:12px; appearance: none; moz-appearance: none; border:0; *overflow:visible; outline:none;}
input, textarea { font-family: 'Nanum Gothic', '나눔고딕' , '돋움',Dotum,AppleGothic,sans-serif; }
h1, h2, h3, h4, h5, h6 { padding:0px;margin:0px; }
img{vertical-align:middle;}


a, a code { color:#5c5c5c; text-decoration:none;  /*마우스오버시 자연스럽게*/transition-duration: 300ms;   transition-property: color, border-color, background-color;   transition-timing-function: ease; }
a:active, a:active code { text-decoration:none;  /*마우스오버시 자연스럽게*/transition-duration: 300ms;   transition-property: color, border-color, background-color;   transition-timing-function: ease; }
a:hover, a:hover code, a:focus, a:focus code { text-decoration:none; /*마우스오버시 자연스럽게*/transition-duration: 300ms;   transition-property: color, border-color, background-color;   transition-timing-function: ease;  }
sup,sub { font-size:0.9em; font-style:italic; }
checkbox { vertical-align:middle}
a {outline:none; select-dummy: expression(this.hideFocus=true);cursor:pointer}
.hand {cursor:pointer}
input:focus { outline: none; }



/*== 체크박스/라디오버튼 디자인 ==*/
input[type="radio"],input[type="checkbox"] {
  visibility: hidden;
  display:none;
}
label.radio {
	cursor: pointer;
  text-indent: 25px;
  overflow: visible;
  display: inline-block;
  position: relative;
  font-size:14px;
  height: 17px;
  line-height: 16px;
}

label.radio:before {
  background: #fff;
  border:1px solid #d7d7d7;
  content:'';
  position: absolute;
  top:0px;
  left: 0;
  width: 17px;
  height: 17px;
  border-radius: 100%;
  box-sizing:border-box;
}

label.radio:after {
	opacity: 0;
	content: '';
	position: absolute;
	width: 7px;
	height: 7px;
	top: 5px;
	left: 5px;
	background: #5291E6;
	border-radius:50%;
}

input[type="radio"]:checked + label:after {
	opacity: 1;
}


label.check {
	cursor: pointer;
  text-indent: 25px;
  overflow: visible;
  display: inline-block;
  position: relative;
  color:#777;
  font-size:14px;
  height:17px;
  line-height: 16px;

  vertical-align:middle;
}

label.check:before {
  background: #f7f7f7;
  border:1px solid #d7d7d7;
  content:'';
  position: absolute;
  top:0px;
  left: 0;
  width: 17px;
  height: 17px;
  border-radius: 5px;
  box-sizing:border-box;
}

label.check:after {
	opacity: 0;
	content: '';
	position: absolute;
	width: 0.7em;
	height: 0.45em;
	background: transparent;
	top: 4.6px;
	left: 4.4px;
	border: 3px solid #5291E6;
	border-top: none;
	border-right: none;

	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

input[type="checkbox"]:checked + label:after {
	opacity: 1;
}


/*공통*/
input[type="text"], input[type="password"],input[type="number"], textarea{
	-webkit-appearance: none;
	-webkit-border-radius: 0;
	border:1px solid #d7d7d7;
				}
input[type="text"]{height:37px; line-height:35px;border-radius:0px;font-size:14px;}
 textarea, input{box-sizing:border-box;}
input[type="button"]{
-webkit-appearance:  none;
-moz-appearance: none;
appearance: none;
}

input[type="text"]::-ms-clear {
display:none;
}
textarea{resize:none;}
.mypage-srchFilter .datePick input::-webkit-search-cancel-button {   /* select all "X" buttons in search inputs */
   appearance: none;
}


select::-ms-expand {display: none;background:#fff url('/image/common/icon_arrow_open.png') no-repeat 100% 50%;  /* 화살표 모양의 이미지 */

background-size:19px; text-indent: 1px;
    text-overflow: '';}
select::-ms-expand{display:none; padding:0 0px 0 10px\9;}

select{
padding:0 22px 0 10px;overflow: hidden !important;
 -webkit-border-radius: 0;
  /* 네이티브 외형 감추기 */
-webkit-appearance:  none;
-moz-appearance: none;
appearance: none;
background:#fff url('/image/common/icon_arrow_open.png') no-repeat 100% 50%;  /* 화살표 모양의 이미지 */
background-size:19px;
border:1px solid #d7d7d7;
height: 37px;
padding-left: 10px; color:#777; vertical-align:middle; font-size:14px;}
select{
 padding:0 0px 0 10px\9;
}


input::placeholder{
	font-size:12px;color:#bdbdbd
}	

li{list-style:none;}


/* 정렬 */
.center { text-align:center !important; }
.left { text-align:left !important; }
.right { text-align:right !important; }
.fr { float:right !important; }
.fl { float:left !important; }
.mid { vertical-align:middle !important ; }
.clear {clear:both !important;}
.overhide {overflow:hidden !important;}


.box-20, .box-25, .box-30, .box-33, .box-40, .box-50, .box-60, .box-70, .box-75, .box-100{float:left;}
.square { position: relative; /*width: 100%;*/ }

.square:after { content: ""; display: block; padding-bottom: 100%; }
.sq-content { position: absolute; width: 100%; height: 100%;}
.rectangle{position: relative;}
.rectangle:after{ content: ""; display: block; padding-bottom: 50%; }
.re-content{ position: absolute; width: 100%; height: 50%;}

.box-20{width:20%;}
.box-25{width:25%;}
.box-30{width:30%;}
.box-33{width:33.333%;}
.box-40{width:40%;}
.box-50{width:50%;}
.box-60{width:60%;}
.box-70{width:70%;}
.box-75{width:75%;}
.box-100{width:100%;}


.row{clear:both; margin-left:-15px; margin-right:-15px; position:relative;}
.row .col-20, .row .col-25, .row .col-30, .row .col-33, .row .col-35, .row .col-40,
.row .col-50, .row .col-60, .row .col-66, .row .col-70, .row .col-75, .row .col-100{float:left;padding-left:10px; padding-right:10px;box-sizing: border-box;}

.row .col-20{width:20%;}
.row .col-25{width:25%;}
.row .col-30{width:30%;}
.row .col-33{width:33.333%;}
.row .col-35{width:35%;}
.row .col-40{width:40%;}
.row .col-50{width:50%;}
.row .col-60{width:60%;}
.row .col-66{width:66%;}
.row .col-70{width:70%;}
.row .col-75{width:75%;}
.row .col-100{width:100%;}

.mr-3{margin-right:3px;}
.mr-10{margin-right:10px;}
.mr-20{margin-right:20px;}
.mt-5{margin-top:5px;}
.mt-10{margin-top:10px;}
.mt-15{margin-top:15px;}
.mt-20{margin-top:20px;}
.mt-45{margin-top:45px;}
.mt-200{margin-top:200px;}
.ml-3{margin-left:3px;}
.ml-5{margin-left:5px;}
.ml-10{margin-left:10px;}
.ml-15{margin-left:15px;}
.ml-20{margin-left:20px;}
.ml-50{margin-left:50px;}

.mb-5{margin-bottom:5px;}
.mb-10{margin-bottom:10px;}
.mb-12{margin-bottom:12px;}
.mb-13{margin-bottom:13px;}
.mb-20{margin-bottom:20px;}
.mb-30{margin-bottom:30px;}
.mb-40{margin-bottom:40px;}
.mb-50{margin-bottom:50px;}
.mb-60{margin-bottom:60px;}

.pt-30{padding-top:30px !important;}
.pt-20{padding-top:20px;}

.pb-10{padding-bottom:10px;}
.pb-30{padding-bottom:30px !important;}
.pb-20{padding-bottom:20px;}
.inline-b{display:inline-block;}

.center{text-align:center;}
.left{text-align:left;}
.right{text-align:right;}

.clear{clear:both;}
.float_l{float:left;}
.float_r{float:right;}
.float_c{float:center;}
.align_c{text-align:center !important;}
.align_r{text-align:right !important;}
.align_l{text-align:left !important;}


/*------------- 버튼 관련 ------------*/
.SubmitBtn_Red button {
	background-color:#b10808;
    font-weight: 600;
    margin: 5px 0 0px;
    padding: 1.5rem 2rem;
    cursor: pointer;
    border-radius: 40px;
   color:#ffffff;
   font-size:1.7rem;
   
}
.SubmitBtn_Red button:hover {
	background-color:#d11a1a;
}


.SubmitBtn_Gray button {
		background-color:#efefef;
    font-weight: 600;
    margin: 5px 0 0px;
    padding: 1.5rem 2rem;
    cursor: pointer;
    border-radius: 40px;
    font-size:1.45rem;
    color:#676767;
}




/************ 퀵 오버시 텍스트는 _inc/quick.asp **********************/

#body.scroll .quick { display: block; }
.quick {
  display:none;
	position: fixed;
	bottom: 2rem;
	right: 0.875em;
	z-index: 2000; }
	.quick .quick-box {
		display: block; }
		.quick .quick-box .quick-item {
			width: 5.875rem;
			height: 5.875rem;
			margin-bottom: 0.5625em;
			border-radius: 100%;
			-webkit-box-shadow: 5px 5px 5px rgba(59, 59, 59, 0.2);
			box-shadow: 5px 5px 5px rgba(59, 59, 59, 0.2); }
			.quick .quick-box .quick-item a {
				position: relative;
				display: block;
				width: 100%;
				height: 100%;
				background-repeat: no-repeat;
				background-position: center;
				background-size: auto;
				word-break: keep-all;
				white-space: nowrap;
				border-radius: 100%; }
				.quick .quick-box .quick-item a::before {
					display: inline-block;
					color: #ffffff;
					font-size: 0.75em;
					font-weight: 100;
					line-height: 1;
					padding: 0.71667em 1.03333em;
					border-radius: 2em;
					background-color:#8d8d8d;
					position: absolute;
					top: 50%;
					right: 0;
					-webkit-transform: translate(0, -50%);
					-ms-transform: translate(0, -50%);
					transform: translate(0, -50%);
					-webkit-transition: all .3s ease-in-out;
					-o-transition: all .3s ease-in-out;
					transition: all .3s ease-in-out;
					z-index: -1;
					opacity: 0; }
			.quick .quick-box .quick-item:nth-child(1) a {
				background-image: url(/image/main/btn_appli.png); background-size: 50px;}
			.quick .quick-box .quick-item:nth-child(2) a {
				background-image: url(/image/main/btn_leveltest.png); background-size: 40px;}
			.quick .quick-box .quick-item:nth-child(3) a {
				background-image: url(/image/main/icon_kakao.png); background-size: 50px;}
			.quick .quick-box .quick-item:nth-child(1) a {
				background-color: #6a6a6a; }


			.quick .quick-box .quick-item:hover a::before {
				right: 5.16667em;
				-webkit-transform: translate(-0.83333em, -50%);
				-ms-transform: translate(-0.83333em, -50%);
				transform: translate(-0.83333em, -50%);
				opacity: 1; }

				@media (max-width:1500px) {
				
				}
				@media (max-width:767px) {
					.quick .quick-box .quick-item {
						width: 6.875rem;
						height: 6.875rem;
					
					
				}

/************ 퀵 오버시 텍스트는 _inc/quick.asp **********************/