/* contText */
.contText { margin: 15px 0; }

.pagetitle {font-weight: bold;font-size: 32px;margin-bottom: 20px;text-align: center;}
.contact-box .contText article{
	margin-bottom: 20px;text-align: center;
}
#sideNav{padding-bottom: 0px;}
.wrap .workframe { overflow: hidden; }
.contact-box{display: flex;justify-content: space-between;padding:0px;}
.contact-box .contText{width: 100%;}
.contact-box #sideNav{width: 26%;display: none;}
/* contType */
.contType > div { overflow: hidden; margin: 0 0 20px; width: 60%; border-radius: 20px; background: url(/images/13/material-op60.png) center #254899; color: #fff; }
.contType > div:nth-child(1) { background-color: #17bf43; }
.contType > div:nth-child(2) { background-color: #479ac3; }
.contType > div:nth-child(3) { background-color: #e5a91c; }
.contType > div a { padding: 10px 10px 10px 105px; background: url(/images/13/icon-mail.png) no-repeat 15px center; background-size: contain; display: block; color: #fff; }
.contType > div:nth-child(1) a { background-image: url(/images/13/icon-line.png); }
.contType > div:nth-child(2) a { background-image: url(/images/13/icon-map.png); }
.contType > div:nth-child(3) a { background-image: url(/images/13/icon-phone.png); }


/* form */
form,fieldset{border:0;margin:0;padding:0;overflow:hidden}
form .list{padding:20px 0px;}
form .list p,form .list > div{overflow:hidden;font-size:16px}
form .list p label,form .list > div label{display:block;font-weight:700;}
form .list p label strong,form .list > div label strong{color:red;margin-left:5px;font-size:12px;vertical-align:bottom}
form .list p input,form .list p textarea,form .list >div input,form .list >div textarea{width:100%;padding:10px;font-size:16px;color: #333; box-sizing: border-box;border: 1px solid #ffffff00;background: none;border-bottom: 1px solid #ccc;}
form .list p.textarea{display: inline-block;}
form .list p input#Checknum{width:100px;margin-right:10px}
form .list .textarea{display: inline-block;width: 100%;}
form .list >div textarea{width: 100%;}
form .list .checknum {display: inline-block;}
form .list.last{border-bottom:none;padding-bottom:0;position:relative;z-index:1;text-align:center;}
form .list.last p{display:inline-block}
form .list.last p input{width:250px;text-align:center;display:inline-block;color:#fff;cursor:pointer;position:relative;border:none;background:#0971f2;transition:all linear .2s;border: 1px solid #0971f2;}
form .list.last p input:hover{background:transparent;}
form .list.last > div{overflow: initial;text-align: center;} 
form .list.code img{margin-top:8px}

form .btn a{padding: 5px 50px;color: #777;display: inline-block;background: #f1f1f1;font-weight: bold;transition: ease .3s;}
form .btn a:hover{background: #74ab2b;color: #fff;}

/*sidenav*/
#sideNav ul.Cate >li{position: relative;width: 100%;border-bottom: 1px solid #d2d2d2;}
#sideNav ul.Cate >li a{padding: 10px 5px;text-align: left;}
#best-product,#contact-nav,#contact-extra,#sideNav #youtube{overflow: hidden;padding: 10px 0px;}
#sideNav #contact-extra ul.Cate >li{padding: 10px 5px;}
/* order orderWrap */
#order{margin:0 auto}
#order .orderWrap{margin-bottom:15px}
#order .orderWrap .orderList{overflow:hidden;position:relative;padding:10px 0;border-bottom:1px #8e8e8e dashed}
#order .orderWrap .orderList p{width:15%;float:left}
#order .orderWrap .orderList p:first-child{width:40%}
#order .orderWrap .orderList p label{padding-bottom:5px;border-bottom:2px #000 solid;text-align:center;display:none}
#order .orderWrap .orderList:first-child p label{display:block}
#order .orderWrap .orderList p b{margin:5px 20px;display:block;line-height:100px;text-align:center}
#order .orderWrap .orderList p:first-child b{text-align:left}
#order .orderWrap .orderList p b a{color:#000}
#order .orderWrap .orderList p b img{margin-right:15px;height:100px;max-width: 160px;}
#order .orderWrap .orderList p input[type="text"]{padding:0 10px;width:80px;text-align: center; border:1px #ddd solid;font-size:16px}
#order .orderWrap .orderList p input[type="button"]{margin-left:0;padding:5px 10px;background:#E33339;border-color:#901c1c;font-size:14px;font-weight:400;color:#fff}
#order .orderWrap .orderList p input[type="button"]:hover{background:rgba(227, 51, 57, .8)}
#order #orderTotal p{margin:10px 0;text-align:right}
#order .button{margin:15px 0 30px;text-align:center;display: flex;justify-content: space-between;}
#order .button p.link{text-align:right}
#order .button p{width:49%;display:inline-block}
#order .button p a{padding:10px 20px;background:#8c7d68;display:inline-block;font-weight:400;color:#fff}
#order .button p.link a{background:#e17b60}
#order .button p a i{vertical-align:initial}
#order .button p a:hover{opacity:.7}
#order .orderWrap .orderList p b img{margin-right:15px;height:100px;max-width: 160px;}
#order .orderWrap .orderList p b span{display: inline-block;max-width:calc(100% - 180px);line-height: 1;}
.wrap input[type="number"], .wrap input[type="text"], .wrap textarea{box-sizing: border-box;}
.contact-form #sideNav #fb-wrap, #sideNav #youtube{width: 100%;}
#order .btn a{background:#0d3275;color: #fff;}
#order .btn a#btnClean{background: #E33339;}
#order .btn a i{margin-right: 5px;}

/*按鈕*/
.del-item{position: relative;}
#order .orderWrap .orderList p b.delbtn{
	line-height: initial;
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    text-align: center;
    display: inline-block;
}
#order .orderWrap .orderList:first-child p b.delbtn{top: 75px;}



/* order-form*/
#order-contact-form{padding: 0 15px;}


/* order checkoutBox */
#order .checkoutBox { padding: 20px; background: #1f4da1; }
#order .checkoutBox p { margin: 10px 0; text-align: right; font-size: 18px; color: #fff; }
#order .checkoutBox .button { text-align: right; }
#order .checkoutBox .button a { margin-top: 15px; padding: 5px 30px; background: #404040; border-radius: 20px; display: inline-block; color: #fff; }
#order .checkoutBox .button a.backP { margin-left: 10px; background: #0098e4; }
#order .checkoutBox .button a i { margin-left: 6px; vertical-align: baseline; }

@media screen and (max-width:1280px) {
	#sideNav{
		display: flex;
    	flex-wrap: wrap;
    	padding: 60px 0px;
	}
	#sideNav ul.Cate li a{padding: 0px;margin-right: 5px;color: #737373;font-size: 14px;}
	#sideNav #best-product, #sideNav #contact-nav, #sideNav #contact-extra, #sideNav #youtube{width: 25%;}
	#sideNav #best-product ul.Cate li, #sideNav #contact-nav ul.Cate li, #sideNav #contact-extra ul.Cate li{
		padding: 10px 15px;
    	position: relative;
    	color: #737373;
    	width: 95%;
	}
	#sideNav #best-product ul.Cate li::after, #sideNav #contact-extra ul.Cate li::after{
		content: "";
	    position: absolute;
	    left: 2px;
	    top: 50%;
	    transform: translateY(-50%);
	    width: 7px;
	    height: 1px;
	    background: #333
	}
	#sideNav #contact-nav ul.Cate li a i {
	    position: absolute;
	    left: 2px;
	    top: 50%;
	    transform: translateY(-50%);
	}
	#sideNav ul.Cate li a{margin-left: 5px;color: #737373;margin-right: 0px}
	.contact-form,#order{width:100%}
	.contact-box{display: block;}
	.contact-box .contText,.contact-box #sideNav{width: 100%;}
}

@media screen and (max-width: 1024px) {
	
	.contType, .contact-form{float: none;width: 100%;}
	
	
	#sideNav #contact-extra, #sideNav #youtube{padding-top: 60px;}

	#sideNav #contact-extra ul.Cate >li{padding: 10px 15px; color: #737373;}
	#sideNav .ykln .ykln2{margin: 0px 20px 0px 0px;}
	#sideNav ul.Cate >li a{padding: 0px;}
	#sideNav #best-product ul.Cate li, #sideNav #contact-nav ul.Cate li, #sideNav #contact-extra ul.Cate li{padding: 10px 15px;}
	#sideNav #best-product ul.Cate li::after, #sideNav #contact-extra ul.Cate li::after{
			content: "";
		    position: absolute;
		    left: 2px;
		    top: 50%;
		    transform: translateY(-50%);
		    width: 7px;
		    height: 1px;
		    background: #333;
		}
	#sideNav #best-product, #sideNav #contact-nav, #sideNav #contact-extra, #sideNav #youtube {
	    width: 50%;
	    padding-top: 40px;
	}
}
@media screen and (max-width: 960px) {
	.contType, .contact-form { width: 100%; }
	.contType > div { margin-right: 10px; float: left; width: calc(50% - 10px); }
	.contType > div a { padding-left: 95px; }
}
@media screen and (max-width: 768px) {
form .list p input,form .list p textarea{width:calc(100% - 20px - 2px);margin-top:10px}
form .list p label{width:100%}
.step ul li{padding:0 30px}
form .list.code img{margin-top:18px;}
#order .orderWrap .orderList{border-bottom:0}
#order .orderWrap .orderList p,#order .orderWrap .orderList p:first-child{float:none;width:100%;border-bottom:1px #8e8e8e dashed}
#order .orderWrap .orderList p label,#order .orderWrap .orderList:first-child p label,#order .orderWrap .orderList p b{margin:0;padding:10px 0;width:49%;display:inline-block;line-height:33px;border-bottom:0}
#order .orderWrap .orderList p:first-child label,#order .orderWrap .orderList p:first-child b{width:100%;text-align:center}
#order .orderList p b a{height:auto}
#order .orderWrap .orderList p:first-child label{border-bottom:2px #0c6b69 solid}
#order .orderWrap .orderList p b img{margin:0 auto 10px;max-width:100%;height:auto!important;display:block}
#order .orderWrap .orderList p:first-child label{border-bottom: 2px #79551a solid;}
}
@media screen and (max-width: 640px) {
	.contType > div { margin-right: 0; width: 100%; }
	#order .orderList p label, #order .orderList:first-child p label{background: #efefef;}
}
@media screen and (max-width: 480px) {
	form .list{padding:20px 0}
	#order .orderWrap > div { width: calc(100% - 20px); }
	#best-product, #contact-nav, #contact-extra, #sideNav #youtube{width: 100%;padding: 30px 0px;}
	#sideNav #best-product, #sideNav #contact-nav, #sideNav #contact-extra, #sideNav #youtube{width: 100%;}
}