@charset "utf-8";

/* 
	default
*/


/* 
	sub
*/
#sub {
	min-height: 650px;
	margin-bottom: 90px;
	font-size: 1.8rem;
}
#sub .pageTitle {
	margin: 50px auto 0;
	border-bottom: 1px solid #a6a6a6;
	text-align: center;
}
#sub .pageTitle._noLine {
	border-bottom: 0;
    text-align: center;
}
#sub .pageTitle h3 {
	color: #232323;
	font-size: 3rem;
	font-weight: 800;
	margin-bottom: 15px;
}
#sub .h3_under {
	color: #a6a6a6;
	font-size: 2rem;
	font-weight: 600;
	margin-bottom: 30px;
    text-align: center;word-break: keep-all;
}

#subContent {
	margin: 60px auto;max-width: 1320px;
}

#subContent2 {
	margin: 20px auto;
}
.view-content{word-break: break-all;}
#subContent2 h4.title {
	font-size: 2.8rem;
	font-weight: 800;
}

#subContent2 h4.subTitle {
	color: var(--color);
	font-size: 2.8rem;
	font-weight: 800;
	margin-bottom: 30px;
}

.content-box {
	border-bottom: 1px solid #a6a6a6;
	padding: 50px 0;
}

.content-box._noLine {
	border-bottom: 0;
}

h4.subTitle {
	color: var(--color);
	font-size: 2.8rem;
	font-weight: 800;
}

.content-title-wrap {
	display: flex;
	align-items: center;
}

.content-box .content-title-wrap h5.im {
	margin-bottom: 0;
    margin-right: 10px;
}

#subContent h5.im,
.content-box h5.im {
	font-size: 2.2rem;
	font-weight: 600;
}
.content-box h5.im,
ul.im > li {
	position: relative;
	margin-bottom: 20px;
	padding-left: 15px;
}
ul.im > li:last-child {
	margin-bottom: 0;
}
.content-box h5.im::before,
ul.im > li:before {
	content: '*';
	color: var(--color);
	font-weight: 800;
	position: absolute;
	top: 3px; left: 0;
}

ul.dash > li {
	position: relative;
	margin-bottom: 10px;
	padding-left: 15px;
}
ul.dash > li:last-child {
	margin-bottom: 0;
}
ul.dash > li:before {
	content: '-';
	position: absolute;
	top: 0px; left: 0;
}

ol.numBg {
    list-style: none;
}
ol.numBg li {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
	font-size: 2rem;
    font-weight: 600;
    position: relative;
    padding-left: 35px;
}
ol.numBg li::before {
    position: absolute;
    top: 2px; left: 0;
    color: #fff;
    content: '1';
    display: inline-block;
    vertical-align: top;
    border-radius: 50%;
    width: 27px;
    height: 27px;
    line-height: 27px;
    font-size: 2rem;
    text-align: center;
	background-color: var(--color);
}

ol.numBg li:nth-child(1)::before {content: '1';}
ol.numBg li:nth-child(2)::before {content: '2';}
ol.numBg li:nth-child(3)::before {content: '3';}
ol.numBg li:nth-child(4)::before {content: '4';}
ol.numBg li:nth-child(5)::before {content: '5';}


/* -- tab -- */
#tab {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 80px;
}
#tab .tablink {
	flex: 1 1 auto;
	color: #8b8b8b;
	font-weight: 800;
	padding: 15px 10px;
	box-sizing: border-box;
	background-color: #fff;
	border: 1px solid #a2a2a2;
	border-bottom: 2px solid var(--color);
	margin-left: -1px;
	border-radius: 5px 5px 0 0;
}
#tab .tablink._active {
	color: var(--color);
	border: 2px solid var(--color);
	border-bottom: 2px solid #fff !important;
	z-index: 1;
}

/* -- sub visual -- */
#subVisual {
	background: #f8f8f8;
	height: 190px;
}
#subVisual h3.subTitle {
	font-size: 3.6rem;
	font-weight: 800;
	padding: 40px 0 0;
}

#subVisual .subTitleWrap {
	padding: 45px 0 0 45px;
}
#subVisual h3.subTitle2 {
	font-size: 2.4rem;
	font-weight: 800;
	margin-bottom: 15px;
}

#subVisual .subText {
	font-size: 1.6rem;
}


