@media screen and (min-width: 280px) and (max-width: 1200px) {
    #desktop {
        display: none;
    }

    img {
        max-width: 100%;
        margin: 0 auto;
    }

    #mobile {
        display: block; 
        margin: 0 auto;
        max-width: 1080px;
        font-size: 10px;
    }

    #mobile .banner-vtl {
        width: 100%;
        margin: 0 auto;
    }

    /* section 1 */
    .section1 {
        background-color: var(--background);
        height: 180em; 
        z-index: 0;
    }

    .section1 .title-area,
    .section2 .title-area,
    .section21 .title-area,
    .section31 .title-area,
    .section41 .title-area,
    .section51 .title-area,
    .section71 .title-area,
    .section81 .title-area,
    .section91 .title-area {
        font-size: 8em;
        color: var(--red);
        font-weight: 900;
        letter-spacing: 1em;
        text-align: center; 
        padding-top: 0.7875em;
    }

    .section1 .brush,
    .section2 .brush,
    .section21 .brush,
    .section31 .brush,
    .section51 .brush,
    .section81 .brush,
    .section91 .brush
    {
        text-align: center; 
        top: 45%; 
        left: calc(50% - 213px);
        z-index: -1;
    }
  
    .section1 .description {
        font-size: 4em;
        letter-spacing: 0px;
        max-width: 895px;
        width: 100%;
        margin: 0 auto;
        margin-top: 2.075em;
        padding: 0.1em; 
    }

    .section2 .image-group {
        text-align: center;
    }

    .section2 .image-group a {
        margin-top: 10px;
    }
   
    /* section21 */
    .section21 {
        background-color: var(--background2);
        height: 168em; 
        z-index: 0;
    }
 
    .section21 .description {
        font-size: 4em;
        letter-spacing: 0px;
        max-width: 895px;
        width: 100%;
        margin: 0 auto;
        margin-top: 1.3em;
        padding: 0.1em; 
    }

    .section21 .content21 { 
        background-color: var(--background);
        height: 600px;
    }

    .section21 .title21 {
        font-size: 0.525em; 
        font-weight: 900;
        letter-spacing: 10px;
        margin-left: 10%;
        z-index: 2;
    }

     .section21  .title22 {
        font-size: 0.525em; 
        font-weight: 900;
        letter-spacing: 10px;
        margin-left: 16%;
        top: 2.5em;
        z-index: 2;
    }
 
    .section21  .brush21 { 
        z-index: 1; 
        top: 50px; 
        margin-left: 10%;
    }

    .section21 .description21 {
        font-size: 4em;
        margin-top: 4em;
        padding-left: 2.325em;
        padding-right: 2.325em;
    }


    .section21 .search21 {
        padding: 4em;
    }

    .section21 .search21 .search-icon21 {
        background-color: var(--red2);
        stroke: white;
        fill: white;   
        width: 35px;
        height: 35px;

        top: 2px;
        left: 0px;
        padding-left:2px;
        padding-top:2px;
        z-index: 1;
    }

    .section21 .search21 .form-control { 
        padding-left: 50px; 
        border: 2px solid var(--red2);
    } 
 
    .section21 .select_box {
        z-index: 10;
    }

    .section21 .select_box:after{
        width: 0; 
        height: 0; 
        border-left: 12px solid transparent;
        border-right: 12px solid transparent;
        border-top: 12px solid #f00;
        position: absolute;
        top: 14px;
        right: 2px;
        content: "";
        z-index: 98;
    } 

    /* section31 */
    .section31 {
        background-color: var(--background2);
        height: 510em; 
        z-index: 0;
    }
 
    .section31 .description {
        font-size: 4em;
        letter-spacing: 0px;
        max-width: 895px;
        width: 100%;
        margin: 0 auto;
        margin-top: 1.3em;
        padding: 0.1em; 
    }

    .section31 .content31 { 
        background-color: var(--background);
        height: 120em;
    }
 
    .section31  .title31 {
        font-size: 5em;
        font-weight: 900;
        color: var(--red);
        letter-spacing: 10px;
        margin-left: 10%;
        z-index: 2;
    }

    .section31 .description31 {
        font-size: 4em;
        margin-top: 2.8em;
        padding-left: 2.325em;
        padding-right: 2.325em;
    }


    .section31  .title32 {
        font-size: 0.625em; 
        font-weight: 900;
        letter-spacing: 10px;
        margin-left: 16%;
        top: 2.4em;
        z-index: 2;
    }
 
    .section31  .brush31 { 
        z-index: 1; 
        top: 20px; 
        margin-left: 10%;
    }

    .section31 .search31 {
        padding: 4em;
    }

    .section31 .search31 .search-icon21 {
        background-color: var(--red2);
        stroke: white;
        fill: white;   
        width: 35px;
        height: 35px;

        top: 2px;
        left: 0px;
        padding-left:2px;
        padding-top:2px;
        z-index: 1;
    }

    .section31 .search31 .form-control { 
        padding-left: 50px; 
        border: 2px solid var(--red2);
    }  
     
    .section31 .select_box {
        z-index: 10;
    }

    .section31 .select_box:after{
        width: 0; 
        height: 0; 
        border-left: 12px solid transparent;
        border-right: 12px solid transparent;
        border-top: 12px solid #f00;
        position: absolute;
        top: 14px;
        right: 2px;
        content: "";
        z-index: 98;
    } 

    .section31 .body-vtl {
        text-align: center;  
    }

    .section31  .title33 {
        font-size: 5em; 
        font-weight: 900;
        letter-spacing: 10px; 
        color: var(--red);
        top: 2.4em;
        z-index: 2;
    }

    .section31 .title-bg {
        background-color: var(--background3); 
        max-width: 70%;
        padding: 2.4em;
        margin: 0 auto;
    }

    .section31 .box {
        background-image: url('https://www.dstcm.com/themes/DST_TCM/assets/eczema/image/mobile/mobile03/Mobile03_box02.png');
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 100%;
        max-width: 100%;
        max-height: 100%; 
        width: 987px;
        height: 832px; 
        margin: 0 auto;
        padding-left:  18em; 
    }
     
    .section31 .title34 {
        font-size: 5em;
        color: var(--red2);
        font-weight: 900;
        line-height: 1.02em;
        text-align: left;
        padding-top: 3.5em;
    }

    .section31 .description34 {
        font-size: 4em; 
        letter-spacing: 0px; 
        margin-top: 1.45em;
        text-align: left;
        max-width: 599px; 
    }

    .section31 ul li::before {  
        padding-right: 1em;
    }

    .section31 .stick {
        color: var(--red);
    }
    
    .section31 .description35 {
        font-size: 4em; 
        letter-spacing: 0px;  
        margin: 0 auto;
        margin-top: 1.45em;
        text-align: left;
        line-height: 2em;
        max-width: 95%;
    }
    
    /* section41 */ 
    .section41 .brush{
        text-align: center; 
        top: 45%; 
        left: calc(50% - 438px);
        z-index: -1;
    }

    .section41 .description {
        font-size: 4em;
        margin-top: 60px;
        padding: 85px;
    }

    .section41 .oval {
        margin-top: 350px; 
        height: 680px; 
    }

    .section41 .oval-center {
        left: 400px;
        top: 60px; 
    z-index: 200;  
    }
 
    .section41 .oval01 {
        left: 156px;
        top: -280px; 
        z-index:100; 
    }

    .section41 .oval02 {
        left: 569px;
        top: -200px; 
        z-index:101;
    }

    .section41 .oval03 {
        left: 560px;
        top: 4px; 
        z-index:102;
    }

    .section41 .oval04 {
        left: 570px;
        top: 200px; 
        z-index:104;
    }

    .section41 .oval05 {
        left: 157px;
        top: 199px; 
        z-index:105;
    }

    .section41 .oval06 {
        left: 170px;
        top: -1px; 
        z-index:100;
    }
 

    .section41 .oval01:hover img,
    .section41 .oval02:hover img,
    .section41 .oval03:hover img,
    .section41 .oval04:hover img,
    .section41 .oval05:hover img,
    .section41 .oval06:hover img {
        cursor: pointer;   
    } 

    .section41 .box {
        background-image: url('https://www.dstcm.com/themes/DST_TCM/assets/eczema/image/mobile/mobile04/Mobile04_box.png');
        background-repeat: no-repeat;
        background-size: 100%;
        background-position: top center;
    }


    .section41 .box .title2 {
        font-size: 5em;
        color: var(--red2);
        letter-spacing: 6px; 
        font-weight: 900;
        text-align: center; 
        padding-top: 100px;
    }


    .section41 .content .title2row { 
        font-size: 7em;
        color: var(--red);
        font-weight: 900;
        text-align: center;  
        letter-spacing: 10px;
        z-index: 2; 
        height: 100px;
    }


    .section41 .content .brush2row {
        top: 30px;
        z-index: 1;
    }

    .section41 .content .position {
        top: 70px;
    }
    .section41 .list-images {
        margin-top: 148px !important;
        width: 100%;
        margin: 0 auto; 
    }
    .section41 .name {
        font-size: 4em;
        color: var(--red2);
        margin-top: 30px;
        font-weight: 900;
    }
    .section41   .content-description {
        font-size: 4em; 
        letter-spacing: 0px;  
        text-align: center;
    }

    .section41 .content2 .content-description2 {
        font-size: 8em; 
        font-weight: 900; 
        color: var(--red);
        text-align: center;
    }
    .section41 .small-text {  
        font-size: 3em; 
        padding-bottom: 100px;
    } 

    .section41 .first33 {
        margin-top: 40px;
        margin-left: 25%;
        padding-bottom: 150px;
    }

    .section41 .first33 ul li:first-child { 
        width: 480px;
    }

    /* section51 */

    .section51 {
        background-color: var(--background2);
        height: 5500px;
        z-index: 0;
    }    

    .section51 .description {
        font-size: 4em;
        letter-spacing: 0px;
        max-width: 895px;
        width: 100%;
        margin: 0 auto;
        margin-top: 2.075em;
        padding: 0.1em; 
    }

    .section51 .full-content {
        background-color: var(--background);
        height: 2300px;
        z-index: 0;
    }

    .section51 .full-content .body51 { 
        margin: 0 auto;  
        padding-top: 30px;
    }

    .section51 .full-content .title-bg {
        background-color: var(--background3); 
        margin-left: 100px;
        margin-right: 100px;
        margin-top: 40px;
        margin-bottom: 40px; 
        text-align: center;

    }

    .section51 .full-content .title51 {
        padding-left: 45px;
        padding-top: 33px;
        padding-bottom: 33px;
        font-size: 5em;
        font-weight: 900;
        letter-spacing: 6.4px;
        color: var(--red);

    }
    .section51 .table51 {  
        width: 95%;
        max-width: 95%;
        margin: 0 auto;
    }

    .section51 .table51 thead tr td {
        background-color: var(--table-bg);
        padding: 29px 51px; 
        font-size: 4em;
        font-weight: 900;
        letter-spacing: 0px;
        border:  1px solid var(--pagination-text); 
        text-align: center; 
    }
    .section51 .table51 tbody tr td {
        padding-left: 3px;
        padding-right: 3px;
        padding-top: 80px;
        padding-bottom: 80px;
        background-color: var(--background2);
        border: 1px solid var(--pagination-text);
        font-size: 3em;
        vertical-align: middle;
        letter-spacing: 0px;
        line-height: 40px;
    }
    .section51 .title511 {
        font-size: 7em;
        font-weight: 900;
        color: var(--red);
        letter-spacing: 14px; 
        z-index: 2;
    }

    .section51 .new-background51 {
        text-align: center; 
        background-color:var(--background2);
        height: 1000px;
    }

    .section51 .brush511 {
        top: 50px;
        z-index: 1; 
        left: 5%;
    }   
    .section51 .box51 { 
        background-color: var(--background3);
        padding: 20px;
        margin-left: 50px;
        margin-right: 50px;
        margin-top: 58px;
    }

    .section51 .box51 .main-title {
        font-size: 4em;
        font-weight: 900;
        color: var(--red2);
        letter-spacing: 6.4px;
        line-height: 66px;
        text-align: left;
    }

    .section51 .box51 .main-description {
        font-size: 4em;
        letter-spacing: 0px;
        line-height: 70px;
        margin-top: 20px;
        text-align: left;
    } 

    .section51 .box51 .small-content {
        padding-top: 10px;
        padding-left: 27px;
        padding-right: 27px;
    }

    .section51 .box51 .small-title {
        font-size: 4em;
        font-weight: 900;
        line-height: 40px;
        color: var(--red2);
        letter-spacing: 0px;
    }

    .section51 .box51 .small-description {
        font-size: 3.5em; 
        letter-spacing: 0px;
        line-height: 41px;
        width: 250px;
    }

    .section51 .box51 .group-image51 {
        width: 100%;
        display: flex;
        justify-content: space-between;
    }

    .section51 .item {
        width: 32.5%;  
    }
 


    /* section61 */ 
    .section61 {
        font-size: 10px; 
        text-align: center; 
        background-color: var(--background2);
    }

    .section61 .title {
        font-size: 8em;
        color: var(--red);
        font-weight: 900;
        letter-spacing: 0.2em;
        max-width: 100%;  
        z-index: 2;
    }
  
 
    .section61  .brush { 
        z-index: 1; 
        top: 50px; 
        margin-left: calc(50% - 213px);
    }

    .section61 .list61 {
        max-width: 880px;
        margin: 0 auto; 
    }
 
    .section61 .pagination {
        display:grid;
        grid-template-columns: repeat(1, 880px); 
        row-gap: 5em;  
    }
 
    .section61 .image61 {
        width: 880px; 
    }

    .section61 .bottom-panel{
        padding: 0.725em;
        background-color: var(--background); 
        text-align: left; 
    }

    .section61 .title61 { 
        font-size: 5em;
        color: var(--red);
        font-weight: 900;
    }

    .section61 .description61 { 
        font-size: 4em;  
    }

    .section61 .detail-pagination {
        background-color: white;
        margin-top: 4em;
        font-size: 4em;
    }

    .section61 .detail-pagination .box.active {
        background-color: var(--red2);  
        padding-left: 0.3em;
        padding-right: 0.3em;
        color: white; 
    }

    .section61 .group-pagination {
        display: flex;
        width: 3em;
        justify-content: space-between;
    } 


     /* section71 */
    .section71 {
        background-color: var(--background2);
        height: 3050px;
        z-index: 0;
    }  
 
    .section71 .brush
    {
        text-align: center; 
        top: 45%; 
        left: calc(50% - 327px);
        z-index: -1;
    }
  
    .section71 .groupimgage71 {
        display: flex;
        justify-content: space-around;
    }
 
    .section71  .box71 {
        margin-top: 59px;
        background-color: var(--background);
        margin-left: 40px;
        margin-right: 40px;
        padding: 20px; 
        display: flex;
        justify-content: center;
    }

    .section71 .center71 {
        display: flex;
        justify-content: center;
    }

    .section71 .box71 .small-title {
        font-size: 4em;
        letter-spacing: 2px;
        font-weight: 900;
        
    }

    .section71 .button {
        margin-top: 30px;
        font-size: 4.5em; 
        font-weight: 900;
        color: white;
        background-color: var(--red2);
        border: none; 
        padding: 5px 30px;
    }


    /* section81 */  

    .cover81 {
        height: 9400px;
    }

    .section81 {
        background-color: var(--background2);
        height: 3000px;
        z-index: 0;
    }  
  
    .section81  .child-box {
        background-image: url('https://www.dstcm.com/themes/DST_TCM/assets/eczema/image/mobile/mobile08/Mobile08_box.png');
        background-repeat: no-repeat; 
        background-size: 100%;
        background-position: top center;
        width: 100%;
        height: 45%;
    } 

    .section81 .child-box .title {
        color: var(--red2);
        letter-spacing: 10px;
        font-size: 6.3em;
        font-weight: 900;
        width: 100%;
        text-align: center; 
        padding-top: 3.17em;
    }

    .section81 .child-box .content  {  
        margin-left: 10%; 
    }

    .section81 .child-box .content .small-tilte {
        font-size: 4em;
        font-weight: 900;
    }

    .section81 .child-box .content .small-description {
        font-size: 4em;
        line-height: 1em;
        max-width: 65%;
    }

    .section81 .child-box .content table tr {
        margin-bottom: 150px;
    }

    .section81 .child-box .content table .first {
        min-width: 200px;
    }

    .section81 .child-box .content table .second {
        padding-left: 5%;
    }

    .section81 .child-box .content table tr .top {
        vertical-align:top;
    }

    .section81 .child-box .content  {
        margin-top: 14px;
    }

    .section81 .child-box .content table tr td {
        padding-top: 70px;
    }

    .section81 .child-box hr {
        width: 50%;
        background-color: white;
        height: 2px;
        display: flex;
        margin-left: 25%;
    }
 

    /* section91 */ 
    .section91 {
        background-color: var(--background2);
        height: unset;
        padding-bottom: 20px;
        z-index: 0;
    }   

    .section91 .questions {
        width: 100%;
        margin-top: 82px !important;
        margin: 0 auto;
        text-align: center;
    }
  
    .section91 .questions .question{
        max-width: 1080px;
        width: 1080px;
        font-size: 4.5em;
        font-weight: 900;
    }

    .section91 .questions .answer{
        font-size: 3em;
        font-weight: 400;
        letter-spacing: 2px;
        width: 100%;
        padding: 10px;
        text-align: left;
    }
 
    .section91 table tr{
        width: 100%;
        margin: 0 auto;
        border: 1px solid var(--border-table);
    }

    .section91 table tr td {
        width: 100%;
        text-align: center;
        padding-top: 20px;
        padding-bottom: 20px;
    } 

}
 
