@charset "UTF-8";

*{margin: 0; padding: 0;}


.wrap{height:100vh; min-height:800px; position:relative;font-family: 'Noto Sans KR', sans-serif; font-weight:1.3; font-weight: 300; word-break:keep-all;}
.border{width: 740px; border: 3px solid #F5F5F5; border-radius:20px; margin: 0 auto; padding: 2%;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);}
.item01{display: flex; flex-direction: row; margin-bottom: 5%;}
.item01 img{width:157px;}
.item01 .top_text{margin-left:5%; display: flex; flex-direction: column; justify-content: flex-end; position:relative;}
.item01 .top_text h1{font-size: 36px; font-weight: 700; letter-spacing: -0.1em;}

.item01 .top_text::after{content:""; width: 40px; height:53px; background:url(../image/icon02.png) 100% no-repeat; background-size:100%; position: absolute; top: 0;right:0;}





.item02{background: #f5f5f5; padding: 2.5% 5%; color: #000; }
.item02 p{margin-bottom: 1%; }
.item02 p:nth-child(1){font-size: 20px; }
.item02 p:nth-child(3){margin-bottom: 2%;}
.item02 p:nth-child(4){font-size: 16px; color: #000; ; margin-bottom: 0; letter-spacing: -0.1em;}


.item03{ text-align: center; margin: 4% 0; display: flex; flex-direction: row; justify-content: center; }
.item03 a{width: 180px; margin: 0 1%; padding: 13px 25px 15px 25px; background: #000; font-size:22px; font-weight:700; border-radius: 35px; color: #fff; letter-spacing: -0.1em; text-decoration: none; display: flex; align-items: center; justify-content: space-around;}
.item03 a img{margin-right:1%;}

.item04{text-align:center; letter-spacing: -0.09em;}





@media only screen and (max-width: 1024px) {
    .border{width:80%;}
    .item01 .top_text h1{font-size: 30px;}
    .item01 .top_text h2{font-size: 26px; }
    .item02 p:nth-child(1){font-size: 20px; }
    .item02 p:nth-child(4){font-size: 16px;}
    .item03 a{ font-size:18px; width: 140px; padding: 6px 14px; letter-spacing: -0.09em;}
}
@media only screen and (max-width: 768px) {
    .border{padding:4%;}

    .item01 .top_text::after{display:none;}
    .item02{padding: 7% 5%; }

    .item02 br{display: none;}
    .item02 p{line-height:1.5; margin-bottom: 3%;}
    .item01{flex-direction:column;}
    .item01 img{margin:0 auto; width: 30%; margin-bottom:5%;}
    .item01 .top_text{margin-left:0;}
    .item01 .top_text h1{font-size: 36px;}
    .item01 .top_text h2{font-size: 32px; line-height:1.2;}
    .item02 p:nth-child(1){font-size: 18px; }
    .item02 p:nth-child(4){font-size: 16px;}

    .item03{margin: 8% 0;}
    .item03 a{ font-size:16px; padding: 13px 25px 15px 25px; width: 120px;letter-spacing: -0.09em; }

    .item04{font-size:20px; letter-spacing: -0.09em;}


}
@media only screen and (max-width: 480px) {
    .item01 img{ width: 40%;}
    .item01 .top_text h1{font-size: 32px;}
    .item01 .top_text h2{font-size: 24px; line-height:1.2;}
    .item02 p:nth-child(1){font-size: 18px; }
    .item02 p:nth-child(4){font-size: 16px;}
    .item03{ align-items:center; margin:4% 0;}
    .item03 a:first-child img{display:none;}
    .item03 a:nth-child(2) span{display:none;}

    .item04{font-size:14px;}

}