@import url('../css/page-profile-icon.css'); /* icon 圖式 */
 
.container {
    max-width: 80vw;
    position: relative;
}
/* scroll bar 樣式 */

::-webkit-scrollbar {
    width: 5px;
    height: 5px;
  }
::-webkit-scrollbar-track {   
   background-color: transparent;  
  }
    
::-webkit-scrollbar-thumb {
    background-color: #B6B6B6;   
    border-radius: 3px;    
}
#wrapper {
    padding-top: 5vh;    
}

.business-card .container-fluid {
    padding: 0;
}
/* loading ------------------------------------------->>>*/
.business-card .loading {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9;
    background: #fff;
}
.business-card .loading .typing-indicator {
    transform: scale(1.5);
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 47vh;
}
.business-card .loading .typing-indicator span {
    margin: 0 3px;
}
.business-card .loading.fadeout {   
    animation-duration: 0.5s;
    animation-name: fadeout; 
}
@keyframes fadeout {
    50% {opacity: 1; }    
    100% {opacity: 0;}
}
.mask {
    opacity: 0;
}

/* loading ------------------------------------------- <<<*/

.card-content {
    display: flex;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    border-radius: 8px 0 0 8px;
    overflow: hidden;    
}
.businesscard-photo img {
    height: 90vh;
    min-width: 90vh;
}
.businesscard-photo h3 {
    color: #fff;
    font-size: 36px;
    line-height: 46px;
    font-weight: bold;
    position: sticky;
    top: 90%;
    padding: 30px;
    display: inline-flex;
}
.businesscard-button {    
    display: inline-flex;   
    position: absolute;
    top: 15px;
    right: 15px
}
.businesscard-button a {
    width: 30px;
    height: 30px;    
    border: 1px solid transparent;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 5px;
    background: url(../images/business/icon-download.svg) center center no-repeat #fff;
}
.businesscard-button a:hover {
    background: url(../images/business/icon-download.svg) center center no-repeat #FCF7FF;
    border-color: #8500EA;
    
}
.businesscard-button a.businesscard-qrcode {
    background: url(../images/business/icon-qrcode.svg) center center no-repeat #fff;
}
.businesscard-button a.businesscard-qrcode:hover {
    background: url(../images/business/icon-qrcode.svg) center center no-repeat #FCF7FF;
    border-color: #8500EA;
}
.businesscard-button a.businesscard-share {
    background: url(../images/business/icon-share.svg) center center no-repeat #fff;
}
.businesscard-button a.businesscard-share:hover {
    background: url(../images/business/icon-share.svg) center center no-repeat #FCF7FF;
    border-color: #8500EA;
}
.businesscard-button a.businesscard-edit {
    background: url(../images/business/icon-edit.svg) center center no-repeat #fff;
}
.businesscard-button a.businesscard-edit:hover {
    background: url(../images/business/icon-edit.svg) center center no-repeat #FCF7FF;
    border-color: #8500EA;
}
.businesscard-button a.back-huntbyte, .businesscard-button a.back-huntbyte:hover  {
    background: none;
    margin-top: 5px;
    color: #333;
    border-color: transparent;
}
.businesscard-button a.back-huntbyte:hover {
    color: #8500EA;
}
.businesscard-button a.back-huntbyte i {
    margin-top: 5px;
}

.businesscard-detail  {
    width: 60vw;
    padding: 45px 50px;
    height: 90vh;
    overflow-y: scroll;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}
.businesscard-detail .title-box {
    width: 100%;
    display: inline-flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: start;
    /* justify-content: space-between; */
    margin-top: 30px;
}
.user-title {
    font-size: 26px;
    margin-bottom: 10px;
}

.businesscard-detail h4 {
    font-size: 20px;
    font-weight: 500;
    color: #8500EA;
}
.businesscard-text  {
    margin-top: 30px;
}
.businesscard-text p {
    font-size: 15px;
    line-height: 25px;
    margin-bottom: 0;
}
.businesscard-tags  {
    margin-top: 45px;
}
.businesscard-tags ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    /* margin-top: 30px; */
    padding: 0;
    margin-bottom:0;
}
.businesscard-tags ul li {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 13px;
    color: #8500ea;
    background: #FCF7FF;
    margin: 5px;
 }
.businesscard-tags ul li::before {
   content:"# ";
}
.businesscard-social {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
}
.businesscard-social > div {
    width: 100%;
    justify-content: start;
}
.businesscard-social-link ul {
    list-style: none;
    width: 100%;
    padding: 0;  
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 0;
}
.businesscard-social-link ul li {
    display: flex;
    margin: 10px;
    position: relative;
}
.businesscard-social-link ul li a {       
    display: flex;
    align-items: center;
    cursor: pointer;
}
.businesscard-social-link ul.square li a {       
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 5px;
}
.businesscard-social-link ul li a span {   
    /* display: none; */
    font-size: 15px;
    position: absolute;
    width: max-content;
    background: #333;
    padding: 2px 12px;
    color: #fff;
    top: 0;
    left: 0;
    border-radius: 4px;
    z-index: -2;
    opacity: 0;
    transition: ease-in-out all 0.3s;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* overflow: hidden; */
    max-width: 300px;
}
.businesscard-social-link ul li a span::after {
    content: "";
    position: absolute;
    right:calc( 50% - 3px );
    bottom: -5px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #333;
}
.businesscard-social-link ul li a:hover span {  
    top: -40px;
    z-index: 1;
    opacity: 1;
}
.businesscard-social-link ul li a::before {
    content:" ";
    width: 70px;
    height: 70px;
    display: block;
    background: url(../images/business/icon-links-b.svg) center center no-repeat;    
    background-size: contain !important;   
    opacity: 0.7;
} 
.businesscard-social-link ul.square li a::before {
    width: 38px;
    height: 38px;
}
.businesscard-social-link ul li a:hover::before, .businesscard-social-link ul li a.active::before  {
    opacity: 1;
}
.businesscard-social-link ul li:first-child a:before {
    margin-left: 0;
}