@media screen and (min-width: 370px) and (max-width: 480px) {

    #mobile {
        font-size: 5px;
    }

    .title-area .brush {
        max-width: 60%;
        left: 25%;
    }
    
    .section21 .brush21 {
        top: 25px;
    }

    .section31 .box {  

        width: 100%;
        height: 100%;
        max-width: 375px;
        max-height: 375px;
        padding-left:10%;
     }

     .section31 .brush31 {
        top: 0px;
     }
 
     .section31 .title34 {
         padding-top: 0%;
     }
 
     .section31 .description34 {
         max-width: 300px;
         margin-top: 0%;
     }

     .section61 {
        font-size: 5px;
     } 

    /* section21 */
    .section21 .title-area .title21 { 
        letter-spacing: 0px;
    }
    .section21 .title-area .title22 { 
        letter-spacing: 0px;
    }

    .section21, .section21 .content21   {
        height: unset;
    }
 
    /* section31 */
    .section31 .content31 {
        height: unset;
        padding-bottom: 20px;
    }

    .section31 .box {
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        background-image: url(https://www.dstcm.com/themes/DST_TCM/assets/eczema/image/mobile/mobile03/Mobile03_box02.png);
    }
    .section31 .title34 {
        padding-top: 30px; 
        margin-left: 3%;
    }
    .section31 .description34 {
        padding-top: 30px;
        padding-bottom: 30px;
        width: 80%;
        margin-left: 5%;
    }

    .section41 .oval {
        display: none;
    }

    .section41 .content .title2row { 
        font-size: 30px;
        letter-spacing: 0px;
    }

    .section41 .content .title2row.position {  
        top: 40px;
    }
    .section41 .list-images .box img {
        max-width: 80%;
        margin: 0 auto;
        margin-left: -4%;
    }
    .section41 .box .title2 {
        padding: 5px;
        padding-top: 0px !important;
    }

    /* section5 */
    .section51 {
        height: 7200px;
    }

    .section51 .full-content .title51  {
        padding: 2px;
    }

    .section51 .box51 .main-title {
        letter-spacing: 0px; 
    }

    .section51 .box51 .main-description  {
        line-height: 24px;
    }

    .section51 .item {
        width: 100%;
    }

    .section51 .group-image51   {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .section51 .box51 .small-content {
        padding: 2px;
    }

    .section51 .box51 .small-description { 
        width: auto;
    }

    /* section61 */

    .section61 {
        height: 3950px;
    }

    .section61 .image61 {
        width: 100% !important;
    }

    .section61 .brush {
        top: 30px;
    }

    .section61 .pagination {
        grid-template-columns: minmax(max-content, 100px);
        padding-left: 5%;
    }

    /*section71 */
    .section71 {
        height: unset;
        padding-bottom: 20px;
    }
    /*section81 */
    .section81 .child-box .title {
        letter-spacing: 0px;
        padding-top: 20px;
    }

    .section81 .child-box {
        height: unset;
    }
    .section81 .child-box .content .small-description {
        max-width: 80%;
    }

    .section81 .child-box .content table tr td {
        padding-top: 0px;
    }
    .section81 .child-box .content table .first {
        min-width: unset;
    }
    .section81 .child-box .content table tr:last-child td{
        padding-bottom: 100px;
    }

    .cover81 {
        height: unset;
    }

    /* section91 */
    .section91 .questions .question {
        width: 100%;
    }

    .section91 {
        height: unset;
        padding-bottom: 20px;
    }
}

@media screen and (min-width: 481px) and (max-width: 767px)  {
    #mobile {
        font-size: 6px;
    }

    .section21 .content21 {
        height: unset;
    }

    .section31 .content31 {
        height: unset;
    }

    .section31 .box { 
       height: 500px;
       background-position: unset;
    }

    .section31 .description34 { 
        max-width: 450px;
    }

    .section31 {
        height: unset;
    }

    .section41 .oval {
        display: none;
    }

    .section41 .image-box {
        width: 80%;
        margin-left:8%;
    }

    .section41 .box:last-child .title2{
        padding: 50px !important;
    }

    .section51 .box51 .main-description { 
        line-height: 40px;
        margin-top: 20px;
        text-align: left;
    }

    .section51 .group-image51 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .section51 .item {
        width: 100%;
        justify-content: center;
        align-items: center;
    }

    .section51 .box51 .small-content {
        padding: 0px;
    }

    .section51 .box51 .small-description { 
        width: unset;
    }

    .section51 { 
        height: 7700px;
    }

    .section71 { 
        height: unset;
        padding-bottom: 20px; 
    }

    .section81  .child-box { 
        padding-bottom: 100px;
        height: unset;
    }
 
    .section81 .child-box .content .small-description { 
        padding-bottom: 5px;
        line-height: 1.3em;
    }
    .section81 .child-box .content table .first {
        min-width: unset;
    }
    .section81 .child-box .content table tr td {
        padding-top: 50px;
    }
    .section81 .special81 { 
        padding-bottom: 130px; 
    }
    .cover81 {
        height: 5800px;
    }
    .section91 .questions .question {
        max-width: 100%;
        width: 100%; 
    }
    .section91 {
        height: unset;
        padding-bottom: 20px;
    }
}

