@charset "UTF-8";
/* 顏色變數 */
/* 主色 */
/* 紅 */
/* 桃紅～粉紅 */
/* 紫 */
/* 褐~橘~米白 */
/* 金~黃 */
/* 綠 */
/* 藍 */
/* 黑~灰~白 */
/* 響應式 */
/* CSS Document */
a, a:hover {
  text-decoration: none;
}

.bg-maincolor {
  background: #E50056;
}

.btn-maincolor {
  color: white;
  background-color: #E50056;
}

.mt-0 {
  margin-top: 0em !important;
}

.mt-1 {
  margin-top: 1em !important;
}

.mt-2 {
  margin-top: 2em !important;
}

.mt-3 {
  margin-top: 3em !important;
}

.mt-4 {
  margin-top: 4em !important;
}

.mt-5 {
  margin-top: 5em !important;
}

.mr-0 {
  margin-right: 0em !important;
}

.mr-1 {
  margin-right: 1em !important;
}

.mr-2 {
  margin-right: 2em !important;
}

.mr-3 {
  margin-right: 3em !important;
}

.mr-4 {
  margin-right: 4em !important;
}

.mr-5 {
  margin-right: 5em !important;
}

.mb-0 {
  margin-bottom: 0em !important;
}

.mb-1 {
  margin-bottom: 1em !important;
}

.mb-2 {
  margin-bottom: 2em !important;
}

.mb-3 {
  margin-bottom: 3em !important;
}

.mb-4 {
  margin-bottom: 4em !important;
}

.mb-5 {
  margin-bottom: 5em !important;
}

.ml-0 {
  margin-left: 0em !important;
}

.ml-1 {
  margin-left: 1em !important;
}

.ml-2 {
  margin-left: 2em !important;
}

.ml-3 {
  margin-left: 3em !important;
}

.ml-4 {
  margin-left: 4em !important;
}

.ml-5 {
  margin-left: 5em !important;
}

.pt-0 {
  padding-top: 0em !important;
}

.pt-1 {
  padding-top: 1em !important;
}

.pt-2 {
  padding-top: 2em !important;
}

.pt-3 {
  padding-top: 3em !important;
}

.pt-4 {
  padding-top: 4em !important;
}

.pt-5 {
  padding-top: 5em !important;
}

.pr-0 {
  padding-right: 0em !important;
}

.pr-1 {
  padding-right: 1em !important;
}

.pr-2 {
  padding-right: 2em !important;
}

.pr-3 {
  padding-right: 3em !important;
}

.pr-4 {
  padding-right: 4em !important;
}

.pr-5 {
  padding-right: 5em !important;
}

.pb-0 {
  padding-bottom: 0em !important;
}

.pb-1 {
  padding-bottom: 1em !important;
}

.pb-2 {
  padding-bottom: 2em !important;
}

.pb-3 {
  padding-bottom: 3em !important;
}

.pb-4 {
  padding-bottom: 4em !important;
}

.pb-5 {
  padding-bottom: 5em !important;
}

.pl-0 {
  padding-left: 0em !important;
}

.pl-1 {
  padding-left: 1em !important;
}

.pl-2 {
  padding-left: 2em !important;
}

.pl-3 {
  padding-left: 3em !important;
}

.pl-4 {
  padding-left: 4em !important;
}

.pl-5 {
  padding-left: 5em !important;
}

.mt-10pc {
  margin-top: 10%;
}

.mt-20pc {
  margin-top: 20%;
}

.mt-30pc {
  margin-top: 30%;
}

.mt-40pc {
  margin-top: 40%;
}

.mt-50pc {
  margin-top: 50%;
}

/*背景顏色*/
.bg-black {
  background: #000000;
}

.bg-lightgray {
  background: #D3D3D3;
}

.bg-dimgray {
  background: #696969;
}

.bg-gray {
  background: #808080;
}

.bg-slategray {
  background: #708090;
}

.bg-lightslategray {
  background: #778899;
}

.bg-darkgray {
  background: #A9A9A9;
}

.bg-silver {
  background: #C0C0C0;
}

.bg-gainsboro {
  background: #DCDCDC;
}

.bg-whitesmoke {
  background: #F5F5F5;
}

.bg-ghostwhite {
  background: #F8F8FF;
}

.bg-white {
  background: #FFFFFF;
}

/*按鈕顏色*/
.btn-black {
  color: white;
  background-color: black;
}

.btn-aliceblue {
  color: black;
  background-color: aliceblue;
}

.btn-cadetblue {
  color: white;
  background-color: cadetblue;
}

.btn-lightyellow {
  color: black;
  background-color: lightyellow;
}

.btn-coral {
  color: white;
  background-color: coral;
}

.btn-dimgray {
  color: white;
  background-color: dimgray;
}

.btn-lavender {
  color: white;
  background-color: lavender;
}

.btn-darkcyan {
  color: white;
  background-color: darkcyan;
}