.businesscard-social-link ul li a::after {
    content: "\f112";
    font-family: 'Line-Awesome' !important;      
    position: absolute;
    right: 10px;
    display: none;
} 
.businesscard-social-contact  {   
    display: none;
}
.businesscard-social-contact p {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 10px;
}
.businesscard-social-contact p  span, .businesscard-social-contact p a {
    color: #666;
    line-height: 18px;
    word-break: break-all;
}
.businesscard-social-experience {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;   
    margin-top: 45px;
}
.businesscard-social-experience a {
    width: 16vh;
    height: 16vh;
    min-width: 90px;
    min-height: 90px;
    max-width: 108px;
    max-height: 108px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    border-radius: 18px;
    margin: 7px;
}
.businesscard-social-experience a:hover {
    border: 1px solid #8500EA;
}
.businesscard-social-experience a:hover, .dialog-content button:hover {
    background:#FCF7FF;   
}
.businesscard-social-experience a:hover span, .businesscard-social-link ul li a:hover, .dialog-content button:hover {
    color:#a936ff;
}
.businesscard-social-experience a::before {
    content:"";
    width: 7vh;
    height: 7vh;
    max-width: 50px;
    max-height: 50px;
    min-width: 45px;
    min-height: 45px;
    background: url(../images/business/icon-cv.svg) center center no-repeat;
    background-size: contain;
    display: block;
}
.businesscard-social-experience a span  {    
    font-size: 13px;    
    line-height: 13px;
    text-align: center;
    font-weight: 500;   
    color: #5c5c5c;
    margin-top: 5px;
}
.businesscard-social-experience a span i {
    /* margin-left: 3px; */
    font-size: 12px;
}
.businesscard-social-article {
    margin-top: 45px;
}
.businesscard-social-article ul  {
   list-style: none;
   display: flex;
   flex-wrap: wrap;
   padding: 0;
}
.businesscard-social-article ul li  {
   margin: 0 10px;
   flex-grow: 1;
 }
 .businesscard-social-article ul li a {
    width: 100%;
    text-align: center;
  }
  .businesscard-social-article ul li a.light {
    border: 1px solid #8500EA;
    color: #000;
    background: transparent;
  }

.businesscard-social-copyright {
    margin-top: 45px;
    text-align: center;
}
.businesscard-social-copyright a {
    font-size: 12px;
    font-weight: bold;
    color: #A936FF;
}
.businesscard-social-copyright p {
    font-size: 12px;
    line-height: 12px;
    font-weight: normal;
    color: #c2c2c2;
    margin-bottom: 0;
}
.card-download, .card-download-info {
    width: 100%;
}
.card-download-info {
    display: inline-flex;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    background: #fff;
}
.card-download-info .businesscard-photo {
    width: 50%;    
    position: relative;
}
.card-download-info .businesscard-photo p {
    font-size: 22px;
    line-height: 32px;
    color: #fff;
    font-weight: 500;
    position: absolute;
    bottom: 15px;
    left: 15px;
}
.businesscard-qrcode-pic {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px;
}
.businesscard-qrcode-pic p {
    color: #A936FF;
    font-size: 16px;
    margin-bottom: 15px;
}
.businesscard-qrcode-pic .qrcodeimg, .card-qrcode .qrcodeimg, .card-qrcode .qrcodeimg-tool {
    width: 180px;
    height: 180px;   
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); */
    border: 1px solid rgba(0, 0, 0, 0.15);
}
.card-qrcode .title-box {
    margin-bottom: 15px;
}
.card-qrcode .user-title {
    font-size: 18px;
    line-height: 28px;
    text-align: center;
    margin-bottom:0;
}
.card-qrcode .title-box h4 {
    font-size: 12px;
    color: #8500EA;
    text-align: center;
}
.qrcode, .qrcode-tool {
    width: 130px;
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.qrcode canvas, .qrcode-tool canvas {
    width: 100%;
    height: 100%;
}

#capture {
    /* width: 100%; */
}
.no-photo, .has-photo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.no-photo {
    padding: 30px;
    width: 300px;
}
.has-photo {
    width: 300px;
}
.has-photo .codebox {   
    width: 100%;
    padding: 35px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;    
}
.all-html {
    width: 380px;
}
.card-qrcode .all-html .codebox  {
   padding: 30px;
   display: flex;
    flex-direction: column;
    align-items: center;
}
.card-qrcode .all-html .codebox .html-box {
    width: 100%;
}
.all-html .codebox .user-title {
    text-align: left;
    font-size: 22px;
    font-weight: 700;
}
.all-html .title-box h4 {
    font-size: 16px;
    text-align: left;
    margin-top: 5px;
}
.all-html .businesscard-text p, .all-html .businesscard-social-link ul li a span  {
    font-size: 12px;
    line-height: 14px;    
}
.all-html .businesscard-tags ul li {
    padding: 0px 12px;
    border-radius: 12px;
    font-size: 12px;    
    margin: 3px;
}
.all-html .businesscard-social > div {
    min-width: 100%;
}
.all-html .businesscard-social-link ul li {
    margin: 0;
    width: 100%;
}
.all-html .businesscard-social-link ul li a {
    font-size: 12px;        
    line-height: 16px;
    border: 1px solid #5c5c5c;
    border-radius: 12px;
    padding: 8px;
    margin: 4px 0;
    position: relative;
    width: 100%;        
}
.all-html .businesscard-social-link ul li a span::after,.all-html .businesscard-social-link ul li.social-mail,  
.all-html .businesscard-social-link ul li.social-phone {
    display: none;
}  
.all-html .businesscard-social-contact{
    display: block;
    margin-top: 15px;
}
.all-html .businesscard-social-experience a {
    width: 80px;
    height: 80px;
}
.all-html .businesscard-social-contact p,.businesscard-social-experience a span {
    font-size: 12px;
    line-height: 16px;
}

