@media screen and (max-width: 1200px) {
    #app {
        width: calc(1200 / var(--viewwidth));;
    
    }
    .top {
        width:calc(1200 / var(--viewwidth));
    }
    .top img {
        width:calc(1200 / var(--viewwidth));
        height:auto;
    }
    .main_container {
        margin: auto;
        width:calc(1200vw / var(--viewwidth));
  
    }
    .a_area {
        width:calc(1147vw / var(--viewwidth));
        height:calc(430vw / var(--viewwidth));

    }
    .a_area_item {
        width:calc(270vw / var(--viewwidth));
        height:calc(270vw / var(--viewwidth));
        box-shadow: calc(3vw / var(--viewwidth)) calc(5vw / var(--viewwidth)) calc(10vw / var(--viewwidth)) rgba(180, 176, 154, 0.3);
    }
    .a_area_item_top {
        width:calc(270vw / var(--viewwidth));
        height:calc(51vw / var(--viewwidth));

        font-size:calc(28vw / var(--viewwidth));
        line-height: calc(51vw / var(--viewwidth));

    }
    .a_area_item_mid {
        width:calc(270vw / var(--viewwidth));
        height:calc(180vw / var(--viewwidth));

        font-size:calc(22vw / var(--viewwidth));
        line-height: calc(32vw / var(--viewwidth));


    }
    .a_area_item_bottom {
        width:calc(270vw / var(--viewwidth));
        height:calc(39vw / var(--viewwidth));

        font-size:calc(26vw / var(--viewwidth));
        line-height: calc(39vw / var(--viewwidth));

    
    }
    .a_area_arrow_l {
        width:calc(53vw / var(--viewwidth));
        height: calc(53vw / var(--viewwidth));



        left:0;
        top:50%;
        transform:translateX(-50%) translateY(-50%)
    }
    .a_area_arrow_r {
        width:calc(53vw / var(--viewwidth));
        height: calc(53vw / var(--viewwidth));


     
        right:0;
        top:50%;
        transform:translateX(50%) translateY(-50%)
    }
    .b_area {
        width:calc(1200vw / var(--viewwidth));
        height:calc((565vw + 494vw) / var(--viewwidth));

    }
    .b_area_title {
        width:calc(598vw / var(--viewwidth));
        line-height: 0;
    }
    .b_area_title img {
        width:calc(598vw / var(--viewwidth));
    }
    .area_padding {
        width:calc(1200vw / var(--viewwidth));
        height:calc(15vw / var(--viewwidth));
    }
    .b_area_1 {
        width:calc(1200vw / var(--viewwidth));
        height:calc((333vw + 511vw) / var(--viewwidth));

    }
    .b_area_box {
        width: calc(1072vw / var(--viewwidth));
        height: calc(221vw * 1.67 * 2 / var(--viewwidth));
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .b_area_item {
        width:calc(179vw * 1.67 / var(--viewwidth));
        height:calc(233vw * 1.67 / var(--viewwidth));

    }
    .b_area_item_top {
        font-size: calc(21vw * 1.67 / var(--viewwidth));
        line-height: calc(50vw * 1.67 / var(--viewwidth));
        left: calc(119vw / var(--viewwidth));
        top: calc(11vw / var(--viewwidth));
        position: absolute;
    }
    .b_area_item_mid {
        font-size: calc(18vw * 1.67 / var(--viewwidth));
        line-height: calc(28vw * 1.67 / var(--viewwidth));
        left: calc(70vw / var(--viewwidth));
        top: calc(102vw / var(--viewwidth));
    }
    
    .b_area_item_bottom {
        font-size: calc(18vw * 1.67 / var(--viewwidth));
        line-height: calc(20vw * 1.67 / var(--viewwidth));
        left: calc(60vw / var(--viewwidth));
        top: calc(266vw / var(--viewwidth));
    }
    .is_show {display: block;}

    .c_area {
        width:calc(1200vw / var(--viewwidth));
        background-color: #ffe367;
    }
    .c_area_title {
        width:calc(306vw / var(--viewwidth));
        line-height: 0;
    }
    .c_area_title img {
        width:calc(306vw / var(--viewwidth));
    }
    .c_area_1 {
        width:calc(1200vw / var(--viewwidth));
    }
    .c_area_padding_50 {
        width:calc(1200vw / var(--viewwidth));
        height:calc(50vw / var(--viewwidth));
    }
    .mskc_top {
        width:calc(1200vw / var(--viewwidth));
    }
    .xzskdd {
        font-size:0;
        line-height:0
    }
    .xzskdd img {
        width:calc(205vw / var(--viewwidth));
    }
    .c_area_padding_20 {
        width:calc(1200vw / var(--viewwidth));
        height:calc(20vw / var(--viewwidth));
    }

    .course_place {
        width:calc(1160vw / var(--viewwidth));
    }
    
    .course_place li {
        padding-bottom: calc(50vw / var(--viewwidth));
        width: calc(145vw / var(--viewwidth));
        height:calc(100vw / var(--viewwidth));
        background-size: calc(128vw / var(--viewwidth)) calc(50vw / var(--viewwidth));
    }
      
    .course_place li>a {
        font-size: calc(20vw / var(--viewwidth));
        height: calc(50vw / var(--viewwidth));
        line-height: calc(50vw / var(--viewwidth));
    }
    .course_place li.on,
    .course_place li:hover {
      width: calc(145vw / var(--viewwidth));
      height:calc(100vw / var(--viewwidth));
      padding-bottom: calc(50vw / var(--viewwidth));
      background-size: calc(128vw / var(--viewwidth)) calc(50vw / var(--viewwidth));
    } 
    
    .course_arrow {
        width: calc(12vw / var(--viewwidth));
        height: calc(4vw / var(--viewwidth));
        background-size: calc(12vw / var(--viewwidth)) calc(4vw / var(--viewwidth));
        top: calc(52vw / var(--viewwidth));
        left: calc(72vw / var(--viewwidth));
      }
    
      .course_show {
        min-width: calc(145vw / var(--viewwidth));
        padding: 0 calc(7vw / var(--viewwidth));
        border-radius: calc(30vw / var(--viewwidth));
        top:calc(56vw / var(--viewwidth));;
        left: 0;
        height:calc(38vw / var(--viewwidth));;
        line-height: calc(38vw / var(--viewwidth));
      }
      
      .course_show a {
        padding: 0 calc(15vw / var(--viewwidth));
        font-size:  calc(20vw / var(--viewwidth));
      }
      
      .course_show a:hover,
      .course_show a.active {
        font-size: calc(20vw / var(--viewwidth));
      }

    .mskc_bottom {
        width:calc(1200vw / var(--viewwidth));
    }
    .xzkcxl {
        font-size:0;
        line-height:0;
    }
    .xzkcxl img {
        width:calc(205vw / var(--viewwidth));
    }
    .course_type{
        width:calc(1160vw / var(--viewwidth));
    }
    .course_type li {
        width:  calc(230vw / var(--viewwidth));
        font-size: calc(16vw / var(--viewwidth));

        padding-bottom: calc(20vw / var(--viewwidth));

        background-size: calc(198vw / var(--viewwidth)) calc(50vw / var(--viewwidth));
    }
    
    .course_type li a.mskc_b_a {
        width: calc(190vw / var(--viewwidth));
        height:calc(50vw / var(--viewwidth));
        line-height: calc(26vw / var(--viewwidth));

        font-size: calc(20vw / var(--viewwidth));


      }

    .course_type li:hover,
    .course_type li.active {

      background-size: calc(198vw / var(--viewwidth)) calc(50vw / var(--viewwidth));

    } 
    #mskc_box {
        width:calc(1160vw / var(--viewwidth));
    
    }
    .mskc_cont {
        width:calc(1160vw / var(--viewwidth));
    }
    
    .mskc_text {
        width:calc(1160vw / var(--viewwidth));
        height: calc(220vw / var(--viewwidth));
        border-radius:  calc(10vw / var(--viewwidth));
        padding: calc(20vw / var(--viewwidth));
    }
    .more_btn {
        width:calc(136vw / var(--viewwidth));
        height: calc(36vw / var(--viewwidth));
        font-size: 0;
        line-height: 0;
      }
    
      .more_btn img {
        width:calc(136vw / var(--viewwidth));
      }
    .mskc_cont_padding {
        width:calc(1160vw / var(--viewwidth));
        height:calc(38vw /var(--viewwidth));
    }
    .class_area {
        width:calc(1160vw / var(--viewwidth));
        background-size: calc(1160vw / var(--viewwidth));
        border-radius: calc(10vw / var(--viewwidth));
    }
     .class_area table {
        width:calc(1160vw / var(--viewwidth));
     }
    
    .class_area table:first-of-type th {
        height:calc(50vw / var(--viewwidth));
        line-height:calc(50vw / var(--viewwidth));
        font-size:calc(23vw / var(--viewwidth));
    }
    .class_area table:first-of-type  td { 
        border:calc(1vw / var(--viewwidth)) solid #42a300;
        padding:calc(6vw / var(--viewwidth));
        font-size:calc(23vw / var(--viewwidth));
        min-width: calc(120vw/ var(--viewwidth));
     }
     .class_area table:first-of-type tr:nth-child(2) td {
        border-top:0;
      
     }
     .class_area table:first-of-type tr td:nth-child(1) {
        border-left:0;
     }
     .class_area table:first-of-type tr td:nth-child(1) {
        border-left:0;
     }
     .class_area table:first-of-type tr td:last-child {
        border-right:0;
     }
      
     .class_area table:first-of-type tr:last-child td {
        border-bottom:0;
     }
     .class_area table:first-of-type tr td:last-child img {
        width:calc(150vw / var(--viewwidth));
     }
    
    
     .d_area {
        width:100vw;
     }
    
     .d_area_padding_50 {
        width:calc(1200vw / var(--viewwidth));
        height:calc(50vw / var(--viewwidth));
    }
     
    .d_area_title {
        width:calc(444vw / var(--viewwidth));
        line-height: 0;
    }
    .d_area_title img {
        width:calc(444vw / var(--viewwidth));
    }  
    .d_area_padding_20 {
        width:calc(1200vw / var(--viewwidth));
        height:calc(20vw / var(--viewwidth));
    }
    .d_area_padding_32 {
        width:calc(1200vw / var(--viewwidth));
        height:calc(32vw / var(--viewwidth));
    }
    
    .course_type_omo {
        width:calc(1160vw / var(--viewwidth));
    }
    .course_type_omo li {
        width:  calc(230vw / var(--viewwidth));
        font-size: calc(16vw / var(--viewwidth));
        padding-bottom: calc(20vw / var(--viewwidth));
        background-size: calc(198vw / var(--viewwidth)) calc(50vw / var(--viewwidth));
    }
    
    .course_type_omo li a.mskc_b_a {
        width: calc(190vw / var(--viewwidth));
        height:calc(50vw / var(--viewwidth));
        line-height: calc(26vw / var(--viewwidth));
        font-size: calc(18vw / var(--viewwidth));
      }

    .course_type_omo li:hover,
    .course_type_omo li.active {
      background-size: calc(198vw / var(--viewwidth)) calc(50vw / var(--viewwidth));

    } 
    
    #omo_box {
        width:calc(1160vw / var(--viewwidth));
    }
    .omo_tab {
        width:calc(1160vw / var(--viewwidth));
    
    }
    
    .omo_cont {
        width:calc(1160vw / var(--viewwidth));
        min-height: calc(282vw / var(--viewwidth));
        
    }
    .omo_cont_item {
        width:calc(1160vw / var(--viewwidth));
        border-radius:calc(15vw / var(--viewwidth));
    }
    .omo_cont_item_box {
        width:calc(1160vw / var(--viewwidth));
        min-height: calc(227vw / var(--viewwidth));
    
    }
    .omo_title {
        width: calc(700vw / var(--viewwidth));
        height: calc(46vw / var(--viewwidth));
        left: calc(-10vw / var(--viewwidth));
        top: calc(-21vw / var(--viewwidth));
    }
    .omo_title_left {
        width:calc(67vw / var(--viewwidth));
        height:calc(46vw / var(--viewwidth));
    }
    .omo_title_mid {
        height:calc(46vw / var(--viewwidth));
        background-size: calc(11vw / var(--viewwidth)) calc(46vw / var(--viewwidth));
        line-height:calc(46vw / var(--viewwidth));
        font-size:calc(20vw / var(--viewwidth))
    }
    
    .omo_title_right {
        width:calc(40vw / var(--viewwidth));
        height:calc(46vw / var(--viewwidth));
        background-size: calc(40vw / var(--viewwidth)) calc(46vw / var(--viewwidth));
    }
    
    .omo_course_des {
        width:calc(700vw / var(--viewwidth));
        height:calc(200vw / var(--viewwidth));
        font-size:calc(16vw / var(--viewwidth));
    }

    .omo_course_price {
        width:calc(393vw / var(--viewwidth));
        height:calc(227vw / var(--viewwidth));
    }
    .omo_course_price_box {
        width:calc(289vw / var(--viewwidth));
        height:calc(182vw / var(--viewwidth));
    }
    .omo_course_price_1 {
      font-size:  calc(24vw / var(--viewwidth));
      line-height: calc(30vw / var(--viewwidth));
      text-shadow: 
      calc(-1vw / var(--viewwidth)) calc(-1vw / var(--viewwidth)) 0 black,
      calc(1vw / var(--viewwidth)) calc(-1vw / var(--viewwidth))  0 black,
      calc(-1vw / var(--viewwidth)) calc(1vw / var(--viewwidth)) 0 black,
      calc(1vw / var(--viewwidth)) calc(1vw / var(--viewwidth)) 0 black,
      calc(0vw / var(--viewwidth)) calc(2vw / var(--viewwidth)) 0 #333;
      font-weight: 600;
      font-family: Verdana, Geneva, Tahoma, sans-serif ;
    }
    .omo_course_price_1 span {
        font-size:calc(24vw / var(--viewwidth));
        line-height: calc(26vw / var(--viewwidth));
        text-shadow: 
        calc(-1vw / var(--viewwidth)) calc(-1vw / var(--viewwidth)) 0 black,
        calc(1vw / var(--viewwidth)) calc(-1vw / var(--viewwidth))  0 black,
        calc(-1vw / var(--viewwidth)) calc(1vw / var(--viewwidth)) 0 black,
        calc(1vw / var(--viewwidth)) calc(1vw / var(--viewwidth)) 0 black,
        calc(0vw / var(--viewwidth)) calc(2vw / var(--viewwidth)) 0 #333;
        font-weight:600;
        font-family: Verdana, Geneva, Tahoma, sans-serif ;
    }
    
    .omo_course_price_2 {
        width:calc(289vw / var(--viewwidth));
        height:calc(38vw / var(--viewwidth));
    }
    
    .omo_course_price_2 img {
        width:calc(128vw / var(--viewwidth));
    }
    .omo_cont_item_padding_40 {
        width:calc(1160vw / var(--viewwidth));
        height:calc(40vw / var(--viewwidth))
    }
    .omo_cont_item_padding_30 {
        width:calc(1160vw / var(--viewwidth));
        height:calc(40vw / var(--viewwidth))
    }
    .omo_show_hide {
        width: calc(136vw / var(--viewwidth));
        height: calc(36vw / var(--viewwidth));
    }
    .omo_show_hide img {
        width:calc(136vw / var(--viewwidth));
    }
    
    .e_area {
        width: calc(1200vw / var(--viewwidth));;
        background-color: #ffe367;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .e_area_padding_50 {
        width: calc(1200vw / var(--viewwidth));
        height: calc(50vw / var(--viewwidth));
    }
    .e_area_title {
        width:calc(598vw / var(--viewwidth));
    }
    .e_area_title img {
        width:calc(598vw / var(--viewwidth));
    }
    
    .e_area_1 {
        width: calc(1200vw / var(--viewwidth));
    }
    .netclass_box {
        height:calc(280vw / var(--viewwidth))
    }
    .netclass_item {
        width:calc(351vw / var(--viewwidth));
        height:calc(248vw / var(--viewwidth));
        border-radius: calc(15vw / var(--viewwidth));
    }
    
    .netclass_item img {
        width:calc(351vw / var(--viewwidth));
        height:calc(248vw / var(--viewwidth));
    }

    .f_area {
        width: calc(1200vw / var(--viewwidth));
        background-color: #ffc71e;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .f_area_padding_50 {
        width: calc(1200vw / var(--viewwidth));
        height: calc(50vw / var(--viewwidth));
    }
    .f_area_title {
        width:calc(603vw / var(--viewwidth));
        line-height: 0;
    }
    .f_area_title img {
        width:calc(603vw / var(--viewwidth));
    }
    
    .f_area_1 {
        width: calc(1200vw / var(--viewwidth));
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
    }
    .bookclass_box {
        display: flex;
        justify-content: center;
        align-items: center;
        height:calc(280vw / var(--viewwidth))
    }
    .bookclass_item {
        width:calc(351vw / var(--viewwidth));
        height:calc(248vw / var(--viewwidth));
        border-radius: calc(15vw / var(--viewwidth));
        background-color: #fff;
        overflow: hidden;
    }
    
    .bookclass_item img {
        width:calc(351vw / var(--viewwidth));
        height:calc(248vw / var(--viewwidth));
    }
    .g_area {
        width: calc(1200vw / var(--viewwidth));
    }
    .g_area_padding_50 {
        width: calc(1200vw / var(--viewwidth));
        height: calc(50vw / var(--viewwidth));
    }
    .g_area_title {
        width:calc(598vw / var(--viewwidth));
    }
    .g_area_title img {
        width:calc(598vw / var(--viewwidth));
    }
    .g_area_1 {
        width: calc(1200vw / var(--viewwidth));
        grid-template-columns: 1fr 1fr 1fr ;
    }
    .g_area_1_box {
        height:calc(256vw * 1.33 / var(--viewwidth));
    }
    .g_area_1_item {
        width: calc(274vw * 1.33 / var(--viewwidth));
        height: calc(223vw * 1.33 / var(--viewwidth));

    }
    .g_area_1_title {
        position: absolute;
        left: calc(-31vw * 1.33 / var(--viewwidth));
        top: calc(-12vw * 1.33 / var(--viewwidth));
        width: calc(180vw * 1.33 / var(--viewwidth));
        height: calc(60vw * 1.33 / var(--viewwidth));
    }
    .g_area_1_item_title {
        font-size: calc(24vw * 1.33 / var(--viewwidth));
        line-height: calc(32vw * 1.33 / var(--viewwidth));
        left: calc(41vw * 1.33 / var(--viewwidth));
        top: calc(4vw * 1.33 / var(--viewwidth));
    }
    .g_area_1_ellipse {
        position: absolute;
        left: calc(169vw * 1.33 / var(--viewwidth));
        top: calc(11vw * 1.33 / var(--viewwidth));
        width: calc(77vw * 1.33 / var(--viewwidth));
        height: calc(26vw * 1.33 / var(--viewwidth));
    }
    .g_area_1_item_padding {
        height: calc(30vw * 1.33 / var(--viewwidth));
        width:calc(274vw * 1.33 / var(--viewwidth));
    }
    .g_area_1_item_content {
        height: calc(174vw * 1.33 / var(--viewwidth));
        width:calc(274vw * 1.33 / var(--viewwidth));
        font-size:calc(18vw * 1.33 / var(--viewwidth));
        line-height:calc(34vw * 1.33 / var(--viewwidth));
    }
    .g_area_1_item_add {

        height: calc(41vw * 1.33 / var(--viewwidth));
        width: calc(41vw * 1.33 / var(--viewwidth));
        left: calc(278vw * 1.33 / var(--viewwidth));
        top: calc(117vw * 1.33 / var(--viewwidth));

    }
    .g_area_1_box:nth-of-type(4) .g_area_1_item_add {
        display: block;
    }
    .g_area_1_box:nth-of-type(3) .g_area_1_item_add {
        display: none;
    }
    .g_area_1_box:nth-of-type(6) .g_area_1_item_add {
        display: none;
    }
    .g_area_padding_67 {
        width: calc(1200vw / var(--viewwidth));
        height: calc(67vw / var(--viewwidth));
    }
    .g_area_2 {
        width: calc(1200vw / var(--viewwidth));
        height: calc(307vw / var(--viewwidth));
        border-radius: calc(24vw / var(--viewwidth));
      
    }
    .teacher_box {
        width: calc(1200vw / var(--viewwidth));
        height: calc(307vw / var(--viewwidth));

    }
    .teacher_img {
        top:calc(-62vw / var(--viewwidth));
        width: calc(227vw / var(--viewwidth));
        height: calc(369vw / var(--viewwidth));
    }
    .teacher_img img {
        width: calc(227vw / var(--viewwidth));
        height: calc(369vw / var(--viewwidth));
    }

    .teacher_detail {
        width: calc(638vw / var(--viewwidth));
        height: calc(232vw / var(--viewwidth));
    }
    
    .teacher_detail div {
        width: calc(638vw / var(--viewwidth));
    }
    
    .teacher_detail_padding_26 {
        width: calc(638vw / var(--viewwidth));
        height: calc(26vw / var(--viewwidth));
    }
    .teacher_detail_top {
        width: calc(638vw / var(--viewwidth));
        height: calc(40vw / var(--viewwidth));
        
        padding-left:calc(25vw / var(--viewwidth));
        background-size:  calc(6vw / var(--viewwidth)) calc(30vw / var(--viewwidth));
       
    }
    .teacher_detail_top div {
        width: calc(628vw / var(--viewwidth));
        height: calc(40vw / var(--viewwidth));
        font-size:calc(34vw / var(--viewwidth));
        line-height:calc(40vw / var(--viewwidth));
    }
    
    .teacher_detail_line {
    
        width:calc(638vw / var(--viewwidth));
        height: calc(1vw / var(--viewwidth));
    }
    .teacher_content {
        font-size: calc(18vw / var(--viewwidth));
    }
    .teacher_arrow {
        width: calc(48vw / var(--viewwidth));
        height: calc(156vw / var(--viewwidth));
        left: calc(1099vw / var(--viewwidth));
        top: calc(78vw / var(--viewwidth));
    }
    .teacher_arrow img {
      
        width:calc(48vw / var(--viewwidth));
        height:calc(73vw / var(--viewwidth));
    }
    .h_area {
        width: calc(1200vw / var(--viewwidth));
    }
    .h_area_padding_50 {
        width: calc(1200vw / var(--viewwidth));
        height: calc(50vw / var(--viewwidth));
    }
    .h_area_title {
        width:calc(661vw / var(--viewwidth));
        line-height: 0;
    }
    .h_area_title img {
        width:calc(661vw / var(--viewwidth));
    }
    .h_area_1 {
        width: calc(1200vw / var(--viewwidth));
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
    }
    .h_area_1_1 {
        height: calc(156vw * 2.1 / var(--viewwidth));
        background-size: calc(579vw * 2 / var(--viewwidth)) calc(156vw * 2 / var(--viewwidth));
    }
    .h_area_1_2 {
        height: calc(156vw * 2.1 / var(--viewwidth));
        background-size: calc(579vw * 2 / var(--viewwidth)) calc(156vw * 2 / var(--viewwidth));

    }
    .h_area_1_content {
        width:calc(530vw * 2 / var(--viewwidth));
        height: calc(102vw * 2 / var(--viewwidth));
        padding-top: calc(20vw * 2 / var(--viewwidth));
        font-size:calc(16vw * 2 / var(--viewwidth));
        line-height: calc(26vw * 2 / var(--viewwidth));
    }
    .h_area_2 {
        width: calc(1122vw / var(--viewwidth));
        display: grid;
        grid-template-columns: 1fr;
    }
    .h_area_2_1 {
        width:calc(354vw * 3 / var(--viewwidth));
        height: calc(164vw *3 / var(--viewwidth));
        border-radius:calc(15vw * 3 / var(--viewwidth));
    }
    
    .h_area_2_1 img {
        height:calc(164vw * 3 / var(--viewwidth))
    }
    .h_area_2_2 {
        width:calc(354vw * 3 / var(--viewwidth));
        height: calc(164vw * 3 / var(--viewwidth));
        border-radius:calc(15vw * 3 / var(--viewwidth));
    }
    
    .h_area_2_2 img {
        height:calc(164vw * 3 / var(--viewwidth))
    }
    .h_area_2_3 {
        width:calc(354vw * 3 / var(--viewwidth));
        height: calc(164vw * 3 / var(--viewwidth));
        border-radius:calc(15vw * 3 / var(--viewwidth));
    }
    
    .h_area_2_3 img {
        height:calc(164vw * 3 / var(--viewwidth))
    }
    .h_area_2_item {
        height:calc(164vw * 3.15 / var(--viewwidth))
    }
    .i_area {
        width: calc(1220vw / var(--viewwidth));
    }
    .i_area_padding_50 {
        width: calc(1200vw / var(--viewwidth));
        height: calc(50vw / var(--viewwidth));
    }
    .i_area_padding_18 {
        width: calc(1200vw / var(--viewwidth));
        height: calc(18vw / var(--viewwidth));
    }
    .i_area_title {
        width:calc(653vw / var(--viewwidth));
        line-height: 0;
    }
    .i_area_title img {
        width:calc(653vw / var(--viewwidth));
    }
    .i_area_1 {
        width: calc(1220vw / var(--viewwidth));
        display: grid;
        grid-template-columns: 1fr 1fr ;
    }
    .i_area_1_item {
        position: relative;
        height: calc(258vw * 2.2 / var(--viewwidth));
       
    }
    .i_area_1_item img {
        width:calc(283vw * 2 / var(--viewwidth));
    }
    .zxk_title_bg {
        width: calc(212vw * 2 / var(--viewwidth));
        height: calc(96vw * 2 / var(--viewwidth));
        top: calc(162vw * 2 / var(--viewwidth));
    }
    .zxk_title {
        top: calc(224vw * 2 / var(--viewwidth));
        width: calc(212vw * 2 / var(--viewwidth));
        height: calc(28vw * 2 / var(--viewwidth));
        font-size: calc(18vw * 2 / var(--viewwidth));
        line-height: calc(28vw * 2 / var(--viewwidth));
    }
    .j_area {
        width: calc(1200vw / var(--viewwidth));

    }
    .j_area_padding_50 {
        width: calc(1200vw / var(--viewwidth));
        height: calc(50vw / var(--viewwidth));
    }
    .j_area_padding_100 {
        width: calc(1200vw / var(--viewwidth));
        height: calc(100vw / var(--viewwidth));
    }
    .j_area_padding_18 {
        width: calc(1200vw / var(--viewwidth));
        height: calc(18vw / var(--viewwidth));
    }
    .j_area_title {
        width:calc(726vw / var(--viewwidth));

    }
    .j_area_title img {
        width:calc(726vw / var(--viewwidth));
    }
    .j_area_1 {
        width: calc(1093vw / var(--viewwidth));
        height:calc(9vw / var(--viewwidth));
        line-height: calc(9vw / var(--viewwidth));

    }
    .j_area_2 {
        width: calc(1112vw / var(--viewwidth));
        grid-template-columns: 1fr 1fr 1fr ;
    }
    .j_area_2_item {

        height:calc(234vw * 2 / var(--viewwidth));

    }
    .j_area_2_item:nth-of-type(1) {

        background-size: calc(154vw * 2 / var(--viewwidth)) calc(213vw * 2 / var(--viewwidth));
    }
    .j_area_2_item:nth-of-type(2) {

        background-size: calc(154vw * 2 / var(--viewwidth)) calc(213vw * 2 / var(--viewwidth));
    }
    .j_area_2_item:nth-of-type(3) {

        background-size: calc(154vw * 2 / var(--viewwidth)) calc(213vw * 2 / var(--viewwidth));
    }
    .j_area_2_item:nth-of-type(4) {
  
        background-size: calc(154vw * 2 / var(--viewwidth)) calc(213vw * 2 / var(--viewwidth));
    }
    .j_area_2_item:nth-of-type(5) {

        background-size: calc(154vw * 2 / var(--viewwidth)) calc(213vw * 2 / var(--viewwidth));
    }
    .j_area_2_item:nth-of-type(6) {

        background-size: calc(154vw * 2 / var(--viewwidth)) calc(213vw * 2 / var(--viewwidth));
    }
    .j_area_2_1 {

        font-size:calc(22vw * 2 / var(--viewwidth));
        top:calc(23vw * 2 / var(--viewwidth));

    }
    .j_area_2_2 {
        width:calc(154vw * 2 / var(--viewwidth));
        height:calc(188vw * 2 / var(--viewwidth));
        font-size:calc(16vw * 2 / var(--viewwidth));
        line-height: calc(22vw * 2 / var(--viewwidth));

    }
    .danmu {
        width:calc(1034vw / var(--viewwidth));
        height:calc(238vw / var(--viewwidth))
    }
    .danmu img {
        width:calc(1034vw / var(--viewwidth));
        height:calc(238vw / var(--viewwidth))
    }
    
    .zixun_btn {

        top:calc(10vw / var(--viewwidth));
        right:calc(60vw / var(--viewwidth))
    }
    .zixun_btn img {
        width:calc(121vw / var(--viewwidth));
        height:calc(44vw / var(--viewwidth))
    }


    .gjzq {
        width:calc(1092vw / var(--viewwidth));
        height:calc(290vw / var(--viewwidth));
    }

    .gjzq_item {
        padding-top:calc(78vw / var(--viewwidth));
        padding-left:calc(23vw / var(--viewwidth));
    }
    .gjzq_txt {
        padding-top:calc(53vw / var(--viewwidth));
        width:calc(180vw / var(--viewwidth));

        font-size: calc(20vw / var(--viewwidth));
        line-height:1.2;
 
    }

    .gjzq_txt img {
        width:calc(172vw / var(--viewwidth));
        height:1px;
        padding: 3px 0;
    }

    .area_title1 {
        width: calc(488vw / var(--viewwidth));
        height: calc(21vw / var(--viewwidth));
        font-size: calc(20vw / var(--viewwidth));
        line-height: calc(20vw / var(--viewwidth));
    
    }
    .area_padding_28 {
        width:100vw;
        height:calc(28vw / var(--viewwidth));
        line-height: calc(28vw / var(--viewwidth));
    }
   
    
   


  .close_bottom {
    
      height:calc(27vw / var(--viewwidth));
      right:calc(20vw / var(--viewwidth));
      bottom:calc(60vw / var(--viewwidth));
     
  }
  .close_bottom img {
   width:calc(27vw / var(--viewwidth));
   height:calc(27vw / var(--viewwidth));
  }
  .slogen2_layer {
   width:calc(158vw / var(--viewwidth));
   height:calc(100vw / var(--viewwidth));

  }
  .slogen2_layer img {
   width:calc(158vw / var(--viewwidth));
  }
  .gbottom_area {
    width:100vw;
    height:calc(101vw / var(--viewwidth))
  }
  .slogan_area1 img {
    width:calc(137vw / var(--viewwidth));
  }
  .slogan_area2 img {
    width:calc(330vw / var(--viewwidth));
  }
  .teacher_nav_btn {
    width:calc(1090vw / var(--viewwidth));
    height:calc(2vw / var(--viewwidth));
    }

    .swiper-button-next, .swiper-button-prev {
        top:calc(-20vw / var(--viewwidth));
 
        width:calc(40vw / var(--viewwidth));
        height:calc(40vw / var(--viewwidth));

        
    }
    .swiper-button-prev::after,.swiper-button-next::after {
        font-size:calc(20vw / var(--viewwidth));
    
    }

    .lianxi_area {
        width: calc(1200vw / var(--viewwidth));
        height: calc(493vw / var(--viewwidth));
    }
    .footer {
        width: calc(1200vw / var(--viewwidth));
        padding-top: calc(30vw / var(--viewwidth));
        padding-bottom: calc(30vw / var(--viewwidth));
    }
    .footer a {
        font-size:calc(20vw / var(--viewwidth))
      }
      
    .footer-tips {
        margin-bottom: calc(30vw / var(--viewwidth));
        font-size: calc(40vw / var(--viewwidth));
        font-weight: 600;
      }
      .region-change {
        margin-bottom: calc(16vw / var(--viewwidth));;
        font-size: calc(22vw / var(--viewwidth));;
        line-height: calc(50vw / var(--viewwidth));;
      }
      
      
      .region-change select {
        width: calc(330vw / var(--viewwidth));;
        height: calc(50vw / var(--viewwidth));;
        padding-left: calc(10vw / var(--viewwidth));;
        padding-right: calc(20vw / var(--viewwidth));;
        margin-left: calc(16vw / var(--viewwidth));;
        font-size: calc(20vw / var(--viewwidth));;
        background-size: calc(11vw / var(--viewwidth));;
        border-radius: calc(4vw / var(--viewwidth));;
      }
      
      .region-tab {
        font-size: calc(20vw / var(--viewwidth));;
        line-height: calc(36vw / var(--viewwidth));;
      }
      


      .phone p {
        margin-bottom: calc(20vw / var(--viewwidth));
        font-size: calc(18vw / var(--viewwidth));
      }


      .slogen2_layer {

        width: calc(158vw / var(--viewwidth));
        height: calc(100vw / var(--viewwidth));;
    }
    .slogen2_layer img {
        width: calc(158vw / var(--viewwidth));
    }
    .gbottom_area {
        width: 100vw;
        height: calc(105vw / var(--viewwidth));
        background: url("../images/xd.png") no-repeat;
    }
    .gbottom_area_content {
        width: calc(1200vw / var(--viewwidth));
        height: calc(105vw / var(--viewwidth));
    }

    .slogan_area1 img {
        width: calc(137vw / var(--viewwidth));
    }

    .bottom_text2 {
        width:calc(680vw / var(--viewwidth));
        height: calc(38vw / var(--viewwidth));
        line-height: calc(38vw / var(--viewwidth));
        font-size: calc(38vw / var(--viewwidth));
    }
    #slect_les {
        width: calc(184vw / var(--viewwidth));
        height: calc(43vw / var(--viewwidth));
    }
    .close_bottom {
        height: calc(27vw / var(--viewwidth));
        top: calc(13vw / var(--viewwidth));
        right: calc(20vw / var(--viewwidth));
        bottom: calc(60vw / var(--viewwidth));
    }

    .net_nav_btn {
        position: relative;
        width:calc(1090vw / var(--viewwidth))
      }
    
      .net_nav_btn .swiper-button-prev, .net_nav_btn .swiper-rtl .net_nav_btn .swiper-button-next {
        left: var(--swiper-navigation-sides-offset,calc(-38vw / var(--viewwidth)));
        right: auto;
        top: calc(-95.2vw / var(--viewwidth));
    
        color:#ffc71e
    }
    
    .net_nav_btn .swiper-button-next, .net_nav_btn .swiper-rtl .net_nav_btn .swiper-button-prev {
        right: var(--swiper-navigation-sides-offset,calc(-38vw / var(--viewwidth)));
        top: calc(-95.2vw / var(--viewwidth));
        left: auto;
        color: #ffc71e;
    }
    .swiper-button-next:after, .swiper-button-prev:after {
        font-family: swiper-icons;
        font-size: calc(40vw / var(--viewwidth));;
        text-transform: none!important;
        letter-spacing: 0;
        font-variant: initial;
        line-height: 1;
    }

    .book_nav_btn {
        position: relative;
        width:calc(1090vw / var(--viewwidth))
      }
    
      .book_nav_btn .swiper-button-prev, .book_nav_btn .swiper-rtl .book_nav_btn .swiper-button-next {
        left: var(--swiper-navigation-sides-offset,calc(-38vw / var(--viewwidth)));
        right: auto;
        top: calc(-95.2vw / var(--viewwidth));
    
        color:#ffc71e
    }
    
    .book_nav_btn .swiper-button-next, .book_nav_btn .swiper-rtl .book_nav_btn .swiper-button-prev {
        right: var(--swiper-navigation-sides-offset,calc(-38vw / var(--viewwidth)));
        top: calc(-95.2vw / var(--viewwidth));
        left: auto;
    
        color:#ffc71e;
    }
    .star {
        position: absolute;
        width: calc(58vw / var(--viewwidth));
        height: calc(56vw / var(--viewwidth));
        top: calc(41vw / var(--viewwidth));
        right: calc(-17vw / var(--viewwidth));
        z-index: 2;
    }
}