@charset "UTF-8";table col[class*="col-"] { position: static; float: none; display: table-column;}table td[class*="col-"], table th[class*="col-"] { position: static; float: none; display: table-cell;}.table { width: 100%; background: white;}.table thead { border-bottom: 8px solid #f2f2f2;}.table thead tr { border-bottom: 0;}.table thead th { padding: 0px 20px 10px; color: #393939; text-align: left;}.table th { padding: 10px;}.table td { padding: 10px; line-height: 1.2em; color: #919191;}.table tr { border-bottom: 1px solid #e6e6e6;}.table .fcR { padding: 5px 0; color: #db0000; font-weight: bold;}.table .fcR:before { content: "$";}.table .fcA { color: #0098e7;}.table.dis { border-color: #cccccc;}.table.dis thead th { border-color: #cccccc;}.table.dis th { border-color: #cccccc; color: #575757;}.table.ipt thead th { text-align: left;}.table.ipt th { color: #393939; text-align: right;}.table.ipt tr { border-bottom: 1px solid #f2f2f2;}.table.ipt .wAt { width: auto;}.masonry { column-count: 2; column-gap: 0;}@media (min-width: 768px) { .masonry { column-count: 2; }}@media (min-width: 992px) { .masonry { column-count: 3; }}@media (min-width: 1200px) { .masonry { column-count: 4; }}.masonryLst { box-sizing: border-box; column-break-inside: avoid; break-inside: avoid; padding: 5px;}.masonryCont { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 10px; border-radius: 20px; background: #f2f2f2; color: black;}.masonry .sharer { padding: 5px 0; font-weight: 600; font-size: 1.2em; text-align: center; color: #00acdc;}.container-fluid { position: relative;}.Header_Fix { position: absolute; bottom: -50%; top: inherit; width: 100%; padding: 10px 5px; line-height: 1.2em; box-shadow: 0px 4px 17px 1px #d9d9d9; background: white; color: white; z-index: -1; transition: all 0.2s;}@media (max-width: 767px) { .Header_Fix { position: fixed; bottom: 0; left: 0; z-index: 99; }}@media (min-width: 768px) { .Header_Fix { top: -50%; bottom: inherit; font-size: 1.7em; }}.Header_Fix .container { display: flex;}.Header_Fix .container .left { align-self: center;}.Header_Fix .sPrice { color: #db0000;}.Header_Fix .btn { width: 95%; padding: 10px 0;}.js-FixHd { position: fixed; bottom: 0; left: 0; z-index: 99;}@media (min-width: 768px) { .js-FixHd { top: 0; bottom: inherit; }}.bgc { padding: 5px 5px 0; background: #bfbfbf;}.snav { margin: 0; padding: 10px 0; border-left: 1px solid #cccccc; border-right: 1px solid #cccccc; color: white;}.snav:hover, .snav.crt { border-radius: 10px 10px 0 0; border: none; background: white; color: gray;}@media (min-width: 768px) { .snav { font-size: 1.2em; }}.tips-ps { margin: 0 10px 10px; padding: 10px 10px 0; line-height: 1.5em; background: transparent; color: #393939; text-align: center; z-index: 9;}@media (min-width: 480px) { .tips-ps { position: relative; bottom: 35px; max-width: 550px; margin: 0 15px; padding: 10px 15px 0; border: 1px solid #393939; font-size: 1em; border-radius: 10px; } .tips-ps:before { display: block; position: absolute; width: 0; content: ""; top: -5px; left: 60px; border-width: 0 5px 5px; border-style: solid; border-color: #393939 transparent; }}@media (min-width: 768px) { .tips-ps { position: absolute; bottom: 15px; left: 0; }}@media (min-width: 992px) { .tips-ps { bottom: 50px; }}@media (min-width: 1200px) { .tips-ps { left: inherit; }}.tips-ps .inner { padding-bottom: 10px;}.tips-ps .btnFB { position: relative; top: -5px; padding: 2px 10px; margin-bottom: 5px; font-size: 0.85em; background: #4460ae; color: white;}.tips-ps .btnFB:hover { color: white;}.hd-img { line-height: 0; text-align: center; background: #e7e2de;}.hd { display: inline-block; position: absolute; width: auto; padding: 20px 5px; font-size: 1.2em; border-radius: 50px; animation-duration: 6s; animation-iteration-count: infinite; z-index: 9;}@media (min-width: 480px) { .hd { padding: 15px 20px; font-size: 1em; }}@media (min-width: 992px) { .hd { padding: 25px 20px; font-size: 1.5em; }}.tips { margin-top: calc(58% - 35px); right: 150px; background: #00acdc; color: white;}@media (min-width: 768px) { .tips { margin-top: calc(12% - 35px); right: 50px; }}@keyframes teacher { 0% { opacity: 0; } 1% { opacity: 1; } 99% { opacity: 1; } 100% { opacity: 0; }}@keyframes teacher1 { 0% { right: 0%; opacity: 0; } 10% { right: 30px; opacity: 1; } @media (min-width: 480px) { 10% { right: 100px; } } 49% { right: 30px; opacity: 1; } @media (min-width: 480px) { 49% { right: 100px; } } 50% { right: 50px; opacity: 0; } 100% { right: 0; opacity: 0; }}@keyframes teacher2 { 0% { right: 0%; opacity: 0; } 50% { right: 0%; opacity: 0; } 60% { right: 50px; opacity: 1; } 99% { right: 30px; opacity: 0; } 100% { right: 0; opacity: 0; }}.box1 { margin-top: 58.5%; background: #393939; color: white; animation-name: teacher1; opacity: 0;}@media (min-width: 768px) { .box1 { margin-top: 12.5%; }}.box2 { position: absolute; margin-top: 58%; background: #393939; color: white; animation-name: teacher2; opacity: 0;}@media (min-width: 768px) { .box2 { margin-top: 13%; }}@keyframes silder { 0% { opacity: 1; } 25% { opacity: 1; } 26% { opacity: 0; }}.slider { position: relative; line-height: 0; z-index: 9;}.slider > .lst { display: block; position: absolute; top: 0; left: 0; right: 0; opacity: 0; animation: silder 24s linear infinite;}.slider > .lst:nth-child(1) { animation-delay: 0s;}.slider > .lst:nth-child(2) { animation-delay: 6s;}.slider > .lst:nth-child(3) { animation-delay: 12s;}.slider > .lst:nth-child(4) { animation-delay: 18s;}.snavCont { padding: 25px 10px; line-height: 1.5em;}.snavCont .tt { padding: 10px 0 20px; font-weight: 600; font-size: 2em; line-height: 1.2em; text-align: center;}@media (min-width: 768px) { .snavCont .tt { padding: 50px 0 20px; }}.snavCont .cont { padding-bottom: 10px; font-size: 1.2em; line-height: 1.7em;}.snavCont .cont:first-child { padding-top: 50px;}.snavCont .cont .cont-tt { padding-right: 10px; color: #f05305; font-weight: 600;}.snavCont .well { padding: 50px 0;}.snavCont .inner { border: 5px solid white;}.snavCont .youtubeLst { text-align: center; cursor: pointer;}.snavCont .youtubeLst:after { display: block; content: attr(data-txt);}.snavCont .Q { padding: 30px 0 10px; font-size: 1.2em; color: #f05305; font-weight: 600;}.snavCont .Q:before { padding-right: 10px; content: "Q";}.snavCont .skill { width: 25%; float: left; padding: 15px 10px 0; text-align: center; font-size: 0.85em; line-height: 1.2em;}.snavCont .skill .img-response { margin-bottom: 5px;}.snavCont .skill:nth-child(4n+1) { clear: both;}@media (min-width: 768px) { .snavCont .skill { width: 11.1%; margin-bottom: 50px; } .snavCont .skill:nth-child(4n+1) { clear: inherit; }}.snavCont .questionLst { margin: 0; padding: 5px 0;}.snavCont .questionItem { margin: 0; padding: 0 0 0 30px;}.snavCont .questionItem:last-of-type { padding-bottom: 10px;}.snavCont .by { padding: 5px 0; font-weight: 600; font-size: 1.2em; color: #00acdc;}.snavCont .by:after { content: " 推薦";}.snavCont.more { height: 700px; position: relative; overflow: hidden;}.snavCont.more:after { display: block; position: absolute; bottom: 0; width: 100%; height: 200px; content: ""; background-image: -moz-linear-gradient(bottom, white 15%, rgba(255, 255, 255, 0) 100%); background-image: -webkit-linear-gradient(bottom, white 15%, rgba(255, 255, 255, 0) 100%); background-image: linear-gradient(bottom, white 15%, rgba(255, 255, 255, 0) 100%);}.classics { padding: 0 10px 50px; line-height: 1.5em;}.classics .tt { padding: 30px 0 10px; font-weight: 600; font-size: 1.2em;}.classics .img { padding-top: 30px; text-align: center;}.blogger { padding: 10px 10px 50px; border-bottom: 1px solid #e6e6e6; font-size: 1em; line-height: 1.5em; color: #333333;}.blogger:after { position: absolute; bottom: 5px; right: 0; padding: 2px 10px; content: "閱讀全文"; color: white; background: gray;}.blogger .img { padding: 0 15px;}.blogger .blogger-tt { padding-bottom: 10px; font-weight: 600; font-size: 1.2em;}.blogger:hover { color: #1a1a1a;}.register .inner { padding: 10px 5px;}@media (min-width: 768px) { .register .inner { padding: 30px 15px; }}.register .lst { padding: 10px; margin-bottom: 10px; border-bottom: 3px solid #ebebeb; transition: all 0.5s;}@media (min-width: 768px) { .register .lst { padding: 5px 15px; }}.register .lst .wrapper { display: flex;}.register .lst .txt { padding: 0 0 0 20px; line-height: 1.5em; align-self: center; color: gray;}.register .lst .tt { padding: 0 0 5px; line-height: 1.2em; font-weight: 600; color: #f05305; font-size: 1.2em;}@media (min-width: 768px) { .register .lst .tt { font-size: 1.7em; }}.register .lst .fc { padding: 10px 0 0; color: #00acdc; text-decoration: underline; cursor: pointer;}.register .tab { margin-top: 25px; padding: 15px; border-radius: 10px; border: 5px solid #f05305; background: white;}.register .tab:before { position: absolute; top: -20px; left: calc(15% - 10px); width: 0; height: 0; border-style: solid; border-width: 0 20px 20px 20px; border-color: transparent transparent #f05305 transparent; content: "";}@media (min-width: 992px) { .register .tab { padding: 30px; }}.register .tab .tt { padding: 0 10px 10px; font-weight: 500; color: gray;}.register .tab .help { padding: 20px; text-align: center; line-height: 1.5em;}.register .tab .help .tt { font-size: 1.2em; font-weight: 600; color: #f05305;}.register .btnAsap { padding: 10px 20px;}.register .btnLogin { background: #f05305; color: white;}.register .btnMAIL { background: #00acdc; color: white;}.register .btnFB { background: #4460ae; color: white;}.register .btnLink { padding: 20px;}.register .or { position: relative; margin-top: 50px;}.register .or:before { position: absolute; top: -37px; left: calc(50% - 8px ); font-size: 0.85em; content: "or"; color: #999999;}.register .form-control { margin: 10px auto; padding: 10px; font-size: 1.7em;}.register .ps { padding: 50px 30px;}@media (min-width: 768px) { .register .ps { padding: 50px 100px; }}.register .ps .psLst { margin-top: 5px; list-style-type: decimal;}.register .ps .table { margin: 10px 0; border: 5px solid #00acdc;}.register .ps .table th, .register .ps .table td { padding: 5px; border: 1px solid #cccccc;}.register .ps .table th { background-color: #00acdc; color: white; text-align: center;}.register #reCAPTCHA { margin-bottom: 20px;}.register #reCAPTCHA iframe { margin-top: 10px;}@media (max-width: 992px) { .register #reCAPTCHA iframe { transform: scale(0.8); transform-origin: 0 0; }}