@charset "utf-8";

html, body {margin: 0; padding: 0; height:100%; font-family: 'Noto Sans KR', sans-serif; line-height:1.2; font-size: 13px;}
body {padding: 20px;}
* {box-sizing: border-box; text-decoration:none;}
hr {border:0;}

.nametag {box-shadow: 0 0 20px rgba(0,0,0,.2); padding:0; background:url('../images/bg.png') center top no-repeat; background-size: 100%; border: 1px solid #cad0d9; border-radius: 16px; overflow: hidden;}
.nametag .logo {display: flex; justify-content: space-between; padding: 20px;}
.nametag .logo a {color:#000;}
.nametag .content {display: flex; padding: 0 20px 20px;}
.nametag .content .thumb {}
.nametag .content .thumb .photo {width:80px; height:80px; background:url('../images/thumb.png') center no-repeat; background-size: 100%; border-radius: 34px;}
.nametag .content .thumb .name {position: relative; width:80px; text-align:center; margin-top:5px; font-size: 15px;}
.nametag .content .thumb .name.white {color:#fff;}
.nametag .content .info {padding-left: 15px; width: calc(100% - 80px);}
.nametag .content .info .item {margin:0; margin-bottom:5px; display:flex;}
.nametag .content .info .item .bi {border-radius: 50%; width:24px; min-width: 24px; height:24px; background-color: rgba(184,188,199,.5); display:flex; justify-content: center;  align-items: center;}
.nametag .content .info .item .bi::before {font-size: 12px; color: #616673;}
.nametag .content .info .item .txt {display: inline-block; padding: 2px 0 0 8px; width: calc(100% - 28px); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; word-break: break-all;}
.nametag .content .info .item .txt p {margin:1px 0; line-height: 18px;}

.nametag.vertical {}
.nametag.vertical .content {display: block;}
.nametag.vertical .content .thumb {display: flex; flex-direction: column; align-items: center; padding-bottom:20px;}
.nametag.vertical .content .thumb .name {width: auto;}
.nametag.vertical .content .info {padding-left: 0; padding-top: 20px; width:100%;}
.nametag.vertical .content .info.line {border-top: 1px dotted #cad0d9;}

.nametag.dark {background:url('../images/bg_dark.png') center top no-repeat; background-size: 100%;}
.nametag.dark .logo a {color:#fff;}
.nametag.dark .content .info .item .bi {background-color: rgba(184,188,199,.5);}
.nametag.dark .content .info .item .bi::before {color: #161b30;}
.nametag.dark .content .info .item .txt p {margin:1px 0; line-height: 18px; color:#fff;}

.nametag.vertical.dark {background:url('../images/bg.png') center top no-repeat; background-size: 100%;}
.nametag.vertical.dark .content {background:url('../images/bg_dark2.png') center top 86px no-repeat; background-size: 100%;}
.nametag.vertical.dark .logo a {color:#000;}


.nametag2 {box-shadow: 0 0 20px rgba(0,0,0,.2); padding:0; background:url('../images/bg.png') center top no-repeat; background-size: 100%; border: 1px solid #cad0d9; border-radius: 16px; overflow: hidden;}
.nametag2 .logo {display: flex; justify-content: space-between; padding: 20px;}
.nametag2 .logo a {color:#000;}
.nametag2 .content {display: block; padding: 0 20px 20px;}
.nametag2 .content .names {margin-bottom:20px;}
.nametag2 .content .names .name {font-size: 18px; margin-bottom:5px;}
.nametag2 .content .names .part {}
.nametag2 .content .names.white {color:#fff;}
.nametag2 .content .info {}
.nametag2 .content .info .item {margin:0; margin-bottom:5px; display:flex;}
.nametag2 .content .info .item .bi {border-radius: 50%; width:24px; min-width: 24px; height:24px; background-color: rgba(184,188,199,.5); display:flex; justify-content: center;  align-items: center;}
.nametag2 .content .info .item .bi::before {font-size: 12px; color: #616673;}
.nametag2 .content .info .item .txt {display: inline-block; padding: 2px 0 0 8px; width: calc(100% - 28px); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; word-break: break-all;}
.nametag2 .content .info .item .txt p {margin:1px 0; line-height: 18px;}

.nametag2 .content .switch {background:url('../images/switch.png') right bottom no-repeat; background-size: 120px; height:140px; position: relative;}
.nametag2 .content .switch .switch_copy {color:#c8a774; font-size: 18px;}
.nametag2 .content .switch .switch_num {color:#fff; font-size: 20px; position:absolute; bottom: 0; font-weight:700; background:url('../images/ico_phone.png') center left no-repeat; background-size: 16px; padding-left: 24px;}

.nametag2.vertical {}
.nametag2.vertical .content {display: block;}
.nametag2.vertical .content .names {text-align:center;}
.nametag2.vertical .content .names .name {font-size: 18px; margin-bottom:5px;}
.nametag2.vertical .content .names .part {}
.nametag2.vertical .content .info {padding-left: 0; padding-top: 20px; width:100%;}
.nametag2.vertical .content .info.line {border-top: 1px dotted #cad0d9;}

.nametag2.dark {background:url('../images/bg_dark.png') center top no-repeat; background-size: 100%;}
.nametag2.dark .logo a {color:#fff;}
.nametag2.dark .content .info .item .bi {background-color: rgba(184,188,199,.5);}
.nametag2.dark .content .info .item .bi::before {color: #161b30;}
.nametag2.dark .content .info .item .txt p {margin:1px 0; line-height: 18px; color:#fff;}

.nametag2.vertical.dark {background:url('../images/bg.png') center top no-repeat; background-size: 100%;}
.nametag2.vertical.dark .content {background:url('../images/bg_dark2.png') center top 50px no-repeat; background-size: 100%;}
.nametag2.vertical.dark .content .names {margin-bottom:40px;}
.nametag2.vertical.dark .logo a {color:#000;}

.nametag2.vertical.gray {background:url('../images/bg.png') center top no-repeat; background-size: 100%;}
.nametag2.vertical.gray .content {background:url('../images/bg_gray.png') center top 50px no-repeat; background-size: 100%;}
.nametag2.vertical.gray .content .names {margin-bottom:40px;}
.nametag2.vertical.gray .logo a {color:#000;}