588 lines
26 KiB
CSS
588 lines
26 KiB
CSS
.ai-editor {
|
|
--drop-zone-icon: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.4422 44.451H8V5H41.6472V18.7221' stroke='%23888888' stroke-width='2.58824'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M36.2402 13.9214H38.7309V25.8884H50.7693V28.3643H36.2402V13.9214Z' fill='%23888888'/%3E%3Cmask id='path-3-inside-1_455_16578' fill='white'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M19.3447 15.7103H37.4085L49.2331 27.4648V38.8057H51.7238V26.4392L38.4401 13.2344H16.854V55.6002H34.5751V53.1243H19.3447V15.7103Z'/%3E%3C/mask%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M19.3447 15.7103H37.4085L49.2331 27.4648V38.8057H51.7238V26.4392L38.4401 13.2344H16.854V55.6002H34.5751V53.1243H19.3447V15.7103Z' fill='%23888888'/%3E%3Cpath d='M37.4085 15.7103L40.0586 13.0443L38.959 11.9512H37.4085V15.7103ZM19.3447 15.7103V11.9512H15.5856V15.7103H19.3447ZM49.2331 27.4648H52.9922V25.9012L51.8833 24.7988L49.2331 27.4648ZM49.2331 38.8057H45.474V42.5649H49.2331V38.8057ZM51.7238 38.8057V42.5649H55.4829V38.8057H51.7238ZM51.7238 26.4392H55.4829V24.8756L54.374 23.7732L51.7238 26.4392ZM38.4401 13.2344L41.0903 10.5684L39.9907 9.47526H38.4401V13.2344ZM16.854 13.2344V9.47526H13.0949V13.2344H16.854ZM16.854 55.6002H13.0949V59.3593H16.854V55.6002ZM34.5751 55.6002V59.3593H38.3342V55.6002H34.5751ZM34.5751 53.1243H38.3342V49.3651H34.5751V53.1243ZM19.3447 53.1243H15.5856V56.8834H19.3447V53.1243ZM37.4085 11.9512H19.3447V19.4694H37.4085V11.9512ZM51.8833 24.7988L40.0586 13.0443L34.7583 18.3763L46.5829 30.1308L51.8833 24.7988ZM52.9922 38.8057V27.4648H45.474V38.8057H52.9922ZM49.2331 42.5649H51.7238V35.0466H49.2331V42.5649ZM55.4829 38.8057V26.4392H47.9647V38.8057H55.4829ZM54.374 23.7732L41.0903 10.5684L35.79 15.9004L49.0736 29.1052L54.374 23.7732ZM38.4401 9.47526H16.854V16.9935H38.4401V9.47526ZM13.0949 13.2344V55.6002H20.6131V13.2344H13.0949ZM16.854 59.3593H34.5751V51.8411H16.854V59.3593ZM38.3342 55.6002V53.1243H30.816V55.6002H38.3342ZM19.3447 56.8834H34.5751V49.3651H19.3447V56.8834ZM15.5856 15.7103V53.1243H23.1038V15.7103H15.5856Z' fill='%23888888' mask='url(%23path-3-inside-1_455_16578)'/%3E%3Cpath d='M39.9214 53.0823V44.4507M39.9214 44.4507H49.2725M39.9214 44.4507L51.9999 55.5999' stroke='%23888888' stroke-width='2.58824'/%3E%3Crect x='28.2741' y='34.7622' width='10.353' height='1.36709' fill='%23888888' stroke='%23888888' stroke-width='0.862748'/%3E%3Crect x='34.1414' y='30.3025' width='10.2864' height='1.3804' transform='rotate(90 34.1414 30.3025)' fill='%23888888' stroke='%23888888' stroke-width='0.862748'/%3E%3C/svg%3E%0A");
|
|
|
|
container {
|
|
max-width: 1360px;
|
|
}
|
|
|
|
footer {
|
|
--footer-logo: url('data:image/png;base64,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');
|
|
padding: 0;
|
|
height: 76px;
|
|
background-color: #fff;
|
|
|
|
container {
|
|
height: 100%;
|
|
|
|
>div {
|
|
height: 100%;
|
|
box-shadow: 0 -1px 0 0 #DDDDDD;
|
|
|
|
.tel {
|
|
align-items: center;
|
|
gap: 10px;
|
|
|
|
p {
|
|
font-family: 'SpoqaHanSansNeo';
|
|
font-size: 14px;
|
|
font-weight: 300;
|
|
line-height: 17.53px;
|
|
color: #999999;
|
|
|
|
b {
|
|
font-weight: 500;
|
|
color: #666666
|
|
}
|
|
}
|
|
}
|
|
|
|
.copyright {
|
|
align-items: center;
|
|
gap: 20px;
|
|
|
|
p {
|
|
font-family: 'SpoqaHanSansNeo';
|
|
font-size: 14px;
|
|
font-weight: 300;
|
|
line-height: 17.53px;
|
|
color: #999999;
|
|
}
|
|
|
|
.footer-logo {
|
|
display: block;
|
|
background-image: var(--footer-logo);
|
|
background-repeat: no-repeat;
|
|
background-position: center center;
|
|
width: 78px;
|
|
height: 30px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.ai-editor-header {
|
|
height: 90px;
|
|
background-color: #303662;
|
|
|
|
container {
|
|
height: 100%;
|
|
|
|
[row] {
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.editor-logo {
|
|
p {
|
|
font-family: 'SpoqaHanSansNeo';
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
line-height: 30.05px;
|
|
|
|
span {
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
line-height: 20.03px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.user-info {
|
|
p {
|
|
color: #B8BBD1;
|
|
}
|
|
|
|
span {
|
|
color: #B8BBD1;
|
|
}
|
|
}
|
|
|
|
&.white {
|
|
height: 90px;
|
|
background-color: #fff;
|
|
border-bottom: 1px solid #CCCCCC;
|
|
|
|
container {
|
|
height: 100%;
|
|
|
|
[row] {
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.editor-logo {
|
|
p {
|
|
font-family: 'SpoqaHanSansNeo';
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
line-height: 30.05px;
|
|
|
|
span {
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
line-height: 20.03px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.user-info {
|
|
p {
|
|
color: #222222;
|
|
}
|
|
|
|
span {
|
|
color: #222222;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.editor-body {
|
|
box-shadow: 0 -1px 0 0 #888888;
|
|
|
|
>div[row] {
|
|
gap: 20px
|
|
}
|
|
|
|
&.white {
|
|
>div[row] {
|
|
gap: 0
|
|
}
|
|
}
|
|
|
|
.editor-menu {
|
|
position: relative;
|
|
|
|
>div {
|
|
>div {
|
|
box-shadow: 0 1px 0 0 #CCCCCC
|
|
}
|
|
}
|
|
|
|
&.white {
|
|
margin-top: 100px;
|
|
|
|
>div {
|
|
position: sticky;
|
|
top: 0px;
|
|
|
|
>div {
|
|
box-shadow: 0 1px 0 0 #CCCCCC
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.editor-wrap {
|
|
flex: 1 1 auto;
|
|
box-shadow: -1px 0 0 0 #CCCCCC;
|
|
padding: 40px 0 0 20px;
|
|
|
|
.btn-group {
|
|
position: absolute;
|
|
display: flex;
|
|
width: auto;
|
|
height: 48px;
|
|
border-radius: 12px;
|
|
box-shadow: 0 0 0 1px #BBBED4;
|
|
overflow: hidden;
|
|
|
|
button {
|
|
width: 176px;
|
|
padding: 0;
|
|
font-family: 'SpoqaHanSansNeo';
|
|
font-size: 18px;
|
|
font-weight: 500;
|
|
line-height: 22.54px;
|
|
border-radius: 0;
|
|
color: #7A7E9E;
|
|
background-color: #fff;
|
|
position: relative;
|
|
border-right: 1px solid #BBBED4;
|
|
|
|
&:last-of-type {
|
|
border-right: 0;
|
|
}
|
|
|
|
&[selected] {
|
|
background-color: #303662;
|
|
color: #fff;
|
|
font-weight: 700;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.white {
|
|
.btn-group {
|
|
display: flex;
|
|
width: auto;
|
|
height: 48px;
|
|
border-radius: 12px;
|
|
box-shadow: 0 0 0 1px #BBBED4;
|
|
overflow: hidden;
|
|
|
|
button {
|
|
width: 176px;
|
|
padding: 0;
|
|
font-family: 'SpoqaHanSansNeo';
|
|
font-size: 18px;
|
|
font-weight: 500;
|
|
line-height: 22.54px;
|
|
border-radius: 0;
|
|
color: #7A7E9E;
|
|
background-color: #fff;
|
|
position: relative;
|
|
border-right: 1px solid #BBBED4;
|
|
|
|
&:last-of-type {
|
|
border-right: 0;
|
|
}
|
|
|
|
&[selected] {
|
|
background-color: #303662;
|
|
color: #fff;
|
|
font-weight: 700;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.editor-articles {
|
|
margin-top: 80px;
|
|
border-radius: 12px;
|
|
background-color: #EBF0F8;
|
|
padding: 16px 36px 26px 20px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 28px;
|
|
margin-bottom: 100px;
|
|
|
|
|
|
.editor-article {
|
|
position: relative;
|
|
gap: 12px;
|
|
padding: 10px;
|
|
border-radius: 6px;
|
|
transition: ease all 0.3s;
|
|
|
|
&:hover {
|
|
box-shadow: 0px 0px 15px 0px #00000040;
|
|
transition: ease all 0.3s;
|
|
|
|
}
|
|
|
|
&:before {
|
|
content: "";
|
|
display: block;
|
|
width: 100%;
|
|
height: 1px;
|
|
background-color: #C9CAD6;
|
|
position: absolute;
|
|
bottom: -14px;
|
|
|
|
}
|
|
|
|
select {
|
|
appearance: none;
|
|
-webkit-appearance: none;
|
|
width: 140px;
|
|
height: 48px;
|
|
padding: 12px 16px 12px 16px;
|
|
border-radius: 8px;
|
|
border: 1px solid #BDBDBD;
|
|
font-family: 'SpoqaHanSansNeo';
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
line-height: 20.03px;
|
|
color: #666666;
|
|
background-image: var(--select-icon-arrow-gray);
|
|
background-repeat: no-repeat;
|
|
background-position-y: center;
|
|
background-position-x: calc(100% - 16px);
|
|
|
|
}
|
|
|
|
textarea {
|
|
border-radius: 8px;
|
|
height: 336px;
|
|
box-shadow: 0 0 0 1px #CCCCCC;
|
|
border: 0;
|
|
padding: 12px 16px;
|
|
resize: none;
|
|
color: #666666;
|
|
font-family: 'SpoqaHanSansNeo';
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
line-height: 26px;
|
|
|
|
}
|
|
|
|
input {
|
|
&[type="text"] {
|
|
flex: 1;
|
|
height: 48px;
|
|
padding: 0;
|
|
border-radius: 8px;
|
|
box-shadow: 0 0 0 1px #CCCCCC;
|
|
border: 0;
|
|
display: flex;
|
|
color: #666666;
|
|
padding-left: 16px;
|
|
}
|
|
}
|
|
|
|
&#editor-translate {
|
|
&:hover {
|
|
box-shadow: none;
|
|
}
|
|
|
|
&:before {
|
|
display: none;
|
|
}
|
|
|
|
.btn-wrap {
|
|
margin-top: 12px;
|
|
margin-bottom: 28px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.translation-drop-zone {
|
|
width: auto;
|
|
height: 282px;
|
|
padding: 20px;
|
|
border-radius: 6px;
|
|
background-color: #fff;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
>div {
|
|
gap: 16px;
|
|
|
|
p {
|
|
font-family: 'SpoqaHanSansNeo';
|
|
font-size: 18px;
|
|
font-weight: 400;
|
|
line-height: 22.54px;
|
|
color: #888888;
|
|
}
|
|
|
|
.drop-icon {
|
|
width: 60px;
|
|
height: 60px;
|
|
background-image: var(--drop-zone-icon);
|
|
background-repeat: no-repeat;
|
|
background-position: center center;
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
.editor-action {
|
|
padding-top: 14px;
|
|
|
|
button {
|
|
width: 132px;
|
|
height: 48px;
|
|
background-color: #4675E4;
|
|
border-radius: 12px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
.editor-indicator {
|
|
--title-icon: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.4062 12C10.0333 12 9.6756 12.1515 9.41188 12.421C9.14816 12.6906 9 13.0563 9 13.4375V16.3125C9 16.6937 9.14816 17.0594 9.41188 17.329C9.6756 17.5985 10.0333 17.75 10.4062 17.75C10.7792 17.75 11.1369 17.5985 11.4006 17.329C11.6643 17.0594 11.8125 16.6937 11.8125 16.3125V14.875H16.9688V32.125H16.0312C15.6583 32.125 15.3006 32.2765 15.0369 32.546C14.7732 32.8156 14.625 33.1813 14.625 33.5625C14.625 33.9437 14.7732 34.3094 15.0369 34.579C15.3006 34.8485 15.6583 35 16.0312 35H20.7188C21.0917 35 21.4494 34.8485 21.7131 34.579C21.9768 34.3094 22.125 33.9437 22.125 33.5625C22.125 33.1813 21.9768 32.8156 21.7131 32.546C21.4494 32.2765 21.0917 32.125 20.7188 32.125H19.7812V14.875H24.9375V16.3125C24.9375 16.6937 25.0857 17.0594 25.3494 17.329C25.6131 17.5985 25.9708 17.75 26.3438 17.75C26.7167 17.75 27.0744 17.5985 27.3381 17.329C27.6018 17.0594 27.75 16.6937 27.75 16.3125V13.4375C27.75 13.0563 27.6018 12.6906 27.3381 12.421C27.0744 12.1515 26.7167 12 26.3438 12H10.4062ZM24 23.0208C24 22.6396 24.1482 22.274 24.4119 22.0044C24.6756 21.7348 25.0333 21.5833 25.4062 21.5833H37.5938C37.9667 21.5833 38.3244 21.7348 38.5881 22.0044C38.8518 22.274 39 22.6396 39 23.0208C39 23.4021 38.8518 23.7677 38.5881 24.0373C38.3244 24.3069 37.9667 24.4583 37.5938 24.4583H25.4062C25.0333 24.4583 24.6756 24.3069 24.4119 24.0373C24.1482 23.7677 24 23.4021 24 23.0208ZM24 29.7292C24 29.3479 24.1482 28.9823 24.4119 28.7127C24.6756 28.4431 25.0333 28.2917 25.4062 28.2917H37.5938C37.9667 28.2917 38.3244 28.4431 38.5881 28.7127C38.8518 28.9823 39 29.3479 39 29.7292C39 30.1104 38.8518 30.476 38.5881 30.7456C38.3244 31.0152 37.9667 31.1667 37.5938 31.1667H25.4062C25.0333 31.1667 24.6756 31.0152 24.4119 30.7456C24.1482 30.476 24 30.1104 24 29.7292Z' fill='%232D2D33'/%3E%3C/svg%3E%0A");
|
|
--h1-icon: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.461 14.3268H16.4041V21.9381H24.396V14.3268H27.3391V33H24.396V24.5006H16.4041V33H13.461V14.3268ZM34.0092 31.4354H35.8275V33H30.0203V31.4354H32.0782V25.6987L32.1345 24.7825L30.4149 26.3471L29.3014 25.0785L32.346 22.4568H34.0092V31.4354Z' fill='%232D2D33'/%3E%3C/svg%3E%0A");
|
|
--h2-icon: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.461 14.3268H16.4041V21.9381H24.396V14.3268H27.3391V33H24.396V24.5006H16.4041V33H13.461V14.3268ZM32.6843 22.2877C34.6435 22.2877 36.0107 23.5422 36.0107 25.3463C35.9684 26.8263 34.9254 28.0526 33.8823 29.1379L31.6976 31.3368C32.0782 31.2381 32.4165 31.224 32.7406 31.224H36.1235V33H28.7799V31.8724L32.3178 28.3909C33.389 27.3197 34.0515 26.474 34.0515 25.3886C34.0515 24.4161 33.4736 23.9086 32.5574 23.9086C31.7681 23.9086 31.2043 24.4443 30.9787 25.0644C30.9083 25.2759 30.8801 25.4873 30.866 25.7692L29.0195 25.4591C29.3578 23.3025 30.7532 22.2877 32.6843 22.2877Z' fill='%232D2D33'/%3E%3C/svg%3E%0A");
|
|
--h3-icon: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.461 14.3268H16.4041V21.9381H24.396V14.3268H27.3391V33H24.396V24.5006H16.4041V33H13.461V14.3268ZM32.7547 22.2877C34.7281 22.33 36.0389 23.5563 35.9966 25.1208C35.9966 26.3189 35.306 27.0237 34.418 27.4606C35.6583 27.9258 36.1799 28.7292 36.1799 29.9695C36.1376 32.1261 34.418 33.2678 32.4446 33.2678C30.3022 33.2678 29.245 32.1966 28.6812 30.3501L30.4008 29.6735C30.6264 30.5756 31.4157 31.5764 32.4165 31.5764C33.6568 31.5764 34.2629 30.8012 34.2629 30.0118C34.2629 29.0252 33.9951 28.3486 31.7963 28.3486V26.9391C33.6568 26.8968 34.0938 26.3048 34.0938 25.4027C34.1079 24.4302 33.5582 23.9509 32.642 23.9509C31.4439 23.9509 31.0351 24.7403 30.8519 25.7551C30.2458 25.6564 29.6397 25.5296 29.0195 25.4309C29.4283 23.2744 30.7673 22.2877 32.7547 22.2877Z' fill='%232D2D33'/%3E%3C/svg%3E%0A");
|
|
--message-icon: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.6667 17.6667H29.3333M18.6667 23H26.6667M26.6667 29.6667H25.3333L18.6667 33.6667V29.6667H16C14.9391 29.6667 13.9217 29.2452 13.1716 28.4951C12.4214 27.7449 12 26.7275 12 25.6667V15C12 13.9391 12.4214 12.9217 13.1716 12.1716C13.9217 11.4214 14.9391 11 16 11H32C33.0609 11 34.0783 11.4214 34.8284 12.1716C35.5786 12.9217 36 13.9391 36 15V21M33.3333 35V35.0133M33.3333 31C33.9311 30.9981 34.5109 30.7957 34.98 30.4253C35.4491 30.0548 35.7803 29.5377 35.9207 28.9567C36.0612 28.3757 36.0026 27.7644 35.7544 27.2206C35.5063 26.6768 35.0829 26.232 34.552 25.9573C34.0216 25.6856 33.4148 25.6014 32.8304 25.7183C32.246 25.8352 31.7184 26.1464 31.3333 26.6013' stroke='%232D2D33' stroke-width='2.66667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
|
|
position: relative;
|
|
|
|
>div {
|
|
gap: 16px;
|
|
position: sticky;
|
|
top: 128px;
|
|
margin-top: 128px;
|
|
|
|
a {
|
|
width: 150px;
|
|
height: 48px;
|
|
border-radius: 6px;
|
|
box-shadow: 0 0 0 1px #4675E4;
|
|
color: #4675E4;
|
|
font-family: 'SpoqaHanSansNeo';
|
|
font-size: 18px;
|
|
font-weight: 500;
|
|
line-height: 22.54px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
|
|
&[current] {
|
|
background-color: #4675E4;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.white {
|
|
margin-left: 32px;
|
|
background-color: #F8F8F8;
|
|
width: 72px;
|
|
|
|
>div {
|
|
gap: 16px;
|
|
position: sticky;
|
|
top: 128px;
|
|
margin-top: 128px;
|
|
|
|
a {
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: 6px;
|
|
box-shadow: 0 0 0 1px transparent;
|
|
color: transparent;
|
|
font-family: 'SpoqaHanSansNeo';
|
|
font-size: 0px;
|
|
font-weight: 500;
|
|
line-height: 22.54px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
&[current] {
|
|
background-color: transparent;
|
|
color: #fff;
|
|
}
|
|
|
|
.title {
|
|
background-image: var(--title-icon);
|
|
background-repeat: no-repeat;
|
|
background-position: center center;
|
|
width: 48px;
|
|
height: 48px;
|
|
}
|
|
|
|
.h1 {
|
|
background-image: var(--h1-icon);
|
|
background-repeat: no-repeat;
|
|
background-position: center center;
|
|
width: 48px;
|
|
height: 48px;
|
|
}
|
|
|
|
.h2 {
|
|
background-image: var(--h2-icon);
|
|
background-repeat: no-repeat;
|
|
background-position: center center;
|
|
width: 48px;
|
|
height: 48px;
|
|
}
|
|
|
|
.h3 {
|
|
background-image: var(--h3-icon);
|
|
background-repeat: no-repeat;
|
|
background-position: center center;
|
|
width: 48px;
|
|
height: 48px;
|
|
}
|
|
|
|
.message {
|
|
background-image: var(--message-icon);
|
|
background-repeat: no-repeat;
|
|
background-position: center center;
|
|
width: 48px;
|
|
height: 48px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.modal {
|
|
&.editor {
|
|
border-radius: 12px;
|
|
|
|
.modal-head {
|
|
height: 90px;
|
|
background-color: #313762;
|
|
|
|
p {
|
|
font-family: 'SpoqaHanSansNeo';
|
|
font-size: 30px;
|
|
font-weight: 700;
|
|
line-height: 37.56px;
|
|
|
|
}
|
|
}
|
|
|
|
.modal-body {
|
|
textarea {
|
|
border-radius: 8px;
|
|
width: auto;
|
|
height: 400px;
|
|
box-shadow: 0 0 0 1px #CCCCCC;
|
|
border: 0;
|
|
resize: none;
|
|
color: #000;
|
|
font-family: 'SpoqaHanSansNeo';
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
line-height: 26px;
|
|
}
|
|
|
|
[flexend] {
|
|
button {
|
|
width: 103px;
|
|
height: 48px;
|
|
font-family: 'SpoqaHanSansNeo';
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
line-height: 37.56px;
|
|
padding: 0;
|
|
border-radius: 12px;
|
|
|
|
&:first-of-type {
|
|
color: #666;
|
|
background-color: #EBF0F8;
|
|
}
|
|
|
|
&:last-of-type {
|
|
color: #fff;
|
|
background-color: #4675E4;
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
} |