/* CSS Reset *//**********************************************************/
blockquote,body,dd,div,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,input,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}abbr,acronym,fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:400}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}q:after,q:before{content:''}

/* Global *//**********************************************************/

body{font-size:13px;font-family: 'Ubuntu',"Microsoft JhengHei","\5FAE\x8EDF\6B63\9ED1\9AD4","Microsoft Yahei","\5FAE\8F6F\96C5\9ED1","Trebuchet MS", Arial, Helvetica, sans-serif;	color:#515151;line-height:22px; /*background:transparent;*/ background-color:#F1F1F1}
h2{ font-size:36px; line-height:normal; margin-bottom:20px}

:root {
  --profile-line-height: 30px;
  --profile-desktop-lines: 3;
  --profile-mobile-lines: 6;
}

.profile {
  position: relative;
  overflow: hidden; 
  font-size: 18px;  
  line-height: var(--profile-line-height);
  text-align: justify;
  max-height: calc(var(--profile-line-height) * var(--profile-desktop-lines));
  box-sizing: border-box;
}

/*
.profile::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  line-height: var(--profile-line-height);
  height: var(--profile-line-height);
  width: 30px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), #F1F1F1);
}
*/


.profile::after {
  content: "...";
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 0 0 0 4px;
  display: none;
  line-height: var(--profile-line-height);
  height: var(--profile-line-height);
  box-sizing: border-box;
}


.profile[data-truncated="true"] {
  padding-right: 15px;
}

.profile[data-truncated="true"]::after {
  display: block;
}

@media (max-width: 600px) {
  .profile {
    max-height: calc(var(--profile-line-height) * var(--profile-mobile-lines));
  }
}