.clearfix:before, .clearfix:after {
  display: table;
  content: " ";
}

.items-break {
  padding: 0 5px;
}

#hkecl-upper{
  display: none;
}

.breadcrumb{
  max-width: 1200px;
  margin: 30px auto 0 auto;
  padding: 0 20px;
  /* font-size: 14px; */
  line-height: 2;
}
.breadcrumbs {
  /* font-size: 16px; */
  line-height: 1.5;
  margin: 20px 50px 50px 50px;
}

div#hkecl-content{
  width: 100%;
  /* font-size: 16px; */
  line-height: 1.5;
  margin-bottom: 50px;
  padding: 20px 0;
  margin-right: 80px;
}
div#hkecl-content ul {
  list-style: disc;
  margin-left: 30px;
}
.hkecl-content-page img{
  max-width: 100%;
  height: auto;
}

#hkecl-side h2, 
.layout-3rd #hkecl-side h2,
#hkecl-side .hkecl-h3 {
  border-bottom: 1px solid #717171;
  margin-bottom: 20px;
  font-size: 1.5em;
}
#hkecl-side .left-side-card{
  display: block;
  margin-bottom: 40px;
}
#hkecl-side .left-side-card li{
  margin-bottom: 0;
}
#hkecl-side ul li a{
  /* font-size: 14px; */
}
#hkecl-side p a{
  color: #1A1A1A;
}

div#hkecl-resource-columns-container{
  display: flex;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
/*
.hkecl-resource-columns-container h1, 
.hkecl-resource-columns-container h2, 
.hkecl-resource-columns-container h3, 
.hkecl-resource-columns-container h4, 
.hkecl-resource-columns-container h5, 
.hkecl-resource-columns-container h6 {
  color: #454545;
}
*/
#hkecl-content h2.content-title{
  font-weight: 700;
  /* font-size: 26px; */
  line-height: 1.5;
  color: #008CD6;
}
#hkecl-content h1,
#hkecl-content h2,
#hkecl-content .hkecl-h2 {
  /* font-size: 26px; */
  /* border-bottom: dotted 3px #717171; */
  margin:10px 0;
  line-height: 1.5;
}
.content-info>div {
  margin: 20px 0;
}
.content-info .content-date {
  display: flex;
  justify-content: space-between;
}
.content-info .content-date>div{
  margin-right: 30px;
}
.content-info .content-date a {
  cursor: pointer;
  font-size: large;
}
.content-info .content-author {
  display: flex;
  gap: 10px;
}
.content-info .content-author>div:first-child{
  margin: auto 0;
}
.content-info .content-author>div:nth-child(2){
  display: flex;
  margin: auto 0;
  gap: 10px;
}
.content-info .content-author>div:nth-child(2)>div{
  display: flex;
  gap: 5px;
  align-items: center;
}
.content-info .content-author>div:nth-child(2)>div:not(:last-child)::after{
  content: "";
  padding: 0 5px;
}
.content-info .content-author img{
  width: 40px;
  height: 40px;
  vertical-align: middle;
  border-radius: 20px;
  border: 1px solid #ccc;
}
div#content-body hr {
  border: 1px solid #FE8C07;
}
#content-body p,
#hkecl-side p{
  line-height: 1.5;
}
#hkecl-side{
  padding-top: 0;
  margin-top: 35px;
}
#hkecl-side h2,
.layout-3rd #hkecl-side h2,
#hkecl-side h3,
.layout-3rd #hkecl-side h3,
#hkecl-side .hkecl-h3{
  /* font-size: 18px; */
  border: 0;
  margin-bottom: 15px;
}

div#hkecl-side hr {
  border: 1px solid #FE8C07;
}

li>a.resources-type-web,
li>a.resources-type-web:hover{
  background-image: url(images/link.svg);
  background-repeat: no-repeat;
  background-size: 15px 15px;
}
li>a.resources-type-anim,
li>a.resources-type-anim:hover,
li>a.resources-type-audio,
li>a.resources-type-audio:hover,
li>a.resources-type-docs,
li>a.resources-type-docs:hover,
li>a.resources-type-excel,
li>a.resources-type-excel:hover,
li>a.resources-type-form,
li>a.resources-type-form:hover,
li>a.resources-type-image,
li>a.resources-type-image:hover,
li>a.resources-type-pdf,
li>a.resources-type-pdf:hover,
li>a.resources-type-ppt,
li>a.resources-type-ppt:hover,
li>a.resources-type-video,
li>a.resources-type-video:hover,
li>a.resources-type-word,
li>a.resources-type-word:hover,
li>a.resources-type-exe,
li>a.resources-type-exe:hover,
li>a.resources-type-zip,
li>a.resources-type-zip:hover {
  background-image: url(images/dl_file.svg);
  background-repeat: no-repeat;
  background-size: 15px 15px;
}

.entry-content p a{
  word-wrap: break-word;
}

/* mobile */
@media only screen and (max-width: 767px){
  .breadcrumbs {
    margin: 0 20px;
  }
  div#hkecl-content{
    min-width: 100%;
  }
  div#hkecl-resource-columns-container{
    flex-direction: column;
    max-width: calc( 100% - 40px );
    width: 100vw;
    padding: 0;
  }
  .content-info .content-author>div:nth-child(2){
    flex-direction: column;
  }
  .content-info .content-author>div:nth-child(2)>div:not(:last-child)::after{
    content: "";
    padding: 0;
  }
  .layout-3rd .hkecl-resource-columns-container img.photo-large{
    max-width: 100%;
  }
  #hkecl-side{
    width: unset;
    margin-top: 0;
    padding: 15px 0;
  }
}
/* tablet */
@media only screen and (max-width: 1023px) and (min-width: 768px){
  .breadcrumbs {
    margin: 20px;
  }
}