@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@200..900&display=swap");
html, body, header, footer, menu, nav, aside, main, article, div, span, h1, h2, h3, h4, h5, h6, p, a, ul, ol, li, hr, img, input, button, textarea, select, option, form, label, table, tr, td, th, progress {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
  color: inherit;
  font-family: "Noto Serif TC";
  font-weight: 600;
}

h1, h2, h3, h4 {
  font-weight: 700;
}

port-content img {
  vertical-align: middle;
}

:root {
  --mainFont: "Noto Serif TC";
  --lightWhiteColor: #FFFFFF;
  --lightWhiteAlpha: #FFFFFF55;
  --BackBlackColor: #1B1B1B;
  --BackColorAlpha: #00000040;
  --Gray01: #DBDBDB;
  --Gray02: #A3A3A3;
  --Gray03: #626262;
  --Gray04: #313131;
  --Gray05: #1B1B1B;
  --Apricot01: #E7DBBB;
  --Apricot02: #D5BC7A;
  --Apricot03: #B99E58;
  --Orange03: #E76D65;
  --Chocolate01: #C0580C;
  --Gold03: #FFC53D;
  --Gold04: #FAAD14;
  --Red02: #EE7BA1;
  --Red03: #D94F7D;
  --Red04: #BE0A46;
  --Teal03: #3DCCB2;
  --Purple03: #CD7BF4;
  --Pink01: #D94F7D;
  --Blue01: #D7EDFD;
  --Blue03: #6AB1E5;
  --Green03: #93D85D;
  --Brown: #C49D78;
  --AlphaChocolate01: #C0580C00;
  --AlphaPink01: #D94F7D00;
  --AlphaApricot01: #E7DBBB00;
  --teachGradient: linear-gradient(90deg, #D94F7D, #9747FF);
  --transition: all 800ms ease;
  --maxWidth: 831px;
  --gradientChocolate01: radial-gradient(var(--Chocolate01), var(--AlphaChocolate01) 60%);
  --gradientPink01: radial-gradient(var(--Pink01), var(--AlphaPink01) 60%);
  --gradientApricot01: radial-gradient(var(--Apricot03), var(--AlphaApricot01) 60%);
}

.flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

.flex.flex-start {
  justify-content: flex-start !important;
}

.phone-none {
  display: none;
}

*[class^=main-btn] {
  width: 100%;
  display: inline-block;
  background-color: var(--Gray04);
  line-height: 3.6em;
  text-align: center;
  font-size: 15px;
  font-weight: bold;
  color: white;
}

.btn-radius {
  border-radius: 10px;
}

.box-radius {
  border-radius: 8px;
}

.box-radius-50 {
  border-radius: 50%;
}

.btn-span {
  background-image: var(--teachGradient);
  color: var(--lightWhiteColor);
  padding: 1em 2.5em;
  border-radius: 16px;
  display: inline-block;
}

.main-btn-Apricot {
  background-color: var(--Apricot03);
}

.main-btn-red {
  width: 133px;
  background-color: var(--Red03);
}

.main-btn-gradient {
  width: 160px;
  background-color: transparent;
  background-image: var(--teachGradient);
  color: var(--lightWhiteColor);
}

.main-btn-red:hover {
  box-shadow: 4px 4px 0 var(--BackBlackColor), 5px 5px 0 var(--Red04);
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-justify {
  text-align: justify;
}

.text-weight-black {
  font-weight: 900;
}

.text-white {
  color: var(--lightWhiteColor);
}

.text-gray-02 {
  color: var(--Gray02);
}

.text-purple-03 {
  color: var(--Purple03);
}

.text-gold-03 {
  color: var(--Gold03);
}

.text-gold-04 {
  color: var(--Gold04);
}

.text-green-03 {
  color: var(--Green03);
}

.text-blue-03 {
  color: var(--Blue03);
}

.text-teal-03 {
  color: var(--Teal03);
}

.text-red-02 {
  color: var(--Red02);
}

.text-Apricot-01 {
  color: var(--Apricot01);
}

.text-Apricot-02 {
  color: var(--Apricot02);
}

.text-line::after {
  display: inline;
  width: 100%;
  height: 16px;
  content: "";
  background-image: var(--teachGradient);
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: -1;
}

.text-line.w30 {
  width: 30%;
  margin: auto;
}

.text-line.w40 {
  width: 40%;
  margin: auto;
}

.text-line.w50 {
  width: 50%;
  margin: auto;
}

.text-line.w60 {
  width: 60%;
  margin: auto;
}

.text-line.w80 {
  width: 80%;
  margin: auto;
}

.bg-white-blur {
  background-color: var(--lightWhiteAlpha);
  backdrop-filter: blur(5px);
}

.bg-white {
  background-color: var(--lightWhiteColor);
}

.bg-apricot {
  background-color: var(--Apricot03);
}

.w100 {
  width: 100%;
  color: var(--Apricot01);
  letter-spacing: 10px;
  padding: 2em 1em;
}

.fs-small {
  font-size: 13px;
}

/* 背景圓球設定 */
*[class^=ball] {
  backdrop-filter: blur(15px);
  border-radius: 50%;
  position: absolute;
  z-index: -1;
  opacity: 0.3;
  box-shadow: 0 0 50px rgba(255, 255, 255, 0.2);
}

.ball-xl {
  width: 450px;
  height: 450px;
}

.ball-lg {
  width: 360px;
  height: 360px;
}

.ball-md {
  width: 250px;
  height: 250px;
}

.ball-footer {
  width: 1430px;
  height: 500px;
  background-image: radial-gradient(#B99E58, rgba(255, 255, 255, 0.5333333333), rgba(255, 255, 255, 0.0196078431) 85%);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
  bottom: -320px;
  left: calc(50% - 715px);
}

.bg-orange {
  background-image: radial-gradient(#E76D65 30%, rgba(255, 255, 255, 0.2078431373), rgba(255, 255, 255, 0.0196078431) 85%);
}

.bg-red {
  background-image: radial-gradient(#D94F7D 30%, rgba(255, 255, 255, 0.2078431373), rgba(255, 255, 255, 0.0196078431) 85%);
}

.bg-gold {
  background-image: radial-gradient(#FFC53D 30%, rgba(255, 255, 255, 0.2078431373), rgba(255, 255, 255, 0.0196078431) 85%);
}

.bg-teal {
  background-image: radial-gradient(#3DCCB2 30%, rgba(255, 255, 255, 0.2078431373), rgba(255, 255, 255, 0.0196078431) 85%);
}

.bg-purple {
  background-image: radial-gradient(#CD7BF4 30%, rgba(255, 255, 255, 0.2078431373), rgba(255, 255, 255, 0.0196078431) 85%);
}

.bg-blue {
  background-image: radial-gradient(#6AB1E5 30%, rgba(255, 255, 255, 0.2078431373), rgba(255, 255, 255, 0.0196078431) 85%);
}

.bg-green {
  background-image: radial-gradient(#93D75D 30%, rgba(255, 255, 255, 0.2078431373), rgba(255, 255, 255, 0.0196078431) 85%);
}

.pos-top-80 {
  top: calc(56.25vw - 10vh);
}

.pos-top-300vh {
  top: 300vh;
}

.pos-top-200vh {
  top: 200vh;
}

.pos-top-150vh {
  top: 150vh;
}

.pos-top-100vh {
  top: 100vh;
}

.pos-top-75vh {
  top: 75vh;
}

.pos-top-0 {
  top: 80px;
}

.pos-left-f55 {
  left: -180px;
}

.pos-right-50 {
  right: -180px;
}

html, body {
  width: 100%;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  background-color: var(--BackBlackColor);
  position: relative;
}

/* ===== 首頁設計 ===== */
/* Header Design */
header + main, header + div {
  margin-top: 50px;
}

header {
  width: 100%;
  height: 50px;
  background-color: var(--BackColorAlpha);
  backdrop-filter: blur(20px);
  position: fixed;
  top: 0;
  box-shadow: 0 4px 4px var(--BackColorAlpha);
  z-index: 50;
  font-family: var(--mainFont);
}
header #logo {
  display: block;
  width: 100%;
  line-height: 50px;
  padding: 0 20px;
}
header #logo img {
  height: 40px;
}
header #logo img:hover {
  opacity: 0.8;
}
header menu {
  width: 100%;
  height: 428px;
  font-size: 17px;
  line-height: 3.375rem;
  color: white;
  background-color: var(--Gray04);
  display: flex;
  align-items: center;
  overflow: hidden;
  transition: var(--transition);
}
header menu ul {
  width: 100%;
  text-align: center;
}
header menu ul li a {
  display: block;
  transition: var(--transition);
  font-weight: bold;
}
header menu ul li:nth-of-type(1):hover a {
  color: var(--Red03);
}
header menu ul li:nth-of-type(2):hover a {
  color: var(--Gold04);
}
header menu ul li:nth-of-type(3):hover a {
  color: var(--Orange03);
}
header menu ul li:nth-of-type(4):hover a {
  color: var(--Teal03);
}
header menu ul li:nth-of-type(5):hover a {
  color: var(--Purple03);
}
header menu ul li:nth-of-type(6):hover a {
  color: var(--Blue03);
}
header menu ul li:nth-of-type(7):hover a {
  color: var(--Green03);
}
header menu ul li:nth-of-type(8):hover a {
  color: var(--Brown);
}
header menu ul li:nth-of-type(1).action a {
  color: var(--Red03);
}
header menu ul li:nth-of-type(2).action a {
  color: var(--Gold04);
}
header menu ul li:nth-of-type(3).action a {
  color: var(--Orange03);
}
header menu ul li:nth-of-type(4).action a {
  color: var(--Teal03);
}
header menu ul li:nth-of-type(5).action a {
  color: var(--Purple03);
}
header menu ul li:nth-of-type(6).action a {
  color: var(--Blue03);
}
header menu ul li:nth-of-type(7).action a {
  color: var(--Green03);
}
header menu ul li:nth-of-type(8).action a {
  color: var(--Brown);
}
header menu.none {
  height: 0;
}
header nav {
  width: 34px;
  height: 28px;
  position: absolute;
  top: 11px;
  right: 20px;
}
header nav .bar {
  width: 100%;
  height: 4px;
  background-color: white;
  position: absolute;
  left: 0;
  transition: var(--transition);
}
header nav .bar:nth-of-type(1) {
  top: 0;
}
header nav .bar:nth-of-type(2) {
  top: 12px;
}
header nav .bar:nth-of-type(3) {
  top: 12px;
}
header nav .bar:nth-of-type(4) {
  bottom: 0;
}
header nav .bar:nth-of-type(1).none {
  opacity: 0;
}
header nav .bar:nth-of-type(2).none {
  transform: rotate(35deg);
}
header nav .bar:nth-of-type(3).none {
  transform: rotate(-35deg);
}
header nav .bar:nth-of-type(4).none {
  opacity: 0;
}

/* Slide Design */
#slide {
  width: 100%;
  height: 50.8905852417vw;
  overflow: hidden;
  position: relative;
}
#slide .float {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  transition: var(--transition);
}
#slide .float img {
  width: 100vw;
}
#slide .btn {
  position: absolute;
  top: calc(45% - 10px);
  color: var(--Gray03);
  z-index: 15;
  transition: var(--transition);
  cursor: pointer;
}
#slide #prev {
  left: 1.5em;
}
#slide #next {
  right: 1.5em;
}
#slide .slide-bar {
  width: 100% !important;
  position: absolute;
  bottom: 10px;
  left: 0;
  margin: auto;
  text-align: center;
  word-spacing: 3px;
  z-index: 10;
}
#slide .slide-bar input[type=radio] {
  width: 16px;
  height: 16px;
  margin: 0 2px;
  accent-color: var(--Chocolate01);
  border: none;
  transition: var(--transition);
}

