정다정
2024-09-09
240909 정다정 이미지파일 및 css 추가
@c896b9fefa3d62daa44c8868f3a5acdc70d99544
--- client/resources/css/style.css
+++ client/resources/css/style.css
... | ... | @@ -1,482 +1,592 @@ |
| 1 | 1 |
/* 회원가입 */ |
| 2 |
-.join-box{width: 800px; margin: 0 auto;}
|
|
| 3 |
-.join-box input[type="radio"] {
|
|
| 4 |
- display: inline-block; |
|
| 5 |
- width: 24px !important; |
|
| 6 |
- height: 24px; |
|
| 7 |
- margin: -2px 10px 0 0; |
|
| 8 |
- vertical-align: middle; |
|
| 9 |
- cursor: pointer; |
|
| 10 |
- -moz-border-radius: 50%; |
|
| 11 |
- border-radius: 50%; |
|
| 12 |
- border: 3px solid #ffffff; |
|
| 13 |
- accent-color: #ffba08; |
|
| 2 |
+.join-box {
|
|
| 3 |
+ width: 800px; |
|
| 4 |
+ margin: 0 auto; |
|
| 5 |
+} |
|
| 6 |
+.join-box input[type='radio'] {
|
|
| 7 |
+ display: inline-block; |
|
| 8 |
+ width: 24px !important; |
|
| 9 |
+ height: 24px; |
|
| 10 |
+ margin: -2px 10px 0 0; |
|
| 11 |
+ vertical-align: middle; |
|
| 12 |
+ cursor: pointer; |
|
| 13 |
+ -moz-border-radius: 50%; |
|
| 14 |
+ border-radius: 50%; |
|
| 15 |
+ border: 3px solid #ffffff; |
|
| 16 |
+ accent-color: #ffba08; |
|
| 14 | 17 |
} |
| 15 | 18 |
|
| 16 |
-.find-table tr{
|
|
| 17 |
- border-top: #A3A5AA 1px solid; |
|
| 18 |
- border-bottom: #A3A5AA 1px solid; |
|
| 19 |
+.find-table tr {
|
|
| 20 |
+ border-top: #a3a5aa 1px solid; |
|
| 21 |
+ border-bottom: #a3a5aa 1px solid; |
|
| 19 | 22 |
} |
| 20 |
-.find-table .thead{background-color: #EAEDF4;}
|
|
| 23 |
+.find-table .thead {
|
|
| 24 |
+ background-color: #eaedf4; |
|
| 25 |
+} |
|
| 21 | 26 |
/* 로그인페이지 */ |
| 22 | 27 |
.login-container {
|
| 23 |
- padding: 20px 20px; |
|
| 24 |
- background-image: url('../img/bg.png');
|
|
| 28 |
+ padding: 20px 20px; |
|
| 29 |
+ background-image: url('../img/bg.png');
|
|
| 25 | 30 |
} |
| 26 | 31 |
|
| 27 | 32 |
.login h2 {
|
| 28 |
- font-size: 30px; |
|
| 29 |
- color: #fff; |
|
| 30 |
- font-family: 'ONEMobilePOPOTF'; |
|
| 31 |
- font-weight: 100; |
|
| 33 |
+ font-size: 30px; |
|
| 34 |
+ color: #fff; |
|
| 35 |
+ font-family: 'ONEMobilePOPOTF'; |
|
| 36 |
+ font-weight: 100; |
|
| 32 | 37 |
} |
| 33 | 38 |
|
| 34 |
- |
|
| 35 | 39 |
.login-box {
|
| 36 |
- width: 712px; |
|
| 37 |
- /* height: 560px; */ |
|
| 38 |
- margin: 0 auto; |
|
| 40 |
+ width: 712px; |
|
| 41 |
+ /* height: 560px; */ |
|
| 42 |
+ margin: 0 auto; |
|
| 39 | 43 |
} |
| 40 | 44 |
|
| 41 | 45 |
.login-form {
|
| 42 |
- background-color: #fff; |
|
| 43 |
- padding: 60px 45px; |
|
| 44 |
- border-radius: 20px; |
|
| 46 |
+ background-color: #fff; |
|
| 47 |
+ padding: 60px 45px; |
|
| 48 |
+ border-radius: 20px; |
|
| 45 | 49 |
} |
| 46 | 50 |
|
| 47 | 51 |
.login-form .title {
|
| 48 |
- font-family: 'ONEMobileOTF-Bold'; |
|
| 49 |
- font-size: 24px; |
|
| 50 |
- width: 230px; |
|
| 52 |
+ font-family: 'ONEMobileOTF-Bold'; |
|
| 53 |
+ font-size: 24px; |
|
| 54 |
+ width: 230px; |
|
| 51 | 55 |
} |
| 52 |
-.login-form .help{margin-left: 170px;}
|
|
| 53 |
-.login-form input[type="text"], .login-form input[type="password"] {
|
|
| 54 |
- border: 3px solid #FFD56B; |
|
| 55 |
- border-radius: 10px; |
|
| 56 |
- padding: 22px 19px; |
|
| 57 |
- width: 100%; |
|
| 58 |
- font-size: 24px; |
|
| 56 |
+.login-form .help {
|
|
| 57 |
+ margin-left: 170px; |
|
| 59 | 58 |
} |
| 60 |
-.login-form input:focus {
|
|
| 61 |
- outline: 3px solid #ffba0a; |
|
| 62 |
- border: 0 !important; /* 클릭 시 테두리 색상 변경 */ |
|
| 63 |
-} |
|
| 64 |
-.login-form .search-wrap input[type="text"], .login-form .search-wrap select{
|
|
| 65 |
- border: 3px solid #FFD56B; |
|
| 66 |
- border-radius: 10px; |
|
| 67 |
- padding: 22px 19px; |
|
| 68 |
- width: 100%; |
|
| 69 |
- font-size: 24px;} |
|
| 70 |
- .login-form .search-wrap button{
|
|
| 71 |
- top: 24px; |
|
| 72 |
- right: 2rem; |
|
| 73 |
- } |
|
| 74 |
-.login-btn {
|
|
| 75 |
- position: relative; |
|
| 76 |
-} |
|
| 77 |
- |
|
| 78 |
-.login-btn p {
|
|
| 79 |
- position: absolute; |
|
| 80 |
- top: 42%; |
|
| 81 |
- left: 50%; |
|
| 82 |
- transform: translate(-50%, -50%); |
|
| 83 |
- font-family: 'ONEMobilePOPOTF'; |
|
| 84 |
- font-size: 36px; |
|
| 85 |
-} |
|
| 86 |
- |
|
| 87 |
- |
|
| 88 |
- |
|
| 89 |
-/* ------------------------학생 --------------------- */ |
|
| 90 |
-/* 헤더 */ |
|
| 91 |
-.notice{position: relative; cursor: pointer;}
|
|
| 92 |
-.notice p{position: absolute; top: 3px;
|
|
| 93 |
- right: 6px; color: #fff; font-weight: bold;} |
|
| 94 |
- |
|
| 95 |
- .header article{
|
|
| 96 |
- background-color: #F8F9FB; |
|
| 59 |
+.login-form input[type='text'], |
|
| 60 |
+.login-form input[type='password'] {
|
|
| 61 |
+ border: 3px solid #ffd56b; |
|
| 97 | 62 |
border-radius: 10px; |
| 98 | 63 |
padding: 22px 19px; |
| 99 | 64 |
width: 100%; |
| 100 | 65 |
font-size: 24px; |
| 101 |
- } |
|
| 66 |
+} |
|
| 67 |
+.login-form input:focus {
|
|
| 68 |
+ outline: 3px solid #ffba0a; |
|
| 69 |
+ border: 0 !important; /* 클릭 시 테두리 색상 변경 */ |
|
| 70 |
+} |
|
| 71 |
+.login-form .search-wrap input[type='text'], |
|
| 72 |
+.login-form .search-wrap select {
|
|
| 73 |
+ border: 3px solid #ffd56b; |
|
| 74 |
+ border-radius: 10px; |
|
| 75 |
+ padding: 22px 19px; |
|
| 76 |
+ width: 100%; |
|
| 77 |
+ font-size: 24px; |
|
| 78 |
+} |
|
| 79 |
+.login-form .search-wrap button {
|
|
| 80 |
+ top: 24px; |
|
| 81 |
+ right: 2rem; |
|
| 82 |
+} |
|
| 83 |
+.login-btn {
|
|
| 84 |
+ position: relative; |
|
| 85 |
+} |
|
| 86 |
+ |
|
| 87 |
+.login-btn p {
|
|
| 88 |
+ position: absolute; |
|
| 89 |
+ top: 42%; |
|
| 90 |
+ left: 50%; |
|
| 91 |
+ transform: translate(-50%, -50%); |
|
| 92 |
+ font-family: 'ONEMobilePOPOTF'; |
|
| 93 |
+ font-size: 36px; |
|
| 94 |
+} |
|
| 95 |
+ |
|
| 96 |
+/* ------------------------학생 --------------------- */ |
|
| 97 |
+/* 헤더 */ |
|
| 98 |
+.notice {
|
|
| 99 |
+ position: relative; |
|
| 100 |
+ cursor: pointer; |
|
| 101 |
+} |
|
| 102 |
+.notice p {
|
|
| 103 |
+ position: absolute; |
|
| 104 |
+ top: 3px; |
|
| 105 |
+ right: 6px; |
|
| 106 |
+ color: #fff; |
|
| 107 |
+ font-weight: bold; |
|
| 108 |
+} |
|
| 109 |
+ |
|
| 110 |
+.header article {
|
|
| 111 |
+ background-color: #f8f9fb; |
|
| 112 |
+ border-radius: 10px; |
|
| 113 |
+ padding: 22px 19px; |
|
| 114 |
+ width: 100%; |
|
| 115 |
+ font-size: 24px; |
|
| 116 |
+} |
|
| 102 | 117 |
/* 레이아웃 */ |
| 103 | 118 |
.side {
|
| 104 |
- width: 42rem; |
|
| 119 |
+ width: 42rem; |
|
| 105 | 120 |
} |
| 106 | 121 |
|
| 107 | 122 |
.main-wrap {
|
| 108 |
- box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); |
|
| 109 |
- padding: 50px 40px; |
|
| 123 |
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); |
|
| 124 |
+ padding: 50px 40px; |
|
| 110 | 125 |
} |
| 111 | 126 |
|
| 112 | 127 |
.main-wrap {
|
| 113 |
- width: 134rem; |
|
| 114 |
- height: 70rem; |
|
| 115 |
- background-color: #fff; |
|
| 116 |
- border-radius: 10px; |
|
| 117 |
- position: absolute; |
|
| 118 |
- right: 60px; |
|
| 119 |
- top: 179px; |
|
| 120 |
- z-index: 1; |
|
| 128 |
+ width: 134rem; |
|
| 129 |
+ height: 70rem; |
|
| 130 |
+ background-color: #fff; |
|
| 131 |
+ border-radius: 10px; |
|
| 132 |
+ position: absolute; |
|
| 133 |
+ right: 60px; |
|
| 134 |
+ top: 179px; |
|
| 135 |
+ z-index: 1; |
|
| 121 | 136 |
} |
| 122 | 137 |
|
| 123 | 138 |
.header img {
|
| 124 |
- margin-left: 20px; |
|
| 125 |
- object-fit: contain; |
|
| 139 |
+ margin-left: 20px; |
|
| 140 |
+ object-fit: contain; |
|
| 126 | 141 |
} |
| 127 | 142 |
|
| 128 | 143 |
/* 사이드 */ |
| 129 | 144 |
.side button p {
|
| 130 |
- font-size: 24px; |
|
| 145 |
+ font-size: 24px; |
|
| 131 | 146 |
} |
| 132 | 147 |
|
| 133 | 148 |
.side .profile {
|
| 134 |
- height: 24rem; |
|
| 135 |
- background-color: #fff; |
|
| 136 |
- border-radius: 10px; |
|
| 137 |
- padding: 25px 48px; |
|
| 138 |
- font-size: 16px; |
|
| 139 |
- font-family: 'ONEMobileOTF-Regular'; |
|
| 140 |
- box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); |
|
| 149 |
+ height: 24rem; |
|
| 150 |
+ background-color: #fff; |
|
| 151 |
+ border-radius: 10px; |
|
| 152 |
+ padding: 25px 48px; |
|
| 153 |
+ font-size: 16px; |
|
| 154 |
+ font-family: 'ONEMobileOTF-Regular'; |
|
| 155 |
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); |
|
| 141 | 156 |
} |
| 142 | 157 |
|
| 143 | 158 |
.side .name {
|
| 144 |
- font-family: 'ONEMobilePOPOTF'; |
|
| 145 |
- font-size: 24px; |
|
| 159 |
+ font-family: 'ONEMobilePOPOTF'; |
|
| 160 |
+ font-size: 24px; |
|
| 146 | 161 |
} |
| 147 | 162 |
.name {
|
| 148 |
- font-family: 'ONEMobilePOPOTF'; |
|
| 149 |
- font-size: 24px; |
|
| 163 |
+ font-family: 'ONEMobilePOPOTF'; |
|
| 164 |
+ font-size: 24px; |
|
| 150 | 165 |
} |
| 151 | 166 |
.side .profile img {
|
| 152 |
- object-fit: contain; |
|
| 167 |
+ object-fit: contain; |
|
| 153 | 168 |
} |
| 154 | 169 |
|
| 155 | 170 |
.side .profile span {
|
| 156 |
- font-family: 'Pretendard'; |
|
| 157 |
- font-weight: bold; |
|
| 158 |
- font-size: 14px; |
|
| 171 |
+ font-family: 'Pretendard'; |
|
| 172 |
+ font-weight: bold; |
|
| 173 |
+ font-size: 14px; |
|
| 159 | 174 |
} |
| 160 | 175 |
|
| 161 | 176 |
.side .profile span.brown {
|
| 162 |
- color: #331600; |
|
| 177 |
+ color: #331600; |
|
| 163 | 178 |
} |
| 164 | 179 |
|
| 165 | 180 |
.side .ask {
|
| 166 |
- height: 32rem; |
|
| 167 |
- background-color: #fff; |
|
| 168 |
- border-radius: 10px; |
|
| 169 |
- padding: 25px 48px; |
|
| 170 |
- box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); |
|
| 181 |
+ height: 32rem; |
|
| 182 |
+ background-color: #fff; |
|
| 183 |
+ border-radius: 10px; |
|
| 184 |
+ padding: 25px 48px; |
|
| 185 |
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); |
|
| 171 | 186 |
} |
| 172 | 187 |
|
| 173 | 188 |
.side .ask .memo {
|
| 174 |
- background-image: url('../img/img10_s.png');
|
|
| 175 |
- background-repeat: no-repeat; |
|
| 176 |
- width: 324px; |
|
| 177 |
- height: 174px; |
|
| 178 |
- position: relative; |
|
| 179 |
- padding: 25px 30px; |
|
| 189 |
+ background-image: url('../img/img10_s.png');
|
|
| 190 |
+ background-repeat: no-repeat; |
|
| 191 |
+ width: 324px; |
|
| 192 |
+ height: 174px; |
|
| 193 |
+ position: relative; |
|
| 194 |
+ padding: 25px 30px; |
|
| 180 | 195 |
} |
| 181 | 196 |
|
| 182 | 197 |
.side .ask .memo textarea {
|
| 183 |
- background-color: #ddf0ff; |
|
| 184 |
- width: -webkit-fill-available; |
|
| 185 |
- height: 117px; |
|
| 198 |
+ background-color: #ddf0ff; |
|
| 199 |
+ width: -webkit-fill-available; |
|
| 200 |
+ height: 117px; |
|
| 186 | 201 |
} |
| 187 | 202 |
|
| 188 | 203 |
.side .ask button {
|
| 189 |
- padding: 10px 30px; |
|
| 190 |
- border: #FFD56B 3px solid; |
|
| 191 |
- border-radius: 30px; |
|
| 192 |
- font-family: 'ONEMobilePOPOTF'; |
|
| 193 |
- font-size: 18px; |
|
| 194 |
- color: #331600; |
|
| 204 |
+ padding: 10px 30px; |
|
| 205 |
+ border: #ffd56b 3px solid; |
|
| 206 |
+ border-radius: 30px; |
|
| 207 |
+ font-family: 'ONEMobilePOPOTF'; |
|
| 208 |
+ font-size: 18px; |
|
| 209 |
+ color: #331600; |
|
| 195 | 210 |
} |
| 196 |
- |
|
| 197 | 211 |
|
| 198 | 212 |
/* 메뉴 */ |
| 199 | 213 |
.menu {
|
| 200 |
- margin-top: 63px; |
|
| 201 |
- width: 1324px; |
|
| 202 |
- position: absolute; |
|
| 203 |
- left: 579px; |
|
| 214 |
+ margin-top: 63px; |
|
| 215 |
+ width: 1324px; |
|
| 216 |
+ position: absolute; |
|
| 217 |
+ left: 579px; |
|
| 204 | 218 |
} |
| 205 | 219 |
|
| 206 | 220 |
.menu a:first-child button {
|
| 207 |
- background-image: url('../../resources/img/btn04_s.png');
|
|
| 208 |
- width: 186px; |
|
| 221 |
+ /* background-image: url('../../resources/img/btn04_s.png'); */
|
|
| 222 |
+ color: #6327b9; |
|
| 223 |
+ width: 186px; |
|
| 209 | 224 |
} |
| 210 | 225 |
|
| 211 | 226 |
.menu a:nth-child(2) button {
|
| 212 |
- background-image: url('../../resources/img/btn06_s.png');
|
|
| 213 |
- width: 225px; |
|
| 227 |
+ background-image: url('../../resources/img/btn06_s.png');
|
|
| 228 |
+ width: 225px; |
|
| 214 | 229 |
} |
| 215 | 230 |
|
| 216 | 231 |
.menu a:last-child button {
|
| 217 |
- background-image: url('../../resources/img/btn05_s.png');
|
|
| 218 |
- width: 207px; |
|
| 232 |
+ background-image: url('../../resources/img/btn05_s.png');
|
|
| 233 |
+ width: 207px; |
|
| 219 | 234 |
} |
| 220 | 235 |
|
| 221 | 236 |
.menu a:first-child button.active {
|
| 222 |
- background-image: url('../../resources/img/btn04_1_s.png');
|
|
| 223 |
- width: 252px; |
|
| 224 |
- /* 마이페이지 활성화 이미지 */ |
|
| 237 |
+ background-image: url('../../resources/img/btn04_1_s.png');
|
|
| 238 |
+ width: 252px; |
|
| 239 |
+ /* 마이페이지 활성화 이미지 */ |
|
| 225 | 240 |
} |
| 226 | 241 |
|
| 227 | 242 |
.menu a:nth-child(2) button.active {
|
| 228 |
- background-image: url('../../resources/img/btn06_1_s.png');
|
|
| 229 |
- width: 297px; |
|
| 230 |
- /* 대시보드 활성화 이미지 */ |
|
| 243 |
+ background-image: url('../../resources/img/btn06_1_s.png');
|
|
| 244 |
+ width: 297px; |
|
| 245 |
+ /* 대시보드 활성화 이미지 */ |
|
| 231 | 246 |
} |
| 232 | 247 |
|
| 233 | 248 |
.menu a:last-child button.active {
|
| 234 |
- background-image: url('../../resources/img/btn05_1_s.png');
|
|
| 235 |
- width: 259px; |
|
| 236 |
- /* 학습일정계획 활성화 이미지 */ |
|
| 249 |
+ background-image: url('../../resources/img/btn05_1_s.png');
|
|
| 250 |
+ width: 259px; |
|
| 251 |
+ /* 학습일정계획 활성화 이미지 */ |
|
| 237 | 252 |
} |
| 238 | 253 |
|
| 239 | 254 |
.menu button p {
|
| 240 |
- font-size: 32px; |
|
| 241 |
- color: #fff; |
|
| 242 |
- height: 50px; |
|
| 255 |
+ font-size: 32px; |
|
| 256 |
+ color: #fff; |
|
| 257 |
+ height: 50px; |
|
| 243 | 258 |
} |
| 244 | 259 |
|
| 245 | 260 |
.menu button {
|
| 246 |
- background-repeat: no-repeat; |
|
| 247 |
- height: 72px; |
|
| 248 |
- text-align: -webkit-center; |
|
| 261 |
+ background-repeat: no-repeat; |
|
| 262 |
+ height: 72px; |
|
| 263 |
+ text-align: -webkit-center; |
|
| 249 | 264 |
} |
| 250 | 265 |
|
| 251 | 266 |
.menu button.active {
|
| 252 |
- height: 118px; |
|
| 253 |
- margin-top: -18px; |
|
| 267 |
+ height: 118px; |
|
| 268 |
+ margin-top: -18px; |
|
| 254 | 269 |
} |
| 255 | 270 |
|
| 256 | 271 |
.menu button p.active {
|
| 257 |
- display: none; |
|
| 258 |
- /* 원하는 색상으로 변경 */ |
|
| 272 |
+ display: none; |
|
| 273 |
+ /* 원하는 색상으로 변경 */ |
|
| 259 | 274 |
} |
| 260 | 275 |
/* 마이페이지 */ |
| 261 |
-.look-btn{cursor: pointer;}
|
|
| 276 |
+.look-btn {
|
|
| 277 |
+ cursor: pointer; |
|
| 278 |
+} |
|
| 262 | 279 |
.mypage .class {
|
| 263 |
- background-image: url('../img/btn46_12s_normal.png');
|
|
| 264 |
- width: 286px; |
|
| 265 |
- height: 114px; |
|
| 266 |
- padding: 11px 25px 40px 25px; |
|
| 267 |
- cursor: pointer; |
|
| 280 |
+ background-image: url('../img/btn46_12s_normal.png');
|
|
| 281 |
+ width: 286px; |
|
| 282 |
+ height: 114px; |
|
| 283 |
+ padding: 11px 25px 40px 25px; |
|
| 284 |
+ cursor: pointer; |
|
| 268 | 285 |
} |
| 269 | 286 |
|
| 270 | 287 |
.mypage .class img {
|
| 271 |
- width: 35px; |
|
| 272 |
- height: 100%; |
|
| 288 |
+ width: 35px; |
|
| 289 |
+ height: 100%; |
|
| 273 | 290 |
} |
| 274 |
-.mypage .class .box{background-color: transparent; padding: 0;}
|
|
| 275 |
-.mypage .class .box > div {height: 35px;}
|
|
| 276 |
-.mypage .photobook{
|
|
| 277 |
- background-image: url('../img/img199_12p.png');
|
|
| 278 |
- width: 367px; |
|
| 279 |
- height: 182px; |
|
| 280 |
- padding: 20px 50px 20px 40px; |
|
| 281 |
- color: #fff; |
|
| 291 |
+.mypage .class .box {
|
|
| 292 |
+ background-color: transparent; |
|
| 293 |
+ padding: 0; |
|
| 282 | 294 |
} |
| 283 |
-.mypage .textbook{font-family: 'ONEMobilePOPOTF';}
|
|
| 284 |
-.mypage .photobook .title1{font-family: 'ONEMobilePOPOTF'; font-weight: 100;}
|
|
| 285 |
-.mypage .textbook .text {border-radius: 12px 12px 0px 0px; height: 68px;
|
|
| 295 |
+.mypage .class .box > div {
|
|
| 296 |
+ height: 35px; |
|
| 286 | 297 |
} |
| 287 |
-.mypage .textbook .box{height: fit-content; text-align: center; padding: 10px;}
|
|
| 288 |
-.mypage .book-red .text{background-color: #DB2B39;}
|
|
| 298 |
+.mypage .photobook {
|
|
| 299 |
+ background-image: url('../img/img199_12p.png');
|
|
| 300 |
+ width: 367px; |
|
| 301 |
+ height: 182px; |
|
| 302 |
+ padding: 20px 50px 20px 40px; |
|
| 303 |
+ color: #fff; |
|
| 304 |
+} |
|
| 305 |
+.mypage .textbook {
|
|
| 306 |
+ font-family: 'ONEMobilePOPOTF'; |
|
| 307 |
+} |
|
| 308 |
+.mypage .photobook .title1 {
|
|
| 309 |
+ font-family: 'ONEMobilePOPOTF'; |
|
| 310 |
+ font-weight: 100; |
|
| 311 |
+} |
|
| 312 |
+.mypage .textbook .text {
|
|
| 313 |
+ border-radius: 12px 12px 0px 0px; |
|
| 314 |
+ height: 68px; |
|
| 315 |
+} |
|
| 316 |
+.mypage .textbook .box {
|
|
| 317 |
+ height: fit-content; |
|
| 318 |
+ text-align: center; |
|
| 319 |
+ padding: 10px; |
|
| 320 |
+} |
|
| 321 |
+.mypage .book-red .text {
|
|
| 322 |
+ background-color: #db2b39; |
|
| 323 |
+} |
|
| 289 | 324 |
/* .mypage .textbook:nth-child(2) .text */ |
| 290 |
-.mypage .book-blue .text{background-color:#2D7DD2;}
|
|
| 291 |
-.mypage .book-navy .text{ background-color: #3066BE;}
|
|
| 292 |
-.mypage .book-gray > .text{ background-color: #F7F8F9;}
|
|
| 293 |
-.mypage .textbook .box{ text-align: center; padding: 10px;}
|
|
| 294 |
-.mypage .book-red{border: #DB2B39 solid 6px;}
|
|
| 325 |
+.mypage .book-blue .text {
|
|
| 326 |
+ background-color: #2d7dd2; |
|
| 327 |
+} |
|
| 328 |
+.mypage .book-navy .text {
|
|
| 329 |
+ background-color: #3066be; |
|
| 330 |
+} |
|
| 331 |
+.mypage .book-gray > .text {
|
|
| 332 |
+ background-color: #f7f8f9; |
|
| 333 |
+} |
|
| 334 |
+ |
|
| 335 |
+.mypage .book-purple > .text {
|
|
| 336 |
+ background-color: #9528b7; |
|
| 337 |
+} |
|
| 338 |
+ |
|
| 339 |
+.mypage .textbook .box {
|
|
| 340 |
+ text-align: center; |
|
| 341 |
+ padding: 10px; |
|
| 342 |
+} |
|
| 343 |
+.mypage .book-red {
|
|
| 344 |
+ border: #db2b39 solid 6px; |
|
| 345 |
+} |
|
| 295 | 346 |
/* .mypage .textbook:nth-child(2) .text */ |
| 296 |
-.mypage .book-blue{border:#2D7DD2 solid 6px;}
|
|
| 297 |
-.mypage .book-navy{ border: #3066BE solid 6px;}
|
|
| 298 |
-.mypage .book-gray{ border: #8C8E92 solid 1px;}
|
|
| 347 |
+.mypage .book-blue {
|
|
| 348 |
+ border: #2d7dd2 solid 6px; |
|
| 349 |
+} |
|
| 350 |
+.mypage .book-navy {
|
|
| 351 |
+ border: #3066be solid 6px; |
|
| 352 |
+} |
|
| 353 |
+.mypage .book-gray {
|
|
| 354 |
+ border: #8c8e92 solid 1px; |
|
| 355 |
+} |
|
| 356 |
+.mypage .book-purple {
|
|
| 357 |
+ border: #9528b7 solid 6px; |
|
| 358 |
+} |
|
| 359 |
+ |
|
| 299 | 360 |
.mypage em.orange {
|
| 300 |
- color: #FFBA08; |
|
| 361 |
+ color: #ffba08; |
|
| 301 | 362 |
} |
| 302 | 363 |
|
| 303 | 364 |
.mypage em.navy {
|
| 304 |
- color: #3066BE; |
|
| 365 |
+ color: #3066be; |
|
| 305 | 366 |
} |
| 306 | 367 |
|
| 307 | 368 |
.mypage em.blue {
|
| 308 |
- color:#2D7DD2; |
|
| 369 |
+ color: #2d7dd2; |
|
| 309 | 370 |
} |
| 310 | 371 |
|
| 311 | 372 |
.mypage em.red {
|
| 312 |
- color: #DB2B39; |
|
| 373 |
+ color: #db2b39; |
|
| 313 | 374 |
} |
| 314 | 375 |
|
| 315 |
-.myphoto >div{
|
|
| 316 |
- |
|
| 317 |
- background-image: url('../img/img207_15s.png');
|
|
| 318 |
- width: 1011px; |
|
| 319 |
- height: 558px; |
|
| 320 |
- padding: 30px 60px; |
|
| 321 |
- margin: 0 auto; |
|
| 376 |
+.mypage em.purple {
|
|
| 377 |
+ color: #9528b7; |
|
| 322 | 378 |
} |
| 323 |
-.tab-btn{position: relative; color: #568BFA;}
|
|
| 324 |
-.tab-btn p.custom-style{color: #FFF;}
|
|
| 379 |
+ |
|
| 380 |
+.myphoto > div {
|
|
| 381 |
+ background-image: url('../img/img207_15s.png');
|
|
| 382 |
+ width: 1011px; |
|
| 383 |
+ height: 558px; |
|
| 384 |
+ padding: 30px 60px; |
|
| 385 |
+ margin: 0 auto; |
|
| 386 |
+} |
|
| 387 |
+.tab-btn {
|
|
| 388 |
+ position: relative; |
|
| 389 |
+ color: #568bfa; |
|
| 390 |
+} |
|
| 391 |
+.tab-btn p.custom-style {
|
|
| 392 |
+ color: #fff; |
|
| 393 |
+} |
|
| 325 | 394 |
|
| 326 | 395 |
.tab-btn p {
|
| 327 |
- position: absolute; |
|
| 328 |
- top: 46%; |
|
| 329 |
- right: 7%; |
|
| 330 |
- transform: translate(-50%, -50%); |
|
| 331 |
- font-family: 'ONEMobilePOPOTF'; |
|
| 332 |
- font-size: 36px; |
|
| 333 |
- |
|
| 396 |
+ position: absolute; |
|
| 397 |
+ top: 46%; |
|
| 398 |
+ right: 7%; |
|
| 399 |
+ transform: translate(-50%, -50%); |
|
| 400 |
+ font-family: 'ONEMobilePOPOTF'; |
|
| 401 |
+ font-size: 36px; |
|
| 334 | 402 |
} |
| 335 |
-.myphoto .btnGroup{
|
|
| 336 |
- width: max-content; |
|
| 403 |
+.myphoto .btnGroup {
|
|
| 404 |
+ width: max-content; |
|
| 337 | 405 |
position: absolute; |
| 338 | 406 |
right: 45px; |
| 339 | 407 |
z-index: 10000; |
| 340 | 408 |
} |
| 341 |
-.myphoto .class{border-radius: 0px; padding: 10px;}
|
|
| 409 |
+.myphoto .class {
|
|
| 410 |
+ border-radius: 0px; |
|
| 411 |
+ padding: 10px; |
|
| 412 |
+} |
|
| 342 | 413 |
.myphoto .class .box {
|
| 343 |
- background-color: transparent; |
|
| 344 |
- border-radius: 0px; |
|
| 345 |
- padding: 0; |
|
| 414 |
+ background-color: transparent; |
|
| 415 |
+ border-radius: 0px; |
|
| 416 |
+ padding: 0; |
|
| 346 | 417 |
} |
| 347 |
-.myphoto .class .member::before{content: ""; background-image: url('../img/btn47_15s_normal.png'); width: 16px; height: 14px; position: absolute; left: -28px; top: 4px;}
|
|
| 348 |
-.myphoto .photo{cursor: pointer; }
|
|
| 349 |
-.myphoto .photo .title2{color: #8C8E92;}
|
|
| 350 |
-.myphoto .tab-box{
|
|
| 351 |
- margin: 40px 0px 20px 50px; |
|
| 418 |
+.myphoto .class .member::before {
|
|
| 419 |
+ content: ''; |
|
| 420 |
+ background-image: url('../img/btn47_15s_normal.png');
|
|
| 421 |
+ width: 16px; |
|
| 422 |
+ height: 14px; |
|
| 423 |
+ position: absolute; |
|
| 424 |
+ left: -28px; |
|
| 425 |
+ top: 4px; |
|
| 352 | 426 |
} |
| 353 |
-.myphoto .photo:hover .class {transform: rotate(2deg);}
|
|
| 354 |
-.myphoto .popup-wrap .date{position: relative;}
|
|
| 355 |
-.myphoto .popup-wrap .date::before{content: ""; background-image: url('../img/img183_91t.png'); width: 20px; height: 22px; position: absolute; left: -28px;
|
|
| 427 |
+.myphoto .photo {
|
|
| 428 |
+ cursor: pointer; |
|
| 429 |
+} |
|
| 430 |
+.myphoto .photo .title2 {
|
|
| 431 |
+ color: #8c8e92; |
|
| 432 |
+} |
|
| 433 |
+.myphoto .tab-box {
|
|
| 434 |
+ margin: 40px 0px 20px 50px; |
|
| 435 |
+} |
|
| 436 |
+.myphoto .photo:hover .class {
|
|
| 437 |
+ transform: rotate(2deg); |
|
| 438 |
+} |
|
| 439 |
+.myphoto .popup-wrap .date {
|
|
| 440 |
+ position: relative; |
|
| 441 |
+} |
|
| 442 |
+.myphoto .popup-wrap .date::before {
|
|
| 443 |
+ content: ''; |
|
| 444 |
+ background-image: url('../img/img183_91t.png');
|
|
| 445 |
+ width: 20px; |
|
| 446 |
+ height: 22px; |
|
| 447 |
+ position: absolute; |
|
| 448 |
+ left: -28px; |
|
| 356 | 449 |
} |
| 357 | 450 |
/* 학습일정계획 */ |
| 358 |
-.myplan .popup-wrap article{max-height: 400px; overflow-x: auto;}
|
|
| 359 |
-.myplan{padding-right: 10px;}
|
|
| 360 |
-.myplan .yellow-box{
|
|
| 361 |
- background-color: #FFF8E9; |
|
| 362 |
- border: 1px solid #FFBA08; |
|
| 451 |
+.myplan .popup-wrap article {
|
|
| 452 |
+ max-height: 400px; |
|
| 453 |
+ overflow-x: auto; |
|
| 454 |
+} |
|
| 455 |
+.myplan {
|
|
| 456 |
+ padding-right: 10px; |
|
| 457 |
+} |
|
| 458 |
+.myplan .yellow-box {
|
|
| 459 |
+ background-color: #fff8e9; |
|
| 460 |
+ border: 1px solid #ffba08; |
|
| 363 | 461 |
padding: 4rem; |
| 364 | 462 |
position: relative; |
| 365 | 463 |
border-radius: 10px; |
| 366 | 464 |
} |
| 367 |
-.yellow-btn{
|
|
| 368 |
- background-image: url('../img/btn08_s.png');
|
|
| 369 |
- width: 181px; |
|
| 370 |
- height: 60px; |
|
| 371 |
- padding: 5px 20px; |
|
| 465 |
+.yellow-btn {
|
|
| 466 |
+ background-image: url('../img/btn08_s.png');
|
|
| 467 |
+ width: 181px; |
|
| 468 |
+ height: 60px; |
|
| 469 |
+ padding: 5px 20px; |
|
| 372 | 470 |
font-size: 28px; |
| 373 | 471 |
font-family: 'ONEMobilePOP'; |
| 374 | 472 |
} |
| 375 |
-.myplan .table-wrap .title2{color: #464749;}
|
|
| 376 |
-.myplan input[type="checkbox"]{width: 30px; height: 30px;}
|
|
| 377 |
-.myplan .ui-checkbox::before {width: 11px; height: 14px;}
|
|
| 378 |
-.myplan table tr {
|
|
| 379 |
- border-top: #C6C6C6 1px solid; |
|
| 380 |
- border-bottom: #C6C6C6 1px solid; |
|
| 473 |
+.myplan .table-wrap .title2 {
|
|
| 474 |
+ color: #464749; |
|
| 381 | 475 |
} |
| 382 |
-.myplan .imgGroup img{width: 349px; height: 312px;}
|
|
| 476 |
+.myplan input[type='checkbox'] {
|
|
| 477 |
+ width: 30px; |
|
| 478 |
+ height: 30px; |
|
| 479 |
+} |
|
| 480 |
+.myplan .ui-checkbox::before {
|
|
| 481 |
+ width: 11px; |
|
| 482 |
+ height: 14px; |
|
| 483 |
+} |
|
| 484 |
+.myplan table tr {
|
|
| 485 |
+ border-top: #c6c6c6 1px solid; |
|
| 486 |
+ border-bottom: #c6c6c6 1px solid; |
|
| 487 |
+} |
|
| 488 |
+.myplan .imgGroup img {
|
|
| 489 |
+ width: 349px; |
|
| 490 |
+ height: 312px; |
|
| 491 |
+} |
|
| 383 | 492 |
/* 대시보드 */ |
| 384 | 493 |
.main {
|
| 385 |
- max-height: 600px; |
|
| 386 |
- overflow: auto; |
|
| 494 |
+ max-height: 600px; |
|
| 495 |
+ overflow: auto; |
|
| 387 | 496 |
} |
| 388 | 497 |
|
| 389 | 498 |
.main .race-wrap {
|
| 390 |
- background-image: url('../img/img20_1_s.png');
|
|
| 391 |
- background-repeat: no-repeat; |
|
| 392 |
- width: 1242px; |
|
| 393 |
- height: 599px; |
|
| 394 |
- position: relative; |
|
| 499 |
+ background-image: url('../img/img20_1_s.png');
|
|
| 500 |
+ background-repeat: no-repeat; |
|
| 501 |
+ width: 1242px; |
|
| 502 |
+ height: 599px; |
|
| 503 |
+ position: relative; |
|
| 395 | 504 |
} |
| 396 | 505 |
|
| 397 | 506 |
.complete-wrap {
|
| 398 |
- width: 1244px; |
|
| 399 |
- height: 617px; |
|
| 507 |
+ width: 1244px; |
|
| 508 |
+ height: 617px; |
|
| 400 | 509 |
} |
| 401 | 510 |
|
| 402 | 511 |
button p {
|
| 403 |
- font-family: 'ONEMobilePOPOTF'; |
|
| 404 |
- width: max-content; |
|
| 512 |
+ font-family: 'ONEMobilePOPOTF'; |
|
| 513 |
+ width: max-content; |
|
| 405 | 514 |
} |
| 406 | 515 |
|
| 407 | 516 |
.race-wrap .title-box {
|
| 408 |
- position: absolute; |
|
| 409 |
- top: -3px; |
|
| 410 |
- left: 50px; |
|
| 411 |
- text-align: center; |
|
| 412 |
- background-image: url('../img/img15_s.png');
|
|
| 413 |
- width: 336px; |
|
| 414 |
- height: 145px; |
|
| 517 |
+ position: absolute; |
|
| 518 |
+ top: -3px; |
|
| 519 |
+ left: 50px; |
|
| 520 |
+ text-align: center; |
|
| 521 |
+ background-image: url('../img/img15_s.png');
|
|
| 522 |
+ width: 336px; |
|
| 523 |
+ height: 145px; |
|
| 415 | 524 |
} |
| 416 | 525 |
|
| 417 | 526 |
.race-wrap .title-box .title {
|
| 418 |
- font-size: 32px; |
|
| 419 |
- font-family: 'ONEMobilePOPOTF'; |
|
| 527 |
+ font-size: 32px; |
|
| 528 |
+ font-family: 'ONEMobilePOPOTF'; |
|
| 420 | 529 |
} |
| 421 | 530 |
|
| 422 | 531 |
.race-wrap .title-box .subtitle {
|
| 423 |
- font-size: 16px; |
|
| 424 |
- background-color: #441E03; |
|
| 425 |
- color: #fff; |
|
| 426 |
- padding: 5px 15px; |
|
| 427 |
- width: fit-content; |
|
| 428 |
- border-radius: 20px; |
|
| 429 |
- display: inline-block; |
|
| 430 |
- font-family: 'ONEMobileOTF-Bold'; |
|
| 532 |
+ font-size: 16px; |
|
| 533 |
+ background-color: #441e03; |
|
| 534 |
+ color: #fff; |
|
| 535 |
+ padding: 5px 15px; |
|
| 536 |
+ width: fit-content; |
|
| 537 |
+ border-radius: 20px; |
|
| 538 |
+ display: inline-block; |
|
| 539 |
+ font-family: 'ONEMobileOTF-Bold'; |
|
| 431 | 540 |
} |
| 432 |
-.race-wrap .title-box .subtitle2{}
|
|
| 541 |
+.race-wrap .title-box .subtitle2 {
|
|
| 542 |
+} |
|
| 433 | 543 |
.race-box {
|
| 434 |
- width: 1063px; |
|
| 435 |
- height: 516px; |
|
| 436 |
- position: absolute; |
|
| 437 |
- left: 114px; |
|
| 438 |
- top: 60px; |
|
| 544 |
+ width: 1063px; |
|
| 545 |
+ height: 516px; |
|
| 546 |
+ position: absolute; |
|
| 547 |
+ left: 114px; |
|
| 548 |
+ top: 60px; |
|
| 439 | 549 |
} |
| 440 | 550 |
|
| 441 | 551 |
.race-box .rcon, |
| 442 | 552 |
.race-box .lcon {
|
| 443 |
- gap: 42px; |
|
| 444 |
- width: 1063px; |
|
| 553 |
+ gap: 42px; |
|
| 554 |
+ width: 1063px; |
|
| 445 | 555 |
} |
| 446 | 556 |
|
| 447 | 557 |
.rabbit-start {
|
| 448 |
- position: absolute; |
|
| 449 |
- top: -45px; |
|
| 450 |
- left: 393px; |
|
| 558 |
+ position: absolute; |
|
| 559 |
+ top: -45px; |
|
| 560 |
+ left: 393px; |
|
| 451 | 561 |
} |
| 452 | 562 |
.rabbit-end {
|
| 453 |
- position: absolute; |
|
| 454 |
- bottom: 24px; |
|
| 563 |
+ position: absolute; |
|
| 564 |
+ bottom: 24px; |
|
| 455 | 565 |
right: 40px; |
| 456 | 566 |
} |
| 457 | 567 |
|
| 458 | 568 |
.rabbit img {
|
| 459 |
- transform: scaleX(-1); |
|
| 569 |
+ transform: scaleX(-1); |
|
| 460 | 570 |
} |
| 461 | 571 |
|
| 462 | 572 |
.race-btn {
|
| 463 |
- position: relative; |
|
| 464 |
- cursor: pointer; |
|
| 573 |
+ position: relative; |
|
| 574 |
+ cursor: pointer; |
|
| 465 | 575 |
} |
| 466 | 576 |
|
| 467 | 577 |
.race-btn p {
|
| 468 |
- position: absolute; |
|
| 469 |
- text-align: center; |
|
| 470 |
- width: 76px; |
|
| 471 |
- top: 16px; |
|
| 472 |
- right: 9px; |
|
| 473 |
- font-family: 'ONEMobilePOPOTF'; |
|
| 474 |
- font-size: 28px; |
|
| 475 |
- color: #3A241D; |
|
| 578 |
+ position: absolute; |
|
| 579 |
+ text-align: center; |
|
| 580 |
+ width: 76px; |
|
| 581 |
+ top: 16px; |
|
| 582 |
+ right: 9px; |
|
| 583 |
+ font-family: 'ONEMobilePOPOTF'; |
|
| 584 |
+ font-size: 28px; |
|
| 585 |
+ color: #3a241d; |
|
| 476 | 586 |
} |
| 477 | 587 |
|
| 478 | 588 |
.race-btn p.long {
|
| 479 |
- width: fit-content; |
|
| 589 |
+ width: fit-content; |
|
| 480 | 590 |
} |
| 481 | 591 |
/* .popup-yellow{
|
| 482 | 592 |
background-image: url('../img/img139_72s.png');
|
... | ... | @@ -486,457 +596,642 @@ |
| 486 | 596 |
border: 0 !important; |
| 487 | 597 |
} */ |
| 488 | 598 |
/* 사진촬영 */ |
| 489 |
-.camera{background-color: #000;}
|
|
| 490 |
-.camera .header{height: 110px; background-color: #eaedf4; padding: 0 60px;}
|
|
| 491 |
-.camera .body{width: 1435px; height: 810px; margin: 0 auto;}
|
|
| 492 |
-.stickers button{margin: 5px; text-align: center;}
|
|
| 493 |
-.frame{
|
|
| 494 |
- background-image: url('../img/img142_76s.png');
|
|
| 495 |
- width: 993px; |
|
| 496 |
- height: 634px; |
|
| 497 |
- padding: 55px; |
|
| 498 |
- text-align: center; |
|
| 599 |
+.camera {
|
|
| 600 |
+ background-color: #000; |
|
| 499 | 601 |
} |
| 500 |
-.frame .photo{
|
|
| 501 |
- width: 845px; |
|
| 502 |
- height: 476px; |
|
| 503 |
- margin: 0 auto; |
|
| 602 |
+.camera .header {
|
|
| 603 |
+ height: 110px; |
|
| 604 |
+ background-color: #eaedf4; |
|
| 605 |
+ padding: 0 60px; |
|
| 504 | 606 |
} |
| 505 |
-.frame .photo img{
|
|
| 506 |
- width: inherit; |
|
| 607 |
+.camera .body {
|
|
| 608 |
+ width: 1435px; |
|
| 609 |
+ height: 810px; |
|
| 610 |
+ margin: 0 auto; |
|
| 611 |
+} |
|
| 612 |
+.stickers button {
|
|
| 613 |
+ margin: 5px; |
|
| 614 |
+ text-align: center; |
|
| 615 |
+} |
|
| 616 |
+.frame {
|
|
| 617 |
+ background-image: url('../img/img142_76s.png');
|
|
| 618 |
+ width: 993px; |
|
| 619 |
+ height: 634px; |
|
| 620 |
+ padding: 55px; |
|
| 621 |
+ text-align: center; |
|
| 622 |
+} |
|
| 623 |
+.frame .photo {
|
|
| 624 |
+ width: 845px; |
|
| 625 |
+ height: 476px; |
|
| 626 |
+ margin: 0 auto; |
|
| 627 |
+} |
|
| 628 |
+.frame .photo img {
|
|
| 629 |
+ width: inherit; |
|
| 507 | 630 |
} |
| 508 | 631 |
/* 학습을 마친 친구들 */ |
| 509 | 632 |
.complete-wrap h2 {
|
| 510 |
- font-size: 32px; |
|
| 511 |
- color: #331600; |
|
| 512 |
- font-family: 'ONEMobilePOPOTF'; |
|
| 513 |
- font-weight: 100; |
|
| 633 |
+ font-size: 32px; |
|
| 634 |
+ color: #331600; |
|
| 635 |
+ font-family: 'ONEMobilePOPOTF'; |
|
| 636 |
+ font-weight: 100; |
|
| 514 | 637 |
} |
| 515 |
-.complete-wrap img{width: inherit;}
|
|
| 516 |
-.complete-wrap .photo{cursor: pointer; width: 200px; height: 130px; }
|
|
| 638 |
+.complete-wrap img {
|
|
| 639 |
+ width: inherit; |
|
| 640 |
+} |
|
| 641 |
+.complete-wrap .photo {
|
|
| 642 |
+ cursor: pointer; |
|
| 643 |
+ width: 200px; |
|
| 644 |
+ height: 130px; |
|
| 645 |
+} |
|
| 517 | 646 |
/* 챕터 */ |
| 518 |
-.time-hint{
|
|
| 519 |
- position: absolute; |
|
| 520 |
- top: 50px; |
|
| 521 |
- right: 50px; |
|
| 522 |
- text-align: center; |
|
| 647 |
+.time-hint {
|
|
| 648 |
+ position: absolute; |
|
| 649 |
+ top: 50px; |
|
| 650 |
+ right: 50px; |
|
| 651 |
+ text-align: center; |
|
| 523 | 652 |
} |
| 524 |
-.hint-btn{
|
|
| 525 |
- background-image: url('../img/btn01.png');
|
|
| 526 |
- width: 110px; |
|
| 527 |
- height: 45px; |
|
| 528 |
- padding: 5px 20px; |
|
| 653 |
+.hint-btn {
|
|
| 654 |
+ background-image: url('../img/btn01.png');
|
|
| 655 |
+ width: 110px; |
|
| 656 |
+ height: 45px; |
|
| 657 |
+ padding: 5px 20px; |
|
| 529 | 658 |
font-size: 28px; |
| 530 | 659 |
font-family: 'ONEMobilePOP'; |
| 531 | 660 |
} |
| 532 | 661 |
.content-wrap {
|
| 533 |
- margin: 10px 60px 0 60px; |
|
| 534 |
- |
|
| 662 |
+ margin: 10px 60px 0 60px; |
|
| 535 | 663 |
} |
| 536 | 664 |
|
| 537 | 665 |
.content-wrap::before {
|
| 538 |
- /* background-image: url('../img/logo2.png'); */
|
|
| 539 |
- background-size: 155px 58px; |
|
| 540 |
- width: 155px; |
|
| 541 |
- height: 58px; |
|
| 542 |
- content: ""; |
|
| 543 |
- display: block; |
|
| 544 |
- position: absolute; |
|
| 545 |
- top: -72px; |
|
| 666 |
+ /* background-image: url('../img/logo2.png'); */
|
|
| 667 |
+ background-size: 155px 58px; |
|
| 668 |
+ width: 155px; |
|
| 669 |
+ height: 58px; |
|
| 670 |
+ content: ''; |
|
| 671 |
+ display: block; |
|
| 672 |
+ position: absolute; |
|
| 673 |
+ top: -72px; |
|
| 546 | 674 |
} |
| 547 | 675 |
|
| 548 |
-.content-wrap>.title-box {
|
|
| 549 |
- margin-left: 75px; |
|
| 676 |
+.content-wrap > .title-box {
|
|
| 677 |
+ margin-left: 75px; |
|
| 550 | 678 |
} |
| 551 | 679 |
|
| 552 | 680 |
.content p.title-bg {
|
| 553 |
- width: max-content; |
|
| 554 |
- height: max-content; |
|
| 555 |
- background: linear-gradient(to right, #eaedf4, rgba(255, 255, 255, 0)); |
|
| 556 |
- padding: 20px 60px; |
|
| 557 |
- margin-bottom: 30px; |
|
| 681 |
+ width: max-content; |
|
| 682 |
+ height: max-content; |
|
| 683 |
+ background: linear-gradient(to right, #eaedf4, rgba(255, 255, 255, 0)); |
|
| 684 |
+ padding: 20px 60px; |
|
| 685 |
+ margin-bottom: 30px; |
|
| 558 | 686 |
} |
| 559 | 687 |
|
| 560 |
- |
|
| 561 | 688 |
.content {
|
| 562 |
- position: relative; |
|
| 563 |
- box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.1); |
|
| 564 |
- width: 93%; |
|
| 565 |
- height: 710px; |
|
| 566 |
- background-color: #fff; |
|
| 567 |
- border-radius: 20px; |
|
| 689 |
+ position: relative; |
|
| 690 |
+ box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.1); |
|
| 691 |
+ width: 93%; |
|
| 692 |
+ height: 710px; |
|
| 693 |
+ background-color: #fff; |
|
| 694 |
+ border-radius: 20px; |
|
| 568 | 695 |
} |
| 569 | 696 |
|
| 570 | 697 |
/* step1 */ |
| 571 | 698 |
.videoCon {
|
| 572 |
- position: relative; |
|
| 573 |
- text-align: center; |
|
| 574 |
- width: 100%; |
|
| 575 |
- display: inline-block; |
|
| 699 |
+ position: relative; |
|
| 700 |
+ text-align: center; |
|
| 701 |
+ width: 100%; |
|
| 702 |
+ display: inline-block; |
|
| 576 | 703 |
} |
| 577 | 704 |
|
| 578 |
- |
|
| 579 | 705 |
.videoCon .videoStart {
|
| 580 |
- position: absolute; |
|
| 581 |
- top: 50%; |
|
| 582 |
- left: 50%; |
|
| 583 |
- transform: translateY(-50%) translateX(-50%); |
|
| 706 |
+ position: absolute; |
|
| 707 |
+ top: 50%; |
|
| 708 |
+ left: 50%; |
|
| 709 |
+ transform: translateY(-50%) translateX(-50%); |
|
| 584 | 710 |
} |
| 585 | 711 |
|
| 586 | 712 |
.look-text {
|
| 587 |
- position: absolute; |
|
| 588 |
- right: 60px; |
|
| 589 |
- bottom: 0; |
|
| 713 |
+ position: absolute; |
|
| 714 |
+ right: 60px; |
|
| 715 |
+ bottom: 0; |
|
| 590 | 716 |
} |
| 591 | 717 |
|
| 592 | 718 |
.look-text button {
|
| 593 |
- position: relative; |
|
| 719 |
+ position: relative; |
|
| 594 | 720 |
} |
| 595 | 721 |
|
| 596 | 722 |
.look-text p {
|
| 597 |
- position: absolute; |
|
| 598 |
- top: 45%; |
|
| 599 |
- left: 50%; |
|
| 600 |
- transform: translate(-50%, -50%); |
|
| 601 |
- font-size: 28px; |
|
| 602 |
- |
|
| 723 |
+ position: absolute; |
|
| 724 |
+ top: 45%; |
|
| 725 |
+ left: 50%; |
|
| 726 |
+ transform: translate(-50%, -50%); |
|
| 727 |
+ font-size: 28px; |
|
| 603 | 728 |
} |
| 604 | 729 |
|
| 605 | 730 |
/* step1-1 */ |
| 606 | 731 |
.imgGroup, |
| 607 | 732 |
.textareaGroup {
|
| 608 |
- width: 100%; |
|
| 609 |
- text-align: center; |
|
| 733 |
+ width: 100%; |
|
| 734 |
+ text-align: center; |
|
| 610 | 735 |
} |
| 611 | 736 |
|
| 612 | 737 |
.textareaGroup {
|
| 613 |
- margin-top: 40px; |
|
| 738 |
+ margin-top: 40px; |
|
| 614 | 739 |
} |
| 615 | 740 |
|
| 616 | 741 |
.textareaGroup textarea {
|
| 617 |
- width: 1460px; |
|
| 618 |
- height: 200px; |
|
| 619 |
- background-color: #eff2f7; |
|
| 620 |
- border-radius: 10px; |
|
| 621 |
- padding: 30px 40px; |
|
| 622 |
- line-height: 30px; |
|
| 623 |
- font-size: 24px; |
|
| 624 |
- font-family: 'Pretendard-Regular'; |
|
| 742 |
+ width: 1460px; |
|
| 743 |
+ height: 200px; |
|
| 744 |
+ background-color: #eff2f7; |
|
| 745 |
+ border-radius: 10px; |
|
| 746 |
+ padding: 30px 40px; |
|
| 747 |
+ line-height: 30px; |
|
| 748 |
+ font-size: 24px; |
|
| 749 |
+ font-family: 'Pretendard-Regular'; |
|
| 625 | 750 |
} |
| 626 | 751 |
|
| 627 | 752 |
/* step1-1-팝업 */ |
| 628 | 753 |
.popup {
|
| 629 |
- /* display: none; */ |
|
| 630 |
- position: absolute; |
|
| 631 |
- width: 355px; |
|
| 632 |
- height: 327px; |
|
| 633 |
- background-color: white; |
|
| 634 |
- border: 3px solid #FFBD14; |
|
| 635 |
- border-radius: 10px; |
|
| 636 |
- padding: 20px 40px; |
|
| 754 |
+ /* display: none; */ |
|
| 755 |
+ position: absolute; |
|
| 756 |
+ width: 355px; |
|
| 757 |
+ height: 327px; |
|
| 758 |
+ background-color: white; |
|
| 759 |
+ border: 3px solid #ffbd14; |
|
| 760 |
+ border-radius: 10px; |
|
| 761 |
+ padding: 20px 40px; |
|
| 637 | 762 |
} |
| 638 | 763 |
|
| 639 | 764 |
.popup h3 {
|
| 640 |
- font-size: 42px; |
|
| 765 |
+ font-size: 42px; |
|
| 641 | 766 |
} |
| 642 | 767 |
|
| 643 | 768 |
.popup .yellow-box {
|
| 644 |
- width: 33px; |
|
| 645 |
- height: 33px; |
|
| 646 |
- color: #FFBA08; |
|
| 647 |
- background-color: #FFF3D7; |
|
| 648 |
- padding: 7px; |
|
| 649 |
- border-radius: 5px; |
|
| 650 |
- margin-right: 10px; |
|
| 769 |
+ width: 33px; |
|
| 770 |
+ height: 33px; |
|
| 771 |
+ color: #ffba08; |
|
| 772 |
+ background-color: #fff3d7; |
|
| 773 |
+ padding: 7px; |
|
| 774 |
+ border-radius: 5px; |
|
| 775 |
+ margin-right: 10px; |
|
| 651 | 776 |
} |
| 652 | 777 |
|
| 653 |
- |
|
| 654 | 778 |
/* step1-2 */ |
| 655 |
-.readGroup h4{font-size: 20px; margin-bottom: 10px;}
|
|
| 656 |
-.readGroup > div{background-image: url('../img/img38_1_s.png'); width: 1282px; height: 492px; padding: 10px;}
|
|
| 657 |
-.readGroup .textbox{height: calc(100% - 51px); overflow-y: auto; padding: 20px; }
|
|
| 779 |
+.readGroup h4 {
|
|
| 780 |
+ font-size: 20px; |
|
| 781 |
+ margin-bottom: 10px; |
|
| 782 |
+} |
|
| 783 |
+.readGroup > div {
|
|
| 784 |
+ background-image: url('../img/img38_1_s.png');
|
|
| 785 |
+ width: 1282px; |
|
| 786 |
+ height: 492px; |
|
| 787 |
+ padding: 10px; |
|
| 788 |
+} |
|
| 789 |
+.readGroup .textbox {
|
|
| 790 |
+ height: calc(100% - 51px); |
|
| 791 |
+ overflow-y: auto; |
|
| 792 |
+ padding: 20px; |
|
| 793 |
+} |
|
| 658 | 794 |
.readGroup .icon {
|
| 659 |
- text-align: center; |
|
| 795 |
+ text-align: center; |
|
| 660 | 796 |
} |
| 661 | 797 |
|
| 662 | 798 |
.readGroup p.read {
|
| 663 |
- width: max-content; |
|
| 664 |
- border-radius: 10px; |
|
| 665 |
- font-size: 24px; |
|
| 666 |
- font-family: 'Pretendard-Regular'; |
|
| 667 |
- background-color: #EAEDF4; |
|
| 668 |
- padding: 10px 20px; |
|
| 799 |
+ width: max-content; |
|
| 800 |
+ border-radius: 10px; |
|
| 801 |
+ font-size: 24px; |
|
| 802 |
+ font-family: 'Pretendard-Regular'; |
|
| 803 |
+ background-color: #eaedf4; |
|
| 804 |
+ padding: 10px 20px; |
|
| 669 | 805 |
} |
| 670 | 806 |
|
| 671 | 807 |
/* step1-3 */ |
| 672 | 808 |
.listenGroup .title-bg {
|
| 673 |
- position: absolute; |
|
| 674 |
- z-index: 1; |
|
| 809 |
+ position: absolute; |
|
| 810 |
+ z-index: 1; |
|
| 675 | 811 |
} |
| 676 | 812 |
|
| 677 | 813 |
.listenGroup img.bg {
|
| 678 |
- position: absolute; |
|
| 679 |
- top: 0; |
|
| 680 |
- width: 100%; |
|
| 681 |
- height: 710px; |
|
| 814 |
+ position: absolute; |
|
| 815 |
+ top: 0; |
|
| 816 |
+ width: 100%; |
|
| 817 |
+ height: 710px; |
|
| 682 | 818 |
} |
| 683 | 819 |
|
| 684 | 820 |
.listenGroup .listen-btn {
|
| 685 |
- position: absolute; |
|
| 686 |
- top: 77%; |
|
| 687 |
- left: 50%; |
|
| 688 |
- transform: translateY(-50%) translateX(-50%); |
|
| 821 |
+ position: absolute; |
|
| 822 |
+ top: 77%; |
|
| 823 |
+ left: 50%; |
|
| 824 |
+ transform: translateY(-50%) translateX(-50%); |
|
| 689 | 825 |
} |
| 690 | 826 |
|
| 691 | 827 |
.listenGroup .textbox {
|
| 692 |
- position: absolute; |
|
| 693 |
- top: 45%; |
|
| 828 |
+ position: absolute; |
|
| 829 |
+ top: 45%; |
|
| 694 | 830 |
left: 31%; |
| 695 |
- transform: translate(-50%, -50%); |
|
| 696 |
- /* width: 900px; */ |
|
| 831 |
+ transform: translate(-50%, -50%); |
|
| 832 |
+ /* width: 900px; */ |
|
| 697 | 833 |
} |
| 698 | 834 |
.dropGroup .textbox {
|
| 699 |
- position: absolute; |
|
| 700 |
- top: 45%; |
|
| 835 |
+ position: absolute; |
|
| 836 |
+ top: 45%; |
|
| 701 | 837 |
left: 53%; |
| 702 |
- transform: translate(-50%, -50%); |
|
| 703 |
- /* width: 900px; */ |
|
| 838 |
+ transform: translate(-50%, -50%); |
|
| 839 |
+ /* width: 900px; */ |
|
| 704 | 840 |
} |
| 705 | 841 |
|
| 706 | 842 |
.listenGroup .textbox p {
|
| 707 |
- font-size: 28px; |
|
| 708 |
- line-height: 45px; |
|
| 709 |
- width: 100%; |
|
| 710 |
- |
|
| 843 |
+ font-size: 28px; |
|
| 844 |
+ line-height: 45px; |
|
| 845 |
+ width: 100%; |
|
| 711 | 846 |
} |
| 712 |
-p.textbox {width: 100%;}
|
|
| 847 |
+p.textbox {
|
|
| 848 |
+ width: 100%; |
|
| 849 |
+} |
|
| 713 | 850 |
.listenGroup p.title {
|
| 714 |
- font-size: 42px; |
|
| 715 |
- text-shadow: 0px 0px 0 #fff, 0px 0px 0 #fff, 0px 0px 0 #fff, 0px 0px 0 #fff; |
|
| 716 |
- -webkit-text-stroke-width: 0px; |
|
| 717 |
- -webkit-text-stroke-color: #fff; |
|
| 718 |
- font-family: 'ONEMobilePOP'; |
|
| 719 |
- margin-bottom: 25px; |
|
| 851 |
+ font-size: 42px; |
|
| 852 |
+ text-shadow: 0px 0px 0 #fff, 0px 0px 0 #fff, 0px 0px 0 #fff, 0px 0px 0 #fff; |
|
| 853 |
+ -webkit-text-stroke-width: 0px; |
|
| 854 |
+ -webkit-text-stroke-color: #fff; |
|
| 855 |
+ font-family: 'ONEMobilePOP'; |
|
| 856 |
+ margin-bottom: 25px; |
|
| 720 | 857 |
} |
| 721 | 858 |
|
| 722 | 859 |
/* step2 */ |
| 723 |
-.vocaGroup{width: 1380px;}
|
|
| 860 |
+.vocaGroup {
|
|
| 861 |
+ width: 1380px; |
|
| 862 |
+} |
|
| 724 | 863 |
.vocaGroup h3 {
|
| 725 |
- font-size: 42px; |
|
| 864 |
+ font-size: 42px; |
|
| 726 | 865 |
} |
| 727 | 866 |
|
| 728 | 867 |
.vocaGroup .yellow-box {
|
| 729 |
- width: 33px; |
|
| 730 |
- height: 33px; |
|
| 731 |
- color: #FFBA08; |
|
| 732 |
- background-color: #FFF3D7; |
|
| 733 |
- padding: 7px; |
|
| 734 |
- border-radius: 5px; |
|
| 735 |
- margin-right: 10px; |
|
| 868 |
+ width: 33px; |
|
| 869 |
+ height: 33px; |
|
| 870 |
+ color: #ffba08; |
|
| 871 |
+ background-color: #fff3d7; |
|
| 872 |
+ padding: 7px; |
|
| 873 |
+ border-radius: 5px; |
|
| 874 |
+ margin-right: 10px; |
|
| 736 | 875 |
} |
| 737 | 876 |
|
| 738 |
-.vocaGroup .imgGroup{width: max-content;}
|
|
| 877 |
+.vocaGroup .imgGroup {
|
|
| 878 |
+ width: max-content; |
|
| 879 |
+} |
|
| 739 | 880 |
|
| 740 | 881 |
/* step2_1 */ |
| 741 |
-.mic-btn{position: relative; background-image: url('../img/img44_s.png'); width: 315px; height: 315px;}
|
|
| 742 |
-.mic-btn img{position: absolute;
|
|
| 743 |
- top: 50%; |
|
| 882 |
+.mic-btn {
|
|
| 883 |
+ position: relative; |
|
| 884 |
+ background-image: url('../img/img44_s.png');
|
|
| 885 |
+ width: 315px; |
|
| 886 |
+ height: 315px; |
|
| 887 |
+} |
|
| 888 |
+.mic-btn img {
|
|
| 889 |
+ position: absolute; |
|
| 890 |
+ top: 50%; |
|
| 744 | 891 |
left: 50%; |
| 745 |
- transform: translate(-50%, -50%);} |
|
| 746 |
- |
|
| 747 |
- .readGroup section p, .readGroup section input{
|
|
| 892 |
+ transform: translate(-50%, -50%); |
|
| 893 |
+} |
|
| 894 |
+ |
|
| 895 |
+.readGroup section p, |
|
| 896 |
+.readGroup section input {
|
|
| 748 | 897 |
width: 780px; |
| 749 | 898 |
height: 65px; |
| 750 | 899 |
border-radius: 10px; |
| 751 |
- padding: 20px ; |
|
| 900 |
+ padding: 20px; |
|
| 752 | 901 |
text-align: center; |
| 753 | 902 |
font-size: 28px; |
| 754 |
- |
|
| 755 |
- } |
|
| 903 |
+} |
|
| 756 | 904 |
|
| 757 | 905 |
/* step2_2 */ |
| 758 |
-.popTxt{position: relative; }
|
|
| 906 |
+.popTxt {
|
|
| 907 |
+ position: relative; |
|
| 908 |
+} |
|
| 759 | 909 |
|
| 910 |
+h4 {
|
|
| 911 |
+ font-size: 20px; |
|
| 912 |
+} |
|
| 760 | 913 |
|
| 761 |
-h4{font-size: 20px;}
|
|
| 762 |
- |
|
| 763 |
- |
|
| 764 |
-input.speak{background-color: #FFF8E9; border: 0;}
|
|
| 765 |
-p.read-ai{border: 3px solid #FFBA08 ;}
|
|
| 914 |
+input.speak {
|
|
| 915 |
+ background-color: #fff8e9; |
|
| 916 |
+ border: 0; |
|
| 917 |
+} |
|
| 918 |
+p.read-ai {
|
|
| 919 |
+ border: 3px solid #ffba08; |
|
| 920 |
+} |
|
| 766 | 921 |
|
| 767 | 922 |
/* step2_3 */ |
| 768 | 923 |
.yellow-box-big {
|
| 769 |
- width: 60px; |
|
| 770 |
- height: 60px; |
|
| 771 |
- color: #FFBA08; |
|
| 772 |
- background-color: #FFF3D7; |
|
| 773 |
- padding: 13px; |
|
| 774 |
- border-radius: 10px; |
|
| 775 |
- margin-right: 10px; |
|
| 776 |
- font-size: 32px; |
|
| 924 |
+ width: 60px; |
|
| 925 |
+ height: 60px; |
|
| 926 |
+ color: #ffba08; |
|
| 927 |
+ background-color: #fff3d7; |
|
| 928 |
+ padding: 13px; |
|
| 929 |
+ border-radius: 10px; |
|
| 930 |
+ margin-right: 10px; |
|
| 931 |
+ font-size: 32px; |
|
| 777 | 932 |
} |
| 778 |
-.btnGroup{
|
|
| 779 |
- width: 560px; |
|
| 933 |
+.btnGroup {
|
|
| 934 |
+ width: 560px; |
|
| 780 | 935 |
} |
| 781 |
-.time-bg{
|
|
| 782 |
- text-align: center; |
|
| 783 |
- font-family: 'neodgm'; background-image: url('../img/img55_s.png'); width: 110px; height: 128px;}
|
|
| 784 |
- .time-bg > div{position: relative;}
|
|
| 785 |
- .time{
|
|
| 936 |
+.time-bg {
|
|
| 937 |
+ text-align: center; |
|
| 938 |
+ font-family: 'neodgm'; |
|
| 939 |
+ background-image: url('../img/img55_s.png');
|
|
| 940 |
+ width: 110px; |
|
| 941 |
+ height: 128px; |
|
| 942 |
+} |
|
| 943 |
+.time-bg > div {
|
|
| 944 |
+ position: relative; |
|
| 945 |
+} |
|
| 946 |
+.time {
|
|
| 786 | 947 |
position: absolute; |
| 787 | 948 |
top: 70px; |
| 788 |
- left: 50%; |
|
| 789 |
- transform: translate(-50%, -50%);} |
|
| 790 |
- .second{font-size: 51px; font-family: 'neodgm'; color: #752AFF;}
|
|
| 791 |
- .time .text{font-size: 21px; color: #752AFF;}
|
|
| 949 |
+ left: 50%; |
|
| 950 |
+ transform: translate(-50%, -50%); |
|
| 951 |
+} |
|
| 952 |
+.second {
|
|
| 953 |
+ font-size: 51px; |
|
| 954 |
+ font-family: 'neodgm'; |
|
| 955 |
+ color: #752aff; |
|
| 956 |
+} |
|
| 957 |
+.time .text {
|
|
| 958 |
+ font-size: 21px; |
|
| 959 |
+ color: #752aff; |
|
| 960 |
+} |
|
| 792 | 961 |
|
| 793 | 962 |
/* step2_5 */ |
| 794 |
-.dropGroup .popTxt{position: relative; width: fit-content;}
|
|
| 795 |
-.dropGroup .popTxt img:last-child{position: relative}
|
|
| 796 |
-.dropGroup span{
|
|
| 797 |
- font-size: 36px; |
|
| 798 |
- font-family: 'Pretendard-Bold'; |
|
| 799 |
- |
|
| 963 |
+.dropGroup .popTxt {
|
|
| 964 |
+ position: relative; |
|
| 965 |
+ width: fit-content; |
|
| 800 | 966 |
} |
| 801 |
-.dropGroup button{position: absolute;}
|
|
| 802 |
-.dropGroup button p{
|
|
| 803 |
- position: absolute; |
|
| 804 |
- top: 50%; |
|
| 805 |
- left: 50%; |
|
| 806 |
- transform: translate(-50%, -50%); |
|
| 967 |
+.dropGroup .popTxt img:last-child {
|
|
| 968 |
+ position: relative; |
|
| 807 | 969 |
} |
| 808 |
-.dragGroup article{position: absolute;}
|
|
| 809 |
-.dragGroup button{position: relative;}
|
|
| 810 |
-.dragGroup button p{
|
|
| 811 |
- position: absolute; |
|
| 812 |
- top: 50%; |
|
| 813 |
- left: 50%; |
|
| 814 |
- transform: translate(-50%, -50%); |
|
| 815 |
- |
|
| 970 |
+.dropGroup span {
|
|
| 971 |
+ font-size: 36px; |
|
| 972 |
+ font-family: 'Pretendard-Bold'; |
|
| 973 |
+} |
|
| 974 |
+.dropGroup button {
|
|
| 975 |
+ position: absolute; |
|
| 976 |
+} |
|
| 977 |
+.dropGroup button p {
|
|
| 978 |
+ position: absolute; |
|
| 979 |
+ top: 50%; |
|
| 980 |
+ left: 50%; |
|
| 981 |
+ transform: translate(-50%, -50%); |
|
| 982 |
+} |
|
| 983 |
+.dragGroup article {
|
|
| 984 |
+ position: absolute; |
|
| 985 |
+} |
|
| 986 |
+.dragGroup button {
|
|
| 987 |
+ position: relative; |
|
| 988 |
+} |
|
| 989 |
+.dragGroup button p {
|
|
| 990 |
+ position: absolute; |
|
| 991 |
+ top: 50%; |
|
| 992 |
+ left: 50%; |
|
| 993 |
+ transform: translate(-50%, -50%); |
|
| 816 | 994 |
} |
| 817 | 995 |
|
| 818 | 996 |
/* step2_11 */ |
| 819 |
-.inputGroup{
|
|
| 820 |
- position: relative; |
|
| 821 |
- background-color: #FFF3D7; |
|
| 822 |
- border: #FFBA08 2px solid; |
|
| 823 |
- border-radius: 10px; |
|
| 824 |
- padding: 15px 20px; |
|
| 825 |
- min-height: 100px; |
|
| 997 |
+.inputGroup {
|
|
| 998 |
+ position: relative; |
|
| 999 |
+ background-color: #fff3d7; |
|
| 1000 |
+ border: #ffba08 2px solid; |
|
| 1001 |
+ border-radius: 10px; |
|
| 1002 |
+ padding: 15px 20px; |
|
| 1003 |
+ min-height: 100px; |
|
| 826 | 1004 |
min-width: 300px; |
| 827 | 1005 |
font-size: 28px; |
| 828 | 1006 |
} |
| 829 |
-.inputGroup::before{
|
|
| 830 |
- background-image: url('../img/img89_43s.png');
|
|
| 831 |
- background-size: 58px 20px; |
|
| 832 |
- width: 58px; |
|
| 833 |
- height: 20px; |
|
| 834 |
- content: ""; |
|
| 835 |
- display: block; |
|
| 836 |
- position: absolute; |
|
| 837 |
- top: 93px; |
|
| 1007 |
+.inputGroup::before {
|
|
| 1008 |
+ background-image: url('../img/img89_43s.png');
|
|
| 1009 |
+ background-size: 58px 20px; |
|
| 1010 |
+ width: 58px; |
|
| 1011 |
+ height: 20px; |
|
| 1012 |
+ content: ''; |
|
| 1013 |
+ display: block; |
|
| 1014 |
+ position: absolute; |
|
| 1015 |
+ top: 93px; |
|
| 838 | 1016 |
} |
| 839 |
-.inputGroup input{border: #CAE5FF 1px solid; border-radius: 5px; padding: 10px 20px; width: min-content; font-size: 28px;}
|
|
| 840 |
- |
|
| 1017 |
+.inputGroup input {
|
|
| 1018 |
+ border: #cae5ff 1px solid; |
|
| 1019 |
+ border-radius: 5px; |
|
| 1020 |
+ padding: 10px 20px; |
|
| 1021 |
+ width: min-content; |
|
| 1022 |
+ font-size: 28px; |
|
| 1023 |
+} |
|
| 841 | 1024 |
|
| 842 | 1025 |
/* step3_2 */ |
| 843 |
-.inputbox{border: #FFE029 solid 5px; border-radius: 10px; padding: 20px; background-color: #FFF3D7; width: min-content;}
|
|
| 1026 |
+.inputbox {
|
|
| 1027 |
+ border: #ffe029 solid 5px; |
|
| 1028 |
+ border-radius: 10px; |
|
| 1029 |
+ padding: 20px; |
|
| 1030 |
+ background-color: #fff3d7; |
|
| 1031 |
+ width: min-content; |
|
| 1032 |
+} |
|
| 844 | 1033 |
|
| 845 | 1034 |
.next-btn, |
| 846 | 1035 |
.pre-btn {
|
| 847 |
- cursor: pointer; |
|
| 1036 |
+ cursor: pointer; |
|
| 848 | 1037 |
} |
| 849 | 1038 |
|
| 850 |
- |
|
| 851 |
- |
|
| 852 |
-.listen-btn{cursor: pointer;}
|
|
| 1039 |
+.listen-btn {
|
|
| 1040 |
+ cursor: pointer; |
|
| 1041 |
+} |
|
| 853 | 1042 |
|
| 854 | 1043 |
/* 퀴즈 결과 */ |
| 855 |
-.result-box{
|
|
| 856 |
- max-height: 400px; |
|
| 857 |
- overflow: auto; |
|
| 858 |
- padding-right: 10px; |
|
| 1044 |
+.result-box {
|
|
| 1045 |
+ max-height: 400px; |
|
| 1046 |
+ overflow: auto; |
|
| 1047 |
+ padding-right: 10px; |
|
| 859 | 1048 |
} |
| 860 | 1049 |
|
| 861 | 1050 |
/* ------------------------학생 --------------------- */ |
| 862 | 1051 |
|
| 863 |
- |
|
| 864 | 1052 |
/* ------------------------선생님 --------------------- */ |
| 865 |
-.side_t{
|
|
| 866 |
- background-color: #fff; |
|
| 867 |
- width: 360px; |
|
| 868 |
- /* height: 100%; */ |
|
| 869 |
- padding: 25px 40px; |
|
| 1053 |
+.side_t {
|
|
| 1054 |
+ background-color: #fff; |
|
| 1055 |
+ width: 360px; |
|
| 1056 |
+ /* height: 100%; */ |
|
| 1057 |
+ padding: 25px 40px; |
|
| 870 | 1058 |
} |
| 871 | 1059 |
|
| 872 |
-details { margin:5px 0 10px; }
|
|
| 873 |
-details a{display: block;}
|
|
| 874 |
-details > summary {font-size: 24px; font-family: 'ONEMobilePOP'; padding:10px; outline:0; border-radius:5px; cursor:pointer; transition:background 0.5s; text-align:left; }
|
|
| 875 |
-details > summary::-webkit-details-marker { background:#444; color:#fff; background-size:contain; transform:rotate3d(0, 0, 1, 90deg); transition:transform 0.25s;}
|
|
| 876 |
-details[open] > summary::-webkit-details-marker { transform:rotate3d(0, 0, 1, 180deg);}
|
|
| 877 |
-details[open] > summary ~ * { animation:reveal 0.5s;}
|
|
| 878 |
-.tpt {font-family: 'Pretendard-SemiBold'; font-size: 20px;padding:5px; line-height:25px; cursor: pointer;}
|
|
| 879 |
-.side_t .tpt{ margin:5px 0 10px 30px; }
|
|
| 880 |
-.side_t .tpt:hover{background-color: #fff; border: 1px solid #FFBA08; border-radius: 5px; text-decoration: underline; text-decoration-color: #FFBA08;
|
|
| 881 |
-text-decoration-thickness: 3px;} |
|
| 1060 |
+details {
|
|
| 1061 |
+ margin: 5px 0 10px; |
|
| 1062 |
+} |
|
| 1063 |
+details a {
|
|
| 1064 |
+ display: block; |
|
| 1065 |
+} |
|
| 1066 |
+details > summary {
|
|
| 1067 |
+ font-size: 24px; |
|
| 1068 |
+ font-family: 'ONEMobilePOP'; |
|
| 1069 |
+ padding: 10px; |
|
| 1070 |
+ outline: 0; |
|
| 1071 |
+ border-radius: 5px; |
|
| 1072 |
+ cursor: pointer; |
|
| 1073 |
+ transition: background 0.5s; |
|
| 1074 |
+ text-align: left; |
|
| 1075 |
+} |
|
| 1076 |
+details > summary::-webkit-details-marker {
|
|
| 1077 |
+ background: #444; |
|
| 1078 |
+ color: #fff; |
|
| 1079 |
+ background-size: contain; |
|
| 1080 |
+ transform: rotate3d(0, 0, 1, 90deg); |
|
| 1081 |
+ transition: transform 0.25s; |
|
| 1082 |
+} |
|
| 1083 |
+details[open] > summary::-webkit-details-marker {
|
|
| 1084 |
+ transform: rotate3d(0, 0, 1, 180deg); |
|
| 1085 |
+} |
|
| 1086 |
+details[open] > summary ~ * {
|
|
| 1087 |
+ animation: reveal 0.5s; |
|
| 1088 |
+} |
|
| 1089 |
+.tpt {
|
|
| 1090 |
+ font-family: 'Pretendard-SemiBold'; |
|
| 1091 |
+ font-size: 20px; |
|
| 1092 |
+ padding: 5px; |
|
| 1093 |
+ line-height: 25px; |
|
| 1094 |
+ cursor: pointer; |
|
| 1095 |
+} |
|
| 1096 |
+.side_t .tpt {
|
|
| 1097 |
+ margin: 5px 0 10px 30px; |
|
| 1098 |
+} |
|
| 1099 |
+.side_t .tpt:hover {
|
|
| 1100 |
+ background-color: #fff; |
|
| 1101 |
+ border: 1px solid #ffba08; |
|
| 1102 |
+ border-radius: 5px; |
|
| 1103 |
+ text-decoration: underline; |
|
| 1104 |
+ text-decoration-color: #ffba08; |
|
| 1105 |
+ text-decoration-thickness: 3px; |
|
| 1106 |
+} |
|
| 882 | 1107 |
@keyframes reveal {
|
| 883 |
- from { opacity:0; transform:translate3d(0, -30px, 0); }
|
|
| 884 |
- to { opacity:1; transform:translate3d(0, 0, 0); }
|
|
| 1108 |
+ from {
|
|
| 1109 |
+ opacity: 0; |
|
| 1110 |
+ transform: translate3d(0, -30px, 0); |
|
| 1111 |
+ } |
|
| 1112 |
+ to {
|
|
| 1113 |
+ opacity: 1; |
|
| 1114 |
+ transform: translate3d(0, 0, 0); |
|
| 1115 |
+ } |
|
| 885 | 1116 |
} |
| 886 | 1117 |
|
| 887 |
-select{min-width: 128px; border-radius: 5px; padding: 10px 20px; font-size: 18px; }
|
|
| 888 |
-select option{font-size: 20px; font-weight: bold;}
|
|
| 1118 |
+select {
|
|
| 1119 |
+ min-width: 128px; |
|
| 1120 |
+ border-radius: 5px; |
|
| 1121 |
+ padding: 10px 20px; |
|
| 1122 |
+ font-size: 18px; |
|
| 1123 |
+} |
|
| 1124 |
+select option {
|
|
| 1125 |
+ font-size: 20px; |
|
| 1126 |
+ font-weight: bold; |
|
| 1127 |
+} |
|
| 889 | 1128 |
|
| 1129 |
+.class {
|
|
| 1130 |
+ background-color: #f8f9fb; |
|
| 1131 |
+ border-radius: 10px; |
|
| 1132 |
+ padding: 25px; |
|
| 1133 |
+ font-size: 19px; |
|
| 1134 |
+ width: max-content; |
|
| 1135 |
+} |
|
| 1136 |
+.class .title1, |
|
| 1137 |
+.textbook .title1 {
|
|
| 1138 |
+ font-family: 'ONEMobilePOP'; |
|
| 1139 |
+ font-weight: 100; |
|
| 1140 |
+} |
|
| 1141 |
+.class .box {
|
|
| 1142 |
+ background-color: #eaedf4; |
|
| 1143 |
+ border-radius: 10px; |
|
| 1144 |
+ padding: 10px; |
|
| 1145 |
+} |
|
| 1146 |
+.class .member {
|
|
| 1147 |
+ font-size: 20px; |
|
| 1148 |
+ color: #75767a; |
|
| 1149 |
+ position: relative; |
|
| 1150 |
+} |
|
| 1151 |
+.class .member::before {
|
|
| 1152 |
+ content: ''; |
|
| 1153 |
+ background-image: url('../img/img171_82t.png');
|
|
| 1154 |
+ width: 20px; |
|
| 1155 |
+ height: 22px; |
|
| 1156 |
+ position: absolute; |
|
| 1157 |
+ left: -28px; |
|
| 1158 |
+} |
|
| 1159 |
+.class .btnGroup, |
|
| 1160 |
+.textbook .text .btnGroup {
|
|
| 1161 |
+ width: initial; |
|
| 1162 |
+} |
|
| 1163 |
+.class button, |
|
| 1164 |
+.textbook button {
|
|
| 1165 |
+ font-size: 19px; |
|
| 1166 |
+ font-family: 'Pretendard-Regular'; |
|
| 1167 |
+} |
|
| 1168 |
+.textbook {
|
|
| 1169 |
+ width: 100%; |
|
| 1170 |
+ border: #ffba08 solid 6px; |
|
| 1171 |
+ border-radius: 20px; |
|
| 1172 |
+ font-size: 19px; |
|
| 1173 |
+} |
|
| 1174 |
+.textbook-add {
|
|
| 1175 |
+ width: 300px; |
|
| 1176 |
+ height: 354px; |
|
| 1177 |
+ background-color: #f8f9fb; |
|
| 1178 |
+ border: #75767a solid 2px; |
|
| 1179 |
+ border-radius: 20px; |
|
| 1180 |
+ font-size: 19px; |
|
| 1181 |
+} |
|
| 1182 |
+.textbook .box {
|
|
| 1183 |
+ height: 250px; |
|
| 1184 |
+} |
|
| 1185 |
+.textbook .text {
|
|
| 1186 |
+ height: 97px; |
|
| 1187 |
+ background-color: #ffba08; |
|
| 1188 |
+ border-radius: 0px 0px 12px 12px; |
|
| 1189 |
+ padding: 20px; |
|
| 1190 |
+} |
|
| 1191 |
+.textbook-add {
|
|
| 1192 |
+ position: relative; |
|
| 1193 |
+} |
|
| 1194 |
+.textbook-add button {
|
|
| 1195 |
+ position: absolute; |
|
| 1196 |
+ top: 50%; |
|
| 1197 |
+ left: 50%; |
|
| 1198 |
+ transform: translate(-50%, -50%); |
|
| 1199 |
+} |
|
| 890 | 1200 |
|
| 891 |
-.class{ background-color: #F8F9FB; border-radius: 10px; padding: 25px; font-size: 19px; width: max-content;}
|
|
| 892 |
-.class .title1, .textbook .title1{font-family: 'ONEMobilePOP'; font-weight: 100;}
|
|
| 893 |
-.class .box{background-color: #EAEDF4; border-radius: 10px;
|
|
| 894 |
- padding: 10px; |
|
| 1201 |
+.search-wrap {
|
|
| 1202 |
+ position: relative; |
|
| 895 | 1203 |
} |
| 896 |
-.class .member{font-size: 20px; color: #75767A; position: relative;}
|
|
| 897 |
-.class .member::before{content: ""; background-image: url('../img/img171_82t.png'); width: 20px; height: 22px; position: absolute; left: -28px;}
|
|
| 898 |
-.class .btnGroup, .textbook .text .btnGroup {width: initial;}
|
|
| 899 |
-.class button, .textbook button{font-size: 19px; font-family: 'Pretendard-Regular';}
|
|
| 900 |
-.textbook{width: 100%; border: #FFBA08 solid 6px; border-radius: 20px; font-size: 19px;}
|
|
| 901 |
-.textbook-add{width: 300px; height: 354px; background-color: #F8F9FB; border: #75767A solid 2px; border-radius: 20px; font-size: 19px;}
|
|
| 902 |
-.textbook .box{height: 250px;}
|
|
| 903 |
-.textbook .text{height: 97px; background-color: #FFBA08; border-radius: 0px 0px 12px 12px; padding: 20px;}
|
|
| 904 |
-.textbook-add{position: relative;}
|
|
| 905 |
-.textbook-add button{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
|
|
| 906 |
- |
|
| 907 |
-.search-wrap{
|
|
| 908 |
- position: relative;} |
|
| 909 |
-.search-wrap select{
|
|
| 910 |
- font-size: 20px; |
|
| 911 |
- width: 13rem; |
|
| 912 |
- background-color: #fff; |
|
| 913 |
- border: 0; |
|
| 914 |
- border-bottom: 1px solid #a4a4a4; |
|
| 915 |
- border-radius: 0; |
|
| 1204 |
+.search-wrap select {
|
|
| 1205 |
+ font-size: 20px; |
|
| 1206 |
+ width: 13rem; |
|
| 1207 |
+ background-color: #fff; |
|
| 1208 |
+ border: 0; |
|
| 1209 |
+ border-bottom: 1px solid #a4a4a4; |
|
| 1210 |
+ border-radius: 0; |
|
| 916 | 1211 |
} |
| 917 |
-.search-wrap input{
|
|
| 918 |
- font-size: 20px; |
|
| 919 |
- width: 40rem; |
|
| 920 |
- border: 0; |
|
| 921 |
- border-bottom: 1px solid #c8c8c8; |
|
| 1212 |
+.search-wrap input {
|
|
| 1213 |
+ font-size: 20px; |
|
| 1214 |
+ width: 40rem; |
|
| 1215 |
+ border: 0; |
|
| 1216 |
+ border-bottom: 1px solid #c8c8c8; |
|
| 922 | 1217 |
} |
| 923 |
-.search-wrap button{
|
|
| 924 |
- position: absolute; |
|
| 925 |
- right: 1rem; |
|
| 926 |
- top: 9px; |
|
| 1218 |
+.search-wrap button {
|
|
| 1219 |
+ position: absolute; |
|
| 1220 |
+ right: 1rem; |
|
| 1221 |
+ top: 9px; |
|
| 927 | 1222 |
} |
| 928 |
-.input-icon{
|
|
| 929 |
-display: block; |
|
| 930 |
- width: 30px; |
|
| 931 |
- height: 30px; |
|
| 932 |
- font-size: 1.9rem; |
|
| 933 |
- color: #000; |
|
| 934 |
- cursor: pointer; |
|
| 1223 |
+.input-icon {
|
|
| 1224 |
+ display: block; |
|
| 1225 |
+ width: 30px; |
|
| 1226 |
+ height: 30px; |
|
| 1227 |
+ font-size: 1.9rem; |
|
| 1228 |
+ color: #000; |
|
| 1229 |
+ cursor: pointer; |
|
| 935 | 1230 |
} |
| 936 | 1231 |
/* 테이블 */ |
| 937 | 1232 |
.table-pagination button, |
| 938 | 1233 |
.table-pagination button, |
| 939 |
- .table-pagination button {
|
|
| 1234 |
+.table-pagination button {
|
|
| 940 | 1235 |
font-size: 2rem; |
| 941 | 1236 |
font-family: 'Pretendard-Regular'; |
| 942 | 1237 |
height: 40px; |
... | ... | @@ -944,32 +1239,33 @@ |
| 944 | 1239 |
border-radius: 0.5rem; |
| 945 | 1240 |
} |
| 946 | 1241 |
|
| 947 |
- .table-pagination .selected-btn, |
|
| 948 | 1242 |
.table-pagination .selected-btn, |
| 949 |
- .table-pagination .selected-btn {
|
|
| 950 |
- background-color: #FFBA08; |
|
| 1243 |
+.table-pagination .selected-btn, |
|
| 1244 |
+.table-pagination .selected-btn {
|
|
| 1245 |
+ background-color: #ffba08; |
|
| 951 | 1246 |
color: #fff; |
| 952 | 1247 |
font-family: 'Pretendard-Bold'; |
| 953 | 1248 |
} |
| 954 |
-.new-btn{
|
|
| 955 |
- padding: 10px 30px; |
|
| 956 |
- font-size: 20px; |
|
| 1249 |
+.new-btn {
|
|
| 1250 |
+ padding: 10px 30px; |
|
| 1251 |
+ font-size: 20px; |
|
| 957 | 1252 |
font-family: 'Pretendard-Bold'; |
| 958 | 1253 |
border-radius: 5px; |
| 959 |
- background-color: #FFF3D7; |
|
| 1254 |
+ background-color: #fff3d7; |
|
| 960 | 1255 |
} |
| 961 |
-.new-btn:hover{background-color: #FFBA08;
|
|
| 962 |
- color: #fff;} |
|
| 963 |
- |
|
| 1256 |
+.new-btn:hover {
|
|
| 1257 |
+ background-color: #ffba08; |
|
| 1258 |
+ color: #fff; |
|
| 1259 |
+} |
|
| 1260 |
+ |
|
| 964 | 1261 |
/* 팝업 */ |
| 965 |
-.popup-wrap{
|
|
| 1262 |
+.popup-wrap {
|
|
| 966 | 1263 |
position: fixed; |
| 967 | 1264 |
background-color: rgba(0, 0, 0, 0.283); |
| 968 | 1265 |
width: 100%; |
| 969 | 1266 |
height: 100%; |
| 970 | 1267 |
top: 0; |
| 971 | 1268 |
left: 0; |
| 972 |
- |
|
| 973 | 1269 |
} |
| 974 | 1270 |
|
| 975 | 1271 |
.popup-box {
|
... | ... | @@ -977,7 +1273,7 @@ |
| 977 | 1273 |
min-width: 670px; |
| 978 | 1274 |
/* min-height: 219px; */ |
| 979 | 1275 |
background-color: var(--color-white); |
| 980 |
- top:50%; |
|
| 1276 |
+ top: 50%; |
|
| 981 | 1277 |
left: 5%; |
| 982 | 1278 |
right: 5%; |
| 983 | 1279 |
transform: translateY(-50%); |
... | ... | @@ -988,117 +1284,144 @@ |
| 988 | 1284 |
} |
| 989 | 1285 |
|
| 990 | 1286 |
.popup-title {
|
| 991 |
- font-family: 'ONEMobilePOPOTF'; |
|
| 992 |
- font-size: 32px; |
|
| 1287 |
+ font-family: 'ONEMobilePOPOTF'; |
|
| 1288 |
+ font-size: 32px; |
|
| 993 | 1289 |
} |
| 994 |
-.popup-wrap .search-wrap input, .popup-wrap .search-wrap select{
|
|
| 995 |
- position: relative; |
|
| 996 |
- font-size: 20px; |
|
| 997 |
- width: 100%; |
|
| 998 |
- border-radius: 10px; |
|
| 999 |
- border: 1px solid #ffdf9a; |
|
| 1000 |
- height: 50px; |
|
| 1001 |
- |
|
| 1290 |
+.popup-wrap .search-wrap input, |
|
| 1291 |
+.popup-wrap .search-wrap select {
|
|
| 1292 |
+ position: relative; |
|
| 1293 |
+ font-size: 20px; |
|
| 1294 |
+ width: 100%; |
|
| 1295 |
+ border-radius: 10px; |
|
| 1296 |
+ border: 1px solid #ffdf9a; |
|
| 1297 |
+ height: 50px; |
|
| 1002 | 1298 |
} |
| 1003 |
-.popup-wrap .search-wrap button{
|
|
| 1004 |
- position: absolute; |
|
| 1005 |
- right: 1rem; |
|
| 1299 |
+.popup-wrap .search-wrap button {
|
|
| 1300 |
+ position: absolute; |
|
| 1301 |
+ right: 1rem; |
|
| 1006 | 1302 |
top: 9px; |
| 1007 | 1303 |
} |
| 1008 | 1304 |
|
| 1009 | 1305 |
/* 공지등록 */ |
| 1010 |
-.board-wrap{
|
|
| 1011 |
- border-top: 1px #606060 solid; |
|
| 1012 |
- border-bottom: 1px #606060 solid; |
|
| 1013 |
- padding: 20px 0; |
|
| 1306 |
+.board-wrap {
|
|
| 1307 |
+ border-top: 1px #606060 solid; |
|
| 1308 |
+ border-bottom: 1px #606060 solid; |
|
| 1309 |
+ padding: 20px 0; |
|
| 1014 | 1310 |
} |
| 1015 |
-.board-wrap label{width: 13rem;}
|
|
| 1016 |
-.board-wrap textarea{min-height: 25rem; font-size: 20px; width: 100%;}
|
|
| 1017 |
- input.data-wrap, textarea.data-wrap{
|
|
| 1018 |
- width: -webkit-fill-available; |
|
| 1019 |
- padding: 1.2rem; |
|
| 1020 |
- border-radius: 0.8rem; |
|
| 1021 |
- border: 1px solid #8C8E92; |
|
| 1311 |
+.board-wrap label {
|
|
| 1312 |
+ width: 13rem; |
|
| 1313 |
+} |
|
| 1314 |
+.board-wrap textarea {
|
|
| 1315 |
+ min-height: 25rem; |
|
| 1316 |
+ font-size: 20px; |
|
| 1317 |
+ width: 100%; |
|
| 1318 |
+} |
|
| 1319 |
+input.data-wrap, |
|
| 1320 |
+textarea.data-wrap {
|
|
| 1321 |
+ width: -webkit-fill-available; |
|
| 1322 |
+ padding: 1.2rem; |
|
| 1323 |
+ border-radius: 0.8rem; |
|
| 1324 |
+ border: 1px solid #8c8e92; |
|
| 1022 | 1325 |
} |
| 1023 | 1326 |
.wrap {
|
| 1024 |
- border: 1px solid var(--color-lightGray); |
|
| 1025 |
- padding: 2rem; |
|
| 1026 |
- position: relative; |
|
| 1027 |
- border-radius: 10px; |
|
| 1028 |
- background-color: #fff; |
|
| 1327 |
+ border: 1px solid var(--color-lightGray); |
|
| 1328 |
+ padding: 2rem; |
|
| 1329 |
+ position: relative; |
|
| 1330 |
+ border-radius: 10px; |
|
| 1331 |
+ background-color: #fff; |
|
| 1029 | 1332 |
} |
| 1030 |
-.mypage .wrap{overflow-x: auto;}
|
|
| 1031 |
-.wrap section {width: max-content;}
|
|
| 1032 |
-.wrap .wrap-bg{
|
|
| 1033 |
- background-color: #f7f8fa; |
|
| 1034 |
- padding: 20px; |
|
| 1035 |
- border-radius: 10px; |
|
| 1036 |
- height: 20rem; |
|
| 1037 |
- width: -webkit-fill-available; |
|
| 1038 |
- |
|
| 1333 |
+.mypage .wrap {
|
|
| 1334 |
+ overflow-x: auto; |
|
| 1039 | 1335 |
} |
| 1040 |
-.wrap .wrap-bg >div{ text-align: center;}
|
|
| 1041 |
-.wrap .progress-bar {height: 40px;}
|
|
| 1042 |
-.wrap .progress-bar-fill {height: 40px;}
|
|
| 1043 |
-.wrap details .title2{width: 160px;}
|
|
| 1044 |
-.wrap details span{width: 110px; text-align: end;}
|
|
| 1336 |
+.wrap section {
|
|
| 1337 |
+ width: max-content; |
|
| 1338 |
+} |
|
| 1339 |
+.wrap .wrap-bg {
|
|
| 1340 |
+ background-color: #f7f8fa; |
|
| 1341 |
+ padding: 20px; |
|
| 1342 |
+ border-radius: 10px; |
|
| 1343 |
+ height: 20rem; |
|
| 1344 |
+ width: -webkit-fill-available; |
|
| 1345 |
+} |
|
| 1346 |
+.wrap .wrap-bg > div {
|
|
| 1347 |
+ text-align: center; |
|
| 1348 |
+} |
|
| 1349 |
+.wrap .progress-bar {
|
|
| 1350 |
+ height: 40px; |
|
| 1351 |
+} |
|
| 1352 |
+.wrap .progress-bar-fill {
|
|
| 1353 |
+ height: 40px; |
|
| 1354 |
+} |
|
| 1355 |
+.wrap details .title2 {
|
|
| 1356 |
+ width: 160px; |
|
| 1357 |
+} |
|
| 1358 |
+.wrap details span {
|
|
| 1359 |
+ width: 110px; |
|
| 1360 |
+ text-align: end; |
|
| 1361 |
+} |
|
| 1045 | 1362 |
|
| 1046 |
- |
|
| 1047 |
-.bookmanage-btn{
|
|
| 1048 |
- padding: 20px 30px; |
|
| 1049 |
- font-size: 20px; |
|
| 1363 |
+.bookmanage-btn {
|
|
| 1364 |
+ padding: 20px 30px; |
|
| 1365 |
+ font-size: 20px; |
|
| 1050 | 1366 |
font-family: 'Pretendard-Bold'; |
| 1051 | 1367 |
border-radius: 5px; |
| 1052 |
- border: #FFBA08 solid 2px; |
|
| 1368 |
+ border: #ffba08 solid 2px; |
|
| 1053 | 1369 |
cursor: pointer; |
| 1054 | 1370 |
} |
| 1055 | 1371 |
|
| 1056 | 1372 |
.hidden-tr {
|
| 1057 |
- display: none; |
|
| 1373 |
+ display: none; |
|
| 1058 | 1374 |
} |
| 1059 |
-.show-tr {
|
|
| 1060 |
- background-color: #FFF3D7 ; |
|
| 1375 |
+.show-tr {
|
|
| 1376 |
+ background-color: #fff3d7; |
|
| 1061 | 1377 |
} |
| 1062 |
-.show-tr div{ margin: 10px;}
|
|
| 1063 |
-.show-tr table{
|
|
| 1064 |
- background-color: #fff; |
|
| 1065 |
- |
|
| 1378 |
+.show-tr div {
|
|
| 1379 |
+ margin: 10px; |
|
| 1380 |
+} |
|
| 1381 |
+.show-tr table {
|
|
| 1382 |
+ background-color: #fff; |
|
| 1066 | 1383 |
} |
| 1067 | 1384 |
|
| 1068 | 1385 |
/* 로드맵 */ |
| 1069 |
-.mypage .big{width: 48%; height: 100%;}
|
|
| 1386 |
+.mypage .big {
|
|
| 1387 |
+ width: 48%; |
|
| 1388 |
+ height: 100%; |
|
| 1389 |
+} |
|
| 1070 | 1390 |
.mypage .big > .text {
|
| 1071 |
- border-radius: 19px 19px 0px 0px; border-bottom: 1px solid #8C8E92;} |
|
| 1072 |
- .mypage .big > .box{
|
|
| 1391 |
+ border-radius: 19px 19px 0px 0px; |
|
| 1392 |
+ border-bottom: 1px solid #8c8e92; |
|
| 1393 |
+} |
|
| 1394 |
+.mypage .big > .box {
|
|
| 1073 | 1395 |
overflow-x: auto; |
| 1074 | 1396 |
margin: 4rem 3rem; |
| 1075 | 1397 |
height: 100%; |
| 1076 | 1398 |
max-height: calc(100% - 16rem); |
| 1077 |
- } |
|
| 1078 |
- .dropbox{
|
|
| 1079 |
- color: #8C8E92; |
|
| 1080 |
- border: #8C8E92 dotted 1px; |
|
| 1081 |
- background-color: #EAEDF4; |
|
| 1399 |
+} |
|
| 1400 |
+.dropbox {
|
|
| 1401 |
+ color: #8c8e92; |
|
| 1402 |
+ border: #8c8e92 dotted 1px; |
|
| 1403 |
+ background-color: #eaedf4; |
|
| 1082 | 1404 |
border-radius: 20px; |
| 1083 | 1405 |
min-height: 20rem; |
| 1084 |
- } |
|
| 1085 |
- .dropbox p{line-height: 20rem;}
|
|
| 1406 |
+} |
|
| 1407 |
+.dropbox p {
|
|
| 1408 |
+ line-height: 20rem; |
|
| 1409 |
+} |
|
| 1086 | 1410 |
|
| 1087 |
- |
|
| 1088 |
- /* 단원 버튼 */ |
|
| 1089 |
- .unit-pagination button {
|
|
| 1411 |
+/* 단원 버튼 */ |
|
| 1412 |
+.unit-pagination button {
|
|
| 1090 | 1413 |
font-size: 2rem; |
| 1091 | 1414 |
font-family: 'Pretendard-Regular'; |
| 1092 | 1415 |
padding: 5px 30px; |
| 1093 | 1416 |
border: #c6c6c6 3px solid; |
| 1094 | 1417 |
border-radius: 5px; |
| 1095 | 1418 |
color: #331600; |
| 1096 |
- background-color: #EAEDF4 |
|
| 1419 |
+ background-color: #eaedf4; |
|
| 1097 | 1420 |
} |
| 1098 | 1421 |
|
| 1099 |
- .unit-pagination .selected-btn {
|
|
| 1100 |
- background-color:#c6c6c6; |
|
| 1422 |
+.unit-pagination .selected-btn {
|
|
| 1423 |
+ background-color: #c6c6c6; |
|
| 1101 | 1424 |
/* color: #fff; */ |
| 1102 | 1425 |
font-family: 'Pretendard-ExtraBold'; |
| 1103 | 1426 |
} |
| 1104 |
-/* ------------------------선생님 --------------------- */(No newline at end of file) |
|
| 1427 |
+/* ------------------------선생님 --------------------- */ |
+++ client/resources/img/new_img/ai_board/background.png
| Binary file is not shown |
+++ client/resources/img/new_img/ai_board/racebtn_1.png
| Binary file is not shown |
+++ client/resources/img/new_img/ai_board/racebtn_10.png
| Binary file is not shown |
+++ client/resources/img/new_img/ai_board/racebtn_11.png
| Binary file is not shown |
+++ client/resources/img/new_img/ai_board/racebtn_2.png
| Binary file is not shown |
+++ client/resources/img/new_img/ai_board/racebtn_3.png
| Binary file is not shown |
+++ client/resources/img/new_img/ai_board/racebtn_4.png
| Binary file is not shown |
+++ client/resources/img/new_img/ai_board/racebtn_5.png
| Binary file is not shown |
+++ client/resources/img/new_img/ai_board/racebtn_6.png
| Binary file is not shown |
+++ client/resources/img/new_img/ai_board/racebtn_7.png
| Binary file is not shown |
+++ client/resources/img/new_img/ai_board/racebtn_8.png
| Binary file is not shown |
+++ client/resources/img/new_img/ai_board/racebtn_9.png
| Binary file is not shown |
+++ client/resources/img/new_img/board/background.png
| Binary file is not shown |
+++ client/resources/img/new_img/board/racebtn_1.png
| Binary file is not shown |
+++ client/resources/img/new_img/board/racebtn_10.png
| Binary file is not shown |
+++ client/resources/img/new_img/board/racebtn_11.png
| Binary file is not shown |
+++ client/resources/img/new_img/board/racebtn_2.png
| Binary file is not shown |
+++ client/resources/img/new_img/board/racebtn_3.png
| Binary file is not shown |
+++ client/resources/img/new_img/board/racebtn_4.png
| Binary file is not shown |
+++ client/resources/img/new_img/board/racebtn_5.png
| Binary file is not shown |
+++ client/resources/img/new_img/board/racebtn_6.png
| Binary file is not shown |
+++ client/resources/img/new_img/board/racebtn_7.png
| Binary file is not shown |
+++ client/resources/img/new_img/board/racebtn_8.png
| Binary file is not shown |
+++ client/resources/img/new_img/board/racebtn_9.png
| Binary file is not shown |
+++ client/resources/img/new_img/icon/complete_icon.png
| Binary file is not shown |
+++ client/resources/img/new_img/icon/correct_icon.png
| Binary file is not shown |
+++ client/resources/img/new_img/icon/logout_icon.png
| Binary file is not shown |
+++ client/resources/img/new_img/icon/mypage_icon.png
| Binary file is not shown |
+++ client/resources/img/new_img/icon/photobook_icon.png
| Binary file is not shown |
+++ client/resources/img/new_img/icon/qNa_icon.png
| Binary file is not shown |
+++ client/resources/img/new_img/icon/school_icon.png
| Binary file is not shown |
+++ client/resources/img/new_img/plan/ai_course_1.png
| Binary file is not shown |
+++ client/resources/img/new_img/plan/ai_course_2.png
| Binary file is not shown |
+++ client/resources/img/new_img/plan/ai_course_3.png
| Binary file is not shown |
+++ client/resources/img/new_img/plan/background.png
| Binary file is not shown |
+++ client/resources/img/new_img/plan/book_icon.png
| Binary file is not shown |
+++ client/resources/img/new_img/plan/clear_img.png
| Binary file is not shown |
+++ client/resources/img/new_img/plan/course_text.png
| Binary file is not shown |
+++ client/resources/img/new_img/plan/question_btn.png
| Binary file is not shown |
+++ client/resources/img/new_img/plan/question_btn_click.png
| Binary file is not shown |
+++ client/resources/img/new_img/plan/wrong_note_btn.png
| Binary file is not shown |
+++ client/resources/img/new_img/plan/wrong_note_btn_click.png
| Binary file is not shown |
+++ client/resources/img/new_img/profile_img.png
| Binary file is not shown |
+++ client/resources/img/new_img/rabbit.png
| Binary file is not shown |
Add a comment
Delete comment
Once you delete this comment, you won't be able to recover it. Are you sure you want to delete this comment?