.video_wrap {width: 100%; height: 0; padding-bottom: 50%; position: relative; } .video_wrap iframe {width: 100%; height: 100%; position:absolute; top:0; left:0;} /* ======================= history ========================== */ #history01 {padding:80px 0;} #history01 .cont:nth-child(1) {margin-bottom: -80px;} #history01 .cont:nth-child(2) {background: #F2F3F7; padding:160px 0;} #history01 .cont:nth-child(3) {margin-top: -80px;} #history01 .cont .con {display: flex; flex-wrap: wrap; align-items: center;} #history01 .cont:nth-child(even) .con {flex-direction: row-reverse;} #history01 .cont .img_box {width: 50%;} #history01 .cont .txt_box {width: 50%;} #history01 .cont:nth-child(odd) .txt_box {padding-left: 10.98%;} #history01 .cont:nth-child(even) .txt_box {padding-right: 10.98%;} #history01 .cont .txt_box p {margin-top:15px; word-break: keep-all;} #history01 .cont .txt_box h4 {font-size:1.8em;} .video_con {padding:80px 0; background: #F2F3F7;} #history03 {padding:80px 0; width:100%; height:auto;} #history03 .cont .con {} #history03 .cont .con .title_box { text-align: center;} #history03 .cont .con .title_box h3 {font-size:50px;} #history03 .cont .con .title_box p {font-size:20px; padding:10px 0px 20px;} #history03 .cont .con ul {clear:both;background:url(/img/company/bg_history.jpg) center center repeat-y; padding:0px 0px 50px 0px; width:100%; height:auto;overflow:hidden} #history03 .cont .con ul:last-child {background:none;} #history03 .cont .con ul li{float:left; width:calc(50% - 41px); height:auto; display: flex; justify-content: space-between; align-content: center; align-items: center;} #history03 .cont .con ul li:nth-child(2){width:82px;} #history03 .cont .con ul li span {display:block; width:82px; height:82px; text-align: center; color:#ffffff; background:#000; font-size:28px; line-height:82px; border-radius: 41px;} #history03 .cont .con ul li p {padding:10px; font-size:20px; word-break: keep-all;} #history03 .cont .con ul li img {padding:10px;} #history04 {padding:80px 0; background: #F2F3F7;} #history04 .cont .con {} #history04 .cont .con .title_box { text-align: center;} #history04 .cont .con .title_box h3 {font-size:50px;} #history04 .cont .con .title_box p {font-size:20px; } #history04 .cont .con p {font-size:20px; text-align: center;} #history04 .cont .con ul {background-color:#ffffff; padding:80px 30px; height:auto; display: flex; justify-content: space-between; margin:35px 0px;} #history04 .cont .con ul li {padding:0px 25px;} #history04 .cont .con ul li:nth-child(2) {padding:0px;} #history04 .cont .con ul li:nth-child(3) {padding:0px;} #history04 .cont .con ul li h4 {padding-bottom:5px;} #history04 .cont .con ul li ol {} #history04 .cont .con ul li ol li{padding:5px; list-style: disc;} #history04 .cont .con ul li ol li:nth-child(2) {padding:5px;} #history04 .cont .con ul li ol li:nth-child(3) {padding:5px;} /* ======================================================== */ /* ========================== technology ======================== */ #technology01 {padding:80px 0 100px} #technology01 .title {text-align: center;} #technology01 .point {display: flex; flex-wrap: wrap; border:1px solid #cacaca; padding:30px 0; margin:50px 0;} #technology01 .point li {width: 25%; text-align: center;} #technology01 .point li:not(:last-child) {border-right:1px solid #cacaca;} #technology01 .point li .txt_box {margin-top:15px;} #technology01 .technology01_slide {position:relative; overflow: hidden;} #technology01 .technology01_slide li {opacity: 0.5;} #technology01 .technology01_slide li.swiper-slide-active {opacity: 1;} #technology01 .technology01_slide .nav_btn {width: calc(50% + 70px); height: 0; display: flex; justify-content: space-between; position:absolute; top:calc(50% - 35px); left:50%; transform:translateX(-50%); z-index: 2;} #technology01 .technology01_slide .nav_btn button {width: 70px; height: 70px; display: flex; justify-content: center; align-items: center; border-radius: 100%; font-size: 1.5rem; background: rgba(255,255,255,0.5);} #technology01 .system {margin-top:30px;} #technology01 .system dl {display: flex; flex-wrap: wrap; align-items: center; background:#F2F3F7; border-radius: 10px; padding:20px 30px;} #technology01 .system dl dt {width: 25%; text-align: center;} #technology01 .system dl dt span {display: block; margin-top:10px;} #technology01 .system dl dd {width: 75%; background: #fff; border-radius: 10px; padding:20px;} #technology01 .system dl dd ul {list-style: disc; margin-left: 20px;} #technology02 {padding-bottom:80px;} #technology02 .cont .con {display: flex; flex-wrap: wrap; align-items: center;} #technology02 .cont:nth-child(even) .con {flex-direction: row-reverse;} #technology02 .cont:nth-child(1) {background: #F2F3F7; padding:80px 0 160px;} #technology02 .cont:nth-child(2) {margin-top: -80px; padding:0px 0 80px;} #technology02 .cont:nth-child(3) {background: #F2F3F7; padding:0px 0 80px;} #technology02 .cont .img_box {max-width: 50%; position:relative;} #technology02 .cont .img_box .exp {width: 100%; display: flex; justify-content: center; align-items: center; position:absolute; bottom:0; left:0; background: rgba(0, 0, 0, 0.50); color:#fff; padding:12px 25px;} #technology02 .cont .img_box .exp img {margin-right: 10px;} #technology02 .cont .txt_box {width: 50%;} #technology02 .cont:nth-child(1) .txt_box {padding-left: 10.98%;} #technology02 .cont:nth-child(2) .txt_box {padding-right: 10.98%;} #technology02 .cont:nth-child(3) .txt_box {padding-left: 10.98%;} #technology02 .cont .txt_box p {margin-top:10px; word-break: keep-all;} #technology02 .cont .txt_box h3 {font-size:2em;} #technology02 .cont .img_thumb {width:100%; margin-top:40px;} #technology02 .cont .img_thumb ul {} #technology02 .cont .img_thumb ul li{float:left; width:32%; margin:0.5%;} /* ============================================================== */ /* ========================== quality ======================== */ #quality01 {padding: 80px 0 100px;} #quality01 .cont .con {display: flex; flex-wrap: wrap; align-items: center;} #quality01 .cont:nth-child(even) .con {flex-direction: row-reverse;} #quality01 .cont:nth-child(1) {padding:40px 0 40px;} #quality01 .cont:nth-child(2) { padding:40px 0 40px;} #quality01 .cont .img_box {max-width: 50%; position:relative;} #quality01 .cont .img_box .exp {width: 100%; display: flex; justify-content: center; align-items: center; position:absolute; bottom:0; left:0; background: rgba(0, 0, 0, 0.50); color:#fff; padding:12px 25px;} #quality01 .cont .img_box .exp img {margin-right: 10px;} #quality01 .cont .txt_box {width: 50%;} #quality01 .cont:nth-child(1) .txt_box {padding-left: 10.98%;} #quality01 .cont:nth-child(2) .txt_box {padding-right: 10.98%;} #quality01 .cont .txt_box p {margin-top:10px; word-break: keep-all;} #quality01 .cont .txt_box h3 {font-size:2em;} #quality01 .cont .img_thumb {width:100%; margin-top:40px;} #quality01 .cont .img_thumb ul {} #quality01 .cont .img_thumb ul li{float:left; width:32%; margin:0.5%;} #quality01 .cont .title {text-align: center;} #quality01 .cont .qualify {display: flex; flex-wrap: wrap; margin-top:50px;} #quality01 .cont .qualify li {width: 23.5%; margin-bottom:2%;} #quality01 .cont .qualify li:not(:nth-child(4n)) {margin-right: 2%;} #quality01 .cont .qualify.large {justify-content: space-between;} #quality01 .cont .qualify.large li {width: 49%; margin-right: 0;} #quality01 .cont .qualify li .img_box {max-width: 100%;height: 325px; display: flex; justify-content: center; align-items: center; background: #F2F3F7; padding:20px;} #quality01 .cont .qualify li .img_box img {max-height: 100%;} #quality01 .cont .qualify li .txt_box {width: 100%;background: #696057; text-align: center; padding:20px 0; color:#fff;} #quality01 .cont .qualify li .txt_box h4 {font-size:1.1em;} /* =========================================================== */ .top_bt .para h4 {font-size:1.8em;} @media all and (max-width:1024px){ #history01 .cont {padding:70px 0;} #history01 .cont:nth-child(1) {margin-bottom:0;} #history01 .cont:nth-child(2) {padding:70px 0;} #history01 .cont:nth-child(3) {margin-top:0;} #history01 .cont:nth-child(odd) .txt_box {padding-left: 7%;} #history01 .cont:nth-child(even) .txt_box {padding-right: 7%;} #technology01 .technology01_slide .nav_btn {top:calc(50% - 27.5px);} #technology01 .technology01_slide .nav_btn button {width: 55px; height: 55px;} #technology01 .system dl dd {width: 72%; margin-left: auto;} #technology02 {padding-bottom: 0;} #technology02 .cont {padding:70px 0;} #technology02 .cont:nth-child(1) {padding:70px 0;} #technology02 .cont:nth-child(2) {margin-top:0;} #technology02 .cont:nth-child(1) .txt_box {padding-left: 7%;} #technology02 .cont:nth-child(2) .txt_box {padding-right: 7%;} #quality01 .cont .qualify {justify-content: space-between;} #quality01 .cont .qualify li {width: 48%; margin-bottom: 4%;} #quality01 .cont .qualify li:not(:nth-child(4n)) {margin-right: 0;} #quality01 .cont .qualify.large li {width: 48%;} #quality01 .cont .qualify li .img_box {height: 280px;} } @media all and (max-width:780px){ #history04 .cont .con ul {position: relative; padding:40px 15px; margin:20px 0px; display: flex; flex-wrap: wrap; align-content: center; align-items: center; justify-content:flex-start;} #history04 .cont .con ul li {width:100%; padding:0px 25px;} #history04 .cont .con ul li img {width:100%;} #history04 .cont .con ul li h4 {padding-bottom:5px;} #history04 .cont .con ul li ol {} #history04 .cont .con ul li ol li{padding:5px; list-style: disc;} #history04 .cont .con ul li ol li:nth-child(2) {padding:5px;} #history04 .cont .con ul li ol li:nth-child(3) {padding:5px;} #history04 .cont .con ul > li:nth-child(1) {position:absolute; top:230px;} #history04 .cont .con ul > li:nth-child(2) {position:absolute; top:20px; width:90%;} #history04 .cont .con ul > li:nth-child(3) {margin-top:550px;} #history04 .cont .con p {font-size:16px; text-align: left;} #history04 .cont .con .title_box h3 {font-size:2.5em;} #history04 .cont .con .title_box p {font-size:1.2em; padding:10px 0px 20px; text-align: center;} #history03 {padding:40px 0px;} #history03 .cont .con ul {padding:0px 0px 20px 0px;} #history03 .cont .con ul li:nth-child(2){width:42px;} #history03 .cont .con ul li{width:calc(50% - 21px); justify-content:flex-start; flex-wrap: wrap; align-content: center; align-items: center;} #history03 .cont .con ul li span { width:42px; height:42px; font-size:16px; line-height:42px; border-radius: 41px;} #history03 .cont .con ul li p {padding:10px; font-size:1em;} #history03 .cont .con ul li img {padding:10px;} #history03 .cont .con .title_box h3 {font-size:2.5em;} #history03 .cont .con .title_box p {font-size:1.2em; padding:10px 0px 20px;} #quality01 .cont:last-child {margin-top:25px;} .video_con {padding:40px 0; background: #F2F3F7;} #history01 {padding:0;} #history01 .cont, #history01 .cont:nth-child(even) {padding:35px 0;} #history01 .cont:nth-child(1) {margin-bottom: 0;} #history01 .cont:nth-child(3) {margin-top:0;} #history01 .cont .img_box {width: 100%;} #history01 .cont .txt_box {width: 100%; margin-top:30px; } #history01 .cont:nth-child(odd) .txt_box {padding-left:0;} #history01 .cont:nth-child(even) .txt_box {padding-right:0;} #history02 {padding:70px 0;} #history02 .con{max-width:100%;} #technology01 {padding:35px 0;} #technology01 .point {padding:0; border: none;} #technology01 .point li {width: 50%; padding:20px 0; border:1px solid #cacaca; margin:-1px 0 0 -1px;} #technology01 .technology01_slide {width: 90%; margin:0 auto;} #technology01 .technology01_slide .nav_btn {width: 92%; top:calc(50% - 19px);} #technology01 .technology01_slide .nav_btn button {width: 38px; height: 38px;} #technology01 .system dl {padding:20px;} #technology01 .system dl dt {width: 100%; margin-bottom: 20px;} #technology01 .system dl dd {width: 100%;} #technology02 .cont .img_box {width: 100%; max-width: 100%;} #technology02 .cont .img_box .exp {padding:12px;} #technology02 .cont .txt_box {width: 100%; margin-top:20px; } #technology02 .cont:nth-child(1) {padding:35px 0;} #technology02 .cont:nth-child(1) .txt_box {padding-left: 0;} #technology02 .cont:nth-child(2) .txt_box {padding-right: 0;} #technology02 .cont:nth-child(3) .txt_box {padding-left: 0;} #technology02 h4 {font-size:1.8em;} #technology03 .con {max-width: 100%;} #quality01 {padding: 35px 0px;} #quality01 .cont .qualify {margin-top:25px;} #quality01 .cont .qualify li {width: 100%; margin-bottom: 20px;} #quality01 .cont .qualify.large li {width: 100%;} #quality01 .cont .qualify li .img_box {height: 220px;} #quality01 .cont .qualify li .txt_box {padding:12px 0;} #quality01 .cont .qualify li .txt_box h4 {font-size:1em;} #quailty02 .con {max-width: 100%;} #technology02 .cont .img_thumb {width:100%; margin-top:40px;} #technology02 .cont .img_thumb ul {} #technology02 .cont .img_thumb ul li{float:left; width:98%; margin:1%;} #quality01 .cont .img_thumb {width:100%; margin-top:40px;} #quality01 .cont .img_thumb ul {} #quality01 .cont .img_thumb ul li{float:left; width:98%; margin:1%;} #quality01 .cont .img_box {width: 100%; max-width: 100%;} #quality01 .cont .img_box .exp {padding:12px;} #quality01 .cont .txt_box {width: 100%; margin-top:20px; } #quality01 .cont:nth-child(1) {padding:35px 0;} #quality01 .cont:nth-child(1) .txt_box {padding-left: 0;} #quality01 .cont:nth-child(2) .txt_box {padding-right: 0;} #quality01 .cont:nth-child(3) .txt_box {padding-left: 0;} }