.btn-lightgoldenrodyellow {
  color: black;
  background-color: lightgoldenrodyellow;
}

.btn-tomato {
  color: white;
  background-color: tomato;
}

.btn-gray {
  color: white;
  background-color: gray;
}

.btn-lightslategray {
  color: white;
  background-color: lightslategray;
}

.btn-teal {
  color: white;
  background-color: teal;
}

.btn-lemonchiffon {
  color: black;
  background-color: lemonchiffon;
}

.btn-orangered {
  color: white;
  background-color: orangered;
}

.btn-darkgray {
  color: white;
  background-color: darkgray;
}

.btn-slategray {
  color: white;
  background-color: slategray;
}

.btn-seagreen {
  color: white;
  background-color: seagreen;
}

.btn-wheat {
  color: black;
  background-color: wheat;
}

.btn-red {
  color: white;
  background-color: red;
}

.btn-silver {
  color: white;
  background-color: silver;
}

.btn-darkslategray {
  color: white;
  background-color: darkslategray;
}

.btn-darkolivegreen {
  color: white;
  background-color: darkolivegreen;
}

.btn-burlywood {
  color: white;
  background-color: burlywood;
}

.btn-crimson {
  color: white;
  background-color: crimson;
}

.btn-lightgrey {
  color: black;
  background-color: #d3d3d3;
}

.btn-lightsteelblue {
  color: black;
  background-color: lightsteelblue;
}

.btn-darkgreen {
  color: white;
  background-color: darkgreen;
}

.btn-tan {
  color: black;
  background-color: tan;
}

.btn-mediumvioletred {
  color: white;
  background-color: mediumvioletred;
}

.btn-gainsboro {
  color: black;
  background-color: gainsboro;
}

.btn-steelblue {
  color: white;
  background-color: steelblue;
}

.btn-green {
  color: white;
  background-color: green;
}

.btn-khaki {
  color: black;
  background-color: khaki;
}

.btn-deeppink {
  color: white;
  background-color: deeppink;
}

.btn-white {
  color: black;
  background-color: white;
  border-color: black;
}

.btn-royalblue {
  color: white;
  background-color: royalblue;
}

.btn-forestgreen {
  color: white;
  background-color: forestgreen;
}

.btn-yellow {
  color: black;
  background-color: yellow;
}

.btn-hotpink {
  color: white;
  background-color: hotpink;
}

.btn-snow {
  color: black;
  background-color: snow;
}

.btn-midnightblue {
  color: white;
  background-color: midnightblue;
}

.btn-mediumseagreen {
  color: white;
  background-color: mediumseagreen;
}

.btn-gold {
  color: black;
  background-color: gold;
}

.btn-palevioletred {
  color: white;
  background-color: palevioletred;
}

.btn-ghostwhite {
  color: black;
  background-color: ghostwhite;
}

.btn-navy {
  color: white;
  background-color: navy;
}

.btn-darkseagreen {
  color: white;
  background-color: darkseagreen;
}

.btn-orange {
  color: white;
  background-color: orange;
}

.btn-pink {
  color: black;
  background-color: pink;
}

.btn-whitesmoke {
  color: black;
  background-color: whitesmoke;
}

.btn-darkblue {
  color: white;
  background-color: darkblue;
}

.btn-mediumaquamarine {
  color: white;
  background-color: mediumaquamarine;
}

.btn-sandybrown {
  color: white;
  background-color: sandybrown;
}

.btn-lightpink {
  color: black;
  background-color: lightpink;
}

.btn-floralwhite {
  color: black;
  background-color: floralwhite;
}

.btn-mediumblue {
  color: white;
  background-color: mediumblue;
}

.btn-aquamarine {
  color: white;
  background-color: aquamarine;
}

.btn-darkorange {
  color: white;
  background-color: darkorange;
}

.btn-thistle {
  color: black;
  background-color: thistle;
}

.btn-linen {
  color: black;
  background-color: linen;
}

.btn-blue {
  color: white;
  background-color: blue;
}

.btn-palegreen {
  color: white;
  background-color: palegreen;
}

.btn-goldenrod {
  color: white;
  background-color: goldenrod;
}

.btn-magenta {
  color: white;
  background-color: magenta;
}

.btn-antiquewhite {
  color: black;
  background-color: antiquewhite;
}

.btn-dodgerblue {
  color: white;
  background-color: dodgerblue;
}

.btn-lightgreen {
  color: white;
  background-color: lightgreen;
}

.btn-peru {
  color: white;
  background-color: peru;
}

.btn-fuchsia {
  color: white;
  background-color: fuchsia;
}

.btn-papayawhip {
  color: black;
  background-color: papayawhip;
}

.btn-cornflowerblue {
  color: white;
  background-color: cornflowerblue;
}

.btn-springgreen {
  color: white;
  background-color: springgreen;
}

.btn-darkgoldenrod {
  color: white;
  background-color: darkgoldenrod;
}

