diff --git a/css/style.css b/css/style.css
new file mode 100644
index 0000000..5821c3d
--- /dev/null
+++ b/css/style.css
@@ -0,0 +1,246 @@
+@font-face {
+ font-family: 'Spoqa Han Sans Neo';
+ src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SpoqaHanSansNeo-Regular.woff') format('woff');
+ font-weight: normal;
+ font-style: normal;
+}
+h1,
+input,
+h2,
+p,
+input,
+button{
+ margin: 0;
+ padding: 0;
+ border:0;
+}
+body{
+ width: 100%;
+ min-height: 100vh;
+ margin:0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: #F2F2F2;
+ font-family: Spoqa Han Sans Neo;
+}
+ul{
+ list-style: none;
+ margin: 0;
+ padding: 0;
+}
+main{
+ width: 520px;
+ background-color: #FFF;
+ border-radius: 10px;
+ border: 1px solid var(--c-4-c-4-c-4, #C4C4C4);
+ background: #FFF;
+}
+.title{
+ position: relative;
+}
+.title h1{
+ margin: 20px auto 18px auto;
+ text-align: center;
+ color: #000;
+ font-weight: 500;
+ border-radius: 10px;
+}
+.title .exit{
+ width: 16px;
+ height: 16px;
+ position: absolute;
+ background: url(../images/button_exit.svg) 0 0 /16px no-repeat ;
+ right:24px;
+ top:2px;
+ cursor: pointer;
+}
+.title div{
+ width: 520px;
+ height: 1px;
+ background: #C4C4C4;
+}
+.login{
+ padding-left: 24px;
+}
+
+.login h2{
+ margin-top: 26px;
+ margin-bottom: 13px;
+ color: #000;
+ font-size: 20px;
+ font-weight: 500;
+ line-height: 24px;
+}
+.login input#id,
+.login input#pw {
+ width: 472px;
+ height: 50px;
+ border-radius: 5px;
+ border: 1px solid var(--c-4-c-4-c-4, #C4C4C4);
+ background: #FFF;
+ padding-left: 16px;
+ margin-top:10px;
+ box-sizing: border-box;
+}
+.login input#id{
+ border: 2px solid #F4492E;
+}
+.login .warning{
+ margin-top: 6px;
+ color: #F4492E;
+ font-size: 14px;
+}
+
+.login .keep-login{
+ display: flex;
+ margin-top:13px;
+}
+.login .keep-login input{
+ width: 22px;
+ height: 22px;
+}
+.login .keep-login .txt-hide{
+ overflow: hidden;
+ width: 1px;
+ height: 1px;
+ clip-path: inset(50%);
+
+}
+.labl-hold::before{
+ display: inline-block;
+ content: "";
+ width: 22px;
+ height: 22px;
+ margin-right: 10px;
+ background: url("../images/login-not-checked.svg") 0 0 / 22px no-repeat;
+ vertical-align: -5px;
+}
+.login .keep-login input:focus-visible +
+.labl-hold::before {
+ outline: 2px solid #2F80ED ;
+ outline-offset: 2px;
+}
+.labl-hold::after{
+ content: "";
+ position: absolute;
+ left: 20px;
+ width: 22px;
+ height: 22px;
+ background: url("../images/login-checked.svg") 0 0 / 22px no-repeat;
+ opacity: 0;
+}
+.login .keep-login input:checked +
+.labl-hold::after {
+ left: 0;
+ top:0.5px;
+ opacity: 1;
+}
+
+
+.labl-hold{
+ color: var(--767676, #767676);
+ font-size: 16px;
+ font-weight: 500;
+ margin-left:8px;
+ position: relative;
+}
+.login .login-button{
+ margin-top: 21px;
+ border-radius: 5px;
+ background: #2F80ED;
+ width: 472px;
+ height: 50px;
+ color: #FFF;
+ font-size: 18px;
+ font-weight: 700;
+ line-height: 22px;
+ text-align: center;
+ border: 0;
+ cursor: pointer;
+}
+
+.login .signin-container{
+ margin-top: 20px;
+}
+.login .signin-container .signin::after{
+ margin: 0 12px 0 12px;
+ color: var(--767676, #767676);
+ content : "|";
+}
+.login .signin-container ul{
+ display: flex;
+ justify-content: center;
+ margin-left: -24px;
+}
+.login .signin-container li a{
+ text-decoration: none;
+ color: var(--767676, #767676);
+ font-size: 14px;
+}
+
+.login .or{
+ position: relative;
+ margin-top: 30px;
+}
+.login .or div{
+ background: #C4C4C4;
+ width: 472px;
+ height: 1px;
+}
+
+.login .or p{
+ position: absolute;
+ padding: 0 13px 0 13px;
+ color: var(--767676, #767676);
+ font-size: 14px;
+ background-color: #FFF;
+ top:50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+
+}
+
+
+/* 외부 로그인 */
+.external-login{
+ padding-top:28px;
+ display: flex;
+ flex-direction: column;
+ gap:10px;
+ justify-content: center;
+ align-items: center;
+}
+.external-login a{
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ text-decoration: none;
+ width: 472px;
+ height: 50px;
+ border-radius: 5px;
+ border: 1px solid var(--767676, #767676);
+ background: #FFF;
+}
+.external-login a img {
+ margin-left: 12px;
+}
+.external-login a p{
+ color: var(--767676, #767676);
+ text-align: center;
+ font-weight: 500;
+ flex-grow: 1;
+}
+
+.external-login .facebook{
+ border: 1px solid #2D9CDB;
+}
+.external-login .naver{
+ border: 1px solid #00BF18;
+}
+.external-login .kakao{
+ border: 1px solid #F2C94C;
+}
+.external-login:last-child{
+ margin-bottom:25px;
+}
\ No newline at end of file
diff --git a/images/button_exit.svg b/images/button_exit.svg
new file mode 100644
index 0000000..0f5d2e2
--- /dev/null
+++ b/images/button_exit.svg
@@ -0,0 +1,4 @@
+
\ No newline at end of file
diff --git a/images/facebook.svg b/images/facebook.svg
new file mode 100644
index 0000000..2d45a86
--- /dev/null
+++ b/images/facebook.svg
@@ -0,0 +1,3 @@
+
\ No newline at end of file
diff --git a/images/google.svg b/images/google.svg
new file mode 100644
index 0000000..3cf1351
--- /dev/null
+++ b/images/google.svg
@@ -0,0 +1,6 @@
+
\ No newline at end of file
diff --git a/images/kakao.svg b/images/kakao.svg
new file mode 100644
index 0000000..2e50fc1
--- /dev/null
+++ b/images/kakao.svg
@@ -0,0 +1,3 @@
+
\ No newline at end of file
diff --git a/images/login-checked.svg b/images/login-checked.svg
new file mode 100644
index 0000000..3fea706
--- /dev/null
+++ b/images/login-checked.svg
@@ -0,0 +1,4 @@
+
\ No newline at end of file
diff --git a/images/login-not-checked.svg b/images/login-not-checked.svg
new file mode 100644
index 0000000..3146d02
--- /dev/null
+++ b/images/login-not-checked.svg
@@ -0,0 +1,4 @@
+
\ No newline at end of file
diff --git a/images/naver.svg b/images/naver.svg
new file mode 100644
index 0000000..8e8ccea
--- /dev/null
+++ b/images/naver.svg
@@ -0,0 +1,3 @@
+
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..a44bccd
--- /dev/null
+++ b/index.html
@@ -0,0 +1,62 @@
+
+
+
+
+
+
+ login page
+
+
+
+
+
+
+
+
+
+
+ 
+ 
+ 
+