+
+
+
{getMessage('modal.cover.outline.length')}
+
+ onlyNumberInputChange(e, setLength1)}
+ placeholder="3000"
+ />
-
-
{getMessage('modal.cover.outline.setting')}
- {type === OUTER_LINE_TYPE.OUTER_LINE ? (
-
- ) : type === OUTER_LINE_TYPE.RIGHT_ANGLE ? (
-
- ) : type === OUTER_LINE_TYPE.ANGLE ? (
-
- ) : (
- <>
- )}
-
-
-
-
-
-
+
+
+
+
{getMessage('modal.cover.outline.arrow')}
+
+
+
+
+
-
+
)
}
diff --git a/src/components/floor-plan/modal/outerlinesetting/RightAngle.jsx b/src/components/floor-plan/modal/outerlinesetting/RightAngle.jsx
new file mode 100644
index 00000000..815ab087
--- /dev/null
+++ b/src/components/floor-plan/modal/outerlinesetting/RightAngle.jsx
@@ -0,0 +1,45 @@
+import { useMessage } from '@/hooks/useMessage'
+
+export default function RightAngle() {
+ const { getMessage } = useMessage()
+ return (
+
+
+
+
{getMessage('modal.cover.outline.length')}
+
+
+
+
+
+
+
{getMessage('modal.cover.outline.arrow')}
+
+
+
+
+
+
+
+
+
+
+
{getMessage('modal.cover.outline.length')}
+
+
+
+
+
+
+
{getMessage('modal.cover.outline.arrow')}
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/src/components/floor-plan/modal/outerlinesetting/WallLineSetting.jsx b/src/components/floor-plan/modal/outerlinesetting/WallLineSetting.jsx
new file mode 100644
index 00000000..7e90bfb9
--- /dev/null
+++ b/src/components/floor-plan/modal/outerlinesetting/WallLineSetting.jsx
@@ -0,0 +1,83 @@
+'use client'
+
+import WithDraggable from '@/components/common/draggable/withDraggable'
+import { useMessage } from '@/hooks/useMessage'
+import { OUTER_LINE_TYPE } from '@/store/outerLineAtom'
+import { useOuterLineWall } from '@/hooks/roofcover/useOuterLineWall'
+import OuterLineWall from '@/components/floor-plan/modal/outerlinesetting/OuterLineWall'
+import RightAngle from '@/components/floor-plan/modal/outerlinesetting/RightAngle'
+import Angle from '@/components/floor-plan/modal/outerlinesetting/Angle'
+import DoublePitch from '@/components/floor-plan/modal/outerlinesetting/DoublePitch'
+import Diagonal from '@/components/floor-plan/modal/outerlinesetting/Diagonal'
+
+export default function WallLineSetting(props) {
+ const { setShowOutlineModal } = props
+ const { getMessage } = useMessage()
+ const { type, setType, handleFix, handleRollback } = useOuterLineWall()
+
+ return (
+
+
+
+
{getMessage('modal.cover.outline.drawing')}
+
+
+
+
+
+
+
+
+
+
+
+ {type === OUTER_LINE_TYPE.OUTER_LINE ? (
+
+ ) : type === OUTER_LINE_TYPE.RIGHT_ANGLE ? (
+
+ ) : type === OUTER_LINE_TYPE.DOUBLE_PITCH ? (
+
+ ) : type === OUTER_LINE_TYPE.ANGLE ? (
+
+ ) : type === OUTER_LINE_TYPE.DIAGONAL_LINE ? (
+
+ ) : (
+ <>
+ )}
+
+
+
+
+
+
+ )
+}
diff --git a/src/locales/ja.json b/src/locales/ja.json
index af4f35ef..8e62d630 100644
--- a/src/locales/ja.json
+++ b/src/locales/ja.json
@@ -26,7 +26,7 @@
"modal.cover.outline.right.angle": "直角",
"modal.cover.outline2": "イ・グベ",
"modal.cover.outline.angle": "角度",
- "modal.cover.outline.diagonal": "対角線",
+ "modal.cover.outline.diagonal": "対角線の",
"modal.cover.outline.setting": "설정",
"modal.cover.outline.length": "長さ (mm)",
"modal.cover.outline.arrow": "方向 (矢印)",
diff --git a/src/store/outerLineAtom.js b/src/store/outerLineAtom.js
index f8494bea..2fcc5f9d 100644
--- a/src/store/outerLineAtom.js
+++ b/src/store/outerLineAtom.js
@@ -1,9 +1,9 @@
-import { atom, selector } from 'recoil'
+import { atom } from 'recoil'
export const OUTER_LINE_TYPE = {
OUTER_LINE: 'outerLine', // 외벽선
RIGHT_ANGLE: 'rightAngle', // 직각
- LEE_GUBAE: 'leeGubae', // 이구배
+ DOUBLE_PITCH: 'doublePitch',
ANGLE: 'angle', // 각도
DIAGONAL_LINE: 'diagonalLine', // 대각선
}
diff --git a/src/styles/_contents.scss b/src/styles/_contents.scss
index 531eb074..3d503b0b 100644
--- a/src/styles/_contents.scss
+++ b/src/styles/_contents.scss
@@ -1,894 +1,845 @@
// CanvasPage
-.canvas-wrap {
- height: calc(100vh - 47px);
- display: flex;
- flex-direction: column;
-
- .canvas-content {
- flex: 1 1 auto;
-
- .canvas-layout {
- height: 100%;
- }
- }
-
- &.sub-wrap {
- overflow: hidden;
-
- .canvas-content {
- height: calc(100% - 47px);
- }
- }
-}
-
-// CanvasMenu
-.canvas-menu-wrap {
- position: relative;
- display: block;
- width: 100%;
- padding-bottom: 0;
- background-color: #383838;
- transition: padding .17s ease-in-out;
-
- .canvas-menu-inner {
- position: relative;
+.canvas-wrap{
+ height: calc(100vh - 47px);
display: flex;
- align-items: center;
- padding: 0 40px 0 20px;
- background-color: #2C2C2C;
- z-index: 999;
-
- .canvas-menu-list {
- display: flex;
- align-items: center;
- height: 100%;
-
- .canvas-menu-item {
- display: flex;
- align-items: center;
- height: 100%;
-
- button {
- display: flex;
- align-items: center;
- font-size: 12px;
- height: 100%;
- color: #fff;
- font-weight: 600;
- padding: 15px 20px;
- opacity: 0.55;
- transition: all .17s ease-in-out;
-
- .menu-icon {
- display: block;
- width: 16px;
- height: 16px;
- background-repeat: no-repeat;
- background-position: center;
- background-size: cover;
- margin-right: 10px;
-
- &.con00 {
- background-image: url(/static/images/canvas/menu_icon00.svg);
- }
-
- &.con01 {
- background-image: url(/static/images/canvas/menu_icon01.svg);
- }
-
- &.con02 {
- background-image: url(/static/images/canvas/menu_icon02.svg);
- }
-
- &.con03 {
- background-image: url(/static/images/canvas/menu_icon03.svg);
- }
-
- &.con04 {
- background-image: url(/static/images/canvas/menu_icon04.svg);
- }
-
- &.con05 {
- background-image: url(/static/images/canvas/menu_icon05.svg);
- }
-
- &.con06 {
- background-image: url(/static/images/canvas/menu_icon06.svg);
- }
- }
+ flex-direction: column;
+ .canvas-content{
+ flex: 1 1 auto;
+ .canvas-layout{
+ height: 100%;
}
-
- &.active {
- background-color: #383838;
-
- button {
- opacity: 1;
- }
- }
- }
}
-
- .canvas-side-btn-wrap {
- display: flex;
- align-items: center;
- margin-left: auto;
-
- .select-box {
- width: 124px;
- margin-right: 5px;
-
- > div {
- width: 100%;
- }
- }
-
- .btn-from {
- display: flex;
- align-items: center;
- gap: 5px;
-
- button {
- display: block;
- width: 30px;
- height: 30px;
- border-radius: 2px;
- background-color: #3D3D3D;
- background-position: center;
- background-repeat: no-repeat;
- background-size: 15px 15px;
- transition: all .17s ease-in-out;
-
- &.btn01 {
- background-image: url(../../public/static/images/canvas/side_icon03.svg);
- }
-
- &.btn02 {
- background-image: url(../../public/static/images/canvas/side_icon02.svg);
- }
-
- &.btn03 {
- background-image: url(../../public/static/images/canvas/side_icon01.svg);
- }
-
- &.btn04 {
- background-image: url(../../public/static/images/canvas/side_icon04.svg);
- }
-
- &.btn05 {
- background-image: url(../../public/static/images/canvas/side_icon05.svg);
- }
-
- &.btn06 {
- background-image: url(../../public/static/images/canvas/side_icon06.svg);
- }
-
- &.btn07 {
- background-image: url(../../public/static/images/canvas/side_icon07.svg);
- }
-
- &.btn08 {
- background-image: url(../../public/static/images/canvas/side_icon08.svg);
- }
-
- &.btn09 {
- background-image: url(../../public/static/images/canvas/side_icon09.svg);
- }
-
- &:hover {
- background-color: #1083E3;
- }
-
- &.active {
- background-color: #1083E3;
- }
- }
- }
-
- .ico-btn-from {
- display: flex;
- align-items: center;
- gap: 5px;
-
- button {
- .ico {
- display: block;
- width: 15px;
- height: 15px;
- background-repeat: no-repeat;
- background-position: center;
- background-size: contain;
-
- &.ico01 {
- background-image: url(../../public/static/images/canvas/ico-flx01.svg);
- }
-
- &.ico02 {
- background-image: url(../../public/static/images/canvas/ico-flx02.svg);
- }
-
- &.ico03 {
- background-image: url(../../public/static/images/canvas/ico-flx03.svg);
- }
-
- &.ico04 {
- background-image: url(../../public/static/images/canvas/ico-flx04.svg);
- }
- }
-
- .name {
- font-size: 12px;
- color: #fff;
- }
- }
-
- &.form06 {
- .name {
- font-size: 13px;
- }
- }
- }
-
- .vertical-horizontal {
- display: flex;
- min-width: 170px;
- height: 28px;
- margin: 0 5px;
- border-radius: 2px;
- background: #373737;
- line-height: 28px;
+ &.sub-wrap{
overflow: hidden;
-
- span {
- padding: 0 10px;
- font-size: 13px;
- color: #fff;
+ .canvas-content{
+ height: calc(100% - 47px);
}
-
- button {
- margin-left: auto;
- height: 100%;
- background-color: #4B4B4B;
- font-size: 13px;
- font-weight: 400;
- color: #fff;
- padding: 0 7.5px;
- transition: all .17s ease-in-out;
- }
-
- &.on {
- button {
- background-color: #1083E3;
- }
- }
- }
-
- .size-control {
- display: flex;
- align-items: center;
- justify-content: center;
- gap: 10px;
- background-color: #3D3D3D;
- border-radius: 2px;
- width: 100px;
- height: 30px;
- margin: 0 5px;
-
- span {
- font-size: 13px;
- color: #fff;
- }
-
- .control-btn {
- display: block;
- width: 12px;
- height: 12px;
- background-repeat: no-repeat;
- background-size: cover;
- background-position: center;
-
- &.minus {
- background-image: url(../../public/static/images/canvas/minus.svg);
- }
-
- &.plus {
- background-image: url(../../public/static/images/canvas/plus.svg);
- }
- }
- }
}
- }
-
- .canvas-depth2-wrap {
- position: absolute;
- top: -100%;
- left: 0;
- background-color: #383838;
+}
+// CanvasMenu
+.canvas-menu-wrap{
+ position: relative;
+ display: block;
width: 100%;
- height: 50px;
- transition: all .17s ease-in-out;
-
- .canvas-depth2-inner {
- display: flex;
- align-items: center;
- padding: 0 40px;
- height: 100%;
-
- .canvas-depth2-list {
+ padding-bottom: 0;
+ background-color: #383838;
+ transition: padding .17s ease-in-out;
+ .canvas-menu-inner{
+ position: relative;
display: flex;
align-items: center;
- height: 100%;
-
- .canvas-depth2-item {
- display: flex;
- align-items: center;
- margin-right: 26px;
- height: 100%;
-
- button {
- position: relative;
- opacity: 0.55;
- color: #fff;
- font-size: 12px;
- font-weight: normal;
+ padding: 0 40px 0 20px;
+ background-color: #2C2C2C;
+ z-index: 999;
+ .canvas-menu-list{
+ display: flex;
+ align-items: center;
height: 100%;
- padding-right: 12px;
- }
-
- &.active {
- button {
- opacity: 1;
- font-weight: 600;
-
- &:after {
- content: '';
- position: absolute;
- top: 50%;
- right: 0;
- transform: translateY(-50%);
- width: 5px;
- height: 8px;
- background: url(../../public/static/images/canvas/depth2-arr.svg) no-repeat center;
- }
+ .canvas-menu-item{
+ display: flex;
+ align-items: center;
+ height: 100%;
+ button{
+ display: flex;
+ align-items: center;
+ font-size: 12px;
+ height: 100%;
+ color: #fff;
+ font-weight: 600;
+ padding: 15px 20px;
+ opacity: 0.55;
+ transition: all .17s ease-in-out;
+ .menu-icon{
+ display: block;
+ width: 16px;
+ height: 16px;
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: cover;
+ margin-right: 10px;
+ &.con00{background-image: url(/static/images/canvas/menu_icon00.svg);}
+ &.con01{background-image: url(/static/images/canvas/menu_icon01.svg);}
+ &.con02{background-image: url(/static/images/canvas/menu_icon02.svg);}
+ &.con03{background-image: url(/static/images/canvas/menu_icon03.svg);}
+ &.con04{background-image: url(/static/images/canvas/menu_icon04.svg);}
+ &.con05{background-image: url(/static/images/canvas/menu_icon05.svg);}
+ &.con06{background-image: url(/static/images/canvas/menu_icon06.svg);}
+ }
+ }
+ &.active{
+ background-color: #383838;
+ button{
+ opacity: 1;
+ }
+ }
}
- }
}
- }
-
- .canvas-depth2-btn-list {
- display: flex;
- align-items: center;
- margin-left: auto;
- height: 100%;
-
- .depth2-btn-box {
- display: flex;
- align-items: center;
- margin-right: 34px;
- height: 100%;
- transition: all .17s ease-in-out;
-
- button {
- position: relative;
- font-size: 12px;
- font-weight: 400;
+ .canvas-side-btn-wrap{
+ display: flex;
+ align-items: center;
+ margin-left: auto;
+ .select-box{
+ width: 124px;
+ margin-right: 5px;
+ > div{
+ width: 100%;
+ }
+ }
+ .btn-from{
+ display: flex;
+ align-items: center;
+ gap: 5px;
+ button{
+ display: block;
+ width: 30px;
+ height: 30px;
+ border-radius: 2px;
+ background-color: #3D3D3D;
+ background-position: center;
+ background-repeat: no-repeat;
+ background-size: 15px 15px;
+ transition: all .17s ease-in-out;
+ &.btn01{background-image: url(../../public/static/images/canvas/side_icon03.svg);}
+ &.btn02{background-image: url(../../public/static/images/canvas/side_icon02.svg);}
+ &.btn03{background-image: url(../../public/static/images/canvas/side_icon01.svg);}
+ &.btn04{background-image: url(../../public/static/images/canvas/side_icon04.svg);}
+ &.btn05{background-image: url(../../public/static/images/canvas/side_icon05.svg);}
+ &.btn06{background-image: url(../../public/static/images/canvas/side_icon06.svg);}
+ &.btn07{background-image: url(../../public/static/images/canvas/side_icon07.svg);}
+ &.btn08{background-image: url(../../public/static/images/canvas/side_icon08.svg);}
+ &.btn09{background-image: url(../../public/static/images/canvas/side_icon09.svg);}
+ &:hover{
+ background-color: #1083E3;
+ }
+ &.active{
+ background-color: #1083E3;
+ }
+ }
+ }
+ .ico-btn-from{
+ display: flex;
+ align-items: center;
+ gap: 5px;
+ button{
+ .ico{
+ display: block;
+ width: 15px;
+ height: 15px;
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: contain;
+ &.ico01{background-image: url(../../public/static/images/canvas/ico-flx01.svg);}
+ &.ico02{background-image: url(../../public/static/images/canvas/ico-flx02.svg);}
+ &.ico03{background-image: url(../../public/static/images/canvas/ico-flx03.svg);}
+ &.ico04{background-image: url(../../public/static/images/canvas/ico-flx04.svg);}
+ }
+ .name{
+ font-size: 12px;
+ color: #fff;
+ }
+ }
+ &.form06{
+ .name{
+ font-size: 13px;
+ }
+ }
+ }
+ .vertical-horizontal{
+ display: flex;
+ min-width: 170px;
+ height: 28px;
+ margin: 0 5px;
+ border-radius: 2px;
+ background: #373737;
+ line-height: 28px;
+ overflow: hidden;
+ span{
+ padding: 0 10px;
+ font-size: 13px;
+ color: #fff;
+ }
+ button{
+ margin-left: auto;
+ height: 100%;
+ background-color: #4B4B4B;
+ font-size: 13px;
+ font-weight: 400;
+ color: #fff;
+ padding: 0 7.5px;
+ transition: all .17s ease-in-out;
+ }
+ &.on{
+ button{
+ background-color: #1083E3;
+ }
+ }
+ }
+ .size-control{
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 10px;
+ background-color: #3D3D3D;
+ border-radius: 2px;
+ width: 100px;
+ height: 30px;
+ margin: 0 5px;
+ span{
+ font-size: 13px;
+ color: #fff;
+ }
+ .control-btn{
+ display: block;
+ width: 12px;
+ height: 12px;
+ background-repeat: no-repeat;
+ background-size: cover;
+ background-position: center;
+ &.minus{
+ background-image: url(../../public/static/images/canvas/minus.svg);
+ }
+ &.plus{
+ background-image: url(../../public/static/images/canvas/plus.svg);
+ }
+ }
+ }
+ }
+ }
+ .canvas-depth2-wrap{
+ position: absolute;
+ top: -100%;
+ left: 0;
+ background-color: #383838;
+ width: 100%;
+ height: 50px;
+ transition: all .17s ease-in-out;
+ .canvas-depth2-inner{
+ display: flex;
+ align-items: center;
+ padding: 0 40px;
height: 100%;
- color: #fff;
- padding-right: 12px;
-
- &:after {
- content: '';
- position: absolute;
- top: 50%;
- right: 0;
- transform: translateY(-50%);
- width: 5px;
- height: 8px;
- background: url(../../public/static/images/canvas/depth2-arr.svg) no-repeat center;
+ .canvas-depth2-list{
+ display: flex;
+ align-items: center ;
+ height: 100%;
+ .canvas-depth2-item{
+ display: flex;
+ align-items: center;
+ margin-right: 26px;
+ height: 100%;
+ button{
+ position: relative;
+ opacity: 0.55;
+ color: #fff;
+ font-size: 12px;
+ font-weight: normal;
+ height: 100%;
+ padding-right: 12px;
+ }
+ &.active{
+ button{
+ opacity: 1;
+ font-weight: 600;
+ &:after{
+ content: '';
+ position: absolute;
+ top: 50%;
+ right: 0;
+ transform: translateY(-50%);
+ width: 5px;
+ height: 8px;
+ background: url(../../public/static/images/canvas/depth2-arr.svg) no-repeat center;
+ }
+ }
+ }
+ }
+ }
+ .canvas-depth2-btn-list{
+ display: flex;
+ align-items: center;
+ margin-left: auto;
+ height: 100%;
+ .depth2-btn-box{
+ display: flex;
+ align-items: center;
+ margin-right: 34px;
+ height: 100%;
+ transition: all .17s ease-in-out;
+ button{
+ position: relative;
+ font-size: 12px;
+ font-weight: 400;
+ height: 100%;
+ color: #fff;
+ padding-right: 12px;
+ &:after{
+ content: '';
+ position: absolute;
+ top: 50%;
+ right: 0;
+ transform: translateY(-50%);
+ width: 5px;
+ height: 8px;
+ background: url(../../public/static/images/canvas/depth2-arr.svg) no-repeat center;
+ }
+ }
+ &:last-child{
+ margin-right: 0;
+ }
+ &.mouse{
+ opacity: 0.55;
+ }
+ }
}
- }
-
- &:last-child {
- margin-right: 0;
- }
-
- &.mouse {
- opacity: 0.55;
- }
}
- }
+ &.active{
+ top: 47px;
+ }
}
-
- &.active {
- top: 47px;
+ &.active{
+ padding-bottom: 50px;
}
- }
-
- &.active {
- padding-bottom: 50px;
- }
}
// canvas-layout
-.canvas-layout {
- .canvas-page-list {
- display: flex;
- background-color: #1C1C1C;
- border-top: 1px solid #000;
- width: 100%;
-
- .canvas-plane-wrap {
- display: flex;
- align-items: center;
- max-width: calc(100% - 45px);
-
- .canvas-page-box {
+.canvas-layout{
+ .canvas-page-list{
display: flex;
- align-items: center;
- background-color: #1c1c1c;
- padding: 9.6px 20px;
- border-right: 1px solid #000;
- min-width: 0;
- transition: all .17s ease-in-out;
-
- span {
- display: flex;
- align-items: center;
- width: 100%;
- font-size: 12px;
- font-family: 'Pretendard', sans-serif;
- color: #AAA;
- white-space: nowrap;
- text-overflow: ellipsis;
- overflow: hidden;
+ background-color: #1C1C1C;
+ border-top: 1px solid #000;
+ width: 100%;
+ .canvas-plane-wrap{
+ display: flex;
+ align-items: center;
+ max-width: calc(100% - 45px);
+ .canvas-page-box{
+ display: flex;
+ align-items: center;
+ background-color: #1c1c1c;
+ padding: 9.6px 20px;
+ border-right:1px solid #000;
+ min-width: 0;
+ transition: all .17s ease-in-out;
+ span{
+ display: flex;
+ align-items: center;
+ width: 100%;
+ font-size: 12px;
+ font-family: 'Pretendard', sans-serif;
+ color: #AAA;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ }
+ .close{
+ flex: none;
+ display: block;
+ width: 7px;
+ height: 8px;
+ margin-left: 15px;
+ background: url(../../public/static/images/canvas/plan_close_gray.svg)no-repeat center;
+ background-size: cover;
+ }
+ &.on{
+ background-color: #fff;
+ span{
+ font-weight: 600;
+ color: #101010;
+ }
+ .close{
+ background: url(../../public/static/images/canvas/plan_close_black.svg)no-repeat center;
+ }
+ &:hover{
+ background-color: #fff;
+ }
+ }
+ &:hover{
+ background-color: #000;
+ }
+ }
}
-
- .close {
- flex: none;
- display: block;
- width: 7px;
- height: 8px;
- margin-left: 15px;
- background: url(../../public/static/images/canvas/plan_close_gray.svg) no-repeat center;
- background-size: cover;
+ .plane-add{
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 45px;
+ padding: 13.5px 0;
+ background-color: #1C1C1C;
+ border-right: 1px solid #000;
+ transition: all .17s ease-in-out;
+ span{
+ display: block;
+ width: 9px;
+ height: 9px;
+ background: url(../../public/static/images/canvas/plane_add.svg)no-repeat center;
+ background-size: cover;
+ }
+ &:hover{
+ background-color: #000;
+ }
}
-
- &.on {
- background-color: #fff;
-
- span {
- font-weight: 600;
- color: #101010;
- }
-
- .close {
- background: url(../../public/static/images/canvas/plan_close_black.svg) no-repeat center;
- }
-
- &:hover {
- background-color: #fff;
- }
- }
-
- &:hover {
- background-color: #000;
- }
- }
}
-
- .plane-add {
- display: flex;
- align-items: center;
- justify-content: center;
- width: 45px;
- padding: 13.5px 0;
- background-color: #1C1C1C;
- border-right: 1px solid #000;
- transition: all .17s ease-in-out;
-
- span {
- display: block;
- width: 9px;
- height: 9px;
- background: url(../../public/static/images/canvas/plane_add.svg) no-repeat center;
- background-size: cover;
- }
-
- &:hover {
- background-color: #000;
- }
- }
- }
}
-.canvas-frame {
- position: relative;
- height: calc(100% - 36.5px);
- background-color: #fff;
-
- canvas {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- }
+.canvas-frame{
+ position: relative;
+ height: calc(100% - 36.5px);
+ background-color: #fff;
+ canvas{
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ }
}
// sub-page
-.sub-header {
- position: fixed;
- top: 46px;
- left: 0;
- width: 100%;
- height: 46px;
- border-bottom: 1px solid #000;
- background: #2C2C2C;
- z-index: 999;
-
- .sub-header-inner {
- display: flex;
- align-items: center;
- height: 100%;
- padding: 0 100px;
-
- .sub-header-title-wrap {
- display: flex;
- align-items: center;
-
- .title-item {
- position: relative;
- padding: 0 24px;
-
- a {
- display: flex;
- align-items: center;
-
- .icon {
- width: 22px;
- height: 22px;
- margin-right: 8px;
- background-repeat: no-repeat;
- background-position: center;
- background-size: cover;
-
- &.drawing {
- background-image: url(../../public/static/images/main/drawing_icon.svg);
- }
- }
- }
-
- &:after {
- content: '';
- position: absolute;
- top: 50%;
- right: 0;
- transform: translateY(-50%);
- width: 1px;
- height: 16px;
- background-color: #D9D9D9;
- }
-
- &:first-child {
- padding-left: 0;
- }
-
- &:last-child {
- padding-right: 0;
-
- &:after {
- display: none;
- }
- }
- }
- }
-
- .sub-header-title {
- font-size: 16px;
- color: #fff;
- font-weight: 600;
- }
-
- .sub-header-location {
- margin-left: auto;
- display: flex;
- align-items: center;
-
- .location-item {
- position: relative;
+.sub-header{
+ position: fixed;
+ top: 46px;
+ left: 0;
+ width: 100%;
+ height: 46px;
+ border-bottom: 1px solid #000;
+ background: #2C2C2C;
+ z-index: 999;
+ .sub-header-inner{
display: flex;
align-items: center;
- padding: 0 10px;
-
- span {
- display: flex;
- font-size: 12px;
- color: #AAA;
- font-weight: normal;
- cursor: default;
+ height: 100%;
+ padding: 0 100px;
+ .sub-header-title-wrap{
+ display: flex;
+ align-items: center;
+ .title-item{
+ position: relative;
+ padding: 0 24px;
+ a{
+ display: flex;
+ align-items: center;
+ .icon{
+ width: 22px;
+ height: 22px;
+ margin-right: 8px;
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: cover;
+ &.drawing{background-image: url(../../public/static/images/main/drawing_icon.svg);}
+ }
+ }
+ &:after{
+ content: '';
+ position: absolute;
+ top: 50%;
+ right: 0;
+ transform: translateY(-50%);
+ width: 1px;
+ height: 16px;
+ background-color: #D9D9D9;
+ }
+ &:first-child{
+ padding-left: 0;
+ }
+ &:last-child{
+ padding-right: 0;
+ &:after{
+ display: none;
+ }
+ }
+ }
}
-
- &:after {
- content: '';
- position: absolute;
- top: 50%;
- right: 0;
- transform: translateY(-50%);
- width: 4px;
- height: 6px;
- background: url(../../public/static/images/main/loaction_arr.svg) no-repeat center;
- }
-
- &:first-child {
- padding-left: 0;
- }
-
- &:last-child {
- padding-right: 0;
-
- span {
+ .sub-header-title{
+ font-size: 16px;
color: #fff;
- }
-
- &:after {
- display: none;
- }
+ font-weight: 600;
+ }
+ .sub-header-location{
+ margin-left: auto;
+ display: flex;
+ align-items: center;
+ .location-item{
+ position: relative;
+ display: flex;
+ align-items: center;
+ padding: 0 10px;
+ span{
+ display: flex;
+ font-size: 12px;
+ color: #AAA;
+ font-weight: normal;
+ cursor: default;
+ }
+ &:after{
+ content: '';
+ position: absolute;
+ top: 50%;
+ right: 0;
+ transform: translateY(-50%);
+ width: 4px;
+ height: 6px;
+ background: url(../../public/static/images/main/loaction_arr.svg)no-repeat center;
+ }
+ &:first-child{
+ padding-left: 0;
+ }
+ &:last-child{
+ padding-right: 0;
+ span{
+ color: #fff;
+ }
+ &:after{
+ display: none;
+ }
+ }
+ }
}
- }
}
- }
}
// sub content
-.sub-content {
- padding-top: 46px;
-
- .sub-content-inner {
- max-width: 1720px;
- margin: 0 auto;
- padding-top: 20px;
-
- .sub-content-box {
- margin-bottom: 20px;
-
- &:last-child {
- margin-bottom: 0;
- }
+.sub-content{
+ padding-top: 46px;
+ .sub-content-inner{
+ max-width: 1720px;
+ margin: 0 auto;
+ padding-top: 20px;
+ .sub-content-box{
+ margin-bottom: 20px;
+ &:last-child{
+ margin-bottom: 0;
+ }
+ }
}
- }
-
- &.estimate {
- display: flex;
- flex-direction: column;
- height: calc(100% - 36.5px);
- overflow-y: auto;
- padding-top: 0;
-
- .sub-content-inner {
- flex: 1;
+ &.estimate{
+ display: flex;
+ flex-direction: column;
+ height: calc(100% - 36.5px);
+ overflow-y: auto;
+ padding-top: 0;
+ .sub-content-inner{
+ flex: 1;
+ width: 100%;
+ }
}
- }
}
-
-.sub-table-box {
- padding: 20px;
- border-radius: 6px;
- border: 1px solid #E9EAED;
- background: #FFF;
- box-shadow: 0px 3px 30px 0px rgba(0, 0, 0, 0.02);
-
- .table-box-title-wrap {
- display: flex;
- align-items: center;
- margin-bottom: 15px;
-
- .title-wrap {
- display: flex;
- align-items: center;
-
- h3 {
- display: block;
- font-size: 15px;
- color: #101010;
- font-weight: 600;
- margin-right: 14px;
- }
-
- .info-wrap {
+.sub-table-box{
+ padding: 20px;
+ border-radius: 6px;
+ border: 1px solid #E9EAED;
+ background: #FFF;
+ box-shadow: 0px 3px 30px 0px rgba(0, 0, 0, 0.02);
+ .table-box-title-wrap{
display: flex;
align-items: center;
-
- li {
- position: relative;
- padding: 0 6px;
- font-size: 12px;
- color: #101010;
- font-weight: normal;
-
- span {
- font-weight: 600;
-
- &.red {
- color: #E23D70;
+ margin-bottom: 15px;
+ .title-wrap{
+ display: flex;
+ align-items: center;
+ h3{
+ display: block;
+ font-size: 15px;
+ color: #101010;
+ font-weight: 600;
+ margin-right: 14px;
}
- }
-
- &:after {
- content: '';
- position: absolute;
- top: 50%;
- right: 0;
- transform: translateY(-50%);
- width: 1px;
- height: 11px;
- background-color: #D9D9D9;
- }
-
- &:first-child {
- padding-left: 0;
- }
-
- &:last-child {
- padding-right: 0;
-
- &::after {
- display: none;
+ .info-wrap{
+ display: flex;
+ align-items: center;
+ li{
+ position: relative;
+ padding: 0 6px;
+ font-size: 12px;
+ color: #101010;
+ font-weight: normal;
+ span{
+ font-weight: 600;
+ &.red{
+ color: #E23D70;
+ }
+ }
+ &:after{
+ content: '';
+ position: absolute;
+ top: 50%;
+ right: 0;
+ transform: translateY(-50%);
+ width: 1px;
+ height: 11px;
+ background-color: #D9D9D9;
+ }
+ &:first-child{padding-left: 0;}
+ &:last-child{padding-right: 0;&::after{display: none;}}
+ }
}
- }
}
- }
}
- }
-
- .left-unit-box {
- margin-left: auto;
- display: flex;
- align-items: center;
- }
-
- .promise-gudie {
- display: block;
- font-size: 13px;
- font-weight: 700;
- color: #101010;
- margin-bottom: 20px;
- }
-
- .important {
- color: #f00;
- }
-
- .sub-table-footer {
- display: flex;
- align-items: center;
- justify-content: center;
- margin-top: 20px;
- }
-
- .pagination-wrap {
- margin-top: 24px;
- }
+ .left-unit-box{
+ margin-left: auto;
+ display: flex;
+ align-items: center;
+ }
+ .promise-gudie{
+ display: block;
+ font-size: 13px;
+ font-weight: 700;
+ color: #101010;
+ margin-bottom: 20px;
+ }
+ .important{
+ color: #f00;
+ }
+ .sub-table-footer{
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-top: 20px;
+ }
+ .pagination-wrap{
+ margin-top: 24px;
+ }
}
-.infomation-box-wrap {
- display: flex;
- align-items: center;
- gap: 10px;
-
- .sub-table-box {
- flex: 1;
- }
-
- .info-title {
- font-size: 14px;
- font-weight: 500;
- color: #344356;
- margin-bottom: 10px;
- }
-
- .info-inner {
- position: relative;
- font-size: 13px;
- color: #344356;
-
- .copy-ico {
- position: absolute;
- bottom: 0;
- right: 0;
- width: 16px;
- height: 16px;
- background: url(../../public/static/images/sub/copy_ico.svg) no-repeat center;
- background-size: cover;
+.infomation-box-wrap{
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ .sub-table-box{
+ flex: 1 ;
+ }
+ .info-title{
+ font-size: 14px;
+ font-weight: 500;
+ color: #344356;
+ margin-bottom: 10px;
+ }
+ .info-inner{
+ position: relative;
+ font-size: 13px;
+ color: #344356;
+ .copy-ico{
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ width: 16px;
+ height: 16px;
+ background: url(../../public/static/images/sub/copy_ico.svg)no-repeat center;
+ background-size: cover;
+ }
}
- }
}
// 견적서
-.estimate-list-wrap {
- display: flex;
- align-items: center;
-
- .estimate-box {
- flex: 1 1 auto;
+.estimate-list-wrap{
display: flex;
align-items: center;
-
- &:last-child {
- flex: none;
+ margin-bottom: 10px;
+ .estimate-box{
+ flex: 1 ;
+ display: flex;
+ align-items: center;
+ &:last-child{
+ flex: none;
+ min-width: 220px;
+ }
+ .estimate-tit{
+ width: 105px;
+ height: 30px;
+ line-height: 30px;
+ background-color: #F4F4F7;
+ border-radius: 100px;
+ text-align: center;
+ font-size: 13px;
+ font-weight: 500;
+ color: #344356;
+ }
+ .estimate-name{
+ font-size: 13px;
+ color: #344356;
+ margin-left: 14px;
+ font-weight: 400;
+ }
}
-
- .estimate-tit {
- width: 105px;
- height: 30px;
- line-height: 30px;
- background-color: #F4F4F7;
- border-radius: 100px;
- text-align: center;
- font-size: 13px;
- font-weight: 500;
- color: #344356;
+ &:last-child{
+ margin-bottom: 0;
}
-
- .estimate-name {
- font-size: 13px;
- color: #344356;
- margin-left: 14px;
- font-weight: 400;
- }
- }
}
// file drag box
-.drag-file-box {
- padding: 10px;
-
- .btn-area {
- padding-bottom: 15px;
- border-bottom: 1px solid #ECF0F4;
- }
-
- .drag-file-area {
- position: relative;
- margin-top: 15px;
-
- p {
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- font-size: 13px;
- color: #ccc;
- font-weight: 400;
- cursor: default;
+.drag-file-box{
+ padding: 10px;
+ .btn-area{
+ padding-bottom: 15px;
+ border-bottom: 1px solid #ECF0F4;
}
- }
-
- .file-list {
- .file-item {
- margin-bottom: 15px;
-
- span {
+ .drag-file-area{
position: relative;
- font-size: 13px;
- color: #45576F;
- font-weight: 400;
- white-space: nowrap;
- padding-right: 55px;
-
- button {
- position: absolute;
- top: 50%;
- right: 0;
- transform: translateY(-50%);
- width: 15px;
- height: 15px;
- background: url(../../public/static/images/sub/file_delete.svg) no-repeat center;
- background-size: cover;
+ margin-top: 15px;
+ p{
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ font-size: 13px;
+ color: #ccc;
+ font-weight: 400;
+ cursor: default;
}
- }
-
- &:last-child {
- margin-bottom: 0;
- }
}
- }
+ .file-list{
+ .file-item{
+ margin-bottom: 15px;
+ span{
+ position: relative;
+ font-size: 13px;
+ color: #45576F;
+ font-weight: 400;
+ white-space: nowrap;
+ padding-right: 55px;
+ button{
+ position: absolute;
+ top: 50%;
+ right: 0;
+ transform: translateY(-50%);
+ width: 15px;
+ height: 15px;
+ background: url(../../public/static/images/sub/file_delete.svg)no-repeat center;
+ background-size: cover;
+ }
+ }
+ &:last-child{
+ margin-bottom: 0;
+ }
+ }
+ }
+}
+
+// 발전시물레이션
+.chart-wrap{
+ display: flex;
+ gap: 20px;
+ width: 100%;
+ .sub-table-box{
+ height: 100%;
+ }
+ .chart-inner{
+ flex: 1;
+ .chart-box{
+ margin-bottom: 30px;
+ }
+ }
+ .chart-table-wrap{
+ display: flex;
+ flex-direction: column;
+ flex: none;
+ width: 650px;
+ .sub-table-box{
+ flex: 1;
+ &:first-child{
+ margin-bottom: 20px;
+ }
+ }
+ }
+}
+
+.chart-month-table{
+ table{
+ table-layout: fixed;
+ border-collapse:collapse;
+ border: 1px solid #ECF0F4;
+ border-radius: 4px;
+ thead{
+ th{
+ padding: 4.5px 0;
+ border-bottom: 1px solid #ECF0F4;
+ text-align: center;
+ font-size: 13px;
+ color: #45576F;
+ font-weight: 500;
+ background-color: #F8F9FA;
+ }
+ }
+ tbody{
+ td{
+ font-size: 13px;
+ color: #45576F;
+ text-align: center;
+ padding: 4.5px 0;
+ }
+ }
+ }
+}
+
+.simulation-guide-wrap{
+ display: flex;
+ padding: 20px;
+ .simulation-tit-wrap{
+ padding-right: 40px;
+ border-right: 1px solid #EEEEEE;
+ span{
+ display: block;
+ position: relative;
+ padding-left: 60px;
+ font-size: 15px;
+ color: #14324F;
+ font-weight: 600;
+ &::before{
+ content: '';
+ position: absolute;
+ top: 50%;
+ left: 0;
+ transform: translateY(-50%);
+ width: 40px;
+ height: 40px;
+ background: url(../../public/static/images/sub/simulation_guide.svg)no-repeat center;
+ background-size: cover;
+ }
+ }
+ }
+ .simulation-guide-box{
+ padding-left: 40px;
+ dl{
+ margin-bottom: 25px;
+ dt{
+ font-size: 13px;
+ color: #101010;
+ font-weight: 600;
+ margin-bottom: 5px;
+ }
+ dd{
+ font-size: 12px;
+ color: #45576F;
+ font-weight: 400;
+ line-height: 24px;
+ }
+ &:last-child{
+ margin-bottom: 0;
+ }
+ }
+ }
+}
+
+.module-total{
+ display: flex;
+ align-items: center;
+ background-color: #F8F9FA;
+ padding: 9px 0;
+ margin-right: 4px;
+ border: 1px solid #ECF0F4;
+ border-top: none;
+ .total-title{
+ flex: 1;
+ text-align: center;
+ font-size: 13px;
+ color: #344356;
+ font-weight: 500;
+ }
+ .total-num{
+ flex: none;
+ width: 121px;
+ text-align: center;
+ font-size: 15px;
+ color: #344356;
+ font-weight: 500;
+ }
}
\ No newline at end of file
diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss
index 856ee2f8..b1d16e89 100644
--- a/src/styles/_fonts.scss
+++ b/src/styles/_fonts.scss
@@ -1,199 +1,199 @@
@font-face {
- font-family: 'Noto Sans JP';
- src: url('/fonts/NotoSansJP-ExtraBold.woff2') format('woff2'),
- url('/fonts/NotoSansJP-ExtraBold.woff') format('woff');
- font-weight: bold;
- font-style: normal;
- font-display: swap;
+ font-family: 'Noto Sans JP';
+ src: url('/fonts/NotoSansJP-ExtraBold.woff2') format('woff2'),
+ url('/fonts/NotoSansJP-ExtraBold.woff') format('woff');
+ font-weight: bold;
+ font-style: normal;
+ font-display: swap;
}
@font-face {
- font-family: 'Noto Sans JP';
- src: url('/fonts/NotoSansJP-Bold.woff2') format('woff2'),
- url('/fonts/NotoSansJP-Bold.woff') format('woff');
- font-weight: bold;
- font-style: normal;
- font-display: swap;
+ font-family: 'Noto Sans JP';
+ src: url('/fonts/NotoSansJP-Bold.woff2') format('woff2'),
+ url('/fonts/NotoSansJP-Bold.woff') format('woff');
+ font-weight: bold;
+ font-style: normal;
+ font-display: swap;
}
@font-face {
- font-family: 'Noto Sans JP';
- src: url('/fonts/NotoSansJP-Black.woff2') format('woff2'),
- url('/fonts/NotoSansJP-Black.woff') format('woff');
- font-weight: 900;
- font-style: normal;
- font-display: swap;
+ font-family: 'Noto Sans JP';
+ src: url('/fonts/NotoSansJP-Black.woff2') format('woff2'),
+ url('/fonts/NotoSansJP-Black.woff') format('woff');
+ font-weight: 900;
+ font-style: normal;
+ font-display: swap;
}
@font-face {
- font-family: 'Noto Sans JP';
- src: url('/fonts/NotoSansJP-ExtraLight.woff2') format('woff2'),
- url('/fonts/NotoSansJP-ExtraLight.woff') format('woff');
- font-weight: 200;
- font-style: normal;
- font-display: swap;
+ font-family: 'Noto Sans JP';
+ src: url('/fonts/NotoSansJP-ExtraLight.woff2') format('woff2'),
+ url('/fonts/NotoSansJP-ExtraLight.woff') format('woff');
+ font-weight: 200;
+ font-style: normal;
+ font-display: swap;
}
@font-face {
- font-family: 'Noto Sans JP';
- src: url('/fonts/NotoSansJP-Light.woff2') format('woff2'),
- url('/fonts/NotoSansJP-Light.woff') format('woff');
- font-weight: 300;
- font-style: normal;
- font-display: swap;
+ font-family: 'Noto Sans JP';
+ src: url('/fonts/NotoSansJP-Light.woff2') format('woff2'),
+ url('/fonts/NotoSansJP-Light.woff') format('woff');
+ font-weight: 300;
+ font-style: normal;
+ font-display: swap;
}
@font-face {
- font-family: 'Noto Sans JP';
- src: url('/fonts/NotoSansJP-Medium.woff2') format('woff2'),
- url('/fonts/NotoSansJP-Medium.woff') format('woff');
- font-weight: 500;
- font-style: normal;
- font-display: swap;
+ font-family: 'Noto Sans JP';
+ src: url('/fonts/NotoSansJP-Medium.woff2') format('woff2'),
+ url('/fonts/NotoSansJP-Medium.woff') format('woff');
+ font-weight: 500;
+ font-style: normal;
+ font-display: swap;
}
@font-face {
- font-family: 'Noto Sans JP';
- src: url('/fonts/NotoSansJP-Regular.woff2') format('woff2'),
- url('/fonts/NotoSansJP-Regular.woff') format('woff');
- font-weight: normal;
- font-style: normal;
- font-display: swap;
+ font-family: 'Noto Sans JP';
+ src: url('/fonts/NotoSansJP-Regular.woff2') format('woff2'),
+ url('/fonts/NotoSansJP-Regular.woff') format('woff');
+ font-weight: normal;
+ font-style: normal;
+ font-display: swap;
}
@font-face {
- font-family: 'Noto Sans JP';
- src: url('/fonts/NotoSansJP-SemiBold.woff2') format('woff2'),
- url('/fonts/NotoSansJP-SemiBold.woff') format('woff');
- font-weight: 600;
- font-style: normal;
- font-display: swap;
+ font-family: 'Noto Sans JP';
+ src: url('/fonts/NotoSansJP-SemiBold.woff2') format('woff2'),
+ url('/fonts/NotoSansJP-SemiBold.woff') format('woff');
+ font-weight: 600;
+ font-style: normal;
+ font-display: swap;
}
@font-face {
- font-family: 'Noto Sans JP';
- src: url('/fonts/NotoSansJP-Thin.woff2') format('woff2'),
- url('/fonts/NotoSansJP-Thin.woff') format('woff');
- font-weight: 100;
- font-style: normal;
- font-display: swap;
+ font-family: 'Noto Sans JP';
+ src: url('/fonts/NotoSansJP-Thin.woff2') format('woff2'),
+ url('/fonts/NotoSansJP-Thin.woff') format('woff');
+ font-weight: 100;
+ font-style: normal;
+ font-display: swap;
}
// pretendard
@font-face {
- font-family: 'Pretendard';
- src: url('/fonts/Pretendard-Bold.woff2') format('woff2'),
- url('/fonts/Pretendard-Bold.woff') format('woff');
- font-weight: bold;
- font-style: normal;
- font-display: swap;
+ font-family: 'Pretendard';
+ src: url('/fonts/Pretendard-Bold.woff2') format('woff2'),
+ url('/fonts/Pretendard-Bold.woff') format('woff');
+ font-weight: bold;
+ font-style: normal;
+ font-display: swap;
}
@font-face {
- font-family: 'Pretendard';
- src: url('/fonts/Pretendard-ExtraBold.woff2') format('woff2'),
- url('/fonts/Pretendard-ExtraBold.woff') format('woff');
- font-weight: bold;
- font-style: normal;
- font-display: swap;
+ font-family: 'Pretendard';
+ src: url('/fonts/Pretendard-ExtraBold.woff2') format('woff2'),
+ url('/fonts/Pretendard-ExtraBold.woff') format('woff');
+ font-weight: bold;
+ font-style: normal;
+ font-display: swap;
}
@font-face {
- font-family: 'Pretendard';
- src: url('/fonts/Pretendard-ExtraBold.woff2') format('woff2'),
- url('/fonts/Pretendard-ExtraBold.woff') format('woff');
- font-weight: bold;
- font-style: normal;
- font-display: swap;
+ font-family: 'Pretendard';
+ src: url('/fonts/Pretendard-ExtraBold.woff2') format('woff2'),
+ url('/fonts/Pretendard-ExtraBold.woff') format('woff');
+ font-weight: bold;
+ font-style: normal;
+ font-display: swap;
}
@font-face {
- font-family: 'Pretendard';
- src: url('/fonts/Pretendard-ExtraLight.woff2') format('woff2'),
- url('/fonts/Pretendard-ExtraLight.woff') format('woff');
- font-weight: 200;
- font-style: normal;
- font-display: swap;
+ font-family: 'Pretendard';
+ src: url('/fonts/Pretendard-ExtraLight.woff2') format('woff2'),
+ url('/fonts/Pretendard-ExtraLight.woff') format('woff');
+ font-weight: 200;
+ font-style: normal;
+ font-display: swap;
}
@font-face {
- font-family: 'Pretendard';
- src: url('/fonts/Pretendard-ExtraLight.woff2') format('woff2'),
- url('/fonts/Pretendard-ExtraLight.woff') format('woff');
- font-weight: 200;
- font-style: normal;
- font-display: swap;
+ font-family: 'Pretendard';
+ src: url('/fonts/Pretendard-ExtraLight.woff2') format('woff2'),
+ url('/fonts/Pretendard-ExtraLight.woff') format('woff');
+ font-weight: 200;
+ font-style: normal;
+ font-display: swap;
}
@font-face {
- font-family: 'Pretendard';
- src: url('/fonts/Pretendard-Light.woff2') format('woff2'),
- url('/fonts/Pretendard-Light.woff') format('woff');
- font-weight: 300;
- font-style: normal;
- font-display: swap;
+ font-family: 'Pretendard';
+ src: url('/fonts/Pretendard-Light.woff2') format('woff2'),
+ url('/fonts/Pretendard-Light.woff') format('woff');
+ font-weight: 300;
+ font-style: normal;
+ font-display: swap;
}
@font-face {
- font-family: 'Pretendard';
- src: url('/fonts/Pretendard-Light.woff2') format('woff2'),
- url('/fonts/Pretendard-Light.woff') format('woff');
- font-weight: 300;
- font-style: normal;
- font-display: swap;
+ font-family: 'Pretendard';
+ src: url('/fonts/Pretendard-Light.woff2') format('woff2'),
+ url('/fonts/Pretendard-Light.woff') format('woff');
+ font-weight: 300;
+ font-style: normal;
+ font-display: swap;
}
@font-face {
- font-family: 'Pretendard';
- src: url('/fonts/Pretendard-Medium.woff2') format('woff2'),
- url('/fonts/Pretendard-Medium.woff') format('woff');
- font-weight: 500;
- font-style: normal;
- font-display: swap;
+ font-family: 'Pretendard';
+ src: url('/fonts/Pretendard-Medium.woff2') format('woff2'),
+ url('/fonts/Pretendard-Medium.woff') format('woff');
+ font-weight: 500;
+ font-style: normal;
+ font-display: swap;
}
@font-face {
- font-family: 'Pretendard';
- src: url('/fonts/Pretendard-Medium.woff2') format('woff2'),
- url('/fonts/Pretendard-Medium.woff') format('woff');
- font-weight: 500;
- font-style: normal;
- font-display: swap;
+ font-family: 'Pretendard';
+ src: url('/fonts/Pretendard-Medium.woff2') format('woff2'),
+ url('/fonts/Pretendard-Medium.woff') format('woff');
+ font-weight: 500;
+ font-style: normal;
+ font-display: swap;
}
@font-face {
- font-family: 'Pretendard';
- src: url('/fonts/Pretendard-Regular.woff2') format('woff2'),
- url('/fonts/Pretendard-Regular.woff') format('woff');
- font-weight: normal;
- font-style: normal;
- font-display: swap;
+ font-family: 'Pretendard';
+ src: url('/fonts/Pretendard-Regular.woff2') format('woff2'),
+ url('/fonts/Pretendard-Regular.woff') format('woff');
+ font-weight: normal;
+ font-style: normal;
+ font-display: swap;
}
@font-face {
- font-family: 'Pretendard';
- src: url('/fonts/Pretendard-Black.woff2') format('woff2'),
- url('/fonts/Pretendard-Black.woff') format('woff');
- font-weight: 900;
- font-style: normal;
- font-display: swap;
+ font-family: 'Pretendard';
+ src: url('/fonts/Pretendard-Black.woff2') format('woff2'),
+ url('/fonts/Pretendard-Black.woff') format('woff');
+ font-weight: 900;
+ font-style: normal;
+ font-display: swap;
}
@font-face {
- font-family: 'Pretendard';
- src: url('/fonts/Pretendard-Black.woff2') format('woff2'),
- url('/fonts/Pretendard-Black.woff') format('woff');
- font-weight: 900;
- font-style: normal;
- font-display: swap;
+ font-family: 'Pretendard';
+ src: url('/fonts/Pretendard-Black.woff2') format('woff2'),
+ url('/fonts/Pretendard-Black.woff') format('woff');
+ font-weight: 900;
+ font-style: normal;
+ font-display: swap;
}
@font-face {
- font-family: 'Pretendard';
- src: url('/fonts/Pretendard-Bold.woff2') format('woff2'),
- url('/fonts/Pretendard-Bold.woff') format('woff');
- font-weight: bold;
- font-style: normal;
- font-display: swap;
+ font-family: 'Pretendard';
+ src: url('/fonts/Pretendard-Bold.woff2') format('woff2'),
+ url('/fonts/Pretendard-Bold.woff') format('woff');
+ font-weight: bold;
+ font-style: normal;
+ font-display: swap;
}
diff --git a/src/styles/_grid-detail.scss b/src/styles/_grid-detail.scss
new file mode 100644
index 00000000..a673236a
--- /dev/null
+++ b/src/styles/_grid-detail.scss
@@ -0,0 +1,61 @@
+.q-grid{
+ height: fit-content;
+ .ag-theme-quartz {
+ outline: none;
+ border: none;
+ --ag-border-radius: 0px;
+ --ag-wrapper-border-radius: 0px;
+ --ag-header-height: 40px;
+ --ag-header-foreground-color: white;
+ --ag-header-background-color: #5D6A76;
+ // --ag-header-cell-hover-background-color: rgb(80, 40, 140);
+ --ag-header-cell-moving-background-color: #5D6A76;
+ .ag-root-wrapper{
+ outline: none;
+ border: none;
+
+ }
+ .ag-header{
+ border-bottom: none;
+ border-radius: 4px;
+ }
+ .ag-header-cell{
+ font-size: 13px;
+ color: #fff;
+ }
+ .ag-header-cell-label{
+ justify-content: center;
+ }
+ .ag-header-cell-resize{
+ &:after{
+ display: none;
+ }
+ }
+ .ag-row{
+ border-bottom: 1px solid #ECF0F4;
+ &:nth-child(2n){
+ background-color: #F7F9FA;
+ }
+ }
+ .ag-cell{
+ font-size: 13px;
+ color: #45576F;
+ }
+ .ag-icon-desc::before,
+ .ag-icon-asc::before,
+ .ag-icon-filter::before{
+ color: #fff;
+ }
+ }
+ .copy-ico-wrap{
+ display: flex;
+ align-items: center;
+ .copy_ico{
+ width: 18px;
+ height: 18px;
+ background: url(../../public/static/images/sub/copy_grid_ico.svg)no-repeat center;
+ background-size: cover;
+ margin-left: 12px;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/styles/_inputcommon.scss b/src/styles/_inputcommon.scss
index 97e5cc53..f1b6aab2 100644
--- a/src/styles/_inputcommon.scss
+++ b/src/styles/_inputcommon.scss
@@ -2,7 +2,10 @@
max-width: 1600px;
margin: 0 auto;
padding-bottom: 100px;
+ display: flex;
+ flex-wrap: wrap;
.input-wrap{
+ width: 33.333%;
padding: 50px 50px 0;
h1{
margin-bottom: 20px;
@@ -23,6 +26,7 @@
margin-bottom: 10px;
}
}
+ .form-main-radio,
.form-Arrow-btn,
.form-Check-btn{
padding: 10px;
@@ -32,4 +36,25 @@
}
}
}
+ .flx{
+ display: flex;
+ align-items: center;
+ }
+ &.pop{
+ .input-wrap{
+ .form-input{
+ background-color: #272727;
+ span{
+ color: #fff;
+ }
+ }
+ }
+ }
+}
+.title{
+ max-width: 1600px;
+ margin: 0 auto;
+ font-size: 28px;
+ font-weight: 600;
+ text-transform: uppercase;
}
\ No newline at end of file
diff --git a/src/styles/_layout.scss b/src/styles/_layout.scss
index 919e80ff..2bddf61f 100644
--- a/src/styles/_layout.scss
+++ b/src/styles/_layout.scss
@@ -1,250 +1,233 @@
-.wrap {
- display: flex;
- flex-direction: column;
- min-width: 1600px;
- min-height: 100vh;
- overflow-x: hidden;
+.wrap{
+ display: flex;
+ flex-direction: column;
+ min-width: 1600px;
+ min-height: 100vh;
+ overflow-x: hidden;
}
-
-.content {
- position: relative;
- flex: 1 1 auto;
- padding-top: 46px;
- background-color: #F4F4F7;
+.content{
+ flex: 1 1 auto;
+ padding-top: 46px;
+ background-color: #F4F4F7;
}
// header
// nav item 공통
-@mixin navitem() {
- position: relative;
- display: flex;
- align-items: center;
- font-size: 14px;
- color: #fff;
- font-weight: 500;
- height: 100%;
- padding-right: 12px;
- transition: color .17s ease-in-out;
-}
-
-header {
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- min-width: 1600px;
- height: 46px;
- background-color: #1C1C1C;
- border-bottom: 1px solid #000;
- z-index: 9999;
-
- .header-inner {
+@mixin navitem(){
+ position: relative;
display: flex;
align-items: center;
+ font-size: 14px;
+ color: #fff;
+ font-weight: 500;
height: 100%;
- padding: 0 40px;
-
- .header-right {
- display: flex;
- height: 100%;
- align-items: center;
-
- .logo {
- a {
- display: block;
- width: 232px;
- height: 30px;
- background: url(/static/images/common/Logo.svg) no-repeat center;
- background-size: contain;
- }
- }
-
- nav {
- margin-left: 50px;
+ padding-right: 12px;
+ transition: color .17s ease-in-out;
+}
+header{
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ min-width: 1600px;
+ height: 46px;
+ background-color: #1C1C1C;
+ border-bottom: 1px solid #000;
+ z-index: 9999;
+ .header-inner{
+ display: flex;
+ align-items: center;
height: 100%;
-
- .nav-list {
- display: flex;
- align-items: center;
- height: 100%;
-
- .nav-item {
- position: relative;
- margin-right: 62px;
+ padding: 0 40px;
+ .header-right{
+ display: flex;
height: 100%;
-
- a {
- @include navitem;
- }
-
- button {
- @include navitem;
-
- &:after {
- content: '';
- position: absolute;
- top: 50%;
- right: 0;
- transform: translateY(-50%);
- width: 6px;
- height: 10px;
- background: url(/static/images/common/nav-arr.svg) no-repeat center;
- transition: all .17s ease-in-out;
- }
- }
-
- &:last-child {
- margin-right: 0;
- }
-
- .nav-depth2 {
- position: absolute;
- top: calc(100% - 2px);
- left: 50%;
- transform: translateX(-50%);
- min-width: 100px;
- background-color: #1C1C1C;
- border: 1px solid #464646;
- padding: 24px;
- opacity: 0;
- visibility: hidden;
- transition: all .17s ease-in-out;
-
- .nav-depth2-item {
- margin-bottom: 10px;
- transition: all .17s ease-in-out;
-
- a {
- font-size: 13px;
- font-weight: normal;
- white-space: nowrap;
+ align-items: center;
+ .logo{
+ a{
+ display: block;
+ width: 232px;
+ height: 30px;
+ background: url(/static/images/common/Logo.svg)no-repeat center;
+ background-size: contain;
}
-
- &:last-child {
- margin-bottom: 0;
- }
-
- &.mouse {
- opacity: 0.55;
- }
- }
-
- &::before {
- content: '';
- position: absolute;
- top: -5px;
- left: 50%;
- transform: translateX(-50%) rotate(45deg);
- width: 8px;
- height: 8px;
- background-color: #1c1c1c;
- border-top: 1px solid #464646;
- border-left: 1px solid #464646;
- }
}
-
- &.mouse {
- > a {
- color: rgba(255, 255, 255, 0.30);
- }
-
- > button {
- color: rgba(255, 255, 255, 0.30);
-
- &:after {
- opacity: 0.3;
+ nav{
+ margin-left: 50px;
+ height: 100%;
+ .nav-list{
+ display: flex;
+ align-items: center;
+ height: 100%;
+ .nav-item{
+ position: relative;
+ margin-right: 62px;
+ height: 100%;
+ a{
+ @include navitem;
+ }
+ button{
+ @include navitem;
+ &:after{
+ content: '';
+ position: absolute;
+ top: 50%;
+ right: 0;
+ transform: translateY(-50%);
+ width: 6px;
+ height: 10px;
+ background: url(/static/images/common/nav-arr.svg)no-repeat center;
+ transition: all .17s ease-in-out;
+ }
+ }
+ &:last-child{
+ margin-right: 0;
+ }
+ .nav-depth2{
+ position: absolute;
+ top: calc(100% - 2px);
+ left: 50%;
+ transform: translateX(-50%);
+ min-width: 100px;
+ background-color: #1C1C1C;
+ border: 1px solid #464646;
+ padding: 24px;
+ opacity: 0;
+ visibility: hidden;
+ transition: all .17s ease-in-out;
+ .nav-depth2-item{
+ margin-bottom: 10px;
+ transition: all .17s ease-in-out;
+ a{
+ font-size: 13px;
+ font-weight: normal;
+ white-space: nowrap;
+ }
+ &:last-child{
+ margin-bottom: 0;
+ }
+ &.mouse{
+ opacity: 0.55;
+ }
+ }
+ &::before{
+ content: '';
+ position: absolute;
+ top: -5px;
+ left: 50%;
+ transform: translateX(-50%) rotate(45deg);
+ width: 8px;
+ height: 8px;
+ background-color: #1c1c1c;
+ border-top: 1px solid #464646;
+ border-left: 1px solid #464646;
+ }
+ }
+ &.mouse{
+ > a{
+ color: rgba(255, 255, 255, 0.30);
+ }
+ > button{
+ color: rgba(255, 255, 255, 0.30);
+ &:after{
+ opacity: 0.3;
+ }
+ }
+ }
+ &:hover{
+ .nav-depth2{
+ opacity: 1;
+ visibility: visible;
+ }
+ > button{
+ &:after{
+ transform: translateY(-50%) rotate(90deg);
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ .header-left{
+ margin-left: auto;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ .profile-box{
+ position: relative;
+ padding-left: 30px;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ margin-right: 20px;
+ cursor: pointer;
+ .profile{
+ font-size: 13px;
+ font-weight: normal;
+ color: #fff;
+ }
+ &::after{
+ content: '';
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+ left: 0;
+ width: 24px;
+ height: 24px;
+ background: url(/static/images/common/profile_icon.svg)no-repeat center;
+ background-size: cover;
+ }
+ }
+ .sign-out-box{
+ position: relative;
+ padding-left: 30px;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ margin-right: 20px;
+ cursor: pointer;
+ .sign-out{
+ font-size: 13px;
+ font-weight: normal;
+ color: #fff;
+ }
+ &::after{
+ content: '';
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+ left: 0;
+ width: 24px;
+ height: 24px;
+ background: url(../../public/static/images/common/signout_icon.svg)no-repeat center;
+ background-size: cover;
+ }
+ }
+ .select-box{
+ min-width: 165px;
+ margin-right: 8px;
+ >div{
+ width: 100%;
}
- }
}
-
- &:hover {
- .nav-depth2 {
- opacity: 1;
- visibility: visible;
- }
-
- > button {
- &:after {
- transform: translateY(-50%) rotate(90deg);
- }
- }
- }
- }
}
- }
}
-
- .header-left {
- margin-left: auto;
- height: 100%;
- display: flex;
- align-items: center;
-
- .profile-box {
- position: relative;
- padding-left: 30px;
- height: 100%;
- display: flex;
- align-items: center;
- margin-right: 20px;
- cursor: pointer;
-
- .profile {
- font-size: 13px;
- font-weight: normal;
- color: #fff;
- }
-
- &::after {
- content: '';
- position: absolute;
- top: 50%;
- transform: translateY(-50%);
- left: 0;
- width: 24px;
- height: 24px;
- background: url(/static/images/common/profile_icon.svg) no-repeat center;
- background-size: cover;
- }
- }
-
- .sign-out-box {
- position: relative;
- padding-left: 30px;
- height: 100%;
- display: flex;
- align-items: center;
- margin-right: 20px;
- cursor: pointer;
-
- .sign-out {
- font-size: 13px;
- font-weight: normal;
- color: #fff;
- }
-
- &::after {
- content: '';
- position: absolute;
- top: 50%;
- transform: translateY(-50%);
- left: 0;
- width: 24px;
- height: 24px;
- background: url(../../public/static/images/common/signout_icon.svg) no-repeat center;
- background-size: cover;
- }
- }
-
- .select-box {
- min-width: 165px;
- margin-right: 8px;
-
- > div {
- width: 100%;
- }
- }
- }
- }
}
+// footer
+footer{
+ width: 100%;
+ background-color: #F4F4F7;
+ .footer-inner{
+ max-width: 1400px;
+ margin: 0 auto;
+ padding: 35px 0;
+ span{
+ display: block;
+ font-size: 11px;
+ color: #CFCFCF;
+ text-align: center;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/styles/_main.scss b/src/styles/_main.scss
index fc00feb6..334a0485 100644
--- a/src/styles/_main.scss
+++ b/src/styles/_main.scss
@@ -1,684 +1,557 @@
// background img
-.background-bord {
- position: absolute;
- top: 46px;
- left: 0;
- width: 100%;
- height: 280px;
- background: url(../../public/static/images/main/main_background.png) no-repeat center;
- background-size: cover;
- z-index: 0;
+.background-bord{
+ position: absolute;
+ top: 46px;
+ left: 0;
+ width: 100%;
+ height: 280px;
+ background: url(../../public/static/images/main/main_background.png)no-repeat center;
+ background-size: cover;
+ z-index: 0;
}
// main-wrap
-.main-contents {
- position: relative;
- z-index: 1;
- padding-bottom: 15px;
+.main-contents{
+ position: relative;
+ z-index: 1;
+ padding-bottom: 15px;
}
// contents
-.store-id-wrap {
- display: flex;
- align-items: center;
- justify-content: center;
- gap: 12px;
- padding: 33.5px 0;
- border-bottom: 1px solid rgba(255, 255, 255, 0.08);
- background-color: rgba(255, 255, 255, 0.05);
-
- .store-id-title {
- position: relative;
- padding-left: 32px;
- font-size: 13px;
- color: #fff;
-
- &::before {
- content: '';
- position: absolute;
- top: 50%;
- left: 0;
- transform: translateY(-50%);
- width: 20px;
- height: 20px;
- background: url(../../public/static/images/main/id_icon.svg) no-repeat center;
- }
- }
-
- .store-arr {
- display: block;
- width: 7px;
- height: 10px;
- background: url(../../public/static/images/main/store-arr.svg) no-repeat center;
- }
-
- .store-id-name {
- font-size: 16px;
- color: #fff;
- font-weight: 600;
- }
-}
-
-// main-search-form
-.main-search-wrap {
- display: flex;
- align-items: center;
- justify-content: center;
- padding: 45px 0;
-
- .search-raido-wrap {
+.store-id-wrap{
display: flex;
align-items: center;
- gap: 16px;
- margin-right: 30px;
- }
-}
-
-.search-input-box {
- display: flex;
- align-items: center;
- width: 580px;
- height: 45px;
- border-radius: 100px;
- padding: 0 20px;
- border: 1px solid rgba(255, 255, 255, 0.30);
- background: rgba(31, 31, 31, 0.30);
-
- .main-search {
- flex: 1;
- height: 100%;
- font-size: 13px;
- color: #fff;
- background-color: transparent;
- outline: none;
- border: none;
- font-family: 'Noto Sans JP', sans-serif;
- }
-
- .search-icon {
- width: 20px;
- height: 100%;
- background-image: url(../../public/static/images/main/main_search.svg);
- background-repeat: no-repeat;
- background-position: center;
- background-size: 21px 21px;
- }
-}
-
-// main-contents-inner
-.main-product-list-wrap {
- max-width: 1400px;
- margin: 0 auto;
-
- .main-product-list {
- display: flex;
- gap: 24px;
- margin-bottom: 24px;
-
- .product-item {
- display: flex;
- flex-direction: column;
- padding: 40px;
- border-radius: 6px;
- background: #FFF;
- box-shadow: 0px 3px 30px 0px rgba(0, 0, 0, 0.02);
-
- &.item01 {
- flex: 1;
- max-height: 400px;
- }
-
- &.item02 {
- flex: none;
- width: 451px;
- max-height: 400px;
- }
-
- &.item03 {
- flex: 1;
- }
-
- &.item04 {
- flex: none;
- width: 351px;
- }
-
- &.item05 {
- flex: none;
- width: 451px;
- }
-
- .product-item-title-wrap {
- display: flex;
- align-items: center;
-
- .product-item-title {
- display: flex;
- align-items: center;
- font-size: 16px;
- color: #101010;
- font-weight: 600;
-
- .item-logo {
- display: block;
- width: 40px;
- height: 40px;
- border-radius: 50px;
- background: #14324F;
- margin-right: 12px;
- background-repeat: no-repeat;
- background-size: 22px 22px;
- background-position: center;
-
- &.ico01 {
- background-image: url(../../public/static/images/main/product_ico01.svg);
- }
-
- &.ico02 {
- background-image: url(../../public/static/images/main/product_ico02.svg);
- }
-
- &.ico03 {
- background-image: url(../../public/static/images/main/product_ico03.svg);
- }
-
- &.ico04 {
- background-image: url(../../public/static/images/main/product_ico04.svg);
- }
-
- &.ico05 {
- background-image: url(../../public/static/images/main/product_ico05.svg);
- }
- }
- }
-
- .more-btn {
- display: block;
- width: 20px;
- height: 20px;
- margin-left: auto;
- background: url(../../public/static/images/main/more_btn.svg) no-repeat center;
- }
- }
-
- .product-item-content {
- margin-top: 30px;
- overflow: hidden;
-
- .recently-list {
- .recently-item {
- border: 1px solid #F2F2F2;
- background-color: transparent;
- padding: 29.9px 20px;
- margin-bottom: 5px;
- cursor: pointer;
-
- .item-inner {
- display: flex;
- align-items: center;
-
- span {
- position: relative;
- display: block;
- font-size: 13px;
- color: #101010;
- font-weight: 400;
- padding: 0 10px;
-
- &.time {
- padding-left: 22px;
-
- &::before {
- content: '';
- position: absolute;
- top: 50%;
- left: 0;
- transform: translateY(-50%);
- width: 14px;
- height: 14px;
- background: url(../../public/static/images/main/clock.svg) no-repeat center;
- background-size: cover;
- }
- }
-
- &:after {
- content: '';
- position: absolute;
- top: 50%;
- right: 0;
- transform: translateY(-50%);
- width: 1px;
- height: 10px;
- background-color: #BBB;
- }
-
- &:last-child {
- &:after {
- display: none;
- }
- }
- }
- }
-
- &:last-child {
- margin-bottom: 5px;
- }
- }
- }
-
- .notice-box {
- height: 100%;
- overflow-y: auto;
-
- .notice-day {
- font-size: 13px;
- color: #666;
- font-weight: 400;
- margin-bottom: 7px;
- }
-
- .notice-title {
- font-size: 14px;
- color: #101010;
- font-weight: 600;
- margin-bottom: 25px;
- line-height: 24px;
- word-break: keep-all;
- }
-
- .notice-contents {
- font-size: 12px;
- color: #666;
- font-weight: 400;
- line-height: 22px;
-
- span {
- position: relative;
- display: block;
- padding-left: 10px;
-
- &::before {
- content: '';
- position: absolute;
- top: 10px;
- left: 3px;
- width: 3px;
- height: 3px;
- border-radius: 100%;
- background-color: #666;
- }
- }
- }
-
- &::-webkit-scrollbar {
- width: 4px; /* 스크롤바의 너비 */
- }
-
- &::-webkit-scrollbar-thumb {
- background: #697C8F; /* 스크롤바의 색상 */
- }
-
- &::-webkit-scrollbar-track {
- background: transparent; /*스크롤바 뒷 배경 색상*/
- }
- }
-
- .faq-item {
- position: relative;
- margin-bottom: 10px;
- cursor: pointer;
-
- .faq-item-inner {
- display: flex;
- align-items: center;
-
- .faq-num {
- flex: none;
- padding: 7px 12.5px;
- font-size: 13px;
- color: #101010;
- font-weight: 600;
- border-radius: 110px;
- border: 1px solid rgba(242, 242, 242, 0.95);
- margin-right: 20px;
- }
-
- .faq-title {
- width: 0;
- flex: 1 1 auto;
- font-size: 13px;
- color: #101010;
- font-weight: 500;
- padding-right: 96px;
- white-space: nowrap;
- text-overflow: ellipsis;
- overflow: hidden;
- }
-
- .faq-day {
- position: absolute;
- top: 50%;
- right: 0;
- transform: translateY(-50%);
- font-size: 13px;
- color: #101010;
- font-weight: 400;
- }
- }
-
- &:last-child {
- margin-bottom: 0;
- }
- }
-
- .data-download-wrap {
- width: 100%;
-
- .data-down {
- display: block;
- width: 100%;
- padding: 20px;
- text-align: left;
- border-radius: 4px;
- background-color: #697C8F;
- margin-bottom: 5px;
- transition: background .17s ease-in-out;
-
- span {
- position: relative;
- display: block;
- padding-right: 30px;
- font-size: 13px;
- color: #fff;
- font-weight: 400;
-
- &:after {
- content: '';
- position: absolute;
- top: 50%;
- right: 0;
- transform: translateY(-50%);
- width: 18px;
- height: 16px;
- background: url(../../public/static/images/main/download.svg) no-repeat center;
- background-size: cover;
- }
- }
-
- &:last-child {
- margin-bottom: 0;
- }
-
- &:hover {
- background-color: #859eb6;
- }
- }
- }
-
- .contact-info-list {
- padding: 25px 30px;
- border-radius: 4px;
- background-color: #F4F4F7;
-
- .info-item {
- display: flex;
- align-items: center;
- padding: 15px 0;
- border-bottom: 1px solid #fff;
-
- &:first-child {
- padding-top: 0;
- }
-
- &:last-child {
- padding-bottom: 0;
- border: none;
- }
-
- .icon-box {
- display: flex;
- margin-right: 12px;
- }
-
- .infor-data {
- font-size: 13px;
- color: #101010;
- font-weight: 500;
- }
- }
- }
- }
- }
-
- &:last-child {
- margin-bottom: 0;
- }
- }
-}
-
-// loginpage
-.login-wrap {
- position: relative;
- width: 100%;
- min-height: 100vh;
- display: flex;
- flex-direction: column;
- justify-content: center;
- background: url(../../public/static/images/main/login_bg.png) no-repeat center;
- background-size: cover;
-
- .login-inner {
- max-width: 500px;
- width: 100%;
- margin: 0 auto;
-
- .login-logo {
- display: block;
- margin-bottom: 25px;
- }
-
- .login-input-frame {
- padding: 40px 50px;
- border-radius: 6px;
- background: rgba(255, 255, 255, 0.97);
- box-shadow: 0px 3px 30px 0px rgba(0, 0, 0, 0.02);
-
- .login-frame-tit {
- font-size: 18px;
- color: #364864;
- font-weight: 400;
- padding-bottom: 30px;
- border-bottom: 1px solid #E5E9EF;
-
- span {
- display: block;
- font-weight: 600;
- margin-bottom: 5px;
- }
- }
-
- .login-input-wrap {
- margin-top: 30px;
-
- .login-area {
- position: relative;
- display: flex;
- align-items: center;
- border: 1px solid #E5E9EF;
- height: 45px;
- padding-left: 40px;
- padding-right: 15px;
- margin-bottom: 15px;
-
- .login-input {
- flex: 1;
- height: 100%;
- background-color: transparent;
- font-size: 13px;
- font-weight: 400;
- color: #D1D7E0;
-
- &::placeholder {
- color: #D1D7E0;
- }
- }
-
- &::before {
+ justify-content: center;
+ gap: 12px;
+ padding: 33.5px 0;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+ background-color: rgba(255, 255, 255, 0.05);
+ .store-id-title{
+ position: relative;
+ padding-left: 32px;
+ font-size: 13px;
+ color: #fff;
+ &::before{
content: '';
position: absolute;
top: 50%;
- left: 15px;
+ left: 0;
transform: translateY(-50%);
- width: 10px;
- height: 12px;
- background-size: cover;
- }
-
- button {
width: 20px;
- height: 100%;
- background-repeat: no-repeat;
- background-position: center;
- }
-
- &.id {
- &::before {
- background: url(../../public/static/images/main/login_id.svg) no-repeat center;
- }
-
- .id-delete {
- background-image: url(../../public/static/images/main/id_delete.svg);
- background-size: 17px 17px;
- }
- }
-
- &.password {
- margin-bottom: 20px;
-
- &::before {
- background: url(../../public/static/images/main/login_password.svg) no-repeat center;
- }
-
- .password-hidden {
- background-image: url(../../public/static/images/main/password_hidden.svg);
- background-size: 19px 13px;
-
- &.visible {
- background-image: url(../../public/static/images/main/password_visible.svg);
- }
- }
- }
+ height: 20px;
+ background: url(../../public/static/images/main/id_icon.svg)no-repeat center;
}
-
- .login-btn-box {
- margin-bottom: 20px;
-
- .login-btn {
- display: block;
- width: 100%;
- height: 45px;
- background-color: #5C6773;
- color: #fff;
- font-size: 15px;
- font-weight: 600;
- border-radius: 4px;
- transition: background .15s ease-in-out;
-
- &:hover {
- background-color: #717e8d;
- }
- }
- }
-
- .reset-password {
- width: 100%;
- text-align: center;
-
- a {
- position: relative;
- font-size: 13px;
- color: #364864;
- font-weight: 400;
- padding-right: 16px;
-
- &::before {
- content: '';
- position: absolute;
- top: calc(50% + 1px);
- right: 0;
- transform: translateY(-50%);
- width: 6px;
- height: 8px;
- background: url(../../public/static/images/main/login-arr.svg) no-repeat center;
- }
- }
- }
- }
}
-
- .login-guide-wrap {
- position: relative;
- margin-left: 10px;
- margin-top: 30px;
- padding-left: 15px;
- font-size: 13px;
- color: #fff;
- line-height: 24px;
-
- a {
+ .store-arr{
+ display: block;
+ width: 7px;
+ height: 10px;
+ background: url(../../public/static/images/main/store-arr.svg) no-repeat center;
+ }
+ .store-id-name{
+ font-size: 16px;
color: #fff;
font-weight: 600;
- text-decoration: underline;
- }
-
- span {
- position: absolute;
- top: 0;
- left: 0;
- }
}
- }
-
- .login-copyright {
- position: absolute;
- bottom: 40px;
- left: 50%;
- transform: translateX(-50%);
- font-size: 11px;
- color: #fff;
- font-weight: 500;
- }
}
-.d-check-box {
- &.login {
- margin-bottom: 25px;
-
- label {
- padding-left: 20px;
- color: #364864;
-
- &:before {
- width: 22px;
- height: 22px;
- top: -1px;
- border-color: #A8B6C7;
- border-radius: 3px;
- transition: background .05s ease-in-out;
- }
+// main-search-form
+.main-search-wrap{
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 45px 0;
+ .search-raido-wrap{
+ display: flex;
+ align-items: center;
+ gap: 16px;
+ margin-right: 30px;
}
- }
+}
+.search-input-box{
+ display: flex;
+ align-items: center;
+ width: 580px;
+ height: 45px;
+ border-radius: 100px;
+ padding: 0 20px;
+ border: 1px solid rgba(255, 255, 255, 0.30);
+ background: rgba(31, 31, 31, 0.30);
+ .main-search{
+ flex: 1;
+ height: 100%;
+ font-size: 13px;
+ color: #fff;
+ background-color: transparent;
+ outline: none;
+ border: none;
+ font-family: 'Noto Sans JP', sans-serif;
+ }
+ .search-icon{
+ width: 20px;
+ height: 100%;
+ background-image: url(../../public/static/images/main/main_search.svg);
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: 21px 21px;
+ }
+}
- input[type=checkbox]:checked + label::before {
- border-color: #A8B6C7;
- background-color: #A8B6C7;
- }
+// main-contents-inner
+.main-product-list-wrap{
+ max-width: 1400px;
+ margin: 0 auto;
+ .main-product-list{
+ display: flex;
+ gap: 24px;
+ margin-bottom: 24px;
+ .product-item{
+ display: flex;
+ flex-direction: column;
+ padding: 40px;
+ border-radius: 6px;
+ background: #FFF;
+ box-shadow: 0px 3px 30px 0px rgba(0, 0, 0, 0.02);
+ &.item01{flex: 1; max-height: 400px;}
+ &.item02{flex: none; width: 451px; max-height: 400px;}
+ &.item03{flex: 1;}
+ &.item04{flex: none; width: 351px;}
+ &.item05{flex: none; width: 451px;}
+ .product-item-title-wrap{
+ display: flex;
+ align-items: center;
+ .product-item-title{
+ display: flex;
+ align-items: center;
+ font-size: 16px;
+ color: #101010;
+ font-weight: 600;
+ .item-logo{
+ display: block;
+ width: 40px;
+ height: 40px;
+ border-radius: 50px;
+ background: #14324F;
+ margin-right: 12px;
+ background-repeat: no-repeat;
+ background-size: 22px 22px;
+ background-position: center;
+ &.ico01{background-image: url(../../public/static/images/main/product_ico01.svg);}
+ &.ico02{background-image: url(../../public/static/images/main/product_ico02.svg);}
+ &.ico03{background-image: url(../../public/static/images/main/product_ico03.svg);}
+ &.ico04{background-image: url(../../public/static/images/main/product_ico04.svg);}
+ &.ico05{background-image: url(../../public/static/images/main/product_ico05.svg);}
+ }
+ }
+ .more-btn{
+ display: block;
+ width: 20px;
+ height: 20px;
+ margin-left: auto;
+ background: url(../../public/static/images/main/more_btn.svg)no-repeat center;
+ }
+ }
+ .product-item-content{
+ margin-top: 30px;
+ overflow: hidden;
+ .recently-list{
+ .recently-item{
+ border: 1px solid #F2F2F2;
+ background-color: transparent;
+ padding: 29.9px 20px;
+ margin-bottom: 5px;
+ cursor: pointer;
+ .item-inner{
+ display: flex;
+ align-items: center;
+ span{
+ position: relative;
+ display: block;
+ font-size: 13px;
+ color: #101010;
+ font-weight: 400;
+ padding: 0 10px;
+ &.time{
+ padding-left: 22px;
+ &::before{
+ content: '';
+ position: absolute;
+ top: 50%;
+ left: 0;
+ transform: translateY(-50%);
+ width: 14px;
+ height: 14px;
+ background:url(../../public/static/images/main/clock.svg)no-repeat center;
+ background-size: cover;
+ }
+ }
+ &:after{
+ content: '';
+ position: absolute;
+ top: 50%;
+ right: 0;
+ transform: translateY(-50%);
+ width: 1px;
+ height: 10px;
+ background-color: #BBB;
+ }
+ &:last-child{
+ &:after{
+ display: none;
+ }
+ }
+ }
+ }
+ &:last-child{
+ margin-bottom: 5px;
+ }
+ }
+ }
+ .notice-box{
+ height: 100%;
+ overflow-y: auto;
+ .notice-day{
+ font-size: 13px;
+ color: #666;
+ font-weight: 400;
+ margin-bottom: 7px;
+ }
+ .notice-title{
+ font-size: 14px;
+ color: #101010;
+ font-weight: 600;
+ margin-bottom: 25px;
+ line-height: 24px;
+ word-break: keep-all;
+ }
+ .notice-contents{
+ font-size: 12px;
+ color: #666;
+ font-weight: 400;
+ line-height: 22px;
+ span{
+ position: relative;
+ display: block;
+ padding-left: 10px;
+ &::before{
+ content: '';
+ position: absolute;
+ top: 10px;
+ left: 3px;
+ width: 3px;
+ height: 3px;
+ border-radius: 100%;
+ background-color: #666;
+ }
+ }
+ }
+ &::-webkit-scrollbar {width: 4px; /* 스크롤바의 너비 */}
+ &::-webkit-scrollbar-thumb {background: #697C8F; /* 스크롤바의 색상 */}
+ &::-webkit-scrollbar-track {background: transparent; /*스크롤바 뒷 배경 색상*/}
+ }
+ .faq-item{
+ position: relative;
+ margin-bottom: 10px;
+ cursor: pointer;
+ .faq-item-inner{
+ display: flex;
+ align-items: center;
+
+ .faq-num{
+ flex: none;
+ padding: 7px 12.5px;
+ font-size: 13px;
+ color: #101010;
+ font-weight: 600;
+ border-radius: 110px;
+ border: 1px solid rgba(242, 242, 242, 0.95);
+ margin-right: 20px;
+ }
+ .faq-title{
+ width: 0;
+ flex: 1 1 auto;
+ font-size: 13px;
+ color: #101010;
+ font-weight: 500;
+ padding-right: 96px;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ }
+ .faq-day{
+ position: absolute;
+ top: 50%;
+ right: 0;
+ transform: translateY(-50%);
+ font-size: 13px;
+ color: #101010;
+ font-weight: 400;
+ }
+ }
+ &:last-child{
+ margin-bottom: 0;
+ }
+ }
+ .data-download-wrap{
+ width: 100%;
+ .data-down{
+ display: block;
+ width: 100%;
+ padding: 20px;
+ text-align: left;
+ border-radius: 4px;
+ background-color: #697C8F;
+ margin-bottom: 5px;
+ transition: background .17s ease-in-out;
+ span{
+ position: relative;
+ display: block;
+ padding-right: 30px;
+ font-size: 13px;
+ color: #fff;
+ font-weight: 400;
+ &:after{
+ content: '';
+ position: absolute;
+ top: 50%;
+ right: 0;
+ transform: translateY(-50%);
+ width: 18px;
+ height: 16px;
+ background: url(../../public/static/images/main/download.svg)no-repeat center;
+ background-size: cover;
+ }
+ }
+ &:last-child{
+ margin-bottom: 0;
+ }
+ &:hover{
+ background-color: #859eb6;
+ }
+ }
+ }
+ .contact-info-list{
+ padding: 25px 30px;
+ border-radius: 4px;
+ background-color: #F4F4F7;
+ .info-item{
+ display: flex;
+ align-items: center;
+ padding: 15px 0;
+ border-bottom: 1px solid #fff;
+ &:first-child{padding-top: 0;}
+ &:last-child{padding-bottom: 0; border: none;}
+ .icon-box{
+ display: flex;
+ margin-right: 12px;
+ }
+ .infor-data{
+ font-size: 13px;
+ color: #101010;
+ font-weight: 500;
+ }
+ }
+ }
+ }
+ }
+ &:last-child{
+ margin-bottom: 0;
+ }
+ }
+}
- input[type=checkbox]:checked + label::after {
- border-color: #fff;
- width: 7px;
- height: 11px;
- top: -2px;
- left: 1px;
- }
+// loginpage
+.login-wrap{
+ position: relative;
+ width: 100%;
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ background: url(../../public/static/images/main/login_bg.png) no-repeat center;
+ background-size: cover;
+ .login-inner{
+ max-width: 500px;
+ width: 100%;
+ margin: 0 auto;
+ .login-logo{
+ display: block;
+ margin-bottom: 25px;
+ }
+ .login-input-frame{
+ padding: 40px 50px;
+ border-radius: 6px;
+ background: rgba(255, 255, 255, 0.97);
+ box-shadow: 0px 3px 30px 0px rgba(0, 0, 0, 0.02);
+ .login-frame-tit{
+ font-size: 18px;
+ color: #364864;
+ font-weight: 400;
+ padding-bottom: 30px;
+ border-bottom: 1px solid #E5E9EF;
+ span{
+ display: block;
+ font-weight: 600;
+ margin-bottom: 5px;
+ }
+ }
+ .login-input-wrap{
+ margin-top: 30px;
+ .login-area{
+ position: relative;
+ display: flex;
+ align-items: center;
+ border: 1px solid #E5E9EF;
+ height: 45px;
+ padding-left: 40px;
+ padding-right: 15px;
+ margin-bottom: 15px;
+ .login-input{
+ flex: 1;
+ height: 100%;
+ background-color: transparent;
+ font-size: 13px;
+ font-weight: 400;
+ color: #D1D7E0;
+ &::placeholder{
+ color: #D1D7E0;
+ }
+ }
+ &::before{
+ content: '';
+ position: absolute;
+ top: 50%;
+ left: 15px;
+ transform: translateY(-50%);
+ width: 10px;
+ height: 12px;
+ background-size: cover;
+ }
+ button{
+ width: 20px;
+ height: 100%;
+ background-repeat: no-repeat;
+ background-position: center;
+ }
+ &.id{
+ &::before{
+ background: url(../../public/static/images/main/login_id.svg)no-repeat center;
+ }
+ .id-delete{
+ background-image: url(../../public/static/images/main/id_delete.svg);
+ background-size: 17px 17px;
+ }
+ }
+ &.password{
+ margin-bottom: 20px;
+ &::before{
+ background: url(../../public/static/images/main/login_password.svg)no-repeat center;
+ }
+ .password-hidden{
+ background-image: url(../../public/static/images/main/password_hidden.svg);
+ background-size: 19px 13px;
+ &.visible{
+ background-image: url(../../public/static/images/main/password_visible.svg);
+ }
+ }
+ }
+ }
+ .login-btn-box{
+ margin-bottom: 20px;
+ .login-btn{
+ display: block;
+ width: 100%;
+ height: 45px;
+ background-color: #5C6773;
+ color: #fff;
+ font-size: 15px;
+ font-weight: 600;
+ border-radius: 4px;
+ transition: background .15s ease-in-out;
+ &:hover{
+ background-color: #717e8d;
+ }
+ }
+ }
+ .reset-password{
+ width: 100%;
+ text-align: center;
+ a{
+ position: relative;
+ font-size: 13px;
+ color: #364864;
+ font-weight: 400;
+ padding-right: 16px;
+ &::before{
+ content: '';
+ position: absolute;
+ top: calc(50% + 1px);
+ right: 0;
+ transform: translateY(-50%);
+ width: 6px;
+ height: 8px;
+ background: url(../../public/static/images/main/login-arr.svg)no-repeat center;
+ }
+ }
+ }
+ }
+ }
+ .login-guide-wrap{
+ position: relative;
+ margin-left: 10px;
+ margin-top: 30px;
+ padding-left: 15px;
+ font-size: 13px;
+ color: #fff;
+ line-height: 24px;
+ a{
+ color: #fff;
+ font-weight: 600;
+ text-decoration: underline;
+ }
+ span{
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+ }
+ }
+ .login-copyright{
+ position: absolute;
+ bottom: 40px;
+ left: 50%;
+ transform: translateX(-50%);
+ font-size: 11px;
+ color: #fff;
+ font-weight: 500;
+ }
+}
+
+.d-check-box{
+ &.login{
+ margin-bottom: 25px;
+ label{
+ padding-left: 20px;
+ color: #364864;
+ &:before{
+ width: 22px;
+ height: 22px;
+ top: -1px;
+ border-color: #A8B6C7;
+ border-radius: 3px;
+ transition: background .05s ease-in-out;
+ }
+ }
+ }
+ input[type=checkbox]:checked + label::before{
+ border-color: #A8B6C7;
+ background-color: #A8B6C7;
+ }
+ input[type=checkbox]:checked + label::after{
+ border-color: #fff;
+ width: 7px;
+ height: 11px;
+ top: -2px;
+ left: 1px;
+ }
}
\ No newline at end of file
diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss
index 3003ae93..6309f50e 100644
--- a/src/styles/_modal.scss
+++ b/src/styles/_modal.scss
@@ -1,326 +1,469 @@
-@keyframes mountpop {
- from {
- opacity: 0;
- scale: 0.95;
- }
- to {
- opacity: 1;
- scale: 1;
- }
+$pop-color: #fff;
+$pop-normal-weight: 400;
+$pop-bold-weight: 500;
+$pop-normal-size: 12px;
+$alert-color: #101010;
+
+@keyframes mountpop{
+ from{opacity: 0; scale: 0.95;}
+ to{opacity: 1; scale: 1;}
+}
+@keyframes unmountpop{
+ from{opacity: 1; scale: 1;}
+ to{opacity: 0; scale: 0.95;}
}
-@keyframes unmountpop {
- from {
- opacity: 1;
- scale: 1;
- }
- to {
- opacity: 0;
- scale: 0.95;
- }
+.modal-pop-wrap{
+ position: fixed;
+ top: 200px;
+ right: 100px;
+ width: 100%;
+ min-width: 300px;
+ height: -webkit-fit-content;
+ height: -moz-fit-content;
+ height: fit-content;
+ border: 1px solid #000;
+ border-radius: 4px;
+ background-color: #272727;
+ z-index: 9999999;
+ overflow: hidden;
+ &.r{
+ width: 400px;
+ }
+ &.sm{
+ width: 580px;
+ }
+ &.ssm{
+ width: 380px;
+ }
+ &.xm{
+ width: 300px;
+ }
+ &.l{
+ width: 800px;
+ }
+ &.mount{
+ animation: mountpop .17s ease-in-out forwards;
+ }
+ &.unmount{
+ animation: unmountpop .17s ease-in-out forwards;
+ }
+ &.alert{
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ background-color: transparent;
+ border: none;
+ .modal-head{
+ background-color: transparent;
+ padding: 0 0 8px;
+ .modal-close{
+ width: 20px;
+ height: 20px;
+ background: url(../../public/static/images/canvas/alert_close.svg)no-repeat center;
+ }
+ }
+ .modal-body{
+ background-color: #fff;
+ padding: 22px;
+ border-radius: 4px;
+ border: 1px solid #101010;
+ color: $alert-color;
+ .alert-title{
+ font-size: 13px;
+ font-weight: 700;
+ color: $alert-color;
+ margin-bottom: 15px;
+ }
+ }
+ }
}
-
-.modal-pop-wrap {
- position: fixed;
- top: 200px;
- right: 100px;
- width: 100%;
- min-width: 300px;
- max-width: fit-content;
- height: -webkit-fit-content;
- height: -moz-fit-content;
- height: fit-content;
- border: 1px solid #000;
- border-radius: 4px;
- background-color: #272727;
- z-index: 9999999;
-
- &.sm {
- max-width: 580px;
- }
-
- &.ssm {
- max-width: 380px;
- }
-
- &.xm {
- max-width: 300px;
- }
-
- &.mount {
- animation: mountpop .17s ease-in-out forwards;
- }
-
- &.unmount {
- animation: unmountpop .17s ease-in-out forwards;
- }
-}
-
-.modal-head {
- display: flex;
- align-items: center;
- padding: 10px 24px;
- background-color: #000;
- cursor: pointer;
-
- h1.title {
- font-size: 13px;
- color: #fff;
- font-weight: 700;
- }
-
- .modal-close {
- margin-left: auto;
- color: #fff;
- text-indent: -999999999px;
- width: 10px;
- height: 10px;
- background: url(../../public/static/images/canvas/modal_close.svg) no-repeat center;
- }
-}
-
-.modal-body {
- padding: 15px;
-
- .modal-btn-wrap {
+.modal-head{
display: flex;
align-items: center;
- gap: 5px;
-
- button {
- flex: 1;
+ padding: 10px 24px;
+ background-color: #000;
+ h1.title{
+ font-size: 13px;
+ color: $pop-color;
+ font-weight: 700;
}
- }
-
- .modal-check-btn-wrap {
- margin-top: 15px;
-
- .check-wrap-title {
- font-size: 12px;
- color: #fff;
- font-weight: 600;
-
- &.light {
- font-weight: 400;
- }
+ .modal-close{
+ margin-left: auto;
+ color: $pop-color;
+ text-indent: -999999999px;
+ width: 10px;
+ height: 10px;
+ background: url(../../public/static/images/canvas/modal_close.svg)no-repeat center;
}
-
- .flex-check-box {
- display: flex;
- flex-wrap: wrap;
- gap: 10px;
- margin-top: 15px;
-
- &.for2 {
- button {
- width: calc(50% - 5px);
+}
+.modal-body{
+ padding: 24px;
+ .modal-btn-wrap{
+ display: flex;
+ align-items: center;
+ gap: 5px;
+ button{
+ flex: 1;
}
-
- &.btn {
- gap: 5px;
-
- button {
- width: calc(50% - 2.5px);
- }
- }
- }
-
- &.for-line {
- button {
- flex: 1;
- }
- }
}
- }
-
- .outer-line-wrap {
- border-top: 1px solid #3C3C3C;
- margin-top: 10px;
- padding-top: 15px;
- margin-bottom: 15px;
-
- > div {
- margin-bottom: 15px;
-
- &:last-child {
- margin-bottom: 0;
- }
+ .modal-check-btn-wrap{
+ margin-top: 15px;
+ .check-wrap-title{
+ font-size: $pop-normal-size;
+ color: $pop-color;
+ font-weight: 600;
+ &.light{
+ font-weight: $pop-normal-weight;
+ }
+ }
+ .flex-check-box{
+ display: flex;
+ flex-wrap: wrap;
+ gap: 10px;
+ margin-top: 15px;
+ &.for2{
+ justify-content: flex-end;
+ button{
+ width: calc(50% - 5px);
+ }
+ &.btn{
+ gap: 5px;
+ button{
+ width: calc(50% - 2.5px);
+ }
+ }
+ }
+ &.for-line{
+ button{
+ flex: 1;
+ }
+ }
+ }
+ }
+ .outer-line-wrap{
+ border-top: 1px solid #3C3C3C;
+ margin-top: 10px;
+ padding-top: 15px;
+ margin-bottom: 15px;
+ > div{
+ margin-bottom: 15px;
+ &:last-child{
+ margin-bottom: 0;
+ }
+ }
+ }
+ .modal-guide{
+ display: block;
+ font-size: $pop-normal-size;
+ color: $alert-color;
+ font-weight: $pop-normal-weight;
}
- }
}
-.adsorption-point {
- display: flex;
- align-items: center;
- background-color: #3A3A3A;
- border-radius: 3px;
- padding-left: 11px;
- overflow: hidden;
- transition: all 0.17s ease-in-out;
-
- span {
- font-size: 12px;
- color: #898989;
- }
-
- i {
+.adsorption-point{
display: flex;
align-items: center;
- padding: 0 7px;
- margin-left: auto;
- height: 100%;
- font-size: 13px;
- color: #898989;
- }
-
- &.act {
- i {
- color: #fff;
- background-color: #1083E3;
+ background-color: #3A3A3A;
+ border-radius: 3px;
+ padding-left: 11px;
+ overflow: hidden;
+ transition: all 0.17s ease-in-out;
+ span{
+ font-size: $pop-normal-size;
+ color: #898989;
+ }
+ i{
+ display: flex;
+ align-items: center;
+ padding: 0 7px;
+ margin-left: auto;
+ height: 100%;
+ font-size: 13px;
+ color: #898989;
+ }
+ &.act{
+ i{
+ color: $pop-color;
+ background-color: #1083E3;
+ }
}
- }
}
// grid-option
-.grid-check-form {
- display: flex;
- align-items: center;
- gap: 15px;
- padding-bottom: 15px;
- border-bottom: 1px solid #3C3C3C;
-}
-
-.grid-option-wrap {
- padding: 15px 0;
- border-bottom: 1px solid #3C3C3C;
-
- .grid-option-box {
+.grid-check-form{
display: flex;
align-items: center;
- background-color: #3D3D3D;
- border-radius: 2px;
- padding: 10px;
- gap: 20px;
- margin-bottom: 5px;
-
- .grid-input-form {
- display: flex;
- align-items: center;
-
- span {
- font-size: 12px;
- color: #fff;
- font-weight: 500;
- }
-
- .input-grid {
- width: 63px;
-
- input {
- width: 100%;
+ gap: 15px;
+ padding-bottom: 15px;
+ border-bottom: 1px solid #3C3C3C;
+}
+.grid-option-wrap{
+ padding: 15px 0;
+ border-bottom: 1px solid #3C3C3C;
+ .grid-option-box{
+ display: flex;
+ align-items: center;
+ background-color: #3D3D3D;
+ border-radius: 2px;
+ padding: 10px;
+ gap: 20px;
+ margin-bottom: 5px;
+ .grid-input-form{
+ display: flex;
+ align-items: center;
+ span{
+ flex: none;
+ font-size: $pop-normal-size;
+ color: $pop-color;
+ font-weight: $pop-bold-weight;
+ }
+ .input-grid{
+ width: 54px;
+ input{
+ width: 100%;
+ }
+ }
+ }
+ &:last-child{
+ margin-bottom: 0;
}
- }
}
-
- &:last-child {
- margin-bottom: 0;
+}
+.grid-select{
+ flex: 1;
+ .sort-select{
+ width: 100%;
+ background-color: #313131;
}
- }
}
-
-.grid-select {
- flex: 1;
-
- .sort-select {
- width: 100%;
- background-color: #313131;
- }
-}
-
-.grid-btn-wrap {
- padding-top: 15px;
- text-align: right;
-
- button {
- padding: 0 20px;
- }
+.grid-btn-wrap{
+ padding-top: 15px;
+ text-align: right;
+ button{
+ padding: 0 20px;
+ }
}
// grid copy
-.grid-option-tit {
- font-size: 12px;
- color: #fff;
- font-weight: 400;
- padding-bottom: 15px;
- border-bottom: 1px solid #3C3C3C;
+.grid-option-tit{
+ font-size: $pop-normal-size;
+ color: $pop-color;
+ font-weight: $pop-normal-weight;
+ padding-bottom: 15px;
+ border-bottom: 1px solid #3C3C3C;
}
-
-.grid-direction {
- display: flex;
- align-items: center;
- gap: 5px;
+.grid-direction{
+ display: flex;
+ align-items: center;
+ gap: 5px;
+ flex: 1;
}
-
-.direction {
- width: 22px;
- height: 22px;
- background-color: #757575;
- background-image: url(../../public/static/images/canvas/grid_option_arr.svg);
- background-repeat: no-repeat;
- background-position: center;
- background-size: 16px 15px;
- border-radius: 50%;
- transition: all .15s ease-in-out;
-
- &.down {
- transform: rotate(180deg);
- }
-
- &.left {
- transform: rotate(-90deg);
- }
-
- &.right {
- transform: rotate(90deg);
- }
-
- &:hover,
- &.act {
- background-color: #1083E3;
- }
+.direction{
+ width: 22px;
+ height: 22px;
+ background-color: #757575;
+ background-image: url(../../public/static/images/canvas/grid_option_arr.svg);
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: 16px 15px;
+ border-radius: 50%;
+ transition: all .15s ease-in-out;
+ opacity: 0.6;
+ &.down{transform: rotate(180deg);}
+ &.left{transform: rotate(-90deg);}
+ &.right{transform: rotate(90deg);}
+ &:hover,
+ &.act{
+ opacity: 1;
+ }
}
// grid-move
-.move-form {
- p {
- font-size: 12px;
- color: #fff;
- font-weight: 500;
- }
-}
-
-.input-move-wrap {
- display: flex;
- align-items: center;
- gap: 5px;
-
- span {
- color: #fff;
- font-size: 12px;
- }
-
- .input-move {
- width: 148px;
-
- input {
- width: 100%;
+.move-form{
+ p{
+ font-size: $pop-normal-size;
+ color: $pop-color;
+ font-weight: $pop-bold-weight;
}
- }
+}
+.input-move-wrap{
+ display: flex;
+ align-items: center;
+ gap: 5px;
+ span{
+ color: $pop-color;
+ font-size: $pop-normal-size;
+ }
+ .input-move{
+ width: 130px;
+ input{
+ width: 100%;
+ }
+ }
+}
+.direction-move-wrap{
+ flex: none;
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 10px;
}
-.direction-move-wrap {
- flex: none;
- display: grid;
- grid-template-columns: 1fr 1fr;
- gap: 10px;
+// 배치면 초기 설정
+.placement-table{
+ table{
+ table-layout: fixed;
+ tr{
+ th{
+ display: flex;
+ align-items: center;
+ font-size: $pop-normal-size;
+ color: $pop-color;
+ font-weight: $pop-bold-weight;
+ padding: 18px 0;
+ border-bottom: 1px solid #424242;
+ }
+ td{
+ font-size: $pop-normal-size;
+ color: $pop-color;
+ border-bottom: 1px solid #424242;
+ padding-left: 20px;
+ }
+ &:first-child{
+ td,
+ th{
+ padding-top: 0;
+ }
+ }
+ }
+ }
+ .tooltip{
+ position: relative;
+ display: block;
+ width: 15px;
+ height: 15px;
+ margin-left: 5px;
+ background: url(../../public/static/images/canvas/pop_tip.svg)no-repeat center;
+ background-size: cover;
+ }
+ &.light{
+ padding: 0;
+ th,td{
+ color: $alert-color;
+ border-bottom: none;
+ border-top: 1px solid #EFEFEF;
+ }
+ th{
+ padding: 14px 0;
+ }
+ tr{
+ &:first-child{
+ td,
+ th{
+ padding-top: 14px;
+ }
+ }
+ &:last-child{
+ td,
+ th{
+ padding-bottom: 0px;
+ }
+ }
+ }
+ }
+}
+
+.pop-form-radio{
+ display: flex;
+ align-items: center;
+ gap: 10px;
+}
+.placement-option{
+ display: flex;
+ align-items: center;
+ gap: 20px;
+}
+.select-wrap{
+ div{
+ width: 100%;
+ }
+}
+.flex-ment{
+ display: flex;
+ align-items: center;
+ gap: 5px;
+ span{
+ font-size: $pop-normal-size;
+ color: $pop-color;
+ font-weight: $pop-normal-weight;
+ }
+}
+
+// 외벽선 그리기
+.outline-wrap{
+ padding: 24px 0;
+ border-bottom: 1px solid #424242;
+ .outline-inner{
+ display: flex;
+ align-items: center;
+ margin-bottom: 14px;
+ &:last-child{
+ margin-bottom: 0;
+ }
+ }
+}
+.outline-form{
+ width: 50%;
+ display: flex;
+ align-items: center;
+ margin-right: 15px;
+ span{
+ width: 60px;
+ flex: none;
+ font-size: $pop-normal-size;
+ font-weight: $pop-bold-weight;
+ color: $pop-color;
+ margin-right: 10px;
+ }
+ .reset-btn{
+ flex: none;
+ width: 30px;
+ height: 30px;
+ background: transparent;
+ border: 1px solid #484848;
+ border-radius: 2px;
+ margin-left: 5px;
+ background-image: url(../../public/static/images/canvas/reset_ico.svg);
+ background-repeat: no-repeat;
+ background-size: 12px 12px;
+ background-position: center;
+ }
+ &:last-child{
+ margin-right: 0;
+ }
+}
+
+.cul-wrap{
+ display: flex;
+ .outline-box{
+ width: 50%;
+ margin-right: 15px;
+ .outline-form{
+ width: 100%;
+ margin-bottom: 14px;
+ margin-right: 0;
+ &:last-child{
+ margin-bottom: 0;
+ }
+ }
+ }
+ .cul-box{
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 50%;
+ background-color: #3D3D3D;
+ border-radius: 2px ;
+ }
}
\ No newline at end of file
diff --git a/src/styles/_pagination.scss b/src/styles/_pagination.scss
new file mode 100644
index 00000000..008527ba
--- /dev/null
+++ b/src/styles/_pagination.scss
@@ -0,0 +1,51 @@
+.pagination{
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 5px;
+ .page-item{
+ button{
+ font-family: 'Pretendard';
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 24px;
+ height: 24px;
+ border: 1px solid #EAEAEA;
+ font-size: 12px;
+ font-weight: 400;
+ color: #808080;
+ }
+ &.on{
+ button{
+ border-color: #304961;
+ font-weight: 600;
+ color: #304961;
+ }
+ }
+ &.last,
+ &.first{
+ button{
+ background: url(../../public/static/images/sub/pagination_first.svg)no-repeat center;
+ background-size: 9px 8px;
+ }
+ }
+ &.last{
+ button{
+ transform: rotate(180deg);
+ }
+ }
+ &.next,
+ &.prev{
+ button{
+ background: url(../../public/static/images/sub/pagination_prev.svg)no-repeat center;
+ background-size: 5px 8px;
+ }
+ }
+ &.next{
+ button{
+ transform: rotate(180deg);
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/styles/_reset.scss b/src/styles/_reset.scss
index 9d59e8b7..2c5b1e22 100644
--- a/src/styles/_reset.scss
+++ b/src/styles/_reset.scss
@@ -1,21 +1,18 @@
* {
- -webkit-text-size-adjust: none;
- -moz-text-size-adjust: none;
- -ms-text-size-adjust: none;
- text-size-adjust: none;
- box-sizing: content-box
+ -webkit-text-size-adjust:none;
+ -moz-text-size-adjust:none;
+ -ms-text-size-adjust:none;
+ text-size-adjust: none;
+ box-sizing: content-box
}
-
*, ::after, ::before {
- box-sizing: border-box;
+ box-sizing: border-box;
}
-
-html, body {
- width: 100%;
- height: 100%;
- font-size: 16px;
+html, body{
+ width: 100%;
+ height: 100%;
+ font-size: 16px;
}
-
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
@@ -25,741 +22,654 @@ b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed,
-figure, figcaption, footer, header, hgroup,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
- margin: 0;
- padding: 0;
- border: 0;
- font: inherit;
- vertical-align: baseline;
- font-family: 'Noto Sans JP', sans-serif;
+ margin: 0;
+ padding: 0;
+ border: 0;
+ font: inherit;
+ vertical-align: baseline;
+ font-family: 'Noto Sans JP', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ font-smooth: never;
}
-
/* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure,
+article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
- display: block;
+ display: block;
}
-
body {
- line-height: 1.4;
-}
-
-body:first-of-type caption {
- display: none;
+ line-height: 1.4;
}
+body:first-of-type caption { display:none;}
ol, ul {
- list-style: none;
+ list-style: none;
}
-
blockquote, q {
- quotes: none;
+ quotes: none;
}
-
blockquote:before, blockquote:after,
q:before, q:after {
- content: '';
- content: none;
+ content: '';
+ content: none;
}
-
table {
- width: 100%;
- border-collapse: separate;
- border-spacing: 0;
- border: 0 none;
+ width: 100%;
+ border-collapse: separate;
+ border-spacing:0;
+ border:0 none;
}
-
caption, th, td {
- text-align: left;
- font-weight: normal;
- border: 0;
+ text-align:left;
+ font-weight: normal;
+ border:0;
}
-a {
- cursor: pointer;
- color: #000;
+a {
+ cursor:pointer;
+ color:#000;
}
-
a, a:hover, a:active {
- text-decoration: none;
- -webkit-tap-highlight-color: transparent;
+ text-decoration:none;
+ -webkit-tap-highlight-color: transparent;
}
-
/*form_style*/
input, select, textarea, button, a, label {
- -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+ -webkit-tap-highlight-color:rgba(0,0,0,0);
}
-
-button, input[type=text], input[type=button] {
- -webkit-appearance: none;
- -webkit-border-radius: 0;
- -webkit-appearance: none;
- appearance: none;
- border-radius: 0
+button,input[type=text], input[type=button] {
+ -webkit-appearance: none;
+ -webkit-border-radius: 0;
+ -webkit-appearance:none;
+ appearance: none;
+ border-radius: 0
}
-
input[type=checkbox], input[type=radio] {
- box-sizing: border-box;
- padding: 0;
+ box-sizing: border-box;
+ padding: 0;
}
-
input, select, button {
- border: 0 none;
- outline: none;
- margin: 0;
+ border:0 none;
+ outline:none;
+ margin:0;
}
-
select {
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
}
-
select::-ms-expand {
- display: none;
+ display: none;
}
-
::-webkit-input-placeholder {
- line-height: 1;
- font-weight: 300;
- font-size: 0.938rem;
- letter-spacing: -0.6px;
- color: #8b8b8b;
+ line-height:1;
+ font-weight:300;
+ font-size:0.938rem;
+ letter-spacing:-0.6px;
+ color:#8b8b8b;
}
-
-.log-box ::-webkit-input-placeholder {
- color: #8b8b8b;
+.log-box ::-webkit-input-placeholder{
+ color:#8b8b8b;
}
-
-button {
- background: transparent;
- font-family: 'Noto Sans JP', sans-serif;
- border: none;
- padding: 0;
- margin: 0;
- line-height: 1.4;
- color: inherit;
- outline: none;
- cursor: pointer;
+button{
+ background: transparent;
+ font-family: 'Noto Sans JP', sans-serif;
+ border: none;
+ padding: 0;
+ margin: 0;
+ line-height: 1.4;
+ color: inherit;
+ outline: none;
+ cursor: pointer;
}
-
-.pre {
- font-family: 'Pretendard', sans-serif !important;
+.pre{
+ font-family: 'Pretendard', sans-serif !important;
}
// margin
-.mt5 {
- margin-top: 5px !important;
-}
-
-.mt10 {
- margin-top: 10px !important;
-}
-
-.mb5 {
- margin-bottom: 5px !important;
-}
-
-.mb10 {
- margin-bottom: 10px !important;
-}
-
-.mr5 {
- margin-right: 5px !important;
-}
-
-.mr10 {
- margin-right: 10px !important;
-}
-
-.ml5 {
- margin-left: 5px !important;
-}
-
-.ml10 {
- margin-left: 10px !important;
-}
+.mt5{margin-top: 5px !important;}
+.mt10{margin-top: 10px !important;}
+.mb5{margin-bottom: 5px !important;}
+.mb10{margin-bottom: 10px !important;}
+.mr5{margin-right: 5px !important;}
+.mr10{margin-right: 10px !important;}
+.ml5{margin-left: 5px !important;}
+.ml10{margin-left: 10px !important;}
// button
-.btn-frame {
- display: inline-block;
- padding: 0 9px;
- height: 34px;
- line-height: 34px;
- border-radius: 2px;
- color: #fff;
- font-size: 12px;
- font-weight: 400;
- border: 1px solid #000;
- text-align: center;
- font-family: 'Pretendard', sans-serif;
- transition: all .17s ease-in-out;
- cursor: pointer;
-
- &.block {
- width: 100%;
- }
-
- &.small {
- font-family: 'Noto Sans JP', sans-serif;
- height: 30px;
- line-height: 30px;
- font-size: 13px;
- }
-
- &.deepgray {
- background-color: #2C2C2C;
- border: 1px solid #484848;
- }
-
- &.gray {
- background-color: #3C3C3C;
- border: 1px solid #545454;
- }
-
- &.dark {
- background-color: #1C1C1C;
- border: 1px solid #484848;
- }
-
- &.modal {
- background-color: #272727;
- border: 1px solid #484848;
- color: #aaa;
-
- &:hover {
- background-color: #1083E3;
- border: 1px solid #1083E3;
- color: #fff;
- font-weight: 500;
- }
- }
-
- &:hover,
- &.act {
- background-color: #1083E3;
- border: 1px solid #1083E3;
+.btn-frame{
+ display: inline-block;
+ padding: 0 7px;
+ height: 34px;
+ line-height: 34px;
+ border-radius: 2px;
color: #fff;
- font-weight: 500;
- }
-
- &.block {
- display: block;
- width: 100%;
- }
-
- &.ico-flx {
- display: flex;
- align-items: center;
-
- .ico {
- margin-right: 10px;
+ font-size: 12px;
+ font-weight: 400;
+ border: 1px solid #000;
+ text-align: center;
+ font-family: 'Pretendard', sans-serif;
+ transition: all .17s ease-in-out;
+ cursor: pointer;
+ &.block{
+ width: 100%;
+ }
+ &.small{
+ font-family: 'Noto Sans JP', sans-serif;
+ height: 30px;
+ line-height: 30px;
+ font-size: 13px;
}
+ &.deepgray{
+ background-color: #2C2C2C;
+ border: 1px solid #484848;
+ }
+ &.gray{
+ background-color: #3C3C3C;
+ border: 1px solid #545454;
+ }
+ &.dark{
+ background-color: #1C1C1C;
+ border: 1px solid #484848;
+ }
+ &.modal{
+ font-family: 'Noto Sans JP', sans-serif;
+ background-color: #272727;
+ border: 1px solid #484848;
+ color: #aaa;
+ &:hover{
+ background-color: #1083E3;
+ border: 1px solid #1083E3;
+ color: #fff;
+ font-weight: 500;
+ }
+ }
&:hover,
- &.act {
- font-weight: 400;
+ &.act{
+ background-color: #1083E3;
+ border: 1px solid #1083E3;
+ color: #fff;
+ font-weight: 500;
}
- }
+ &.block{
+ display: block;
+ width: 100%;
+ }
+ &.ico-flx{
+ display: flex;
+ align-items: center;
+ .ico{
+ margin-right: 10px;
+ }
+ &:hover,
+ &.act{
+ font-weight: 400;
+ }
+ }
}
-.btn-origin {
- display: inline-block;
- height: 30px;
- padding: 0 14px;
- border-radius: 2px;
- background-color: #101010;
- color: #fff;
- font-size: 13px;
- font-weight: 400;
- transition: all .15s ease-in-out;
-
- &.navy {
- background-color: #304961;
-
- &:hover {
- background-color: #1083E3;
+.btn-origin{
+ display: inline-block;
+ height: 30px;
+ padding: 0 14px;
+ border-radius: 2px;
+ background-color: #101010;
+ color: #fff;
+ font-size: 13px;
+ font-weight: 400;
+ transition: all .15s ease-in-out;
+ &.navy{
+ background-color: #304961;
+ &:hover{
+ background-color: #1083E3;
+ }
}
- }
-
- &.grey {
- background-color: #94A0AD;
-
- &:hover {
- background-color: #607F9A;
+ &.grey{
+ background-color: #94A0AD;
+ &:hover{
+ background-color: #607F9A;
+ }
}
- }
}
// select
-.sort-select {
- position: relative;
- display: inline-block;
- min-width: 100px;
- height: 30px;
- line-height: 30px;
- padding: 0 10px;
- background-color: #373737;
- border: 1px solid #3F3F3F;
- border-radius: 2px;
- border-top-left-radius: 2px;
- color: #fff;
- cursor: pointer;
-
- p {
- font-size: 13px;
- color: #fff;
- height: 100%;
- }
-
- .select-item-wrap {
- position: absolute;
- top: 100%;
- left: -1px;
- clip-path: inset(0 0 100% 0);
- width: calc(100% + 2px);
- padding: 8px 0;
+.sort-select{
+ position: relative;
+ display: inline-block;
+ min-width: 100px;
+ height: 30px;
+ line-height: 30px;
+ padding: 0 10px;
background-color: #373737;
border: 1px solid #3F3F3F;
border-radius: 2px;
- transition: all 0.17s ease-in-out;
- visibility: hidden;
-
- .select-item {
- display: flex;
- align-items: center;
- padding: 8px 20px;
- line-height: 1.4;
- transition: all .17s ease-in-out;
-
- button {
- font-size: 12px;
+ border-top-left-radius: 2px;
+ color: #fff;
+ cursor: pointer;
+ p{
+ font-size: 13px;
color: #fff;
- line-height: 1.4;
- }
-
- &:hover {
- background-color: #2C2C2C;
- }
+ height: 100%;
}
- }
-
- &::after {
- content: '';
- position: absolute;
- top: 50%;
- right: 7px;
- transform: translateY(-50%);
- width: 10px;
- height: 6px;
- background: url(/static/images/common/select-arr.svg) no-repeat center;
- background-size: cover;
- transition: all .17s ease-in-out;
- }
-
- &.active {
- .select-item-wrap {
- clip-path: inset(0 0 0 0);
- visibility: visible;
+ .select-item-wrap{
+ position: absolute;
+ top: 100%;
+ left: -1px;
+ clip-path:inset(0 0 100% 0);
+ width: calc(100% + 2px);
+ padding: 8px 0;
+ background-color: #373737;
+ border: 1px solid #3F3F3F;
+ border-radius: 2px;
+ transition: all 0.17s ease-in-out;
+ visibility: hidden;
+ .select-item{
+ display: flex;
+ align-items: center;
+ padding: 8px 20px;
+ line-height: 1.4;
+ transition: all .17s ease-in-out;
+ button{
+ font-size: 12px;
+ color: #fff;
+ line-height: 1.4;
+ }
+ &:hover{
+ background-color: #2C2C2C;
+ }
+ }
}
-
- &:after {
- transform: translateY(-50%) rotate(-180deg);
+ &::after{
+ content: '';
+ position: absolute;
+ top: 50%;
+ right: 7px;
+ transform: translateY(-50%);
+ width: 10px;
+ height: 6px;
+ background: url(/static/images/common/select-arr.svg) no-repeat center;
+ background-size: cover;
+ transition: all .17s ease-in-out;
+ }
+ &.active{
+ .select-item-wrap{
+ clip-path: inset(0 0 0 0);
+ visibility: visible;
+ }
+ &:after{
+ transform: translateY(-50%) rotate(-180deg);
+ }
}
- }
}
-.select-light {
- position: relative;
- display: block;
- width: 100%;
- height: 30px;
- background: #FFF url(../../public/static/images/common/select_light_arr.svg) calc(100% - 11px) center no-repeat;
- background-size: 10px 6px;
- border: 1px solid #eee;
- padding: 0 30px 0 10px;
- font-size: 13px;
- color: #45576F;
- font-family: 'Noto Sans JP', sans-serif;
- cursor: pointer;
-
- &:disabled {
- opacity: 1;
- background-color: #FAFAFA;
- color: #999;
- cursor: default;
- }
-
- &.black {
- color: #101010;
- }
+.select-light{
+ position: relative;
+ display: block;
+ width: 100%;
+ height: 30px;
+ background: #FFF url(../../public/static/images/common/select_light_arr.svg) calc(100% - 11px) center no-repeat;
+ background-size: 10px 6px;
+ border: 1px solid #eee;
+ padding: 0 30px 0 10px;
+ font-size: 13px;
+ color: #45576F;
+ font-family: 'Noto Sans JP', sans-serif;
+ cursor: pointer;
+ &:disabled{
+ opacity: 1;
+ background-color: #FAFAFA;
+ color: #999;
+ cursor: default;
+ }
+ &.black{
+ color: #101010;
+ }
+ &.dark{
+ background: #323234 url(../../public/static/images/common/select_dark_arr.svg) calc(100% - 11px) center no-repeat;
+ color: #898989;
+ font-size: 12px;
+ border-radius: 2px;
+ border: none;
+ }
}
// input
-.form-input {
- label {
- display: block;
- color: #aaa;
- font-size: 12px;
- font-weight: 500;
- margin-bottom: 10px;
- }
+.form-input{
+ label{
+ display: block;
+ color: #aaa;
+ font-size: 12px;
+ font-weight: 500;
+ margin-bottom: 10px;
+ }
}
-
input[type=number],
-input[type=text] {
- &.input-origin {
- display: inline-block;
- height: 30px;
- line-height: 30px;
- border-radius: 2px;
- background-color: #313131;
- color: #fff;
- font-size: 12px;
- font-weight: 500;
- font-family: 'Pretendard', sans-serif;
- padding: 0 10px;
- letter-spacing: 0px;
-
- &::placeholder {
- opacity: 1;
- font-size: 12px;
- letter-spacing: 0px;
+input[type=text]{
+ &.input-origin{
+ display: inline-block;
+ height: 30px;
+ line-height: 30px;
+ border-radius: 2px;
+ background-color: #323234;
+ color: #fff;
+ font-size: 12px;
+ font-weight: 500;
+ font-family: 'Pretendard', sans-serif;
+ padding: 0 10px;
+ letter-spacing: 0px;
+ text-align: right;
+ &::placeholder{
+ opacity: 1;
+ font-size: 12px;
+ letter-spacing: 0px;
+ }
+ &.block{
+ width: 100%;
+ }
}
-
- &.block {
- width: 100%;
+ &.input-light{
+ display: block;
+ width: 100%;
+ height: 30px;
+ padding: 0 10px;
+ border: 1px solid #eee;
+ border-radius: 2px;
+ background-color: #fff;
+ font-family: 'Noto Sans JP', sans-serif;
+ font-size: 13px;
+ color: #45576F;
+ font-weight: normal;
+ transition: border-color .17s ease-in-out;
+ text-align: left;
+ &:read-only{
+ background-color: #FAFAFA;
+ color: #999999;
+ }
}
- }
-
- &.input-light {
- display: block;
- width: 100%;
- height: 30px;
- padding: 0 10px;
- border: 1px solid #eee;
- border-radius: 2px;
- background-color: #fff;
- font-family: 'Noto Sans JP', sans-serif;
- font-size: 13px;
- color: #45576F;
- font-weight: normal;
- transition: border-color .17s ease-in-out;
-
- &:read-only {
- background-color: #FAFAFA;
- color: #999999;
- }
- }
}
+
// check-btn
-.check-btn {
- display: flex;
- align-items: center;
- height: 30px;
- background-color: #3A3A3A;
- border-radius: 3px;
- transition: all .17s ease-in-out;
-
- .check-area {
- flex: none;
- width: 30px;
- height: 100%;
- border-right: 1px solid #272727;
- background: url(../../public/static/images/canvas/check-grey.svg) no-repeat center;
- background-size: 11px 9px;
- }
-
- .title-area {
- padding: 0 10px;
- font-size: 12px;
- color: #898989;
- font-weight: 400;
- }
-
- &.block {
- width: 100%;
- }
-
- &:hover,
- &.act {
- background-color: #fff;
-
- .check-area {
- border-right: 1px solid #101010;
- background: url(../../public/static/images/canvas/check-black.svg) no-repeat center;
+.check-btn{
+ display: flex;
+ align-items: center;
+ height: 30px;
+ background-color: #3A3A3A;
+ border-radius: 3px;
+ transition: all .17s ease-in-out;
+ .check-area{
+ flex: none;
+ width: 30px;
+ height: 100%;
+ border-right: 1px solid #272727;
+ background: url(../../public/static/images/canvas/check-grey.svg)no-repeat center;
+ background-size: 11px 9px;
}
-
- .title-area {
- color: #101010;
- font-weight: 600;
+ .title-area{
+ padding: 0 10px;
+ font-size: 12px;
+ color: #898989;
+ font-weight: 400;
+ }
+ &.block{
+ width: 100%;
+ }
+ &:hover,
+ &.act{
+ background-color: #fff;
+ .check-area{
+ border-right: 1px solid #101010;
+ background: url(../../public/static/images/canvas/check-black.svg)no-repeat center;
+ }
+ .title-area{
+ color: #101010;
+ font-weight: 600;
+ }
}
- }
}
// arr-btn
-.arr-btn {
- display: block;
- height: 30px;
- border-radius: 3px;
- background-color: #3A3A3A;
- padding: 0 11px;
- text-align: left;
- transition: all .17s ease-in-out;
-
- span {
- position: relative;
- font-size: 12px;
- color: #898989;
- font-weight: 400;
- padding-right: 15px;
-
- &:after {
- content: '';
- position: absolute;
- top: 50%;
- right: 0;
- transform: translateY(-50%);
- width: 5px;
- height: 8px;
- background: url(../../public/static/images/canvas/arr_btn_ico.svg) no-repeat center;
+.arr-btn{
+ display: block;
+ height: 30px;
+ border-radius: 3px;
+ background-color: #3A3A3A;
+ padding: 0 11px;
+ text-align: left;
+ transition: all .17s ease-in-out;
+ span{
+ position: relative;
+ font-size: 12px;
+ color: #898989;
+ font-weight: 400;
+ padding-right: 15px;
+ &:after{
+ content: '';
+ position: absolute;
+ top: 50%;
+ right: 0;
+ transform: translateY(-50%);
+ width: 5px;
+ height: 8px;
+ background: url(../../public/static/images/canvas/arr_btn_ico.svg)no-repeat center;
+ }
}
- }
-
- &:hover,
- &.act {
- background-color: #fff;
-
- span {
- color: #101010;
- font-weight: 500;
-
- &:after {
- background: url(../../public/static/images/canvas/arr_btn_ico_black.svg) no-repeat center;
- }
- }
- }
-
- &.dark {
- text-align: center;
- background-color: #272727;
- border: 1px solid #484848;
-
- span {
- color: #Fff;
-
- &:after {
- background: url(../../public/static/images/canvas/arr_btn_ico_white.svg) no-repeat center;
- }
- }
-
&:hover,
- &.act {
- background-color: #1083E3;
- border: 1px solid #1083E3;
+ &.act{
+ background-color: #fff;
+ span{
+ color: #101010;
+ font-weight: 500;
+ &:after{
+ background: url(../../public/static/images/canvas/arr_btn_ico_black.svg)no-repeat center;
+ }
+ }
+ }
+ &.dark{
+ text-align: center;
+ background-color: #272727;
+ border: 1px solid #484848;
+ span{
+ color: #Fff;
+ &:after{
+ background: url(../../public/static/images/canvas/arr_btn_ico_white.svg)no-repeat center;
+ }
+ }
+ &:hover,
+ &.act{
+ background-color: #1083E3;
+ border: 1px solid #1083E3;
+ }
}
- }
}
// radio
.d-check-radio,
-.d-check-box {
- line-height: 1.1;
- cursor: pointer;
-
- input[type=checkbox],
- input[type=radio] {
- position: static;
- margin-left: 0;
+.d-check-box{
+ line-height: 1.1;
cursor: pointer;
- opacity: 0;
- z-index: 1;
- flex: 0 0 auto;
- }
-
- label {
- position: relative;
- padding-left: 10px;
- margin-bottom: 0;
- word-break: break-all;
- line-height: 1.2;
- display: inline;
- vertical-align: top;
- color: #fff;
- font-size: 13px;
- font-weight: 400;
- cursor: pointer;
- }
-
- &.light {
- label {
- color: #45576F;
+ input[type=checkbox],
+ input[type=radio]{
+ position: static;
+ margin-left: 0;
+ cursor: pointer;
+ opacity: 0;
+ z-index: 1;
+ flex: 0 0 auto;
}
- }
-
- &.no-text {
- label {
- padding-left: 0;
+ label{
+ position: relative;
+ padding-left: 10px;
+ margin-bottom: 0;
+ word-break: break-all;
+ line-height: 1.2;
+ display: inline;
+ vertical-align: top;
+ color: #fff;
+ font-size: 13px;
+ font-weight: 400;
+ cursor: pointer;
+ }
+ &.light{
+ label{
+ color: #45576F;
+ }
+ }
+ &.no-text{
+ label{
+ padding-left: 0;
+ }
}
- }
}
.d-check-radio {
- label {
- &::before {
- cursor: pointer;
- content: "";
- display: inline-block;
- position: absolute;
- width: 17px;
- height: 17px;
- top: 2px;
- left: 0;
- margin-left: -12px;
- border: 1px solid #999999;
- border-radius: 100%;
- background-color: transparent;
- text-align: center;
- font-size: 13px;
- line-height: 1.4;
- transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
+ label{
+ &::before{
+ cursor: pointer;
+ content: "";
+ display: inline-block;
+ position: absolute;
+ width: 17px;
+ height: 17px;
+ top:2px;
+ left: 0;
+ margin-left: -12px;
+ border: 1px solid #999999;
+ border-radius: 100%;
+ background-color: transparent;
+ text-align:center;
+ font-size:13px;
+ line-height:1.4;
+ transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
+ }
+ &::after{
+ cursor: pointer;
+ content: "";
+ display: inline-block;
+ position: absolute;
+ width: 9px;
+ height: 9px;
+ top:6px;
+ left: 4px;
+ margin-left: -12px;
+ border: none;
+ border-radius: 100%;
+ background-color: #fff;
+ text-align:center;
+ font-size:13px;
+ line-height:1.4;
+ opacity: 0;
+ visibility: hidden;
+ transition: opacity 0.15s ease-in-out, color 0.15s ease-in-out;
+ }
}
-
- &::after {
- cursor: pointer;
- content: "";
- display: inline-block;
- position: absolute;
- width: 9px;
- height: 9px;
- top: 6px;
- left: 4px;
- margin-left: -12px;
- border: none;
- border-radius: 100%;
- background-color: #fff;
- text-align: center;
- font-size: 13px;
- line-height: 1.4;
- opacity: 0;
- visibility: hidden;
- transition: opacity 0.15s ease-in-out, color 0.15s ease-in-out;
+ &.light{
+ label{
+ &:before{
+ border-color: #D6D6D7;
+ }
+ &:after{
+ background-color: #697C8F;
+ }
+ }
}
- }
-
- &.light {
- label {
- &:before {
- border-color: #D6D6D7;
- }
-
- &:after {
- background-color: #697C8F;
- }
+ input[type=radio]:checked + label::after{
+ opacity: 1;
+ visibility: visible;
}
- }
-
- input[type=radio]:checked + label::after {
- opacity: 1;
- visibility: visible;
- }
-
- &.pop {
- label {
- &:before {
- border-color: #fff;
- }
-
- &:after {
- background-color: #fff;
- }
+ &.pop{
+ label{
+ &:before{
+ width: 16px;
+ height: 16px;
+ border-color: #fff;
+ }
+ &:after{
+ width: 8px;
+ height: 8px;
+ background-color: #fff;
+ }
+ }
}
- }
}
// check-box
-.d-check-box {
- label {
- &::before {
- cursor: pointer;
- content: "";
- display: inline-block;
- position: absolute;
- width: 17px;
- height: 17px;
- top: 2px;
- left: 0;
- margin-left: -12px;
- border: 1px solid #D6D6D7;
- background-color: transparent;
- transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
+.d-check-box{
+ label{
+ &::before{
+ cursor: pointer;
+ content: "";
+ display: inline-block;
+ position: absolute;
+ width: 17px;
+ height: 17px;
+ top: 2px;
+ left: 0;
+ margin-left: -12px;
+ border: 1px solid #D6D6D7;
+ background-color: transparent;
+ transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
+ }
+ &:after{
+ cursor: pointer;
+ content: "";
+ display: inline-block;
+ position: absolute;
+ width: 16px;
+ height: 16px;
+ top:0;
+ left: 0;
+ margin-left: -.8rem;
+ transition: border 0.05s ease-in-out, color 0.05s ease-in-out;
+ }
}
-
- &:after {
- cursor: pointer;
- content: "";
- display: inline-block;
- position: absolute;
- width: 16px;
- height: 16px;
- top: 0;
- left: 0;
- margin-left: -.8rem;
- transition: border 0.05s ease-in-out, color 0.05s ease-in-out;
+ input[type=checkbox]:checked + label::after{
+ content: "";
+ display: inline-block;
+ position: absolute;
+ top: 1px;
+ left: -1px;
+ width: 5px;
+ height: 8px;
+ border: 2px solid #697C8F;
+ border-left: none;
+ border-top: none;
+ transform: translate(7.75px,4.5px) rotate(45deg);
+ -ms-transform: translate(7.75px,4.5px) rotate(45deg);
}
- }
-
- input[type=checkbox]:checked + label::after {
- content: "";
- display: inline-block;
- position: absolute;
- top: 1px;
- left: -1px;
- width: 5px;
- height: 8px;
- border: 2px solid #697C8F;
- border-left: none;
- border-top: none;
- transform: translate(7.75px, 4.5px) rotate(45deg);
- -ms-transform: translate(7.75px, 4.5px) rotate(45deg);
- }
-
- &.pop {
- input[type=checkbox]:checked + label::after {
- border-color: #fff;
+ &.pop{
+ input[type=checkbox]:checked + label::after{
+ border-color: #fff;
+ }
}
- }
}
// date-picker
-.date-picker {
- svg {
- display: none;
- }
-
- .react-datepicker-wrapper {
- width: 100%;
- }
-
- input[type=text] {
- display: block;
- width: 100%;
- height: 30px;
- padding: 0 34px 0 10px;
- border-radius: 2px;
- border: 1px solid #eee;
- font-size: 13px;
- color: #45576F;
- font-weight: normal;
- font-family: 'Noto Sans JP', sans-serif;
- background: #fff url(../../public/static/images/common/datepicker.svg) calc(100% - 11px) center no-repeat;
- background-size: 14px 15px;
- cursor: pointer;
- }
+.date-picker{
+ svg{display: none;}
+ .react-datepicker-wrapper{
+ width: 100%;
+ }
+ input[type=text]{
+ display: block;
+ width: 100%;
+ height: 30px;
+ padding: 0 34px 0 10px;
+ border-radius: 2px;
+ border: 1px solid #eee;
+ font-size: 13px;
+ color: #45576F;
+ font-weight: normal;
+ font-family: 'Noto Sans JP', sans-serif;
+ background: #fff url(../../public/static/images/common/datepicker.svg) calc(100% - 11px) center no-repeat;
+ background-size: 14px 15px;
+ cursor: pointer;
+ }
}
\ No newline at end of file
diff --git a/src/styles/_table.scss b/src/styles/_table.scss
new file mode 100644
index 00000000..d3c207a7
--- /dev/null
+++ b/src/styles/_table.scss
@@ -0,0 +1,177 @@
+@mixin flexbox(){
+ display: flex;
+ align-items: center;
+}
+
+table{
+ .overflow-lab{
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ }
+ .al-l{
+ text-align: left !important;
+ }
+}
+
+.common-table{
+ table{
+ table-layout: fixed;
+ border: 1px solid #ECF0F4;
+ border-radius: 3px;
+ border-collapse:collapse;
+ tbody{
+ th{
+ font-size: 13px;
+ font-weight: 500;
+ color: #344356;
+ padding: 14px 12px;
+ border: 1px solid #ECF0F4 ;
+ background-color: #F7F9FA;
+ vertical-align: middle;
+ }
+ td{
+ padding: 9px;
+ border: 1px solid #ECF0F4 ;
+ font-size: 13px;
+ font-weight: 400;
+ color: #45576F;
+ vertical-align: middle;
+ .radio-wrap{
+ flex: none;
+ @include flexbox;
+ }
+ .form-flex-wrap{
+ @include flexbox;
+ }
+ .date-picker-wrap{
+ width: 100%;
+ @include flexbox;
+ span{
+ margin: 0 4px;
+ }
+ }
+ }
+ }
+ }
+ &.bt-able{
+ margin-bottom: 30px;
+ }
+}
+
+.infomation-table{
+ table{
+ border-top: 1px solid #DEE3EA;
+ border-bottom: 1px solid #DEE3EA;
+ border-collapse:collapse;
+ tbody{
+ tr{
+ th{
+ font-size: 13px;
+ color: #344356;
+ font-weight: 500;
+ padding: 18px 0;
+ border-bottom: 1px solid #F4F4F7;
+ .title{
+ margin-right: 8px;
+ }
+ }
+ td{
+ padding: 0 0 0 15px;
+ border-bottom: 1px solid #F4F4F7;
+
+ .guide{
+ font-size: 13px;
+ color: #697C8F;
+ font-weight: normal;
+ margin-left: 15px;
+ }
+ span{
+ font-size: 13px;
+ color: #697C8F;
+ font-weight: normal;
+ }
+ }
+ &:last-child{
+ th,td{border-bottom: none;}
+ }
+ }
+ }
+ .flx-box{
+ @include flexbox;
+ }
+ }
+ .tooltips{
+ display: block;
+ width: 14px;
+ height: 14px;
+ display: inline-block;
+ background: url(../../public/static/images/sub/tooltips.svg)no-repeat center;
+ background-size: cover;
+ cursor: pointer;
+ }
+}
+
+.module-table{
+ table{
+ table-layout: fixed;
+ border-collapse: collapse;
+ thead{
+ display: table;
+ table-layout: fixed;
+ width: 100%;
+ th{
+ padding: 13px 0;
+ font-size: 13px;
+ color: #344356;
+ font-weight: 500;
+ border-bottom: 2px solid #E0E5EB;
+ text-align: center;
+ }
+ }
+ tbody{
+ display: block;
+ overflow-y: auto;
+ tr{
+ display: table;
+ table-layout: fixed;
+ width: 100%;
+ border: 1px solid #ECF0F4;
+ td{
+ padding: 10px 0px;
+ font-size: 13px;
+ color: #45576F;
+ font-weight: 400;
+ text-align: center;
+ }
+ }
+ &::-webkit-scrollbar {
+ width: 4px;
+ background-color: transparent;
+ }
+ &::-webkit-scrollbar-thumb {
+ background-color: #C1CCD7;
+ }
+ &::-webkit-scrollbar-track {
+ background-color: transparent;
+ }
+ }
+ &.small{
+ tbody{height: 120px;}
+ }
+ &.big{
+ td,
+ th{
+ &:nth-child(2){
+ width: 121px;
+ }
+ }
+ tbody{
+ height: 160px;
+ td{
+ padding: 10px 20px;
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/styles/_test.scss b/src/styles/_test.scss
index 9e542bbd..e84a5eda 100644
--- a/src/styles/_test.scss
+++ b/src/styles/_test.scss
@@ -1,5 +1,8 @@
.test {
- background-color: #121212;
+ background-color: #797979;
+ font: 30px sans-serif;
+ font-style: italic;
+ color: white;
}
.grid-container2 {
@@ -79,9 +82,3 @@
background-color: white;
color: black;
}
-
-.centered {
- .ag-header-cell-label {
- justify-content: center !important;
- }
-}
diff --git a/src/styles/contents.scss b/src/styles/contents.scss
index 90dfa532..3e82124a 100644
--- a/src/styles/contents.scss
+++ b/src/styles/contents.scss
@@ -1,2 +1,3 @@
@import '_contents.scss';
-@import '_modal.scss';
\ No newline at end of file
+@import '_modal.scss';
+@import '_table.scss';
\ No newline at end of file
diff --git a/src/styles/grid.scss b/src/styles/grid.scss
new file mode 100644
index 00000000..71f42715
--- /dev/null
+++ b/src/styles/grid.scss
@@ -0,0 +1,2 @@
+@import '_grid-detail.scss';
+@import '_pagination.scss';
\ No newline at end of file
diff --git a/src/styles/publishpage.scss b/src/styles/publishpage.scss
new file mode 100644
index 00000000..941b29de
--- /dev/null
+++ b/src/styles/publishpage.scss
@@ -0,0 +1,49 @@
+
+html, body ,h1,div{ margin: 0; padding: 0; }
+ul, li {padding: 0; margin: 0; list-style: none; }
+body, td { line-height: normal;font-style: normal; font-variant: normal; font-size: 12px; color: #6b6b6b; }
+table { margin-bottom: 150px; border-collapse: collapse; border-spacing: 0; }
+#g_header h1 { height: 60px; line-height: 60px; padding-left: 28px; margin-top: 0; color: #fff; background: #424242;font-size: 24px; font-family:'Pretendard', 돋움, Sans-Serif;}
+#g_body { padding: 0 30px; }
+.guide_table { width: 100%;border-top:1px solid #424242;table-layout: auto;}
+.guide_table thead th { background: #f1f1f1; text-align: center; padding:20px 3px;border:1px solid #dadada;border-top:1px solid #424242;font-size:15px;font-weight: 600; font-family:'Pretendard', 돋움, Sans-Serif;}
+.guide_table tbody td { padding:12px 3px; vertical-align: middle; border: solid 1px #dadada;text-align:left;font-size:13px; font-family:'Pretendard', 돋움, Sans-Serif;}
+.t-center{text-align:center!important;}
+.contents h3{font-size: 16px; margin: 10px 0;}
+.red { color: #ff0000;}
+.blues { color: #001aff;}
+.guide_table tbody td a{color: #001aff; text-decoration: underline; font-size: 12px;}
+.design_summary_web,
+.design_summary_tab,
+.design_summary_mob { display: inline-block; color: rosybrown; font-weight: bold; font-size: 12px; margin-right: 30px; }
+.coding_summary_web,
+.coding_summary_tab,
+.coding_summary_mob { display: inline-block; color: red; font-weight: bold; font-size: 12px; margin-right: 30px; }
+.dev_summary { display: inline-block; color: green; font-weight: bold; font-size: 12px; margin-right: 30px; }
+.coding_stat_web,
+.coding_stat_tab,
+.coding_stat_mob { background: #ffffff;color:#333;text-align:center!important;}
+.coding_stat_web.final,
+.coding_stat_tab.final,
+.coding_stat_mob.final { background: rgb(255, 116, 98);color:rgb(255, 255, 255);text-align:center!important;}
+.dev_stat_web,
+.dev_stat_web,
+.dev_stat_web { background: rosybrown; color: #fff; }
+.bg_gray { background: #f0f0f0; }
+.tab_li > li { float: left; width: 90px; height: 30px; line-height: 30px; text-align: center; background: #424242; color: #fff; margin-right: 5px; margin-bottom: 5px; }
+.tab_li > li > a { color: #fff; text-decoration: none; display: block; }
+.tab_li > li.on { font-weight: bold; text-decoration: underline; font-size: 16px; }
+td strong {font-size:12px;font-weight:600; color: rgb(0, 0, 0); }
+td strong.title { color: #000; }
+.auto-style1 { height: 20px; }
+.auto-style2 { background: #ddffca; height: 20px; }
+.mt-9{margin-bottom:9px;}
+.exple{margin:10px 0;font-size:18px;}
+.exple span{font-weight:600;}
+.mb10{margin-bottom:5px;}
+.mt10{margin-top:10px;}
+@media (max-width:640px){
+ .guide_table thead tr th:nth-of-type(3){display:none;}
+ .guide_table tbody tr td.coding_stat_web{display:none;}
+ .guide_table col:nth-of-type(3){display:none;}
+}
\ No newline at end of file
diff --git a/src/styles/style.scss b/src/styles/style.scss
index 58e97925..1841ebb9 100644
--- a/src/styles/style.scss
+++ b/src/styles/style.scss
@@ -1,2 +1 @@
-@import '_main.scss';
-@import 'react-toastify/dist/ReactToastify.css';
\ No newline at end of file
+@import '_main.scss';
\ No newline at end of file