/* Service Design */
#service {
  width: 100%;
  padding: 18px;
  font-family: var(--mainFont);
}
#service h2 {
  color: var(--Orange03);
  font-weight: 900;
  line-height: 72px;
}
#service .flex {
  background-size: cover;
  background-position: center;
  padding: 12px;
}
#service .flex .box {
  width: 100%;
  max-width: 353px;
  font-size: 13px;
  font-weight: 700;
  line-height: 200%;
  padding: 30px;
  margin: 11px 3px;
  border: 2px solid var(--Apricot03);
  background-color: rgba(255, 255, 255, 0.6509803922);
  backdrop-filter: blur(5px);
}
#service .flex .box p {
  margin: 12px auto 15px;
}
#service .flex > p {
  width: 100%;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.6em;
  text-align: center;
  color: white;
  margin: 20px auto;
}

/* Pc-Msg Design */
#pc-msg {
  width: 100%;
  min-height: 40vh;
  align-content: center;
  font-family: var(--mainFont);
}
#pc-msg h4 {
  width: 100%;
}
#pc-msg h4 .box {
  width: 250px;
  margin: auto;
  margin-bottom: 2em;
  line-height: 2em;
}
#pc-msg p {
  width: 190px;
  line-height: 2.2em;
  color: var(--Apricot02);
  padding: 0 1.2em;
  border-left: 1px solid var(--Apricot02);
}

