/* BASIC css start */
/* 공통 */
#login {font-family: 'Noto Sans KR', sans-serif;margin-bottom: 65px;}
#login a {font-family: 'Noto Sans KR', sans-serif;}
#login input {border: 1px solid #e6e6e6;margin-top: 0;padding: 12px 10px;font-size: 13px;color: #000;font-weight: 300;}
#login input:last-child {border-top: transparent;}
#login .login {margin-top: 40px;}

/* 버튼 영역 */
#login .btn_bottom_box {padding: 0 25px;margin-top: 15px;}
#login .btn_basic {display: block;width: 100%;height: 35px;line-height: 35px;box-sizing: border-box;font-size: 14px;font-weight: 400;padding: 0;color: #000;margin-top: 6px;}
#login .btn_login {background: #008375;color: #fff !important;}
#login .btn_join {background: #fff;border: 1px solid #000;}

/* 상단 타이틀 */
#login .h_title {padding: 15px 0;min-height: 45px;border-bottom: 1px solid #c6c6c6;}
#login .h_title h3 {text-align: center;font-size: 1rem;font-weight: 500;color: #0e0e0e;}

/* 탭 영역 */
#login .tab_wrap {margin: 0 25px;}
#login .tab_wrap .tab {border: 1px solid #e6e6e6;border-bottom-color: transparent;}
#login .tab_wrap .tab a {font-size: 13px;line-height: 0.8em;padding: 12px 0;color: #666666;font-weight: 300;}
#login .tab_wrap .tab.sel {border-color: #000;border-bottom-color: #fff;}
#login .tab_wrap .tab.sel a {color: #000000;font-weight: 700;}

/* 로그인 영역 */
#login .login .loginInput {padding: 0 25px;}
#login .loginCheck {padding: 0 25px;margin-top: 10px;font-size: 0;}
#login .loginCheck > div {width: 50%;}
#login .loginCheck .leftWrap {text-align: left;width: 35%;display: inline-block;}
#login .loginCheck .leftWrap .check-box>span.text {font-size: 12px;font-weight: 300;color: #666666;padding-left: 25px;line-height: 20px;min-height: 20px;background: url(/design/natureoda/img/ico_check_off.png) no-repeat left center / 20px;}
#login .loginCheck .leftWrap .check-box>input:checked+span, 
#login .loginCheck .leftWrap .check-box>input:checked~span {background: url(/design/natureoda/img/ico_check_on.png) no-repeat left center / 20px;}
#login .loginCheck .rightWrap {text-align: right;width: calc(100% - 35%);display: inline-block;}
#login .loginCheck .rightWrap li {display: inline-block;vertical-align: baseline;}
#login .loginCheck .rightWrap li a {font-size: 12px;color: #666666;font-weight: 300;}
#login .loginCheck .rightWrap li a::after {content: "";display: inline-block;width: 1px;height: 12px;background: #dddddd;margin: 0 10px;}
#login .loginCheck .rightWrap li:last-child a::after {display: none;}

/* 하단 버튼 */
#login .btn_wrap {padding: 0 25px;margin-top: 25px;}

/* hr */
.hr {margin: 25px 25px 0;position: relative;text-align: center;}
.hr::after {content: "";display: block;width: 100%;border-bottom: 1px solid #ccc;position: absolute;top: 10px;box-sizing: border-box;z-index: -1;}
.hr span {display: inline-block;text-align: center;background: #fff;width: 35px;height: 15px;font-size: 12px;color: #cccccc;font-weight: 300;}


/* SNS 버튼*/
#login .btn_kakao {background: #fde432;}
#login .btn_kakao .ico_kakao {display: inline-block;width: 13px;height: 11px;background: url(/design/natureoda/img/ico_kakao.png) no-repeat center / 13px 11px;margin-right: 7px;}
#login .sns_login {padding: 0;margin-top: 35px;}
#login .sns_login ul {display: block;text-align: center;table-layout: unset;margin-left: 0;width: 100%;font-size: 0;}
#login .sns_login ul li {width: calc((100% - 110px)/3);display: inline-block;padding: 0;margin-right: 15px;}
#login .sns_login ul li:last-child {margin-right: 0;}
#login .sns_login ul li a {height: auto;padding: 0;border: 0;line-height: initial;}
#login .sns_login ul li a:before {display: none;}
#login .sns_login ul li a span {display: block;font-size: 13px;font-weight: 300;color: #666666;}
#login .sns_login ul li a span.ico {width: 35px;height: 35px;background: no-repeat center / 35px;text-align: center;margin: 0 auto;border-radius: 50%;margin-bottom: 8px;}
#login .sns_login ul li a span.ico_naver {background-image: url(/design/natureoda/img/ico_naver.png);}
#login .sns_login ul li a span.ico_fb {background-image: url(/design/natureoda/img/ico_fb.png);}
#login .sns_login ul li a span.ico_apple {background-image: url(/design/natureoda/img/ico_apple.png);}


/* 회원가입 구름 */
#login .benefit {position: relative;}
#login .benefit::after {content: "";position: absolute;display: inline-block;background: url(/design/natureoda/img/ico_join_benefit.png) no-repeat center / 42px 19px;width: 42px;height: 19px;top: -8px;}
#login .benefit.hide::after {display:none;}
/* BASIC css end */