body{
			font-family: 'Noto Sans TC', Arial, sans-serif;
		}
		
		.back_to_ilearn *{
			color:#ccc;
		}
		.back_to_ilearn:hover *{
			color:#FF6000;
		}		
		.back_to_ilearn:hover .back_to_ilearn_arrow{
			background-color: #FF6000;
		}
		.back_to_ilearn_arrow{
			width:30px;
			height:30px;
			background-color: #ccc;
			-webkit-mask: url('img/back_arrow.svg') no-repeat center;
			mask: url('../img/back_arrow.svg') no-repeat center;
		}
		

		.float_effect{
			transition: transform 0.3s ease; /* 设置过渡效果 */
		}
		.float_effect:hover {
			transform: translateY(-10px); /* 鼠标悬停时向上移动 */
		}


		.top_menu_theme_btn, .top_menu_section_btn {
			width:28px;
			height:28px;
			background-color: #DEDEDE;
			cursor:pointer;
			margin-top:5px;
		}
		.top_menu_theme_btn.active, .top_menu_section_btn.active{
			background-color: #005A4B;
		}
		.top_menu_theme_btn:hover, .top_menu_section_btn:hover{
			background-color: #03BB9C;
		}		
		.icon-wrapper{
			position: relative;
			display: inline-block;
		}
		.caption {
			visibility: hidden;
			background-color: #fff;
			color: #03BB9C !important;
			text-align: center;
			border-radius: 13px;
			padding: 5px 8px;
			position: absolute;
			z-index: 1;
			bottom: -40px;
			left: 50%;
			transform: translateX(-50%);
			white-space: nowrap;
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
			font-size:12pt;
		}
		/*
		.top_menu_theme_btn_wrapper > a:nth-child(1) > .icon-wrapper > .caption {
			left: 180%;
		}
		
		.caption2 {
			left: auto !important;
			right: 0%;
			transform: translateX(0%);
		}
		*/
		.icon-wrapper:hover .caption {
			visibility: visible; 
		}
		
		.top_menu_theme_btn_wrapper > a:nth-child(1) > .icon-wrapper > .top_menu_theme_btn:nth-child(1){
			-webkit-mask: url('img/icon-home.svg') no-repeat center;
			mask: url('../img/icon-home.svg') no-repeat center;
		}
		.top_menu_theme_btn_wrapper > a:nth-child(2) > .icon-wrapper > .top_menu_theme_btn:nth-child(1){
			-webkit-mask: url('img/topic-family.svg') no-repeat center;
			mask: url('../img/topic-family.svg') no-repeat center;
		}
		.top_menu_theme_btn_wrapper > a:nth-child(3) > .icon-wrapper > .top_menu_theme_btn:nth-child(1){
			-webkit-mask: url('img/topic-action.svg') no-repeat center;
			mask: url('../img/topic-action.svg') no-repeat center;
		}
		.top_menu_theme_btn_wrapper > a:nth-child(4) > .icon-wrapper > .top_menu_theme_btn:nth-child(1){
			-webkit-mask: url('img/topic-feelings.svg') no-repeat center;
			mask: url('../img/topic-feelings.svg') no-repeat center;
		}
		.top_menu_theme_btn_wrapper > a:nth-child(5) > .icon-wrapper > .top_menu_theme_btn:nth-child(1){
			-webkit-mask: url('img/topic-food and drink.svg') no-repeat center;
			mask: url('../img/topic-food and drink.svg') no-repeat center;
		}
		.top_menu_theme_btn_wrapper > a:nth-child(6) > .icon-wrapper > .top_menu_theme_btn:nth-child(1){
			-webkit-mask: url('img/topic-number and time.svg') no-repeat center;
			mask: url('../img/topic-number and time.svg') no-repeat center;
		}
		
		
		.top_menu_section_btn_wrapper .speaking_btn{
			-webkit-mask: url('img/icon-read along.svg') no-repeat center;
			mask: url('../img/icon-read along.svg') no-repeat center;
		}
		.top_menu_section_btn_wrapper .exercise_btn{
			-webkit-mask: url('img/icon-practice with ai.svg') no-repeat center;
			mask: url('../img/icon-practice with ai.svg') no-repeat center;
		}
		.top_menu_section_btn_wrapper .flashcard_btn{
			-webkit-mask: url('img/icon-flash card.svg') no-repeat center;
			mask: url('../img/icon-flash card.svg') no-repeat center;
		}
		.top_menu_section_btn_wrapper .chatbot_btn{
			-webkit-mask: url('img/icon-talk with ai.svg') no-repeat center;
			mask: url('../img/icon-talk with ai.svg') no-repeat center;
		}
		.top_menu_section_btn_wrapper .dictation_btn{
			-webkit-mask: url('img/icon-dictation.svg') no-repeat center;
			mask: url('../img/icon-dictation.svg') no-repeat center;
		}	
		
		.top_menu_section_btn_wrapper .extra_ex_btn{
			-webkit-mask: url('img/bonus reading-icon.svg') no-repeat center;
			mask: url('../img/bonus reading-icon.svg') no-repeat center;
		}	
		.top_menu_section_btn.summary_btn{
			background:#03bb9c;
			-webkit-mask: url('img/icon-stat.svg') no-repeat center;
			mask: url('../img/icon-stat.svg') no-repeat center;
		}
		.top_menu_section_btn.teacher_center_btn{
			background:#03bb9c;
			-webkit-mask: url('img/icon-teacher center.svg') no-repeat center;
			mask: url('../img/icon-teacher center.svg') no-repeat center;
		}
	
		
		.exercise_prompt, .flashcard_exercise_prompt{
			color:#000;
			position:absolute;
			top:0px; bottom:0px; left:0px; right:0px;
			margin:auto;
			width:600px;
			height:240px;
			border-radius: 13px;
			padding:20px;
			background:#fff;
			z-index:-10;
			text-align:center;
			font-size:14pt;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;
			opacity:0;
		}
		.exercise_prompt label, .flashcard_exercise_prompt label{
			margin:0px 5px;
		}
		.exercise_start_btn, .flashcard_exercise_start_btn{
			border: 3px solid #26CB9E;
			border-radius: 25px;
			width:40%;
			text-align:center;
			line-height:180%;
			font-size:16pt;
			color:#26CB9E;
			cursor:pointer;
		}
		.close_exercise_prompt, .close_flashcard_exercise_prompt{
			position:absolute;
			top:20px;
			right:20px;
			cursor:pointer;
			font-size:24pt;
			color:#ccc;
		}
		
		
		
		/*exercise*/
		.bugbug_in_ex{
			position:absolute;
			bottom:0px; 
			right:0px;
			height:30vw;
		}
		.bugbug_in_ex.sad{
			display:none;
		}
		.bugbug_in_ex.happy{
			display:none;
		}
		.exercise_result_bugbug{
			display:none;
		}
		.progress_bar_wrapper{
			width:600px;
			height:16px;
			position:relative;
			border-radius:12px;
			border:5px solid #fff;
			background:#fff;
			margin-top:10px;
		}
		.progress_bar{
			width:0%;
			height:100%;
			position:absolute;
			border-radius:8px;
			background:#FFC30F;
		}
		
		
		
		/*speaking*/
		.content_type_div{
			display:flex;
			justify-content: space-between;
			width: 93%;
		}
		.content_type{
			border-radius: 13px;
			color:#CCCCCC;
			background:#fff;
			cursor:pointer;
			width: 30%;
			font-size: 1.5vw;
			line-height: 180%;
			font-weight: 500;
		}
		.content_type.selected, .content_type:hover{
			color:#005A4B;
		}
		
		
		/*flashcard*/
		.flashcard_filter{
			position:fixed;
			height:50px;
			top:45px;
			left:0px;
			width:100%;
			background:#fffada;
			display:none;
			z-index:50;
		}
		.speaker_sm{
    width: calc(4vw + 12px);
    /*height: calc(4vw + 12px);*/
    /*border-radius: 50px;*/
    text-align: center;
    font-size: calc(12px + 2vw);
    color: #FFC30F;
    /*border: 3px solid #FFC30F;*/
    /*line-height: calc(4vw + 10px);*/
    padding: 0px;
    cursor: pointer;
	line-height:0px;
		}
		.speaker{
			width: 50px;
			height: 50px;
			border-radius: 50px;
			text-align: center;
			font-size: 36px;
			color: #FFC30F;
			position: absolute;
			z-index: 10;
			top: 20px;
			right: 30px;
			border: 3px solid #FFC30F;
			line-height: 47px;
			padding: 0px;
			cursor: pointer;
		}
		.speaker_sm > audio, .speaker > audio{
			display:none;
		}
		.sentence_highlighted{
			color:red;
		}
		.flashcard_back_btn{
			/*
			position:absolute;
			top:60px;
			left:30px;
			*/
			cursor:pointer;
			height:80%;
			-webkit-transform: rotateY(180deg);
			transform: rotateY(180deg);
		}
		.next_flashcard{
			width: 50px;
			height: 50px;
			border-radius: 50px;
			text-align: center;
			font-size: 36px;
			color: #FFC30F;
			position: absolute;
			z-index: 10;
			border: 3px solid #FFC30F;
			line-height: 47px;
			padding: 0px;
			cursor: pointer;
			right: -900px;
			top: 0px;
			bottom: 0px;
			left: 0px;
			margin: auto;
			display: none;
			z-index: 100;
		}
		
		.flashcard_exercise .correct {
            border-color: #127b02;
			background:#127b02;
			color:#fff;
        }
		.flashcard_exercise .incorrect {
            border-color: red !important;
            color: red !important;
        }
		
		.flashcard_exercise .correct_answer{
            border-color: #127b02 !important;
			background:#127b02 !important;
			color:#fff !important;
		}
		
		/*flashcard exercise*/
		.question_list .question{
			display:none;
		}
		
		
		/*summary*/
		.flashcard_filter2{
			height:50px;
			width:100%;
			background:#fff;
			text-align:center;
		}
		
		
		