/* Course Design */
#course {
  width: 100%;
  font-family: var(--mainFont);
}
#course .item {
  width: 100%;
  max-width: 831px;
  padding: 2em;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 100px auto 50px;
  position: relative;
}
#course .item .box {
  width: 100%;
  max-width: 600px;
  padding: 1.1em;
  color: white;
  font-size: 13px;
}
#course .item .box img {
  width: 100%;
}
#course .item .box h2 {
  width: 100%;
  line-height: 2em;
  color: var(--Red03);
  font-weight: 900;
  font-size: 1.7em;
}
#course .item .box p {
  padding: 1em 0;
  line-height: 1.6em;
}
#course .item .box p b {
  color: var(--Gold03);
}
#course .item .box p span::before {
  content: "｜";
  color: var(--lightWhiteColor);
}
#course .item .box p span::after {
  content: "｜";
  color: white;
}
#course .item .border-top {
  width: 179px;
  height: 127.5px;
  border-top: 2px solid var(--Red03);
  border-left: 2px solid var(--Red03);
  position: absolute;
  top: 10px;
  left: 20px;
}
#course .item .border-top::after {
  content: "";
  display: block;
  width: 112px;
  height: 156px;
  border-top: 1px solid var(--Red02);
  border-left: 1px solid var(--Red02);
  position: absolute;
  top: -7px;
  left: 7px;
}
#course .item .border-bottom {
  width: 240px;
  height: 82px;
  position: absolute;
  bottom: 0;
  right: 20px;
  border-right: 2px solid var(--Red03);
  border-bottom: 2px solid var(--Red03);
}
#course .item .border-bottom::after {
  content: "";
  display: block;
  width: 185px;
  height: 82px;
  border-right: 1px solid var(--Red02);
  border-bottom: 1px solid var(--Red02);
  position: absolute;
  right: 5px;
  bottom: -7px;
}

/* Contact Design */
#contact {
  width: 100%;
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  font-family: var(--mainFont);
}
#contact hr {
  width: 100%;
  margin: 2em auto;
  border: 1px solid var(--Apricot02);
}
#contact .box {
  width: 100%;
  line-height: 2em;
  padding: 1.5em 0;
}
#contact .box h4 {
  padding: 2em 0 0;
}
#contact .box ul {
  padding: 1em 2em 2em;
  color: var(--Apricot01);
  display: flex;
  justify-content: space-evenly;
  font-size: 2em;
}
#contact .box ul li a {
  vertical-align: middle;
}
#contact .box ul li a img {
  margin-top: -8px;
}
#contact .box ul li a:hover {
  color: var(--Apricot03);
}
#contact .box ul li a:hover img {
  filter: brightness(0.5) saturate(2);
}

/* Footer */
footer {
  width: 100%;
  height: 20em;
  line-height: 18em;
  color: var(--lightWhiteColor);
  text-align: center;
  font-size: 10px;
  position: relative;
  overflow: hidden;
  font-family: var(--mainFont);
}

/* Talk */
#talk {
  width: 60px;
  padding: 10px;
  position: fixed;
  right: 0;
  bottom: 20vh;
  z-index: 100;
}
#talk .box,
#talk .item {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-content: space-around;
}
#talk .item {
  height: 200px;
  transition: var(--transition);
  overflow: hidden;
}
#talk .item.close {
  height: 0px;
}
#talk .box {
  height: 110px;
}
#talk .box a,
#talk .item a {
  display: block;
  width: 40px;
  height: 40px;
  background-color: var(--Apricot02);
  color: white;
  text-align: center;
  line-height: 40px;
  font-size: 25px;
}

/* ===== 教學設計 ===== */
*[id^=teach] > .box {
  max-width: 520px;
  margin: auto;
}
*[id^=teach] > .box h2 {
  font-size: 22px;
}

/* Teach-Main Design */
#teach-main {
  width: 100%;
  padding: 80px 20px 0;
  color: var(--lightWhiteColor);
  font-family: var(--mainFont);
}
#teach-main .box h2 {
  line-height: 1.5em;
  position: relative;
  margin-bottom: 0.5em;
}
#teach-main .box h2.table {
  display: none;
}
#teach-main .box ol {
  line-height: 1.6em;
  list-style-position: inside;
  padding: 1em 1.5em 1em 2.5em;
}
#teach-main .box ol li {
  list-style-type: decimal;
  padding: 1em;
}

/* Teach-Course Design */
#teach-course {
  width: 100%;
  color: var(--lightWhiteColor);
  padding: 80px 20px 20px;
  font-family: var(--mainFont);
}
#teach-course .box h2 {
  position: relative;
  line-height: 1.5em;
  margin-bottom: 0.5em;
}
#teach-course .box .item {
  text-align: center;
  padding: 1em;
}
#teach-course .box .item img {
  width: 100%;
}

/* Teach-Student Design */
#teach-student {
  width: 100%;
  color: var(--lightWhiteColor);
  padding: 80px 20px 20px;
  font-family: var(--mainFont);
}
#teach-student .box h2 {
  position: relative;
  line-height: 1.5em;
  margin-bottom: 0.5em;
}
#teach-student .box .item {
  text-align: center;
  padding: 1em;
}
#teach-student .box .item img {
  width: 100%;
}

/* Teach-Designer Design */
#teach-designer {
  width: 100%;
  color: var(--lightWhiteColor);
  padding: 80px 20px 20px;
  font-family: var(--mainFont);
}
#teach-designer .box h2 {
  position: relative;
  line-height: 1.5em;
  margin-bottom: 0.5em;
}
#teach-designer .box .item {
  text-align: center;
  padding: 4em 1em;
}
#teach-designer .box .item img {
  width: 240px;
}
#teach-designer .box ul {
  line-height: 1.6em;
}
#teach-designer .box ul li {
  padding-bottom: 1.2em;
}

