@charset 'utf-8';
@import url('tnb.css?ts=202106021601002');

* { color:inherit; font-family:inherit; }

body { background-color:#F2f2f2; }

div#wrap.members { width:600px; margin:0 auto; min-width:600px; padding:50px 0; }
div#wrap.members h1 { text-align:center; margin-bottom:20px; }
div#wrap.members h1 a { display:block; height:60px; background:url('/images/common/h1Eng.png') no-repeat center;}
div#wrap.members h1 a span { display:none; }

/* 회원가입 - 공통 */
div#container.register { font-family:'Nanum Gothic'; }
div#container.register h2 { text-align:center; background-color:#0f70b7; padding:10px 0 20px; margin-bottom:20px; box-shadow:1px 1px 0px #FFF; }
div#container.register h2:before { position:absolute; content:'\f4ff'; font-family:'Font Awesome 5 Free'; font-weight:900; color:#FFF; font-size:60px; left:50px; top:0px; line-height:96px; }
div#container.register h2 span.title { font-size:30px; line-height:50px; display:block; color:#FFF; }
div#container.register h2 span.desc { display:block; font-weight:400; font-size:14px; color:#b8e1ff; }
div#container.register div#location { padding:10px; margin-bottom:20px; }
div#container.register div#location:after { content:''; display:block; clear:both; }
div#container.register div#location ul { width:510px; margin:0 auto; }
div#container.register div#location ul li { position:relative; float:left; width:130px; height:130px; text-align:center; box-sizing:border-box; border:5px solid #DDD; border-radius:130px; background-color:#FFF; box-shadow:1px 1px 0px #FFF; color:#999; margin-right:60px; }
div#container.register div#location ul li:last-child { margin-right:0px; }
div#container.register div#location ul li.selected { color:#0f70b7; border-color:#0f70b7; }
div#container.register div#location ul li span { display:table-cell; width:120px; height:120px; text-align:center; vertical-align:middle; padding:0 10px; }
div#container.register div#location ul li span:before { content:'1'; display:block; font-size:24px; font-weight:bold; }
div#container.register div#location ul li:nth-child(2) span:before { content:'2'; }
div#container.register div#location ul li:last-child span:before { content:'3'; }
div#container.register div#location ul li:after { content:'\f054'; font-family:'Font Awesome 5 Free'; font-weight:900; font-size:50px; display:block; position:absolute; width:60px; right:-65px; top:0px; line-height:130px; }
div#container.register div#location ul li:last-child:after { content:''; }
div#container.register div#content div.section { background-color:#FFF; box-shadow:1px 1px 0px #FFF; border:1px solid #DDD; margin-bottom:20px; padding-bottom:20px; }
div#container.register div#content div.section:after { content:''; display:block; clear:both; }
div#container.register div#content div.header { text-align:center; padding:20px 0; }
div#container.register div#content div.header span.title { font-size:24px; color:#333; font-weight:700; line-height:25px; }
div#container.register div#content div.header span.title strong { color:#0f70b7; }
div#container.register div#content a.button { display:inline-block; padding:0 40px; margin:0 3px; height:50px; line-height:50px; background-color:#FFF; border:1px solid #DDD; }

div#container.register div#content div.section.social div.content { padding:20px; }
div#container.register div#content div.section.social span.title { font-size:20px; }
div#container.register div#content div.content ul.social { margin:0 30px; }
div#container.register div#content div.content ul.social:after { content:''; display:block; clear:both; }
div#container.register div#content div.content ul.social li { float:left; width:50%; padding:10px; box-sizing:border-box; }
div#container.register div#content div.content ul.social li button { display:block; margin:0 auto; width:100%; padding:15px 15px 15px 45px; text-align:left; background:url('/images/members/icoSnsNaver.png') no-repeat 15px center; font-weight:500; }
div#container.register div#content div.content ul.social li button:after { content:'\f054'; font-family:'Font Awesome 5 Free'; font-weight:600; float:right; vertical-align:middle; }
div#container.register div#content div.content ul.social li button.naver { background-color:#2cc911; color:#FFF; }
div#container.register div#content div.content ul.social li button.kakao { background-color:#fff22b; color:#2f1727; background-image:url('/images/members/icoSnsKakao.png'); }


/* 회원가입 - 인증 */
div#container.register div#content div.content { padding:0 20px; }
div#container.register div#content div.content:after { content:''; display:block; clear:both; }
div#container.register div#content div.content ul.auth { margin-bottom:10px; }
div#container.register div#content div.content ul.auth:after { content:''; display:block; clear:both; }
div#container.register div#content div.content ul.auth li { float:left; width:50%; text-align:center; padding:10px 0; }
div#container.register div#content div.content ul.auth li label.auth { display:block; border:1px solid #DDD; cursor:pointer; margin:0 20px; padding:15px; box-sizing:border-box; font-weight:bold; }
div#container.register div#content div.content ul.auth li input[type="radio"] { display:none; }
div#container.register div#content div.content ul.auth li input[type="radio"]:checked+label { border:1px solid #0f70b7; color:#0f70b7; }
div#container.register div#content div.content ul.auth li label.auth:before { font-family:'Font Awesome 5 Free'; font-weight:600; font-size:40px; vertical-align:middle; padding-right:10px; }
div#container.register div#content div.content ul.auth li input[type="radio"]:checked+label:before { color:#0f70b7; }
div#container.register div#content div.content ul.auth li label.auth.mobile:before { content:'\f3cd'; }
div#container.register div#content div.content ul.auth li label.auth.ipin:before { content:'\f2bb'; font-weight:400; }
div#container.register div#content div.control { text-align:center; }
div#container.register div#content div.control button { padding:0 40px; margin:0 3px; height:50px; line-height:50px; background-color:#0f70b7; color:#FFF; }
div#container.register div#content div.control button:before { content:'\f00c'; font-family:'Font Awesome 5 Free'; font-weight:600; }
div#container.register div#content div.desc { padding:20px 20px 0; text-align:center; color:#666; font-size:13px; }

/* 회원가입 - 정보입력 */
div#container.register div#content div.content ul.form { width:450px; margin: 0 auto; }
div#container.register div#content div.content ul.form li { padding:15px; }
div#container.register div#content div.content ul.form li.auth { position:relative; height:30px; margin-bottom:20px; overflow:hidden; }
div#container.register div#content div.content ul.form li.auth span.infor { position:relative; display:block; text-align:center; font-weight:600; line-height:30px; vertical-align:middle; z-index:10; color:#FFF; }
div#container.register div#content div.content ul.form li.auth span.infor:not(:first-child) { display:none; }
@keyframes auth { 0% { width:0px; left:50%; } 100% { width:100%; left:0px; } }
@keyframes authLogo { 0% { top:-60px; } 50% { top:-60px; } 100% { top:0px; } }
div#container.register div#content div.content ul.form li.auth:after { position:absolute; content:''; display:block; height:60px; top:0px; width:100%; left:0px; border:0px; background-color:#DDD; animation:auth 1s 0s forwards; box-sizing:border-box; z-index:1; }
div#container.register div#content div.content ul.form li.auth.naver:after { background-color:#1ec800; }
div#container.register div#content div.content ul.form li.auth.kakao:after { background-color:#57c451; }
div#container.register div#content div.content ul.form li.auth.google:after { background-color:#57c451; }
div#container.register div#content div.content ul.form li.auth.facebook:after { background-color:#57c451; }
div#container.register div#content div.content ul.form li.auth:before { content:''; display:block; position:absolute; width:60px; height:60px; left:0px; top:0px; animation:authLogo 1.2s 0s forwards; background-color:#000; z-index:2; }
div#container.register div#content div.content ul.form li.auth.naver:before { background:url('/images/members/icoNaver.png') no-repeat center; background-size:80%; }
div#container.register div#content div.content ul.form label { display:block; font-size:16px; color:#666; line-height:20px; font-weight:600; }
div#container.register div#content div.content ul.form input { line-height:40px; width:100%; height:46px; font-size:20px; font-weight:600; padding:0 10px; margin:5px 0; box-sizing:border-box; text-align:center; border:1px solid #DDD; background-color:#F2f2f2; color:#999;  transition-duration: 0.5s; font-family:'Nanum Gothic'; }
div#container.register div#content div.content ul.form input:focus { border-color:#0f70b7; outline-color:#0f70b7; background-color:#FFF; color:#333; transition-duration: 0.5s; }
div#container.register div#content div.content ul.form span.desc { display:block; font-size:13px; color:#999; line-height:20px; }
div#container.register div#content div.content ul.form span.desc.confirm { color:#0f70b7; }
div#container.register div#content div.content ul.form span.desc.warning { color:#F00; font-weight:700; }
div#container.register div#content div.content ul.form span.desc.pwdLev1 { color:#F60; }
div#container.register div#content div.content ul.form span.desc.pwdLev2 { color:#39C; }
div#container.register div#content div.content ul.form span.desc.pwdLev3 { color:#390; }
div#container.register div#content div.content ul.agree { margin-top:20px; width:450px; margin:20px auto 0; }
div#container.register div#content div.content ul.agree li { padding:10px; font-size:14px; }
div#container.register div#content div.content ul.agree li:after { content:''; display:block; clear:both; }
div#container.register div#content div.content ul.agree li input { width:16px; height:16px; vertical-align:middle; }
div#container.register div#content div.content ul.agree li button { margin-left:10px; border:1px solid #DDD; border-radius:3px; background-color:#FFF; padding:3px 10px; font-size:12px; color:#666; }
div#container.register div#content div.content ul.agree li button:after { content:'\f2d2'; font-family:'Font Awesome 5 Free'; font-weight:400; vertical-align:middle; }
div#container.register div#content div.control button[type="cancel"] { background-color:#999; }
div#container.register div#content div.control button[type="cancel"]:before { content:'\f00d'; }

div#container.register div.popup { position:absolute; bottom:200px; display:none; padding:20px; filter:alpha(opacity=0); opacity:0; background-color:#FFF; border:1px solid #DDD; }
div#container.register div.popup div.header { font-size:20px; line-height:35px; font-weight:bold; border-bottom:1px solid #DDD; margin-bottom:10px; }
div#container.register div.popup div.content { height:500px; border:1px solid #DDD; padding:20px; overflow-y:scroll; }
div#container.register div.popup div.control { position:absolute; right:20px; top:20px; }
div#container.register div.popup div.control button { font-size:13px; border:1px solid #DDD; background-color:#FFF; padding:5px 10px; border-radius:3px; color:#666; }
div#container.register div.popup div.control button:before { content:'\f00d'; font-family:'Font Awesome 5 Free'; font-weight:900; vertical-align:middle; padding-right:5px; }

div#container.register div.popup div.content { font-size:12px; font-family:'Tahoma; Dotum'; line-height:150%; }
div#container.register div.popup div.content * { font-size:12px; font-family:'Tahoma; Dotum'; line-height:150%; }
div#container.register div.popup div.content span.bold { font-weight:600; display:block; }



/* 회원가입 - 완료 */
div#container.register div#content div.section.done { }
div#container.register div#content div.section.done div.notice { width:498px; height:213px; font-size:18px; line-height:25px; text-align:right; margin:20px auto; padding:110px 30px 0 0; font-family:'Nanum Gothic'; border:1px solid #DDD; box-sizing:border-box; background:url('/images/members/bgDone.png') no-repeat left top;}
div#container.register div#content div.section.done div.notice strong { font-size:22px; color:#0f70b7; }
div#container.register div#content div.section.done div.shortcut { text-align:center; margin:0 auto; }
div#container.register div#content div.section.done div.shortcut a { display:block; width:150px; margin:5px auto; background-color:#0f70b7; color:#FFF; }
div#container.register div#content div.section.done div.shortcut a span { font-size:14px; }
div#container.register div#content div.control a span { vertical-align:middle; font-size:14px; }
div#container.register div#content div.control a:before { font-family:'Font Awesome 5 Free'; font-weight:600; vertical-align:middle; color:#666; }
div#container.register div#content div.control a.login:before { content:'\f2f6'; }
div#container.register div#content div.control a.main:before { content:'\f015'; }



/* 로그인 */
div#contents.login { font-family:'Nanum Gothic'; }
div#contents.login h2 { text-align:center; background-color:#0f70b7; padding:10px 0 20px; margin-bottom:20px; box-shadow:1px 1px 0px #FFF; }
div#contents.login h2:before { position:absolute; content:'\f4ff'; font-family:'Font Awesome 5 Free'; font-weight:900; color:#FFF; font-size:60px; left:50px; top:0px; line-height:96px; }
div#contents.login h2 span.title { font-size:30px; line-height:50px; display:block; color:#FFF; }
div#contents.login h2 span.desc { display:block; font-weight:400; font-size:14px; color:#b8e1ff; }
div#contents.login div#content div.header { text-align:center; padding:20px 0 10px; }
div#contents.login div#content div.header span.title { font-size:24px; color:#333; font-weight:700; line-height:25px; }
div#contents.login div#content div.header span.title strong { color:#0f70b7; }
div#contents.login div#content div.section { background-color:#FFF; box-shadow:1px 1px 0px #FFF; border:1px solid #DDD; margin-bottom:20px; padding-bottom:20px; }
div#contents.login div#content div.section:after { content:''; display:block; clear:both; }
div#contents.login div#content div.content { padding:20px 80px; position:relative; }
div#contents.login div#content div.content ul.form { margin:10px 110px 10px 0; position:relative; }
div#contents.login div#content div.content ul.form li { border:1px solid #DDD; }
div#contents.login div#content div.content ul.form li:first-child { border-bottom:0px; }
div#contents.login div#content div.content ul.form li:after { content:''; clear:both; display:block; }
div#contents.login div#content div.content ul.form li label { width:95px; line-height:55px; display:block; float:left; text-align:center; font-size:16px; font-weight:bold; color:#666; }
div#contents.login div#content div.content ul.form li label:after { display:block; float:right; width:0px; border-right:1px solid #DDD; content:''; height:20px; margin-top:18px; }
div#contents.login div#content div.content ul.form li input { border:0px; float:right; line-height:55px; height:55px; width:230px; padding:0 10px; box-sizing:border-box; }
div#contents.login div#content div.content ul.form li input:focus { outline:0px; float:right; }
div#contents.login div#content div.content div.options { font-size:14px; line-height:18px; height:18px; }
div#contents.login div#content div.content div.options input { vertical-align:middle; height:16px; width:16px; }
div#contents.login div#content div.content div.options label { vertical-align:middle; }
div#contents.login div#content div.content div.shortcut { font-size:14px; color:#666; }
div#contents.login div#content div.content div.shortcut a.regist { font-weight:600; margin-right:15px; }
div#contents.login div#content div.control { position:absolute; right:80px; top:48px; }
div#contents.login div#content div.control button { border-radius:0px; width:111px; height:113px; font-size:18px; font-weight:700; background-color:#0f70b7; color:#FFF; }
div#contents.login div#content div.control button:before { content:'\f2f6'; font-family:'Font Awesome 5 Free'; font-weight:600; display:block; font-size:30px; padding-bottom:5px; }

div#contents.login div#content div.section.social div.content { padding:20px; }
div#contents.login div#content div.section.social span.title { font-size:20px; }
div#contents.login div#content div.content ul.social { margin:0 30px; }
div#contents.login div#content div.content ul.social:after { content:''; display:block; clear:both; }
div#contents.login div#content div.content ul.social li { float:left; width:50%; padding:10px; box-sizing:border-box; }
div#contents.login div#content div.content ul.social li { float:none; width:100%; }
div#contents.login div#content div.content ul.social li button { display:block; margin:0 auto; width:100%; padding:15px 15px 15px 45px; text-align:left; background:url('/images/members/icoSnsNaver.png') no-repeat 15px center; font-weight:500; }
div#contents.login div#content div.content ul.social li a { display:block; margin:0 auto; width:100%; padding:15px 15px 15px 45px; text-align:left; background:url('/images/members/icoSnsNaver.png') no-repeat 15px center; font-weight:500; box-sizing:border-box; }
div#contents.login div#content div.content ul.social li button:after { content:'\f054'; font-family:'Font Awesome 5 Free'; font-weight:600; float:right; vertical-align:middle; }
div#contents.login div#content div.content ul.social li a:after { content:'\f054'; font-family:'Font Awesome 5 Free'; font-weight:600; float:right; vertical-align:middle; }
div#contents.login div#content div.content ul.social li a { background-color:#2cc911; color:#FFF; }
div#contents.login div#content div.content ul.social li button.kakao { background-color:#fff22b; color:#2f1727; background-image:url('/images/members/icoSnsKakao.png'); }


div.popWrap { position:fixed; left:0px; top:0px; width:100%; height:100%; z-index:998; }
div.popWrap div.bg { position:fixed; left:0px; top:0px; width:100%; height:100%; z-index:998; background-color:#000; filter:alpha(opacity=30); opacity:0.3; }
div.popWrap div.dialog { position:absolute; width:350px; left:50%; top:50%; margin-left:-150px; margin-top:-100px; z-index:999; background-color:#FFF; box-shadow:2px 2px 3px #999; }
div.popWrap div.dialog div.header { border-bottom:1px solid #DDD; padding:10px; }
div.popWrap div.dialog div.header:after { content:''; display:block; clear:both; }
div.popWrap div.dialog div.header div.title { font-size:20px; line-height:25px; color:#333; font-weight:700; float:left; }
div.popWrap div.dialog div.header div.title strong { color:#0f70b7; }
div.popWrap div.dialog div.header button.close { float:right; height:25px; width:25px; background:none; }
div.popWrap div.dialog div.header button.close:before { content:'\f00d'; font-family:'Font Awesome 5 Free'; font-weight:600; font-size:25px; color:#666; }
div.popWrap div.dialog div.header button.close:hover:before { color:#000; }
div.popWrap div.dialog div.header button.close span { display:none; }
div.popWrap div.dialog div.notice { padding:10px; }
div.popWrap div.dialog div.notice span.desc { display:block; font-size:14px; line-height:25px; }
div.popWrap div.dialog div.control { text-align:center; padding:15px 0; }
div.popWrap div.dialog div.control button { padding:10px 20px; margin:0 5px; font-size:13px; color:#FFF; background-color:#0f70b7; border:1px solid #005da3; box-sizing:border-box; min-width:92px; }
div.popWrap div.dialog div.control button.new { background-color:#0e47a1; border:1px solid #0f70b7; }
div.popWrap div.dialog div.control button.cancel { background-color:#666; border:1px solid #999; }
div.popWrap div.dialog div.control button span { color:#FFF; }