@media screen and (min-width: 768px) and (max-width: 1023px) { 
    #mobile  { 
        font-size: 9px; 
    }
  
    .section21 .content21 {
       height: unset;  
    }
    .section21 {
        height: unset; 
       padding-bottom: 20px;
    }
    .section31 .box { 
        padding-left: 13em;
    }
    .section31 { 
        height:  unset;
    }

    .section41 .oval {
        display: none;
    }
    .section41 .content .title2row { 
        letter-spacing: 0;
    }
    .section41 .image-box {
        width: 80%;
        margin-left: 8%;
    }
    .section41 .box:last-child .title2 { 
        padding-top: 60px !important;
    }
    .section41 .box:last-child .content2 {
        padding-bottom: 50px;
    }
    .section51 .box51 .small-content {
        padding: 0;
    }
    .section51 .box51 .small-description {
        font-size: 2.8em; 
         width: unset;
    }
    .section61 { 
        padding-bottom: 20px; 
    }
    .section71 { 
         height: unset;
        padding-bottom: 20px; 
    }
    .section81 .child-box .content .small-description { 
        max-width: 80%;
    }
    .section81 .child-box .title { 
        padding-top: 1.17em;
    }
    .section81  .child-box { 
        height: 35%;
    }
    .section81 .child-box .content table tr td {
        padding-top: 40px;
    }
    .cover81 {
        height: 7150px;
    }
    .section91 .questions .question {
        max-width: unset;
        width: unset;
    }
}
 
