@charset "utf-8";

#section{width: 60%;height: 1000px;margin: 0 auto;}

/* banner */
.banner-bg{background: url(../images/main-bg.jpg) no-repeat 100%/100%;width: 100%;height: 100%;}
.banner-text{width: 400px;height: 100px;margin: 0 auto;}
.banner-text>ul{width: 100%;height: 100px;padding-top: 63px;}
.banner-text>ul>li{font-size: 28px;font-family: "KTfontBold";text-align: center;}
.banner-text>ul>li:first-child{font-size: 23px;}

/* section */
.section-wrap{width: 100%;margin: 0 auto;height: 1000px;}
.section01{width: 100%;height: 160px;margin-top: 30px;}
.section01-box{width: 100%;height: 50px;}
.section01-box>.step-box{width: 100%;margin-bottom: 30px;height: 50px;background: linear-gradient(to right, rgb(255, 255, 255), #01A69F);border-radius: 30px;}
.section01-box>.step-box>ul{width: 80%;height: 50px;display: flex;justify-content: space-between;margin: 0 auto;}
.section01-box>.step-box>ul>li{text-align: center;font-size: 16px;font-family: "KTfontBold";height: 50px;padding-top: 14px;}
.section01-box>.step-icon{width: 100%;height: 110px;}
.section01-box>.step-icon>ul{width: 100%;height: 110px;display: flex;justify-content: space-between;margin: 0 auto;}
.section01-box>.step-icon>ul>li{width: 270px;font-size: 16px;font-family: "KTfontMedium";text-align: center;line-height: 35px;}
.section01-box>.step-icon>ul>li>img{width: 80px;height: 80px;display: block;margin: 0 auto;}

.section02{width: 100%;height: 200px;margin-top: 100px;margin-bottom: 60px;}
.section02>.phone-box{width: 80%;height: inherit;margin: 0 auto;}
.section02>.phone-box>ul{display: flex;justify-content: space-between;}
.section02>.phone-box>ul>li{width: 400px;height: 200px;}

.section03{width: 70%;height: 50px;margin: 0 auto;}
.btn>button{width: 100%;height: 50px;background-color: #01A69F;color: #e4eee9;font-family: "KTfontBold";border-radius: 10px;font-size: 18px;cursor: pointer;}
.btn>button:hover{background-color: #e4eee9;transition: .2s;color: #01A69F;}

.section04{width: 100%;height: auto;margin-top: 60px;margin-bottom: 50px;}
.section04>div{width: 60%;height: 30px;}
.section04>div>p{width: 280px;height: 30px;background-color: #ddd;font-family: "KTfontBold";font-size: 16px;padding-top: 5px;}
.section04>div>img{width: 23px;height: 20px;display: inline-block;margin-right: 10px;margin-left: 10px;float: left;margin-top: 5px;}
.section04>.text-box{width: 95%;background-color: #eee;height: auto;margin: 0 auto;}
.section04>.text-box>div{width: 95%;height: auto;margin: 0 auto;padding-top: 18px;padding-bottom: 20px;}
.section04>.text-box>div>h4{font-family: "KTfontBold";color: #222;font-size: 15px;}
.section04>.text-box>div>ul{width: 100%;margin: 0 auto;}
.section04>.text-box>div>ul>li{width: 100%;height: auto;font-family: "KTfontMedium";color: #222;line-height: 28px;font-size: 15px;}
.section04>.text-box>div>ul>.red{color: #ED1B23;font-family: "KTfontBold";}
.section04>.text-box>div>ul>.bold{font-family: "KTfontBold";}

@media screen and (max-width: 1450px) {
    #section{width: 80%;}
    .section-box{width: 80%;}
}
@media screen and (max-width: 1250px) {
    #section{height: 1400px;}
    .section02{height: 500px;margin-top: 120px;}
    .section02>.phone-box{width: 100%;}
    .section02>.phone-box>ul{display: block;margin: 0 auto;width: 100%;}
    .section02>.phone-box>ul>li{margin: 0 auto 60px;}
    .section04{height: 450px;}
}
@media screen and (max-width: 850px) {
    .section-box{width: 70%;}
    .section-box1{display: block;height: 320px;}
    .section-box1>.cont{width: 100%;}
    .section01-box>.step-icon>ul>li{font-size: 13px;}
    .section01-box>.step-icon>ul>li>img{width: 60px;height: 60px;}
}
@media screen and (max-width: 650px) {
    #section{height: 1500px;}
}
@media screen and (max-width: 600px) {
    .section01-box>.step-box{height: 40px;}
    .section01-box>.step-box>ul>li{padding-top: 10px;}
    .section02{margin-top: 70px;}
}
@media screen and (max-width: 499px) {
    #section{height: 1400px;}
    .section01-box>.step-box{width: 100%;margin-bottom: 30px;height: 40px;}
    .section01-box>.step-box>ul{width: 85%;height: 35px;}
    .section01-box>.step-box>ul>li{font-size: 13px;height: 35px;padding-top: 12px;}
    .section01-box>.step-icon>ul>li{font-size: 12px;width: auto;}
    .section01-box>.step-icon>ul>li>img{width: 40px;height: 40px;}
    .section02{height: 380px;}
    .section02>.phone-box>ul>li{width: auto;height: 150px;text-align: center;}
    .section02>.phone-box>ul>li>img{width: auto;height: 150px;}
    .section04>div{width: 60%;height: 30px;}
    .section04>div>p{width: 200px;font-size: 14px;}
    .section04>div>img{width: 18px;height: 15px;margin-top: 7px;}
    .section04>.text-box>div>h4{font-size: 13px;}
    .section04>.text-box>div>ul>li{font-size: 13px;line-height: 25px;}
    .banner-text{width: 85%;}
    .banner-text>ul{width: 100%;height: 100px;padding-top: 70px;}
    .banner-text>ul>li{font-size: 24px;}
    .banner-text>ul>li:first-child{font-size: 20px;}
    .section-box2 .box2-img-850>img{display: none;}
    .section-box2 .box2-img-550>img{display: block;}
    .btn>button{height: 40px;border-radius: 10px;font-size: 14px;}
}
@media screen and (max-width: 400px) {
    .section02{height: 350px;}
    .section02>.phone-box{width: 90%;}
    .section02>.phone-box>ul>li{width: auto;height: 135px;text-align: center;}
    .section02>.phone-box>ul>li>img{width: auto;height: 135px;}
    .banner-text{width: 85%;}
    .banner-text>ul{width: 100%;height: 100px;padding-top: 70px;}
    .section-box2 .box2-img-850>img{display: none;}
    .section-box2 .box2-img-550>img{display: block;}
    .btn>button{height: 40px;border-radius: 10px;font-size: 14px;}
}
@media screen and (max-width: 280px) {
    #section{height: 1250px;}
    .banner-text{width: 90%;}
    .banner-text>ul{width: 100%;height: 100px;padding-top: 70px;}
    .banner-text>ul>li{font-size: 22px;}
    .banner-text>ul>li:first-child{font-size: 18px;}
    .section01{height: 110px;}
    .section01-box>.step-box{margin-bottom: 15px;height: 30px;}
    .section01-box>.step-box>ul{width: 90%;height: 30px;}
    .section01-box>.step-box>ul>li{font-size: 12px;height: 30px;padding-top: 8px;}
    .section01-box>.step-icon>ul>li{font-size: 12px;width: 80px;line-height: 18px;}
    .section01-box>.step-icon>ul>li>img{width: 40px;height: 40px;margin-bottom: 5px;}
    .section02{height: 270px;}
    .section02>.phone-box{width: 95%;}
    .section02>.phone-box>ul>li{width: auto;height: 105px;text-align: center;}
    .section02>.phone-box>ul>li>img{width: auto;height: 105px;}
    .section03{width: 90%;}
    .btn>button{font-size: 13px;padding-top: 2px;}
    .section04>div>p{width: 190px;font-size: 14px;}
    .section04>div>img{margin-right: 8px;margin-left: 8px;}
    .section04>.text-box{width: 100%;}
    .section04>.text-box>div>h4{font-size: 12px;}
    .section04>.text-box>div>ul>li{font-size: 12px;line-height: 24px;}
}