@charset "utf-8"; @font-face { font-family: CAInfoTypeOp; src: url(../font/CAInfoTypeOP-Regular.otf); } @font-face { font-family: tt; src: url(../font/MonImpact.ttf); } /*situstion*/ .situstion{ padding-bottom: 140px; background: url("../img/500340358.png") no-repeat center top/100%; } .situstion .s-content{ width: 1197px; padding-top: 83px; } .situstion .s-content .s-title{ margin-bottom: 30px; color: #449c4a; opacity: 0; } .situstion .s-content .s-title h3{ font-size:24px ; font-weight: 600; } .situstion .s-content .s-title p{ font-size:20px ; font-family: CAInfoTypeOp; } .situstion .s-content .s-t{ margin-top: 50px; margin-bottom: 40px; opacity: 0; } .situstion .s-content .s-t h4{ font-size: 54px; font-family: "Geometr706 BlkCn BT"; color: #449c4a; vertical-align: middle; } .situstion .s-content .s-t h4 span{ margin-left: 10px; } .situstion .s-content .s-t div{ margin-left: 10px; vertical-align: middle; } .situstion .s-content .s-t div p:nth-child(1){ font-size: 22px; } .situstion .s-content .s-t div p:nth-child(2){ font-size: 16px; letter-spacing: 1px; } .situstion .s-content > p{ color: #414141; font-size: 16px; text-indent: 32px; line-height: 30px; } /*speech*/ .speech{ width: 1500px; padding-top:83px ; padding-bottom: 246px; } .speech .left{ margin-top: 180px; } .speech .right{ width: 820px; margin-left: 150px; } .speech .right h3{ color: #449c4a; font-size: 24px; font-weight: 600; } .speech .right .s-title{ margin-bottom: 86px; } .speech .right .s-title p{ color: #449c4a; font-family: CAInfoTypeOp; font-size: 20px; } .speech .right > p{ font-size: 16px; line-height: 30px; text-indent: 32px; text-align: justify; } .speech .right > p span{ color: #449c4a; font-size: 24px; } .speech > i{ right: 0; bottom: 0; width: 484px; height: 415px; background: url("../img/pen.png") no-repeat center top/100%; } /*development*/ .development{ background: url("../img/bg3.png") no-repeat center top/100%; } .development .content{ width: 1200px; padding-top: 85px; padding-bottom: 232px; } .development .content .d-title{ margin-bottom: 70px; text-align: center; } .development .content .d-title h3{ font-size: 30px; } .development .content .d-title p{ font-size: 18px; } .development .content .list ul li{ margin-bottom: 45px; margin-left: -200px; opacity: 0; } .development .content .list ul li .year{ margin-bottom: 5px; } .development .content .list ul li .year h4{ color: #449c4a; font-size: 24px; font-family:tt ; /*font-weight: bolder;*/ vertical-align: middle; } .development .content .list ul li .year i{ width: 34px; height: 5px; margin-left: 10px; background-color: #449c4a; vertical-align: middle; } .development .content .list ul li p{ margin-bottom: 15px; margin-left: 32px; border-left:3px solid #449c4a; font-size: 16px; text-indent: 10px; } /*environmental*/ .environmental{ background-color: #f7f7f7; padding-bottom: 150px; } .environmental .content{ width: 1200px; padding-top: 85px; } .environmental .content .e-title{ margin-bottom: 50px; } .environmental .content .e-title h3{ color: #449c4a; font-size:24px ; font-weight: 600; } .environmental .content .e-title p{ color: #449c4a; font-size:20px ; font-family: CAInfoTypeOp; } .environmental .content .midden{ margin-bottom: 40px; } .environmental .content .midden p{ width: 600px; font-size:16px ; line-height: 30px; text-indent: 32px; } .environmental .content > .bottom{ padding-bottom: 90px; } .environmental .content > .bottom p{ width: 479px; margin-top: 75px; margin-left:60px ; font-size: 16px; line-height: 30px; } .environmental .content .system ul li{ width: 599px; height: 595px; margin-bottom: 13px; background-color: white; } .environmental .content .system ul li:nth-child(even){ border-left: 1px solid #f1f1f1; } .environmental .content .system ul li .top{ padding: 45px 0; border-bottom: 1px solid #f1f1f1; text-align: center; } .environmental .content .system ul li .top i{ width: 126px; height: 134px; background:no-repeat center top/100%; } .environmental .content .system ul li:nth-child(1) .top i{ background-image:url("../img/cip.png") ; } .environmental .content .system ul li:nth-child(2) .top i{ background-image:url("../img/mashi.png") ; } .environmental .content .system ul li:nth-child(3) .top i{ background-image:url("../img/voice.png") ; } .environmental .content .system ul li:nth-child(4) .top i{ background-image:url("../img/so.png") ; } .environmental .content .system ul li .top h5{ margin-top: 20px; font-size: 20px; } .environmental .content .system ul li .top span{ right: 50%; bottom: -21px; margin-right: -10px; border: 10px solid transparent; /*border-top-color: #449c4a ;*/ } .environmental .content .system ul li .bottom{ padding: 0 15px; font-size: 16px; line-height: 30px; } .environmental .content .system ul li .bottom p{ margin-top: 58px; } /*honor*/ .honor{ padding-top: 90px; padding-bottom: 28px; } .honor .h-title{ margin-bottom: 63px; text-align: center; } .honor .h-title h3{ font-size: 30px; } .honor .h-title p{ font-size: 20px; letter-spacing: 2px; } .honor .certificate{ width: 1200px; } .honor .certificate >ul > li{ margin-bottom: 66px; } .honor .certificate ul li > div > ul > li{ transition: margin-top.3s; } .honor .certificate ul li > div > ul > li + li{ margin-left: 12px; } .honor .certificate ul li > div > ul > li p{ } .honor .certificate ul li div i { width:36px ; height: 6px; margin: 20px 0; background-color: #d0d0d0; } .honor .certificate ul li div div{ width: 700px; height: 61px; padding:7px 47px 7px 35px; background-color: #449c4a; color: white; } .honor .certificate ul li div div p, .honor .certificate ul li div div h4{ vertical-align: middle; } .honor .certificate ul li div div h4{ width: 137px; font-size: 18px; } .honor .certificate ul li div div em{ width: 3px; height: 61px; margin-left: 44px; margin-right: 45px; background-color: white; vertical-align: middle; } .honor .certificate ul li div div p{ width: 411px; font-size: 15px; } /*culture*/ .culture { width: 1200px; padding-top: 65px; } .culture .c-title{ margin-bottom: 70px; text-align: center; } .culture .c-title h3{ color: #449c4a; font-size:24px ; } .culture .c-title p{ color: #449c4a; font-size: 20px; font-weight: lighter; } .culture .content{ margin-top: 121px; } .culture .content .logo li{ width:200px ; height: 200px; background-color: rgba(241,241,241,.7); font-size: 20px; text-align: center; border-radius: 50%; transition: .5s; } .culture .content .logo li + li{ margin-left: 133px; } .culture .content .logo li i{ width: 59px; height: 51px; margin-top: 35px; } .culture .content .logo li:nth-child(1) i{ background: url("../img/idea.png") no-repeat center top/70%; } .culture .content .logo li:nth-child(2) i{ background: url("../img/plane.png") no-repeat center bottom/100%; } .culture .content .logo li:nth-child(3) i{ background: url("../img/sort.png") no-repeat center top/85%; } .culture .content .logo li:nth-child(4) i{ background: url("../img/hand.png") no-repeat center bottom/95%; } .culture .content .logo li p:nth-of-type(1){ width: 150px; height: 1px; margin-top: 14px; margin-bottom:8px; background-color: #1c1c1c; } .culture .content .logo li p{ color: #1c1c1c; } .culture .content .pic li{ width: 364px; margin-top: 112px; font-size: 16px; text-align: center; } .culture .content .pic li + li{ margin-left: 54px; } .culture .content .pic li h4{ margin-top: 41px; margin-bottom: 15px; opacity: 0; } .culture .content .pic li p{ line-height: 30px; opacity: 0; } .culture .brief{ margin-top: 80px; text-align: center; } .culture .brief h3{ color: #449c4a; font-size: 24px; } .culture .brief p{ font-size: 16px; } .culture .brief p:nth-of-type(1){ margin-bottom:41px ; color: #449c4a; font-size: 20px; } .culture .brief p:nth-of-type(2), .culture .brief p:nth-of-type(3){ line-height: 30px; } .culture .structure{ width: 1200px; } /*advantage*/ .advantage{ padding-top: 90px; padding-bottom: 120px; background-color: #f8f8f8; } .advantage .a-title{ margin-bottom: 123px; text-align: center; } .advantage .a-title h3{ font-size: 30px; } .advantage .a-title p{ font-size: 21px; font-weight: 300; letter-spacing: 1px; } .advantage .number{ width: 1208px; height: 122px; margin-bottom: 0; } .advantage .number .green{ top: 50%; height: 16px; margin-top: -8px; background-color: #449c4a; } .advantage .number .green:nth-of-type(2){ top: 640px; width: 1000px; left: 50%; margin-left: -500px; } .advantage .number ul{ top: 50%; margin-top: -35px; } .advantage .number ul li{ background-color:#f8f8f8; color: #449c4a ; font-size: 50px; } .advantage .number ul li:nth-child(4), .advantage .number ul li:nth-child(5){ top:580px; left: 356px; } .advantage .number ul li:nth-child(5){ left: 810px; } .advantage .number ul li.on{ width:123px ; height: 123px; margin-left: -40px; margin-top: -27px; background-color: #449c4a; color:white; text-align: center; line-height: 123px; border-radius: 50%; } .advantage .number ul li:nth-child(1){ left: 10%; } .advantage .number ul li:nth-child(2){ left: 48%; } .advantage .number ul li:nth-child(3){ left: 86%; } .advantage .n-content{ width: 1208px; padding-top:50px ; } .advantage .n-content ul{ /*width: 2128px;*/ } .advantage .n-content ul li{ width: 288px; text-align: center; } .advantage .n-content ul li + li{ margin-left: 172px; } .advantage .n-content ul li:nth-child(4), .advantage .n-content ul li:nth-child(5){ margin-top: 200px; } .advantage .n-content ul li:nth-child(4){ margin-left: 235px; } .advantage .n-content ul li .top span{ top: -50px; left: 50%; margin-left: -18px; border: 15px solid transparent; border-bottom: 35px solid #449c4a; } .advantage .n-content ul li .top span.on{ border-bottom-color: #f8f8f8; } .advantage .n-content ul li .top{ height: 230px; padding: 35px 24px; border: 1px solid #f8f8f8; background-color: #449c4a; color:white; } .advantage .n-content ul li .top.on{ border-color: #d3d3d3; background-color: #f8f8f8; color:black; } .advantage .n-content ul li .top i{ width: 69px; height: 69px; background: no-repeat center top/100%; } .advantage .n-content ul li:nth-child(1) .top i.on{ background-image: url("../img/nishi.png"); } .advantage .n-content ul li:nth-child(2) .top i.on{ background-image: url("../img/mianji.png"); } .advantage .n-content ul li:nth-child(3) .top i.on{ background-image: url("../img/xmjy.png"); } .advantage .n-content ul li:nth-child(4) .top i.on{ background-image: url("../img/zlbz.png"); } .advantage .n-content ul li:nth-child(5) .top i.on{ background-image: url("../img/jishu.png"); } .advantage .n-content ul li:nth-child(1) .top i{ background-image: url("../img/niushi1.png"); } .advantage .n-content ul li:nth-child(2) .top i{ background-image: url("../img/mianji1.png"); } .advantage .n-content ul li:nth-child(3) .top i{ background-image: url("../img/xmjy1.png"); } .advantage .n-content ul li:nth-child(4) .top i{ background-image: url("../img/zlbz1.png"); } .advantage .n-content ul li:nth-child(5) .top i{ background-image: url("../img/jishu1.png"); } .advantage .n-content ul li .top p{ margin-top: 20px; font-size: 16px; line-height: 30px; } .advantage .n-content ul li h4{ padding: 21px 0; background-color: white; font-size: 26px; } .advantage .map{ width: 1550px; margin-top: 115px; } .advantage .map .m-title{ width: 100%; margin-bottom: 123px; text-align: center; } .advantage .map .m-title h3{ font-size: 30px; } .advantage .map .m-title p{ font-size: 21px; font-weight: 300; letter-spacing: 1px; } .advantage .map > div .point-area .point-10:after { animation-play-state: paused; -webkit-animation-play-state: paused; /* Safari 和 Chrome */ } .advantage .map > div .point-area .point-70:after { animation-play-state: paused; -webkit-animation-play-state: paused; /* Safari 和 Chrome */ } .advantage .map > div .point-area { text-align: center; position: absolute; width: 10%; height: 22%; -webkit-transition: opacity 0.5s ease-out; -moz-transition: opacity 0.5s ease-out; -o-transition: opacity 0.5s ease-out; transition: opacity 0.5s ease-out; } .advantage .map > div .point-area:nth-of-type(1){ top: 26%; left: 60%; } .advantage .map > div .point-area:nth-of-type(2){ top: 36%; left: 16%; } .advantage .map > div .point-area:nth-of-type(3){ top: 64%; left: 27%; } .advantage .map > div .point-area:nth-of-type(4){ top: 72%; left: 79%; } .advantage .map > div .point-area:nth-of-type(5){ top: 61%; left: 69%; } .advantage .map > div .point-area:nth-of-type(6){ top: 41%; left: 64%; } .advantage .map > div .point-area:nth-of-type(7){ top: 41%; left: 60%; } .advantage .map > div .point-area:nth-of-type(8){ top: 26%; left: 64.5%; } .advantage .map > div .point-area:nth-of-type(9){ top: 25%; left: 67.5%; } .advantage .map > div .point-area:nth-of-type(10){ top: 49%; left: 64%; } .advantage .map > div .point-area:nth-of-type(11){ top: 38%; left: 59%; } .advantage .map > div .point-area:nth-of-type(12){ top: 29%; left: 50%; } .advantage .map > div .point-area:nth-of-type(13){ top: 28%; left: 47%; } .advantage .map > div .point-area:nth-of-type(14){ top: 19%; left: 49%; } .advantage .map > div .point-area:nth-of-type(15){ top: 14%; left: 46%; } .advantage .map > div .point-area:nth-of-type(16){ top: 18%; left: 39%; } .advantage .map > div .point-area:nth-of-type(17){ top: 19%; left: 41%; } .advantage .map > div .point-area:nth-of-type(18){ top: 24%; left: 42%; } .advantage .map > div .point-area:nth-of-type(19){ top: 32%; left: 44%; } .advantage .map > div .point-area:nth-of-type(20){ top: 32%; left: 41%; } .advantage .map > div .point-area:nth-of-type(21){ top: 65%; left: 40%; } .advantage .map > div .point-area:nth-of-type(22){ top: 23%; left: 32%; } .advantage .map > div .point-area:nth-of-type(23){ top: 20%; left: 35%; } .advantage .map > div .point-area:nth-of-type(24){ top: 16.5%; left: 37%; } .advantage .map > div .point-area:nth-of-type(25){ top: 16%; left: 33%; } .advantage .map > div .point-area .point { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 6px; height: 6px; margin: auto; -webkit-border-radius: 50%; -webkit-background-clip: padding-box; -moz-border-radius: 50%; -moz-background-clip: padding; border-radius: 50%; background-clip: padding-box; background: transparent; } .advantage .map > div .point-area p{ position: absolute; top: 45%; left: 54%; font-size: 12px; opacity: 0; } .advantage .map > div .point-area:hover p{ opacity: 1; } .advantage .map > div .point-area .point-dot { z-index: 1; background-color: #fee900; border: 1px solid rgba(254, 233, 0, 0.37); } .advantage .map > div .point-area .point-10 { width: 100%; height: 100%; } .advantage .map > div .point-area .point-10:after { content: ''; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 50%; border: 2px solid #fff; opacity: 0; -webkit-animation: ripple 4500ms ease-out 225ms infinite; -moz-animation: ripple 4500ms ease-out 225ms infinite; -o-animation: ripple 4500ms ease-out 225ms infinite; animation: ripple 4500ms ease-out 225ms infinite; } .advantage .map > div .point-area .point-70 { width: 100%; height: 100%; } .advantage .map > div .point-area .point-70:after { content: ''; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 50%; border: 2px solid #fff; opacity: 0; -webkit-animation: ripple 4500ms ease-out 1575ms infinite; -moz-animation: ripple 4500ms ease-out 1575ms infinite; -o-animation: ripple 4500ms ease-out 1575ms infinite; animation: ripple 4500ms ease-out 1575ms infinite; } lesshat-selector { -lh-property: 0; } @-webkit-keyframes ripple{ 0%{opacity:0;-webkit-transform:scale(0.1,0.1); } 5%{ opacity:1; } 100%{ opacity:0; -webkit-transform:scale(1)}} @-moz-keyframes ripple{ 0%{opacity:0;-moz-transform:scale(0.1,0.1); } 5%{ opacity:1; } 100%{ opacity:0; -moz-transform:scale(1)}} @-o-keyframes ripple{ 0%{opacity:0;-o-transform:scale(0.1,0.1); } 5%{ opacity:1; } 100%{ opacity:0; -o-transform:scale(1)}} @keyframes ripple{ 0%{opacity:0;-webkit-transform:scale(0.1,0.1);-moz-transform:scale(0.1,0.1);-ms-transform:scale(0.1,0.1);transform:scale(0.1,0.1); } 5%{ opacity:1; } 100%{ opacity:0;-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}} [not-existing] { zoom: 1; } /*organizational*/ .organizational { padding-top: 55px; padding-bottom: 320px; background:url("../img/0c6cde92d1ddab2ecc5b00f15837691e.png") no-repeat center bottom/100%; } .organizational .o-title{ text-align: center; } .organizational .o-title h3{ font-size: 30px; } .organizational .o-title p{ font-size: 16px; } .organizational .o-title p + p{ line-height: 30px; } .organizational .o-title p:nth-of-type(1){ margin-bottom: 60px; font-size: 17px; } .organizational .structure{ width: 909px; margin: 55px auto; } .organizational .structure .left{ top: 310px; } .organizational .structure .left li + li{ margin-left: 22px; } .organizational .structure .left li a{ display: table-cell; width: 10px; padding: 43px 19px; background-color: #449c4a; color: white; font-size: 16px; vertical-align: middle; border-radius: 10px; } /*.organizational .structure .right{ top: 195px; left:740px; } .organizational .structure .right ul li{ text-align: center; width: 169px; height: 54px; background-color: #449c4a; line-height: 54px; border-radius: 10px; } .organizational .structure .right ul li + li{ margin-top: 22px; } .organizational .structure .right ul li a{ color: white; }*/ /*second*/ .second{ padding-top: 92px; padding-bottom: 250px; text-align: center; } .second .title{ margin-bottom: 75px; } .second .title h3{ margin: 0 20px; font-size: 30px; vertical-align: middle; } .second .title h3:before{ content: ""; position: absolute; top:50%; left: -25px; width: 10px; height: 10px; margin-top: -2px; background-color: black; border-radius: 50%; } .second .title h3:after{ content: ""; position: absolute; top:50%; right: -25px; width: 10px; height: 10px; margin-top: -2px; background-color: black; border-radius: 50%; } .second .title i{ width: 131px; height: 1px; background-color: black; } .second .content{ width: 1024px; } .second .content img{ display: block !important; width: 100% !important; height: auto; margin-bottom: 37px; } .second .content p{ font-size: 16px; text-align: justify; text-indent:32px ; line-height: 30px; }