.btn-violet {
  color: white;
  background-color: violet;
}

.btn-blanchedalmond {
  color: black;
  background-color: blanchedalmond;
}

.btn-deepskyblue {
  color: white;
  background-color: deepskyblue;
}

.btn-mediumspringgreen {
  color: white;
  background-color: mediumspringgreen;
}

.btn-chocolate {
  color: white;
  background-color: chocolate;
}

.btn-plum {
  color: black;
  background-color: plum;
}

.btn-bisque {
  color: black;
  background-color: bisque;
}

.btn-lightskyblue {
  color: black;
  background-color: lightskyblue;
}

.btn-lawngreen {
  color: white;
  background-color: lawngreen;
}

.btn-sienna {
  color: white;
  background-color: sienna;
}

.btn-orchid {
  color: white;
  background-color: orchid;
}

.btn-moccasin {
  color: black;
  background-color: moccasin;
}

.btn-skyblue {
  color: black;
  background-color: skyblue;
}

.btn-chartreuse {
  color: white;
  background-color: chartreuse;
}

.btn-saddlebrown {
  color: white;
  background-color: saddlebrown;
}

.btn-mediumorchid {
  color: white;
  background-color: mediumorchid;
}

.btn-navajowhite {
  color: black;
  background-color: navajowhite;
}

.btn-lightblue {
  color: black;
  background-color: lightblue;
}

.btn-greenyellow {
  color: white;
  background-color: greenyellow;
}

.btn-maroon {
  color: white;
  background-color: maroon;
}

.btn-darkorchid {
  color: white;
  background-color: darkorchid;
}

.btn-peachpuff {
  color: black;
  background-color: peachpuff;
}

.btn-powderblue {
  color: black;
  background-color: powderblue;
}

.btn-lime {
  color: white;
  background-color: lime;
}

.btn-darkred {
  color: white;
  background-color: darkred;
}

.btn-darkviolet {
  color: white;
  background-color: darkviolet;
}

.btn-mistyrose {
  color: black;
  background-color: mistyrose;
}

.btn-paleturquoise {
  color: black;
  background-color: paleturquoise;
}

.btn-limegreen {
  color: white;
  background-color: limegreen;
}

.btn-brown {
  color: white;
  background-color: brown;
}

.btn-darkmagenta {
  color: white;
  background-color: darkmagenta;
}

.btn-lavenderblush {
  color: black;
  background-color: lavenderblush;
}

.btn-lightcyan {
  color: black;
  background-color: lightcyan;
}

.btn-yellowgreen {
  color: white;
  background-color: yellowgreen;
}

.btn-firebrick {
  color: white;
  background-color: firebrick;
}

.btn-purple {
  color: white;
  background-color: purple;
}

.btn-seashell {
  color: black;
  background-color: seashell;
}

.btn-cyan {
  color: white;
  background-color: cyan;
}

.btn-olivedrab {
  color: white;
  background-color: olivedrab;
}

.btn-indianred {
  color: white;
  background-color: indianred;
}

.btn-indigo {
  color: white;
  background-color: indigo;
}

.btn-oldlace {
  color: black;
  background-color: oldlace;
}

.btn-aqua {
  color: white;
  background-color: aqua;
}

.btn-olive {
  color: white;
  background-color: olive;
}

.btn-rosybrown {
  color: white;
  background-color: rosybrown;
}

.btn-darkslateblue {
  color: white;
  background-color: darkslateblue;
}

.btn-ivory {
  color: black;
  background-color: ivory;
}

.btn-turquoise {
  color: black;
  background-color: turquoise;
}

.btn-darkkhaki {
  color: white;
  background-color: darkkhaki;
}

.btn-darksalmon {
  color: white;
  background-color: darksalmon;
}

.btn-blueviolet {
  color: white;
  background-color: blueviolet;
}

.btn-honeydew {
  color: black;
  background-color: honeydew;
}

.btn-mediumturquoise {
  color: black;
  background-color: mediumturquoise;
}

.btn-palegoldenrod {
  color: black;
  background-color: palegoldenrod;
}

.btn-lightcoral {
  color: white;
  background-color: lightcoral;
}

.btn-mediumpurple {
  color: white;
  background-color: mediumpurple;
}

.btn-mintcream {
  color: black;
  background-color: mintcream;
}

.btn-darkturquoise {
  color: black;
  background-color: darkturquoise;
}

.btn-cornsilk {
  color: black;
  background-color: cornsilk;
}

.btn-salmon {
  color: white;
  background-color: salmon;
}

.btn-slateblue {
  color: white;
  background-color: slateblue;
}

.btn-azure {
  color: black;
  background-color: azure;
}

.btn-lightseagreen {
  color: white;
  background-color: lightseagreen;
}

.btn-beige {
  color: black;
  background-color: beige;
}

.btn-lightsalmon {
  color: white;
  background-color: lightsalmon;
}