/* -- login -- */
.loginBox {
	max-width: 360px;
	margin: 0 auto;width: 90%;
}

.loginBox input {
	font-size: 1.4rem;
	margin-bottom: 10px;
}
.login-util {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	color: #6f6f6f;
	font-size: 1.2rem;
	margin-top: 15px;
}
.login-util input[type=checkbox]+label:before {
	width: 12px; height: 12px;
	top: 2px;
}
.login-util .linkUl li {
	display: inline-block;
	vertical-align: middle;
}
.login-util .linkUl li:first-child:before { display: none; }
.login-util .linkUl li:before {
	content: '|';
	margin: 0 5px;
}
a.btn-login {
    display: inline-block;
    width: 100%;
    color: #fff;
    font-size: 2rem;
    text-align: center;
    padding: 12px 22px;
    box-shadow: 0 0 6px 0 rgb(1 1 1 / 30%);
    box-sizing: border-box;
    margin: 20px 0 0;
}

/* -- 회원가입 -- */
.join-sum .join-sum-box {
	position: relative;
	min-height: 150px;
	background: #f8f8f8;
	margin: 10px 0 20px;
	padding: 20px;
}

.join-sum h5.subTitle2 {
	position: relative; z-index: 2;
	font-size: 2rem; font-weight: 800;
	margin-bottom: 10px;
}
.join-sum .subText {
	position: relative; z-index: 2;
	font-size: 1.6rem;
}

/* 회원가입 step */
.form-step {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	max-width: 700px;
	margin: 0 auto 40px;
}

.form-step li {
	position: relative;
	color: #cacaca;
	font-size: 2.4rem;
	text-align: center;
	font-weight: 800;
}

.form-step li:last-child:after {display: none;}
.form-step li:after {
	content: '';
	position: absolute;
	top: 38px; right: -25%;
	width: 0px;
    height: 0px;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #cfcfcf;
	z-index: 1;
}
.form-step li._done:after,
.form-step li._active:after {
    border-left-color: var(--color);
}

.form-step li .step-box {
	text-align: center;
	width: 180px;
	box-shadow: 0 0 10px 0 rgb(1 1 1 / 20%);
	background-color: #f4f4f4;
	border-radius: 10px;
	padding: 10px 35px;
	box-sizing: border-box;
	margin-bottom: 15px;
}
.form-step li .step-box h4 {
	font-size: 2.8rem;
	font-weight: 800;
}
.form-step li .step-box h4:before {
	display: block;
	content: 'STEP';
	font-size: 1.6REM;
}

.form-step li._active {
	color: var(--color);
}

.form-step li._active .step-box,
.form-step li._done .step-box {
	color: #fff;
	background-color: var(--color);
}

.textarea-join {
	font-size: 1.8rem;
	height: 170px;
	overflow-y: auto;
	margin: 20px 0;
	padding: 20px;
}

.agr label {
	font-size: 1.6rem;
}

/* -- form-filed -- */
.form-filed {
    display: -webkit-box;
    display: flex;
    display: -ms-flexbox;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
	border-top: 2px solid #232323;
}
.form-area {
    display: -webkit-box;
    display: flex;
    display: -ms-flexbox;
	align-items: center;
	width: 100%;
	border-bottom: 1px solid #dedede;
	padding: 11px 10px;
	box-sizing: border-box;
}
.form-area._full { width: 100%; flex-wrap: wrap;}
.field-label {
	font-size: 2rem;
	font-weight: 800;
	min-width: 190px;
	padding: 5px;
	box-sizing: border-box;
}
.field-label.im:before {
	content: "*";
	color: var(--color);
	margin-right: 5px;
}

.field-label span {
	color: #8b8b8b;
	font-size: 1.4rem;
	font-weight: 400;
	margin-left: 10px;
}

.form-area input {
	max-width: 380px;
	margin-right: 10px;
}

.form-area .notice {
	color: #8b8b8b;
	font-size: 1.4rem;
}
.form-area .notice span {
	display: block;
}

.form-wrap .form-title {
	font-weight: 800;
	font-size: 3rem;
	margin-bottom: 15px;
}

/* 가입완료 */
.join-cmp {
	text-align: center;
	background: #f8f8f8 url('/resources/images/users/bg-cmp.png') right bottom no-repeat;
	padding: 70px 20px; box-sizing: border-box;
}

.join-cmp .logo span {
	text-align: left;
}

