{"id":75,"date":"2025-11-14T19:13:35","date_gmt":"2025-11-14T10:13:35","guid":{"rendered":"http:\/\/bmkyun2.com\/?page_id=75"},"modified":"2025-11-24T10:36:44","modified_gmt":"2025-11-24T01:36:44","slug":"index","status":"publish","type":"page","link":"https:\/\/bmkyun2.com\/en\/","title":{"rendered":"Home"},"content":{"rendered":"
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\"\uacf5\uac04\uc758\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\n\t\t\t\t\t
\n\n\t\t\t\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\tRediscovering Space\t\t\t\t\t\t\t<\/h2>\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t

Rediscovering Space<\/p>

\ube5b\uacfc \uad6c\uc870, \uc0ac\ub78c\uacfc \uacf5\uac04\uc758 \uad00\uacc4\ub97c \ud0d0\uad6c\ud558\uba70
\uc2dc\ub300\ub97c \ucd08\uc6d4\ud558\ub294 \uac74\ucd95\uc744 \ub9cc\ub4e4\uc5b4\uac11\ub2c8\ub2e4<\/p>\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\n\t\t\t\t\n\t\t\t<\/div>\n\t\t\t\t\t\t

\n\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\"\ube0c\ub79c\ub4dc\ub97c\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\n\t\t\t\t\t
\n\n\t\t\t\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\tBrand in Space\t\t\t\t\t\t\t<\/h2>\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t

Brand in Space<\/p>

\uc0c1\uc5c5 \uacf5\uac04\uc5d0 \ub2f4\uae34 \ube0c\ub79c\ub4dc\uc758 \ucca0\ud559\uacfc \uac00\uce58\ub97c
\uac74\ucd95 \uc5b8\uc5b4\ub85c \ud480\uc5b4\ub0c5\ub2c8\ub2e4<\/p>\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\n\t\t\t\t\n\t\t\t<\/div>\n\t\t\t\t\t\t

\n\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\"\ub3c4\uc2dc\ub97c\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\n\t\t\t\t\t
\n\n\t\t\t\t\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\ub3c4\uc2dc\ub97c \uc787\ub2e4\t\t\t\t\t\t\t<\/h2>\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t

Connecting Cities<\/p>

\uacf5\uacf5 \uac74\ucd95\uc744 \ud1b5\ud574 \uc0ac\ub78c\uacfc \ub3c4\uc2dc,
\uacfc\uac70\uc640 \ubbf8\ub798\ub97c \uc5f0\uacb0\ud558\ub294 \uc7a5\uc18c\ub97c \ub9cc\ub4ed\ub2c8\ub2e4<\/p>\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\n\t\t\t\t\n\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\n\t\t\t\t

\n\t\t\t
\n\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t<\/i>\n\t\t\t\t\t\t<\/a>\n\t\t\t\t\t<\/div>\n\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t<\/i>\n\t\t\t\t\t\t<\/a>\n\t\t\t\t\t<\/div>\n\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Portfolio Section - Mobile Optimized<\/title>\r\n <style>\r\n.project-showcase {\r\n padding: 80px 5% 60px;\r\n background: white;\r\n}\r\n\r\n.showcase-container {\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n}\r\n\r\n.showcase-main {\r\n display: grid;\r\n grid-template-columns: 1.2fr 1.8fr;\r\n gap: 80px;\r\n margin-bottom: 60px;\r\n align-items: center;\r\n}\r\n\r\n.showcase-info {\r\n padding-right: 20px;\r\n}\r\n\r\n.showcase-label {\r\n font-size: 14px;\r\n font-weight: 600;\r\n color: #999;\r\n letter-spacing: 3px;\r\n margin-bottom: 20px;\r\n display: block;\r\n}\r\n\r\n.showcase-title {\r\n font-size: 42px;\r\n font-weight: 700;\r\n color: #1a1a1a;\r\n margin-bottom: 30px;\r\n line-height: 1.2;\r\n}\r\n\r\n.showcase-desc {\r\n font-size: 16px;\r\n color: #666;\r\n line-height: 1.9;\r\n margin-bottom: 40px;\r\n}\r\n\r\n.project-details {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 20px;\r\n margin-bottom: 45px;\r\n padding: 30px 0;\r\n border-top: 2px solid #f0f0f0;\r\n border-bottom: 2px solid #f0f0f0;\r\n}\r\n\r\n.detail-row {\r\n display: grid;\r\n grid-template-columns: 120px 1fr;\r\n align-items: center;\r\n gap: 20px;\r\n}\r\n\r\n.detail-label {\r\n font-size: 13px;\r\n color: #999;\r\n font-weight: 600;\r\n letter-spacing: 1px;\r\n}\r\n\r\n.detail-value {\r\n font-size: 16px;\r\n color: #1a1a1a;\r\n font-weight: 600;\r\n}\r\n\r\n.showcase-nav {\r\n display: flex;\r\n align-items: center;\r\n gap: 30px;\r\n}\r\n\r\n.nav-counter {\r\n font-size: 20px;\r\n color: #1a1a1a;\r\n font-weight: 600;\r\n font-family: 'Courier New', monospace;\r\n}\r\n\r\n.nav-counter .current {\r\n color: #1a1a1a;\r\n font-size: 24px;\r\n}\r\n\r\n.nav-counter .total {\r\n color: #ccc;\r\n}\r\n\r\n.nav-buttons {\r\n display: flex;\r\n gap: 15px;\r\n align-items: center;\r\n}\r\n\r\n.nav-arrow {\r\n background: none;\r\n border: none;\r\n font-size: 28px;\r\n color: #1a1a1a;\r\n cursor: pointer;\r\n padding: 8px 12px;\r\n transition: all 0.3s ease;\r\n font-weight: 300;\r\n line-height: 1;\r\n}\r\n\r\n.nav-arrow:hover {\r\n color: #4a90e2;\r\n transform: scale(1.3);\r\n}\r\n\r\n.showcase-slider-wrapper {\r\n position: relative;\r\n border-radius: 16px;\r\n overflow: hidden;\r\n height: 580px;\r\n box-shadow: 0 20px 60px rgba(0,0,0,0.12);\r\n background: #000;\r\n}\r\n\r\n.showcase-slider {\r\n position: relative;\r\n width: 100%;\r\n height: 100%;\r\n overflow: hidden;\r\n background: #000;\r\n}\r\n\r\n.slider-track {\r\n display: flex;\r\n height: 100%;\r\n transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);\r\n}\r\n\r\n.slider-slide {\r\n min-width: 100%;\r\n height: 100%;\r\n position: relative;\r\n display: flex;\r\n overflow: hidden;\r\n font-size: 0;\r\n line-height: 0;\r\n}\r\n\r\n.slider-image {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n object-position: center;\r\n display: block;\r\n flex-shrink: 0;\r\n vertical-align: middle;\r\n line-height: 0;\r\n font-size: 0;\r\n border: none;\r\n outline: none;\r\n}\r\n\r\n.slider-overlay {\r\n position: absolute;\r\n bottom: 35px;\r\n right: 35px;\r\n color: #fff;\r\n font-size: 32px;\r\n font-weight: 300;\r\n cursor: pointer;\r\n transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n z-index: 10;\r\n text-shadow: 0 2px 10px rgba(0,0,0,0.3);\r\n transform-origin: center;\r\n}\r\n\r\n.slider-overlay:hover {\r\n transform: scale(1.3) rotate(45deg);\r\n text-shadow: 0 4px 20px rgba(0,0,0,0.5);\r\n color: #4a90e2;\r\n}\r\n\r\n.project-grid {\r\n display: grid;\r\n grid-template-columns: repeat(4, 1fr);\r\n gap: 20px;\r\n}\r\n\r\n.grid-item {\r\n position: relative;\r\n border-radius: 12px;\r\n overflow: hidden;\r\n height: 280px;\r\n cursor: pointer;\r\n transition: all 0.4s ease;\r\n box-shadow: 0 5px 20px rgba(0,0,0,0.08);\r\n display: block;\r\n background: #000;\r\n font-size: 0;\r\n line-height: 0;\r\n}\r\n\r\n.grid-item:hover {\r\n transform: translateY(-8px);\r\n box-shadow: 0 20px 40px rgba(0,0,0,0.15);\r\n}\r\n\r\n.grid-image {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n object-position: center;\r\n transition: transform 0.6s ease;\r\n display: block;\r\n vertical-align: middle;\r\n line-height: 0;\r\n font-size: 0;\r\n border: none;\r\n outline: none;\r\n}\r\n\r\n.grid-item:hover .grid-image {\r\n transform: scale(1.15);\r\n}\r\n\r\n.grid-overlay {\r\n position: absolute;\r\n inset: 0;\r\n background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 70%);\r\n display: flex;\r\n align-items: flex-end;\r\n padding: 25px;\r\n opacity: 0;\r\n transition: opacity 0.4s ease;\r\n font-size: 17px;\r\n line-height: 1.4;\r\n}\r\n\r\n.grid-item:hover .grid-overlay {\r\n opacity: 1;\r\n}\r\n\r\n.grid-title {\r\n color: white;\r\n font-size: 17px;\r\n font-weight: 600;\r\n margin: 0;\r\n line-height: 1.4;\r\n}\r\n\r\n\/* Mobile Responsive *\/\r\n@media (max-width: 768px) {\r\n .project-showcase {\r\n padding: 60px 5% 40px;\r\n }\r\n\r\n .showcase-main {\r\n grid-template-columns: 1fr;\r\n gap: 40px;\r\n }\r\n\r\n .showcase-info {\r\n padding-right: 0;\r\n }\r\n\r\n .showcase-label {\r\n font-size: 12px;\r\n }\r\n\r\n .showcase-title {\r\n font-size: 28px;\r\n margin-bottom: 20px;\r\n }\r\n\r\n .showcase-desc {\r\n font-size: 14px;\r\n margin-bottom: 30px;\r\n }\r\n\r\n .project-details {\r\n margin-bottom: 30px;\r\n padding: 20px 0;\r\n }\r\n\r\n .detail-row {\r\n grid-template-columns: 100px 1fr;\r\n gap: 15px;\r\n }\r\n\r\n .detail-label {\r\n font-size: 12px;\r\n }\r\n\r\n .detail-value {\r\n font-size: 14px;\r\n }\r\n\r\n .showcase-nav {\r\n gap: 20px;\r\n }\r\n\r\n .nav-counter {\r\n font-size: 18px;\r\n }\r\n\r\n .nav-counter .current {\r\n font-size: 20px;\r\n }\r\n\r\n .nav-arrow {\r\n font-size: 24px;\r\n padding: 6px 10px;\r\n }\r\n\r\n .showcase-slider-wrapper {\r\n height: 350px;\r\n border-radius: 12px;\r\n background: #000;\r\n }\r\n\r\n .showcase-slider,\r\n .slider-track,\r\n .slider-slide {\r\n height: 100%;\r\n }\r\n\r\n .slider-slide {\r\n background: #000;\r\n }\r\n\r\n .slider-image {\r\n width: 100%;\r\n min-width: 100%;\r\n height: 100%;\r\n min-height: 100%;\r\n max-height: 100%;\r\n object-fit: cover;\r\n object-position: center;\r\n display: block;\r\n }\r\n\r\n .slider-overlay {\r\n bottom: 25px;\r\n right: 25px;\r\n font-size: 28px;\r\n }\r\n\r\n \/* \uadf8\ub9ac\ub4dc 2x2\ub85c \ubcc0\uacbd - \ub9c8\uc9c0\ub9c9 4\uac1c \uc228\uae40 *\/\r\n .project-grid {\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 15px;\r\n }\r\n\r\n .grid-item {\r\n height: 220px;\r\n border-radius: 10px;\r\n background: #000;\r\n }\r\n\r\n \/* \ubaa8\ubc14\uc77c\uc5d0\uc11c 5~8\ubc88\uc9f8 \uc544\uc774\ud15c \uc228\uae40 *\/\r\n .grid-item:nth-child(n+5) {\r\n display: none;\r\n }\r\n\r\n .grid-image {\r\n width: 100%;\r\n min-width: 100%;\r\n height: 100%;\r\n min-height: 100%;\r\n max-height: 100%;\r\n object-fit: cover;\r\n object-position: center;\r\n display: block;\r\n }\r\n\r\n .grid-overlay {\r\n padding: 20px;\r\n font-size: 14px;\r\n }\r\n\r\n .grid-title {\r\n font-size: 14px;\r\n line-height: 1.3;\r\n }\r\n}\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<section class=\"project-showcase\">\r\n <div class=\"showcase-container\">\r\n <div class=\"showcase-main\">\r\n <div class=\"showcase-info\">\r\n <span class=\"showcase-label\">PORTFOLIO<\/span>\r\n <h3 class=\"showcase-title\" id=\"project-title\">Songhyeon-dong House<\/h3>\r\n <p class=\"showcase-desc\" id=\"project-desc\">\r\n Songhyeon-dong House is a detached house located on a sloping site in the city center and is designed with the highest priority to harmonize with the surrounding natural environment. By actively utilizing the level difference of the terrain, an independent outer terrace was constructed on each floor, and the scenery of Bukhansan Mountain was drawn indoors through large windows.\r\n <\/p>\r\n \r\n <div class=\"project-details\">\r\n <div class=\"detail-row translation-block\"><span class=\"detail-label\">Use-Purpose<\/span>\n <span class=\"detail-value\" id=\"project-type\">A detached house<\/span><\/div>\r\n <div class=\"detail-row\">\r\n <span class=\"detail-label\">Scale<\/span>\r\n <span class=\"detail-value\" id=\"project-scale\">B1F, ground 1F<\/span>\r\n <\/div>\r\n <div class=\"detail-row\">\r\n <span class=\"detail-label\">Year of design<\/span>\r\n <span class=\"detail-value\" id=\"project-year\">2024<\/span>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"showcase-nav\">\r\n <div class=\"nav-counter\">\r\n <span class=\"current\" id=\"current-num\">01<\/span> <span class=\"total\">\/ 08<\/span>\r\n <\/div>\r\n <div class=\"nav-buttons\">\r\n <button class=\"nav-arrow\" id=\"prev-btn\">\u2190<\/button>\r\n <button class=\"nav-arrow\" id=\"next-btn\">\u2192<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"showcase-slider-wrapper\">\r\n <div class=\"showcase-slider\">\r\n <div class=\"slider-track\" id=\"slider-track\">\r\n <div class=\"slider-slide\">\r\n <img decoding=\"async\" class=\"slider-image\" src=\"https:\/\/images.unsplash.com\/photo-1600596542815-ffad4c1539a9?w=1920\" alt=\"Project 1\">\r\n <\/div>\r\n <div class=\"slider-slide\">\r\n <img decoding=\"async\" class=\"slider-image\" src=\"https:\/\/images.unsplash.com\/photo-1486406146926-c627a92ad1ab?w=1200\" alt=\"Project 2\">\r\n <\/div>\r\n <div class=\"slider-slide\">\r\n <img decoding=\"async\" class=\"slider-image\" src=\"http:\/\/bmkyun2.com\/wp-content\/uploads\/2025\/11\/Gemini_Generated_Image_ddyxp6ddyxp6ddyx-1.png\" alt=\"Project 3\">\r\n <\/div>\r\n <div class=\"slider-slide\">\r\n <img decoding=\"async\" class=\"slider-image\" src=\"http:\/\/bmkyun2.com\/wp-content\/uploads\/2025\/11\/Gemini_Generated_Image_gvcjd9gvcjd9gvcj.png\" alt=\"Project 4\">\r\n <\/div>\r\n <div class=\"slider-slide\">\r\n <img decoding=\"async\" class=\"slider-image\" src=\"https:\/\/images.unsplash.com\/photo-1600047509807-ba8f99d2cdde?w=1200\" alt=\"Project 5\">\r\n <\/div>\r\n <div class=\"slider-slide\">\r\n <img decoding=\"async\" class=\"slider-image\" src=\"http:\/\/bmkyun2.com\/wp-content\/uploads\/2025\/11\/Gemini_Generated_Image_cpyjwlcpyjwlcpyj.png\" alt=\"Project 6\">\r\n <\/div>\r\n <div class=\"slider-slide\">\r\n <img decoding=\"async\" class=\"slider-image\" src=\"http:\/\/bmkyun2.com\/wp-content\/uploads\/2025\/11\/Gemini_Generated_Image_pv0fy9pv0fy9pv0f.png\" alt=\"Project 7\">\r\n <\/div>\r\n <div class=\"slider-slide\">\r\n <img decoding=\"async\" class=\"slider-image\" src=\"http:\/\/bmkyun2.com\/wp-content\/uploads\/2025\/11\/Gemini_Generated_Image_m1azr3m1azr3m1az.png\" alt=\"Project 8\">\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"slider-overlay\" id=\"slider-arrow\">\u2192<\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"project-grid\">\r\n <div class=\"grid-item\">\r\n <img decoding=\"async\" class=\"grid-image\" src=\"http:\/\/bmkyun2.com\/wp-content\/uploads\/2025\/11\/Gemini_Generated_Image_rkj7farkj7farkj7.png\">\r\n <div class=\"grid-overlay\">\r\n <h4 class=\"grid-title\">\uac15\ub0a8 \uc624\ud53c\uc2a4 \ud0c0\uc6cc<\/h4>\r\n <\/div>\r\n <\/div>\r\n <div class=\"grid-item\">\r\n <img decoding=\"async\" class=\"grid-image\" src=\"http:\/\/bmkyun2.com\/wp-content\/uploads\/2025\/11\/Gemini_Generated_Image_herru4herru4herr.png\">\r\n <div class=\"grid-overlay\">\r\n <h4 class=\"grid-title\">\uc81c\uc8fc \ud55c\ub9bc \ub9ac\uc11c\uce58\uc13c\ud130<\/h4>\r\n <\/div>\r\n <\/div>\r\n <div class=\"grid-item\">\r\n <img decoding=\"async\" class=\"grid-image\" src=\"http:\/\/bmkyun2.com\/wp-content\/uploads\/2025\/11\/Gemini_Generated_Image_gvcjd9gvcjd9gvcj.png\">\r\n <div class=\"grid-overlay\">\r\n <h4 class=\"grid-title\">\uc0b0\uc545 \ube4c\ub77c<\/h4>\r\n <\/div>\r\n <\/div>\r\n <div class=\"grid-item\">\r\n <img decoding=\"async\" class=\"grid-image\" src=\"http:\/\/bmkyun2.com\/wp-content\/uploads\/2025\/11\/Gemini_Generated_Image_y9iwlay9iwlay9iw.png\">\r\n <div class=\"grid-overlay\">\r\n <h4 class=\"grid-title\">\uad50\uc721\uc2dc\uc124<\/h4>\r\n <\/div>\r\n <\/div>\r\n <div class=\"grid-item\">\r\n <img decoding=\"async\" class=\"grid-image\" src=\"http:\/\/bmkyun2.com\/wp-content\/uploads\/2025\/11\/Gemini_Generated_Image_cpyjwlcpyjwlcpyj.png\">\r\n <div class=\"grid-overlay\">\r\n <h4 class=\"grid-title\">\ub3c4\uc2ec \uc7ac\uac1c\ubc1c<\/h4>\r\n <\/div>\r\n <\/div>\r\n <div class=\"grid-item\">\r\n <img decoding=\"async\" class=\"grid-image\" src=\"http:\/\/bmkyun2.com\/wp-content\/uploads\/2025\/11\/Gemini_Generated_Image_pv0fy9pv0fy9pv0f.png\">\r\n <div class=\"grid-overlay\">\r\n <h4 class=\"grid-title\">\uc8fc\uac70 \ub2e8\uc9c0<\/h4>\r\n <\/div>\r\n <\/div>\r\n <div class=\"grid-item\">\r\n <img decoding=\"async\" class=\"grid-image\" src=\"http:\/\/bmkyun2.com\/wp-content\/uploads\/2025\/11\/Gemini_Generated_Image_m1azr3m1azr3m1az.png\">\r\n <div class=\"grid-overlay\">\r\n <h4 class=\"grid-title\">\uc0c1\uc5c5 \uc2dc\uc124<\/h4>\r\n <\/div>\r\n <\/div>\r\n <div class=\"grid-item\">\r\n <img decoding=\"async\" class=\"grid-image\" src=\"http:\/\/bmkyun2.com\/wp-content\/uploads\/2025\/11\/Gemini_Generated_Image_4efies4efies4efi.png\">\r\n <div class=\"grid-overlay\">\r\n <h4 class=\"grid-title\">\uacf5\uacf5\uc2dc\uc124<\/h4>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', function() {\r\n const projects = [\r\n { \r\n title: '\uc1a1\ud604\ub3d9 \uc8fc\ud0dd', \r\n desc: '\uc1a1\ud604\ub3d9 \uc8fc\ud0dd\uc740 \ub3c4\uc2ec\uc758 \uacbd\uc0ac\uc9c4 \ub300\uc9c0\uc5d0 \uc790\ub9ac\ud55c \ub2e8\ub3c5\uc8fc\ud0dd\uc73c\ub85c, \uc8fc\ubcc0 \uc790\uc5f0\ud658\uacbd\uacfc\uc758 \uc870\ud654\ub97c \ucd5c\uc6b0\uc120\uc73c\ub85c \uc124\uacc4\ub418\uc5c8\uc2b5\ub2c8\ub2e4. \uc9c0\ud615\uc758 \ub808\ubca8\ucc28\ub97c \uc801\uadf9 \ud65c\uc6a9\ud558\uc5ec \uac01 \uce35\ub9c8\ub2e4 \ub3c5\ub9bd\ub41c \uc678\ubd80 \ud14c\ub77c\uc2a4\ub97c \uad6c\uc131\ud558\uc600\uc73c\uba70, \ub300\ud615 \uc720\ub9ac\ucc3d\uc744 \ud1b5\ud574 \ubd81\ud55c\uc0b0\uc758 \ud48d\uacbd\uc744 \uc2e4\ub0b4\ub85c \ub04c\uc5b4\ub4e4\uc600\uc2b5\ub2c8\ub2e4.', \r\n type: '\ub2e8\ub3c5\uc8fc\ud0dd', \r\n scale: '\uc9c0\ud5581\uce35, \uc9c0\uc0c11\uce35', \r\n year: '2024',\r\n url: 'http:\/\/bmkyun2.com\/\uc1a1\ud604\ub3d9-\uc8fc\ud0dd\/'\r\n },\r\n { \r\n title: '\uac15\ub0a8 \uc624\ud53c\uc2a4 \ud0c0\uc6cc', \r\n desc: '\uac15\ub0a8 \uc911\uc2ec\ubd80\uc5d0 \uc704\uce58\ud55c \ud504\ub9ac\ubbf8\uc5c4 \uc624\ud53c\uc2a4 \ube4c\ub529\uc73c\ub85c, \ucd5c\ucca8\ub2e8 \uc2a4\ub9c8\ud2b8 \ube4c\ub529 \uc2dc\uc2a4\ud15c\uacfc \uce5c\ud658\uacbd \uc124\uacc4\ub97c \uc801\uc6a9\ud558\uc5ec \uc5c5\ubb34 \ud6a8\uc728\uc131\uc744 \uadf9\ub300\ud654\ud588\uc2b5\ub2c8\ub2e4. \ub3c4\uc2ec \uc18d \uc218\uc9c1 \uc815\uc6d0 \uac1c\ub150\uc744 \ub3c4\uc785\ud55c \ud601\uc2e0\uc801\uc778 \ub514\uc790\uc778\uc774 \ud2b9\uc9d5\uc785\ub2c8\ub2e4.', \r\n type: '\uc5c5\ubb34\uc2dc\uc124', \r\n scale: '\uc9c0\uc0c120\uce35', \r\n year: '2019',\r\n url: 'http:\/\/bmkyun2.com\/\uac15\ub0a8-\uc624\ud53c\uc2a4-\ud0c0\uc6cc\/'\r\n },\r\n { \r\n title: '\ubb38\ud654 \uc13c\ud130', \r\n desc: '\uc2dc\ubbfc\ub4e4\uc744 \uc704\ud55c \ubcf5\ud569 \ubb38\ud654 \uacf5\uac04\uc73c\ub85c \uc124\uacc4\ub418\uc5c8\uc73c\uba70, \uacf5\uc5f0\uc7a5, \uc804\uc2dc\uc2e4, \ub3c4\uc11c\uad00\uc774 \uc720\uae30\uc801\uc73c\ub85c \uc5f0\uacb0\ub41c \uad6c\uc870\uc785\ub2c8\ub2e4. \uc790\uc5f0 \ucc44\uad11\uc744 \ucd5c\ub300\ud55c \ud65c\uc6a9\ud55c \uac1c\ubc29\uc801\uc778 \uacf5\uac04 \uad6c\uc131\uc774 \ub3cb\ubcf4\uc785\ub2c8\ub2e4.', \r\n type: '\ubb38\ud654\uc2dc\uc124', \r\n scale: '\uc9c0\uc0c14\uce35, \uc9c0\ud5582\uce35', \r\n year: '2020',\r\n url: 'http:\/\/bmkyun2.com\/\ubb38\ud654-\uc13c\ud130\/'\r\n },\r\n { \r\n title: '\uc0b0\uc545 \ube4c\ub77c', \r\n desc: '\uc790\uc5f0 \uacbd\uad00\uc744 \ucd5c\ub300\ud55c \ubcf4\uc874\ud558\uba74\uc11c \uc124\uacc4\ub41c \ub7ed\uc154\ub9ac \uc8fc\uac70 \uacf5\uac04\uc785\ub2c8\ub2e4. \ub300\ud615 \uc720\ub9ac\ucc3d\uc744 \ud1b5\ud574 \uc0ac\uacc4\uc808 \ubcc0\ud654\ud558\ub294 \uc0b0\uc758 \uc544\ub984\ub2e4\uc6c0\uc744 \uc2e4\ub0b4\uc5d0\uc11c \uac10\uc0c1\ud560 \uc218 \uc788\ub3c4\ub85d \ud588\uc2b5\ub2c8\ub2e4.', \r\n type: '\uc8fc\uac70\uc2dc\uc124', \r\n scale: '\uc9c0\uc0c12\uce35', \r\n year: '2018',\r\n url: 'http:\/\/bmkyun2.com\/\uc0b0\uc545-\ube4c\ub77c\/'\r\n },\r\n { \r\n title: '\uae30\uc5c5 \uc0ac\uc625', \r\n desc: '\uae00\ub85c\ubc8c \uae30\uc5c5\uc758 \uc544\uc2dc\uc544 \ubcf8\uc0ac\ub85c \uc124\uacc4\ub41c \uac74\ubb3c\ub85c, \ud611\uc5c5\uacfc \uc18c\ud1b5\uc744 \uc911\uc2ec\uc73c\ub85c \ud55c \uac1c\ubc29\ud615 \uc624\ud53c\uc2a4 \uacf5\uac04\uc774 \ud2b9\uc9d5\uc785\ub2c8\ub2e4. \uc9c1\uc6d0 \uc6f0\ube59\uc744 \uace0\ub824\ud55c \ub2e4\uc591\ud55c \ud3b8\uc758\uc2dc\uc124\uc744 \uac16\ucd94\uace0 \uc788\uc2b5\ub2c8\ub2e4.', \r\n type: '\uc5c5\ubb34\uc2dc\uc124', \r\n scale: '\uc9c0\uc0c115\uce35, \uc9c0\ud5583\uce35', \r\n year: '2021',\r\n url: 'http:\/\/bmkyun2.com\/\uae30\uc5c5-\uc0ac\uc625\/'\r\n },\r\n { \r\n title: '\ub3c4\uc2ec \uc7ac\uac1c\ubc1c', \r\n desc: '\ub178\ud6c4 \uc0c1\uc5c5\uc9c0\uc5ed\uc758 \ub3c4\uc2dc\uc7ac\uc0dd \ud504\ub85c\uc81d\ud2b8\ub85c, \uae30\uc874 \uac74\ubb3c\uc758 \uad6c\uc870\ub97c \uc0b4\ub9ac\uba74\uc11c \ud604\ub300\uc801 \uac10\uac01\uc744 \ub354\ud55c \ub9ac\ubaa8\ub378\ub9c1 \uc791\uc5c5\uc785\ub2c8\ub2e4. \uc9c0\uc5ed \ucee4\ubba4\ub2c8\ud2f0 \ud65c\uc131\ud654\uc5d0 \uae30\uc5ec\ud558\ub294 \uc124\uacc4\uc785\ub2c8\ub2e4.', \r\n type: '\ubcf5\ud569\uc2dc\uc124', \r\n scale: '\uc9c0\uc0c18\uce35', \r\n year: '2020',\r\n url: 'http:\/\/bmkyun2.com\/\ub3c4\uc2ec-\uc7ac\uac1c\ubc1c\/'\r\n },\r\n { \r\n title: '\uc8fc\uac70 \ub2e8\uc9c0', \r\n desc: '\uce5c\ud658\uacbd \uc2a4\ub9c8\ud2b8 \ud648 \uae30\uc220\uc744 \uc801\uc6a9\ud55c \ud504\ub9ac\ubbf8\uc5c4 \uc544\ud30c\ud2b8 \ub2e8\uc9c0\uc785\ub2c8\ub2e4. \ucee4\ubba4\ub2c8\ud2f0 \uc2dc\uc124\uacfc \ub179\uc9c0 \uacf5\uac04\uc744 \ucda9\ubd84\ud788 \ud655\ubcf4\ud558\uc5ec \ucf8c\uc801\ud55c \uc8fc\uac70 \ud658\uacbd\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4.', \r\n type: '\uacf5\ub3d9\uc8fc\ud0dd', \r\n scale: '\uc9c0\uc0c125\uce35, 10\uac1c\ub3d9', \r\n year: '2022',\r\n url: 'http:\/\/bmkyun2.com\/\uc8fc\uac70-\ub2e8\uc9c0\/'\r\n },\r\n { \r\n title: '\uc0c1\uc5c5 \uc2dc\uc124', \r\n desc: '\uc1fc\ud551\ubab0\uacfc \uc624\ud53c\uc2a4\uac00 \uacb0\ud569\ub41c \ubcf5\ud569 \uc0c1\uc5c5\uc2dc\uc124\ub85c, \ud3b8\ub9ac\ud55c \uad50\ud1b5 \uc811\uadfc\uc131\uacfc \ub2e4\uc591\ud55c \ud3b8\uc758\uc2dc\uc124\uc744 \uac16\ucd98 \ub79c\ub4dc\ub9c8\ud06c \uac74\ubb3c\uc785\ub2c8\ub2e4. \uc9c0\uc18d\uac00\ub2a5\ud55c \uc5d0\ub108\uc9c0 \uc2dc\uc2a4\ud15c\uc744 \ub3c4\uc785\ud588\uc2b5\ub2c8\ub2e4.', \r\n type: '\ud310\ub9e4\uc2dc\uc124', \r\n scale: '\uc9c0\uc0c112\uce35, \uc9c0\ud5585\uce35', \r\n year: '2021',\r\n url: 'http:\/\/bmkyun2.com\/\uc0c1\uc5c5-\uc2dc\uc124\/'\r\n }\r\n ];\r\n \r\n let currentIndex = 0;\r\n const sliderTrack = document.getElementById('slider-track');\r\n const sliderArrow = document.getElementById('slider-arrow');\r\n const projectTitle = document.getElementById('project-title');\r\n const projectDesc = document.getElementById('project-desc');\r\n const projectType = document.getElementById('project-type');\r\n const projectScale = document.getElementById('project-scale');\r\n const projectYear = document.getElementById('project-year');\r\n const currentNum = document.getElementById('current-num');\r\n const prevBtn = document.getElementById('prev-btn');\r\n const nextBtn = document.getElementById('next-btn');\r\n \r\n function updateProject(index) {\r\n const project = projects[index];\r\n sliderTrack.style.transform = `translateX(-${index * 100}%)`;\r\n projectTitle.style.opacity = '0';\r\n projectDesc.style.opacity = '0';\r\n projectType.style.opacity = '0';\r\n projectScale.style.opacity = '0';\r\n projectYear.style.opacity = '0';\r\n \r\n setTimeout(() => {\r\n projectTitle.textContent = project.title;\r\n projectDesc.textContent = project.desc;\r\n projectType.textContent = project.type;\r\n projectScale.textContent = project.scale;\r\n projectYear.textContent = project.year;\r\n currentNum.textContent = String(index + 1).padStart(2, '0');\r\n projectTitle.style.transition = 'opacity 0.5s ease';\r\n projectDesc.style.transition = 'opacity 0.5s ease';\r\n projectType.style.transition = 'opacity 0.5s ease';\r\n projectScale.style.transition = 'opacity 0.5s ease';\r\n projectYear.style.transition = 'opacity 0.5s ease';\r\n projectTitle.style.opacity = '1';\r\n projectDesc.style.opacity = '1';\r\n projectType.style.opacity = '1';\r\n projectScale.style.opacity = '1';\r\n projectYear.style.opacity = '1';\r\n }, 350);\r\n }\r\n \r\n sliderArrow.addEventListener('click', () => {\r\n window.location.href = projects[currentIndex].url;\r\n });\r\n \r\n prevBtn.addEventListener('click', () => { \r\n currentIndex = (currentIndex - 1 + projects.length) % projects.length; \r\n updateProject(currentIndex); \r\n });\r\n \r\n nextBtn.addEventListener('click', () => { \r\n currentIndex = (currentIndex + 1) % projects.length; \r\n updateProject(currentIndex); \r\n });\r\n \r\n const gridItems = document.querySelectorAll('.grid-item');\r\n gridItems.forEach((item, index) => {\r\n item.style.opacity = '0';\r\n item.style.transform = 'translateY(20px)';\r\n setTimeout(() => {\r\n item.style.transition = 'all 0.5s ease';\r\n item.style.opacity = '1';\r\n item.style.transform = 'translateY(0)';\r\n }, index * 80);\r\n });\r\n});\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-c167842 e-con-full e-flex e-con e-parent\" data-id=\"c167842\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d67bb47 elementor-widget elementor-widget-html\" data-id=\"d67bb47\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n.showcase-section {\r\n padding: 100px 5%;\r\n background: white;\r\n}\r\n\r\n.showcase-wrapper {\r\n max-width: 1600px;\r\n margin: 0 auto;\r\n}\r\n\r\n.showcase-header {\r\n margin-bottom: 60px;\r\n}\r\n\r\n.showcase-main-title {\r\n font-size: 56px;\r\n font-weight: 500;\r\n color: #1a1a1a;\r\n margin-bottom: 15px;\r\n letter-spacing: -2px;\r\n}\r\n\r\n.showcase-subtitle {\r\n font-size: 16px;\r\n color: #666;\r\n font-weight: 400;\r\n letter-spacing: 0;\r\n}\r\n\r\n.showcase-cards {\r\n display: flex;\r\n gap: 20px;\r\n height: 520px;\r\n}\r\n\r\n.showcase-card {\r\n flex: 1;\r\n position: relative;\r\n border-radius: 16px;\r\n overflow: hidden;\r\n cursor: pointer;\r\n transition: flex 0.7s cubic-bezier(0.4, 0, 0.2, 1);\r\n box-shadow: 0 10px 40px rgba(0,0,0,0.1);\r\n}\r\n\r\n.showcase-card.active {\r\n flex: 2.5;\r\n box-shadow: 0 20px 60px rgba(0,0,0,0.2);\r\n}\r\n\r\n.card-bg {\r\n position: absolute;\r\n inset: 0;\r\n background-size: cover;\r\n background-position: center;\r\n transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);\r\n filter: brightness(0.85);\r\n}\r\n\r\n.showcase-card:hover .card-bg {\r\n transform: scale(1.08);\r\n filter: brightness(0.95);\r\n}\r\n\r\n.showcase-card.active .card-bg {\r\n filter: brightness(0.9);\r\n}\r\n\r\n.card-overlay {\r\n position: absolute;\r\n inset: 0;\r\n background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.75) 100%);\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: flex-end;\r\n padding: 40px;\r\n color: white;\r\n}\r\n\r\n.card-label {\r\n font-size: 13px;\r\n letter-spacing: 3px;\r\n text-transform: uppercase;\r\n margin-bottom: 12px;\r\n opacity: 1;\r\n font-weight: 600;\r\n color: white;\r\n text-shadow: 0 2px 8px rgba(0,0,0,0.3);\r\n}\r\n\r\n.card-title {\r\n font-size: 32px;\r\n font-weight: 700;\r\n margin-bottom: 15px;\r\n line-height: 1.2;\r\n color: white;\r\n text-shadow: 0 2px 10px rgba(0,0,0,0.4);\r\n opacity: 0;\r\n transform: translateY(20px);\r\n transition: all 0.5s ease 0.1s;\r\n}\r\n\r\n.showcase-card.active .card-title {\r\n opacity: 1;\r\n transform: translateY(0);\r\n}\r\n\r\n.card-description {\r\n font-size: 15px;\r\n line-height: 1.8;\r\n color: rgba(255,255,255,0.95);\r\n opacity: 0;\r\n max-height: 0;\r\n overflow: hidden;\r\n transition: all 0.5s ease 0.2s;\r\n text-shadow: 0 1px 4px rgba(0,0,0,0.3);\r\n}\r\n\r\n.showcase-card.active .card-description {\r\n opacity: 1;\r\n max-height: 200px;\r\n margin-bottom: 20px;\r\n}\r\n\r\n.card-arrow {\r\n position: absolute;\r\n top: 30px;\r\n right: 30px;\r\n width: 64px;\r\n height: 64px;\r\n background: rgba(74, 144, 226, 0.95);\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 26px;\r\n color: white;\r\n opacity: 0;\r\n transform: scale(0.5) rotate(-45deg);\r\n transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.3s;\r\n box-shadow: 0 8px 20px rgba(74, 144, 226, 0.4);\r\n text-decoration: none;\r\n z-index: 10;\r\n}\r\n\r\n.showcase-card.active .card-arrow {\r\n opacity: 1;\r\n transform: scale(1) rotate(0deg);\r\n}\r\n\r\n.card-arrow:hover {\r\n background: rgba(74, 144, 226, 1);\r\n transform: scale(1.15) rotate(0deg);\r\n box-shadow: 0 12px 30px rgba(74, 144, 226, 0.6);\r\n}\r\n\r\n\/* \uc9c4\ud589 \uc778\ub514\ucf00\uc774\ud130 *\/\r\n.card-progress {\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n right: 0;\r\n height: 4px;\r\n background: rgba(255,255,255,0.2);\r\n opacity: 0;\r\n transition: opacity 0.3s ease;\r\n}\r\n\r\n.showcase-card.active .card-progress {\r\n opacity: 1;\r\n}\r\n\r\n.progress-bar {\r\n height: 100%;\r\n background: rgba(74, 144, 226, 0.9);\r\n width: 0%;\r\n animation: progress 4s linear;\r\n}\r\n\r\n@keyframes progress {\r\n from { width: 0%; }\r\n to { width: 100%; }\r\n}\r\n\r\n\/* Mobile Responsive *\/\r\n@media (max-width: 768px) {\r\n .showcase-section {\r\n padding: 60px 5%;\r\n }\r\n\r\n .showcase-header {\r\n margin-bottom: 40px;\r\n }\r\n\r\n .showcase-main-title {\r\n font-size: 36px;\r\n margin-bottom: 12px;\r\n }\r\n\r\n .showcase-subtitle {\r\n font-size: 14px;\r\n }\r\n\r\n .showcase-cards {\r\n flex-direction: column;\r\n height: auto;\r\n gap: 20px;\r\n }\r\n\r\n .showcase-card {\r\n flex: none;\r\n height: 450px;\r\n }\r\n\r\n \/* \ubaa8\ubc14\uc77c\uc5d0\uc11c\ub294 active \ud6a8\uacfc \uc81c\uac70\ud558\uace0 \ubaa8\ub4e0 \uce74\ub4dc \ub3d9\uc77c *\/\r\n .showcase-card.active {\r\n flex: none;\r\n height: 450px;\r\n box-shadow: 0 10px 40px rgba(0,0,0,0.1);\r\n }\r\n\r\n \/* \ubaa8\ubc14\uc77c\uc5d0\uc11c\ub294 \uc81c\ubaa9\/\uc124\uba85 \ubaa8\ub450 \ud56d\uc0c1 \ud45c\uc2dc *\/\r\n .card-title {\r\n font-size: 24px;\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n\r\n .card-description {\r\n font-size: 14px;\r\n opacity: 1;\r\n max-height: none;\r\n margin-bottom: 20px;\r\n }\r\n\r\n \/* \ud654\uc0b4\ud45c \uc228\uae40 *\/\r\n .card-arrow {\r\n display: none;\r\n }\r\n\r\n \/* \uc9c4\ud589\ubc14 \uc228\uae40 *\/\r\n .card-progress {\r\n display: none;\r\n }\r\n\r\n .card-label {\r\n font-size: 12px;\r\n letter-spacing: 2px;\r\n }\r\n\r\n .card-overlay {\r\n padding: 30px 25px;\r\n }\r\n}\r\n<\/style>\r\n\r\n<section class=\"showcase-section\">\r\n <div class=\"showcase-wrapper\">\r\n <div class=\"showcase-header\">\r\n <h2 class=\"showcase-main-title\">EXCELLENCE IN DESIGN<\/h2>\r\n <p class=\"showcase-subtitle\">\ud0c1\uc6d4\ud55c \ub514\uc790\uc778\uacfc \ud601\uc2e0\uc801 \uae30\uc220\ub85c \uacf5\uac04\uc758 \uac00\uce58\ub97c \ucc3d\uc870\ud569\ub2c8\ub2e4<\/p>\r\n <\/div>\r\n \r\n <div class=\"showcase-cards\">\r\n <div class=\"showcase-card\" data-index=\"0\">\r\n <div class=\"card-bg\" style=\"background-image: url('https:\/\/images.unsplash.com\/photo-1600607687644-c7171b42498f?w=1200');\"><\/div>\r\n <div class=\"card-overlay\">\r\n <div class=\"card-label\">RESIDENTIAL<\/div>\r\n <h3 class=\"card-title\">\uc8fc\uac70 \uacf5\uac04<\/h3>\r\n <p class=\"card-description\">\ub77c\uc774\ud504\uc2a4\ud0c0\uc77c\uc744 \ub2f4\uc544\ub0b8 \ub9de\ucda4\ud615 \uc8fc\uac70 \ub514\uc790\uc778\uc73c\ub85c \uc77c\uc0c1\uc758 \uac00\uce58\ub97c \ub192\uc785\ub2c8\ub2e4. \uc790\uc5f0\uacfc \uc870\ud654\ub97c \uc774\ub8e8\ub294 \uacf5\uac04 \uc124\uacc4\ub97c \ud1b5\ud574 \uc0b6\uc758 \uc9c8\uc744 \ud5a5\uc0c1\uc2dc\ud0b5\ub2c8\ub2e4.<\/p>\r\n <\/div>\r\n <a href=\"http:\/\/bmkyun2.com\/en\/residential-\uc8fc\uac70-\uacf5\uac04-design\/\" class=\"card-arrow\">\u2192<\/a>\r\n <div class=\"card-progress\"><div class=\"progress-bar\"><\/div><\/div>\r\n <\/div>\r\n \r\n <div class=\"showcase-card active\" data-index=\"1\">\r\n <div class=\"card-bg\" style=\"background-image: url('https:\/\/images.unsplash.com\/photo-1600607687920-4e2a09cf159d?w=1200');\"><\/div>\r\n <div class=\"card-overlay\">\r\n <div class=\"card-label\">COMMERCIAL<\/div>\r\n <h3 class=\"card-title\">\uc0c1\uc5c5 \uc2dc\uc124<\/h3>\r\n <p class=\"card-description\">\ube0c\ub79c\ub4dc \uc544\uc774\ub374\ud2f0\ud2f0\ub97c \uacf5\uac04\uc5d0 \ub2f4\uc544 \ube44\uc988\ub2c8\uc2a4 \uac00\uce58\ub97c \uadf9\ub300\ud654\ud569\ub2c8\ub2e4. \ud601\uc2e0\uc801\uc778 \ub514\uc790\uc778\uc73c\ub85c \ucc28\ubcc4\ud654\ub41c \uc0c1\uc5c5 \uacf5\uac04\uc744 \ucc3d\uc870\ud569\ub2c8\ub2e4.<\/p>\r\n <\/div>\r\n <a href=\"http:\/\/bmkyun2.com\/en\/commercial-\uc0c1\uc5c5-\uc2dc\uc124-design\/\" class=\"card-arrow\">\u2192<\/a>\r\n <div class=\"card-progress\"><div class=\"progress-bar\"><\/div><\/div>\r\n <\/div>\r\n \r\n <div class=\"showcase-card\" data-index=\"2\">\r\n <div class=\"card-bg\" style=\"background-image: url('https:\/\/images.unsplash.com\/photo-1600585154340-be6161a56a0c?w=1200');\"><\/div>\r\n <div class=\"card-overlay\">\r\n <div class=\"card-label\">PUBLIC<\/div>\r\n <h3 class=\"card-title\">\uacf5\uacf5 \uac74\ucd95<\/h3>\r\n <p class=\"card-description\">\uc0ac\ud68c\uc801 \uac00\uce58\ub97c \uc2e4\ud604\ud558\ub294 \uacf5\uacf5 \uac74\ucd95\ubb3c\uc744 \uc124\uacc4\ud569\ub2c8\ub2e4. \uc9c0\uc5ed \uc0ac\ud68c\uc640 \uc870\ud654\ub97c \uc774\ub8e8\uba70 \ubaa8\ub450\ub97c \uc704\ud55c \uacf5\uac04\uc744 \ub9cc\ub4ed\ub2c8\ub2e4.<\/p>\r\n <\/div>\r\n <a href=\"http:\/\/bmkyun2.com\/en\/public-\uacf5\uacf5-\uac74\ucd95-design\/\" class=\"card-arrow\">\u2192<\/a>\r\n <div class=\"card-progress\"><div class=\"progress-bar\"><\/div><\/div>\r\n <\/div>\r\n \r\n <div class=\"showcase-card\" data-index=\"3\">\r\n <div class=\"card-bg\" style=\"background-image: url('https:\/\/images.unsplash.com\/photo-1600566753190-17f0baa2a6c3?w=1200');\"><\/div>\r\n <div class=\"card-overlay\">\r\n <div class=\"card-label\">RENOVATION<\/div>\r\n <h3 class=\"card-title\">\ub9ac\ubaa8\ub378\ub9c1<\/h3>\r\n <p class=\"card-description\">\uae30\uc874 \uacf5\uac04\uc5d0 \uc0c8\ub85c\uc6b4 \uac00\uce58\ub97c \ub354\ud569\ub2c8\ub2e4. \uc9c0\uc18d\uac00\ub2a5\ud55c \uc124\uacc4\ub85c \uacf5\uac04\uc744 \uc7ac\ud0c4\uc0dd\uc2dc\ud0a4\uba70 \ubbf8\ub798 \uac00\uce58\ub97c \ub192\uc785\ub2c8\ub2e4.<\/p>\r\n <\/div>\r\n <a href=\"http:\/\/bmkyun2.com\/en\/renovation-\ub9ac\ubaa8\ub378\ub9c1-design\/\" class=\"card-arrow\">\u2192<\/a>\r\n <div class=\"card-progress\"><div class=\"progress-bar\"><\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', function() {\r\n const cards = document.querySelectorAll('.showcase-card');\r\n let currentIndex = 1;\r\n let autoPlayInterval;\r\n \r\n \/\/ \ubaa8\ubc14\uc77c \uccb4\ud06c\r\n const isMobile = window.innerWidth <= 768;\r\n \r\n function setActive(index) {\r\n cards.forEach(card => {\r\n card.classList.remove('active');\r\n const progressBar = card.querySelector('.progress-bar');\r\n if (progressBar) {\r\n progressBar.style.animation = 'none';\r\n void progressBar.offsetWidth; \/\/ \ub9ac\ud50c\ub85c\uc6b0 \ud2b8\ub9ac\uac70\r\n }\r\n });\r\n \r\n cards[index].classList.add('active');\r\n const activeProgressBar = cards[index].querySelector('.progress-bar');\r\n if (activeProgressBar) {\r\n activeProgressBar.style.animation = 'progress 4s linear';\r\n }\r\n }\r\n \r\n function nextCard() {\r\n currentIndex = (currentIndex + 1) % cards.length;\r\n setActive(currentIndex);\r\n }\r\n \r\n function startAutoPlay() {\r\n \/\/ \ubaa8\ubc14\uc77c\uc5d0\uc11c\ub294 \uc790\ub3d9\uc7ac\uc0dd \ube44\ud65c\uc131\ud654\r\n if (!isMobile) {\r\n autoPlayInterval = setInterval(nextCard, 4000);\r\n }\r\n }\r\n \r\n cards.forEach((card, index) => {\r\n card.addEventListener('click', function(e) {\r\n \/\/ \ud654\uc0b4\ud45c \ud074\ub9ad \uc2dc \ud398\uc774\uc9c0 \uc774\ub3d9 \ud5c8\uc6a9\r\n if (e.target.classList.contains('card-arrow')) {\r\n return;\r\n }\r\n \r\n \/\/ \ubaa8\ubc14\uc77c\uc5d0\uc11c\ub294 \uce74\ub4dc \ud074\ub9ad \uc2dc \ubc14\ub85c \ud398\uc774\uc9c0 \uc774\ub3d9\r\n if (isMobile) {\r\n const arrow = card.querySelector('.card-arrow');\r\n if (arrow) {\r\n window.location.href = arrow.getAttribute('href');\r\n }\r\n return;\r\n }\r\n \r\n \/\/ PC\uc5d0\uc11c\ub294 \uce74\ub4dc \ud074\ub9ad \uc2dc active \uc804\ud658\r\n e.preventDefault();\r\n clearInterval(autoPlayInterval);\r\n currentIndex = index;\r\n setActive(currentIndex);\r\n startAutoPlay();\r\n });\r\n });\r\n \r\n startAutoPlay();\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-65565f3 e-con-full e-flex e-con e-parent\" data-id=\"65565f3\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-95abf9f elementor-widget elementor-widget-html\" data-id=\"95abf9f\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n.awards-section-3d {\r\n padding: 120px 5%;\r\n background: #0a0a0a;\r\n color: white;\r\n position: relative;\r\n overflow: hidden;\r\n}\r\n\r\n.grid-3d-bg {\r\n position: absolute;\r\n inset: 0;\r\n perspective: 1000px;\r\n pointer-events: none;\r\n}\r\n\r\n.grid-layer {\r\n position: absolute;\r\n inset: 0;\r\n background-image: \r\n linear-gradient(rgba(74, 144, 226, 0.1) 1px, transparent 1px),\r\n linear-gradient(90deg, rgba(74, 144, 226, 0.1) 1px, transparent 1px);\r\n background-size: 60px 60px;\r\n transform: rotateX(60deg) translateZ(-200px);\r\n animation: gridMove 20s linear infinite;\r\n}\r\n\r\n@keyframes gridMove {\r\n 0% { transform: rotateX(60deg) translateZ(-200px) translateY(0); }\r\n 100% { transform: rotateX(60deg) translateZ(-200px) translateY(60px); }\r\n}\r\n\r\n.particles-3d {\r\n position: absolute;\r\n inset: 0;\r\n}\r\n\r\n.particle {\r\n position: absolute;\r\n width: 3px;\r\n height: 3px;\r\n background: rgba(74, 144, 226, 0.6);\r\n border-radius: 50%;\r\n animation: float 8s ease-in-out infinite;\r\n box-shadow: 0 0 10px rgba(74, 144, 226, 0.8);\r\n}\r\n\r\n@keyframes float {\r\n 0%, 100% { transform: translateY(0) translateX(0); opacity: 0; }\r\n 10% { opacity: 1; }\r\n 90% { opacity: 1; }\r\n 100% { transform: translateY(-100vh) translateX(50px); opacity: 0; }\r\n}\r\n\r\n.awards-container {\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n position: relative;\r\n z-index: 1;\r\n}\r\n\r\n.awards-header {\r\n text-align: center;\r\n margin-bottom: 80px;\r\n}\r\n\r\n.awards-tag {\r\n font-size: 13px;\r\n letter-spacing: 3px;\r\n color: #999;\r\n margin-bottom: 20px;\r\n font-weight: 600;\r\n}\r\n\r\n.awards-title {\r\n font-size: 52px;\r\n font-weight: 700;\r\n margin-bottom: 20px;\r\n line-height: 1.2;\r\n color: #fff;\r\n text-shadow: 0 0 30px rgba(74, 144, 226, 0.3);\r\n}\r\n\r\n.awards-desc {\r\n font-size: 17px;\r\n color: #bbb;\r\n max-width: 600px;\r\n margin: 0 auto;\r\n}\r\n\r\n.stats-showcase {\r\n display: grid;\r\n grid-template-columns: repeat(4, 1fr);\r\n gap: 60px;\r\n margin-bottom: 100px;\r\n}\r\n\r\n.stat-item {\r\n text-align: center;\r\n opacity: 0;\r\n transform: translateY(30px);\r\n transition: all 0.6s ease;\r\n}\r\n\r\n.stat-item.visible {\r\n opacity: 1;\r\n transform: translateY(0);\r\n}\r\n\r\n.stat-number {\r\n font-size: 72px;\r\n font-weight: 700;\r\n color: #4a90e2;\r\n line-height: 1;\r\n margin-bottom: 15px;\r\n display: block;\r\n text-shadow: 0 0 20px rgba(74, 144, 226, 0.5);\r\n}\r\n\r\n.stat-label {\r\n font-size: 15px;\r\n color: #aaa;\r\n letter-spacing: 1px;\r\n}\r\n\r\n.awards-grid {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 30px;\r\n}\r\n\r\n.award-card {\r\n background: rgba(255,255,255,0.04);\r\n border: 1px solid rgba(255,255,255,0.1);\r\n border-radius: 16px;\r\n padding: 40px;\r\n transition: all 0.4s ease;\r\n opacity: 0;\r\n transform: translateY(30px);\r\n backdrop-filter: blur(10px);\r\n}\r\n\r\n.award-card.visible {\r\n opacity: 1;\r\n transform: translateY(0);\r\n}\r\n\r\n.award-card:hover {\r\n background: rgba(255,255,255,0.08);\r\n border-color: rgba(74, 144, 226, 0.5);\r\n transform: translateY(-8px) scale(1.02);\r\n box-shadow: 0 20px 40px rgba(74, 144, 226, 0.2);\r\n}\r\n\r\n.award-year {\r\n font-size: 48px;\r\n font-weight: 700;\r\n color: rgba(255,255,255,0.2);\r\n line-height: 1;\r\n margin-bottom: 20px;\r\n}\r\n\r\n.award-name {\r\n font-size: 20px;\r\n font-weight: 700;\r\n color: white;\r\n margin-bottom: 12px;\r\n line-height: 1.3;\r\n}\r\n\r\n.award-org {\r\n font-size: 14px;\r\n color: #999;\r\n margin-bottom: 15px;\r\n letter-spacing: 1px;\r\n}\r\n\r\n.award-project {\r\n font-size: 14px;\r\n color: #aaa;\r\n line-height: 1.6;\r\n}\r\n\r\n.recognition-badge {\r\n display: inline-block;\r\n padding: 8px 16px;\r\n background: rgba(74, 144, 226, 0.2);\r\n border: 1px solid rgba(74, 144, 226, 0.4);\r\n border-radius: 20px;\r\n font-size: 12px;\r\n color: #6ba3e8;\r\n margin-top: 15px;\r\n font-weight: 600;\r\n}\r\n\r\n\/* Mobile Responsive *\/\r\n@media (max-width: 768px) {\r\n .awards-section-3d {\r\n padding: 80px 5%;\r\n }\r\n\r\n .awards-header {\r\n margin-bottom: 60px;\r\n }\r\n\r\n .awards-tag {\r\n font-size: 12px;\r\n letter-spacing: 2px;\r\n }\r\n\r\n .awards-title {\r\n font-size: 32px;\r\n margin-bottom: 15px;\r\n }\r\n\r\n .awards-desc {\r\n font-size: 14px;\r\n }\r\n\r\n .stats-showcase {\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 40px;\r\n margin-bottom: 60px;\r\n }\r\n\r\n .stat-number {\r\n font-size: 48px;\r\n }\r\n\r\n .stat-label {\r\n font-size: 13px;\r\n }\r\n\r\n .awards-grid {\r\n grid-template-columns: 1fr;\r\n gap: 20px;\r\n }\r\n\r\n .award-card {\r\n padding: 30px;\r\n }\r\n\r\n .award-year {\r\n font-size: 36px;\r\n margin-bottom: 15px;\r\n }\r\n\r\n .award-name {\r\n font-size: 18px;\r\n margin-bottom: 10px;\r\n }\r\n\r\n .award-org {\r\n font-size: 13px;\r\n margin-bottom: 12px;\r\n }\r\n\r\n .award-project {\r\n font-size: 13px;\r\n }\r\n\r\n .recognition-badge {\r\n font-size: 11px;\r\n padding: 6px 14px;\r\n }\r\n}\r\n<\/style>\r\n\r\n<section class=\"awards-section-3d\">\r\n <div class=\"grid-3d-bg\">\r\n <div class=\"grid-layer\"><\/div>\r\n <\/div>\r\n \r\n <div class=\"particles-3d\" id=\"particles\"><\/div>\r\n \r\n <div class=\"awards-container\">\r\n <div class=\"awards-header\">\r\n <div class=\"awards-tag\">RECOGNITION<\/div>\r\n <h2 class=\"awards-title\">\uc218\uc0c1 \uc2e4\uc801 & \uc131\uacfc<\/h2>\r\n <p class=\"awards-desc\">\uc9c0\uc18d\uc801\uc778 \ud601\uc2e0\uacfc \ud0c1\uc6d4\ud55c \ub514\uc790\uc778\uc73c\ub85c \uad6d\ub0b4\uc678\uc5d0\uc11c \uc778\uc815\ubc1b\uace0 \uc788\uc2b5\ub2c8\ub2e4<\/p>\r\n <\/div>\r\n \r\n <div class=\"stats-showcase\">\r\n <div class=\"stat-item\">\r\n <span class=\"stat-number\" data-target=\"38\">0<\/span>\r\n <span class=\"stat-label\">\ub514\uc790\uc778 \uc5b4\uc6cc\ub4dc<\/span>\r\n <\/div>\r\n <div class=\"stat-item\">\r\n <span class=\"stat-number\" data-target=\"240\">0<\/span>\r\n <span class=\"stat-label\">\uc644\ub8cc \ud504\ub85c\uc81d\ud2b8<\/span>\r\n <\/div>\r\n <div class=\"stat-item\">\r\n <span class=\"stat-number\" data-target=\"15\">0<\/span>\r\n <span class=\"stat-label\">\ub144 \uacbd\ub825<\/span>\r\n <\/div>\r\n <div class=\"stat-item\">\r\n <span class=\"stat-number\" data-target=\"98\">0<\/span>\r\n <span class=\"stat-label\">\uace0\uac1d \ub9cc\uc871\ub3c4 %<\/span>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"awards-grid\">\r\n <div class=\"award-card\">\r\n <div class=\"award-year\">2024<\/div>\r\n <h3 class=\"award-name\">\ud55c\uad6d\uac74\ucd95\ubb38\ud654\ub300\uc0c1 \ub300\uc0c1<\/h3>\r\n <div class=\"award-org\">\ub300\ud55c\uac74\ucd95\uc0ac\ud611\ud68c<\/div>\r\n <p class=\"award-project\">\uc1a1\ub3c4\uc0b0\uc5c5 \ub3d9\ud0c4\uc0ac\uc625 \ud504\ub85c\uc81d\ud2b8<\/p>\r\n <span class=\"recognition-badge\">GRAND PRIZE<\/span>\r\n <\/div>\r\n \r\n <div class=\"award-card\">\r\n <div class=\"award-year\">2023<\/div>\r\n <h3 class=\"award-name\">\uc11c\uc6b8\uc2dc \uac74\ucd95\uc0c1<\/h3>\r\n <div class=\"award-org\">\uc11c\uc6b8\ud2b9\ubcc4\uc2dc<\/div>\r\n <p class=\"award-project\">\ud55c\uac15\ubcc0 \ubcf5\ud569\ubb38\ud654\uc13c\ud130<\/p>\r\n <span class=\"recognition-badge\">EXCELLENCE<\/span>\r\n <\/div>\r\n \r\n <div class=\"award-card\">\r\n <div class=\"award-year\">2023<\/div>\r\n <h3 class=\"award-name\">Green Building Award<\/h3>\r\n <div class=\"award-org\">\ud55c\uad6d\uadf8\ub9b0\ube4c\ub529\ud611\uc758\ud68c<\/div>\r\n <p class=\"award-project\">\uce5c\ud658\uacbd \uc2a4\ub9c8\ud2b8 \uc624\ud53c\uc2a4 \ud0c0\uc6cc<\/p>\r\n <span class=\"recognition-badge\">GOLD<\/span>\r\n <\/div>\r\n \r\n <div class=\"award-card\">\r\n <div class=\"award-year\">2022<\/div>\r\n <h3 class=\"award-name\">\uc544\uc2dc\uc544 \uac74\ucd95\uac00\ud611\ud68c\uc0c1<\/h3>\r\n <div class=\"award-org\">ARCASIA<\/div>\r\n <p class=\"award-project\">\uc0b0\uc545 \ube4c\ub77c \ud504\ub85c\uc81d\ud2b8<\/p>\r\n <span class=\"recognition-badge\">WINNER<\/span>\r\n <\/div>\r\n \r\n <div class=\"award-card\">\r\n <div class=\"award-year\">2022<\/div>\r\n <h3 class=\"award-name\">\uacf5\uac04\ubb38\ud654\ub300\uc0c1<\/h3>\r\n <div class=\"award-org\">\ubb38\ud654\uccb4\uc721\uad00\uad11\ubd80<\/div>\r\n <p class=\"award-project\">\ub3c4\uc2ec \uc7ac\uc0dd \ubcf5\ud569\uc2dc\uc124<\/p>\r\n <span class=\"recognition-badge\">MERIT<\/span>\r\n <\/div>\r\n \r\n <div class=\"award-card\">\r\n <div class=\"award-year\">2021<\/div>\r\n <h3 class=\"award-name\">Best Commercial Design<\/h3>\r\n <div class=\"award-org\">International Design Awards<\/div>\r\n <p class=\"award-project\">\uac15\ub0a8 \ud504\ub9ac\ubbf8\uc5c4 \uc624\ud53c\uc2a4<\/p>\r\n <span class=\"recognition-badge\">SILVER<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', function() {\r\n \/\/ \ud30c\ud2f0\ud074 \uc0dd\uc131\r\n const particlesContainer = document.getElementById('particles');\r\n for (let i = 0; i < 30; i++) {\r\n const particle = document.createElement('div');\r\n particle.className = 'particle';\r\n particle.style.left = Math.random() * 100 + '%';\r\n particle.style.animationDelay = Math.random() * 8 + 's';\r\n particle.style.animationDuration = (Math.random() * 4 + 6) + 's';\r\n particlesContainer.appendChild(particle);\r\n }\r\n \r\n const statItems = document.querySelectorAll('.stat-item');\r\n let hasAnimated = false;\r\n \r\n const observer = new IntersectionObserver(function(entries) {\r\n entries.forEach((entry, index) => {\r\n if (entry.isIntersecting) {\r\n setTimeout(() => {\r\n entry.target.classList.add('visible');\r\n }, index * 100);\r\n \r\n if (!hasAnimated && entry.target.classList.contains('stat-item')) {\r\n hasAnimated = true;\r\n animateCounters();\r\n }\r\n }\r\n });\r\n }, { threshold: 0.3 });\r\n \r\n statItems.forEach(item => observer.observe(item));\r\n \r\n function animateCounters() {\r\n const counters = document.querySelectorAll('.stat-number');\r\n counters.forEach(counter => {\r\n const target = parseInt(counter.getAttribute('data-target'));\r\n const duration = 2000;\r\n const fps = 60;\r\n const frames = duration \/ (1000 \/ fps);\r\n const increment = target \/ frames;\r\n let current = 0;\r\n \r\n const timer = setInterval(() => {\r\n current += increment;\r\n if (current >= target) {\r\n counter.textContent = target;\r\n clearInterval(timer);\r\n } else {\r\n counter.textContent = Math.floor(current);\r\n }\r\n }, 1000 \/ fps);\r\n });\r\n }\r\n \r\n const awardCards = document.querySelectorAll('.award-card');\r\n awardCards.forEach((card, index) => {\r\n observer.observe(card);\r\n card.style.transitionDelay = `${index * 0.1}s`;\r\n });\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-2bf1e18 e-con-full e-flex e-con e-parent\" data-id=\"2bf1e18\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-69cdac7 elementor-widget elementor-widget-html\" data-id=\"69cdac7\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n.news-final-section {\r\n padding: 120px 5%;\r\n background: linear-gradient(180deg, #fafafa 0%, #ffffff 100%);\r\n}\r\n\r\n.news-final-container {\r\n max-width: 1500px;\r\n margin: 0 auto;\r\n}\r\n\r\n.news-final-header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-bottom: 70px;\r\n}\r\n\r\n.news-final-title {\r\n font-size: 56px;\r\n font-weight: 700;\r\n color: #1a1a1a;\r\n margin: 0;\r\n letter-spacing: -1px;\r\n}\r\n\r\n.view-all-btn {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n padding: 14px 32px;\r\n background: #1a1a1a;\r\n color: white;\r\n text-decoration: none;\r\n border-radius: 30px;\r\n font-size: 14px;\r\n font-weight: 600;\r\n transition: all 0.3s ease;\r\n}\r\n\r\n.view-all-btn:hover {\r\n background: #333;\r\n transform: translateY(-2px);\r\n box-shadow: 0 10px 30px rgba(0,0,0,0.2);\r\n}\r\n\r\n.news-layout {\r\n display: grid;\r\n grid-template-columns: 1.5fr 1fr;\r\n gap: 40px;\r\n}\r\n\r\n.featured-card-large {\r\n background: white;\r\n border-radius: 20px;\r\n overflow: hidden;\r\n cursor: pointer;\r\n transition: all 0.4s ease;\r\n box-shadow: 0 10px 40px rgba(0,0,0,0.1);\r\n border: 1px solid #f0f0f0;\r\n opacity: 0;\r\n transform: translateY(30px);\r\n display: block;\r\n text-decoration: none;\r\n color: inherit;\r\n}\r\n\r\n.featured-card-large.visible {\r\n opacity: 1;\r\n transform: translateY(0);\r\n}\r\n\r\n.featured-card-large:hover {\r\n transform: translateY(-10px);\r\n box-shadow: 0 20px 60px rgba(0,0,0,0.15);\r\n}\r\n\r\n.featured-large-image {\r\n width: 100%;\r\n height: 400px;\r\n background-size: cover;\r\n background-position: center;\r\n position: relative;\r\n overflow: hidden;\r\n transition: transform 0.6s ease;\r\n}\r\n\r\n.featured-card-large:hover .featured-large-image {\r\n transform: scale(1.05);\r\n}\r\n\r\n.featured-category {\r\n position: absolute;\r\n top: 25px;\r\n left: 25px;\r\n padding: 8px 18px;\r\n background: rgba(74, 144, 226, 0.95);\r\n border-radius: 20px;\r\n font-size: 12px;\r\n font-weight: 700;\r\n letter-spacing: 1px;\r\n color: white;\r\n z-index: 2;\r\n}\r\n\r\n.featured-large-content {\r\n padding: 35px;\r\n}\r\n\r\n.featured-large-title {\r\n font-size: 28px;\r\n font-weight: 700;\r\n color: #1a1a1a;\r\n margin-bottom: 15px;\r\n line-height: 1.3;\r\n}\r\n\r\n.featured-large-excerpt {\r\n font-size: 15px;\r\n color: #666;\r\n line-height: 1.7;\r\n margin-bottom: 20px;\r\n}\r\n\r\n.featured-large-date {\r\n font-size: 14px;\r\n color: #999;\r\n font-weight: 500;\r\n}\r\n\r\n.news-list {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 30px;\r\n}\r\n\r\n.news-item {\r\n background: white;\r\n border-radius: 16px;\r\n overflow: hidden;\r\n display: flex;\r\n gap: 20px;\r\n padding: 25px;\r\n transition: all 0.4s ease;\r\n cursor: pointer;\r\n border: 1px solid #f0f0f0;\r\n opacity: 0;\r\n transform: translateX(30px);\r\n box-shadow: 0 5px 20px rgba(0,0,0,0.08);\r\n text-decoration: none;\r\n color: inherit;\r\n}\r\n\r\n.news-item.visible {\r\n opacity: 1;\r\n transform: translateX(0);\r\n}\r\n\r\n.news-item:hover {\r\n transform: translateY(-8px);\r\n box-shadow: 0 20px 40px rgba(0,0,0,0.12);\r\n border-color: #e0e0e0;\r\n}\r\n\r\n.news-item-image {\r\n width: 140px;\r\n min-width: 140px;\r\n height: 110px;\r\n border-radius: 12px;\r\n background-size: cover;\r\n background-position: center;\r\n transition: transform 0.5s ease;\r\n}\r\n\r\n.news-item:hover .news-item-image {\r\n transform: scale(1.1);\r\n}\r\n\r\n.news-item-content {\r\n flex: 1;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n}\r\n\r\n.news-item-meta {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n margin-bottom: 10px;\r\n}\r\n\r\n.news-item-label {\r\n font-size: 11px;\r\n font-weight: 700;\r\n color: #4a90e2;\r\n letter-spacing: 1px;\r\n text-transform: uppercase;\r\n}\r\n\r\n.news-item-date {\r\n font-size: 12px;\r\n color: #999;\r\n font-weight: 500;\r\n}\r\n\r\n.news-item-title {\r\n font-size: 17px;\r\n font-weight: 700;\r\n color: #1a1a1a;\r\n margin-bottom: 8px;\r\n line-height: 1.4;\r\n}\r\n\r\n.news-item-excerpt {\r\n font-size: 13px;\r\n color: #666;\r\n line-height: 1.6;\r\n}\r\n\r\n\/* Mobile Responsive - 2x2 Grid *\/\r\n@media (max-width: 768px) {\r\n .news-final-section {\r\n padding: 80px 5%;\r\n }\r\n\r\n .news-final-header {\r\n flex-direction: column;\r\n align-items: flex-start;\r\n gap: 20px;\r\n margin-bottom: 40px;\r\n }\r\n\r\n .news-final-title {\r\n font-size: 32px;\r\n }\r\n\r\n .view-all-btn {\r\n padding: 12px 28px;\r\n font-size: 13px;\r\n }\r\n\r\n \/* 2x2 \uadf8\ub9ac\ub4dc \ub808\uc774\uc544\uc6c3\uc73c\ub85c \ubcc0\uacbd *\/\r\n .news-layout {\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 15px;\r\n }\r\n\r\n \/* \ubaa8\ub4e0 \uce74\ub4dc\ub97c \ub3d9\uc77c\ud55c \uc2a4\ud0c0\uc77c\ub85c *\/\r\n .featured-card-large,\r\n .news-item {\r\n background: white;\r\n border-radius: 12px;\r\n overflow: hidden;\r\n padding: 0;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 0;\r\n height: 280px;\r\n }\r\n\r\n .featured-large-image,\r\n .news-item-image {\r\n width: 100%;\r\n height: 160px;\r\n min-width: 100%;\r\n border-radius: 0;\r\n }\r\n\r\n .featured-category {\r\n top: 15px;\r\n left: 15px;\r\n padding: 6px 14px;\r\n font-size: 10px;\r\n }\r\n\r\n .featured-large-content,\r\n .news-item-content {\r\n padding: 20px;\r\n flex: 1;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: flex-start;\r\n }\r\n\r\n .news-item-meta {\r\n margin-bottom: 8px;\r\n }\r\n\r\n .news-item-label {\r\n font-size: 10px;\r\n }\r\n\r\n .news-item-date,\r\n .featured-large-date {\r\n font-size: 11px;\r\n }\r\n\r\n .featured-large-title,\r\n .news-item-title {\r\n font-size: 15px;\r\n margin-bottom: 8px;\r\n line-height: 1.3;\r\n }\r\n\r\n .featured-large-excerpt,\r\n .news-item-excerpt {\r\n font-size: 12px;\r\n line-height: 1.5;\r\n display: -webkit-box;\r\n -webkit-line-clamp: 2;\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n }\r\n\r\n \/* \ub9ac\uc2a4\ud2b8 \ucee8\ud14c\uc774\ub108\ub97c \uadf8\ub9ac\ub4dc\ub85c \ubcc0\uacbd *\/\r\n .news-list {\r\n display: contents;\r\n }\r\n}\r\n<\/style>\r\n\r\n<section class=\"news-final-section\">\r\n <div class=\"news-final-container\">\r\n <div class=\"news-final-header\">\r\n <h2 class=\"news-final-title\">Latest News<\/h2>\r\n <a href=\"http:\/\/bmkyun2.com\/en\/latest-news-\uc804\uccb4\/\" class=\"view-all-btn\">\r\n <span>\uc804\uccb4 \ubcf4\uae30<\/span>\r\n <span>\u2192<\/span>\r\n <\/a>\r\n <\/div>\r\n \r\n <div class=\"news-layout\">\r\n <!-- \uc67c\ucabd: \ud070 \uce74\ub4dc \ud558\ub098\ub9cc -->\r\n <a href=\"http:\/\/bmkyun2.com\/en\/\ud55c\uad6d\uac74\ucd95\ubb38\ud654\ub300\uc0c1-\ub300\uc0c1-\uc218\uc0c1\/\" class=\"featured-card-large\">\r\n <div class=\"featured-large-image\" style=\"background-image: url('https:\/\/images.unsplash.com\/photo-1497366216548-37526070297c?w=1200');\">\r\n <span class=\"featured-category\">NEWS<\/span>\r\n <\/div>\r\n <div class=\"featured-large-content\">\r\n <h3 class=\"featured-large-title\">\ud55c\uad6d\uac74\ucd95\ubb38\ud654\ub300\uc0c1 \ub300\uc0c1 \uc218\uc0c1<\/h3>\r\n <p class=\"featured-large-excerpt\">\uc1a1\ub3c4\uc0b0\uc5c5 \ub3d9\ud0c4\uc0ac\uc625 \ud504\ub85c\uc81d\ud2b8\uac00 2024 \ud55c\uad6d\uac74\ucd95\ubb38\ud654\ub300\uc0c1 \ub300\uc0c1\uc744 \uc218\uc0c1\ud588\uc2b5\ub2c8\ub2e4. \ud601\uc2e0\uc801\uc778 \ub514\uc790\uc778\uacfc \uce5c\ud658\uacbd \uc124\uacc4\uac00 \ub192\uc740 \ud3c9\uac00\ub97c \ubc1b\uc558\uc2b5\ub2c8\ub2e4.<\/p>\r\n <span class=\"featured-large-date\">2025.05.28<\/span>\r\n <\/div>\r\n <\/a>\r\n \r\n <!-- \uc624\ub978\ucabd: \ub274\uc2a4 \ub9ac\uc2a4\ud2b8 -->\r\n <div class=\"news-list\">\r\n <a href=\"http:\/\/bmkyun2.com\/en\/2025\ub144-cma\uc5c5\ubb34\ubd84\uc11d-\uc900\uacc4\uc6cc\ud06c\uc0f5-news\/\" class=\"news-item\">\r\n <div class=\"news-item-image\" style=\"background-image: url('https:\/\/images.unsplash.com\/photo-1522071820081-009f0129c71c?w=600');\"><\/div>\r\n <div class=\"news-item-content\">\r\n <div class=\"news-item-meta\">\r\n <span class=\"news-item-label\">NEWS<\/span>\r\n <span class=\"news-item-date\">2025.04.04<\/span>\r\n <\/div>\r\n <h4 class=\"news-item-title\">2025\ub144 CMA\uc5c5\ubb34\ubd84\uc11d \uc900\uacc4\uc6cc\ud06c\uc0f5<\/h4>\r\n <p class=\"news-item-excerpt\">\ud601\uc2e0\uc801\uc778 \uc5c5\ubb34 \ud504\ub85c\uc138\uc2a4 \uac1c\uc120\uc744 \uc704\ud55c \uc804\uc0ac \uc6cc\ud06c\uc0f5\uc774 \uc131\uacf5\uc801\uc73c\ub85c \uc9c4\ud589\ub418\uc5c8\uc2b5\ub2c8\ub2e4.<\/p>\r\n <\/div>\r\n <\/a>\r\n \r\n <a href=\"http:\/\/bmkyun2.com\/en\/2025\ub144-4\uc6d4-\uc5ed\ub7c9\ud5a5\uc0c1-\uc138\ubbf8\ub098-news\/\" class=\"news-item\">\r\n <div class=\"news-item-image\" style=\"background-image: url('https:\/\/images.unsplash.com\/photo-1542744173-8e7e53415bb0?w=600');\"><\/div>\r\n <div class=\"news-item-content\">\r\n <div class=\"news-item-meta\">\r\n <span class=\"news-item-label\">NEWS<\/span>\r\n <span class=\"news-item-date\">2025.04.02<\/span>\r\n <\/div>\r\n <h4 class=\"news-item-title\">2025\ub144 4\uc6d4 \uc5ed\ub7c9\ud5a5\uc0c1 \uc138\ubbf8\ub098<\/h4>\r\n <p class=\"news-item-excerpt\">ChatGPT \ub4f1\uc7a5 \ubc30\uacbd\uacfc \ud568\uc758\uc5d0 \ub300\ud55c \uc804\ubb38\uac00 \uac15\uc5f0\uc774 \uc9c4\ud589\ub418\uc5c8\uc2b5\ub2c8\ub2e4.<\/p>\r\n <\/div>\r\n <\/a>\r\n \r\n <a href=\"http:\/\/bmkyun2.com\/en\/2025\ub144-1-4\ubd84\uae30-\uc131\uacfc\ubcf4\uace0-\uc138\ubbf8\ub098\/\" class=\"news-item\">\r\n <div class=\"news-item-image\" style=\"background-image: url('https:\/\/images.unsplash.com\/photo-1551818255-e6e10975bc17?w=600');\"><\/div>\r\n <div class=\"news-item-content\">\r\n <div class=\"news-item-meta\">\r\n <span class=\"news-item-label\">NEWS<\/span>\r\n <span class=\"news-item-date\">2025.03.27<\/span>\r\n <\/div>\r\n <h4 class=\"news-item-title\">2025\ub144 1\/4\ubd84\uae30 \uc131\uacfc\ubcf4\uace0 \uc138\ubbf8\ub098<\/h4>\r\n <p class=\"news-item-excerpt\">1\ubd84\uae30 \uc8fc\uc694 \uc131\uacfc\uc640 2\ubd84\uae30 \uc804\ub7b5\uc5d0 \ub300\ud55c \uacf5\uc720 \uc2dc\uac04\uc744 \uac00\uc84c\uc2b5\ub2c8\ub2e4.<\/p>\r\n <\/div>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', function() {\r\n const featuredLarge = document.querySelector('.featured-card-large');\r\n const newsItems = document.querySelectorAll('.news-item');\r\n \r\n const observer = new IntersectionObserver(function(entries) {\r\n entries.forEach((entry, index) => {\r\n if (entry.isIntersecting) {\r\n if (entry.target.classList.contains('news-item')) {\r\n setTimeout(() => {\r\n entry.target.classList.add('visible');\r\n }, index * 150);\r\n } else {\r\n entry.target.classList.add('visible');\r\n }\r\n }\r\n });\r\n }, { threshold: 0.2 });\r\n \r\n if (featuredLarge) observer.observe(featuredLarge);\r\n newsItems.forEach(item => observer.observe(item));\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>\uacf5\uac04\uc758 \uc7ac\ubc1c\uacac Rediscovering Space \ube5b\uacfc \uad6c\uc870, \uc0ac\ub78c\uacfc \uacf5\uac04\uc758 \uad00\uacc4\ub97c \ud0d0\uad6c\ud558\uba70\uc2dc\ub300\ub97c \ucd08\uc6d4\ud558\ub294 \uac74\ucd95\uc744 \ub9cc\ub4e4\uc5b4\uac11\ub2c8\ub2e4 \ube0c\ub79c\ub4dc\ub97c \ub2f4\ub2e4 Brand in Space \uc0c1\uc5c5 \uacf5\uac04\uc5d0 […]<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-75","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/bmkyun2.com\/en\/wp-json\/wp\/v2\/pages\/75","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bmkyun2.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bmkyun2.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bmkyun2.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bmkyun2.com\/en\/wp-json\/wp\/v2\/comments?post=75"}],"version-history":[{"count":90,"href":"https:\/\/bmkyun2.com\/en\/wp-json\/wp\/v2\/pages\/75\/revisions"}],"predecessor-version":[{"id":970,"href":"https:\/\/bmkyun2.com\/en\/wp-json\/wp\/v2\/pages\/75\/revisions\/970"}],"wp:attachment":[{"href":"https:\/\/bmkyun2.com\/en\/wp-json\/wp\/v2\/media?parent=75"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}