/* Teach-Strategy Design */
#teach-strategy {
  width: 100%;
  color: var(--lightWhiteColor);
  padding: 80px 20px 20px;
  font-family: var(--mainFont);
}
#teach-strategy .box h2 {
  position: relative;
  line-height: 1.6em;
  margin-bottom: 0.8em;
}
#teach-strategy .box .item {
  width: 100%;
  text-align: center;
  padding: 1em 1em;
}
#teach-strategy .box .item .card {
  width: 100%;
  max-width: 240px;
  margin: 1.2em auto;
}
#teach-strategy .box .item .card img {
  width: 100%;
}
#teach-strategy .box .item .card p {
  font-weight: bold;
  padding: 0.8em 0.5em;
  font-size: 15px;
  line-height: 1.6em;
  color: var(--Gray04);
  background-color: var(--Gray01);
}
#teach-strategy .box .item .card:nth-of-type(2n) p {
  color: var(--lightWhiteColor);
  background-color: var(--Gray03);
}

/* Teach-Msg Design */
#teach-msg {
  width: 100%;
  color: var(--lightWhiteColor);
  font-family: var(--mainFont);
}
#teach-msg .box {
  width: 100%;
  max-width: 360px;
  margin: auto;
}
#teach-msg .box p {
  font-size: 16px;
  line-height: 1.6em;
  padding: 2em 1em;
  font-weight: bold;
}
#teach-msg .box p:nth-of-type(2) {
  font-size: 20px;
  color: var(--Red02);
}
#teach-msg .box p:nth-of-type(3) {
  color: var(--Gold03);
}

/*===== 作品觀賞設計 =====*/
/* Prot-Title Design */
#port-title, #port-title-about {
  width: 100%;
  padding: 10px;
  color: var(--Orange03);
  align-items: center;
  justify-content: center;
  font-family: var(--mainFont);
}
#port-title .box, #port-title-about .box {
  width: 33.3333333333%;
  max-width: 6em;
  padding: 10px;
  position: relative;
}
#port-title .box img, #port-title-about .box img {
  width: 100%;
}
#port-title .box h2, #port-title-about .box h2 {
  width: 100%;
  height: 100%;
  font-size: 20px;
  font-weight: 900;
  text-align: center;
  line-height: 500%;
  position: absolute;
  left: 0;
  top: 0;
}
#port-title .box h3, #port-title-about .box h3 {
  width: 100%;
  height: 3em;
  line-height: 3em;
  font-size: 15px;
  text-align: left;
  position: absolute;
  top: -1.5em;
  left: 10px;
}
#port-title .box hr, #port-title-about .box hr {
  width: 100%;
  border: 1px solid var(--Orange03);
}

#port-title-about {
  color: var(--Gold04);
  font-family: var(--mainFont);
}
#port-title-about .box hr {
  border: 1px solid var(--Gold03);
}

/* Prot-Button Design */
#port-button {
  font-family: var(--mainFont);
}
#port-button .box {
  width: auto;
  max-width: 370px;
  margin: auto;
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
#port-button .box .pic-btn {
  width: 88px;
  height: 46px;
  line-height: 46px;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  color: var(--Orange03);
  background-color: var(--Gray05);
  border: 1px solid var(--Orange03);
  border-radius: 8px;
  margin: 10px;
  transition: var(--transition);
  cursor: pointer;
}
#port-button .box .pic-btn.active {
  background-color: var(--Orange03);
  color: var(--lightWhiteColor);
}

/* Prot-Content Design */
#port-content {
  width: 100%;
  font-family: var(--mainFont);
}
#port-content .box {
  width: 100%;
  height: 0;
  overflow: hidden;
  columns: 2;
  column-gap: 1px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  opacity: 0;
  transition: var(--transition);
}
#port-content .box .item {
  width: 100%;
  padding: 10px;
}
#port-content .box .item img {
  width: 100%;
}
#port-content .box.open {
  height: auto;
  overflow: auto;
  position: relative;
  z-index: 10;
  opacity: 1;
}

/*===== 改蓋刺青設計 =====*/
/* Revisions Design */
#revisions {
  width: 100%;
  padding: 0 20px;
  font-family: var(--mainFont);
}
#revisions .box {
  padding: 3em 0 1em;
  margin: auto;
  max-width: 580px;
}
#revisions .box h2 {
  line-height: 3em;
}
#revisions .box h3 {
  font-size: 15px;
  padding: 1.5em 0;
}
#revisions .box p {
  line-height: 1.5em;
  padding-bottom: 1.5em;
}
#revisions .box .push {
  line-height: 1.5;
  padding: 40px 40px;
  border-radius: 20px;
  background-color: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(10px);
}
#revisions .box .flex {
  padding: 20px 10px;
  justify-content: flex-start;
}
#revisions .box .flex h3 {
  font-size: 15px;
  width: 100%;
  padding: 5px 10px;
}
#revisions .box .flex .item {
  width: 50%;
  padding: 10px;
}
#revisions .box .flex .item img {
  width: 100%;
}
#revisions .box .flex img {
  width: 100%;
}
#revisions .box.box-border {
  padding: 2px;
  border-radius: 20px;
  background-image: var(--teachGradient);
  position: relative;
  z-index: 20;
}
#revisions .box.box-border .item {
  width: 100%;
  height: 100%;
  background-color: #1B1B1B;
  border-radius: 20px;
  padding: 40px 20px;
}

/*===== 刺青特化設計 =====*/
/* Makeup Design */
#makeup {
  width: 100%;
  padding: 5em 20px 1em;
  font-family: var(--mainFont);
}
#makeup h2 {
  line-height: 3em;
}
#makeup .box {
  width: 100%;
  max-width: 353px;
  margin: auto;
}
#makeup .box .pic img {
  width: 100%;
}
#makeup .box .box-border {
  max-width: 600px;
  text-align: center;
  padding: 2px;
  margin: auto;
  border-radius: 20px;
  background-image: var(--teachGradient);
  position: relative;
  z-index: 20;
}
#makeup .box .box-border .item {
  width: 100%;
  height: 100%;
  background-color: #1B1B1B;
  border-radius: 20px;
  padding: 40px 20px;
}
#makeup .box .box-border .item p {
  padding: 1em 0 2em;
}
#makeup .more-btn {
  height: 4em;
  line-height: 4em;
  cursor: pointer;
  transition: var(--transition);
}
#makeup .more-content {
  display: none;
  overflow: hidden;
  transition: var(--transition);
}
#makeup .picture {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
#makeup .picture h2 {
  width: 100%;
}
#makeup .picture .pic {
  display: block;
  width: calc(50% - 10px);
  margin: 5px auto;
  position: relative;
}
#makeup .picture .pic img {
  filter: brightness(0.7);
  transition: var(--transition);
}
#makeup .picture .pic h4 {
  display: block;
  width: 100%;
  height: 44px;
  line-height: 44px;
  font-size: 11px;
  font-weight: 700;
  padding: 0 1em;
  position: absolute;
  left: 0;
  bottom: 0;
  text-shadow: 2px 2px 2px #333;
}
#makeup .picture .pic:hover img {
  filter: brightness(1);
}

