hubez-admin partner-git master -> hubez-git transfer 202205241800

frontend/src/assets/css/common.css

@@ -0,0 +1,72 @@
+/* CSS Document */
+
+a {text-decoration: none;}
+ul,li {list-style: none;}
+input,button {outline: none;}
+input {padding: 15px; box-sizing: border-box; font-family: 'SpoqaHanSansNeo'; font-weight: 500; font-size: 14px;}
+input::placeholder {font-family: 'SpoqaHanSansNeo'; font-weight: 500; font-size: 14px;}
+button {cursor: pointer;font-family: 'SpoqaHanSansNeo'; font-weight: 500; font-size: 14px;}
+
+html, body, div, span, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+abbr, address, cite, code,
+del, dfn, em, img, ins, kbd, q, samp,
+small, strong, sub, sup, var,
+b, i,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section, summary,
+time, mark, audio, video {
+    margin:0; padding:0; box-sizing:border-box;
+    word-break: keep-all;
+    word-wrap: break-word;
+}
+
+a{box-sizing:border-box;}
+
+article,aside,details,figcaption,figure,
+footer,header,hgroup,menu,nav,section {
+    display:block;
+}
+table {
+    border-collapse:collapse;
+    border:0 none;
+}
+input, select, option{
+    font-family: 'SpoqaHanSansNeo'; 
+}
+input:focus{
+    outline: 1px solid #000;
+}
+select:focus{
+    outline: 1px solid #000;
+}
+input[type="checkbox"] + label{
+    cursor: pointer;
+}
+input:disabled{
+    background-color: #eeeeee;
+}
+input[type="radio"]{
+    display:none;
+}
+input[type="radio"] + label{
+    position: relative;
+    padding-left:25px;
+    cursor: pointer;
+}
+input[type="radio"] + label::before{
+    content: '';
+    position:absolute;
+    width:20px;
+    height:21px;
+    top:50%;
+    transform: translate(0,-50%);
+    left:0;
+    background:url(../images/icon-radio.png) no-repeat center/100% auto;
+}
+input[type="radio"]:checked + label::before{
+    background:url(../images/icon-radio-chk.png) no-repeat center/100% auto;
+}

frontend/src/assets/css/contents.css

