header.masthead .masthead-heading { position: relative; display: inline-block; }
header.masthead .masthead-heading span { display: inline-block; }
header.masthead .masthead-heading .text-shadow { font-weight: bold; -webkit-text-stroke: 7px white; text-shadow: 3px 3px 10px #333; position: absolute; top: 0; left: 0; }
header.masthead .masthead-heading .text-front  { font-weight: bold; position: relative; }
header.masthead .masthead-heading .text-front > span:nth-child(1) { color: #333; }
header.masthead .masthead-heading .text-front > span:nth-child(2) { color: #B81C22; }
header.masthead .masthead-text { text-align: left; text-shadow: 0 0 4px #fff1d7; color: #000; }

.section-heading { line-height: 1.4; }
.section-heading > span { display: inline-block; }
.bg-skin { background: linear-gradient(45deg, #f4e1c1 0%,#f4efe3 100%); }
.list { line-height: 1.75; }


/***遠距流程圖***/
/*#flowchart { display: flex; flex-wrap: wrap; align-items: center; max-width: 1050px; margin: 0 auto; }
#flowchart > div { flex-grow: 1; max-width: 11em; height: 4em; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; background: #b13232; color: #fff; border-radius: 12px; box-shadow: 2px 3px 7px #888; padding: 10px; margin: 20px 10px; position: relative; }
#flowchart > div > span { display: inline-block; }
#flowchart > div > .abs { position: absolute; top: calc(100% + 10px); left: 0; font-size: 0.95em; font-weight: bold; color: #333; }
#flowchart > i { background: url(../img/arrow-right-gray.png) no-repeat; width: 45px; height: 45px; display: inline-block; }*/
#flowchart { display: flex; flex-wrap: wrap; align-items: center; max-width: 1250px; margin: 0 auto; }
#flowchart > div {
  position: relative;
  text-align: center;
  padding: 12px;
  margin: 10px 7px;
  height: 5.5em;
  width: 13em;
  display: flex; 
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
}
#flowchart > div > span { color: #8d1d05; position: relative; z-index: 1; font-weight: bold; line-height: 1.4; }
#flowchart > div > div  { color: #333; position: absolute; z-index: 1; top: calc(100% + 10px); left: calc(50% - 3.5em); }

#flowchart > div:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 50%;
  width: 100%;
  background: #ffce84; 
  -webkit-transform: skew(20deg, 0deg);
  -moz-transform: skew(20deg, 0deg);
  -ms-transform: skew(20deg, 0deg);
  -o-transform: skew(20deg, 0deg);
  transform: skew(20deg, 0deg);
  z-index: 0;
  border: 2px solid #cd692e;
  border-bottom: none;
  /*background: linear-gradient(to bottom, #fdecd7 0%,#fcc18a 100%);*/
  box-shadow: 5px 3px 8px -8px black, -5px 3px 8px -8px black;
}
#flowchart > div:after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  height: 50%;
  width: 100%;
  background: #ffb950; 
  -webkit-transform: skew(-20deg, 0deg);
  -moz-transform: skew(-20deg, 0deg);
  -ms-transform: skew(-20deg, 0deg);
  -o-transform: skew(-20deg, 0deg);
  transform: skew(-20deg, 0deg);
  z-index: 0;
  border: 2px solid #cd692e;
  border-top: none;
  /*background: linear-gradient(to bottom, #fcc18a 0%,#fcc18a 100%);*/
  box-shadow: 5px 3px 8px -8px black, -5px 3px 8px -8px black;
}


/***遠距流程***/
/*#note div > ul, 
#note div > ol { line-height: 1.75; }
#note .box-shadow { position: relative; background: #fffbec; box-shadow: 1px 1px 8px #999; border-radius: 40px; padding: 60px 30px 20px; height: 100%; }
#note .box-shadow h4 { position: absolute; top: -30px; left: 0; display: block; width: 100%; text-align: center; }
#note .box-shadow h4 > div {  width: calc(100% - 80px); margin: 0 auto; padding: 12px 20px; background: linear-gradient(to right, #ff7b0d 0%,#ffa84c 100%); border-radius: 20px; box-shadow: 1px 1px 6px #888; color: #fff; font-size: 1.1em; }
#note .box-shadow .box-arrow { position: absolute; top: calc(50% - 30px); right: -35px; z-index: 99; }
@media (max-width:  991px) {
    #note .box-shadow .box-arrow { top: calc(100% - 15px); left: calc(50% - 30px); right: 0; }
    #note .box-shadow .box-arrow > img { transform:rotate(90deg); }
}*/
#flow .flowchart .col-3 .box-shadow { position: relative; background: #fffbec; box-shadow: 1px 1px 8px #999; border-radius: 40px; padding: 60px 30px 20px; height: 100%; }
#flow .flowchart .col-3 .box-shadow > h4 { position: absolute; top: -30px; left: 0; display: block; width: 100%; text-align: center; }
#flow .flowchart .col-3 .box-shadow > h4 > div {  width: calc(100% - 80px); margin: 0 auto; padding: 12px 20px; background: linear-gradient(to right, #ff7b0d 0%,#ffa84c 100%); border-radius: 20px; box-shadow: 1px 1px 6px #888; color: #fff; font-size: 1.1em; }
#flow .flowchart .col-3 .box-shadow > .img { text-align: center; }
#flow .flowchart .col-3 .box-shadow > .txt ul, 
#flow .flowchart .col-3 .box-shadow > .txt ol { line-height: 1.75; }
#flow .flowchart .col-3 .box-shadow > .box-arrow { position: absolute; top: calc(50% - 30px); right: -35px; z-index: 99; }
@media (min-width: 1400px) {
	#flow .flowchart .col-3 { width: 25%; }
}
@media (max-width: 767px), (min-width: 1400px) {
	#flow .flowchart .col-3 .box-shadow > .img { margin-bottom: 20px; }
}
@media (max-width: 1399px) {
	#flow .flowchart .col-3 { width: 100%; }
    #flow .flowchart .col-3 .box-shadow > .box-arrow { top: calc(100% - 15px); left: calc(50% - 30px); right: 0; }
    #flow .flowchart .col-3 .box-shadow > .box-arrow > img { transform:rotate(90deg); }
}
@media (min-width: 768px) and (max-width: 1399px) {
	#flow .flowchart .col-3 .box-shadow { display: flex; }
	#flow .flowchart .col-3 .box-shadow > .img { width: 40%; }
	#flow .flowchart .col-3 .box-shadow > .txt { width: 60%; }
}


/*遠距準備工作*/
#note h3 > span { font-size: 18px; font-weight: normal; }


/*考試當天*/
.tab-content { padding: 35px 30px 20px; background: #fff; border: 1px solid #dee2e6; border-radius: 30px; border-top-left-radius: 0; border-top-right-radius: 0; }


/***遠距考試哪裡不一樣***/
#compare table { border: 2px solid #aaa; }
#compare table > thead > tr > th { text-align: center; font-size: 1.2em; }
#compare table > thead > tr > th:nth-child(3) { border-left: 4px solid darkred; border-right: 4px solid darkred; border-top: 4px solid darkred; }
#compare table > tbody > tr > td:nth-child(1) { background: #eee; min-width: 4.8em; font-weight: bold; }
#compare table > tbody > tr > td:nth-child(3) { background: #ffeff0; border-left: 4px solid darkred; border-right: 4px solid darkred; }
#compare table > tbody > tr:last-child > td:nth-child(3) { border-bottom: 4px solid darkred; }
@media (max-width: 414px) {
    #compare table > tbody > tr > td:nth-child(1) { min-width: 3em; }
    #compare table > tbody > tr > td:nth-child(2) { width: 40%; }
}


/***費用***/
#fee table { text-align: center; background: #fff; border: 3px solid #760a0a; }
#fee table > thead > tr > th { vertical-align: middle; font-size: 1.3em; font-weight: bold; background: #b13232; color: #fff; }
#fee table > thead > tr > th > span,
#fee table > thead > tr > th > div { font-size: 0.7em; }
#fee table > tbody > tr > td { vertical-align: middle; position: relative; }
#fee table > tbody > tr > td:nth-child(n+2) { font-size: 1.1em; }
#fee table > tbody > tr > td > span { display: inline-block; }
.cross { position: absolute; top: calc(50% - 25px); left: calc(100% - 25px); display: inline-block; width: 50px; height: 50px; background: url(../img/cross.png) no-repeat; }


/***馬上報名***/
#contact .phone { display: inline-block; margin: 0 auto; text-align: left; line-height: 2; font-size: 1.2em; }
#contact .btn-signup {
	box-shadow: 3px 4px 0px 0px #8a2a21;
	background:linear-gradient(to bottom, #c62d1f 5%, #f24437 100%);
	background-color:#c62d1f;
	border-radius:18px;
	border:1px solid #d02718;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:26px;
	font-weight: bold;
	padding:7px 25px;
	text-decoration:none;
	position: relative;
	left: -5px;
	margin-top: 15px;
}
#contact .btn-signup:hover {
	background:linear-gradient(to bottom, #f24437 5%, #c62d1f 100%);
	background-color:#f24437;
	top: 3px;
}
#contact .btn-signup:active {
	position:relative;
	top:1px;
}
#contact .btn-signup > img { vertical-align: middle; width: 100px; }


@media (min-width:  992px) {
    #who { padding: 6rem 0 0; }
}
@media (max-width:  991px) {
    .page-section { padding: 3rem 0; }
    #who { padding: 3rem 0 0; }
}
@media (min-width:  768px) {
    
}