:root {
	--view-width: 92%;
}

@media (max-width: 375px) {
	:root {
		--view-width: 94%;
	}
}

@media (min-width: 430px) {
	body {
		align-items: center;
	}
}

body {
	display: flex;
	flex-direction: column;
	margin: 0;
	color: #3D3D3D;
	overflow-x: hidden;
	font-size: 14px;
	letter-spacing: 1px;
	user-select: none;
	font-family: "Microsoft YaHei", sans-serif;
}

#app {
	width: 100%;
	max-width: 430px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

*,
*:before,
*:after {
	box-sizing: border-box;
	padding: 0px;
	margin: 0px;
}


a,
a:link,
a:visited,
a:hover,
a:active,
a:focus {
	color: inherit;
	text-decoration: none;
	background-color: transparent;
	cursor: pointer;
	outline: none;
	-webkit-tap-highlight-color: transparent;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: normal;
}

ul {
	list-style: none;
}


#banner {
	width: 100%;
	height: auto;
	overflow: hidden;
}

#banner img {
	width: 100%;
	height: auto;
	display: block;
	vertical-align: top;
}

/* 页面顶部 */
.topbanner {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.topbanner_wrap {
	width: var(--view-width);
	padding: 12px 0px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.topbanner_wrap .topbanner_logo {
	width: 96px;
	height: 25px;
}

.topbanner_btn {
	text-align: center;
	padding: 6px 20px;
	font-size: 14px;
	color: #ffffff;
	background: #d27c00;
	border-radius: 54px;
	box-shadow: 0px 4px 10px 0px rgba(210, 124, 0, 0.33);
	cursor: pointer;
}

/* 共同样式*/
.section1,
.section2,
.section3,
.section4,
.section5,
.section6,
.section7,
.section8,
.section9,
.section10,
.section11 {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	box-sizing: border-box;
	overflow: hidden;
}

/* section1为什么要提前获得枫叶卡 */
.section1 {
	padding-top: 50px;
	padding-bottom: 30px;
	background: #F2F3F5;
}

.advance {
	width: 100%;
	padding-top: 30px;
	display: flex;
	flex-direction: column;
	align-items: center;
	box-sizing: border-box;
}

.advance_left {
	width: 100%;
	padding-top: 18px;
	padding-bottom: 24px;
	display: flex;
	flex-direction: column;
	align-items: center;
	box-sizing: border-box;
	overflow: hidden;
	background-image: url("../images/bg1.jpg");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	border-radius: 16px;
}

.advance_left_title {
	width: 64%;
	height: 32px;
	min-width: 220px;
	margin-bottom: 18px;
	background: #ffffff;
	border-radius: 32px;
	color: #d27c00;
	font-size: 18px;
	font-weight: 600;
	line-height: 32px;
	text-align: center;
}

.advance_left_subtitle {
	width: 100%;
	height: 32px;
	margin-bottom: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.28);
	color: #ffffff;
	font-size: 14px;
	line-height: 32px;
	text-align: center;
}

.advance_left_subtitle .line {
	display: inline-block;
	width: 2px;
	height: 16px;
	background: #ffffff;
	margin-right: 6px;
}

.advance_left_card {
	width: var(--view-width, 93%);
	padding-top: 20px;
	padding-left: 16px;
	padding-right: 16px;
	padding-bottom: 24px;
	display: flex;
	flex-direction: column;
	align-items: center;
	background: #ffffff;
	border-radius: 16px
}

.advance_left_card .card_title {
	color: #d27c00;
	font-size: 16px;
	font-weight: 600;
	padding-bottom: 14px;
}

.advance_left_card .card_item {
	width: 100%;
	padding: 16px 20px;
	margin-bottom: 16px;
	border: 1px solid #d27c00;
	border-radius: 16px;
}

.advance_left_card .card_item_info {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.advance_left_card .card_item_info .name {
	width: max-content;
	padding-bottom: 4px;
	margin-bottom: 16px;
	color: #D94A4A;
	font-size: 16px;
	font-weight: 600;
	position: relative;
}

.advance_left_card .card_item_info .name::after {
	content: '';
	width: 100%;
	height: 2px;
	background: #D94A4A;
	position: absolute;
	left: 0px;
	bottom: 0px;
}

.advance_left_card .card_item_info .p {
	color: #000000;
	font-size: 14px;
	font-weight: 600;
}

.advance_left_card .card_item_info .icon {
	width: 60px;
	height: 60px;
}

.advance_left_card .card_item_RMB {
	width: 100%;
	height: 30px;
	margin-top: 10px;
	box-sizing: border-box;
	background: #D27C00;
	border-radius: 40px;
	align-items: center;
	color: #ffffff;
	font-size: 14px;
	font-weight: 600;
	line-height: 30px;
	text-align: center;
}

/* .advance_left_card .card_item_RMB span {
	font-size: 16px;
} */

.advance_left_card .card_item2 {
	width: 100%;
	padding: 16px 10px;
	display: flex;
	flex-direction: column;
	align-items: center;
	border: 1px solid #d27c00;
	border-radius: 16px;
	color: #000000;
	font-size: 14px;
}

.advance_left_card .card_item2_RMB {
	color: #d27c00;
	font-size: 14px;
	font-weight: 600;
	padding-bottom: 7px;
}

.advance_left_card .card_item2_RMB span {
	font-size: 20px;
}

.card_tips {
	width:100%;
    text-align: center;
	color: #939393;
	font-size: 13px;
	padding-top: 26px;
}

/* section2 加拿大曼省留学移民项目*/
.section2 {
	padding-top: 50px;
	padding-bottom: 30px;
	background: #ffffff;
}

.intro {
	width: var(--view-width, 92%);
	padding-top: 20px;
}

.intro_img {
	width: 160px;
	height: 230px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	float: right;
	position: relative;
}

.intro_img .img {
	position: relative;
	z-index: 2;
}

.intro_img .img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.intro_img::before {
	content: "";
	width: 84px;
	height: 226px;
	background: #62627B;
	position: absolute;
	left: 50%;
	top: 0px;
	transform: skewX(-18deg) translateX(-50%);
	z-index: 1;
}

.intro_desc {
	color: #000000;
	font-size: 14px;
	letter-spacing: 1px;
	padding-right: 8px;
	line-height: 24px;
}

/* section3  曼省留学移民基本申请要求*/
.section3 {
	padding-top: 50px;
	padding-bottom: 50px;
	background-image: url("../images/bg2.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.require {
	width: var(--view-width, 92%);
	padding: 50px 16px;
	background: #ffffff;
	display: flex;
	flex-direction: column;
	align-items: center;
	box-sizing: border-box;
	border-radius: 8px;
}

.require_content {
	width: 100%;
	padding-top: 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	box-sizing: border-box;
	overflow: hidden;
}

.require_img {
	width: 100%;
	height: auto;
	border-radius: 50%;
	box-sizing: border-box;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.require_img .img {
	width: 100%;
	height: auto;
	object-fit: cover;
}

.require_ul {
	width: 100%;
	padding-top: 14px;
}

.require_li {
	width: 100%;
	height: 74px;
	display: flex;
	align-items: center;
	background: #F3F1ED;
	border-radius: 60px;
	margin-top: 16px;
}

.require_li_label {
	width: 112px;
	height: 74px;
	min-width: 112px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #D27C00;
	border-radius: 60px 0px 0px 60px;
	color: #ffffff;
	font-size: 16px;
	font-weight: 600;
}

.require_li_value {
	flex: 1;
	color: #000000;
	font-size: 14px;
	padding-left: 10px;
	padding-right: 20px;
	letter-spacing: 2px;
}

/* section4 曼省留学移民IES类别申请要求 */
.section4 {
	padding-top: 50px;
	padding-bottom: 50px;
	background: #FFFFFF;
}


.column {
	width: 100%;
	height: 330px;
	margin-top: 30px;
	display: flex;
	flex-direction: column;
	align-items: center;
	background-image: url("../images/box_bg.png");
	background-repeat: no-repeat;
	background-size: auto auto;
	background-position: center bottom;
}

.column_shadow {
	width: 218px;
	height: 21px;
	background: linear-gradient(180deg, rgba(200, 134, 37, 0.61) 0%, rgba(229, 202, 163, 0) 100%);
}

.column_items {
	width: 100%;
	height: 300px;
	box-sizing: border-box;
	overflow: hidden;
	position: relative;
}

/* 项目 */
.column_item_wrap {
	display: none;
	transition: all 0.5s ease;
}

.column_items .column_item_wrap .card .card_img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	left: 0px;
	bottom: 0px;
	z-index: 1;
}

/* 中间项 */
.column_items .column_item_wrap:nth-child(2) {
	width: 218px;
	height: 300px;
	position: absolute;
	left: 50%;
	bottom: 0px;
	transform: translateX(-50%);
	display: block;
	z-index: 4;
}

.column_items .column_item_wrap:nth-child(2) .card {
	width: 218px;
	height: 300px;
	border-radius: 10px;
	box-sizing: border-box;
	overflow: hidden;
	position: relative;
}



.column_items .column_item_wrap:nth-child(2) .card .card_mask {
	width: 218px;
	height: 148px;
	padding-top: 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	background-image: url("../images/IES_boxbg.png");
	background-size: 100% 100%;
	position: absolute;
	left: 0px;
	bottom: -2px;
	z-index: 2;
	visibility: visible;
	opacity: 0;
	/* 初始透明 */
	animation: fadeInMask 0.5s ease-out 0.2s forwards;
}

@keyframes fadeInMask {
	from {
		opacity: 0;
		transform: translateY(20px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.column_items .column_item_wrap:nth-child(2) .card .card_mask_order {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	box-sizing: border-box;
	overflow: hidden;
	text-align: center;
	line-height: 34px;
	border: 1px solid #ffffff;
	color: #ffffff;
	font-size: 20px;
	font-weight: 600;
}

.column_items .column_item_wrap:nth-child(2) .card .card_mask_desc {
	flex: 1;
	display: flex;
	align-items: center;
	padding: 0 8px;
	color: #ffffff;
	font-size: 16px;
	font-weight: 600;
}


/* 左右两项 */
.column_items .column_item_wrap:nth-child(1),
.column_items .column_item_wrap:nth-child(3) {
	width: 176px;
	height: 240px;
	border-radius: 8px;
	box-sizing: border-box;
	overflow: hidden;
	position: absolute;
	bottom: 38px;
	display: block;
	z-index: 1;
}

.column_items .column_item_wrap:nth-child(1) .card,
.column_items .column_item_wrap:nth-child(3) .card {
	width: 176px;
	height: 240px;

}

.column_items .column_item_wrap:nth-child(1) {
	transform: rotate(-15deg);
	left: 56px;
}

.column_items .column_item_wrap:nth-child(3) {
	transform: rotate(15deg);
	right: 56px;
}

/* section5 曼省留学移民（IES通道）重要时间节点 */
.section5 {
	padding-top: 50px;
	padding-bottom: 50px;
	background: #F2F3F5;
}

.history {
	width: var(--view-width, 92%);
	padding-top: 50px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.history_list {
	width: 358px;
	display: flex;
	justify-content: space-between;
}

.history_item {
	width: 147px;
	height: 74px;
	margin-bottom: 16px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	letter-spacing: 0px;
	background: #FFFFFF;
	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.08);
	border-radius: 8px;
	position: relative;
}

.history_item .history_item_time {
	color: #000000;
	font-size: 16px;
}

.history_item_desc {
	color: #D27C00;
	font-size: 16px;
}

.history_item_circle {
	width: 16px;
	height: 16px;
	position: absolute;
	top: 50%;
	margin-top: -8px;
}

.history_list .history_list_left,
.history_list .history_list_right {
	width: 147px;
}

.history_list .history_list_left .history_item_circle {
	right: -4px;
}

.history_list .history_list_right .history_item_circle {
	left: -4px;
}

.history_list .history_list_right {
	padding-top: 36px;
}

.history_list_node {
	width: 64px;
	height: 400px;
	margin-top: 18px;
}

.history_list_node img {
	width: 100%;
}


/* tips */
.history_tips {
	width: var(--view-width, 92%);
	padding-top: 20px;
}

.history_tips p {
	color: #939393;
	font-size: 13px;
	padding-bottom: 4px;
}

/* section6 曼省留学移民项目院校推荐 */
.section6 {
	padding-top: 50px;
	padding-bottom: 50px;
	background-image: url("../images/bg2.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.school_content {
	width: var(--view-width, 92%);
	padding: 50px 8px;
	background: #F2F3F5;
	display: flex;
	flex-direction: column;
	align-items: center;
	box-sizing: border-box;
	border-radius: 8px;
}

.school {
	width: 100%;
	/* height: 708px; */
	padding-bottom: 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
}

.school_bg {
	width: calc(100% - 16px);
	height: 300px;
	background: #F6D5A4;
	border-radius: 8px;
	position: absolute;
	bottom: 10px;
	z-index: 1;
}

.school_mail {
	width: 100%;
	height: 142px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	background-image: url("../images/mail.png");
	background-size: 100% auto;
	background-repeat: no-repeat;
	position: absolute;
	bottom: 0px;
	z-index: 3;
}

.school_mail_btn {
	width: 70px;
	height: 70px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: #D27C00;
	border-radius: 50%;
	color: #ffffff;
	font-size: 14px;
}

.school_list {
	width: calc(100% - 32px);
	height: 730px;
	padding-bottom: 110px;
	display: flex;
	flex-direction: column;
	align-items: center;
	box-sizing: border-box;
	background: #ffffff;
	border-radius: 10px;
	box-shadow: 0px 0px 14px 0px rgba(85, 50, 0, 0.2);
	position: relative;
	z-index: 2;
}

.school_item {
	width: 100%;
	height: 50px;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 14px 16px;
	box-sizing: border-box;
	background: #ffffff;
	border-radius: 10px 10px 0px 0px;
	box-shadow: 0px -7px 7px 0px rgba(85, 50, 0, 0.1);
	transition: all 0.3s ease;
}

.school_list .school_item:first-child {
	box-shadow: none;
}

.school_item_name {
	width: 100%;
	text-align: center;
	color: #D27C00;
	font-size: 16px;
}

.school_item_ul {
	display: none;
	list-style: none;
	padding: 20px 0px 0px 0px;
	margin: 0;
}

.school_item .school_item_ul li {
	margin-bottom: 16px;
	color: #000000;
	font-size: 14px;
	line-height: 20px;
	opacity: 0;
	transform: translateY(10px);
}

.school_item .school_item_ul li .label {
	font-weight: 600;
}

.school_item_active {
	width: 100%;
	flex: 1;
	padding-top: 24px;
	padding-bottom: 20px;
	transition: height 0.5s;
}

.school_item_active .school_item_name {
	font-weight: 600;
}

.school_item_active .school_item_ul {
	display: block;
}

.school_item_active .school_item_ul li {
	animation: fadeInUp 0.5s ease forwards;
}

.school_item_active .school_item_ul li:nth-child(1) {
	animation-delay: 0.2s;
}

.school_item_active .school_item_ul li:nth-child(2) {
	animation-delay: 0.3s;
}

.school_item_active .school_item_ul li:nth-child(3) {
	animation-delay: 0.4s;
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(10px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* section6 曼省留学移民热门专业推荐 */
.section7 {
	padding-top: 50px;
	padding-bottom: 50px;
	background: #F2F3F5;
}

.major {
	width: 100%;
	box-sizing: border-box;
	overflow: hidden;
}

.major_tab_wrap {
	width: 100%;
	box-sizing: border-box;
	overflow: hidden;
}

.major_tab {
	width: 100%;
	padding: 30px 0px 10px 16px;
	display: flex;
	align-items: flex-start;
	box-sizing: border-box;
	overflow-x: auto;
}

.major_tab_item {
	width: 120px;
	padding-bottom: 12px;
	margin-right: 16px;
	position: relative;
}

.major_tab_item_name {
	width: 120px;
	height: 40px;
	box-sizing: border-box;
	overflow: hidden;
	border-radius: 8px;
	white-space: nowrap;
	background: #ffffff;
	text-align: center;
	line-height: 40px;
	color: #000000;
	font-size: 14px;
}

.major_tab_item_icon {
	content: "";
	width: 0;
	height: 0;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-top: 12px solid #EDB25E;
	position: absolute;
	left: 50%;
	bottom: 0px;
	margin-left: -12px;
	opacity: 0;
}

.major_tab .active .major_tab_item_name {
	background: #D27C00;
	color: #ffffff;
}

.major_tab .active .major_tab_item_icon {
	opacity: 1;
}

/* 隐藏 滚动条*/
.major_tab::-webkit-scrollbar {
	height: 6px;
}

.major_tab::-webkit-scrollbar-track {
	background: transparent;
	border-radius: 3px;
}

.major_tab::-webkit-scrollbar-thumb {
	background: transparent;
	border-radius: 3px;
}

.major_tab::-webkit-scrollbar-thumb:hover {
	background: #a8a8a8;
}

/* 专业内容 */
.major_detail {
	width: var(--view-width, 92%);
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.major_detail_info {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.major_detail_info .name {
	color: #d27c00;
	font-size: 16px;
}

.major_detail_info .value {
	padding-top: 10px;
	padding-bottom: 14px;
	color: #000000;
	font-size: 14px;
}

.major_detail_info .label {
	font-weight: 600;
}

.major_detail_img {
	width: 100%;
	height: auto;
	border-radius: 8px;
	box-sizing: border-box;
	overflow: hidden;
}

.major_detail_img .img {
	width: 100%;
	height: auto;
	object-fit: cover;
	border-radius: 8px;
	box-sizing: border-box;
	overflow: hidden;
}

/* section8 曼省省提名/移民获批信成功案例 */
.section8 {
	padding-top: 50px;
	padding-bottom: 20px;
	background: #FFFFFF;
}

.case {
	--item-width: 192px;
	--item-height: 258px;
	--item-gap: 2px;
	width: 100%;
	height: calc(var(--item-height) + 80px);
	margin-top: 34px;
	box-sizing: border-box;
	overflow: hidden;
}

.case .section_btn_wrap {
	width: 100%;
	display: flex;
	justify-content: center;
	margin-top: -40px;
	position: relative;
	z-index:10;
}


.case_items {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	overflow: hidden;
	position: relative;
}

.case_item {
	width: var(--item-width);
	height: var(--item-height);
	padding: 8px;
	box-sizing: border-box;
	overflow: hidden;
	background: #ffffff;
	box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.15);
	border-radius: 16px;
	position: absolute;
	opacity: 0;
	transition: all 0.6s;
}

.case_item_img {
	width: 100%;
	height: 100%;
	border-radius: 16px;
}

.case_items .case_item:nth-child(1) {
	opacity: 1;
	left: calc(50% - 2.6 * var(--item-width) + var(--item-gap));
	top: 82px;
	transform: rotate(-16deg);
}

.case_items .case_item:nth-child(2) {
	opacity: 1;
	left: calc(50% - 1.7*var(--item-width) + var(--item-gap));
	top: 30px;
	transform: rotate(-15deg);
}

.case_items .case_item:nth-child(3) {
	opacity: 1;
	left: calc(50% - var(--item-width)/2);
	top: 0px;
	transform: rotate(0deg);
}

.case_items .case_item:nth-child(4) {
	opacity: 1;
	left: calc(50% + 0.7*var(--item-width) - var(--item-gap));
	top: 30px;
	transform: rotate(15deg);
}

.case_items .case_item:nth-child(5) {
	opacity: 1;
	left: calc(50% + 1.6*var(--item-width) - var(--item-gap));
	top: 82px;
	transform: rotate(16deg);
}

/* sectio10 景鸿加拿大留学移民 服务优势 */
.section10 {
	width: 100%;
	min-height: 350px;
	padding-top: 50px;
	padding-bottom: 50px;
	background: #ffffff;
	background-image: url("../images/bg3.png");
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: left center;
}

.swiper_adva {
	width: 100%;
}

.swiper-slide {
	padding-left: 16px;
}

.swiper-slide_box {
	width: 100%;
	height: 200px;
	border-radius: 8px;
	box-sizing: border-box;
	overflow: hidden;
	position: relative;
}

.swiper-slide_box .img {
	width: 100%;
	height: 100%;
	border-radius: 8px;
	position: absolute;
	left: 0px;
	bottom: 0px;
	z-index: 1;
}

.swiper-slide_box .mask {
	width: 100%;
	height: 118px;
	padding-bottom: 20px;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	box-sizing: border-box;
	color:#FFFFFF ;
	font-size: 16px;
	font-weight: 600;
	border-radius: 0px 0px 8px 8px;
	background: linear-gradient(360deg, #D27C00 0%, rgba(210, 124, 0, 0) 100%);
	position: absolute;
	left: 0px;
	bottom: 0px;
	z-index: 12;
}

.adva_tips {
	width: var(--view-width, 92%);
	padding-top: 16px;
	text-align: center;
	color: #939393;
	font-size: 13px;
}