.btn-mediumslateblue {
  color: white;
  background-color: mediumslateblue;
}

.btn-rhodaminered {
  color: white;
  background-color: #d10572;
}

.btn-marineblue {
  color: white;
  background-color: #00477D;
}

.btn-pms534 {
  color: white;
  background-color: #3a4972;
}

.btn-pms540 {
  color: white;
  background-color: #00335b;
}

.btn-pms732 {
  color: white;
  background-color: #60330a;
}

.btn-pms1905 {
  color: black;
  background-color: #fc9bb2;
}

.btn-pms1915 {
  color: white;
  background-color: #f4547c;
}

.btn-black7 {
  color: white;
  background-color: #443d38;
}

.btn-black:hover {
  color: black;
  background-color: white;
  border-color: black;
}

.btn-aliceblue:hover {
  color: black;
  background-color: #d3eaff;
}

.btn-cadetblue:hover {
  color: white;
  background-color: #497e80;
}

.btn-lightyellow:hover {
  color: black;
  background-color: #f1f1bd;
}

.btn-coral:hover {
  color: white;
  background-color: #ff6d37;
}

.btn-dimgray:hover {
  color: white;
  background-color: #4a4a4a;
}

.btn-lavender:hover {
  color: white;
  background-color: #d0d0f5;
}

.btn-darkcyan:hover {
  color: white;
  background-color: #007171;
}

.btn-lightgoldenrodyellow:hover {
  color: black;
  background-color: #f5f5b3;
}

.btn-tomato:hover {
  color: white;
  background-color: #f54d2f;
}

.btn-gray:hover {
  color: white;
  background-color: dimgray;
}

.btn-lightslategray:hover {
  color: white;
  background-color: #5e6e7d;
}

.btn-teal:hover {
  color: white;
  background-color: #005f5f;
}

.btn-lemonchiffon:hover {
  color: black;
  background-color: #fff39e;
}

.btn-orangered:hover {
  color: white;
  background-color: #e03d00;
}

.btn-darkgray:hover {
  color: white;
  background-color: gray;
}

.btn-slategray:hover {
  color: white;
  background-color: #556371;
}

.btn-seagreen:hover {
  color: white;
  background-color: #217144;
}

.btn-wheat:hover {
  color: black;
  background-color: #f5d497;
}

.btn-red:hover {
  color: white;
  background-color: #ca0000;
}

.btn-silver:hover {
  color: white;
  background-color: darkgray;
}

.btn-darkslategray:hover {
  color: white;
  background-color: #1f3535;
}

.btn-darkolivegreen:hover {
  color: white;
  background-color: #3f5021;
}

.btn-burlywood:hover {
  color: white;
  background-color: #ca9f67;
}

.btn-crimson:hover {
  color: white;
  background-color: #c1072d;
}

.btn-lightgrey:hover {
  color: black;
  background-color: silver;
}

.btn-lightsteelblue:hover {
  color: black;
  background-color: #90a9ca;
}

.btn-darkgreen:hover {
  color: white;
  background-color: #004800;
}

.btn-tan:hover {
  color: black;
  background-color: #b7986e;
}

.btn-mediumvioletred:hover {
  color: white;
  background-color: #b50072;
}

.btn-gainsboro:hover {
  color: black;
  background-color: #d3d3d3;
}

.btn-steelblue:hover {
  color: white;
  background-color: #336d9c;
}

.btn-green:hover {
  color: white;
  background-color: #006300;
}

.btn-khaki:hover {
  color: black;
  background-color: #e8db63;
}

.btn-deeppink:hover {
  color: white;
  background-color: #de0078;
}

.btn-white:hover {
  color: white;
  background-color: black;
  border-color: white;
}

.btn-royalblue:hover {
  color: white;
  background-color: #3052b5;
}

.btn-forestgreen:hover {
  color: white;
  background-color: #167516;
}

.btn-yellow:hover {
  color: black;
  background-color: gold;
}

.btn-hotpink:hover {
  color: white;
  background-color: #ec4b9c;
}

.btn-snow:hover {
  color: black;
  background-color: #efe5e5;
}

.btn-midnightblue:hover {
  color: white;
  background-color: #1b1b5d;
}

.btn-mediumseagreen:hover {
  color: white;
  background-color: #2a9058;
}

.btn-gold:hover {
  color: black;
  background-color: #ffb100;
}

.btn-palevioletred:hover {
  color: white;
  background-color: #d4537d;
}

.btn-ghostwhite:hover {
  color: black;
  background-color: #e5e5f1;
}

.btn-navy:hover {
  color: white;
  background-color: #080869;
}

.btn-darkseagreen:hover {
  color: white;
  background-color: #71a071;
}

.btn-orange:hover {
  color: white;
  background-color: darkorange;
}

.btn-pink:hover {
  color: black;
  background-color: #ffa7b6;
}

