.suntank1 { height: 100%; color: #fff; position: relative; }
.suntank1 .tit { font-weight: 600; font-size: 48px; text-align: center; position: absolute; top: 12rem; left: 0px; z-index: 9; text-transform: uppercase; width: 100%; letter-spacing: 1px; text-shadow: 2px 0px 3px rgba(0, 0, 0, 0.5)  }
.suntank1 .list ul {  position: absolute; bottom:5rem; left: 0px; right: 0px; display: flex; justify-content: center; flex-wrap: wrap; z-index: 9;  }
.suntank1 .list ul li { padding: 0px 40px; border-right: 1px solid #fff; text-align: center; color: #fff; }
.suntank1 .list ul li span { font-size: 24px; display: block; font-weight: bold; height: 56px; } 
.suntank1 .list ul li span img { display: inline-block; }
.suntank1 .list ul li span strong { font-size: 24px; }
.suntank1 .list ul li:last-child { border-right: none; padding-right: 0px; }

.suntank1 .bg { background: url('../images/suntank/sunt1.jpg') no-repeat center center; background-size: cover; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; transition: all 0.6s; 
   -webkit-transition: all 0.6s; }

#suntank1.active .bg { animation: bg 1s linear; }   

@keyframes bg {
    from {
        transform: scale(1.3);
    }
    to {
        transform: none;
    }
}



.suntank2 { display: flex; flex-direction: row; height: 100%; }
.suntank2 .afl { width: 25%; background: #fff; padding-top: 10rem; padding-left: 2rem; }
.suntank2 .afl h3 { font-size: 24px; color: #333; font-weight: 600;}
.suntank2 .afl ul { margin-top: 12px; padding-right: 60px; }
.suntank2 .afl ul li { margin-top: 20px; }
.suntank2 .afl ul li strong { font-size: 24px; display: block; color: #333; margin-bottom: 10px; }
.suntank2 .afl ul li span { font-size: 14px; display: block; margin-top: -2px; }

.suntank2 .afr { width: 75%; background: url('../images/suntank/P2.jpg') no-repeat center center; background-size: cover; height: 100%; position: relative; display: flex; justify-content: center; align-items: center; }
.suntank2 .afr .img img { width: 80%; margin: 0px auto }
.suntank2 .afr .list { position: absolute; bottom: 3rem; left: 0px; right: 0px; margin: auto; width: 75%; }
.suntank2 .afr .list dl { display: flex; flex-direction: row; justify-content: space-around; flex-wrap: wrap; }
.suntank2 .afr .list dl dt { color: #fff; padding-top: 20px; font-size: 24px; }
.suntank2 .afr .list dl dd {  text-align: center; }
.suntank2 .afr .list dl dd img { display: block; margin: 0px auto; }
.suntank2 .afr .list dl dd p { font-size: 14px; color: #fff; margin-top: 5px; line-height: 20px; }

.suntank3 { width: 100%; height: 100%; position: relative; }
.suntank3 .img { height: 70%; background: url('../images/suntank/page4.jpg') no-repeat center center; background-size:cover; }
.suntank3 .text { min-height: 30%; background: #fff; z-index: 9; position: absolute; left: 0px; width: 100%; padding: 20px 10%; bottom: 0px; display: flex; flex-direction: row; }
.suntank3 .text h3 { width: 20%; font-size: 24px; color: #1a1a1a; margin-top: 15px; line-height: 24px; text-align: center; }
.suntank3 .text h3 img { margin: 0 auto; width: 5vw; }
.suntank3 .text .list { width: 70%; margin-left: 10%; }
.suntank3 .text .list ul li { margin: 15px 0px; }
.suntank3 .text .list ul li strong { font-size: 24px; color: #1a1a1a; font-weight: 600;}
.suntank3 .text .list ul li p { font-size: 16px; line-height: 26px; }

.suntank4 { background: url('../images/suntank/sunt4.jpg') no-repeat center center; background-size: cover; width: 100%; height: 100%; display: flex; flex-direction: row; align-items: center; }
.suntank4 .img { margin-top: 5rem; width: 54%; }
.suntank4 .text { width: 30%; color: #fff; }
.suntank4 .text h3 { font-size: 32px; border-bottom: 1px solid rgba(255, 255, 255, 0.4); padding-bottom: 10px;font-weight: 600; }
.suntank4 .text ul { display: flex; flex-direction: row; flex-wrap: wrap; margin-top: 20px; }
.suntank4 .text ul li { width: 50%; margin-top: 18px; }
.suntank4 .text ul li strong { color: #ccc; font-size: 16px; }
.suntank4 .text ul li p { color: #fff; font-size: 16px; }
.suntank4 .text h6 { margin-top: 40px; }
.suntank4 .text h6 a { color: #fff; color: #333333; display: inline-block; padding: 10px 60px; border-radius: 30px; background: #fff; font-size: 16px; transition: all 0.6s; -webkit-transition: all 0.6s; }
.suntank4 .text h6 a:hover { background: #39a9ae; color: #fff; }
.suntank4 .img img {
    margin: 0 auto;
    max-width: 26vw;
}

.white-btn2 {
    display: inline-block;
    width: 150px;
    text-align: center;
    height: 40px;
    line-height: 37px;
    border-radius: 30px;
    box-sizing: border-box;
    border: 2px solid #ffffff;
    margin-top: 20px;
    transition: all .7s ease;
    font-weight: bold;
    color: #ffffff;
}

.white-btn2:hover {
    background-color: #ffffff;
    color: #000000;
}



 @media (max-width: 1600px) {

.suntank3 .text { padding: 20px 8%; }
.suntank3 .text h3 { font-size: 24px; line-height: 26px; width: 15%; }
.suntank3 .text .list { width: 85%; }
.suntank3 .text .list ul li strong { font-size: 18px; }
.suntank3 .text .list ul li p { font-size: 14px; margin-top: -5px; }
.suntank3 .text .list ul li { margin: 10px 0px; }

.suntank2 .afl h3 { font-size: 24px; }
.suntank2 .afl ul li strong { font-size: 18px; }

.suntank4 .text ul li { margin-top: 10px; }
.suntank4 .img { width: 50%; }

.suntank2 .afl { width: 46% }


 }


@media (max-width: 768px) {

.suntank1 .tit { font-size: 36px; }

.suntank1 .list ul li { padding: 0px 15px; margin-top: 20px; }
.suntank1 .list ul li span { font-size: 24px; height: 44px; }
.suntank1 .list ul li p { font-size: 14px; }


.suntank2 { flex-direction: column; position: relative; }
.suntank2 .afl { width: 100%; position: absolute; top: 50px; background: #fff; z-index: 9; padding: 0px;  padding-left: 17px;}
.suntank2 .afr { width: 100%; background: url(../images/suntank/P2.jpg) no-repeat center 150px; background-size: cover;}
.suntank2 .afl ul li strong {
    font-size: 14px;
    margin-bottom: 5px;
}
.suntank2 .afl ul li span {
    font-size: 12px;
    line-height: 18px;
}
.dg{
    margin-top: 0px;
    margin-bottom: 20px;
}
.suntank2 .afl ul li {
    margin-top: 9px;
}
.suntank2 .afr .list dl dt { width: 100%; text-align: center; margin-bottom: 15px; font-size: 18px; font-weight: bold; }
.suntank2 .afr .list dl dd { width: 19%; margin: 0px 3%; }
.suntank2 .afr .list { width: 90%; }

.suntank3 .img { height: 100%; }

.suntank3 .text h3 { width: 100%; font-size: 20px; }
.suntank3 .text .list { width: 100%; }
.suntank3 .text { flex-direction: column; }
.suntank3 .text h3 br { display: none;  }
.suntank3 .text .list ul li p { line-height: 24px; margin-top: 5px; }
.suntank3 .text { padding: 10px; background: rgba(255, 255, 255, 0.9); }
.suntank4 { display: block; }
.suntank3 .text .list ul li strong { font-size: 16px; }
.suntank4 .text { width: 90%; margin: 0px auto; }
.suntank4 .text h3 { font-size: 20px; font-weight: bold; padding-bottom: 0px;}
.suntank4 .text ul li { margin-top: 0px; width: auto; min-width: 33.3%; margin-right: 12px;}
.suntank4 .text ul li p { font-size: 14px; }
.suntank4 .text ul li strong { font-size: 14px; }
.suntank4 .text ul { margin-top: 10px; }
.suntank4 .text h6 { margin-top: 20px; }
.suntank4 .text h6 a { padding: 8px 30px; font-size: 14px; }
.suntank4 .img { width: 70%; }
.suntank4 { display: flex; align-items: center; flex-direction: column; }


.suntank3 .text h3 {
    text-align: left;
}
.suntank3 .text h3 img {
    width: 60px;
    margin: 0;
    margin-bottom: 20px;
}
.suntank3 .text .list {
    margin-left: 0;
}
.suntank4 .img img {
    max-width: 80%;
    margin-bottom: 20px;
}

.suntank1 .tit{top: 10rem;}
.white-btn2 {
    margin-left: 20px;
}
}