{"id":3894,"date":"2024-12-27T00:10:02","date_gmt":"2024-12-27T00:10:02","guid":{"rendered":"https:\/\/goe0701.mycafe24.com\/?page_id=3894"},"modified":"2025-01-22T04:03:26","modified_gmt":"2025-01-22T04:03:26","slug":"%eb%a9%94%ec%9d%b8%ec%9d%b8%ed%8a%b8%eb%a1%9c_ch","status":"publish","type":"page","link":"https:\/\/goeng.co.kr\/?page_id=3894&lang=zh","title":{"rendered":"\uba54\uc778\uc778\ud2b8\ub85c_ch"},"content":{"rendered":"\n<meta http-equiv=\"Refresh\" content=\" 7;URL=https:\/\/goeng.co.kr\/?page_id=3082\">\n\n<style>\n\nheader, footer, #rmp_menu_trigger-914, .fixIconWrap {display:none;}\n.intro-box {width:100%; margin:0 auto; height: 100vh; display: flex; justify-content: center; align-items: center;    flex-direction: column; gap: 75px;}\n.goeWrap {display: flex; justify-content: center; align-items: center;z-index: 100;\nanimation: hide2 0.5s 4.5s ease-in-out forwards; }\n.intrologoWrap {display: flex; justify-content: center; align-items: center; width: 100%;    position: relative;}\n.imgWrap  {animation: bottomshow 2s 4.7s linear forwards ; \n opacity: 0;    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);}\n.imgWrap img {    width: 95%; margin: 0 auto; }\n\n\/* \uc704 *\/\n.sideBar {width: 100%;height: 20px;}\n.sideBar.top {     height: 0;\n    width: 20px;  \nanimation: sidetop 0.5s 1.3s ease-in-out forwards; \n    position: absolute;\n    top: 0;\n        left: calc(50% + 4px);\n    transform: translateX(-50%); overflow: hidden;}\n.sideBar.top .bar {    width: 20px; animation: hide3 1s 2.3s ease-in-out forwards;\n    background: #b4222c;\n    top: 0;height: 100%;}\n.sideBar.top2 {     height: 0;\n    width: 10px;  animation: sidetop2 0.5s 1.3s ease-in-out forwards;\n    position: absolute;\n    top: 0;\n        left: calc(50% + 3px);\n    transform: translateX(-50%); overflow: hidden; display:none; }\n.sideBar.top2 .bar {    width: 10px; \nanimation: hide3 1s 2.3s ease-in-out forwards;\n    background: #b4222c;\n    top: 0;height: 100%;}\n.sideBar.top3 {     height: 0;\n    width: 7px;  animation: sidetop3 0.5s 1.3s ease-in-out forwards;\n    position: absolute;\n    top: 0;\n        left: calc(50% + 2px);\n    transform: translateX(-50%); overflow: hidden; display:none; }\n.sideBar.top3 .bar {    width: 7px; \nanimation: hide3 0.5s 2.3s ease-in-out forwards;\n    background: #b4222c;\n    top: 0;height: 100%;}\n\n\/* \uc0ac\uc774\ub4dc\ubc14 \uc704 \ud0a4\ud504\ub808\uc784 *\/\n@keyframes sidetop {\n    0% {\n            height: 0; opacity: 0;\n    }\n    100% {\n          height:  calc(50% - 125px); opacity: 1;\n    }\n}\n@keyframes sidetop2 {\n    0% {\n            height: 0; opacity: 0;\n    }\n    100% {\n          height:  calc(50% - 60px); opacity: 1;\n    }\n}\n@keyframes sidetop3 {\n    0% {\n            height: 0; opacity: 0;\n    }\n    100% {\n          height:  calc(50% - 40px); opacity: 1;\n    }\n}\n\n\n\/* \uc67c\ucabd *\/\n.sideBar.left {animation: sideleft 0.5s ease-in-out forwards;opacity: 0\nwidth: 100%;     transform: rotate(180deg) translateX(100%);}\n.sideBar.left .bar {background: #b4222c;width: calc(100% + 25px);height: 20px;position: relative;\n transform: translateY(0);  animation: hideleft 0.5s 1.3s ease-in-out forwards; \n}\n\n\/* \uc0ac\uc774\ub4dc\ubc14 \uc67c\ucabd \ud0a4\ud504\ub808\uc784 *\/\n@keyframes sideleft {\n    0% {\n        width: 0; opacity: 0; transform: rotate(180deg) translateX(100%);\n    }\n    100% {\n        width: calc(100% + 25px); opacity: 1; transform: rotate(180deg) translateX(-25px);\n    }\n}\n@keyframes sideleft2 {\n    0% {\n        width: 0; opacity: 0; transform: rotate(180deg) translateX(100%);\n    }\n    100% {\n        width: calc(100% + 25px); opacity: 1; transform: rotate(180deg) translateX(-10px);\n    }\n}\n\/*\uc624\ub978\ucabd*\/\n.sideBar.right { animation: sideright 0.5s 2.1s ease-in-out forwards; opacity: 0; width:100%;}\n.sideBar.right .bar {    background: #7a7f84;width: calc(100% + 26px);height: 20px;right: 0;position: relative;transform: translate(-26px, -4px); animation: hide 1s 3.1s ease-in-out forwards; }\n\n\/* \uc0ac\uc774\ub4dc\ubc14 \uc624\ub978\ucabd \ud0a4\ud504\ub808\uc784 *\/\n@keyframes sideright {\n    0% {\n        width: 100% ; opacity: 0;\n    }\n    100% {\n        width: calc(100%); opacity: 1;\n    }\n}\n\n\n.logo-container.logo01 {     margin: 0 54px;\n    position: relative;\n    width: 200px;\n    height: 200px;\n    transform: rotate(135deg); \/* G \ubaa8\uc591 \ub9cc\ub4e4\uae30 \uc704\ud55c \ud68c\uc804 *\/ \n}\n\n\/* \uae30\ubcf8 \ub9c9\ub300 \uc2a4\ud0c0\uc77c *\/\n.logo01 .bar {\n    position: absolute;\n    background-color: #b4222c; \/* \ube68\uac04\uc0c9 *\/\n    transform-origin: bottom;\n    transform: scaleY(0);\n    animation: grow 0.5s ease-in-out forwards; opacity: 0;\n}\n\n\/* \uac01 \ub9c9\ub300 \uc704\uce58\uc640 \uc560\ub2c8\uba54\uc774\uc158 \ub51c\ub808\uc774 *\/\n.logo01 .bar1 {\n    width: 100%;\n    height: 20px;\n    left: 0;\n    bottom: 0;\n    animation-delay: 0.5s;\n}\n\n.logo01 .bar2 {\n    width: 20px;\n    height: 100%;\n    right: 0;\n    top: 0;\n    animation-delay: 0.7s;\n}\n\n.logo01 .bar3 {\n    width: 100%;\n    height: 20px;\n    left: 0;\n    top:0;\n    animation-delay: 0.9s;\n}\n\n.logo01 .bar4 {\nwidth: 60%;\n    height: 20px;\n    right: 100px;\n    top: 42px;\n    animation-delay: 1.1s;\n    transform: rotate(45deg) !important;\n}\n\n\/* \uc560\ub2c8\uba54\uc774\uc158 \ud0a4\ud504\ub808\uc784 *\/\n@keyframes grow {\n    0% {\n        transform: scaleY(0);opacity: 0;\n    }\n    100% {\n        transform: scaleY(1); opacity: 1;\n    }\n}\n\n.diamond-container {    z-index: 1;\n    position: relative;\n    width: 200px;\n    height: 200px;\n    transform: rotate(315deg); \/* \ub2e4\uc774\uc544\ubaac\ub4dc \ubaa8\uc591 *\/\n}\n\n.diamond-container .bar {opacity: 0;\n    position: absolute;\n    background-color: #b4222c; \/* \ube68\uac04\uc0c9 *\/\n    transform-origin: center;\n    opacity: 0;\n    animation: draw 0.5s ease-in-out forwards;\n}\n\n\/* \uac01 \ub9c9\ub300\uc758 \uc704\uce58\uc640 \ud06c\uae30 *\/\n.diamond-container .bar1 {\n    width: 100%;\n    height: 20px;\n    top: 0;\n    left: 0;\n    transform: scaleX(0);\n    animation-delay: 1.5s;\n}\n\n.diamond-container .bar2 {\n    width: 20px;\n    height: 100%;\n    top: 0;\n    right: 0;\n    transform: scaleY(0);\n    animation-delay: 1.7s;\n}\n\n.diamond-container .bar3 {\n    width: 100%;\n    height: 20px;\n    bottom: 0;\n    left: 0;\n    transform: scaleX(0);\n    animation-delay: 1.9s;\n}\n\n.diamond-container .bar4 {\n    width: 20px;\n    height: 100%;\n    top: 0;\n    left: 0;\n    transform: scaleY(0);\n    animation-delay: 2.1s;\n}\n\n\/* \uc560\ub2c8\uba54\uc774\uc158 \ud0a4\ud504\ub808\uc784 *\/\n@keyframes draw {\n    0% {\n        transform: scale(0);\n        opacity: 0;\n    }\n    100% {\n        transform: scale(1);\n        opacity: 1;\n    }\n}\n\n@keyframes show {\n  0% { opacity:0; }\n  100% { opacity:1; }\n}\n\n.e-container {    margin: 0 54px; \n    position: relative;\n    width: 200px;\n    height: 200px; transform: rotate(-45deg);\n}\n\n\/* \uae30\ubcf8 \ub9c9\ub300 \uc2a4\ud0c0\uc77c *\/\n.e-container .bar {opacity: 0;\n    position: absolute;\n    background-color: #7a7f84; \/* \ud68c\uc0c9 \ub9c9\ub300 \uc0c9\uc0c1 *\/\n    transform-origin: left center;\n    transform: scaleX(0);\n    animation: egrow 0.5s ease-in-out forwards;\n}\n\n\/* \uac01 \ub9c9\ub300 \uc704\uce58\uc640 \ud06c\uae30 *\/\n.e-container .bar1 {\n    width: 200px;\n    height: 20px;\n    top: 0;\n    left: 0;\n    animation-delay: 2.3s;\n}\n\n.e-container .bar2 {\n    width: 200px;\n    height: 20px;\n    top: 45%;\n    left: 0;\n    transform: translateY(-50%) scaleX(0);\n    animation-delay: 2.5s;\n}\n\n.e-container .bar3 {\n    width: 200px;\n    height: 20px;\n    bottom: 0;\n    left: 0;\n    animation-delay: 2.7s;\n}\n\n.e-container .bar4 {\n    width: 20px;\n    height: 200px;\n    top: 0;\n    left: 0;\n    transform-origin: top center;\n    transform: scaleY(0);\n    animation-delay: 2.9s;\n}\n\n\/* \uc560\ub2c8\uba54\uc774\uc158 \ud0a4\ud504\ub808\uc784 *\/\n@keyframes egrow {\n    0% {\n        transform: scale(0);opacity: 0;\n    }\n    100% {\n        transform: scale(1);opacity: 1;\n    }\n}\n\n\/* \ud558\ub2e8 \uc601\uc5b4 *\/\n@keyframes bottomshow {\n  0% { opacity:0;     transform: translate(-50%, -50%) scale(1.0); }\n  50% { opacity:1;  transform: translate(-50%, -50%) scale(1.0); }\n  100% { opacity:0;  transform: translate(-50%, -50%) scale(1.5); }\n}\n\n\/* \uc0ac\uc774\ub4dc\ubc14 \uc5c6\uc560\uae30 *\/\n@keyframes hide {\n    0% {\n        width: calc(100% + 25px); opacity: 1;\n    }\n    100% {\n        width: 0; opacity: 0;\n    }\n}\n@keyframes hideleft {\n    0% {\n        width:100%; opacity: 1; \n    }\n    100% {\n        width:0%; opacity: 0; \n    }\n}\n\n@keyframes hide2 {\n    0% {\n        opacity: 1;\n    }\n    100% {\n        opacity: 0;\n    }\n}\n@keyframes hide3 {\n    0% {\n        transform: translateY(0); opacity: 1;\n    }\n    100% {\n           transform: translateY(100%); opacity: 0;\n    }\n}\n\n@media(max-width:768px) {\n.logo-container.logo01, .diamond-container, .e-container {    width: 100px;height: 100px;}\n.logo01 .bar2, .diamond-container .bar2,.diamond-container .bar4, .e-container .bar4  {width:10px;}\n.logo01 .bar1, .logo01 .bar3, .logo01 .bar4,.diamond-container .bar1,.diamond-container .bar3 , .e-container .bar1, .e-container .bar2, .e-container .bar3{height:10px;}\n.e-container .bar1, .e-container .bar2, .e-container .bar3 {width:100px;}\n.e-container .bar4 {height:100px;}\n.logo01 .bar4 {right: 56px;top: 18px;}\n.imgWrap img {width: 80%; }\n.logo-container.logo01, .e-container {margin: 0 28px;}\n.sideBar.left .bar { height: 10px; transform: translateY(50%); width: calc(100% + 25px) !important;}\n.sideBar.right .bar { height: 10px;    width: calc(100% + 15px) !important;    transform: translate(-15px, 3px); }\n\n\/* \ubaa8\ubc14\uc77c\ucd94\uac00 *\/\n.sideBar.top {display:none;}\n.sideBar.top2 {display:block;}\n.sideBar.top, .sideBar.top .bar {width:10px;}\n\n}\n\n@media(max-width:500px) {\n .intro-box img {width: 100%;}\n\n\/* \ubaa8\ubc14\uc77c\ucd94\uac00 *\/\n.sideBar.top2 {display:none;}\n.sideBar.top3 {display:block;}\n.logo-container.logo01, .diamond-container, .e-container {    width: 70px;height: 70px;}\n.logo01 .bar2, .diamond-container .bar2,.diamond-container .bar4, .e-container .bar4  {width:7px;}\n.logo01 .bar1, .logo01 .bar3, .logo01 .bar4,.diamond-container .bar1,.diamond-container .bar3 , .e-container .bar1, .e-container .bar2, .e-container .bar3, .sideBar.left .bar, .sideBar.right .bar {height:7px;}\n.e-container .bar1, .e-container .bar2, .e-container .bar3 {width:70px;}\n.e-container .bar4 {height:70px;}\n.sideBar.left { animation: sideleft2 0.5s ease-in-out forwards;}\n.sideBar.left .bar {width: calc(100% + 10px) !important;position: relative;top: 2px;}\n.sideBar.right .bar {transform: translate(-10px, 5px);}\n.logo-container.logo01, .e-container {margin: 0 20px;}\n.logo01 .bar4 { right: 35px; top: 13px;}\n}\n<\/style>\n\n\n\n<div id=\"intro-box\" class=\"intro-box\">\n<div class=\"sideBar top\"><div class=\"bar\"><\/div><\/div>\n<div class=\"sideBar top2\"><div class=\"bar\"><\/div><\/div>\n<div class=\"sideBar top3\"><div class=\"bar\"><\/div><\/div>\n<div class=\"intrologoWrap\">\n\n<div class=\"sideBar left\"><div class=\"bar\"><\/div><\/div>\n\n<div class=\"goeWrap\">\n    <div class=\"logo-container logo01\">\n        <div class=\"bar bar1\"><\/div>\n        <div class=\"bar bar2\"><\/div>\n        <div class=\"bar bar3\"><\/div>\n        <div class=\"bar bar4\"><\/div>\n    <\/div>\n    <div class=\"diamond-container\">\n        <div class=\"bar bar1\"><\/div>\n        <div class=\"bar bar2\"><\/div>\n        <div class=\"bar bar3\"><\/div>\n        <div class=\"bar bar4\"><\/div>\n    <\/div>\n    <div class=\"e-container\">\n        <div class=\"bar bar1\"><\/div>\n        <div class=\"bar bar2\"><\/div>\n        <div class=\"bar bar3\"><\/div>\n        <div class=\"bar bar4\"><\/div>\n    <\/div>\n<\/div><!--goeWrap-->\n\n<div class=\"sideBar right\"><div class=\"bar\"><\/div><\/div>\n\n<\/div><!--intrologoWrap-->\n\n<div class=\"imgWrap\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2024\/12\/intro_bottom.png\" alt=\"logo\"><\/div>\n\n<\/div> <!--intro-box-->\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-fullwidth.php","meta":{"kt_blocks_editor_width":"","footnotes":""},"class_list":["post-3894","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/goeng.co.kr\/index.php?rest_route=\/wp\/v2\/pages\/3894","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/goeng.co.kr\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/goeng.co.kr\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/goeng.co.kr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/goeng.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3894"}],"version-history":[{"count":4,"href":"https:\/\/goeng.co.kr\/index.php?rest_route=\/wp\/v2\/pages\/3894\/revisions"}],"predecessor-version":[{"id":4461,"href":"https:\/\/goeng.co.kr\/index.php?rest_route=\/wp\/v2\/pages\/3894\/revisions\/4461"}],"wp:attachment":[{"href":"https:\/\/goeng.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3894"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}