.btn-whitesmoke:hover {
  color: black;
  background-color: #e6e1e1;
}

.btn-darkblue:hover {
  color: white;
  background-color: #0b1f67;
}

.btn-mediumaquamarine:hover {
  color: white;
  background-color: #4cb793;
}

.btn-sandybrown:hover {
  color: white;
  background-color: #de904e;
}

.btn-lightpink:hover {
  color: black;
  background-color: #ff9ead;
}

.btn-floralwhite:hover {
  color: black;
  background-color: #efe5d1;
}

.btn-mediumblue:hover {
  color: white;
  background-color: #0815b1;
}

.btn-aquamarine:hover {
  color: white;
  background-color: #6edeb8;
}

.btn-darkorange:hover {
  color: white;
  background-color: #f17a00;
}

.btn-thistle:hover {
  color: black;
  background-color: #d6aed6;
}

.btn-linen:hover {
  color: black;
  background-color: #efdac5;
}

.btn-blue:hover {
  color: white;
  background-color: #0243d6;
}

.btn-palegreen:hover {
  color: white;
  background-color: #81e281;
}

.btn-goldenrod:hover {
  color: white;
  background-color: #ce8416;
}

.btn-magenta:hover {
  color: white;
  background-color: #d208d2;
}

.btn-antiquewhite:hover {
  color: black;
  background-color: #ead7bd;
}

.btn-dodgerblue:hover {
  color: white;
  background-color: #107ae0;
}

.btn-lightgreen:hover {
  color: white;
  background-color: #71cc71;
}

.btn-peru:hover {
  color: white;
  background-color: #bd7228;
}

.btn-fuchsia:hover {
  color: white;
  background-color: #e000e0;
}

.btn-papayawhip:hover {
  color: black;
  background-color: #e6d2b0;
}

.btn-cornflowerblue:hover {
  color: white;
  background-color: #4f80d8;
}

.btn-springgreen:hover {
  color: white;
  background-color: #06d06b;
}

.btn-darkgoldenrod:hover {
  color: white;
  background-color: #a96500;
}

.btn-violet:hover {
  color: white;
  background-color: #de6bde;
}

.btn-blanchedalmond:hover {
  color: black;
  background-color: #f7d8a9;
}

.btn-deepskyblue:hover {
  color: white;
  background-color: #00a6de;
}

.btn-mediumspringgreen:hover {
  color: white;
  background-color: #06d686;
}

.btn-chocolate:hover {
  color: white;
  background-color: #b55714;
}

.btn-plum:hover {
  color: black;
  background-color: #c380c3;
}

.btn-bisque:hover {
  color: black;
  background-color: #e2c39d;
}

.btn-lightskyblue:hover {
  color: black;
  background-color: #69b4e2;
}

.btn-lawngreen:hover {
  color: white;
  background-color: #68d004;
}

.btn-sienna:hover {
  color: white;
  background-color: #823e1e;
}

.btn-orchid:hover {
  color: white;
  background-color: #bf58bb;
}

.btn-moccasin:hover {
  color: black;
  background-color: #e6c894;
}

.btn-skyblue:hover {
  color: black;
  background-color: #6b4d2e;
}

.btn-chartreuse:hover {
  color: white;
  background-color: #6cd009;
}

.btn-saddlebrown:hover {
  color: white;
  background-color: #6d360f;
}

.btn-mediumorchid:hover {
  color: white;
  background-color: #9f46b5;
}

.btn-navajowhite:hover {
  color: black;
  background-color: #e2c08e;
}

.btn-lightblue:hover {
  color: black;
  background-color: #94cadc;
}

.btn-greenyellow:hover {
  color: white;
  background-color: #93de1f;
}

.btn-maroon:hover {
  color: white;
  background-color: #5d0404;
}

.btn-darkorchid:hover {
  color: white;
  background-color: #7c27a7;
}

.btn-peachpuff:hover {
  color: black;
  background-color: #e4be9b;
}

.btn-powderblue:hover {
  color: black;
  background-color: #8fc9d0;
}

.btn-lime:hover {
  color: white;
  background-color: #06d406;
}

.btn-darkred:hover {
  color: white;
  background-color: #6d0000;
}

.btn-darkviolet:hover {
  color: white;
  background-color: #7c00b1;
}

.btn-mistyrose:hover {
  color: black;
  background-color: #e8c6c2;
}

.btn-paleturquoise:hover {
  color: black;
  background-color: #8ed0d0;
}

.btn-limegreen:hover {
  color: white;
  background-color: #2caf2c;
}

.btn-brown:hover {
  color: white;
  background-color: #881e1e;
}

.btn-darkmagenta:hover {
  color: white;
  background-color: #650165;
}

.btn-lavenderblush:hover {
  color: black;
  background-color: #eacfd8;
}

.btn-lightcyan:hover {
  color: black;
  background-color: #b8e8e8;
}

.btn-yellowgreen:hover {
  color: white;
  background-color: #84b71d;
}

