#content { padding-bottom: 40px; }
#content .workframe {overflow: hidden;width: 1140px;}

/* waylink */
.waylink ol li { display: inline-block; color: #868181; }
.waylink ol li a { color: #2b2a2a; }
.waylink ol li:last-child a { color: #2b2a2a; }
.waylink ol li:after { margin: 0 10px; content: "/"; }
.waylink ol li:last-child:after { content: ""; }

/* leftBox */
.contactBox {
    overflow: hidden;
}
.contactBox article{
    float: left;
    width: 45%;
}
.contactBox article span{
    vertical-align: baseline;
}
.leftBox .pagetitle { font-size: 50px; }

/* form */
#form1 {max-width: inherit;background: none;padding: 0;float: right;width: 50%;}
#form1 input , #form1 textarea , #form1 select { border-bottom: 2px #000 solid; }
#form1 .ffl-floated .ffl-label { color: #252627; }
#form1 input:focus ,
#form1 textarea:focus ,
#form1 select:focus { border-bottom-color: #000; }
#form1 .send a {padding: 10px 30px;background: #dc9d33;box-shadow: 1px 1px 3px #b8b8b8;border-radius: 0;display: inline-block;text-align: center;font-size: 14px;color: #fff;}

/* rightBox */
.rightBox { float: right; width: 300px; }
.rightBox >div { margin-bottom: 15px; }
.rightBox >div h3 { font-size: 20px; }
.rightBox >div ul li { margin: 10px 20px; }
.rightBox >div ul li a { font-size: 16px; color: #000; }
.rightBox >div ul li i { margin-right: 5px; width: 30px; display: inline-block; text-align: center; }
.rightBox .youtube { position: relative; z-index: 1; }
.rightBox .youtube a.photo { position: relative; width: 250px; }
.rightBox .youtube a.photo img { width: 100%; height: 170px; background: rgba(0, 0, 0, 0.6); }
.rightBox .youtube a.photo svg { position: absolute; width: 25px; height: 25px; top: calc((100% - 25px) / 2); left: calc((100% - 25px) / 2); -webkit-animation: playsvg 2s infinite alternate ease-in-out; animation: playsvg 2s infinite alternate ease-in-out; z-index: 2; }
.rightBox .youtube a.photo .line { position: absolute; width: 100%; height: 2px; background: #fff; display: block; top: 0; left: 0; -webkit-animation: line1 5s infinite ease-out; animation: line1 5s infinite ease-out; opacity: 0; }
.rightBox .youtube a.photo .line.right { width: 2px; height: 100%; left: auto; right: 0; -webkit-animation-name: line2; animation-name: line2; -webkit-animation-delay: 0.6s; animation-delay: 0.6s; }
.rightBox .youtube a.photo .line.bottom { top: auto; bottom: 0; -webkit-animation-name: line3; animation-name: line3; -webkit-animation-delay: 1.2s; animation-delay: 1.2s; }
.rightBox .youtube a.photo .line.left { width: 2px; height: 100%; -webkit-animation-name: line4; animation-name: line4; -webkit-animation-delay: 1.8s; animation-delay: 1.8s; }
.rightBox #category-nav ul li a:before { margin-right: 5px; width: 30px; display: inline-block; text-align: center; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "\f0da"; }

/* order */
#order .button { text-align: right; }
#order .button a { padding: 5px 20px; display: inline-block; background: #4a4949; color: #fff; font-size: 16px; }
#order .button a.backP { margin-left: 20px; background: #3e5c9c; }


@media screen and (max-width: 1140px) {
#content .workframe{
    width: 90%;
}
}
@media screen and (max-width: 900px) {
	.leftBox , .rightBox { margin: 0 auto 55px; float: none; width: 90%; }
	.rightBox >div { width: calc((100% - 10px) / 2); display: inline-block; }
}
@media screen and (max-width: 768px) {
	#sub-banner a.photo img { max-width: inherit; width: 160%; }
	.rightBox .youtube a.photo { width: 90%; }
	.leftBox .pagetitle { font-size: 40px; }
	.contactBox article{
    float: none;
    width: 100%;
    margin-bottom: 20px;
}
	#form1{
    float: none;
    width: 100%;
}
}
@media screen and (max-width: 640px) {
	.rightBox { text-align: center; }
	.rightBox >div { width: 90%; }
	.rightBox .youtube a.photo { width: 250px; }
}
@media screen and (max-width: 480px) {
	.leftBox .pagetitle { font-size: 30px; }
}