.hompy_portfolio_con { max-width:1300px; margin:0 auto; padding:50px 0; }
.hompy_portfolio_con * { font-family: 'Noto Sans KR';font-style: normal;  box-sizing:border-box; } 
.hompy_portfolio_con h1 { font-size:20px; margin-bottom:10px;  color:#0d1f47; font-weight:bold; }
.hompy_portfolio_con h2 { font-size:20px; margin-bottom:10px; position:relative; padding-left:20px; margin-top:50px; color:#436edd; font-weight:bold; line-height:23px; }
.hompy_portfolio_con h2:after { position:absolute; left:0; top:15px; width:10px; height:3px; background:#aaa; display:block; content:""; }

@media (max-width: 800px) {
.hompy_portfolio_con { max-width:95%; margin:0 auto; padding:0px 0 30px 0; }
.hompy_portfolio_con h2 { font-size:20px; margin-bottom:5px; position:relative; padding-left:20px; margin-top:20px; color:#436edd; font-weight:bold; }
}

/*포트폴리오*/
.portfolio { display:flex; flex-wrap:wrap; justify-content:space-between; }
.portfolio > div  { width:calc(100% / 5 - 20px); margin:10px 0 30px; }
.portfolio  > div .img { width:100%; height:350px; overflow:hidden;margin-bottom:10px;  border:1px solid #ccc; position:relative;  }
.portfolio  > div:hover .img { border:1px solid #0d1f47; position:relative; overflow:hidden; }
.portfolio  > div:hover .s_s { width:106%; object-fit:cover; margin-left:-3%; margin-top:-3%;}
.portfolio > div .s_s {  width:100%; margin-bottom:10px; }
.portfolio > div span { font-size:16px; display:block; text-align:center; }
.portfolio > div p { font-size:0.6rem; text-align:center; color:#999; }
.portfolio > div p strong { font-size:0.6rem; font-weight:bold; margin-left:10px; color:#436edd; }
.portfolio > div .txt { background:#eee; border-radius:10px; padding:0.5rem 0; margin-top:10px }
.portfolio > div:hover .txt { background:#222; color:#fff; }

a.btn_user_sample { background:rgba(0,0,0,0.5); display:flex; justify-content:center; align-items:center; border-radius:15px; height:30px; width:30px; position:absolute; right:10px; bottom:10px; }
a.btn_user_sample  img { width:50%; }

@media (max-width: 800px) {
.portfolio  > div  { width:calc(100% / 2 - 5px); margin:10px 0 10px; position:relative; }
.portfolio  > div .img { width:100%; height:auto; max-height:200px;  margin-bottom:8px; }
.portfolio > div span { font-size:12px; display:block; text-align:center; }
.portfolio > div .txt { background:#eee; border-radius:10px; padding:6px 0; margin-top:0px }
a.btn_user_sample { background:rgba(0,0,0,0.5); display:flex; justify-content:center; align-items:center; border-radius:15px; height:30px; width:30px; position:absolute;}
a.btn_user_sample  img { width:50%; }
}

/*포트폴리오2*/
.portfolio2 { display:flex; flex-wrap:wrap; margin-left:-30px; }
.portfolio2  > div  { width:calc(100% / 4 - 30px); margin:10px 0 30px 30px; }
.portfolio2  > div .img { width:100%; height:350px; overflow:hidden;margin-bottom:10px;  border:1px solid #ccc; position:relative; }
.portfolio2  > div:hover .img { border:1px solid #0d1f47; position:relative; overflow:hidden; }
.portfolio2  > div:hover .s_s { width:106%; object-fit:cover; margin-left:-3%; margin-top:-3%;}

.portfolio2 > div .s_s {  width:100%;   }
.portfolio2 > div span { font-size:16px; display:block; text-align:center; white-space:nowrap; width:100%; overflow:hidden; text-overflow:ellipsis; }
.portfolio2 > div p { font-size:14px; text-align:center; color:#999;  display:block; text-align:center; white-space:nowrap; width:100%; overflow:hidden; text-overflow:ellipsis; }
.portfolio2 > div p strong { font-size:16px; font-weight:bold; margin-left:10px; color:#436edd; }
.portfolio2 > div .txt { background:#eee; border-radius:10px; padding:0.5rem; margin-top:0.2rem; }
.portfolio2 > div:hover .txt { background:#222; color:#fff; }
.portfolio2 > div:hover p { color:#fff; }
a.btn_user_sample2 { background:rgba(0,0,0,0.5); display:flex; justify-content:center; align-items:center; border-radius:15px; height:30px; width:30px; position:absolute; right:10px; bottom:10px;  }
a.btn_user_sample2  img { width:50%; }

@media (max-width: 800px) {
.portfolio2 {   justify-content:space-between; margin-left:0; }
.portfolio2  > div  { width:calc(100% / 2 - 5px); margin:10px 0px 10px; position:relative;  }
.portfolio2  > div .img { height:auto; max-height:200px; margin-bottom:8px;  }
.portfolio2 > div span { font-size:12px; display:block; text-align:center; white-space:nowrap; width:100%; overflow:hidden; text-overflow:ellipsis; line-height:16px; }
.portfolio2 > div p { font-size:12px; text-align:center; color:#999;  display:block; text-align:center; white-space:nowrap; width:100%; overflow:hidden; text-overflow:ellipsis; line-height:16px;  }
.portfolio2 > div .txt { background:#eee; border-radius:10px;  padding:6px 5px; margin-top:0px ; }
a.btn_user_sample2 { background:rgba(0,0,0,0.5); display:flex; justify-content:center; align-items:center; border-radius:17px; height:34px; width:34px; position:absolute;  right:5px; bottom:5px;   }
a.btn_user_sample2  img { width:50%; }
}




.portfolio3 { display:flex; flex-wrap:wrap; justify-content:space-between;  margin-left:-40px; }
.portfolio3  > div  { width:calc(100% / 3 - 40px); margin:10px 0 30px 40px; }
.portfolio3 > div .s_s {  width:100%; margin-bottom:10px; }
.portfolio3 > div span { font-size:14px; display:block; text-align:center; }
.portfolio3 > div p { font-size:14px; text-align:center; color:#999; }
.portfolio3 > div p strong { font-size:14px; font-weight:bold; margin-left:10px; color:#436edd; }
.portfolio3 > div .txt { background:#eee; border-radius:10px; padding:10px 0; margin-top:10px; }


a.btn_user_sample3 { border:0px solid #436edd; background:#ff9600; color:#fff; display:flex; justify-content:center; padding:0.3rem 0 0.4rem; align-items:center; border-radius:10px; font-size:16px; }
a.btn_user_sample3  img { width:16px; margin-left:0.5rem; margin-top:0.07rem; }
.portfolio3  > div:hover a.btn_user_sample3 { background:#222; }

@media (max-width: 800px) {
.portfolio3 { display:flex; flex-wrap:wrap; justify-content:space-between; margin-left:0; }
.portfolio3  > div  { width:calc(50% - 5px); margin:10px 0 20px; }
.portfolio3 > div .s_s {  width:100%; margin-bottom:10px; }
.portfolio3 > div span { font-size:0.65rem; display:block; text-align:center;  letter-spacing:-1px;  }
.portfolio3 > div p { font-size:0.6rem; text-align:center; color:#999; }
.portfolio3 > div p strong { font-size:0.6rem; font-weight:bold; margin-left:0.1rem; color:#436edd; }
.portfolio3 > div .txt { background:#eee; border-radius:10px; padding:6px 5px;  margin-top:7px; }
a.btn_user_sample3 {  padding:5px;  font-size:12px; border-radius:5px; }
a.btn_user_sample3  img { width:0.6rem; }
.portfolio3 > div .txt { border-radius:5px; }
}



.section2_guide { background:#e6eef8; padding:15px 20px; border-radius:10px; font-size:14px; margin:0.5rem 0 ;}

@media (max-width: 800px) {
.section2_guide { background:#e6eef8; padding:15px 20px; border-radius:10px; font-size:12px; margin:0.5rem 0 ; line-height:17px; }
}


.prepare li { margin-bottom:10px; }
.prepare li span { display:block; font-size:16px; }
.prepare li a { color:#999; font-size:14px; }