@charset "utf-8";

#_JW_Usb_basic form .agreeTitle{color: #333;font-size: 25px;font-family: 'Noto Medium';margin-bottom: 30px;margin-top: 100px;}
.loginWrap{margin-bottom:10rem; border-bottom:0.1rem solid #000;}


.textBox{background: #f3f4f6;position: relative;border:1px solid #eaeaea;padding-bottom: 40px;height: 270px;}
.textBox:before,
.textBox:after{content:''; width:14px; height:14px; position:absolute; display:block;}
.textBox:before{border-left:3px solid #014099; border-top:3px solid #014099; left:0; top:0;}
.textBox:after{border-right:3px solid #014099; border-bottom:3px solid #014099; right:0; bottom:0;}
.textBox .boxInner{display: grid;grid-template-columns: 250px 1fr;}
.textBox .thum{width: 250px;text-align: center;}
.textBox .thum p{width: 140px;height: 140px;background: #fff;border-radius: 100%;display: grid;align-content: center;text-align: center;margin: 50px 0 0 50px;}
.textBox .thum p img{margin: 0 auto;}
.textBox .textW{height: 190px;overflow: auto;margin-top: 40px;margin-right: 30;padding-right: 20px;}
.textBox .textW::-webkit-scrollbar {width: 3px; position:relative;}
.textBox .textW::-webkit-scrollbar-thumb {width:3px;background: #004eae;border-radius: 6px;}
.textBox .textW::-webkit-scrollbar-track {background:#eaeaeb;  border-radius: 10px;}

.textBox .textW strong{color: #2a5ca5;font-family: Noto Regular;display: block;margin-bottom: 30px;font-size: 23px;}
.textBox .textW .text-pre{font-size: 17px;font-family: 'Noto Light';}
.textBox .textW .text-pre h3{    font-family: 'Noto Light';    font-size: 17px;}
.textBox .textW .text-pre ol,
.textBox .textW .text-pre p{margin-bottom:35px}
.borderB{border-bottom:1px solid #353e4d;}

.agreeWrap{overflow: hidden;padding: 40px 40px;font-size: 17px;color: #666;}
.agreeWrap .agreeTxt{float: left;width: calc(100% - 270px);}
.agreeWrap .agreeCheck{}
.agreeWrap .agreeCheck ul{float: right;}
.agreeWrap .agreeCheck ul li{display: inline-block;}

/*login*/
#_UlgnS_basic{margin-bottom: 40px;}
#_UlgnS_basic h2{text-align: center;color: #3c3c3c; font-size: 40px; font-weight:800; position: relative;}
#_UlgnS_basic h2 span{}
#_UlgnS_basic h2:before,
#_UlgnS_basic h2:after{content:'';display: block;height: .1px;background: #3c3c3c;position: absolute;top: 50%;width: calc(50% - 210px);transform: translateY(-50%);}
#_UlgnS_basic h2:before{left: 0;}
#_UlgnS_basic h2:after{right: 0;}
#_UlgnS_basic ._infoTxt{text-align: center;color: #333;font-size: 18px;margin: 30px 0; margin-top:-30px;}
#_UlgnS_basic ._loginInputWrap{width: 565px;margin: 0 auto;position: relative;}
#_UlgnS_basic ._loginInput{}
#_UlgnS_basic ._inputArea input#userPassword{background: url(../images/icon_id.png) 10px center no-repeat;} 
#_UlgnS_basic ._inputArea input#userId{background: url(../images/icon_pw.png) 10px center no-repeat;} 


#_UlgnS_basic ._inputArea ._input{color: #999;border: 1px solid #c4c4c4;font-size: 17px;line-height: 60px; height: 60px; margin-bottom: 8px; padding-left: 45px; width: calc(100% - 135px);}
#_UlgnS_basic ._loginSubmit{width: 130px;height: 130px;cursor: pointer;position: absolute;right: 0;top: 0; border-radius: 5px; font-size: 23px;background: #25408f;color: #fff;}


#_UlgnS_basic .c_b{color:#005baa}
#_UlgnS_basic .c_r{color:#ff0000}


._loginLink{margin: 3rem 0;}
._loginLink ul{display: flex;gap: 1rem;justify-content: center;}
._loginLink ul li a{line-height:4.4rem;border: 1px solid #ddd;padding: 1rem 5rem;border-radius: 30rem;}
._loginLink ul li.join a{background:#666; color:#fff;}

._infoBottom{max-width: 85rem;margin: 5rem auto;}
._infoBottom ._inner{color: #333;} 
._infoBottom ._inner .t_txt{font-size: 2.3rem; display: flex; align-items: baseline; gap: 1rem;}
._infoBottom ._inner .t_txt:before{content: ''; width: 0.3rem; height: 2rem; display: block; background: url(../images/objHeading_h3_bullet.jpg) no-repeat;} 
    
._infoBottom ._inner ul{display: flex;flex-direction: column;gap: 1rem;margin-top: 3rem;}
._infoBottom ._inner ul li{display: flex;justify-content: space-between;}
._infoBottom ._inner ul li a{border: 1px solid #b2b2b2;background: #fff; color: #4b4b4b; transition: ease all .3s; font-size: 1.7rem;padding: 0.9rem 2rem;border-radius: 3rem; display:inline-flex; align-items: center; gap: 1rem;}
._infoBottom ._inner ul li a:hover {background: #005baa;color: #fff;border: 1px solid #005baa;}
._infoBottom ._inner ul li a:before{content: '';display: block;width: 2rem;height: 2rem; transition: ease all .3s; background: url(../images/btn_icon02_04.png) center no-repeat;}
._infoBottom ._inner ul li a:hover:before {filter: brightness(0) invert(1);}

/* box */
._authBox{padding:7rem 0 10rem;}
._authBox ._inner{max-width: 115rem;padding-right: 35rem;margin: 0 auto;background: url(../images/bg.png) right top no-repeat;} 
._authBox ._inner ._tit{color:#222;font-size:3rem;margin-bottom: 3rem;font-weight: 500;}
._authBox ._inner ._auth_li{color:#666;display: flex;flex-direction: column;gap: 2rem;}
._authBox ._inner ._auth_li li{display: flex;gap: 1rem;align-items: baseline;}
._authBox ._inner ._auth_li li:before{content:'';width: 0.7rem;height: 0.7rem;display: block;background: #005baa;border-radius: 100%;position: relative;flex-shrink: 0;top: -0.2rem;}

/* btn */
._login_btnWrap{
    text-align: center;
}
._login_btnWrap .normalBtn{background: #005baa;color: #fff;display: inline-block;padding: 2rem 5rem;font-size: 2.2rem;border-radius: 0.5rem;line-height: 1.1;}

._small_tab{margin-bottom: 30px;}
._small_tab li{display: inline-block; margin-right: 5px;}
._small_tab li a{font-size: 17px;color: #666;background: #f8f8f8;display: block;padding: 15px 0;border: 1px solid #cfcfcf;width: 175px;text-align: center;}
._small_tab li.on a{color: #25408f;border: 1px solid #25408f;background: none;}

.userSbscrb_Step{display: grid;grid-template-columns: 1fr 1fr 1fr;}
.userSbscrb_Step li{display:inline-block;background-position: 40px center;background-repeat:no-repeat;color: #212121;border: 5px solid #c1c1c1;border-radius: 20px;padding: 25px 0 25px 100px;position: relative;}
.userSbscrb_Step li + li{margin-left: 80px;}
.userSbscrb_Step li + li:before{content:'';width:42px; top:35px; height:43px;display:inline-block; background: url(./../images/stem-arr.png) center no-repeat;position: absolute;left: -70px;}
.userSbscrb_Step li:nth-child(1){background-image: url(./../images/setp-icon01-off.png);}
.userSbscrb_Step li:nth-child(2){background-image: url(./../images/setp-icon02-off.png);}
.userSbscrb_Step li:nth-child(3){background-image: url(./../images/setp-icon03-off.png);}
.userSbscrb_Step li.on:nth-child(1){background-image: url(./../images/setp-icon01-on.png);}
.userSbscrb_Step li.on:nth-child(2){background-image: url(./../images/setp-icon02-on.png);}
.userSbscrb_Step li.on:nth-child(3){background-image: url(./../images/setp-icon03-on.png);}
.userSbscrb_Step li.on{background-color:#25408e;color:#fff;border-color: #25408e;}
.userSbscrb_Step li .step{font-family: Noto Light;}
.userSbscrb_Step li .step i{font-family: Noto Medium;display: inline-block;margin-left: 5px;}
.userSbscrb_Step li .comment{font-size: 26px;font-family: Noto Medium;}

.agreeFormWrap h2{color:#333; font-size:25px; margin:30px 0;}


/* write */
._memberWrap{margin-top:20px;}
._writeWrap{background: #fff; padding: 30px; z-index: 1; position: relative; border-radius: 10px; border: 1px solid #ddd;}
._write{border-top:2px solid #000;margin-bottom: 0;border-bottom: 1px solid #9e9e9f;}
._write ._form{display: flex;border-bottom: 1px solid #ddd;align-items: center;}
._write ._form:last-child{border:none;}
._write ._form ._label{width: 180px;background-color: #f5f5f5;font-family: 'Noto Regular';padding: 18px 0 18px 20px;font-size: 16px;align-self: stretch;}
._write ._form ._insert{flex-grow: 1;padding: 5px;}
._write ._form ._insert input[type="text"],
._write ._form ._insert textarea,
._write ._form ._insert select{border: 1px solid #c3c3c3;color: #999;font-size: 16px;}
._write ._form ._insert input[type="text"]{padding:5px;line-height: 30px;vertical-align: middle;}
._write ._form ._insert textarea{color:#999; font-size:14px; font-family: 'Noto Light'; padding:10px;}
._write ._form ._insert select{padding: 5px 55px 5px 10px;line-height: 30px;font-size: 16px;height: 42px;vertical-align: middle;background: url(./../images/select-arr.png) 90% center no-repeat;appearance: none;font-family: Noto Light;color: #999;margin-right: 15px;}
._write ._form ._insert .space{display:inline-block; margin:0 5px;}
._write ._form ._insert .in-comment{background: url(./../images/c-dot.png) left 13px no-repeat;font-size: 15px;display: inline-block;color: #999;margin-top: 5px;padding: 5px 0 5px 10px;margin-left: 15px;}

input.radioB[type="radio"]{appearance: none; border:1px solid #7d7d7d;border-radius: 50%;width: 20px;height: 20px;position: relative;top: 4px;}
input.radioB[type="radio"]:checked:after{content:'';border-radius:100%;width: 8px;height: 8px;display:block;background: #1c3d8e;position:absolute;left:50%;top:50%;transform:translate(-50%, -50%)}
input.radioR[type="radio"]{appearance: none;border:1px solid #7d7d7d;border-radius: 50%;width: 20px;height: 20px;position: relative;top: 4px;}
input.radioR[type="radio"]:checked:after{content:''; border-radius:100%; width:8px; height:8px; display:block;background: red; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%)}

input.redCheck[type="checkbox"]{vertical-align: middle; display: inline-block; text-indent:-9999px; width: 18px;height: 18px;border:2px solid #d1d4da;position: relative; appearance: none;}
input.redCheck:checked::after{content:''; width: 8px;height: 8px; position: absolute; left: 3px; top:3px; background: #e60012;}
input.redCheck[type="checkbox"] + label{display: inline-block; font-family:'Noto Light'; vertical-align: middle; margin-left:5px;}

input.blueCheck[type="checkbox"]{vertical-align: middle; display: inline-block; text-indent:-9999px; width: 18px;height: 18px;border:2px solid #d1d4da;position: relative; appearance: none;}
input.blueCheck:checked::after{content:''; width: 8px;height: 8px; position: absolute; left: 3px; top:3px; background: #1c3d8e;}
input.blueCheck[type="checkbox"] + label{display: inline-block; font-family:'Noto Light'; vertical-align: middle; margin-left:5px;}

.agreeBtnWrap{text-align:center; padding:60px 0;}
.agreeBtnWrap .btnA{background: #25408f;color: #fff;font-family: 'Noto Regular';display: inline-block;border-radius: 5px;padding: 17px 25px;font-size: 18px;line-height: 1.1;}
.agreeBtnWrap .btnA.btn-c01{background-color: #25408f;}
.agreeBtnWrap .btnA.btn-c02{background-color: #6d6b76;}

._insertBtn{border:none;display:inline-block;background: #6d6b76;color: #fff;vertical-align: middle;font-size: 15px;padding: 10px 15px;border-radius: 3px;margin-left: 5px;font-family: 'Noto Light';}



@media only screen and (max-width: 800px) {
#_UlgnS_basic h2{font-size:32px;}
#_UlgnS_basic ._infoTxt{margin:25px 0 30px;}	
#_UlgnS_basic ._loginInputWrap{width:auto;}
#_UlgnS_basic ._inputArea ._input{width:100%;font-size: 15px;}	
#_UlgnS_basic ._loginSubmit{position:initial;width:100%;padding:10px;height:auto;font-size:17px;}	
#_UlgnS_basic ._findInfo ul li a{font-size:14px;padding-left:32px;padding-bottom:5px;}	
#_UlgnS_basic ._findInfo ul li + li{padding-left:10px;margin-left:10px;}	

._infoBottom ._inner ul li{display:block;}
._infoBottom ._inner ul li span{display:block; margin:1rem 0;}
._authBox ._inner{background:none; padding-right:0;}

}

/*아이디찾기,비번찾기*/
	#_UlgnS_basic._loginBefore ._findInfo{
		margin: 35px auto 10px;
		width:100%;
		border-bottom: 1px solid #cecece;
		padding-bottom: 20px;
		overflow: hidden;
		max-width: 85rem;
	}
	#_UlgnS_basic._loginBefore ._findInfo li{
		line-height: 30px;
		float:left;
		background-position:left center;
		margin-right:20px
	}
	#_UlgnS_basic._loginBefore ._findInfo li.icon-01{
		background:url(./../images/icon-01.png) left 3px no-repeat;
		padding-left:38px;
	}
	#_UlgnS_basic._loginBefore ._findInfo li.icon-02{
		background:url(./../images/icon-02.png) no-repeat;
		padding-left:23px;
	}
	#_UlgnS_basic._loginBefore ._findInfo li.icon-03{
		background:url(./../images/icon-03.png) left 3px no-repeat;
		padding-left:33px;
	}
	#_UlgnS_basic._loginBefore ._findInfo li ._gotoLoginMember,
	#_UlgnS_basic._loginBefore ._findInfo li ._findLoginId,
	#_UlgnS_basic._loginBefore ._findInfo li ._findLoginPw{
		float: right;
		height: 30px;
		line-height: 30px;
		background-color: transparent;
		border: 0;
		color: #666;
		font-size:1.2em;
	}
/*로그인 후*/
	/*제목*/
	#_UlgnS_basic._loginAfter h2{
		display: none;
	}
	/*로그인정보*/
	#_UlgnS_basic._loginAfter ._loginInfo{
		margin: 10px;
		text-align: center;
		font-size: 1em;
	}
	#_UlgnS_basic._loginAfter ._loginInfo ._loginMsg {
		height: 73px;
		line-height: 73px;
	}
	#_UlgnS_basic._loginAfter ._loginInfo ._loginMsg strong{
		color: #009df5;
	}
	#_UlgnS_basic._loginAfter ._uInfo {
		overflow: hidden;
		position: relative;
		border: 1px #ccc solid;
		margin: 0 10px 10px;
		display: flex;
	}
	#_UlgnS_basic._loginAfter ._uInfo li{
		float: left;
		width: 100%;
	}
	/*버튼*/
	#_UlgnS_basic._loginAfter ._uInfo li ._btnLogout,
	#_UlgnS_basic._loginAfter ._uInfo li ._btnEditInfo{
		display: block;
		width: 100%;
		text-align: center;
		border-style: solid;
		background-color: #f7f7f7;
		cursor: pointer;
		font-size: 17px;
		padding: 10px;
	}
	#_UlgnS_basic._loginAfter ._uInfo li ._btnLogout{
		border-width: 1px 1px 0 0;
		border-color: #fff #ccc #ccc #ccc;
	}

	#_UlgnS_basic._loginAfter ._uInfo li ._btnJoinHomepage{
		border-width: 0 0 0 1px;
		border-color: #fff #ccc #ccc #ccc;
		display: block;
		width: 100%;
		text-align: center;
		border-style: solid;
		background-color: #f7f7f7;
		cursor: pointer;
		font-size: 17px;
		padding: 10px;
	}