/*===== 刺客專區設計 =====*/
/* Customer Design */
#customer {
  width: 100%;
  padding: 5em 20px 1em;
  font-family: var(--mainFont);
  font-size: 16px;
}
#customer .box {
  width: 100%;
  max-width: 353px;
  margin: auto;
}
#customer .box p {
  line-height: 1.6em;
}
#customer .box h2 {
  width: 100%;
  line-height: 3em;
}
#customer .box .box-radius {
  width: 100%;
  margin: 20px auto;
}
#customer .box .box-radius p {
  padding: 40px 40px;
}
#customer .box img.w40 {
  width: 40px;
}
#customer .box .pic {
  position: relative;
  width: calc(50% - 2em);
  margin: 1em;
}
#customer .box .pic img {
  width: 100%;
}
#customer .box .pic .push {
  width: 100%;
  height: 5em;
  font-size: 11px;
  color: var(--lightWhiteColor);
  padding: 2em 1em;
  position: absolute;
  left: 0;
  bottom: 0;
  background-image: linear-gradient(rgba(27, 27, 27, 0), rgba(27, 27, 27, 0.9019607843));
}

/*===== 常見問題設計 =====*/
/* faq Design */
#faq {
  width: 100%;
  padding: 80px 20px;
  font-family: var(--mainFont);
}
#faq h2 {
  line-height: 3em;
}
#faq .box {
  width: 100%;
  max-width: 346px;
  padding: 1em;
  margin: auto;
}
#faq .box .item {
  width: 100%;
  padding: 40px 40px;
}
#faq .box .fs-17 {
  font-size: 17px;
}

#faq-blue, #faq-green {
  width: 100%;
  padding: 40px 20px;
}
#faq-blue h2, #faq-green h2 {
  line-height: 3em;
}
#faq-blue .box, #faq-green .box {
  width: 100%;
  max-width: 346px;
  margin: auto;
  font-weight: 700;
  line-height: 1.6em;
}
#faq-blue .box .item, #faq-green .box .item {
  padding: 40px 20px;
  font-size: 17px;
}
#faq-blue .box .item h2, #faq-green .box .item h2 {
  font-size: 22px;
  line-height: 1.3em;
}
#faq-blue .box .faq-q, #faq-green .box .faq-q {
  width: 100%;
  border-bottom: 1px solid var(--lightWhiteColor);
  padding: 1em 0em;
  font-size: 15px;
  transition: var(--transition);
  cursor: pointer;
}
#faq-blue .box .faq-q p i, #faq-green .box .faq-q p i {
  font-size: 24px;
  vertical-align: bottom;
  margin: 0 0.25em;
  transition: var(--transition);
}
#faq-blue .box .faq-q p:nth-of-type(1), #faq-green .box .faq-q p:nth-of-type(1) {
  width: 2em;
  text-align: center;
}
#faq-blue .box .faq-q p:nth-of-type(2), #faq-green .box .faq-q p:nth-of-type(2) {
  width: calc(100% - 4em);
  padding: 0 0.5em;
}
#faq-blue .box .faq-q p:nth-of-type(3), #faq-green .box .faq-q p:nth-of-type(3) {
  width: 2em;
  text-align: center;
}
#faq-blue .box .faq-q.action, #faq-green .box .faq-q.action {
  border: none;
  background-color: var(--Blue03);
}
#faq-blue .box .faq-q.action i, #faq-green .box .faq-q.action i {
  background-color: transparent;
  color: var(--Blue01);
}
#faq-blue .box .faq-q.action i.fa-caret-down, #faq-green .box .faq-q.action i.fa-caret-down {
  transform: rotate(180deg);
}
#faq-blue .box .faq-a, #faq-green .box .faq-a {
  display: none;
  padding: 2em 0.5em;
  text-align: justify;
  overflow: hidden;
}
#faq-blue .box .faq-a p, #faq-green .box .faq-a p {
  padding-bottom: 1em;
}
#faq-blue .box .faq-a p.line, #faq-green .box .faq-a p.line {
  border: 3px solid var(--lightWhiteAlpha);
  padding: 1.5em;
}
#faq-blue .box .faq-a ul, #faq-green .box .faq-a ul {
  list-style: disc;
  padding-left: 1.5em;
  font-size: 16px;
}
#faq-blue .box .faq-a ul li, #faq-green .box .faq-a ul li {
  list-style: inherit;
  padding-bottom: 1em;
}
#faq-blue .box .faq-a.action, #faq-green .box .faq-a.action {
  height: auto;
  padding: 1.2em 0.5em;
}

#faq-green .box .faq-q {
  border-bottom: 1px solid var(--lightWhiteColor);
}
#faq-green .box .faq-q.action {
  border: none;
  background-color: var(--Teal03);
}

/*===== 彫方簡介設計 =====*/
/* About Design */
#about {
  width: 100%;
  padding: 20px;
  font-family: var(--mainFont);
}
#about .flex {
  width: 100%;
  max-width: 353px;
  margin: auto;
}
#about .flex .time-title {
  width: 100%;
  font-size: 24px;
  font-weight: 900;
  text-align: center;
}
#about .flex .time-title p {
  display: inline-block;
  padding: 16px 32px;
}
#about .flex .box {
  width: calc(50% - 4.5px);
  padding: 5px;
}
#about .flex .box .item {
  padding: 20px 5px;
}
#about .flex .box .item img {
  width: 100%;
}
#about .flex .box .item p {
  text-align: justify;
}
#about .flex .box .item .fram h4 {
  font-size: 17px;
  color: var(--Gray02);
}
#about .flex .box .item .fram p {
  font-size: 13px;
}
#about .flex .box.msg .item {
  height: 150px;
  display: flex;
  align-items: center;
}
#about .flex .line {
  width: 9px;
  height: 1200x;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: space-between;
  position: relative;
}
#about .flex .line .backline {
  width: 1px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 4.5px;
  background-color: var(--Gray02);
}
#about .flex .line .disc {
  height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
}
#about .flex .line .disc .point {
  width: 9px;
  height: 9px;
  background-color: var(--Gray02);
  border-radius: 50%;
}
#about .flex .line .disc:nth-last-of-type(1) {
  opacity: 0;
}
#about .flex .line2 {
  height: 3000px;
}
#about .flex .line2 .backline {
  height: 100%;
}
#about .flex .line3 {
  height: 750px;
}
#about .flex .line3 .backline {
  height: 100%;
}