.join-cmp .cmp-txt {
	font-size: 3rem;
	font-weight: 800;
	margin: 1px auto 40px;
}


/* -- 개인정보수정 -- */
.editWrap {
	background-color: #f6f6f6;
	text-align: center;
	padding: 80px 20px; box-sizing: border-box;
}
.editBox {
	max-width: 380px;
	margin: 0 auto;
}
.editBox .notice,
.form-notice {
	color: #8b8b8b;
	font-size: 1.6rem;
	font-weight: 600;
	margin-bottom: 10px;word-break: keep-all
}
.editBox input {
	margin-bottom: 10px;
}
.withdraw-ck input[type=checkbox]+label {
	font-size: 1.6rem;
	font-weight: 600;
}


/* -- table list -- */
h4.grt {
	text-align: center;
	font-size: 2.8rem;
	font-weight: 800;
	margin: 70px auto;
}
h4.grt strong {
	color: var(--color);
	font-size: 3.2rem;
}

.tableList table {
	text-align: center; width: 100%;
	border-top: 2px solid #232323;
}
.tableList table tr {
	border-bottom: 1px solid #dedede;
}
.tableList table th,
.tableList table td {
	padding: 20px 10px;
	word-wrap: break-word;
    word-break: keep-all;
}

.tableList table thead,
.tableList table th.bg {
	background-color: var(--color);
	opacity: 40%;
}
.tableList table thead th,
.tableList table th.bg {
	color: #fff;
	font-size: 18px;
}

.tableList table tbody {
	text-align: center;
}

.tableList table tbody td {
	font-size: 16px;

}

.tableList table tbody .pass {
	color: var(--color);
}


.tableList table tbody td.tt {
	text-align: left;
}

.tableList table tbody td.tt a {
	max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    white-space: nowrap;
}

.tableList table tbody td.tdate {
	font-size: 1.4rem;
}

.tableList table tbody td.im {
	font-weight: 800;
	color: var(--color);
}

.tableList._border table {border-top: 0;}
.tableList._border table th,
.tableList._border table td {
	border: 1px solid #a6a6a6;
}
.tableList table thead th.bg100 {opacity: 1;}

.subTable table {
	text-align: center;
}
.subTable table th {
	color: var(--color);
	font-weight: 800;
}
.subTable table th,
.subTable table td {
	padding: 15px 10px;
	word-wrap: break-word;
	border: 1px solid #a6a6a6;
}
.subTable table td {
	padding: 20px 10px;
	word-wrap: break-word;
}

/* pager */
.pager {
	margin: 80px auto 50px;
	display: flex;
    justify-content: center;
    align-items: center;
}
.paging {width: 40px;}
.paging._disable {opacity: 0.2;}
.paging {
	display: inline-block;
	width: 50px;
	height: 50px;
	text-indent: -5000px;
	vertical-align: top;
	background: #efefef url('/resources/images/users/sub/arrow-pager.png') -13px center no-repeat;
	border-radius: 50%;
	margin: 0 5px;
}
.paging.prev { background-position: -60px center; }
.paging.next { background-position: -147px center; }
.paging.last { background-position: -206px center; }
.pager ul {
	overflow: hidden;
	display: inline-block;
}
.pager ul li {
	float: left;
	padding: 0 2px;
}
.pager ul li a {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #000;
	font-size: 1.5rem;
	font-weight: 600;
	width: 50px;
	height: 50px;
	text-align: center;
	background-color: transparent;
	border-radius: 50%;
}

.pager ul li._on a {
	color: #fff;
	background-color: var(--color);
}