.left_point{ cursor:pointer; }
.right_point{ cursor:pointer; }

.pulse_shadow_effect{
	animation: shadow-pulse 2s infinite;
}

@keyframes shadow-pulse
{
     0% {
          box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2);
     }
     100% {
          box-shadow: 0 0 0 35px rgba(0, 0, 0, 0);
     }
}


.pulse_effect {
  animation-name: pulse;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}
.pulse_effect:hover,
.pulse_effect:focus {
  animation-name: unset;
}

@keyframes pulse {
  from { transform: scale(1); }
  50% { transform: scale(0.85); }
  to { transform: scale(1); }
}
		
		
.coming_soon{
	filter: brightness(50%); 
	position:relative;
	/*z-index:500;*/
}


/*****************************************************/

/*****left menu******/
        .menu-trigger {
            position: fixed;
            left: 20px;
            top: 20px;
            z-index: 100;
            cursor: pointer;
        }

        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease;
            z-index: 98;
        }

        .overlay.active {
            opacity: 1;
            visibility: visible;
        }

        .side-menu {
            position: fixed;
            left: -300px;
            top: 0;
            width: 300px;
            height: 100%;
            background: white;
            box-shadow: 2px 0 5px rgba(0,0,0,0.1);
            transition: left 0.3s ease;
            z-index: 99;
            overflow-y: auto;
        }

        .side-menu.active {
            left: 0;
        }

        .menu-header {
            background: #f5f5f5;
            padding: 15px;
            border-bottom: 1px solid #ddd;
        }

        .menu-item {
            padding: 15px;
            margin: 10px;
            border-radius: 8px;
            background-size: cover;
            background-position: center;
            color: white;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
            position: relative;
            height: 80px;
            display: flex;
            align-items: center;
            cursor: pointer;
        }

        .menu-item .progress {
            position: absolute;
            bottom: 0;
            left: 0;
            height: 4px;
            background: rgba(255,255,255,0.3);
            border-radius: 0 0 8px 8px;
            width: 100%;
        }

        .menu-item .progress-bar {
            height: 100%;
            background: #4CAF50;
            border-radius: 0 0 0 8px;
        }

        .main-content {
            padding: 20px;
            width: 100%;
        }

        .card-section {
            background: white;
            border-radius: 8px;
            padding: 20px;
            margin: 10px 0;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }

        .button {
            padding: 10px 20px;
            border-radius: 20px;
            border: none;
            color: white;
            cursor: pointer;
            width: 100%;
            text-align: center;
        }

        .button.green {
            background: #26a69a;
        }

        .button.orange {
            background: #ffa726;
        }