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

{block name="mall_main"}
<link rel="stylesheet" href="{$Think.HOME_SITE_ROOT}/new/css/index.css">
<style>
	.main-other-qa {
		display: none;
	}
	@media screen and (max-width: 1024px) {
		main .main-1 .container .item:nth-of-type(n+10) {
			display: none;
		}
	}
</style>
<script>
	$(document).ready(function() {
		$.each($("main .main-4 .container .item .t div span"), function() {
			$(this).text($(this).text().slice(0, 10))
		})
	})
</script>
<div class="index-banner">
	<div class="swiper-container">
		<div class="swiper-wrapper">
			<div class="swiper-slide">
				<div class="imgg"><img src="{$Think.HOME_SITE_ROOT}/new/images/banner-01.jpg" alt="See how LightCourse works"></div>
				<div class="index-banner-txt ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="0.2s">
					<ins>7000+</ins>
					<em> College Courses</em>
					<span>Earn Credits in<br />a More Flexible Way</span>
				</div>
				<a class="index-banner-btn ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="1s" swiper-animate-delay="0.2s" href="/document" target="_blank"><span>See how LightCourse works<em class="f-regular">></em></span></a>
				<div class="index-banner-float ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="0.2s"><img src="{$Think.HOME_SITE_ROOT}/new/images/banner-float.png" alt="图案"></div>
			</div>
			<div class="swiper-slide">
				<div class="imgg"><img src="{$Think.HOME_SITE_ROOT}/new/images/banner-02.jpg" alt="See how LightCourse works"></div>
				<div class="index-banner-txt ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="0.2s">
					<ins>7000+</ins>
					<em> College Courses</em>
					<span>Earn Credits in<br />a More Flexible Way</span>
				</div>
				<a class="index-banner-btn ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="1s" swiper-animate-delay="0.2s" href="/document" target="_blank"><span>See how LightCourse works<em class="f-regular">></em></span></a>
				<div class="index-banner-float ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="0.2s"><img src="{$Think.HOME_SITE_ROOT}/new/images/banner-float.png" alt="图案"></div>
			</div>
			<div class="swiper-slide">
				<div class="imgg"><img src="{$Think.HOME_SITE_ROOT}/new/images/banner-03.jpg" alt="See how LightCourse works"></div>
				<div class="index-banner-txt ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="0.2s">
					<ins>7000+</ins>
					<em> College Courses</em>
					<span>Earn Credits in<br />a More Flexible Way</span>
				</div>
				<a class="index-banner-btn ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="1s" swiper-animate-delay="0.2s" href="/document" target="_blank"><span>See how LightCourse works<em class="f-regular">></em></span></a>
				<div class="index-banner-float ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="0.2s"><img src="{$Think.HOME_SITE_ROOT}/new/images/banner-float.png" alt="图案"></div>
			</div>
			<!-- <div class="swiper-slide">
				<div class="imgg"><img src="{$Think.HOME_SITE_ROOT}/new/images/banner-04.jpg" alt="See how LightCourse works"></div>
				<div class="index-banner-txt ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="0.2s">
					<ins>7000+</ins>
					<em> College Courses</em>
					<span>Earn Credits in<br />a More Flexible Way</span>
				</div>
				<a class="index-banner-btn ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="1s" swiper-animate-delay="0.2s" href="/document" target="_blank"><span>See how LightCourse works<em class="f-regular">></em></span></a>
				<div class="index-banner-float ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="0.2s"><img src="{$Think.HOME_SITE_ROOT}/new/images/banner-float.png" alt="图案"></div>
			</div> -->
		</div>
	</div>
	<div class="index-banner-info">
		<div class="left">
			<h2>The Services<br />We Provide</h2>
			<span>7000+ College Courses</span>
		</div>
		<div class="right">
			<div class="item">
				<span>Featured For-Credit Courses</span>
				<em>In collaboration with our global partner institutions, LightCourse offers 7000+ accredited college courses encompassing 300+ majors and disciplines. Join us today to earn college credits in a flexible and saving way.</em>
			</div>
			<div class="item">
				<span>Study Abroad Programs</span>
				<em>Credit-bearing LightCourse study abroad programs are hosted by prestigious institutions in several global cities. Students can gain unique cultural experiences studying abroad throughout the summer in cities like San Francisco (USA), Florence (Italy), Seoul (South Korea), Tokyo (Japan), Shanghai (China), and Beijing (China).</em>
			</div>
		</div>
	</div>