.all-html .businesscard-social-link ul li a span {   
    display: block;
    position: initial;
    font-size: 13px;
    color: #5c5c5c;
    background: transparent;
    opacity: 1;
    z-index: 1;
    padding: 0 15px 0 0;
    white-space: normal;
    overflow: unset;
    word-break: break-all;
    max-width: 60vw;
} 
.all-html .businesscard-social-link ul li a span > b {
    display: block;
    font-weight: normal;
    font-size: 12px;
}

.all-html .businesscard-social-link ul li a::before {    
    width: 20px;
    height: 20px;
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTkuMzE5MTMgMTYuODgwNkw0Ljg1NzU4IDIxLjM0MjJDMy4wMjc5IDIzLjE3MTggMiAyNS42NTM0IDIgMjguMjQxQzIgMzAuODI4NSAzLjAyNzkgMzMuMzEwMSA0Ljg1NzU4IDM1LjEzOThDNi42ODcyNiAzNi45Njk1IDkuMTY4ODQgMzcuOTk3NCAxMS43NTY0IDM3Ljk5NzRDMTQuMzQzOSAzNy45OTc0IDE2LjgyNTUgMzYuOTY5NSAxOC42NTUyIDM1LjEzOThMMjQuNTk5NiAyOS4xOTIxQzI1LjcwMjkgMjguMDg4NyAyNi41MjU1IDI2LjczNjYgMjYuOTk4MSAyNS4yNDk0QzI3LjQ3MDggMjMuNzYyMyAyNy41Nzk4IDIyLjE4MzQgMjcuMzE2MSAyMC42NDU0QzI3LjA1MjMgMTkuMTA3NCAyNi40MjM0IDE3LjY1NTEgMjUuNDgyMiAxNi40MTA0QzI0LjU0MTEgMTUuMTY1NyAyMy4zMTUgMTQuMTY1IDIxLjkwNzEgMTMuNDkyMkwyMC4wMDE1IDE1LjM5NzhDMTkuODA4IDE1LjU5MTUgMTkuNjM5NyAxNS44MDkgMTkuNTAwNyAxNi4wNDQ5QzIwLjU4ODUgMTYuMzU3NiAyMS41NzU5IDE2Ljk0ODggMjIuMzY1MiAxNy43NjAxQzIzLjE1NDUgMTguNTcxNCAyMy43MTg1IDE5LjU3NDYgMjQuMDAxMyAyMC42NzA2QzI0LjI4NCAyMS43NjY2IDI0LjI3NTkgMjIuOTE3NCAyMy45Nzc2IDI0LjAwOTNDMjMuNjc5MyAyNS4xMDEyIDIzLjEwMTMgMjYuMDk2MyAyMi4zMDA1IDI2Ljg5NjNMMTYuMzU5NCAzMi44NDA3QzE1LjEzOSAzNC4wNjExIDEzLjQ4MzkgMzQuNzQ2NyAxMS43NTggMzQuNzQ2N0MxMC4wMzIyIDM0Ljc0NjcgOC4zNzcgMzQuMDYxMSA3LjE1NjY0IDMyLjg0MDdDNS45MzYyOCAzMS42MjA0IDUuMjUwNjkgMjkuOTY1MiA1LjI1MDY5IDI4LjIzOTRDNS4yNTA2OSAyNi41MTM1IDUuOTM2MjggMjQuODU4MyA3LjE1NjY0IDIzLjYzOEw5LjczNTM2IDIxLjA2MjVDOS4zNzA1MSAxOS42OTkzIDkuMjI5OTMgMTguMjg5IDkuMzE5MTMgMTYuODgwNloiIGZpbGw9ImJsYWNrIi8+CjxwYXRoIGQ9Ik0xNS4zOTc5IDEwLjgwMkMxNC4yOTQ1IDExLjkwNTUgMTMuNDcyIDEzLjI1NzUgMTIuOTk5MyAxNC43NDQ3QzEyLjUyNjcgMTYuMjMxOSAxMi40MTc2IDE3LjgxMDcgMTIuNjgxNCAxOS4zNDg3QzEyLjk0NTIgMjAuODg2NyAxMy41NzQgMjIuMzM5IDE0LjUxNTIgMjMuNTgzN0MxNS40NTY0IDI0LjgyODQgMTYuNjgyNCAyNS44MjkxIDE4LjA5MDQgMjYuNTAxOUwyMC42MTA2IDIzLjk3ODVDMTkuNTA4IDIzLjY4MjggMTguNTAyNyAyMy4xMDIgMTcuNjk1NyAyMi4yOTQ3QzE2Ljg4ODcgMjEuNDg3MyAxNi4zMDg0IDIwLjQ4MTggMTYuMDEzMiAxOS4zNzkxQzE1LjcxNzkgMTguMjc2NSAxNS43MTggMTcuMTE1NSAxNi4wMTM2IDE2LjAxMjlDMTYuMzA5MSAxNC45MTAzIDE2Ljg4OTcgMTMuOTA0OSAxNy42OTY5IDEzLjA5NzhMMjMuNjM4MSA3LjE1MzM5QzI0Ljg1ODQgNS45MzMwMyAyNi41MTM2IDUuMjQ3NDQgMjguMjM5NCA1LjI0NzQ0QzI5Ljk2NTMgNS4yNDc0NCAzMS42MjA1IDUuOTMzMDMgMzIuODQwOCA3LjE1MzM5QzM0LjA2MTIgOC4zNzM3NSAzNC43NDY4IDEwLjAyODkgMzQuNzQ2OCAxMS43NTQ4QzM0Ljc0NjggMTMuNDgwNiAzNC4wNjEyIDE1LjEzNTggMzIuODQwOCAxNi4zNTYxTDMwLjI2MjEgMTguOTMxNkMzMC42MjYzIDIwLjI5NzQgMzAuNzY2MSAyMS43MTE5IDMwLjY3ODMgMjMuMTE2N0wzNS4xMzk5IDE4LjY1NTJDMzYuOTY5NiAxNi44MjU1IDM3Ljk5NzUgMTQuMzQzOSAzNy45OTc1IDExLjc1NjRDMzcuOTk3NSA5LjE2ODg0IDM2Ljk2OTYgNi42ODcyNiAzNS4xMzk5IDQuODU3NThDMzMuMzEwMiAzLjAyNzkgMzAuODI4NiAyIDI4LjI0MTEgMkMyNS42NTM1IDIgMjMuMTcxOSAzLjAyNzkgMjEuMzQyMyA0Ljg1NzU4TDE1LjM5NzkgMTAuODAyWiIgZmlsbD0iYmxhY2siLz4KPC9zdmc+Cg==) center center no-repeat;
    margin-right: 10px;
    min-width: 20px;
}

