@charset "utf-8";
/* CSS Document */
@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);
@font-face {
	font-family: 'Noto Sans TC';
	font-style: normal;
	font-weight: 100;
	src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Thin.woff2) format('woff2'),  url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Thin.woff) format('woff'),  url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Thin.otf) format('opentype');
}
@font-face {
	font-family: 'Noto Sans TC';
	font-style: normal;
	font-weight: 300;
	src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Light.woff2) format('woff2'),  url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Light.woff) format('woff'),  url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Light.otf) format('opentype');
}
@font-face {
	font-family: 'Noto Sans TC';
	font-style: normal;
	font-weight: 400;
	src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Regular.woff2) format('woff2'),  url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Regular.woff) format('woff'),  url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Regular.otf) format('opentype');
}
@font-face {
	font-family: 'Noto Sans TC';
	font-style: normal;
	font-weight: 500;
	src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Medium.woff2) format('woff2'),  url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Medium.woff) format('woff'),  url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Medium.otf) format('opentype');
}
@font-face {
	font-family: 'Noto Sans TC';
	font-style: normal;
	font-weight: 700;
	src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Bold.woff2) format('woff2'),  url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Bold.woff) format('woff'),  url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Bold.otf) format('opentype');
}
@font-face {
	font-family: Arial, 'Noto Sans TC';
	font-style: normal;
	font-weight: 900;
	src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Black.woff2) format('woff2'),  url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Black.woff) format('woff'),  url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Black.otf) format('opentype');
}

body {
	background-repeat: repeat;
  	width: 100%;
  	overflow-x:hidden;
	font-family: arial,"Noto Sans TC", "sans", "sans-serif" ! important;  
} 
form{width: 100%;overflow-x:hidden;}
/* 這是設定所有放大縮小的物件是使用移動方式變化 */
.move{-webkit-transition: all 0.4s;
	-moz-transition: all 0.4s;
	-ms-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;}
.NO{ display:none;}
/* wow進場後額外繼續輪播的動畫 */
.myAni {
  -webkit-animation-duration: 1s;animation-duration: 1s;
  -webkit-animation-fill-mode: both; animation-fill-mode: both;}

.myAni.infinite {
  -webkit-animation-iteration-count: infinite;animation-iteration-count: infinite;
}

.myAni.hinge {
  -webkit-animation-duration: 2s;animation-duration: 2s;
}
.myAni.infinite.pulse {
/*animation-delay: 2s;*/
-webkit-animation-name: pulse !important;animation-name: pulse !important;
}
/*表頭表尾 請勿------------------------------------砍*/
.top, .footer{
    line-height: 0px; width:100%;
}
.top, .footer{
    z-index: 99;
    position: relative;
}
/*很多物件通用*/
.BRR{ height:0px;}
.topICON{ text-align:center; padding-top:20px; padding-bottom:20px;}
.myButton {
  background-color:#44c767;
  -moz-border-radius:28px;
  -webkit-border-radius:28px;
  border-radius:28px;
  display:inline-block;
  cursor:pointer;
  color:#ffffff;
  font-family:Arial;
  font-size:17px;
  padding:9px 33px;
  text-decoration:none;
}
.myButton:hover {
  background-color:#5cbf2a;
}
.myButton:active {
  position:relative;
  top:1px;
}

