@charset "utf-8";


/* ----- S : layout ----- */
#wrap { position: relative; width: 100%; min-width: 360px; opacity: 0.4; }
#wrap.fadein { opacity: 1; transition: ease-in-out 0.3s; }



/* header */
header { position: fixed; left: 0; width: 100%; height: 72px; background: rgba(255, 255, 255, .8); line-height: 72px; z-index: 500; }
header .wrapper { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
/*.hd_left { display: inline-block; }*/
/*.hd_right { float: right; padding: 0px 24px; }*/
.hd_right .blue { color: #0c90b6; font-weight: 600; }


header.shadow { box-shadow: 0 0 8px 0 rgba(0,0,0,.08); }
.util { float: right; margin-right: 30px; text-align: right; cursor: pointer; }
.util em { display: inline-block; max-width: 130px; height: 50px; text-align: right; vertical-align: top; overflow: hidden; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; }
.util span:hover em { text-decoration: underline; }
.util i { vertical-align: middle; }
.util .fa-angle-down { padding: 0 8px; opacity: .8; }
.util i.fa-user-circle:hover { color: #26d1a0; transition: .2s; }

.pop_util { display: none; position: absolute; top: 60px; right: 30px; width: 330px; color: #777; background: #fff; line-height: 20px; border-radius: 2px; box-shadow: 1px 2px 6px 0 rgba(0,0,0,.2); z-index: 50; }
.pop_util::before { content: ''; position: absolute; top: -12px; right: 7px; margin-left: -6px; border-width: 6px; border-style: solid; border-color: transparent transparent #fff transparent ; }
.pop_util .info { padding: 26px 30px; }
.pop_util .info > span { display: inline-block; width: 65%; word-break: break-all; letter-spacing: 0; }
.pop_util .info > span strong { color: #333; font-weight: 800; }
.pop_util .info a { float: right; margin-top: 3px; }
.pop_util .list_util { width: 100%; }
.list_util > li { border-top: 1px solid #ddd; }
.list_util a { display: block; line-height: 50px; color: #777; padding:0 30px; }
.list_util a:hover { color: #26d1a0; background: #f6f6fc; }
.list_util a i { margin-right: 10px; }



logo, #logo { position: fixed; top: 0; width: 319px; height: 100px;  margin: 0 auto; line-height: 100px; text-align: center; z-index: 801; }
#logo a { display: inline-block; width: 201px; height: 62px; background: url('../images/logo.png') no-repeat center center; }

logo, #logo { float: left; text-align: center; }
#logo a { display: inline-block; vertical-align: top; color: #0e123e; font-size: 22px; font-family:'NanumSquare'; font-weight: 800; }
#logo a img { margin-right: 10px; }



/*#container { width: 100%; min-height: calc(100vh - 46px); padding-top: 30px; }*/
#container { min-height: calc(100vh - 54px); margin: 0; padding-top: 72px; overflow: hidden; }
.contents { width: 100%; }
.wrapper { width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 24px; }

/* ----- E : layout ----- */





/* gnb */
#gnb { display: inline-block; }
#gnb .m_menu { display: none; }
.menu { display: inline-block; line-height: 40px; letter-spacing: 0; }
.menu > a { color: #0c0d20; font-size: 15px; font-weight: 700; }
.menu:hover > a { color: #0c90b6; }




.btn_wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
.btn_wrap_center { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.btn_wrap a { flex-grow: 1; }

/* footer */
/*footer,*/
/*#footer { line-height: 46px; color: #8a8a8a; background: #fff; font-size: 13px; letter-spacing: 0; z-index: 30; }*/
/**/
/*.f_txt { color: #888; font-weight: 300; font-size: 15px; text-align: center; }*/
/*.f_txt a { display: inline-block; color: #f58220; font-weight: 600; }*/
/*.f_txt a:hover { text-decoration: underline; }*/




/* -------------- login/member : S -------------- */
.tit_member { margin-bottom: 40px; text-align: center; }
.tit_member a.logo img { height: 42px; }
.tit_member h1 { display: block; margin-left: 0; margin-top: 10px; font-size: 20px; font-weight: 700; font-family: 'NanumSquare'; color: #777; line-height: 40px; letter-spacing: -1.6px; }
.tit_member p { margin-top: 20px; line-height: 22px; }
.tit_member h1 + p { margin-top: 0; }

.box_member { width: 100%; max-width: 720px; margin: 0 auto; padding: 80px 30px; }
.box_member .tab01 a { flex: 1; height: 60px; padding: 16px 0; font-size: 19px; }


.mark_certified { margin: 20px auto ;  width: 100px; height: 100px; line-height: 100px; text-align: center; }
.login01 { background: #fff; word-break: keep-all; }
.login01 h3 { padding: 20px 0 10px; }
.login02 { background: #fff; word-break: keep-all; }
.login02 dl { padding-top: 30px; }

.box_member input[type="text"],
.box_member input[type="password"] { width: 100%; height: 45px; border-color: #ddd; }
.box_member select.register_email { width: calc(50% - 16px); height: 45px; line-height: 45px; }

.box_member dl { line-height: 22px; }
.box_member dt { margin-bottom: 8px; color: #333; font-size: 16px; font-weight: 700; }
.box_member dt em { color: #ec69ac; margin-right: 6px; font-size: 18px; font-weight: 700; }
.box_member dd { margin-bottom: 16px; }
.box_member dd:last-of-type { margin-bottom: 0; }
.box_member dd li { margin-top: 8px; padding-left: 12px; }
.box_member dd li:first-child { margin-top: 0; }
.box_member dd li::before { content: '\00B7'; margin: 0 8px 0 -12px; font-weight: 800; }

.box_member dd p { margin-top: 8px; }

.box_member dd.id input { width: calc(100% - 105px); }
.box_member dd.id button { float: right; width: 100px; color: rgba(255,255,255,.8); background: #0e123e; line-height: 48px; text-align: center; font-family:'NanumSquareRound'; font-size: 17px; font-weight: 400; border: 1px solid #111; border-radius: 4px; cursor: pointer; }
.box_member dd.id button:hover { color: #fff; background: #000; }
.box_member dd.email span { display: block; margin-bottom: 8px; }
.box_member dd.email span input { float: left; width: calc(50% - 16px); margin-right: 0; }
.box_member dd.email span i { float: left; width: 32px; line-height: 50px; text-align: center; font-style: normal; }
.box_member dd.email p { margin-top: 8px; }
.box_member dd.security input { float: right; width: calc(100% - 165px); }
.box_member figure { display: inline-block; width: 160px; height: 50px; background: #fff; vertical-align: top; }
.box_member .file_route label,
.box_member .file_route input[type="text"] { height: 50px; line-height: 48px; }




/* login */
.btn_idpw { overflow: hidden; }
.btn_idpw a { float: left; width: 50%; color: #555; text-align: center; font-size: 16px; }
.btn_idpw a:first-of-type::after { content: ''; float: right; width: 1px; height: 18px; background: #b7cddc; }
.btn_idpw a:hover { color: #0c90b6; }
.btn_idpw a i { float: right; line-height: 38px; font-size: 14px; }



/* id/pw */
label.error { display: block; width: 100%; color: #8a6d3b; background-color: #fcf8e3; margin-top: 8px; padding: 12px; border: 1px solid #faebcc; cursor: default; }

/* -------------- login/member : E -------------- */

/*findaccount*/
.find_wrap { margin-top: 20px; padding: 30px 0; background: #f5f5f5; text-align: center; }
.find_wrap b { color: #0c90b6; font-size: 18px; }



/* register */
.reg_input_wrap input[type="text"],
.reg_input_wrap input[type="password"] { width: calc(100% - 128px); margin-right: 5px; }
.reg_input_wrap button.btn.mid { width: 120px; height: 45px; padding: 9px 0; }

.register_btn { text-align: center; }
.register_btn a { display: inline-block; }
.register_btn a:first-of-type { margin-right: 8px; }

.box_member input[type="checkbox"] { width: 0; height: 0; }
.box_member input[type="checkbox"] + label { font-size: 16px; font-weight: 700; }
.box_member input[type="checkbox"] + label em { color: #ff3939; font-weight: 400; }

.agree_wrap { width:100%; height:182px; border:1px solid #ccc; background:#fff; margin:10px 0 30px 0; -webkit-overflow-scrolling: touch; }
.agreement_box { line-height: 20px; }
.agreement_h2 { font-size: 16px; font-weight: 600; color: #222; line-height: 22px; padding-bottom: 20px; }
.agreement_h3 { font-size: 14px; font-weight: 600; color: #555; padding-bottom: 8px; }



/* mypage */
.leave_btn:hover { color: #1895b1; }








/* responsive web */

/* wide */
@media screen and (min-width: 1600px) {

}


/* ~ Tablet */
@media screen and (max-width: 1279px){

}


/* Tablet */
@media screen and (max-width: 1023px){
}


	/* small Tablet */
@media screen and (max-width: 768px){
	header .wrapper { padding: 10px; }
/*	footer { text-align: center; word-break: keep-all; }*/
/*	footer .disinblock a { display: inline-block; }*/
/*	footer i.mobile { display: block; }*/
/*	footer i.mobile::before { content: none; }*/
/*	footer .floatr { float: none; margin-top: 20px; }*/
	
	.util span { display: none; }

	/* gnb */
/*	#gnb { margin-left: 10px; }*/
/*	.menu > a { width: 40px; height: 40px; margin-right: 16px; padding: 0; text-align: center; line-height: 40px; border-radius: 100%; }*/
/*	.menu > a:hover { background: #26d1a0; }*/
/*	.menu > a i { color: #fff; }*/
/*	.menu > a span { display: none; }*/
	.menu > a { font-size: 14px; }
/*	.hd_right { padding: 0 10px; }*/

	.tit_member { margin-bottom: 32px; }
	.tit_member a.logo img { height: 30px; }

	.box_member { padding: 30px 10px; }
	.box_member .tab01 a { height: unset; padding: 8px 0; font-size: 16px; }
	.box_member dt { font-size: 15px; }	
	.box_member .contbox .mt24 { margin-top: 16px; }

	.btn_idpw a { font-size: 14px; }
	
	.box_member dd p { font-size: 13px; }
}

@media screen and (max-width: 480px){
	.box_member input[type="text"],
	.box_member input[type="password"] { height: 40px; font-size: 13px; }
	.box_member select.register_email { height: 40px; line-height: 40px; font-size: 13px; }
	.box_member dt { font-size: 14px; }
	.box_member dt em { margin-right: 2px; font-size: 14px; }
	.box_member dd p { margin-top: 2px; font-size: 12px; }
	.box_member .contbox .mt24 { margin-top: 10px; }

	.leave_btn { font-size: 12px; }

	.reg_input_wrap button.btn.mid { height: 40px; }
}