body{margin: 0; padding: 0; font-family: Microsoft JhengHei;}
.npbody{background: #d0e2cc;}

*{box-sizing: border-box;}

.mainMenu{display: flex; align-items: center; width: 100%; height: 50px; background: linear-gradient(to bottom, #ffffff 1%,#ffffff 76%,#e9ffe6 100%);}
.mainMenu .mainMenu__wrap{display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 1300px; margin: 0 auto; position: relative; padding: 0 30px;}
.mainMenu .mainMenu__wrap .menu_logo{display: block; height: 30px; position: relative;}
.mainMenu .mainMenu__wrap .menu_logo img{display: block; height: 100%;}
.mainMenu .mainMenu__wrap ul{display: flex; align-items: center;}
.mainMenu .mainMenu__wrap ul li{display: block; padding: 0 20px 0 0; margin: 0 20px 0 0; border-right: 1px solid #003218; position: relative;}
.mainMenu .mainMenu__wrap ul li:last-child{padding: 0; margin: 0; border-right: none;}
.mainMenu .mainMenu__wrap ul li a{color: #003218; font-size: 1rem; font-weight: bolder; text-decoration: none;}

.bugerBtn{display: none;}

.rwdslider{display: none!important;}

.bannerBlock{display: block; width: 100%; padding-bottom: 19.79%; background: #003218; position: relative; overflow: hidden;}
.bannerBlock .sliderWrap{display: block; width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.bannerBlock .sliderWrap a{display: block; width: 100%; height: 100%; position: relative;}
.bannerBlock .sliderWrap a img{display: block; width: 100%; height: 100%;}
.slick-dots{display: flex; align-items: center; position: absolute; bottom: 5%; left: 50%; transform: translate(-50%, 0); margin: 0; padding: 0;}
.slick-dots li{list-style: none; margin: 0 10px 0 0; opacity: 0.7;}
.slick-dots .slick-active{opacity: 1;}
.slick-dots li button{display: block; width: 10px!important; height: 10px!important; font-size: 0; border-radius: 50%; border: none; padding: 0;}
.bannerBlock .mask{display: block; width: 105%; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);}

.npBannerBlock{display: block; width: 100%; background: #d6e9f9; position: relative; overflow: hidden; padding: 0 0 5% 0;}
.npBannerBlock::after{content: ''; display: block; width: 100%; height: 30%; background: #d0e2cc; position: absolute; bottom: 0; left: 0; z-index: 1;}
.npBannerBlock img{display: block; width: 100%; margin: 0 auto;}
.npBannerBlock .mountain{width: 100%; transform: translateX(-5%); z-index: 2; position: relative; position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 0); z-index: 2;}
.npBannerBlock .content{display: block; width: 70%; max-width: 1000px; position: relative; z-index: 3;}

.missionContent{display: block; width: 100%; margin-top: -8%; position: relative; z-index: 5; padding: 0 30px;}
.missionContent .missionContentWrap{display: block; width: calc(100% - 100px); max-width: 1200px; margin: 0 auto; background: #fff; border-radius: 30px; padding: 30px;}
.missionContent .missionContentWrap .targetMenu{display: flex; align-items: center; justify-content: center; padding: 0 30px; margin: 0 0 5% 0;}
.missionContent .missionContentWrap .targetMenu li{display: block; width: fit-content; white-space: nowrap; list-style: none; font-size: 18px; margin: 0 30px;}
.missionContent .missionContentWrap .targetMenu li a{display: block; width: fit-content; white-space: nowrap; list-style: none; font-size: 20px; color: #373737; text-decoration: none; font-weight: bolder; margin: 0 auto; cursor: pointer; padding: 5px 10px;}
.missionContent .missionContentWrap .targetMenu li a:hover{padding: 5px 10px; border-radius: 30px; background: #d2e9d2;}

.missionContent .missionContentWrap .missionBlock{display: flex; align-items: stretch; margin: 0 0 0 0; position: relative;}
.missionContent .missionContentWrap .missionBlock--reverse{flex-direction: row-reverse;}
.missionContent .missionContentWrap .missionBlock:last-child{margin: 0;}
.missionContent .missionContentWrap .missionBlock .bee{display: block; width: 20%; min-height: 300px; padding: 0 3% 0 40px; position: relative;}
.missionContent .missionContentWrap .missionBlock--reverse .bee{padding: 0 40px 0 3%;}
.missionContent .missionContentWrap .missionBlock .bee .beeicon{display: block; width: 100%; position: absolute; bottom: 0; left: 0; z-index: 2;}
.postFixed{top: auto!important; bottom: 0!important; left: 0!important;}
.missionContent .missionContentWrap .missionBlock .bee .colorbg{display: block; width: 100%; height: 100%; background: linear-gradient(to bottom, #d0e8ad 0%,#5b8e25 50%); position: relative; z-index: 1;}
.missionContent .missionContentWrap .missionBlock .bee .colorbg--scr2{background: linear-gradient(to bottom, #c4e6d4 0%,#348e4a 50%);}
.missionContent .missionContentWrap .missionBlock .bee .colorbg--scr3{background: linear-gradient(to bottom, #b0f8f0 0%,#23a07a 50%);}
.missionContent .missionContentWrap .missionBlock .bee .colorbg--scr4{background: linear-gradient(to bottom, #b4e9ff 0%,#27aab9 50%);}
.missionContent .missionContentWrap .missionBlock .bee .colorbg--scr5{background: linear-gradient(to bottom, #acd1ff 0%,#2284b9 50%);}
.missionContent .missionContentWrap .missionBlock .bee .colorbg .linebg{display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: url('../img/bg/line.svg') no-repeat top left -20%; background-size: 130% auto;}

.missionContent .missionContentWrap .missionBlock .beeListis{display: flex; flex-direction: column; justify-content: center; width: 80%; margin: 0; padding: 30px 0;}
.missionContent .missionContentWrap .missionBlock .beeListis h2{display: block; writing-mode: vertical-lr; font-size: 30px; letter-spacing: 5px; position: absolute; top: 0; left: 0; padding: 0; margin: 0; z-index: 3;}
.missionContent .missionContentWrap .missionBlock--reverse .beeListis h2{left: auto; right: 0;}
.missionContent .missionContentWrap .missionBlock .beeListis li{display: block; width: 100%; margin: 0 0 5% 0;}
.missionContent .missionContentWrap .missionBlock .beeListis li:last-child{margin: 0;}
.missionContent .missionContentWrap .missionBlock .beeListis li .starTitle{display: flex; align-items: center; margin-left: -20px; color: #373737;}
.missionContent .missionContentWrap .missionBlock .beeListis li .greenTitle{display: block; width: 100%; color: #003218; font-size: 14px}
.missionContent .missionContentWrap .missionBlock .beeListis li .starTitle img{display: block; width: 15px; flex: 0; margin: 0 5px 0 0;}
.missionContent .missionContentWrap .missionBlock .beeListis li h6{display: block; width: 100%; font-size: 18px; margin: 0 0 10px 0; letter-spacing: 2px;}
.missionContent .missionContentWrap .missionBlock .beeListis li .btnLine{display: flex; align-items: center;}
.missionContent .missionContentWrap .missionBlock .beeListis li .btnLine .gGroup{display: flex; width: 100%; align-items: center;}
.missionContent .missionContentWrap .missionBlock .beeListis li .btnLine .icon{display: block; width: 30px; flex: 0;}
.missionContent .missionContentWrap .missionBlock .beeListis li .btnLine p{display: flex; align-items: center; width: 100%; flex: 1 1 auto; font-size: 18px; letter-spacing: 2px; margin: 0; color: #373737;}
.missionContent .missionContentWrap .missionBlock .beeListis li .btnLine p mark{background-clip: text; color: transparent; background-image: radial-gradient(ellipse at center, #e59843 0%,#f1790b 51%); -webkit-background-clip: text; background-clip: text; font-weight: bolder; font-size: 25px;}
/* .missionContent .missionContentWrap .missionBlock .beeListis li .btnLine .btn{display: block; flex: 0; font-size: 20px; padding: 5px 10px; white-space: nowrap; border-radius: 30px; background: #fff; border: 3px solid #f1790b; font-weight: bolder; color: #f1790b; cursor: pointer; text-decoration: none;} */

.missionContent .missionContentWrap .missionBlock .beeListis li .btnLine .btn, .missionContent .missionContentWrap .missionBlock .beeListis li .btnLine .btn-fill{display: block; flex: 0; font-size: 18px; padding: 8px 16px; white-space: nowrap; border-radius: 30px; background: radial-gradient(ellipse at center, #e59843 0%,#f1790b 80%); font-weight: bolder; color: #fff; cursor: pointer; text-decoration: none;}
.missionContent .missionContentWrap .missionBlock .beeListis li .btnLine .btn:hover, .missionContent .missionContentWrap .missionBlock .beeListis li .btnLine .btn-fill:hover{display: block; flex: 0; font-size: 18px; padding: 5px 13px; white-space: nowrap; border-radius: 30px; background: #fff; border: 3px solid #f1790b; font-weight: bolder; color: #f1790b; cursor: pointer; text-decoration: none;}

.missionContent .missionContentWrap .missionBlock .beeListis .bottomTitle{display: block; flex-direction: row!important; align-items: center;}
.missionContent .missionContentWrap .missionBlock .beeListis .bottomTitle a{color: #376bc9;}

.textArea{display: none; width: 100%; padding: 80px 0;}
.textArea .textArea__wrap{display: block; width: 100%; max-width: 800px; margin: 0 auto; font-size: 20px; font-weight: bolder;}
 
.videoBlock{display: block; width: 100%; background: #daecd6; padding: 30px 0;}
.videoBlock .videoWrap{display: block; width: 100%; max-width: 800px; margin: 0 auto;}
.videoBlock .videoWrap h1, .videoBlock .videoWrap h2, .videoBlock .videoWrap h3{display: block; width: 100%; font-size: 40px; font-weight: bolder; text-align: center; color: #003218; padding: 0; margin: 0;}
.videoBlock .videoWrap h1, .videoBlock .videoWrap h2{margin: 0 0 20px 0;}
.videoBlock .videoWrap h3{font-size: 30px; color: #000000; margin: 0 0 30px 0;}

.videoBlock .videoWrap .ytBlock{display: block; width: 100%; margin: 0 0 80px 0; position: relative;}
.videoBlock .videoWrap .ytBlock .slick-arrow{width: 20px; height: 36px; top: calc(50% - 18px)!important;}
.videoBlock .videoWrap .ytBlock .blockWrap{display: block; width: 100%; position: relative;}
.videoBlock .videoWrap .ytBlock .blockWrap p{display: block; width: 100%; font-size: 40px; font-weight: bolder; text-align: center; color: #003218; padding: 0; margin: 0; font-size: 30px; color: #000000; margin: 0 0 30px 0;}
.videoBlock .videoWrap .ytBlock .blockWrap .blockInside{display: block; width: 100%; padding-bottom: 56.25%; position: relative;}
.videoBlock .videoWrap .ytBlock .blockWrap iframe{display: block; width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}

.videoBlock .videoWrap .ytBlock .slick-dots{display: flex; align-items: center; position: absolute; bottom: -5%; left: 50%; transform: translate(-50%, 100%); margin: 0; padding: 0;}
.videoBlock .videoWrap .ytBlock .slick-dots li{list-style: none; margin: 0 10px 0 0; opacity: 0.7;}
.videoBlock .videoWrap .ytBlock .slick-dots .slick-active{opacity: 1;}
.videoBlock .videoWrap .ytBlock .slick-dots li button{display: block; width: 10px!important; height: 10px!important; font-size: 0; border-radius: 50%; border: none; padding: 0; background: #343434;}

.videoBlock .videoWrap .ytWrap{display: block; width: 100%; padding-bottom: 56.25%; position: relative; margin: 0 0 80px 0;}
.videoBlock .videoWrap .ytWrap iframe{display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0;}
.videoBlock .sliderWrap{display: flex; align-items: stretch!important; width: 100%; max-width: 1000px; margin: 0 auto; position: relative;}
.videoBlock .sliderWrap .group{display: block; width: calc(100% / 4 - 22.5px); min-height: 100px; margin: 0 10px; background: #ffffff; border-radius: 20px; overflow: hidden; text-decoration: none; cursor: pointer;}
/*.videoBlock .sliderWrap .group:nth-child(4), .videoBlock .sliderWrap .group:last-child{margin: 0;}*/
.videoBlock .sliderWrap .group .imgWrap{display: block; width: 100%; padding-bottom: 100%; position: relative; overflow: hidden;}
.videoBlock .sliderWrap .group .imgWrap img{display: block; min-width: 100%; min-height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.videoBlock .sliderWrap .group .sliderText{padding: 30px; font-size: 18px; font-weight: bolder; text-align: justify; color: #000000;}
.videoBlock .sliderWrap .group .sliderText h3{font-size: 18px; margin: 0; padding: 0; font-weight: normal;}

.greenPower{display: block; width: 100%; padding: 30px 0;}
.greenPower h2{display: block; width: 100%; font-size: 40px; font-weight: bolder; text-align: center; color: #003218; padding: 0; margin: 0 0 30px 0;}
.greenPower .greenPower__wrap{display: block; width: 100%; max-width: 1000px; background: #e4f2e0; border-radius: 30px; padding: 15px 30px; margin: 0 auto 10px auto;}
.greenPower .greenPower__wrap .greenGroup h3{display: block; width: 100%; font-size: 25px; font-weight: bolder; text-align: center; color: #37622f; padding: 0; margin: 0 0 30px 0;}
.greenPower .greenPower__wrap .rowBlock{display: flex; align-items: stretch; width: 100%;}
.greenPower .greenPower__wrap .rowBlock .group{display: block; width: calc(100% / 2);}
.greenPower .greenPower__wrap .rowBlock .group .imgBlock{display: block; width: 50%; margin: 0 auto;}
.greenPower .greenPower__wrap .rowBlock .group .imgBlock .imgWrap{display: block; width: 100%; padding-bottom: 100%; position: relative;}
.greenPower .greenPower__wrap .rowBlock .group .imgBlock .imgWrap img{display: block; width: 100%; max-width: 100%; max-height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.greenPower .greenPower__wrap .rowBlock .group .textBlock{display: block; width: 100%; padding: 0 30px;}
.greenPower .greenPower__wrap .rowBlock .group .textBlock .title{display: block; width: 100%; color: #006330; border-bottom: 1px solid #006330; font-size: 20px; font-weight: bolder;}
.greenPower .greenPower__wrap .rowBlock .group .textBlock .text{display: block; width: 100%; color: #000000; font-size: 16px; font-weight: bolder; text-align: justify;}
.greenPower .greenPower__wrap .rowBlock .group .textBlock .text span{color: #ff7000; font-size: 25px; font-weight: bolder;}
.greenPower .remind{display: block; width: 100%; max-width: 1000px; color: #373737; font-size: 16px; margin: 0 auto 
30px auto; padding: 0 30px; font-weight: bolder;}

.greenNews{display: block; width: 100%; background: #daecd6; padding: 50px 0;}
.greenNews h2{display: block; width: 100%; font-size: 40px; font-weight: bolder; text-align: center; color: #003218; padding: 0; margin: 0 0 30px 0;}
.greenNews .greenNews__wrap{display: block; width: 100%; height: 390px; max-width: 800px; margin: 0 auto; background: #ffffff; border-radius: 30px; padding: 30px; overflow-y: auto;}
.greenNews .greenNews__wrap ul{display: block; width: 100%; margin: 0; padding: 0;}
.greenNews .greenNews__wrap ul li{display: block; width: 100%; text-align: center; border-bottom: 1px solid #004a12; padding: 15px 0;}
.greenNews .greenNews__wrap ul li a{text-decoration: none; color: #000000; font-size: 18px; font-weight: bolder;}

.counterBlock{display: block; width: 100%; max-width: 800px; padding: 80px 0; position: relative; margin: 0 auto;}
.counterBlock .countbg{display: block; width: 100%;}
.counterBlock .stepBtn{display: flex; align-items: center; position: absolute; cursor: pointer;}
.counterBlock .stepBtn:hover img{transform: scale(1.1); transition: .2s;}
.counterBlock .stepBtn img{display: block; width: 50px; margin: 0 15px 0 0;}
.counterBlock .stepBtn span{display: block; font-size: 30px; font-weight: bolder; color: #006330; border-bottom: 1px solid #006330;}

.counterBlock .stepA{top: 7%; left: 49%;}
.counterBlock .stepB{top: 15%; left: 49%;}
.counterBlock .stepC{top: 31%; left: -5%;}
.counterBlock .stepD{top: 71.5%; left: -4%;}
.counterBlock .stepE{top: 79%; left: -4%;}
.counterBlock .stepF{top: 87%; left: 13.5%;}
.counterBlock .stepG{top: 80%; left: 73%;}

.counterBlock--mis{display: block; width: 100%; max-width: 800px; margin: 0 auto; padding: 15% 0; position: relative;}
.counterBlock--mis .polygon{display: block; width: 70%; margin: 0 auto;}

.counterBlock--mis .icon_btn{display: block; width: 285px; position: absolute;}
.counterBlock--mis .icon_btn .mainicon{display: block; width: 100%; margin: 0 0 25px 0;}
.counterBlock--mis .icon_btn button{display: flex; align-items: center; background: linear-gradient(to bottom, #61a657 0%,#3f832f 71%); border: none; border-radius: 20px; padding: 5px 10px; margin: 0 auto; cursor: pointer;}
.counterBlock--mis .icon_btn button:hover{background: linear-gradient(to bottom, #3f832f 0%,#61a657 62%);}
.counterBlock--mis .icon_btn button img{display: block; width: 60px;}
.counterBlock--mis .icon_btn button span{display: block; font-size: 30px; color: #fff; font-weight: bolder; letter-spacing: 5px; text-indent: 5px; margin: 0 0 0 15px;}

.counterBlock--mis .pos01{top: 20%; left: 50%; transform: translate(-50%, -50%);}
.counterBlock--mis .pos02{top: 31%; left: 90%; transform: translate(-50%, -50%);}
.counterBlock--mis .pos03{top: 75%; left: 75%; transform: translate(-50%, -50%);}
.counterBlock--mis .pos04{top: 74%; left: 35%; transform: translate(-50%, -50%);}
.counterBlock--mis .pos04 .mainicon{width: 70%;}
.counterBlock--mis .pos05{top: 34%; left: 10%; transform: translate(-50%, -50%);}

.titleBlock{display: block; align-items: center; width: 100%; max-width: 800px; margin: 30px auto;}
.titleBlock .marquee{display: block; width: calc(100% - 0px); position: relative; font-size: 20px; font-weight: bolder;}
.titleBlock .marquee .marqueeText{display: block; width: calc(100% - 0px); background: #DAECD6; border-radius: 30px; padding: 10px 30px;}
.titleBlock h1{display: block; width: 100%; font-size: 40px; font-weight: bolder; text-align: center; color: #003218; padding: 0; margin: 0 0 30px 0;}
.titleBlock .lightGreen{color: #004A12;}
.titleBlock h2{display: block; width: 100%; font-size: 20px; font-weight: bolder; text-align: center; color: #000000; padding: 0; margin: 0 0 30px 0;}
.titleBlock .marquee ul{display: block; width: 100%; height: 30px; overflow: hidden; white-space: nowrap; margin: 0; padding: 0; position: relative;}
.titleBlock .marquee ul li{list-style: none; display: block; line-height: 30px; white-space: nowrap; margin: 0; padding: 0; position: absolute;}
.titleBlock .marquee .trophy{display: block; width: 80px; position: absolute; top: 50%; left: -90px; transform: translateY(-50%);}
.infoBlock{display: block; width: 100%; max-width: 1300px; background: #DAECD6; padding: 30px; margin: 0 auto; border-radius: 20px;}
.infoBlock .infoBlockWrap{display: block; width: 100%; max-width: 800px; margin: 0 auto;}
.infoBlock .infoBlockWrap table{width: 100%; border-collapse: collapse; margin: 0 0 15px 0;}
.infoBlock .infoBlockWrap table tr td{font-size: 18px; font-weight: bolder; padding: 10px 0;}
.infoBlock .infoBlockWrap .article{display: block; width: 100%; padding: 30px; background: #fff; border-radius: 20px; }
.infoBlock .infoBlockWrap .article p{display: block; width: 100%; margin: 0 0 10px 0; font-size: 18px;}
.infoBlock .infoBlockWrap .article .bolder{font-weight: bolder;}

.switchdata{padding: 0; margin: 50px auto;}
.switchdata .title{display: flex; width: fit-content; align-items: center; margin: 0 auto 30px auto;}
.switchdata .title img{display: block; width: 50px; margin: 0 15px 0 0;}
.switchdata .title span{display: block; font-size: 30px; font-weight: bolder; color: #006330; border-bottom: 1px solid #006330;}
.switchdata .textArea__wrap{display: block; background: #DAECD6; border-radius: 30px; padding: 30px; text-align: center; position: relative;}
.switchdata .textArea__wrap--hasbtn{padding: 30px 30px 50px 30px;}
.switchdata .textArea__wrap .btn{display: flex; align-items: center; justify-content: center; width: 20%; position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 50%); }
.switchdata .textArea__wrap .btn img{display: block; width: 100%;}
.switchdata .textArea__wrap .btn span{font-size: 20px; color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -60%);}

.pageWrap{display: block; width: 100%; background: #DAECD6; padding: 30px; overflow: hidden;}
.pageWrap h2{display: block; width: 100%; font-size: 40px; font-weight: bolder; text-align: center; color: #003218; padding: 0; margin: 0 0 30px 0;}
.pageWrap .textBlock{display: block; width: 100%; max-width: 800px; margin: 0 auto 30px auto; font-size: 20px; color: #000000; font-weight: bolder;}
.pageWrap .service{display: block; width: 100%; max-width: 1000px; margin: 0 auto;}
.pageWrap .service .group{display: flex; align-items: center; width: 100%; background: #fff; border-radius: 30px; padding: 30px; position: relative; margin: 0 0 50px 0;}
.pageWrap .service .group:last-child{margin: 0;}
.pageWrap .service .group .mainLogo{display: block; width: 30%; margin: 0 0 0 -15%;}
.pageWrap .service .group .content{display: flex; flex-wrap: wrap; justify-content: center; width: 100%;}
.pageWrap .service .group .content .artBlock{display: block; width: calc(100% / 3); text-decoration: none;}
.pageWrap .service .group .content .artBlock .imgBlock{display: block; width: 50%; margin: 0 auto 15px auto;}
.pageWrap .service .group .content .artBlock .imgBlock .imgWrap{display: block; width: 100%; padding-bottom: 100%; position: relative;}
.pageWrap .service .group .content .artBlock .imgBlock .imgWrap img{display: block; width: 100%; max-width: 100%; max-height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.pageWrap .service .group .content .artBlock p{display: block; width: fit-content; margin: 0 auto; padding: 0; text-align: center;}
.pageWrap .service .group .content .artBlock .title{font-size: 30px; color: #006330; padding: 0 15px; border-bottom: 1px solid #006330;}

.pageWrap .misStep{display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; max-width: 1300px; margin: 0 auto 80px auto; position: relative;}
.pageWrap .misStep::before{content: ''; display: block; width: 100%; height: 80%; background: #fff; position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%); z-index: 1; border-radius: 20px;}
.pageWrap .misStep h6{display: flex; width: fit-content; align-items: center; background: linear-gradient(to bottom, #61a657 0%,#3f832f 71%); border: none; border-radius: 20px; padding: 5px 10px; margin: 0 auto 30px auto; cursor: pointer; position: relative; z-index: 2;}
.pageWrap .misStep h6 img{display: block; width: 60px;}
.pageWrap .misStep h6 span{display: block; font-size: 30px; color: #fff; font-weight: bolder; letter-spacing: 5px; text-indent: 5px; margin: 0 0 0 15px;}

.pageWrap .mis_stepwrap{display: flex; justify-content: center;}
.pageWrap .mis_stepgroup{display: block; width: 380px; position: relative; z-index: 2; padding: 0 15px;}
.pageWrap .mis_stepgroup .title{display: block; width: fit-content; margin: 0 auto 10px auto; text-align: center;}
.pageWrap .mis_stepgroup .title p{margin: 0; width: fit-content; margin: 0 auto;}
.pageWrap .mis_stepgroup .title p:first-child{display: block; font-size: 25px; color: #004a12; font-weight: bolder;}
.pageWrap .mis_stepgroup .title p:last-child{display: block; font-size: 20px; color: #004a12; font-weight: bolder; white-space: nowrap;}
.pageWrap .mis_stepgroup .title .splitline{display: block; width: 100%; height: 2px; background: #004a12;}
.pageWrap .mis_stepgroup .text{display: flex; width: fit-content; margin: 0 auto;}
.pageWrap .mis_stepgroup .text i{display: flex; width: 30px; height: 30px; align-items: center; justify-content: center; font-style: normal; font-size: 20px; font-weight: bolder; color: #fff; background: #003218; border-radius: 50%;}
.pageWrap .mis_stepgroup .text .rightside{display: block; padding: 0 15px;}
.pageWrap .mis_stepgroup .text .rightside p{margin: 0 0 5px 0; color: #373737; font-size: 18px; font-weight: bolder; letter-spacing: 1px; text-indent: 1px;}
.pageWrap .mis_stepgroup .text .rightside p:last-child{margin: 0;}
.pageWrap .mis_stepgroup .text .rightside p font{color: #f8790b;}
.pageWrap .mis_stepgroup .text .rightside .little{font-size: 16px;}
.pageWrap .mis_stepgroup .text .rightside .tiny{font-size: 12px; min-height: 16px; color: #004a12; font-weight: bolder;}
.pageWrap .mis_stepgroup .littleText{display: block; width: fit-content; border-top: 2px solid #000000; font-size: 12px; text-align: center; color: #373737; margin: 10px auto 10px auto;}
.pageWrap .mis_stepgroup .btnLine{display: block; width: 100%;}
.pageWrap .mis_stepgroup .btnLine button{display: block; border: none; background: none; width: 200px; margin: 0 auto; cursor: pointer;}
.pageWrap .mis_stepgroup .btnLine button img{width: 100%;}

.pageWrap .misStep--b::before{bottom: 0; top: auto; transform: translate(-50%, 0); height: 95%;}
.pageWrap .misStep--b .mis_stepwrap{margin: 0 0 0 0;}
.pageWrap .misStep--b .mis_stepgroup .title p:last-child{display: block; font-size: 25px; color: #004a12; font-weight: bolder;}
.pageWrap .misStep--b .split{display: block; width: 50%; height: 2px; background: #000; position: relative; z-index: 2; margin: 30px 0;}
.pageWrap .misStep--b .remind{display: block; width: 100%; margin: 15px 0; position: relative; z-index: 2; text-align: center; font-weight: bolder;}
.pageWrap .misStep--b .remind a{color: #0067f9; text-decoration: none; margin: 0 5px;}

.pageWrap .misStep--c .mis_stepgroup .title p:last-child{display: block; height: 54px; font-size: 25px; color: #004a12; font-weight: bolder;}
.pageWrap .misStep--c .mis_stepgroup .title{margin: 0 auto 20px auto;}
.pageWrap .misStep--c .mis_stepgroup .title .little{font-size: 14px;}
.pageWrap .misStep--c .mis_stepgroup .text i{flex: none;}
.pageWrap .misStep--c .mis_stepgroup .text .rightside p{width: fit-content;}
.pageWrap .misStep--c .mis_stepgroup .tiny{display: flex; align-items: flex-end; width: 100%; min-height: 32px; font-size: 12px; color: #003218; margin: 10px auto 0 auto;}
.pageWrap .misStep--c .mis_stepgroup .littleText{margin: 0 auto;}
.pageWrap .misStep--c .mis_stepgroup .text .rightside .little{font-size: 14px;}

.caution{display: block; width: 100%; padding: 80px 30px; word-break: break-all;}
.caution--wrap{display: block; width: 100%; max-width: 1300px; margin: 0 auto; padding: 30px; border-radius: 20px; background: #daecd6; position: relative;}
.npcaution .caution--wrap{background: #fff;}
.caution ul{display: block; width: 100%; height: 150px; margin: 0 auto; font-size: 16px; line-height: 30px; text-align: justify; color: #373737; overflow: hidden;}
.caution ul .noliststyle{display: flex; align-items: center; list-style: none; margin-left: -1em;}
.caution ul .noliststyle span{display: block; background: #4c8059; color: #fff; padding: 3px 8px; margin: 0 10px 0 0; border-radius: 5px; line-height: 25px;}
.caution ul li{margin: 0 0 15px 0;}
.caution ul ol{padding: 0;}
.caution ul ol li{list-style: none;}
.caution ul ol .tick{display: flex; align-items: flex-start;}
.caution .large{display: block; width: 100%; font-size: 50px; font-weight: bolder; letter-spacing: 2px; text-indent: 2px; color: #003218; text-align: center; margin: 0 0 15px 0;}
.npcaution .large{color: #004a12; font-size: 35px; letter-spacing: 10px;}
.caution .openup{display: block; background: none; border: none; width: 150px; position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 50%);}
.npcaution .openup{background: radial-gradient(ellipse at center, #e59843 0%,#f1790b 80%); font-size: 22px; letter-spacing: 5px; border-radius: 30px; font-weight: bolder; color: #fff; cursor: pointer;}
.npcaution .openup:hover{background: radial-gradient(ellipse at center, #f1790b 0%, #f1790b 80%); transition: .5s;}
.caution .openup img{display: block; width: 100%;}

.pageBottom{display: block; width: 100%; background: #DAECD6;}
.pageBottom img{display: block; width: 100%;}

footer{display: flex; align-items: center; justify-content: center; background: #ce122e;}
footer p{color: #fff;}
footer a{color: #fff; margin: 0 0 0 15px;}

.slick-list, .slick-track{display: flex!important; align-items: stretch;}
.slick-arrow{display: block; width: 34px; height: 48px; font-size: 0; background: url('../img/icon/sliderarrow.svg') no-repeat center center; background-size: 100% auto; border: none; outline: none; position: absolute; top: calc(50% - 24px)!important; cursor: pointer;}
.slick-disabled{opacity: .5;}
.slick-prev{left: -40px;}
.slick-next{right: -40px; transform: rotate(180deg);}

.fixedBtn{display: block; width: 65px; position: fixed; bottom: 5%; right: 1%; z-index:100;}
.fixedBtn img{display: block; width: 100%;}

.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{height: auto!important;}

/*003218*/

@media screen and (max-width: 950px){
    .infoBlock{max-width: 95%; margin: 0 auto;}
    .infoBlock table tr td{display: block; width: 100%;}
    .infoBlock table tr td:nth-child(2){padding: 0 0 0 1em; font-weight: normal;}

    .counterBlock--mis{padding: 15% 0 15% 0;}
    .counterBlock--mis .polygon{width: 40%;}
    .counterBlock--mis .icon_btn{width: 150px;}
    .counterBlock--mis .icon_btn button{border-radius: 10px;}
    .counterBlock--mis .icon_btn button span{white-space: nowrap; font-size: 16px;}
    .counterBlock--mis .icon_btn button img{width: 20px;}

    .counterBlock--mis .pos01{top: 15%; left: 50%; transform: translate(-50%, -50%);}
    .counterBlock--mis .pos02{top: 31%; left: 70%; transform: translate(-50%, -50%);}
    .counterBlock--mis .pos03{top: 75%; left: 65%; transform: translate(-50%, -50%);}
    .counterBlock--mis .pos04{top: 73.5%; left: 40%; transform: translate(-50%, -50%);}
    .counterBlock--mis .pos05{top: 34%; left: 30%; transform: translate(-50%, -50%);}
    
    .pageWrap .mis_stepwrap{flex-direction: column;}
    .pageWrap .misStep::before{height: 95%; top: auto; bottom: 0; transform: translate(-50%, 0);}
    .pageWrap .mis_stepgroup{margin: 0 0 30px 0;}
}

@media screen and (max-width: 800px){

    .mainMenu{height: 50px;}
    .mainMenu .mainMenu__wrap{display: flex; width: 100%; align-content: center; justify-content: space-between; padding: 0 15px;}
    .mainMenu .mainMenu__wrap .menu_logo{height: 30px;}
    .mainMenu .mainMenu__wrap .menu_logo img{height: 100%;}
    .mainMenu .mainMenu__wrap ul li{margin: 0 5px 0 0; padding: 0 5px 0 0;}
    .mainMenu .mainMenu__wrap ul li a{font-size: 14px;}

    .pcslider{display: none!important;}
    .rwdslider{display: block!important;}
    .bannerBlock{padding-bottom: 81.25%;}
    .bannerBlock .mask{display: none;}
    .bannerBlock .rwdmask{display: block;}
    .textArea{padding: 30px;}
    .textArea .textArea__wrap{font-size: 16px;}
    .videoBlock .videoWrap h3{font-size: 18px;}
    .videoBlock .sliderWrap{padding: 0 15px; margin: 0 0 30px 0;}
    .videoBlock .sliderWrap .group .sliderText{font-size: 14px;}
    .videoBlock .sliderWrap .slick-dots{display: flex; align-items: center; position: absolute; bottom: -20px; left: 50%; transform: translate(-50%, 0); margin: 0; padding: 0;}
    .videoBlock .sliderWrap .slick-dots li{list-style: none; margin: 0 10px 0 0; opacity: 0.7;}
    .videoBlock .sliderWrap .slick-dots .slick-active{opacity: 1;}
    .videoBlock .sliderWrap .slick-dots li button{display: block; width: 10px!important; height: 10px!important; font-size: 0; border-radius: 50%; border: none; padding: 0; background: #343434;}
    .slick-prev{left: 8px;}
    .slick-next{right: 8px;}
    .greenPower{padding: 30px;}
    .greenPower .greenPower__wrap .rowBlock{flex-wrap: wrap;}
    .greenPower .greenPower__wrap .rowBlock .group{width: 100%;}
    .greenPower .greenPower__wrap .rowBlock .group .imgBlock{width: 80%;}
    .greenNews{padding: 30px;}
    .greenNews .greenNews__wrap ul li{text-align: left;}
    .greenNews .greenNews__wrap ul li a{font-size: 16px; text-align: left;}
    footer{flex-direction: column; font-size: 12px; padding: 10px;}
    footer p{margin: 0 0 10px 0; padding: 0;}
    

    .pageWrap h2{font-size: 30px;}
    .pageWrap .textBlock{font-size: 16px; margin: 0 0 30% 0;}
    .pageWrap .service .group{flex-direction: column;}
    .pageWrap .service .group .mainLogo{width: 50%; margin: -30% 0 0 0;}
    .pageWrap .service .group .content .artBlock{width: calc(100% / 2 - 5px); margin: 0 10px 10px 0;}
    .pageWrap .service .group .content .artBlock:nth-child(2n){margin: 0 0 10px 0;}
    .pageWrap .service .group .content .artBlock .title{padding: 0 5px; font-size: 16px; margin: 0 auto 10px auto;}
    .pageWrap .service .group .content .artBlock p{font-size: 16px;}

    .titleBlock h1{font-size: 30px;}
    .titleBlock .marquee{display: flex; align-items: center; justify-content: center;}
    .titleBlock .marquee .trophy{width: 50px; position: static; transform: translateY(0); margin: 0 15px 0 0;}
    .titleBlock .marquee .marqueeText{width: calc(100% - 80px);}

    .counterBlock .stepBtn img{width: 15px; margin: 0 8px 0 0;}
    .counterBlock .stepBtn span{font-size: 12px;}

    .counterBlock .stepA{top: 16%; left: 49%;}
    .counterBlock .stepB{top: 22%; left: 53.5%;}
    .counterBlock .stepC{top: 31%; left: 6%;}
    .counterBlock .stepD{top: 68.5%; left: 1%;}
    .counterBlock .stepE{top: 74%; left: 7%;}
    .counterBlock .stepF{top: 81%; left: 29.5%;}
    .counterBlock .stepG{top: 74%; left: 74%;}

    .switchdata{margin: 15px auto;}
    .switchdata .title{margin: 0 auto 15px auto;}
    .switchdata .title span{font-size: 20px;}
    .switchdata .textArea__wrap .btn{width: 50%;}
    .switchdata .textArea__wrap .btn span{font-size: 16px;}
    .switchdata .textArea__wrap{padding: 15px; border-radius: 10px;}
    .switchdata .textArea__wrap--hasbtn{padding: 15px 15px 35px 15px;}

    .missionContent{margin-top: -13%;}

    .missionContent .missionContentWrap{width: 100%; padding: 30px 0;}
    .missionContent .missionContentWrap .targetMenu{flex-wrap: wrap;}
    .missionContent .missionContentWrap .targetMenu li{margin: 0 0 15px 0; width: calc(100% / 3);}
    .missionContent .missionContentWrap .targetMenu li a{font-size: 18px;}

    .missionContent .missionContentWrap .missionBlock .bee{padding: 0; width: 50px; flex: 1 0 auto;}
    .missionContent .missionContentWrap .missionBlock .beeListis{width: 100%; padding: 15px 15px 15px 50px;}
    .missionContent .missionContentWrap .missionBlock--reverse .beeListis{padding: 15px 50px 15px 15px;}
    .missionContent .missionContentWrap .missionBlock .beeListis h2{position: relative; writing-mode: horizontal-tb; text-align: center; font-size: 20px;}
    .missionContent .missionContentWrap .missionBlock .beeListis li h6{font-size: 18px; text-align: center;}
    .missionContent .missionContentWrap .missionBlock .beeListis li .btnLine{flex-direction: column; align-items: center;}
    .missionContent .missionContentWrap .missionBlock .beeListis li .btnLine .icon{width: 20px;}
    .missionContent .missionContentWrap .missionBlock .beeListis li .btnLine .gGroup{margin: 0 0 15px 0;}
    .missionContent .missionContentWrap .missionBlock .beeListis li .btnLine p{display: block; font-size: 14px; align-items: center; text-align: left; width: 100%; flex: 1 1 auto;}
    .missionContent .missionContentWrap .missionBlock .beeListis li .btnLine p mark{font-size: 14px;}
    .missionContent .missionContentWrap .missionBlock .beeListis li .btnLine .btn{font-size: 16px;}
    .missionContent .missionContentWrap .missionBlock .beeListis li .btnLine .btn-fill{font-size: 16px;}
    .missionContent .missionContentWrap .missionBlock .bee .colorbg{width: 80%;}
    .missionContent .missionContentWrap .missionBlock--reverse .bee{display: flex; justify-content: flex-end;}
    .missionContent .missionContentWrap .missionBlock--reverse .bee .colorbg{}
    .missionContent .missionContentWrap .missionBlock--reverse .bee .colorbg .linebg{width: 150%; left: auto; right: 0; background-repeat: repeat-y;}
    .missionContent .missionContentWrap .missionBlock .bee .colorbg .linebg{width: 150%; background-repeat: repeat-y; background-image: url('../img/bg/rwdline.svg'); background-size: 100% auto;}
    .missionContent .missionContentWrap .missionBlock .bee .beeicon{width: 200%;}

    .missionContent .missionContentWrap .missionBlock--reverse .bee .beeicon{bottom: 0; left: auto; right: 0!important;}
    .caution ul .noliststyle{flex-direction: column; align-items: flex-start;}
    .caution ul .noliststyle span{white-space: nowrap;}

}

@media screen and (max-width: 680px){

    .bugerBtn{display: block; width: 30px; height: 30px; border: none; position: absolute; top: 50%; right: 15px; transform: translateY(-50%); background: none; z-index: 999;}
    .bugerBtn i{display: block; width: 80%; height: 3px; background: #cccccc; position: absolute; top: calc(50% - 1.5px); left: 50%; transform: translateX(-50%); border-radius: 20px;}
    .bugerBtn i:first-child{top: calc(25% - 1.5px);}
    .bugerBtn i:last-child{top: calc(75% - 1.5px);}

    .bugerBtn--act i:nth-child(1){top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(45deg);}
    .bugerBtn--act i:nth-child(2){display: none;}
    .bugerBtn--act i:nth-child(3){top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-45deg);}

    .mainMenu .mainMenu__wrap ul{display: none; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100vh; position: fixed; top: 0; left: 0; background: #fff; z-index: 998; margin: 0; padding: 0;}
    .mainMenu .mainMenu__wrap ul li{border: none; margin: 0 0 15px 0; padding: 0;}
    .mainMenu .mainMenu__wrap ul li a{font-size: 18px;}

    .counterBlock--mis{padding: 30% 0;}
    .counterBlock--mis .polygon{width: 40%;}
    .counterBlock--mis .icon_btn{width: 85px;}
    .counterBlock--mis .icon_btn .mainicon{margin: 0 0 5px 0;}
    .counterBlock--mis .icon_btn button{border-radius: 10px;}
    .counterBlock--mis .icon_btn button span{margin: 0 0 0 5px; white-space:normal; font-size: 12px; letter-spacing: 0; text-indent: 0;}
    .counterBlock--mis .icon_btn button img{width: 20px;}

    .counterBlock--mis .pos01{top: 23%; left: 50%; transform: translate(-50%, -50%);}
    .counterBlock--mis .pos02{top: 36%; left: 75%; transform: translate(-50%, -50%);}
    .counterBlock--mis .pos03{top: 68.5%; left: 65%; transform: translate(-50%, -50%);}
    .counterBlock--mis .pos04{top: 67.5%; left: 40%; transform: translate(-50%, -50%);}
    .counterBlock--mis .pos05{top: 38%; left: 25%; transform: translate(-50%, -50%);}

    .pageWrap .misStep--b .remind{padding: 0 15px;}
    .pageWrap .misStep::before{height: 97%;}
    .pageWrap .misStep h6 img{width: 30px;}
    .pageWrap .misStep h6 span{font-size: 20px;}
    .pageWrap .mis_stepgroup .title p:last-child{white-space: normal;}
    .pageWrap .mis_stepgroup .title p:last-child{font-size: 16px!important;}
    .pageWrap .mis_stepgroup .btnLine{margin: 30px 0 0 0;}
    .pageWrap .mis_stepgroup .btnLine button{width: 150px;}
    .caution .large{font-size: 30px;}

    .videoBlock .videoWrap .ytBlock .slick-arrow{top: auto!important; bottom: 0!important; transform: translateY(100%)!important;}
    .videoBlock .videoWrap .ytBlock .slick-next{transform: translateY(100%) rotate(180deg)!important;}

    .pageWrap .mis_stepgroup .title p:first-child{font-size: 18px;}
    .pageWrap .misStep--c .mis_stepgroup .title p:last-child{font-size: 16px!important;}
    .pageWrap .misStep--c .mis_stepgroup .title .little{font-size: 12px!important;}

    .fixedBtn{display: block; width: 50px; position: fixed; top: 88%; right: 1%; transform: translateY(-50%); z-index:100;}
}

@media screen and (max-width: 450px){
    .pageWrap .mis_stepgroup{width: 300px;}
}