.btn-firebrick:hover {
  color: white;
  background-color: #9a1717;
}

.btn-purple:hover {
  color: white;
  background-color: #630063;
}

.btn-seashell:hover {
  color: black;
  background-color: #ead8cb;
}

.btn-cyan:hover {
  color: white;
  background-color: #00d8d8;
}

.btn-olivedrab:hover {
  color: white;
  background-color: #57751a;
}

.btn-indianred:hover {
  color: white;
  background-color: #b74a4a;
}

.btn-indigo:hover {
  color: white;
  background-color: #320454;
}

.btn-oldlace:hover {
  color: black;
  background-color: #eadec7;
}

.btn-aqua:hover {
  color: white;
  background-color: #00d6d6;
}

.btn-olive:hover {
  color: white;
  background-color: #676700;
}

.btn-rosybrown:hover {
  color: white;
  background-color: #a77676;
}

.btn-darkslateblue:hover {
  color: white;
  background-color: #3a3171;
}

.btn-ivory:hover {
  color: black;
  background-color: #e8e8ca;
}

.btn-turquoise:hover {
  color: black;
  background-color: #32c1b3;
}

.btn-darkkhaki:hover {
  color: white;
  background-color: #a29d58;
}

.btn-darksalmon:hover {
  color: white;
  background-color: #d07d62;
}

.btn-blueviolet:hover {
  color: white;
  background-color: #7824c5;
}

.btn-honeydew:hover {
  color: black;
  background-color: #d0e8d0;
}

.btn-mediumturquoise:hover {
  color: black;
  background-color: #38b9b4;
}

.btn-palegoldenrod:hover {
  color: black;
  background-color: #d8d18d;
}

.btn-lightcoral:hover {
  color: white;
  background-color: #e27171;
}

.btn-mediumpurple:hover {
  color: white;
  background-color: #8160c3;
}

.btn-mintcream:hover {
  color: black;
  background-color: #d4e8de;
}

.btn-darkturquoise:hover {
  color: black;
  background-color: #00b0b3;
}

.btn-cornsilk:hover {
  color: black;
  background-color: #eae1bb;
}

.btn-salmon:hover {
  color: white;
  background-color: #e66f61;
}

.btn-slateblue:hover {
  color: white;
  background-color: #5345ab;
}

.btn-azure :hover {
  color: black;
  background-color: #d0e8e8;
}

.btn-lightseagreen:hover {
  color: white;
  background-color: #199e97;
}

.btn-beige:hover {
  color: black;
  background-color: #dedec0;
}

.btn-lightsalmon:hover {
  color: white;
  background-color: #e88158;
}

.btn-mediumslateblue:hover {
  color: white;
  background-color: #6353c7;
}

.btn-rhodaminered:hover {
  color: white;
  background-color: #a9005a;
}

.btn-marineblue:hover {
  color: white;
  background-color: #00345a;
}

.btn-pms534:hover {
  color: white;
  background-color: #2c3856;
}

.btn-pms540:hover {
  color: white;
  background-color: #00213c;
}

.btn-pms732:hover {
  color: white;
  background-color: #462508;
}

.btn-pms1905:hover {
  color: black;
  background-color: #ff7e9d;
}

.btn-pms1915:hover {
  color: white;
  background-color: #de446b;
}

.btn-black7:hover {
  color: white;
  background-color: black;
}

/* 登入頁樣式 */
a {
  color: #368CAD;
}

.shadow-lg {
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
}

.bg-indexlogin .bg-black {
  background-color: rgba(0, 0, 0, 0.1);
  height: 100%;
}
.bg-indexlogin .text-50 {
  font-size: 40px;
}
.bg-indexlogin .form-group input {
  color: dimgray;
  border: 0px;
  border-bottom: 1px solid black;
  border-radius: 0px;
  background-color: rgba(0, 0, 0, 0);
}
.bg-indexlogin .form-group input::-webkit-input-placeholder {
  color: gray;
}
.bg-indexlogin .form-check-label {
  color: gray;
}

.btn-w100 {
  width: 100%;
}

.btn-login {
  color: white;
  background-color: #368CAD;
  -webkit-transition: 0.8s;
  transition: 0.8s;
}

.btn-login:hover {
  color: white;
  background-color: #226E8B;
}

.bg-nav {
  background-color: #AFD3E1;
}

.dashboard {
  border: 1px solid lightgray;
  border-radius: 10px;
  -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
          box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  margin-top: 5%;
}
@media (max-width: 1399px) {
  .dashboard {
    margin-top: 5%;
  }
}

.btn-test {
  color: white;
  background-color: #368CAD;
  border-radius: 20px;
}

.btn-test:hover {
  color: white;
  background-color: #226E8B;
}

.btn-gotest {
  color: white;
  background-color: #368CAD;
  border-radius: 20px;
}

.btn-gotest:hover {
  color: white;
  background-color: #226E8B;
}

