@charset "UTF-8";

.login-wrap{max-width: 1500px; margin: 0 auto;}
#_UlgnS_basic{background: url(../images/dots_background.png); padding: 9px;}
.login-wrap{background-color: white; position: relative;}
.login-after-wrap{background-color: white; padding: 40px; position: relative;}
.login-wrap-box{background-color: white;}
.login-top{padding: 74px 132px 61px 94px; position: relative;}
.login-top::after{content:""; display: table; clear: both;}
.login-top::before{content:""; display: block; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: url(../images/dots_line.png) no-repeat center center;}
.login-header{display: flex; justify-content: space-between; align-items: center; position: relative;}
.login-header h1{font-family: "Gmarket Bold"; font-size: 26px; color: #222222; margin-right: 30px;}
.login-header h1 span{color: #009fbe;}
.login-left{position: relative; padding-right: 53px;}
.login-left::after{content:""; display: block; position: absolute; right: 0; top: 0; width: 1px; height: 100%; background-color: rgba(0,0,0,.1);}
.login-left .login-header{padding-left: 82px;}
.login-left .login-header::after{content:""; display: block; position: absolute; left: 0; top: -10px; width: 64px; height: 61px; background: url(../images/login_icon.png) no-repeat center center;}
.login-right .login-header{padding-left: 88px; position: relative;}
.login-right .login-header::after{content:""; display: block; position: absolute; left: 0; top: -10px; width: 67px; height: 67px; background: url(../images/access_icon.png) no-repeat center center;}
/*20260123.login-header p{font-family: "Noto Thin"; font-size: 16px; line-height: 25px; color: #6e6e6e; letter-spacing: -.11em; word-break: break-all;}*/
.login-header p{font-family: "Noto Thin"; font-size: 16px; line-height: 25px; color: #000000; letter-spacing: -.11em; word-break: break-all; font-weight:bold;}
.login-left{float: left; width: 50%;}
.login-right{float: right; width: 50%; padding-left: 55px;}
._loginInputWrap{display: flex; justify-content: space-between; margin-top: 37px;}
._loginInput{width: calc(100% - 196px);}
._loginInput:last-child{margin-bottom: 0;}
._inputArea{margin-bottom: 6px;}
._inputArea:last-child{margin-bottom: 0;}
._inputArea input{border: 1px solid #b0b0b0; padding: 13.5px 55px; display: inline-block; height: auto; line-height: auto; width: 100%; font-size: 18px; color: #6e6e6e;}
._inputArea input#userId{background: url(../images/login_id.png) no-repeat left 15px center}
._inputArea input#userPwd{background: url(../images/login_password.png) no-repeat left 15px center}
._loginInputWrap ._loginSubmit{background-color: #013c8a; width: 186px; height: 120px; font-family: 'Gmarket Medium'; color: white; font-size: 24px; text-align: center; line-height: 120px; display: block; border-radius: 5px; cursor: pointer;}
.login-right .login-content{display: flex; justify-content: space-between; margin-top: 40px; padding: 0 0 0 25px}
.login-right .login-header h1{padding-top: 8px;}
.login-field{width: calc(100% - 243px);}
.login-field li{padding: 15px 15px 15px 30px; position: relative;}
.login-field li.on::before{content:""; display: block; position: absolute; width: 100%; height: 60px; background: url(../images/select_radio.png) no-repeat left center / contain; border-radius: 10px; z-index: 1; left: -10%; top: 50%; transform: translateY(-50%);}
.login-field label{font-family: "Gmarket Medium"; color: #1d1d1d; font-size: 18px; position: relative; z-index: 2;}
.login-field li input[type="radio"]{display: none;}
.login-field .custom-radio{position: absolute; top: 0; left: 0; width: 20px; height: 20px; border-radius: 50%; background-color:transparent; border: 2px solid rgba(0,0,0,.3); top: 50%; transform: translateY(-50%); z-index: 2;}
.login-field li input[type="radio"]:checked ~ .custom-radio{background-color: transparent}
.login-field li input[type="radio"]:checked ~ .custom-radio::after{content:""; display: block; position: absolute; width: 10px; height: 10px; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #db5038;}
.login-link a{background-color: #013c8a; width: 186px; height: 120px; font-family: 'Gmarket Medium'; color: white !important; font-size: 24px; text-align: center; line-height: 120px; display: block; border-radius: 5px;}
.login-bottom ._findLoginPw{border: 1px solid #50545c; border-radius: 50px; font-family: "Gmarket Medium"; font-size: 16px; color: #50545c; background-color: transparent; padding: 10px 13px 8px; cursor: pointer;}
.login-bottom a{border: 1px solid #50545c; border-radius: 50px; font-family: "Gmarket Medium"; font-size: 16px; color: #50545c; padding: 10px 13px 8px;}
.login-bottom button{border: 1px solid #50545c; border-radius: 50px; font-family: "Gmarket Medium"; font-size: 16px; color: #50545c; background-color: transparent; padding: 10px 13px 8px; cursor: pointer;}
.login-bottom button.login-faq-button{background-color: #50545c; color: white; border: 1px solid #50545c}
.login-bottom a.login-regist{background-color: #22afcb; color: white; border: 1px solid #22afcb}
.login-bottom{display: flex; flex-wrap: wrap; padding: 35px 95px; justify-content: space-between;}
.login-bottom > ul{width: 41%; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin-top: 20px;}
.login-bottom > ul > li{margin-right: 10px;}
.login-bottom > ul > li:last-child{margin-right: 0;margin-top:-2px;}
.login-info{width: 59%;}
.login-info h1{font-family: "Noto Regular"; font-size: 18px; color: #000000; position: relative; margin-right: 65px; margin-bottom: 10px;}
.login-info li{font-family: "Noto Thin"; font-size: 16px; color: #000000; padding-left: 20px; background: url(../images/slash_color.png) no-repeat left top 8px; margin-bottom: 3px; letter-spacing: -.11em;}
.login-info li:last-child{margin-bottom: 0;}
.login-info li span{font-weight: bold;}

._uInfo{display: flex; margin-top: 20px;}
._uInfo li{margin-right: 10px;}
._uInfo li:last-child{margin-right: 0;}

._btnLogout,
._btnEditInfo{font-size: 14px; font-family: "Gmarket Medium"; line-height: 24px; color: #01499a; border: 1px solid #01499a; padding: 5px 10px; text-align: center;}

.login_box_sns{background: url(../images/dots_background.png); padding: 9px; margin-top: 145px;}
.login-sns-box{background-color: white; padding: 60px 40px 45px 40px;}
.login-sns-box h1{font-family: "Gmarket Bold"; font-size: 26px; color: #222222; padding-left: 50px; background: url(../images/login_title.png) no-repeat left top 7px; margin-right: 30px;}
.login-sns-box label{text-align: center;}
.login-sns-box label p{font-family: "Noto Medium"; font-size: 22px; color: #000000;}
.login-sns-box label #check_agree{border: 2px solid #b0b0b0; border-radius: 5px;}
.login-sns-box table{border-top: 2px solid black; width: 650px; margin: 0 auto; margin-top: 30px;}
.login-sns-box table th{font-family: "Noto Medium"; color: #000; border-right: 1px solid rgba(0,0,0,.3); border-bottom: 1px solid rgba(0,0,0,.3); padding: 5px 0;}
.login-sns-box table th:last-child{border-right: 0;}
.login-sns-box table td{font-family: "Noto Light"; font-size: 18px; color: #505050; border-right: 1px solid rgba(0,0,0,.3); padding: 10px 0; border-bottom: 1px solid rgba(0,0,0,.3);}
.login-sns-box table td:last-child{border-right: 0;}
.caution_1{text-align: center; font-family: "Noto Medium"; font-size: 16px; line-height: 25px; color: #505050; margin-top: 25px;}
.login_box_btn{display: flex; flex-wrap: wrap; justify-content: center; padding-top: 43px; position: relative; margin-top: 70px;}
.login_box_btn::before{content:""; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 2px; background: url(../images/login_border-bottom.png) no-repeat top center;}
.login_box_btn a{width: 200px; font-size: 20px; font-family: "Gmarket Medium"; padding: 17px 0 13px 60px; margin-right: 20px;}
.login_box_btn a:last-child{margin-right: 0;}
.login_box_btn .btn_nav{color: white; background: #01c73c url(../images/naver_logo.png) no-repeat left 30px center;}
.login_box_btn .btn_cac{color: white; background: #fee800 url(../images/kakao_login.png) no-repeat left 25px center; color: #2e223e;}

@media all and (max-width: 1500px) {
	login-top{padding: 70px 45px 60px;}
	.login-bottom{padding: 35px 45px}
	.login-info{width: 55%;}
	.login-header p{font-size: 14px;}
	.login-bottom > ul{width: 45%;}
}

@media all and (max-width: 1400px) {
	.login-top{padding: 50px;}
	.login-wrap{padding-bottom: 200px;}
	.login-left{float: none; width: 100%; padding-right: 0;}
	.login-field li.on::before{left: -25px;}
	.login-left::after{display: none;}
	.login-right{float: none; width: 100%; margin-top: 50px; padding-left: 0;}
	.login-bottom{padding: 35px 50px;}
	.login-info{display: block; width: 100%;}
	.login-info h1{margin-right: 0; margin-bottom: 30px;}
	.login-left .login-header::after{top: -10px;}
	.login-right .login-header::after{top: -10px;}
	._loginInputWrap{margin-top: 30px;}
	.login-right .login-content{margin-top: 30px;}
	.login-bottom > ul{width: 100%;}
}

@media all and (max-width: 1023px) {
	.login-top{padding: 50px 30px;}
	._loginInputWrap{padding: 0 20px;}
	.login-wrap{padding: 40px 0 0 0; width: 100%;}
	.login-info li{text-align: left;}
	.login-bottom > ul{width: 100%;}
	.login-left,
	.login-right{padding: 0 20px;}
	.login-right .login-content{padding: 0 20px;}
	.login-info{position: static; padding: 20px; width: 100%;}
	.login-bottom{padding: 30px;}
	.login-bottom ul{display: block; text-align: center;}
	.login-bottom > ul > li{margin-bottom: 10px; margin-right: 0;}
	.login-bottom ._findLoginPw{display: inline-block;}
	.login-bottom a{display: inline-block;}
	.login-bottom button{display: inline-block;}
}

@media all and (max-width: 768px) {
	.login-top{padding: 30px 10px;}
	.login-bottom{padding: 10px; width: 100%;}
	.login-header{display: block;}
	.login-left, .login-right{padding: 0 20px;}
	._loginInputWrap{display: block;}
	._loginInput{width: 100%;}
	._loginInputWrap ._loginSubmit{width: 100%; height: auto; line-height: 30px; margin-top: 20px; padding: 10px 0; font-size: 20px;}
	.login-link a{font-size: 20px;}
	.login-right .login-content{display: block;}
	.login-field{width: 100%;}
	.login-link a{width: 100%; height: auto; line-height: 30px; padding: 10px 0;}

	.login-left .login-header::after{top: 0;}
	.login-right .login-header::after{top: 0;}

	.login-field li{padding: 15px 15px 15px 50px;}
	.login-field li.on::before{left: 0; width: 100%; background-size: cover;}
	.login-field .custom-radio{left: 20px;}

	.login-sns-box table{width: 100%;}
	.login_box_btn{display: block;}	
	.login_box_btn a{width: 100%; margin-right: 0; display: block; margin-bottom: 10px;}
}

/* 팝업 */
.login-faq-wrap{position: fixed; left: 0; top: 0; width: 100%; height: 100%; display: table; background-color: rgba(0,0,0,.45); z-index: 10; visibility: hidden; opacity: 0; transition: all .5s;}
.login-faq-wrap.on{opacity: 1; visibility: visible;}
.login-faq-inner{display: table-cell; vertical-align: middle;}
.login-faq-box{max-width: 900px; margin: 0 auto;}
.popup-header{background: url(../images/popup_header.png) no-repeat left top / cover; padding: 16px 30px; display: flex; justify-content: space-between;}
.popup-header h1{color: white; font-family: "Gmarket Medium"; font-size: 32px;}
.popup-header .popup-close{padding-left: 26px; display: block; font-size: 16px; font-family: "Gmarket Light"; color: white; background: url(../images/popup_close.png) no-repeat left top 14px;}
.popup-content{background-color: white; max-height: 500px; overflow: auto; padding: 30px;}