/**
 * 이 파일은 iModule 회원모듈의 일부입니다. (https://www.imodules.io)
 *
 * 회원모듈과 관련된 공통요소의 스타일을 정의한다.
 * 
 * @file /modules/member/styles/style.css
 * @author Arzz (arzz@arzz.com)
 * @license MIT License
 * @version 3.1.0
 * @modified 2019. 4. 27.
 */
i[data-module=member][data-role=photo] {display:inline-block; background-position:50% 50%; background-repeat:no-repeat; background-size:cover; border-radius:50%; border:1px solid #ccc; box-sizing:border-box; vertical-align:middle;}
i[data-module=member][data-role=photo][data-idx] {cursor:pointer;}

span[data-module=member][data-role=name] {display:inline-block; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; vertical-align:middle;}
span[data-module=member][data-role=name] {font-weight:bold; cursor:pointer;}
span[data-module=member][data-role=name][data-type=nickcon] {font-size:0 !important; min-width:100px; background-size:contain; background-repeat:no-repeat; background-position:0 50%;}

ul[data-module=member][data-role=social] {list-style:none; font-size:0;}
ul[data-module=member][data-role=social] > li {vertical-align:middle;}
ul[data-module=member][data-role=social].button > li {width:100%; margin-top:5px; display:block;}
ul[data-module=member][data-role=social].icon {display:table; width:100%; height:40px; table-layout:fixed;}
ul[data-module=member][data-role=social].icon > li {display:table-cell; padding:0px 2px 0px 2px;}
ul[data-module=member][data-role=social].icon > li:first-child {padding-left:0px;}
ul[data-module=member][data-role=social].icon > li:last-child {padding-right:0px;}

ul[data-module=member][data-role=social] {margin-top:5px;}
ul[data-module=member][data-role=social] > li > a {display:block; width:100%; height:40px; text-decoration:none; color:#fff;}
ul[data-module=member][data-role=social] > li > a > i {width:40px; height:40px; line-height:40px; font-size:20px; text-align:center; display:inline-block; font-family:moimz; speak:none; font-style:normal; font-weight:400; font-variant:normal; text-transform:none; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; color:#fff; vertical-align:middle;}
ul[data-module=member][data-role=social] > li > a > span {display:inline-block; width:calc(100% - 40px); height:30px; line-height:30px; margin:5px 0px; font-size:14px; padding:0px 20px 0px 10px; text-align:center; box-sizing:border-box; vertical-align:middle; border-left:1px solid rgba(255,255,255,0.2);}

ul[data-module=member][data-role=social].icon > li > a > i {width:100%; font-size:24px;}
ul[data-module=member][data-role=social].icon > li > a > span {display:none;}

ul[data-module=member][data-role=social] > li.google > a {background:#da483f;}
ul[data-module=member][data-role=social] > li.google > a > i {font-size:28px;}
ul[data-module=member][data-role=social] > li.google > a > i:before {content:"\ee00";}

ul[data-module=member][data-role=social] > li.facebook > a {background:#4367b0;}
ul[data-module=member][data-role=social] > li.facebook > a > i:before {content:"\ee02";}

ul[data-module=member][data-role=social] > li.twitter > a {background:#25a0ef;}
ul[data-module=member][data-role=social] > li.twitter > a > i:before {content:"\ee03";}

ul[data-module=member][data-role=social] > li.naver > a {background:#15c642;}
ul[data-module=member][data-role=social] > li.naver > a > i:before {content:"\ee04";}

ul[data-module=member][data-role=social] > li.github > a {background:#555;}
ul[data-module=member][data-role=social] > li.github > a > i {font-size:28px;}
ul[data-module=member][data-role=social] > li.github > a > i:before {content:"\ee05"; color:#fff;}

ul[data-module=member][data-role=social] > li.kakao > a {background:#fddc2f; color:#3b1f1f;}
ul[data-module=member][data-role=social] > li.kakao > a > i {font-size:28px;}
ul[data-module=member][data-role=social] > li.kakao > a > i:before {content:"\ee06"; color:#3b1f1f;}

ul[data-module=member][data-role=link] {list-style:none; text-align:right; display:block; font-size:0;}
ul[data-module=member][data-role=link] > li {display:inline-block; padding:10px; height:40px; position:relative; font-size:13px; box-sizing:border-box; vertical-align:middle;}
ul[data-module=member][data-role=link] > li:after {position:absolute; top:15px; right:0; width:0; height:12px; border-right:1px solid #ccc; content:" ";}
ul[data-module=member][data-role=link] > li:first-child {float:left; padding:0;}
ul[data-module=member][data-role=link] > li:first-child:after {border-right:0;}
ul[data-module=member][data-role=link] > li:last-child {padding-right:0;}
ul[data-module=member][data-role=link] > li:last-child:after {border-right:0;}
ul[data-module=member][data-role=link] > li > button, ul[data-module=member][data-role=link] > li > a {display:inline-block; margin:0px; padding:0px; height:20px; line-height:20px; font-size:13px; cursor:pointer; text-decoration:none; color:#666; border:0; background:transparent;}
ul[data-module=member][data-role=link]:after {clear:both; content:" "; display:block;}


/* 팝업 스타일 */
div[data-module=member][data-role=user_modal] { }
div[data-module=member][data-role=user_modal] div.modal { background-color:rgba(0,0,0,.5);}
div[data-module=member][data-role=user_modal] div.modal div.popup {  width:400px; box-shadow:2px 5px 13px rgb(0 0 0 / 20%); background:transparent; }
div[data-module=member][data-role=user_modal] div.modal div.popup h2 {box-sizing:border-box; height:60px; padding:0 20px; border-top-left-radius:5px; border-top-right-radius:5px; color:#fff; background:#444dac; line-height:60px; font-size:18px; }
div[data-module=member][data-role=user_modal] div.modal div.popup h2:after {display:block; content:'' ; clear:both;}
div[data-module=member][data-role=user_modal] div.modal div.popup button.btn_close {float:right; height:60px; line-height:60px; color:#fff;}

/* 로그인 연장 팝업 스타일 */

div[data-module=member][data-role=user_modal] div.modal.login_extend { }
div[data-module=member][data-role=user_modal] div.modal.login_extend div.popup {width:400px;}
div[data-module=member][data-role=user_modal] div.modal.login_extend div.popup div.popup_inner {padding:30px; background:#fff; border-radius:5px; box-sizing:border-box;}
div[data-module=member][data-role=user_modal] div.modal.login_extend div.popup div.popup_inner div.list {display:table; width: 100%; padding-bottom: 40px;}
div[data-module=member][data-role=user_modal] div.modal.login_extend div.popup div.popup_inner div.list > div.clock {display: table-cell; width:40%; height:100%; vertical-align: middle;}
div[data-module=member][data-role=user_modal] div.modal.login_extend div.popup div.popup_inner div.list > div.clock > i{width: 100%; font-size:60px; text-align:center;}
div[data-module=member][data-role=user_modal] div.modal.login_extend div.popup div.popup_inner div.list > div.box_text {display: table-cell; width: 100%; height:auto;}
div[data-module=member][data-role=user_modal] div.modal.login_extend div.popup div.popup_inner div.list > div.box_text > h5 {font-size:20px; color:#333; line-height:40px; word-break:keep-all;}
div[data-module=member][data-role=user_modal] div.modal.login_extend div.popup div.popup_inner div.list > div.box_text > p {font-size:14px; color:#666; line-height:24px; word-break:keep-all; }
div[data-module=member][data-role=user_modal] div.modal.login_extend div.popup div.popup_inner div.list > div.box_text > p > b {font-size:20px; color:#3e94e9; font-weight:bold; word-break:keep-all;}
div[data-module=member][data-role=user_modal] div.modal.login_extend div.popup div.popup_inner > p {padding:10px 0; font-size:14px; color:#666; line-height:18px; word-break:keep-all;}
div[data-module=member][data-role=user_modal] div.modal.login_extend div.popup div.popup_inner > p > b {color:#333;}
div[data-module=member][data-role=user_modal] div.modal.login_extend div.popup div.popup_inner > div.btn_wrap {padding-top:15px; text-align:center; font-size:0;}
div[data-module=member][data-role=user_modal] div.modal.login_extend div.popup div.popup_inner > div.btn_wrap > li {display:inline-block; width:calc(50% - 3px); box-sizing:border-box;}
div.popup_inner > div.btn_wrap > li ~ li {margin-left:5px;}
div[data-module=member][data-role=user_modal] div.modal.login_extend div.popup div.popup_inner > div.btn_wrap > li > button {box-sizing:border-box; width:100%; height:42px; border:1px solid #ccc; font-size:14px; color:#333; font-weight:bold; word-break:keep-all; cursor:pointer;}
div[data-module=member][data-role=user_modal] div.modal.login_extend div.popup div.popup_inner > div.btn_wrap > li:first-child > button {border:none; background-color:#444DAC; color:#fff;}


/* 로그인 모달 */
ul[data-role="sns_login"] {margin:10px 0;}
ul[data-role="sns_login"] > li {margin-top:10px;}
ul[data-role="sns_login"] > li > button {width:100%; padding:0; text-align:left; line-height:40px; border:1px solid transparent; font-size: 1rem; text-align: center;}
ul[data-role="sns_login"] > li > button.kakao {background-color:#f5d000;}
ul[data-role="sns_login"] > li > button.naver {background-color:#03C75A; color:#fff;}
ul[data-role="sns_login"] > li > button.google {border:1px solid #e0e0e0; background-color:#fff;}
ul[data-role="sns_login"] > li > button.facebook {background-color:#1778f2; color:#fff;}
ul[data-role="sns_login"] > li > button > i {margin-right:16px;}

/* 로그인 모달 - 성균관대 커스텀*/
ul[data-role="sns_login"].skku {display:flex; align-items:center; justify-content:center; width:100%; list-style-type: style none;}
ul[data-role="sns_login"].skku > li {width: calc(100% / 3); border-radius: 50%; list-style:none; cursor:pointer;}
ul[data-role="sns_login"].skku > li > button {display:flex; flex-direction:column; align-items:center; justify-content:center; background:transparent; cursor:pointer;}
ul[data-role="sns_login"].skku > li > button > i {display:inline-block; margin-right:0; position:relative; width:50px; height:50px; border-radius:50%; background:#fff; border:1px solid #dadce0;}
ul[data-role="sns_login"].skku > li > button.kakao > i {background: url(../images/ico_sns_kakao.png) #fff center center no-repeat; font-size: 1.14rem;}
ul[data-role="sns_login"].skku > li > button.kakao > i::before {content:none;}

ul[data-role="sns_login"].skku > li > button.naver > i {background: url(../images/ico_sns_naver.png) #fff center center no-repeat; background-size:40px 40px;}
ul[data-role="sns_login"].skku > li > button.naver > i::before {content:none;}

ul[data-role="sns_login"].skku > li > button[data-type=naver] > i::before {color:#03C75A;}
ul[data-role="sns_login"].skku > li > button > i::before{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 30px;}
ul[data-role="sns_login"].skku > li > button span.sns_txt {color:gray;}

ul[data-role="sns_login"].skku > li.googl_login {padding:10px 0; height:97px; cursor:pointer;}
ul[data-role="sns_login"].skku > li.googl_login:hover {background:#F0F2F7; border-radius:0;}
ul[data-role="sns_login"].skku > li.googl_login a.custom_google_signin {display:block; height:100%;} 
ul[data-role="sns_login"].skku > li.googl_login .custom_google_signin {position: relative; width:100%;} 
ul[data-role="sns_login"].skku > li.googl_login .custom_google_signin .g_id_signin {opacity:0; position:absolute; top:0; left:0; width:100%; height:100%; z-index:2;}
ul[data-role="sns_login"].skku > li.googl_login .custom_google_signin .google-ico {position:absolute; top:0; left:50%; transform:translateX(-50%); width:100%; height:100%; z-index:1; width:50px; height:50px; border-radius:50%;  border:1px solid #dadce0; background:#fff url(../images/ico_sns_google.png) center  center no-repeat;}
ul[data-role="sns_login"].skku > li.googl_login .custom_google_signin .google-txt {position:absolute; top:65px; left:50%; transform:translateX(-50%); color:gray; font-size:14px; text-align:center;}
ul[data-role="sns_login"].skku > li.googl_login div.g_id_signin > div {width:100%; height:100%;}

/* SNS 회원가입 */
div.sns_signup {text-align:center; padding:20px; background:#f7f7f7; margin-bottom:20px;}
div.sns_signup > p.sns_title {margin:20px 0; font-weight:bold;}
div.sns_signup > ul[data-role="sns_login"] > li > button {position:relative; line-height:50px; text-align:center; color:#fff; font-weight:500; padding:0 0 0 50px; border-radius:5px;}
div.sns_signup > ul[data-role="sns_login"] > li > button > span {position:absolute; left:0; width:50px; height:100%; border-right:1px rgba(0,0,0,0.1) solid;}
div.sns_signup > ul[data-role="sns_login"] > li > button.kakao > span {background:url(../images/sns_kakao.png) no-repeat center;}
div.sns_signup > ul[data-role="sns_login"] > li > button.naver > span {background:url(../images/sns_naver-white.png) no-repeat center;}
div.sns_signup > ul[data-role="sns_login"] > li > button.google > span {}
div.sns_signup > ul[data-role="sns_login"] > li > button.facebook > span {background:url(../images/sns_fb.png) no-repeat center;}

#iModuleErrorForm ul[data-role="sns_login"] {margin:20px 0;}

div[data-module=member][data-context=sns_signup] div.signup_field {}
div[data-module=member][data-context=sns_signup] div.signup_field > h2 {text-align:center; font-size:36px; font-weight:bold;}
div[data-module=member][data-context=sns_signup] div.signup_field > p.title {display:block; text-align:right; font-size:12px; color:#f0110a; line-height:22px;}
div[data-module=member][data-context=sns_signup] div.signup_field > div.tb {margin:20px 0; border-top:1px solid #5c5f66;}
div[data-module=member][data-context=sns_signup] div.signup_field > div.tb > table {width:100%; border-collapse:collapse; font-size:14px; line-height:26px; color:#333; min-width:300px;}
div[data-module=member][data-context=sns_signup] div.signup_field > div.tb > table th {padding:12px 10px; background:#fafafa; border:1px solid #e5e5e5; text-align:center; vertical-align:middle; word-break:keep-all;}
div[data-module=member][data-context=sns_signup] div.signup_field > div.tb > table th.required:before {content:'* '; color:#f0110a;}
div[data-module=member][data-context=sns_signup] div.signup_field > div.tb > table td {padding:12px 20px; border:1px solid #e5e5e5; vertical-align:middle; word-break:keep-all;}
div[data-module=member][data-context=sns_signup] div.signup_field > div.tb > table td > div > input {width:100%; height:40px; padding:10px; border:1px solid #d1d1d1; background:#fff; box-sizing:border-box; line-height:18px; border-radius:0px;}
div[data-module=member][data-context=sns_signup] div.signup_field > div.tb > table td > div > input[name=email],
div[data-module=member][data-context=sns_signup] div.signup_field > div.tb > table td > div > input[name=name] {min-width:200px;}
div[data-module=member][data-context=sns_signup] div.signup_field > div.tb > table td > div > div[data-type=radio] {display:inline; margin-right:20px;}
div[data-module=member][data-context=sns_signup] div.signup_field > div.tb > table td > div > div[data-type=radio]:last-child {margin-right:0px;}
div[data-module=member][data-context=sns_signup] div.signup_field > div.tb > table td > div > div.box_zipcode {display:inline-block; vertical-align:middle;}
div[data-module=member][data-context=sns_signup] div.signup_field > div.tb > table td > div > div.box_zipcode > button {display:inline-block; margin-left:5px; border:none; border-radius:2px; box-sizing:border-box; background:#B5B7BE; color:#fff; cursor:pointer;}
div[data-module=member][data-context=sns_signup] div.signup_field > div.tb > table td > div.address > div {width:48%;}
div[data-module=member][data-context=sns_signup] div.signup_field > div.tb > table td > div > p.help {color:#e80000; font-size:12px;}
div[data-module=member][data-context=sns_signup] div.signup_field > div.tb > table td.email > p.help {color:#e80000; font-size:12px;}
div[data-module=member][data-context=sns_signup] div.signup_field > div.tb > table td.password >  p.help {color:#e80000; font-size:12px;}
div[data-module=member][data-context=sns_signup] div.signup_field > div.tb > table td > button {display:inline-block; margin-left:5px; padding:12px 15px; border:none; border-radius:2px; box-sizing:border-box; background:#B5B7BE; color:#fff; cursor:pointer;}
div[data-module=member][data-context=sns_signup] div.signup_field > div.tb > table td > div.help {margin-top:5px; font-size:12px; line-height:16px; vertical-align:top; color:#999;}
div[data-module=member][data-context=sns_signup] div.signup_field > div.tb > table td > div.help > p {display:none; line-height:20px;}
div[data-module=member][data-context=sns_signup] div.signup_field > div.tb > table td > div.help > p > b.mark_1 {display:inline-block; width:15px; height:15px; margin-right:5px; font-size:12px; line-height:15px; border-radius:20px; background:#868686; text-align:center; color:#fff; vertical-align:middle; box-sizing:border-box;}
div[data-module=member][data-context=sns_signup] div.signup_field > div.tb > table td > div.help > p > b.mark_1:after {content:'!';}
div[data-module=member][data-context=sns_signup] div.signup_field > div.tb > table td > div.help > p > b.mark_2 {display:inline-block; width:15px; height:15px; margin-right:5px; font-size:10px; font-weight:bold; line-height:15px; border-radius:2px 2px 0 0; background:#10c9bb; color:#fff; text-align:center; vertical-align:middle;}
div[data-module=member][data-context=sns_signup] div.signup_field > div.tb > table td > div.help > p > b.mark_2:after {content:'√';}
div[data-module=member][data-context=sns_signup] div.signup_field > div.tb > table td > div.help > p > b.mark_3 {background:#e80000;}
div[data-module=member][data-context=sns_signup] div.signup_field > div.tb > table td > div.help > p > span {display:inline-block; width:calc(100% - 30px); font-size:13px; vertical-align:middle;}
div[data-module=member][data-context=sns_signup] div.signup_field > p.tip {margin-bottom:20px; color:#fa5a5a; font-size:13px; letter-spacing:-0.8px;}

/*팝업 스타일 */
div[data-module=member][data-context=sns_signup] div.popup_layer { display:none; width:100%; height:100vh; position:fixed; left:0; top:0; z-index:200000; background-color:rgba(0,0,0,.5); }
div[data-module=member][data-context=sns_signup] div.popup_layer.on { display:block; }
div[data-module=member][data-context=sns_signup] div.popup_layer div.popup { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); box-shadow:2px 5px 13px rgb(0 0 0 / 20%); background:#fff; }
div[data-module=member][data-context=sns_signup] div.popup_layer div.popup_inner h2 {box-sizing:border-box; height:60px; padding:0 20px; border-top-left-radius:5px; border-top-right-radius:5px; color:#222; line-height:60px; font-size:18px; }
div[data-module=member][data-context=sns_signup] div.popup_layer div.popup_inner h2:after {display:block; content:'' ; clear:both;}
div[data-module=member][data-context=sns_signup] div.popup_layer div.popup_inner button.btn_close {float:right; height:60px; line-height:60px; color:#222; border:none; background:transparent;}
div[data-module=member][data-context=sns_signup] div.popup_layer div.popup_inner.checkSign {width:500px;}
div[data-module=member][data-context=sns_signup] div.popup_layer div.popup_inner.checkSign div.box_btn {margin-top:50px;}
div[data-module=member][data-context=sns_signup] div.popup_layer div.popup_inner.checkSign div.box_btn > button {font-size:18px; border:1px solid #222; padding:5px 10px; background:#fafafa;}
div[data-module=member][data-context=sns_signup] div.popup_layer div.popup_inner div.contents {padding:20px;}