.btn-gopractice {
  color: white;
  background-color: #4EAD36;
  border-radius: 20px;
}

.btn-gopractice:hover {
  color: white;
  background-color: #3A8924;
}

.infinite-animate {
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
}

.nav-tabs .nav-item {
  background-color: #DFDFDF;
}
.nav-tabs .nav-item a {
  color: black;
}

table {
  width: 100% !important;
}
table thead {
  background-color: #AFD3E1;
  white-space: nowrap;
}

main table {
  text-align: center;
}

.exam-selectanswer table {
  word-break: break-all;
}
.exam-selectanswer table td {
  padding-top: 10px;
  padding-bottom: 10px;
}
.exam-selectanswer table .vat {
  vertical-align: top;
  width:18px;
}

.page-item a {
  color: black;
}

.page-item.active .page-link {
  color: black;
  background-color: #AFD3E1;
  border-color: #AFD3E1;
}

.textdate {
  text-align: right;
}

.boardoverflow {
  max-height: 300px;
  overflow: scroll;
}

.fa-calculator {
  color: #2F87AA;
  font-size: 30px;
}

.test-fontsize {
  border: 0px solid rgba(0, 0, 0, 0);
  background-color: rgba(0, 0, 0, 0);
}

.test-fontsize-s {
  font-size: 12px;
}

.test-fontsize-m {
  font-size: 14px;
}

.test-fontsize-l {
  font-size: 16px;
}

.test-fontsize-xl {
  font-size: 20px;
}

.btn-hide {
  border: 1px solid black;
  border-radius: 30px;
  padding: 3px 20px;
  margin-top: 5px;
}

.navinterface {
  border-bottom: 3px solid #368CAD;
}

.bd-sidebar {
  grid-area: sidebar;
}

.bd-link {
  position: sticky;
  top: 7rem;
  display: block;
  height: calc(100vh - 7rem);
  overflow-y: scroll;
}

.answertitle {
  padding-top: 5px;
  padding-bottom: 5px;
  background-color: #F3F3F3;
  border-bottom: 2px solid #368CAD;
}
.answertitle .question-number {
  background-color: #368CAD;
  color: white;
  padding-top: 10px;
  padding-bottom: 10px;
}

.btn-secondary {
  color: black;
  background-color: white;
  border-color: #51585e;
  border-radius: 50px;
  width: 50px;
  height: 50px;
  padding-top: 12px;
}

.btn-check:focus.btn-secondary:focus {
  -webkit-box-shadow: 0 0 0 0.25rem #368CAD;
          box-shadow: 0 0 0 0.25rem #368CAD;
}

.divcalculator {
  position: fixed;
  z-index: 999;
  top: 40%;
  right: 0px;
  display: none;
}
@media (max-width: 1399px) {
  .divcalculator {
    top: 30%;
  }
}
@media (max-width: 1199px) {
  .divcalculator {
    top: 25%;
  }
}
@media (max-width: 991px) {
  .divcalculator {
    top: 25%;
  }
}
@media (max-width: 767px) {
  .divcalculator {
    top: 25%;
  }
}
@media (max-width: 575px) {
  .divcalculator {
    top: 20%;
  }
}

.divnote {
  position: fixed;
  z-index: 999;
  top: 15%;
  right: 0px;
  display: none;
  width: 300px;
  height: 250px;
  background-color: whitesmoke;
  border: 1px solid darkgray;
  padding: 10px 20px;
}
@media (max-width: 1399px) {
  .divnote {
    top: 15%;
  }
}

.animate__bounceInRight {
  display: block;
}

.visibilitytime {
  visibility: hidden;
}

.markcolor {
  color: red;
}

