@import url(fonts.css);
@import url(Flex.css);
* { -webkit-text-size-adjust: auto !important; -ms-text-size-adjust: auto !important; }/*Chrome默认字体最小为12px，*/
html, body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; margin: 0; padding: 0;}/*字体抗锯齿渲染*/
body { font: 100%/1.5 'PingFang SC', 'Microsoft YaHei', 'Tahoma', 'Arial', sans-serif; color: #1a1a1a; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
div, h1, h2, h3, h4, h5, h6, /*b, em, i, span,*/ ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td, input, textarea, button { font-size:100%; font-style: normal; font-weight: normal; margin: 0; padding: 0; }
table { border-collapse: collapse; border-spacing:0 }/* 解决单元格双线问题 */
table,th,td{word-break:break-all;}/* 解决单元格纯数字或字母不自动换行 */
ul, ol, dl, li, dt, dd { list-style: none; }
input, textarea, button { background:none; border: none; outline: none; text-decoration: none; resize: none; font: 100% 'PingFang SC', 'Microsoft YaHei', 'Tahoma', 'Arial', sans-serif;  }
input, button, textarea { -moz-appearance:none; -webkit-appearance: none !important; appearance:none; } /*去除input默认样式*/ 
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus { /*-webkit-text-fill-color: #fff;*/ -webkit-transition: background-color 43200s ease-in-out 0s; transition: background-color 43200s ease-in-out 0s; }/*去除自动填充后默认背景色*/
input:autofill, input:autofill:hover, input:autofill:focus {/* -webkit-text-fill-color: #fff;*/  -webkit-transition: background-color 43200s ease-in-out 0s; transition: background-color 43200s ease-in-out 0s;}/*去除自动填充后默认背景色*/
input,textarea,select  { border:solid 1px #ccc; -webkit-border-radius: 2px; border-radius: 2px; box-sizing:border-box; }/*自定义边框*/
input:focus, input:hover, 
textarea:focus, textarea:hover, select:focus, select:hover{border: 1px solid #e94709;}/*选中后及鼠标上移*/
select{outline: none;}/*去除这个选中的边框样式*/
/*初始颜色*/
input::-webkit-input-placeholder { color: rgb( 0,0,0,.5); }
input::-moz-placeholder { color: rgb( 0,0,0,.5); } /* firefox 19+ */
input:-ms-input-placeholder { color: rgb( 0,0,0,.5); } /* ie */
input:-moz-placeholder { color: rgb( 0,0,0,.5); }
a {color: inherit; outline: none; text-decoration: none; cursor:pointer;}
a:hover { color: #e94709; }
a:focus, botton:focus, input:focus, textarea:focus  { outline: none; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent; }/*去掉高光样式：*/
a:hover img { border: none; }
img, video {display:block; max-width: 100%; height: auto; border: none; outline: none; }
.clearfix { clear: both; zoom: 1; *zoom:1;}
.clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; overflow: hidden; }

/********* public css *********/
body{ min-width: 320px; padding-top:90px; position: relative; }
.w-auto{ width: 100%; max-width:1440px; margin: 0 auto; padding: 0 16px; position: relative; box-sizing:border-box; }

/********* header css *********/
header { height: 90px; width: 100%; background:#fff; position: fixed; top:0; z-index:999; box-shadow: 0px 0px 18px rgb(0 0 0 / 10%);}
header .w-auto{ height:100%; }
.logo, .logo a{ height:100%; }
.logo img{ width:auto; height:86%;}

/*** nav css ***/
.nav{ display: box; display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex; display: flex;-webkit-box-orient: horizontal;-webkit-flex-flow: row wrap; -moz-flex-flow: row wrap; -ms-flex-flow: row wrap; -o-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; flex: auto; height:100%; } 
.nav > li{ display: box; display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex; display: flex;-webkit-box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; font-size: 112.5%; height:100%; position:relative; text-transform:Capitalize;}
.nav > li:hover,.nav > li.on{ background:#e94709; color:#fff;}
.nav > li > a { display: box; display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex; display: flex;-webkit-box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center;height:100%; position:relative; padding:0 1.6vw; cursor:pointer;}
.nav > li:hover > a,.nav > li:hover > .has:after {color:#fff;}

/*** search css ***/
.Lang-pc{ position:relative; padding-left:2em; line-height: normal; }
.Lang-pc:before { content: ""; position:absolute; top:50%; left:0; width:2em; height:2em; background:url(../images/lang.gif) no-repeat center center #e94709; background-size:cover;
-webkit-border-radius: 100%; border-radius: 100%; -webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);-o-transform:translate(0,-50%);transform:translate(0,-50%);}
.Lang-pc a { font-size:87.5%; font-weight:400; color:#999; margin-left:.5em; display: block; }
.Lang-pc a.on{ color:#e94709; font-weight:900; }
.Lang-mob{ display:none; }

/********* footer css *********/
footer{ line-height:2; color:#fff; background:rgba(233, 71, 9, 1); padding:2em 0; }
footer .z-tit{ font-size:125%; font-weight:600; width:100%; }
footer .L { width:45%; }
footer .R { width:7%;}
footer .tit{ display:block; font-weight:400}
footer p{ position:relative; padding-left:1.25em; box-sizing:border-box; }
footer p em{ position: absolute; top:.65em; left:0; text-align:center; width:1.25em; font-size: 87.5%; }
footer p span{ display: inline-block; width: 3.2em; }
footer p::before{content: ""; font:900 87.5% "Awesome5"; color:#fff; text-align:center; width:1.25em; position:absolute; top:.65em; left:0;}
footer p:nth-child(1)::before{ content: "\f3c5"; }
footer p:nth-child(2)::before{ content: "\f0e0"; }
footer p:nth-child(3)::before{ content: "\f879"; }
footer p:nth-child(4)::before{ content: "\f879"; }
footer a:hover{ color:#000;}
.copyright{ font-size:87.5%;color:#888; background:#000; text-align:center; padding:.5em 0; border-top:solid 1px #1f1f1f; }
.copyright span{ margin:0 .5em;}
/* 返回顶部 */
#goTop{ display:none; background:rgba(0, 0, 0, .75); color:#fff; position: fixed; z-index:99; right:2em; bottom:2em; width: 2.5em; height: 2.5em; line-height: 2.8em; border-radius:4em; cursor:pointer; text-align:center;}
#goTop::after {content:"\f106"; font:150% "Awesome5";}
#goTop:hover{ background:rgba(0, 0, 0, 1); color:#fff;}

@media (min-width: 1921px) {
body{ font-size: 0.83333vw}
header { height: 4.6875vw;}
.w-auto{ max-width: 75%; }
}
@media (max-width: 1440px) {
#goTop{ right: 4px; bottom: 4px; }
}

@media (max-width: 1280px) {
footer .M { margin: 0 2%;}
}

@media (min-width:801px) and (max-width:1023px) {
.logo img {height: 72%;}
.nav > li > a{ padding: 0 1.2vw;}
}

@media (max-width: 800px) {
body{ padding-top:60px;}
header { height: 60px; }
header .w-auto{ position:static}
.menuBtn { position: absolute; right:1em; z-index:99; width: 28px; height: 28px; padding: 0; cursor: pointer; transition: .3s; -ms-transition: .3s; -moz-transition: .3s; -webkit-transition: .3s; -o-transition: .3s }
.menuBtn b { display: block; height: 3px; background: #e94709; margin: 3px 0 6px; -webkit-border-radius: 2px; -moz-border-radius: 2px; -o-border-radius: 2px; border-radius: 2px; -ms-transition: .3s; -moz-transition: .3s; -webkit-transition: .3s; -o-transition: .3s; transition: .3s;  }
.menuBtn.open b { display: none; margin: 0; position: absolute; top: 50%; width: 30px }
.menuBtn.open b:first-child { display: block; transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg) }
.menuBtn.open b:last-child { display: block; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg) }
.nav{ display:block; width:100%; height:100%; position:fixed; top:60px; left:-120%; z-index:98; background: rgba(255,255,255,.9); padding:12px; text-align:left;-o-transition: .3s; -ms-transition: .3s; -moz-transition: .3s; -webkit-transition: .3s; transition:.3s; } 
.nav.show{ left:0;box-shadow: 0px 10px 10px rgb(0 0 0 / 25%); box-sizing:border-box} 
.nav > li{ height: auto; display:block; padding:1em; margin-right:0; border-bottom:solid 1px rgba(0,0,0,.5); }
.nav > li > a{  display: inline-block }
.nav > li:hover{ background:none}
.nav > li:hover > a,.nav > li:hover > .has:after {color:#000;}

.Lang-pc{ display: none}
.Lang-mob{ display: block; margin-right:2.5em; font-size:87.5%; color: #fff; width:2em; height:2em; line-height:2em; text-align:center; background: -webkit-linear-gradient( 90deg, #e94709, #e08218); border-radius: 50%; box-sizing:border-box;}

footer .L { width:100%; }
footer .R { width:100%;}
footer .footCon{ margin-top: 1em; }
footer .R img{ margin: 0 auto; width: 6em; }
.copyright span{ display:block}
#goTop{ width: 2em; height: 2em; line-height: 2.2em; }
#goTop::after { font-size: 125%; }

}

/********* index *********/
.banner{ width:100%; position: relative; overflow:hidden}
.banner:after {content: ""; display: block; padding-bottom: 42%;}
.banner video {position: absolute;top: 0;bottom: 0;left: 0;right: 0; width: 100%;max-width: inherit !important; height: 100%; object-fit: cover; object-position: center;}

/* public index */
.section{ padding:4em 0; position:relative; }
.sec-tit{ width:100%; text-align:center; margin-bottom:2em; position:relative; }
.sec-tit span{ display:inline-block; font-size: 175%; color:#fff; padding:.1em 1.5em .125em 1.5em; background:rgba(233, 71, 9, 1); position:relative; z-index:2; border-radius: 2em;text-transform:Capitalize}
.sec-tit::before,.sec-tit::after  { content: ""; display:block; width:50%; height:1px; background:rgba(233, 71, 9, 1); position:absolute; top:calc(50% - 1px); -webkit-transform:translate(0,calc-(50% - 1px));-ms-transform:translate(0,calc-(50% - 1px));-o-transform:translate(0,calc-(50% - 1px));transform:translate(0,calc-(50% - 1px));}
.sec-tit::before{ left:0; }
.sec-tit::after { right:0; }
.more { display: inline-block; background: rgba(233, 71, 9, 1); font-size:87.5%; color: #fff; padding: .5em 1.5em; margin-top: 2em; -webkit-transition: .3s; transition: .3s; -webkit-border-radius: 1.5em; border-radius: 1.5em; text-transform:Capitalize; }
.more::after { content: "\f178"; font:100 100% "Awesome5"; vertical-align: middle; margin-left: .25em;}
.more:hover { color: #fff; -webkit-transform: scale(1.05); transform: scale(1.05); }

/* About */

.iAbout .txt-img { width: 100%; margin-top: 1em;}
.iAbout .txt-img .txt{ width: calc(50% - .5em); position: relative; }
.iAbout .txt-img .txt p{ font-size: 125%; padding: .5em 0;}
.iAbout .txt-img .txt p strong{ display: inline-block; width: 3em; font-weight: bold; vertical-align: top; }
.iAbout .txt-img .txt p span{ display: inline-block; font-style: normal; width: calc(100% - 3em); }
.iAbout .txt-img .pic{ width: calc(50% - .5em); position: relative; }
.iAbout .txt-img .pic::after { content: ""; display: block; padding-bottom: 60%;}
.iAbout .txt-img .pic img { position: absolute; top: 0;bottom: 0;left: 0;right: 0;width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: 4px; overflow:hidden; box-sizing:border-box;}

/* Exhibition */
.iExh { padding: 0; }
.iExh .swiper-container .swiper-wrapper{
    -webkit-transition-timing-function: linear; /*之前是ease-out*/
    -moz-transition-timing-function: linear;
    -ms-transition-timing-function: linear;
    -o-transition-timing-function: linear;
    transition-timing-function: linear;
}/* 解决匀速无缝滚动 */

/* iAuto */
.iAuto { padding-bottom: 0; }
.iAuto ul { width: 100%; margin-top: -1em;}
.iAuto li{ width: calc(50% - .5em); margin-top: 1em; position: relative; }
.iAuto li::after { content: ""; display: block; padding-bottom: 60%; }
.iAuto li img { position: absolute; top: 0;bottom: 0;left: 0;right: 0;width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: 4px; overflow:hidden; box-sizing:border-box;}

/* Products */
.iPro li .pic{ width: 100%; position: relative; }
.iPro li .pic::after { content: ""; display: block; padding-bottom: 66.667%;}
.iPro li .pic img { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: 4px; overflow:hidden; box-sizing:border-box;}
.iPro li .txt{ position: absolute; z-index: 2; top: 0; left: 50%; opacity: 0; -webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);transform:translate(-50%,-50%); font-size: 125%; color: #e94709; -webkit-transition: .3s; transition: .3s; }
.iPro li:hover .txt{ top: 50%; opacity: 1; }
.iPro .swiper-container .swiper-wrapper{
    -webkit-transition-timing-function: linear; /*之前是ease-out*/
    -moz-transition-timing-function: linear;
    -ms-transition-timing-function: linear;
    -o-transition-timing-function: linear;
    transition-timing-function: linear;
}/* 解决匀速无缝滚动 */

@media only screen and (max-width:1200px) {
.iAbout .txt-img .txt p{ font-size: 100%; padding: .25em 0;}
.iAbout .more{margin-top: 1em;}
}

@media (min-width:801px) and (max-width:1000px) {
.iAbout .txt-img .txt p{ font-size: 87.5%; padding: .25em 0;}
.iAbout .more{margin-top: .5em;}
}

@media only screen and (max-width:800px) {
.section { padding: 2em 0; }
.sec-tit { margin-bottom: 1.5em; }
.sec-tit span{ font-size: 125%; font-weight: bold; }

.iAbout .txt-img .txt{ width: 100%; }
.iAbout .txt-img .pic{ width: 100%; margin-top: 1em; }

.iExh { padding: 0; }
.iAuto { padding-bottom: 0; }
}

/********* page *********/
/*** banner ***/
.bar{ width:100%; position: relative; overflow:hidden; }
.bar:after { content: ""; display: block; padding-bottom: 26.042%;}
.bar img { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; overflow:hidden;}
.bar .bar-contact { background: #e94709; }

/*** About ***/
.About .sp{ width: calc(50% - 2em); }
.About .text-box{-webkit-box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center;}
.About .txt{ width: calc(50% - 2em); font-size: 125%; }
.About .txt p{ padding: .5em 0;}
.About .txt p strong{ display: inline-block; width: 3em; font-weight: bold; vertical-align: top; }
.About .txt p span{ display: inline-block; font-style: normal; width: calc(100% - 3em); }
.Str{ padding-top: 0; }
.Str .text-box {-webkit-box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center;}
.Str .txt { font-size: 125%; }
.Str .txt p{ padding: .5em 0; }
.Str .txt p strong{ display: inline-block; width: 3em; font-weight: bold; vertical-align: top; }
.Str .txt p span{ display: inline-block; font-style: normal; width: calc(100% - 3em); }
.Auto { padding-top: 0; }
.Auto ul { width: 100%; margin-top: -1em;}
.Auto li{ width: calc(50% - .5em); margin-top: 1em; position: relative; }
.Auto li::after { content: ""; display: block; padding-bottom: 60%; }
.Auto li img { position: absolute; top: 0;bottom: 0;left: 0;right: 0;width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: 4px; overflow:hidden; box-sizing:border-box;}

/*** Products ***/
.pro-L{ width: 20%; }
.pro-R{ width: 75%; }
.pro-L .tit{ background: #e94709; font-size: 150%; font-weight: bold; color: #fff; padding: .5em 1em; -webkit-border-radius: .25em .25em 0 0; -webkit-border-radius: .25em .25em 0 0; }
.sort{ background: #e94709; padding: .5em 1em; -webkit-border-radius: 0 0 .25em .25em; -webkit-border-radius: 0 0 .25em .25em; }
.sort li { border-bottom: solid 1px rgba(255,255,255,.5);}
.sort li a{ color: #fff; display: block; padding: .5em;  }
.sort li a::before {content:"\f356"; font:900 75% "Awesome5"; display: inline-block; margin-right: .5em; vertical-align: middle; }
.sort li.on{ background: #bb3b0a; }
.sort li:hover{ background: #bb3b0a; }
.pro-list { margin-top: -1.5em; }
.pro-list li{ position:relative; width:calc(33.333% - 1em); margin:1.5em 1.5em 0 0; position: relative; top: 0; -webkit-box-shadow:0 0 2px rgb(0 0 0 / 25%); box-shadow: 0 0 8px rgb(0 0 0 / 25%); box-sizing:border-box; overflow:hidden; -webkit-transition:.4s; -o-transition:.4s; transition:.4s; }
.pro-list li:nth-child(3n) { margin-right:0; }
.pro-list li .pic { position:relative; /*background: url('../images/loading.gif') no-repeat center center;*/ border:solid 1px rgba(0,0,0,.075); -webkit-border-radius: 2px; border-radius: 2px; box-sizing:border-box;  -webkit-transition:.4s; -o-transition:.4s; transition:.4s; overflow:hidden;}
.pro-list li .pic:after { content: ""; display: block; padding-bottom: 66.666%;}
.pro-list li .pic img { position: absolute; top:0; right: 0; bottom: 0; left:0; width: 100%; height: 100%; object-fit: cover; object-position: center; box-sizing: border-box; }
.pro-list li .txt{ text-align: center; margin: 1em 0; overflow: hidden; text-overflow: -o-ellipsis-lastline; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; line-clamp: 1; -webkit-box-orient: vertical;}
.pro-list li:hover{ top:-.5em; }
/*** Product Show ***/
.title{ font-size: 200%; font-weight: 900; padding-bottom: .5em; display: block; text-align: center; }
.details table{ margin: 2em 0;}
.details table.drawing{ width: 100%;}
.details table.drawing td{ text-align: center; font-size: 87.5%; }
.details table.parameter { width: 100%; border:1px solid #333; }
.details table.parameter caption{ text-align: left; font-weight: bold; }
.details table.parameter th,.details table.parameter td{ border:1px solid #333; font-size: 87.5%; padding: .25em; text-align:center; }
.details img{ margin:0 auto; max-width: 100%; width: auto; }

/* 上一个 下一个*/
.relink{ width:100%; color: #ccc; background: #1c1e20; margin-top:2em; box-sizing:border-box; }
.relink a{ font-size: 87.5%; width:calc((100% - 5em) / 2); padding:.25em .5em; line-height: 2; box-sizing: border-box; text-overflow: -o-ellipsis-lastline; text-overflow: ellipsis; display: -webkit-box;-webkit-line-clamp: 1;line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;}
.relink a:nth-child(2) { width:5em; text-align: center; }
.relink a:last-child { text-align:right; }
.relink a:hover{background: #e94709; color: #fff;}
.relink a:first-child::before { content: "\f104"; font:300 150%/1 "Awesome5"; margin-right: .5em; vertical-align: middle;}
.relink a:last-child::after { content: "\f105"; font:300 150%/1 "Awesome5"; margin-left: .5em; vertical-align: middle; }

/*** Sustainability ***/
.Sus .part{ margin-top:2em;}
.Sus .part:first-child{ margin-top:0}
.Sus .part .txt{ line-height:2; box-shadow: 4px 4px 4px rgba(0, 0, 0, .1); border: solid 1px rgba(0, 0, 0, .25); background:rgba(255, 255, 255, .5); border-radius: 8px; padding:3em; box-sizing:border-box; }
.Sus .part .detBtn{ display: inline-block; line-height:2em; text-align:center; color:#fff; padding: 0 1em; margin-top:1em; background:#e94709; position:relative; border-radius: 2em;}
/*详情弹窗*/
.Pop-ups { display:none; position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 999; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .75);}
.detBox{ width:75%; position: relative; top:50%; left:50%; -webkit-transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -o-transform:translate(-50%,-50%); transform:translate(-50%,-50%); background:#fff; padding-top:1em;}
.detBox h2{ font-size: 150%; font-weight:bold; padding:0 1.33em 1em 1.33em; border-bottom: solid 1px #999;}
.detBox .txt{ line-height:2; width:100%; height:65vh; overflow:auto; overflow-x:hidden; padding:2em; box-sizing:border-box;}
.detBox .close { display: box; display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex; display: flex; -webkit-box-orient: horizontal;
-webkit-box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center;
-webkit-box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; 
position: absolute; top: -.5em; right: -.5em; width:1.5em; height:1.5em; background:#000; border:solid 2px #fff; cursor:pointer;-webkit-border-radius: 100%;-moz-border-radius: 100%;-ms-border-radius: 100%;-o-border-radius: 100%;border-radius: 100%;}
.detBox .close::after {content: "\f00d"; font:300 112.5%/1 "Awesome5"; color:#fff; }

/*** Contact ***/
.form{ width:50%; margin:0 auto; }
.form .tit{ font-size:150%; font-weight:600; color:#e94709; padding-bottom:.75em;}
.form .row{ padding:.5em 0;}
.form span{ font-weight:600; display:block; padding-bottom:.25em;}
.form span b{ color:#F00}
.form input[type='text'],.form textarea{ font-size:100%; padding:.5em; border:solid 1px #ccc; background:none; border-radius: 2px; box-sizing:border-box; }
.form input[type='text']{ width:100%;}
.form textarea{ width:100%; resize: vertical }
.form input[type='submit']{background-color: #eee; border: 1px solid #ccc; color: #333;padding: .5em 1.5em; cursor:pointer;}
.form input[type='submit']:hover{background-color: #ddd; border-radius: 2px;}

@media (max-width: 1200px) {
.About .sp{ width:50%; }
.About .txt{ width: calc(50% - 2em); font-size: 112.5%; }
.About .txt p{ padding: .5vw 0;}

.pro-L{ width: 230px; }
.pro-R{ width: calc(95% - 230px); }

.form{ width:65%; }

}

@media (max-width: 1024px) {
/*.Str .txt p span{ display: block; width: auto; }*/
.pro-list li .txt{font-size: 87.5%; margin: .5em 0;}

.form{ width:75%; }
}

@media only screen and (max-width:800px) {
.About .sp{ width:100%; }
.About .txt{ width: 100%; font-size: 100%; margin-top: 1em; }
.Str .text-box{-webkit-box-pack: flex-start; -webkit-justify-content: flex-start; -moz-justify-content: flex-start; -ms-justify-content: flex-start; -o-justify-content: flex-start; justify-content: flex-start;}
.Str .txt { font-size: 100%; }

.pro-L{ width: 100%; position: relative; z-index: 3 }
.pro-R{ width: 100%; margin-top: 1.5em; }
.pro-L .tit{ font-size: 150%; padding: .3em .5em; line-height:normal; background:#e94709; position: relative; -webkit-transition: 0.5s ease 0s; -ms-transition: 0.5s ease 0s; -o-transition: 0.5s ease 0s; transition: 0.5s ease 0s;}
.pro-L .tit::after {content:"\f103"; font:400 75% "Awesome5"; position:absolute; top:50%; right:1em; -webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);-o-transform:translate(0,-50%);transform:translate(0,-50%);}
.pro-L .tit.on::after {content:"\f102"; }

.sort { font-size: 0; display: none; position: absolute; left:0; z-index: 19; width: 100%; background: rgba(233, 71, 9, .95); padding:1rem 0; box-sizing:border-box;}
.sort li{ font-size: 1rem; margin:.25em .5em; width: calc(50% - 1em); display: inline-block;}
.sort li a{ padding: .5em .25em;}
.pro-list { margin-top: -1em; }
.pro-list li{ width:calc(50% - .5em); margin:1em 1em 0 0; }
.pro-list li:nth-child(3n) { margin-right:1em; }
.pro-list li:nth-child(2n) { margin-right:0; }

.drawing{ padding-top: 2em;}
.details{ padding-top: 2em;}

.relink a{ width:100%; font-size: 87.5%; padding: 0 .5em;}
.relink a:nth-child(2) { width:100%; text-align:left;  }
.relink a:last-child { text-align:left; }
.relink a:first-child::before { display: none;}
.relink a:first-child::after { content: "\f105"; font:300 150%/1 "Awesome5"; margin-left: .5em; vertical-align: middle; }
.related .Rlist2 li{ width: calc(50% - .5em); margin:1em 1em 0 0;} 

.Sus .part .txt { box-shadow: none; border: none; background: rgba(255, 255, 255, 1); border-radius:0; padding: 0; }
.Sus .part .txt p{ line-height: 1.5; padding: .5em; }

.detBox{ width: calc(100% - 1.5em); }
.detBox h2{ padding:0 .66em 1em .66em; }
.detBox .txt{ padding:1em; }

.form{ width:100%; }

}