@media screen and (min-width: 1024px) and (max-width: 1079px) { 
    #mobile  { 
        font-size: 9.5px; 
    }
    .section31 { 
        height:  unset;
    }
    .section41 .oval03 { 
        left: 569px;
        top: 25px; 
    } 
    .section41   .content-description {
        font-size: 3.8em; 
    }
    .section61 { 
        padding-bottom: 20px;
    }
    .section91 .questions {
        display: flex;
        justify-content: center;
    }
    .section91 .questions .question {
        max-width: unset;
        width: unset; 
    }
}  

@media screen and (min-width: 480px) and (max-width: 482px)  {
    .section51 {
        height: 7550px;
    }

    .section61 .pagination {
        padding-left: 15%;
    }

    .section71 {
        height: 1700px;
    }

    .section81 {
        height: 3700px;
    }

    .section81 table tr td {
        padding-bottom: 80px;
    }
}

:root {
    --red: #D70000;            
    --red2: #E16D61;
    
    --background: #E7DED7;
    --background2: #F1F1F1;
    --background3: #F0EBE6;
    --border-table: #D6CEC4;
    --pagination-text: #707070;
    --table-bg: #D8CEC3;  
    
}

* {
    font-family: 'MHeiHK';
    letter-spacing: 0px; 
}
 
.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

.justify-center {
    justify-content: center;
} 

.justify-around {
    justify-content: space-around;
}

.justify-between {
    justify-content: space-between;
}

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.items-center {
    align-items: center;
}

#desktop {
    width: 1920px;
}


.mx-auto {
    margin: 0 auto;
}


.grid-cols-2 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.gap-2 {
    gap: 2px;
}

.ml-10 {
    margin-left: 10px;
}

.mt-20 {
    margin-top: 20px;
}

.image:hover {
    transform: scale(1.1);
}

.tab .tab-title:hover {
    transform: scale(1.1);
} 

.mt-10 {
    margin-top: 10px;
}

.section31 ul, .section41 ul{
    list-style: none; /* Remove default bullets */
} 
  
.section31 ul li::before, 
.section41 ul li::before { 
    content: "\2022";  
    color: var(--red2);
    font-weight:  bold;
    display: inline-block;
    width: 1rem; 
    margin-left: -1rem; 
} 

@media (min-width: 1536px) { 
    #desktop, .section61  { 
        font-size: 11px; 
    }
}

@media (min-width: 1919px) { 
    #desktop, .section61  { 
        font-size: 12px; 
    }
}

