diff --git a/004.css b/004.css
new file mode 100644
index 0000000..71c9494
--- /dev/null
+++ b/004.css
@@ -0,0 +1,303 @@
+@import url(//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css);
+
+h1,
+h2,
+p,
+input,
+form {
+ margin: 0;
+ padding: 0;
+}
+
+a {
+ color: inherit;
+ text-decoration: none;
+}
+
+input {
+ background-color: none;
+ border: 0;
+}
+
+button {
+ border: 0;
+ background-color: unset;
+}
+
+body {
+ font-family: Spoqa Han Sans Neo;
+ background-color: #ddd;
+}
+
+button:hover {
+ cursor: pointer;
+}
+/* -------- */
+
+.txt-hide {
+ overflow: hidden;
+ width: 1px;
+ height: 1px;
+ clip-path: inset(50%);
+}
+
+.login {
+ width: 520px;
+ margin: auto;
+
+ border-radius: 10px;
+ border: 1px solid #c4c4c4;
+ background: #fff;
+}
+
+header {
+ padding: 18px;
+ border-bottom: 1px solid #c4c4c4;
+}
+
+header h1 {
+ text-align: center;
+ color: #000;
+ font-size: 16px;
+ font-style: normal;
+ font-weight: 500;
+ line-height: normal;
+}
+
+.close-btn {
+ display: block;
+ background: url(./img/close.svg) no-repeat 0 0/16px;
+ width: 16px;
+ height: 16px;
+
+ float: right;
+ position: relative;
+ top: -19px;
+ left: -5px;
+}
+
+.section-login h2 {
+ font-size: 20px;
+ font-style: normal;
+ font-weight: 500;
+ line-height: 24px;
+
+ margin: 26px 24px;
+}
+
+.login-input {
+ margin: 0 15px;
+ text-align: center;
+}
+
+.login-input input {
+ width: calc(100% - 20px);
+ height: 50px;
+
+ border-radius: 5px;
+ border: 1px solid #c4c4c4;
+ background: #fff;
+ padding: 0 15px;
+ padding-top: 3px;
+ margin: 5px 0;
+ box-sizing: border-box;
+}
+
+.login-input input::placeholder {
+ color: #767676;
+ font-size: 16px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: normal;
+}
+
+.login-input p {
+ text-align: justify;
+ margin-left: 13px;
+ color: #f4492e;
+ font-size: 14px;
+ display: none;
+}
+
+input:focus {
+ outline-color: #f4492e;
+ margin: 0;
+}
+
+input:focus + p {
+ display: block;
+}
+
+input:focus + .id {
+ padding: 6px 0 10px;
+}
+
+input:focus + .false {
+ padding: 10px 0 13px;
+}
+
+.lg-continue {
+ margin: 7px 0 0 20px;
+ position: relative;
+
+ color: #767676;
+}
+
+.check_svg {
+ position: relative;
+ top: 5px;
+ margin-right: 5px;
+}
+
+.txt-hide:checked + .lg-continue .circle {
+ fill: #2f80ed;
+ stroke: #2f80ed;
+}
+
+.txt-hide:checked + .lg-continue .path {
+ fill: transparent;
+ stroke: white;
+}
+
+.lg-continue:hover {
+ cursor: pointer;
+}
+
+.txt-hide:checked + .lg-continue::after {
+ opacity: 1;
+
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+.login-btn {
+ width: 472px;
+ height: 50px;
+
+ border-radius: 5px;
+ background: #2f80ed;
+ margin: 20px 23px;
+
+ color: #fff;
+ font-size: 18px;
+ font-style: normal;
+ font-weight: 700;
+}
+
+.join {
+ margin: 0 20px;
+ display: flex;
+ justify-content: center;
+ gap: 12px;
+ align-items: center;
+}
+
+.join span {
+ color: #767676;
+}
+
+.join a {
+ color: #767676;
+ font-size: 14px;
+ font-weight: 400;
+}
+
+.join_find > a,
+.join_find > p {
+ color: #767676;
+ font-family: Spoqa Han Sans Neo;
+ font-size: 14px;
+ font-style: normal;
+ font-weight: 400;
+
+ padding: 20px 0 10px 0;
+ text-align: center;
+}
+
+.or::before,
+.or::after {
+ display: inline-block;
+ content: "";
+ background-color: #c4c4c4;
+ width: 210px;
+ height: 0.5px;
+
+ position: relative;
+ top: -4px;
+}
+
+.or::before {
+ left: -10px;
+}
+
+.or::after {
+ left: 10px;
+}
+
+.other-login {
+ margin-bottom: 20px;
+}
+
+.other-login {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 10px;
+
+ background: #fff;
+ color: #767676;
+}
+
+.other-login a {
+ width: 472px;
+ padding: 15px 0;
+ border-radius: 5px;
+ margin: 0 24px 0 24px;
+ position: relative;
+
+ text-align: center;
+}
+
+[class^="bg-icon"]::before {
+ position: absolute;
+ display: block;
+ content: "";
+ width: 28px;
+ height: 28px;
+ background-image: url(./img/css_sprites.png);
+ background-size: 96px 96px;
+ left: 10px;
+}
+
+.bg-icon_google::before {
+ background-position: -58px -12px;
+}
+
+.bg-icon_facebook::before {
+ background-position: -10px -12px;
+}
+
+.bg-icon_naver::before {
+ background-position: -58px -60px;
+}
+
+.bg-icon_kakao::before {
+ background-position: -10px -60px;
+}
+
+.bg-icon_google {
+ border: 1px solid #767676;
+}
+
+.bg-icon_facebook {
+ border: 1px solid #2d9cdb;
+}
+
+.bg-icon_naver {
+ border: 1px solid #00bf18;
+}
+
+.bg-icon_kakao {
+ border: 1px solid #f2c94c;
+}
diff --git a/004.html b/004.html
new file mode 100644
index 0000000..a16d711
--- /dev/null
+++ b/004.html
@@ -0,0 +1,67 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 위니브에서 여러분의 궁금증을 해결하세요! :)
+
+
+
+
+
+
+
+