/*===== 彫方簡介設計-設計師 =====*/
/* Designer Design */
#designer {
  padding: 40px 20px;
  font-family: var(--mainFont);
}
#designer h2 {
  width: 100%;
  font-size: 22px;
  line-height: 4em;
}
#designer h3 {
  width: 100%;
  font-size: 17px;
  line-height: 4em;
}
#designer .flex {
  width: 100%;
  max-width: 353px;
  margin: 40px auto;
  padding: 30px;
}
#designer .flex .pic {
  padding: 20px;
  overflow: hidden;
}
#designer .flex .pic img {
  border-radius: 50%;
}
#designer .flex p {
  font-size: 13px;
  line-height: 1.6em;
}
#designer .red-book-icon {
  width: auto;
  height: 27px;
  vertical-align: top;
}

/*===== 刺青特化分頁設計 =====*/
/* Makeup-Product Design */
#makeup-product {
  width: 100%;
  font-family: var(--mainFont);
}
#makeup-product #theme {
  width: 100%;
}
#makeup-product #theme img {
  width: 100%;
}
#makeup-product #theme .msg {
  padding: 0 30px;
}
#makeup-product #theme .msg h2 {
  font-size: 22px;
  padding: 40px 0;
}
#makeup-product #theme .msg p {
  font-size: 13px;
  padding-bottom: 40px;
}
#makeup-product #theme .flex {
  padding: 0 30px;
  justify-content: space-between;
}
#makeup-product #theme .flex .pic {
  width: 48%;
  margin: 30px 0;
}
#makeup-product #theme .flex .pic img {
  width: 100%;
}

/*燈箱特效*/
#lighter {
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5411764706);
  backdrop-filter: blur(5px);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 120;
  display: flex;
  justify-content: center;
  align-items: center;
}
#lighter .box {
  width: 80%;
  height: 80%;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  position: relative;
}
#lighter .box .close {
  width: 2em;
  height: 1em;
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
}
#lighter .box .close .bar {
  width: 100%;
  height: 2px;
  background-color: white;
  position: absolute;
  top: calc(1em - 1px);
  transform: rotate(30deg);
}
#lighter .box .close .bar:nth-of-type(2) {
  transform: rotate(-30deg);
}

#lighter.none {
  display: none;
}

