@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700;900&display=swap');
body { 
	font-family: "Noto Sans TC",Arial, Helvetica, sans-serif;
    background:#dddee2; 
	background: url(../img/bg-all.jpg);
    background-attachment:fixed;
	padding: 0;margin: 0;box-sizing: border-box;
	background-size: cover;
	
}



.container{
	background-color:#f8f8f8;
	box-shadow: 0 0 45px 0 rgba(0, 0, 0, 1);
	border-radius: 40px;
	overflow: hidden;
	margin: 30px auto;
	padding: 0;
}

/*banner*/
#header{ position:relative;padding:120px 30px;   background: radial-gradient(circle at center, rgba(19, 33, 76, 0.6) 0%, rgba(10, 20, 40, 0.08) 100%), url('../img/bg.jpg');background-size: cover;background-position:-20% center;}


#header .header_title {text-align: center;}
#header .header_title  h2 {color: #e1e8f4;font-size: 2.45rem; text-shadow: 2px 2px 0 #092247, -2px -2px 0 #092247, 2px -2px 0 #092247, -2px 2px 0 #092247, 2px 0px 0 #092247, 0px 2px 0 #092247, -2px 0px 0 #092247, 0px -2px 0 #092247;margin: 0 0 30px;font-weight: 600;margin: 15px auto;}

#header .header_title .im-title {display: inline-block;width: 63%;position: relative;margin: 0px auto;}
#header .header_title .im-title h1 {font-weight: 900; line-height: 1.1;/*  background: linear-gradient(135deg, #FFEA00 0%, #FF9D00 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5)); */font-size:5.6rem; letter-spacing: 0.02em;color: #ffe253;}


#header .im-upgrade {font-size:2rem;  color: #dddee2;background-color: #cf2a2a;width: 35%; font-weight: 900;padding: 0.6rem 2rem; border: 2px solid rgba(255, 255, 255, 0.2);border-radius: 0.5rem;animation: flash-highlight 1.5s infinite ease-in-out;margin: 40px auto 0;}









@keyframes flash-highlight {
    0% {
        opacity: 1;
        transform: relative; /* 保持你原本的 relative */
        filter: brightness(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.05) ; /* 稍微放大並維持你的 top: -12px */
        filter: brightness(1.5); /* 增加亮度，產生「閃」的感覺 */
        box-shadow: 0 0 15px rgba(207, 42, 42, 0.8); /* 增加紅光外暈 */
    }
    100% {
        opacity: 1;
        transform: scale(1) ;
        filter: brightness(1);
    }
}

/* #header .header_title .sub {background-color: rgba(5, 56, 107, 0.6);width: 70%;margin: 10px auto;padding:1rem 2.5rem;border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.15);}
#header .header_title .sub h4 {margin: 0;font-size: 1.8rem;color: #67c5ff;} */




#con {padding:60px 30px; }
#con .content {width: 80%;margin: 0 auto 40px;}
#con .master-title {text-align: center;padding:1rem 1.5rem;border-radius: 0.5rem;margin: 0 auto 20px;width: 60%;}
#con .master-title br {display: none;}
#con .master-title h3 {font-size: 2.2rem;font-weight: 900;margin: 0;}
#con .master-title h3 span {color: #B82A26;}
/* #con .master-title p {font-size: 1.2rem;color: #49677a;} */
#con .box { border-radius: 24px;margin: 0 0 40px;text-align: center;transition: all .3s linear;}
#con .box:hover {transform: translate3d(1px,1px,80px) ;}
#con .box.sing { background-color: #e5e7ea;  text-align: center; width: 100%;padding:  30px;}
#con .box.sing h3 {color: #B82A26;font-weight: 900;}
#con .box.sing h3 span {font-weight: 600;font-size: 4rem;}
#con .box.sing h3 del {font-weight:300;font-size: 1.2rem;color: #707578;margin: 0 5px;}
#con .box.sing h4 {width: 45%;margin: 0 auto;letter-spacing: .2rem;margin: 0 auto 10px; background-color: rgba(255, 255, 255, 0.4);font-size: 1.2rem; border: 1px solid rgba(0, 43, 127, 0.2);border-radius: 30px;padding: 5px 15px;}

#con .box-flex {display: flex;flex-wrap: wrap;justify-content: space-between;}
#con .box-flex .box {width: 48%;background-color: #e5e7ea; }
/* #con .box-flex .box:nth-child(1){ background-color: #E0F2FE;box-shadow: 10px 10px 0px #8d9da9; }
#con .box-flex .box:nth-child(2){ background-color: #efe1ff;box-shadow: 10px 10px 0px #b4a7c5; }
#con .box-flex .box:nth-child(3){ background-color: #e0ead4;box-shadow: 10px 10px 0px #96a683; }
#con .box-flex .box:nth-child(4){ background-color: #ffddeb;box-shadow: 10px 10px 0px #b698a5; } */

