@charset "utf-8"; .bannerBox { position: relative; } .bannerBox .banner { position: relative; } .bannerBox .bannerImg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: url(../images/banner01.png) no-repeat center center; background-size: cover; z-index: 999; } .bannerBox .banner05 { background: url(../images/banner05.jpg) no-repeat center center; background-size: cover; cursor:pointer; } .bannerBox .banner06 { background: url(../images/banner06.png) no-repeat center center; background-size: cover; cursor:pointer; } .bannerBox .banner07 { background: url(../images/banner07.jpg) no-repeat center center; background-size: cover; cursor:pointer; } .bannerBox .banner08 { background: url(../images/banner08.jpg) no-repeat center center; background-size: cover; cursor:pointer; } .bannerBox .banner02 { background: url(../images/banner02.jpg) no-repeat center center; background-size: cover; } .bannerBox .banner03 { background: url(../images/banner03.jpg) no-repeat center center; background-size: cover; } .bannerBox .banner04 { background: url(../images/banner04.jpg) no-repeat center center; background-size: cover; } .bannerBox .banner05:before { width: 100%; height: 100%; position: absolute; left: 0; top: 20px; opacity: 0; transition: all 0.5s; -webkit-transition: all 0.5s; background: url(../images/) no-repeat center center; background-size: cover; content: ""; cursor:pointer; } .bannerBox .banner06:before { width: 100%; height: 100%; position: absolute; left: 0; top: 20px; opacity: 0; transition: all 0.5s; -webkit-transition: all 0.5s; background: url(../images/) no-repeat center center; background-size: cover; content: ""; cursor:pointer; } .bannerBox .swiper-slide.banner07:before { width: 100%; height: 100%; position: absolute; left: 0; top: 20px; opacity: 0; transition: all 0.5s; -webkit-transition: all 0.5s; background: url(../images/) no-repeat center center; background-size: cover; content: ""; cursor:pointer; } .bannerBox .banner08:before { width: 100%; height: 100%; position: absolute; left: 0; top: 20px; opacity: 0; transition: all 0.5s; -webkit-transition: all 0.5s; background: url(../images/) no-repeat center center; background-size: cover; content: ""; cursor:pointer; } .bannerBox .banner02:before { width: 100%; height: 100%; position: absolute; left: 0; top: 20px; opacity: 0; transition: all 0.5s; -webkit-transition: all 0.5s; background: url(../images/) no-repeat center center; background-size: cover; content: ""; } .bannerBox .banner03:before { width: 100%; height: 100%; position: absolute; left: 0; top: 20px; opacity: 0; transition: all 0.5s; -webkit-transition: all 0.5s; background: url(../images/) no-repeat center center; background-size: cover; content: ""; } .bannerBox .banner04:before { width: 100%; height: 100%; position: absolute; left: 0; top: 20px; opacity: 0; transition: all 0.5s; -webkit-transition: all 0.5s; background: url(../images/) no-repeat center center; background-size: cover; content: ""; } .bannerBox .banner.active:before { top: 0; opacity: 1; } .bannerBox .swiper-slide-active.banner07:before { transition-delay: .5s; -webkit-transition-delay: .5s; top: 0; opacity: 1; } .bannerBox .pages { margin-left: -110px; width: 230px; position: absolute; left: 50%; bottom: 40px; z-index: 10; } .bannerBox .pages p { margin-bottom: 2px; color: #ffe400; font-family: "Century"; font-size: 18px; font-weight: bold; text-align: center; display:none; } .bannerBox .pages p span { font-size: 48px; } .bannerBox .pages .arrows { padding: 17px 0; position: relative; } .bannerBox .pages .arrows .prev { display:none; position: absolute; left: 0; top: -2px; cursor: pointer; } .bannerBox .pages .arrows .next {display:none; position: absolute; right: 0; top: -2px; cursor: pointer; } .bannerBox .pages .arrows .line { margin: 0 auto; width: 160px; height: 1px; background: rgba(255,255,255,0.2); } .bannerBox .pages .arrows .line span { width: 0; display: block; height: 1px; background: #fff; } #main .section01 { padding: 85px 0; box-sizing: border-box;color: #fff; background: #c70b09; } #main .section01 ul { margin: 0 auto; max-width: 1920px; } #main .section01 li { padding-left: 8.8%; float: left; position: relative; color: #fff; font-size: 18px; box-sizing: border-box; } #main .section01 li:nth-child(3) { font-size: 16px; } #main .section01 li:nth-child(1) { width: 36.7%; } #main .section01 li:nth-child(2) { width: 33%; } #main .section01 li > span { margin-bottom: -1px; display: block; font-family: "Century"; font-size: 82px; font-weight:normal; line-height: 1.2; } #main .section01 li:nth-child(2) > span { margin-left: -10px; } #main .section01 li:nth-child(3) > span { margin: -8px 0 10px; } #main .section01 li img { margin-top: -14px; position: absolute; right: 43px; top: 50%; display: block; } #main .section01 li:nth-child(2) img { right: 26px; } #main .section02 { padding: 42px 0; background: #FFF; } #main .section02 > p { margin-bottom: 10px; color: #333; font-size: 16px; line-height: 30px; text-align: center; opacity: 0; transform: translateY(20px); -webkit-transform: translateY(20px); transition: all 0.5s; -webkit-transition: all 0.5s; transition-delay: 1.2s; -webkit-transition-delay: 1.2s; } #main .section02 > .title { margin-bottom: 22px; width: 0; height: 76px; overflow: hidden; color: #000; font-size: 30px; font-weight: bold; line-height: 96px; text-align: center; background: #fff; box-sizing: border-box; transition: all 0.5s linear; -webkit-transition: all 0.5s linear; } #main .section02.active > .title { width: 100%; } #main .section02 > .title p { padding: 0 30px; opacity: 0; transition: all 0.5s; -webkit-transition: all 0.5s; transition-delay: 0.8s; -webkit-transition-delay: 0.8s; } #main .section02.active > p, #main .section02.active > .title p { transform: translateY(0); -webkit-transform: translateY(0); opacity: 1; } #main .section02 .img { margin-right: 12px; text-align: center; } #main .section02 > ul { margin: 0 auto; padding: 0 65px; position: relative; z-index: 1; max-width: 1600px; } #main .section02 > ul > li { margin-bottom: 60px; padding: 40px; width: 50%; height: 420px; float: left; position: relative; cursor: pointer; box-sizing: border-box; transition: all 0.5s; -webkit-transition: all 0.5s; background-color: #FFF; z-index: -10; } #main .section02 > ul > li:before { width: 100%; height: 100%; position: absolute; right: 0; top: 0; background: #82c223; content: ""; z-index: -2; transition: all 0.5s; -webkit-transition: all 0.5s; } #main .section02 > ul > li:hover:before { background: #fff; } #main .section02 > ul > li:after { width: 100%; height: 100%; position: absolute; right: 0; top: 0; background: url(../images/img06.png) no-repeat left bottom; content: ""; z-index: -1; transition: all 0.5s; } #main .section02 > ul > li:hover:after { right: -10px; background-image: url(../images/img06_on.png); } #main .section02 > ul > .li02:before { background: #aaf022; } #main .section02 > ul > .li02:after { background: url(../images/img07.png) no-repeat left bottom; } #main .section02 > ul > .li02:hover:after { right: -20px; background-image: url(../images/img07_on.png); } #main .section02 > ul > .li03:before { background: #2344A7; } #main .section02 > ul > .li03:after { background: url(../images/img08.png) no-repeat left bottom; } #main .section02 > ul > .li03:hover:after { right: -20px; background-image: url(../images/img08_on.png); } #main .section02 > ul > .li04:before { background: #2B52D3; } #main .section02 > ul > .li04:after { background: url(../images/img09.png) no-repeat left bottom; } #main .section02 > ul > .li04:hover:after { right: -20px; background-image: url(../images/img09_on.png); } #main .section02 li .title { color: #fff !important; font-size: 24px; line-height: 1.1; } #main .section02 > ul >li:nth-child(1) *{color: #82c223;} #main .section02 > ul >li:nth-child(2) *{color: #FDB200;} #main .section02 > ul >li:nth-child(3) *{color: #2344A7;} #main .section02 > ul >li:nth-child(4) *{color: #2B52D3;} #main .section02 > ul >li a:hover {color: #fff;} #main .section02 > ul >li .style01 a,#main .section02 > ul >li .style02 a{color: #fff;} #main .section02 > ul >li .style01 a:hover,#main .section02 > ul >li .style02 a:hover{color: #F46301;} #main .section02 > ul >li:nth-child(2) .style01 a:hover,#main .section02 > ul >li:nth-child(2) .style02 a:hover{color: #FDB200;} #main .section02 > ul >li:nth-child(3) .style01 a:hover,#main .section02 > ul >li:nth-child(3) .style02 a:hover{color: #2344A7;} #main .section02 > ul >li:nth-child(4) .style01 a:hover,#main .section02 > ul >li:nth-child(4) .style02 a:hover{color: #2B52D3;} #main .section02 li .title>span { margin-top: 11px; display: block; font-size: 18px; color: #fff !important; } #main .section02 li .img { position: absolute; right: 55px; top: 42px; } #main .section02 li .arrow { position: absolute; right: 100px; bottom: 40px; } #main .section02 li ul { padding-top: 10px; position: absolute; left: 232px; top: 50%; display: none; transform: translateY(-50%); -webkit-transform: translateY(-50%); } #main .section02 li:hover ul { display: block; } #main .section02 li:hover .title, #main .section02 li:hover .arrow { display: none; } #main .section02 li:hover .img { background: url(../images/img02_on.png) no-repeat; } #main .section02 .li02:hover .img { background: url(../images/img03_on.png) no-repeat; } #main .section02 .li03:hover .img { background: url(../images/img04_on.png) no-repeat; } #main .section02 .li04:hover .img { background: url(../images/img05_on.png) no-repeat; } #main .section02 li:hover .img img { visibility: hidden; } #main .section02 li li { margin: 0 8px 10px 0; padding: 0 10px; float: left; color: #f46301; font-size: 16px; line-height: 28px; border: 2px solid #F46301; transition: all 0.5s; -webkit-transition: all 0.5s; position: relative; } #main .section02 li li.style01 { color: #fff; background-color: #F46301; } #main .section02 li li.style02 { color: #fff; font-size: 24px; font-weight: bold; line-height: 46px; background-color: #F46301; } #main .section02 li li:hover { background-color: #F46301; color: #fff; } #main .section02 li li:hover a{color: #fff;} #main .section02 li li.style01:hover, #main .section02 li li.style02:hover { border: 2px solid #F46301; color: #f46301; background-color: #FFF; } #main .section02 li li.style01:hover a, #main .section02 li li.style02:hover a{ color: #f46301; } #main .section02 .li02 li { color: #fdac00; border-color: #fdac00; } #main .section02 .li02 li.style01 { background-color: #fdac00; } #main .section02 .li02 li.style02 { background-color: #fdac00; } #main .section02 .li02 li:hover { background-color: #fdac00; color: #fff; } #main .section02 .li02 li:hover a{ color: #fff; } #main .section02 .li02 li.style01:hover, #main .section02 .li02 li.style02:hover { border: 2px solid #fdac00; color: #fdac00; background-color: #FFF; } #main .section02 .li02 li.style01:hover a, #main .section02 .li02 li.style02:hover a{ color: #fdac00; } #main .section02 .li03 li { color: #2241a7; border-color: #2241a7; } #main .section02 .li03 li.style01 { background-color: #2241a7; } #main .section02 .li03 li.style02 { background-color: #2241a7; } #main .section02 .li03 li:hover { background-color: #2241a7; color: #fff; } #main .section02 .li03 li.style01:hover, #main .section02 .li03 li.style02:hover { border: 2px solid #2241a7; color: #2241a7; background-color: #FFF; } #main .section02 .li03 li.style01:hover a, #main .section02 .li03 li.style02:hover a{ color: #2241a7; } #main .section02 .li04 li { color: #2951d3; border-color: #2951d3; } #main .section02 .li04 li.style01 { background-color: #2951d3; } #main .section02 .li04 li.style02 { background-color: #2951d3; } #main .section02 .li04 li:hover { background-color: #2951d3; color: #fff; } #main .section02 .li04 li:hover a{color: #fff;} #main .section02 .li04 li.style01:hover, #main .section02 .li04 li.style02:hover { border: 2px solid #2951d3; color: #2951d3; background-color: #FFF; } #main .section02 .li04 li.style01:hover a, #main .section02 .li04 li.style02:hover a{ color: #2951d3; } #main .section02 li .clear { clear: both; } #main .section03 { margin: 0 auto; padding: 107px 65px 150px; max-width: 1600px; } #main .section03 .title { margin-bottom: 72px; padding: 0 0 113px 20px; position: relative; color: #000; font-size: 32px; line-height: 1.6; text-align: center; border-bottom: 4px solid rgba(0,0,0,0); } #main .section03 .title:before { width: 0; height: 4px; position: absolute; left: 0; top: 100%; background: #000; content: ""; transition: all 0.5s; -webkit-transition: all 0.5s; transition-delay: 0.9s; -webkit-transition-delay: 0.9s; } #main .section03 .title.active:before { width: 100%; } #main .section03 .title img { margin: 0 auto 16px; padding-right: 28px; display: block; opacity: 0; transition: all 0.5s; -webkit-transition: all 0.5s; } #main .section03 .title.active img { opacity: 1; } #main .section03 .title span { opacity: 0; transition: all 0.5s; -webkit-transition: all 0.5s; transition-delay: 0.5s; -webkit-transition-delay: 0.5s; } #main .section03 .title .txt02 { transition-delay: 0.6s; -webkit-transition-delay: 0.6s; } #main .section03 .title.active span { opacity: 1; } #main .section03 .ttl { } #main .section03 .ttl p { float: left; color: #000; font-size: 24px; } #main .section03 .ttl .tabNavi { margin-top: 4px; float: right; position: relative; } #main .section03 .ttl .tabNavim{display: none;} #main .section03 .ttl .tabNavim2{display: none;} #main .section03 .ttl .tabNavi li { margin-left: 27px; float: left; } #main .section03 .ttl .tabNavi li a { padding: 0 10px 39px; display: block; color: #000; font-size: 16px; } #main .section03 .ttl .tabNavi li.line { margin: 0; width: 0; height: 2px; float: none; position: absolute; left: 0; bottom: 0; background: #82c223; transition: all 0.5s; -webkit-transition: all 0.5s; } #main .section03 .tabPanel { overflow: hidden; } /* 首页曼妙动画模拟 */ #main .section03 li .sydh{display: block;width: 100%;height: 100%;position: absolute;top: 0;left: 0;overflow: hidden;} #main .section03 li .sydh .syhs{display: block;width: 100%;height: 100%;position: absolute;top: 0;left: 0;background: #000;} #main .section03 li .lbox_ff{position: absolute;width: 100%;height: 100%;top: 0;left: 100%;background: #000;z-index: 6;background: #fff;transition: all 0.3s;-webkit-transition: all 0.3s;} #main .section03 li:nth-child(2) .lbox_ff{transition-delay: .1s;-webkit-transition-delay: .1s;} #main .section03 li:nth-child(3) .lbox_ff{transition-delay: .2s;-webkit-transition-delay: .2s;} #main .section03 li:nth-child(4) .lbox_ff{transition-delay: .3s;-webkit-transition-delay: .3s;} #main .section03 li:nth-child(5) .lbox_ff{transition-delay: .4s;-webkit-transition-delay: .4s;} #main .section03 li:nth-child(6) .lbox_ff{transition-delay: .5s;-webkit-transition-delay: .5s;} #main .section03 li.act .lbox_ff{left: 0;transition-delay: 0s;-webkit-transition-delay: 0s;} /* #main .section03 .tabPanel li { padding: 0 0 40px; width: 33.3%; float: left; } #main .section03 .tabPanel li .img, #main .section03 .tabPanel li .text { padding: 0 25px; } #main .section03 .tabPanel li a { display: block; position: relative; } #main .section03 .tabPanel li .img a { overflow: hidden; } #main .section03 .tabPanel li .img img { display: block; transition: all 0.4s; } #main .section03 .tabPanel li a:hover img { transform: scale(1.1); } #main .section03 .tabPanel li .img a > span { width: 100%; height: 100%; position: absolute; left: 0; top: 0; visibility: hidden; opacity: 0; background: rgba(34,65,167,0.95); transition: all 0.5s; -webkit-transition: all 0.5s; } #main .section03 .tabPanel li .img a:hover > span { visibility: visible; opacity: 1; } #main .section03 .tabPanel li .img a span span { width: 100%; position: absolute; left: 0; top: 50%; display: block; color: #fff; font-size: 14px; line-height: 65px; text-align: center; transform: translateY(-50%); -webkit-transform: translateY(-50%); } #main .section03 .tabPanel li .img a span span:before { width: 10px; height: 2px; position: absolute; left: 50%; top: 0; background: #fff; content: ""; transform: translateX(-50%); -webkit-transform: translateX(-50%); transition: width 0.3s; -webkit-transition: width 0.3s; } #main .section03 .tabPanel li .img a span span:after { width: 10px; height: 2px; position: absolute; left: 50%; bottom: 0; background: #fff; content: ""; transform: translateX(-50%); -webkit-transform: translateX(-50%); transition: width 0.3s; -webkit-transition: width 0.3s; } #main .section03 .tabPanel li .img a:hover span span:before, #main .section03 .tabPanel li .img a:hover span span:after { width: 110px; } #main .section03 .tabPanel li .text { height: 80px; } #main .section03 .tabPanel li .text a { padding: 9px 7px; color: #999; font-size: 13px; line-height: 1.7; transition: all 0.5s; -webkit-transition: all 0.5s; background: url(../images/icon01.png) no-repeat right 15px top 57px; } #main .section03 .tabPanel li .text a:hover { background: url(../images/icon01.png) no-repeat right 10px top 57px; } #main .section03 .tabPanel li .text a span { display: block; color: #000; font-size: 18px; } #main .section03 .tabPanel .more { margin: 0 auto; padding: 36px 52px 0 0; width: 310px; } #main .section03 .tabPanel .more a { padding: 0 47px; display: block; color: #000; font-size: 16px; line-height: 48px; border-radius: 27px; border: 3px solid #000; background: url(../images/icon02.png) no-repeat right 44px center; transition: all 0.5s; -webkit-transition: all 0.5s; } #main .section03 .tabPanel .more a:hover { border: 3px solid #000; background: #000 url(../images/icon02_over.png) no-repeat right 38px center; color: #fff; } #main .section03 .tabPanel.show { display: block !important; } */ #main .section03 .tabPanel li { padding: 0 0 40px; width: calc(33.3% - 30px); float: left; position: relative; overflow: hidden; margin-right: 45px; } #main .section03 .tabPanel li:nth-child(3n){margin-right: 0;} #main .section03 .tabPanel li .lbox2{position: absolute;top: 0;left: 0;width: 100%;height: 100%;} #main .section03 .tabPanel li .lbox2 .lblank{width: 100%;height: 100%;background: #000;} #main .section03 .tabPanel li .img, #main .section03 .tabPanel li .text { } #main .section03 .tabPanel li .img { overflow: hidden; } #main .section03 .tabPanel li .img .imgbox{width: 100%;position: relative;overflow: hidden;} img{ transform: translateZ(0px); -webkit-transform: translateZ(0px); } #main .section03 .tabPanel li .img img { display: block; transition: transform 0.6s ease 0s; width: 100%; } #main .section03 .tabPanel li .img .imgbox > img{ transform: scale(1.01) ; -webkit-transform: scale(1.01) ; } #main .section03 .tabPanel li:hover .img .imgbox > img { transform: scale(1.05) ; -webkit-transform: scale(1.05) ; } #main .section03 .tabPanel li .img .imgbox >span { width: 100%; height: 100%; position: absolute; left: 0; top: 0; visibility: hidden; opacity: 0; background: rgba(0,0,0,0); transition: all 0.3s; -webkit-transition: all 0.3s; } #main .section03 .tabPanel li .img .imgbox .videoImg{ width: 60px; height: 60px; position: absolute; top: 50%;margin-top: -30px; left: 50%;margin-left: -30px; z-index: 5; transition: transform 0.3s ease 0s; } #main .section03 .tabPanel li:hover .img .imgbox .videoImg { transform: scale(1.05); -webkit-transform: scale(1.05); } #main .section03 .tabPanel li .img .imgbox .appImg{ width: 125px; height: 125px; position: absolute; top: 50%;margin-top: -62px; left: 50%;margin-left: -62px; z-index: 5; } #main .section03 .tabPanel li:hover .img .imgbox > span { visibility: visible; opacity: 1; background: rgba(0,0,0,0.6); } #main .section03 .tabPanel li .img .imgbox span p{font-size: 18px;} #main .section03 .tabPanel li .img .imgbox span span { width: 100%; position: absolute; left: 0; top: 50%; display: block; color: #fff; font-size: 12px; padding: 0; line-height: 26px; padding: 3px 0; text-align: center; transform: translateY(-50%); -webkit-transform: translateY(-50%); } #main .section03 .tabPanel li .img .imgbox span span:before { /* width: 10px; height: 2px; position: absolute; left: 50%; top: 0; background: #fff; content: ""; transform: translateX(-50%); -webkit-transform: translateX(-50%); transition: width 0.3s; -webkit-transition: width 0.3s; */ content: ""; display: inline-block; width: 100px; height: 1px; background-color: #f2f2f2; position: absolute; left: 50%; margin-left: -50px; transition: all 0.6s ease 0s; top: 0; } #main .section03 .tabPanel li .img .imgbox span span:after { /* width: 10px; height: 2px; position: absolute; left: 50%; bottom: 0; background: #fff; content: ""; transform: translateX(-50%); -webkit-transform: translateX(-50%); transition: width 0.3s; -webkit-transition: width 0.3s; */ content: ""; display: inline-block; width: 100px; height: 1px; background-color: #f2f2f2; position: absolute; left: 50%; margin-left: -50px; transition: all 0.6s ease 0s; bottom:0; } #main .section03 .tabPanel li:hover .img .imgbox span span:before, #main .section03 .tabPanel li:hover .img .imgbox span span:after { /* width: 60%; */ width: 6px; margin-left: -3px; opacity: 0.6; } #main .section03 .tabPanel li .text { height: 80px; } #main .section03 .tabPanel li .text { padding: 9px 15px; color: #999; font-size: 13px; line-height: 1.7; transition: all 0.3s; -webkit-transition: all 0.3s; background: url(../images/icon01.png) no-repeat right 15px top 57px; } #main .section03 .tabPanel li:hover .text { background: url(../images/icon01.png) no-repeat right 10px top 57px; } #main .section03 .tabPanel li .text span { display: block; color: #000; font-size: 18px; } #main .section03 .tabPanel .more { margin: 0 auto; padding: 36px 52px 0 0; width: 310px; } #main .section03 .tabPanel .more a { padding: 0 47px; display: block; color: #000; font-size: 16px; line-height: 48px; border-radius: 27px; border: 3px solid #000; background: url(../images/icon02.png) no-repeat right 44px center; transition: all 0.5s; -webkit-transition: all 0.5s; } #main .section03 .tabPanel .more a:hover { border: 3px solid #000; background: #000 url(../images/icon02_over.png) no-repeat right 38px center; color: #fff; } #main .section03 .tanbox{position: relative;transition: width 0.3s;-webkit-transition: width 0.3s;overflow: hidden;} #main .section03 .tabPanel { position: absolute;top: 0;left: 0;top: 0;width: 100%; opacity: 0; overflow: hidden; height: 0; } #main .section03 .tabPanel.show { opacity: 1; height: auto; } #main .section04 { padding: 140px 0 128px; background: #1b1b1b; } #main .section04 .wrap { margin: 0 auto; max-width: 1600px; padding: 0 65px; } #main .section04 .title { margin-bottom: 122px; position: relative; color: #fff; font-size: 16px; line-height: 1.35; text-align: center; } #main .section04 .title:before { margin-left: -2px; width: 4px; height: 30px; position: absolute; left: 50%; top: -74px; background: #fff; content: ""; } #main .section04 .title span { margin-bottom: 18px; display: block; font-size: 34px; font-weight: bold; } #main .section04 li { margin: 0 5% 70px 0; width: 12%; float: left; position: relative; } #main .section04 li img { margin: 0 auto; display: block; /* transition: all 0.5s; -webkit-transition: all 0.5s; */} #main .section04 li:nth-child(6n){margin-right: 0;} /*#main .section04 li img:last-child { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); visibility: hidden; opacity: 0; } #main .section04 li.on img { visibility: hidden; opacity: 0; } #main .section04 li.on img:last-child { visibility: visible; opacity: 1; } */#main .section04 .more { margin: 0 auto; width: 310px; } #main .section04 .more a { padding: 0 47px; display: block; color: #fff; font-size: 16px; line-height: 48px; border-radius: 27px; border: 3px solid #fff; background: url(../images/icon05.png) no-repeat right 44px center; transition: all 0.5s; -webkit-transition: all 0.5s; } #main .section04 .more a:hover { border: 3px solid #fff; color:#2344A7; background: #fff url(../images/icon05_over.png) no-repeat right 38px center; } #main .section05 { padding: 125px 65px 165px; background: #F3F3F3; } #main .section05 .wrap { margin: 0 auto; max-width: 1600px; } #main .section05 .title { margin-bottom: 60px; } #main .section05 .title span { display: block; float: left; color: #222; font-size: 24px; } #main .section05 .title a { margin: 13px 8px 0 0; display: block; float: right; color: #222; font-size: 14px; } #main .section05 ul { overflow: hidden; } #main .section05 li { padding-right: 3.125%; width: 31.25%; float: left; } #main .section05 li:last-child { padding-right: 0; } #main .section05 li a { padding: 60px 72px 72px 78px; display: block; position: relative; text-align: center; background-color: #fff; } #main .section05 li a:before { width: 100%; height: 100%; position: absolute; left: 0; top: 0; visibility: hidden; opacity: 0; transition: all 0.5s; -webkit-transition: all 0.5s; border: 20px solid #86c627; box-sizing: border-box; content: ""; } #main .section05 li a:hover:before { visibility: visible; opacity: 1; } #main .section05 li a .date { margin-bottom: 36px; display: block; color: #000; font-family: "Century"; font-size: 18px; font-weight: bold; line-height: 1.1; } #main .section05 li a .date span { display: block; font-size: 60px; } #main .section05 li a .img { margin-bottom: 23px; display: block; overflow: hidden; } #main .section05 li a .img img { transition: all 0.4s; } #main .section05 li a:hover .img img { transform: scale(1.1); } #main .section05 li a .txt { margin: 0 70px 73px 0; display: block; font-size: 18px; line-height: 1.3; text-align: left; } #main .section05 li a .arrow { display: block; } #main .section05 li a:hover .arrow { background: url(../images/icon04.png) no-repeat center top; } #main .section05 li a:hover .arrow img { visibility: hidden; } #main .section06 { padding: 0 74px 0 20px; overflow: hidden; text-align: center; background: #FFD900; } #main .section06 .imgBox { margin: 0 auto; max-width: 1261px; height: 675px; position: relative; } #main .section06 .imgBox img { display: block; position: relative; } #main .section06 .imgBox .img01 { position: absolute; left: 0; top: 175px; } #main .section06 .imgBox .img02 { position: absolute; left: 35.4%; top: -84px; z-index: 10; width: 343px; height: 341px; background: url(../images/sec06_img02.png) no-repeat center top; color:#fff; text-align: center; line-height: 30px; font-size: 20px; box-sizing: border-box; padding-top: 160px; } #main .section06 .imgBox .img03 { position: absolute; left: 19.4%; bottom: -42px; z-index: 20; width: 404px; height: 404px; background: url(../images/sec06_img03.png) no-repeat center top; color:#fff; text-align: center; line-height: 30px; font-size: 20px; box-sizing: border-box; padding-top: 155px; } #main .section06 .imgBox .img04 { position: absolute; left: 57.1%; top: 293px; z-index: 5; width: 290px; height: 287px; background: url(../images/sec06_img04.png) no-repeat center top; color:#fff; text-align: center; line-height: 30px; font-size: 18px; box-sizing: border-box; padding-top: 105px; } #main .section06 .imgBox .img02 a, #main .section06 .imgBox .img03 a, #main .section06 .imgBox .img04 a { color: #fff; } #main .section06 .imgBox .img05 { position: absolute; left: 35.3%; top: 211px; z-index: 21; } #main .section06 .imgBox .img06 { position: absolute; left: 59.2%; top: 86px; } #main .section06 .imgBox .img07 { position: absolute; left: 45.1%; top: 283px; } #main .section06 .imgBox .img08 { position: absolute; left: 50%; bottom: -38px; } #main .section06 .imgBox .img09 { position: absolute; right: 0; top: 150px; } #main .section06 .imgBox .img10 { position: absolute; left: 54.3%; top: 210px; z-index: 30; } #main .section07 { padding: 15px 60px; background: #FFEA01; } #main .section07 .wrap { margin: 0 auto; max-width: 1600px; } #main .section07 dl { margin-top: 6px; float: left; font-size: 12px; line-height: 15px; width: calc(100% - 100px); } #main .section07 dt { margin-right: 22px; padding-right: 20px; float: left; color: #010101; font-weight: bold; border-right: 2px solid #010101; box-sizing: border-box; width: 70px; } #main .section07 dd { float: left; width: calc(100% - 92px); } #main .section07 dd a { margin-right: 30px; padding-right: 30px; display: inline-block; border-right: 1px solid #010101; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; width: calc(16.66% - 30px); box-sizing: border-box; text-align: center; } #main .section07 a:hover { opacity: 0.7; } #main .section07 dd a:last-child { margin-right: 0; border-right: none; } #main .section07 .more { width: 80px; float: right; } #main .section07 .more a { display: block; color: #010101; font-size: 12px; line-height: 28px; text-align: center; border-radius: 15px; border: 1px solid #494949; } @media all and (min-width: 1201px) and (max-width: 1600px) { #main .section02 li ul { left: 152px; } #main .section03 .tabPanel { } #main .section03 .tabPanel li .img, #main .section03 .tabPanel li .text { } #main .section03 .tabPanel li .text{ } #main .section05 li a { padding: 60px 50px 72px; } #main .section05 li a:before { border-width: 5px; } #main .section05 li a .txt { margin-right: 0; min-height: 42px; font-size: 16px; } } @media(max-width: 1680px){ } @media(max-width: 1600px){ } @media(max-width: 1440px){ #main .section01 li{padding-left: 6%;} #main .section02 > ul{padding: 0 100px;} #main .section03{padding: 107px 100px 150px;} #main .section04 .wrap{padding: 0 100px;} #main .section05{padding: 125px 100px 165px;} #main .section07{padding: 15px 100px;} } @media all and (min-width: 768px) and (max-width: 1200px) { .padShow { display: block; } .padNone { display: none; } #main .section01 li { padding-left: 4%; width: 28% !important; font-size: 15px !important; letter-spacing: -0.5px; } #main .section01 li:first-child { width: 36% !important; } #main .section01 li:last-child { width: 36% !important; } #main .section01 li > span { font-size: 70px; } #main .section01 li img { margin-top: -18px; left: 90%; right: auto !important; } #main .section02 .img { margin: 0 auto; max-width: 90%; } #main .section02 li .img { right: 15px; } #main .section02 li ul { left: 19%; } #main .section02 > ul > li:hover:after { right: 0 !important; } #main .section04 li { width: 22%; box-sizing: border-box; margin: 0 0 70px; overflow: hidden; box-sizing: border-box; } #main .section04 li:nth-child(3n-1){margin: 0 17% 70px;} #main .section04 li:nth-child(5) { } #main .section05 li a { padding: 50px 20px; } #main .section05 li a:before { border-width: 5px; } #main .section05 li a .txt { margin-right: 0; min-height: 42px; font-size: 16px; } #main .section07 dd a:nth-child(2) { margin: 0; padding: 0; border: none; } #main .section07 dd a:nth-child(3), #main .section07 dd a:nth-child(4) { display: none; } #side { top: auto; bottom: 30px; transform: translate(0); -webkit-transform: translate(0) } #main .section03 .tabPanel li{width: calc(50% - 30px);margin: 0;} #main .section03 .tabPanel li:nth-child(2n){float: right;} } @media all and (min-width: 0px) and (max-width: 767px) { .bannerBox .banner { background: none !important; } .bannerBox .pages { margin-left: -30px; width: 60px; bottom: 24px; } .bannerBox .pages p { color: #fff; font-size: 14px; } .bannerBox .pages p span { font-size: 20px; } .bannerBox .pages .arrows { padding: 2px 0; } .bannerBox .pages .arrows .line { width: 60px; } #main .section01 { padding: 38px 0 33px; height: auto; } #main .section01 li { padding: 0 0 8px; width: auto !important; float: none; font-size: 13px; text-align: center; } #main .section01 li > span { margin-bottom: 1px; font-size: 44px; } #main .section01 li img { margin: 10px auto 0; width: 15px; position: static; display: block; } #main .section01 li:last-child { font-size: 13px; } #main .section01 li:last-child span { margin: 0; } #main .section02 { padding-bottom: 40px; } #main .section02 > p { margin: 0 20px 38px; font-size: 13px; line-height: 1.6; } #main .section02 > .title { margin: 0 0 26px; height: 86px; font-size: 17px; line-height: 1.5; } #main .section02 > .title p { padding: 17px 15px 18px; } #main .section02 .img { margin: 0 auto; width: 270px; } #main .section02 > ul { padding: 0; } #main .section02 > ul > li { margin: 0; padding: 20px 15px; width: auto; height: 195px; float: none; } #main .section02 li .title { font-size: 21px; } #main .section02 li .title span { margin-top: 3px; font-size: 12px; } #main .section02 li .img { width: 63px; right: 7px; top: 18px; } #main .section02 li .arrow { width: 28px; right: 24px; bottom: 20px; } #main .section02 li.li01:after { background-size: 65px auto !important; background-position: -3px bottom !important; } #main .section02 li.li02:after { margin-bottom: 18px; background-size: 85px auto !important; background-position: -6px bottom !important; } #main .section02 li.li03:after { background-size: 75px auto !important; } #main .section02 li.li04:after { background-size: 78px auto !important; background-position: -6px bottom !important; } #main .section02 > ul > li:hover:after, #main .section02 > ul > li.on:after { right: 0 !important; } #main .section02 > ul > li.on:before { width: 0; } #main .section02 li.on ul { display: block; } #main .section02 li.on .title, #main .section02 li.on .arrow { display: none; } #main .section02 li.on .img { background: url(../images/img02_on.png) no-repeat; } #main .section02 .li02.on .img { background: url(../images/img03_on.png) no-repeat; } #main .section02 .li03.on .img { background: url(../images/img04_on.png) no-repeat; } #main .section02 .li04.on .img { background: url(../images/img05_on.png) no-repeat; } #main .section02 li.on .img img { visibility: hidden; } #main .section02 li li.on { background-color: #F46301; color: #fff; } #main .section02 li li.style01.on, #main .section02 li li.style02.on { border: 2px solid #F46301; color: #f46301; background-color: #FFF; } #main .section02 .li02 li.on { background-color: #fdac00; color: #fff; } #main .section02 .li02 li.style01.on, #main .section02 .li02 li.style02.on { border: 2px solid #fdac00; color: #fdac00; background-color: #FFF; } #main .section02 .li03 li.on { background-color: #2241a7; color: #fff; } #main .section02 .li03 li.style01.on, #main .section02 .li03 li.style02.on { border: 2px solid #2241a7; color: #2241a7; background-color: #FFF; } #main .section02 .li04 li.on { background-color: #2951d3; color: #fff; } #main .section02 .li04 li.style01.on, #main .section02 .li04 li.style02.on { border: 2px solid #2951d3; color: #2951d3; background-color: #FFF; } #main .section02 li ul { left: 17%; } #main .section02 li li { margin: 0 5px 7px 0; padding: 0 5px; font-size: 13px; line-height: 19px; } #main .section02 li li.style02 { font-size: 15px; line-height: 26px; } #main .section02 li .img { background-size: 100% auto !important; } #main .section03 { margin: 0 20px; padding: 57px 0 54px; position: relative; } #main .section03 .title { margin-bottom: 16px; padding: 0 0 80px 18px; font-size: 25px; border-bottom: 3px solid rgba(0,0,0,0); } #main .section03 .title:before { height: 3px; } #main .section03 .title img { margin-bottom: 20px; width: 45px; } #main .section03 .ttl { margin-bottom: 2px; } #main .section03 .ttl p { float: none; font-size: 17px; } #main .section03 .ttl .tabNavi { margin: 25px -25px 20px 0; float: none; text-align: right; } #in_d1{position: relative;top: -55px;} #main .section03 .ttl .tabNavi li { margin: 0 0 0 8px; float: none; display: inline-block; } #main .section03 .ttl .tabNavi li:nth-child(1){float: left;margin-top: 2px;} #main .section03 .ttl .tabNavi li a { padding: 0; font-size: 13px; border-bottom: 2px solid #fff; } #main .section03 .ttl .tabNavi li.on a { border-bottom: 2px solid #000; } #main .section03 .ttl .tabNavi li.line { display: none; } #main .section03 .tabPanel { margin: 0; } #main .section03 .tabPanel.show { } #main .section03 .tabPanel .item a { display: block; position: relative; } #main .section03 .tabPanel .item .img img { display: block; } #main .section03 .tabPanel .item .img a > span { width: 100%; height: 100%; position: absolute; left: 0; top: 0; visibility: hidden; opacity: 0; background: rgba(34,65,167,0.95); transition: all 0.5s; -webkit-transition: all 0.5s; } #main .section03 .tabPanel .item .img a:hover > span { visibility: hidden; opacity: 0; } #main .section03 .tabPanel .item .img a span span { width: 100%; position: absolute; left: 0; top: 50%; display: block; color: #fff; font-size: 14px; line-height: 65px; text-align: center; transform: translateY(-50%); -webkit-transform: translateY(-50%); } #main .section03 .tabPanel .item .img a span span:before { width: 10px; height: 2px; position: absolute; left: 50%; top: 0; background: #fff; content: ""; transform: translateX(-50%); -webkit-transform: translateX(-50%); transition: width 0.3s; -webkit-transition: width 0.3s; } #main .section03 .tabPanel .item .img a span span:after { width: 10px; height: 2px; position: absolute; left: 50%; bottom: 0; background: #fff; content: ""; transform: translateX(-50%); -webkit-transform: translateX(-50%); transition: width 0.3s; -webkit-transition: width 0.3s; } #main .section03 .tabPanel .item .img a:hover span span:before, #main .section03 .tabPanel .item .img a:hover span span:after { width: 110px; } #main .section03 .tabPanel .item .text a { padding: 8px 0; color: #999; font-size: 12px; line-height: 1.7; transition: all 0.5s; -webkit-transition: all 0.5s; background: url(../images/icon01.png) no-repeat right 7px top 42px; background-size: 40px auto !important; } #main .section03 .tabPanel .item .text a:hover { background: url(../images/icon01.png) no-repeat right 2px top 42px; } #main .section03 .tabPanel .item .text a span { display: block; color: #000; font-size: 17px; } #main .section03 .tabPanel .slick-dots { margin-top: 4px; text-align: center; } #main .section03 .tabPanel .slick-dots li { margin: 0 4px 0 3px; padding: 0; width: 5px; height: 5px; float: none; display: inline-block; cursor: pointer; border-radius: 50%; border: 1px solid #ccc; } #main .section03 .tabPanel .slick-dots li.slick-active { border-color: #000; background: #000; } #main .section03 .tabPanel .slick-dots li button { display: none; } #main .section03 .tabPanel .more { margin: 0 auto; padding: 29px 0 0 0; width: 216px; } #main .section03 .tabPanel .more a { padding: 0 22px; border-width: 2px; font-size: 13px; line-height: 34px; background-position: right 20px center; background-size: 70px auto !important; } #main .section03 .tabPanel .more a:hover { background-position: right 15px center; } /* 0.0 */ #main .section03 .tabPanel li { padding-bottom: 20px; width: 100%; float: none; } #main .section03 .tabPanel li .img, #main .section03 .tabPanel li .text { padding: 0; height: auto; } #main .section03 .tabPanel li .text{ background: url(../images/icon01.png) no-repeat right 13px top 42px; padding: 8px 0; font-size: 12px; } #main .section03 .tabPanel li:hover .text { background: url(../images/icon01.png) no-repeat right 7px top 42px; } #main .section03 .tabPanel li .text a span { display: block; color: #000; font-size: 17px; } #main .section03 .tabPanel li .img a:hover > span { visibility: hidden; opacity: 0; } #main .section03 .tabPanel .more { margin: 0 auto; padding: 29px 0 0 0; width: 216px; } #main .section03 .tabPanel .more a { padding: 0 22px; border-width: 2px; font-size: 13px; line-height: 34px; background-position: right 20px center; background-size: 70px auto !important; } #main .section03 .tabPanel .more a:hover { background-position: right 15px center; } #main .section04 { padding: 80px 20px 36px; } #main .section04 .title { margin-bottom: 40px; font-size: 13px; } #main .section04 .title:before { width: 3px; height: 18px; top: -36px; } #main .section04 .title span { margin-bottom: 14px; font-size: 24px; } #main .section04 li { width: 33.33%; margin: 0 0 40px 0; } #main .section04 li:nth-child(2n) { } #main .section04 li:nth-child(2n+1) { } #main .section04 .wrap{padding: 0;} #main .section04 li img { margin: 0 auto; width: auto; width: 90%; display: block; } #main .section04 .sliderBox .slick-dots { margin-top: -15px; text-align: center; } #main .section04 .sliderBox .slick-dots li { margin: 0 4px; width: 5px; height: 5px; float: none !important; display: inline-block; cursor: pointer; border-radius: 50%; border: 1px solid #5067B9; } #main .section04 .sliderBox .slick-dots li.slick-active { border-color: #fff; background: #fff; } #main .section04 .sliderBox .slick-dots li button { display: none; } #main .section04 .more { display: none; } #main .section05 { padding: 36px 20px 31px; } #main .section05 .title { margin-bottom: 12px; } #main .section05 .title span { font-size: 17px; } #main .section05 .title a { margin-top: 5px; font-size: 13px; } #main .section05 li { padding: 0; } #main .section05 li a { padding: 43px 50px 60px; } #main .section05 li a:before { border-width: 10px !important; } #main .section05 li a .date { margin-bottom: 22px; font-size: 13px; } #main .section05 li a .date span { font-size: 40px; } #main .section05 li a .img { margin-bottom: 15px; } #main .section05 li a .txt { margin: 0 50px 45px 0; font-size: 13px; } #main .section05 li a .arrow { margin: 0 auto; width: 40px; background-size: 40px auto !important; } #main .section05 .slick-dots { margin-top: 16px; text-align: center; } #main .section05 .slick-dots li { margin: 0 4px; width: 5px; height: 5px; float: none !important; display: inline-block; cursor: pointer; border-radius: 50%; border: 1px solid #C2C2C2; } #main .section05 .slick-dots li.slick-active { border-color: #000; background: #000; } #main .section05 .slick-dots li button { display: none; } #main .section06 { padding: 0; position: relative; } #main .section06 .imgBox { height: auto; } #main .section06 .imgBox .img01 { width: 63.6%; left: 11%; top: -8%; z-index: 1; } #main .section06 .imgBox .img01 span { display: block; color: #fff; position: absolute; top: 45%; left: 50%; margin: 0 0 0 -80px; font-size: 14px; } #main .section06 .imgBox .img02 { width: 74.8%; left: -25%; top: auto; bottom: 1%; background:none; height: auto; padding-top: 0; } #main .section06 .imgBox .img02 span { display: block; color: #fff; position: absolute; top: 42%; left: 40%; margin: 0; text-align: left; font-size: 14px; line-height: 20px } #main .section06 .imgBox .img03 { width: 54.8%; left: auto; bottom: auto; right: -12%; top: 44%; background:none; height: auto; padding-top: 0; } #main .section06 .imgBox .img03 span { display: block; color: #fff; position: absolute; top: 35%; right: 15%; margin: 0 0 0 0; text-align: left; font-size: 14px; padding: 0 15px 0 15px; line-height: 20px } #main .section06 .imgBox .img04 { width: 22.3%; bottom: auto; left: 4%; top: 28%; background:none; height: auto; padding-top: 0; } #main .section06 .imgBox .img05 { width: 35.1%; left: auto; bottom: auto; right: 0; top: 9%; z-index: inherit; } #main .section06 .imgBox .img06 { width: 32.3%; left: 34%; top: 36%; } #main .section06 .imgBox .img07 { width: 36.6%; left: 40%; top: auto; bottom: 0; } #main .section06 .imgBox .img08 { width: 20.5%; left: 63%; bottom: auto; top: 31%; } #main .section07 { display: none; } #main .section03 .ttl .tabNavi{display: none;} #main .section03 .ttl .tabNavim{display: block;position: relative;width: 100%;} #main .section03 .ttl .tabNavim2{display: block;position: fixed;width: 100%;top: 0;left: 0;z-index: 1;opacity: 0; background: #fff;margin: 0;box-sizing: border-box;padding: 0 20px;} #main .section03 .ttl .tabNavim2 li a{padding: 0 ;line-height: 35px;} #main .section03 .ttl .tabNavim2 li{margin: 0 0 0 8px;} #main .section03 .ttl .tabNavim2.act{top: 52px;left: 0;z-index: 1001;opacity: 1;} #main .section03 .ttl .tabNavim2 li:nth-child(1){margin-top: 0px;} } .ban-but{ width: 100px; height: 300px; /*background: rgba(0,0,0,.2);*/ position: absolute; top: 50%; left: 50%; z-index: 5; margin-left: -800px; transform:translateY(-50%); -ms-transform:translateY(-50%); -moz-transform:translateY(-50%); -webkit-transform:translateY(-50%); } .ban-butrt{ left: initial; right: 50%; margin-left: initial; margin-right: -800px; } .ban-but-sp{ width: 0px; height: 2px; background: #fff; position: absolute; left: 40%; top: 50%; transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); transition: all .3s; -webkit-transition: all .3s; } .ban-but-sp:after { content: ''; width: 50px; height: 90px; background: url(../image/ico08.png) no-repeat center; background-size: cover; position: absolute; left: -2px; top: -44px; } .ban-butrt .ban-but-sp{ left: 60%; } .ban-butrt .ban-but-sp:after { left: initial; right: -2px; background-image: url(../image/ico09.png); } .ban-but:hover .ban-but-sp{ width: 70px; transition: all .3s; -webkit-transition: all .3s; } .ban-but{ margin: 0; left: 2.5%; } .ban-butrt{ left: initial; right: 2.5%; } .ban-but-sp:after{ width: 25px; height: 45px; top: -22px; } .ban-but:hover .ban-but-sp{ width: 40px; } .hoverImg{ overflow: hidden; } .hoverImg .hover-img { transition: all .3s !important; -webkit-transition: all .3s !important; transform: unset !important; } .hoverImg:hover .hover-img { transform: scale(1.05) !important; -ms-transform: scale(1.08) !important; -webkit-transform: scale(1.08) !important; transition: all .3s !important; -webkit-transition: all .3s !important; } .divpos{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .case{ padding: 150px 0; } .case-ul{ width: 100%; overflow: hidden; font-size: 0; zoom: 1; } .case-li{ width: 33.333333%; float: left; position: relative; overflow: hidden; display: block; margin-bottom: 40px;padding: 0 !important; } .case-li img{ width: 100%; height: auto; display: block; } .case-a{ display: block; z-index: 2; background: rgba(0,0,0,.7); opacity: 0; transition: all .3s; -webkit-transition: all .3s; } .case-li:hover .case-a{ opacity: 1; transition: all .3s; -webkit-transition: all .3s; } .case-b{ width: 100%; padding: 0 40px; position: absolute; left: 0; bottom: 30px; color: #fff; } .case-b1{ font-size: 18px; height: 20px; line-height: 20px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .case-b2{ width: 35px; height: 2px; margin: 5px 0; background: #fff; } .case-b3{ font-size: 12px; height: 15px; line-height: 15px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .swiper-pagination-bullet-active { background: #c70b09; }