.questionlist .modal {
  top: 50%;
}
@media (max-width: 1399px) {
  .questionlist .modal {
    top: 38%;
  }
}
.questionlist .modal-header {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.questionlist .modal-body i {
  margin-right: 5px;
}
.questionlist .modal-body .fa-bookmark {
  color: red;
}
.questionlist .modal-footer {
  -ms-flex-pack: distribute;
      justify-content: space-around;
}
.questionlist .modal-footer .selectquestion {
  width: 40px;
  height: 40px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  position: relative;
  border: 1px dashed black;
  border-radius: 5px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.questionlist .modal-footer .selectquestion a {
  color: black;
}
.questionlist .modal-footer .selectquestion a .fa-square-dashed {
  font-size: 20px;
}
.questionlist .modal-footer .mark {
  background-color: white;
}
.questionlist .modal-footer .answered {
  background-color: #368CAD;
}
.questionlist .modal-footer .wrong {
  background-color: firebrick;
}
.questionlist .modal-footer .wrong a {
  color: white;
}
.questionlist .modal-footer .mark a::before {
  content: "\f02e";
  color: red;
  font-family: "Font Awesome 6 Pro";
  font-weight: 900;
  position: absolute;
  top: -8px;
  left: 25px;
}
.questionlist .modal-footer .current a::after {
  content: "\f3c5";
  color: black;
  font-family: "Font Awesome 6 Pro";
  font-weight: 900;
  font-size: 20px;
  position: absolute;
  top: -23px;
  left: 12px;
}

.exam .modal-backdrop.show {
  opacity: 0.2;
}

.takeabreak {
  background-color: #2B2B2B;
  color: white;
}

.timeborder {
  border: 1px solid white;
  padding: 10px 20px;
}

.inner, .bg-float {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100vh;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.testend-title {
  color: #368CAD;
}

/*以下為練習自選難易度時下方選擇預設隱藏*/
.referral-none {
  display: none;
}

.referral-show {
  display: block;
}

.setupconfirm {
  display: block;
}

/*以下為測驗結果分數圓環圖*/
.donutchart[role=img][aria-label] {
  background-color: #f0f0f0;
  border-radius: 180px;
  height: 180px;
  width: 180px;
  position: relative;
}

.assessment__results .donutchart {
  min-width: 180px;
}

.donutchart__slice:first-child {
  clip: rect(0, 180px, 180px, 90px);
}

.donutchart__slice {
  height: 180px;
  width: 180px;
  position: absolute;
  left: 0;
}

.donutchart[data-value="94"] .donutchart__slice:first-child:after {
  -webkit-transform: rotate(0.5turn);
          transform: rotate(0.5turn); /*右半圈*/
}

.donutchart__slice:first-child:after {
  border-radius: 180px 0 0 180px;
  -webkit-transform-origin: right center;
          transform-origin: right center;
}

.donutchart--success .donutchart__slice:after {
  background-color: #0E9657; /*圈顏色，及格為#0E9657，不及格為red*/
}

.donutchart__slice:after {
  content: "";
  display: block;
  height: 180px;
  width: 180px;
}

.donutchart__slice:nth-child(2) {
  clip: rect(0, 90px, 180px, 0);
}

.donutchart[data-value="94"] .donutchart__slice:nth-child(2):after {
  -webkit-transform: rotate(0.44turn);
          transform: rotate(0.44turn); /*左半圈*/
}

.donutchart__slice:nth-child(2):after {
  border-radius: 0 180px 180px 0;
  left: 90px;
  position: relative;
  -webkit-transform-origin: left center;
          transform-origin: left center;
}

.donutchart--success .donutchart__slice:after {
  background-color: #0E9657; /*圈顏色，及格為#0E9657，不及格為red*/
}

.donutchart__slice:after {
  content: "";
  display: block;
  height: 180px;
  width: 90px;
}

.donutchart__center {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-color: white;
  border-radius: 130px;
  font-size: 11px;
  font-weight: 500;
  height: 130px;
  width: 130px;
  left: 25px;
  letter-spacing: 1px;
  line-height: 60px;
  position: absolute;
  text-transform: uppercase;
  top: 25px;
}

.donutchart[data-value="94"] .donutchart__center:before {
  content: "94";
}

.donutchart__center:before {
  font-size: 48px;
  font-weight: 500;
}

.donutchart .donutchart__center:after {
  content: "%";
}

.donutchart__center:after {
  position: relative;
  top: -10px;
  left: 2px;
  font-size: 28px;
  line-height: 28px;
  font-weight: 500;
}

/*以下為測驗檢查答對綠色、答錯紅色*/
.text-success label.btn {
  color: white;
  border-color: #198754;
  background-color: #198754;
}

.text-danger label.btn {
  color: white;
  border-color: red;
  background-color: red;
}

.col-left {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 50%;
}

.col-right {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 50%;
}

.exam-content .col-left, .exam-content .col-right {
  padding-top: 120px;
}
@media (max-width: 991px) {
  .exam-content .col-left, .exam-content .col-right {
    padding-top: 250px;
  }
}

.text-firebrick {
  color: firebrick;
}

@media (max-width: 1199px) {
  .fixed-bottom .btn-black {
    font-size: 12px;
    white-space: nowrap;
  }
}
@media (max-width: 991px) {
  .fixed-bottom .btn-black {
    font-size: 10px;
    white-space: nowrap;
  }
}
@media (max-width: 767px) {
  .fixed-bottom .btn-black {
    font-size: 12px;
  }
}
@media (max-width: 575px) {
  .fixed-bottom .btn-black {
    font-size: 12px;
  }
}
.fixed-bottom a.btn {
  font-size: 14px;
}
@media (max-width: 1199px) {
  .fixed-bottom a.btn {
    font-size: 12px;
  }
}
@media (max-width: 991px) {
  .fixed-bottom a.btn {
    font-size: 12px;
  }
}
@media (max-width: 767px) {
  .fixed-bottom a.btn {
    font-size: 12px;
  }
}
@media (max-width: 575px) {
  .fixed-bottom a.btn {
    font-size: 12px;
  }
}