#wrap:before { display: none; }
input[type=text] , input[type=number] , input[type=tel] , select {border-color: rgb(255 255 255 / 20%);border-radius: 0;color: #e7e7e7;background: none;}
input::placeholder { color: #ababab; }
select {padding: .63rem 1rem;font-weight: 400;font-size: 16px;background: url(/images/00/icon-triangle.png) no-repeat calc(100% - 10px) 50%;}
select option { font-weight: bold; color: #999; }

/* order_form */
.order_form { margin-bottom: 35px; }

/* order_box */
.order_box {margin-top: 35px;padding: 15px 22px 22px;background: rgb(255 255 255 / 10%);border-radius: 30px;}
.order_box h5 {margin: 0 10px 10px;letter-spacing: .1em;font-weight: 500;font-size: 21px;}
.order_box h5 b { padding: 0 10px 0 0; color: #f90606; }
.order_box h5 font { margin-left: 20px; }
.order_box h5 font label{color: #c7c7c7;}
.order_box h5.order_title { display: flex; align-items: center; }
.order_box h5.order_title strong { margin: 0 10px; font-weight: 400; font-size: 21px; }
.order_box>div {padding: 5px 10px;border: 1px rgb(255 255 255 / 20%) solid;border-radius: 15px;}
.order_box .input_list { padding: 30px 25px; }
.order_box .input_list p {display: flex;align-items: stretch;}
.order_box .input_list p.last_child { border-bottom-color: transparent; }
.order_box .input_list p label {margin-right: 1.5em;padding: .8em 1em;min-width: 9em;width: 9em;display: flex;align-items: center;font-size: 18px;}
.order_box .input_list p font { width: 1%; display: flex; flex-wrap: wrap; align-items: center; flex: 1 auto; }
.order_box .input_list p font.groud input { width: 1%; flex: 1 auto; border-right: 0; }
.order_box .input_list p font.groud a { padding: .3rem 4rem; border-width: 1px; border-style: solid; }
.order_box .input_list p.address select { margin-right: 1em; width: 8em; }
.order_box .input_list p.address input { width: 1%; flex: 1 auto; }
.order_box .input_list p.remarks font { padding: .5em 0; }
.order_box .input_list p.remarks span.words {width: 100%;display: flex;justify-content: flex-end;align-items: center;font-size: 15px;}

/* orderWrap */
.orderWrap .list {padding: 10px 20px;border-bottom: 1px rgb(255 255 255 / 10%) solid;font-size: 0;}
.orderWrap .list .img { width: 40%; display: inline-block; }
.orderWrap .list .img a { display: flex; flex-wrap: wrap; align-items: center; }
.orderWrap .list .img font {padding: .2em;display: inline-block;}
.orderWrap .list .img font img {width: 70px;height: 70px;object-fit: cover;}
.orderWrap .list .img b {margin-left: 10px;width: 1%;flex: 1 auto;font-weight: 400;}
.orderWrap .list .info { width: 60%; display: inline-block; font-size: 0; }
.orderWrap .list .info p { width: calc((100% - 25px) / 4); display: inline-block; }
.orderWrap .list .info p.qBox { display: inline-flex; justify-content: center; align-items: stretch; }
.orderWrap .list .info p.qBox a, .orderWrap .list .info p.qBox input {padding: 2px 5px;border: 1px rgb(255 255 255 / 20%) solid;display: inline-block;vertical-align: middle;}
.orderWrap .list .info p.qBox a {padding: 2px 7px;border-radius: 0 5px 5px 0;}
.orderWrap .list .info p.qBox a.limit {border-radius: 5px 0 0 5px;}
.orderWrap .list .info p.qBox input { width: 30px; border-width: 1px 0; text-align: center; }
.orderWrap .list .info p.remove, .orderWrap.course_order .list .info p.remove { width: 25px; }
.orderWrap .list .info p.remove a { color: #7f7f7f; }
.orderWrap .list.title {padding: 15px 20px;border-color: rgb(255 255 255 / 10%);}

.orderWrap .list.add_item { padding: 5px 20px; background: #fbf1f1; }
.orderWrap .list.add_item .img { width: 83%; }
.orderWrap .list.add_item .img font { padding: 0; border: 0; }
.orderWrap .list.add_item .img font img { width: 50px; height: 50px; }
.orderWrap .list.add_item .img b { margin-left: .3em; }
.orderWrap .list.add_item .img .add_txt { margin-left: 10px; padding: .2em .3em .25em; display: block; border: 1px #db4c4c solid; border-radius: .2em; line-height: 1; font-weight: 300; font-size: 15px; color: #d12424; }
.orderWrap .list.add_item .info { width: 17%; }
.orderWrap .list.add_item .info p { width: 100%; }

/* formbox */
.formbox { margin: 40px 0; padding: 30px 50px; display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 20px 5%; border: 5px #eee solid; }
.formbox p label { margin-bottom: 3px; display: block; letter-spacing: .1em; font-size: 21px; color: #141414; }
.formbox p input , .formbox p select { padding: .682em 1em; border-radius: .5em; border-color: #e5e5e5; }
.formbox p select { padding: 1rem; }
.formbox p span.words { display: flex; align-items: center; justify-content: flex-end; color: #6f6f6f; }
.formbox p.large { grid-column-start: 1; grid-column-end: 3; }

/* other_box */
#order .other_box p { margin-bottom: 10px; display: flex; justify-content: flex-end; align-items: center; }
#order .other_box p label { min-width: 100px; }
#order .other_box p font { margin-left: 1em; width: 200px; }
#order .other_box p font input { padding: .2rem .5rem; font-size: 14px; }

/* btns */
#order .btns { margin: 40px 60px 20px; text-align: right; font-size: 0; }
#order .btns a {margin: 0 20px 0 0;padding: 7px 30px;display: inline-block;border: 1px #c0c0c0 solid;border-radius: 50px;}
#order .btns a#btnClean {margin: 0;background: linear-gradient(to right, var(--secondary), var(--thirdly));border-color: #504f4f;color: #fff;}

/* checknum */
.checknum { margin: 0 5%; text-align: right; }
.checknum input { margin-right: 15px; width: 200px; }

/* order_bottom_txt */
.order_bottom_txt { position: absolute; padding: 15px 0; width: 100%; bottom: 0; left: 0; opacity: 0; z-index: 1000; }
.order_bottom_txt.fixed {position: fixed;background: linear-gradient(20deg, var(--primary), var(--fifth));box-shadow: 0 0 20px rgb(0 0 0 / .3);opacity: 1;}
.order_bottom_txt.absolute-bt { opacity: 1; }
.order_bottom_txt p { margin: 10px 5%; width: 40%; }
.order_bottom_txt p label { min-width: 6em; display: inline-block; line-height: 24px; vertical-align: text-top; }
.order_bottom_txt p font { display: block; line-height: 1; }
.order_bottom_txt p font#totaltxt {margin: 0 0 0 20px;min-width: 5.5em;font-weight: 500;font-size: 22px;background: linear-gradient(to right, var(--secondary), var(--thirdly));background-clip: text;-webkit-background-clip: text;color: transparent;}
.order_bottom_txt p font#bot_note, .order_bottom_txt p font#bot_note span {display: inline-block;font-weight: 400;line-height: 1;font-size: 14px;}
.order_bottom_txt p font#bot_note { position: relative; line-height: 24px; }
.order_bottom_txt p font#bot_note span#freetxt { margin-right: 5px; }
.order_bottom_txt p font#bot_note span.numtxt { font-size: 16px; }
.order_bottom_txt p font#bot_note a , .order_bottom_txt p font#bot_note i { display: inline-block; font-size: 13px; vertical-align: initial; color: #f33d3d; }
.order_bottom_txt p font#bot_note b { position: absolute; min-width: 120px; background: #fff; border: 1px #e8e8e8 solid; border-radius: 4px; box-shadow: 0 0 10px rgb(0 0 0 / .2); font-size: 0; right: 0; bottom: 35px; opacity: 0; }
.order_bottom_txt p font#bot_note b span { overflow: hidden; height: 0; line-height: 170%; }
.order_bottom_txt p.send a , .finish_page .contact_box .home_btn a {padding: 10px;background: linear-gradient(to right, var(--secondary), var(--thirdly));display: block;text-align: center;color: #fff;border-radius: 50px;}
.order_bottom_txt p font#bot_note b[data-type="2"] { padding: 5px 10px; opacity: 1; }
.order_bottom_txt p font#bot_note b[data-type="2"]:before, .order_bottom_txt p font#bot_note b[data-type="2"]:after { position: absolute; width: 0; height: 0; border-style: solid; border-width: 10px 8px 0 8px; border-color: #d6d6d6 transparent transparent transparent; display: inline-block; bottom: -10px; left: 20px; content: ""; }
.order_bottom_txt p font#bot_note b[data-type="2"]:after { border-width: 10px 8px 0 8px; border-top-color: #fff; bottom: -9px; }
.order_bottom_txt p font#bot_note b[data-type="2"] span { height: 23px; }

/* finish_page */
.finish_page { margin: 0 auto; width: 600px; }
.finish_page h2 { margin: 0 10px 2px; text-align: center; font-weight: 400; font-size: 24px; color: #141414; }
.finish_page h2 b img, .finish_page .contact_box p b img { width: 25px; margin-right: 10px; }
.finish_page .contact_box p b img { margin-right: -2px; margin-bottom: 2px; }
.finish_page .order_box { margin: 20px 0 30px; padding-top: 15px; }
.finish_page .order_box h5 { font-size: 20px; }
.finish_page .order_box .txttt { font-weight: 500; padding: 10px 10px 0; text-align: center; }
.finish_page .order_box .pay_list { margin-bottom: 15px; font-size: 0; }
.finish_page .order_box .pay_list:last-child { margin-bottom: 0; }
.finish_page .order_box .pay_list>* { padding: 0 10px; width: calc(100% - 160px); display: inline-block; font-weight: 400; font-size: 17px; }
.finish_page .order_box .pay_list label { width: 120px; color: #686868; }
.finish_page .order_box .pay_list font { font-family: 'Source Sans Pro', 'Noto Sans TC', 'Noto Sans SC', sans-serif; }
.finish_page .order_box .pay_list .numtxt { font-size: 18px; }
.finish_page .contact_box p { margin-bottom: 15px; text-align: center; color: #212121; }
.finish_page .contact_box p a { color: #d4318a; padding: 0px 4px; font-weight: 500; vertical-align: initial; }
.finish_page .contact_box .home_btn { margin: 35px 0 0; }

/* orderlist */
.finish_page .order_box .pay_list .orderlist { width: calc(100% - 20px); }
.orderlist .row { position: relative; padding: 10px 35px 10px 80px; border-bottom: 1px #dddee4 solid; font-size: 0; }
.orderlist .row .img a { display: block; }
.orderlist .row .img font { position: absolute; padding: 5px; border: 1px #f2f2f2 solid; display: block; left: 0; }
.orderlist .row .img font img { width: 50px; height: 45px; object-fit: contain; }
.orderlist .row .img b { font-weight: normal; color: #000; -webkit-line-clamp: 1; }
.orderlist .row .info p { margin-bottom: 0; border-bottom: 0; font-size: 16px; }
.orderlist .row .info p.sBox, .orderlist .row .info p.sBox font { width: auto; line-height: 110%; font-size: 14px; color: #696868; }
.orderlist .row .info p.qBox { position: absolute; right: 5px; bottom: 10px; color: #7b7b7b; }
.orderlist .row .info p.qBox:before { content: "x"; }
.orderlist .row .info p.pBox { display: none; }
.orderlist .row .info p.tBox { font-weight: bold; line-height: 120%; font-size: 20px; }

@media screen and (max-width:1280px) {
	.checknum { margin: 0; }
	.order_bottom_txt p { margin: 0; width: calc(100% - 250px); }
	.order_bottom_txt p.send { margin-left: 50px; width: 200px; }
}
@media screen and (max-width:1160px) {
	#wrap .order_bottom_txt .workframe { padding: 0; }
}
@media screen and (min-width:981px) {
	.orderWrap .list .info p { text-align: center; }
	.orderWrap .list .info p.sBox font.pcDisBox { display: none; }
	.orderWrap.course_order .list .img { width: 60%; }
	.orderWrap.course_order .list .info { width: 40%; }
	.orderWrap.course_order .list .info p { width: calc((100% - 25px) / 3); }
	#order .other_box { margin: 20px 60px 0; }
}
@media screen and (max-width:980px) {
	.order_box , .formbox { padding: 18px 12px; }
	.orderWrap .list.title { display: none; }
	.orderWrap .list { position: relative; padding: 10px 110px 20px; }
	.orderWrap .list .img, .orderWrap .list .info p, .orderWrap .list .info p:first-child { width: auto; display: block; }
	.orderWrap .list .img font { position: absolute; display: block; top: 50%; left: 20px; -webkit-transform: translateY(-50%); transform: translateY(-50%); }
	.orderWrap .list .img font img { width: 60px; height: 60px; object-fit: contain; }
	.orderWrap .list .img b { margin-left: 0; }
	.orderWrap .list .info { width: auto; display: block; font-size: 20px; }
	.orderWrap .list .info p:first-child font, .orderWrap .list .info p:first-child b { font-size: 12px; color: #696868; }
	.orderWrap .list .info p.sBox, .orderWrap .list .info p.sBox font { line-height: 110%; font-size: 14px; }
	.orderWrap .list .info p.qBox { position: absolute; right: 20px; bottom: 19px; }
	.orderWrap .list .info p.pBox { display: none; }
	.orderWrap .list .info p.tBox { font-weight: bold; line-height: 140%; }
	.orderWrap .list .info p.remove { position: absolute; right: 20px; top: 5px; }
	.orderWrap .list.add_item { padding: 10px 0 10px 85px; }
	.orderWrap .list.add_item .img , .orderWrap .list.add_item .info { width: 100%; }
	.orderWrap .list.add_item .img .add_txt { margin-left: 0; }
	#order .btns { margin: 40px 0 20px; text-align: center; }
	.formbox { grid-template-columns: repeat(1, 1fr); }
	.formbox p.large { grid-column-end: auto; }
	.orderWrap.course_order .list .img b { margin: 11px 0 0px; }
	#order .other_box { margin: 20px 10px 0; }
}
@media screen and (max-width:768px) {
	.checknum { margin-bottom: 20px; }
	.order_box .input_list p.address { flex-wrap: wrap; }
	.order_box .input_list p.address font { padding: .5em 0; }
	.order_box .input_list p.address input { margin-top: .5em; width: 100%; }
	.order_bottom_txt p, .order_bottom_txt p.send { margin-left: 0; width: 100%; }
	.order_bottom_txt p.send a { margin-top: 5px; }
	.order_bottom_txt.absolute-bt { padding: 10px 0; }
	.finish_page { width: 100%; }
}
@media screen and (max-width:640px) {
	.order_box .input_list p { margin-bottom: .5em; padding-bottom: .5em; flex-wrap: wrap; }
	.order_box .input_list p label { padding: .2em 0; width: 100%; background: none; }
	.order_box .input_list p.address font , .order_box .input_list p.remarks font { padding: 0; }
}
@media screen and (max-width:550px) {
	#order .other_box p font { width: 1%; flex: 1 auto; }
	.order_box .input_list p font.groud a { padding: .3rem 1rem; }
}
@media screen and (max-width:450px) {
	.order_box, .formbox {padding: 18px 2%;margin-top: 0;}
	.order_box .input_list { padding: 30px 5%; }
	.orderWrap .list { padding: 10px 0 50px; }
	.orderWrap .list .img a { display: block; }
	.orderWrap .list .img font { position: relative; margin: 10px 10px 0; border: 0; text-align: center; top: auto; left: 0; -webkit-transform: translateY(0); transform: translateY(0); }
	.orderWrap .list .img font img { width: 150px; height: 150px; }
	.orderWrap.course_order .list .img b { margin: 0px 0 0px; }
	.orderWrap .list .img b { width: 100%; text-align: center; }
	.orderWrap .list .info { width: 100%; margin-bottom: 10px; }
	.orderWrap .list .info p { text-align: center; }
	.orderWrap .list .info p.qBox { right: calc((100% - 140px) / 2); bottom: 12px; }
	.orderWrap .list .info p.qBox a, .orderWrap .list .info p.qBox a.limit { padding: 2px 10px; border-radius: 0; }
	.orderWrap .list .info p.qBox input { width: 70px; }
	.orderWrap .list.add_item { padding: 10px 0 0; }
	.orderWrap .list.add_item .img .add_txt { position: absolute; top: 10px; left: 10px; }
	#order .btns a, #order .btns a#btnClean { margin: 0 5px; padding: 7px 0; width: calc(50% - 12px); text-align: center; font-size: 14px; }
	.finish_page .order_box .pay_list { padding-bottom: 10px; border-bottom: 1px #f1f1f1 solid; }
	.finish_page .order_box .pay_list:last-child { padding-bottom: 0; border-bottom: 0; }
	.finish_page .order_box .pay_list>*, .finish_page .order_box .pay_list label { width: calc(100% - 20px); display: block; }
	.orderWrap .list .info p.sBox, .orderWrap .list .info p.sBox font {line-height: 150%;margin-bottom: 10px;font-size: 16px;letter-spacing: 0.2px;}
}
@media screen and (max-width:425px) {
	.orderlist .row { padding: 10px 0; }
	.orderlist .row .img font { position: relative; margin: 10px; border: 0; text-align: center; left: 0; }
	.orderlist .row .img font img { width: 90px; height: 90px; }
	.orderlist .row .img b, .orderlist .row .info p { text-align: center; }
}