/* 
	공지사항
*/
.boardSrch {
	text-align: center;
	max-width: 394px;
	margin: 50px auto 60px;
}
.boardSrch h5 {
	font-size: 2.4rem;
	font-weight: 600;
	margin-bottom: 10px;
}
.boardSrch .srch-area {
	position: relative;
}
.boardSrch .input_search::placeholder {color: #fff;}
.boardSrch .input_search {
	color: #fff;
	width: 100%; height: 54px;
    font-size: 24px;
    background-color: var(--color);
	border: 0;
    border-radius: 30px;
    padding: 8px 40px 8px 20px;
}
.boardSrch .srchBtn {
	position: absolute;
	right: 14px;
    top: 15px;
	width: 23px; height: 23px;
	background: url('/resources/images/users/sub/srchBtn.png') center center no-repeat;
}
.board-wrap .pager ul li a {width: 50px; height: 50px; border-radius: 15px;}

.board-top {
	display: flex;
	margin-bottom: 20px;
}

.board-view .view-header {
	border-bottom: 1px solid #a6a6a6;
}

.view-header {
	padding: 50px 0 35px;
}
.vh-title {
	color: #000;
	font-size: 2.8rem;
	font-weight: 800;
	margin-bottom: 10px;
}
.vh-info {
	font-size: 1.8rem;
	text-align: right;
}
.vh-info span:after {
	content: '|';
	margin: 0 7px 0 10px;
}
.vh-info span:last-child:after {
	display: none;
}

.view-content {
	padding: 40px 0;
	font-size: 2rem;
	border-bottom: 1px solid #a6a6a6;
	margin-bottom: 60px;
}

/* 
	faqBox
*/
.faqBox {
	margin-bottom: 20px;
}
.faqBox .faq_q,
.faqBox .faq_a {
	position: relative;
	padding: 30px 60px 30px 90px;
}
.faqBox .faq_q {
	color: #000;
	font-size: 2rem;
	font-weight: 600;
	width: 100%;
	background: #fff;
	border-radius: 10px;
	box-shadow: 10px 5px 50px 0 rgb(202 201 201 / 38%);
	text-align: left;
	z-index: 1;
}
.faqBox .faq_q span {
	color: #adadae;
	font-size: 1.6rem;
	margin-right: 10px;
}
.faqBox._open .faq_q {
	color: var(--color);
}
.faqBox._open .faq_q::before {
	background-color: var(--color);
}

.faqBox .faq_a {
	display: none;
	border-radius: 0 0 10px 10px;
	background-color: #fff;
	box-shadow: 10px 5px 50px 0 rgb(202 201 201 / 38%);
	padding-top: 60px;
	margin-top: -20px;
}

.faqBox .faq_q:before,
.faqBox .faq_a:before {
	content: '';
	width: 43px; height: 43px;
	position: absolute;
	top: 20px;
	left: 20px;
	background: #646464 url('/resources/images/users/sub/icon-faq.png') right top no-repeat;
	border-radius: 50%;
}
.faqBox .faq_a:before {
	top: 47px;
	background-position: left bottom;
}
.faqBox .faq_q:after {
	content: '';
	width: 17px; height: 11px;
	position: absolute;
	top: 35px;
	right: 30px;
	background: url('/resources/images/users/sub/arrow-faq.png') left bottom no-repeat;
}
.faqBox._open .faq_q::after {
	background-position: left top;
}
.faqBox._open .faq_q::before {
	background-position: left top;
}


/* 
	갤러리
*/
.gallery-list {
	margin: 60px 0;
}
.gallery-list > li {
	width: calc(100% / 3 - 15px);
	text-align: center;
	display: inline-block;
	vertical-align: top;
	margin-right: 17px;
	margin-bottom: 15px;
}
body.desktop .gallery-list > li:nth-child(3n) {
	margin-right: 0;
}

.gallery-list a {
	display: block;
}
.gallery-list .g-img img {
	border-radius: 10px;
	display: block;
	width: 100%;
	height: 100%;
}
.gallery-list .g-title {
	font-size: 2rem;
	font-weight: 500;
	overflow: hidden;
	width: 100%;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin-top: 15px;
}
.gallery-list .g-info {
	color: #b1b1b1;
	font-size: 1.6rem;
}
.gallery-list .g-info span.date:before {
	content: '|';
	margin: 0 7px 0 5px;
}



/* 
	교육원소개
*/
.introduce .intd-top {
	position: relative;
	background: url('/resources/images/users/sub/intd-top-img.png') left top no-repeat;
	overflow: hidden;
	height: 300px;
	margin-bottom: 60px;
}
.introduce .intd-top .txt {
	position: absolute;
	top: 70px; left: -10px;
	background: rgba(0,0,0,0.75);
	color: #fff;
	font-size: 2.4rem;
	font-weight: 700;
	padding: 25px 30px 25px 50px;
	border-radius: 10px;
}
.introduce h4.title {
	font-size: 2.8rem;
	font-weight: 800;
	margin-bottom: 20px;
}

.mou-area .titleBox {
	padding: 40px 20px;
	background: #f8f8f8;
	text-align: center;
	margin: 80px 0 25px;
}
.mou-area .titleBox h4 {
	font-size: 3rem;
	font-weight: 800;
	margin-bottom: 15px;
}
.mou-area .mou-list li {
	display: inline-block;
	vertical-align: top;
	width: calc(100% / 3 - 17px);
	margin-right: 20px;
	margin-bottom: 20px;
	border: 1px solid #a3a3a3;
}
body.desktop .mou-area .mou-list li:nth-child(3n) {
	margin-right: 0;
}
.mou-area .mou-list li img {
	display: block;
	width: 100%; height: 100%;
}


/* 
	찾아오시는 길
*/
.map-area {
	margin: 50px 0 40px;
}
.map-area img {
	display: block;
	width: 100%;
}
.visit-info {
	display: flex;
	justify-content: space-between;
	font-size: 2rem;
	word-break: keep-all;
}
.visit-info > div {
	width: 47%;
}
.visit-info h5 {
	font-size: 2.8rem;
	font-weight: 800;
	margin-bottom: 30px;
}
.visit-info h5:before {
	content: '';
	display: inline-block;
	width: 4px;
	height: 27px;
	background-color: var(--color);
	vertical-align: top;
	margin: 7px 15px 0 0;
}

.visit-info dl {
	margin-bottom: 15px;
}
.visit-info dl:not(.transport) {
	display: flex;
}
.visit-info dl:not(.transport) dt {
	width: 65px;
}
.visit-info dl:not(.transport) dd {
	width: calc(100% - 65px);
}
.visit-info dl dt {
	font-weight: 800;
	margin-right: 25px;
}
.visit-info dl:not(.transport) dt,
.visit-info dl:not(.transport) dd {
	vertical-align: top;
	display: inline-block;
}

dl.transport {
	font-size: 1.6rem;
	padding-left: 100px;
}
dl.transport dt {
	padding-top: 10px;
	margin-bottom: 5px;
}
dl.transport:before {
	content: '';
	position: absolute;
	top: 0; left: 0;
	width: 80px; height: 80px;
	background: url('/resources/images/users/sub/icon-transport.png') center top no-repeat;
	box-shadow: 0 0 10px rgba(0,0,0,0.20);
	border-radius: 50%;
}
dl.transport._subway:before {
	background-position: center bottom;
}


/* 
	교육과정안내
*/
.ol-box {
	position: relative;
	padding-left: 160px;
}
.ol-box:last-child {
	border-bottom: 0;
}

.ol-box .large-num {
	content: '01';
	color: var(--color);
	font-size: 11rem;
	font-weight: 800;
	opacity: 0.2;
	position: absolute;
	top: 15px;
	left: 0;
	margin-right: 5px;
}
.ol-box h4.title {
	color: var(--color);
	margin-bottom: 30px;
}
.ol-box ul.im {
	font-size: 2.2rem;
	font-weight: 600;
}

.prdTable table tbody td {
	font-size: 1.8rem;
}


/* 
	신청페이지
*/
.apl-top .titleArea {
	text-align: center;
	color: var(--color);
	font-weight: 800;
	font-size: 4rem;
}
.apl-top .titleArea span {
	display: block;
	color: #232323;
	font-size: 3rem;
}
.img-box {
	margin: 40px auto;
}
.txtBox {
	position: relative;
}
.txtBox:not(._noBg)::before {
	background-color: var(--color);
}
.txtBox::before {
	content: '';
	width: 100%;
	height: 100%;
	opacity: 0.2;
	border-radius: 20px;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: -1;
}
.txtArea {
	padding: 20px
}
.txtArea > p,
.txtArea > ul.dash {
	padding-left: 12px;
}

._black_input input[type=checkbox]+label:before, 
._black_input input[type=radio]+label:before {
	border-color: #232323;
}
._black_input input[type=radio]:checked+label:before,
._black_input input[type=checkbox]:checked+label:before {
    border-color: #232323;
    background-color: #232323;
}

.ch-style {
	margin: 20px 0 30px;
	width: 100%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.ch-style .rdo {
	margin-bottom: 10px;
	width: calc(100% / 3);
}
.ch-style input[type=radio]+label {
	padding-left: 0;
}

.ch-style input[type="radio"] + label:before {
	top: 7px;
}
.ch-style label > span {
	display: block;
	font-size: 2rem;
	font-weight: 600;
	padding-left: 25px;
	margin-bottom: 10px;
}
.ch-style label > img {
	cursor: pointer;
	display: block;
	max-width: 100%;
}


/* 
	resposive
*/
@media all and (max-width: 720px) {
    .loginBox input{font-size: 5vw;}
    .login-util{font-size: 5vw;}
    html{touch-action: pan-y;}
	/* -- mobile -- */
	/* --------------------- sub */
	#sub .pageTitle {text-align: left;}
	#sub .pageTitle h3 {margin-bottom: 10px;}
    .content-title-wrap {display: block;}
    .content-title-wrap .btn {width: 100%; margin-top: 10px;}
	/* --------------------- btn */
	.btnWrap._full2 .btn {width: calc(50% - 15px);}
	.btn.wBig {width: 100%;}
	/* --------------------- form */
	.form-area { flex-wrap: wrap; }
	.form-area input { max-width: calc(100% - 200px); }
	.form-area .notice {display: block; width: 100%; margin-left: 190px; margin-top: 10px;}
	/* --------------------- pager */
	.pager ul {display: none;}
	.paging {background-color: var(--color); background-image: url('/resources/images/users/sub/arrow-pager-w.png');}
	.paging._disable {background-color: #d6d6d6; opacity: 1;}
	/* --------------------- 갤러리 */
	.gallery-list {margin-top: 40px;}
	.gallery-list > li { width: calc(100% / 2 - 11px); }
	.gallery-list > li:nth-child(2n) { margin-right: 0; }
	/* --------------------- 교육원소개 */
	.introduce .intd-top {height: 468px; background-image: url('/resources/images/users/sub/intd-top-img-m.png');}
	.mou-area .mou-list li { width: calc(100% / 2 - 13px); }
	.mou-area .mou-list li:nth-child(2n) { margin-right: 0; }
	/* --------------------- 찾아오시는 길 */
	.map-area {margin: 30px 0;}
	.visit-info {display: block;}
	.visit-info > div {width: 100%; margin-bottom: 70px;}
	.visit-info h5:before {margin-top: 5px;}
	.visit-info dl:not(.transport) dt { width: 40px; }
	.visit-info dl:not(.transport) dd { width: calc(100% - 40px); }
	/* --------------------- 교육과정안내 */
	.ol-box {padding: 30px 0;}
	.ol-box .large-num {position: static; font-size: inherit;}
	/* --------------------- 신청안내 */
	.application .checkbox,
	.application .radio-box { width: 100%; margin-top: 10px;}
	.application .radio-box {display: flex; flex-wrap: wrap;}
	.application .radio-box .rdo { width: calc(100% / 2); margin-bottom: 10px;}
	.ch-style .rdo {width: calc(100% / 2);}
	.form-area .notice span {display: inline-block;}
    .tableList._border table th, .tableList._border table td{font-size: 3vw;}
    
    .tableList table th, .tableList table td {padding: 1vw 0.5vw;}
    .vh-title{font-size: 4vw;}
    .vh-info{font-size: 3vw;}
    .view-content{font-size: 3vw;padding: 5vw -0px;}
    .view-header{padding: 6vw 0vw 5vw 0;}
    #tab .tablink{font-size: 3vw;padding: 2vw 3vw;}
    #subContent h5.im, .content-box h5.im{font-size: 5vw;}
    .form-area .notice{font-size: 3vw;}
    a.btn-login{font-size: 6vw;}
    .editBox .notice, .form-notice{font-size: 4vw;}
    input, input[type="text"], input[type="password"], input[type="email"], input[type="number"], textarea, select{font-size: 4vw;}
    
    
    h4.title{font-size: 5vw;}
    .textarea-join{font-size: 3vw;}
    .withdraw-ck input[type=checkbox]+label{font-size: 4vw;}
    .btnWrap .btn{font-size: 5vw;}
    .btnWrap .btn{font-size: 5vw;}
    
    
    
}
@media all and (max-width: 480px) {
	/* form */
	.btnWrap .btn {min-width: auto;}
	input, input[type="text"], input[type="password"], input[type="email"], input[type="number"], textarea, select {padding: 0 10px;}
	.field-label {width: 100%;}
	.form-area input {max-width: 100%; margin-right: 0;}
	.form-area .notice {margin-left: 0;}
    .tableList table tbody td{font-size: 2.4vw;}
}