/*通用設定*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
body{
	font-family:"微軟正黑體";
	box-sizing: border-box;
}
.clearfix{
	clear: both;
}

/*置頂按鈕*/
.gotop { position: fixed; right:5px;  bottom:30%; width: 50px;  height: 50px; background-color: #f95a57;
  opacity: 1;  transition: all 0.4s ease-in-out 0s;  z-index: 999;  border-radius: 50%; display: flex; justify-content: center; align-items: center; }
.gotop a{ text-align: center; color: #fff; text-decoration:none;}
.gotop:active{ box-shadow:1px 1px 3px 2px rgba(20%,20%,40%,0.5) inset;transition: all 0s;}

/*=============桌機版================*/
/* header */
header{background:url(../images/header.jpg)no-repeat; height: 0;padding-bottom: 41.66%;background-size: cover; position: relative;}
header img{position: absolute;width: 100%;}
header .run{
	transform-origin:26% 63.05%;
	animation-name: running;
	animation-duration:1.5s;
	animation-timing-function:linear;
}
@keyframes running{
	0%{transform:translateY(-50px)translateX(-500px)scale(0.1);}
	50%{transform:translateY(-50px)scale(0.1);}
	100%{transform:translateY(0px)scale(1);}
}

/* nav */
.wrap-nav-list{padding: 30px calc((100% - 700px)/2); background: #ffe400; text-align: center;}
.nav-list{margin: 0 auto;}
.wrap-nav-list strong{ font-size: 2rem;}
.nav-list ul{ padding: 0; margin: 0;}
.nav-list ul li{box-sizing: border-box; width: 100%;}
.nav-list ul li:nth-child(2){ margin: 15px 0;}
.nav-list ul li a{color: #fff;font-size: 36px;text-decoration: none;background: #000;display:block;text-align:left;padding: 10px 10px 10px 150px;}
.nav-list ul li a:hover{background: #fff;color: #000;}
.nav-list ul li a:hover span{color: #003399;}
.nav-list ul li a:active{box-shadow:0px 0px 4px 4px #666666;}

.nav-list span{color:#f91321;}

/* main */

/* main01 */
.main01bkg{background: #c6000f;padding: 80px calc((100% - 1200px)/2);}
.main01{margin: 0 auto;text-align: center;}
.main01 h2{font-size: 60px;color: #fff; margin: 0;}
.main01 h2 em{color:#00ffff;}
.main01 ul{ display: flex; justify-content: space-between; margin:220px 0 40px; padding: 0;}
.main01 ul li{background:#fff;border-radius: 10px;border: 5px solid #f2bf22;position: relative;font-size: 25px;box-sizing: border-box;width: 30%;margin:0px;padding:60px 30px 40px 30px;}
.main01 ul li img{position: absolute; top:-160px; left:calc((100% - 285px) / 2); max-width: 100%;}
.rotate{
	animation-name:rotate;
	animation-duration:.8s;
	animation-timing-function:linear;
}
@keyframes rotate{
	from{transform:rotateY(0deg)}
	to{transform:rotateY(360deg)}
}

.main01 ul li em{color: #ffcc66;display: block;line-height:1.5;}
.main01 ul li p{color:#000;display: block;line-height:1; margin: 0;}
.main01 ul li p span{font-size: 30px; font-weight: 900;}
.main01 ul li strong{background: linear-gradient(#fdf13b, #eb683c); background-clip: text; color: transparent; line-height:1.5; font-weight: 900; font-style: italic; display: block; margin: 0;}
.main01 a{background: #ffe400;text-decoration: none;padding:10px 25px;font-size: 33px;border-radius: 10px;font-weight: bold;color: #00479d;}
.main01 a:hover{box-shadow:0 0 15px 4px #f2bf22;}
.main01 a:active{background: #998A00;}

/* main02 */
.main02bkg{background:url(../images/main02bkg.jpg)no-repeat;background-size: cover; padding: 80px calc((100% - 1200px)/2);}
.main02bkg{
	background-size: 100% 100%;
	background-position: center;
	position: relative;
	/* z-index: -1; */
	animation-name:qq;
	animation-duration:3s;
	animation-timing-function:linear;
	animation-iteration-count: infinite;
}
@keyframes qq{
0%{background-size: 180% 180%;}
20%{background-size: 100% 100%;}
40%{background-size: 140% 140%;}
60%{background-size: 100% 100%;}
80%{background-size: 120% 120%;}
100%{background-size: 160% 160%;}
}
.main02{ margin: 0 auto;text-align: center;}
.main02 h3{ margin: 0; font-size: 60px;}
.main02 h3 span{color: #c6000f;}
.main02>div{display: flex;justify-content:space-between;align-items:center; margin: 40px 0;}
.main02 table{width:60%; font-size: 22px;}
.main02 table th{color: #fff;background:#00479d; border: 1px solid #fff; padding:10px;vertical-align: middle;}
.main02 table td{color:#00479d;border: 1px solid #00479d;text-align: center;padding:10px;vertical-align: middle;}
.main02 .up{width: 32%;box-sizing: border-box;background:#ffe400;padding:25px;border-radius: 10px;position: relative;text-align: left;}
.main02 .up::before{position: absolute;content: "";width: 30px;height: 30px;clip-path: polygon(100% 0%, 0 0, 50% 100%);background-color: #ffe400;top: calc((100% - 30px) / 2);left: -25px;transform: rotate(90deg);}
.main02 .up img{height: 40%;margin-left: 10px;}
.main02 .up ul{ padding: 0; margin: 0;}
.main02 .up ul li{font-size: 26px; line-height: 1.5;  color: #333333; text-align: justify;}
.main02 .up ul span{color: #c6000f;font-size: 30px;font-weight: bold;}
.main02>p{color: #333333;font-size: 30px;line-height:4;margin-bottom: 10px;}
.main02>a{font-size: 33px;color: #fff;background: #c6000f;text-decoration: none;padding: 10px 20px;border-radius: 10px;}
.main02>a:hover{box-shadow:0 0 15px 4px #FF6B6B; color: #fff;}
.main02>a:active{background:#7A0000;}

.main02 .mobile-table{display: none;}

/* main03 */
.main03bkg{background:#ddeef3;padding: 80px calc((100% - 1200px)/2);}
.main03{margin: 0 auto;text-align: center;}
.main03 h2{font-size: 60px; margin: 0;}

.main03 .circle{color: #fff;width: 215px;height: 215px;border-radius: 999px;font-size: 20px; box-sizing: border-box;padding:25px 10px;transform: translateX(-800px);transition: all .5s;display: flex; justify-content: center; align-items: center; flex-direction: column;}
.main03 .circle span{display: block;color: #ffff00;font-size: 30px;}
.main03 .circle p{display: block;color: #fff;font-size: 20px; margin: 0;}
.main03 .pRight{transform: translateX(0px);}
.main03 ul{ padding: 0; margin: 40px 0;}
.main03 li{display: flex;justify-content:space-between;align-items: center;}
.main03 ul li:nth-child(2){margin: 20px 0;}
.main03 li .triangle{height: 0;width: 0;border-top:15px solid transparent;border-bottom:15px solid transparent;}
.main03 li .triangle p{transition: all 5s;}
.main03 li .fade{opacity: 0;transition: .5s;}
.main03 li .fadeIn{opacity: 1;}

#shk-1{
	border-left: 25px solid #4bbce0;
	animation: shk-1 3s linear infinite;
}
@keyframes shk-1{
	0%{border-left: 25px solid #4bbce0;transform: translateX(-10px);}
	25%{transform: translateX(10px);}
	50%{border-left: 25px solid #108389;transform: translateX(-10px);}
	75%{transform: translateX(10px);}
	100%{border-left: 25px solid #4bbce0;transform: translateX(-10px);}
}

#shk-2{
	border-left: 25px solid #00b4bf;
	animation: shk-2 3s linear infinite;
}
@keyframes shk-2{
	0%{border-left: 25px solid #00b4bf;transform: translateX(-10px);}
	25%{transform: translateX(10px);}
	50%{border-left: 25px solid #33858A;transform: translateX(-10px);}
	75%{transform: translateX(10px);}
	100%{border-left: 25px solid #00b4bf;transform: translateX(-10px);}
}

#shk-3{
	border-left: 25px solid #0089be;
	animation: shk-3 3s linear infinite;
}
@keyframes shk-3{
	0%{border-left: 25px solid #0089be;transform: translateX(-10px);}
	25%{transform: translateX(10px);}
	50%{border-left: 25px solid #1E7A9F;transform: translateX(-10px);}
	75%{transform: translateX(10px);}
	100%{border-left: 25px solid #0089be;transform: translateX(-10px);}
}
.UPclose{
	transform:translateX(-420px) translateY(50px) scale(0.01) !important;
}
.DOWNclose{
	transform:translateX(-420px) translateY(-50px) scale(0.01) !important;
}

.main03 li .rectangle{font-size: 18px;width:65%;}
.main03 li .rectangle p{transition:all 2s;background: #fff;padding: 20px;text-align: justify;font-size: 20px;line-height: 1.5; margin: 0;}
.main03 li:first-child .rectangle p:hover{
	transition:all .1s;
	color: #fff;
	background: #4bbce0;
}
.main03 li:nth-child(2) .rectangle p:hover{
	transition:all .1s;
	color: #fff;
	background: #00b4bf;
}
.main03 li:nth-child(3) .rectangle p:hover{
	transition:all .1s;
	color: #fff;
	background: #0089be;
}
.main03 .UP{transform:translateX(-420px) translateY(50px) scale(0.01);}
.main03 .DOWN{transform:translateX(-420px) translateY(-50px) scale(0.01);}
.main03 .UPafter{transform:translateX(0px) translateY(0px) scale(1);}
.main03 .DOWNafter{transform:translateX(0px) translateY(0px) scale(1);}

.main03>p{color: #333333;font-size: 30px;line-height:2;margin-bottom: 10px;}
.main03>a{font-size: 33px;color: #fff;background: #c6000f;text-decoration: none;padding: 10px 20px;border-radius: 10px;}
.main03>a:hover{box-shadow:0 0 15px 4px #FF6B6B; color: #fff;}
.main03>a:active{background:#7A0000;}

/* main04 */
.main04bkg{padding: 80px calc((100% - 1200px)/2);}
.main04{margin: 0 auto; text-align: center;}
.main04 h2{font-size: 60px; margin: 0 0 15px 0;}
.main04 h2 em{color:#E64A35;}
.main04 span{ color: #333333; font-size: 48px;}

.main04 ul{
	padding: 0;
	margin: 40px 0;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 5%;
}
.main04 ul li{
}
.main04 ul li:nth-child(1) .main04Circle strong{
	color: #c6000f;
}
.main04 ul li:nth-child(3) .main04Circle strong{
	color: #00479d;
}
.main04 ul li .main04Circle{
	margin: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.main04 ul li .main04Circle strong{
	font-size: 8rem;
	line-height: 1.5;
}

.main04 ul li .main04Circle p{
	font-size: 2rem;
	font-weight: 900;
	line-height:1 ;
	margin: 0;
}

.main04 div{display: flex;justify-content:space-between; margin: 20px 0 40px;}

.main04 table {width: 100%; border-collapse:collapse;}
.main04 table th {background: #00b4bf;color: #fff;font-size: 22px; font-weight: bolder; border: 1px solid #fff; text-align: center; padding: 1%; width: 12%; vertical-align: middle;}
.main04 table td {background: #94d5e9;color: #000;font-size: 22px; border: 1px solid #fff;text-align:justify; padding: 1%; vertical-align: middle;}
.main04 table td b{color: #00479d; display: inline-block;}
.main04 table td p{display: inline-block; margin: 1%;}

.main04>p{color: #333333;font-size: 30px;line-height:1.2;margin:10px 0 20px;}
.main04>p strong{color: #E64A35; font-size: 40px;}
.main04>a{font-size: 33px;color: #fff;background: #b68d10;text-decoration: none;padding: 10px 20px;border-radius: 10px;}
.main04>a:hover{box-shadow: 0px 0px 15px 4px #EBB514; color: #fff;}
.main04>a:active{background:#5E4808;box-shadow: 0px 0px 15px 4px #5E4808;}

/* main05 */
.main05bkg{background: #ffe400; padding: 80px calc((100% - 1200px)/2);}
.main05{margin: 0 auto;text-align: center;}
.main05>div{}
.main05>div>img{height: 260px;transform: translateY(260px);}
.main05 .Upp{
	animation:Upp 1s linear;
	transform: translateY(0px)
}
@keyframes Upp{
	from{transform: translateY(260px);}
	to{transform:translateY(0px)}
}
.main05 h2{font-size: 60px; margin: 0; }
.main05 h2 span{font-weight: bold;}

.main05 .board{ margin: 0 0 20px; box-sizing: border-box; text-align:left;position: relative;z-index: 99;}
.main05 .board ul{display: flex; flex-wrap: wrap;justify-content:space-between; align-items: center; padding: 0;}
.main05 .board ul li{
    width:32%;background: #c6000f;color: #fff;padding:20px;box-sizing: border-box;border-radius: 10px;margin-bottom:10px;
    line-height: 1.4; text-align: center;
}
.main05 .board ul li img{ float: left; width: 40%;}
.main05 .board ul li h2{ font-size: 22px;}
.main05 .board ul li h3{ clear: both; margin: 0 0 10px; font-size: 30px; color: #ffe400;}
.main05 .board ul li p{ float: right; margin: 3px 0; padding: 2px 0; background-color: #FFF; width: 55%; border-radius: 50px; font-size: 18px; color: #000;}

.main05 .exp ul{position: relative; padding: 0; margin: 40px 0;}
.main05 .exp li{background: #fff;margin-bottom: 30px;border-radius: 10px;box-sizing: border-box;padding:30px;display: flex; justify-content: center; align-items: center; gap: 2%;}
.main05 .exp li .content{width:76%; text-align: justify;}
.main05 .exp li .name{font-size: 26px;color:#00479d;font-weight: bold; line-height: 1; border-bottom: 2px dashed gray;margin-bottom: 20px;padding-bottom: 20px;}
.main05 .exp li .name strong{ display: inline-block; background: #000; border-radius: 999px; padding: 1% 3%; font-size: 32px; font-weight: bolder; color: #E64A35;}
.main05 .exp li .name span{color: #E64A35;}
.main05 .exp li .name b{display: inline-block; color: #333333;}
.main05 .exp li p{font-size: 20px;line-height: 1.5; margin: 0;}
.main05 .exp li p span{color: #E64A35;}
.main05 .exp li img{max-width: 100%;}

.main05>p{color: #333333;font-size: 30px;line-height:2;margin-bottom: 10px;margin-top: 20px;}
.main05>a{font-size: 33px;color: #fff;background: #c6000f;text-decoration: none;padding: 10px 20px;border-radius: 10px;}
.main05>a:hover{box-shadow:0 0 15px 4px #FF6B6B; color: #fff;}
.main05>a:active{background:#7A0000;}

/* main09 */
.main09 {padding: 100px calc((100% - 1000px) / 2);box-sizing: border-box;text-align: center;background:url(../images/main03bkg.jpg)no-repeat;background-size:100% 100%; }
.main09 ul{box-sizing: border-box;margin: 0px 0px 60px 0px; padding: 0; display: flex;justify-content: center;align-items: center;}
.main09 ul li:nth-child(1){width: 30%;}
.main09 ul li img{max-width: 100%;}
.main09 ul li p{font-size: 28px;font-weight: bold;color: #004993;line-height: 2;}
.main09 ul li p span{color: #9b0012}
.main09>a{font-size: 33px;color: #fff;background: #c6000f;text-decoration: none;padding: 10px 20px;border-radius: 10px;}
.main09>a:hover{box-shadow:0 0 15px 4px #FF6B6B; color: #fff;}
.main09>a:active{background:#7A0000;}

/* footer */
.footer{ padding: 50px calc((100% - 1200px)/2); width:100%; background:#898989; box-sizing: border-box;}
.footer ul{display: flex; flex-wrap: wrap; padding: 0;}
.footer ul li{ width: 20%; margin: 8px 0;}
.footer ul li a{ display:inline-block; font-size:20px; text-decoration:none; color:#FFF; position: relative;}
.footer ul li a::after{ content:''; display: inline-block; position: absolute; bottom:-2px; left: 45%; width: 0; height: 1px; background:#fff; transition: all .8s;}
.footer ul li a:hover::after{ left: 0; width: 99%;}

/*=====其他版型=====*/
@media (max-width: 1180px) {

.wrap-nav-list{padding: 30px 5%}

	/* main01 */
.main01bkg{padding: 60px 5%}
.main01 ul li img{max-width: 266px; left: calc((100% - 266px) / 2);}

/* main02 */
.main02bkg{padding: 60px 5%;}

/* main03 */
.main03bkg{padding: 60px 5%;}
.main03 h2{font-size: 53px;}

/* main04 */
.main04bkg{padding: 60px 5%;}

/* main05 */
.main05bkg{padding: 60px 5%;}
.main05 .exp li {padding: 20px;}

  .footer{ padding: 50px 5%;}
  .footer li{ text-align: center;}
}

@media(max-width:1024px){


/*main01*/
.main01 ul li p{font-size: 22px;}

/*main02*/


/*main03*/

/*main04*/
.main04 div{align-items: center;}
.main04 .schedule{width: 63%;}
.main04 .schedule td{padding: 10px;}

/*main05*/
.main05 .exp li .name{font-size: 22px;}
}


@media(max-width:820px){
	/*main01*/
	.main01 ul li img{ width: 207px; top: -115px; left: calc((100% - 207px) / 2);}
	.main01 ul {margin: 140px 0 40px;}

	/*main03*/
	.main03 li .rectangle{
		width: 55%;
	}
}

/*=============平板================*/
@media(max-width:768px){
    
/*main02*/
.main02 .up img{width: 40%;}
.main02 .up ul li{font-size: 22px;}
.main02 .up ul span{font-size: 28px;}

/*main03*/

#shk-1{animation: none;}
#shk-2{animation: none;}
#shk-3{animation: none;}


/*main04*/

/*main05*/
.main05 .exp li img{max-width: 22%;}
.main05 .board ul li h2{ font-size: 20px;}
.main05 .board ul li h3{ font-size: 24px; }
.main05 .board ul li p{ float:none; margin: 4px 0; width: 100%;}

/* footer */
.footer { padding: 30px 4%;}
.footer ul li{ text-align: center;}
	
}

/*==============行動版================*/
@media(max-width:600px){

/* header */
header{background:url(../images/mobile-header.jpg)no-repeat;padding-bottom:114.73%;background-size: cover;}
header img{display: none;}

/* nav */
.wrap-nav-list{padding: 20px 5%;}
.nav-list ul li a{padding:5px 15px;font-size: 1.2rem;overflow: hidden;}

/* main */

/* main01 */
.main01bkg{padding:30px 5%;}
.main01 h2{font-size:9vw;}
.main01 h2 em{display: block;}
.main01 ul{margin: 36% 0 40px; flex-direction: column;}
.main01 ul li{width: 100%;padding:30px 10px 10px 10px;}
.main01 ul li:nth-child(2){margin: 33% 0;}
.main01 ul li img{max-width:166px;height: auto;top:-29vw; left: calc((100% - 166px) / 2);}
.main01 ul li p{font-size: 1.2rem;}
.main01>p{font-size: 24px;}
.main01 a{font-size: 24px;}

/* main02 */
.main02bkg{background:none; padding: 30px 5%;}
.main02>div{display: block;}
.main02 h3{font-size: 9vw;}
.main02 table{display: none; font-size: 1rem;}
.main02 .mobile-table{display: table;width: 100%;}
.main02 .mobile-table th{ background:#00479d;color: #fff;}
.main02 .mobile-table td{ background-color: #fff;}
.main02 .up{width: 100%;margin-top:40px; padding: 15px;}
.main02 .up::before{position: absolute;content: "";width: 30px;height: 30px;clip-path: polygon(100% 0%, 0 0, 50% 100%);background-color: #ffe400;left: calc((100% - 30px) / 2);top: -25px;transform: rotate(180deg);}

.main02>p{font-size: 20px;}
.main02>a{font-size: 24px;}
.main02 .up img{margin-left: 20px;}
.main02 .up ul li{line-height:1.3;font-size: 15px;font-weight: bold; text-align: center;}
.main02 .up ul span{font-size: 26px;}
.main04 .schedule td{padding: 5px;}
.main04 .schedule span em{display: block;font-size: 12px;line-height: 2;}

/* main03 */
.main03bkg{padding: 30px 5%;}
.main03 h2{font-size:9vw;}
.main03 li{display: block;}
.main03 .circle{margin: 0 auto;}
.main03 li .triangle{
	margin:10px auto;
	border: 0 !important;
	border-left: 15px solid transparent !important;
	border-right:15px solid transparent !important;
	border-top: 20px solid #666666 !important;
}
.main03 li .rectangle{width: 100%;box-sizing: border-box;}
.main03 li .rectangle p{padding: 10px; font-size: 1rem;}
.main03>p{font-size: 22px;margin-bottom:20px;}

/*main04*/
.main04bkg{padding: 30px 5%;}
.main04 h2{font-size:9vw;}
.main04 span{font-size: 1.7rem;}

.main04 ul{justify-content: space-between; gap: 0%;}

.main04 table th {font-size: 1rem; padding: 3%;}
.main04 table td {font-size: 1rem; padding: 3%;}

.main04>p{font-size: 1.2rem;}
.main04>p strong{font-size: 1.6rem;}
.main04>a{font-size: 24px;}

/*main05*/
.main05bkg{padding: 30px 5%;}
.main05>div>img{width: 100%;height: auto;position: relative;z-index:1;transform: translateY(0);}
.main05 h2{font-size: 9vw; }
.main05 .board ul{ flex: none; flex-wrap: wrap;justify-content:space-between; }
.main05 .board ul li{ width: 100%; padding:20px;margin-bottom:10px;}
.main05 .board ul li img{ float: none; margin: 0 auto; width: 200px; height: 200px;}
.main05 .board ul li h2{ font-size: 20px;}
.main05 .board ul li h3{ font-size: 30px; }
.main05 .board ul li p{ float:none; margin: 5px 0; width: 100%; font-size: 24px;}

.main05 .exp li{display: block;padding: 20px;}
.main05 .exp li .content{ width: 100%;}
.main05 .exp li img{display: block;margin: 0 auto; max-width: 100%;}
.main05 .exp li .name{text-align: center; font-size: 5.2vw;line-height: 1.3;}
.main05 .exp li .name strong {font-size: 1.5rem; padding: 2% 4%; margin: 2% 0;}
.main05 .exp li .name span{display: block;text-align: center;}
.main05 .exp li .name b{display: block;}
.main05 .exp li p{font-size: 1rem;}
.main05>p{font-size: 22px;margin-bottom: 30px;}
.main05>a{font-size: 24px;}

/* main09 */
.main09 {padding: 40px 5%;}
.main09 ul{flex-flow: column wrap; gap: 5vw;}
.main09 ul li:nth-child(1){width: 100%;}
.main09 ul li img{max-width: 50%;}
.main09 ul li p{font-size: 6vw; line-height: 1.5;}
.main09>a{font-size: 24px;}

/* footer */
 .footer{ padding: 30px 2% 70px;}
 .footer ul li{ width: 33%;}
 .footer ul li a{ font-size: 16px;}

}

/* ===== AI學習系統 ====================================================================================== */


.ai-learning{
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#894991+0,3d4f8f+100 */
    background: linear-gradient(135deg,  #894991 0%,#3d4f8f 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.ai-learning>div{
    background-image: url(../images/images-ai-bg.png);
    background-position: center top;
    background-repeat: repeat-y;
}
.ai-subtitle{
    position: relative;
    z-index: 1;
}
.ai-subtitle::after{
    content: "";
    position: absolute;
    background-color: rgba(255, 255, 255, 0.3);
    display: inline-block;
    width: 100%; height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: 50px;
}
.ai-subtitle .subtit-box{
    display: flex;
    justify-content: center;
    align-items: center;
}
.ai-subtitle .subtit-box img{ max-width: 60px;}
.ai-subtitle .subtit-box p{
    font-size: 1.8rem;
    color: #ffffff;
    line-height: 1.1;
    font-weight: bold;
}
.ai-main>img{ max-width: 100%;}
.ai-main-box{ padding: 5px 24px;}
.ai-main-box h3{ font-size: 2.5rem;}
.ai-main-box h5{ 
    display: block;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f900a2+0,00e5ae+100 */
    background: linear-gradient(to right,  #f900a2 0%,#00e5ae 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    padding: 8px;
    border-radius: 10px;
    font-size: 1.2rem;
}
.ai-learning .ai-btn{ text-align: center;}
.ai-learning .ai-btn a{ 
  display: block; 
  width:30%; 
  margin: 0 auto; padding: 15px 0; 
  border: 2px solid #fff; 
  font-size: 1.7rem; color: #2A2867; font-weight: bold;
  border-radius: 50rem; background-color: #00E5AE;
  box-shadow: 4px 5px 0 rgba(0, 0, 0, 0.3); transform: translateY(0);
  cursor: pointer;
  transition: all 1s;
}
.ai-learning .ai-btn a:hover{ transform: translateY(-5px); }

/* ===== 平板Tablet ====================================================================================== */
@media(max-width:992px){
    .ai-subtitle .subtit-box p{
    font-size: 1.2rem;
    }
    .ai-subtitle .subtit-box img{
        max-width: 20%;
    }
    .ai-main-box{ padding: 5px 12px;}
    .ai-main-box h5{ 
    font-size: 1rem;
    }
    .ai-learning .ai-btn a{ 
    width:70%;
    }
}


/* ===== 手機mobile ====================================================================================== */
@media(max-width:667px){

    .ai-subtitle .subtit-box p{
    font-size: 1rem;
    text-align: center;
    line-height: 1.2;
    }
    .ai-main>img{ max-width: 75%;}
    .ai-main-box{
        padding: 0px;
        display: flex;
        align-items: center;
    }
    .ai-main-box>img{
        max-width: 16%;
    }
    .ai-main-box>div{
        padding-left: 10px;
    }
    .ai-main-box h3{ font-size: 1.6rem;}
    .ai-main-box h5{ 
    padding: 5px 8px;
    border-radius: 10px;
    font-size: 0.95rem;
    }
    .ai-main-box p{ 
    font-size: 0.8rem;
    }
    .ai-learning .ai-btn a{ 
    width:70%;
    padding: 8px 0;
    font-size: 1.2rem;
}

}