</div>
<main>
	<section class="main-1">
		<div class="main-title">
			<h2>Featured For-Credit Courses</h2>
			<p>
				In collaboration with our global partner institutions, <br />
				LightCourse offers 7000+ accredited college courses encompassing 300+ majors and disciplines. <br />
				Join us today to earn college credits in a flexible and saving way.
			</p>
		</div>
		<div class="main-center container">
			{notempty name="recommend"}
			{foreach name="recommend" key="goods_key" item="goods"}
			<a href="{:url('/Goods/index',['goods_id'=>$goods.goods_id])}" target="_blank" class="item">
				<div class="img imgggg"><img src="{:goods_cthumb($goods.goods_image)}" alt="{$goods.goods_name}"></div>
				<ins class="pull-bg"></ins>
				<div class="icon-more"><img src="{$Think.HOME_SITE_ROOT}/new/images/icon-more.png" alt="查看详情"></div>
				<div class="text" num="1">
					<h3>{$goods.goods_name}</h3>
					<div class="par-con">
						<div class="par w100">
							<svg class="icon" aria-hidden="true">
								<use xlink:href="#icon-xianshangliuliang"></use>
							</svg>
							<em class="f-medium">Institution:</em>
							<span class="f-medium">{$goods.ke_simple_college}</span>
						</div>
						<div class="par w100">
							<svg class="icon" aria-hidden="true">
								<use xlink:href="#icon-shijian"></use>
							</svg>
							<em class="f-medium">Credit(s):</em>
							<span class="f-medium">{$goods.ke_credit}</span>
						</div>
						<div class="par w100">
							<svg class="icon" aria-hidden="true">
								<use xlink:href="#icon-rili"></use>
							</svg>
							<em class="f-medium">Start Date:</em>
							<span class="f-medium">{$goods.ke_start_time}</span>
						</div>
					</div>
				</div>
			</a>
			{/foreach}
			{/notempty}
		</div>
		<div class="more-btn1">
			<a href="/brand">View All Courses</a>
		</div>
	</section>
	<section class="main-2">
		<div class="main-title">
			<h2>Study Abroad Programs</h2>
			<p>
				Credit-bearing LightCourse study abroad programs are hosted by prestigious institutions in several
				global cities. <br>
				Students can gain unique cultural experiences studying abroad throughout the summer in cities like San
				Francisco (USA), <br>
				Florence (Italy), Seoul (South Korea), Tokyo (Japan), Shanghai (China), and Beijing (China).
			</p>
		</div>
		<div class="main-center container">
			<div class="swiper-container">
				<div class="swiper-wrapper">
					{notempty name="program"}
					{foreach name="program" item="val" key="key" }
					<!-- <a href="/home/search?cate_id={$val.gc_id}" class="swiper-slide item">-->
					<a href="/program" class="swiper-slide item">
						<div class="img"><img src="/uploads/home/common/{$val.gc_image}" alt=""></div>
						<!-- <div class="logo"><img src="/uploads/home/common/{$val.pro_logo}" alt=""></div> -->
						<div class="text">
							<p class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0">
								<em>Partner Institution</em>
								<span>{$val['class3'][0]['gc_name']}</span>
							</p>
							<p class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">
								<em>Program Name</em>
								<span>{$val.gc_name}</span>
							</p>
						</div>
					</a>
					{/foreach}
					{/notempty}
				</div>
				<div class="more-btn1">
					<a href="/program">View All Programs<em class="f-regular">></em></a>
				</div>
				<div class="swiper-button swiper-button-prev"></div>
				<div class="swiper-button swiper-button-next"></div>
			</div>
		</div>
	</section>
	<section class="main-3">
		<div class="main-title">
			<h2>Our Vision</h2>
			<p >{$wish_en}</p>
		</div>
	</section>
	<section class="main-4">
		<div class="main-title">
			<h2>LightCourse Blog</h2>
			<p>News and live information about light course.</p>
		</div>
		<div class="main-center container">
			{notempty name="article"}
			{foreach name="article" item="val" key="key" }
			<a href="/article/show?article_id={$val.article_id}" class="item">
				<div class="img">
					<img src="{:ds_get_pic(ATTACH_ARTICLE,$val.article_pic)}" alt="{$val['article_title']}">
					<ins class="pull-bg"></ins>
					<h3>{$val['article_title']}</h3>
					<!-- <em>NEWS</em>
					<span>{$val['article_date']}</span> -->
				</div>
				<div class="txt">
					{$val['article_desc']}
				</div>
			</a>
			{/foreach}
			{/notempty}
		</div>
		<div class="more-btn">
			<a href="/Article?ac_id=8" target="_blank">Learn More<em class="f-regular">></em></a>
		</div>
	</section>
</main>
{/block}


{include file='default/base/mall_footer'/}
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-EX6H2927S7"></script>
<script>
	window.dataLayer = window.dataLayer || [];
	function gtag() {
		dataLayer.push(arguments);
	}
	gtag('js', new Date());
	gtag('config', 'G-EX6H2927S7');
</script>
<script>
	var main1 = new Swiper('.index-banner .swiper-container',{
		loop:true,//开启循环播放
		autoplay: true, //自动播放
		effect : 'fade',//轮播的动效 默认为"slide"（普通位移切换），还可设置为"fade"（淡入）、"cube"（方块）、"coverflow"（3d流）、"flip"（3d翻转）、"cards"(卡片式)、"creative"（创意性）。
		fadeEffect: {
			crossFade: true,
		},
		on:{
			init: function(){
				swiperAnimateCache(this); // 隐藏动画元素 
				swiperAnimate(this); // 初始化完成开始动画
			}, 
			slideChangeTransitionEnd: function(){ 
				swiperAnimate(this); // 每个slide切换结束时也运行当前slide动画
				// this.slides.eq(this.activeIndex).find('.ani').removeClass('ani'); 动画只展现一次，去除ani类名
			},
		}
	});
	
	var main2 = new Swiper(".main-2 .swiper-container", {
		loop:false,//开启循环播放
		autoplay: true, //自动播放
		effect : 'fade',//轮播的动效 默认为"slide"（普通位移切换），还可设置为"fade"（淡入）、"cube"（方块）、"coverflow"（3d流）、"flip"（3d翻转）、"cards"(卡片式)、"creative"（创意性）。
		fadeEffect: {
			crossFade: true,
		},
		navigation: {
			prevEl: ".main-2 .swiper-button-prev",
			nextEl: ".main-2 .swiper-button-next",
		},
		on:{
			init: function(){
				swiperAnimateCache(this); // 隐藏动画元素 
				swiperAnimate(this); // 初始化完成开始动画
			}, 
			slideChangeTransitionEnd: function(){ 
				swiperAnimate(this); // 每个slide切换结束时也运行当前slide动画
				// this.slides.eq(this.activeIndex).find('.ani').removeClass('ani'); 动画只展现一次，去除ani类名
			},
		}
	})
</script>