.solution-part01{padding:5% 0;} .solution-part01 .txt{margin:0 0 4%;} .solution-part01 .txt h2{margin-bottom: 3%; line-height: 2;} .solution-part01 .txt p{ display: none; float: right; widtH:34%;} .solution-part01 .img{width:100%;} .solution-part02{margin: 0 0 2%;} .solution-part02 li{ float: left; widtH:48%; margin-bottom:1%;} .solution-part02 li:nth-child(2n){ float: right;} .solution-part02 li dt{width:100%} .solution-part02 li dd{padding:5% 0;} .solution-part02 li dd h2{margin-bottom:2%; font-weight: bold;} .solution-part02 li dd p{margin-bottom: 1em;} .solution-part02 li dd span{font-size: 24px;color:#313131;} .solution-part02 li a:hover dd span{color:#DE000F;} @media only screen and (max-width:1279px) { .solution-part01 .txt p{width:52%;} } @media only screen and (max-width:767px) { .solution-part01 .txt h2{line-height: 1.8;} .solution-part01 .txt p,.solution-part02 li{width:100%;} .solution-part02 li,.solution-part02 li dd p{margin-bottom: 0;} } .solution-tabtit{padding:5% 0 0;} .solution-tabtit li{widtH:auto; height: 40px; line-height: 40px; position: relative; margin:0 25px;} .solution-tabtit li::before{content: ""; position: absolute; right:-25px; top:50%; margin-top:-10px; width:1px; height: 20px; transform:rotate(20deg);background: #000000;} .solution-tabtit li:first-child{margin-left: 0;} .solution-tabtit li:last-child::before{ display: none;} .solution-tabtit li a{display: block; color:#000000;border-radius: 20px;} .solution-tabtit li.on a{color:#fff!important; font-weight: bold; padding:0 20px; background: #DE000F;} .soludets-part02{padding:5% 0 0; background: #EFF1F2;} .soludets-part02 h2{margin-bottom:3%; text-align: center;} .soludets-part02 li{ float: left; widtH:33.33%; position: relative; padding:0 5% 5%; margin-bottom: 2%;} .soludets-part02 li::before{content:""; position: absolute; right:0; top:0; widtH:2px; height: 100%; background: #DEE2E3;} .soludets-part02 li:nth-child(3n+1){padding-left: 0;} .soludets-part02 li:nth-child(3n){padding-right: 0;} .soludets-part02 li:nth-child(3n)::before{display: none;} .soludets-part02 li h3{color:#000; font-weight: bold; text-align: center; height: 1.5em; overflow: hidden; margin-bottom: 1em;} .soludets-part02 li p{ line-height: 1.8; height:9em; overflow: hidden;text-align:justify; text-justify:distribute-all-lines;} .soludets-part03{padding:5% 0; background: #fff;} .soludets-part03 h2{margin-bottom:3%; text-align: center;} .soludets03{position: relative;} .soludets03 .swiper-button-prev,.soludets03 .swiper-button-next{ widtH:40px; height: 40px; line-height: 40px; margin-top:-20px; font-size: 40px; text-align: center; background: none;} .soludets03 .swiper-button-prev{left:-50px;} .soludets03 .swiper-button-next{right:-50px;} .soludets03 dd{padding:6% 0 3%;} .soludets03 dd h3{margin-bottom:3%;} .soludets03 dd p{ line-height: 1.8; height: 3.6em; max-height: 3.6em; margin-bottom: 2%;} .soludets03 dd span{font-size: 24px;} @media only screen and (max-width:1279px) { .soludets-part02 li p{line-height: 1.5; height: 9em;} } @media only screen and (max-width:1023px) { .soludets-part02 li{widtH:100%; padding:0 0 5%; margin: 0 0 5%; border-bottom: 1px solid #DEE2E3;} .soludets-part02 li::before{display: none;} .soludets-part02 li:last-child{border-bottom: none; margin-bottom: 0;} .soludets-part02 li p{ height: auto;} .soludets03 .swiper-button-prev{left:-40px;} .soludets03 .swiper-button-next{right:-40px;} } @media only screen and (max-width:767px) { .soludets03 .swiper-button-prev{left:0px;} .soludets03 .swiper-button-next{right:0px;} } .responsibility01{padding:5% 0;} .responsibility01 li{ float: left; widtH:46%; margin-bottom:3%;} .responsibility01 li:nth-child(2n){ float: right;} .responsibility01 li span{ display: block;widtH:70px; height: 70px; overflow: hidden; } .responsibility01 li span img{ widtH:100%;} .responsibility01 li h2{margin: 3% 0; font-weight:bold;} .responsibility01 li p{ line-height: 1.8; height: 5.4em; overflow: hidden;} .responsibility02{padding:5% 0;} .responsibility02 h2{margin-bottom: 4%;} .responsibility02 li{padding: 3% 4%; margin-bottom:1.5%; background: #fff;} .responsibility02 li h3{margin-bottom:1.5%; font-weight: bold; overflow: hidden;} .responsibility02 li h3 span{ float: left; widtH:calc(100% - 60px);} .responsibility02 li h3 i{ float: right; font-size: 24px;} .responsibility02 li p{line-height: 1.8; max-height: 3.6em; height: 3.6em;} .responsibility03{padding:5% 0; background: #fff;} .resp03-top{margin-bottom: 8%} .resp03-top h2,.resp03-bot h2{margin-bottom:3%;} .resp03-top .sliderbox{position: relative;} .resp03-top .swiper-button-prev,.resp03-top .swiper-button-next{ widtH:40px; height: 40px; line-height: 40px; margin-top:-20px; font-size:40px; text-align: center; background: none;} .resp03-top .swiper-button-prev{left:-60px;} .resp03-top .swiper-button-next{right:-60px;} .resp03-top .sliderbox dt{overflow: hidden;} .resp03-top .sliderbox dd{padding:5% 0;} .resp03-top .sliderbox dd h3{font-weight: bold; margin-bottom: 3%;} .resp03-top .sliderbox dd p{ line-height: 1.8; max-height: 3.6em; height: 3.6em;} .resp03-bot .swiper-slide{width:742px;} .resp03-bot .sliderbox dt{ position: relative;overflow: hidden;} .resp03-bot .sliderbox dt::before{content: ""; position: absolute; left: 0; widtH:100%; height: 100%; background: rgba(0,0,0,0.5);} .resp03-bot .sliderbox .swiper-slide-active dt::before{ opacity: 0;} .resp03-bot .sliderbox dd{opacity: 0; padding:3% 1%;} .resp03-bot .sliderbox dd h3{margin-bottom: 2%;font-weight: bold;} .resp03-bot .sliderbox dd p{ line-height: 1.8; max-height: 3.6em; height: 3.6em;} .resp03-bot .sliderbox .swiper-slide-active dd{ opacity: 1;} .resp03-bot .swiper-button-prev,.resp03-bot .swiper-button-next{ top:38%; widtH:40px; height: 40px; line-height: 40px; margin-top:-20px; font-size:40px; color:#fff; text-align: center; background: none;} .resp03-bot .swiper-button-prev{left:calc(50% - 480px);} .resp03-bot .swiper-button-next{right:calc(50% - 480px);} @media only screen and (max-width:1024px) { .responsibility02 li h3 i{font-size: 18px;} .resp03-top .swiper-button-prev{lefT:-40px; font-size: 30px;} .resp03-top .swiper-button-next{right:-40px;font-size: 30px;} .resp03-bot .swiper-button-prev{left:calc(50% - 330px);font-size: 30px;} .resp03-bot .swiper-button-next{right:calc(50% - 330px);font-size: 30px;} } @media only screen and (max-width:1023px) { .responsibility01 li{width:100%; margin-bottom: 5%;} .responsibility01 li span{widtH:50px; height: 50px;} .responsibility01 li p{ height: auto;} } @media only screen and (max-width:767px) { .responsibility01 li h2,.responsibility02 li h3 i{font-size: 16px;} .resp03-top .swiper-button-prev,.resp03-bot .swiper-button-prev{left:0;color: #DE000F;} .resp03-top .swiper-button-next,.resp03-bot .swiper-button-next{right:0; color: #DE000F;} .resp03-bot .sliderbox dd{padding:5%;} } .innovation01{padding:3% 0;} .innovation01 li{ float: left; width:25%; cursor: pointer; position: relative; height:700px;} .innovation01 li .txt{color:#fff;padding:0 20%; widtH:100%; z-index: 2;} .innovation01 li span{ display: block; margin-bottom:15px; widtH:54px; height: 54px; overflow: hidden;} .innovation01 li p{margin-top: 30px;display: none; overflow: hidden;} .innovation01 li p em{ float: left; margin:0 10px 5px 0; height: 32px; line-height: 32px; padding:0 20px; border:1px solid #fff; border-radius: 20px;} .innovation01 li .bg-layer{position: absolute;z-index: 1; lefT:0; top:0; widtH:100%; height: 100%; background: rgba(0,0,0,0.3);} .innovation01 li.on,.innovation01 li.change.on{ widtH:40%;} .innovation01 li.change{ widtH:20%;} .innovation01 li.on .txt{padding:0 8%; top:30%;} .innovation01 li.on p{ display: block;} .innovation01 li.on .txt::before{content: ""; z-index: 2;position: absolute; lefT:0; top:0; widtH:4px; height: 180px; background: #DB0E20;} .innovation02 li{ /*background: #F9F9F9; padding:5% 0;*/ margin-bottom: 5%;} .innovation02 li h2{ text-align: center; color:#000000; margin-bottom:4%;} .innovation02 li .img,.innovation02 li .img img{widtH:100%;} .innovation02 dl{ background: #F9F9F9;overflow: hidden;position: relative;} .innovation02 dl dt{ float: left; width:50%;overflow: hidden;} .innovation02 dl dd{ float: right; width:50%; padding:5% 5% 2%; line-height: 1.8;position: absolute;right: 0;top: 0;height: 100%;} .innovation02 dl dd h3{margin-bottom:8%;} .innovation02 dl dd .ll{float: left; widtH:49%;} .innovation02 dl dd .rr{ float: right; widtH:49%;} .innovation02 dl dd .ll span,.innovation02 dl dd .rr span{ float: left; widtH:80px; font-weight: bold; color:#000;} .innovation02 dl dd .ll .c,.innovation02 dl dd .rr .c{ float: right; width:calc(100% - 80px);} .innovation02 dl:nth-child(2n+1) dt{ float: right;} .innovation02 dl:nth-child(2n+1) dd{ float: left;left: 0;right: auto;} @media only screen and (max-width:1279px) { .innovation01 li{height: 500px;} .innovation02 dl dd{line-height: 1.5;} .innovation02 dl dd h3{margin-bottom: 5%;} .innovation02 dl dd .ll,.innovation02 dl dd .rr{widtH:100%;} .innovation02 dl dd .ll{margin-bottom: 5px;} } @media only screen and (max-width:1023px) { .innovation01 li{height: 400px;} .innovation02 dl{height: auto!important;} .innovation02 dl dt,.innovation02 dl dd{widtH:100%;position: static;} .innovation02 dl dd{padding:5%;} } @media only screen and (max-width:767px) { .innovation01 li{width:100%;height: auto;} .innovation01 li span{widtH:40px; height: 40px;} .innovation01 li .txt{padding:5%; position: relative;lefT:0; top:0; transform: translate(0%,0%); -webkit-transform: translate(0%,0%); -ms-transform: translate(0%,0%);} .innovation01 li p{display: block;margin-top:20px;} } .about-part01{padding:8% 0 0;} .about-part01 .tt{padding:0 5% 7%; color:#505050;} .about-part01 .tt dt{ float: left; widtH:220px;} .about-part01 .tt dd{ float: right; widtH:calc(100% - 220px);} .about-part01 .tt dd p{line-height: 2; /*margin-bottom:3%;*/} .about-part01 .mm{ padding:5% 0;} .about-part01 .mm li{ widtH:25%; float: left; text-align: center; color:#464647;} .about-part01 .mm li span{ font-weight: bold; line-height: 1.2; display: block;} .about-part01 .mm li p{font-weight: bold;} .about-part01 .bb{color:#fff; padding:7% 0 5%;} .about-part01 .bb li{ float: left; widtH:33.33%; padding:0 5% 3%; text-align: center; position: relative;} .about-part01 .bb li::after{content:""; position: absolute; right:0; top:0; widtH:1px; height: 100%; background:rgba(255,255,255,0.25);} .about-part01 .bb li:last-child::after{ display: none;} .about-part01 .bb li h2{ text-align: center; margin-bottom: 5%;} .about-part01 .bb li h2 span{ display: inline-block; padding:0 2% 7%; position: relative;} .about-part01 .bb li h2 span::before{content: ""; position: absolute; lefT:0; bottom:0; widtH:100%; height: 5px; background: #DE0010;} .about-part01 .bb li p{ line-height: 1.8;} .about-part02{padding:5% 0; background: #F9F9F9;} .about-part02 h2{margin-bottom: 3%;} .process_figure{height: 600px; margin:0 auto; position: relative;} .process_figure .swiper-container{widtH:calc(100% - 80px); height: 600px;} .process_figure .swiper-button-prev{ z-index: 2; left:0; width:36px; height: 36px; line-height: 36px; margin-top:-18px; text-align: left; font-size: 30px; background:none;} .process_figure .swiper-button-next{ z-index: 2; right:0; width:36px; height: 36px;line-height: 36px; margin-top:-18px; text-align: right;font-size: 30px; background:none;} .process_figure .line{ position: absolute; z-index: 1; left:40px; right:40px; top:50%; width:calc(100% - 80px); height: 2px; background: #000;} .process_figure li{ position: relative;width:auto!important; height: 600px; margin-right:25px;} .process_figure span{ display: block; position: absolute; top:calc(50% - 60px); left:20px;width: 60px; text-align: center;} .process_figure em{ position: absolute; z-index:2;width:14px; height:88px; left:50px; top:calc(50% + 14px);} .process_figure em::before{content:"";position: absolute;left: 6px;top: 0;width: 2px;height: 66px;border-left: 1px dashed #000;} .process_figure em::after{content:"";position: absolute;left:0px;bottom:0;width:8px;height:8px;border-radius: 50%;border:3px solid #DE000F; background: #fff;} .process_figure .txt{margin-top:420px;height:180px; text-align: left;} .process_figure .txt dd{width:225px;text-align:justify; text-justify:distribute-all-lines;} .process_figure li:nth-child(2n) span{top:calc(50% + 30px);} .process_figure li:nth-child(2n) em{top:calc(50% - 100px);} .process_figure li:nth-child(2n) em::before{ top:20px;} .process_figure li:nth-child(2n) em::after{bottom:auto;top:0;} .process_figure li:nth-child(2n) .txt{margin-top:0;} .about-part03{padding:5% 0 0;} .about-part03 h2{ margin-bottom: 3%;} .about-part03 .slidebox{position: relative;} .about-part03 .slidebox .swiper-container{margin:0 5%; } .about-part03 .slidebox .swiper-button-prev{ z-index: 2; left:0; width:36px; height: 36px; line-height: 36px; margin-top:-18px; text-align: left; font-size: 30px; background:none;} .about-part03 .slidebox .swiper-button-next{ z-index: 2; right:0; width:36px; height: 36px;line-height: 36px; margin-top:-18px; text-align: right;font-size: 30px; background:none;} .about-part03 li .img{widtH:100%; overflow: hidden; position: relative;} .about-part03 li .img img{widtH:100%;} .about-part03 li h3{margin: 5% 0 0; height: 3em; text-align: center; color:#000;} .about-part04{padding:4% 0 0;} .about-part04 h2{ margin-bottom: 3%;} .about-part04 li{ float: left; widtH:50%; position: relative;} .about-part04 li::before{content: ""; position: absolute; z-index: 1; left:0; top:0; width: 100%; height: 100%; background: rgba(0,0,0,0.3);} .about-part04 li .txt{position: absolute; z-index: 2; lefT:0; bottom:0; widtH:100%; padding: 6%;color: #fff;} .about-part04 li h3{margin-bottom: 2%;} .about-part05{padding:5% 0;} .about-part05 h2{margin-bottom: 3%;} .about-part05 .img,.about-part05 .img img{widtH:100%;} @media only screen and (max-width: 1279px) { .about-part01 .bb li p{ height: 7.2em;} } @media only screen and (max-width: 1023px) { .about-part01 .tt{padding: 0 0 5%;} .about-part01 .tt dt{widtH:120px;} .about-part01 .tt dd{widtH:calc(100% - 120px);} } @media only screen and (max-width:767px) { .about-part01 .tt dt,.about-part01 .tt dd{widtH:100%;} .about-part01 .mm li{width:50%;margin-bottom: 5%;} .about-part01 .bb ul{margin: 0;} .about-part01 .bb li{widtH:100%; margin-bottom: 2%;} .about-part01 .bb li::after{ display: none;} .about-part01 .bb li p{ height: auto;} .process_figure{height:auto} .process_figure .swiper-container{widtH:100%; height: auto;} .process_figure .swiper-wrapper{ display: block;} .process_figure .line{top:5px; left:6px; width:2px; height: calc(100% - 5px);} .process_figure .swiper-button-prev{display: none;} .process_figure .swiper-button-next{display: none;} .process_figure li{ height: auto; margin:0; margin-bottom: 20px} .process_figure span{position: static; margin-left:10px; margin-bottom: 10px;} .process_figure em{width:14px; height: 14px; left:0; top:5px;border:2px solid #D22934; border-radius: 50%; background: #fff;} .process_figure em::after,.process_figure em::before{display: none;} .process_figure .txt{margin-top:0; height: auto; margin-left: 20px;} .process_figure .txt dd{width:100%;padding:0;} .process_figure .txt dd::before,.process_figure .txt dd::after{ display: none;} .process_figure li:last-child{margin-bottom:0;} .about-part03 li{widtH:97%;} .about-part03 li h3{ height: auto;} .about-part04 li{widtH:100%;} } .privice-part{padding:5% 0;} @media only screen and (min-width: 1025px) { .resp03-top .swiper-button-prev,.resp03-top .swiper-button-next,.resp03-bot .swiper-button-prev,.resp03-bot .swiper-button-next, .innovation01 li{transition: 0.3s all;-webkit-transition: 0.3s all;-moz-transition: 0.3s all;-o-transition: 0.3s all;-ms-transition: 0.3s all;} .resp03-bot .swiper-button-prev:hover,.resp03-bot .swiper-button-next:hover{color: #DE000F;} }