.section{position: relative;padding:clamp(20px, 3vw, 50px) clamp(20px, 4vw, 75px)}
.flex{display: flex;flex-wrap: wrap;justify-content: space-between;}
a.butt{background-color: #d96d08;transition: background-color .3s;color: #fff;font-size: 1.1rem;padding: 20px 30px;display: inline-block;position: relative;overflow: hidden;border: 2px solid #d96d08;box-sizing: border-box;}
a.butt:hover{background-color: #d96d087d;}
.tit{position: relative;text-align: center;}
.tit::before{content: 'RICHI';font-family: "Anton",'Roboto';position: absolute;left: 50%;top:0;transform: translate(-50%, -25%);font-size: clamp(20px, 15vw, 280px);color: #5b90fb;opacity: .1;letter-spacing: 60px;font-style: italic;}
.tit h2{font-size: clamp(2rem, 4.5vw, 80px); color: #fff;margin-bottom: 20px;}
.tit p{color: #fff;}
.tit p.ftit{font-size: clamp(1.1rem, 2vw, 30px);}
.video{position: relative; cursor: pointer;}
.video .img{position: relative;}
.video .img::before{content:'';position: absolute;width: 100%;height: 100%;background-color: #000;opacity: .3;top: 0;left: 0;transform: scaleX(0);transition: all .6s;}
.video:hover .img::before{transform: scaleX(1);}
.video .button{position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);}
.video .button img{width: unset;}

.mask2_fish{position: absolute;width: 100%; height: 100%; z-index: 8; top: 0px; left: 0px; display: none; }
.mask2_fish iframe{width:100%; height: 80%;position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.mask2_fish .imgclo_fish { cursor: pointer; position: absolute; top: 10px; right: 10px; z-index: 999; font-size: 3.43rem; color: red; }


.sec2_bg{position: relative;}
.sec2_bg>.bg{position: absolute;left: 0;top: 0;}
.sec2_bg .bg2{position: fixed;top: 0;width:100vw;height: 100vh;z-index: -1;max-width: 1920px;}
.sec2_bg .bg2 img{height: 100%;}

.sec2.section{max-width: 1580px;margin: 0 auto;}
.sec2 .l{width: 57%;position:relative}
.sec2 .txt{width: 40%;display: flex;flex-direction: column;justify-content: center; gap: 20px;}
.sec2 .txt h2{font-size: clamp(2rem, 4vw, 80px); color: #fff;}
.sec2 .txt p.ftit{font-size: clamp(1.2rem, 1.5vw, 30px);line-height: 1.5;}
.sec2 .txt p{color: #fff;font-size: 1.1rem;line-height: 1.8;margin-bottom: 30px;}

.sec3.section{padding-bottom: 0;}
.sec3 .top .img{max-width: 1858px;margin: 50px auto;}
.sec3 .top{text-align: center;}
.sec3 .top>p{font-size: clamp(13px, 2vw, 30px);line-height: 1.3;margin-bottom: 50px;}
.sec3 .main{padding-top: clamp(20px, 3vw, 60px);}
.sec3 .main .item{width:28%;margin-bottom: clamp(20px, 6vw, 120px);position: relative;}
.sec3 .main .item .img{position: relative;}
.sec3 .main .item .img .video_box_fish{cursor: pointer;}
.sec3 .main .item .button{position: absolute;right: 0;bottom: 40px;opacity: .7;transition: opacity .3s;width: 50px;}
.sec3 .main .item .img .video_box_fish:hover .button{opacity: 1;}
.sec3 .item .machine{transition: transform .3s;}
.sec3 .item .machine:hover{transform: scale(1.1) !important;}
.sec3 .item h3{font-size: clamp(1.1rem, 1.5vw, 32px);font-family: Arial;margin-bottom: 10px;text-align: center;}
.sec3 .item h3 a{color: #fff;}
.sec3 .item:hover h3 a{color: #d96d08;}
.sec3 .item p{line-height: 1.8;}
.sec3 .item::after{content: '';width: 44px;height: 38px;background: url(/static/img/solution/content-fish/sec3-arrow.png) no-repeat;position: absolute;right: -90px;top: 25%;}
.sec3 .item.last::after{top: auto;bottom:-80px; right: 50%; transform: rotate(90deg);}
.sec3 .flex.reverse{flex-direction: row-reverse;}
.sec3 .flex.reverse .item::after{left: -90px;right: auto;transform: rotate(180deg);}
.sec3 .flex.reverse .item.last::after{left: 50%;right: auto;transform: rotate(90deg);}
.sec3 .item.last.none::after{display: none;}
.sec3 .flex3 .item .img{margin-bottom: 20px;}

.sec4.section{max-width: 1600px;margin: 0 auto;}
.sec4 .tit{margin-bottom: clamp(20px, 4vw, 70px);}
.sec4 .top{text-align: center;margin-bottom: 40px;}
.sec4 .top p{font-size: 1.1rem;line-height: 2.2;margin-bottom: 30px;}
.sec4 .main .item{width: 29%;display: flex;flex-direction:     column;justify-content: end;gap: 40px;margin-bottom:clamp(20px, 3vw, 50px);}
.sec4 .item .num{font-family: "Anton";font-size: clamp(1.8rem, 3vw, 55px);color: #fff;margin-bottom: 20px;}
.sec4 .item h3{font-size: clamp(1.5rem, 2.5vw, 45px);margin-bottom: 20px;}
.sec4 .item p{font-size: 1.1rem; line-height: 1.8;color: #ccc;}
.sec4 .flex2 .item{width: 43%;}

.sec5.section{padding-left: 0;padding-right: 0;}
.sec5 .tit{max-width: 1450px;margin: 0 auto;}
.sec5 .main{padding:clamp(40px, 5vw, 100px) 0 0}
.sec5 li{width: 18.5%;margin-bottom: clamp(20px, 4vw, 80px);transition: box-shadow .3s;}
.sec5 li img{transition: transform .3s;}
.sec5 li:hover{box-shadow: 0 0 20px #ffffff80;}
.sec5 li:hover img{transform: scale(1.01);}

.sec6.section{padding: 0;}
.sec6 .top{width: 96%;max-width: 1600px;margin: 0 auto;}
.sec6 .top>.txt{width: 28%;padding-bottom: 40px;}
.sec6 .top .r{width: 66%;}
.sec6 .top .item{width: 48%;}
.sec6 h2{font-size: clamp(2rem, 3.5vw, 60px);line-height: 1.2;margin-bottom: 30px;}
.sec6 .top p{font-size: 1.2rem;line-height: 1.5;margin-bottom: 30px;}
.sec6 .item{position: relative;margin-bottom: clamp(20px, 4vw, 80px);overflow: hidden;}
.sec6 .item h3 a{color: #fff;}
.sec6 .item:hover h3 a{color: #d96d08; text-shadow: 0 1px #333;}
.sec6 .item .box{position: relative;}
.sec6 .top .item .bg{background: linear-gradient(to top, #0066ff69 60%, transparent); pointer-events: none;}
.sec6 .top .item .txt .bubbles{position: relative;}
.sec6 .item .txt .bubbles::before,.sec6 .item .txt .bubbles::after{display: none;}
.sec6 .item:hover .bg{animation: wave 3s cubic-bezier( 0.36, 0.45, 0.63, 0.53) -.125s infinite, swell 3s ease -1.25s infinite}
.sec6 .item:hover .txt .bubbles::before,.sec6 .top .item:hover .txt .bubbles::after{display: block;}
@keyframes wave{
    0%{
        bottom:0;
    }
    100%{
        bottom:-10px;
    }
}
@keyframes swell {
    0%, 100% {
        bottom:0;
    }
    50% {
        bottom:-20px;
    }
  }
.sec6 .item .bg{width:100%;position: absolute;left: 0; bottom: 0;transition: all .2s;}
.sec6 .item .txt{position: absolute;left: 0;bottom: 0;padding: 30px;pointer-events: none;width:100%;box-sizing:border-box}
.sec6 h3{font-family: "Arial";font-size: clamp(1.1rem, 1.5vw, 27px);line-height: 1.2; text-align: center;margin-bottom: 20px;}
.sec6 .item p{font-size: 1rem;line-height: 1.6;margin-bottom: 0;}
.sec6 .btm .item{width: 19%;}
.sec6 .btm .item .txt{padding:15px}
.sec6 .btm .item p{font-size:1.5rem;text-align:center}

.sec7{max-width: 1600px;margin: 0 auto;}
.sec7 .tit p{font-size: 1.2rem;line-height: 1.5;}
.sec7 .main{padding-top: clamp(40px, 5vw, 80px);}
.sec7 .item{position: relative;margin-bottom: clamp(40px, 5vw, 80px);width: 32%;}
.sec7 .item .img{overflow: hidden;position: relative;}
.sec7 .item::after{content: '';position: absolute;width: 100%;height: 100%;left: 0;bottom: 0; background-image: linear-gradient(0deg,#33333378 -50%,transparent 90%);opacity:0;transition: opacity 1s;pointer-events: none;}
.sec7 .item:hover::after{opacity: 1;}
.sec7 .item .img .bubbles::before,.sec7 .item .img .bubbles::after{display: none;}
.sec7 .item:hover .img .bubbles::before,.sec7 .item:hover .img .bubbles::after{display: block;}
.sec7 .item .icon{position: absolute;right: 35px;top: 0;transform: translateY(-50%);}
.sec7 .item .txt{position: absolute;padding: 20px;bottom: 0;left: 0;text-align: center;pointer-events: none;z-index: 5;}
.sec7 .item .txt p{font-size: clamp(1.1rem, 2vw, 24px);line-height: 1.2;}
.sec7 .item:hover p{text-shadow: 0 1px #333;}

.sec8.section{max-width: 1600px;margin: 0 auto;padding-top: 0;}
.sec8 .img{width: 43%;}
.sec8 .txt{width:48%}
.sec8 .txt h2{font-size: clamp(2rem, 4vw, 70px);line-height: 1.2;margin-bottom: 20px;}
.sec8 .txt p{font-size: 1.1rem;line-height: 1.9;margin-bottom: 40px;}

.sec9.section{padding-left: 0;padding-right: 0;}
.sec9 .top{max-width: 1600px;margin: 0 auto;padding-top: clamp(40px, 5vw, 80px);}
.sec9 .top .l{width: 54%;position:relative}
.sec9 .top .l iframe{height:100%}
.sec9 .top .txt{width: 46%;background-color: #fff;padding: clamp(20px, 4vw, 70px) clamp(20px, 5vw, 90px);box-sizing: border-box;}
.sec9 .txt p{font-size: 1.1rem;color: #003366;line-height: 1.6;margin-bottom: 40px;}
.sec9 .count{max-width: 1800px;margin:clamp(40px, 3vw, 80px) auto 0;padding:0 20px;color: #fff;font-family: "Anton";}
.sec9 .count .item{display: flex;align-items: end;gap: 20px;line-height: 1;margin-bottom: 40px;}
.sec9 .count .num{font-size: clamp(1.2rem, 5vw, 80px);font-weight: bold;}
.sec9 .count .txt{font-size: clamp(1rem, 2vw, 35px);}
.sec9 .btm{margin-top: 40px;}
.sec9 .btm .item{width:32%;background-color: #fff;padding: 30px clamp(30px, 3vw, 50px);box-sizing: border-box;align-items: center;transition: all .3s;}
.sec9 .btm .item:hover{background-color: #d96d08;box-shadow: 0 0 5px #fff;}
.sec9 .btm .item .img{width: 44%;}
.sec9 .btm .item .txt{width: 49%;}
.sec9 .btm .item .txt p{color: #003399;font-size: 1.1rem;line-height: 1.4;margin-bottom: 0;}
.sec9 .btm .item:hover p{color: #fff;}

.footer_bg{position: relative;padding-top: clamp(20px, 6vw, 100px);overflow: hidden;background: url(/static/img/solution/content-fish/footer-bg.webp) no-repeat;}
.footer_bg .bg{position: absolute;left: 0;top: 0;}
.footer_bg .container{position: relative;max-width: 1570px !important;margin:0 auto}
.footer{background: unset;border-top: none;height: auto;}
.copyright{background: none;}
/* form */
.form .bg img{height:100%;width:auto;overflow: hidden;}
.form .service_strip,.form .ltit,.form .ltit+p{display: none}
.form .l{width: 38%;margin-bottom: 40px;}
.form .l p{color: #fff;font-size: 1.1rem;}
.form .l h2{line-height: 1.2;margin-bottom: 30px;font-size: clamp(1.5rem, 3vw, 50px);}
.form .r{width: 53%;}
.form .r .left{display:flex;justify-content:space-between;flex-wrap:wrap;float:unset}
.form .r .right{float:unset}
.form .r .lab{width:49%;margin-bottom:30px}
.form .r .lab.full{width:100%}
.form .r .lab label{border:1px solid #eaeaea;color:#fff;display:flex;align-items:center}
.form .r .lab span{padding:0 10px}
.form .r .lab input{flex-grow:1;height:55px;line-height:55px;background:none;border:none;color:#fff;font-size:1rem}
.form .r textarea{width:100%;min-height:150px;padding:10px;font-size:1rem;background:none;border-color:#eaeaea;box-sizing:border-box;margin-bottom:30px;color:#fff}
.form input.sub{padding:15px 40px;background-color:#d96d08;color:#fff;border:none;font-size:1rem}
.form textarea::-webkit-input-placeholder {color: #fff;}

.footer .f_nav{width: 60%;display: flex;justify-content: space-between;}
.footer .cons_sns{width: 38%;max-width: 500px;}
.footer .cons_sns .tit{text-align: left;}
.footer .cons_sns .tit::before{display: none;}
.copyright{display: none;}

.footer a,.footer .cons_sns p,.footer .cons_sns{color: #Fff;}
.footer .f_nav ul li:not(.img){line-height: 40px;}


@media (max-width:1024px){
    .sec3 .flex.reverse{flex-direction: unset;}
    .sec3 .item::after{display: none}
    .sec3 .main .item{display: flex;width: 100%;align-items: center;box-shadow: 0 0 10px #fff;border-radius: 10px;padding: 20px;}
    .sec3 .main .item .img{width: 40%;}
    .sec3 .main .item .txt{width: 60%;}
    .sec3 .item h3{text-align: left;margin-bottom: 20px;color: #77b917;}
    .sec6 .top>.txt,.sec6 .top .r{width: 100%;}
    .sec7 .item{width: 49%;}
    .footer{display: none;}
}

@media (max-width:768px){
    .tit::before{letter-spacing: 10px;}
    .sec2 .l,.sec2 .txt{width: 100%;margin-bottom: 20px;}
    .sec2 .txt p{margin-bottom: 0;}
    .sec4 .main .item{width: 100%;flex-direction: unset;align-items: center;margin-bottom: 40px;}
    .sec4 .main .item.reverse{flex-direction: row-reverse;}
    .sec6 .top .item{width: 100%;}
    .sec6 .btm .item{width:49%}
    .sec6 .btm .item.first-item{display:none}
    .sec8 .img,.sec8 .txt{width: 100%;margin-bottom: 20px;}
    .sec9 .btm{margin-top: 0;}
    .sec9 .btm .item{width: 100%;margin-bottom: 20px;}
    .sec9 .top .l,.sec9 .top .txt{width: 100%;}
    .footer_bg{padding-bottom: 80px;}
    .slidoly-bg{display: none;}
    .form .l,.form .r{width: 100%;}

}
@media (max-width:530px){
    .sec3 .main .item{flex-wrap: wrap;}
    .sec3 .main .item .txt,.sec3 .main .item .img{width: 100%;}
    .sec4 .main .item .img{width:80%}
    .sec4 .main .item,.sec4 .main .item.reverse{flex-direction: column;}
    .sec7 .item{width: 100%;}
    .sec9 .btm .item{padding: 10px;}
    .form .r .left .lab{width:100%}
}