@font-face {
  font-family: 'Source Han Sans CN VF';
  src: url('/resource/font/SOURCEHANSANSCN-VF-2.woff2');/*SOURCEHANSANSCN-VF-2.OTF*/
}
@font-face {
  font-family: 'Greet Narrow';
  src: url('/resource/font/GreetNarrowVF.ttf');
}

html{
	font-size: calc(160vw / 75);
	-webkit-text-size-adjust: none;
}
body{
	color: black;
	font-family: "Source Han Sans CN VF" !important;
}
body sup{
	font-size: 110% !important;
	padding-left: 0 !important;
	top: 0 !important;
}
body .sup-tm{
	font-size: 60% !important;
    padding-left: .3em !important;
    top: -.5em !important;
}
.first_screen {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	width: 100%;
	height: 100%;
	max-height: 1024px;
	background-color: #9196FF;
	overflow: hidden;
}

.scatter-image {
	position: absolute;
	transition: all 1s ease-out;
	z-index: 1;
}

.scatter-image:nth-child(1) {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.scatter-image:nth-child(2) {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.scatter-image:nth-child(3) {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.scatter-image:nth-child(4) {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.scatter-image:nth-child(5) {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.scatter-image:nth-child(6) {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.gif {
	margin-top: 56vh;
	margin-left: 65vw;
}

.first_screen .content {
	position: absolute;
	text-align: center;
	z-index: 0;
	top: 12%;
}

.first_screen .content p {
	/*font-size: 96px;
	line-height: 1;
	font-weight: bold;*/
	color: black;
	margin: 90px auto 40px;
}

.first_screen .content .title{
	width: 80%;
	margin: 0 auto;
}
.first_screen .content .btn_reg2 img{
	width: 300px;
}
.first_screen .content .btn_reg img{
	width: 300px;
    margin-right: 0px;
}
.first_screen .content .btn_toefl img{
	width: 255px;
	margin-left: 8px;
}
/* .first_screen .content .btn_reg2 img{
	width: 300px;
}
.first_screen .content .btn_toefl2 img{
	width: 255px;
	margin-left: 0px;
  margin-right: 8px;
} */
.button-container {
    display: flex; /* 使用 flexbox 布局 */
    justify-content: center; /* 水平居中 */
    gap: 20px; /* 按钮之间的间距 */
    margin-bottom: 20px; /* 与下方内容的间距 */
}
.first_screen .content .first_screen_btns{
	display: block;
	width: 90%;
	margin: 0 auto;
}

.first_screen .content{
	opacity: 0;
	animation: fadeIn 2s;
	animation-fill-mode: forwards;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.big-title{
	font-size: 2.5rem;
    color: black;
    font-weight: 700;
    line-height: 1.5;
    margin-top: clamp(10px,6.9vw,100px);
	margin-bottom: 0px;
}
.big-title-digest{
	font-size: 1.5rem;
    color: black;
    font-weight: 400;
    line-height: 1.5;
    margin: 0;
    margin-bottom: 12px;
}
.big-title-about-toefl-why{
	margin-top: 0 !important;
}
.big-title-digest-about-toefl-why{
	margin-bottom: 0px !important;
    font-size: 1.6rem !important;
    font-weight: 500 !important;
}
.introduction-frame{
	padding: 0 20px;
}
.introduction-frame .strength{
	margin-top: 20px;
	display: flex;
    flex-wrap: wrap;
	justify-content: space-between;
}
.introduction-frame .strength .block{
	width: 48.5%;
    padding: 15px;
    background-color: #343579;
    box-sizing: border-box;
    cursor: pointer;
    margin-bottom: 10px;
    float: left;
}
.toefl-official-preparation-resources{
    text-align: left; 
    font-size: 9px;
    color: black; 
    font-weight: 700;
    display:
     flex ;justify-content: center;}
.introduction-frame .strength .block-odd{
	
}
.introduction-frame .strength .block-margin-left{
	/*margin-left: 18px;*/
}
.introduction-frame .strength .block-even{
	
}
.introduction-frame .strength .block .arrow-img{
	float: right;
/*    width: 1.2vw;*/
    max-width: 17.31px;
}
.introduction-frame .strength .block .intro-img-area{
	overflow: hidden;
}
.introduction-frame .strength .block .intro-img{
	width: 100%;
	max-width: 196px;
	margin: 0 auto;
}
.introduction-frame .strength .block .intro-img:hover{
	transform: scale(1.1);
}
.introduction-frame .strength .block .title{
	color: white;
    line-height: 1.3;
    font-size: clamp(12px,2.175rem,16px);
    font-weight: 700;
}

.score-map-part1{
	padding: 0 20px;
}
.score-map-part1 .score-map-text{
	font-size: clamp(12px,1.7rem,14px);
	width: 100%;
	margin: 30px auto;
}
.score-map-part1 .score-map-text .tips{
	font-size: 13px;
	margin-top: 10px;
}
.score-map-part1 .title-why-toefl{
	font-size: clamp(12px,2.5rem,40px);
	font-weight: 700;
	color: black;
	text-align: center;
}
.score-map-part1 .reasons{
	color:black;
    margin-top: 20px;
    display: flex;
}
.score-map-part1 .reasons .item{
	width: 33%;
	text-align: center;
}
.score-map-part1 .reasons .item .number{
	font-family:Greet Narrow;
	font-size:clamp(12px,4.2rem,34px);
	font-weight: 700;
    margin: 0;
    line-height: 1;
}
.score-map-part1 .reasons .item .where{
	font-size:clamp(12px,2.175rem,18px);
	font-weight:700;
    margin: 0;
    line-height: 1.5;
}
.score-map-part1 .reasons .item .what{
	font-size:clamp(12px,1.7rem,14px);
	font-weight:500;
    margin: 0;
    line-height: 1.5;
}

.score-map-part2{
	width:100%;
	margin: 0 auto;
	position: relative;
    margin-top: 20px;
}
.score-map-part2 .hot-item{
	display: flex;
	align-items: center;
	position: absolute;
    background-color: #FFB395;
    padding: 4px 8px;
    border: solid 0.5px black;
    cursor: pointer;
}
.score-map-part2 .hot-item img{
	width: 15px;
	height: auto;
}
.score-map-part2 .direction-down:before{
    background: linear-gradient(-45deg, #FFB395 60%, transparent 0);
    border: inherit;
    border-radius: 0 0 2px 0;
    border-width: 0 0.5px 0.5px 0;
    bottom: -1px;
    content: "";
    display: block;
    position: absolute;
    right: 35%;
    transform: translate(-50%, 50%) rotate(45deg) translateZ(0);
    width: 10px;
    height: 10px;
}
.score-map-part2 .direction-up:before{
	background: linear-gradient(-45deg, #FFB395 60%, transparent 0);
    border: inherit;
    border-radius: 0 0 2px 0;
    border-width: 0 0.5px 0.5px 0;
    bottom: -1px;
    top: -50%;
    content: "";
    display: block;
    position: absolute;
    right: 35%;
    transform: translate(-50%, 50%) rotate(225deg) translateZ(0);
    width: 10px;
    height: 10px;
}
.score-map-part2 .hot-map-canada{
    /*inline-size: 8.75rem;*/
    inset-block-start: 5%;
    inset-inline-start: 7.7%; 
}
.score-map-part2 .hot-map-america{
    inset-block-start: 48%;
    inset-inline-start: 9%; 
}
.score-map-part2 .hot-map-england{
    inset-block-start: 10%;
    inset-inline-start: 36.5%; 
}
.score-map-part2 .hot-map-ireland{
    inset-block-start: 36%;
    inset-inline-start: 32.5%; 
}
.score-map-part2 .hot-map-asia{
    inset-block-start: 4%;
    inset-inline-start: 77%; 
}
.score-map-part2 .hot-map-australia{
    inset-block-start: 49%;
    inset-inline-start: 70%; 
}
.score-map-part2 .hot-title{
	color: black;
	margin: 0;
	font-size: clamp(12px,2.175rem,18px);
	font-weight: 700;
	line-height: 1;
	margin-left: 4px;
	margin-top: -2px;
}
.score-map-part3{
	text-align: center;
}
.score-map-part3 .tips{
    display: inline-flex; 
    font-size: clamp(12px,1.7rem,14px);
    font-weight: 500;
    align-items: center; 
}
.score-map-part3 .tips img{
	width: 14px;
	height: auto;
    margin: 0px 4px;
}

.book-part1{
	padding: 0 20px;
}
.book-part2{
	width:100%;
	max-width: 1320px;
	height: 600px !important;
	margin: 50px auto 100px;
	overflow: hidden;
	position: relative;
	background: #fff
}

.container .book .swiper-pagination-bullet{
	width: 36px;
	height: 3.6px;
	border-radius: 0;
	background: #9196FF;
	opacity: 0.5;
}

.container .book .swiper-pagination-bullet-active{
	background: #9196FF;
	opacity: 1;
}

.container .book .swiper-button-prev{
    width: 34px;
    height: 48px;
    background: url(../image/common/icon-prev-black.png) left top no-repeat;
    background-size: 34px auto;
    top: 25%;
}
.container .book .swiper-button-next{
    width: 34px;
    height: 48px;
    background: url(../image/common/icon-next-black.png) right top no-repeat;
    background-size: 34px auto;
    top: 25%;
}

.container .book ul.book-list li .btn_buy{
	display: flex;
    align-items: center;
   /* margin-left: 30px;*/
}

.container .book ul.book-list li .btn_buy font{
	color: black;
    font-size: clamp(12px,2rem,16px);
    font-weight: 500;
    line-height: 1.5;
}
.container .book ul.book-list li .btn_buy img{
	width: 4vw;
    height: auto;
    margin: 0;
    margin-left: 12px;
}

.container .product .title{
    font-size: clamp(12px,3.26rem,52px);
    font-weight: 700;
    line-height: 1.5;
} 



/*about-toefl-why*/
.container .why-frame{
    padding: 0 20px;
    margin: 0 auto;
    /*margin-top: clamp(12px,11vw,160px);*/
}

.container .why-frame .strength-row1{
	color: white;
	margin-top: clamp(20px,4.86vw,70px);
}

.container .why-frame .strength-row1 .item{
    width: 100%;
    background-color: #343579;
    display: inline-flex;
    padding: 18px;
    box-sizing: border-box;
}

.container .why-frame .strength-row1 .item-right{
	margin-top: 10px;
}
.container .why-frame .strength-row1 .item .content{
	width: 50%;
    padding-right: 10px;
}

.container .why-frame .strength-row1 .item .content .title{
    font-size: 2rem;
    line-height: 1.28;
    font-weight: 700;
    margin: 0;
}

.container .why-frame .strength-row1 .item .content .introduce-block{
    /*height: 14.6vw;
    max-height: 210px;*/
}

.container .why-frame .strength-row1 .item .content .introduce{
    font-size: 1.3rem;//12px;
    font-weight: 400;
    line-height: 1.4; 
}
.container .why-frame .strength-row1 .item .content .source{
    font-size: 0.9rem;
    line-height: 1.4;
    margin-top: clamp(12px,2vw,30px);
}
.container .why-frame .strength-row1 .item .content .introduce .span1{
	letter-spacing: 1.26px;
}
.container .why-frame .strength-row1 .item .content .introduce .span2{
	letter-spacing: 0px;
}
.container .why-frame .strength-row1 .item .content .introduce .span3{
	letter-spacing: 1.68px;
}
.container .why-frame .item .content .introduce-block .point{
	letter-spacing: -6px;
}
.container .why-frame .strength-row1 .item .content .arrow-right{
	transform: scaleX(-1);
    width: 2vw;
    max-width: 28.78px;
    display: none;
}
.toefl-official-preparation-resources{
    display: none; /* 移动端隐藏该内容 */
    text-align: left; 
    font-size: 11px;
    color: black; 
    margin-top:3%;
    font-weight: 700;
}
.container .why-frame .strength-row1 .item .why-img{
	overflow: hidden;
	width: 50%;
    display: flex;
    align-items: center;
}
.container .why-frame .strength-row1 .item .why-img img{
	width: 100%;
}
.container .why-frame .strength-row1 .item .why-img img:hover{
	transform: scale(1.1);
}

.container .why-frame .strength-row2{
	color: white;
	margin-top: clamp(20px,2.43vw,35px);
	display: flex;
}
.container .why-frame .strength-row2 .item{
    width: 31.4%;
    background-color: #343579; 
    padding: clamp(0px,1.94vw,28px);
    box-sizing: border-box;
}

.container .why-frame .strength-row2 .item .content .arrow-left{
    width: 2vw;
    max-width: 28.78px;
    height: 1.29vw;
    max-height: 18.57px; 
    flex: 1;
    margin-top: clamp(8px,0.83vw,12px);
    display: none;
}
.container .why-frame .strength-row2 .item .content .title{
    font-size: clamp(12px,2rem,32px);
    line-height: 1.28;
    font-weight: 700;
    margin: 0;
    flex: 1;
}
.container .why-frame .strength-row2 .item .content .introduce-block{
    height: 8.2vw;
    max-height: 118px;
}

.container .why-frame .strength-row2 .item .content .introduce{
    font-size: clamp(12px,0.875rem,14px);
    font-weight: 400;
    line-height: 1.5; 
}
.container .why-frame .strength-row2 .item .content .source{
    font-size: clamp(6px,0.5rem,8px);
    line-height: 1.5;
    margin-top: clamp(12px,1.8vw,26px);
    margin-bottom: clamp(12px,1.8vw,26px);
}
.container .why-frame .strength-row2 .item .why-img{
	overflow: hidden;
}
.container .why-frame .strength-row2 .item .why-img img{
	width: 22.3vw;
    max-width: 321px;
}
.container .why-frame .strength-row2 .item .why-img img:hover{
	transform: scale(1.1);
}
.container .why-frame .strength-row2 .item-left{
	float: left;
}
.container .why-frame .strength-row2 .item-center{
	margin: 0 auto;
}
.container .why-frame .strength-row2 .item-right{
	float: right;
}