{include file='default/base/mall_top'/}

{block name="mall_main"}
<link rel="stylesheet" href="{$Think.HOME_SITE_ROOT}/new/css/index.css">
<link rel="stylesheet" href="{$Think.HOME_SITE_ROOT}/new/css/course.css">
<link rel="stylesheet" href="{$Think.HOME_SITE_ROOT}/new/css/semantic.min.css">
<link rel="stylesheet" href="{$Think.HOME_SITE_ROOT}/new/css/common.css" />

<style>
  .list-banner .con2 .filter-container {
    justify-content: flex-start;
  }

  .list-banner .con2 .filter-container>div {
    flex: none;
    width: calc((100% - .5rem * 3) / 4);
  }
  main .main-1 .container .item {
    height: 5rem;
    border-radius: .5rem;
    overflow: hidden;
  }
  main .main-1 .container .item .text{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    height: 100%;
  }
  main .main-1 .container .item .text h3{
    text-align: center;
  }
  main .main-1 .container .item{
    display: block !important;
  }
  main .main-1 .container .item,
  main .main-1 .container .item .img{
    height: auto;
  }
  main .main-1 .container .item .img img{
    height: auto;
    object-fit: unset;
  }
  .list-banner .con1 .left {
    margin: 4rem 0;
  }
  .list-banner .search-con .inp{
    width: 100%;
  }
  .list-banner .search-con .inp input{
    font-size: .9rem;
  }
  .hint-search-content .item.program-item{
    display: none;
  }
  .ui.form{
    max-height: 20rem;
    overflow-x: hidden;
    padding-bottom:1rem;
  }
</style>

<style>
  .list-banner .con2 .filter-container {
    justify-content: flex-start;
  }

  .list-banner .con2 .filter-container>div {
    flex: none;
    width: calc((100% - .5rem * 3) / 4);
  }
  .hint-search-content .program-item{
    display: none;
  }
  .bba{
      margin-right:4rem;
  }
  .label span:nth-of-type(3){
     width: 5rem;
  }
  .label span:nth-of-type(4){
     width: 5rem;
  }
  .label span:nth-of-type(5){
     width: 5rem;
  }
  .label span:nth-of-type(6){
     width: 5rem;
  }
  .label span:nth-of-type(7){
     width:7rem;
  }
  .linknone{
      border-bottom: 1px solid #C0C0C0!important;
      padding:1rem 0!important;
  }
  .linknone span{
    font-size:0.8rem;
    font-weight: 300;
    color: #8B8B8B;
  }
  .label span.b{
      font-size: 0.9rem;
  }
  @media screen and (max-width:768px) {
    .list-banner .con2 .filter-container {
      justify-content: space-between;
    }
  }
</style>

<div class="course-banner list-banner">
  <div class="main-center container">
   
    <div class="content con1">
      <div class="left">
        <h2 style="color: #3b52f6;">LightCourse</h2>
        <h2><span class="c2" style="font: inherit;">7000+ College </span>Course Store</h2>
      </div>
      <div class="img"><img src="" alt=""></div>
    </div>
   
 <div class="course-banner list-banner">
            <div class="main-center container">
                <div class="position">Position：Home > {$recommends.gc_name} </div>
                <div class="content con1">
                    <div class="left">
                        <h2>{$recommends.gc_name}</h2>
                      
                        <div class="des">
                          
                        </div>
                        <div class="tags" style="margin-top:60px;">
                          <h6>Related topics:</h6>
                          <div class="list">

                        {notempty name="recommend"}
                        {foreach name="recommend" key="goods_key" item="goods"}
                          <a href="/brand?c_id={$goods.gc_id}" style="color:lightblue;">{$goods.gc_name}</a>
                          <span style="margin-right:10px;">|</span>
                          {/foreach}
                         {/notempty}
                          </div>
                        </div>
                    </div>
                    <div class="img"><img src="" alt=""></div>
                </div>



      <script>
      
       $(".form-clk").click(function(){
        $(".form-wrap2").addClass("show")
      })
      
  
        $(".submit-btn a").click(function () {
          sessionStorage.setItem("flag", 1)
          var arr = []
          $.each($(".filter-container .field"), function () {
            if ($(this).find(".active").attr("value") != undefined) {
              arr.push($(this).find(".active").attr("value"))
            }
          })
          var str
          if (window.location.search !== "?a_id=0") {
            str = window.location.search;
            arr.forEach((item, index) => {
              str += "_"
              str += item
            });
          } else {
              str = "/brand?a_id="
              arr.forEach((item, index) => {
                if (index === 0) {
                  str += item
                } else {
                  str += "_"
                  str += item
                }
              });

          }
          window.location.href = str
        })
      </script>
    </div>
  </div>
