.F1{background-color: #0d0d0d;color: #737373;}
.F1 *{box-sizing: border-box;transition: all .3s ease-out;}
.F1-wrapper{width: 1420px;margin: 0 auto;}
.F1-section{width: 1100px;margin: 0 auto;}
.txt-linear{background-image: linear-gradient(to right, #fff, #fff, #9c9c9c, #9c9c9c);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}
.space{padding-top: 3.8vh !important;padding-bottom: 3.8vh !important;}
.mg_t{margin-top: 3.8vh;}
/* img{display: block;max-width: 100%;} */

.F1-box1{height: 100vh;background: url(../images/product-page/F1/bg_banner.jpg) no-repeat center/cover;padding-top: 180px;}
.F1-box1 .F1-section{position: relative;height: 100%;}
.F1-box1 .dev{position: absolute;bottom: 7%;right: 0;height: 92%;}
.F1-box1 .dev img{height: 100%;}
.F1-box1 .txt{height: 100%;display: flex;flex-direction: column;justify-content: center;color: #fff;}
.F1-box1 .txt h1{font-size: 6em;font-weight: bold;letter-spacing: 12px;margin-bottom: 10px;}
.F1-box1 .txt p{font-size: 3em;letter-spacing: 2px;}
 
.page_title.txt_center{text-align: center;}
.page_title h3{font-size: 3.5em;font-weight: bold;letter-spacing: 3px;color: #fff;display: inline-block;line-height: 1;}
.page_title p{font-size: 2.5em;letter-spacing: 2px;margin-top: 3vh;line-height: 1.5;}
.page_title.txt_center p{text-align: center;margin-top: 2vh;}

.F1-box2{background-color: #1d1d1d;}
.F1-box2 .F1-section{display: flex;justify-content: space-between;}
.F1-box2 li{background-color: #171717;}
.F1-box2 img{width: 100%;height: 100%;object-fit: contain;}
.F1-box2-left{width: 62.7%;display: flex;flex-direction: column;justify-content: space-between;}
.F1-box2-left-b{display: flex;justify-content: space-between;}
.F1-box2-left-b li:last-child{margin-left: 16px;}
.F1-box2-left-t,
.F1-box2-right li:first-child{margin-bottom: 16px;}
.F1-box2-right{width: calc(37.3% - 16px);display: flex;flex-direction: column;justify-content: space-between;}
.F1-box2-right li{width: 100%;height: 100%;}

.F1-box3 img{width: 100%;}

.F1-box4 img{width: 100%;}
.F1-box4-pic{display: flex;justify-content: space-between;}
.F1-box4-pic img{width: 100%;height: 100%;}
.F1-box4-pic .pic{width: 59%;}
.F1-box4-pic ul{width: calc(41% - 14px);display: flex;flex-direction: column;justify-content: space-between;}
.F1-box4-pic ul li{height: calc(50% - 7px);}

.F1-box5{padding: 5vh 0;display: flex;}
.F1-box5 .txt{width: 56.5%;padding: 10vh 0 5vh;}
.F1-box5 .pic{width: 43.5%;}
.F1-box5 .pic img{width: 100%;}
.F1-box5 ul li{color: #4a8dff;}
.F1-box5 ul li:not(:first-child){display: inline-block;margin-top: 3vh;}
.F1-box5 ul li:last-child{margin-left: 50px;}
.F1-box5 ul li b{font-size: 4em;display: block;line-height: 1;}
.F1-box5 ul li span{font-size: 1.8em;font-weight: bold;}

.F1-box6{background: url(../images/product-page/F1/box-6.png) no-repeat left bottom/contain;display: flex;justify-content: flex-end;margin-top: 5vh;}
.F1-box6 .txt{width: 38%;padding: 8.5vh 0;}
.F1-box6 ul{display: flex;}
.F1-box6 ul li{color: #4a8dff;}
.F1-box6 ul li:first-child{margin-right: 50px;}
.F1-box6 ul li b{font-size: 4em;display: block;}
.F1-box6 ul li span{font-size: 1.8em;font-weight: bold;}

.F1-box7{position: relative;}
.F1-box7 img{width: 100%;}
.F1-box7 .page_title{position: absolute;top: 4vh;left: 50%;transform: translateX(-50%);}

.F1-box8{position: relative;display: flex;justify-content: flex-end;margin: 3.7vh auto;background-color: #000;}
.F1-box8 .page_title{position: absolute;top: 50%;left: 4%;transform: translateY(-50%);width: 50%;}
.F1-box8 .pic{width: 69%;}
.F1-box8 .pic img{width: 100%;}

.F1-box9{background-color: #000;padding-top: 4vh;margin-bottom: 4vh;}
.F1-box9 .F1-section{display: flex;justify-content: space-between;}
.F1-box9 .pic{width: 31%;}
.F1-box9 .pic img{width: 100%;}
.F1-box9 .page_title{width: 60%;display: flex;flex-direction: column;justify-content: center;align-items: flex-start;}

.F1-config-title{font-size: 3.4em;color: #fff;padding-bottom: 2vh;margin-bottom: 4vh;border-bottom: 1px solid rgba(255,255,255,.3);}
.F1-config .list{display: flex; flex-wrap: wrap;justify-content: space-between;}
.F1-config .list li{width: calc((100% - 48px) / 5); border: 2px solid rgba(255,255,255,.3); border-radius: 10px; display: flex; flex-wrap: wrap; align-items: center;padding: 15px; margin-bottom: 2.1vw;color: rgba(255,255,255,.7); }
.F1-config .list li:last-child{ width: 100%;margin-right: 0;}
.F1-config .list li .icon img{ max-width: 34px;max-height: 34px;margin-right: 14px;}
.F1-config .list li .text{ flex: 1;}
.F1-config .list li .text .title{ font-size: 1.4em;}
.F1-config .list li .info{ font-size: 1.3em;margin-top: 10px;}
.F1-config .list li .info p{ text-align: left;}
.F1-config .tips{padding: 10px 0; border-bottom: 2px solid rgba(255,255,255,.7); font-size: 1.2em; color: #fff; text-align: right;}

@media screen and (max-width: 1440px){
    .F1-wrapper{width: 92%;}
}

@media screen and (max-width: 1366px){
    
}

@media screen and (max-width: 1280px){
    .F1-config-title,
    .page_title h3{font-size: 2.8em;}
    .page_title p{font-size: 1.8em;}

    .F1-config .list li{width: calc((100% - 24px) / 3)}
}

@media screen and (max-width: 1140px){
    .F1-section{width: 92%;}

    .F1-box1{height: 100vw;padding-top: 120px;}
    .F1-box1 .txt h1{font-size: 4em;letter-spacing: 2px;}
    .F1-box1 .txt p{font-size: 2.8em;letter-spacing: 0;}
    .F1-box1 .txt p span{display: block;}
    
    .F1-box5{align-items: flex-end;}
    .F1-box5 .txt{padding: 5vh 20px 3vh 0;}
}

@media screen and (max-width: 1024px){
    .F1-box6{margin-top: 0;}
    .F1-box6 .page_title,
    .F1-box6 .page_title p{text-align: center;}
    .F1-box6 .txt{width: 100%;padding: 3vh 0 43vw;}
    .F1-box6 ul{justify-content: center;margin-top: 2.2vh !important;}
    .F1-box6 ul li b{font-size: 2.8em;}

    .F1-box7{padding-top: 5vh;background-color: #06070b;}
    .F1-box7 .page_title{white-space: nowrap;}
    
}

@media screen and (max-width: 767px){
    .F1-box1{height: 90vw;}
    .F1-box1 .txt h1{font-size: 3em;letter-spacing: 0;}
    .F1-box1 .txt p{font-size: 2.4em;}

    .F1-box2 .F1-section{flex-wrap: wrap;}
    .F1-box2-left{width: 100%;}
    .F1-box2-right{width: 100%;margin-top: 16px;flex-direction: row;justify-content: space-between;}
    .F1-box2-right li{width: calc(50% - 8px);}
    .F1-box2-right li:first-child{margin-bottom: 0;}

    .F1-box4-pic{flex-wrap: wrap;}
    .F1-box4-pic .pic{width: 100%;}
    .F1-box4-pic ul{width: 100%;margin-top: 16px;flex-direction: row;}
    .F1-box4-pic ul li{width: calc(50% - 8px);height: auto;}

    .F1-box5{flex-wrap: wrap;}
    .F1-box5 .txt{width: 100%;padding: 2vh 0;}
    .F1-box5 ul{display: flex;justify-content: space-between;margin-top: 2vh !important;}
    .F1-box5 ul li{margin: 0 !important;}
    .F1-box5 ul li b{font-size: 2.8em;}
    .F1-box5 .pic{width: 100%;}

    .F1-box8{padding: 3vh 0 0;}
    .F1-box8 .page_title h3{white-space: nowrap;}
    .F1-box8 .page_title p,
    .F1-box9 .page_title p{font-size: 1.4em;padding-bottom: 3vh;}
    .F1-box9 .pic{display: flex;flex-direction: column;justify-content: flex-end;}

    .F1-config .list li{width: calc((100% - 12px) / 2)}
    .F1-config .list li:nth-last-child(2){width: 100%;}
    .F1-config .list li:nth-last-child(2) .info{display: flex;flex-wrap: wrap;justify-content: space-between;}
}

@media screen and (max-width: 414px){
    .F1-config-title,
    .page_title h3{font-size: 2.4em;}
    .page_title p{font-size: 1.6em;}

    .F1-box1{height: 80vw;}
    .F1-box1 .txt h1{font-size: 2.8em;}
    .F1-box1 .txt p{font-size: 1.8em;}
}