* {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
::-moz-selection {background: #000000; /*메인색*/ color: #e6e6e6;text-shadow: none;}
::selection {background: #000000; color: #e6e6e6; text-shadow: none;}
html, body, div, span, object, iframe, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, strong, sub, sup, legend, caption, table, tbody, thead, tfoot, tr, th, td, summary, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, b, i, a, small, menu, nav, section, time, mark, audio, video, dl, dt, dd, ul, li, ol, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, select, textarea, p, blockquote, button {margin:0;padding:0; border: 0;outline: 0;font-weight: inherit;font-style: inherit;font-size: 100%;font-family: inherit;color:inherit;vertical-align: middle}
dl,ul,ol,menu,li {list-style:none}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}
input,select,textarea,button {background:none}
input, select, textarea{width: 100%;color: inherit;}
textarea {border: none;}
input::-moz-placeholder, textarea::-moz-placeholder {color: #bbb !important;}
img {border:0; max-width:100%}
table {border-collapse:collapse; table-layout: fixed;}
a {text-decoration:none;}
a:hover {transition:.3s all ease}

html, body {height: 100%;}
span {vertical-align:top}
blockquote {font-size:1.1em;font-style:italic;border-left:5px #000 solid; padding-left:20px;margin:40px 20px;}
div,p {word-break:keep-all;}
b, strong {font-weight:700;}
body {max-width:768px; margin: 0 auto;color:#333; background:#fff;-webkit-font-smoothing: antialiased;-webkit-overflow-scrolling: touch;}

select {
	width: 32%;
	background: url('/images/btn_select.png') 85% center;
	background-repeat: no-repeat;	
	background-color: #fff;
}
input[type="text"], select, textarea {
	font-family: inherit;
	padding: 3%;
	background-color: #ebebeb;
}
input[type="checkbox"]:checked + label:before {
	border: 2px solid #5af;
	background-image: url("/images/btn_check.png");
}
input[type="radio"]:checked + label:before {
	border: 2px solid #5af;
	background-color: #5ca3ff;
	background-repeat: no-repeat;
	background-position: center;
}
input[type='radio'], input[type='checkbox']{
	width : 0;
	height : 0;
	visibility : hidden;
}
label:before{
	display: inline-block;
	width : 22px;
	height : 22px;
	content: '';
	vertical-align : middle;
	border: 2px solid #5af;
	border-radius: 100%;
	margin-right : 12px;
	margin-top: -2px;
	background-color:#fff;
}
label.small:before{
	width: 15px;
	height: 15px;
	margin-right: 6px;
	border: 2px solid #959595;
}
.ta-c {text-align: center;}
.ta-l {text-align: left;}
.ta-r {text-align: right;}
.b {font-weight: 600;}
.hide {display: none;}

/************ header ****************/
.headerWrap {display: flex;}
.header {
	display: flex;
	flex:5;
	border-radius:8px;
	margin: 10px 15px;
	background-color: #E8FBFF;
}
.header li {
	position: relative;
	text-align: center;
	padding: 9px;
	width: 50%;
	border-radius: 8px;
	margin: 2%;
}
.header li.active {
	color: #fff;
	background-color: #0EC1E8;
}
.header li a {display: block;}
.header li a img {width: 16px;vertical-align: top;}
.setting {
	display: flex;
	flex: 1;
	justify-content: center;
	align-items: center;
}
.setting .menu-btn-1 {
	position: fixed;
	height: 32px;
	width: 40px;
	cursor: pointer;
	z-index: 100;
}
.setting .menu-btn-1 span,
.setting .menu-btn-1 span::before,
.setting .menu-btn-1 span::after {
	background: #333;
	border-radius: 3px;
	content: '';
	position: absolute;
	width: 25px;
	height: 2px;         
	margin-top: 13px; 
	-webkit-transition: .3s ease-in-out;
	-moz-transition: .3s ease-in-out;
	-o-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.setting .menu-btn-1 span::before {margin-top:-9px;}
.setting .menu-btn-1 span::after {margin-top:9px;}
.setting .menu-btn-1.active span {background: transparent;}
.setting .menu-btn-1.active span::before {
	margin-top: 0;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}
.setting .menu-btn-1.active span::after {
	margin-top: 0;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
.setting .menu-btn-1.free {position: absolute !important;} 

#navi {
	position: relative;
	width: 400px;
	height: 100vh;
	position: fixed;
	right:-100%;
	top: 0;
	padding-top: 100px;
	z-index: 1;
	transition:0.5s all ease;
	background-color: #fff;
}
#navi.active {right: 0;}
#navi ul {padding:0 8% 8%;}
#navi ul li {margin-top:8%}
#navi ul li a{display: block;}

.lnb {
	display: flex;
	justify-content: space-between;
	padding: 10px 16px;
	background-color: #f5f5f5;
}
.lnb ul {display: flex;color: #ccc;padding-top: 2px;}
.lnb ul li {
	position: relative;
	margin-left: 1.45em;
	cursor: pointer;
}
.lnb ul li.active {color: #0EC1E8;}
.lnb ul li:after {
	display: block;
	position: absolute;
	top: 6px;
	left: -12px;
	width: 4px;
	height: 4px;
	border-radius:100%;
	background-color: #ccc;
	content: '';
}
.lnb ul li.first:after {display: none;}

.gnb {
	bottom: 0;
	left: 0;
	width: 100%;
	border-top: 1px solid #d9d9d9;
	border-bottom: 1px solid #d9d9d9;
	background-color: #fff;
}
.gnb .btns {
	display: flex;
	text-align: center;
}
.gnb .btns a {
	display: block;
	padding: 10px 5px;
}
.gnb .btns a:active {position: relative;top:1px;left:1px}
.gnb .btns a:nth-child(1) {flex:1;margin-right: 7px;}
.gnb .btns a:nth-child(2) {flex:4;}
.gnb .btns a:nth-child(3) {flex:1;margin-left: 7px;}

.article {padding-bottom: 100px;}
.article h1 {
	color: #000;
	font-weight: 700;
	font-size: 1.2em;
}
.article .contents {
	font-size: 1.2em;
	line-height: 1.5em;
	padding:15px;
}

/************** setting *************/
.titleBox {text-align: center;margin:60px 0 20px;}
.titleBox h1{font-size: 2em;}
.titleBox .sub {
	letter-spacing:0.5px;
	color:#999;
	margin-bottom:5px;
}
.titleBox .bar{
	width:74px; height:4px;
	margin:0 auto 10px;
	background-color:#ddd;
}
.loginBox {
	width:100%;
	padding-bottom:60px;
}
.joinBox {
	padding:3%;
}
.tbl_login {width:50%;margin:60px auto 0;}
.tbl_login td{padding:5px 0;}

.tbl_form { /*contact, join*/
	width:50%;
  margin: 0 auto;
}
.tbl_form th {width: 20%;text-align: left;}
.tbl_form td {padding:5px 0;}
.btnBox {
	position: relative;
	text-align:center;
	margin-top: 50px;
	margin-bottom: 10px;
}
.input_style3 {
	width:100%;
	border:1px solid #dadada;
	padding:11px;
	background-color:#FFF;
}
.btn_style6 {
	display: block;
	color: #fff;
	text-align: center;
	padding: 10px 15px;
	margin-top: 10px;
	background-color: #444;
	cursor: pointer;
}

.consult-form-wrap {
	font-family: inherit;
	padding: 6% 4%;
	background-color: #e2e3e4;
}
.general-box{
	font-family: inherit;
	font-size: 1.2em;
	padding : 8% 7% 7%;
	margin : 0 auto 5%;
	background-color: #fff;
}
.general-box .num_circle {
	display: inline-block;
	position: relative;
	top: -2px;left: 3px;
	color: #fff;
	font-size: 0.8em;
	border-radius: 100%;
	width: 30px;
	background-color: #5af;
	margin-right: 8px;
	height: 30px;
	text-align: center;
	line-height: 30px;
}
.general-box .q {
	font-family: inherit;
	margin-bottom: 5%;
}
.general-box .flex-head {display: flex;flex-wrap: wrap;}
.general-box .flex-part {margin-right: 20px;margin-bottom: 3%;}
.general-box .flex-part.etc {width: 90%;}

.bottom-btn-wrap {
	margin-top: 8%;
	color: #fff;
	font-family: "ScoreB";
	font-size: 1.3em;
	margin-bottom: 5%;
	display: flex;
	justify-content: space-between;
}
.bottom-btn-wrap a {display: block;padding: 3% 6%;}
.bottom-btn-wrap a:active {position: relative;top: 1px;left: 1px;}


@media screen and (max-width:768px) {
	body {width: 100%;}
	.gnb {position: fixed;border-bottom:0}
	#navi {
		width: 100%;
		padding-top: 10%;
	}
}