@@ -0,0 +1,71 @@
+/* CSS Document */
+
+/*======================
+	
+======================*/
+
+.btn-pcolor {background: #eb008b; border-radius: 6px; border: none; color: #fff; font-weight: 700; font-size: 16px;}
+.btn-pcolor:hover{background: #b9006d;}
+.btn-p2color {background: #2e2b46; border-radius: 6px; border: none; color: #fff; font-weight: 700; font-size: 16px;}
+.btn-default {background: #fff; border-radius: 6px; border: 1px solid #a1a1a1; color: #5b5879; font-weight: 700; font-size: 16px;}
+.btn-default:hover{border-color:#000;}
+
+
+
+
+
+
+/*======================
+	.login-wrap
+======================*/
+.login-wrap {width: 100%; height: 100vh; background: url("../images/login-bg.jpg") no-repeat center center; background-size: cover;}
+.bg-wrap {width: 100%; min-height: 100vh; background: #f0effa;}
+.login-box {width: 520px; position: absolute; top: calc(50% - 80px); left: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%);}
+.adm-login.login-box {background: #fff; border-radius: 21px; box-shadow: 0 5px 13px rgba(56,56,56,0.05); padding: 65px 65px 40px 65px; box-sizing: border-box;}
+.adm-login.login-box .wbox {border-radius: 0; box-shadow: none; padding: 0;}
+.login-box .wbox {background: #fff; border-radius: 21px; box-shadow: 0 5px 13px rgba(56,56,56,0.05); padding: 50px 65px 40px 65px; box-sizing: border-box;}
+
+.login-box .desc {font-size: 14px; color: #a6a6a6; letter-spacing: -1px; line-height: 140%; text-align: center; word-break: keep-all; padding-bottom: 20px;}
+.login-box input {background: #f6f6f9; border-radius: 2px; padding: 15px; box-sizing: border-box; line-height: 20px; border: none; outline: none; width: 100%;}
+.login-box input::placeholder {font-size: 16px; line-height: 20px; color: #acacac; font-weight: 500; }
+.login-box input[type="checkbox"] {display: none;}
+.login-box input[type="checkbox"] + label {cursor: pointer; display: flex; align-items: center; color: #333333; font-size: 16px; font-weight: 400; letter-spacing: -1px;}
+.login-box input[type="checkbox"] + label:before {content: ""; width: 24px; height: 24px; display: inline-block; background: url("../images/icon-chk-n.png") no-repeat left center; background-size: contain; margin-right: 8px;}
+.login-box input[type="checkbox"]:checked + label:before {background: url("../images/icon-chk.png") no-repeat left center; background-size: contain;}
+.login-box .btn-pcolor {width: 100%; height: 55px; margin: 15px 0;}
+.login-box li {list-style: none; margin: 10px 0; display: flex; justify-content: space-between; align-items: center; min-height: 50px;}
+.login-box li.bg-g {background: #f6f6f9;}
+.login-box .login-notice {}
+.login-box .login-notice li {color: #a6a6a6; font-size: 14px; letter-spacing: -1px; font-weight: 400; position: relative; padding-left: 10px; min-height: auto;}
+.login-box .login-notice li:before {content: ""; display: block; position: absolute; left: 0; top: 50%; margin-top: -1.5px; width: 3px; height: 3px; background: #e3e3ea;}
+.login-box .login-notice li + li {margin-top: 10px;}
+
+.login-box .title {font-size: 24px; color: #333333; margin: 0 auto 30px; text-align: center; font-weight: 500;}
+.login-box .login-form {border-bottom: 1px solid #e3e3ea; padding-bottom: 10px; box-sizing: border-box; margin-bottom: 30px;}
+.login-box .login-form li .btn-pwreset {border: none; background: url("../images/icon-lock.png") no-repeat left 3px #fff; background-size: contain; padding-left: 25px; height: 32px; color: #333333; font-size: 16px; font-weight: 400; letter-spacing: -1px; cursor: pointer;}
+
+.text-auth .btn-p2color {border-radius: 2px; margin-left: 7px; width: 190px; height: 50px;}
+.text-auth .btn-pcolor {width: 49%;}
+.text-auth .btn-default {width: 49%; height: 55px;}
+.text-auth .bg-g {}
+.text-auth .time {padding: 15px 17px; color: #d92f89; font-size: 16px;}
+
+.pw-reset .btn-pcolor {width: 64%;}
+.pw-reset .btn-default {width: 34%; height: 55px;}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

frontend/src/assets/css/layout.css

@@ -0,0 +1,109 @@
+/* CSS Document */
+
+/*======================
+SpoqaHanSansNeo
+======================*/
+@font-face {
+  font-family: 'SpoqaHanSansNeo';
+  src: url('../font/SpoqaHanSansNeo-Thin.woff') format('woff');
+  font-weight: 100;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'SpoqaHanSansNeo';
+  src: url('../font/SpoqaHanSansNeo-Light.woff') format('woff');
+  font-weight: 300;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'SpoqaHanSansNeo';
+  src: url('../font/SpoqaHanSansNeo-Regular.woff') format('woff');
+  font-weight: 400;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'SpoqaHanSansNeo';
+  src: url('../font/SpoqaHanSansNeo-Medium.woff') format('woff');
+  font-weight: 500;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'SpoqaHanSansNeo';
+  src: url('../font/SpoqaHanSansNeo-Bold.woff') format('woff');
+  font-weight: 700;
+  font-style: normal;
+}
+
+
+
+
+* {margin: 0; padding: 0; }
+body,html {font-family: 'SpoqaHanSansNeo'; font-weight: 500; font-size: 14px;}
+body{
+  min-width:1600px;
+}
+.div-cont {width: 1200px; padding: 0 30px; box-sizing: border-box; margin: auto;}
+
+
+
+/*======================
+	#logo
+======================*/
+.login-box .logo {width: 280px; height: 72px; position: relative; margin: 0 auto 30px; background: url("../images/logo.png") no-repeat center center; background-size: contain;}
+
+
+
+
+
+/*======================
+	#footer-wrap
+======================*/
+.login-wrap .footer-wrap {position: absolute; bottom: 0; left: 0;}
+.bg-wrap .footer-wrap {position: absolute; bottom: 0; left: 0;}
+.footer-wrap {width: 100%; background: #fff;}
+.footer {display: flex; justify-content: space-between; align-items: flex-start; padding-top: 45px; padding-bottom: 45px;}
+.footer .flogo {}
+.footer .f-info {}
+.footer .f-info > ul {display: flex; align-items: center; flex-wrap: wrap;}
+.footer .f-info > ul li {list-style: none; margin-right: 30px; position: relative;}
+.footer .f-info > ul li + li:before {content: ""; display: block; width: 1px; height: 14px; background: #7b7b7b; position: absolute; left: -15px; top: 50%; margin-top: -7px;}
+.footer .f-info p {font-size: 14px; color: #7b7b7b; line-height: 170%; font-weight: 400;}
+.footer .f-info a {font-size: 14px; color: #7b7b7b; line-height: 170%; text-decoration: none;}
+
+
+
+
+
+/*======================
+	.popup
+======================*/
+.dimmed {width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; background: rgba(0,0,0,0.4); display: none;}
+.dimmed.open {display: block !important;}
+.popup-wrap {display: none;}
+.popup-wrap.open {display: block !important;}
+.popup {width: 390px; border-radius: 8px; background: #fff; padding: 0 30px; box-sizing: border-box; border: 1px solid rgba(197,197,197,0.36); box-shadow: 2px 2px 8px rgba(171,171,171,0.30); position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); display: none;}
+.popup.open {display: block !important;}
+.popup .pop-head {padding: 30px 0 25px;}
+.popup .pop-head .pop-tit {font-size: 18px; color: #222222; letter-spacing: -1px; line-height: 100%;}
+.popup .btn-close {width: 30px; height: 30px; position: absolute; top: 0; right: 0; background: url("../images/icon-close.png") no-repeat center center; background-size: 11px; border: none;}
+.popup .pop-cont {}
+.popup .pop-cont p {font-size: 16px; color: #666666; font-weight: 400; letter-spacing: -0.8px; line-height: 100%;}
+.popup .pop-cont p + p {margin-top: 10px;}
+.popup .pop-btn1 {display: flex; justify-content: flex-end; align-items: center; margin: 35px 0 25px;}
+.popup .pop-btn2 {display: flex; justify-content: space-between; align-items: center; margin: 35px 0 25px;}
+.popup .pop-btn1 button {width: 49%; height: 42px; font-size: 16px; font-weight: 400; letter-spacing: -1.1px;}
+.popup .pop-btn2 button {width: 49%; height: 42px; font-size: 16px; font-weight: 400; letter-spacing: -1.1px;}
+
+
+
+
+
+
+
+
+
+
+
+
+
+

frontend/src/assets/css/style.css

@@ -0,0 +1,977 @@
+.main_wrap {
+  background-color: #f0effa;
+  width: 100%;
+  min-height: 100vh;
+  position: relative;
+  padding: 70px 0 0;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+}
+
+header {
+  height: 70px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 20;
+  background-color: #f0effa;
+}
+
+header .logo {
+  width: 180px;
+  height: 26px;
+  background: url(../images/admin-logo.png) no-repeat center/100% auto;
+  font-size: 0;
+  margin: 23px 0 0 23px;
+  position: relative;
+}
+
+header .logo a {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+header .logo span {
+  font-size: 12px;
+  position: absolute;
+  right: -80px;
+  bottom: 0;
+  color: #b9b6d2;
+  line-height: 1;
+  letter-spacing: -0.025em;
+}
+
+header .user_wrap {
+  font-size: 14px;
+  color: #303035;
+  position: relative;
+}
+
+header .user_wrap a {
+  color: #303035;
+}
+
+header .user_wrap .user {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  width: 258px;
+  height: 63px;
+  background: url(../images/user-bg.png) no-repeat center/100% auto;
+}
+
+header .user_wrap .user p {
+  position: relative;
+  padding: 8px 12px 0 40px;
+  margin-right: 12px;
+}
+
+header .user_wrap .user p:after {
+  content: '';
+  width: 1px;
+  height: 12px;
+  background-color: #bab7d3;
+  position: absolute;
+  right: 0;
+  top: 12px;
+}
+
+header .user_wrap .user .btn_user {
+  padding: 8px 0 0 28px;
+  position: relative;
+}
+
+header .user_wrap .user .btn_user:before {
+  content: '';
+  position: absolute;
+  top: 8px;
+  left: 0;
+  width: 20px;
+  height: 20px;
+  background: url(../images/user-icon.png) no-repeat center/100% auto;
+}
+
+header .user_wrap .user .btn_user:after {
+  content: '';
+  position: absolute;
+  top: 16px;
+  right: -17px;
+  width: 11px;
+  height: 6px;
+  background: url(../images/arrow-down.png) no-repeat center/100% auto;
+}
+
+header .user_wrap .user.clicked + .user_info {
+  display: block;
+}
+
+header .user_wrap .user.clicked .btn_user:after {
+  -webkit-transform: rotate(180deg);
+          transform: rotate(180deg);
+}
+
+header .user_wrap .user_info {
+  border: 1px solid #cbcbcb;
+  background-color: #fff;
+  -webkit-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.18);
+          box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.18);
+  border-radius: 12px;
+  width: 108px;
+  height: 84px;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  position: absolute;
+  top: 40px;
+  right: 24px;
+  display: none;
+}
+
+header .user_wrap .user_info a {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  height: 50%;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+
+header .user_wrap .user_info .modify {
+  color: #d92f89;
+  padding-top: 15px;
+}
+
+header .user_wrap .user_info .logout {
+  color: #333333;
+  padding-top: 5px;
+}
+.main_menu {
+	overflow: hidden;
+  background-color: #7572a5;
+  border-radius: 24px;
+  width: 240px;
+  position: relative;
+  margin-bottom: 25px;
+	padding:25px 0;
+}
+
+.main_menu:before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 50px;
+  height: 100%;
+  background-color: #34344f;
+  border-radius: 25px;
+}
+
+.main_menu > li {
+  padding: 0 0 0 50px;
+	position: relative; 
+}
+
+.main_menu > li > a {
+  color: rgba(255, 255, 255, 0.5);
+  font-size: 16px;
+  display: block;
+  position: relative;
+  padding: 10px;
+	transition: all 0.3s;
+}
+
+
+.main_menu > li > a:after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  right: 15px;
+	transform-origin: center;
+	transition: transform 0.3s;
+  width: 11px;
+  height: 6px;
+  background: url(../images/arrow-white.png) no-repeat center/100% auto;
+  opacity: 0.5;
+  -webkit-transform: translateY(-50%) rotate(180deg);
+          transform: translateY(-50%) rotate(180deg);
+}
+
+
+
+.main_menu > li.is-current > a {
+  color: #fff;
+}
+
+.main_menu > li.is-current > a:before {
+  opacity: 1;
+}
+
+.main_menu > li.is-current > a:after {
+  opacity: 1;
+  -webkit-transform: translateY(-50%) rotate(0deg);
+          transform: translateY(-50%) rotate(0deg);
+}
+
+.main_menu > li.is-current .sub_menu {
+  display: block;
+}
+
+.main_menu > li.is-current:last-child .sub_menu {
+  margin-bottom: 0;
+}
+
+.main_menu .sub_menu {
+  background-color: #fff;
+  border-radius: 10px;
+  padding: 18px 10px;
+	transition: all 0.3s;
+}
+
+.main_menu .sub_menu > li {
+  padding: 0 0 15px 5px;
+  position: relative;
+}
+
+.main_menu .sub_menu > li:last-child {
+  padding-bottom: 0;
+}
+
+.main_menu .sub_menu > li:before {
+  content: '';
+  position: absolute;
+  top: 7px;
+  left: 0;
+  width: 3px;
+  height: 3px;
+  background-color: #bcb8e1;
+}
+
+.main_menu .sub_menu > li > a {
+  font-size: 14px;
+  color: #68647a;
+  display: block;
+}
+
+.main_menu .is-current .sub_menu > li:hover > a,.main_menu .is-current .sub_menu > li > a.selected { color:#000000; }
+
+
+/* 추가 */
+
+.main_menu > li .menu_btn { position: absolute; left:0; top:0; font-size: 0; width: 50px; height: 43px; transition: all 0.3s; cursor: pointer; }
+
+.main_menu > li.customer .menu_btn { background: url(../images/icon-customer.png) no-repeat center/auto; }
+.main_menu > li.attract .menu_btn { background: url(../images/icon-attract.png) no-repeat center/auto; }
+.main_menu > li.service .menu_btn { background: url(../images/icon-service.png) no-repeat center/auto; }
+.main_menu > li.calculate .menu_btn { background: url(../images/icon-calculate.png) no-repeat center/auto; }
+.main_menu > li.channel .menu_btn { background: url(../images/icon-channel.png) no-repeat center/auto; }
+.main_menu > li.key .menu_btn { background: url(../images/icon-key.png) no-repeat center/auto; }
+.main_menu > li.moniter .menu_btn { background: url(../images/icon-moniter.png) no-repeat center/auto; }
+.main_menu > li.risk .menu_btn { background: url(../images/icon-risk.png) no-repeat center/auto; }
+.main_menu > li.stats .menu_btn { background: url(../images/icon-stats.png) no-repeat center/auto; }
+.main_menu > li.system .menu_btn { background: url(../images/icon-system.png) no-repeat center/auto; }
+
+.main_menu > li:hover > a { background: #646193; color: #fff; }
+.main_menu > li.customer:hover .menu_btn { background: url(../images/icon-customer-on.png) no-repeat center/auto #4a496c; }
+.main_menu > li.attract:hover .menu_btn { background: url(../images/icon-attract-on.png) no-repeat center/auto #4a496c; }
+.main_menu > li.service:hover .menu_btn { background: url(../images/icon-service-on.png) no-repeat center/auto #4a496c; }
+.main_menu > li.calculate:hover .menu_btn { background: url(../images/icon-calculate-on.png) no-repeat center/auto #4a496c; }
+.main_menu > li.channel:hover .menu_btn { background: url(../images/icon-channel-on.png) no-repeat center/auto #4a496c; }
+.main_menu > li.key:hover .menu_btn { background: url(../images/icon-key-on.png) no-repeat center/auto #4a496c; }
+.main_menu > li.moniter:hover .menu_btn { background: url(../images/icon-moniter-on.png) no-repeat center/auto #4a496c; }
+.main_menu > li.risk:hover .menu_btn { background: url(../images/icon-risk-on.png) no-repeat center/auto #4a496c; }
+.main_menu > li.stats:hover .menu_btn { background: url(../images/icon-stats-on.png) no-repeat center/auto #4a496c; }
+.main_menu > li.system:hover .menu_btn { background: url(../images/icon-system-on.png) no-repeat center/auto #4a496c; }
+
+.main_menu > li.customer.is-current .menu_btn { background-image: url(../images/icon-customer-on.png); }
+.main_menu > li.attract.is-current .menu_btn { background-image: url(../images/icon-attract-on.png); }
+.main_menu > li.service.is-current .menu_btn { background-image: url(../images/icon-service-on.png); }
+.main_menu > li.calculate.is-current .menu_btn { background-image: url(../images/icon-calculate-on.png); }
+.main_menu > li.channel.is-current .menu_btn { background-image: url(../images/icon-channel-on.png); }
+.main_menu > li.key.is-current .menu_btn { background-image: url(../images/icon-key-on.png); }
+.main_menu > li.moniter.is-current .menu_btn { background-image: url(../images/icon-moniter-on.png); }
+.main_menu > li.risk.is-current .menu_btn { background-image: url(../images/icon-risk-on.png); }
+.main_menu > li.stats.is-current .menu_btn { background-image: url(../images/icon-stats-on.png); }
+.main_menu > li.system.is-current .menu_btn { background-image: url(../images/icon-system-on.png); }
+
+.main_menu > li .sub_menu_wrap { padding:0 10px 10px; display:none; }
+.main_menu > li.is-current .sub_menu_wrap { display: block; }
+
+
+
+
+
+
+
+
+
+.contents {
+  padding: 0 4.16vw;
+  width: 100%;
+  -webkit-box-flex: 1;
+      -ms-flex: 1 1 0px;
+          flex: 1 1 0;
+}
+
+.contents_wrap {
+  -webkit-box-shadow: 8px 8px 8px rgba(80, 80, 80, 0.08);
+          box-shadow: 8px 8px 8px rgba(80, 80, 80, 0.08);
+  background-color: #fff;
+  width: 100%;
+  border-radius: 24px;
+  padding: 15px 0;
+  margin-bottom: 70px;
+}
+
+.contents_wrap .search_form {
+  padding: 0 40px;
+}
+
+.contents .top_wrap {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  border-bottom: 1px solid #d5d3e6;
+  padding: 0 40px;
+  margin-bottom: 27px;
+}
+
+.contents .top_wrap .title {
+  font-size: 18px;
+  color: #1b1b1b;
+  letter-spacing: -0.025em;
+  padding-bottom: 14px;
+  border-bottom: 4px solid #eb008b;
+  margin-bottom: -1px;
+}
+
+.contents .top_wrap .breadcrumb {
+  font-size: 13px;
+  color: #9493a1;
+  letter-spacing: -0.025em;
+}
+
+.contents .search_wrap {
+  background-color: #f6f6f8;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  padding: 20px 30px 40px;
+  -webkit-box-align: end;
+      -ms-flex-align: end;
+          align-items: flex-end;
+  border-radius: 4px;
+  margin-bottom: 50px;
+}
+
+.contents .search_wrap button.grey {
+  background-color: #35354f;
+  width: 122px;
+  font-size: 18px;
+  padding: 0 8px;
+  margin-left: 0;
+}
+
+.contents .select_box {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  margin-right: 10px;
+  width: 13.67%;
+}
+
+.contents .select_box .label {
+  font-size: 13px;
+  letter-spacing: -0.025em;
+  margin-bottom: 6px;
+  color: #a3a3a3;
+}
+
+.contents .select_box select {
+  width: 100%;
+  height: 40px;
+  border: 1px solid #c9c9c9;
+  font-size: 14px;
+  color: #000;
+  border-radius: 4px;
+  padding:0 10px;
+	
+  -webkit-appearance:none; 
+  -moz-appearance:none; 
+  -o-appearance:none; 
+  appearance:none;
+  background:#fff url('../images/icon-select-down.png')no-repeat right 10px center;
+}
+
+.contents .select_box option {
+  color: #000;
+}
+
+.contents .input_box {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  margin-right: 10px;
+  width: 22.64%;
+}
+
+.contents .input_box .label {
+  font-size: 13px;
+  letter-spacing: -0.025em;
+  margin-bottom: 6px;
+  color: #a3a3a3;
+}
+
+.contents .input_box input {
+  width: 100%;
+  height: 40px;
+  border: 1px solid #c9c9c9;
+  position: relative;
+  background: url(../images/icon-search.png) no-repeat 6% center/14px auto;
+  background-color: #fff;
+  padding-left: 43px;
+  border-radius: 4px;
+}
+
+.contents .input_box input::-webkit-input-placeholder {
+  color: #c9c9c9;
+}
+
+.contents .input_box input:-ms-input-placeholder {
+  color: #c9c9c9;
+}
+
+.contents .input_box input::-ms-input-placeholder {
+  color: #c9c9c9;
+}
+
+.contents .input_box input::placeholder {
+  color: #c9c9c9;
+}
+
+.contents .input_box.id {
+  position: relative;
+  margin-left: 10px;
+}
+
+.contents .input_box.id:before {
+  content: '';
+  position: absolute;
+  top: 25px;
+  left: -10px;
+  width: 1px;
+  height: 36px;
+  background-color: #e8e8f1;
+}
+
+.contents .button {
+  height: 40px;
+  color: #fff;
+  border-radius: 4px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  border: none;
+  min-width: 80px;
+  margin-left: 10px;
+}
+
+.contents .button.grey {
+  background-color: #35354f;
+  font-size: 16px;
+}
+
+.contents .button.grey:hover {
+  background-color: #0a0b24;
+}
+
+.contents .button.blue {
+  background-color: #333589;
+  font-size: 16px;
+  padding: 0 15px;
+}
+
+.contents .button.blue:hover {
+  background-color: #0a0b24;
+}
+
+.contents .button.white {
+  border: 1px solid #c9c9c9;
+  font-size: 16px;
+  background-color: #fff;
+  color: #000;
+}
+
+.contents .button.white:hover {
+  border-color: #000;
+}
+
+.contents .info {
+  padding: 0 30px;
+  margin-bottom: 10px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+}
+
+.contents .info .count {
+  font-size: 16px;
+  position: relative;
+  padding-left: 10px;
+}
+
+.contents .info .count span {
+  color: #eb008b;
+}
+
+.contents .info .count:before {
+  content: '';
+  position: absolute;
+  top: 10px;
+  left: 0;
+  width: 3px;
+  height: 3px;
+  background-color: #eb008b;
+}
+
+.contents .info .button_group {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.contents .info .title {
+  font-size: 18px;
+  position: relative;
+  padding-left: 10px;
+  margin-top: 9px;
+}
+
+.contents .info .title:before {
+  content: '';
+  position: absolute;
+  top: 10px;
+  left: 0;
+  width: 3px;
+  height: 3px;
+  background-color: #eb008b;
+}
+
+.contents .table {
+  color: #333333;
+  padding: 0 30px;
+  margin-bottom: 65px;
+}
+
+.contents .table table {
+  width: 100%;
+  text-align: center;
+  border-top: 2px solid #69677e;
+  border-bottom: 1px solid #a4a4b0;
+}
+
+.contents .table table thead {
+  background-color: #f7f7f7;
+}
+
+.contents .table table tbody tr:last-child {
+  border-bottom: none;
+}
+
+.contents .table table th {
+  font-weight: 500;
+  height: 50px;
+  position: relative;
+}
+
+.contents .table table tr {
+  padding: 10px;
+  height: 50px;
+  border-bottom: 1px solid #dadae6;
+}
+
+.contents .table table tr:hover {
+  background-color: #fafaff;
+}
+
+.contents .table table td {
+  position: relative;
+}
+
+.contents .table table td a {
+  text-decoration: underline;
+  color: #333333;
+}
+
+.contents .table table td a:hover {
+  color: #eb008b;
+}
+
+.contents .table table td.stop {
+  color: #a5a5a5;
+}
+
+.contents .table table td.two_btn_group {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  height: 50px;
+}
+
+.contents .table table input[type="checkbox"] {
+  display: none;
+}
+
+.contents .table table input[type="checkbox"] + label {
+  width: 20px;
+  height: 30px;
+  display: block;
+  background: url(../images/icon-chk-n-square.png) no-repeat center/100% auto;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
+}
+
+.contents .table table input[type="checkbox"]:checked + label {
+  background: url(../images/icon-chk-square.png) no-repeat center/100% auto;
+}
+
+.contents .table.table_form {
+  font-size: 16px;
+  margin-bottom: 24px;
+}
+
+.contents .table.table_form th {
+  background-color: #f7f7f7;
+  width: 9%;
+  text-align: left;
+  padding-left: 20px;
+}
+
+.contents .table.table_form th.center {
+  text-align: center;
+  padding-left: 0;
+}
+
+.contents .table.table_form td {
+  text-align: left;
+}
+
+.contents .table.table_form td.check {
+  padding: 20px;
+  width: 15%;
+  vertical-align: text-top;
+}
+
+.contents .table.table_form td.check p {
+  margin-bottom: 15px;
+}
+
+.contents .table.table_form input[type="checkbox"] + div > label:first-child {
+  width: 20px;
+  height: 30px;
+  display: block;
+  background: url(../images/icon-chk-n-square.png) no-repeat center/100% auto;
+  margin-right: 10px;
+}
+
+.contents .table.table_form input[type="checkbox"]:checked + div > label:first-child {
+  background: url(../images/icon-chk-square.png) no-repeat center/100% auto;
+  margin-right: 10px;
+}
+
+.contents .table.table_form .label_group {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+
+.contents .table.table_form .tr_checkbox {
+  border-bottom: none;
+}
+
+.contents .table.table_form .tr_checkbox .check:first-child {
+  background-color: #f7f7f7;
+}
+
+.contents .table.table_form .tr_input input[type="text"] {
+  border: 1px solid #c9c9c9;
+  border-radius: 4px;
+  height: 40px;
+  margin-left: 10px;
+}
+
+.contents .table.table_form .tr_input.w30 input[type="text"] {
+  width: 30%;
+}
+
+.contents .table.table_form .tr_input.w75 input[type="text"] {
+  width: 75%;
+}
+
+.contents .table.table_form .tr_input.w100 input[type="text"] {
+  width: 98%;
+}
+
+.contents .table.table_form .tr_input input[type="radio"] + label:nth-child(2) {
+  margin: 0 30px 0 10px;
+}
+
+.contents .pop-btn2 {
+  text-align: end;
+  padding: 0 30px;
+  margin-bottom: 9px;
+}
+
+.contents .pop-btn2 button {
+  width: 160px;
+  height: 42px;
+}
+
+.contents .pop-btn2 .btn-pcolor {
+  margin-left: 8px;
+}
+
+.popup .pop-cont-detail {
+  font-size: 16px;
+  color: #666666;
+  border-radius: 12px;
+  background-color: #f5f6f8;
+  padding: 15px;
+  margin-top: 13px;
+}
+
+.popup .pop-cont-detail li {
+  position: relative;
+  padding-left: 10px;
+}
+
+.popup .pop-cont-detail li:before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  -webkit-transform: translate(0, -50%);
+          transform: translate(0, -50%);
+  left: 0;
+  width: 2px;
+  height: 2px;
+  background-color: #c7c7c7;
+}
+
+.popup.popup_form {
+  width: 525px;
+}
+
+.popup.popup_form .pop-head {
+  border-bottom: 1px solid #d5d3e6;
+  padding-bottom: 0;
+  margin-bottom: 25px;
+}
+
+.popup.popup_form .pop-tit {
+  display: inline-block;
+  border-bottom: 4px solid #eb008b;
+  padding-bottom: 20px;
+  margin-bottom: -1px;
+}
+
+.popup.popup_form .pop-btn2 {
+  -webkit-box-pack: end;
+      -ms-flex-pack: end;
+          justify-content: flex-end;
+}
+
+.popup.popup_form .pop-btn2 button {
+  width: 30%;
+}
+
+.popup.popup_form .pop-btn2 button:last-child {
+  margin-left: 10px;
+}
+
+.popup.popup_form table {
+  width: 100%;
+  border-top: 1px solid #dadae6;
+  border-bottom: 1px solid #dadae6;
+}
+
+.popup.popup_form table tr {
+  border-bottom: 1px solid #dadae6;
+  height: 50px;
+}
+
+.popup.popup_form table tr:last-child {
+  border-bottom: none;
+}
+
+.popup.popup_form table th {
+  width: 30%;
+  background-color: #f7f7f7;
+  font-size: 16px;
+  color: #333333;
+  text-align: left;
+  padding-left: 20px;
+}
+
+.popup.popup_form table td {
+  padding: 0 0 0 10px;
+}
+
+.popup.popup_form table td input {
+  width: 100%;
+  height: 40px;
+  border: 1px solid #c9c9c9;
+  border-radius: 4px;
+  font-size: 16px;
+}
+
+.popup.popup_form table td input::-webkit-input-placeholder {
+  color: #c9c9c9;
+}
+
+.popup.popup_form table td input:-ms-input-placeholder {
+  color: #c9c9c9;
+}
+
+.popup.popup_form table td input::-ms-input-placeholder {
+  color: #c9c9c9;
+}
+
+.popup.popup_form table td input::placeholder {
+  color: #c9c9c9;
+}
+
+.popup.popup_form table input[type="radio"] + label {
+  font-size: 16px;
+  vertical-align: text-top;
+}
+
+.popup.popup_form table input[type="radio"] + label:nth-child(2) {
+  margin-right: 40px;
+}
+
+.popup.popup_form table select {
+  width: 100%;
+  height: 40px;
+  border: 1px solid #c9c9c9;
+  border-radius: 4px;
+  padding: 0 10px;
+  font-size: 16px;
+  color: #333333;
+}
+
+.popup.popup_form table .input_search {
+  height: 50px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+
+.popup.popup_form table .input_search input[type="text"] {
+  position: relative;
+  background: url(../images/icon-search.png) no-repeat 6% center/14px auto;
+  background-color: #fff;
+  padding-left: 40px;
+  border-radius: 4px;
+  width: 72%;
+}
+
+.popup.popup_form table .input_search input[type="text"]::-webkit-input-placeholder {
+  color: #c9c9c9;
+}
+
+.popup.popup_form table .input_search input[type="text"]:-ms-input-placeholder {
+  color: #c9c9c9;
+}
+
+.popup.popup_form table .input_search input[type="text"]::-ms-input-placeholder {
+  color: #c9c9c9;
+}
+
+.popup.popup_form table .input_search input[type="text"]::placeholder {
+  color: #c9c9c9;
+}
+
+.popup.popup_form table .button {
+  height: 40px;
+  color: #fff;
+  border-radius: 4px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  border: none;
+  min-width: 80px;
+  margin-left: 10px;
+}
+
+.popup.popup_form table .button.grey {
+  background-color: #35354f;
+  font-size: 16px;
+}
+
+.popup.popup_form table .button.grey:hover {
+  background-color: #0a0b24;
+}
+
+
+
+/*# sourceMappingURL=style.css.map */

frontend/src/assets/js/script.js

@@ -0,0 +1,66 @@
+
+/*(function(){	
+	const menuList = document.querySelectorAll('.main_menu .is-sub');
+	for(const menu of menuList){
+		menu.addEventListener('click', (e)=> {
+			if(e.target.classList.contains('menu_target') || e.target.classList.contains('menu_btn')){
+				const menuListCheck = e.target.parentNode;
+				if(menuListCheck.classList.contains('is-current')){
+					menuListCheck.classList.remove('is-current');
+				} else {
+					for(const other of menuList){
+						other.classList.remove('is-current');
+					}	
+					menuListCheck.classList.add('is-current');
+				}
+			}
+		})
+	}
+})();*/
+
+/*const ModalOpen = target =>{
+	console.log("ModalOpen");
+	var dimmed = document.getElementsByClassName('dimmed');
+	var wrap = document.getElementsByClassName('popup-wrap');
+	var obj = document.getElementsByClassName(target);
+	dimmed[0].style.display = 'block';
+	wrap[0].style.display = 'block';
+	obj[0].style.display = 'block';
+}*/
+
+// eslint-disable-next-line no-unused-vars
+/*function ModalOpen(target) {
+	var dimmed = document.getElementsByClassName('dimmed');
+	var wrap = document.getElementsByClassName('popup-wrap');
+	var obj = document.getElementsByClassName(target);
+	dimmed[0].style.display = 'block';
+	wrap[0].style.display = 'block';
+	obj[0].style.display = 'block';
+}*/
+// eslint-disable-next-line no-unused-vars
+/*function ModalClose() {
+	var dimmed = document.getElementsByClassName('dimmed');
+	var wrap = document.getElementsByClassName('popup-wrap');
+	var obj = wrap[0].childElementCount
+	dimmed[0].style.display = 'none';
+	wrap[0].style.display = 'none';
+	for(var i = 0; i < obj; i++) {
+		var target = document.getElementsByClassName('popup');
+		target[i].style.display = 'none';
+	}
+}
+// eslint-disable-next-line no-unused-vars
+function userInfoToggle(){
+	var click = "clicked";
+	var userBtn = document.querySelector('.user_wrap .user');
+	if(userBtn.classList.contains(click)){
+		userBtn.classList.remove(click);
+	}
+	else{
+		userBtn.classList.add(click);
+	}
+}*/
+
+export default{
+	ModalOpen
+}