.all-html .businesscard-social-link ul li a::after {
    content: "\f112";
    font-family: 'Line-Awesome' !important;
    position: absolute;
    right: 10px;
    display: block;
}
.all-html .businesscard-social-experience a {
    box-shadow: none;
    border: 1px solid rgba(0, 0, 0, 0.15);
}
.all-html .businesscard-social-experience a::before {
    content:"";
    width: 7vh;
    height: 7vh;
    max-width: 50px;
    max-height: 50px;
    min-width: 45px;
    min-height: 45px;
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzQiIGhlaWdodD0iNDQiIHZpZXdCb3g9IjAgMCAzNCA0NCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIwLjQ5MTkgMC42OTkyMTlINi4yMDA3OEM0Ljc2ODYxIDAuNjk5MjE5IDMuMzk1MSAxLjI2ODE1IDIuMzgyNCAyLjI4MDg0QzEuMzY5NzEgMy4yOTM1NCAwLjgwMDc4MSA0LjY2NzA1IDAuODAwNzgxIDYuMDk5MjJWMzguNDk5MkMwLjgwMDc4MSAzOS45MzE0IDEuMzY5NzEgNDEuMzA0OSAyLjM4MjQgNDIuMzE3NkMzLjM5NTEgNDMuMzMwMyA0Ljc2ODYxIDQzLjg5OTIgNi4yMDA3OCA0My44OTkySDI3LjgwMDhDMjkuMjMzIDQzLjg5OTIgMzAuNjA2NSA0My4zMzAzIDMxLjYxOTIgNDIuMzE3NkMzMi42MzE5IDQxLjMwNDkgMzMuMjAwOCAzOS45MzE0IDMzLjIwMDggMzguNDk5MlYxMy40MDgxQzMzLjIwMDYgMTIuNjkyMSAzMi45MTYxIDEyLjAwNTQgMzIuNDA5NyAxMS40OTkyTDIyLjQwMDggMS40OTAzMkMyMS44OTQ2IDAuOTgzOTM1IDIxLjIwNzkgMC42OTkzNzIgMjAuNDkxOSAwLjY5OTIxOVpNMjEuMDUwOCAxMC4xNDkyVjQuNzQ5MjJMMjkuMTUwOCAxMi44NDkySDIzLjc1MDhDMjMuMDM0NyAxMi44NDkyIDIyLjM0NzkgMTIuNTY0OCAyMS44NDE2IDEyLjA1ODRDMjEuMzM1MiAxMS41NTIxIDIxLjA1MDggMTAuODY1MyAyMS4wNTA4IDEwLjE0OTJaTTEyLjk1MDggMTUuNTQ5MlYxNy4yNjFMMTQuNDMzMSAxNi40MDUxQzE0LjU4NjcgMTYuMzE1MSAxNC43NTY2IDE2LjI1NjMgMTQuOTMzIDE2LjIzMjJDMTUuMTA5MyAxNi4yMDgxIDE1LjI4ODggMTYuMjE5MSAxNS40NjA5IDE2LjI2NDZDMTUuNjMzIDE2LjMxMDEgMTUuNzk0NCAxNi4zODkyIDE1LjkzNTkgMTYuNDk3M0MxNi4wNzczIDE2LjYwNTUgMTYuMTk1OSAxNi43NDA1IDE2LjI4NSAxNi44OTQ3QzE2LjM3NCAxNy4wNDg5IDE2LjQzMTYgMTcuMjE5MiAxNi40NTQ2IDE3LjM5NTdDMTYuNDc3NSAxNy41NzIzIDE2LjQ2NTMgMTcuNzUxNiAxNi40MTg3IDE3LjkyMzVDMTYuMzcyIDE4LjA5NTMgMTYuMjkxOSAxOC4yNTYyIDE2LjE4MjggMTguMzk2OUMxNi4wNzM3IDE4LjUzNzYgMTUuOTM3OSAxOC42NTUzIDE1Ljc4MzEgMTguNzQzM0wxNC4zMDA4IDE5LjU5OTJMMTUuNzgzMSAyMC40NTUxQzE1LjkzNzkgMjAuNTQzMSAxNi4wNzM3IDIwLjY2MDkgMTYuMTgyOCAyMC44MDE2QzE2LjI5MTkgMjAuOTQyMyAxNi4zNzIgMjEuMTAzMiAxNi40MTg3IDIxLjI3NUMxNi40NjUzIDIxLjQ0NjggMTYuNDc3NSAyMS42MjYyIDE2LjQ1NDYgMjEuODAyN0MxNi40MzE2IDIxLjk3OTMgMTYuMzc0IDIyLjE0OTUgMTYuMjg1IDIyLjMwMzdDMTYuMTk1OSAyMi40NTc5IDE2LjA3NzMgMjIuNTkyOSAxNS45MzU5IDIyLjcwMTFDMTUuNzk0NCAyMi44MDkyIDE1LjYzMyAyMi44ODgzIDE1LjQ2MDkgMjIuOTMzOUMxNS4yODg4IDIyLjk3OTQgMTUuMTA5MyAyMi45OTA0IDE0LjkzMyAyMi45NjYzQzE0Ljc1NjYgMjIuOTQyMSAxNC41ODY3IDIyLjg4MzQgMTQuNDMzMSAyMi43OTMzTDEyLjk1MDggMjEuOTM3NFYyMy42NDkyQzEyLjk1MDggMjQuMDA3MyAxMi44MDg1IDI0LjM1MDYgMTIuNTU1NCAyNC42MDM4QzEyLjMwMjIgMjQuODU3IDExLjk1ODggMjQuOTk5MiAxMS42MDA4IDI0Ljk5OTJDMTEuMjQyNyAyNC45OTkyIDEwLjg5OTQgMjQuODU3IDEwLjY0NjIgMjQuNjAzOEMxMC4zOTMgMjQuMzUwNiAxMC4yNTA4IDI0LjAwNzMgMTAuMjUwOCAyMy42NDkyVjIxLjkzNzRMOC43Njg0OCAyMi43OTMzQzguNjE0ODkgMjIuODgzNCA4LjQ0NTAxIDIyLjk0MjEgOC4yNjg2MSAyMi45NjYzQzguMDkyMjEgMjIuOTkwNCA3LjkxMjc5IDIyLjk3OTQgNy43NDA2NiAyMi45MzM5QzcuNTY4NTQgMjIuODg4MyA3LjQwNzEyIDIyLjgwOTIgNy4yNjU2OSAyMi43MDExQzcuMTI0MjYgMjIuNTkyOSA3LjAwNTYyIDIyLjQ1NzkgNi45MTY2IDIyLjMwMzdDNi44Mjc1OCAyMi4xNDk1IDYuNzY5OTQgMjEuOTc5MyA2Ljc0Njk5IDIxLjgwMjdDNi43MjQwNCAyMS42MjYyIDYuNzM2MjQgMjEuNDQ2OCA2Ljc4Mjg5IDIxLjI3NUM2LjgyOTU0IDIxLjEwMzIgNi45MDk3MSAyMC45NDIzIDcuMDE4NzkgMjAuODAxNkM3LjEyNzg3IDIwLjY2MDkgNy4yNjM3MSAyMC41NDMxIDcuNDE4NDggMjAuNDU1MUw4LjkwMDc4IDE5LjU5OTJMNy40MTg0OCAxOC43NDMzQzcuMTEwOTQgMTguNTYzIDYuODg3MiAxOC4yNjg0IDYuNzk2MDggMTcuOTIzOEM2LjcwNDk2IDE3LjU3OTEgNi43NTM4NiAxNy4yMTI0IDYuOTMyMTEgMTYuOTAzN0M3LjExMDM2IDE2LjU5NSA3LjQwMzQ5IDE2LjM2OTMgNy43NDc1MiAxNi4yNzU5QzguMDkxNTYgMTYuMTgyNSA4LjQ1ODU4IDE2LjIyODkgOC43Njg0OCAxNi40MDUxTDEwLjI1MDggMTcuMjYxVjE1LjU0OTJDMTAuMjUwOCAxNS4xOTEyIDEwLjM5MyAxNC44NDc4IDEwLjY0NjIgMTQuNTk0NkMxMC44OTk0IDE0LjM0MTUgMTEuMjQyNyAxNC4xOTkyIDExLjYwMDggMTQuMTk5MkMxMS45NTg4IDE0LjE5OTIgMTIuMzAyMiAxNC4zNDE1IDEyLjU1NTQgMTQuNTk0NkMxMi44MDg1IDE0Ljg0NzggMTIuOTUwOCAxNS4xOTEyIDEyLjk1MDggMTUuNTQ5MlpNNy41NTA3OCAyNy42OTkySDIxLjA1MDhDMjEuNDA4OCAyNy42OTkyIDIxLjc1MjIgMjcuODQxNCAyMi4wMDU0IDI4LjA5NDZDMjIuMjU4NiAyOC4zNDc4IDIyLjQwMDggMjguNjkxMiAyMi40MDA4IDI5LjA0OTJDMjIuNDAwOCAyOS40MDczIDIyLjI1ODYgMjkuNzUwNiAyMi4wMDU0IDMwLjAwMzhDMjEuNzUyMiAzMC4yNTcgMjEuNDA4OCAzMC4zOTkyIDIxLjA1MDggMzAuMzk5Mkg3LjU1MDc4QzcuMTkyNzQgMzAuMzk5MiA2Ljg0OTM2IDMwLjI1NyA2LjU5NjE5IDMwLjAwMzhDNi4zNDMwMSAyOS43NTA2IDYuMjAwNzggMjkuNDA3MyA2LjIwMDc4IDI5LjA0OTJDNi4yMDA3OCAyOC42OTEyIDYuMzQzMDEgMjguMzQ3OCA2LjU5NjE5IDI4LjA5NDZDNi44NDkzNiAyNy44NDE0IDcuMTkyNzQgMjcuNjk5MiA3LjU1MDc4IDI3LjY5OTJaTTcuNTUwNzggMzMuMDk5MkgyMS4wNTA4QzIxLjQwODggMzMuMDk5MiAyMS43NTIyIDMzLjI0MTUgMjIuMDA1NCAzMy40OTQ2QzIyLjI1ODYgMzMuNzQ3OCAyMi40MDA4IDM0LjA5MTIgMjIuNDAwOCAzNC40NDkyQzIyLjQwMDggMzQuODA3MyAyMi4yNTg2IDM1LjE1MDYgMjIuMDA1NCAzNS40MDM4QzIxLjc1MjIgMzUuNjU3IDIxLjQwODggMzUuNzk5MiAyMS4wNTA4IDM1Ljc5OTJINy41NTA3OEM3LjE5Mjc0IDM1Ljc5OTIgNi44NDkzNiAzNS42NTcgNi41OTYxOSAzNS40MDM4QzYuMzQzMDEgMzUuMTUwNiA2LjIwMDc4IDM0LjgwNzMgNi4yMDA3OCAzNC40NDkyQzYuMjAwNzggMzQuMDkxMiA2LjM0MzAxIDMzLjc0NzggNi41OTYxOSAzMy40OTQ2QzYuODQ5MzYgMzMuMjQxNSA3LjE5Mjc0IDMzLjA5OTIgNy41NTA3OCAzMy4wOTkyWiIgZmlsbD0iI0E5MzZGRiIvPgo8L3N2Zz4K) center center no-repeat;
    background-size: contain;
    display: block;
}