</div>
<main>
  <section class="main-1">

    <div class="more-btn1">
      <div style="color:red;font-size:50px;"><span style="color:blue;font-size:50px;">Sub Discipline:&nbsp;</span>{$recommends.gc_name}</div>
    </div>
  </section>
 <section class="main-QA">
    <div class="main-center container">
      <div class="t">
        <h2>FAQ</h2>
        <div class="more-btn">
          <a href="/qa">Learn more</a>
        </div>
      </div>
      <div class="content">
        <ul id="accordion1" class="accordion">
          <li class="open">
            <div class="link">
              <h5><span>01. Registration Procedure </span> <i></i></h5>
            </div>
            <div class="submenu">
              <h6>1. Online Registration Procedure </h6>
              <p>Pay tuition - Select course - Course approval - Course registration - Sign the agreement - Receive
                student manual- Begin classes - Get grades - Send transcripts - Transfer credits</p>
            </div>
          </li>
          <li>
            <div class="link">
              <h5><span>02. Tuition/Fees</span> <i></i></h5>
            </div>
            <div class="submenu">
              <h6>1. Pricing</h6>
              <p>All courses offered on LightCourse are priced individually based on the institution offering the course. Please check the top right of the course page for specific prices or contact your advisor for a one-on-one consultation.</p>
              <h6>2. Payment</h6>
              <p>LightCourse offers a variety of payment methods. Tuition can be paid in USD or RMB, WeChat, Alipay, bank transfer, and PayPal transfer are all accepted.</p>
              <h6>3. Fees</h6>
              <p>The course price, application fee, and file management charge are included in the pricing. However, other fees—such as those covering course materials, third-party platforms such as Cengage, Labster, and other course-related costs such as VPN, accommodation, etc.—may apply. Contact your advisor for a one-on-one consultation.</p>
            </div>
          </li>

          <li>
            <div class="link">
              <h5><span>03. Select the Right Course(s) for You</span> <i></i></h5>
            </div>
            <div class="submenu">
              <h6>1. Choosing the best program/course for your needs</h6>
              <p>Throughout the year, LightCourse offers programs and courses from institutions around the world in a variety of disciplines, including engineering, business, natural sciences, social sciences, humanities, and arts. These courses are intended to meet the needs of a wide range of students seeking major, elective, and general education courses. There are a variety of study alternatives available, including online for-credit courses (live/recorded/self-paced) and in-person courses, as well as study abroad programs.
              </p>
              <p>LightCourse will provide you with an advisor who will work directly with you to help determine the best options for your needs.</p>
              <p>(Note: Since all courses have limited capacity, we recommend registering as soon as possible to ensure a spot.)</p>
            </div>
          </li>

          <li>
            <div class="link">
              <h5><span>04. Complete Course Approval</span> <i></i></h5>
            </div>
            <div class="submenu">
              <h6>1. Does my home school approve these courses?</h6>
              <p>LightCourse will provide you with an advisor who will provide you with one-on-one support throughout the transfer process according to your university's transfer credit policy to ensure that you can complete the credit transfer successfully.</p>
            </div>
          </li>


        </ul>
      </div>
    </div>
  </section>
</main>
{/block}
{include file='default/base/mall_footer'/}
<script>
  var index = new Swiper(".index-banner .swiper-container", {
    pagination: {
      el: ".index-banner .swiper-pagination",
      clickable: true,
    },
    navigation: {
      prevEl: ".index-banner .swiper-button-prev",
      nextEl: ".index-banner .swiper-button-next",
    },
  });
  var main2 = new Swiper(".main-2 .swiper-container", {
    slidesPerView: 4,
    spaceBetween: 60,
    navigation: {
      prevEl: ".main-2 .swiper-button-prev",
      nextEl: ".main-2 .swiper-button-next",
    },
    breakpoints: {
      320: {
        slidesPerView: 1,
        spaceBetween: 20
      },
      768: {
        slidesPerView: 1,
        spaceBetween: 20
      },
      1024: {
        slidesPerView: 4,
        spaceBetween: 60
      }
    }
  })
</script>