Commit @027bf12c0c2ce574666fb25eb09e70938f932cb5

최정임 04-09

250409 최정임 메인 슬라이드 css수정

@027bf12c0c2ce574666fb25eb09e70938f932cb5

3a129d5

027bf12

client/resources/css/common/common.css

--- client/resources/css/common/common.css

+++ client/resources/css/common/common.css


 .w1500{width: 1500px; margin: 0 auto;}
 .wfull{width: -webkit-fill-available;}
 
+
+@media screen and (max-width: 1500px) {
+    .w1500{width: auto; }
+  }
 .flex{display: flex;}
 .align-center{align-items: center;}
 .flex-end{

3a129d5

027bf12

client/resources/css/user/layout.css

--- client/resources/css/user/layout.css

+++ client/resources/css/user/layout.css


         }
     }
 }
-
+@media screen and (max-width: 1500px) {
+    .header-container{width: auto; }
+  }
 footer {
+    width: 100%;
     background-color: #333;
     border-top-left-radius: 50px;
     border-top-right-radius: 50px;

3a129d5

027bf12

client/resources/css/user/main.css

--- client/resources/css/user/main.css

+++ client/resources/css/user/main.css


     align-items: center;
     z-index: 9999;
 }
-.all-menu{
+
+.all-menu {
     position: absolute;
     top: 0;
     left: 0;

     background-color: #fff;
     width: 100%;
     height: 420px;
-    button.closebtn{
+
+    button.closebtn {
         position: absolute;
         top: 40px;
         right: 38px;
 
     }
+
     nav {
         position: absolute;
         top: 80px;
         right: 210px;
+
         &>ul {
             display: flex;
             gap: 40px;
         }
 
         &>ul>li {
-            
+
             z-index: 2;
             width: 270px;
             height: 237px;

             border-radius: 30px;
             background-color: #fbf3f4;
             position: relative;
-            h6{
+
+            h6 {
                 font-size: 24px;
                 text-align: center;
                 line-height: 70px;
                 width: 270px;
                 height: 70px;
-                background-image: linear-gradient(#fff, #fff), 
-                linear-gradient(-45deg, #ca3e49, #3d355d);
+                background-image: linear-gradient(#fff, #fff),
+                    linear-gradient(-45deg, #ca3e49, #3d355d);
                 background-origin: border-box;
                 background-clip: content-box, border-box;
                 border: 3px solid transparent;
                 border-radius: 15px;
                 font-family: "Pretendard-SB";
             }
-        
+
         }
     }
 
     .submenu {
-       padding: 40px 30px;
-    
+        padding: 40px 30px;
+
 
         p {
             position: relative;
             padding-left: 10px;
             font-size: 20px;
             color: #c23d4a;
+
             a {
                 display: contents;
                 font-family: "Pretendard-M";
             }
         }
 
-        p:hover a{
+        p:hover a {
             color: #c23d4a;
             font-family: "Pretendard-B";
-            
+
         }
-        p:hover a::after{
+
+        p:hover a::after {
             content: '';
             background-image: url(../../images/hover.png);
             background-repeat: no-repeat;

             right: 10px;
         }
     }
-    
+
 
 
 }
 
-.visual{
+.visual {
     position: relative;
-    .swiper-play-pause-btn{
+
+    .swiper-play-pause-btn {
         color: #fff;
         font-size: 20px;
-        position: absolute;
-        bottom: 10.5rem;
-        right: 64rem;
-        z-index: 50;
         display: flex;
-        .page-count{color: #fff;}
-        button .anticon {
-            font-size: 20px;  color: #fff;
-            svg{
-                color: #fff;
-                path{color: #fff;}
-            }
-            
+
+        .page-count {
+            color: #fff;
         }
-        .anticon svg path{color: #fff;}
+
+        button .anticon {
+            font-size: 20px;
+            color: #fff;
+
+            svg {
+                color: #fff;
+
+                path {
+                    color: #fff;
+                }
+            }
+
+        }
+
+        .anticon svg path {
+            color: #fff;
+            font-weight: bold;
+        }
     }
-    select{
+
+    select {
         border: 0;
         font-size: 20px;
         font-family: "Pretendard-L";
         color: #555;
-        appearance: none; 
+        appearance: none;
         background-image: url(../../images/icon/select.png);
         background-repeat: no-repeat;
         background-position: right 0px center;
         background-size: 17px;
-        option{
-           
-        font-family: "Pretendard-L";
+
+        option {
+
+            font-family: "Pretendard-L";
         }
-       }
+    }
 }
 
-.search-wrap{
+.search-wrap {
     position: absolute;
     bottom: 174px;
     left: 50%;

     z-index: 10;
     display: flex;
     gap: 20px;
-    .search-area{
+
+    .search-area {
         padding-left: 40px;
         display: flex;
         align-items: center;

         height: 76px;
         border-radius: 38px;
         position: relative;
-        .search-btn{
+
+        .search-btn {
             position: absolute;
             right: 0;
             top: 0;
         }
     }
-    .line{
+
+    .line {
         width: 2px;
         height: 20px;
         background-color: #cccccc;
     }
-    input{font-size: 20px; font-family: "Pretendard-L";}
-    input::placeholder{color: #555;}
-    .total-btn{        
+
+    input {
+        font-size: 20px;
+        font-family: "Pretendard-L";
+    }
+
+    input::placeholder {
+        color: #555;
+    }
+
+    .total-btn {
         border-radius: 37.5px;
         width: 150px;
         height: 75px;
-        background: linear-gradient(-45deg,#1865c8, #4037aa );
-        
+        background: linear-gradient(-45deg, #1865c8, #4037aa);
+
         font-family: "Pretendard-B";
         color: #fff;
         font-size: 20px;
-        
+
     }
 
 }
 
-.current-status{
+.current-status {
     background-color: #f6f6f6;
     padding: 30px 0;
-    .board{
+
+    .board {
         position: relative;
-        padding: 49px 0px; 
+        padding: 49px 0px;
         background-color: #fff;
         border-radius: 50px;
-        ul{display: flex; gap: 37px;  
+
+        ul {
+            display: flex;
+            gap: 37px;
             margin-right: 37px;
-            justify-content: end;}
+            justify-content: end;
+        }
+
         li {
             cursor: pointer;
-            .labeling{
+
+            .labeling {
                 display: flex;
-            align-self: center;
-            justify-content: center;
-            margin-bottom: 14px;
+                align-self: center;
+                justify-content: center;
+                margin-bottom: 14px;
             }
-            .count{
+
+            .count {
                 font-family: "Pretendard-EB";
                 font-size: 32px;
                 background-color: #f6f6f6;

                 line-height: 70px;
                 text-align: center;
             }
-            
+
         }
-        li:hover .count{background-color: #fbefef;
-            color: #dd1b1b;}
-       .line{width: 2px; height: 110px; background-color: #eeeeee;}
-        span{font-size: 22px; font-family: "Pretendard-SB";}
-        img{margin-right: 10px; object-fit: contain;}
+
+        li:hover .count {
+            background-color: #fbefef;
+            color: #dd1b1b;
+        }
+
+        .line {
+            width: 2px;
+            height: 110px;
+            background-color: #eeeeee;
+        }
+
+        span {
+            font-size: 22px;
+            font-family: "Pretendard-SB";
+        }
+
+        img {
+            margin-right: 10px;
+            object-fit: contain;
+        }
     }
+
     .current-banner {
         background-image: url(../../images/direct-btn-bg.png);
-            background-repeat: no-repeat;
+        background-repeat: no-repeat;
+        position: absolute;
+        width: 375px;
+        height: 247px;
+        top: 0;
+
+        div {
             position: absolute;
-            width: 375px;
-            height: 247px;
-            top: 0;
-            div{
-                position: absolute;
-                top: 40px;
-                left: 60px;
+            top: 40px;
+            left: 60px;
             display: flex;
             align-items: center;
             gap: 40px;
-            span{
+
+            span {
                 font-family: "MIWON";
                 font-size: 30px;
                 color: #fff;
             }
-            }
-            
+        }
+
     }
 }
-.new-update{
-    .tabs{
-        ul{display: flex;
+
+.new-update {
+    .tabs {
+        ul {
+            display: flex;
             justify-content: center;
-         li:first-child::after{
-            content: ''; width: 3px; height: 30px; background-color: rgba(173, 176, 177, 0.2);
-            margin: 0 38px 0 25px;
-            
+
+            li:first-child::after {
+                content: '';
+                width: 3px;
+                height: 30px;
+                background-color: rgba(173, 176, 177, 0.2);
+                margin: 0 38px 0 25px;
+
+            }
         }
-        }
-        .tab-title{
+
+        .tab-title {
             display: flex;
             align-items: center;
             gap: 13px;
-            p{
+
+            p {
                 cursor: pointer;
                 font-family: "HAPPINESS-SANS-REGULAR";
                 color: #cccccc;
                 font-size: 26px;
-                b{
+
+                b {
                     color: #cccccc;
                 }
             }
-           
+
         }
-        .tab-title.active p{
+
+        .tab-title.active p {
             color: #000;
-            b{
+
+            b {
                 color: #ff4141;
             }
-            
+
         }
-        .tab-content{
-            .content-wrap{
+
+        .tab-content {
+            .content-wrap {
                 margin-top: -23px;
             }
-            .box-wrap{
+
+            .box-wrap {
                 width: 454px;
                 height: 370px;
-                .box { 
-                    background-image: linear-gradient(#fff, #fff), 
-                    linear-gradient(-45deg, #fff, #fff);
+
+                .box {
+                    background-image: linear-gradient(#fff, #fff),
+                        linear-gradient(-45deg, #fff, #fff);
                     background-origin: border-box;
                     background-clip: content-box, border-box;
                     border: 3px solid transparent;
                     border-radius: 32px;
                 }
-            
+
                 .box:hover {
-                    background-image: linear-gradient(#fff, #fff), 
-                    linear-gradient(-45deg, #ca3e49, #3d355d);
+                    background-image: linear-gradient(#fff, #fff),
+                        linear-gradient(-45deg, #ca3e49, #3d355d);
                 }
-                .tab-image{
+
+                .tab-image {
                     width: 100%;
                     height: 100%;
                     object-fit: cover;
                     border-radius: 30px;
                 }
-                .img-area{height: 297px;}
-               
+
+                .img-area {
+                    height: 297px;
+                }
+
             }
-            
+
         }
-    
+
     }
-    .title{
+
+    .title {
         display: flex;
         align-items: flex-end;
         justify-content: space-between;
-        h4{font-family: "HAPPINESS-SANS-title";; font-size: 26px;}
+
+        h4 {
+            font-family: "HAPPINESS-SANS-title";
+            ;
+            font-size: 26px;
+        }
     }
 
-    .info{
+    .info {
         padding: 24px;
         display: flex;
         justify-content: space-between;
-        p{
+
+        p {
             width: 250px;
             font-family: "Pretendard-M";
             font-size: 20px;
-            white-space: nowrap;      
-            overflow: hidden; 
-            text-overflow: ellipsis; 
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
         }
-        span{
+
+        span {
             width: 115px;
             font-family: "Pretendard-L";
             font-size: 16px;

             padding-left: 25px;
             position: relative;
         }
-        span::before{
+
+        span::before {
             content: '';
             background-image: url(../../images/icon/date.png);
             display: block;

             left: 0;
         }
     }
-    .gopage{
+
+    .gopage {
         font-family: "Pretendard-M";
         font-size: 18px;
         text-align: right;
-        
+
     }
-    .gopage::after{
+
+    .gopage::after {
         content: '\002B';
         font-size: 18px;
     }
-   .new-pic, .new-video{
-    display: flex; justify-content: space-between;
-    margin-top: 50px;
-    
-   }
-   .media-wrap{
-    display: flex;
-    justify-content: space-between;
-    gap: 30px;
-   }
-   .media-box{
-    width: 420px;
-    border: 1px solid #eeeeee;
-    border-radius: 22px;
-    .img-area{height: 231px;}
-    .media-image{
-        width: 100%;
-        height: 100%;
-        border-radius: 22px;
+
+    .new-pic,
+    .new-video {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 50px;
+
     }
-   }
-   .new-bodo{
-    width: 560px;
-    margin-left: 70px;
-    .info{
-        padding: 18px 7px;
-        border-top: 1px solid #eeeeee;
-        align-items: center;
-        &:last-child{ border-bottom: 1px solid #eeeeee;}
-        p{width: 412px;}
-        span::before{
-            background-image:none;
+
+    .media-wrap {
+        display: flex;
+        justify-content: space-between;
+        gap: 30px;
+    }
+
+    .media-box {
+        width: 420px;
+        border: 1px solid #eeeeee;
+        border-radius: 22px;
+
+        .img-area {
+            height: 231px;
+        }
+
+        .media-image {
+            width: 100%;
+            height: 100%;
+            border-radius: 22px;
         }
     }
-   }
+
+    .new-bodo {
+        width: 560px;
+        margin-left: 70px;
+
+        .info {
+            padding: 18px 7px;
+            border-top: 1px solid #eeeeee;
+            align-items: center;
+
+            &:last-child {
+                border-bottom: 1px solid #eeeeee;
+            }
+
+            p {
+                width: 412px;
+            }
+
+            span::before {
+                background-image: none;
+            }
+        }
+    }
 }
 
 

 /* swiper */
 
 .swiper {
-    width:1600px;
+    width: 1600px;
     height: 100%;
+}
+@media screen and (max-width: 1500px) {
+    .swiper{width: auto; }
+    .swiper-wrapper{width: auto !important;}
   }
-  .swiper-wrapper{
+.swiper-wrapper {
     width: 1500px !important;
     margin: 0 auto;
-  } 
-  .swiper-slide {
+}
+
+.swiper-slide {
     text-align: center;
     font-size: 18px;
     background: #fff;
-  
+
     /* Center slide text vertically */
     display: flex;
     justify-content: center;
     align-items: center;
-  }
-  
-  .swiper-slide img {
+}
+
+.swiper-slide img {
     display: block;
     height: 100%;
     object-fit: cover;
-  }
-.swiper-horizontal > .swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-horizontal{
-    width: 30rem !important;
-    top: 407px !important;
-    left: 556px !important;
 }
-.swiper-pagination-progressbar{
+
+.swiper-horizontal>.swiper-pagination-progressbar,
+.swiper-pagination-progressbar.swiper-pagination-horizontal {
+    width: 30rem !important;
+    position: initial;
+}
+
+.swiper-pagination-progressbar {
     background-color: #fff !important;
 }
-.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{
+
+.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
     background-color: #4557a4 !important;
 }
+
 .swiper-button-prev {
     background-image: url(../../images/prev-btn.png);
     width: 70px !important;

     box-shadow: 1px 2px 8px 1px rgba(0, 0, 0, 0.08);
 }
 
-.swiper-button-prev:after, .swiper-rtl .swiper-button-prev:after{
+.swiper-button-prev:after,
+.swiper-rtl .swiper-button-prev:after {
     content: '' !important;
 }
+
 .swiper-button-next {
     background-image: url(../../images/next-btn.png);
     width: 70px !important;

     box-shadow: 1px 2px 8px 1px rgba(0, 0, 0, 0.08);
 }
 
-.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after{
+.swiper-button-next:after,
+.swiper-rtl .swiper-button-prev:after {
     content: '' !important;
 }
-.slide-index{position: absolute !important; top: 400px !important; left: 814px !important; width: 22px !important; transform: none !important;
-    span{font-size: 20px; color: #fff;     font-family: "Pretendard-B"; }
+
+.slide-index {
+    position: absolute !important;
+    top: 400px !important;
+    left: 814px !important;
+    width: 22px !important;
+    transform: none !important;
+
+    span {
+        font-size: 20px;
+        color: #fff;
+        font-family: "Pretendard-B";
+    }
 }
-.swiper-pagination-fraction{position: absolute !important; top: 397px !important; left: 880px !important; z-index: 10; font-size: 20px; color: #fff !important;     font-family: "Pretendard-B";
-    span{font-size: 20px; color: #fff;     font-family: "Pretendard-B"; }
-}
+
+.swiper-pagination-fraction {
+    width: fit-content !important;
+    font-size: 20px;
+    color: #fff !important;
+    font-family: "Pretendard-B";
+    margin-right: 10px;
+    span {
+        font-size: 20px;
+        color: #fff;
+        font-family: "Pretendard-B";
+    }
+}
+
+.pagination_container{display: flex; align-items: center; gap: 25px; position: absolute; bottom: 107px; left: 50%; transform: translateX(-67%); z-index: 50;}

3a129d5

027bf12

client/resources/css/user/sub.css

--- client/resources/css/user/sub.css

+++ client/resources/css/user/sub.css


     width: 100%;
     height: 1px;
 }
+@media screen and (max-width: 1500px) {
+    .content{width: auto !important; }
+  }
 .content {
     width: 1500px;
     margin: 0 auto;
+    padding-bottom: 27rem;
     padding-top: 56px;
 
     h2 {

             width: 320px;
             height: 220px;
             border-radius: 24px;
+            flex-shrink: 0;
             img{
                 width: 100%;
                 height: 100%;

3a129d5

027bf12

client/views/pages/main/Main.vue

--- client/views/pages/main/Main.vue

+++ client/views/pages/main/Main.vue


       <div class="swiper-button-prev"></div>
       <div class="pagination_container">
         <div class="swiper-pagination"></div>
-        <div class="swiper-pagination2"></div>
+       <div class="flex align-center" >
+          <div class="swiper-pagination2"></div>
+          <button class="swiper-play-pause-btn" @click="toggleAutoplay"><component :is="isAutoplay ? 'PauseOutlined' : 'CaretRightOutlined'" /></button>
+       </div>
       </div>
-      <button class="swiper-play-pause-btn" @click="toggleAutoplay"><component :is="isAutoplay ? 'PauseOutlined' : 'CaretRightOutlined'" /></button>
     </div>
     <!-- <swiper ref="swiper" :loop="true" :spaceBetween="30" :centeredSlides="true" :autoplay="{
       delay: 2500,

Add a comment

Open 0
Closed 0

List

...	...	@@ -122,8 +122,11 @@
122	122	}
123	123	}
124	124	}
125		-
	125	+@media screen and (max-width: 1500px) {
	126	+ .header-container{width: auto; }
	127	+ }
126	128	footer {
	129	+ width: 100%;
127	130	background-color: #333;
128	131	border-top-left-radius: 50px;
129	132	border-top-right-radius: 50px;

...	...	@@ -28,6 +28,10 @@
28	28	.w1500{width: 1500px; margin: 0 auto;}
29	29	.wfull{width: -webkit-fill-available;}
30	30
	31	+
	32	+@media screen and (max-width: 1500px) {
	33	+ .w1500{width: auto; }
	34	+ }
31	35	.flex{display: flex;}
32	36	.align-center{align-items: center;}
33	37	.flex-end{

...	...	@@ -11,7 +11,8 @@
11	11	align-items: center;
12	12	z-index: 9999;
13	13	}
14		-.all-menu{
	14	+
	15	+.all-menu {
15	16	position: absolute;
16	17	top: 0;
17	18	left: 0;
...	...	@@ -20,23 +21,26 @@
20	21	background-color: #fff;
21	22	width: 100%;
22	23	height: 420px;
23		- button.closebtn{
	24	+
	25	+ button.closebtn {
24	26	position: absolute;
25	27	top: 40px;
26	28	right: 38px;
27	29
28	30	}
	31	+
29	32	nav {
30	33	position: absolute;
31	34	top: 80px;
32	35	right: 210px;
	36	+
33	37	&>ul {
34	38	display: flex;
35	39	gap: 40px;
36	40	}
37	41
38	42	&>ul>li {
39		-
	43	+
40	44	z-index: 2;
41	45	width: 270px;
42	46	height: 237px;
...	...	@@ -44,45 +48,48 @@
44	48	border-radius: 30px;
45	49	background-color: #fbf3f4;
46	50	position: relative;
47		- h6{
	51	+
	52	+ h6 {
48	53	font-size: 24px;
49	54	text-align: center;
50	55	line-height: 70px;
51	56	width: 270px;
52	57	height: 70px;
53		- background-image: linear-gradient(#fff, #fff),
54		- linear-gradient(-45deg, #ca3e49, #3d355d);
	58	+ background-image: linear-gradient(#fff, #fff),
	59	+ linear-gradient(-45deg, #ca3e49, #3d355d);
55	60	background-origin: border-box;
56	61	background-clip: content-box, border-box;
57	62	border: 3px solid transparent;
58	63	border-radius: 15px;
59	64	font-family: "Pretendard-SB";
60	65	}
61		-
	66	+
62	67	}
63	68	}
64	69
65	70	.submenu {
66		- padding: 40px 30px;
67		-
	71	+ padding: 40px 30px;
	72	+
68	73
69	74	p {
70	75	position: relative;
71	76	padding-left: 10px;
72	77	font-size: 20px;
73	78	color: #c23d4a;
	79	+
74	80	a {
75	81	display: contents;
76	82	font-family: "Pretendard-M";
77	83	}
78	84	}
79	85
80		- p:hover a{
	86	+ p:hover a {
81	87	color: #c23d4a;
82	88	font-family: "Pretendard-B";
83		-
	89	+
84	90	}
85		- p:hover a::after{
	91	+
	92	+ p:hover a::after {
86	93	content: '';
87	94	background-image: url(../../images/hover.png);
88	95	background-repeat: no-repeat;
...	...	@@ -92,50 +99,62 @@
92	99	right: 10px;
93	100	}
94	101	}
95		-
	102	+
96	103
97	104
98	105	}
99	106
100		-.visual{
	107	+.visual {
101	108	position: relative;
102		- .swiper-play-pause-btn{
	109	+
	110	+ .swiper-play-pause-btn {
103	111	color: #fff;
104	112	font-size: 20px;
105		- position: absolute;
106		- bottom: 10.5rem;
107		- right: 64rem;
108		- z-index: 50;
109	113	display: flex;
110		- .page-count{color: #fff;}
111		- button .anticon {
112		- font-size: 20px; color: #fff;
113		- svg{
114		- color: #fff;
115		- path{color: #fff;}
116		- }
117		-
	114	+
	115	+ .page-count {
	116	+ color: #fff;
118	117	}
119		- .anticon svg path{color: #fff;}
	118	+
	119	+ button .anticon {
	120	+ font-size: 20px;
	121	+ color: #fff;
	122	+
	123	+ svg {
	124	+ color: #fff;
	125	+
	126	+ path {
	127	+ color: #fff;
	128	+ }
	129	+ }
	130	+
	131	+ }
	132	+
	133	+ .anticon svg path {
	134	+ color: #fff;
	135	+ font-weight: bold;
	136	+ }
120	137	}
121		- select{
	138	+
	139	+ select {
122	140	border: 0;
123	141	font-size: 20px;
124	142	font-family: "Pretendard-L";
125	143	color: #555;
126		- appearance: none;
	144	+ appearance: none;
127	145	background-image: url(../../images/icon/select.png);
128	146	background-repeat: no-repeat;
129	147	background-position: right 0px center;
130	148	background-size: 17px;
131		- option{
132		-
133		- font-family: "Pretendard-L";
	149	+
	150	+ option {
	151	+
	152	+ font-family: "Pretendard-L";
134	153	}
135		- }
	154	+ }
136	155	}
137	156
138		-.search-wrap{
	157	+.search-wrap {
139	158	position: absolute;
140	159	bottom: 174px;
141	160	left: 50%;
...	...	@@ -143,7 +162,8 @@
143	162	z-index: 10;
144	163	display: flex;
145	164	gap: 20px;
146		- .search-area{
	165	+
	166	+ .search-area {
147	167	padding-left: 40px;
148	168	display: flex;
149	169	align-items: center;
...	...	@@ -153,53 +173,71 @@
153	173	height: 76px;
154	174	border-radius: 38px;
155	175	position: relative;
156		- .search-btn{
	176	+
	177	+ .search-btn {
157	178	position: absolute;
158	179	right: 0;
159	180	top: 0;
160	181	}
161	182	}
162		- .line{
	183	+
	184	+ .line {
163	185	width: 2px;
164	186	height: 20px;
165	187	background-color: #cccccc;
166	188	}
167		- input{font-size: 20px; font-family: "Pretendard-L";}
168		- input::placeholder{color: #555;}
169		- .total-btn{
	189	+
	190	+ input {
	191	+ font-size: 20px;
	192	+ font-family: "Pretendard-L";
	193	+ }
	194	+
	195	+ input::placeholder {
	196	+ color: #555;
	197	+ }
	198	+
	199	+ .total-btn {
170	200	border-radius: 37.5px;
171	201	width: 150px;
172	202	height: 75px;
173		- background: linear-gradient(-45deg,#1865c8, #4037aa );
174		-
	203	+ background: linear-gradient(-45deg, #1865c8, #4037aa);
	204	+
175	205	font-family: "Pretendard-B";
176	206	color: #fff;
177	207	font-size: 20px;
178		-
	208	+
179	209	}
180	210
181	211	}
182	212
183		-.current-status{
	213	+.current-status {
184	214	background-color: #f6f6f6;
185	215	padding: 30px 0;
186		- .board{
	216	+
	217	+ .board {
187	218	position: relative;
188		- padding: 49px 0px;
	219	+ padding: 49px 0px;
189	220	background-color: #fff;
190	221	border-radius: 50px;
191		- ul{display: flex; gap: 37px;
	222	+
	223	+ ul {
	224	+ display: flex;
	225	+ gap: 37px;
192	226	margin-right: 37px;
193		- justify-content: end;}
	227	+ justify-content: end;
	228	+ }
	229	+
194	230	li {
195	231	cursor: pointer;
196		- .labeling{
	232	+
	233	+ .labeling {
197	234	display: flex;
198		- align-self: center;
199		- justify-content: center;
200		- margin-bottom: 14px;
	235	+ align-self: center;
	236	+ justify-content: center;
	237	+ margin-bottom: 14px;
201	238	}
202		- .count{
	239	+
	240	+ .count {
203	241	font-family: "Pretendard-EB";
204	242	font-size: 32px;
205	243	background-color: #f6f6f6;
...	...	@@ -209,122 +247,167 @@
209	247	line-height: 70px;
210	248	text-align: center;
211	249	}
212		-
	250	+
213	251	}
214		- li:hover .count{background-color: #fbefef;
215		- color: #dd1b1b;}
216		- .line{width: 2px; height: 110px; background-color: #eeeeee;}
217		- span{font-size: 22px; font-family: "Pretendard-SB";}
218		- img{margin-right: 10px; object-fit: contain;}
	252	+
	253	+ li:hover .count {
	254	+ background-color: #fbefef;
	255	+ color: #dd1b1b;
	256	+ }
	257	+
	258	+ .line {
	259	+ width: 2px;
	260	+ height: 110px;
	261	+ background-color: #eeeeee;
	262	+ }
	263	+
	264	+ span {
	265	+ font-size: 22px;
	266	+ font-family: "Pretendard-SB";
	267	+ }
	268	+
	269	+ img {
	270	+ margin-right: 10px;
	271	+ object-fit: contain;
	272	+ }
219	273	}
	274	+
220	275	.current-banner {
221	276	background-image: url(../../images/direct-btn-bg.png);
222		- background-repeat: no-repeat;
	277	+ background-repeat: no-repeat;
	278	+ position: absolute;
	279	+ width: 375px;
	280	+ height: 247px;
	281	+ top: 0;
	282	+
	283	+ div {
223	284	position: absolute;
224		- width: 375px;
225		- height: 247px;
226		- top: 0;
227		- div{
228		- position: absolute;
229		- top: 40px;
230		- left: 60px;
	285	+ top: 40px;
	286	+ left: 60px;
231	287	display: flex;
232	288	align-items: center;
233	289	gap: 40px;
234		- span{
	290	+
	291	+ span {
235	292	font-family: "MIWON";
236	293	font-size: 30px;
237	294	color: #fff;
238	295	}
239		- }
240		-
	296	+ }
	297	+
241	298	}
242	299	}
243		-.new-update{
244		- .tabs{
245		- ul{display: flex;
	300	+
	301	+.new-update {
	302	+ .tabs {
	303	+ ul {
	304	+ display: flex;
246	305	justify-content: center;
247		- li:first-child::after{
248		- content: ''; width: 3px; height: 30px; background-color: rgba(173, 176, 177, 0.2);
249		- margin: 0 38px 0 25px;
250		-
	306	+
	307	+ li:first-child::after {
	308	+ content: '';
	309	+ width: 3px;
	310	+ height: 30px;
	311	+ background-color: rgba(173, 176, 177, 0.2);
	312	+ margin: 0 38px 0 25px;
	313	+
	314	+ }
251	315	}
252		- }
253		- .tab-title{
	316	+
	317	+ .tab-title {
254	318	display: flex;
255	319	align-items: center;
256	320	gap: 13px;
257		- p{
	321	+
	322	+ p {
258	323	cursor: pointer;
259	324	font-family: "HAPPINESS-SANS-REGULAR";
260	325	color: #cccccc;
261	326	font-size: 26px;
262		- b{
	327	+
	328	+ b {
263	329	color: #cccccc;
264	330	}
265	331	}
266		-
	332	+
267	333	}
268		- .tab-title.active p{
	334	+
	335	+ .tab-title.active p {
269	336	color: #000;
270		- b{
	337	+
	338	+ b {
271	339	color: #ff4141;
272	340	}
273		-
	341	+
274	342	}
275		- .tab-content{
276		- .content-wrap{
	343	+
	344	+ .tab-content {
	345	+ .content-wrap {
277	346	margin-top: -23px;
278	347	}
279		- .box-wrap{
	348	+
	349	+ .box-wrap {
280	350	width: 454px;
281	351	height: 370px;
282		- .box {
283		- background-image: linear-gradient(#fff, #fff),
284		- linear-gradient(-45deg, #fff, #fff);
	352	+
	353	+ .box {
	354	+ background-image: linear-gradient(#fff, #fff),
	355	+ linear-gradient(-45deg, #fff, #fff);
285	356	background-origin: border-box;
286	357	background-clip: content-box, border-box;
287	358	border: 3px solid transparent;
288	359	border-radius: 32px;
289	360	}
290		-
	361	+
291	362	.box:hover {
292		- background-image: linear-gradient(#fff, #fff),
293		- linear-gradient(-45deg, #ca3e49, #3d355d);
	363	+ background-image: linear-gradient(#fff, #fff),
	364	+ linear-gradient(-45deg, #ca3e49, #3d355d);
294	365	}
295		- .tab-image{
	366	+
	367	+ .tab-image {
296	368	width: 100%;
297	369	height: 100%;
298	370	object-fit: cover;
299	371	border-radius: 30px;
300	372	}
301		- .img-area{height: 297px;}
302		-
	373	+
	374	+ .img-area {
	375	+ height: 297px;
	376	+ }
	377	+
303	378	}
304		-
	379	+
305	380	}
306		-
	381	+
307	382	}
308		- .title{
	383	+
	384	+ .title {
309	385	display: flex;
310	386	align-items: flex-end;
311	387	justify-content: space-between;
312		- h4{font-family: "HAPPINESS-SANS-title";; font-size: 26px;}
	388	+
	389	+ h4 {
	390	+ font-family: "HAPPINESS-SANS-title";
	391	+ ;
	392	+ font-size: 26px;
	393	+ }
313	394	}
314	395
315		- .info{
	396	+ .info {
316	397	padding: 24px;
317	398	display: flex;
318	399	justify-content: space-between;
319		- p{
	400	+
	401	+ p {
320	402	width: 250px;
321	403	font-family: "Pretendard-M";
322	404	font-size: 20px;
323		- white-space: nowrap;
324		- overflow: hidden;
325		- text-overflow: ellipsis;
	405	+ white-space: nowrap;
	406	+ overflow: hidden;
	407	+ text-overflow: ellipsis;
326	408	}
327		- span{
	409	+
	410	+ span {
328	411	width: 115px;
329	412	font-family: "Pretendard-L";
330	413	font-size: 16px;
...	...	@@ -332,7 +415,8 @@
332	415	padding-left: 25px;
333	416	position: relative;
334	417	}
335		- span::before{
	418	+
	419	+ span::before {
336	420	content: '';
337	421	background-image: url(../../images/icon/date.png);
338	422	display: block;
...	...	@@ -342,51 +426,71 @@
342	426	left: 0;
343	427	}
344	428	}
345		- .gopage{
	429	+
	430	+ .gopage {
346	431	font-family: "Pretendard-M";
347	432	font-size: 18px;
348	433	text-align: right;
349		-
	434	+
350	435	}
351		- .gopage::after{
	436	+
	437	+ .gopage::after {
352	438	content: '\002B';
353	439	font-size: 18px;
354	440	}
355		- .new-pic, .new-video{
356		- display: flex; justify-content: space-between;
357		- margin-top: 50px;
358		-
359		- }
360		- .media-wrap{
361		- display: flex;
362		- justify-content: space-between;
363		- gap: 30px;
364		- }
365		- .media-box{
366		- width: 420px;
367		- border: 1px solid #eeeeee;
368		- border-radius: 22px;
369		- .img-area{height: 231px;}
370		- .media-image{
371		- width: 100%;
372		- height: 100%;
373		- border-radius: 22px;
	441	+
	442	+ .new-pic,
	443	+ .new-video {
	444	+ display: flex;
	445	+ justify-content: space-between;
	446	+ margin-top: 50px;
	447	+
374	448	}
375		- }
376		- .new-bodo{
377		- width: 560px;
378		- margin-left: 70px;
379		- .info{
380		- padding: 18px 7px;
381		- border-top: 1px solid #eeeeee;
382		- align-items: center;
383		- &:last-child{ border-bottom: 1px solid #eeeeee;}
384		- p{width: 412px;}
385		- span::before{
386		- background-image:none;
	449	+
	450	+ .media-wrap {
	451	+ display: flex;
	452	+ justify-content: space-between;
	453	+ gap: 30px;
	454	+ }
	455	+
	456	+ .media-box {
	457	+ width: 420px;
	458	+ border: 1px solid #eeeeee;
	459	+ border-radius: 22px;
	460	+
	461	+ .img-area {
	462	+ height: 231px;
	463	+ }
	464	+
	465	+ .media-image {
	466	+ width: 100%;
	467	+ height: 100%;
	468	+ border-radius: 22px;
387	469	}
388	470	}
389		- }
	471	+
	472	+ .new-bodo {
	473	+ width: 560px;
	474	+ margin-left: 70px;
	475	+
	476	+ .info {
	477	+ padding: 18px 7px;
	478	+ border-top: 1px solid #eeeeee;
	479	+ align-items: center;
	480	+
	481	+ &:last-child {
	482	+ border-bottom: 1px solid #eeeeee;
	483	+ }
	484	+
	485	+ p {
	486	+ width: 412px;
	487	+ }
	488	+
	489	+ span::before {
	490	+ background-image: none;
	491	+ }
	492	+ }
	493	+ }
390	494	}
391	495
392	496
...	...	@@ -396,40 +500,49 @@
396	500	/* swiper */
397	501
398	502	.swiper {
399		- width:1600px;
	503	+ width: 1600px;
400	504	height: 100%;
	505	+}
	506	+@media screen and (max-width: 1500px) {
	507	+ .swiper{width: auto; }
	508	+ .swiper-wrapper{width: auto !important;}
401	509	}
402		- .swiper-wrapper{
	510	+.swiper-wrapper {
403	511	width: 1500px !important;
404	512	margin: 0 auto;
405		- }
406		- .swiper-slide {
	513	+}
	514	+
	515	+.swiper-slide {
407	516	text-align: center;
408	517	font-size: 18px;
409	518	background: #fff;
410		-
	519	+
411	520	/* Center slide text vertically */
412	521	display: flex;
413	522	justify-content: center;
414	523	align-items: center;
415		- }
416		-
417		- .swiper-slide img {
	524	+}
	525	+
	526	+.swiper-slide img {
418	527	display: block;
419	528	height: 100%;
420	529	object-fit: cover;
421		- }
422		-.swiper-horizontal > .swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-horizontal{
423		- width: 30rem !important;
424		- top: 407px !important;
425		- left: 556px !important;
426	530	}
427		-.swiper-pagination-progressbar{
	531	+
	532	+.swiper-horizontal>.swiper-pagination-progressbar,
	533	+.swiper-pagination-progressbar.swiper-pagination-horizontal {
	534	+ width: 30rem !important;
	535	+ position: initial;
	536	+}
	537	+
	538	+.swiper-pagination-progressbar {
428	539	background-color: #fff !important;
429	540	}
430		-.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{
	541	+
	542	+.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
431	543	background-color: #4557a4 !important;
432	544	}
	545	+
433	546	.swiper-button-prev {
434	547	background-image: url(../../images/prev-btn.png);
435	548	width: 70px !important;
...	...	@@ -438,9 +551,11 @@
438	551	box-shadow: 1px 2px 8px 1px rgba(0, 0, 0, 0.08);
439	552	}
440	553
441		-.swiper-button-prev:after, .swiper-rtl .swiper-button-prev:after{
	554	+.swiper-button-prev:after,
	555	+.swiper-rtl .swiper-button-prev:after {
442	556	content: '' !important;
443	557	}
	558	+
444	559	.swiper-button-next {
445	560	background-image: url(../../images/next-btn.png);
446	561	width: 70px !important;
...	...	@@ -450,12 +565,36 @@
450	565	box-shadow: 1px 2px 8px 1px rgba(0, 0, 0, 0.08);
451	566	}
452	567
453		-.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after{
	568	+.swiper-button-next:after,
	569	+.swiper-rtl .swiper-button-prev:after {
454	570	content: '' !important;
455	571	}
456		-.slide-index{position: absolute !important; top: 400px !important; left: 814px !important; width: 22px !important; transform: none !important;
457		- span{font-size: 20px; color: #fff; font-family: "Pretendard-B"; }
	572	+
	573	+.slide-index {
	574	+ position: absolute !important;
	575	+ top: 400px !important;
	576	+ left: 814px !important;
	577	+ width: 22px !important;
	578	+ transform: none !important;
	579	+
	580	+ span {
	581	+ font-size: 20px;
	582	+ color: #fff;
	583	+ font-family: "Pretendard-B";
	584	+ }
458	585	}
459		-.swiper-pagination-fraction{position: absolute !important; top: 397px !important; left: 880px !important; z-index: 10; font-size: 20px; color: #fff !important; font-family: "Pretendard-B";
460		- span{font-size: 20px; color: #fff; font-family: "Pretendard-B"; }
461		-} (파일 끝에 줄바꿈 문자 없음)
	586	+
	587	+.swiper-pagination-fraction {
	588	+ width: fit-content !important;
	589	+ font-size: 20px;
	590	+ color: #fff !important;
	591	+ font-family: "Pretendard-B";
	592	+ margin-right: 10px;
	593	+ span {
	594	+ font-size: 20px;
	595	+ color: #fff;
	596	+ font-family: "Pretendard-B";
	597	+ }
	598	+}
	599	+
	600	+.pagination_container{display: flex; align-items: center; gap: 25px; position: absolute; bottom: 107px; left: 50%; transform: translateX(-67%); z-index: 50;} (파일 끝에 줄바꿈 문자 없음)

...	...	@@ -10,9 +10,13 @@
10	10	width: 100%;
11	11	height: 1px;
12	12	}
	13	+@media screen and (max-width: 1500px) {
	14	+ .content{width: auto !important; }
	15	+ }
13	16	.content {
14	17	width: 1500px;
15	18	margin: 0 auto;
	19	+ padding-bottom: 27rem;
16	20	padding-top: 56px;
17	21
18	22	h2 {
...	...	@@ -467,6 +471,7 @@
467	471	width: 320px;
468	472	height: 220px;
469	473	border-radius: 24px;
	474	+ flex-shrink: 0;
470	475	img{
471	476	width: 100%;
472	477	height: 100%;

...	...	@@ -10,9 +10,11 @@
10	10	<div class="swiper-button-prev"></div>
11	11	<div class="pagination_container">
12	12	<div class="swiper-pagination"></div>
13		- <div class="swiper-pagination2"></div>
	13	+ <div class="flex align-center" >
	14	+ <div class="swiper-pagination2"></div>
	15	+ <button class="swiper-play-pause-btn" @click="toggleAutoplay"><component :is="isAutoplay ? 'PauseOutlined' : 'CaretRightOutlined'" /></button>
	16	+ </div>
14	17	</div>
15		- <button class="swiper-play-pause-btn" @click="toggleAutoplay"><component :is="isAutoplay ? 'PauseOutlined' : 'CaretRightOutlined'" /></button>
16	18	</div>
17	19	<!-- <swiper ref="swiper" :loop="true" :spaceBetween="30" :centeredSlides="true" :autoplay="{
18	20	delay: 2500,

Delete comment