#con .box-flex .box .icon {margin: 20px auto 0 ;}
#con .box-flex .box .icon img {height: 200px;} 
#con .box-flex .box .text {padding: 15px 30px 30px;}
#con .box-flex .box  h4 {padding:0.75rem 1.5rem;background-color: #B51E1B;color: #fff; border-radius: 24px 24px 0 0;font-weight: 600;font-size: 1.6rem;}
#con .box-flex .box  h5 {font-weight: 600;color: #0A3A7D;padding: 8px 10px;border-bottom:1px solid #b9c4d4 ;font-weight: 600;letter-spacing: .25em;}
#con .box-flex .box .text p{font-size: 1.4rem;color: #3c3f41;margin: 10px 0 0;font-weight: 600;}
#con .box-flex .box .text p span {color: #B82A26;}
/* #con .box-flex .box:nth-child(1) .text h4{ background-color: #268fd5;color: #fff;padding: 5px 10px; }
#con .box-flex .box:nth-child(2) .text h4{ background-color: #6b2bbe;color: #fff;padding: 5px 10px; }
#con .box-flex .box:nth-child(3) .text h4{ background-color: #70a430;color: #fff;padding: 5px 10px;}
#con .box-flex .box:nth-child(4) .text h4{ background-color: #ef80ae;color: #fff;padding: 5px 10px; }
 */
#con .lesson-box { border-radius: 24px;background-color: #e5e7ea; }
#con .lesson-box h4{padding:0.75rem 1.5rem;background-color: #0A3A7D;color: #fff; border-radius: 24px 24px 0 0;text-align: center;font-weight: 600;font-size: 1.6rem;}
#con .lesson-box .text {padding: 15px 30px 30px;}
#con .lesson-box .text ul li {margin: 0 0 10px;font-size: 1.4rem;}
#con .lesson-box .text ul li span {background-color: #a8afbd;color: #fff;padding: 2px 12px;margin-right: 5px;font-size:16px;}

/*優惠訊息*/
.btn-all {width:75%;margin: 0px auto 80px;}
.btn-all a {display: block;text-decoration: none;}

.btn-all .btn-link {width: 100%; color: #fff;text-align: center; font-size: 1.2em;border-radius: 8px;padding: 10px 15px;transition: all .3s ease-in;margin: 0 0 20px;}

.btn-all .btn-link:hover{ background:transparent;  color:#fff; background-color: #cf5151;text-decoration: none;transform: translateY(4px);}
.btn-all .btn-link i {color: #fff;}
.btn-all .btn-link-item:nth-child(1) .btn-link{background: #fff;border: 2px solid #033463;color: #033463;}
.btn-all .btn-link-item:nth-child(1) .btn-link i {color: #033463;}
.btn-all .btn-link-item:nth-child(2) .btn-link{background:#033463;color: #fff;  }







@media(max-width:1200px) {
	/*banner*/
	#header .header_title h2 { font-size: 1.5rem; }
	#header{ padding:80px 30px; background-position:-20% center;}
	#header .header_title .im-title { display: inline-block; width: 70%; position: relative; margin: 20px auto 10px; }
	#header .header_title .im-title h1 { font-size: 5rem; }
	#header .header_title .im-title h1 span { font-size: 1.5rem; width: 27%; text-align: center; top: -10px; }
	#header .header_title .sub h4 { font-size: 1.4rem; }




}

@media(max-width:991px) {

}

@media(max-width:768px) {

#header{ position:relative;padding:160px 30px 120px;   background: radial-gradient(circle at center, rgba(19, 33, 76, 0.6) 0%, rgba(10, 20, 40, 0.08) 100%), url('../img/bg-m.jpg');background-size: cover;background-position:bottom center;}

    #header .header_title h2 { font-size: 1.4rem;}
    #header .header_title .im-title { width: 100%; }
	#header .header_title .im-title h1 { font-size: 3.2rem; }
	#header .im-upgrade { font-size: 1.6rem; padding: 0.5rem 1.2rem; width: 70%; margin: 30px auto 0; }
	/* #header .header_title .sub { width: 90%; }
	#header .header_title .sub h4 { font-size: 1.2rem;line-height: 1.6; }
 */


	.container{ border-radius: 0px; margin: 0 auto; }
	#con .content { width: 100%; margin: 0 auto 40px; }
	#con .master-title { width: 100%; }
	#con .master-title br {display: block;}
	#con .box-flex { flex-direction: column; }
	#con .box-flex .box {width: 100%;}
	#con .box.sing h4 { width: 100%; }
	
	
	
	#con .lesson-box .text { padding:15px 30px; }
	#con .lesson-box .text ul {padding: 0 0 0 25px;margin: 0;}
	#con .lesson-box .text ul li { font-size: 1.3rem; }

	.btn-all .btn-link { font-size: 1.6em;}






	



}