.card-qrcode .all-html .codebox .qrcodeimg, .all-html .businesscard-social-copyright, .card-qrcode .all-html .codebox .qrcodeimg-tool {
    margin-top: 30px;
}
.notice-pic, .notice-pic i {
    color: #dc3139;
    text-align: center;
    font-size: 12px;
    line-height: 16px;    
    margin-top: 15px;
}
.notice-pic i {
    font-size: 13px;
    top: 1px;
    margin: 0 3px 0 0;
}

.select-photo {      
    display: flex;
    flex-wrap: wrap;    
    width: 100%;
    justify-content: space-evenly;
    margin-bottom: 30px;
}
.select-photo .radio {      
    margin: 0 10px;
}
.checkbox.select-dl label {
    margin-top: 5px;
    margin-bottom: 0;
}
.card-share-link {
    margin-top: 15px;
}
.dialog.dialog-with-tabs {
    border-radius: 16px;
    overflow: hidden;
    max-width: 550px
}
.dialog.dialog-with-tabs#qrcode-dialog, .dialog.dialog-with-tabs#tool-dialog {    
    max-width: 450px;
    min-width: 350px;
    
}
.dialog.dialog-with-tabs .mfp-close {
    background: #fff;
    border: none;
    color: #06060B;
    width: 60px;
    height: 60px;
}
.dialog.dialog-with-tabs .popup-tabs-nav {
   border: none;
   background: transparent;
}
.dialog .popup-tab-content {
    padding: 0 30px 35px;
}

