diff --git a/login-modal/images/Google__G__Logo 1.png b/login-modal/images/Google__G__Logo 1.png
new file mode 100644
index 0000000..d1a63a8
Binary files /dev/null and b/login-modal/images/Google__G__Logo 1.png differ
diff --git a/login-modal/images/Googlex4.png b/login-modal/images/Googlex4.png
new file mode 100644
index 0000000..02471e6
Binary files /dev/null and b/login-modal/images/Googlex4.png differ
diff --git a/login-modal/images/check-box.svg b/login-modal/images/check-box.svg
new file mode 100644
index 0000000..79a8b3b
--- /dev/null
+++ b/login-modal/images/check-box.svg
@@ -0,0 +1,6 @@
+
diff --git a/login-modal/images/checked-box.svg b/login-modal/images/checked-box.svg
new file mode 100644
index 0000000..f1d0906
--- /dev/null
+++ b/login-modal/images/checked-box.svg
@@ -0,0 +1,6 @@
+
diff --git a/login-modal/images/checkmark.png b/login-modal/images/checkmark.png
new file mode 100644
index 0000000..998433d
Binary files /dev/null and b/login-modal/images/checkmark.png differ
diff --git a/login-modal/images/close.png b/login-modal/images/close.png
new file mode 100644
index 0000000..14fd61e
Binary files /dev/null and b/login-modal/images/close.png differ
diff --git a/login-modal/images/css_sprites.png b/login-modal/images/css_sprites.png
new file mode 100644
index 0000000..c9a1332
Binary files /dev/null and b/login-modal/images/css_sprites.png differ
diff --git a/login-modal/images/css_spritesx4.png b/login-modal/images/css_spritesx4.png
new file mode 100644
index 0000000..26d3004
Binary files /dev/null and b/login-modal/images/css_spritesx4.png differ
diff --git a/login-modal/images/facebook.png b/login-modal/images/facebook.png
new file mode 100644
index 0000000..1bbfd12
Binary files /dev/null and b/login-modal/images/facebook.png differ
diff --git a/login-modal/images/facebookx4.png b/login-modal/images/facebookx4.png
new file mode 100644
index 0000000..520adaf
Binary files /dev/null and b/login-modal/images/facebookx4.png differ
diff --git a/login-modal/images/message-circle.png b/login-modal/images/message-circle.png
new file mode 100644
index 0000000..ea9255a
Binary files /dev/null and b/login-modal/images/message-circle.png differ
diff --git a/login-modal/images/message-circlex4.png b/login-modal/images/message-circlex4.png
new file mode 100644
index 0000000..58e7c7f
Binary files /dev/null and b/login-modal/images/message-circlex4.png differ
diff --git a/login-modal/images/naver-logo.png b/login-modal/images/naver-logo.png
new file mode 100644
index 0000000..cb4e41d
Binary files /dev/null and b/login-modal/images/naver-logo.png differ
diff --git a/login-modal/images/naverx4.png b/login-modal/images/naverx4.png
new file mode 100644
index 0000000..d3040b8
Binary files /dev/null and b/login-modal/images/naverx4.png differ
diff --git a/login-modal/index.html b/login-modal/index.html
new file mode 100644
index 0000000..e30e838
--- /dev/null
+++ b/login-modal/index.html
@@ -0,0 +1,61 @@
+
+
+
+
+
+
+
+ 로그인 페이지
+
+
+
+
+
+
+
+
+ 위니브에서 여러분의 궁금증을 해결하세요! :)
+
+
+
+
+
+ 또는
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/login-modal/style.css b/login-modal/style.css
new file mode 100644
index 0000000..4db54dd
--- /dev/null
+++ b/login-modal/style.css
@@ -0,0 +1,429 @@
+@font-face {
+ font-family: 'SpoqaHanSansNeo-Regular';
+ src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SpoqaHanSansNeo-Regular.woff') format('woff');
+ font-weight: normal;
+ font-style: normal;
+}
+
+body, h1, h2, div, p, a, button {
+ margin: 0;
+ padding: 0;
+ font-family: 'SpoqaHanSansNeo-Regular', sans-serif;
+ color: #000;
+}
+
+label, input {
+ margin: 0;
+ font: inherit;
+ color: inherit;
+}
+
+a, h1, h2 {
+ font: inherit;
+ color: inherit;
+ text-decoration: none;
+}
+
+button {
+ font: inherit;
+ background-color: #fff;
+ border: 0;
+}
+
+ul, li {
+ font: inherit;
+ margin: 0;
+ padding: 0;
+ list-style-type: none;
+}
+
+/* CSS 적용 */
+
+.a11y-hidden {
+ clip: rect(1px, 1px, 1px, 1px);
+ clip-path: inset(50%);
+ width: 1px;
+ height: 1px;
+ margin: -1px;
+ overflow: hidden;
+ padding: 0;
+ position: absolute;
+}
+
+body {
+ height: 100vh;
+ display: flex;
+}
+
+section {
+ width: 520px;
+ margin: auto auto;
+ border: 1px solid #C4C4C4;
+ border-radius: 10px;
+ background-color: #fff;
+}
+
+.header {
+ width: 100%;
+ height: 58px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ position: relative;
+ border-bottom: 1px solid #C4C4C4;
+}
+
+.header h1 {
+ font-weight: 500;
+}
+
+.header button {
+ width: 16px;
+ height: 16px;
+ margin-right: 24px;
+ right: 0;
+ background: url(./images/close.png) 0 0 no-repeat;
+ background-size: cover;
+ position: absolute;
+}
+
+.header button:hover {
+ cursor: pointer;
+ background-color: rgb(239, 237, 237, 0.8);
+}
+
+.header button:focus {
+ background-color: rgb(211, 211, 211, 0.8);
+ /* box-shadow: inset 0 0px 2px 0 black; */
+}
+
+.main {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+/* 일반 로그인 부분 */
+
+.normal-login {
+ width: 100%;
+ padding: 26px 24px 30px;
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+}
+
+.normal-login h2 {
+ font-size: 20px;
+ font-weight: 500;
+ line-height: 24px;
+ margin-right: auto;
+ margin-bottom: 24px;
+}
+
+.normal-login .form {
+ width: 100%;
+ height: fit-content;
+}
+
+.form .input {
+ width: 100%;
+ height: 50px;
+ color: #767676;
+ padding-left: 16px;
+ background-color: #fff;
+ border: 1px solid #C4C4C4;
+ border-radius: 5px;
+ box-sizing: border-box;
+ margin-bottom: 10px;
+}
+
+.form .input.pw {
+ margin-bottom: 16px;
+}
+
+.form .input:hover {
+ border: 2px solid #F4492E;
+}
+
+.form .input:focus {
+ outline: 1px solid #2F80ED;
+}
+
+.normal-login .form p {
+ font-size: 14px;
+ color: #F4492E;
+ display: none;
+}
+
+.form .input:focus-visible + .id-alert {
+ margin: 6px auto 10px 4px;
+ display: block;
+}
+
+.form .input:focus-visible+ .pw-alert {
+ margin: 10px auto 12px 4px;
+ display: block;
+}
+
+.form input[type='text']:focus-visible {
+ margin-bottom: 0;
+}
+
+.normal-login .hide {
+ overflow: hidden;
+ width: 1px;
+ height: 1px;
+ clip-path: inset(50%);
+ background-color: skyblue;
+}
+
+.label-hold:hover {
+ cursor: pointer;
+}
+
+.label-hold::before {
+ display: inline-block;
+ content: '';
+ width: 22px;
+ height: 22px;
+ margin-right: 8px;
+ background-image: url(./images/check-box.svg);
+ vertical-align: top;
+}
+
+.label-hold {
+ display: inline-block;
+ vertical-align: top;
+ padding-right: auto;
+}
+
+.input-hold:focus-visible+.label-hold::before {
+ outline: 2px solid #000;
+ outline-offset: 1px;
+}
+
+.input-hold:checked+.label-hold::before {
+ background-image: url(./images/checked-box.svg);
+}
+
+.btn {
+ width: 100%;
+ height: 100%;
+ font-size: 16px;
+ font-weight: 500;
+ color: #767676;
+ border: 1px solid #767676;
+ border-radius: 5px;
+ background-color: #fff;
+ display: inline-block;
+ text-align: center;
+ line-height: 50px;
+ overflow: auto;
+}
+
+.form .member {
+ width: 472px;
+ width: 100%;
+ height: 50px;
+ font-size: 18px;
+ font-weight: 700;
+ margin: 20px 0;
+ color: #fff;
+ border: none;
+ background-color: #2F80ED;
+ overflow: hidden;
+}
+
+.form .member:hover {
+ cursor: pointer;
+}
+
+.normal-login > div{
+ color: #767676;
+ font-size: 14px;
+ font-weight: 400;
+}
+
+.normal-login > div > a:nth-child(1) {
+ position: relative;
+}
+
+.normal-login>div>a:nth-child(1)::after {
+ content: "|";
+ margin-left: 12px;
+ cursor: default;
+ position: absolute;
+}
+
+.normal-login>div>a:nth-child(2) {
+ margin-left: 24px;
+}
+
+
+/* SNS 로그인 부분 */
+
+.sns-login {
+ width: 100%;
+ padding: 0 24px 25px;
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 20px;
+}
+
+.sns-login > p {
+ width: 100%;
+ font-size: 14px;
+ font-weight: 400;
+ color: #767676;
+ text-align: center;
+ display: inline-block;
+}
+
+.sns-login > p::before {
+ content: "";
+ display: inline-block;
+ width: calc((100% - 52px)/2);
+ height: 1px;
+ margin-right: 13px;
+ vertical-align: middle;
+ background-color: #C4C4C4;
+}
+
+.sns-login > p::after {
+ content: "";
+ display: inline-block;
+ width: calc((100% - 52px)/2);
+ height: 1px;
+ margin-left: 13px;
+ vertical-align: middle;
+ background-color: #C4C4C4;
+}
+
+.sns-group {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ gap: 10px
+}
+
+.sns-group > li {
+ width: 100%;
+ height: 50px;
+}
+
+.btn::before {
+ content: "";
+ display: inline-block;
+ width: 28px;
+ height: 28px;
+ margin-left: 12px;
+ position: absolute;
+ top: calc((50px - 28px)/2);
+ left: 0;
+}
+
+.google {
+ border-color: #767676;
+ position: relative;
+}
+
+.facebook {
+ border-color: #2D9CDB;
+ position: relative
+}
+.naver {
+ border-color: #00BF18;
+ position: relative
+}
+.kakao {
+ border-color: #F2C94C;
+ position: relative
+}
+
+.google::before {
+ /* background: url('./images/css_sprites.png') -58px -10px no-repeat;
+ background-size: 96px 96px; */
+ background: url('./images/css_spritesx4.png') -58px -10px no-repeat;
+ background-size: 96px 96px;
+}
+
+.facebook::before {
+ content: "";
+ /* background: url('./images/css_sprites.png') -10px -10px;
+ background-size: 96px 96px; */
+ background: url('./images/css_spritesx4.png') -10px -10px no-repeat;
+ background-size: 96px 96px;
+}
+
+.naver::before {
+ content: "";
+ /* background: url('./images/css_sprites.png') -58px -58px;
+ background-size: 96px 96px; */
+ background: url('./images/css_spritesx4.png') -58px -58px no-repeat;
+ background-size: 96px 96px;
+}
+
+.kakao::before {
+ content: "";
+ /* background: url('./images/css_sprites.png') -10px -58px;
+ background-size: 96px 96px; */
+ background: url('./images/css_spritesx4.png') -10px -58px no-repeat;
+ background-size: 96px 96px;
+}
+
+/* ~ 최대 765px 까지 스타일 적용 */
+@media (max-height: 750px) {
+ .section {
+ max-width: 100vw;
+ width: 90vw;
+ }
+ .form {
+ display: grid;
+ grid-template-areas:
+ "id pw lg lg"
+ "idt pwt lb ch"
+ ;
+ /* grid-template-columns: 1fr 1fr 1fr; */
+ grid-template-columns: 1fr 1fr 0.2fr 1fr;
+ }
+ .normal-login .form > #input-id {
+ width: 95%;
+ margin-bottom: 0;
+ grid-area: id;
+ }
+ .normal-login .form > .id-alert {
+ grid-area: idt;
+ }
+ .normal-login .form > #input-pw {
+ width: 95%;
+ margin-bottom: 0;
+ grid-area: pw;
+ }
+ .normal-login .form > .pw-alert {
+ grid-area: pwt;
+ }
+ .normal-login .form>.member {
+ width: 90%;
+ height: 90%;
+ grid-area: lg;
+ margin: auto auto;
+ }
+ .normal-login .form > .input-hold.hide {
+ grid-area: lb;
+ }
+ .normal-login .form > .label-hold {
+ grid-area: ch;
+ }
+ .sns-login .sns-group {
+ width: 100%;
+ flex-direction: row;
+ justify-content: space-between;
+ /* flex-wrap: wrap; */
+ }
+}
\ No newline at end of file