/*=====================================================================================================================================*/
@media only screen and (min-width: 393px) {
  #service .flex {
    padding: 20px;
  }
}
@media only screen and (min-width: 834px) {
  .fs-small {
    font-size: 14px;
  }
  /* 背景圓球設定 */
  .phone-none {
    display: block;
  }
  .desk-none {
    display: none;
  }
  *[class^=ball] {
    backdrop-filter: blur(15px);
    border-radius: 50%;
    position: absolute;
    z-index: -1;
    opacity: 0.3;
    box-shadow: 0 0 50px rgba(255, 255, 255, 0.2);
  }
  .ball-xl {
    width: 630px;
    height: 630px;
  }
  .ball-lg {
    width: 480px;
    height: 480px;
  }
  .ball-md {
    width: 250px;
    height: 250px;
  }
  .ball-footer {
    width: 1430px;
    height: 500px;
    background-image: radial-gradient(#B99E58, rgba(255, 255, 255, 0.5333333333), rgba(255, 255, 255, 0.0196078431) 85%);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
    bottom: -320px;
    left: calc(50% - 715px);
  }
  .bg-orange {
    background-image: radial-gradient(#E76D65 30%, rgba(255, 255, 255, 0.2078431373), rgba(255, 255, 255, 0.0196078431) 85%);
  }
  .bg-red {
    background-image: radial-gradient(#D94F7D 30%, rgba(255, 255, 255, 0.2078431373), rgba(255, 255, 255, 0.0196078431) 85%);
  }
  .bg-gold {
    background-image: radial-gradient(#FFC53D 30%, rgba(255, 255, 255, 0.2078431373), rgba(255, 255, 255, 0.0196078431) 85%);
  }
  .bg-teal {
    background-image: radial-gradient(#3DCCB2 30%, rgba(255, 255, 255, 0.2078431373), rgba(255, 255, 255, 0.0196078431) 85%);
  }
  .bg-purple {
    background-image: radial-gradient(#CD7BF4 30%, rgba(255, 255, 255, 0.2078431373), rgba(255, 255, 255, 0.0196078431) 85%);
  }
  .bg-blue {
    background-image: radial-gradient(#6AB1E5 30%, rgba(255, 255, 255, 0.2078431373), rgba(255, 255, 255, 0.0196078431) 85%);
  }
  .bg-green {
    background-image: radial-gradient(#93D75D 30%, rgba(255, 255, 255, 0.2078431373), rgba(255, 255, 255, 0.0196078431) 85%);
  }
  .pos-top-80 {
    top: calc(56.25vw - 10vh);
  }
  .pos-top-300vh {
    top: 300vh;
  }
  .pos-top-200vh {
    top: 200vh;
  }
  .pos-top-150vh {
    top: 150vh;
  }
  .pos-top-100vh {
    top: 100vh;
  }
  .pos-top-75vh {
    top: 75vh;
  }
  .pos-top-0 {
    top: 80px;
  }
  .pos-left-f55 {
    left: -280px;
  }
  .pos-right-50 {
    right: -280px;
  }
  /* Header Design */
  header menu {
    height: 168px;
  }
  header menu ul {
    padding: 0 16.6666666667%;
    display: flex;
    flex-wrap: wrap;
  }
  header menu ul li {
    width: 25%;
  }
  /* Slide Design */
  #slide .btn {
    font-size: 30px;
  }
  /* Service Design */
  #service .flex {
    max-width: 1480px;
    margin: auto;
    padding: 50px 40px 15px;
    background-image: url(../images/service.png);
  }
  #service .flex .box {
    width: calc(25% - 10px);
    min-width: none;
    max-width: none;
    margin: 10px 5px;
  }
  #service .flex > p {
    font-size: 13px;
  }
  /* Pc-Msg Design */
  #pc-msg {
    display: none;
  }
  /* Course Design */
  #course .item .box {
    font-size: 16px;
  }
  #course .item .box p:nth-of-type(2) {
    padding: 0 3.5em;
  }
  /*===== 教學頁面設計 =====*/
  /* Teach-Strategy Design */
  #teach-strategy .box .item {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  #teach-strategy .box .item .card {
    width: 50%;
    padding: 0.5em;
  }
  /*===== 作品觀賞設計 =====*/
  /* Prot-Title Design */
  #port-title .box, #port-title-about .box {
    max-width: 20em;
    text-align: center;
  }
  #port-title .box img, #port-title-about .box img {
    width: 11em;
  }
  #port-title .box h2, #port-title-about .box h2 {
    font-size: 27px;
    line-height: 7em;
  }
  #port-title .box h3, #port-title-about .box h3 {
    height: 3em;
    line-height: 3em;
    font-size: 20px;
  }
  /* Prot-Button Design */
  #port-button {
    width: 100%;
  }
  #port-button .box {
    width: 100%;
    max-width: none;
    padding: 20px;
    justify-content: center;
  }
  /* Prot-Content Design */
  #port-content {
    width: 100%;
    position: relative;
  }
  #port-content .box {
    width: 100%;
    columns: 3;
    column-gap: 1px;
  }
  #port-content .box .item {
    width: 100%;
    padding: 10px;
  }
  #port-content .box .item img {
    width: 100%;
  }
  /*===== 改蓋刺青設計 =====*/
  #revisions .box h2 {
    padding: 1em 0;
  }
  #revisions .box h3 {
    font-size: 20px;
    padding: 1.5em 0;
  }
  /*===== 刺青特化設計 =====*/
  /* Makeup Design */
  #makeup .box {
    max-width: 800px;
  }
  #makeup .picture .pic {
    width: calc(33.3333333333% - 10px);
  }
  #makeup .picture .pic h4 {
    font-size: 13px;
    height: 45px;
    line-height: 45px;
  }
  /*===== 刺客專區設計 =====*/
  /* Customer Design */
  #customer {
    font-size: 16px;
  }
  #customer .box {
    width: 100%;
    max-width: 754px;
    margin: auto;
  }
  #customer .box .pic {
    width: calc(33.3333333333% - 2em);
  }
  #customer .box .pic .push {
    font-size: 13px;
  }
  /*===== 常見問題設計 =====*/
  /* faq Design */
  #faq {
    width: 100%;
    padding: 80px 40px;
  }
  #faq .box {
    max-width: 754px;
  }
  #faq .box .fs-17 {
    font-size: 20px;
  }
  #faq-blue .box, #faq-green .box {
    width: 100%;
    max-width: 754px;
  }
  /*===== 彫方簡介設計 =====*/
  /* About Design */
  #about {
    width: 100%;
    padding: 20px 40px;
  }
  #about .flex {
    width: 100%;
    max-width: 754px;
  }
  #about .flex .box .item {
    padding: 20px 30px;
  }
  #about .flex .box .item .fram h4 {
    font-size: 22px;
  }
  #about .flex .box .item .fram p {
    font-size: 18px;
  }
  /*===== 彫方簡介設計-設計師 =====*/
  /* Designer Design */
  #designer {
    padding: 40px 40px;
  }
  #designer h2 {
    font-size: 28px;
  }
  #designer h3 {
    font-size: 24px;
  }
  #designer .flex {
    max-width: 754px;
    margin: 40px auto;
    padding: 40px;
  }
  #designer .flex p {
    font-size: 16px;
  }
  #designer .red-book-icon {
    width: auto;
    height: 34px;
    vertical-align: top;
  }
  /*===== 刺青特化分頁設計 =====*/
  /* Makeup-Product Design */
  #makeup-product #theme .msg {
    max-width: 598px;
    margin: auto;
  }
  #makeup-product #theme .msg h2 {
    font-size: 28px;
    padding: 40px 0;
  }
  #makeup-product #theme .msg p {
    font-size: 14px;
    padding-bottom: 40px;
  }
  #makeup-product #theme .flex .pic {
    width: calc(33.3333333333% - 20px);
  }
}
@media only screen and (min-width: 1200px) {
  header {
    display: flex;
    height: 70px;
  }
  header #logo {
    width: 30%;
    text-align: center;
    line-height: 70px;
  }
  header menu {
    width: 70%;
    height: 70px;
    line-height: 70px;
    display: block;
    height: auto !important;
    background-color: transparent;
  }
  header menu ul {
    padding: 0;
    justify-content: center;
  }
  header menu ul li {
    width: auto;
  }
  header menu ul li a {
    font-size: 17px;
    display: block;
    padding: 0 1.5em;
  }
  header nav {
    display: none;
  }
  /* Slide Design */
  #slide .btn {
    opacity: 0.5;
  }
  #slide .btn:hover {
    color: var(--lightWhiteColor);
    opacity: 1;
  }
  #slide #prev {
    left: 10vw;
  }
  #slide #next {
    right: 10vw;
  }
  /* Service Design */
  #service .flex .box {
    width: 312px;
    height: 400px;
    background-color: rgba(255, 255, 255, 0.4156862745);
    transition: var(--transition);
    display: flex;
    flex-wrap: wrap;
    align-content: center;
  }
  #service .flex .box p {
    height: 0;
    overflow: hidden;
    transition: var(--transition);
  }
  #service .flex .box:hover {
    background-color: rgba(255, 255, 255, 0.6509803922);
  }
  #service .flex .box:hover p {
    height: 96px;
  }
  /* Course Design */
  #course .item {
    max-width: var(--maxWidth);
    justify-content: space-evenly;
  }
  /* Contact Design */
  #contact {
    align-items: center;
  }
  #contact hr {
    width: 80%;
  }
  #contact .box {
    width: 33.3333333333%;
  }
  /* Footer Design */
  footer {
    height: 8em;
    line-height: 8em;
    font-size: 16px;
  }
  /*===== 教學頁面設計 =====*/
  *[id^=teach] > .box {
    max-width: var(--maxWidth);
  }
  *[id^=teach] > .box h2::after {
    width: 70%;
    left: 15%;
  }
  /* Teach-Main Design */
  #teach-main .box h2 {
    display: none;
  }
  #teach-main .box h2.table {
    display: block;
  }
  /* Teach-Course Design */
  #teach-course .box .item img {
    width: 800px;
  }
  /* Teach-Student Design */
  #teach-student .box .item img {
    width: 800px;
  }
  /* Teach-Designer Design */
  #teach-designer .box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
  }
  #teach-designer .box h2 {
    width: 100%;
  }
  #teach-designer .box .item {
    width: 45%;
  }
  #teach-designer .box .item img {
    width: 100%;
    max-width: 350px;
  }
  #teach-designer .box ul {
    width: 45%;
  }
  /* Teach-Strategy Design */
  #teach-strategy .box .item {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  #teach-strategy .box .item .card {
    width: 20%;
    padding: 0.5em;
  }
  /*===== 改蓋刺青設計 =====*/
  #revisions .box {
    max-width: 1000px;
  }
  #revisions .box h3 {
    font-size: 23px;
    padding: 1.5em 0;
  }
  #revisions .box .flex h3 {
    font-size: 23px;
  }
  #revisions .box.box-border {
    width: 55%;
    max-width: 800px;
  }
  /*===== 常見問題設計 =====*/
  /* faq Design */
  #faq {
    width: 100%;
    padding: 80px 40px;
  }
  #faq .box {
    max-width: var(--maxWidth);
  }
  #faq .box .fs-17 {
    font-size: 20px;
  }
  #faq-blue .box, #faq-green .box {
    width: 100%;
    max-width: 754px;
  }
  /*===== 彫方簡介設計 =====*/
  /* About Design */
  #about {
    width: 100%;
    padding: 20px 40px;
  }
  #about .flex {
    width: 100%;
    max-width: var(--maxWidth);
  }
  #about .flex .box .item {
    padding: 20px 5px;
  }
  #about .flex .box .item .fram h4 {
    font-size: 24px;
  }
  #about .flex .box .item .fram p {
    font-size: 20px;
  }
  #about .flex .box:nth-of-type(2) {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
  }
  #about .flex .box:nth-of-type(2) .item {
    width: calc(50% - 10px);
    margin: 2.5px;
  }
  /*===== 彫方簡介設計-設計師 =====*/
  /* Designer Design */
  #designer {
    padding: 40px 40px;
  }
  #designer h2 {
    font-size: 32px;
  }
  #designer h3 {
    font-size: 27px;
  }
  #designer .flex {
    max-width: 1200px;
    margin: 40px auto;
    padding: 40px;
    align-items: center;
  }
  #designer .flex .pic {
    width: 33.3333333333%;
    padding: 30px;
  }
  #designer .flex .pic img {
    width: 100%;
  }
  #designer .flex .w66 {
    width: 66.6666666667%;
  }
  #designer .flex p {
    font-size: 18px;
  }
  #designer .red-book-icon {
    width: auto;
    height: 36px;
    vertical-align: top;
  }
  /*===== 刺青特化分頁設計 =====*/
  /* Makeup-Product Design */
  #makeup-product #theme {
    max-width: var(--maxWidth);
    margin: auto;
  }
  #makeup-product #theme .msg {
    max-width: 598px;
    margin: auto;
  }
  #makeup-product #theme .msg h2 {
    font-size: 20px;
    padding: 40px 0;
  }
  #makeup-product #theme .msg p {
    font-size: 16px;
    padding-bottom: 40px;
  }
  #makeup-product #theme .flex .pic {
    width: calc(33.3333333333% - 20px);
  }
}
@media only screen and (min-width: 1600px) {
  /* 背景圓球設定 */
  *[class^=ball] {
    backdrop-filter: blur(15px);
    border-radius: 50%;
    position: absolute;
    z-index: -1;
    opacity: 0.3;
    box-shadow: 0 0 50px rgba(255, 255, 255, 0.2);
  }
  .ball-xl {
    width: 777px;
    height: 777px;
  }
  .ball-lg {
    width: 575px;
    height: 575px;
  }
  .ball-md {
    width: 250px;
    height: 250px;
  }
  .ball-footer {
    width: 2000px;
    height: 500px;
    background-image: radial-gradient(#B99E58, rgba(255, 255, 255, 0.5333333333), rgba(255, 255, 255, 0.0196078431) 85%);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
    bottom: calc(-8em - 250px);
    left: calc(50% - 1000px);
  }
  .bg-orange {
    background-image: radial-gradient(#E76D65 30%, rgba(255, 255, 255, 0.2078431373), rgba(255, 255, 255, 0.0196078431) 85%);
  }
  .bg-red {
    background-image: radial-gradient(#D94F7D 30%, rgba(255, 255, 255, 0.2078431373), rgba(255, 255, 255, 0.0196078431) 85%);
  }
  .bg-gold {
    background-image: radial-gradient(#FFC53D 30%, rgba(255, 255, 255, 0.2078431373), rgba(255, 255, 255, 0.0196078431) 85%);
  }
  .bg-teal {
    background-image: radial-gradient(#3DCCB2 30%, rgba(255, 255, 255, 0.2078431373), rgba(255, 255, 255, 0.0196078431) 85%);
  }
  .bg-purple {
    background-image: radial-gradient(#CD7BF4 30%, rgba(255, 255, 255, 0.2078431373), rgba(255, 255, 255, 0.0196078431) 85%);
  }
  .bg-blue {
    background-image: radial-gradient(#6AB1E5 30%, rgba(255, 255, 255, 0.2078431373), rgba(255, 255, 255, 0.0196078431) 85%);
  }
  .bg-green {
    background-image: radial-gradient(#93D75D 30%, rgba(255, 255, 255, 0.2078431373), rgba(255, 255, 255, 0.0196078431) 85%);
  }
  .pos-top-80 {
    top: calc(56.25vw - 10vh);
  }
  .pos-top-300vh {
    top: 300vh;
  }
  .pos-top-200vh {
    top: 200vh;
  }
  .pos-top-150vh {
    top: 150vh;
  }
  .pos-top-100vh {
    top: 100vh;
  }
  .pos-top-75vh {
    top: 75vh;
  }
  .pos-top-0 {
    top: 80px;
  }
  .pos-left-f55 {
    left: -360px;
  }
  .pos-right-50 {
    right: -360px;
  }
  #slide {
    height: calc(100vh - 50px);
  }
  /*===== 刺客專區設計 =====*/
  /* Customer Design */
  #customer .box {
    width: 100%;
    max-width: var(--maxWidth);
    margin: auto;
  }
  #customer .box .pic .push {
    font-size: 20px;
  }
}/*# sourceMappingURL=style.css.map */