.dialog ul.dialog-tit li {
    width: 100%;
    text-align: center;
    border: none;   
    line-height: 60px;
    height: 60px; 
}
.dialog ul.dialog-tit li a {
    width: 100%;
    color: #06060B;
    font-size: 18px;
}

.dialog-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.dialog-content.card-share {
    display: block;
}
.dialog-content button, .dialog-content button:hover {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    background: #8500EA;
    color: #fff;
    /* color: #06060B;   
    border: 1px solid #000;    
    border-radius: 13px;
    padding: 13px;
    margin-top: 30px; */
}
.dialog-content button.light, .dialog-content button.light:hover {
    color: #06060B;   
    border: 1px solid #8500EA;   
    background: transparent; 
}
.dialog-content button i {
    font-style: normal;
}

.dialog-content button::before {
    content:"";
    width: 25px;
    height: 25px;
    background: url(../images/business/icon-download-doc.svg) center center no-repeat;
    background-size: contain;
    display: block;
    margin-right: 15px;
    filter: invert(1);
}
.dialog-content button.light::before {
    filter: none;
}

.card-share, .mail-share {
    position: relative;
}
.card-share-link, .mail-share-link {    
    width: 100%;
}
.card-share-link p, .mail-share-link p {    
   text-align: center;
}
.card-share-link span, .mail-share-link span {    
    top: 13px;
    color: #06060B;
    word-break: break-all;
}
.dialog-content .share-btn {
    display: flex;
    /* flex-wrap: wrap; */
    margin: 20px -10px 0;
}
.dialog-content .share-btn button {
    justify-content: center;
    padding-right: 5px;
    margin: 5px;
}

