.wrep {
    width: 100%;
    margin-bottom: 40px;
    background:url(bg.png) no-repeat center 0 / 100%;
}
.logo{padding:120px 0 0 0; text-align: center;}
.logo img {max-width: 70%;}

ul.intro{margin: 80px auto 0 auto; display: flex; justify-content: center;	}
ul.intro li{    
    margin: 0 17px;
    box-sizing: border-box;
    padding: 40px 50px;
    display: flex;
    border: 1px solid #ddd;
    border-radius: 5px 40px 40px 40px;
    background: #fff;
    box-shadow: 5px 10px 20px rgb(0 0 0 / 5%);
    flex-direction: column;
    align-content: center;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
}
ul.intro li:hover{outline:3px solid #ef6890; border-radius: 5px 40px 40px 40px; }
ul.intro li .tit{
    font-family: 'SEBANG_Gothic';
    font-size: 2.6rem;
    display: flex;
    font-weight: 600;
    color: #333;
    width: 100%;
    height: 62px;
    line-height: 1.2;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    text-align: center;
}
ul.intro li .icon{margin-top: 15px;}
ul.intro li .btn{
    display: block;
    margin-top: 20px;
    background: #333;
    padding: 8px 40px;
    height: 40px;
    width: 130px;
    line-height: 26px;
    color: #fff;
    border-radius: 60px;
    font-family: 'SEBANG_Gothic';
}
ul.intro li .btn:hover{background: #e54861;}
.footr{text-align: center; font-size:16px; color:#333333;  padding-top: 50px; padding-bottom: 40px; border-top: 1px solid #ededed;}

.sub_area {
    width: 80%;
    margin: 50px auto; 
    padding-left: 200px;
}
.red{
    color: #e60505;
    font-weight: bold;
}
.intro-box{
    border: 1px solid #ddd;
    border-radius: 5px 40px 40px 40px;
    background: #fff;
    box-shadow: 5px 10px 20px rgb(0 0 0 / 5%);
    display: block;
    width: 100%;
    max-width: 1280px;
    margin: 25px auto;
    height: 53px;
    text-align: center;
    line-height: 49px;
    font-family: 'SEBANG_Gothic';
    word-break: keep-all;
}
.intro-box .br{display: none;}
.intro-box .notice{font-weight: bold; color:#e54861;}

/*.sub_area:before{content: ""; display: block; clear: both; background: url(water_icon.png)no-repeat; width: 195px; height: 185px;    position: absolute; top: 0;left: 0;}*/

@media screen and (max-width: 1020px){
    ul.intro{margin: 40px auto 0 auto; }
    .logo{padding:80px 0 0 0;}
    .footr{font-size:14px;  padding-top:50px;}
    ul.intro{flex-wrap: wrap;}
    ul.intro li{
        width:100%;
        padding: 30px 38px;
        margin-bottom: 20px;
    }
    .wrep{height: auto;}
    .intro-box{
        height: auto;
        line-height: 25px;
        padding: 20px;
    }
    .intro-box .br{display: block;}
}