#main *{box-sizing: border-box;} #main *::after{box-sizing: border-box;} #main *::before{box-sizing: border-box;} .hd-element{font-size:0;text-indent:-999999;position:absolute;overflow:hidden} #main{position:relative;padding-top:106px} #main .visual-wrap{position:relative;height:540px;} #main .visual-slide-bg{height:540px;background-repeat:no-repeat;background-position:center top} #main .visual-slide-bg .inner{width:100%;max-width:1280px;margin:0 auto;position:relative;height:100%;} #main .visual-wrap .slide-btn-control{position:absolute;top:50%;z-index:1000;width:45px;height:89px;background-repeat:no-repeat;background-position:0px 0px;margin-top:-45px} #main .visual-wrap .slide-btn-control a{display:block;width:45px;height:89px;} #main .visual-wrap .slide-btn-control.prev{left:10%;background-image:url(../img/renew/main/btn_slide_prev.png)} #main .visual-wrap .slide-btn-control.next{right:10%;background-image:url(../img/renew/main/btn_slide_next.png)} #main .visual-wrap .slide-nav{position:absolute;left:50%;top:420px;z-index:1000;margin-left:-617px} #main .visual-wrap .slide-nav .swiper-pagination{position:relative;float:left;} #main .visual-wrap .slide-nav .swiper-pagination .swiper-pagination-bullet{display:inline-block;position:relative;margin:0 3px;width:12px;height:12px;border-radius:6px;opacity:1;background-color:transparent} #main .visual-wrap .slide-nav .swiper-pagination .swiper-pagination-bullet::before{content:'';position:absolute;left:50%;top:50%;margin:-2px 0px 0px -2px;z-index:1;width:4px;height:4px;background-color:#fff;border-radius:4px;} #main .visual-wrap .slide-nav .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{border:1px solid #fff} #main .visual-wrap .slide-nav .slide-play{display:none;float:left;margin-left:5px;margin-top:5px} #main .visual-wrap .slide-nav .slide-play a{display:block;width:0px;height:0px;border-top:4px solid transparent;border-bottom:4px solid transparent;border-right:5px solid transparent;border-left:5px solid #fff;} #main .visual-slide-bg .inner .content-element{padding:130px 0px 0px 20px;} #main .visual-slide-bg .inner .content-element .large-text{font-size:40px;color:#fff;font-weight:bold} #main .visual-slide-bg .inner .content-element .small-text{font-size:22px;color:#fff;margin-top:30px;padding-left:5px;line-height:30px;} #main .solution-wrap{width:100%;max-width:1280px;margin:0 auto;padding-top:40px} #main .solution-wrap .h2{font-size:24px;color:#3f3f3f;font-weight:bold} #main .solution-wrap .h2 span{font-size: 20px; color:#333333; font-weight: normal; margin-left:10px;} #main .solution-wrap .solution-content{overflow:hidden;margin-top:15px} #main .solution-wrap .solution-content li{float:left;width:25%;height:330px;background:url(../img/renew/main/bg_solution_1.png) no-repeat 0px 0px} #main .solution-wrap .solution-content li a{display:block;height:100%;background-repeat:no-repeat;background-position:center 60px;text-align:center} #main .solution-wrap .solution-content li:nth-child(1){background-color:#444ab1;} #main .solution-wrap .solution-content li:nth-child(2){background-color:#5481ab;} #main .solution-wrap .solution-content li:nth-child(3){background-color:#058192;} #main .solution-wrap .solution-content li:nth-child(4){background-color:#256184;} #main .solution-wrap .solution-content li:nth-child(1) a{background-image:url(../img/renew/main/ico_solution_5.png); background-size: 86px;} #main .solution-wrap .solution-content li:nth-child(2) a{background-image:url(../img/renew/main/ico_solution_2.png)} #main .solution-wrap .solution-content li:nth-child(3) a{background-image:url(../img/renew/main/ico_solution_3.png)} #main .solution-wrap .solution-content li:nth-child(4) a{background-image:url(../img/renew/main/ico_solution_4.png)} #main .solution-wrap .solution-content li a span.text{display:inline-block;font-size:24px;color:#fff;padding-top:180px;font-weight:bold} #main .solution-wrap .solution-content li a span.link{display:inline-block;width:130px;padding:6px 5px;text-align:center;font-size:14px;color:#fff;margin-top:25px;border:1px solid #fff} #main .news-wrap{display:flex;justify-content:space-between;margin:0px auto;width:100%;max-width:1280px} #main .news-wrap .inner{width:600px;position:relative;margin-top:50px} #main .news-wrap .inner .h2{font-size:24px;font-weight:bold;color:#333;padding-bottom:15px;border-bottom:2px solid #5648ae;} #main .news-wrap .inner ul li{} #main .news-wrap .inner ul li a{display:flex;justify-content:space-between;align-items:center;padding:15px 0px;border-bottom:1px solid #ddd;height:75px} #main .news-wrap .inner ul li a .list{display:flex;justify-content:start;align-items:center;font-size:16px;color:#333;padding-right:50px;flex:2;font-weight:500} #main .news-wrap .inner ul li a .data{display:flex;justify-content:end;align-items:center;font-size:12px;color:#999;} #main .news-wrap .inner .more-btn{position:absolute;right:0;top:20px;z-index:1;} #main .news-wrap .inner .more-btn a{display:block;width:30px;height:30px;background:url(../img/renew/main/ico_plus.png) no-repeat center center} #main .channel-wrap{padding:25px 0px 60px 0px;background-color:#f9f9f9;margin-top:40px} #main .channel-wrap .inner{width:100%;max-width:1280px;margin:0 auto} #main .channel-wrap .inner .h2{font-size:24px;font-weight:bold;color:#333;padding-bottom:15px;} #main .channel-wrap .inner ul{display:flex;justify-content:space-between;margin-left:-20px} #main .channel-wrap .inner ul li{display:flex;height:130px;margin-left:20px;border:1px solid #ddd;flex:1;} #main .channel-wrap .inner ul li a{font-size:22px;font-weight:600;display:flex;justify-content:center;align-items:center;width:100%;height:100%;background-color:#eee;background-repeat:no-repeat;background-size:auto} #main .channel-wrap .inner ul li a:hover{color:#fff;box-shadow:1px 10px 15px rgba(0,0,0,0.2);} #main .channel-wrap .inner ul li:nth-child(1) a:hover{background-color:#009345;} #main .channel-wrap .inner ul li:nth-child(2) a:hover{background-color:#156ac4;} #main .channel-wrap .inner ul li:nth-child(3) a:hover{background-color:#c92925;} #main .channel-wrap .inner ul li:nth-child(4) a:hover{background-color:#fdbd40;} #main .channel-wrap .inner ul li a span{display:inline-block;margin:0px 5px} #main .channel-wrap .inner ul li a .ico{background-repeat:no-repeat;background-position:0px 0px} #main .channel-wrap .inner ul li:nth-child(1) a .ico{width:38px;height:30px;background-image:url(../img/renew/main/ico_blog.png);} #main .channel-wrap .inner ul li:nth-child(1) a:hover .ico{background-position:0px -30px} #main .channel-wrap .inner ul li:nth-child(2) a .ico{width:14px;height:27px;background-image:url(../img/renew/main/ico_facebook.png);} #main .channel-wrap .inner ul li:nth-child(2) a:hover .ico{background-position:0px -27px} #main .channel-wrap .inner ul li:nth-child(3) a .ico{width:33px;height:23px;background-image:url(../img/renew/main/ico_youtobe.png);} #main .channel-wrap .inner ul li:nth-child(3) a:hover .ico{background-position:0px -23px} #main .channel-wrap .inner ul li:nth-child(4) a .ico{width:33px;height:22px;background-image:url(../img/renew/main/ico_email.png);} #main .channel-wrap .inner ul li:nth-child(4) a:hover .ico{background-position:0px -22px;} #main .channel-wrap .inner ul li a .link{display:none;width:22px;height:22px;background:url(../img/renew/main/ico_link.png) no-repeat 0px 0px} #main .channel-wrap .inner ul li a:hover .link{display:block} #main .channel-wrap .inner ul li:nth-child(1) a{background-image:url(../img/renew/main/bg_blog.png);background-position:right 0px} #main .channel-wrap .inner ul li:nth-child(1) a:hover{background-position:right 45px;background-size:50%;background-image:url(../img/renew/main/bg_blog_on.png);} #main .channel-wrap .inner ul li:nth-child(2) a{background-image:url(../img/renew/main/bg_facebook.png);background-position:210px 30px;background-size:23%;} #main .channel-wrap .inner ul li:nth-child(2) a:hover{background-image:url(../img/renew/main/bg_facebook_on.png);} #main .channel-wrap .inner ul li:nth-child(3) a{background-image:url(../img/renew/main/bg_youtobe.png);background-position:right 0px} #main .channel-wrap .inner ul li:nth-child(3) a:hover{background-position:right 45px;background-size:45%;background-image:url(../img/renew/main/bg_youtobe_on.png);} #main .channel-wrap .inner ul li:nth-child(4) a{background-image:url(../img/renew/main/bg_email.png);background-position:right 0px} #main .channel-wrap .inner ul li:nth-child(4) a:hover{background-position:right 45px;background-size:45%;background-image:url(../img/renew/main/bg_email_on.png);} #main .other-wrap{overflow:hidden;} #main .other-wrap ul{display:flex;justify-content:space-between;} #main .other-wrap ul li{display:flex;width:100%;} #main .other-wrap ul li a{display:flex;justify-content:center;flex-direction:column;align-items:center;height:150px;background-repeat:no-repeat;width:100%} #main .other-wrap ul li a .title{font-size:30px;font-weight:600;color:#fff} #main .other-wrap ul li a .title span{display:inline-block;margin-left:5px;width:18px;height:18px;background:url(../img/renew/main/ico_plus_1.png);transition:.3s all;transform:rotate(0)} #main .other-wrap ul li a:hover span{transform: rotate(180deg);} #main .other-wrap ul li a .infor{margin-top:15px;font-size:18px;font-weight:400;color:#fff} #main .other-wrap ul li:nth-child(1) a{background-image:url(../img/renew/main/bg_quick_1.png);background-color:#0c4da2;background-position:right 0px} #main .other-wrap ul li:nth-child(2) a{background-image:url(../img/renew/main/bg_quick_2.png);background-color:#0c4da2;background-position:center center} #main .other-wrap ul li:nth-child(3) a{background-image:url(../img/renew/main/bg_quick_3.png);background-color:#5648ae;background-position:left 0px} #main .util-wrap{background-color:#eee} #main .util-wrap .inner{width:100%;max-width:1280px;padding:45px 0px;display:flex;justify-content:space-between;margin:0 auto} #main .util-wrap .inner dl{width:100%;overflow:hidden;flex:1.5} #main .util-wrap .inner dl:nth-child(2){flex:2} #main .util-wrap .inner dl dt{font-size:16px;font-weight:500;color:#666;margin-bottom:10px} #main .util-wrap .inner dl dd{padding:5px 0px;margin-bottom:0px} #main .util-wrap .inner dl dd a{font-size:14px;color:#999} #main .solution-wrap .new-solution{margin:50px 0 0 -8px; overflow: hidden;} #main .solution-wrap .new-solution li{float:left; width: calc(20% - 8px); margin-left:8px;} #main .solution-wrap .new-solution li:nth-child(1){background: url(../img/renew/main/newmain_bg1.png) no-repeat center center / cover;} #main .solution-wrap .new-solution li:nth-child(2){background: url(../img/renew/main/newmain_bg2.png) no-repeat center center / cover;} #main .solution-wrap .new-solution li:nth-child(3){background: url(../img/renew/main/newmain_bg3.png) no-repeat center center / cover;} #main .solution-wrap .new-solution li:nth-child(4){background: url(../img/renew/main/newmain_bg4.png) no-repeat center center / cover;} #main .solution-wrap .new-solution li:nth-child(5){background: url(../img/renew/main/newmain_bg5.png) no-repeat center center / cover;} #main .solution-wrap .new-solution li a{display: block;font-size: 22px;color:#fff;text-align: center;padding-top: 211px;position: relative;font-weight: bold; background-position: center 68px; background-repeat: no-repeat;} #main .solution-wrap .new-solution li a::after{content:'';width: 100%;height: 131px;background: url(../img/renew/main/newmain_icon6.png) no-repeat 0 0 / 100% 100%;position: absolute;top:83px;left:0;} #main .solution-wrap .new-solution li:nth-child(1) a{background-image: url(../img/renew/main/newmain_icon1.png);} #main .solution-wrap .new-solution li:nth-child(2) a{background-image: url(../img/renew/main/newmain_icon2.png);} #main .solution-wrap .new-solution li:nth-child(3) a{background-image: url(../img/renew/main/newmain_icon3.png);} #main .solution-wrap .new-solution li:nth-child(4) a{background-image: url(../img/renew/main/newmain_icon4.png);} #main .solution-wrap .new-solution li:nth-child(5) a{background-image: url(../img/renew/main/newmain_icon5.png);} #main .solution-wrap .new-solution li:nth-child(1) a::after{opacity: 0.58;} #main .solution-wrap .new-solution li:nth-child(2) a::after{opacity: 0.48;} #main .solution-wrap .new-solution li:nth-child(3) a::after{opacity: 0.38;} #main .solution-wrap .new-solution li:nth-child(4) a::after{opacity: 0.28;} #main .solution-wrap .new-solution li:nth-child(5) a::after{opacity: 0.18;} #main .solution-wrap .new-solution li a span{display: block; width: 100%; height: 89px; line-height: 89px; background-color: #0A1331; position: relative; z-index: 99;} @media (max-width: 1024px) { .solution-wrap{padding:0 20px !important; height: 100%; margin:30px auto 0 !important;} #main .solution-wrap .solution-content li{width:50%;background:none} #main .solution-wrap .solution-content li a span.text{word-break:keep-all;} #main .solution-wrap .solution-content li a span.link{display:none} #main .news-wrap{flex-direction:column;padding:0px 20px} #main .news-wrap .inner{width:auto; margin-top:30px;} #main .visual-wrap .slide-btn-control{display:none} #main .solution-wrap .new-solution{margin:30px 0 0 -8px;} #main .solution-wrap .new-solution li{width: calc(50% - 8px); margin:0 0 8px 8px;} } @media (max-width: 680px) { #main .channel-wrap{padding:5px 20px 20px 20px;overflow:hidden} #main .channel-wrap .inner ul{flex-direction:column;display:block;margin-left:-2%} #main .channel-wrap .inner ul li{display:block;float:left;width:48%;;margin-left:2%;margin-bottom:10px} #main .other-wrap ul{flex-direction:column;} #main .other-wrap ul li a{background-size:cover} #main .other-wrap ul li a .title{font-size:22px} #main .other-wrap ul li a .infor{font-size:16px;margin-top:5px} #main .util-wrap{display:none} #main .h2{font-size:22px !important} #main .news-wrap .inner ul li a{height:auto} #main .news-wrap .inner ul li a .list{font-size:16px;line-height:20px} #main .visual-wrap .slide-nav{left:0;right:0;bottom:30px;margin-left:0;top:auto;text-align:center} #main .visual-wrap .slide-nav .swiper-pagination{display:inline-block;float:none} #main .visual-wrap, #main .visual-slide-bg{height:calc(12px + 80vw)} #main .visual-wrap .slide-nav .swiper-pagination .swiper-pagination-bullet{width:18px;height:18px;border-radius:9px;} #main .visual-wrap .slide-nav .swiper-pagination .swiper-pagination-bullet::before{margin:-4px 0px 0px -4px;z-index:1;width:8px;height:8px;border-radius:4px;} #main .channel-wrap .inner ul li a{background-image:none !important} } @media (max-width: 520px) { #main{padding-top:60px} #main .visual-wrap .slide-nav{bottom:15px;} } @media (max-width: 480px) { #main .solution-wrap .solution-content li{height:calc(12px + 50vw)} #main .solution-wrap .solution-content li a span.text{font-size:18px;padding-top:calc(12px + 30vw)} #main .solution-wrap .solution-content li a{background-size:35% !important;background-position:center 45px} #main .channel-wrap .inner ul li a{font-size:18px} #main .visual-slide-bg .inner .content-element{padding:90px 20px 0px 20px;text-align:center} #main .visual-slide-bg .inner .content-element .large-text{font-size:calc(12px + 4.5vw);line-height:33px} #main .visual-slide-bg .inner .content-element .small-text{font-size:16px;line-height:22px;word-break:keep-all;} #main .visual-slide-bg.slide1{background-image:url(../img/renew/main/etc_visual_m_1.png)} #main .solution-wrap .solution-content li a div{padding:0px 20px} #main .channel-wrap .inner ul li{height:100px} #main .solution-wrap .h2 span{display: block; margin:10px 0 0 0;} #main .solution-wrap .new-solution li a{font-size: 18px; padding-top:170px; background-position: center 60px;} #main .solution-wrap .new-solution li a::after{background-size: 100% 70%; top:80px;} #main .solution-wrap .new-solution li:nth-child(1) a{background-size: 62px;} #main .solution-wrap .new-solution li:nth-child(2) a{background-size: 60px;} #main .solution-wrap .new-solution li:nth-child(3) a{background-size: 51px;} #main .solution-wrap .new-solution li:nth-child(4) a{background-size: 71px;} #main .solution-wrap .new-solution li:nth-child(5) a{background-size: 64px;} #main .solution-wrap .new-solution li a span{height: 70px; line-height: 70px;} } @media (max-width: 400px) { #main .visual-slide-bg .inner .content-element{padding:55px 20px 0px 20px} } /* #main *{box-sizing: border-box;} #main *::after{box-sizing: border-box;} #main *::before{box-sizing: border-box;} .hd-element{font-size:0;text-indent:-999999;position:absolute;overflow:hidden} #main{position:relative;padding-top:106px} #main .visual-wrap{position:relative;height:540px;} #main .visual-slide-bg{height:540px;background-repeat:no-repeat;background-position:center top} #main .visual-slide-bg .inner{width:100%;max-width:1280px;margin:0 auto;position:relative;height:100%;} #main .visual-wrap .slide-btn-control{position:absolute;top:50%;z-index:1000;width:45px;height:89px;background-repeat:no-repeat;background-position:0px 0px;margin-top:-45px} #main .visual-wrap .slide-btn-control a{display:block;width:45px;height:89px;} #main .visual-wrap .slide-btn-control.prev{left:10%;background-image:url(../img/renew/main/btn_slide_prev.png)} #main .visual-wrap .slide-btn-control.next{right:10%;background-image:url(../img/renew/main/btn_slide_next.png)} #main .visual-wrap .slide-nav{position:absolute;left:50%;top:420px;z-index:1000;margin-left:-617px} #main .visual-wrap .slide-nav .swiper-pagination{position:relative;float:left;} #main .visual-wrap .slide-nav .swiper-pagination .swiper-pagination-bullet{display:inline-block;position:relative;margin:0 3px;width:12px;height:12px;border-radius:6px;opacity:1;background-color:transparent} #main .visual-wrap .slide-nav .swiper-pagination .swiper-pagination-bullet::before{content:'';position:absolute;left:50%;top:50%;margin:-2px 0px 0px -2px;z-index:1;width:4px;height:4px;background-color:#fff;border-radius:4px;} #main .visual-wrap .slide-nav .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{border:1px solid #fff} #main .visual-wrap .slide-nav .slide-play{display:none;float:left;margin-left:5px;margin-top:5px} #main .visual-wrap .slide-nav .slide-play a{display:block;width:0px;height:0px;border-top:4px solid transparent;border-bottom:4px solid transparent;border-right:5px solid transparent;border-left:5px solid #fff;} #main .visual-slide-bg .inner .content-element{padding:130px 0px 0px 20px;} #main .visual-slide-bg .inner .content-element .large-text{font-size:40px;color:#fff;font-weight:bold} #main .visual-slide-bg .inner .content-element .small-text{font-size:22px;color:#fff;margin-top:30px;padding-left:5px;line-height:30px;} #main .solution-wrap{width:100%;max-width:1280px;margin:0 auto;padding-top:40px} #main .solution-wrap .h2{font-size:24px;color:#3f3f3f;font-weight:bold} #main .solution-wrap .h2 span{color:#275aa0} #main .solution-wrap .solution-content{overflow:hidden;margin-top:15px} #main .solution-wrap .solution-content li{float:left;width:25%;height:330px;background:url(../img/renew/main/bg_solution_1.png) no-repeat 0px 0px} #main .solution-wrap .solution-content li a{display:block;height:100%;background-repeat:no-repeat;background-position:center 60px;text-align:center} #main .solution-wrap .solution-content li:nth-child(1){background-color:#444ab1;} #main .solution-wrap .solution-content li:nth-child(2){background-color:#5481ab;} #main .solution-wrap .solution-content li:nth-child(3){background-color:#058192;} #main .solution-wrap .solution-content li:nth-child(4){background-color:#256184;} #main .solution-wrap .solution-content li:nth-child(1) a{background-image:url(../img/renew/main/ico_solution_5.png); background-size: 86px;} #main .solution-wrap .solution-content li:nth-child(2) a{background-image:url(../img/renew/main/ico_solution_2.png)} #main .solution-wrap .solution-content li:nth-child(3) a{background-image:url(../img/renew/main/ico_solution_3.png)} #main .solution-wrap .solution-content li:nth-child(4) a{background-image:url(../img/renew/main/ico_solution_4.png)} #main .solution-wrap .solution-content li a span.text{display:inline-block;font-size:24px;color:#fff;padding-top:180px;font-weight:bold} #main .solution-wrap .solution-content li a span.link{display:inline-block;width:130px;padding:6px 5px;text-align:center;font-size:14px;color:#fff;margin-top:25px;border:1px solid #fff} #main .news-wrap{display:flex;justify-content:space-between;margin:0px auto;width:100%;max-width:1280px} #main .news-wrap .inner{width:600px;position:relative;margin-top:20px} #main .news-wrap .inner .h2{font-size:24px;font-weight:bold;color:#333;padding-bottom:15px;border-bottom:2px solid #5648ae;} #main .news-wrap .inner ul li{} #main .news-wrap .inner ul li a{display:flex;justify-content:space-between;align-items:center;padding:15px 0px;border-bottom:1px solid #ddd;height:75px} #main .news-wrap .inner ul li a .list{display:flex;justify-content:start;align-items:center;font-size:16px;color:#333;padding-right:50px;flex:2;font-weight:500} #main .news-wrap .inner ul li a .data{display:flex;justify-content:end;align-items:center;font-size:12px;color:#999;} #main .news-wrap .inner .more-btn{position:absolute;right:0;top:20px;z-index:1;} #main .news-wrap .inner .more-btn a{display:block;width:30px;height:30px;background:url(../img/renew/main/ico_plus.png) no-repeat center center} #main .channel-wrap{padding:25px 0px 60px 0px;background-color:#f9f9f9;margin-top:40px} #main .channel-wrap .inner{width:100%;max-width:1280px;margin:0 auto} #main .channel-wrap .inner .h2{font-size:24px;font-weight:bold;color:#333;padding-bottom:15px;} #main .channel-wrap .inner ul{display:flex;justify-content:space-between;margin-left:-20px} #main .channel-wrap .inner ul li{display:flex;height:130px;margin-left:20px;border:1px solid #ddd;flex:1;} #main .channel-wrap .inner ul li a{font-size:22px;font-weight:600;display:flex;justify-content:center;align-items:center;width:100%;height:100%;background-color:#eee;background-repeat:no-repeat;background-size:auto} #main .channel-wrap .inner ul li a:hover{color:#fff;box-shadow:1px 10px 15px rgba(0,0,0,0.2);} #main .channel-wrap .inner ul li:nth-child(1) a:hover{background-color:#009345;} #main .channel-wrap .inner ul li:nth-child(2) a:hover{background-color:#156ac4;} #main .channel-wrap .inner ul li:nth-child(3) a:hover{background-color:#c92925;} #main .channel-wrap .inner ul li:nth-child(4) a:hover{background-color:#fdbd40;} #main .channel-wrap .inner ul li a span{display:inline-block;margin:0px 5px} #main .channel-wrap .inner ul li a .ico{background-repeat:no-repeat;background-position:0px 0px} #main .channel-wrap .inner ul li:nth-child(1) a .ico{width:38px;height:30px;background-image:url(../img/renew/main/ico_blog.png);} #main .channel-wrap .inner ul li:nth-child(1) a:hover .ico{background-position:0px -30px} #main .channel-wrap .inner ul li:nth-child(2) a .ico{width:14px;height:27px;background-image:url(../img/renew/main/ico_facebook.png);} #main .channel-wrap .inner ul li:nth-child(2) a:hover .ico{background-position:0px -27px} #main .channel-wrap .inner ul li:nth-child(3) a .ico{width:33px;height:23px;background-image:url(../img/renew/main/ico_youtobe.png);} #main .channel-wrap .inner ul li:nth-child(3) a:hover .ico{background-position:0px -23px} #main .channel-wrap .inner ul li:nth-child(4) a .ico{width:33px;height:22px;background-image:url(../img/renew/main/ico_email.png);} #main .channel-wrap .inner ul li:nth-child(4) a:hover .ico{background-position:0px -22px;} #main .channel-wrap .inner ul li a .link{display:none;width:22px;height:22px;background:url(../img/renew/main/ico_link.png) no-repeat 0px 0px} #main .channel-wrap .inner ul li a:hover .link{display:block} #main .channel-wrap .inner ul li:nth-child(1) a{background-image:url(../img/renew/main/bg_blog.png);background-position:right 0px} #main .channel-wrap .inner ul li:nth-child(1) a:hover{background-position:right 45px;background-size:50%;background-image:url(../img/renew/main/bg_blog_on.png);} #main .channel-wrap .inner ul li:nth-child(2) a{background-image:url(../img/renew/main/bg_facebook.png);background-position:210px 30px;background-size:23%;} #main .channel-wrap .inner ul li:nth-child(2) a:hover{background-image:url(../img/renew/main/bg_facebook_on.png);} #main .channel-wrap .inner ul li:nth-child(3) a{background-image:url(../img/renew/main/bg_youtobe.png);background-position:right 0px} #main .channel-wrap .inner ul li:nth-child(3) a:hover{background-position:right 45px;background-size:45%;background-image:url(../img/renew/main/bg_youtobe_on.png);} #main .channel-wrap .inner ul li:nth-child(4) a{background-image:url(../img/renew/main/bg_email.png);background-position:right 0px} #main .channel-wrap .inner ul li:nth-child(4) a:hover{background-position:right 45px;background-size:45%;background-image:url(../img/renew/main/bg_email_on.png);} #main .other-wrap{overflow:hidden;} #main .other-wrap ul{display:flex;justify-content:space-between;} #main .other-wrap ul li{display:flex;width:100%;} #main .other-wrap ul li a{display:flex;justify-content:center;flex-direction:column;align-items:center;height:150px;background-repeat:no-repeat;width:100%} #main .other-wrap ul li a .title{font-size:30px;font-weight:600;color:#fff} #main .other-wrap ul li a .title span{display:inline-block;margin-left:5px;width:18px;height:18px;background:url(../img/renew/main/ico_plus_1.png);transition:.3s all;transform:rotate(0)} #main .other-wrap ul li a:hover span{transform: rotate(180deg);} #main .other-wrap ul li a .infor{margin-top:15px;font-size:18px;font-weight:400;color:#fff} #main .other-wrap ul li:nth-child(1) a{background-image:url(../img/renew/main/bg_quick_1.png);background-color:#0c4da2;background-position:right 0px} #main .other-wrap ul li:nth-child(2) a{background-image:url(../img/renew/main/bg_quick_2.png);background-color:#0c4da2;background-position:center center} #main .other-wrap ul li:nth-child(3) a{background-image:url(../img/renew/main/bg_quick_3.png);background-color:#5648ae;background-position:left 0px} #main .util-wrap{background-color:#eee} #main .util-wrap .inner{width:100%;max-width:1280px;padding:45px 0px;display:flex;justify-content:space-between;margin:0 auto} #main .util-wrap .inner dl{width:100%;overflow:hidden;flex:1.5} #main .util-wrap .inner dl:nth-child(2){flex:2} #main .util-wrap .inner dl dt{font-size:16px;font-weight:500;color:#666;margin-bottom:10px} #main .util-wrap .inner dl dd{padding:5px 0px;margin-bottom:0px} #main .util-wrap .inner dl dd a{font-size:14px;color:#999} @media (max-width: 1024px) { #main .solution-wrap .solution-content li{width:50%;background:none} #main .solution-wrap .solution-content li a span.text{word-break:keep-all;} #main .solution-wrap .solution-content li a span.link{display:none} #main .news-wrap{flex-direction:column;padding:0px 20px} #main .news-wrap .inner{width:auto} #main .visual-wrap .slide-btn-control{display:none} } @media (max-width: 680px) { #main .channel-wrap{padding:5px 20px 20px 20px;overflow:hidden} #main .channel-wrap .inner ul{flex-direction:column;display:block;margin-left:-2%} #main .channel-wrap .inner ul li{display:block;float:left;width:48%;;margin-left:2%;margin-bottom:10px} #main .other-wrap ul{flex-direction:column;} #main .other-wrap ul li a{background-size:cover} #main .other-wrap ul li a .title{font-size:22px} #main .other-wrap ul li a .infor{font-size:16px;margin-top:5px} #main .util-wrap{display:none} #main .h2{font-size:22px !important} #main .news-wrap .inner ul li a{height:auto} #main .news-wrap .inner ul li a .list{font-size:16px;line-height:20px} #main .visual-wrap .slide-nav{left:0;right:0;bottom:30px;margin-left:0;top:auto;text-align:center} #main .visual-wrap .slide-nav .swiper-pagination{display:inline-block;float:none} #main .visual-wrap, #main .visual-slide-bg{height:calc(12px + 80vw)} #main .visual-wrap .slide-nav .swiper-pagination .swiper-pagination-bullet{width:18px;height:18px;border-radius:9px;} #main .visual-wrap .slide-nav .swiper-pagination .swiper-pagination-bullet::before{margin:-4px 0px 0px -4px;z-index:1;width:8px;height:8px;border-radius:4px;} #main .channel-wrap .inner ul li a{background-image:none !important} } @media (max-width: 520px) { #main{padding-top:60px} #main .visual-wrap .slide-nav{bottom:15px;} } @media (max-width: 480px) { #main .solution-wrap .solution-content li{height:calc(12px + 50vw)} #main .solution-wrap .solution-content li a span.text{font-size:18px;padding-top:calc(12px + 30vw)} #main .solution-wrap .solution-content li a{background-size:35% !important;background-position:center 45px} #main .solution-wrap .h2{padding-left:15px} #main .channel-wrap .inner ul li a{font-size:18px} #main .visual-slide-bg .inner .content-element{padding:90px 20px 0px 20px;text-align:center} #main .visual-slide-bg .inner .content-element .large-text{font-size:calc(12px + 4.5vw);line-height:33px} #main .visual-slide-bg .inner .content-element .small-text{font-size:16px;line-height:22px;word-break:keep-all;} #main .visual-slide-bg.slide1{background-image:url(../img/renew/main/etc_visual_m_1.png)} #main .solution-wrap .solution-content li a div{padding:0px 20px} #main .channel-wrap .inner ul li{height:100px} } @media (max-width: 400px) { #main .visual-slide-bg .inner .content-element{padding:55px 20px 0px 20px} } */