.dialog-content button.businesscard-linkcopy::before, .dialog-content button.mail-linkcopy::before {
    background: url(../images/business/icon-copy.svg) center center no-repeat;
}

/*名片新版*/
.user-cardbox {
    width:526px;
    height: 331px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    /* margin-bottom: 30px; */
}
.user-cardbox #captureCard {
    width: 1052px;
    height: 662px;
    transform-origin: top left;
    transform: scale(0.5);
}
.user-cardbox.straight {
    width:331px;
    height: 526px ;   
}
.user-cardbox.straight #captureCard {
    width:662px;
    height: 1052px ;   
}
.card-style {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 45px;
    position: relative;
}
.card-style .codebox {
    width: 100%;
    display: flex;  
    flex-direction: row; 
    align-items: start;
    justify-content: start;
    padding: 0;
}
.card-style .user-logo {
    width: 120px;
    height: 120px;
    margin-right: 40px;
}
.social-text {
    width: 100%;
    display: flex;
    align-items: end;
    justify-content: space-between;
}
.card-style .title-box {
    display: flex;
    flex-direction: column;
    align-items: start;
}
.card-style .title-box h3 {
    font-size: 48px;
    line-height: 1.2;
    font-weight: 600;
}
.card-style .title-box h4 {
    font-size:24px;
    line-height: 1.2;
    color: #5D6481;
    margin-top: 13px;
}
.card-style .social-text ul li {
    font-size: 28px;
    line-height: 1.5;
    display: flex;
    align-items: center;
    justify-content: start;
    background-size: contain;
}
.card-style .qrcodeimg {
    width: 200px;
    height: 200px;
}
.card-style .qrcodeimg  .qrcode {
    width: 156px;
    height: 156px;
}
.card-style .notice-pic {
    position: absolute;
    right: 72px;
    bottom: 20px;
}
.card-style  .user-image {
    width: 350px;
    height: 350px;
}
.card-style.card-style2  .user-image {
    position: absolute;
    top: 45px;
    right: 45px;
}
/* .card-style.card-style2 .title-box {  
    align-items: start;
} */
.card-style.card-style3 .qrcode-box p {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 15px;
    letter-spacing: 3px;
    padding-right: 15px;
    color: #fff;
}
.card-style.card-style3 .qrcode-box {
    display: flex;
    flex-direction: column;
    align-items: end;
    position: relative;
    padding-right: 20px;
    position: relative;
}
.card-style.card-style3 .qrcode-box::before {
    content: "";
    width: 240px;
    height: 310px;
    background: #000;
    position: absolute;
    top: -45px;
    right: 0;
    z-index: -1;
    border-radius: 0  0 16px 16px;
}

.card-style.card-style3 .qrcode-box .qrcodeimg {
    border: none;
    background: #fff;
}

.card-style.card-style3 .codebox  {
    align-items: start;
    flex-direction: column;
}

.card-style.card-style3 .title-box {
    /* align-items: start; */
    margin-top: 80px;
    margin-bottom: 0;
}

.card-style.card-style3 .qrcode-box .notice-pic {
    position: absolute;
    bottom: -70px;
    right: 0;
    font-size: 15px;
    color: red;
}

.card-style.card-style3 .businesscard-social-copyright {
    display: none;
}

.card-style.card-style3 .social-text {
    margin-top: 80px;
}



/* 提示容器樣式 */
.scroll-tip {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 10px 20px;
    border-radius: 25px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    z-index: 9999;
    cursor: pointer;
}

/* 單箭頭樣式 */
.scroll-tip .scroll-icon {
    position: relative;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 10px 0 10px; /* 向下三角形箭頭 */
    border-color: #fff transparent transparent transparent;
    animation: arrow-move 1s infinite;
}

/* 向下動畫 */
@keyframes arrow-move {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(10px); /* 向下移動 */
    }
    100% {
        transform: translateY(0);
    }
}

/* active 顯示狀態 */
.scroll-tip.active {
    opacity: 1;
    visibility: visible;
}

