@charset "utf-8";
/* CSS Document */

.about1{ font-size:16px; padding:0 0 70px; position:relative;}
#ab1{ width:10px; height:10px; position:absolute; left:0; top:-80px;}
.about1 .attr{ display:flex; flex-wrap:wrap; justify-content:space-between;}
.about1 .attr::before,
.about1 .attr::after{ display:none;}
.about1 .attr h2.title{ width:100%; text-align:left;}
.about1 .attr h2.title em{ float:left;}
.about1 .attr h2.title font{ float:left; padding:1em 0 0; margin:0 1em;}
.about1 .pic{ width:28.75%; overflow:hidden; flex-shrink:0; margin-left:4.75%;}
.about1 .pic img{ display:block; width:100%; transition:all ease 0.4s;}
.about1 .pic:hover img{ transform:scale(1.05);}
.about1 .txt{ width:60%; line-height:2.35; color:#333; text-align:justify; overflow:hidden; flex-shrink:0; margin:-16px 0 0;}
.about1 dl.data{ display:block; width:32%; overflow:hidden; flex-shrink:0; margin:-40px 0 0;}
.about1 dl.data dt{ display:flex; width:48%; height:13em; background:#f2f2f2; float:left; margin:0 4% 0 0; justify-content:center; align-items:center;}
.about1 dl.data dt.txt{ display:block; width:100%; height:auto; line-height:3; color:#fff; background:#006dff; padding:0 1em; margin:0 0 1em; box-sizing:border-box;}
.about1 dl.data dd{ display:flex; width:48%; height:6em; background:#f2f2f2; float:left; margin:0 0 1em; justify-content:center; align-items:center;}
.about1 dl.data p{ display:block; line-height:3em; color:#333; font-size:1.125em; overflow:hidden;}
.about1 dl.data p b{ color:#006dff; font-size:1.75em; font-weight:normal; margin:0 0.25em;}

.about12{ background:#f2f2f2;}
.about12 .attr h2.title{ text-align:center; padding:3.7em 0 2.5em;}
.about12 .attr h2.title em{ float:none;}
.about12 .attr h2.title span{ float:none; padding:1em 0 0;}
.about12 .attr h2.title font{ float:none; padding:0.5em 0 0;}
.about12 ul{ display:block; font-size:16px; overflow:hidden; padding:10px 0 40px;}
.about12 ul li{ display:block; width:16.6666%; line-height:5; text-align:center; float:left; transition:all ease 0.4s;}
.about12 ul li img{ display:block; height:5em; margin:0 auto; transition:all ease 0.4s;}
.about12 ul li:hover{ color:#006dff;}
.about12 ul li:hover img{ transform:rotateY(180deg);}

.about2{ padding:0 0 60px; position:relative;}
#ab2{ width:10px; height:10px; position:absolute; left:0; top:-80px;}
.about2 .attr h2.title{ text-align:center; padding:3.7em 0 2.5em;}
.about2 .attr h2.title em{ float:none;}
.about2 .attr h2.title span{ float:none; padding:1em 0 0;}
.about2 .attr h2.title font{ float:none; padding:0.5em 0 0;}
.about2 dl{ display:block; font-size:16px; margin:0 -16px;}
.about2 dl::before,
.about2 dl::after{ content:''; display:block; overflow:hidden; clear:both;}
.about2 dl dt{ display:block; width:33.33%; float:left;}
.about2 dl dd{ display:block; width:25%; float:left;}
.about2 dl a{ display:block; overflow:hidden; position:relative; margin:0 16px 32px; cursor:pointer;}
.about2 dl a img{ display:block; width:100%; transition:all ease 0.4s;}
.about2 dl a:hover img{ transform:scale(1.05);}

.about3{ background:#f2f2f2; padding:0 0 80px; position:relative;}
#ab3{ width:10px; height:10px; position:absolute; left:0; top:-80px;}
.about3 .attr h2.title{ text-align:left;}
.about3 .attr h2.title em{ float:left;}
.about3 .attr h2.title font{ float:left; padding:1em 0 0; margin:0 1em;}
.about3 .attr h2.title span{ float:right; color:#006dff; padding:1.375em 0 0;}
.about3 ul{ display:block; overflow:hidden; margin:0 -10px;}
.about3 ul li{ display:block; width:20%; float:left;}
.about3 ul li a{ display:block; background:#fff; padding:20px; border-radius:12px; overflow:hidden; margin:0 10px 24px; cursor:pointer;}
.about3 ul li a img{ display:block; width:100%; height:160px; object-fit:contain; transition:all ease 0.4s;}
.about3 ul li a:hover img{ transform:scale(1.1);}

.about4{ padding:0 0 80px; position:relative;}
#ab4{ width:10px; height:10px; position:absolute; left:0; top:-80px;}
.about4 .flex{ display:flex; flex-wrap:wrap; justify-content:space-between;}
.about4 dl{ display:block; flex:auto; font-size:16px; background:#f2f2f2; padding:1.75em 3em;}
.about4 dl dt{ display:block; line-height:3; color:#006dff; font-size:1.375em;}
.about4 dl dt img{ display:block; max-width:100%; padding:0.375em 0 0.25em;}
.about4 dl dd{ display:block; line-height:2.75; color:#444;}
.about4 .map{ width:50%; background:#f2f2f2; overflow:hidden; flex-shrink:0;}

.about4 ul{ display:flex; font-size:16px; margin:-12px; padding:40px 0 0; padding:0 0 30px;}
.about4 ul li{ display:block; width:33.33%;}
.about4 ul li a{ display:block; background:#f2f2f2; padding:1.125em 1.75em; border-radius/:8px; margin:12px; position:relative; overflow:hidden; transition:all ease 0.4s;}
.about4 ul li b{ display:block; line-height:2.4; color:#006dff; font-size:1.25em; font-weight:normal; overflow:hidden;}
.about4 ul li .txt{ display:block; line-height:2; color:#666; font-size:0.9375em; position:relative; z-index:3; margin:0 0 0.5em;}

.shadow{ width:100%; height:100%; background:rgba(0,0,0,0.6); position:fixed; left:0; top:0; z-index:9998; opacity:0; visibility:hidden; transition:all ease 0.2s;}
.shadow.show{ opacity:1; visibility:visible;}
.picShow{ position:fixed; left:50vw; top:50%; top:0; transform:translate(-50%,0); z-index:9999; opacity:0; visibility:hidden;}
.picShow.show{ opacity:1; visibility:visible;}
.picShow .pic{ display:flex; justify-content:center; align-items:center; width:80vw; height:80vh; height/:750px; max-height/:82vh; width:90vw; height:100vh; background-size:contain !important; background-position:center; background-repeat:no-repeat; transform:scale(0.8); opacity:0; transition:all ease 0.4s;}
.picShow .pic img{ display:block; max-width:96%; max-height:96%;}
.picShow.show .pic{ transform:scale(1); opacity:1;}
.picShow a.close{ width:24px; height:24px; background:url(../images/common/close.png) center no-repeat; background-size:contain; position:absolute; left:100%; bottom/:100%; top:2%; cursor:pointer;}


@media only screen and (max-width:1440px){


}

@media only screen and (max-width:768px){

#ab1,
#ab2,
#ab3,
#ab4{ top:-60px;}

.about1{ font-size:14px; padding:0 0 40px;}
.about1 .attr{ display:block;}
.about1 .attr h2.title font{ padding:0.9375em 0 0; margin:0 0.75em}
.about1 .txt{ width:auto; margin:0; line-height:2.25; margin:-0.5em 0 0;}
.about1 dl.data{ width:auto; margin:20px 0 0;}
.about1 dl.data dt{ height:10em;}
.about1 dl.data dd{ height:4.5em;}
.about1 dl.data p{ font-size:inherit;}

.about12{ padding:0 0 30px;}
.about12 ul{ display:flex; flex-wrap:wrap; font-size:14px; padding:0;}
.about12 ul li{ width:33.33%; float:none; flex-shrink:0; line-height:1.5; box-sizing:border-box; padding:0 1em 1em;}
.about12 ul li img{ height:4em; margin:0 auto 0.75em;}

.about2{ padding:0 0 40px;}
.about2 dl{ font-size:14px; margin:0 -6px;}
.about2 dl dd{ width:25%;}
.about2 dl a{ margin:0 6px 12px;}

.about3{ padding:0 0 40px;}
.about3 .attr h2.title font{ padding:0.9375em 0 0; margin:0 0.75em}
.about3 .attr h2.title span{ float:none; padding:0.625em 0 0; clear:both;}
.about3 ul{ margin:0 -6px;}
.about3 ul li{ width:50%;}
.about3 ul li a{ margin:0 6px 12px; padding:12px;}
.about3 ul li a img{ height:24vw;}

.about4{ padding:0 0 40px;}
.about4 .flex{ display:block;}
.about4 dl{ font-size:14px; padding:1.25em 1.625em 1.25em;}
.about4 dl dt{ line-height:2;}
.about4 dl dt img{ padding:0;}
.about4 dl dd{ line-height:2; padding:0.5em 0;}
.about4 .map{ width:auto;}

.about4 ul{ display:block; overflow:hidden; padding-top:20px; margin:-14px; font-size:15px; padding:0 0 16px;}
.about4 ul li{ width:100%;}
.about4 ul li a{ padding:0.5em 1.25em; margin:14px;}
.about4 ul li b{ font-size:16.5px;}
.about4 ul li .txt{ font-size:14px;}

.picShow a.close{ left:auto; right:15px; top:15px; z-index:9;}
.picShow .pic{ width:calc(100vw - 30px); height:calc(100vh - 108px); margin:54px 15px; z-index:5;}

.about4 ul{ font-size:14px;}
.about4 ul li b{ font-size:16px; margin-bottom:-2px;}

.about4 dl dt{ background:url(../images/common/logo_m.png) center no-repeat; background-size:auto 100%;}
.about4 dl dt img{ opacity:0;}

}












/**/