@media screen and (min-width: 1201px) and (max-width: 1919px) { 

    #desktop {
        display: block;
        font-size: 10px;
        max-width: 100%;
    } 

    #desktop .banner img {
        width: 100%;
    }

    .banner { 
        height: 100%;
        max-width: 100%;
    }
 
    #mobile {
        display: none;
    }

    /* section 1 */
    .section1 {
        background-color: var(--background);
        height: 750px;
        z-index: 0;
    }  
 

    .title-area .title, 
    .title-area .title2,
    .title-area .title3,
    .title-area .title4,
    .title-area .title5  {
        font-size: 4em;
        color: var(--red);
        letter-spacing: 0.4em;        
        font-weight: 900;
        margin-left: 10%; 
        z-index: 3;
    }

    .title-area .brush, 
    .title-area .brush2,
    .title-area .brush3,
    .title-area .brush4, 
    .title-area .brush5 { 
        z-index: -1;
    }

    .section1 .brush, 
    .section11 .brush, 
    .section31 .brush,
    .section41 .brush,
    .section51 .brush,
    .section61 .brush,
    .section71 .brush,
    .section81 .brush,
    .section91 .brush { 
        top: 125px; 
        left: 8%;
    }

    .section1 .title,  
    .section11 .title, 
    .section31 .title,
    .section41 .title, 
    .section51 .title,
    .section61 .title ,
    .section71 .title,
    .section81 .title,
    .section91 .title  {
        padding-top: 2.325em; 
    }
 
    .section1 .docter-image {
        width: 65%;
        height: 100%

    }
    .section1 .description {
        font-size: 2em; 
        width: 696px;
        height: 308px;
        text-align: left;
        letter-spacing: 0px;
        margin-top: 84px;
    }

    /* section 2 */
    .section2 {
        background-color: var(--background2);
        height: 1400px;
        z-index: 0;
    }

    .section2 .title {
        padding-top: 62px;
    }

    .section2 .brush { 
        top: 9em; 
        left: 8%;
    }

    .section2 .image-group {
        width: 1280px;
        max-width: 1280px;
        margin: 0 auto;
    }

    /* btn02 */ 
    .section11 {
        background-color: var(--background2);
        height: 920px;
        z-index: 0;
    }  

    .section11 .description {
        font-size: 2em;
        margin-left: 10%;  
        text-align: left;
        letter-spacing: 0px;
        margin-top: 25px;
    }
  
    .section11 .tab {
        margin-top: 78px;
        margin-left: 6%; 
    }

    .section11 .tab-title {
        width: 257px;
        font-size: 20px; 
        text-align: center;
        padding-bottom:13px;
    }

    .section11 .tab .active {
        border-bottom: 8px solid var(--red2);
        animation-name: action;
        animation-duration: 0.5s;
        animation-timing-function: linear;
        animation-direction: alternate;
    }

    @keyframes action {
        0% {
            width: 257px;
        }
        50% {
            width: 240px;
        }
        100% {
            width: 257px;
        }
    }

    .section11 a, .section31 a {
        text-decoration: none;
        color: black;
    }

    .section11 #data1,
    .section11 #data2,
    .section11 #data3,
    .section11 #data4,
    .section11 #data5
    {
        background-color: var(--background);
        height: 450px;
        z-index: 0;
    }

    .tabcontent {
        padding-top: 79px;
    }

    .title-area .title2 {
        margin-left: 5% !important;
        font-size: 2.8em !important; 
    }

    .title-area .brush2 {
        top: 0px;
        left:  5%;
    }

    .section11 #data1 .description2,
    .section11 #data2 .description2,
    .section11 #data3 .description3, 
    .section11 #data4 .description4,
    .section11 #data5 .description5 {
        width: 700px;
        font-size: 1.8em;
        text-align: left;
        letter-spacing: 0px; 
        margin-left: 2%;
        margin-top: 30px;
        padding: 10px;
    }

    .title-area .title3 {
        margin-left: 5%;
    }

    .title-area .brush3 {
        top: 0px;
        left:  5%;
    }

    .title-area .title4 {
        margin-left: 5%;
    }

    .title-area .brush4 {
        top: 20px;
        left:  5%;
    }

    .title-area .title5 {
        margin-left: 5% !important; 
    }

    .title4.ml-title11, .title5.ml-title11 {
        margin-left: 12% !important;
    }

    .title-area .brush5 {
        top: 20px;
        left:  5%;
    }

    /* for maximun tab size when display: inline-flex */
    .section11 #data1,
    .section11 #data2,
    .section11 #data3,
    .section11 #data4,
    .section11 #data5 {
        width: 100%;
    }

    /* section 31 */
    .section31 {
        background-color: var(--background2);
        height: 2050px;
        z-index: 0;
        top: -5px;
    }  

    .section31 #data1,
    .section31 #data2,
    .section31 #data3  {
        width: 100%;
    }
 
    .section31 #data1,
    .section31 #data2,
    .section31 #data3   {
        background-color: var(--background);
        height: 543px;
        z-index: 0;
    }
    .section31 .description {
        font-size: 2em;
        margin-left: 10%;
        width: 1281px; 
        text-align: left;
        letter-spacing: 0px;
        margin-top: 25px;
    }
  
    .section31 .tab {
        margin-top: 78px; 
    }

    .section31 .tab-title {
        width: 257px;
        font-size: 2em; 
        text-align: center;
        padding-bottom:13px;
    }

    .section31 .tab .active {
        border-bottom: 8px solid var(--red2);
        animation-name: action;
        animation-duration: 0.5s;
        animation-timing-function: linear;
        animation-direction: alternate;
    }

    .section31 .content31 li  {
        font-size: 1.8em;
    }


    .section31  .description2  {
        width: 500px;
        font-size: 2em;
        text-align: left;
        letter-spacing: 0px; 
        margin-left: 1%;
        margin-top: 20px;
        padding: 1em;
    }
 
    .section31 .title3 {
        font-size: 3.2em;
        font-weight: 900;
        color: var(--red);
        letter-spacing: 6.4px;
    }

    .section31 .box {
        background-image: url('https://www.dstcm.com/themes/DST_TCM/assets/eczema/image/web/web03/Web03_box01.png');
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 100%;
        width: 419px;
        height: 527px;
        display: flex;
        justify-content: center;
    }

    .section31 .body-vtl {
        width: 1281px;
    }

    .section31 .title-bg {
        text-align: center;
        background-color: var(--background3);
        padding: 35px;
    }

    .section31 .title31 {  
        font-size: 3.2em;
        letter-spacing: 0px;
        color: var(--red2);
        margin-top: 2.7em; 
        font-weight:900; 
    }

    .section31 .box .content31 {
        width: 65%; 
        text-align: left;  
        padding-right: 10px;
        margin-right: 30px;
        line-height: 4em;
    }

    .section31 ul {
        margin-left: 3em;
    }

    .section31 .description33 {
        width: 50%; 
        font-size: 2em;
        display: flex;  
        line-height: 41px;
        justify-content: center; 
        margin-top: 53px;
    }

    .section31 .stick {
        font-size: 2em;
        color: var(--red2);
    }

    /* section 41 */ 
    .section41 {
        background-color: var(--background2);
        height: 5450px;
        z-index: 0;
    }   

    .section41 .title { 
        z-index: 2;
    }

    .section41 .brush { 
        z-index: 1;
    }

    .section41 .description {
        font-size: 2em;
        margin-left: 8%;
        width: 1281px;  
        text-align: left;
        letter-spacing: 0px;
        margin-top: 25px;
    }

    .section41 .image-group {
        margin-top: 55px !important;
        width: 1399px;
        margin: 0 auto;
    }
  
    .section41 .oval {
        margin-top: 350px; 
        height: 680px; 
    }

    .section41 .oval-center {
        left: 550px;
        top: 60px;
        z-index: 200; 
    }
 
    .section41 .oval01 {
        left: 256px;
        top: -280px; 
        z-index:100; 
    }

    .section41 .oval02 {
        left: 669px;
        top: -200px; 
        z-index:101;
    }

    .section41 .oval03 {
        left: 668px;
        top: -48px;
        z-index: 102;
    }

    .section41 .oval04 {
        left: 670px;
        top: 200px; 
        z-index:104;
    }

    .section41 .oval05 {
        left: 257px;
        top: 199px; 
        z-index:105;
    }

    .section41 .oval06 {
        left: 320px;
        top: 25px;
        z-index: 100;
    }
 

    .section41 .oval01:hover img,
    .section41 .oval02:hover img,
    .section41 .oval03:hover img,
    .section41 .oval04:hover img,
    .section41 .oval05:hover img,
    .section41 .oval06:hover img {
        cursor: pointer;   
    }

    .section41 .box {
        background-image: url('https://www.dstcm.com/themes/DST_TCM/assets/eczema/image/web/web04/Web04_box.png');
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
        width: 1167px;
        height: 746px;
    }


    .section41 .box .title2 {
        font-size: 30px;
        color: var(--red2);
        letter-spacing: 6px;
        width: 100%;
        font-weight: 900;
        text-align: center;
        padding-top: 85px;
    }


    .section41 .content .title2row {
        width: 680px;
        font-size: 4em;
        color: var(--red);
        font-weight: 900;
        text-align: center;  
        letter-spacing: 10px;
        z-index: 2;
    }

    .section41 .content .brush2row {
        top: 30px;
        z-index: 1;
    }

    .section41 .content .position {
        top: 50px;
    }

    .section41 .content {
        margin-top: 140px; 
    }

    .section41 .list-images {
        margin-top: 148px !important;
        width: 1167px;   
        margin: 0 auto; 
    }
 
    .section41 .box .content2 {
        width: 950px;
        margin: 0 auto; 
    } 

    .section41 .content2 .name, 
    .section41 .content2 .name2,
    .section41 .content2 .name22  {
        font-size: 2.4em;
        color: var(--red2);
        letter-spacing: 4.8px;
        font-weight: 900; 
    } 

    .section41 .content2 .name {
        padding-left: 100px;
    }

    .section41 .content2 .name2 {
        padding-left: 280px;
    }

    .section41 .content2 .content-description {
        font-size: 2em; 
        letter-spacing: 0px; 
        width: 355px;
        text-align: center;
    }

    .section41 .content2 .content-description2 {
        font-size: 100px; 
        font-weight: 900; 
        color: var(--red);
        text-align: center;
    }

    .section41 .small-text {
        right: 0;
        bottom: -20px;
    }

    .section41 .small-text .content-description3 {
        font-size: 1.5em;   
        text-align: center;
        width: 430px;
        letter-spacing: 3px; 
    } 

    .section41 .column3 {
        margin-left: 60px;
        margin-right: 60px;
    }

    .section41 .description33 {
        font-size: 2em;
        letter-spacing: 0px; 
    }
 
    .section41 .first33 {
        margin-left: 100px;
    }

    .section41 .second33 {
        margin-right: 60px;
    }
  
    .section41 .description44 {
        margin-top: 30px;
        font-size: 4em;
        color: var(--red2);
        font-weight: 900;
        letter-spacing: 10px;
    }


    /*section51 */
    .section51 {
        background-color: var(--background2);
        height: 4060px;
        z-index: 0; 
        top: -5px;
    }

    .section51 .title {
        width: 300px;
    } 

    .section51 .description {
        width: 1281px;
        font-size: 2em;
        margin-left: 8%;
        text-align: left;
        letter-spacing: 0px;
        margin-top: 25px;
    }

    .section51 .full-content {
        background-color: var(--background); 
        height: 1630px;
        padding: 49px;
    }

    .section51 .full-content .body51 {
        width: 1280px; 
        margin: 0 auto;  
    }

    .section51 .full-content .title-bg {
        background-color: var(--background2);
    }

    .section51 .full-content .title51 {
        padding-left: 45px;
        padding-top: 33px;
        padding-bottom: 33px;
        font-size: 3.2em;
        font-weight: 900;
        letter-spacing: 6.4px;
        color: var(--red);
    }

    .section51 .table51 tbody tr td {
        padding-left: 65px;
        padding-right: 120px;
        padding-top: 80px;
        padding-bottom: 80px;
        border: 1px solid var(--pagination-text);
        font-size: 2em;
        vertical-align: middle;
        letter-spacing: 0px;
        line-height: 40px;
    }

    .section51 .table51 thead tr td {
        background-color: var(--table-bg);
        padding: 29px 51px; 
        font-size: 2.4em;
        font-weight: 900;
        letter-spacing: 0px;
        border:  1px solid var(--pagination-text);
    }

    .section51 .title511 {
        font-size: 50px;
        font-weight: 900;
        color: var(--red);
        letter-spacing: 10px;
        width: 660px; 
    }

    .section51 .brush511 {
        top: 30px;
        z-index: -1;
    }

    .section51 .box51 {
        height: 880px;
        background-color: var(--background3);
        padding: 40px;
        margin-top: 58px;
    }

    .section51 .box51 .main-title {
        font-size: 3.2em;
        font-weight: 900;
        color: var(--red2);
        letter-spacing: 6.4px;
        line-height: 66px;
    }

    .section51 .box51 .main-description {
        font-size: 20px;
        letter-spacing: 0px;
        line-height: 41px;
    }

    .section51 .box51 .group-image51 {
        padding: 25px;
    }

    .section51 .box51 .small-content {
        padding-top: 10px;
        padding-left: 27px;
        padding-right: 27px;
    }

    .section51 .box51 .small-title {
        font-size: 2.4em;
        font-weight: 900;
        line-height: 40px;
        color: var(--red2);
        letter-spacing: 0px;
    }

    .section51 .box51 .small-description {
        font-size: 2em;
        width: 310px;
        letter-spacing: 0px;
        line-height: 41px;
    }

    /* section61 */
    .section61 {
        background-color: var(--background2);
        height: 2300px;
        z-index: 0;  
        top: 0px;
    }
  

    .section61 .pagination {
        width: 1268px;
        display: grid;
        grid-template-columns: repeat(3, 394px);
        row-gap: 31px;
        column-gap: 43px;
    }
 
    .section61 .image61 {
        width: 394px;
        height: 205px;
    }

    .section61 .bottom-panel { 
        padding: 5px;
        background-color: var(--background); 
    }

    .section61 .title61 {
        font-size: 1.8em;
        color: var(--red);
        font-weight: 900;
        letter-spacing: 0px;
    }

    .section61 .description61 {
        font-size: 1.5em;
        letter-spacing: 0px;
    }

    .section61 .detail-pagination {
        margin-top: 60px;
        width: 400px; 
    }

    .section61 .box {
        width: 40px;
        height: 40px;
        background-color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 5px;
        color: var(--pagination-text);
    }

    .section61 .detail-pagination .box.active {
        background-color: var(--red2);
        color: white; 
    }

    .section61 .brush {
        margin-top: 60px;
    }

    /* section71 */
    .section71 {
        background-color: var(--background2);
        height: 1350px;
        z-index: 0;
    }  

    .section71 .title {
        width: 380px;
    }

    .section71 .content {
        margin-top: 59px;
        margin-left: 4%;
    }

    .section71 .content .box {
        width: 625px;
        background-color: var(--background);
        padding: 10px;
    }

    .section71 .box .small-title {
        font-size: 20px;
        letter-spacing: 2px;
        
    }

    .section71 .button {
        margin-top: 64px;
        font-size: 24px;
        width: 211px;
        height: 55px; 
        color: white;
        background-color: var(--red2);
        border: none; 
    }


    /* section81 */
    .section81 {
        background-color: var(--background2);
        height: 1750px;
        z-index: 0;
    }  

    .section81 .flex {
        height: 500px;
    }

    .section81 .box  {
        margin-top: 44px;
        margin-left: 10%;   
    }
    
    .section81 .box .child-box {
        background-image: url('https://www.dstcm.com/themes/DST_TCM/assets/eczema/image/web/web08/Web08_box.png');
        background-repeat: no-repeat; 
        background-size: 100%;
        background-position: top center;
        width: 100%;
        height: 100%;
    } 

    .section81 .child-box .title {
        color: var(--red2);
        letter-spacing: 10px;
        font-size: 4em;
        font-weight: 700;
        width: 100%;
        text-align: center; 
    }

    .section81 .child-box .content  {  
        margin-left: 110px; 
    }

    .section81 .child-box .content .small-tilte {
        font-size: 1.6em;
        font-weight: 900;
    }

    .section81 .child-box .content .small-description {
        font-size: 1.6em;
        width: 300px;
    }

    .section81 .child-box .content table tr {
        margin-bottom: 100px;
    }

    .section81 .child-box .content table tr .top {
        vertical-align:top;
    }

    .section81 .child-box hr {
        width: 365px;
        background-color: white;
        height: 2px;
        margin-left: 22%;
    }

    .section81  table tr td{
        padding-bottom: 15px;
        
    }

    /* section91 */
    .section91 {
        background-color: var(--background2);
        height: unset;
        padding-bottom: 20px;
        z-index: 0;
    }  

    .section91 .title {
        width: 258px;
    }

    .section91 .questions {
        width: 1280px;
        margin-top: 82px !important;
        margin: 0 auto;
        text-align: center;
    }
  
    .section91 .questions .question{
        font-size: 2.4em;
        font-weight: 700;
    }

    .section91 .questions .answer{
        font-size: 2em;
        font-weight: 400;
        letter-spacing: 2px;
        width: 1280px;
        padding: 10px;
        text-align: left;
    }
 
    .section91 table tr{
        width: 1280px;
        margin: 0 auto;
        border: 1px solid var(--border-table);
    }

    .section91 table tr td {
        width: 1280px;
        text-align: center;
        padding-top: 20px;
        padding-bottom: 20px;
    } 
}