/* RWD 1600 ========================================================================== */
@media (max-width: 1600px)  {
    .container {
        max-width: 100vw;
    }
}

/* RWD 1366 ========================================================================== */

@media (max-width: 1366px) {

    .container {
        max-width: 1090px;
    }

    #wrapper {
        padding-top: 0;
    }

    .card-content {
        flex-direction: column;
        margin: 30px 0;        
        border-radius: 8px;
        overflow: hidden;
    }   
    
    .businesscard-photo {
        border-radius: 8px;
    }
    .businesscard-photo img {
        width: 100%;
        min-width: auto;
        height: auto;
    }
    .businesscard-detail {
        width: 100%;
        height: auto;
    }

}

/* RWD 992 ========================================================================== */

@media (max-width:992px) {  
    
    .card-content {       
        margin: 15px 0;
    }    
    .businesscard-detail p {
        font-size: 15px;
    }  
    
   
}

/* RWD 767 ========================================================================== */

@media (max-width: 767px){

    .businesscard-photo h3 {       
        font-size: 26px;
        line-height: 36px;        
        padding: 15px;
    }

    .businesscard-social-link ul li a {
        font-size: 13px;
        color: #5c5c5c;
        line-height: 13px;    
        border: 1px solid #5c5c5c;
        border-radius: 12px;
        padding: 10px;
        margin: 8px 0;        
        position: relative;
        width: 100%;
    }
    .businesscard-social-link ul li a:hover {       
        background:#FCF7FF; 
    }
    .businesscard-social-link ul li a span {   
        display: block;
        position: initial;
        font-size: 13px;
        color: #5c5c5c;
        background: transparent;
        opacity: 1;
        z-index: 1;
        padding: 0;
        max-width: 180px;
    }     
    .businesscard-social-link ul li a::before {    
        width: 25px;
        height: 25px;       
        background: url(../images/business/icon-links.svg) center center no-repeat;
        margin-right: 10px;
    } 
    .businesscard-social-link ul li a span::after {
        display: none;
    }   
    /* .businesscard-social-link ul li.social-mail,  .businesscard-social-link ul li.social-phone {    
      display: none;
    } */
    
    .businesscard-social-link ul li a::after {
        display: block;
    }
    .businesscard-social-link ul {        
        flex-direction: column;
        margin: 0;
    }
    .businesscard-social > div {
        width: 50%;
        min-width: 370px;
        justify-content: space-evenly;
    }    
    /* .businesscard-social-contact  {       
        display: block;
    } */
    .businesscard-social-link ul li a:hover span , .businesscard-social-contact p a:hover {
        color: #a936ff;
    }
    .businesscard-social-experience a.mail-view {
        display: none;
    } 
    .businesscard-social-experience a.phone-view {
        display: none;
    }     

    .businesscard-social-link ul li {      
        margin: 0;
    }
    .businesscard-social-article  {
        display: flex;
        align-items: center;
        justify-content: center;
     } 
    .businesscard-social-article ul  {
        flex-direction: column;
        width: 50%;
        min-width: 370px;
     } 
     .businesscard-social-article ul li  {
        margin: 5px 0;
     } 
    .card-share-link span {
        position: initial;
        display: flex ;
         align-items: center;
        justify-content: center;
        word-break: break-all;
        margin-bottom: 15px;
    }

     /*名片新版*/
     .user-cardbox {
        width:320px;
        height: 200px;
    }
    .user-cardbox #captureCard {
        transform: scale(0.3);
    }
    .user-cardbox.straight {
        width:200px;
        height: 320px ;   
    }   
    
}

/* RWD 575 ========================================================================== */

@media (max-width: 575px)  {
    .card-content {       
        margin: 15px 0;
    }
    
}

/* RWD 480 ========================================================================== */

@media (max-width: 480px) {

    .business-card .container {
        padding: 0;
    }

    .card-content {        
        margin: 0;
        border-radius: 0;
    }
    
    .businesscard-detail {        
        padding: 30px 30px;
    }
    .businesscard-social .businesscard-social-link, .businesscard-social-contact, .businesscard-social-article ul {
        width: 100%;
        min-width: max-content;
    }  
    .businesscard-social-experience {
        width: 100%;
    }      
    .businesscard-social-experience a {
        width: 90px;
        height: 90px;
    }
    .businesscard-social-experience a span {
        font-size: 13px;   
        margin-top: 0;    
    }
    .businesscard-social-experience a::before {
        width: 40px;
        height: 40px;
        background-size: contain !important;
    }
    .businesscard-photo, .businesscard-detail {
        width: 100%;
    }
    .businesscard-photo {
        border-radius: 0;
    }


    .dialog .popup-tab-content {
        padding:20px 20px 30px;
    }
    .card-download-info {
        flex-direction: column;
    }
    .card-download-info .businesscard-photo {
        width: 100%;
    } 

    .businesscard-social > div {        
        min-width: 100%;
    }

     /*名片新版*/
     .user-cardbox {
        width:265px;
        height: 166px;
    }
    .user-cardbox #captureCard {
        transform: scale(0.25);
    }
    .user-cardbox.straight {
        width:166px;
        height: 265px ;   
    }    
}

/* RWD 400 ========================================================================== */

@media (max-width: 400px){
    .dialog.dialog-with-tabs#qrcode-dialog {        
        width: 100%;
        min-width: auto;
    }   
    .all-html {
        width: 100%;
    }
    
}