@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap'); 
.flex{display: flex; flex-wrap: wrap; justify-content: space-between;}
p{color: #333;}
a.common_butt:hover{box-shadow:0 2px 5px #fb8d67; transform: translateY(2px); transition: all .2s;}
a.border{display: inline-block; height: 40px; line-height: 40px; border: 1px solid #333; color: #333; padding: 0 20px 0 50px; position: relative; border-radius: 5px;}
a.border:hover{color: #77b917;}
a.email::before{display: block;content: '';width: 50px; height: 50px; background: url(/static/old/img/product/fish/icoin.png) no-repeat; background-position: -50px 0; position: absolute; left: 0; top: -5px;}
.option a.whatsapp::before{display: block;content: '';width: 50px; height: 50px; background: url(/static/old/img/product/fish/icoin.png) no-repeat; background-position: 0 -100px; position: absolute; left: 0; top: -5px;}
.tit{margin-bottom: 50px;}
.tit h2{font-size: 2rem; color: #77b917; display: inline-block; line-height: 4rem;}
.kefu{width: 100%; box-shadow: 0 0 5px #ddd;border-radius: 5px;border: 1px dashed #333; position: relative;}
.kefu .img{width: 160px;}
.kefu .txt{width: calc(100% - 160px); padding: 20px; box-sizing: border-box;}
.kefu .txt p{margin-bottom: 0; font-weight: bold;}
.kefu a.common_butt{position: absolute; right: 0; bottom: -10px;}

/* structure */
.structure{margin-bottom: 150px;}
.structure li .l{width: 280px; margin-bottom: 30px;}
.structure li .r{width: calc(100% - 300px); margin-bottom: 30px; box-shadow: 0 0 5px #ddd; align-items: center; padding: 30px; box-sizing: border-box; border-radius: 5px;}
.structure li .img{width: 118px; padding-right: 20px; border-right: 1px dashed #77b917;}
.structure li .txt{padding-left: 30px; width: calc(100% - 150px); box-sizing: border-box;}
.structure .b .img{width: 50%; margin-bottom: 30px;}
.structure .b .img img{width: 100%; height: auto;}
.structure .b .txt{width: 50%;}
.structure .b dt{font-size: 1.2rem; font-weight: bold; line-height: 1.7rem; padding:0 40px; margin-bottom: 25px;}
.structure .b dd{box-shadow: 0 0 5px #ddd; background-color: #fff; border-radius: 5px; padding: 30px 30px 10px 30px; position: relative; top: 0; left: -100px; width: calc(100% + 100px); box-sizing: border-box;}
.structure .b p{margin-bottom: 30px;}
.structure .b p span{color: #77b917;}

/* principle */
.principle{margin-bottom: 40px;}
.principle .l{width: 48%;}
.principle .l img{width: 100%; height: auto;}
.principle .video{position: relative;padding-top:56.25%}
.principle .video iframe{width:100%; height:100%;position:absolute;left:0;top:0}
.principle .r{width: 48%;}
.principle p{margin-bottom: 30px;}

/* option */
.option{background:url(/static/old/img/product/fish/option_bg.jpg) no-repeat 50% top; padding-top: 70px; margin-bottom: 50px;}
.option h2{z-index: 0;}
.option h2::after{opacity: .3;z-index: -1;}
.option p{color: #ccc; margin-bottom: 40px;}
.option .table{background-color: #fff; box-shadow: 0 0 5px #ddd; padding: 40px 20px; border-radius: 5px; margin-bottom: 20px;}
.option h3{font-size: 1.5rem; color: #77b917; margin-bottom: 20px;}
.option th,.option td{padding: 10px; line-height: 1.5rem; font-size: 1rem; color:#333}
.option th{border-bottom: 2px solid #77b917;}
.option td{border-bottom: 2px solid #f2f2f2;}
.option .table div{text-align: center; margin: 20px 0 -20px 0; }

/* feed */
.feed{margin-bottom: 70px;}
.feed p{margin-bottom: 30px;}
.feed div.flex .img{margin-bottom: 30px;}
.feed li{width: 170px; margin-bottom: 30px; border:1px dashed #333; border-radius: 85px; display: flex; flex-direction: column;align-items: center;text-align: center; padding: 6px; box-sizing: border-box;}
.feed li .img{border-radius: 50%; overflow: hidden; }
.feed li h3{margin-bottom: 15px; font-size: 1rem; padding: 0 20px; line-height: 1.5rem; color:#333}
.feed li .img:first-child{margin-bottom: 15px;}
.feed li:hover{border-color: #77b917;}
.feed li:hover h3{color: #77b917;}
.feed p:last-of-type{color: #77b917;}

/* banner */
.banner{background:url(/static/old/img/product/fish/banner_bg.jpg) no-repeat 50% top; padding-top: 60px;}
.banner .txt{width: 72%;}
.banner p{color: #fff; font-size: 2rem; line-height: 2.5rem; margin-bottom: 30px;}
.banner a.common_butt{box-shadow:none}
.banner a.common_butt:hover{box-shadow:none}
.banner a.border{color: #fff; border-color: #fff;}
.banner a.email::before{background-position: -50px -100px;}
.banner a.border:hover{color: #77b917;}
.banner .img{width:28%; max-width: 356px;}
.banner img{width: 100%; height: auto;}

/* pro */
.pro{margin-bottom: 30px;}
.pro .container>p{margin-bottom: 40px;}
.pro .item{margin-bottom: 40px; border: none;}
.pro .item .img{width: 33%; min-width: 300px;}
.pro .item .img img{width: 100%; height: auto;}
.pro .item .txt{width: 63%;}
.pro .item h3{font-size: 1rem; color: #77b917; line-height: 1.5rem; margin-bottom: 20px;}
.pro .item p{margin-bottom: 15px;}
.pro .item p span{color: #77b917;}

/* benefits */
.benefits{background-color: #f8faff; padding: 60px 0;}
.benefits h2{z-index: 0;}
.benefits h2::after{z-index: -1; opacity: 1; }
.benefits .container>p{margin-bottom: 20px;}
.benefits .l,.benefits .r{width: 48%; display:flex; flex-direction:column; justify-content:space-between}
.benefits dt{ background-color: #77b917; font-size: 1rem; line-height: 1.5rem; border-radius: 20px; margin-bottom: 20px; display: inline-block; padding: 5px 10px; color: #fff;}
.benefits dd{margin-bottom: 30px; font-size: 1rem; line-height: 1.5rem;}

/* line */
.line{padding: 60px 0;}
.line .m1{margin-bottom: 70px;}
.line .m1 .img{width: 46%;}
.line .m1 img{width: 100%; height: auto;}
.line .m1 .txt{width: 50%;}
.line .m1 p{margin-bottom: 30px;}
.line .m1 li{width: 123px; height: 30px; line-height: 30px; text-align: center; border: 1px solid #333; border-radius: 5px; margin-bottom: 20px !important;}
.line .m1 li:hover{background-color:#77b917; border-color:#77b917}
.line .m1 li:hover a{color:#fff}
.line .m1 li a{display:block}
.line .item{margin-bottom: 40px; border: none;}
.line .item .img{width: 57%;}
.line .item img{width: 100%; height: auto;}
.line .item dl{width: 43%}
.line .item h3{font-size: 1.5rem; line-height: 2rem; color:#333; margin-bottom: 20px; font-weight: normal; padding: 0 20px;}
.line .item dd{background-color: #fff; box-shadow: 0 0 5px #ddd; border-radius: 5px; padding: 15px 25px; position: relative; left: -40px; top: 0; width: calc(100% + 40px); box-sizing: border-box;}
.line .item.item2 dl dd{left:0}
.line .item p{margin-bottom: 20px;}
.line .item:nth-of-type(2) dd{left: 0;}

/* project */
.project{background-color: #f8faff; padding: 60px 0;}
.project h2{z-index: 0;}
.project h2::after{z-index: -1; opacity: 1;}
.project .item{width: 270px; border: none;}
.project .item .txt{width: 100%; padding: 0 18px; box-sizing: border-box;}
.project .item h3{background-color: #fff; padding: 15px 10px; font-size: 1rem; height:4.5rem; line-height: 1.5rem; font-weight: normal; position: relative; top: -20px; box-shadow: 0 0 5px #ddd; border-radius: 5px;}
.project .item:hover h3{background-color: #77b917; color: #fff; box-shadow:0 0 5px #77b917;}

/* s3 */
.solution_list2_s3 .tit{text-align: center; margin-bottom: 25px;}
.solution_list2_s3 h2.anton{font-family: 'Anton'; font-size: 2rem; color: #333;margin-bottom:30px}
.solution_list2_s3 h2.anton span{color: #a80721;}
.solution_list2_s3 .tit{margin-bottom: 40px;}
.solution_list2_s3 .flex{justify-content: space-between;}
.solution_list2_s3 .item{width: 32%;min-width: 300px; border: 1px solid #eaeaea;margin-bottom: 40px;}
.solution_list2_s3 .item:hover{box-shadow: 0 0 10px #01448b;}
.solution_list2_s3 .item .t{position: relative;}
.solution_list2_s3 .item img{width: 100%; height: auto;}
.solution_list2_s3 .item .capacity{position: absolute;width: 120px; line-height: 40px; background-color: #77b917; text-align: center; font-size: 1.5rem; color: #fff; font-weight: bold; bottom: -20px; left: 20px;}
.solution_list2_s3 .item .b{padding: 40px 20px 30px; position: relative;}
.solution_list2_s3 .item h3{font-size: 1.2rem; margin-bottom: 15px;}
.solution_list2_s3 .item h3:hover a{ color:#77b917}
.solution_list2_s3 .item p{margin-bottom: 25px;}
.solution_list2_s3 .item a.a1{color: #77b917; font-size: 1rem;}
.solution_list2_s3 .item a.a1:hover{text-decoration: underline;}
.solution_list2_s3 .item a.a2{display: block;position: absolute; width: 130px; line-height: 30px;text-align: center;color: #fff;background: url(/static/old/img/solution/list-feed/blue_bg.jpg) no-repeat; bottom: 0; right: 0;font-size: 1rem;}


/* form */
.form{padding: 70px 0;}
.form .l{width: 34%; box-shadow: 0 0 5px #ddd; border-radius: 5px; padding: 30px; box-sizing: border-box;}
.form .l .t{margin-bottom: 25px;}
.form .l .t p:first-child::before{display: inline-block; content: ''; width: 40px; height: 1px; background-color: #77b917; line-height: 1.5rem; margin:0 10px 5px 0;}
.form .l .t p{margin-bottom: 15px;}
.form .l .t p b{font-size: 2rem;}
.form .l dl{border-bottom: 1px solid #f7f7f7; padding-left: 75px; margin-bottom: 30px; position: relative; padding-bottom: 40px;}
.form .l dl::before{display: block; content: ''; width: 50px; height: 50px; background: url(/static/old/img/product/fish/icoin.png) no-repeat -50px -50px; position: absolute; left: 0; top: 0;}
.form .l dt{font-size: 1.5rem; font-weight: bold;margin-bottom:30px}
.form .l dl:last-of-type{border-bottom: none; margin-bottom:0}
.form .l dl:last-of-type::before{background-position: -100px 0;}
.form .r{background-color: #333; padding: 25px 35px; width: 64%; border-radius: 5px; box-sizing: border-box;}
.form .r p{color: #fff; }
.form .left,.form .right{display: flex; flex-wrap: wrap; justify-content: space-between;width:100%}
.form .lab{width: 49%; margin-bottom: 30px; color: #fff;}
.form .right .lab{width: 100%;}
.form .lab label,.form .left .lab:first-child{width: 100%; display: flex; flex-wrap: wrap; line-height: 1.5rem; background-color: #585755; border-radius: 5px; padding: 10px; box-sizing: border-box;}
.form .lab span{width: 100px;}
.form .lab label input,.form .lab select{width: calc(100% - 100px); color: #fff; font-size: 1rem; box-sizing: border-box; border: none; background-color: #585755;}
.form .left .lab:first-child{width: 100%;}
.form .right textarea{width: 100%; margin-bottom: 30px; padding: 10px; background-color: #585755; border-radius: 5px; line-height: 1.5rem; font-size: 1rem; height: 4.5rem; color: #fff;}
.form .right textarea::-webkit-input-placeholder{color: #fff;}
.form input.sub{margin: 0 auto; display: block; cursor: pointer; box-shadow: none;}

.form .r ul{padding: 0; display: flex; justify-content: space-between; flex-wrap: wrap; row-gap: 10px;}
.form .r .textarea{background-color: #fff; padding: 10px; border-radius: 5px;}
.form .r .textarea textarea{border: none; box-shadow: none;}
.form .r input.sub{padding: 0;}
@media (min-width:768px) {
    .form .r ul li{width: 49%;}
    .form .r ul li:first-child{width: 100%;}
}

@media (max-width:1024px){
    .form .l,.form .r{width: 100%;}
    .form .l{margin-bottom: 30px;}
}
@media (max-width:768px){
    .flex{justify-content: space-around;}
    .structure li .l{margin: 0 auto 30px;}
    .structure li .r{width: 100%;}
    .structure li:last-of-type{flex-wrap: wrap-reverse;}
    .structure .b .img,.structure .b .txt,.structure .b dd{width: 100%; position: unset;}
    .principle .l,.principle .r{width: 100%;}
    .principle .l{margin-bottom: 30px;}
    .option .table table{display: block; overflow-x: scroll;}
    .banner{background-size: cover;}
    .banner .txt,.banner .img{width: 100%;}
    .pro .item .txt{width: 100%; margin-top: 30px;}
    .pro .item:last-of-type{flex-wrap: wrap-reverse;}
    .benefits .l, .benefits .r{width: 100%;}
    .benefits .l .kefu{margin-bottom: 30px;}
    .line .m1 .img,.line .m1 .txt{width: 100%;}
    .line .m1 .img{margin-bottom: 30px;}
    .line .item .img,.line .item dl{width: 100%;}
    .line .item .img{margin-bottom: 30px;}
    .line .item dd{position: unset; width: 100%;}
    .line .item:last-of-type{flex-wrap: wrap-reverse;}
    .form .lab{width: 100%;}
    .solution_list2_s3 .item,.solution_list2_s5 .item{width: 100%;}
    .solution_list2_s3 .flex{justify-content: space-around;}

}
@media (max-width:510px){
    .structure li .img{margin:0 auto 30px; padding-right: 0; border-right: none;}
    .structure li .txt{width: 100%;}
}
@media (max-width:425px){
    .tit{margin-bottom: 30px;}
    .tit h2{line-height: 2.5rem;}
    a.border{display: none;}
    .feed .scroll{overflow-x: scroll;}
    .feed ul{width: 900px;}
    .feed li{width: 15%;}
    .banner,.structure{margin-bottom: 30px;}
    .banner img{max-width: 250px; margin: 0 auto 30px;}
    .project .item h3{height: auto;}
    .structure li .txt{padding-left: 0;}
    .kefu{display: none;}
    .principle,.feed{margin-bottom: 30px;}
    .pro{margin-bottom: 0;}
    .line .m1{margin-bottom: 20px;}
    .line .item{margin-bottom: 0;}
    .form .l{display: none;}
    .form .r{padding: 20px;}
    
}