@charset "utf-8";
/* CSS Document */
body {
	background-repeat: repeat;
	font-family: "Microsoft YaHei", sans-serif;	overflow-y: scroll;
	overflow-x: hidden;}
/* 這是設定所有放大縮小的物件是使用移動方式變化 */
.tra{-webkit-transition: all 0.6s;
	-moz-transition: all 0.6s;
	-ms-transition: all 0.6s;
	-o-transition: all 0.6s;
	transition: all 0.6s;}
/* 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;
}
.wrapper{position:relative;overflow:hidden;}

/*表頭表尾 請勿砍*/
.top, .footer {
	line-height: 0px;
	width: 100%;
}
.top{
    z-index: 99;
    position: relative;
}
/*很多物件通用*/
.row{
	margin-left:0;
	margin-right: 0;
}
.BRR{height: 1px;}
.width1280{max-width:1280px;min-width:280px;height:auto;margin: 0  auto;}
.width1280_b{ background-image:url(../images/bg02.png);max-width:1280px;min-width:280px;height:auto;margin: 0  auto;}
.topICON{ text-align:center; padding-top:20px; padding-bottom:20px;}
.myButton {
  -moz-border-radius:28px;
  -webkit-border-radius:28px;
  border-radius:28px;
  display:inline-block;
  cursor:pointer;
  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.banner_bottom{position:absolute;}
img.banner001{-webkit-animation-delay: 1.2s; /* Chrome, Safari, Opera */animation-delay: 0.7s;}
img.banner002{-webkit-animation-delay:1s; /* Chrome, Safari, Opera */animation-delay: 0.6s;}
img.banner003{-webkit-animation-delay:1s; /* Chrome, Safari, Opera */animation-delay: 0.8s;}
img.banner004{-webkit-animation-delay:1s; /* Chrome, Safari, Opera */animation-delay: 0.8s;}
img.banner005{-webkit-animation-delay:1s; /* Chrome, Safari, Opera */animation-delay: 0.9s;}
img.banner006{-webkit-animation-delay:1s; /* Chrome, Safari, Opera */animation-delay: 0.3s;}
img.banner007{-webkit-animation-delay:1s; /* Chrome, Safari, Opera */animation-delay: 0.4s;}
img.banner008{-webkit-animation-delay:1s; /* Chrome, Safari, Opera */ animation-delay:1s;}

/*表單區*/
.fill{ background-image:url(../images/b_bg.png); position:relative;z-index:20;text-align:center;}

.fill h2{font-size: 35px;color: #FFF;text-align:center;/* line-height: 20px; *//* padding-bottom: 1px; */font-weight: bold;font-style: italic;margin-top: 12px;margin-bottom: 14px;}
.fill h2 .a01{font-size: 26px;color: #fff438;text-align:center;line-height: 1.3em;font-weight: bold;font-style: italic;}
.fill h2 .a02{font-size: 38px;color: #3384c3;text-align:center;line-height: 44px;padding-bottom:10px;font-weight: bold;font-style: italic;}
.fill h2 .gray{color: #7a7781;line-height: 39px;font-size: 27px;}
.fill h2 .Bu{color: #0384c6;line-height: 42px;font-size: 40px;}
.fill .share{display:block;width:280px;margin:0 auto;}
.fill .share ul{}
.fill .share ul li{ float:left; list-style:none; padding-left:12px;}
.fill #sBut{display:block;max-width:527px;height:auto;min-width:280px;margin: 9px auto;width:100%;}
.fill .go_button{-webkit-animation-duration: 2s; /* Chrome, Safari, Opera */animation-duration: 2s;max-width: 253px;/* height:auto; */min-width: 200px;margin: 0;margin-left: -47px;/* width:90%; */}
.fill .statement{color: #606060;line-height:40px;}
.fill .statement a{color: #337ab7;}
.fill .statement a:hover{ color:#FFF;}
.fill .form-control{margin-bottom: 5px;}

/*6大圖*/
.system{ margin-top:15px;}
.content .container-fluid{padding-right:0px; padding-left:0px; margin-right:0px; margin-left:0px;display: block;}
.system .box001{background-image:url(../images/pic02.png);background-position:right bottom;overflow:hidden;display: block;margin-top: -15px;}
.system .box002{background-image: url(../images/pic03.png);background-position:right bottom;overflow:hidden;display: block;}
.system .box003{background-image:url(../images/pic06.png);background-position: right bottom;overflow:hidden;/* display: block; */}
.system .word{max-width: 535px;min-width: 407px;margin: 0 auto;display: block;padding-bottom: 10px;padding-top: 140px;} 
.system .word h3{color: #5c5c5c;font-weight:bold;font-size: 28px;line-height: 1.5em;text-align: left;}
.system .word h1{color: #5c5c5c;/* font-weight:bold; */font-size: 63px;line-height:1.2em;text-align: left;}
.system p{color:#000000; font-size:18px; line-height:1.5em;text-align:center; }
.system .linkbox{background: hsla(240, 0%, 50%, 0.9);height:40px;width: 170px;}
.system .linkbox h3{color: #fff;font-size: 19px;text-align: center;margin-top: 6px;}
.link {color: #fff;}

/* 翻牌效果 */
#f1_container {
  position: relative;
  width: 100%;
  z-index: 1;
  margin: 0;
  display: flex;
  flex-flow: row;
  justify-content: center;
  /* padding-left: 40px; */
}    
#f1_container {   
  perspective: 1000;   
  -webkit-perspective: 1000; /* Safari 和 Chrome */
}   
#f1_card {
  width: 316px;
  height: 316px;
  transform-style: preserve-3d;
  transition: all 0.5s linear;
  /* padding-left: 13px; */
}   
#f1_container:hover #f1_card {   
  transform: rotateY(-180deg);   
}   
.face {
	position: absolute;
	width: 316px;
	height: 316px;
	backface-visibility: hidden;
}   
.face.back {
  display: block;
  transform: rotateY(180deg);
  box-sizing: border-box;
  padding:0px;
  color: #FFF;
  font-size:14px;
  background-color: #959595;
  /* margin-left: 20px; */
}  
.face.back p{font-size: 16px;line-height:1.5em;color:#FFF;align-content: center;padding: 30px;margin-top: 30px;}



/*線上真人名師是誰? -標頭*/
.trapezoid {/* background: #58a; */background: linear-gradient(-60deg, transparent 38px, #5f9dc0 0) right, linear-gradient(120deg, transparent 38px, #5f9dc0 0) left;background-size: 54% 100%;background-repeat: no-repeat;text-align: center;height: 65px;/* width: 1280px; */}
.trapezoid  h2{font-size: 35px;color: #fff;font-weight:bold;line-height: 1.7em;}

  /*巨匠集團 提供優質5心服務 title*/      
.pink {background: #58a;background: linear-gradient(-60deg, transparent 38px, #ff9d9d 0) right, linear-gradient(120deg, transparent 38px, #ff9d9d 0) left;background-size: 54% 100%;background-repeat: no-repeat;text-align: center;height: 65px;/* width: 1280px; */}
.pink h2{font-size: 35px;color: #fff;font-weight:bold;line-height: 1.7em;}


.title01{background-image: url(../images/bg02.jpg);overflow: auto;text-align: center;}
.title01 h2{font-size: 23px;color: #c30007;font-weight:bold;line-height: 1.2em;margin-top: 2%;}
.title01 h2.red{font-size: 30px;color: #c30007;font-weight:bold;line-height: 1.2em;margin-top: 78%;text-align: left;margin-left: -41px;}
.title01 h2.red2{font-size: 30px;color: #c30007;font-weight:bold;line-height: 1.2em;margin-top: 14%;text-align: left;}
.title01 p{font-size: 16px;color: #616161;font-weight:normal;padding-bottom: 9%;text-align: center;/* margin-left: 100px; */}
.title01 p.white{background-color:#fff;font-size: 16px;color: #616161;font-weight:normal;padding-bottom: 9%;text-align: left;/* margin-left: 100px; */padding: 30px 30px;width: 455px;}
.title01 .bk{font-size: 23px;color: #000000;font-weight:bold;line-height: 1.2em;}
.title01 .bk02{font-size: 17px;color: #000000;font-weight:bold;line-height: 1.3em;}
.title01 .gr{font-size: 23px;color: #818181;font-weight:bold;line-height: 1.2em;}

/*8大超夯課程任您選-標頭*/
.title002{background-color: #74c7ce;overflow: auto;text-align: center; margin-top:}
.title002 h2{font-size: 35px;color: #FFF;font-weight:bold;line-height:1.3em;}

/*為什麼要學 AutoCAD？  內文*/
.content1{display:block; margin:0 auto; margin-bottom:20px; margin-top:20px;}
.content1 h2{font-size: 20px;color: #7f6f61;/* font-weight:bold; */line-height:1.3em;text-align: center;padding: 3% 8%;}
.content1 p{font-size: 18px;color: #656565;text-align: center;margin: 14px 20px;padding-bottom: 35px;}

.content2{background-image:url(../images/bg03.png);display:block;margin:0 auto;margin-bottom: 20px;margin-top:20px;align-content: center;}
.content2 h2{font-size: 38px;color: #4e97bf;font-weight:bold;line-height:1.3em;text-align: center; padding-top:100px;}
.content2 p{font-size: 22px;color: #656565;}

.content3{display:block;margin:0 auto;margin-bottom:20px;margin-top:20px;}
.content3 h2{font-size: 28px;color: #c30007;font-weight:bold;line-height:1.3em;text-align: center;}
.content3 p{font-size: 18px;color: #656565;text-align: center;margin: 7px 20px;}
.content3 h3{font-size: 34px;color: #666464;font-weight:bold;line-height:1.3em;text-align: center;margin: 22px 0;}

/*PIC通用*/
img.pic{max-width: 1000px;min-width:300px;margin: auto;display:block;width: 103.3%;height:auto;margin-top: 0px;margin-left: -15px;}
img.pic2{max-width: 302px;min-width:200px;margin: 0px auto;display:block;width: 124%;height:auto;margin-top: 50px;}	
img.pic3{max-width: 302px;min-width:200px;margin: 0px auto;display:block;width: 124%;height:auto;margin-top: 50px;}	
img.girl{max-width: 818px;min-width:303px;margin: 47px auto;display:block;width: 162%;height:auto;margin-left: 149px;}
img.bn{max-width: 331px;min-width:250px;margin: 51px 114px;display:block;/* width:95%; *//* height:auto; *//* text-align: center; *//* align-content: flex-start; */}
img.heart{max-width: 243px;min-width:150px;margin: auto;display:block;width: 112%;height:auto;margin-top: 69px;margin-bottom: 100px;}
img.card{max-width: 405px; height: auto; width:100%}

@media (min-width: 1601px) {
	
.fill h2 .important{font-size:35px;}
img.banner_big{width: 100%;height: auto;display:block;}
img.banner_min{ display:none;}
img.banner001{display: block;top: 10%;left: 46.4%;z-index: 9;max-width: 827px;height:auto;width: 45vw;}
img.banner002{display: block;top: 20%;left: 20%;z-index: 3;max-width: 623px;height:auto;width: 41vw;}
img.banner003{display: block;top: 25%;left: 29%;z-index: 5;max-width: 454px;height:auto;width: 35vw;}
img.banner004{display: block;top: 50%;left: 27%;z-index: 5;max-width: 350px;height:auto;width: 35vw;}
img.banner005{display: block;top: 63%;left: 21.7%;z-index: 5;max-width: 361px;height:auto;width: 57vw;}
img.banner006{display: block;top: 9%;left: 36%;z-index: 2;max-width: 556px;height:auto;width: 35vw;}
img.banner007{display: block;top: -4%;left: 3%;z-index: 1;max-width: 841px;height:auto;width: 49vw;}
img.banner008{display: block;top: 15%;left: 77%;z-index: 8;max-width: 285px;height:auto;width: 35vw;}

/*表單區*/
.fill{/* background-image:url(../images/b_bg.png); */background-color: #8fbed6;position:relative;z-index:20;text-align:center;}
.fill h2{font-size: 34px;color: #FFF;text-align:center;/* line-height: 20px; *//* padding-bottom: 1px; */font-weight: bold;font-style: italic;margin-top: 12px;margin-bottom: 14px;}
.fill h2 .a01{font-size: 34px;color: #fff438;text-align:center;line-height: 1.3em;font-weight: bold;font-style: italic;}

	
	
	
	
	}

/*	↓↓↓↓	螢幕尺寸大於960時頁面顯示效果↓↓↓↓	 */
@media (min-width: 1024px) and (max-width:1600px) {
/*BANNER*/
/*表單區*/

.fill h2 .important{font-size:35px;}
img.banner_big{width: 100%;height: auto;display:block;}
img.banner_min{ display:none;}
img.banner001{display: block;top: 5%;left: 44.4%;z-index: 9;max-width: 827px;height:auto;width: 47vw;}
img.banner002{display: block;top: 5%;left: 9%;z-index: 3;max-width: 623px;height:auto;width: 46vw;}
img.banner003{display: block;top: 13%;left: 22%;z-index: 5;max-width: 454px;height:auto;width: 30vw;}
img.banner004{display: block;top: 44%;left: 19%;z-index: 5;max-width: 350px;height:auto;width: 27vw;}
img.banner005{display: block;top: 62%;left: 11%;z-index: 5;max-width: 361px;height:auto;width: 29vw;}
img.banner006{display: block;top: 2%;left: 29%;z-index: 2;max-width: 556px;height:auto;width: 36vw;}
img.banner007{display: block;top: -6%;left: -5%;z-index: 1;max-width: 841px;height:auto;width: 43vw;}
img.banner008{display: block;top: 17%;left: 80%;z-index: 8;max-width: 285px;height:auto;width: 18vw;}

/*表單區*/
.fill{background-image: none;background-color: #8fbed6;position:relative;z-index:20;text-align:center;}
.fill h2{font-size: 34px;color: #FFF;text-align:center;/* line-height: 20px; *//* padding-bottom: 1px; */font-weight: bold;font-style: italic;margin-top: 12px;margin-bottom: 14px;}
.fill h2 .a01{font-size: 34px;color: #fff438;text-align:center;line-height: 1.3em;font-weight: bold;font-style: italic;}


/*6大圖*/
.system{ margin-top:15px;}
.content .container-fluid{padding-right:0px; padding-left:0px; margin-right:0px; margin-left:0px;display: block;}
.system .box001{background-image:url(../images/pic02.png);background-position:right bottom;background-size: 52%;overflow:hidden;display: block;margin-top: -15px;}
.system .box002{background-image: url(../images/pic03.png);background-position: left bottom;background-size: 55%;overflow:hidden;display: block;}
.system .box003{background-image:url(../images/pic06.png);background-position: right top;background-size: 65%;overflow:hidden;/* display: block; */}
.system .word{max-width: 535px;min-width: 407px;margin: 0 auto;display: block;padding-bottom: 0px;padding-top: 36px;} 
.system .word h3{color: #5c5c5c;font-weight:bold;font-size: 23px;line-height: 1.4em;text-align: left;}
.system .word h1{color: #5c5c5c;/* font-weight:bold; */font-size: 43px;line-height:1.2em;text-align: left;margin-top: 10px;}
.system p{color:#000000; font-size:18px; line-height:1.5em;text-align:center; }
.system .linkbox{background: hsla(240, 0%, 50%, 0.9);height:40px;width: 170px;}
.system .linkbox h3{color: #fff;font-size: 19px;text-align: center;margin-top: 6px;}

img.pic{max-width: 1000px;min-width:300px;margin: auto;display:block;width: 106.3%;height:auto;margin-top: 0px;margin-left: -15px;}



}

/*	↓↓↓↓	螢幕尺寸大於960時頁面顯示效果↓↓↓↓	 */
@media (min-width: 961px) and (max-width:1023px) {
/*BANNER*/

/**表單區*/
.fill{/* background-image:url(../images/b_bg.png); */background-color: #8fbed6;position:relative;z-index:20;text-align:center;}
.fill h2{font-size: 34px;color: #FFF;text-align:center;/* line-height: 20px; *//* padding-bottom: 1px; */font-weight: bold;font-style: italic;margin-top: 12px;margin-bottom: 14px;}
.fill h2 .a01{font-size: 34px;color: #fff438;text-align:center;line-height: 1.3em;font-weight: bold;font-style: italic;}


/*BANNER*/
.fill h2 .important{font-size:35px;}
img.banner_big{width: 100%;height: auto;display:block;}
img.banner_min{ display:none;}
img.banner001{display: block;top: 10%;left: 46.4%;z-index: 9;max-width: 827px;height:auto;width: 45vw;}
img.banner002{display: block;top: 20%;left: 20%;z-index: 3;max-width: 623px;height:auto;width: 41vw;}
img.banner003{display: block;top: 25%;left: 29%;z-index: 5;max-width: 454px;height:auto;width: 35vw;}
img.banner004{display: block;top: 50%;left: 27%;z-index: 5;max-width: 350px;height:auto;width: 35vw;}
img.banner005{display: block;top: 63%;left: 21.7%;z-index: 5;max-width: 361px;height:auto;width: 57vw;}
img.banner006{display: block;top: 9%;left: 36%;z-index: 2;max-width: 556px;height:auto;width: 35vw;}
img.banner007{display: block;top: -4%;left: 3%;z-index: 1;max-width: 841px;height:auto;width: 49vw;}
img.banner008{display: block;top: 15%;left: 77%;z-index: 8;max-width: 285px;height:auto;width: 35vw;}

/* 翻牌效果 */
#f1_container {
  position: relative;
  width: 100%;
  z-index: 1;
  margin: 0 0;
  display: flex;
  flex-flow: row;
  justify-content: center;
  margin-left: 3px;
}    
#f1_container {   
  perspective: 1000;   
  -webkit-perspective: 1000; /* Safari 和 Chrome */
}   
#f1_card {
  width: 316px;
  height: 316px;
  transform-style: preserve-3d;
  transition: all 0.5s linear;
  margin: 0;
  margin-left: -5px;
}   
#f1_container:hover #f1_card {   
  transform: rotateY(-180deg);   
}   
.face {
	position: absolute;
	width: 316px;
	height: 316px;
	backface-visibility: hidden;
}   
.face.back {
  display: block;
  transform: rotateY(180deg);
  box-sizing: border-box;
  padding:0px;
  color: #FFF;
  font-size:14px;
  background-color: #959595;
  margin-left: 0;
}  
.face.back p{font-size: 16px;line-height:1.5em;color:#FFF;align-content: center;padding: 30px;margin-top: 30px;}

img.card{max-width: 316px;height: auto;width:100%;}

/*表單區*/
.fill{/* background-image:url(../images/b_bg.png); */background-color: #8fbed6;position:relative;z-index:20;text-align:center;}
.fill h2{font-size: 34px;color: #FFF;text-align:center;/* line-height: 20px; *//* padding-bottom: 1px; */font-weight: bold;font-style: italic;margin-top: 12px;margin-bottom: 14px;}
.fill h2 .a01{font-size: 34px;color: #fff438;text-align:center;line-height: 1.3em;font-weight: bold;font-style: italic;}

.system .box001{background-image:url(../images/pic02.png);background-position:right bottom;overflow:hidden;display: block;margin-top: -15px;}
.system .box002{background-image: url(../images/pic03.png);background-position:right bottom;overflow:hidden;display: block;}
.system .box003{background-image:url(../images/pic06.png);background-position: right bottom;overflow:hidden;/* display: block; */}

/*6大圖*/
.system{ margin-top:15px;}
.content .container-fluid{padding-right:0px; padding-left:0px; margin-right:0px; margin-left:0px;display: block;}
.system .box001{background-image:url(../images/pic02.png);background-position:right bottom;overflow:hidden;display: block;margin-top: -15px;}
.system .box002{background-image: url(../images/pic03.png);background-position:right bottom;overflow:hidden;display: block;}
.system .box003{background-image:url(../images/pic06.png);background-position: right bottom;overflow:hidden;/* display: block; */}
.system .word{max-width: 535px;min-width: 407px;margin: 0 auto;display: block;padding-bottom: 10px;padding-top: 140px;} 
.system .word h3{color: #5c5c5c;font-weight:bold;font-size: 28px;line-height: 1.5em;text-align: left;}
.system .word h1{color: #5c5c5c;/* font-weight:bold; */font-size: 63px;line-height:1.2em;text-align: left;}
.system p{color:#000000; font-size:18px; line-height:1.5em;text-align:center; }
.system .linkbox{background: hsla(240, 0%, 50%, 0.9);height:40px;width: 170px;}
.system .linkbox h3{color: #fff;font-size: 19px;text-align: center;margin-top: 6px;}


}

/* ↓↓↓↓ pad 豎屏時, 頁面顯示尺寸 300 < x <960 時,顯示效果 ↓↓↓↓  */
@media (min-width: 300px) and (max-width:960px) {
.BRR{ display: block;}
/*BANNER*/
img.banner_big{display:none;}
img.banner_min{ width: 100%;max-width:960px;min-width:280px;height: auto; display:block;}
img.banner001{display: none;}	
img.banner002{display: block;top: -2%;left: 0.5%;z-index: 5;max-width: 623px;height:auto;width: 85vw;}
img.banner003{display: block;top: 4%;left: 22.5%;z-index: 5;max-width: 454px;height:auto;width: 60vw;}
img.banner004{display: block;top: 27%;left: 17.5%;z-index: 5;max-width: 350px;height:auto;width: 51vw;}
img.banner005{display: block;top: 38%;left: 5.5%;z-index: 5;max-width: 361px;height:auto;width: 51vw;}
img.banner006{display: none;}
img.banner007{display: block;top: -1%;left: -17.5%;z-index: 1;max-width: 841px;height:auto;width: 71vw;}
img.banner008{display: none;}

.fill{background-color:#8fbed6;position:relative;z-index:20;text-align:center;background-image: none;}
.fill h2{font-size: 26px;margin: 17px 5px;}
.fill h2 .important{ font-size:28px;}
.fill h2 .gray{color: #7a7781;line-height: 39px;font-size: 27px;}
.fill h2 .Bu{color: #0384c6;line-height: 45px;font-size: 38px;}
.fill .go_button{-webkit-animation-duration: 2s; /* Chrome, Safari, Opera */animation-duration: 2s;max-width: 253px;/* height:auto; */min-width: 200px;margin: 0;margin-left: 6px;/* width:90%; */}

.content1 h2{font-size: 26px;color: #7f6f61;/* font-weight:bold; */line-height:1.3em;text-align: center;}

.content1 p{font-size: 22px;color: #656565;text-align: center;margin: 15px 10px;padding-bottom: 35px;}
.content2 h2{font-size: 34px;color: #4e97bf;font-weight:bold;line-height:1.3em;text-align: center;padding-top: 30px;}
.content2 p{font-size: 22px;color: #656565;}
.content3 h2{font-size: 35px;color: #4c768b;font-weight:bold;line-height:1.3em;text-align: center;}
.content3 p{font-size: 18px;color: #656565;text-align: center;margin: 7px 20px;}
.content3 h3{font-size: 28px;color: #666464;font-weight:bold;line-height:1.3em;text-align: center;margin: 38px 10px;}
.content3 p{font-size: 22px;color: #656565;text-align: center;margin: 15px 10px;}


/*6大圖*/
.system .word h3{color: #5c5c5c;font-weight:bold;font-size: 28px;line-height: 1.5em;text-align: left;}
.system .word h1{color: #5c5c5c;/* font-weight:bold; */font-size: 50px;line-height:1.2em;text-align: left;}
.system p{color:#000000; font-size:18px; line-height:1.5em;text-align:center; }
.system .linkbox{background: hsla(240, 0%, 50%, 0.9);height:40px;width: 170px;margin: 0 auto;margin-left: 4px;text-align: left;margin-bottom: 9%;}
.system .linkbox h3{color: #fff;font-size: 19px;text-align: center;margin-top: 10px;}
.link {color: #fff;}
.system .word{max-width: 529px;min-width: 350px;margin: 0 auto;display: block;padding-bottom: 10px;padding-top: 6%;} 


/*線上真人名師是誰? -標頭*/
.trapezoid {background: #5f9dc0;text-align: center;align-content: center;background-position: center;width: auto;}
.trapezoid  h2{font-size: 32px;color: #fff;font-weight:bold;line-height: 1.7em;/* text-align: center; */}
 
 /*巨匠集團 提供優質5心服務 title*/      
.pink {background: #ff9d9d;background-image: none;text-align: center;width: auto;height: 90px;}
.pink h2{font-size: 32px;color: #fff;font-weight:bold;line-height: 1.2em;padding-top: 5px;}

img.pic{max-width: 1000px;min-width: 400px;margin: auto;display:block;width: 105%;height:auto;/* margin-top: 30px; */margin-left: -20px;}
img.pic2{max-width: 302px;min-width: 302px;margin: 36px auto;display:block;width: 100%;height:auto;}	
img.pic3{max-width: 302px;min-width: 302px;/* margin: auto; */display:block;width: 100%;height:auto;margin-top: 10px;}
img.girl{max-width: 846px;min-width:303px;margin: 37px auto;display:block;width: 78%;height:auto;}
img.bn{max-width: 331px;min-width:250px;margin: 51px 114px;display:block;/* width:95%; *//* height:auto; *//* text-align: center; *//* align-content: flex-start; */}
img.heart{max-width: 243px;min-width:150px;margin: auto;display:block;width: 100%;height:auto;margin-top: 45px;margin-bottom: 70px;}
img.card{max-width: 405px; height: auto; width:100%}

/* 翻牌效果 */
#f1_container {
  position: relative;
  width: 100%;
  z-index: 1;
  margin: 0;
  display: flex;
  flex-flow: row;
  justify-content: center;
  /* padding-left: 40px; */
}    
#f1_container {   
  perspective: 1000;   
  -webkit-perspective: 1000; /* Safari 和 Chrome */
}   

#f1_card {
  width: 316px;
  height: 316px;
  transform-style: preserve-3d;
  transition: all 0.5s linear;
  padding-left: -6px;
  margin: 20px 0;
}   
#f1_container:hover #f1_card {   
  transform: rotateY(-180deg);   
}   
.face {
	position: absolute;
	width: 316px;
	height: 316px;
	backface-visibility: hidden;
}   
.face.back {
  display: block;
  transform: rotateY(180deg);
  box-sizing: border-box;
  padding:0px;
  color: #FFF;
  font-size:14px;
  background-color: #959595;
  /* margin-left: 20px; */
}  
.face.back p{font-size: 16px;line-height:1.5em;color:#FFF;align-content: center;padding: 30px;margin-top: 30px;}



.title01 h2{font-size: 23px;color: #c30007;font-weight:bold;line-height: 1.2em;margin-top: 2%;}
.title01 h2.red{font-size: 30px;color: #c30007;font-weight:bold;line-height: 1.2em;margin-top: -2%;text-align: center;margin-left: 0px;}
.title01 h2.red2{font-size: 29px;color: #c30007;font-weight:bold;line-height: 1.2em;margin-top: 3%;text-align: center;}
.title01 p{font-size: 16px;color: #616161;font-weight:normal;padding-bottom: 9%;text-align: center;/* margin-left: 100px; */}
.title01 p.white{background-color:#fff;font-size: 16px;color: #616161;font-weight:normal;/* padding-bottom: 6%; *//* text-align: center; */margin: auto;/* margin-left: -4px; */padding: 30px 30px;width: 343px;margin-bottom: 40px;}
.title01 .bk{font-size: 23px;color: #000000;font-weight:bold;line-height: 1.2em;}
.title01 .bk02{font-size: 17px;color: #000000;font-weight:bold;line-height: 1.3em;}

.title01 .gr{font-size: 31px;color: #818181;font-weight:bold;line-height: 1.2em;}


}

/*========================================================*/
@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) {


}