/*通用設定*/
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;
}
/*=============桌機版================*/
/* header */
header{overflow: hidden; background:url(../images/header.jpg)no-repeat;width: 100%;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 */
nav{background: #ffe400;width: 100%;padding-top:30px;padding-bottom:30px;}
.nav{width:700px;margin: 0 auto;}
.nav ul li{box-sizing: border-box;}
.nav ul li a{color: #fff;font-size: 36px;text-decoration: none;background: #000;margin:20px;display:block;text-align:left;padding: 10px 10px 10px 150px;}
.nav ul li a:hover{background: #fff;color: #000;}
.nav ul li a:hover span{color: #003399;}
.nav ul li a:active{box-shadow:0px 0px 4px 4px #666666;}

.nav span{color:#f91321;}

/* main */

/* main01 */
.main01bkg{background: #c6000f;padding-top: 80px;padding-bottom: 80px;}
.main01{width: 1000px;margin: 0 auto;text-align: center;}
.main01 h2{font-size: 60px;color: #fff;}
.main01 h2 em{color:#00ffff;}
.main01 ul{display: flex;justify-content: space-between;margin-top:220px;}
.main01 ul li{background:#003399;border-radius: 10px;border: 5px solid #cccc33;position: relative;font-size: 26px;box-sizing: border-box;width: 30%;margin-bottom:30px;padding:60px 30px 40px 30px;}
.main01 ul li img{position: absolute;top:-160px;left:4%;width: 272px;height: 220px;}
.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:#fff;display: block;line-height:1.5;}
.main01>p{color: #ffe400;font-size: 30px;margin-top:25px;margin-bottom:35px;}
.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 #cccc33;}
.main01 a:active{background: #998A00;}

/* main02 */
.main02bkg{width: 100%;background:url(../images/main02bkg.jpg)no-repeat;background-size: cover;}
.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{width: 1024px;margin: 0 auto;padding-top:60px;padding-bottom:60px;text-align: center;}
.main02 h3{font-size: 62px;text-align: center;line-height:2;}
.main02 h3 span{color: #c6000f;}
.main02>div{display: flex;justify-content:space-between;align-items:center;}
.main02 table{width:57%;}
.main02 table td{color:#00479d;border: 1px solid #00479d;text-align: center;padding:10px;font-size: 24px;vertical-align: middle;}
.main02 table thead td{color: #fff;background:#00479d;line-height: 1.3;}
.main02 .up{width: 40%;height: 100%;box-sizing: border-box;background:#ffe400;padding:15px;border-radius: 10px;position: relative;text-align: left;}
.main02 .up::before{content: '';width: 0;height: 0;border-top:15px solid transparent;border-bottom:15px solid transparent;border-right: 20px solid #ffe400;position: absolute;left: -20px;bottom: 49%;}
.main02 .up img{height: 40%;margin-left: 10px;}
.main02 .up ul li{font-size: 22px;color: #333333;}
.main02 .up ul span{color: #c6000f;font-size: 30px;font-weight: bold;}
.main02>p{color: #333333;font-size: 30px;line-height:2;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;}
.main02>a:active{background:#7A0000;}

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

/* main03 */
.main03bkg{background:#ddeef3;padding-top:80px;padding-bottom: 80px;}
.main03{width: 1024px;margin: 0 auto;text-align: center;}
.main03 h4{font-size: 60px;line-height: 1.5;margin-bottom: 20px;}

.main03 .circle{color: #fff;width: 185px;height: 185px;border-radius: 99em;font-size: 24px;box-sizing: border-box;padding:40px 0px;line-height: 1.1;transform: translateX(-800px);transition: all .5s;}
.main03 .circle span{display: block;color: #ffff00;font-size: 30px;}
.main03 .pRight{transform: translateX(0px);}

.main03 li{margin-bottom:30px;display: flex;justify-content:space-between;align-items: center;}
.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:75%;}
.main03 li .rectangle p{transition:all 2s;width: 90%;background: #fff;padding: 20px;text-align: left;font-size: 20px;line-height: 1.5;}
.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;}
.main03>a:active{background:#7A0000;}

/* main04 */
.main04bkg{padding-top:60px;padding-bottom:60px;}
.main04{width: 1024px;margin: 0 auto;text-align: center;}
.main04 h5{font-size: 60px;text-align: center;line-height:2;}
.main04 div{display: flex;justify-content:space-between;}

.main04 .schedule{width: 60%;}
.main04 .schedule span{width: 100%;height:auto;display:block;font-size: 30px;color: #c6000f;font-weight: bold;text-align: center;background: #f9e9e9;line-height: 1.3;}
.main04 .schedule span em{font-size: 14px;}
.main04 .schedule td{border: 1px solid #c6000f;padding:18.5px;text-align:left;line-height: 1.2;}
.main04 .schedule thead td{background: #c6000f;color: #fff;font-size: 40px;text-align: center;}
.main04 .schedule tbody{background:#f9e9e9;text-align: left;line-height: 1.2;}

.main04 .teacher{width: 35%;}
.main04 .teacher thead{background: #0068b7;color: #fff;text-align: center;vertical-align: middle;}
.main04 .teacher thead td{text-align: center;font-size: 40px;text-align: center;padding: 10px;line-height: 1.5;}
.main04 .teacher thead span{color:#fcf900;}
.main04 .teacher tbody td{vertical-align: middle;border: 1px solid #0068b7;padding:10px;line-height: 1.5;text-align: left;display: flex;justify-content: space-between;}
.main04 .teacher tbody{background:#d4f1ff;}
.main04 .teacher tbody span{display: flex;align-items: center;justify-content: center;width: 50%; text-align: center; margin-right: 10px;background: #fff;color: #0068b7;font-weight: bold;font-size: 26px;padding: 5px;}

.main04>p{color: #333333;font-size: 30px;line-height:2;margin-bottom: 10px;margin-top: 20px;}
.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;}
.main04>a:active{background:#5E4808;box-shadow: 0px 0px 15px 4px #5E4808;}

/* main05 */
.main05bkg{background: #ffe400;padding-top: 60px;padding-bottom: 60px;}
.main05{width:1024px;margin: 0 auto;text-align: center;}
.main05>div{display: flex;justify-content: space-around;align-items: center;}
.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 h6{font-size: 60px;border: 3px solid #00479d;border-radius: 10px;width: 50%;padding: 30px;}
.main05 h6 span{font-weight: bold;}
.main05 ul{position: relative;}
.main05 li{background: #fff;margin-bottom: 30px;border-radius: 10px;box-sizing: border-box;padding:30px;text-align: left;display: flex;align-items: center;}
.main05 li .content{width:76%;float: left;}
.main05 li .name{font-size: 26px;color:#00479d;font-weight: bold;border-bottom: 2px dashed gray;margin-bottom: 20px;padding-bottom: 20px;}
.main05 li .name span{color: #ed1c24;}
.main05 li p{font-size: 20px;line-height: 1.5;}
.main05 li img{width: 186px;height: auto;float: right;}

.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;}
.main05>a:active{background:#7A0000;}

/* main06 */
.main06bkg{padding-top: 80px;padding-bottom: 80px;}
.main06{width: 1000px;margin: 0 auto;text-align: center;}
.main06 h4{font-size: 54px;line-height: 1.2;font-weight: bold;}
.main06 ul{display: flex; justify-content: space-around;flex-wrap: wrap;}
.main06 ul li{margin-bottom: 10px;margin-top: 20px;overflow: hidden;width: 30%;opacity: 0.5;}
.main06>p{margin-bottom: 30px;font-size: 30px;margin-top: 30px;}
.main06>a{background: #e60012;color: #fff;padding: 0.3em 1em;font-size: 33px;text-decoration: none;border-radius: 10px;}
.main06>a:hover{box-shadow:0 0 15px 4px #FF6B6B;}
.main06>a:active{background:#7A0000;}
.main06 ul li:hover{
	opacity: 1 !important;
}

/*footer*/
footer{padding-top:40px;padding-bottom: 40px;background:#898989;}
.footer{width: 1000px;margin: 0 auto;display: flex;justify-content:center;}
.footerRight>a{font-size: 22px;color: red;background: #fff;padding: 0.2em 10em 0.2em 0.5em;text-decoration:none;border-radius: 10px;display: block;font-weight: bold;margin-top: 20px;margin-bottom:10px;margin-left: 10px;position: relative;}
.footerRight>a i{position: absolute;right:10px;}
.footerRight>a:active{box-shadow: 0 0 15px 5px #898989 inset;}
.footerRight ul{display: flex;justify-content: space-around;}
.footerRight ul li a{font-size: 20px;color: #fff;text-decoration: none;font-weight: bold;position: relative;}
.footerRight ul a::after{content: '';background: #fff;transition: all .5s; width: 0;height:1px;position: absolute;bottom: 0;left: 40%;}
.footerRight ul a:hover::after{width: 100%;left: 0;}
.footerRight ul a:active{color: #666666;}
.footerRight ul a:active::after{background: #666666;}


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

/* nav */
/* nav{display: none;} */

/*main01*/
.main01{width: 95%;}

/*main02*/
.main02{width: 95%;}

/*main03*/
.main03{width: 95%;}

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

/*main05*/
.main05{width: 95%;}

/*main06*/
.main06{width: 95%;}

/* footer */
.footer{width: 95%;}

}
@media(max-width:960px){
	.main01 ul li img{left: 0%;}

	.main05 li{padding:20px;}
	.main05 li img{width: 170px;height: 170px;display:table-cell;vertical-align: middle;}
}

/*=============平板================*/
@media(max-width:768px){
    
 
/* main01 */
.main01 h2{font-size: 56px;}
.main01 ul{margin-top: 200px;}
.main01 ul li{font-size: 24px;box-sizing: border-box;padding: 0 20px 20px 20px;margin-bottom: 0;}
.main01 ul li img{max-width: 100%;height: auto;left: 0;right: 0;top:-140px;}
.main01 ul li p{margin-top:40px;font-weight: bold;font-size: 18px;line-height: 1.5;}
.main01 ul li em{margin: 0;}

/*main02*/
.main02 .up img{width: 40%;}
.main02 .up ul li{font-size: 20px;}
.main02 .up ul span{font-size: 28px;}

/*main03*/
.main03 .circle{width: 170px;height: 170px;font-size: 20px;}
.main03 .circle span{font-size: 28px;}

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

.main03 li .rectangle p{width: 80%;}

/*main04*/
.main04 h5{font-size: 48px;}
.main04 .teacher thead td{font-size: 32px;}

/*main05*/
.main05 h6{font-size: 36px;}
.main05 li .content{width: 70%;}
.main05 li .name{font-size: 24px;}

/*main06*/
.main06{width: 98%;}
.main06 ul{justify-content: space-between;margin-top: 20px;}
.main06 ul li{width:30%;}
.main06 ul li img{width: 100%;}


/*footer*/
.footer{width: 90%;justify-content: space-around;}
.footer img{width: 30%;}
.footerRight{width: 65%;}
.footerRight>a{padding: 0.2em 0.2em 0.2em 0.2em;}
	
}

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

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

/* nav */
nav{padding: 20px 0 20px;}
.nav{width:100%;}
.nav ul li a{margin:10px 0;padding:5px 15px;font-size: 22px;overflow: hidden;}

/* main */

/* main01 */
.main01bkg{padding:60px 0 60px 0;}
.main01 h2{font-size:11vw;line-height: 1.3;}
.main01 h2 em{display: block;}
.main01 ul{display: block;margin-top: 30px;}
.main01 ul li{width: 100%;padding:8vw 10px 10px 10px;font-size: 22px;margin-top:80px;}
.main01 ul li img{max-width:50%;height: auto;left:23vw;top:-20vw;}
.main01>p{font-size: 24px;}
.main01 a{font-size: 24px;}

/* main02 */
.main02bkg{background:none;}
.main02>div{display: block;}
.main02 h3{font-size: 32px;}
.main02 table{display: none;}
.main02 .mobile-table{display: table;width: 100%;}
.main02 .mobile-table .f-td{background:#00479d;color: #fff;}
.main02 .mobile-table td{font-size: 20px;font-weight: bold;}
.main02 .up{width: 100%;margin-top:40px;}
.main02 .up::before{
	display: block;
	top: -20px;
	left: 50%;
	bottom: 0;
	border: 0;
	border-bottom: 20px solid #ffe400;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
}
.main02>p{
	font-size: 20px;
	line-height: 4;
}
.main02 .up img{margin-left: 20px;}
.main02 .up ul li{line-height:1.3;font-size: 15px;font-weight: bold;}
.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 */
.main03 h4{font-size:26px;}
.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;margin: 0 auto;}
.main03>p{font-size: 22px;margin-bottom:20px;}

/*main04*/
.main04 h5{font-size:7vw;}
.main04 div{display: block;}
.main04 .schedule{width: 100%;margin: 30px 0;}
.main04 .teacher{width: 100%;margin: 30px 0 0 0;}
.main04>p{font-size: 6vw;margin-bottom: 20px;}
.main04>a{font-size: 24px;}

/*main05*/
.main05>div{display: block;}
.main05>div>img{width: 100%;height: auto;position: relative;z-index:1;transform: translateY(0);}
.main05 h6{width:80%;padding:15px;margin: 0 auto 10px auto;position: relative;z-index: 5;}
.main05 li{display: block;padding: 20px;}
.main05 li .content{width: 100%;}
.main05 li img{float: none;display: block;margin: 0 auto;width: 186px; height: auto;}
.main05 li .name{font-size: 6vw;line-height: 1.3;}
.main05 li .name span{display: block;text-align: center;}
.main05>p{font-size: 22px;margin-bottom: 30px;}
.main05>a{font-size: 24px;}

/*main06*/
.main06 h4{font-size: 32px;}
.main06 ul li{width:80%;margin:10px auto;}
.main06>a{font-size: 24px;}

/*footer*/
footer{padding-top: 20px;padding-bottom: 20px;}
.footer{flex-wrap: wrap;width: 95%;}
.footer img{width:200px;height: auto;margin-bottom: 10px;}
.footerRight{width: 100%;}
.footerRight>a{margin: 0;font-size: 18px;}
.footerRight ul{margin: 10px; flex-wrap: wrap;justify-content: space-between;}
.footerRight ul li a{line-height:1.5;}
.footerRight ul li{width:80px;}
}

*{ 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;}

/* == 桌機版優先 ============================================================================= */


#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: #f8f8f8;text-align: center;}
#cloudservice.cloudstudy .title{ margin: 0 auto; max-width: 1200px; display: flex; justify-content: center; 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: #ff3b4f; 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; justify-content: space-around;}
#cloudservice.cloudstudy .main ul li{ width: 200px; text-align: center;}
#cloudservice.cloudstudy .main ul li img{ width: 100%; max-width: 200px; height:auto;}
#cloudservice.cloudstudy .main ul li .cloudstudy-btn01,.cloudstudy-btn02,.cloudstudy-btn03,.cloudstudy-btn04,.cloudstudy-btn05{ 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{ transform: translateY(-10px);}
#cloudservice.cloudstudy .main ul li .cloudstudy-sub01,.cloudstudy-sub02,.cloudstudy-sub03,.cloudstudy-sub04,.cloudstudy-sub05{ 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: #00c5e3;}
#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 ){
	
/*專為你的上榜需求-實體雲端串流學習不間斷*/
#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{ 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 ){
	
/*專為你的上榜需求-實體雲端串流學習不間斷*/
#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{ 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;}
}