@import url("https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@1.0/nanumsquare.css");

h2 {font-size:55px;line-height:60px;font-weight:800;font-family: 'NanumSquare', sans-serif;text-align:center;}
h3 {font-size:40px;font-family: 'NanumSquare', sans-serif;text-align:center;}
h3 span {font-family: "Noto Sans KR", sans-serif;}

.section02 {overflow:auto; width:100%; padding:80px 0; padding-bottom:100px; background:#ffffff;}
.section03 {overflow:auto; width:100%; padding:80px 0; padding-bottom:100px; background:#f6f6f6;}

/* Project */
.project_list {padding-top:80px;}
.project_list:after {display: block; clear: both; *zoom: 1; content: '';}
.project_list li {float: left; width: 23.5%; margin: 0 0 2% 2%; transition: all 0.5s ease-in-out;}
.project_list li:nth-child(4n + 1) {margin: 0 0 2% 0;}
.project_list li a {position: relative; display: block; width: 100%; height: auto;}
.project_list li .img_box img {max-width: 100%;}
.project_list li .img_box p {position: absolute; text-align:center; font-family: 'NanumSquare', sans-serif;font-size: 2.1rem; letter-spacing:-3px; line-height:45px; left:50%; top:50%; transform:translate(-50%, -50%); font-weight: 800; color: #fff;}
.project_list li:hover .img_box p {display:none;}
.project_list li .hover_box {visibility: hidden; opacity: 0; position: absolute; top: 0; left: 0; right: 0; bottom: 0; box-sizing: border-box; width: 100%; height: 100%; padding: 80px 30px 30px 30px; color: #fff; background-color: rgba(0, 0, 0, 0.8); transition: all 0.5s ease-in-out;}
.project_list li .hover_box p {font-family: 'NanumSquare', sans-serif;font-size: 1.8rem; font-weight: 800; color: #fff;padding-bottom:20px;}
.project_list li .hover_box p:after {content: ''; display: block; position: absolute; height:2px; width:25px; background:#ff1000;top:120px; left:30px;}
.project_list li .hover_box span {font-family: 'NanumSquare', sans-serif; font-size: 0.9rem; line-height:26px;letter-spacing:0.5; font-weight:500; color: #fff; opacity: 0.7;}
.project_list li .hover_box .btn_view {position: absolute; right: 30px; bottom: 30px; width: 62px; height: 24px; line-height: 22px; font-family: 'NanumSquare', sans-serif;font-size: 0.775rem; font-weight: 700; color: #fff; border-bottom: 1px solid #ffffff; text-align: left;}
.project_list li .hover_box .btn_view:before {display: block; position: absolute; bottom: 4px; right: 0; transform: rotate(35deg); width: 15px; height: 1px; background-color: #ffffff; content: '';}
.project_list li:hover {transform: scale(1); box-shadow: 5px 10px 18px rgba(30, 36, 47, 0.4);}
.project_list li:hover .hover_box {visibility: visible; opacity: 1;}
.project_list .no_data {margin: 150px 0; font-family: 'Muli'; font-size: 1.25rem; font-weight: 600; color: #000; text-align: center;}