@charset "utf-8";
/* CSS Responsive public */

@media only screen and (max-width:1600px){
    .productsAC p {max-height: 316px;}
	.contact::before {left: 20px; right: 20px;}
}
/*1600px_spc_end*/


@media only screen and (max-width:1400px){
    .productsAC p {max-height: 248px;}
}
/*1400px_nb_end*/


@media only screen and (max-width:1200px){
    .menu {right: 80px;}
	.sjj_nav_ul > li {padding: 0 23px!important;}
	.ind_ACL > div > div {padding-bottom: 93.1%;}
	.products > div {width: 100%; flex-direction: row;}
	.productsA, .productsB {width: 50%; padding-bottom: 50%;}
	.productsA::before {content: ''; position: absolute; height: 0; width: 0; top: 50%; right: -20px; left: 0; bottom: 0; margin-top: -20px; margin-left: auto; border: 20px solid transparent; border-right: 0; border-left-color: #e1ebf9; z-index: 99;}
	.products > div:nth-child(2), .products > div:nth-child(5), .products > div:nth-child(8), .products > div:nth-child(11), .products > div:nth-child(14), .products > div:nth-child(17), .products > div:nth-child(20) {flex-direction:row;}
	.products > div:nth-child(2) .productsA::before, .products > div:nth-child(5) .productsA::before, .products > div:nth-child(8) .productsA::before, .products > div:nth-child(11) .productsA::before, .products > div:nth-child(14) .productsA::before, .products > div:nth-child(17) .productsA::before, .products > div:nth-child(20) .productsA::before {content: ''; position: absolute; height: 0; width: 0; top: 50%; right: -20px; left: 0; bottom: 0; margin-top: -20px; margin-left: auto; border: 20px solid transparent; border-right: 0; border-left-color: #e1ebf9; z-index: 99;}
	.products > div:nth-child(2n+2) {flex-direction: row-reverse!important; z-index: 99!important;}
	.products > div:nth-child(2n+2) .productsA::before {content: ''; position: absolute; height: 0; width: 0; top: 50%; right: auto; left: -20px; bottom: 0; margin-top: -20px; margin-left: auto; border: 20px solid transparent; border-left: 0; border-right-color: #e1ebf9; z-index: 99;}
	.productsAC p {max-height: 344px;}
	.machining > div {width: 40%; margin: 1% 5% 8.7% 5%;}
	.contact {padding: 35px 60px;}
	.contact > div:nth-child(2) {padding: 5px 0 0 35px;}
}
/*1200px_xl_end*/


@media only screen and (max-width:992px){
    .mobile {display:block;} .pc {display:none;}
    .bg_saf {background-attachment: scroll;}
    .bg_bsc {-webkit-background-size: none; -moz-background-size: none; -o-background-size: none; background-size: none;}
    .a_nohover {pointer-events: initial;}
    .rotate_360:hover {text-decoration:none; -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg); -ms-transform:rotate(0deg); transform:rotate(0deg);}
    .alpha_60:hover {filter:alpha(opacity=100);Opacity:1.0;}
    .scale_3:hover, .scale_05:hover {transform: scale(1.0, 1.0);}
    .translateY_t075:hover {-moz-transform:translateY(0); -webkit-transform:translateY(0); -o-transform:translateY(0); -ms-transform:translateY(0); transform:translateY(0); transition: all 0.5s ease 0s;}
    .flash-line-hover:hover::before {-webkit-animation-name: none!important; animation-name: none!important;}
    #content {padding: 40px 0 0 0;}
    .logo, .hideUp .logo {margin-top: -20px;}
	.logo img, .hideUp .logo img {width: 33px; height: 40px!important;}
	.logo div, .hideUp .logo div {font-size: 12px; padding: 0px 0 0 10px; letter-spacing: 1.2px;}
	.logo div span, .hideUp .logo div span {font-size: 14px;}
    .top-barC, .hideUp .top-barC {height: 50px;}
	.links {right: 70px;}
	.ind_ACL > div > div {padding-bottom: 91.51%;}
	.ind_BCL > div {width: 22.75%; margin: 0 3% 4% 0;}
	.footer {padding: 0 0 7.778% 0; }
	.footer::before {background-size: cover;}
	.footerC > ul > li {width: 33.33%; padding: 0 30px 0 20px;}
	.footerC > ul > li:nth-child(1) {width: 100%; padding: 0 0 10px 0; margin-bottom: 30px;}
	.footerC > ul > li:nth-child(1) {border-right: 0; border-bottom: 1px solid #f0f2d9;}
	.aboutA > div:nth-child(1) {width: 45%;}
	.aboutA > div:nth-child(2) {width: 55%; padding: 25px;}
	.aboutB div:nth-child(1) {justify-content: flex-start; padding: 0 20px 0 0;}
	.aboutB div:nth-child(2) {justify-content: flex-end; padding: 0 0 0 20px;}
	.productsAC p {max-height: 248px;}
	.productsC > div:nth-child(1) {width: 100%; height: auto; padding-bottom: 0;}
	.productsC > div:nth-child(1) > div {position: relative;}
	.productsC > div:nth-child(2) {width: 100%; left: 0px; padding: 30px 0px 0 25px;}
	.productsC > div:nth-child(2)::before {left: 0px;}
	.productsC > div:nth-child(2) p {margin-bottom: 25px;}
	.productsD > div, .productsD > div:nth-child(3n+3) {width: 46%; margin: 5.84% 8% 0 0; padding-bottom: 29.414%;}
	.productsD > div:nth-child(2n+2), .productsD > div:last-child {margin: 5.84% 0% 0 0;}
	.machining > div {width: 47%; margin: 1% 6% 7.8% 0%;}
	.machining > div:nth-child(2n+2), .machining > div:last-child {margin: 1% 0% 7.8% 0%;}
	.contact > div:nth-child(1) {width: 45%;}
	.contact > div:nth-child(2) {width: 55%;}
}
/*992px_lg_end*/


@media only screen and (max-width:768px){
	.ind_ACL > div {width: 50%;}
	.ind_ACL > div > div {padding-bottom: 93.4%;}
	.footerC > ul > li {width: 100%; padding: 20px 0px; border-right: 0; border-bottom: 1px solid #f0f2d9;}
	.footerC > ul > li:nth-child(1) {width: 100%; padding: 0 0 10px 0; margin-bottom: 10px;}
	.copyright h6 {width: 100%; margin-bottom: 20px; text-align: center;}
	.copyright > div > div {width: 100%; text-align: center;}
	.main {padding: 64px 0 87px 0;}
	.mainT {margin: 0 auto 48px auto;}
	.mainT p {padding: 25px 0 0 0;}
	.about {padding: 0 20px 20px 20px;}
	.aboutA > div:nth-child(1) {width: 100%;}
	.aboutA > div:nth-child(1) img {position: relative; height: auto!important; max-width: 100%!important; width: 100%;}
	.aboutA > div:nth-child(2) {width: 100%; padding: 25px;}
	.productsAC p {max-height: 146px;}
	.productsD > div > div.photo::after {content: ''; width: 40px; height: 40px;}
	.productsD > div > div.movie::after {content: ''; width: 70px; height: 70px; margin: -35px 0 0 -35px;}
	.machining > div > h3 {padding: 25px 10px;}
	.machiningSub a::after {width: 35px; height: 35px;}
	.machiningSub a:hover::after {width: 64px; height: 64px; margin: 0 0 -32px -32px;}
	.news > div {padding-bottom: 50px; margin-bottom: 30px;}
	.news > div > div:nth-child(1) {width: 55%;}
	.news > div > div:nth-child(2) {width: 45%; padding: 0 0 0 20px;}
	.news > div > div:nth-child(2) h3::after {margin: 10px 0 10px 0;}
	.news > div > div:nth-child(2) p {margin-bottom: 10px;}
	.contact > div:nth-child(1) {width: 100%;}
	.contact > div:nth-child(1) iframe {height: 375px;}
	.contact > div:nth-child(2) {width: 100%; padding: 40px 0 0 0;}
	.row_d {justify-content: center;}
	.row_d a {margin: 0 12px;}
}
/*768px_md_end*/


@media only screen and (max-width:576px){
	.ind_ACL > div > div {padding-bottom: 91%;}
	.ind_B {position: relative; top: -30px; background-size: cover; padding: 17.364% 0 26.044% 0;}
	.ind_BCL > div, .ind_BCL > div:nth-child(4n+4) {width: 48%; margin: 0 4% 10% 0;}
	.ind_BCL > div:nth-child(2n+2), .ind_BCL > div:last-child {margin: 0 0% 10% 0;}
	.footer {padding: 2.628% 0 7.778% 0; }
	.footer::before {top: -30px;}
	.main {padding: 48px 0 30px 0;}
	.mainT {margin: 0 auto 40px auto;}
	.mainT p {padding: 20px 0 0 0;}
	.aboutB div:nth-child(1) {width: 100%; justify-content: center; padding: 0; margin-bottom: 40px;}
	.aboutB div:nth-child(2) {width: 100%; justify-content: center; padding: 0;}
	.products > div {width: 100%; flex-direction: column;}
	.productsA, .productsB {width: 100%; padding-bottom: 100%;}
	.productsA::before {content: ''; position: absolute; height: 0; width: 0; top: auto; left: 50%; bottom: -20px; margin-left: -20px; border: 20px solid transparent; border-bottom: 0; border-top-color: #e1ebf9; z-index: 99;}
	.products > div:nth-child(2) .productsA::before, .products > div:nth-child(5) .productsA::before, .products > div:nth-child(8) .productsA::before, .products > div:nth-child(11) .productsA::before, .products > div:nth-child(14) .productsA::before, .products > div:nth-child(17) .productsA::before, .products > div:nth-child(20) .productsA::before {content: ''; position: absolute; height: 0; width: 0; top: auto; left: 50%; bottom: -20px; margin-left: -20px; border: 20px solid transparent; border-bottom: 0; border-top-color: #e1ebf9; z-index: 99;}
	.products > div:nth-child(2), .products > div:nth-child(5), .products > div:nth-child(8), .products > div:nth-child(11), .products > div:nth-child(14), .products > div:nth-child(17), .products > div:nth-child(20) {flex-direction:column;}
	.products > div:nth-child(2n+2) {flex-direction: column!important;}
	.products > div:nth-child(2n+2) .productsA::before {content: ''; position: absolute; height: 0; width: 0; top: auto; left: 50%; bottom: -20px; margin-left: -20px; border: 20px solid transparent; border-bottom: 0; border-top-color: #e1ebf9; z-index: 99;}
	.productsAC {max-width: 100%;}
	.productsAC p {max-height: 257px;}
	.productsD > div > div.photo::after {content: ''; width: 26px; height: 26px;}
	.productsD > div:hover > div.photo::after {content: ''; width: 40px; height: 40px; margin: 0 0 -20px -20px;}
	.productsD > div > div.movie::after {content: ''; width: 60px; height: 60px; margin: -30px 0 0 -30px;}
	.productsD > div:hover > div.movie::after {content: ''; width: 70px; height: 70px; margin: -35px 0 0 -35px;}
	.machining > div > h3 {padding: 15px 10px;}
	.machiningSub a::after {width: 25px; height: 25px;}
	.machiningSub a:hover::after {width: 54px; height: 54px; margin: 0 0 -27px -27px;}
	.news > div {justify-content: center; padding-bottom: 40px;}
	.news > div > div:nth-child(1) {width: 100%;}
	.news > div > div:nth-child(1) div:nth-child(1) {width: 435px; padding-bottom: 300px;}
	.news > div > div:nth-child(2) {width: 100%; padding: 20px 0 0 0px;}
	.contact > div:nth-child(1) iframe {height: 325px;}
}
/*576px_sm_end*/


@media only screen and (max-width:480px){
	.ind_ACL > div > div {padding-bottom: 89%;}
	.main {padding: 40px 0 30px 0;}
	.mainT {margin: 0 auto 30px auto;}
	.productsD > div > div.photo::after {content: ''; width: 22px; height: 22px;}
	.productsD > div:hover > div.photo::after {content: ''; width: 30px; height: 30px; margin: 0 0 -15px -15px;}
	.productsD > div > div.movie::after {content: ''; width: 50px; height: 50px; margin: -25px 0 0 -25px;}
	.productsD > div:hover > div.movie::after {content: ''; width: 60px; height: 60px; margin: -30px 0 0 -30px;}
	.machiningSub a::after {width: 20px; height: 20px;}
	.machiningSub a:hover::after {width: 48px; height: 48px; margin: 0 0 -24px -24px;}
	.contact > div:nth-child(1) iframe {height: 255px;}
	.row_d a {width: 46%!important; margin: 0 2%;}
}
/*480px_xs_end*/


@media only screen and (max-width:475px){
	.news > div > div:nth-child(1) div:nth-child(1) {width: 100%; padding-bottom: 68.968%;}
}
/*475px_xs_end*/


@media only screen and (max-width:430px){
    .ind_ACL > div {width: 100%;}
	.ind_ACL > div > div {padding-bottom: 94.4%;}
	.productsAC p {max-height: 194px;}
	.productsC > div:nth-child(2) {padding: 30px 25px 25px 25px;}
	.productsC > div:nth-child(2) p {padding: 0;}
	.btn_b:link, .btn_b:visited {width: 100%;}
	.productsD > div, .productsD > div:nth-child(3n+3), .productsD > div:nth-child(2n+2), .productsD > div:last-child {width: 100%; height: auto!important; margin: 7% 0% 0 0; padding-bottom: 0;}
	.productsD > div > div {position: relative;}
	.productsD > div > div.photo::after {content: ''; width: 30px; height: 30px;}
	.productsD > div:hover > div.photo::after {content: ''; width: 50px; height: 50px; margin: 0 0 -25px -25px;}
	.productsD > div > div.movie::after {content: ''; width: 60px; height: 60px; margin: -30px 0 0 -30px;}
	.productsD > div:hover > div.movie::after {content: ''; width: 70px; height: 70px; margin: -35px 0 0 -35px;}
	.machining > div, .machining > div:nth-child(2n+2), .machining > div:last-child {width: 100%; margin: 1% 0% 7.8% 0%;}
	.machining > div > h3 {padding: 20px 10px;}
	.machiningSub_24 > div, .machiningSub_24 > div:nth-child(2n+2), .machiningSub_33 > div, .machiningSub_33 > div:nth-child(2n+2), .machiningSub_42 > div, .machiningSub_42 > div:nth-child(2n+2), .machiningSub_222 > div, .machiningSub_222 > div:nth-child(3n+3) {width: 100%; margin: 0 0% 5% 0;}
	.machiningSub a::after {width: 30px; height: 30px;}
	.machiningSub a:hover::after {width: 54px; height: 54px; margin: 0 0 -27px -27px;}
	.news > div > div:nth-child(2) .btn_c:link, .news > div > div:nth-child(2) .btn_c:visited {width: 100%; height: 37px;}
	.contact {padding: 25px 40px;}
}
/*430px_xs_end*/