@media screen and (min-width: 1201px) and (max-width: 1281px) {
    .section1 .description { 
        padding: 20px;
    }
    .section41 .description { 
        margin-left: 5%;
        width: unset; 
    }
    .section41 .image-group { 
        width: unset;
    }  
    .section41 {  
        height:unset;
    }
    .section51 .full-content .body51 { 
        width: unset;
    }
    .section51 .full-content {
        height: unset;
    }
    .section51 {
        height: unset;
    }
    .section71 .content { 
        margin-left: 0;
        padding: 20px;
    }
    .section81 .box { 
        margin-left: 0;
    }
}























@media screen and (min-width: 1920px) { 

    #desktop {
        display: block;
    }


    .banner {
        height: 635px;
    }

    #mobile {
        display: none;
    }

    /* section 1 */
    .section1 {
        background-color: var(--background);
        height: 750px;
        z-index: 0;
    }  
 

    .title-area .title, 
    .title-area .title2,
    .title-area .title3,
    .title-area .title4,
    .title-area .title5  {
        font-size: 50px;
        color: var(--red);
        letter-spacing: 10px;        
        font-weight: 900;
        margin-left: 324px; 
        width: 250px;
        z-index: 3;
    }

    .title-area .brush, 
    .title-area .brush2,
    .title-area .brush3,
    .title-area .brush4, 
    .title-area .brush5 { 
        z-index: -1;
    }

    .section1 .brush, 
    .section11 .brush, 
    .section31 .brush,
    .section41 .brush,
    .section51 .brush,
    .section61 .brush,
    .section71 .brush,
    .section81 .brush,
    .section91 .brush { 
        top: 125px; 
        left: 300px;
    }

    .section1 .title,  
    .section11 .title, 
    .section31 .title,
    .section41 .title, 
    .section51 .title,
    .section61 .title ,
    .section71 .title,
    .section81 .title,
    .section91 .title  {
        padding-top: 93px; 
    }
 
    .section1 .docter-image {
        width: 770px;
        height: 445px;

    }
    .section1 .description {
        font-size: 20px;
        margin-left: 139px;
        width: 696px;
        height: 308px;
        text-align: left;
        letter-spacing: 0px;
        margin-top: 84px;
    }

    /* section 2 */
    .section2 {
        background-color: var(--background2);
        height: 1500px;
        z-index: 0;
    }

    .section2 .title {
        padding-top: 62px;
    }

    .section2 .brush { 
        top: 100px; 
        left: 300px;
    }

    .section2 .image-group {
        width: 1280px;
        max-width: 1280px;
        margin: 0 auto;
    }

    /* btn02 */ 
    .section11 {
        background-color: var(--background2);
        height: 920px;
        z-index: 0;
    }  

    .section11 .description {
        font-size: 20px;
        margin-left: 324px;
        width: 1281px; 
        text-align: left;
        letter-spacing: 0px;
        margin-top: 25px;
    }
  
    .section11 .tab {
        margin-top: 78px;
        margin-left: 325px; 
    }

    .section11 .tab-title {
        width: 257px;
        font-size: 20px; 
        text-align: center;
        padding-bottom:13px;
    }

    .section11 .tab .active {
        border-bottom: 8px solid var(--red2);
        animation-name: action;
        animation-duration: 0.5s;
        animation-timing-function: linear;
        animation-direction: alternate;
    }

    @keyframes action {
        0% {
            width: 257px;
        }
        50% {
            width: 240px;
        }
        100% {
            width: 257px;
        }
    }

    .section11 a, .section31 a {
        text-decoration: none;
        color: black;
    }

    .section11 #data1,
    .section11 #data2,
    .section11 #data3,
    .section11 #data4,
    .section11 #data5
    {
        background-color: var(--background);
        height: 543px;
        z-index: 0;
    }

    .tabcontent {
        padding-top: 79px;
    }

    .title-area .title2 {
        margin-left: 87px;
    }

    .title-area .brush2 {
        top: 0px;
        left: 90px;
    }

    .section11 #data1 .description2,
    .section11 #data2 .description2,
    .section11 #data3 .description3, 
    .section11 #data4 .description4,
    .section11 #data5 .description5 {
        width: 537px;
        font-size: 20px;
        text-align: left;
        letter-spacing: 0px; 
        margin-left: 87px;
        margin-top: 30px;
    }

    .title-area .title3 {
        margin-left: 87px;
    }

    .title-area .brush3 {
        top: 0px;
        left: 90px;
    }

    .title-area .title4 {
        margin-left: 87px;
    }

    .title-area .brush4 {
        top: 20px;
        left: 90px;
    }

    .title-area .title5 {
        margin-left: 87px;
    }

    .title-area .brush5 {
        top: 20px;
        left: 90px;
    }

    /* for maximun tab size when display: inline-flex */
    .section11 #data1,
    .section11 #data2,
    .section11 #data3,
    .section11 #data4,
    .section11 #data5 {
        width: 100%;
    }

    /* section 31 */
    .section31 {
        background-color: var(--background2);
        height: 2050px;
        z-index: 0;
        top: -5px;
    }  

    .section31 #data1,
    .section31 #data2,
    .section31 #data3  {
        width: 100%;
    }
 
    .section31 #data1,
    .section31 #data2,
    .section31 #data3   {
        background-color: var(--background);
        height: 543px;
        z-index: 0;
    }
    .section31 .description {
        font-size: 20px;
        margin-left: 324px;
        width: 1281px; 
        text-align: left;
        letter-spacing: 0px;
        margin-top: 25px;
    }
  
    .section31 .tab {
        margin-top: 78px; 
    }

    .section31 .tab-title {
        width: 257px;
        font-size: 20px; 
        text-align: center;
        padding-bottom:13px;
    }

    .section31 .tab .active {
        border-bottom: 8px solid var(--red2);
        animation-name: action;
        animation-duration: 0.5s;
        animation-timing-function: linear;
        animation-direction: alternate;
    }


    .section31  .description2  {
        width: 537px;
        font-size: 20px;
        text-align: left;
        letter-spacing: 0px; 
        margin-left: 87px;
        margin-top: 30px;
    }
 
    .section31 .title3 {
        font-size: 32px;
        font-weight: 900;
        color: var(--red);
        letter-spacing: 6.4px;
    }

    .section31 .box {
        background-image: url('https://www.dstcm.com/themes/DST_TCM/assets/eczema/image/web/web03/Web03_box01.png');
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 100%;
        width: 419px;
        height: 527px;
        display: flex;
        justify-content: center;
    }

    .section31 .body-vtl {
        width: 1281px;
    }

    .section31 .title-bg {
        text-align: center;
        background-color: var(--background3);
        padding: 35px;
    }

    .section31 .title31 {  
        font-size: 31px;
        letter-spacing: 0px;
        color: var(--red2);
        margin-top: 85px; 
        font-weight:900; 
    }

    .section31 .box .content31 {
        width: 65%; 
        text-align: left;  
        padding-right: 10px;
        margin-right: 30px;
        line-height: 41px;
    }

    .section31 ul {
        margin-left: 30px;
    }

    .section31 .description33 {
        width: 50%; 
        font-size: 20px;
        display: flex;  
        line-height: 41px;
        justify-content: center; 
        margin-top: 53px;
    }

    .section31 .stick {
        font-size: 20px;
        color: var(--red2);
    }

    /* section 41 */
    .section41 {
        background-color: var(--background2);
        height: 5450px;
        z-index: 0;
    }  

    
    .section41 .title {
        width: 480px;
        z-index: 2;
    }

    .section41 .brush { 
        z-index: 1;
    }


    .section41 .description {
        font-size: 20px;
        margin-left: 324px;
        width: 1281px;  
        text-align: left;
        letter-spacing: 0px;
        margin-top: 25px;
    }

    .section41 .image-group {
        margin-top: 55px !important;
        width: 1399px;
        margin: 0 auto;
    }
  
    .section41 .oval {
        margin-top: 350px; 
        height: 680px; 
    }

    .section41 .oval-center {
        left: 825px;
        top: 60px; 
        z-index: 200; 
    }
 
    .section41 .oval01 {
        left: 556px;
        top: -280px; 
        z-index:100; 
    }

    .section41 .oval02 {
        left: 969px;
        top: -200px; 
        z-index:101;
    }

    .section41 .oval03 {
        left: 969px;
        top: -47px;
        z-index: 102;
    }

    .section41 .oval04 {
        left: 970px;
        top: 200px; 
        z-index:104;
    }

    .section41 .oval05 {
        left: 557px;
        top: 199px; 
        z-index:105;
    }

    .section41 .oval06 {
        left: 612px;
        top: 19px;
        z-index: 100;
    }
 

    .section41 .oval01:hover img,
    .section41 .oval02:hover img,
    .section41 .oval03:hover img,
    .section41 .oval04:hover img,
    .section41 .oval05:hover img,
    .section41 .oval06:hover img {
        cursor: pointer;   
    }

    .section41 .box {
        background-image: url('https://www.dstcm.com/themes/DST_TCM/assets/eczema/image/web/web04/Web04_box.png');
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
        width: 1167px;
        height: 746px;
    }


    .section41 .box .title2 {
        font-size: 30px;
        color: var(--red2);
        letter-spacing: 6px;
        width: 100%;
        font-weight: 900;
        text-align: center;
        padding-top: 85px;
    }


    .section41 .content .title2row {
        width: 680px;
        font-size: 50px;
        color: var(--red);
        font-weight: 900;
        text-align: center;  
        letter-spacing: 10px;
        z-index: 2;
    }

    .section41 .content .brush2row {
        top: 30px;
        z-index: 1;
    }

    .section41 .content .position {
        top: 50px;
    }

    .section41 .content {
        margin-top: 140px; 
    }

    .section41 .list-images {
        margin-top: 148px !important;
        width: 1167px;   
        margin: 0 auto; 
    }
 
    .section41 .box .content2 {
        width: 950px;
        margin: 0 auto; 
    } 

    .section41 .content2 .name, 
    .section41 .content2 .name2,
    .section41 .content2 .name22  {
        font-size: 24px;
        color: var(--red2);
        letter-spacing: 4.8px;
        font-weight: 900; 
    } 

    .section41 .content2 .name {
        padding-left: 100px;
    }

    .section41 .content2 .name2 {
        padding-left: 280px;
    }

    .section41 .content2 .content-description {
        font-size: 20px; 
        letter-spacing: 0px; 
        width: 355px;
        text-align: center;
    }

    .section41 .content2 .content-description2 {
        font-size: 100px; 
        font-weight: 900; 
        color: var(--red);
        text-align: center;
    }

    .section41 .small-text {
        right: 0;
        bottom: -20px;
    }

    .section41 .small-text .content-description3 {
        font-size: 15px;   
        text-align: center;
        width: 430px;
        letter-spacing: 3px; 
    } 

    .section41 .column3 {
        margin-left: 60px;
        margin-right: 60px;
    }

    .section41 .description33 {
        font-size:20px;
        letter-spacing: 0px; 
    }
 
    .section41 .first33 {
        margin-left: 100px;
    }

    .section41 .second33 {
        margin-right: 60px;
    }
  
    

    .section41 .description44 {
        margin-top: 30px;
        font-size: 50px;
        color: var(--red2);
        font-weight: 900;
        letter-spacing: 10px;
    }


    /*section51 */
    .section51 {
        background-color: var(--background2);
        height: 4060px;
        z-index: 0; 
        top: -5px;
    }

    .section51 .title {
        width: 300px;
    } 

    .section51 .description {
        width: 1281px;
        font-size: 20px;
        margin-left: 324px; 
        text-align: left;
        letter-spacing: 0px;
        margin-top: 25px;
    }

    .section51 .full-content {
        background-color: var(--background); 
        height: 1630px;
        padding: 49px;
    }

    .section51 .full-content .body51 {
        width: 1280px; 
        margin: 0 auto;  
    }

    .section51 .full-content .title-bg {
        background-color: var(--background2);
    }

    .section51 .full-content .title51 {
        padding-left: 45px;
        padding-top: 33px;
        padding-bottom: 33px;
        font-size: 32px;
        font-weight: 900;
        letter-spacing: 6.4px;
        color: var(--red);
    }

    .section51 .table51 tbody tr td {
        padding-left: 65px;
        padding-right: 120px;
        padding-top: 80px;
        padding-bottom: 80px;
        border: 1px solid var(--pagination-text);
        font-size: 20px;
        vertical-align: middle;
        letter-spacing: 0px;
        line-height: 40px;
    }

    .section51 .table51 thead tr td {
        background-color: var(--table-bg);
        padding: 29px 51px; 
        font-size: 24px;
        font-weight: 900;
        letter-spacing: 0px;
        border:  1px solid var(--pagination-text);
    }

    .section51 .title511 {
        font-size: 50px;
        font-weight: 900;
        color: var(--red);
        letter-spacing: 10px;
        width: 660px; 
    }

    .section51 .brush511 {
        top: 30px;
        z-index: -1;
    }

    .section51 .box51 {
        height: 880px;
        background-color: var(--background3);
        padding: 40px;
        margin-top: 58px;
    }

    .section51 .box51 .main-title {
        font-size: 32px;
        font-weight: 900;
        color: var(--red2);
        letter-spacing: 6.4px;
        line-height: 66px;
    }

    .section51 .box51 .main-description {
        font-size: 20px;
        letter-spacing: 0px;
        line-height: 41px;
    }

    .section51 .box51 .group-image51 {
        padding: 25px;
    }

    .section51 .box51 .small-content {
        padding-top: 10px;
        padding-left: 27px;
        padding-right: 27px;
    }

    .section51 .box51 .small-title {
        font-size: 24px;
        font-weight: 900;
        line-height: 40px;
        color: var(--red2);
        letter-spacing: 0px;
    }

    .section51 .box51 .small-description {
        font-size: 20px;
        width: 310px;
        letter-spacing: 0px;
        line-height: 41px;
    }

    /* section61 */
    .section61 {
        background-color: var(--background2);
        height: 2000px;
        z-index: 0;  
        top: 0px;
    } 

    .section61 .pagination {
        width: 1268px;
        display: grid;
        grid-template-columns: repeat(3, 394px);
        row-gap: 31px;
        column-gap: 43px;
    }
 
    .section61 .image61 {
        width: 394px;
        height: 205px;
    }

    .section61 .bottom-panel { 
        padding: 5px;
        background-color: var(--background); 
    }

    .section61 .title61 {
        font-size: 24px;
        color: var(--red);
        font-weight: 900;
        letter-spacing: 0px;
    }

    .section61 .description61 {
        font-size: 20px;
        letter-spacing: 0px;
    }

    .section61 .detail-pagination {
        margin-top: 60px;
        width: 400px; 
    }

    .section61 .box {
        width: 40px;
        height: 40px;
        background-color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 5px;
        color: var(--pagination-text);
    }

    .section61 .detail-pagination .box.active {
        background-color: var(--red2);
        color: white; 
    }


    /* section71 */
    .section71 {
        background-color: var(--background2);
        height: 1350px;
        z-index: 0;
    }  

    .section71 .title {
        width: 380px;
    }

    .section71 .content {
        margin-top: 59px;
        margin-left: 315px;
    }

    .section71 .content .box {
        width: 625px;
        background-color: var(--background);
        padding: 10px;
    }

    .section71 .box .small-title {
        font-size: 20px;
        letter-spacing: 2px;
        
    }

    .section71 .button {
        margin-top: 64px;
        font-size: 24px;
        width: 211px;
        height: 55px; 
        color: white;
        background-color: var(--red2);
        border: none; 
    }


    /* section81 */
    .section81 {
        background-color: var(--background2);
        height: 2250px;
        z-index: 0;
    }  

    .section81 .box  {
        margin-top: 44px;
        margin-left: 252px;  
    }
    
    .section81 .box .child-box {
        background-image: url('https://www.dstcm.com/themes/DST_TCM/assets/eczema/image/web/web08/Web08_box.png');
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
        width: 750px;
        height: 650px; 
    } 

    .section81 .child-box .title {
        color: var(--red2);
        letter-spacing: 10px;
        font-size: 50px;
        font-weight: 700;
        width: 100%;
        text-align: center; 
    }

    .section81 .child-box .content  {  
        margin-left: 120px; 
    }

    .section81 .child-box .content .small-tilte {
        font-size: 24px;
        font-weight: 900;
    }

    .section81 .child-box .content .small-description {
        font-size: 18px;
        width: 324px;
    }

    .section81 .child-box .content table tr {
        margin-bottom: 100px;
    }

    .section81 .child-box .content table tr .top {
        vertical-align:top;
    }

    .section81 .child-box hr {
        width: 365px;
        background-color: white;
        height: 2px;
        margin-left: 25%;
    }

    .section81  table tr td{
        padding-bottom: 15px;
        
    }

    /* section91 */
    .section91 {
        background-color: var(--background2);
        height: unset;
        padding-bottom: 20px;
        z-index: 0;
    }  

    .section91 .title {
        width: 258px;
    }

    .section91 .questions {
        width: 1280px;
        margin-top: 82px !important;
        margin: 0 auto;
        text-align: center;
    }
  
    .section91 .questions .question{
        font-size: 24px;
        font-weight: 700;
    }

    .section91 .questions .answer{
        font-size: 20px;
        font-weight: 400;
        letter-spacing: 2px;
        width: 1280px;
        padding: 10px;
        text-align: left;
    }
 
    .section91 table tr{
        width: 1280px;
        margin: 0 auto;
        border: 1px solid var(--border-table);
    }

    .section91 table tr td {
        width: 1280px;
        text-align: center;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    
 
}