*{ margin: 0; padding: 0; }
    html{scroll-behavior: smooth;}


    #shopline-section-header{display: none;}
    :root {
        --tiao-red: #B0412D;
        --tiao-lightred: #F7F3EF;
        --tiao-lighttext:#E7DCD0;
        --tiao-dark: #231815;
        --tiao-grey: #333;
        --tiao-letter-space: 0.3em;
    }

    .page-tiao{color:var(--tiao-dark) }
    .page-tiao h1,
    .page-tiao h2,
    .page-tiao h3{padding: 0; margin: 0; letter-spacing: 0.05em}
    .page-tiao h3{font-weight: bold}
    .page-tiao h1{font-weight: bold}

    .page-tiao{width: 100%; margin: 0; padding: 0;}
    .hero-banner{height: 500px}
    .banner-dizi{background: url(images/banner-dizi.png) no-repeat; background-size: cover;}
    .banner-guzheng{background: url(images/banner-guzheng.png) no-repeat; background-size: cover;}
    .banner-erhu{background: url(images/banner-erhu.png) no-repeat; background-size: cover;}
    .banner-pipa{background: url(images/banner-pipa.png) no-repeat; background-size: cover;}



    section{width: 100%; margin: 20px 0 0 0; font-family: Arial}
    section div{margin: 0 20px}
    section.hero-banner{width: 100%; margin: 0; font-family: "Noto Serif TC", serif; position: relative;}
    section.hero-banner{color: #fff; display: flex; flex-direction: row; flex-wrap: nowrap;justify-content: center;align-items: center;align-content: flex-end;}
    section.hero-banner h1{text-indent: -9999px; background: url(images/tiaochinesemusic.svg) top center no-repeat; width: 100%; height: 50px;  background-size: contain;position: absolute; top: 15px}
    section.hero-banner h1{font-weight: 100; letter-spacing:0.25em; }
    section.hero-banner h2{font-weight: 100; letter-spacing:0.3em; }
    section.hero-banner h3{font-weight: 100; letter-spacing:0.23em;}
    section.hero-banner h2{font-size: 40px;writing-mode: vertical-rl; order: 1; margin: 0 10px -5px 0 }
    section.hero-banner h3{font-size: 20px;writing-mode: vertical-rl; margin: 0 -5px 0 0 }
    
    nav{width: 100%; font-size: 16px; margin: 0 0 15px 0 }
    nav ul{list-style: none; letter-spacing: 0.07em}
    nav ul a{text-decoration: none; line-height: 40px; display:block;  }
    nav ul.nav,
    nav ul.nav-main{height: 40px;}

    nav ul.nav{display: flex; justify-content: space-around;}
    nav ul.nav-main{display: flex; justify-content: space-around;border-bottom: 3px solid var(--tiao-red);}
    nav ul.nav-sub {display: inline-flex;}
    nav ul.nav-main li{width: 100% }

    nav ul.nav a{display: inline-flex; color: var(--tiao-lighttext) !important; font-weight: bold;}
    nav ul.nav-main a{ color: var(--tiao-red) !important;font-weight: bold ; width: 100%; display: flex; justify-content: center;}
    nav ul.nav-sub a{color:var(--tiao-dark) !important; margin: 5px 20px 0; font-weight: bold; padding: 0 5px }

    nav ul.nav a.current{color: var(--tiao-red) !important}
    nav ul.nav-main a.current{background: var(--tiao-red);color: #fff !important}
    nav ul.nav-sub a.current{border-bottom: 3px solid var(--tiao-red);}

    section h1{font-size: 22px}
    section h2{font-size: 18px; font-weight: normal}
    section ul{font-size: 15px; letter-spacing: 0.04em; margin: 10px 0 0 20px}
    section p{font-size: 15px; letter-spacing: 0.05em; margin: 10px 0 10px 0}
    section ul{list-style-position: inside;}

    .panel-scroll{overflow-x: scroll;}
    ul.list-pricing{list-style: none; width: max-content; font-family: Arial}
    ul.list-pricing{display: flex; flex-direction: row; margin: 0}
    ul.list-pricing li{background:var(--tiao-lightred); margin: 10px 3px 0 0; padding: 10px 20px 10px 10px; min-width: 170px; position: relative; }
    ul.list-pricing p{margin: -2px 0 15px 0}
    ul.list-pricing li:last-child{background:var(--tiao-dark); color: var(--tiao-lightred) }

    ul.list-pricing li{letter-spacing: 0.07em; line-height: 22px}
    ul.list-pricing h3{font-size: 18px; font-weight: bold; letter-spacing: 0.05em}
    ul.list-pricing h3:after{content: attr(title); font-weight: normal; font-size: 14px}
    ul.list-pricing p:after{content: attr(title); font-weight: normal; font-size: 14px}
    ul.list-pricing h4{font-weight: normal; font-size: 15px; line-height: 17px; margin: 0; padding: 0; letter-spacing: 0.02}
    ul.list-pricing span{text-align: center; margin: 3px 0 0; display: block; font-size: 14px; position: absolute; top: 145px}
    ul.list-pricing li{display: flex; justify-content: space-between; flex-direction: column;}


    ul.list-pricing li a{margin: 5px 0 0 0;  }
    .btn-cta{font-size: 18px}
    .btn-cta{display: flex; width: 100%; height: 40px; text-decoration: none;justify-content: center; align-items: center; font-weight: bold; background: var(--tiao-red); color: #fff !important}    
    ul.remark{list-style: none; font-size: 14px}

    .img-lesson{display: flex; flex-direction: row; width: max-content; margin:0 0 20px 0}
    .img-lesson img{height: 200px; margin: 0 10px 0 0}
    .img-tutor{ display: grid;
              grid-template-rows: auto auto auto ; /* 1 rows */
              grid-template-columns: auto auto ; /* 2 columns */
             gap: 12px; margin: 0 0 90px 0  }
    .tutor{background-image: var(--bg-image); background-size: cover; height: 110px; width: 100%; position: relative; border-radius: 3px; padding: 0; margin: 0 0 20px 0}
    .tutor:after{content: attr(title); width: 100%; text-align: center; top: 110px; position: absolute; }
    .img-item{ display: grid;
              grid-template-rows: auto; /* 1 rows */
              grid-template-columns: auto auto ; /* 2 columns */
             gap: 12px; margin: 0 0 90px 0  }
     .item{background-image: var(--bg-image); background-size: contain; height: 160px; width: 100%; position: relative; border-radius: 3px; padding: 0; margin: 0 0 20px 0}
     .item:after{content: attr(title); font-size: 13px; width: 100%; text-align: center; top: 220px; position: absolute; }
     .item:before{content: attr(price); font-size: 13px; width: 100%; text-align: center; top: 240px; position: absolute; color: var(--tiao-red) }
     .img-item a{position: absolute; top: 180px}


    section .demo-video iframe{width: 100%; height: 250px}

    section .demo-video{margin: 0 20px 50px 20px; text-align: center;}
    section .demo-shop{margin: 0 20px 20px 20px; text-align: center;}

    .tab-content {display: none;}
    .tab-content.active {  display: block;}


    .individual section ul{margin: 10px 0 0 0}
    .individual ul li{display: grid;
              grid-template-rows: auto; /* 1 rows */
              grid-template-columns: 1fr 1fr 1fr 1fr; /* 2 columns */
              }
    .individual ul li{height: 40px; line-height: 40px; margin: 0 0 2px 0}
    .individual ul li:nth-child(1){background:var(--tiao-lightred);  }
    .individual ul li p {margin: 0; line-height: 40px}
    .shop-panel img{width: 100%}

    .demo-video h3,
    .demo-shop h3{font-weight: bold; margin: 0 0 10px 0}


    @media screen and (min-width: 1200px) {
    .panel-scroll{overflow-x: scroll;}
    .panel-scroll.lesson{overflow-x: scroll;}
    .shop-panel{max-width: 414px; margin:90px auto; padding: 0 0 40px 0}
    section div{margin: 0}   
    section:not(.hero-banner){max-width: 900px; margin:20px auto 0}
    nav{max-width: 900px; margin:0 auto} 

    nav ul a{font-size: 20px}
    section h1{font-size: 24px}
    section h2{font-size: 20px; font-weight: normal}
    section ul{font-size: 17px; letter-spacing: 0.05em;}
    section p{font-size: 17px; letter-spacing: 0.05em; margin: 0}
    ul.list-pricing h3{font-size: 20px}
    ul.list-pricing {justify-content: space-between; width: auto;}
    ul.list-pricing li{width: 100%; min-width: 210px; padding: 20px; line-height: 26px}
    ul.list-pricing h3{font-size: 20px; line-height: 26px}
    ul.list-pricing h3:after{ font-size: 16px}
    ul.list-pricing p:after{ font-size: 16px}
    ul.remark{font-size: 16px}    
    ul.list-pricing span{top: 170px}
    

    nav ul.nav-sub a{margin: 8px 40px 0 0; padding: 0}
    section.hero-banner{height: 450px; width: 100%}
    .banner-dizi{background: url(images/banner-dizi-desktop.png) no-repeat; background-size: cover;}
    .banner-guzheng{background: url(images/banner-guzheng-desktop.png) no-repeat; background-size: cover;}
    .banner-erhu{background: url(images/banner-erhu-desktop.png) no-repeat; background-size: cover;}
    .banner-pipa{background: url(images/banner-pipa-desktop.png) no-repeat; background-size: cover;}

    section.hero-banner h1{width: 100%; height: 50px;background-size: contain;position: absolute; top: 20px}
    section.hero-banner h2{font-size: 40px;margin: 0 0 -50px}
    section.hero-banner h3{font-size: 20px;margin: 0 0 -43px}
   

    .img-lesson{justify-content: space-between;}
    .img-lesson img{height: 250px;}
    .tutor{height: 90px; margin: 0}
    .tutor:after{top: 90px}
    .btn-cta{height: 55px}
    .btn-cta:hover{opacity: 0.8}
        .img-tutor{ display: grid;
              grid-template-rows: auto; /* 1 rows */
              grid-template-columns: auto auto auto auto auto auto ; /* 2 columns */
             gap: 12px; margin: 0 0 90px 0  }
   
    .item{height: 180px}
    .item:after{top: 240px}
    .item:before{top: 260px}
    section .demo-video{margin: 0}
    section .demo-video iframe{height: 450px}

    .individual {max-width: 900px; margin: 40px auto}
    .individual ul li{margin: 0 0 10px 0}
    .individual .btn-cta{height: 40px}

    }