@import url(../../../css/style.css);

.summary-section {
    margin: 3%; padding:1%;  border: 2px solid #e95389; padding-top:10px; display: flex; flex-direction: row;
  }
  .summary-section .left-part {width: 33%; padding: 1%;}
  .summary-section .right-part {width: 63%; padding: 1%;}

  .high-lights {
    margin: 0% 3%; padding:1%; border-radius: 10px; text-align: center; 
    background: linear-gradient(360deg, rgba(255,255,255,1) 0%, #e9538a2b,  #e9538a53 100%);}
  .high-lights p {
    color: #e95389; font-weight: 600; font-size: 1.75rem; letter-spacing: 0rem;}


  .workshop-section { margin: 1% 3%; padding:1%; display: flex; flex-direction: row;}
  .workshop-section .L{width: 25%;}
  .workshop-section .R{width: 75%;}

  .workshop-section .R .workshop-section-blue {margin: 1.5%; padding: 2.5% 0; background-color: #0ab5f81f; border-radius: 0 50px 30px 0;}
  .workshop-section .R .workshop-section-blue h2 {font-size: 1.6rem; font-weight: 600; color:  #0ab5f8; text-align: justify; padding-top: 2%; margin-bottom: 3%; margin-left: 3%;}
  .workshop-section .R .workshop-section-blue p {margin-bottom: 2%; margin-left: 3%;}

  .workshop-section .R .workshop-section-green {margin: 1.5%; padding: 2.5% 0; background-color: #45b83d1e; border-radius: 0 50px 30px 0;;}
  .workshop-section .R .workshop-section-green h2 {font-size: 1.6rem; font-weight: 600; color:  #46b83d; text-align:justify; padding-top: 2%;  margin-bottom: 3%; margin-left: 3%;}
  .workshop-section .R .workshop-section-green p {margin-bottom: 2%; margin-left: 3%;}
  




/*  .workshop-section .left-part {width: 48%; padding: 0.5%; margin: 0.5%; border-radius: 50px 10px; background-color: #0ab5f81f;}
      .workshop-section .left-part h2 {font-size: 1.6rem; font-weight: 600; color:  #0ab5f8; text-align: center; padding-top: 10%}
  .workshop-section .right-part {width: 48%;  padding: 0.5%; margin: 0.5%; border-radius: 10px 50px; background-color: #45b83d1e;} 
      .workshop-section .right-part h2 {font-size: 1.6rem; font-weight: 600; color:  #46b83d;  text-align: center; padding-top: 10%;} */
  
  .workshop-content {
    border-radius: 10px; margin: 1% 3%; padding:1%; display: flex; flex-direction: column; background-color: #9175ca18;}
    .workshop-content img {border-radius: 20px; margin: 3%;}
    .workshop-content .title-h2 {text-align: right; color: #875ddb; font-weight: 900; letter-spacing: 0rem; font-size: 2.3rem; padding-top: 2%;}
    .workshop-content .colum-2 {display: flex; flex-direction: row;}
    .workshop-content .colum-2 .colum-2-L {width: 47%; padding: 1%;}
    .workshop-content .colum-2 .colum-2-L .cont-list {padding: 2%;}
    .workshop-content .colum-2 .colum-2-L .cont-list dl hr {margin: 3% 0; border-top: 1px dotted #875ddb;}
    .workshop-content .colum-2 .colum-2-L .cont-list dt {color: #875ddb; font-weight: 600; }
    .workshop-content .colum-2 .colum-2-R {width: 47%; padding: 1%;}

    .tips{width: 20%;}
    .tips img {border-radius: 50%; padding: 20% 0;}
    .tips-main{width: 80%; background: linear-gradient(270deg, rgba(255,255,255,1) 0%, #e9538a2b,  #e9538a53 100%); border-radius: 10px;}
    .tips-main h2 {font-size: 1.6rem; font-weight: 600; color: #e95389; text-align: justify; padding-top: 2%; margin-bottom: 3%; margin-left: 3%;}

   


  @media screen and (max-width: 880px){
    .summary-section {flex-direction: column;}
    .summary-section .left-part {width: 100%; padding: 0%;}
    .summary-section .right-part {width: 100%; padding: 0%; margin-top: 5%;}

    /*.workshop-section {flex-direction: column;}
    .workshop-section .left-part {width: 100%; padding: 0%;  margin: 2% 0;}
    .workshop-section .right-part {width: 100%; padding: 0%;  margin: 2% 0;}
    .workshop-section .left-part h2 {padding-top: 5%;}
    .workshop-section .right-part h2 {padding-top: 5%;}
    .workshop-section p {padding-bottom: 5%;}*/

  .workshop-section {flex-direction: column;}
  .workshop-section .L{width: 100%;}
  .workshop-section .R{width: 100%;}
  .workshop-content .colum-2 {flex-direction: column;}
  .workshop-content .colum-2 .colum-2-L , .workshop-content .colum-2 .colum-2-R {width: 100%;}

  .tips{width: 25%; padding: 0; margin: auto;}
  .tips-main{width: 100%; }
  }

  @media screen and (max-width: 480px){
    .summary-section {flex-direction: column;}
    .summary-section .left-part {width: 100%; padding: 0%;}
    .summary-section .right-part {width: 100%; padding: 0%; margin-top: 5%;}

    .high-lights p {letter-spacing: 0;}

    .workshop-content .title-h2 {text-align: left;}
  }