@charset "UTF-8";
*, *:after, *:before { vertical-align: middle; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -moz-osx-font-smoothing: subpixel-antialiased; -webkit-font-smoothing: subpixel-antialiased; -moz-font-smoothing: subpixel-antialiased; -ms-font-smoothing: subpixel-antialiased; -o-font-smoothing: subpixel-antialiased; }

body { position: relative; display: inline-block; width: 100%; margin: 0; padding: 0; color: #5a5a5a; font-size: 16px; text-align: center; font-family: "Noto Sans TC", "Roboto", "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, sans-serif; }
body::-moz-selection { color: white; background-color: #78baff; }
body::selection { color: white; background-color: #78baff; }

a { color: black; cursor: pointer; text-decoration: none !important; }
a:after, a:before { color: black; vertical-align: middle !important; }
a:hover { text-decoration: underline; }

button { outline: non !important; border-width: 0; }

select { outline: none !important; box-shadow: none !important; border-width: 0; }

p { margin-bottom: 0; }

header { position: relative; background: linear-gradient(to bottom, #79c4f0 0%, #bce2f7 81%, #bde2f7 81%); }
header .navbar { position: relative; padding: 1rem 0; z-index: 1; }
@media (max-width: 992px) { header .navbar { z-index: 1050; } }
header .navbar .container { display: flex; justify-content: space-between; align-items: center; }
header .navbar-left { display: flex; align-items: center; }
header .navbar-left .navbar-brand img { height: 50px; }
@media (max-width: 768px) { header .navbar-left .navbar-brand img { height: 40px; } }
header .navbar-left .social-links { display: flex; gap: 0.5rem; }
@media (max-width: 768px) { header .navbar-left .social-links { gap: .5rem; } }
header .navbar-left .social-links .social-link { color: #fbb03b; font-size: 1.25rem; transition: color 0.3s ease; }
header .navbar-left .social-links .social-link:hover { color: #fa9c09; }
header .navbar-right { display: flex; align-items: center; }
header .navbar-right .action-buttons { display: flex; align-items: center; gap: 1rem; }
@media (max-width: 992px) { header .navbar-right .action-buttons { margin-right: 12px; flex-direction: column; align-items: flex-start; } }
header .navbar-right .action-buttons .name-text { color: #FFFFFF; text-shadow: rgba(48, 56, 65, 0.5) 1px 2px 2px; }
header .navbar-right .action-buttons .nav-link { cursor: pointer; color: #FFFFFF; text-decoration: none; transition: color 0.3s ease; text-shadow: rgba(48, 56, 65, 0.5) 1px 2px 2px; }
header .navbar-right .action-buttons .nav-link:first-of-type, header .navbar-right .action-buttons .nav-link:nth-of-type(2) { position: relative; }
header .navbar-right .action-buttons .nav-link:first-of-type:after, header .navbar-right .action-buttons .nav-link:nth-of-type(2):after { content: ''; position: absolute; top: 50%; right: -0.5rem; transform: translateY(-50%) translateX(50%); display: inline-block; width: 4px; height: 4px; border-radius: 50%; background-color: #FFFFFF; }
header .navbar-right .action-buttons .nav-link:hover { color: #fff600; text-shadow: transparent 1px 2px 2px; }
header .navbar-right .btn-mobile-menu { padding: 0.2rem .8rem 0.3rem .8rem; border-radius: 0; background-color: #c4965f; box-shadow: 5px -5px 0 #ba7c41 inset, -5px 5px 0 #dcb97c inset; text-shadow: rgba(48, 56, 65, 0.5) 1px 2px 2px; }
header .navbar-right .btn-mobile-menu i { color: #FFFFFF; font-size: .9rem; }
header .navbar-right .btn-mobile-menu i:before { transform: scale(1.5); }
header .navbar-right .btn-mobile-menu:hover { box-shadow: 5px -5px 0 rgba(186, 124, 65, 0.5) inset, -5px 5px 0 rgba(220, 185, 124, 0.5) inset; }
header .navbar-right #offcanvasNavbar { background-color: #FEFBF0; max-width: 60%; }
header .navbar-right #offcanvasNavbar .offcanvas-body > div { padding-bottom: 1rem; }
header .navbar-right #offcanvasNavbar .offcanvas-body > div:not(:first-child) { padding-top: 1rem; }
header .navbar-right #offcanvasNavbar .offcanvas-body > div:not(:last-child) { border-bottom: 2px dashed #ffce87; }
header .hero-section { position: relative; z-index: 1; }
@media (max-width: 768px) { header .hero-section:after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 50%; background-color: white; } }
@media (max-width: 992px) { header .hero-section:after { height: 60%; } }
header .hero-section .container { position: relative; z-index: 2; }
header .hero-section h1 { position: relative; margin-bottom: 0; z-index: 1; }
header .category-section { position: relative; margin: 0 auto; z-index: 1; background-color: #FFFFFF; }
@media (max-width: 768px) { header .category-section .row { align-items: center; } }
header .category-section .category-col:hover .default-img, header .category-section .category-col.active .default-img { display: none; }
header .category-section .category-col:hover .active-img, header .category-section .category-col.active .active-img { display: block; }
@media (max-width: 768px) { header .category-section .category-col:not(.active) img { max-width: 90%; } }
header .category-section .category-col:nth-of-type(1) { order: 1; }
header .category-section .category-col:nth-of-type(2) { order: 2; }
header .category-section .category-col:nth-of-type(3) { order: 3; }
header .category-section .category-col:nth-of-type(4) { order: 4; }
header .category-section .category-col:nth-of-type(5) { order: 5; }
header .category-section .category-item { flex-basis: calc(20%); padding: 0; text-align: center; cursor: pointer; }
header .category-section .category-item .default-img { display: block; }
header .category-section .category-item .active-img { display: none; }
header .category-section .category-item picture { display: block; }
header .category-section .category-item img { max-width: 100%; height: auto; }
header .cloud-bg { position: absolute; bottom: 0; left: 0; width: 100%; overflow: hidden; }
@media (max-width: 768px) { header .cloud-bg { top: 0; bottom: auto; } }
header .cloud-bg img { width: 100%; height: 100%; object-fit: contain; }

.text-brown { color: #6e4435; }

.text-orange { color: #fbb03b !important; }

.text-pink { color: #f09aa8; }

.text-pink2 { color: #dd7a8d; }

.text-blue { color: #56ace2; }

.text-green { color: #75cc92; }

.text-purple { color: #c38ccf; }

.text-red { color: #cc5f5f; }

.video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; }

.video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.logo-img { width: 35%; }
@media (max-width: 768px) { .logo-img { width: 100%; } }

.notebox { display: inline-block; width: 100%; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; border: 3px solid #fe9aab; background-color: #fffcec; padding: 1rem; }

.obj-image { max-width: 15%; }
@media (max-width: 768px) { .obj-image { max-width: 40%; } }

.img-half { transform: scale(0.5); }

.numH { height: 95px; font-size: 3rem; text-align: center; }

input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Firefox */
input[type=number] { -moz-appearance: textfield; }

.star-list { position: absolute; top: 5px; left: 0; }

.star-left15 { padding-left: 15px; }

.login-btn-space { padding: 10px 0 12px 0 !important; }

.h-22 { height: 22px; }

.w-10 { width: 10%; }

.w-5 { width: 5%; }

.w-650 { max-width: 650px !important; }

.w-115 { width: 115px !important; }

.w-165 { width: 165px !important; }

.border-brown-left { border-left: 4px dotted #aa9272; }
@media (max-width: 768px) { .border-brown-left { border-left: 0; } }

.border-brown-top { border-top: 1px dotted #aa9272; }

.border-pink-bottom { border-bottom: 3px solid #f09aa8; }

.border-brown-bottom { border-bottom: 3px dotted #aa9272; }

.border-yellow-bottom { border-bottom: 3px dotted #ffce87; }

.border-brown-bottom-s { border-bottom: 1px solid #aa9272; }

.border-brown { border: 1px solid #aa9272; }

.border-orange, .border-brown2, .border-pink, .border-blue, .border-green, .border-purple { height: 3px; content: ''; background-repeat: repeat-x; }

.border-brown2 { background-image: url(../images/doll-brown.svg); }

.border-orange { background-image: url(../images/doll-orange.svg); }

.border-pink { background-image: url(../images/doll-pink.svg); }

.border-blue { background-image: url(../images/doll-blue.svg); }

.border-green { background-image: url(../images/doll-green.svg); }

.border-purple { background-image: url(../images/doll-purple.svg); }

.list-bg-unit01 { background-color: #FEFBEF; }

.list-bg-unit02 { background-color: #F7E8EA; }

.list-bg-unit03 { background-color: #DFECF2; }

.list-bg-unit04 { background-color: #E4F4E9; }

.list-bg-unit05 { background-color: #F2EAF4; }

.text-shadow-sm { text-shadow: rgba(48, 56, 65, 0.5) 1px 2px 2px; }

.f-13 { font-size: .8rem; }

.f-19 { font-size: 1.2rem; }

.price { display: inline-block; width: 100%; font-weight: bolder; font-size: 3rem; color: #6e4435; text-align: right; position: relative; padding-right: 23px; }
.price:before { display: inline-block; content: attr(title); position: absolute; top: 17px; left: 0; color: #6e4435; font-size: 1rem; }
.price:after { display: inline-block; content: "元"; position: absolute; bottom: 11px; right: 0; color: #6e4435; font-size: 1rem; }

.price2 { display: flex; justify-content: flex-end; align-items: center; width: 100%; font-weight: bolder; font-size: 1.2rem; color: #6e4435; text-align: right; position: relative; margin-top: 20px; }
.price2:before { display: inline-block; content: attr(title); color: #6e4435; font-size: 1rem; position: absolute; left: 0; }
.price2:after { display: inline-block; content: "元"; color: #6e4435; font-size: 1rem; padding-left: 10px; }

.price-red { display: inline-block; width: 100%; font-weight: bolder; font-size: 3rem; color: #bf0a0a; text-align: right; position: relative; padding-right: 23px; margin-top: -10px; }
.price-red:before { display: inline-block; content: attr(title); position: absolute; top: 17px; left: 0; color: #bf0a0a; font-size: 1rem; }
.price-red:after { display: inline-block; content: "元"; position: absolute; bottom: 11px; right: 0; color: #bf0a0a; font-size: 1rem; }

.booklist2 { font-size: 1rem; display: inline-block; width: 100%; color: #6e4435; text-align: left; margin-left: 10px; }
.booklist2:hover { color: #fbb03b; }
.booklist2:before { content: '\F309'; font-family: bootstrap-icons; color: #6e4435; margin-left: -15px; }

.next-btn { display: inline-block; padding: .5rem 1rem; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; border: 1px solid #6e4435; color: #6e4435; }
.next-btn:hover, .next-btn:active { background-color: #6e4435; color: white; }

.link-brown { display: inline-block; color: #6e4435; }
.link-brown:hover { text-decoration: underline !important; }

.link-blue { display: inline-block; color: #56ace2; background-color: transparent; border: 0; padding: 0; }
.link-blue:hover { text-decoration: underline !important; }

.title-slash-link { display: inline-block; width: 100%; font-size: 1.1rem; font-weight: 500; color: white; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; padding: 10px 0 12px 0; text-shadow: #c9a681 1px 2px 2px; box-shadow: 0 -5px 0 #bf955e inset; background: repeating-linear-gradient(130deg, #d4ab6b 0 13px, #d9b783 0 25px); }
.title-slash-link:hover { text-shadow: #c9a681 1px 2px 2px; box-shadow: 0 -5px 0 #bf955e inset; background: repeating-linear-gradient(130deg, #d9b783 0 13px, #d4ab6b 0 25px); }

.title-slash-grey { display: inline-block; pointer-events: none; cursor: default; width: 100%; font-size: 1.1rem; font-weight: 500; color: #7e7e7e; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; padding: 10px 0 12px 0; text-shadow: #ffffff 1px 2px 2px; box-shadow: 0 -5px 0 #a7a7a7 inset; background: repeating-linear-gradient(130deg, #cecece 0 13px, #c5c5c5 0 25px); }

.title-slash01, .title-slash02, .title-slash03, .title-slash04, .title-slash05, .title-slash06, .title-slash07 { display: inline-block; width: 100%; font-size: 1.1rem; font-weight: 500; color: white; -moz-border-radius: 30px; -webkit-border-radius: 30px; border-radius: 30px; padding: .3rem .5rem .5rem .5rem; }
.title-slash01.br15, .title-slash02.br15, .title-slash03.br15, .title-slash04.br15, .title-slash05.br15, .title-slash06.br15, .title-slash07.br15 { -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; }

.title-slash01 { text-shadow: rgba(240, 141, 62, 0.8) 1px 2px 2px; box-shadow: 0 -5px 0 #d89032 inset; background: repeating-linear-gradient(130deg, #fbb03b 0 13px, #fabd5e 0 25px); }

.title-slash02 { text-shadow: rgba(198, 102, 125, 0.8) 1px 2px 2px; box-shadow: 0 -5px 0 #dd7a8d inset; background: repeating-linear-gradient(130deg, #f09aa8 0 13px, #f1abb5 0 25px); }

.title-slash03 { text-shadow: rgba(36, 103, 137, 0.8) 1px 2px 2px; box-shadow: 0 -5px 0 #3e99c6 inset; background: repeating-linear-gradient(130deg, #56ace2 0 13px, #76bae3 0 25px); }

.title-slash04 { text-shadow: rgba(46, 117, 61, 0.8) 1px 2px 2px; box-shadow: 0 -5px 0 #4aaf64 inset; background: repeating-linear-gradient(130deg, #75cc92 0 13px, #8ed3a3 0 25px); }

.title-slash05 { text-shadow: rgba(143, 93, 155, 0.8) 1px 2px 2px; box-shadow: 0 -5px 0 #bd7fcc inset; background: repeating-linear-gradient(130deg, #c38ccf 0 13px, #cda0d4 0 25px); }

.title-slash06 { text-shadow: rgba(143, 93, 155, 0.8) 1px 2px 2px; box-shadow: 0 -5px 0 #c99c1f inset; background: repeating-linear-gradient(130deg, #fdd657 0 13px, #ffcf32 0 25px); }

.title-slash07 { text-shadow: rgba(155, 106, 53, 0.8) 1px 2px 2px; box-shadow: 0 -5px 0 #9b6a35 inset; background: repeating-linear-gradient(130deg, #c4965f 0 13px, #cea87b 0 25px); }

.btn-square { display: inline-block; padding: 0.3rem 1.5rem 0.4rem 1.5rem; text-decoration: none; border: 0 !important; color: white; font-weight: 400; text-shadow: rgba(48, 56, 65, 0.5) 1px 2px 2px; }
.btn-square.orange { background-color: #ffab3b; box-shadow: 5px -5px 0 #f08d3e inset, -5px 5px 0 #f7c766 inset; }
.btn-square.orange:hover, .btn-square.orange:active { box-shadow: 5px -5px 0 rgba(240, 141, 62, 0.5) inset, -5px 5px 0 rgba(247, 199, 102, 0.5) inset; }
.btn-square.brown { background-color: #c4965f; box-shadow: 5px -5px 0 #ba7c41 inset, -5px 5px 0 #dcb97c inset; }
.btn-square.brown:hover, .btn-square.brown:active { box-shadow: 5px -5px 0 rgba(186, 124, 65, 0.5) inset, -5px 5px 0 rgba(220, 185, 124, 0.5) inset; }
.btn-square.pink { background-color: #fe95a7; box-shadow: 5px -5px 0 #ed6179 inset, -5px 5px 0 #ffb6c5 inset; }
.btn-square.pink:hover, .btn-square.pink:active { box-shadow: 5px -5px 0 rgba(237, 97, 121, 0.5) inset, -5px 5px 0 rgba(255, 182, 197, 0.5) inset; }
.btn-square.blue { background-color: #2fade7; box-shadow: 5px -5px 0 #009acb inset, -5px 5px 0 #66d0f4 inset; }
.btn-square.blue:hover, .btn-square.blue:active { box-shadow: 5px -5px 0 rgba(0, 154, 203, 0.5) inset, -5px 5px 0 rgba(102, 208, 244, 0.5) inset; }

.page-item { margin: 0 3px; }
.page-item:first-child .page-link { line-height: 18px; border-top-left-radius: 20px !important; border-bottom-left-radius: 20px !important; }
.page-item:last-child .page-link { line-height: 18px; border-top-right-radius: 20px !important; border-bottom-right-radius: 20px !important; }
.page-item .page-link { width: 35px; height: 35px; line-height: 23px; color: #B3B7C6 !important; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; border-color: #6e4435 !important; color: #6e4435 !important; }
.page-item .page-link:hover, .page-item .page-link:active, .page-item .page-link.active-page { color: white !important; background-color: #cfa57b !important; border: 0; }
.page-item .page-link > span { vertical-align: baseline; }

.nav-btn { padding: 0.3rem 1.5rem 0.4rem 1.5rem; text-decoration: none; border-radius: 0; color: #FFFFFF; font-weight: 400; text-shadow: rgba(48, 56, 65, 0.5) 1px 2px 2px; }
@media (max-width: 768px) { .nav-btn { padding: 0.3rem .8rem 0.4rem .8rem; } }
.nav-btn-login { background-color: #ffab3b; box-shadow: 5px -5px 0 #f08d3e inset, -5px 5px 0 #f7c766 inset; }
.nav-btn-login:hover { box-shadow: 5px -5px 0 rgba(240, 141, 62, 0.5) inset, -5px 5px 0 rgba(247, 199, 102, 0.5) inset; }
.nav-btn-search { background-color: #c4965f; box-shadow: 5px -5px 0 #ba7c41 inset, -5px 5px 0 #dcb97c inset; }
.nav-btn-search:hover { box-shadow: 5px -5px 0 rgba(186, 124, 65, 0.5) inset, -5px 5px 0 rgba(220, 185, 124, 0.5) inset; }

.accordion { --bs-accordion-btn-active-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="14px" height="8px" viewBox="0 0 14 8" version="1.1"><title>download</title><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"><g id="download" transform="translate(1, 1)" stroke="%23FFFFFF"><polyline id="路徑" points="0 0 6 6 12 0"/></g></g></svg>') !important; --bs-accordion-btn-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="14px" height="8px" viewBox="0 0 14 8" version="1.1"><title>download</title><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"><g id="download" transform="translate(1, 1)" stroke="%23FFFFFF"><polyline id="路徑" points="0 0 6 6 12 0"/></g></g></svg>') !important; }

.accordion-item { border: 0 !important; margin-bottom: 15px; }

.accordion-button { border-top-left-radius: var(--bs-accordion-inner-border-radius); border-top-right-radius: var(--bs-accordion-inner-border-radius); border-bottom-left-radius: var(--bs-accordion-inner-border-radius); border-bottom-right-radius: var(--bs-accordion-inner-border-radius); color: white !important; }
.accordion-button.qa-background { background-color: #c4965f !important; }

.accordion-body { text-align: left; }

.accordion-button:not(.collapsed) { color: white !important; }
.accordion-button:not(.collapsed).qa-background { background-color: #c4965f !important; }

.accordion-item:first-of-type > .accordion-header .accordion-button { border-top-left-radius: var(--bs-accordion-inner-border-radius); border-top-right-radius: var(--bs-accordion-inner-border-radius); border-bottom-left-radius: var(--bs-accordion-inner-border-radius); border-bottom-right-radius: var(--bs-accordion-inner-border-radius); }

.modal-header { border-bottom: 0 !important; }

.modal-footer { border-top: 0 !important; }

.form-check-input { border: 1px solid #9a836c !important; }

.form-select, .form-control { border-radius: 0.375rem !important; color: #6e4435; background-color: white !important; }
.form-select.border-brown-box, .form-control.border-brown-box { border: 1px solid #9a836c !important; }
.form-select:focus, .form-control:focus { color: #6e4435 !important; }
.form-select::placeholder, .form-control::placeholder { color: #c1c1c1; }

.nav-pills .nav-link { padding: .5rem 1.5rem !important; border-radius: 5px 5px 0 0 !important; color: white; background-color: #d3c7bc !important; }
.nav-pills .nav-link.active { background-color: #f09aa8 !important; }

.table { color: #5e5e5e !important; font-weight: 300; }
.table .table-warning { background-color: #c9a681 !important; border-radius: 30px !important; }
.table .table > :not(caption) > * > * { background-color: #c9a681 !important; }
.table tr { border-bottom: 1px solid #d6bca0; }

.navbar { z-index: 3 !important; }

.checkEye, .checkEye2 { position: absolute; top: 73%; right: 20px; transform: translateY(-50%); }
.checkEye.m-use, .checkEye2.m-use { top: 47%; right: 14px; }

.checkEye3 { position: absolute; top: 71%; right: 19px; transform: translateY(-50%); }
.checkEye3.m-use { top: 71%; right: 19px; }

.scroll-boxs { display: inline-block; width: 100%; max-height: 550px; overflow-y: scroll; }
@media (max-width: 768px) { .scroll-boxs { max-height: 350px; } }
.scroll-boxs > a { color: #0d6efd; }

.loginbox-650 { display: inline-block; max-width: 100%; width: 650px; }

.planboxs { display: inline-block; width: 100%; background-color: #fffcec; border: 8px solid #c9a681; padding: 15px; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; }
.planboxs.pink { border: 8px solid #fe95a7; }
.planboxs.purple { border: 8px solid #c38ccf; }

.planboxs-link { display: inline-block; width: 100%; background-color: #fffcec; border: 8px solid #c9a681; padding: 15px; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; }
.planboxs-link.pink:hover, .planboxs-link.pink.active { border: 8px solid #fe95a7; }
.planboxs-link.pink:hover .title-slash, .planboxs-link.pink.active .title-slash { text-shadow: rgba(198, 102, 125, 0.8) 1px 2px 2px; box-shadow: 0 -5px 0 #dd7a8d inset; background: repeating-linear-gradient(130deg, #f09aa8 0 13px, #f1abb5 0 25px); }
.planboxs-link.purple:hover, .planboxs-link.purple.active { border: 8px solid #c38ccf; }
.planboxs-link.purple:hover .title-slash, .planboxs-link.purple.active .title-slash { text-shadow: rgba(143, 93, 155, 0.8) 1px 2px 2px; box-shadow: 0 -5px 0 #bd7fcc inset; background: repeating-linear-gradient(130deg, #c38ccf 0 13px, #cda0d4 0 25px); }
.planboxs-link .title-slash { display: inline-block; width: 100%; font-size: 1.1rem; font-weight: 500; color: white; -moz-border-radius: 30px; -webkit-border-radius: 30px; border-radius: 30px; padding: 10px 0 12px 0; text-shadow: #c9a681 1px 2px 2px; box-shadow: 0 -5px 0 #bf955e inset; background: repeating-linear-gradient(130deg, #d4ab6b 0 13px, #d9b783 0 25px); }

.step { counter-reset: step; }
.step li { list-style-type: none; float: left; width: 33.33%; position: relative; text-align: center; font-size: .8rem; color: #e7c6ac; }
.step li.active { color: #c4965f; }
.step li.active:before { color: white; border-color: #cc9555; }
.step li:first-child:after { content: none; }
.step li:before { content: counter(step); counter-increment: step; width: 68px; height: 68px; line-height: 65px; display: block; text-align: center; margin: 0 auto 10px auto; border-radius: 50%; background-color: #cc9555; color: #e7c6ac; font-size: 2.25rem; font-weight: bolder; }
.step li:after { content: ""; position: absolute; width: 100%; height: 10px; background-color: #cc9555; top: 30px; left: -50%; z-index: -1; }

.step li.active + li:after { background-color: #cc9555; }

ul { padding-left: 1rem !important; }

.tablebox { font-weight: bolder; background-color: #c9a681; padding: .5rem 1rem; color: white; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; font-size: .8rem; }
@media (max-width: 768px) { .tablebox { display: none; } }

.table { padding: 1rem; color: #5e5e5e; font-size: .9rem; border-bottom: 1px solid #cfb190; }
.table > div { color: #5e5e5e; font-size: .9rem; }
@media (max-width: 768px) { .table > div { text-align: left; }
  .table > div:before { display: inline-block; content: attr(title); vertical-align: baseline; font-weight: bolder; color: #6e4435; } }