/*BANNER 進場delay時間、浮動*/
.banner{ position:relative; overflow:hidden;}
img.banner001, img.banner002, img.banner003, img.banner004,img.banner005,img.banner006, img.banner007, img.banner008, img.banner009, img.three_icons{position:absolute;}
img.banner_big{-webkit-animation-delay:0.4s; /* Chrome, Safari, Opera */ animation-delay:0.4s; -webkit-animation-duration:0.5s; /* Chrome, Safari, Opera */ animation-duration:0.5s;}
img.banner_min{-webkit-animation-delay:0.4s; /* Chrome, Safari, Opera */ animation-delay:0.4s; -webkit-animation-duration:0.5s; /* Chrome, Safari, Opera */ animation-duration:0.5s;}
img.banner001{-webkit-animation-delay:0.4s; /* Chrome, Safari, Opera */ animation-delay:0.4s;}
img.banner002{-webkit-animation-delay:0.8s; /* Chrome, Safari, Opera */ animation-delay:0.6s;}
img.banner003{-webkit-animation-delay:0.4s; /* Chrome, Safari, Opera */ animation-delay:0.8s;}
img.banner004{-webkit-animation-delay:0.8s; /* Chrome, Safari, Opera */ animation-delay:0.8s;}
img.banner005{-webkit-animation-delay:1s; /* Chrome, Safari, Opera */ animation-delay:0.8s;}
img.banner006{-webkit-animation-delay:0.4s; /* Chrome, Safari, Opera */ animation-delay:0.8s;}
img.banner008{-webkit-animation-delay:0.4s; /* Chrome, Safari, Opera */ animation-delay:0.8s;}
img.banner009{-webkit-animation-delay:0.8s; /* Chrome, Safari, Opera */ animation-delay:0.8s;}
img.three_icons{-webkit-animation-delay:0.8s; /* Chrome, Safari, Opera */ animation-delay:0.6s;}
.test_button{ -webkit-animation-delay:1s; /* Chrome, Safari, Opera */ animation-delay:1s;}
/*表單區*/
.form_update{ background-image: url(../images/form_bg_update.png); background-repeat:no-repeat; background-size:cover; padding: 80px 0; position: relative; z-index: 999; margin-top: -60px;}
img.form_title_update{ display: block; margin: 0 auto;}
img.bonus_update{ display: block; margin: 0 auto;}
.form_update .statement{ color:#595959; line-height:60px; font-size: 1.5em;}
.form_update .statement a{ color:#595959; text-decoration: underline;}
.form_update .statement a:hover{ color:#3370b7;}
.fill{text-align:center; z-index:100; padding-top:20px; padding-bottom:25px;width:100%; height:100%;}
.fill h2{text-align:center;line-height: 28px; color:#00479d;margin:30px auto; }
.fill .share{ display:block; width:280px; margin:0 auto;}
.fill .share ul li{ float:left; list-style:none; padding-left:12px;}
.fill #sBut{ display: block;}

.fill .statement{ color:#595959; line-height:60px;}
.fill .statement a{ color:#595959; text-decoration: underline;}
.fill .statement a:hover{ color:#3370b7;}
.fill .form-control{ width:80%; margin: 0 auto; margin-bottom:5px; border-radius: 5px;}
.side_button{ max-width: 150px; height: auto; display: block; margin: 0 auto;}

/*.modal-content{background-image:url(../images/form_background.png)!important;background-size: contain;width: 50% ;height: 100%;max-height: 767px ;margin: 30% auto;}*/
.wrapper.modal-open{background-color: #fff !important;}

.bonus{ width: 50vw; height: auto; max-width: 400px; margin-top: 2%; margin-bottom: 5%;}



/*六大設計類課程*/
.web{max-width:620px; width:100%; height:auto; margin: 7% auto; display:block;padding: 0 100px !important;}
.web2{max-width:620px; width:100%; height:auto; margin: 7% auto; display:block;padding: 0 68px !important;}}


/**************以下開始為內文部分**************/

/*西文句子圖片*/
.intend{ background-image: url(../images/BGGG.jpg); background-position:top center; background-color:#eee0b3; background-repeat: repeat; text-align:center; overflow:inherit;}
.intend .title{ color:#ea4228; font-size:38px; font-style:italic;font-weight: bold; padding-top:25px; padding-bottom:25px;}
.intend .title .important{color:#063271}
.intend .box1, .intend .box2{ padding-bottom:67px;padding-top:80px;}
.intend p{ font-style:italic;font-weight: bold; font-size:22px;}


/*六大設計類課程*/
.Advantage2{text-align:left;background-color: #ffffff;}
.Advantage3{text-align:left;background-color: #f2f2f2;}
.Advantage3 .title{ color:#02658f; font-size:40px; font-weight: bold; padding-top:50px; padding-bottom:25px;}
.Advantage1 h1{font-weight: bold; color:#000; font-size: 2.5em; letter-spacing: 0.15em;}
.Advantage1 p{font-weight: bold; color:#000; font-size: 2.5em; letter-spacing: 0.15em;}
.Advantage1 h2{font-weight: bold; color:#ffffff; font-size:45px; margin-bottom: 25px;}
.Advantage2 h2{font-weight: bold; color:#434343; font-size:45px; margin-bottom: 25px;}
.Advantage3 h2{font-weight: bold; color:#434343; font-size:45px; margin-bottom: 25px;}
.subject1 h3{color:#fff100; font-size:37px;margin-bottom: 20px;}
.subject1{background-image: url(../images/long_bg.jpg); background-position: top; background-size: auto; text-align:center; position: relative; z-index: 2; margin-top: -80px; padding-top: 120px;}
.subject2 h3{color:#f871ab; font-size:32px;margin-bottom: 20px;}
.subject3 h3{color:#019fe8; font-size:32px;margin-bottom: 20px;}
.subject4 h3{color:#8956a1; font-size:32px;margin-bottom: 20px;}
.subject5 h3{color:#feb238; font-size:32px;margin-bottom: 20px;}
.subject6 h3{color:#14b5b0; font-size:32px;margin-bottom: 20px;}
.subject5{background-image:url(../images/pic05_bg.jpg);background-size: cover;}

.Advantage1 p{ font-weight: 300;color: #333; font-size:1.75em;line-height: 45px; margin-top: 20px;}
.Advantage2 p{ color:#434343; font-size:25px;line-height: 45px;margin-bottom: 45px;}
.Advantage3 p{ color:#434343; font-size:25px;line-height: 45px;margin-bottom: 45px;}

/*button*/
  @keyframes Gradient {
  0% {
    background-position: 0% 50%
  }
  50% {
    background-position: 50% 100%
  }
  75% {
    background-position: 100% 50%
  }
  100% {
    background-position: 0% 0%
  }
}
button {
  position: relative;
  bottom: 0;
  right: 0;
  border: none;
  box-sizing: border-box;
  padding: 12px 24px;
  text-align: center;
  font-size: 16px;
  display: block;
  border: none;
  color: white;
  text-decoration: none;
  border-radius: 6px;
  background: linear-gradient(90deg, #db36a4, #cb60b3, #db36a4, #cb60b3);
  background-size: 400% 400%;
  animation: Gradient 2s ease infinite;
}
.width1280 {
	max-width: 1280px;
	min-width: 280px;
	height: auto;
	margin: 0 auto;
	overflow:hidden;
}
.width1280_Q {
	max-width: 840px;
	min-width: 280px;
	height: auto;
	margin: 0 auto;
	overflow:hidden;
}


/*  ↓↓↓↓  螢幕尺寸大於960時頁面顯示效果↓↓↓↓  */
@media (min-width: 960px)  {
/*BANNER*/
/*表單區*/
.fill h2{ font-size:38px}
.fill h2 .important{ font-size:35px}
.banner_big{width: 100%;height:auto; display:block;}
.banner_min{ display:none;}
img.banner001{display: block;top: 22%;left: 30%;z-index: 5;max-width: 811px;height: auto;width: 50vw;}
img.banner002{display: block;top: 8%;left: 45%;z-index: 5;max-width: 615px;height: auto;width: 25vw;}
img.banner003{display: block;top: 55%;left: 30%;z-index: 4;max-width: 800px;height: auto;width: 55vw;}
img.banner004{display: block;bottom: 9%;left: 30%;z-index: 4; max-width: 780px;height: auto;width: 42vw;}
img.banner005{display: block;top: 2.5%;left: 2.5%;z-index: 4; max-width: 701px;height: auto;width: 35vw;}
img.banner006{display: block;top: 5%; right: 6%;z-index: 4; max-width: 502px;height: auto;width: 35vw;}
img.banner007{display: none;/*bottom: 0%; right: 0%;z-index: 3; max-width: 1920px;height: auto;width: 100vw;*/}
img.banner008{display: none;}
img.banner009{display: none;}
img.three_icons{display: block;top: 10%;left: 32%;z-index: 5;max-width: 334px;height: auto;width: 15vw;}
.form_title{ width: 65vw; height: auto; max-width: 400px; margin-top: 8%;}
.fill .form_button{ -webkit-animation-duration: 2s; /* Chrome, Safari, Opera */ animation-duration: 2s; width: 20vw; height: auto;	max-width: 250px; margin: 0 auto; margin-top: 10px;}
.BRR{ display:none;}
.modal-content{background-image:url(../images/form_background.png)/*!important*/;background-size: contain;width: 100% ;height: 100%;max-height: 767px ;margin: 20% auto;}
.wrapper.modal-open{background-color: #fff /*!important*/;}
.side_button_2{ position:fixed; display: block; top: 25%; right: 0%; z-index: 999; cursor: pointer;}
/*巨匠電腦線上真人 課程大綱*/
.course{ display:block; margin: 0 auto; width: 35%; height: auto; margin-top: 5%;}
.course_s{ display: none;}
.word_course{ display: block; margin: 0 auto; width: 55vw; height: auto; margin-top: 5%;}
.excel_course{ display: block; margin: 0 auto; width: 55vw; height: auto; margin-top: 3%;}
.powerpoint_course{ display: block; margin: 0 auto; width: 55vw; height: auto; margin-top: 3%; margin-bottom: 3%;}
.whole_course_m{ display: none;}
/*為何要選擇巨匠電腦線上真人？*/
.choose{ display:block; margin: 0 auto; width: 50%; height: auto; margin-top: 1%; margin-bottom: 5%;}
.choose_s{ display: none;}
.choice1{ border-radius:10px; background-color: rgba(255, 255, 255, 0.7); text-align: center; margin: 0 auto; height: 250px; margin-right: 1%;}
.choice1:last-child{ margin-right: 0;}
.everywhere{ display: block; margin: 0 auto; margin-top: 25px; height: 60%; width: auto;}
.raisehands{ display: block; margin: 0 auto; margin-top: 25px; height: 60%; width: auto;}
.teacher{ display: block; margin: 0 auto; margin-top: 25px; height: 60%; width: auto;}
.work{ display: block; margin: 0 auto; margin-top: 25px; height: 60%; width: auto;}
.choice1 p{ text-align: center; color: #a3070f; line-height: 1em; font-weight:500;}

/*學習前問與答？*/
.questions{ display:block; margin: 0 auto; width: 33%; height: auto; margin-top: 5%; margin-bottom: 3%;}

/*笑傲江湖*/
.laugh{ display:block; margin: 0 auto; width: 35%; height: auto; margin-top: 5%; margin-bottom: 0%;}
img.word_skill{ width: 25vw; position: absolute; z-index: 100; display:block; left:5%;}
.skill2{ border-radius:10px; background-color: #FFF; text-align: center; margin: 8% auto; padding: 20px 0;}
.skill3{ border-radius:10px; background-color: #FFF; text-align: center; margin: 5% auto; padding: 20px 0;}
.skill4{ border-radius:10px; background-color: #FFF; text-align: center; margin: 8% auto; padding: 20px 0;}
.skill2 h1{ color: #295291; font-weight: bold; font-size: 2.5em; margin-bottom: 20px;}
.skill2 ul{ font-size: 1.5em; line-height: 1.5em; text-align: left; margin-left: 30%;}
.skill3 ul{ font-size: 1.5em; line-height: 1.5em; text-align: left; margin-left: 30%;}
.skill4 ul{ font-size: 1.5em; line-height: 1.5em; text-align: left; margin-left: 20%;}
img.powerpoint_skill{ width: 25vw; position: absolute; z-index: 100; display:block; left:5%; top: 5%;}
img.excel_skill{ width: 25vw; position: absolute; z-index: 100; display:block; right:5%; top: 5%;}
.skill3 h1{ color: #c74627; font-weight: bold; font-size: 2.5em; margin-bottom: 20px;}
.skill4 h1{ color: #216f43; font-weight: bold; font-size: 2.5em; margin-bottom: 20px;}
.form_update .go_button{ width: 20vw; height: auto;}
}


/* ↓↓↓↓ pad 豎屏時, 頁面顯示尺寸 900 < x <959 時,顯示效果 ↓↓↓↓  */
@media (min-width: 900px) and (max-width:959px) {
/*BANNER*/
.banner_big{display:none;}
.banner_min{ width: 100%;max-width:960px;min-width:280px;height: auto; display:block;}
img.banner001{display: block;top: 15%;left: 12%;z-index: 5;max-width: 800px;height: auto;width: 80vw;}
img.banner002{display: block;top: 5%;left: 37%;z-index: 5;max-width: 410px;height: auto;width: 44vw;}
img.banner003{display: none;}
img.banner004{display: none;}
img.banner005{display: block;bottom: 0%;left: -10%;z-index: 4;max-width: 500px;height: auto;width: 65vw;}
img.banner006{display: block;bottom: 1.5%;right: -3%;z-index: 4;max-width: 500px;height: auto;width: 40vw;}
img.banner007{display: none;/*bottom: 0%; left: 0%;z-index: 3; width: 100%; height: auto;*/}
img.banner008{display: block;top: 50%;left: 28%;z-index: 4;max-width: 445px;height: auto;width: 47vw;}
img.banner009{display: block;bottom: 12%;left: 25%;z-index: 6; max-width: 609px;height: auto;width: 55vw;}
img.three_icons{display: block;top: 8%;left: 22%;z-index: 5;max-width: 334px;height: auto;width: 20vw;}
/*表單區*/
.form_title{ width: 65vw; height: auto; max-width: 400px; margin-top: -1%;}
.fill{text-align:center; z-index:100; padding-top:40px;padding-left:0px ; padding-bottom:25px;width:100%; height:100%;}
.fill h2{ font-size:22px;text-align:center;line-height: 15px; color:#0b0b0b;margin:20px auto;}
.fill .form_button{ -webkit-animation-duration: 2s; /* Chrome, Safari, Opera */ animation-duration: 2s; width: 20vw; height: auto;	max-width: 250px; margin: 0 auto;}
.BRR{ display: block;}
.modal-content{background-image:url(../images/form_background.png)/*!important*/;background-size: cover;width: 97% ;height: 69% ;max-height: 767px ;margin: 30% auto;}
.side_button_2{ position:fixed; display: block; top: 25%; right: 0%; z-index: 999; cursor: pointer;}
.v-jr-flow{ display:none;}
.v-index-flow{ display:none;}
/*巨匠電腦線上真人 課程大綱*/
.course{ display:block; margin: 0 auto; width: 65%; height: auto; margin-top: 5%;}
.course_s{ display: none;}
.whole_course{display: none;}
/*為何要選擇巨匠電腦線上真人？*/
.choose{ display:block; margin: 0 auto; width: 75%; height: auto; margin-top: 1%; margin-bottom: 5%;}
.choose_s{ display: none;}
.choice1{ border-radius:10px; background-color: rgba(255, 255, 255, 0.7); text-align: center; margin: 0 auto; height: 250px; margin-right: 1%; margin-bottom: 1%;}
.choice1:nth-child(2){ margin-right: 0;}
.choice1:last-child{ margin-right: 0;}
.choice1 p{ text-align: center; color: #a3070f; line-height: 1em; font-weight:500;}
/*學習前問與答？*/
.questions{ display:block; margin: 0 auto; width: 50%; height: auto; margin-top: 5%; margin-bottom: 3%;}
/*笑傲江湖*/
.laugh{ display:block; margin: 0 auto; width: 55%; height: auto; margin-top: 5%; margin-bottom: 0%;}
.skill1{ display: block;}
img.word_skill{ width: 40vw; position: absolute; z-index: 100; display:block; left:5%; top: 90%;}
img.powerpoint_skill{ width: 40vw; position: absolute; z-index: 100; display:block; left:5%; top: 95%;}
.skill5{ display: block;}
img.excel_skill{ width: 40vw; position: absolute; z-index: 100; display:block; right:5%; top: 85%;}
.skill2{ width: 100%;border-radius:10px; background-color: #FFF; text-align: center; margin: 2% auto; padding: 20px 0;}
.skill3{ width: 100%;border-radius:10px; background-color: #FFF; text-align: center; margin: 2% auto; padding: 20px 0;}
.skill4{ width: 100%;border-radius:10px; background-color: #FFF; text-align: center; margin: 4% auto; padding: 20px 0;}
.skill2 h1{ color: #295291; font-weight: bold; font-size: 2.5em; margin-bottom: 20px; margin-left: 8%;}
.skill2 ul{ font-size: 1.5em; line-height: 1.5em; text-align: left; margin-left: 40%;}
.skill3 ul{ font-size: 1.5em; line-height: 1.5em; text-align: left; margin-left: 40%;}
.skill4 ul{ font-size: 1.5em; line-height: 1.5em; text-align: left; margin-left: 15%;}
.skill3 h1{ color: #c74627; font-weight: bold; font-size: 2.5em; margin-bottom: 20px; margin-left: 18%;}
.skill4 h1{ color: #216f43; font-weight: bold; font-size: 2.5em; margin-bottom: 20px; margin-right: 12%;}
/*線上真人三大特色*/
.Advantage .title{ color:#02658f; font-size:35px; font-weight: bold; padding-top:50px; padding-bottom:25px;}
/*手機板的FOOTER------別刪除-------------------------------*/
.FOOTER_frame {height: 450px;}

}

/* ↓↓↓↓ pad 豎屏時, 頁面顯示尺寸 460 < x <899 時,顯示效果 ↓↓↓↓  */
@media (min-width: 600px) and (max-width:899px) {
/*BANNER*/
.banner_big{display:none;}
.banner_min{ width: 100%;max-width:960px;min-width:280px;height: auto; display:block;}
img.banner001{display: block;top: 12%;left: 12%;z-index: 5;max-width: 800px;height: auto;width: 75vw;}
img.banner002{display: block;top: 3%;left: 35%;z-index: 5;max-width: 410px;height: auto;width: 44vw;}
img.banner003{display: none;}
img.banner004{display: none;}
img.banner005{display: block;bottom: 0%;left: -15%;z-index: 4;max-width: 500px;height: auto;width: 68vw;}
img.banner006{display: block;bottom: 3%;right: -1%;z-index: 4;max-width: 500px;height: auto;width: 47vw;}
img.banner007{display: none;/*bottom: 0%; left: 0%;z-index: 3; width: 100%; height: auto;*/}
img.banner008{display: block;top: 50%;left: 28%;z-index: 4;max-width: 445px;height: auto;width: 47vw;}
img.banner009{display: block;bottom: 10%;left: 23%;z-index: 6; max-width: 609px;height: auto;width: 60vw;}
img.three_icons{display: block;top: 6%;left: 20%;z-index: 5;max-width: 334px;height: auto;width: 22vw;}
.side_button_2{ position:fixed; display: block; top: 8%; right: 0%; z-index: 999; cursor: pointer;}
/*表單區*/
.fill{text-align:center; z-index:100; padding-top:40px;padding-left:0px ; padding-bottom:25px;width:100%; height:100%;}
.fill h2{ font-size:27px;text-align:center;line-height: 20px; color:#00479d;margin:20px auto;}
.fill .form_button{ -webkit-animation-duration: 2s; /* Chrome, Safari, Opera */ animation-duration: 2s; width: 20vw; height: auto;	max-width: 250px; margin: 0 auto;}
.test_padding { padding: 0 35px;}
.course{ display: none;}
.course_s{ display:block; margin: 0 auto; width: 70%; height: auto; margin-top: 0%;}
.choose{ display: none;}
.choose_s{ display:block; margin: 0 auto; width: 75%; height: auto; margin-top: 2%; margin-bottom: 5%;}
.choice1{ border-radius:10px; background-color: rgba(255, 255, 255, 0.7); text-align: center; margin: 0 auto; height: 250px; margin-right: 1%; margin-bottom: 1%;}
.choice1:nth-child(2){ margin-right: 0;}
.choice1:last-child{ margin-right: 0;}
.choice1 p{ text-align: center; color: #a3070f; line-height: 1em; font-weight:500;}
.everywhere{ display: block; margin: 0 auto; margin-top: 25px; height: 50%; width: auto;}
.raisehands{ display: block; margin: 0 auto; margin-top: 25px; height: 50%; width: auto;}
.teacher{ display: block; margin: 0 auto; margin-top: 25px; height: 50%; width: auto;}
.work{ display: block; margin: 0 auto; margin-top: 25px; height: 50%; width: auto;}
.questions{ display:block; margin: 0 auto; width: 70%; height: auto; margin-top: 5%; margin-bottom: 3%;}
.laugh{ display:block; margin: 0 auto; width: 90%; height: auto; margin-top: 5%; margin-bottom: 3%;}
.skill1{ display: block;}
img.word_skill{ width: 40vw; position: absolute; z-index: 100; display:block; left:5%; top: 90%;}
img.powerpoint_skill{ width: 40vw; position: absolute; z-index: 100; display:block; left:2%; top: 95%;}
.skill5{ display: block;}
img.excel_skill{ width: 40vw; position: absolute; z-index: 100; display:block; right:3%; top: 85%;}
.skill2{ width: 100%;border-radius:10px; background-color: #FFF; text-align: center; margin: 2% auto; padding: 20px 0;}
.skill3{ width: 100%;border-radius:10px; background-color: #FFF; text-align: center; margin: 2% auto; padding: 20px 0;}
.skill4{ width: 100%;border-radius:10px; background-color: #FFF; text-align: center; margin: 4% auto; padding: 20px 0;}
.skill2 h1{ color: #295291; font-weight: bold; font-size: 2em; margin-bottom: 20px; margin-left: 12%;}
.skill2 ul{ font-size: 1.5em; line-height: 1.5em; text-align: left; margin-left: 35%;}
.skill3 ul{ font-size: 1.5em; line-height: 1.5em; text-align: left; margin-left: 35%;}
.skill4 ul{ font-size: 1.5em; line-height: 1.5em; text-align: left; margin-left: 5%;}
.skill3 h1{ color: #c74627; font-weight: bold; font-size: 2em; margin-bottom: 20px; margin-left: 17%;}
.skill4 h1{ color: #216f43; font-weight: bold; font-size: 2em; margin-bottom: 20px; margin-right: 12%;}
.modal-content{background-image:url(../images/form_background.png)/*!important*/;background-size: cover;width: 97% ;height: 74% ;max-height: 767px ;margin: 22% auto;}
.v-jr-flow{ display:none;}
.v-index-flow{ display:none;}
.whole_course{display: none;}
/*設計類課程*/
.web2 {width: 100%;height: auto;margin: 7% auto;display: block;padding: 0 96px !important;}
.gift-box _short{ display: none;}
}

@media (min-width: 460px) and (max-width:599px) {
/*BANNER*/
.banner_big{display:none;}
.banner_min{ width: 100%;max-width:960px;min-width:280px;height: auto; display:block;}
img.banner001{display: block;top: 12%;left: 12%;z-index: 5;max-width: 750px;height: auto;width: 73vw;}
img.banner002{display: block;top: 3%;left: 35%;z-index: 5;max-width: 410px;height: auto;width: 44vw;}
img.banner003{display: none;}
img.banner004{display: none;}
img.banner005{display: block;bottom: 0%;left: -15%;z-index: 4;max-width: 500px;height: auto;width: 68vw;}
img.banner006{display: block;bottom: 3%;right: -1%;z-index: 4;max-width: 500px;height: auto;width: 47vw;}
img.banner007{display: none;/*bottom: 0%; left: 0%;z-index: 3; width: 100%; height: auto;*/}
img.banner008{display: block;top: 50%;left: 28%;z-index: 4;max-width: 445px;height: auto;width: 47vw;}
img.banner009{display: block;bottom: 10%;left: 23%;z-index: 6; max-width: 609px;height: auto;width: 60vw;}
img.three_icons{display: block;top: 6%;left: 20%;z-index: 5;max-width: 334px;height: auto;width: 22vw;}
.side_button_2{ position:fixed; display: block; top: 8%; right: 0%; z-index: 999; cursor: pointer; width:60vw;}
.form_title{ width: 65vw; height: auto; max-width: 400px; margin-top: -1%;}
/*表單區*/
.fill{text-align:center; z-index:100; padding-top:40px;padding-left:0px ; padding-bottom:25px;width:100%; height:77%;}
.fill h2{ font-size:27px;text-align:center;line-height: 20px; color:#00479d;margin:20px auto;}
.fill .form_button{ -webkit-animation-duration: 2s; /* Chrome, Safari, Opera */ animation-duration: 2s; width: 20vw; height: auto;	max-width: 250px; margin: 0 auto;}
.BRR{ display: block;}
.modal-content{background-image: url(../images/form_background.png)/*!important*/;background-size: cover;width: 97% ;height: 74% ;max-height: 767px ;margin: 22% auto;}
.v-jr-flow{ display:none;}
.v-index-flow{ display:none;}
.whole_course{display: none;}
/*設計類課程*/
.web {width: 70%;height: auto;margin: 7% auto;display: block;padding: 0 !important;}
.web2 {width: 100%;height: auto;margin: 7% auto;display: block;padding: 0 80px !important;}
.Advantage1 h2 {font-size: 30px;margin-bottom: 20px;}
.subject1 h3 {font-size: 22px;margin-bottom: 20px;}
.Advantage1 p {font-size: 18px;line-height: 30px;margin-bottom: 20px;}


/*平面設計*/
.Advantage2 h2 {font-size: 30px;margin-bottom: 20px;}
.subject2 h3 {font-size: 22px;margin-bottom: 20px;}
.Advantage2 p {font-size: 18px;line-height: 30px;margin-bottom: 20px;}

/*網頁設計*/
.Advantage3 h2 {font-size: 30px;margin-bottom: 20px;}
.subject3 h3 {font-size: 22px;margin-bottom: 20px;}
.Advantage3 p {font-size: 18px;line-height: 30px;margin-bottom: 20px;}

/*響應式網頁設計*/
.subject4 h3 {font-size: 22px;margin-bottom: 20px;}

/*室內設計*/
.subject5 h3 {font-size: 22px;margin-bottom: 20px;}

/*工業設計*/
.subject6 h3 {font-size: 22px;margin-bottom: 20px;}
.course{ display: none;}
.course_s{ display:block; margin: 0 auto; width: 75%; height: auto; margin-top: 0%;}
.choose{ display: none;}
.choose_s{ display:block; margin: 0 auto; width: 95%; height: auto; margin-top: 5%; margin-bottom: 5%;}
.questions{ display:block; margin: 0 auto; width: 75%; height: auto; margin-top: 5%; margin-bottom: 3%;}
.laugh{ display:block; margin: 0 auto; width: 90%; height: auto; margin-top: 5%; margin-bottom: 3%;}
.skill1{ display: block;}
img.word_skill{ width: 36vw; position: absolute; z-index: 100; display:block; left:5%; top: 85%;}
img.powerpoint_skill{ width: 36vw; position: absolute; z-index: 100; display:block; left:2%; top: 95%;}
.skill5{ display: block;}
img.excel_skill{ width: 36vw; position: absolute; z-index: 100; display:block; right:3%; top: 85%;}
.skill2{ width: 100%;border-radius:10px; background-color: #FFF; text-align: center; margin: 2% auto; padding: 20px 0;}
.skill3{ width: 100%;border-radius:10px; background-color: #FFF; text-align: center; margin: 2% auto; padding: 20px 0;}
.skill4{ width: 100%;border-radius:10px; background-color: #FFF; text-align: center; margin: 4% auto; padding: 20px 0;}
.skill2 h1{ color: #295291; font-weight: bold; font-size: 2em; margin-bottom: 20px; margin-left: 12%;}
.skill2 ul{ font-size: 1em; line-height: 1.5em; text-align: left; margin-left: 20%;}
.skill3 ul{ font-size: 1em; line-height: 1.5em; text-align: left; margin-left: 20%;}
.skill4 ul{ font-size: 1em; line-height: 1.5em; text-align: left; margin-left: 5%;}
.skill3 h1{ color: #c74627; font-weight: bold; font-size: 2em; margin-bottom: 20px; margin-left: 17%; letter-spacing: 0.025em;}
.skill4 h1{ color: #216f43; font-weight: bold; font-size: 2em; margin-bottom: 20px; margin-right: 12%;}
}

/* ↓↓↓↓ pad 豎屏時, 頁面顯示尺寸 300 < x <459時,顯示效果 ↓↓↓↓  */
@media (min-width: 300px) and (max-width:459px) {
/*BANNER*/
.banner_big{display:none;}
.banner_min{ width: 100%;max-width:960px;min-width:280px;height: auto; display:block;}
img.banner001{display: block;top: 12%;left: 12%;z-index: 5;max-width: 800px;height: auto;width: 85vw;}
img.banner002{display: block;top: 3%;left: 38%;z-index: 5;max-width: 410px;height: auto;width: 44vw;}
img.banner003{display: none;}
img.banner004{display: none;}
img.banner005{display: block;bottom: 0%;left: -15%;z-index: 4;max-width: 500px;height: auto;width: 68vw;}
img.banner006{display: block;bottom: 3%;right: -1%;z-index: 4;max-width: 500px;height: auto;width: 47vw;}
img.banner007{display: none;/*bottom: 0%; left: 0%;z-index: 3; width: 100%; height: auto;*/}
img.banner008{display: block;top: 50%;left: 28%;z-index: 4;max-width: 445px;height: auto;width: 47vw;}
img.banner009{display: block;bottom: 10%;left: 23%;z-index: 6; max-width: 609px;height: auto;width: 60vw;}
img.three_icons{display: block;top: 6%;left: 22%;z-index: 5;max-width: 334px;height: auto;width: 22vw;}
.side_button_2{ position:fixed; display: block; top: 10%; right: 0%; z-index: 999; cursor: pointer; max-width: 250px;}
/*表單區*/
.form_title{ width: 70vw; height: auto; max-width: 380px; margin-top: 5%; margin-bottom: 5%; margin: 0 auto;}
.bonus{ width: 75vw; height: auto; max-width: 400px; margin-top: 2%; margin-bottom: 5%;}
.fill .form-control{ width:90%; margin: 0 auto; margin-bottom:10px; border-radius: 5px;}
.fill .form_button{ -webkit-animation-duration: 2s; /* Chrome, Safari, Opera */ animation-duration: 2s; width: 60vw; height: auto; margin: 0 auto; margin-top: 10px;}
.fill{text-align:center; z-index:100; padding-top:5px;padding-left:0px ; padding-bottom:25px;width:100%; height:100%;}
.fill h2{ font-size:20px;text-align:center;line-height: 15px; color:#00479d;margin:17px auto;}
.fill .form_button{ -webkit-animation-duration: 2s; /* Chrome, Safari, Opera */ animation-duration: 2s; width: 50vw; height: auto; margin: 0 auto;}
.BRR{ display: block;}
.modal-content{background-image: url(../images/form_background.png);/*!important*/;background-size: cover;width: 100% ;height: 90% ;max-height: 767px;margin: 8% auto;}
.form_update .statement {line-height: 34px;font-size: 12px;}
.fill .statement {line-height: 34px;font-size: 12px;}
.v-jr-flow{ display:none;}
.v-index-flow{ display:none;}
.whole_course{display: none;}
/*設計類課程*/
.web {width: 70%;height: auto;margin: 7% auto;display: block;padding: 0 !important;}
.web2 {width: 100%;height: auto;margin: 7% auto;display: block;padding: 0 55px !important;}
.Advantage1 h2 {font-size: 30px;margin-bottom: 20px;}
.subject1 h3 {font-size: 22px;margin-bottom: 20px;}
.Advantage1 h1{font-weight: bold; color:#000; font-size: 1.5em; letter-spacing: 0.15em;}
.Advantage1 p {font-size: 18px;line-height: 30px;margin-bottom: 20px;}
.test_padding { padding: 0 25px;}
.subject1{background-image: url(../images/long_bg_s.jpg); background-position: top right; background-size: auto; text-align:center;}
/*巨匠電腦線上真人 課程大綱*/
.course{ display: none;}
.course_s{ display:block; margin: 0 auto; width: 80%; height: auto; margin-top: 0%;}
.choose{ display: none;}
.choose_s{ display:block; margin: 0 auto; width: 95%; height: auto; margin-top: 2%; margin-bottom: 5%;}
.choice1{ border-radius:10px; background-color: rgba(255, 255, 255, 0.7); text-align: center; margin: 0 auto; height: 200px; margin-right: 1%; margin-bottom: 1%;}
.choice1:nth-child(2){ margin-right: 0;}
.choice1:last-child{ margin-right: 0;}
.choice1 p{ text-align: center; color: #a3070f; line-height: 1em; font-weight:500;}
.everywhere{ display: block; margin: 0 auto; margin-top: 25px; height: 50%; width: auto;}
.raisehands{ display: block; margin: 0 auto; margin-top: 25px; height: 50%; width: auto;}
.teacher{ display: block; margin: 0 auto; margin-top: 25px; height: 50%; width: auto;}
.work{ display: block; margin: 0 auto; margin-top: 25px; height: 50%; width: auto;}
.questions{ display:block; margin: 0 auto; width: 80%; height: auto; margin-top: 5%; margin-bottom: 3%;}
.laugh{ display:block; margin: 0 auto; width: 90%; height: auto; margin-top: 5%; margin-bottom: 3%;}
.skill1{ display: block;}
img.word_skill{ width: 36vw; position: absolute; z-index: 100; display:block; left:5%; top: 85%;}
img.powerpoint_skill{ width: 36vw; position: absolute; z-index: 100; display:block; left:2%; top: 95%;}
.skill5{ display: block;}
img.excel_skill{ width: 36vw; position: absolute; z-index: 100; display:block; right:3%; top: 85%;}
.skill2{ width: 100%;border-radius:10px; background-color: #FFF; text-align: center; margin: 2% auto; padding: 20px 0;}
.skill3{ width: 100%;border-radius:10px; background-color: #FFF; text-align: center; margin: 2% auto; padding: 20px 0;}
.skill4{ width: 100%;border-radius:10px; background-color: #FFF; text-align: center; margin: 4% auto; padding: 20px 0;}
.skill2 h1{ color: #295291; font-weight: bold; font-size: 2em; margin-bottom: 20px; margin-left: 12%;}
.skill2 ul{ font-size: 1em; line-height: 1.5em; text-align: left; margin-left: 5%;}
.skill3 ul{ font-size: 1em; line-height: 1.5em; text-align: left; margin-left: 5%;}
.skill4 ul{ font-size: 1em; line-height: 1.5em; text-align: left; margin-left: 5%;}
.skill3 h1{ color: #c74627; font-weight: bold; font-size: 2em; margin-bottom: 20px; margin-left: 17%; letter-spacing: 0.025em;}
.skill4 h1{ color: #216f43; font-weight: bold; font-size: 2em; margin-bottom: 20px; margin-right: 12%;}
.form_update .go_button{ width:70vw; height: auto; display:block; margin: 0 auto;}
.sns_icons{ display:inline-block;}
.form_update{ margin-top: -30px;}
.form-control{ height: 2.5em; padding:0 40px; font-size: 1em;}
}




/*========================================================*/
@media only screen and (max-width: 1280px) {

}
/*↓↓↓↓ *螢幕尺寸【大於於】768時頁面顯示效果	↓↓↓↓ */
@media (max-width: 768px) {
}

/*↓↓↓↓ 	螢幕尺寸【大於】481時頁面顯示效果	↓↓↓↓ */
@media (min-width: 481px) {
}


/*↓↓↓↓ 	螢幕尺寸【小於】480時頁面顯示效果	↓↓↓↓ */
@media (max-width: 480px) {
}

/*↓↓↓↓ 螢幕尺寸【大於】1024時頁面顯示效果	↓↓↓↓ */
@media (min-width:1024px) {
}

/*	↓↓↓↓ 螢幕尺寸【小於】1024時頁面顯示效果	↓↓↓↓ */
@media (max-width: 1023px) {
}

@media only screen and (max-width: 1280px) {


}