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;
	width:100%;
	height:100%;
    background-attachment: fixed;
    background-image:url("../images/bg.png");
	background-repeat: no-repeat;
	background-position: center top;
	
}
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:"微軟正黑體" !important;
}
.clearfix{clear:both;}


text-pink{
	font-size: 28px;
	color:#F25955;}
text-red{
	font-size: 32px;font-weight: bold;
	color:#7A171D;}
text-b{
	font-size: 28px;
	font-weight: bold;
	color:#007FC5;}
text-r{
	font-size: 28px;
	font-weight: bold;
	color:#FF4389;}

.TOP-WEB {
	text-decoration:none;
    color:  #FF3;
    font-size: 25px;
    text-align:center; padding:1% 1%;
    background-color:#000;
}
.add {
	font-size: 16px;
	color: #FF9;
	background-color: #000;
    text-align: center;
}
.add2 {
	font-size: 15px;
	color: #FFF;
	background-color: #000;
    text-align: center;
}
.add3 {
	font-size: 20px;
	color: #FF3;
	text-decoration: blink;
	background-color: #000;
    text-align: center;
}

.Stay{  
	text-align:center; 
	margin:0 auto;
	padding:2% auto;
	font-size: 30px;
}

.footer {
	font-family: "微軟正黑體";
	font-size: 16px;
	color: #FF9;
	background-color: #000;
	text-align:center;
    padding:2% auto;
	
}
.footer2 {
	font-family: "微軟正黑體";
	font-size: 15px;
	color: #FFF;
	background-color: #000;
    
}
.footer3 {
	font-family: "微軟正黑體";
	font-size: 20px;
	color: #FF3;
	text-decoration: blink;
	background-color: #000;
    text-align:center;   padding:2% auto;
   
}

.rlaa{ margin:1% 1% 1% 1%;}
.frame img{max-width:120px;}
.frame{ width:100%; margin:0 auto;text-align:center;overflow:hidden;}

/*===========================桌機版================================*/

.float_line{
	position: fixed;
	right: 0;
	top:60px;
	z-index: 1200;
}

.float_line a{
	display: block;
	width: 1.8em;
	padding:10px;
	margin:10%;
	border-radius: 5px 0 0 5px;
	color: #fff;
	background-color:rgba(53,154,237,0.89);
	line-height: 1em;
	text-align: center;
	text-decoration: none;
	font-size:1.5em;
}
.float_line a i{
	font-size:1.6em;
	margin-top: 5px;
}

.contentoutside{width:100%;}
.content{
	width:100%;
	max-width:1000px;
	margin:0 auto;
	padding:0;
	text-align:center;}
.pic{
	width:100%;
	margin:0 auto;
	padding:0;
	text-align:center;}
	
.pic-m{
	width:0;
	height:0;
	overflow:hidden;}
/* 6060 */
/* 2819 */
/* header */

header{background:url("../images/A-03.png")no-repeat;background-size:cover;padding-bottom:100%;max-width:1200px;width: 100%;height: 0;}
.header{animation:Up .8s linear;animation-delay: .8s;}
@keyframes Up{
0%{transform: translateY(1500px);}
100%{transform: translateY(0);}
}
.header-2{position: absolute;width: 100%;height: 100%;display: flex;align-items: center;justify-content: flex-end;}
.header-2 ul{display: flex;flex-wrap: wrap;justify-content: space-between; width:18vw;height:15%;margin-right:33%;margin-top:10%;}
.header-2 ul li{width:47%;}
.header-2 ul li:last-child{width: 100%;}
.header-2 ul a{text-decoration: none;background: #000;color: #fff;border-radius: 50px;font-size:1.3vw;padding:7px 0;display: block;text-align: center;box-sizing: border-box;font-weight: bold;}

/*nav*/
nav{padding: 20px 0; display: flex;justify-content: center;background: #3E67B1;width:100%;overflow: hidden;}
nav ul{display:flex;justify-content: space-between;width:100%;}
nav ul li a{font-size: 28px;color: 
	#fff;padding: 0 25px;
	text-decoration: none;width:20%;}
nav ul li a::after{content: '';background: #fff;height: 2px;width: 0;position: absolute;bottom:0;left: 51%;transition: all .5s;}
nav ul li i{color:#ff;animation: upDown 1s linear infinite;}
@keyframes upDown{
0%{transform: translateY(0px);}
25%{transform: translateY(-5px);}
75%{transform: translateY(5px);}
100%{transform: translateY(0px);}
}
nav ul li a:hover i{animation: none;}
nav ul li a:active::after{left: 0;width: 100%;}

/* main */

main i{animation:toRight 1.2s linear infinite;}
@keyframes toRight{
0%{transform: translateX(0)}
50%{transform: translateX(20px)}
100%{transform: translateX(0)}
}
main a:hover{color: yellow;}
main a:active i{animation: none;}

/* suitable */
.suitablebkg{background: #E5EDF8;padding:80px 0 120px 0;}
.suitable{width: 900px;margin: 0 auto;}
.suitable h6{font-size: 55px;background-color: #2679B1;color: #fff;text-align: center;margin-bottom:20px;padding: 2%}
.suitable ul{display: flex;justify-content: space-between;align-items: stretch;}
.suitable ul li{width:100%;display: flex;flex-flow: column;}

.suitable .down{height: 100%; padding:10px 25px 40px 25px;border-bottom-left-radius: 10px;border-bottom-right-radius: 10px;font-size:24px;color: #000;line-height: 2;}
.suitable .down span{color:red;text-decoration:underline;}

.suitable1-1 table{
	overflow: hidden;
	box-sizing: border-box;margin:40px 10px;font-size: 24px;}

.suitable1-1 table td{border: 2px solid #9CD5F4;box-sizing: border-box;padding:10px;line-height:1.5;vertical-align: middle;text-align: center;}
.suitable1-1  .desktopTable{width:100%; max-width:900px; padding:1%; margin: 0 auto;
	}

.suitable1-2 table{
	box-sizing: border-box;margin:40px 10px;font-size: 24px;}

.suitable1-2 table td{border: 2px solid #1B3FB1;box-sizing: border-box;padding:10px;line-height:1.5;vertical-align: middle;text-align: center;}
.suitable1-2  .desktopTable{width:100%; max-width:900px; padding:1%; margin: 0 auto;
	}


.suitable1-3 table{
	box-sizing: border-box;margin:40px 10px;font-size: 24px;}

.suitable1-3 table td{border: 2px solid #EA9371;box-sizing: border-box;padding:10px;line-height:1.5;vertical-align: middle;text-align: center;}
.suitable1-3  .desktopTable{width:100%; max-width:900px; padding:1%; margin: 0 auto;
	}





/* suitable */


/* suitable2 */
.suitablebkg2{background: #FDEEEF;padding:80px 0 120px 0;}
.suitable2{width: 900px;margin: 0 auto;}
.suitable2 h6{font-size: 55px;background-color: #EA5455;color: #fff;text-align: center;margin-bottom:20px;padding: 2%}
.suitable2 ul{display: flex;justify-content: space-between;align-items: stretch;}
.suitable2 ul li{width:100%;display: flex;flex-flow: column;}
.suitable2 .down{height: 100%; padding:10px 25px 40px 25px;border-bottom-left-radius: 10px;border-bottom-right-radius: 10px;font-size:24px;color: #000;line-height: 2;}
.suitable2 .down span{color:red;text-decoration:underline;}


.suitable2 table tbody{width: 900px; height: auto; margin: 0 auto; padding:1%;}

.suitable2 tr td {background:#fff;padding:2%; margin-bottom:20px;
}
.suitable2 img{width:100%;}
.suitable2 a{font-size: 24px;color: #434242;background: #FFE362;text-decoration: none;padding: 0.2em 1.5em;border-radius: 50px; width:100%;}

.suitable2 a:hover{
	transition: 0.5s;
	transform: scale(0.95,0.95);color: #EA5455;
}


.suitable2-2 table{
	box-sizing: border-box;margin:40px 10px;font-size: 24px;}

.suitable2-2 table td{border: 2px solid #FF908A;box-sizing: border-box;padding:10px;line-height:1.5;vertical-align: middle;text-align: center;}
.suitable2-2  .desktopTable{width:100%; max-width:900px; padding:1%; margin: 0 auto;
	}



/* suitable2 */





/* main01 */
.main01bkg{background: #C4D9E1;padding: 80px 0;}
.main01 h6{font-size:55px;background-color: #2679B1;color: #fff;text-align: center;margin-bottom:20px;padding: 2%}}
.main01{width: 1100px;margin: 0 auto;text-align: center;}
.main01 .main01-head{display: block;align-items: center;justify-content: space-around;}
.main01>img{width: 30%;}
.main01 .main01-head ul{width: 60%;display: flex;flex-wrap: wrap;}
.main01 .main01-head ul:first-child{margin: 0;}
.main01 .main01-head ul li{text-align: left;margin-top: 3px;width: 100%;border-radius:50em;background:linear-gradient(to right,#822fdf,#e70d1e);color: #fff;font-size: 30px;padding:0.5em 1em;}

.main01 .main01-head ul span{color:#fff100;}

.main01>ul{ overflow: hidden;display: flex;justify-content: space-between;margin-top:40px;margin-bottom:50px; }
.main01>ul li{width:18%;border: 1px solid #e0c5ff;border-radius:40px;text-align: center;overflow: hidden;position: relative;}
.main01 .Content{box-sizing: border-box;padding: 10px; padding-bottom: 50px;}
.main01>ul .name{font-size: 34px;font-weight: bold;color: #451ead;line-height: 1.5;margin-bottom:5px;}
.main01>ul .identity{ padding: 10px 0; font-size: 20px;color: #e60012; line-height: 1.1; border-top: 1px dashed #C1C1C1; border-bottom: 1px dashed #C1C1C1;}
.main01 .time{ padding: 15px 0; width: 100%; text-align:center; line-height: 1.3; }
.main01 .linkbtn{ margin: 0 auto 5px auto; width: 85%; height: 42px; line-height: 42px; background-color: #842eda; color: #FFFFFF; border-radius: 10px;}
.main01 .linkbtn a{ display: block; color: #FFFFFF; text-decoration: none;}
.main01 .linkbtn a:hover{ color: #fff100;}

.main01 .hundred{margin-bottom:20px;font-size:30px;font-weight: bold;color:#b15a20;}

.main01>a{font-size: 34px;color: #fff;background: #ff0000;text-decoration: none;padding: 0.2em 1.5em;border-radius: 50px;}
.main01 p{display:block;width: 90%;margin:20px auto 20px auto;line-height: 1.5;font-size: 20px;}


.main01 .main01-head p{font-family:'Noto Sans TC',sans-serif; color: #ca6fb4;box-sizing: border-box;padding: 0 20px;font-size:28px;}
.main01 .main01-head>p{box-sizing: border-box;padding:0 50px;font-size: 21px;color: #000;}
.main01 .main01-head>table{box-sizing: border-box;margin:40px 10px;border: 1px solid #231815;font-size: 18px;}
.main01 .main01-head>table thead td{background: #AC8861;color:#000;text-align: center;font-weight: bold;}
.main01 .main01-head>table tbody td:first-child{background: #F6C146;color:#000;text-align: center;font-weight: bold;vertical-align: middle;}
.main01 .main01-head>table td{border: 1px solid #231815;box-sizing: border-box;padding:10px;line-height:1.5;vertical-align: middle;text-align: left;}
.main01 .main01-head .desktopTable{display: block;}
.main01 .main01-head .mobileTable{display: none;}


/* main02 */
.main02bkg{background: #ffd200;padding:80px 0;}
.main02{text-align: center;width: 1100px; margin: 1% auto;}
.main02 h2{font-size: 55px;font-weight: bold;color: #451ead;margin-bottom:40px;}

.main02 .part01-mobile{display: none;}
.main02 .part01{background:url(../images/main02-part01bkg.png);}
.main02 .part01{margin-bottom: 40px;}
.main02 .part01 p{text-align: center;}
.main02 .part01 p:first-child{font-size: 35px;color: #fff;background: #451ead;border-radius: 50px;padding: 0.2em 2em;display: inline;position: relative;}
.main02 .part01 p:first-child::before{content: '';display: block;background: #000;width: 200px;height: 1px;position: absolute;left: -200px;top:48%;}
.main02 .part01 p:first-child::after{content: '';display: block;background: #000;width: 200px;height: 1px;position: absolute;right: -200px;top:48%;}

.main02 .part01 p:nth-child(2){margin:30px 0 40px 0;font-size:25px;font-weight: bold;}
.main02 .part01 .into img:first-child{position: relative;z-index:1;}
.main02 .part01 .into{
	position: relative;
	overflow: hidden;
	z-index: 1;
}
.main02 .part01 .into .earth{
	position: absolute;
	bottom:0;
	left: 0;
	z-index: 1;
	transform-origin:18% 66%;transform:rotateZ(360deg);z-index:1;
	display: none;
}
.main02 .part01 .into .rocket{
	position: absolute;
	bottom:0;
	left: 0;
	z-index: 1;
	transform:rotateZ(0deg);
	display: none;
}
.main02 .part01 .into .target{
	position: absolute;
	bottom:0;
	left: 0;
	z-index: 1;
	transform:rotateZ(0deg);
	display: none;
}
.main02 .part01 .into-an{	animation:ovH 3s;
}
@keyframes ovH{
	0%{overflow: hidden;}
	1%{overflow:visible;}
	99%{overflow:visible;}
	100%{overflow: hidden;}
}
.main02 .part01 .into .earth-an{animation:earthRotate 1.8s linear;display: block;}
@keyframes earthRotate{
	0%{transform-origin:center 85%;transform:rotateZ(100deg);z-index:0;}
	8%{transform-origin:center 80%;transform:rotateZ(120deg);z-index:0;}
	15%{transform-origin:center 75%;transform:rotateZ(140deg);z-index:1;}
	25%{transform-origin:center 70%;transform:rotateZ(160deg);z-index:1;}
	36%{transform-origin:center 65%;transform:rotateZ(180deg);z-index:1;}
	55%{transform-origin:41% 66%;transform:rotateZ(220deg);z-index:1;}
	65%{transform-origin:35% 66%;transform:rotateZ(250deg);z-index:1;}
	75%{transform-origin:29% 66%;transform:rotateZ(280deg);z-index:1;}
	100%{transform-origin:18% 66%;transform:rotateZ(360deg);z-index:1;}
} 

.main02 .part01 .into .rocket-an{animation: rocketRotate 2s linear;display: block;}
@keyframes rocketRotate{
	0%{transform-origin:center 85%;transform:rotateZ(100deg);z-index:0;}
	8%{transform-origin:center 80%;transform:rotateZ(120deg);z-index:0;}
	15%{transform-origin:center 75%;transform:rotateZ(140deg);z-index:1;}
	25%{transform-origin:center 70%;transform:rotateZ(160deg);z-index:1;}
	35%{transform-origin:center 65%;transform:rotateZ(180deg);z-index:1;}
	60%{transform-origin:41% 66%;transform:rotateZ(220deg);z-index:1;}
	70%{transform-origin:35% 66%;transform:rotateZ(250deg);z-index:1;}
	80%{transform-origin:35% 66%;transform:rotateZ(280deg);z-index:1;}
	100%{transform-origin:35% 66%;transform:rotateZ(360deg);z-index:1;}
}
.main02 .part01 .into .target-an{
	animation: targetRotate 2s linear;
	display: block;
}
@keyframes targetRotate{
	0%{transform-origin:20% 80%;transform:translate3D(-200px,20px,0)	;z-index:0;}
	60%{transform-origin:20% 80%;transform:translate3D(-200px,20px,0)	;z-index:0;}
	80%{transform-origin:20% 80%;transform:translate3D(0,0px,0)	;z-index:1;}
	100%{transform-origin:20% 80%;transform:translate3D(0,0px,0)	;z-index:1;}
}

.main02 .part02{margin-top: 100px;}
/* .main02 .part02{background:url(../images/main02-part1bkg.png)no-repeat;background-size: cover;} */
.main02 .part02>p{text-align: center;}
.main02 .part02>p:first-child{font-size: 35px;color: #fff;background: #451ead;border-radius: 50px;padding: 0.2em 2em;display: inline;position: relative;}
.main02 .part02>p:first-child::before{content: '';display: block;background: #000;width: 200px;height: 1px;position: absolute;left: -200px;top:48%;}
.main02 .part02>p:first-child::after{content: '';display: block;background: #000;width: 200px;height: 1px;position: absolute;right: -200px;top:48%;}

.main02 .part02>p:nth-child(2){margin:30px 0 40px 0;font-size:25px;font-weight: bold;}

.main02 .part02 ul{margin-bottom: 80px;}
.main02 .part02 ul li{width: 100%;display: flex;justify-content:space-between;align-items: center;text-align: left;}
.main02 .part02 ul li:first-child{margin-bottom:20px;}
.main02 .part02 ul li:first-child .course{background: #451ead;}
.main02 .part02 ul li img{width:30%;}
.main02 .part02 ul li .course{background: #e60012;width: 65%;box-sizing: border-box;padding:15px 10px 15px 30px;border-radius: 10px;color: #fff;font-size: 20px;line-height: 1.5;}
.main02 .part02 ul li .course span{color: #ffe100;font-size: 24px;}

.main02 .hundred{margin-bottom:20px;font-size:30px;font-weight: bold;color:#e8380d;}
.main02 a{font-size: 34px;color: #fff;background: #ff0000;text-decoration: none;padding: 0.2em 1.5em;border-radius: 50px;}
.main02 a:hover{
transition: 0.5s;
transform: scale(0.95,0.95);color: #ff0000;background: #fff;}
/* main03 */
.main03bkg{overflow: hidden; padding: 80px 0;background: url(../images/main03bkg.jpg)no-repeat;background-size: cover;background-attachment: fixed;}
/* .main03bkg{padding: 80px 0;background: #771cdc;} */

.main03bkg .star {
	display: block;
	width: 0px;
	height: 0px;
	border-radius: 50%;
	background: #fff;
	top: -50px;
	left:400px;
	position: relative;
	transform-origin: 100% 0;
	animation: star-slide 8s  linear infinite;
	box-shadow: 0 0 0px 0px rgba(255, 255, 255, .3);
	transform: scale(1);
	opacity: 0;
	z-index: 2; 	
}
.main03bkg .star::after {
	content: '';
	display: block;
	top: -10px;
	left: 200px;
	border: 0px solid #fff;
	border-width: 0px 90px 3px 90px;
	border-color: transparent transparent transparent #fff;
	transform: rotate(-45deg) translate3d(1px, 3px, 0);
	transform-origin: 0% 100%;
}
@keyframes star-slide {
0% {
	opacity: 0;
	transform: scale(0) rotate(0) translate3d(0, 0, 0);
}
60% {
	opacity: 1;
	transform: scale(1) rotate(0) translate3d(-300px, 300px, 0);
}
100% {
	opacity: 0;
	transform: scale(1) rotate(0) translate3d(-540px,540px, 0);
}
}
.main03bkg .star-1{top:34%;left:30%;}
.main03bkg .star-2{top:15%;left:80%;animation-delay: 2s;}
.main03bkg .star-3{top:45%;left:65%;animation-delay:9s;}
.main03bkg .star-4{top:80%;left:30%;animation-delay:4s;}
.main03bkg .star-5{top:99%;left:37%;animation-delay:3s}
.main03bkg .star-6{top:200%;left:42%;animation-delay: -1s;}
.main03bkg .star-7{top:56%;left:70%;animation-delay: -2s;}
.main03bkg .star-8{top:75%;left:90%;}
.main03bkg .star-9{top:65%;left:52%;animation-delay: 3s;}
.main03bkg .star-10{top:5%;left:94%;}
.main03bkg .star-11{top:53%;left:12%;animation-delay: 5s;}
.main03bkg .star-12{left:100%; top:23%;animation-delay: 5s;}
.main03bkg .star-13{left:192%; top:47%;animation-delay:1s;}

.main03{width: 940px;margin: 0 auto;text-align: center;}
.main03 h3{font-size: 55px;color: #fff;font-weight: bold;margin-bottom: 40px;}
.main03 ul{display: flex;justify-content: space-between;margin-bottom:50px;position: relative;z-index: 5;}
.main03 ul li{width:30%;font-weight: bold;}
.main03 ul li img{margin-bottom:40px;}
.main03 ul .Content{color: #771cdc;background:#fff100;font-size: 26px;box-sizing: border-box;padding: 20px;border-radius: 10px;line-height: 1.2;height:45%;text-align: left;}
.main03 .hundred{font-size:30px;margin-bottom:20px;color: #fff;font-weight: bold;}
.main03>a{font-size: 34px;color: #fff;background: #ff0000;text-decoration: none;padding: 0.2em 1.5em;border-radius: 50px;}

/* main04 */
.main04bkg{overflow: hidden; padding: 50px 0;background: url(../images/main04bkg.jpg)no-repeat;background-size: cover;background-attachment: fixed;}
.main04{width: 950px;margin: 0 auto;text-align: center;}
.main04 h4{text-align: center;font-size: 50px;color: #3E67B1;margin-bottom: 50px;}
.main04 ul li{margin-bottom:80px;display: flex;justify-content: space-between;text-align: left;overflow: hidden;}
.main04 ul li .Content{width:70%;}
.main04 ul li .head{color: #FFF;}
.main04 ul li .head{background-color:#821A1F;font-size: 36px;padding: 0.3em;border-radius: 10px;margin-bottom: 20px;}
.main04 ul li:nth-child(even) .head{background-color:#3E67B1;}
.main04 .name{color: #000;font-size: 22px;font-weight:bold;line-height: 1.5;}
.main04 .name span{color: #ffff00;}
.main04 .Content p{color: #595757;line-height: 1.5;}

.main04 .hundred{margin-bottom:20px;color: #fff;font-weight: bold;font-size: 28px;}
.main04 a{font-size: 34px;color: #fff;background: #ff0000;text-decoration: none;padding: 2em 1.5em;border-radius: 50px;margin: 2% 2%;

}
.main04 p{display:block;width: 70%;margin:30px auto 0 auto;line-height: 1.5;font-size: 14px;}





/*main05*/
.main05bkg{padding: 80px 0;background-color: #F6C146;}
.main05{width: 800px;margin: 0 auto;text-align: center;}
.main05 h5{font-size: 50px;color: #3E67B1;line-height: 1.5;margin-bottom: 20px;}

.main05 .Content{display: flex;justify-content: space-between;}
.main05 .Content ul{width: 48%;margin-bottom: 40px;}
.main05 .Content ul li{display: flex;justify-content: space-between;border-radius: 10px;overflow: hidden;margin-bottom: 20px;}
.main05 .leftUl li .left{width: 30%; background:#3E67B1;color:#fff;font-size: 32px;box-sizing: border-box;padding: 20px;}
.main05 .leftUl li:nth-child(even) .left{background: #821A1F;}

.main05 .rightUl li .left{width: 30%;background: #821A1F;color:#fff;box-sizing: border-box;padding: 20px;font-size: 32px;}
.main05 .rightUl li:nth-child(even) .left{background: #3E67B1;}
.main05 Ul li .right{width:70%;font-size: 24px;font-weight: bold;line-height: 1.2;background: #f0f0f0;text-align: left;box-sizing: border-box;padding: 20px;}

.main05 .hundred{font-size: 28px;font-weight: bold;margin-bottom: 20px;color:#183194;}

.main05>a{font-size: 34px;color: #fff;background: #ff0000;text-decoration: none;padding: 0.2em 1.5em;border-radius: 50px;}
.main05>p{display:block;width: 100%;margin:30px auto 0 auto;line-height: 1.5;font-size: 14px;}

/* footer */
footer{background:#183194;padding: 40px 0 60px 0;}
.footer{width: 850px;margin: 0 auto;display: flex;}
.footer>img{margin-right: 10px;}
.footer div{width:70%;}
.footer div>a{font-size: 22px;font-weight: bold;text-decoration: none; padding:10px 20px; background: #fff;color: #c30d23;border-radius: 10px;display: block;width: 100%;position: relative;margin-bottom:15px;}
.footer div>a i{position: absolute;right: 10px;}
.footer div>a:active{box-shadow:0 0 15px 4px gray inset;}

.footer ul{display:flex;justify-content: space-around;}
.footer ul li{border-left:1px solid #3157ed;padding:0 10px;}
.footer ul li:first-child{border: 0;}
.footer ul a{color:#fff;font-size: 20px;text-decoration: none;position: relative;}
.footer ul a::after{content: '';background: #fff;width: 0;height: 1px;transition: all.5s;position: absolute;bottom:0;left: 51%;}
.footer ul a:hover::after{left: 0;width: 100%;}
.footer ul a:active{color: #999999;}
.footer ul a:active::after{transition:all 0s; background: #999999;}

/*goTop*/
.gotop{z-index: 99; border-top:2px solid #999999;border-left:2px solid #999999;border-right:2px solid #000;border-bottom:2px solid #000; display:flex;justify-content: center;align-items: center;position: fixed;width: 45px;height: 80px;bottom:10px;right: 10px;border-radius: 99em;background: red;color: #fff;text-decoration: none;}
.gotop:active{border-top:2px solid #000;border-left:2px solid #000;border-right:2px solid #999999;border-bottom:2px solid #999999;background: #960101;}

/*其他版型*/
@media(max-width:1120px){
.header-2 ul{height: 17%;}
.main01{width: 98%;}
.main02{width: 98%;}
}
@media(max-width:1000px){
.main01 ul li img{width: 101%;}

.main03{width: 98%;}
.main03 ul li img{width: 100%;}
.main04{width: 98%;}

.footer{width: 98%;}
.footer div>a{width:90%;}
	
	.pic{
	width:0;
	height:0;
	overflow:hidden;}
.pic-m{
	display:block;
	width:100%;
	height:auto;
	margin:0;}
}

/*===========================平版================================*/
@media(max-width:768px){
/* header */
	
	
.float_line{
	position: fixed;
	right: 0;
	top:60px;
	z-index: 1200;
}

.float_line a{
	display: block;
	width: 1em;
	padding:7px;
	margin:6%;
	border-radius: 5px 0 0 5px;
	color: #fff;
	background-color:rgba(53,154,237,0.89);
	line-height: 1em;
	text-align: center;
	text-decoration: none;
	font-size:1em;
}
.float_line a i{
	font-size:1.5em;
	margin-top: 5px;
}

	
	
.header-2 ul{height:20%;}
.pic{
	width:0;
	height:0;
	overflow:hidden;}
.pic-m{
	display:block;
	width:100%;
	height:auto;
	margin:0;}
/*nav*/
.nav{width: 100%;}
nav ul{width: 40%;margin: 0 auto;justify-content: space-around;}
nav ul li a{font-size: 24px;}

/* main */
/* suitable */
.suitable {width: 98%;margin: 0 auto;}
.suitable ul li{width: 32%;}
.suitable2 {width: 98%;margin: 0 auto;}
.suitable2 ul li{width: 32%;}
/*main01*/
/* .main01{display: none;} */
.main01 .main01-head ul li{font-size: 20px;}
.main01>ul .name{font-size: 26px;}
.main01 .time{left:calc(5%/2);width: 95%;}
.main01 .linkbtn{ margin: 0 auto 5px auto; width: 100%; height: 42px; line-height: 42px; background-color: #842eda; color: #FFFFFF; border-radius: 10px;}
.main01 .linkbtn a{ display: block; color: #FFFFFF; text-decoration: none;}
.main01 .linkbtn a:hover{ color: #fff100;}
.main01>p{width: 85%;}

/*main02*/
.main02 .part01 {overflow: hidden;padding-top:20px;}
.main02 .part01 p:first-child::before{left:-20%;width:20%;}
.main02 .part01 p:first-child::after{right:-20%;width:20%;}
.main02 .part01 .into{overflow:visible; transform: scale(0.8)translateX(-100px);animation: none;}

.main02 .part02{margin-top: 80px;}
.main02 .part02 p:first-child::before{left:-20%;width:20%;}
.main02 .part02 p:first-child::after{right:-20%;width:20%;}
.main02 .part02 ul li {justify-content: space-around;}

/*main03*/
.main03 ul{justify-content: space-around;}
.main03 ul .Content{padding: 15px;font-size: 24px;}

/*main04*/
.main04 ul li .Content{width: 63%;}
.main04 ul li .head{font-size: 25px;margin: 0;}
.main04 .name{font-size: 20px;line-height: 3;}
.main04>p{width: 80%;color: #fff;}

/*main05*/
.main05{width: 98%;}
.main05 Ul li .right{padding: 10px;}

/* footer */
.footer{width: 95%;}
.footer ul li {padding: 0 5px;}
.footer div>a{width: auto;}
}

	
/*===========================行動版================================*/
@media(max-width:767px){
/* header */
header{background:url("../images/A-03.png")no-repeat;background-size:cover;padding-top:100%;width: 100%;height:auto;text-align:center;overflow:hidden;}
header div{display: none;}
.header-2{justify-content:center;align-items: flex-end;}
.header-2 ul{margin-top: 0;width: 40%;height:20vw;margin-bottom:22%;}
.header-2 ul a{font-size:4vw;}



	
	/*nav*/
nav{padding: 20px 0; display: flex;justify-content: center;background: #3E67B1;width:100%;overflow: hidden;}
nav ul{display:flex;justify-content: space-between;width:100%;}
nav ul li a{font-size: 20px;color: #fff;text-decoration: none;width:50%;}
nav ul li a::after{content: '';background: #fff;height: 2px;width: 0;position: absolute;bottom:0;left: 51%;transition: all .5s;}
nav ul li i{color:#ff;animation: upDown 1s linear infinite;}
@keyframes upDown{
0%{transform: translateY(0px);}
25%{transform: translateY(-5px);}
75%{transform: translateY(5px);}
100%{transform: translateY(0px);}
}
nav ul li a:hover i{animation: none;}
nav ul li a:active::after{left: 0;width: 100%;}
	
	
	
/* main */
/* suitable */
.suitablebkg{padding:60px 0 20px 0;}
.suitable h6{font-size:11vw;}
.suitable ul{flex-wrap: wrap;}
.suitable ul li{width: 95%;margin: 0 auto 20px auto;}
	
.suitablebkg2{padding:60px 0 20px 0;}
.suitable2 h6{font-size:11vw;}
.suitable2 ul{flex-wrap: wrap;}
.suitable2 ul li{width: 95%;margin: 0 auto 20px auto;}
		


/* main01 */
.main01 .main01-head{display: block;}
.main01 .main01-head img{width: 100%;}
.main01 .main01-head ul{width: 98%;}
.main01 .main01-head ul li{font-size: 5vw;margin-top:10px;}
.main01>ul{display: block;}
.main01>ul li{width:90%;margin: 20px auto 0 auto;border-radius: 30px;animation: none;transform:translateY(0px);}
.main01>ul li:first-child{margin: 0 auto;}
.main01 ul li img{width: 100%;}

.main01 .hundred{font-size:7vw;}
.main01>p{font-size: 12px;width: 95%;}
.main01>a{font-size:6vw;padding: 0.2em 2em;}
.main01 .main01-head>p{box-sizing: border-box;padding:0 20px;font-size: 14px;color: #000;}
.main01 h6{font-size: 9vw;}    
    
    
/* main02 */
.main02 h2{font-size: 15vw;line-height: 1.1;}

.main02 .part01 p:first-child{font-size: 8vw}
.main02 .part01 p:first-child::before,.main02 .part01 p:first-child::after{display: none;}
.main02 .part01 p:nth-child(2){font-size: 4vw;}
.main02 .part01 .into{display: none;}

.main02 .part01-mobile{display: block;overflow: hidden;}
.main02 .part01-mobile>img{ position: relative; z-index: 2;animation: go 4s linear infinite;}
@keyframes go{
0%{transform:translate3D(-400px,300px,0)rotateZ(0deg);}
20%{transform:translate3D(-400px,300px,0)rotateZ(0deg);}
100%{transform:translate3D(350px,-850px,0)rotateZ(0deg);}
}
.main02 .part01-mobile ul li:first-child{background:#1fbb7b; position: relative;z-index: 1;}
.main02 .part01-mobile ul li:nth-child(2){background:#0055e3;position: relative;z-index: 3;}
.main02 .part01-mobile ul li:nth-child(3){background: #ff7e00;position: relative;z-index: 3;}
.main02 .part01-mobile ul li:nth-child(4){background:#d93b94;position: relative;z-index: 1;}
.main02 .part01-mobile ul li{font-size:20px;color: #fff;padding:10px 20px 20px 20px;box-sizing: border-box;border: 2px solid #fff;margin-bottom: 20px;line-height: 1.2;}
.main02 .part01-mobile ul li span{line-height: 1.5; font-size: 12vw;text-shadow:0px 0px 5px #000;}

.main02 .part02::before{content:'';display: block;width: 80%;height: 1px;background: #000;margin: 0 auto 50px auto;}
.main02 .part02{margin: 0;}
.main02 .part02 p:first-child{font-size: 8vw;}
.main02 .part02 p:first-child::before,.main02 .part02 p:first-child::after{display: none;}
.main02 .part02>p:nth-child(2){font-size:4vw;}

.main02 .part02 ul{margin-bottom: 40px;}
.main02 .part02 ul li img{width: 60%;}
.main02 .part02 ul li{display: block;text-align: center;}
.main02 .part02 ul li:first-child{margin-bottom: 35px;}
.main02 .part02 ul li .course{width: 96%;margin: 0 auto;padding: 15px;}
.main02 .part02 ul li .course span{text-align:left;}
.main02 .part02 ul p{margin-bottom: 10px;font-size:4.7vw;}

.main02 .hundred{font-size:7vw;}
.main02>a{font-size:6vw;padding: 0.2em 2em;}


	
	
	
	

/* main03 */
.main03 h3{font-size: 11vw;}
.main03 ul{display: block;width: 96%;margin: 0 auto;}
.main03 ul li{width: 100%;margin-bottom: 30px;}
.main03 ul li img{margin-bottom: 10px;width: auto;}
.main03bkg .star-12{top:500px;}
.main03bkg .star-10{top:720px;left: 96%;animation-delay: 2s;}
.main03bkg .star-8{top: 650px;}
.main03bkg .star-4{top: 700px;left: 4%;}
.main03bkg .star-1{top: 370px;left: 43%;animation-delay: 1s;}

.main03 .hundred{font-size:7vw;}
.main03>a{position: relative;z-index: 5;font-size:6vw;padding: 0.2em 2em;}

/* main04 */
.main04 h4{font-size: 11vw;}
.main04 ul li{display: block;text-align: center;margin-bottom:50px;}
.main04 ul li .Content{margin: 0 auto;width: 95%;}
.main04 ul li .head{font-size: 5vw;}
.main04 .name{line-height:1.5;margin:10px 0;font-size: 16px;}
.main04 .name span{display: block;}
.main04 .bounceInDown{animation:none;}

.main04 .hundred{font-size:7vw;}
.main04>p{width: 96%;font-size: 12px;}
.main04>a{font-size:6vw;padding: 0.2em 2em;}

	
	
	
	
	
	
	
/* main05 */
.main05>img{max-width:98%;}
.main05 h5{font-size: 9vw}
.main05 .Content{display: block;width: 98%;margin: 0 auto;}
.main05 .Content ul{width: 100%;}
.main05 .Content ul li{width: 100%;flex-wrap:wrap;}
.main05 .leftUl li .left{width: 100%;padding: 15px;font-size:30px;}
.main05 .rightUl li .left{width: 100%;padding: 15px;font-size:30px;}
.main05 Ul li .left{width: 100%;font-size:5.5vw;text-align:center;border:0px solid #999999; border-width: 1px 1px 0px 1px;border-top-left-radius:10px;border-top-right-radius: 10px;}
.main05 Ul li .right{width: 100%;font-size:5.5vw;text-align:center;border: 0px solid #999999;border-width: 0 1px 1px 1px;border-bottom-left-radius:10px;border-bottom-right-radius: 10px; }

.main05 .hundred{font-size:7vw;}
.main05>a{font-size:6vw;padding: 0.2em 2em;}

/* footer */
.footer{display: block;}
.footer img{display: block;margin: 0 auto;}
.footer div{width:100%;margin: 0 auto;}
.footer div>a{display: block; width:95%;margin:15px 0;font-size: 16px;padding:10px;}
.footer ul{flex-wrap: wrap;justify-content:normal;}
.footer ul li{text-align: center;margin: 5px 1%;width: 31%;padding: 0;}
.footer ul li a{display: block;font-size:5vw;}

}

*{ margin:0; padding:0;}

html{ width:100%; height:100%; font-family:Arial, Helvetica,"微軟正黑體",sans-serif; text-size-adjust:none;
      font-size:15px;}
ul{ margin:0; padding:0; list-style:none;}
p{ margin:0; padding:0;}

/* == 桌機版優先 ============================================================================= */
.pic{
	width:0;
	height:0;
	overflow:hidden;}
.pic-m{
	display:block;
	width:100%;
	height:auto;
	margin:0;}

#cloudservice{ font-family:Arial, Helvetica,"微軟正黑體",sans-serif; text-size-adjust:none; font-size:15px;box-sizing: border-box;}
#cloudservice.cloudstudy{ padding: 100px 0; width: 100%; background-color: #F6C146;text-align: center;}
#cloudservice.cloudstudy .title{ margin: 0 auto; max-width: 1200px; display: flex;  box-sizing: border-box;text-align: left;}
#cloudservice.cloudstudy .title-L{ padding: 0 20px 0 0; width: 40%; text-align: right;}
#cloudservice.cloudstudy .title-L img{ width: 100%; max-width: 260px;}
#cloudservice.cloudstudy .title-R{ width: 60%; display: flex; flex-wrap: wrap; align-items: flex-end;}
#cloudservice.cloudstudy .title-R h2{ margin: 0; padding: 0; font-size: 4.8em; font-weight: normal; font-style: italic;}
#cloudservice.cloudstudy .title-R div{ padding: 10px 20px; width: 100%; background-color: #3E67B1; font-size: 2.5em; color: #FFFFFF; border-radius: 20px 0 0 0;}
#cloudservice.cloudstudy .main{ margin: 0 auto; max-width: 1200px; box-sizing: border-box;}
#cloudservice.cloudstudy .main ul{ margin: 60px auto; width: 100%; display: flex; }
#cloudservice.cloudstudy .main ul li{ width: 170px; text-align: center;}
#cloudservice.cloudstudy .main ul li img{ width:80%; max-width:900px; height:auto;}
#cloudservice.cloudstudy .main ul li .cloudstudy-btn01,.cloudstudy-btn02,.cloudstudy-btn03,.cloudstudy-btn04,.cloudstudy-btn05,.cloudstudy-btn06,.cloudstudy-btn07,.cloudstudy-btn08{ cursor: pointer; transition-duration: .5s }
#cloudservice.cloudstudy .main ul li .cloudstudy-btn01:hover,.cloudstudy-btn02:hover,.cloudstudy-btn03:hover,.cloudstudy-btn04:hover,.cloudstudy-btn05:hover,.cloudstudy-btn06:hover,.cloudstudy-btn07:hover,.cloudstudy-btn08:hover{ transform: translateY(-10px);}
#cloudservice.cloudstudy .main ul li .cloudstudy-sub01,.cloudstudy-sub02,.cloudstudy-sub03,.cloudstudy-sub04,.cloudstudy-sub05,.cloudstudy-sub06,.cloudstudy-sub07,.cloudstudy-sub08{ display: none;}
#cloudservice.cloudstudy .main ul li h3{ margin: 0; padding: 5px 0; font-size: 1.8em; font-style: italic; border-bottom: 0px dashed #a0a0a0;}
#cloudservice.cloudstudy .main ul li h3:nth-child(2){ border-bottom: 1px dashed #a0a0a0;}
#cloudservice.cloudstudy .main ul li .green{ color: #15b494;}
#cloudservice.cloudstudy .main ul li .orange{ color: #f58e01;}
#cloudservice.cloudstudy .main ul li .purple{ color: #9f57e7;}
#cloudservice.cloudstudy .main ul li .light-purple{ color: #cba1f5;}
#cloudservice.cloudstudy .main ul li .blue{ color: #3E67B1;}
#cloudservice.cloudstudy .main ul li .red{ color: #ff3b4f;}
#cloudservice.cloudstudy .main ul li .light-red{ color: #ff8290;}
#cloudservice.cloudstudy .info{ box-sizing: border-box; width: 100%; padding: 20px 18px; background-color: #414141; border-radius: 15px; color: #FFFFFF; line-height: 1.5;}
#cloudservice.cloudstudy .info h4{ font-size: 1.2em;text-align: center;}
#cloudservice.cloudstudy .info p{ padding: 10px 0 0 0; font-size: 1.1em; text-align: justify;}
#cloudservice>a{ display:inline-block; text-decoration: none; color: #FFFFFF;font-size:20px;padding:8px 25px;box-sizing: border-box;font-weight: bold;margin:0 auto; background-color: #000000; border-radius: 30px;}



/* == 平版版型區 ============================================================================= */
@media screen and ( min-width:768px ) and ( max-width:1024px ){
.pic{
	width:0;
	height:0;
	overflow:hidden;}
.pic-m{
	display:block;
	width:100%;
	height:auto;
	margin:0;}	
/*專為你的上榜需求-實體雲端串流學習不間斷*/
#cloudservice{text-size-adjust:none; font-size:15px; box-sizing: border-box;}
#cloudservice.cloudstudy{ padding: 80px 0; width: 100%;text-align:center;}
#cloudservice.cloudstudy .title{ margin: 0 auto; width: 100%;text-align:left;}
#cloudservice.cloudstudy .title-L{ padding: 0; width: 35%; text-align:center;}
#cloudservice.cloudstudy .title-L img{ width: 100%; max-width: 260px;}
#cloudservice.cloudstudy .title-R{ width: 75%;}
#cloudservice.cloudstudy .title-R h2{ margin: 0; padding: 0; font-size: 4em;}
#cloudservice.cloudstudy .title-R div{ padding: 10px 20px; width: 100%; font-size: 2.2em;}
#cloudservice.cloudstudy .main{ margin: 0 auto; padding: 0 2%; width: 100%;text-align:left;}
#cloudservice.cloudstudy .main ul{ margin: 40px auto; }
#cloudservice.cloudstudy .main ul li{ width: 18%;}
#cloudservice.cloudstudy .main ul li .cloudstudy-btn01:hover,.cloudstudy-btn02:hover,.cloudstudy-btn03:hover,.cloudstudy-btn04:hover,.cloudstudy-btn05:hover,.cloudstudy-btn06:hover,.cloudstudy-btn07:hover,.cloudstudy-btn08:hover{ transform: translateY(0px);}
#cloudservice.cloudstudy .main ul li h3{ padding: 5px 0; font-size: 1.5em;}
#cloudservice.cloudstudy .info{ width: 100%; padding: 15px; border-radius: 10px;}
#cloudservice.cloudstudy .info h4{ font-size: 1.1em;}
#cloudservice.cloudstudy .info p{ padding: 5px 0 0 0; font-size: 1em; }
}

/* == 手機版型區 ============================================================================= */
@media screen and ( max-width:767px ){
.pic{
	width:0;
	height:0;
	overflow:hidden;}
.pic-m{
	display:block;
	width:100%;
	height:auto;
	margin:0;}	
/*專為你的上榜需求-實體雲端串流學習不間斷*/
	
.suitable1-1 table{
	width: 100%;
	overflow: hidden;
	box-sizing: border-box;margin:40px 10px;font-size: 20px;}

.suitable1-1 table td{border: 2px solid #9CD5F4;box-sizing: border-box;padding:10px;line-height:1.5;vertical-align: middle;text-align: center;}
.suitable1-1  .desktopTable{width:100%; max-width:900px; padding:1%; margin: 0 auto;
	}	
#cloudservice.cloudstudy{ padding: 50px 2%; width: 100%;}
#cloudservice.cloudstudy .title{ width: 100%; flex-wrap: wrap;}
#cloudservice.cloudstudy .title-L{ padding: 0; width: 50%;}
#cloudservice.cloudstudy .title-R{ width: 100%; text-align: center; justify-content: center; }
#cloudservice.cloudstudy .title-R h2{ font-size: 2.5em; font-style: normal;}
#cloudservice.cloudstudy .title-R div{ padding: 10px; width: 90%; font-size: 1.5em; border-radius: 20px;}
#cloudservice.cloudstudy .main{ width: 100%;}
#cloudservice.cloudstudy .main ul{ margin: 20px auto; width: 100%; flex-wrap: wrap; justify-content:space-between;}
#cloudservice.cloudstudy .main ul li{ padding: 10px 0; width: 48%; text-align: center;}
#cloudservice.cloudstudy .main ul li:last-child{ margin: 0 auto; width: 50%;}
#cloudservice.cloudstudy .main ul li .cloudstudy-btn01:hover,.cloudstudy-btn02:hover,.cloudstudy-btn03:hover,.cloudstudy-btn04:hover,.cloudstudy-btn05:hover,.cloudstudy-btn06:hover,.cloudstudy-btn07:hover,.cloudstudy-btn08:hover{ transform: translateY(0px);}
#cloudservice.cloudstudy .main ul li img{ width: 90%; height:auto;}
#cloudservice.cloudstudy .main ul li h3{ padding: 2px 0; font-size: 1.3em;}
#cloudservice.cloudstudy .info h4{ font-size: 1em;}
#cloudservice.cloudstudy .info p{ padding: 5px 0 0 0; font-size: 1em; }
#cloudservice>a{line-height:40px; border-radius: 30px;padding: 5px 20px;font-size:6vw;}
}