--- src/main/webapp/publish/usr/css/content_eng.css
+++ src/main/webapp/publish/usr/css/content_eng.css
... | ... | @@ -11,779 +11,55 @@ |
| 11 | 11 |
|
| 12 | 12 |
/* 조직도 */ |
| 13 | 13 |
.organization_ceo,.organization_cto,.organization_item{font-size:20px;padding:8px;}
|
| 14 |
-.organization_team li{padding:8px 20px;min-height:56px;}
|
|
| 14 |
+.organization_team li{padding:8px 20px;min-height:56px;height:auto;}
|
|
| 15 | 15 |
|
| 16 |
-/* 오시는 길 */ |
|
| 17 |
-/* 오시는 길 -> Contact us로 변경*/ |
|
| 18 |
-.mail_banner{position:relative;border-radius:20px;background:#5F48B0 ;background-size:cover;margin:0 0 80px 0;padding:78px 140px;}
|
|
| 19 |
-.mail_banner::before{position:absolute;content:"";width:100%;height:100%;background:#5F48B0 url(/publish/usr/images/company/mail_banner_bg.png) no-repeat center;background-size:cover;mix-blend-mode:soft-light;left:0;top:0;}
|
|
| 20 |
-.mail_banner strong{font-family:var(--secondary-title-font);font-size:52px;font-weight:bold;color:#fff;}
|
|
| 21 |
-.mail_banner span{display:block;padding:12px 0 0 0;font-family:var(--secondary-title-font);font-size:22px;font-weight:500;color:#fff;}
|
|
| 22 |
-.mail_banner img{position:absolute;right:118px;top:50px;}
|
|
| 23 |
- |
|
| 24 |
-.location_list{display:flex;flex-direction:column;gap:80px;}
|
|
| 25 |
-.location_list>li{display:flex;gap:60px;align-items:center;}
|
|
| 26 |
-.location_area{width:760px;height:500px;border-radius:20px;background:#f2f4f6;}
|
|
| 27 |
- |
|
| 28 |
-.location_list .title{display:flex;margin:0 0 20px 0;font-size:36px;align-items:center;gap:12px;}
|
|
| 29 |
-.location_list .location{width:32px;height:42px;background:url(/publish/usr/images/component/location.png) no-repeat center;}
|
|
| 30 |
-.location_list .info{width:calc(100% - 820px);}
|
|
| 31 |
-.location_list .info p{font-size:20px;font-weight:400;}
|
|
| 32 |
- |
|
| 33 |
-.location_list .boxs{display:flex;margin:40px 0 0 0;flex-direction:column;gap:20px;}
|
|
| 34 |
-.location_list .boxs li{display:flex;height:80px;font-size:20px;font-weight:bold;background:#f2f4f6;border-radius:20px;justify-content:center;align-items:center;gap:12px;}
|
|
| 35 |
-.location_list .phone{width:40px;height:40px;background:url(/publish/usr/images/component/phone.png) no-repeat center center;}
|
|
| 36 |
-.location_list .email{width:40px;height:40px;background:url(/publish/usr/images/component/email.png) no-repeat center center;}
|
|
| 37 |
-.location_list .fax{width:40px;height:40px;background:url(/publish/usr/images/component/fax.png) no-repeat center center;}
|
|
| 38 |
-.location_list .btn_map{width:100%;height:80px;font-size:20px;font-weight:bold;margin:20px 0 0 0;border:1px solid #000;border-radius:100px;;}
|
|
| 39 |
- |
|
| 40 |
-/* 연혁 */ |
|
| 41 |
-.history_area{position:relative;display:flex;height:818px;gap:89px;overflow:hidden;}
|
|
| 42 |
-.history_year{position:sticky;width:600px;display:flex;height:900px;flex-shrink:0;flex-direction:column;top:0;}
|
|
| 43 |
-.year_item{position:absolute;text-align:right;opacity:0;transform:translateY(-100PX);transition:opacity 0.6s ease-in-out, transform 0.6s ease-in-out;top:0;left:0;}
|
|
| 44 |
-.year_item.active{opacity:1;transform:translateY(0);}
|
|
| 45 |
-.year_item strong{font-family:var(--secondary-title-font);font-size:60px;font-weight:bold;}
|
|
| 46 |
-.year_item .img_box{margin:20px 0 0 0;border-radius:20px;overflow:hidden;}
|
|
| 47 |
-.history_month {position:absolute;width:100%;max-height:100%;overflow-y:auto;-ms-overflow-style:none;scrollbar-width:none;}
|
|
| 48 |
-.mobile_year{display:none;font-family:var(--secondary-title-font);font-size:60px;font-weight:bold;}
|
|
| 49 |
-.month_ul{display:flex;width:calc(100% - 690px);flex-direction:column;margin:0 0 80px auto;}
|
|
| 50 |
-.month_ul li:first-child{border-top:1px solid #e0e0e0;}
|
|
| 51 |
-.month_ul li:last-child{border:0;}
|
|
| 52 |
-.month_ul li{border-bottom:1px solid #e0e0e0;}
|
|
| 53 |
-.month_ul dl{display:flex;padding:40px 0;gap:60px;align-items:flex-start;}
|
|
| 54 |
-.month_ul dd{width:calc(100% - 80px);}
|
|
| 55 |
-.month_ul dd p:nth-child(n+2){margin:36px 0 0 0;}
|
|
| 56 |
-.month_ul .month{width:80px;font-family:var(--secondary-title-font);font-size:24px;font-weight:bold;color:var(--primary-color);letter-spacing:-0.5px;}
|
|
| 57 |
-.month_ul strong{font-size:20px;font-weight:600;;}
|
|
| 58 |
-.month_ul .summary{display:block;font-size:20px;font-weight:400;color:#444;margin:8px 0 0 0;}
|
|
| 59 |
- |
|
| 60 |
-#year_2025 .month{width:100px;}
|
|
| 61 |
- |
|
| 62 |
-.history_month.active{position:fixed;left:0;top:207px;}
|
|
| 63 |
-.active .month_ul{width:calc(100% - 903px);margin:0 5.7% 0 auto;}
|
|
| 64 |
- |
|
| 65 |
- |
|
| 66 |
-/* ================================================== |
|
| 67 |
- Platform Technologies |
|
| 16 |
+ |
|
| 17 |
+ /* ================================================== |
|
| 18 |
+ Pipeline |
|
| 68 | 19 |
================================================== */ |
| 69 |
-.autophagy_common{padding:40px 20px;}
|
|
| 70 |
-.autophagy_common img{margin:0 auto;}
|
|
| 71 |
- |
|
| 72 |
-.figure_content{display:flex;gap:65px;align-items:center;}
|
|
| 73 |
-.figure_content.column{flex-direction:column;align-items:flex-start;}
|
|
| 74 |
- |
|
| 75 |
-.figure_content .box{display:flex;width:50%;padding:50px 30px;justify-content:center;align-items:center;box-sizing:border-box;}
|
|
| 76 |
-.figure_content .box img{mix-blend-mode:multiply;}
|
|
| 77 |
-.figure_content.column .box{width:100%;margin:20px 0 60px 0;}
|
|
| 78 |
-.figure_content.column .figure_desc{width:100%;}
|
|
| 79 |
- |
|
| 80 |
-.figure_desc{display:flex;flex-direction:column;gap:24px;}
|
|
| 81 |
-.figure_desc li{min-height:30px;font-size:24px;font-weight:400;text-indent:32px;}
|
|
| 82 |
-.figure_desc.circle li{background:url(/publish/usr/images/component/list_circle.png) no-repeat left 8px;}
|
|
| 83 |
-.figure_desc.square li{background:url(/publish/usr/images/component/list_square.png) no-repeat left 8px;}
|
|
| 84 |
- |
|
| 85 |
-.paper_content{display:flex;margin:0 0 40px 0;flex-wrap:wrap;gap:20px;}
|
|
| 86 |
-.paper_content .box{width:calc(50% - 10px);padding:32px 20px;text-align:center;}
|
|
| 87 |
-.paper_content img{max-height:407px;margin:0 auto 12px auto;}
|
|
| 88 |
-.paper_content .summary{padding:0 0 0 28px;font-size:24px;font-weight:500;background:url(/publish/usr/images/component/paper_square.png) no-repeat left center;}
|
|
| 89 |
- |
|
| 90 |
-/* Anti Cancer */ |
|
| 91 |
-.cancer .figure_content .box img{mix-blend-mode:darken;}
|
|
| 92 |
- |
|
| 93 |
-/* R&D */ |
|
| 94 |
-.rd .figure_content.column{gap:40px;}
|
|
| 95 |
-.rd .figure_content .box{margin:0;}
|
|
| 96 |
-.rd .figure_content .box:first-child img{mix-blend-mode: normal;}
|
|
| 97 |
- |
|
| 98 |
-/* Pipeline Summary */ |
|
| 99 |
-.pipeline table{table-layout:fixed;width:100%;border-spacing:12px;border-collapse:separate;}
|
|
| 100 |
-.pipeline thead th{font-family:var(--primary-title-font);font-size:20px;font-weight:500;padding:10px 0;background:#AFBCDF;border-radius:8px;word-break:break-all;}
|
|
| 101 |
-.pipeline thead tr:nth-child(2) th{height:44px;font-size:16px;background:#EBEFF7;}
|
|
| 102 |
- |
|
| 103 |
-.pipeline tr>th,.pipeline tr>td{height:84px;padding:10px 0;border-radius:8px;font-size:20px;font-weight:500;line-height:1.2;text-align:center;word-break:break-all;}
|
|
| 104 |
-.pipeline tbody th{background:#f4f4f4;}
|
|
| 105 |
-.pipeline tbody td{position:relative;border:1px solid #e0e0e0;background:#fff;}
|
|
| 106 |
-.pipeline tbody td[colspan="6"]{border:2px solid #cbd7ff;}
|
|
| 107 |
-.pipeline tbody td.primary_light{background:#E9EDF8;border:0;}
|
|
| 108 |
-.pipeline .graph{position:absolute;width:100%;top:50%;transform:translateY(-50%);}
|
|
| 109 |
-.pipeline .graph span{position:relative;display:flex;height:30px;border-radius:30px 0 0 30px;background:linear-gradient(90deg, #DBE5FF 0%, #3B5BB0 100%);color:#fff;text-shadow:0 0 5px rgba(0,0,0,0.3);justify-content:center;align-items:center;left:10px}
|
|
| 110 |
-.pipeline .graph span::after{position:absolute;content:"";width:51px;height:70px;background:url(/publish/usr/images/major_result/polygon_blue.png) no-repeat center center;right:-44px;}
|
|
| 111 |
-.pipeline .graph.purple span{background:linear-gradient(90deg, #EFEDF7 0%, #5F48B0 100%);}
|
|
| 112 |
-.pipeline .graph.purple span::after{background:url(/publish/usr/images/major_result/polygon_purple.png) no-repeat center center;}
|
|
| 113 |
-.pipeline .graph.orange span{background:linear-gradient(90deg, #FFEADF 0%, #FF8748 100%);}
|
|
| 114 |
-.pipeline .graph.orange span::after{background:url(/publish/usr/images/major_result/polygon_orange.png) no-repeat center center;}
|
|
| 115 |
-.pipeline .graph1 span{width:calc((100% / 6) - 20px);}
|
|
| 116 |
-.pipeline .graph2 span{width:calc((100% / 6)*2 - 100px);}
|
|
| 117 |
-.pipeline .graph3 span{width:calc((100% / 6)*3 - 100px);}
|
|
| 118 |
-.pipeline .graph4 span{width:calc((100% / 6)*4 - 100px);}
|
|
| 119 |
-.pipeline .graph5 span{width:calc((100% / 6)*5 - 100px);}
|
|
| 120 |
- |
|
| 121 |
- |
|
| 122 |
-.pipeline table ul{display:flex;}
|
|
| 123 |
-.pipeline table ul li{width:calc((100%/6) - 5px);height:42px;border-right:1px dashed #bbc8ea;font-size:16px;font-weight:bold;color:#3b5bb0;flex-grow:1;}
|
|
| 124 |
-.pipeline table ul li:last-child{border:0;}
|
|
| 125 |
-/* .pipeline tr:first-child ul li:nth-child(n+5){flex-grow:0.5;color:#3b5bb0;} */
|
|
| 126 |
- |
|
| 127 |
-.pipeline .purple+ul li{color:#5F48B0;}
|
|
| 128 |
-.pipeline .purple+ul li:nth-child(4){flex-grow:1.2;}
|
|
| 129 |
-.pipeline .orange+ul li{color:#FF8748;}
|
|
| 130 |
-.pipeline .orange+ul li:nth-child(5){flex-grow:1.2;}
|
|
| 131 |
- |
|
| 132 |
-.dl_wrap{display:flex;width:100%;gap:32px;}
|
|
| 133 |
-.dl_wrap dl{width:50%;}
|
|
| 134 |
-.dl_wrap dt{font-size:20px;font-weight:700;text-align:center;padding:11px 36px;background:var(--secondary-light-color);border-radius:8px;}
|
|
| 135 |
-.dl_wrap dt span{display:block;font-size:16px;font-weight:400;}
|
|
| 136 |
-.dl_wrap dd{display:flex;height:calc(100% - 100px);background:#f2f4f6;border-radius:8px;margin:36px 0 0 0;justify-content:center;align-items:center;}
|
|
| 137 |
-.dl_wrap dd.dd_table{background:none;display:block;}
|
|
| 138 |
-.dl_wrap dd img{mix-blend-mode:darken;}
|
|
| 139 |
- |
|
| 140 |
-.dl_wrap.fill.accent dt{min-height:56px;background:var(--accent-color);color:#fff;}
|
|
| 141 |
-.dl_wrap.fill.accent dd{margin:20px 0 0 0;}
|
|
| 142 |
- |
|
| 143 |
-.timeline_list {position:relative;display:flex;width:100%;margin:0;padding:40px 0;justify-content:space-between;align-items:flex-start;}
|
|
| 144 |
-/* .timeline_list::before {position:absolute; top:24px; left:4%; right:4%; height:2px; background:#d9d9d9; content:"";} */
|
|
| 145 |
-.timeline_list li {position:relative;width:calc(100% / 6);text-align:center;}
|
|
| 146 |
-.timeline_list li:not(:last-child)::after {position:absolute;content:"▶";top:13px;right:-10px;font-size:12px;color:#d9d9d9;}
|
|
| 147 |
-.timeline_list li.active::after {color:#33a6e8;}
|
|
| 148 |
-.timeline_list .year {position:relative;display:flex;width:80%;height:42px;margin:0 auto;padding:4px 0 0 0;font-family:var(--secondary-title-font);font-size:20px;font-weight:500;border:1px solid #d9d9d9;border-radius:30px;background:#fff;align-items:center;justify-content:center;z-index:2;}
|
|
| 149 |
-.timeline_list .active .year {border:2px solid #33a6e8; color:#33a6e8;}
|
|
| 150 |
-.timeline_list .line {position:absolute;width:2px;height:calc(100% - 70px);background:#cfcfcf;left:20%;}
|
|
| 151 |
- |
|
| 152 |
-.timeline_list .active .line {background:#33a6e8;}
|
|
| 153 |
-.timeline_list .active .line::after {border-color:#33a6e8;}
|
|
| 154 |
-.timeline_list .content {margin:20px 0 0 0;}
|
|
| 155 |
-.timeline_list .content strong {position:relative;display:block;width:calc(80% - 20px);font-size:20px;font-weight:400;color:#222;text-align:left;margin:0 0 16px auto;}
|
|
| 156 |
-.timeline_list .content strong b{font-weight:700;}
|
|
| 157 |
-.timeline_list .content strong::after{position:absolute;content:"";width:10px;height:10px;border:2px solid #cfcfcf;border-radius:50%;background:#fff;left:-24px;top:10px;}
|
|
| 158 |
-.timeline_list .active .content strong{color:#33a6e8;}
|
|
| 159 |
-.timeline_list .active .content strong::after{border:2px solid #33a6e8;}
|
|
| 160 |
-.timeline_list .content span {display:block;font-size:16px;font-weight:400;color:#666;}
|
|
| 161 |
-.timeline_list .content .point {font-weight:600; color:#33a6e8;}
|
|
| 162 |
- |
|
| 163 |
-.box_wrap.border.accent .title{position:relative;display:block;width:50%;min-height:44px;margin:40px auto 0;padding:12px 0 0 0;background:#fff;border:1px solid var(--accent-color);border-radius:50px;font-family:var(--secondary-title-font);font-size:16px;font-weight:bold;color:var(--accent-color);text-align:center;z-index:2;}
|
|
| 164 |
-.box_wrap.border.accent .box{display:flex;width:100%;background:#fff;border:1px solid var(--accent-color);border-radius:8px;padding:40px 40px;margin:-24px auto 0 auto;gap:20px;}
|
|
| 165 |
- |
|
| 166 |
-/* 퇴행성 뇌질환 */ |
|
| 167 |
-.brain_health .figure_content{margin:80px 0 0 0;}
|
|
| 168 |
-.brain_health .box_wrap.border.accent p{font-size:18px;}
|
|
| 169 |
-.brain_health .box_wrap.border.accent img{margin:30px auto 0;}
|
|
| 170 |
-.brain_health .box_wrap.border.accent .box_text.white{width:100%;min-height:50px;margin:20px 0 40px 0;padding:11px 20px;border-radius:100px;font-size:18px;background:#fff;text-align:center;}
|
|
| 171 |
-.brain_health .box_wrap.border.accent b{margin:0 0 0 4px;color:var(--accent-color);font-weight:bold;}
|
|
| 172 |
-.brain_health .box_small.white{display:flex;flex-direction:column;gap:30px;}
|
|
| 173 |
-.brain_health .box_small.white li{display:flex;width:100%;background:#fff;padding:56px 28px;border-radius:8px;gap:30px;justify-content:center;align-items:center;}
|
|
| 174 |
-.brain_health .box_small.white i{display:inline-block;width:108px;height:108px;background:var(--accent-light-color);border-radius:100%;}
|
|
| 175 |
-.brain_health .box_small.white li:first-child i{background-image:url(/publish/usr/images/pipeline/brain_health_icon01.png);}
|
|
| 176 |
-.brain_health .box_small.white li:nth-child(2) i{background-image:url(/publish/usr/images/pipeline/brain_health_icon02.png);}
|
|
| 177 |
-.brain_health .box_small.white p{width:calc(90% - 138px);font-size:18px;}
|
|
| 178 |
-.brain_health .box_small.white small{display:block;font-size:14px;font-weight:700;color:var(--accent-color);}
|
|
| 179 |
-.brain_health .box_small.white b{color:var(--accent-color);font-weight:700;}
|
|
| 180 |
-.brain_health .dl_wrap dd{margin:20px 0 0 0;padding:0 70px;}
|
|
| 181 |
-.brain_health .timeline_list li:first-child .line{height:calc(100% - 94px);}
|
|
| 182 |
-.brain_health .legend_content{align-items:stretch;margin:0 auto;}
|
|
| 183 |
-.brain_health .legend_content .box{display:flex;margin:0;padding:0 120px;flex-direction:column;gap:30px;}
|
|
| 184 |
-.brain_health .legend_content img{mix-blend-mode:darken;}
|
|
| 185 |
-.brain_health .legend_content .legend_list{display:flex;margin:20px 0 0 0;font-style:18px;font-weight:500;flex-direction:column;gap:8px;}
|
|
| 186 |
-.brain_health .legend_content .legend{display:inline-block;width:16px;height:16px;margin:-2.5px 6px 0 0;border-radius:100%;vertical-align:middle;}
|
|
| 187 |
-.brain_health .legend_content .legend.orange{background:linear-gradient(180deg, #FF8A3A 0%, #E45D00 100%);}
|
|
| 188 |
-.brain_health .legend_content .legend.blue{background:linear-gradient(180deg, #3B5BB0 0%, #19264A 100%);}
|
|
| 20 |
+ |
|
| 21 |
+/* 뇌질환 */ |
|
| 22 |
+.brain_health .timeline_list li .line{height:calc(100% - 100px);}
|
|
| 23 |
+.brain_health .timeline_list li:first-child .line{height:calc(100% - 123px);}
|
|
| 24 |
+.brain_health .timeline_list li:nth-child(2) .line{height:calc(100% - 130px);}
|
|
| 189 | 25 |
|
| 190 | 26 |
/* 피부질환 */ |
| 191 |
-.skin .dl_wrap dl:first-child{width:70%;}
|
|
| 192 |
-.skin .dl_wrap dl:first-child dd{padding:40px 37px 51px 37px;}
|
|
| 193 |
-.skin .dl_wrap .box_wrap{display:flex;gap:37px;}
|
|
| 194 |
-.skin .dl_wrap .box_wrap li{display:flex;width:calc(100%/3);font-size:18px;font-weight:500;text-align:center;padding:37px 31px;background:#fff;border-radius:8px;flex-direction:column;gap:28px;}
|
|
| 195 |
-.skin .dl_wrap .box_wrap li b{color:var(--accent-color);font-weight:bold;}
|
|
| 196 |
-.skin .dl_wrap i{width:152px;height:152px;margin:0 auto;background:#ebf6fa;border-radius:100%;overflow:hidden;}
|
|
| 197 |
-.skin .dl_wrap li:nth-child(1) i{background-image:url(/publish/usr/images/pipeline/skin_icon01.png);}
|
|
| 198 |
-.skin .dl_wrap li:nth-child(2) i{background-image:url(/publish/usr/images/pipeline/skin_icon02.png);}
|
|
| 199 |
-.skin .dl_wrap li:nth-child(3) i{background-image:url(/publish/usr/images/pipeline/skin_icon03.png);}
|
|
| 200 |
-.skin .dl_wrap dl:last-child{width:30%;}
|
|
| 201 |
-.skin .dl_wrap dl:last-child img{margin:-10px 0 0 -10px;}
|
|
| 27 |
+.skin .timeline_list li .line{height:calc(100% - 100px);}
|
|
| 28 |
+.skin .timeline_list li:nth-child(2) .line{height:calc(100% - 70px);}
|
|
| 29 |
+.skin .timeline_list li:nth-child(3) .line{height:calc(100% - 160px);}
|
|
| 30 |
+.skin .tech_content .box .box_wrap .title{padding:8px;}
|
|
| 202 | 31 |
|
| 203 |
-.skin .tech_content{width:100%;align-items:stretch;gap:30px;}
|
|
| 204 |
-.skin .tech_content .box{width:60%;padding:40px 20px;gap:20px;}
|
|
| 205 |
-.skin .tech_content .box .box_wrap{width:calc(100% - 280px);}
|
|
| 206 |
-.skin .tech_content .box .box_wrap .title{width:90%;padding:8px 0 0 0;margin:12px auto 0;}
|
|
| 207 |
-.skin .tech_content .box .box_wrap li:nth-child(n+3) .title{width:100%;}
|
|
| 208 |
-.skin .tech_content .box .box_wrap .box{padding:40px 40px 20px 40px;}
|
|
| 209 |
-.skin .tech_content .number{display:inline-flex;width:28px;height:28px;padding:2px 0 0 0;margin:0 4px 0 0;background:var(--accent-color);color:#fff;border-radius:100%;justify-content:center;align-items:center;vertical-align:middle;}
|
|
| 210 |
-.skin .tech_content .box_wrap{width:40%;}
|
|
| 32 |
+/* food */ |
|
| 33 |
+.food .table_wrap tbody tr>td{font-size:14px;padding:8px;box-sizing:border-box;}
|
|
| 34 |
+.food .dl_wrap.accent{text-align:center;}
|
|
| 35 |
+.food .industry_content .boxs .title{min-height:34px;height:auto;padding:5px 12px;}
|
|
| 36 |
+.food .industry_content .icon_area li{width:calc((100% / 2) - 12px);}
|
|
| 37 |
+.food .industry_content .text_area{text-align:left;}
|
|
| 211 | 38 |
|
| 212 |
-.skin .purple .title{position:relative;display:flex;width:80%;height:44px;padding:4px 0 0 0;margin:0 auto;font-family:var(--secondary-title-font);font-size:16px;font-weight:bold;color:#5f48b0;background:#fff;border:1px solid #5f48b0;border-radius:50px;justify-content:center;align-items:center;}
|
|
| 213 |
-.skin .purple .box{width:100%;height:calc(100% - 80px);padding:40px 33px 20px 33px;margin:-25px 0 0 0;background:#fff;border:1px solid #5f48b0;border-radius:35px;flex-direction:column;gap:30px;justify-content:flex-start;}
|
|
| 214 |
-.skin .purple .box .figure_desc{gap:12px;margin:20px 0 0 0;}
|
|
| 215 |
-.skin .purple .box .figure_desc li{font-size:18px;}
|
|
| 39 |
+.food .info_content .top_dl ul{padding:20px;}
|
|
| 40 |
+.food .info_content .top_dl .title.border+.box_wrap .box{height:auto;min-height:80px;padding:8px;}
|
|
| 41 |
+.food .info_content .top_dl .stage_ul .box{padding:8px 10px;}
|
|
| 42 |
+.food .info_content dl:not(.top_dl){margin:0 0 60px 0;}
|
|
| 43 |
+.food .info_content .top_dl dt{display:flex;min-height:82px;align-items:center;justify-content:center;}
|
|
| 44 |
+.food .info_content dl:not(.top_dl) dt{min-height:96px;}
|
|
| 45 |
+.food .info_content.dl_wrap.fill.accent .box_white{padding:10px 20px 0 20px;}
|
|
| 216 | 46 |
|
| 217 |
-.hts_system dt{display:flex;height:80px;font-size:24px;align-items:center;justify-content:center;}
|
|
| 218 |
-.hts_system table{table-layout:fixed;width:calc(100% + 24px);border-spacing:12px;border-collapse:separate;margin:0 0 0 -12px;}
|
|
| 219 |
-.hts_system thead th{font-family:var(--primary-title-font);font-size:20px;font-weight:500;padding:10px 0;background:#AFBCDF;border-radius:8px;word-break:break-all;}
|
|
| 220 |
-.hts_system thead th img{margin:0 auto;}
|
|
| 221 |
- |
|
| 222 |
-.hts_system tr>th,.hts_system tr>td{height:84px;padding:10px 0;border-radius:8px;font-size:20px;font-weight:500;line-height:1.2;text-align:center;word-break:break-all;}
|
|
| 223 |
-.hts_system tbody th{background:#f4f4f4;}
|
|
| 224 |
-.hts_system tbody td{position:relative;background:#fff;}
|
|
| 225 |
- |
|
| 226 |
-.hts_system .blue{background:#deebf7;}
|
|
| 227 |
-.hts_system .orange{background:#FBE5D6;}
|
|
| 228 |
-.hts_system .gray{background:#F2F2F2;}
|
|
| 229 |
-.hts_system .green{background:#DEE8DB;}
|
|
| 230 |
- |
|
| 231 |
-.hts_system .legend{display:flex;font-size:18px;font-weight:500;margin:10px 0 0 0;align-items:center;gap:20px;justify-content:center;}
|
|
| 232 |
-.hts_system .legend i{display:inline-block;width:12px;height:12px;margin:0 6px 0 0;border-radius:100%;}
|
|
| 233 |
- |
|
| 234 |
-/* Health Food */ |
|
| 235 |
-.food .table_wrap tbody tr>td{font-size:16px;}
|
|
| 236 |
-.food .dl_wrap.accent{margin:60px 0;}
|
|
| 237 |
-.food .dl_wrap.accent dd{display:flex;font-size:18px;padding:40px 12px;flex-direction:column;}
|
|
| 238 |
-.food .dl_wrap.accent dd b{color:var(--primary-color);}
|
|
| 239 |
- |
|
| 240 |
-.food .box_wrap.blue.fill{text-align:center;}
|
|
| 241 |
-.food .box_wrap.blue.fill .title{display:inline-block;height:56px;padding:13px 80px;margin:0 auto;border-radius:60px;background:var(--secondary-color);font-size:20px;font-weight:bold;color:#fff;text-align:center;}
|
|
| 242 |
-.food .box_wrap.blue.fill .box{margin:-30px 0 0 0;}
|
|
| 243 |
-.food .box_wrap.blue.fill img{margin:0 auto;}
|
|
| 244 |
-.food .industry_content dl{width:100%;}
|
|
| 245 |
-.food .industry_content dt{background:var(--accent-color);color:#fff;}
|
|
| 246 |
-.food .industry_content .box_title{display:inline-block;height:54px;padding:8px 80px;margin:0 0 40px 0;border-radius:60px;background:#e9edf8;font-family:var(--secondary-title-font);font-size:28px;font-weight:bold;color:var(--secondary-color);}
|
|
| 247 |
-.food .industry_content .box_wrap{display:flex;gap:33px;align-items:center;justify-content:center;}
|
|
| 248 |
-.food .industry_content .box_wrap>img{max-width:544px;width:35%;}
|
|
| 249 |
-.food .industry_content .boxs{display:flex;width:20%;flex-direction:column;gap:27px;}
|
|
| 250 |
- |
|
| 251 |
-.food .industry_content .boxs .title{position:relative;display:block;width:80%;height:34px;margin:0 auto;padding:5px 0 0 0;background:#fff;border:1px solid var(--accent-color);border-radius:50px;font-size:16px;font-weight:bold;color:var(--accent-color);text-align:center;z-index:2;}
|
|
| 252 |
-.food .industry_content .boxs .box{display:flex;width:100%;font-size:14px;font-weight:500;text-align:center;background:#fff;border:1px solid var(--accent-color);border-radius:8px;padding:33px 30px 16px;margin:-24px auto 0 auto;gap:20px;}
|
|
| 253 |
-.food .industry_content .box{display:flex;width:35%;padding:40px 36px 39px 39px;font-size:14px;border:1px solid var(--secondary-color);border-radius:8px;background:#fff;gap:20px;}
|
|
| 254 |
-.food .industry_content .icon_area{display:flex;width:180px;flex-wrap:wrap;gap:43px 12px;}
|
|
| 255 |
-.food .industry_content .icon_area li{width:calc((100%/2) - 24px);text-align:center;}
|
|
| 256 |
-.food .industry_content .icon_area i{display:block;width:60px;height:60px;background:#e9edf8;border-radius:100%;margin:0 auto 6px auto;}
|
|
| 257 |
-.food .industry_content li:nth-child(1) i{background-image:url(/publish/usr/images/pipeline/food_icon01.png);}
|
|
| 258 |
-.food .industry_content li:nth-child(2) i{background-image:url(/publish/usr/images/pipeline/food_icon02.png);}
|
|
| 259 |
-.food .industry_content li:nth-child(3) i{background-image:url(/publish/usr/images/pipeline/food_icon03.png);}
|
|
| 260 |
-.food .industry_content li:nth-child(4) i{background-image:url(/publish/usr/images/pipeline/food_icon04.png);}
|
|
| 261 |
-.food .industry_content li:nth-child(5) i{background-image:url(/publish/usr/images/pipeline/food_icon05.png);}
|
|
| 262 |
-.food .industry_content li:nth-child(6) i{background-image:url(/publish/usr/images/pipeline/food_icon06.png);}
|
|
| 263 |
-.food .industry_content .text_area{display:flex;width:calc(100% - 220px);flex-direction:column;gap:22px;}
|
|
| 264 |
-.food .industry_content .text_area li{display:flex;height:calc(100%/3);padding:16px 19px;border-radius:8px;background:#e9edf8;align-items:flex-start;flex-direction:column;justify-content:center;}
|
|
| 265 |
-.food .industry_content .text_area strong{font-size:16px;font-weight:700;color:var(--secondary-color);}
|
|
| 266 |
-.food .industry_content .text_area p{font-size:14px;font-weight:500;color:#222;}
|
|
| 267 |
-.food .industry_content .text_area p b{font-weight:700;color:#222;}
|
|
| 268 |
- |
|
| 269 |
-.food .info_content{flex-wrap:wrap;gap:68px 32px;}
|
|
| 270 |
-.food .info_content dl{width:calc((100%/4) - 24px);}
|
|
| 271 |
-.food .info_content dd{border:1px solid var(--accent-color);background:#F5FAFC;}
|
|
| 272 |
- |
|
| 273 |
-.food .info_content .top_dl dd{padding:10px 0;}
|
|
| 274 |
-.food .info_content .top_dl.blue dt{background:var(--secondary-color);}
|
|
| 275 |
-.food .info_content .top_dl.blue dd{border:1px solid var(--secondary-color);background:#F6F9FF;padding:40px 0;}
|
|
| 276 |
-.food .info_content .top_dl.purple dt{background:var(--primary-color);}
|
|
| 277 |
-.food .info_content .top_dl.purple dd{border:1px solid var(--primary-color);background:#F7F5FB;}
|
|
| 278 |
- |
|
| 279 |
-.food .info_content .top_dl ul{display:flex;width:100%;padding:0 20px;flex-direction:column;gap:12px;}
|
|
| 280 |
-.food .info_content .top_dl li{display:flex;padding:0 0 38px 0;flex-direction:column;gap:8px;background:url(/publish/usr/images/component/icon_stage_skyblue.png) no-repeat center bottom;}
|
|
| 281 |
-.food .info_content .top_dl.blue li{background:url(/publish/usr/images/component/icon_stage_blue.png) no-repeat center bottom;}
|
|
| 282 |
-.food .info_content .top_dl.purple li{background:url(/publish/usr/images/component/icon_stage_purple.png) no-repeat center bottom;}
|
|
| 283 |
-.food .info_content .top_dl li:last-child{background:none;padding:0;}
|
|
| 284 |
-.food .info_content .top_dl .title.border{display:flex;min-height:36px;padding:11px 40px;font-family:var(--secondary-title-font);font-size:16px;font-weight:bold;color:var(--accent-color);border:1px solid var(--accent-color);border-radius:8px;background:#fff;justify-content:center;align-items:center;text-align:center;}
|
|
| 285 |
-.food .info_content .top_dl .title.border+.box_wrap .box{height:80px;}
|
|
| 286 |
-.food .info_content .top_dl .box_wrap{display:flex;width:100%;gap:8px;}
|
|
| 287 |
-.food .info_content .top_dl .box_wrap .box{display:flex;width:calc(100%/3);min-height:62px;font-size:14px;font-weight:500;color:#222;text-align:center;background:#DEE4EB;border-radius:8px;justify-content:center;align-items:center;}
|
|
| 288 |
-.food .info_content .top_dl .stage_ul .box{display:flex;width:100%;min-height:62px;font-size:14px;font-weight:700;color:#222;text-align:center;background:#DEE4EB;border-radius:8px;justify-content:center;align-items:center;}
|
|
| 289 |
- |
|
| 290 |
-.food .info_content dl:not(.top_dl) dt{position:relative;display:flex;width:80%;min-height:72px;padding:12px 10px;margin:0 auto;word-break:auto-phrase;font-size:16px;font-family: var(--secondary-title-font);justify-content:center;align-items:center;z-index:1;}
|
|
| 291 |
-.food .info_content.dl_wrap.fill.accent .box_white{height:100%;padding:24px 0 10px 0;margin:-29px 0 20px 0;background:#fff;}
|
|
| 292 |
- |
|
| 293 |
-.food .info_content .purple dt{background:var(--primary-color);}
|
|
| 294 |
-.food .info_content .purple dd{border:1px solid var(--primary-color);}
|
|
| 295 |
-.food .info_content .blue dt{background:var(--secondary-color);}
|
|
| 296 |
-.food .info_content .blue dd{border:1px solid var(--secondary-color);}
|
|
| 297 |
- |
|
| 298 |
-.food .info_content .check_ul{display:flex;flex-direction:column;gap:8px;}
|
|
| 299 |
-.food .info_content .check_ul li{display:block;padding:0 0 0 24px;font-size:18px;font-weight:500;color:#222;text-align:left;background:url(/publish/usr/images/component/icon_check_li.png) no-repeat left center;}
|
|
| 300 |
- |
|
| 301 |
-/* cosmeceuticals */ |
|
| 302 |
-.cosme .table_wrap tbody th,.cosme .table_wrap td{font-size:16px;}
|
|
| 303 |
-.cosme .table_wrap tbody .orange{color:#ff8a3a;}
|
|
| 304 |
-.cosme .table_wrap tbody .blue{color:#3b5bb0;}
|
|
| 305 |
-.cosme .table_wrap tbody b{display:block;line-height:2;}
|
|
| 306 |
- |
|
| 307 |
-.cosme table ul li{height:58px;}
|
|
| 308 |
-.cosme .graph{top:71%;}
|
|
| 309 |
-.cosme .graph.orange{top:24px;}
|
|
| 310 |
-.cosme .graph.orange.only{top:50%;}
|
|
| 311 |
-.cosme .graph span{height:15px;}
|
|
| 312 |
-.cosme .graph span::after,.cosme .graph.orange span::after{width:35px;height:26px;background-size:contain;right:-23px;}
|
|
| 313 |
- |
|
| 314 |
-.cosme .graph1 span{width:calc((100% / 6)*1 - 25px);}
|
|
| 315 |
-.cosme .graph2 span{width:calc((100% / 6)*2 - 25px);}
|
|
| 316 |
-.cosme .graph3 span{width:calc((100% / 6)*3 - 25px);}
|
|
| 317 |
-.cosme .graph4 span{width:calc((100% / 6)*4 - 25px);}
|
|
| 318 |
-.cosme .graph5 span{width:calc((100% / 6)*5 - 25px);}
|
|
| 319 |
- |
|
| 320 |
-.cosme .dl_wrap dd{height:100%;flex-direction:column;padding:0 22px;}
|
|
| 321 |
-.cosme .dl_wrap .top_area{display:flex;width:100%;height:50px;background:#fff;border-radius:60px;justify-content:center;align-items:center;}
|
|
| 322 |
-.cosme .dl_wrap .top_area li{position:relative;width:50%;font-size:18px;font-weight:bold;text-align:center;}
|
|
| 323 |
-.cosme .dl_wrap .top_area li::after{position:absolute;content:"";width:1px;height:25px;background:#d9d9d9;right:0;top:2px;}
|
|
| 324 |
-.cosme .dl_wrap .top_area li:last-child::after{display:none;}
|
|
| 325 |
- |
|
| 326 |
-.cosme .stage_ul{display:flex;width:100%;margin:17px 0 0 0;text-align:center;gap:92px;background:url(/publish/usr/images/pipeline/cosmeceuticals_icon06.png) no-repeat center;}
|
|
| 327 |
-.cosme .stage_ul>li{width:50%;padding:26px 0;border-radius:8px;background:#fff;}
|
|
| 328 |
-.cosme .stage_ul>li:first-child{border:1px solid #EE4758;}
|
|
| 329 |
-.cosme .stage_ul>li:last-child{border:1px solid #3b5bb0;}
|
|
| 330 |
-.cosme .stage_ul>li img{margin:20px auto;}
|
|
| 331 |
-.cosme .stage_ul .title{font-size:18px;font-weight:bold;}
|
|
| 332 |
-.cosme .stage_ul li:first-child .title,.cosme .stage_ul li:first-child li:last-child{color:#EE4758;}
|
|
| 333 |
-.cosme .stage_ul li:last-child .title,.cosme .stage_ul li:last-child li:last-child{color:#3b5bb0;}
|
|
| 334 |
-.cosme .stage_ul .depth_stage{display:flex;font-size:16px;font-weight:400;flex-direction:column;}
|
|
| 335 |
-.cosme .stage_ul .depth_stage li{padding:0 0 28px 0;}
|
|
| 336 |
-.cosme .stage_ul .depth_stage li:last-child{padding:0;background:none !important;font-size:19px;font-weight:bold;}
|
|
| 337 |
-.cosme .stage_ul li:first-child .depth_stage li{background:url(/publish/usr/images/pipeline/cosmeceuticals_icon04.png) no-repeat center calc(100% - 8px);}
|
|
| 338 |
-.cosme .stage_ul li:last-child .depth_stage li{background:url(/publish/usr/images/pipeline/cosmeceuticals_icon05.png) no-repeat center calc(100% - 8px);}
|
|
| 339 |
- |
|
| 340 |
-.cosme .box_white{display:flex;margin:30px 0 0 0;gap:20px;}
|
|
| 341 |
-.cosme .box_white li{display:flex;width:calc(100%/3);padding:30px 18px;font-size:16px;font-weight:600;text-align:center;background:#fff;border-radius:8px;gap:20px;flex-direction:column;justify-content:center;align-items:center;word-break:keep-all;}
|
|
| 342 |
-.cosme .box_white i{display:inline-block;width:80px;height:80px;background:#e9edf8;border-radius:100%;}
|
|
| 343 |
-.cosme .box_white li:nth-child(1) i{background-image:url(/publish/usr/images/pipeline/cosmeceuticals_icon01.png);}
|
|
| 344 |
-.cosme .box_white li:nth-child(2) i{background-image:url(/publish/usr/images/pipeline/cosmeceuticals_icon02.png);}
|
|
| 345 |
-.cosme .box_white li:nth-child(3) i{background-image:url(/publish/usr/images/pipeline/cosmeceuticals_icon03.png);}
|
|
| 346 |
- |
|
| 347 |
-.cosme dl:nth-child(2) dd{gap:40px;}
|
|
| 348 |
-.cosme dl:nth-child(2) dd strong{font-family:var(--secondary-title-font);font-size:20px;font-weight:bold;}
|
|
| 349 |
-.cosme .box:last-child{margin:90px 0 0 0;padding:30px;}
|
|
| 350 |
-.cosme .box:last-child img{margin:0 auto;mix-blend-mode:darken;}
|
|
| 351 |
- |
|
| 352 |
-/* AI-assisted Organelle homeostasis */ |
|
| 353 |
-.ai .con_title .title b{color:var(--primary-color);}
|
|
| 354 |
-.ai .box_wrap{text-align:center;}
|
|
| 355 |
-.ai .box_wrap .title{display:inline-block;min-width:420px;height:50px;margin:0 auto;padding:8px 40px;font-family:var(--secondary-title-font);font-size:20px;font-weight:bold;color:#fff;background:var(--primary-color);border-radius:100px;;}
|
|
| 356 |
-.ai .box_wrap .box{background:#fff;margin:-25px 0 60px 0;}
|
|
| 357 |
-.ai .box_wrap .box img{width:100%; text-align:center;margin:0 auto;}
|
|
| 358 |
-.ai .box_wrap.border.purple .box{border:1px solid var(--primary-color);border-radius:8px;;}
|
|
| 359 |
- |
|
| 360 |
- |
|
| 361 |
-/* autophagy */ |
|
| 362 |
-.step_ul{display:flex;width:100%;align-items:center;gap:12px;}
|
|
| 363 |
-.step_ul li:not(.next){display:flex;width:calc(100%/6);min-height:91px;font-size:20px;font-weight:500;text-align:center;padding:0 10px;background:#f2f4f6;border-radius:20px;justify-content:center;align-items:center;box-sizing:border-box;}
|
|
| 364 |
- |
|
| 365 |
-.autophagy .box:nth-child(2){margin:0;}
|
|
| 366 |
- |
|
| 367 |
-.achievement .table_type_cols tr{cursor:auto;}
|
|
| 368 |
- |
|
| 369 |
-/* ================================================== |
|
| 370 |
- Community |
|
| 371 |
- ================================================== */ |
|
| 372 |
-.length_wrap .textarea{height:100px;}
|
|
| 373 |
- |
|
| 374 |
-@media (max-width: 1400px){
|
|
| 375 |
- |
|
| 376 |
- /* ================================================== |
|
| 377 |
- 공통레이아웃 |
|
| 378 |
- ================================================== */ |
|
| 379 |
- .sub_visual_nav{width:80%;}
|
|
| 380 |
- |
|
| 381 |
- /* ================================================== |
|
| 382 |
- Company |
|
| 383 |
- ================================================== */ |
|
| 384 |
- |
|
| 385 |
- /* 설립배경 */ |
|
| 386 |
- .overview .card li{width:calc((100% / 4) - 60px);}
|
|
| 387 |
- .overview .circles{padding:0;}
|
|
| 388 |
- .overview tr>th, .overview tr>td{font-size:16px;}
|
|
| 389 |
- .overview .box dt{height:40px;font-size:17px;padding:4px 0 0 0;}
|
|
| 390 |
- .overview .box dd{min-height:110px;font-size:16px;padding:40px 30px 32px 30px;}
|
|
| 391 |
- |
|
| 392 |
- /* 오시는 길 */ |
|
| 393 |
- .location_area{width:660px;}
|
|
| 394 |
- |
|
| 395 |
- /* 퇴행성 뇌질환 */ |
|
| 396 |
- .brain_health .table_wrap{overflow-x:auto;}
|
|
| 397 |
- .brain_health .table_wrap table{min-width:1440px;}
|
|
| 398 |
- .brain_health tr>th, .brain_health tr>td{font-size:16px;}
|
|
| 399 |
- .brain_health .dl_wrap dd{padding:0 20px;}
|
|
| 400 |
- |
|
| 401 |
- /* 피부질환 */ |
|
| 402 |
- .skin .tech_content{width:100%;flex-direction:column;}
|
|
| 403 |
- .skin .tech_content .box{width:100%;}
|
|
| 404 |
- .skin .dl_wrap .box_wrap{gap:14px;}
|
|
| 405 |
- .skin .dl_wrap .box_wrap li{gap:14px;}
|
|
| 406 |
- .skin .dl_wrap dl:last-child img{width:calc(100% - 60px);}
|
|
| 407 |
- |
|
| 408 |
- |
|
| 409 |
- |
|
| 410 |
- |
|
| 411 |
-} |
|
| 412 |
- |
|
| 413 |
-@media (max-width: 1280px){
|
|
| 414 |
- |
|
| 415 |
- /* ================================================== |
|
| 416 |
- 공통레이아웃 |
|
| 417 |
- ================================================== */ |
|
| 418 |
- .sub_title{font-size:40px;}
|
|
| 419 |
- .sub_visual{height:480px;}
|
|
| 420 |
- .sub_visual_nav{width:65%;}
|
|
| 421 |
- .sub_visual_nav .snb_wrap{width:calc(100% - 66px);}
|
|
| 422 |
- .con_title{margin:80px 0 16px 0;}
|
|
| 423 |
- .con_title .title{font-size:28px;}
|
|
| 424 |
- .con_title .summary{font-size:20px;}
|
|
| 425 |
- |
|
| 426 |
- .platform_tech .sub_visual{background-position:75% center;}
|
|
| 427 |
- |
|
| 428 |
- /* ================================================== |
|
| 429 |
- Company |
|
| 430 |
- ================================================== */ |
|
| 431 |
- |
|
| 432 |
- /* 설립배경 */ |
|
| 433 |
- .overview .card{flex-wrap:wrap;}
|
|
| 434 |
- .overview .card li{width:calc((100% / 2) - 60px);height:485px;}
|
|
| 435 |
- .overview .card li:nth-child(1),.overview .card li:nth-child(2),.overview .card li:nth-child(3),.overview .card li:nth-child(4){background-size:cover;}
|
|
| 436 |
- |
|
| 437 |
- .overview .circles, .overview .circles .left{flex-direction:column;}
|
|
| 438 |
- .overview .circles{gap:120px;}
|
|
| 439 |
- .overview .circles::after{width:1px;height:45%;right:50%;bottom:0;transform:translateX(-50%);}
|
|
| 440 |
- .overview .circles .left::after{left:50%;bottom:-8px;top:auto;transform:translateX(-50%);}
|
|
| 441 |
- .overview .circles .right::after{left:50%;top:-8px;transform:translateX(-50%);}
|
|
| 442 |
- .overview .circle.line:last-child{margin:-60px 0 0 0;}
|
|
| 443 |
- .overview .circle.line:first-child::after{bottom:10px;right:45%;transform:translateX(-50%);}
|
|
| 444 |
- |
|
| 445 |
- .overview .table_wrap{overflow-x:auto;}
|
|
| 446 |
- .overview .table_wrap table{min-width:1400px;padding:0 0 0 10px;}
|
|
| 447 |
- .overview .box_wrap{flex-wrap:wrap;flex-direction:column;gap:20px;}
|
|
| 448 |
- .overview .box dt{height:50px;font-size:20px;padding:6px 0 0 0;}
|
|
| 449 |
- .overview .box dd{font-size:18px;padding:47px 30px 32px 30px;}
|
|
| 450 |
- |
|
| 451 |
- /* 조직도 */ |
|
| 452 |
- .organization_ceo,.organization_cto,.organization_item{width:30%;height:60px;font-size:18px;padding:5px 0 0 0;}
|
|
| 453 |
- .organization_item:first-child::after, .organization_item:last-child::after{top:63px;}
|
|
| 454 |
- .organization_cto{left:0;transform:translateX(50%);}
|
|
| 455 |
- .organization_cto::after{width:17%;right:-17%;transform:none;}
|
|
| 456 |
- .organization_team{margin:47px 0 0 0;}
|
|
| 457 |
- |
|
| 458 |
- |
|
| 459 |
- /* 오시는 길 */ |
|
| 460 |
- .location_list>li{flex-wrap:wrap;gap:30px}
|
|
| 461 |
- .location_area{width:100%;}
|
|
| 462 |
- .location_list .info{width:100%;}
|
|
| 463 |
- .location_list .boxs{flex-direction:row;}
|
|
| 464 |
- .location_list .boxs li{width:50%;}
|
|
| 465 |
- .location_list .boxs li:only-child{width:100%;}
|
|
| 466 |
- .mail_banner{padding:79px 70px;}
|
|
| 467 |
- .mail_banner img{right:5%;}
|
|
| 468 |
- |
|
| 469 |
- |
|
| 470 |
- /* 연혁 */ |
|
| 471 |
- .history_area{flex-direction:column;}
|
|
| 472 |
- .history_year{display:none;}
|
|
| 473 |
- .mobile_year{display:block;width:90%;font-family:var(--secondary-title-font);font-size:40px;font-weight:bold;text-align:left;margin:0 auto 30px auto;}
|
|
| 474 |
- .month_ul{position:relative;width:90%;padding:0;margin:0 auto;}
|
|
| 475 |
- .month_ul::after{position:absolute;content:"";width:100%;height:70px;top:0;font-family:var(--secondary-title-font);font-size:52px;font-weight:bold;}
|
|
| 476 |
- .month_ul:last-child{margin:0 auto;}
|
|
| 477 |
- /* #year_2023::after{content:"2023";}
|
|
| 478 |
- #year_2022::after{content:"2022";} */
|
|
| 479 |
- |
|
| 480 |
- /* ================================================== |
|
| 481 |
- Platform Tech |
|
| 482 |
- ================================================== */ |
|
| 483 |
- |
|
| 484 |
- /* autophagy */ |
|
| 485 |
- .step_ul{flex-wrap:wrap;}
|
|
| 486 |
- .step_ul li:not(.next){width:calc((100%/3) - 40px);}
|
|
| 487 |
- .step_ul li:nth-child(6){display:none;}
|
|
| 488 |
- |
|
| 489 |
- .figure_desc{gap:12px;}
|
|
| 490 |
- .figure_desc li{font-size:20px;}
|
|
| 491 |
- |
|
| 492 |
- .figure_content.column .box{margin:20px 0;}
|
|
| 493 |
- |
|
| 494 |
- .pipeline .table_wrap{width:100%;overflow:auto;}
|
|
| 495 |
- .pipeline table{width:1024px;border-spacing:6px;}
|
|
| 496 |
- .pipeline tr>th, .pipeline tr>td{height:60px;font-size:14px;}
|
|
| 497 |
- .pipeline .graph span{font-size:14px;}
|
|
| 498 |
- .pipeline .graph span::after{background-size:60% auto;right:-38px;}
|
|
| 499 |
- .pipeline .graph.purple span::after,.pipeline .graph.orange span::after{background-size:60% auto;right:-38px;}
|
|
| 500 |
- .pipeline tr:first-child ul li:nth-child(5),.pipeline .purple+ul li:nth-child(4),.pipeline .orange+ul li:nth-child(5){font-size:14px;}
|
|
| 501 |
- |
|
| 502 |
- .pipeline ul li{display:flex;justify-content:center;align-items:center;}
|
|
| 503 |
- |
|
| 504 |
- .pipeline .graph1 span{width:calc((100% / 6) - 20px);}
|
|
| 505 |
- .pipeline .graph2 span{width:calc((100% / 6)*2 - 60px);}
|
|
| 506 |
- .pipeline .graph3 span{width:calc((100% / 6)*3 - 60px);}
|
|
| 507 |
- .pipeline .graph4 span{width:calc((100% / 6)*4 - 60px);}
|
|
| 508 |
- .pipeline .graph5 span{width:calc((100% / 6)*5 - 60px);}
|
|
| 509 |
- |
|
| 510 |
- .hts_system .table_wrap{width:100%;overflow:auto;}
|
|
| 511 |
- .hts_system table{width:1400px;}
|
|
| 512 |
- .hts_system table th,.hts_system table td{font-size:16px;}
|
|
| 513 |
- .hts_system .legend{font-size:16px;margin:26px 0 0 0;}
|
|
| 514 |
- |
|
| 515 |
- .rd .figure_content.column{gap:0;}
|
|
| 516 |
- |
|
| 517 |
- /* ================================================== |
|
| 518 |
- Pipeline |
|
| 519 |
- ================================================== */ |
|
| 520 |
- |
|
| 521 |
- /* 퇴행성 뇌질환 */ |
|
| 522 |
- .brain_health .dl_wrap{flex-wrap:wrap;}
|
|
| 523 |
- .brain_health .dl_wrap dl{width:100%;}
|
|
| 524 |
- .brain_health .dl_wrap dl:last-child dd{padding:40px 20px;}
|
|
| 525 |
- .brain_health .box_small.white li{padding:20px}
|
|
| 526 |
- |
|
| 527 |
- .timeline_list{flex-wrap:wrap;gap:40px 0;}
|
|
| 528 |
- .timeline_list li{width:calc(100%/3);}
|
|
| 529 |
- .timeline_list li:nth-child(3)::after{display:none;}
|
|
| 530 |
- |
|
| 531 |
- /* 피부질환 */ |
|
| 532 |
- .skin .tech_content .box_wrap li{flex-wrap:balance;}
|
|
| 533 |
- .skin .tech_content .box_wrap.purple{width:100%;}
|
|
| 534 |
- .skin .tech_content .box_wrap.purple .box{display:flex;margin:-25px 0 0 0;align-items:center;flex-direction:row;justify-content:center;gap:80px;}
|
|
| 535 |
- .skin .purple .box .figure_desc{width:auto;text-align:left;}
|
|
| 536 |
- .skin .purple .box img{width:40%;}
|
|
| 537 |
- .skin .purple .box .figure_desc li{justify-content:flex-start;}
|
|
| 538 |
- .skin .dl_wrap dl:first-child{width:60%;}
|
|
| 539 |
- .skin .dl_wrap dl:last-child{width:40%;}
|
|
| 540 |
- |
|
| 541 |
- |
|
| 542 |
- .skin .dl_wrap .box_wrap{flex-direction:column;}
|
|
| 543 |
- .skin .dl_wrap .box_wrap li{width:100%;flex-direction:row;}
|
|
| 544 |
- .skin .dl_wrap .box_wrap li p{width:calc(100% - 156px);text-align:left;}
|
|
| 545 |
- |
|
| 546 |
- /* food */ |
|
| 547 |
- .food .table_wrap{overflow-x:auto;}
|
|
| 548 |
- .food .table_wrap table{min-width:1440px;}
|
|
| 549 |
- .food .table_wrap td{padding:10px;}
|
|
| 550 |
- |
|
| 551 |
- .food ul li{flex-direction:column;}
|
|
| 552 |
- .food .industry_content .box_wrap{padding:0 30px;}
|
|
| 553 |
- .food .industry_content .boxs{width:30%;}
|
|
| 554 |
- .food .industry_content .box{padding:29px 20px 20px 20px;flex-direction:column;}
|
|
| 555 |
- .food .industry_content .icon_area{width:100%;gap:30px;}
|
|
| 556 |
- .food .industry_content .icon_area li{width:calc((100%/3) - 21px);}
|
|
| 557 |
- .food .industry_content .text_area{width:100%;}
|
|
| 558 |
- |
|
| 559 |
- .food .info_content>dl{width:calc((100% / 2) - 20px);}
|
|
| 560 |
- .food .info_content .top_dl .title.border{width:100%;}
|
|
| 561 |
- .food .info_content .top_dl ul{padding:20px;}
|
|
| 562 |
- |
|
| 563 |
- /* cosmeceuticals */ |
|
| 564 |
- .cosme .table_wrap{overflow-x:auto;}
|
|
| 565 |
- .cosme .table_wrap table{min-width:1440px;}
|
|
| 566 |
- .pipeline .cosme .graph span::after{right:-22px;}
|
|
| 567 |
- .cosme .stage_ul{gap:48px;}
|
|
| 568 |
- .cosme .stage_ul>li{flex-direction:column;padding:26px 10px;}
|
|
| 569 |
- .cosme dl:nth-child(2) dd strong{text-align:center;}
|
|
| 570 |
- .cosme .table_wrap tbody th, .cosme .table_wrap td{font-size:14px;}
|
|
| 571 |
- |
|
| 572 |
- |
|
| 573 |
-} |
|
| 574 |
- |
|
| 575 |
-@media (max-width: 1024px){
|
|
| 576 |
- |
|
| 577 |
- .mail_banner strong{font-size:36px;word-break:break-all;}
|
|
| 578 |
- .mail_banner span{font-size:18px;}
|
|
| 579 |
- .mail_banner img{width:20%;}
|
|
| 580 |
- |
|
| 581 |
- .food .industry_content .box_wrap{flex-wrap:wrap;align-items:stretch;}
|
|
| 582 |
- .food .industry_content .box_wrap .boxs li{height:calc(100% / 3);}
|
|
| 583 |
- .food .industry_content .box_wrap>img{width:100%;}
|
|
| 584 |
- .food .industry_content .box,.food .industry_content .boxs{width:calc((100% - 34px)/2);}
|
|
| 585 |
- .food .industry_content .boxs .box{height:calc(100% - 12px);justify-content:center;}
|
|
| 586 |
- |
|
| 587 |
- /* cosmeceuticals */ |
|
| 588 |
- .cosme .dl_wrap.fill.accent{flex-direction:column;}
|
|
| 589 |
- .cosme .dl_wrap.fill.accent dl{width:100%;}
|
|
| 590 |
- .cosme .dl_wrap.fill.accent dd{padding:20px;}
|
|
| 591 |
- .cosme .stage_ul{gap:96px;}
|
|
| 592 |
-} |
|
| 47 |
+/* Cosmeceuticals */ |
|
| 48 |
+.cosme .table_wrap td{word-break:auto-phrase;padding:8px;}
|
|
| 49 |
+.cosme .table_wrap td b{line-height:1.3;}
|
|
| 50 |
+.cosme .table_wrap td b:first-child {margin:0 0 4px 0;}
|
|
| 51 |
+.cosme .stage_ul>li{padding:26px 12px;}
|
|
| 52 |
+.cosme dl:nth-child(2) dd strong{width:60%;text-align:center;}
|
|
| 593 | 53 |
|
| 594 | 54 |
@media (max-width: 768px){
|
| 595 | 55 |
|
| 596 |
- /* ================================================== |
|
| 597 |
- 공통레이아웃 |
|
| 598 |
- ================================================== */ |
|
| 599 |
- .sub_visual{height:500px;border-radius:0 0 40px 40px;;}
|
|
| 600 |
- .sub_visual_nav{height:66px;}
|
|
| 601 |
- .sub_visual_nav>a{display:none;}
|
|
| 602 |
- .sub_visual_nav .snb_wrap{width:calc(100% / 2);}
|
|
| 603 |
- |
|
| 604 |
- .con_title .title{font-size:28px;}
|
|
| 605 |
- |
|
| 606 |
- |
|
| 607 | 56 |
/* ================================================== |
| 608 | 57 |
Company |
| 609 | 58 |
================================================== */ |
| 610 |
- |
|
| 611 |
- /* 설립배경 */ |
|
| 612 |
- .overview .txt strong{font-size:40px;line-height:1.4;}
|
|
| 613 |
- .overview .txt strong span{display:block;}
|
|
| 614 |
- .overview .card{gap:20px;}
|
|
| 615 |
- .overview .card li{width:calc((100% / 2) - 20px);height:400px;}
|
|
| 616 |
- |
|
| 617 |
- .figure_content.row{flex-direction:column;gap:20px;}
|
|
| 618 |
- .figure_content.row .box{width:100%;}
|
|
| 619 |
- |
|
| 620 |
- .figure_desc{width:100%;gap:12px;}
|
|
| 621 |
- .figure_desc li{font-size:18px;}
|
|
| 622 |
- .figure_desc.square li{text-indent:26px;background:url(/publish/usr/images/component/list_square.png) no-repeat left 4px;}
|
|
| 623 |
- .figure_desc.circle li{text-indent:26px;background:url(/publish/usr/images/component/list_circle.png) no-repeat left 4px;background-size:auto 20px;}
|
|
| 624 |
- |
|
| 625 |
- /* 조직도 */ |
|
| 626 |
- .org_list{gap:20px}
|
|
| 627 |
- .org_list>li{width:100%;}
|
|
| 628 |
- .organization_ceo{width:80%;font-size:16px;}
|
|
| 629 |
- .organization_cto{width:43%;font-size:16px;transform:none;}
|
|
| 630 |
- .organization_item{font-size:14px;padding:5px 10px 0 10px;}
|
|
| 631 |
- |
|
| 632 |
- /* 오시는 길 */ |
|
| 633 |
- .location_list .boxs{flex-direction:column;}
|
|
| 634 |
- .location_list .boxs li{width:100%;}
|
|
| 635 |
- |
|
| 636 |
-.mail_banner{padding:50px 30px 70px 50px;}
|
|
| 637 |
-.mail_banner img{top:auto;bottom:15%;opacity:0.5;}
|
|
| 638 | 59 |
|
| 639 | 60 |
/* 연혁 */ |
| 640 | 61 |
.month_ul .month{width:100px;font-size:20px;}
|
| 641 | 62 |
|
| 642 | 63 |
|
| 643 |
- /* ================================================== |
|
| 644 |
- Platform Tech |
|
| 645 |
- ================================================== */ |
|
| 646 |
- |
|
| 647 |
- .paper_content .box{width:100%;}
|
|
| 648 |
- |
|
| 649 |
- .dl_wrap{flex-direction:column;gap:60px;}
|
|
| 650 |
- .dl_wrap dl{width:100%;}
|
|
| 651 |
- .dl_wrap dd{margin:20px 0 0 0;;}
|
|
| 652 |
- |
|
| 653 |
- /* ================================================== |
|
| 654 |
- Pipeline |
|
| 655 |
- ================================================== */ |
|
| 656 |
- |
|
| 657 |
- .timeline_list li{width:calc(100%/2);}
|
|
| 658 |
- .timeline_list li:nth-child(2n)::after{display:none;}
|
|
| 659 |
- .timeline_list li:nth-child(3)::after{display:block;}
|
|
| 660 |
- .timeline_list .content strong{font-size:16px;}
|
|
| 661 |
- |
|
| 662 |
- .brain_health .legend_content .box{padding:40px 20px;}
|
|
| 663 |
- |
|
| 664 |
- /* 피부질환 */ |
|
| 665 |
- .skin .dl_wrap{flex-wrap:wrap;}
|
|
| 666 |
- .skin .dl_wrap dl:first-child{width:100%;}
|
|
| 667 |
- .skin .dl_wrap dl:last-child{width:100%;}
|
|
| 668 |
- .skin .dl_wrap dl:last-child img{width:calc(100% - 100px);margin:0;padding:40px 20px;}
|
|
| 669 |
- |
|
| 670 |
- .skin .tech_content .box{flex-direction:column;}
|
|
| 671 |
- .skin .tech_content .box .box_wrap{width:100%;}
|
|
| 672 |
- .skin .tech_content .box_wrap.purple .box{flex-direction:column;}
|
|
| 673 |
- .skin .purple .box .figure_desc{width:100%;}
|
|
| 674 |
- .skin .purple .box img{width:auto;}
|
|
| 675 |
- |
|
| 676 |
- /* food */ |
|
| 677 |
- .food .info_content{gap:40px;}
|
|
| 678 |
- .food .info_content>dl{width:100%;}
|
|
| 679 |
- .food .info_content dl:not(.top_dl) dt br{display:none;}
|
|
| 680 |
- .food .info_content.dl_wrap.fill.accent .box_white{padding:48px 0 30px 0;}
|
|
| 681 |
- .food .box_wrap.blue.fill .title{width:85%;padding:13px;font-size:18px;}
|
|
| 682 |
- .food .box_wrap.blue.fill .title+.box{padding:40px 0;}
|
|
| 683 |
- .food .industry_content .box_title{width:100%;padding:15px 12px;font-size:20px;text-align:center;}
|
|
| 684 |
- .food .info_content .top_dl .title.border+.box_wrap .box{margin:0;}
|
|
| 685 |
- .food .info_content .top_dl .stage_ul .box{margin:0;}
|
|
| 686 |
- .food .industry_content .box_wrap{padding:0 12px;}
|
|
| 687 |
- .food .info_content dl:not(.top_dl) dt{width:90%;padding:12px 6px;}
|
|
| 688 |
- |
|
| 689 |
- .ai .box_wrap .box{padding:40px 0 0 0;}
|
|
| 690 |
- |
|
| 691 | 64 |
} |
| 692 | 65 |
|
| 693 |
-@media (max-width: 640px){
|
|
| 694 |
- |
|
| 695 |
- |
|
| 696 |
- /* ================================================== |
|
| 697 |
- 공통레이아웃 |
|
| 698 |
- ================================================== */ |
|
| 699 |
- .sub_visual_nav .snb_wrap{max-width:100%;}
|
|
| 700 |
- .sub_visual_nav .snb_wrap:not(:last-child){display:none;}
|
|
| 701 |
- .content_title h3{font-size:32px;}
|
|
| 702 |
- .content_title h3 span.small{font-size:18px;word-break:break-all;}
|
|
| 703 |
- .con_title .title{font-size:20px;}
|
|
| 704 |
- |
|
| 705 |
- .sub_title{font-size:28px;text-align:center;}
|
|
| 706 |
- .box{border-radius:8px;margin:40px 0 0 0;}
|
|
| 707 |
- |
|
| 708 |
- |
|
| 709 |
- /* ================================================== |
|
| 710 |
- Company |
|
| 711 |
- ================================================== */ |
|
| 712 |
- |
|
| 713 |
- /* 설립배경 */ |
|
| 714 |
- .overview .txt strong{font-size:28px;}
|
|
| 715 |
- .overview .txt p{font-size:18px;margin:8px 0 0 0;}
|
|
| 716 |
- .overview .card{gap:36px;padding:90px 0 120px 0;}
|
|
| 717 |
- .overview .card li{width:100%;}
|
|
| 718 |
- .overview .card li:nth-child(2n){transform:none;;}
|
|
| 719 |
- .overview .card .title br{display:none;}
|
|
| 720 |
- |
|
| 721 |
- .overview .circles{padding:0;margin:40px 0 80px 0;gap:60px;}
|
|
| 722 |
- .overview .circles::after{height:50%;right:49.5%;}
|
|
| 723 |
- .overview .circle.line{width:200px;height:200px;font-size:18px;}
|
|
| 724 |
- .overview .circle.line:last-child{margin:-40px 0 0 0;}
|
|
| 725 |
- .overview .circle.line:first-child::after{height:20px;font-size:24px;bottom:14px;right:40%;}
|
|
| 726 |
- .overview .circle.fill{width:260px;height:260px;font-size:20px;;}
|
|
| 727 |
- .overview .circle.fill::after{width:calc(100% + 20px);height:calc(100% + 20px);left:-10px;top:-10px;background-size:100% auto;}
|
|
| 728 |
- .overview .circles .left::after, .overview .circles .right::after{width:12px;height:12px;}
|
|
| 729 |
- .overview .circles .left::after{bottom:-5px;}
|
|
| 730 |
- |
|
| 731 |
- /* 오시는 길 */ |
|
| 732 |
- .location_list .title{font-size:20px;margin:0 0 10px 0;gap:8px;}
|
|
| 733 |
- .location_list .info p{font-size:16px;}
|
|
| 734 |
- .location_list .btn_map,.location_list .boxs li{height:60px;font-size:16px;}
|
|
| 735 |
- .location_list .location{width:22px;height:22px;background-size:contain;}
|
|
| 736 |
- .mail_banner{padding:30px;}
|
|
| 737 |
- .mail_banner strong{font-size:20px;}
|
|
| 738 |
- .mail_banner span{font-size:14px;}
|
|
| 739 |
- |
|
| 740 |
- /* ================================================== |
|
| 741 |
- Platform Tech |
|
| 742 |
- ================================================== */ |
|
| 743 |
- |
|
| 744 |
- |
|
| 745 |
- |
|
| 746 |
- /* autophagy */ |
|
| 747 |
- .step_ul{flex-direction:column;}
|
|
| 748 |
- .step_ul li:not(.next){width:100%;}
|
|
| 749 |
- .step_ul li.next img{transform:rotate(90deg);}
|
|
| 750 |
- .step_ul li:nth-child(6){display:block;}
|
|
| 751 |
- |
|
| 752 |
- /* food */ |
|
| 753 |
- .food .industry_content .box, .food .industry_content .boxs{width:100%;}
|
|
| 754 |
- |
|
| 755 |
- /* cosmeceuticals */ |
|
| 756 |
- .cosme .stage_ul{background:url(/publish/usr/images/pipeline/cosmeceuticals_icon07.png) no-repeat center; flex-direction:column;}
|
|
| 757 |
- .cosme .stage_ul li{width:100%;}
|
|
| 758 |
- .cosme .box_white{flex-direction:column;}
|
|
| 759 |
- .cosme .box_white li{width:100%;flex-direction:row;text-align:left;}
|
|
| 760 |
- .cosme .box_white li p{width:calc(100% - 100px);}
|
|
| 761 |
- |
|
| 762 |
- .btn_move{font-size:18px;padding:0 40px;white-space:nowrap}
|
|
| 763 |
- .btn_move i{display:none;}
|
|
| 764 |
-} |
|
| 765 |
- |
|
| 766 |
-@media (max-width: 500px){
|
|
| 767 |
- |
|
| 768 |
- .dl_wrap dt{font-size:18px;}
|
|
| 769 |
- |
|
| 770 |
- /* ================================================== |
|
| 771 |
- Company |
|
| 772 |
-================================================== */ |
|
| 773 |
- |
|
| 774 |
-/* 연혁 */ |
|
| 775 |
- .month_ul dl{flex-direction:column;gap:12px;}
|
|
| 776 |
- .month_ul dd{width:100%;}
|
|
| 777 |
- |
|
| 778 |
- .brain_health .box_wrap.border.accent .box,.brain_health .box_small.white li{flex-direction:column;}
|
|
| 779 |
- .brain_health .box_wrap.border.accent .box{padding:40px 20px;}
|
|
| 780 |
- .brain_health .box_small.white p{width:100%;}
|
|
| 781 |
- .box_wrap.border.accent .title{width:95%;}
|
|
| 782 |
- .brain_health .box_small.white p{font-size:16px;}
|
|
| 783 |
- .timeline_list li{width:100%;}
|
|
| 784 |
- .timeline_list .year{width:100%;}
|
|
| 785 |
- .brain_health .timeline_list li .line,.brain_health .timeline_list li:first-child .line{height:100%;}
|
|
| 786 |
- .brain_health .timeline_list li:last-child .line{height:calc(100% - 70px);}
|
|
| 787 |
- .timeline_list li:not(:last-child)::after{display:none;}
|
|
| 788 |
- |
|
| 789 |
-}(No newline at end of file) |
+++ src/main/webapp/publish/usr/images/pipeline/brain_health_img03_eng.png
| Binary file is not shown |
--- src/main/webapp/publish/usr/script/content.js
+++ src/main/webapp/publish/usr/script/content.js
... | ... | @@ -1,131 +1,135 @@ |
| 1 |
-/** |
|
| 2 |
- * 공통 UI 및 메뉴 로직 제어 |
|
| 3 |
- */ |
|
| 4 |
-$(function () {
|
|
| 5 |
- // 0. 메뉴 링크 자동 매핑 실행 (하위 첫 번째 메뉴 연결) |
|
| 6 |
- updateMenuLinks(); |
|
| 7 |
- |
|
| 8 |
- // 1. 페이지 타이틀에 따른 컨테이너 레이아웃 클래스 제어 |
|
| 9 |
- const pageTitle = $(".sub_title").text().trim().toUpperCase();
|
|
| 10 |
- const $container = $("#container");
|
|
| 11 |
- |
|
| 12 |
- if (pageTitle === "COMPANY") {
|
|
| 13 |
- $container.addClass("company");
|
|
| 14 |
- } else if (pageTitle === "PIPELINE") {
|
|
| 15 |
- $container.addClass("pipeline");
|
|
| 16 |
- } else if (pageTitle === "PLATFORM TECHNOLOGIES") {
|
|
| 17 |
- $container.addClass("platform_tech");
|
|
| 18 |
- } else {
|
|
| 19 |
- $container.addClass("achievement");
|
|
| 20 |
- } |
|
| 21 |
- |
|
| 22 |
- // 2. 상대 경로 이미지 주소 치환 (../ -> /publish/usr/) |
|
| 23 |
- $('[src]').each(function () {
|
|
| 24 |
- const src = $(this).attr('src');
|
|
| 25 |
- if (src && src.indexOf('../') === 0) {
|
|
| 26 |
- $(this).attr('src', src.replace(/^\.\.\//, '/publish/usr/'));
|
|
| 27 |
- } |
|
| 28 |
- }); |
|
| 29 |
- |
|
| 30 |
- /** |
|
| 31 |
- * ========================================== |
|
| 32 |
- * 연혁(History) 스크롤 인터랙션 |
|
| 33 |
- * ========================================== |
|
| 34 |
- */ |
|
| 35 |
- const BREAKPOINT = 1280; |
|
| 36 |
- |
|
| 37 |
- function bindHistoryScroll() {
|
|
| 38 |
- // 기존 이벤트 해제 (리사이즈 시 중복 방지) |
|
| 39 |
- $('.history_month').off('scroll.history');
|
|
| 40 |
- $(window).off('scroll.history');
|
|
| 41 |
- |
|
| 42 |
- // 모바일/태블릿 구간에서는 실행 안 함 |
|
| 43 |
- if ($(window).width() < BREAKPOINT) return; |
|
| 44 |
- |
|
| 45 |
- /** |
|
| 46 |
- * 1) 연혁 영역 내부 스크롤 시 연도(Year) 활성화 |
|
| 47 |
- */ |
|
| 48 |
- $('.history_month').on('scroll.history', function () {
|
|
| 49 |
- let currentId = null; |
|
| 50 |
- |
|
| 51 |
- $('.month_ul').each(function () {
|
|
| 52 |
- // 상단 위치를 계산하여 현재 활성화된 영역 감지 |
|
| 53 |
- if ($(this).position().top <= 1) {
|
|
| 54 |
- currentId = this.id; |
|
| 55 |
- } |
|
| 56 |
- }); |
|
| 57 |
- |
|
| 58 |
- if (currentId) {
|
|
| 59 |
- $('.year_item, .month_ul').removeClass('active');
|
|
| 60 |
- $('#' + currentId).addClass('active'); // 월 리스트 활성화
|
|
| 61 |
- $('#' + currentId.replace('year_', 'year')).addClass('active'); // 연도 버튼 활성화
|
|
| 62 |
- } |
|
| 63 |
- }); |
|
| 64 |
- |
|
| 65 |
- /** |
|
| 66 |
- * 2) 윈도우 스크롤 시 연혁 영역 활성화 제어 (스티키 효과 등) |
|
| 67 |
- */ |
|
| 68 |
- const TARGET = 719; // 활성화 기준 좌표 |
|
| 69 |
- const RANGE = 20; // 감지 허용 오차 범위 |
|
| 70 |
- const $history = $('.history_month');
|
|
| 71 |
- |
|
| 72 |
- $(window).on('scroll.history', function () {
|
|
| 73 |
- const scrollTop = $(this).scrollTop(); |
|
| 74 |
- |
|
| 75 |
- // 특정 스크롤 위치에 도달했을 때 클래스 부여 |
|
| 76 |
- if (scrollTop >= TARGET - RANGE && scrollTop <= TARGET + RANGE) {
|
|
| 77 |
- $history.addClass('active');
|
|
| 78 |
- } else {
|
|
| 79 |
- $history.removeClass('active');
|
|
| 80 |
- } |
|
| 81 |
- }); |
|
| 82 |
- } |
|
| 83 |
- |
|
| 84 |
- // 연혁 스크롤 이벤트 초기화 |
|
| 85 |
- bindHistoryScroll(); |
|
| 86 |
- |
|
| 87 |
- // 브라우저 리사이즈 시 대응 |
|
| 88 |
- $(window).on('resize', function() {
|
|
| 89 |
- bindHistoryScroll(); |
|
| 90 |
- }); |
|
| 91 |
-}); |
|
| 92 |
- |
|
| 93 |
-/** |
|
| 94 |
- * 하위 메뉴 구조를 분석하여 상위 메뉴의 href 링크를 자동으로 설정 |
|
| 95 |
- */ |
|
| 96 |
-function updateMenuLinks() {
|
|
| 97 |
- // 1. 2Depth 메뉴 링크 업데이트 |
|
| 98 |
- $('.depth02').each(function () {
|
|
| 99 |
- const $this = $(this); |
|
| 100 |
- const menuText = $.trim($this.text()); |
|
| 101 |
- |
|
| 102 |
- // Selective Autophagy: 하위 메뉴가 아닌 고정 경로로 이동 |
|
| 103 |
- if (menuText === "Selective Autophagy") {
|
|
| 104 |
- $this.attr('href', '/web/content.do?proFn=999314000');
|
|
| 105 |
- return true; // continue |
|
| 106 |
- } |
|
| 107 |
- |
|
| 108 |
- // 하위 3Depth 중 첫 번째 유효한 링크 탐색 |
|
| 109 |
- const firstDepth03Href = $this.closest('li').find('.depth03').filter(function () {
|
|
| 110 |
- const href = $(this).attr('href');
|
|
| 111 |
- return href && href !== '#' && href !== ''; |
|
| 112 |
- }).first().attr('href');
|
|
| 113 |
- |
|
| 114 |
- if (firstDepth03Href) {
|
|
| 115 |
- $this.attr('href', firstDepth03Href);
|
|
| 116 |
- } |
|
| 117 |
- }); |
|
| 118 |
- |
|
| 119 |
- // 2. 1Depth 메뉴 링크 업데이트 |
|
| 120 |
- $('.depth01').each(function () {
|
|
| 121 |
- // 하위에 업데이트된 2Depth 또는 존재하는 3Depth 중 첫 번째 유효한 링크 탐색 |
|
| 122 |
- const firstChildHref = $(this).closest('li').find('.depth02, .depth03').filter(function () {
|
|
| 123 |
- const href = $(this).attr('href');
|
|
| 124 |
- return href && href !== '#' && href !== ''; |
|
| 125 |
- }).first().attr('href');
|
|
| 126 |
- |
|
| 127 |
- if (firstChildHref) {
|
|
| 128 |
- $(this).attr('href', firstChildHref);
|
|
| 129 |
- } |
|
| 130 |
- }); |
|
| 1 |
+/** |
|
| 2 |
+ * 공통 UI 및 메뉴 로직 제어 |
|
| 3 |
+ */ |
|
| 4 |
+$(function () {
|
|
| 5 |
+ // 0. 메뉴 링크 자동 매핑 실행 (하위 첫 번째 메뉴 연결) |
|
| 6 |
+ updateMenuLinks(); |
|
| 7 |
+ |
|
| 8 |
+ // 1. 페이지 타이틀에 따른 컨테이너 레이아웃 클래스 제어 |
|
| 9 |
+ const pageTitle = $(".sub_title").text().trim().toUpperCase();
|
|
| 10 |
+ const $container = $("#container");
|
|
| 11 |
+ |
|
| 12 |
+ if (pageTitle === "COMPANY") {
|
|
| 13 |
+ $container.addClass("company");
|
|
| 14 |
+ } else if (pageTitle === "PIPELINE") {
|
|
| 15 |
+ $container.addClass("pipeline");
|
|
| 16 |
+ } else if (pageTitle === "PLATFORM TECHNOLOGIES") {
|
|
| 17 |
+ $container.addClass("platform_tech");
|
|
| 18 |
+ } else {
|
|
| 19 |
+ $container.addClass("achievement");
|
|
| 20 |
+ } |
|
| 21 |
+ |
|
| 22 |
+ // 2. 상대 경로 이미지 주소 치환 (../ -> /publish/usr/) |
|
| 23 |
+ $('[src]').each(function () {
|
|
| 24 |
+ const src = $(this).attr('src');
|
|
| 25 |
+ if (src && src.indexOf('../') === 0) {
|
|
| 26 |
+ $(this).attr('src', src.replace(/^\.\.\//, '/publish/usr/'));
|
|
| 27 |
+ } |
|
| 28 |
+ }); |
|
| 29 |
+ |
|
| 30 |
+ /** |
|
| 31 |
+ * ========================================== |
|
| 32 |
+ * 연혁(History) 스크롤 인터랙션 |
|
| 33 |
+ * ========================================== |
|
| 34 |
+ */ |
|
| 35 |
+ const BREAKPOINT = 1280; |
|
| 36 |
+ |
|
| 37 |
+ function bindHistoryScroll() {
|
|
| 38 |
+ // 기존 이벤트 해제 (리사이즈 시 중복 방지) |
|
| 39 |
+ $('.history_month').off('scroll.history');
|
|
| 40 |
+ $(window).off('scroll.history');
|
|
| 41 |
+ |
|
| 42 |
+ // 모바일/태블릿 구간에서는 실행 안 함 |
|
| 43 |
+ if ($(window).width() < BREAKPOINT) return; |
|
| 44 |
+ |
|
| 45 |
+ /** |
|
| 46 |
+ * 1) 연혁 영역 내부 스크롤 시 연도(Year) 활성화 |
|
| 47 |
+ */ |
|
| 48 |
+ $('.history_month').on('scroll.history', function () {
|
|
| 49 |
+ let currentId = null; |
|
| 50 |
+ |
|
| 51 |
+ $('.month_ul').each(function () {
|
|
| 52 |
+ // 상단 위치를 계산하여 현재 활성화된 영역 감지 |
|
| 53 |
+ if ($(this).position().top <= 1) {
|
|
| 54 |
+ currentId = this.id; |
|
| 55 |
+ } |
|
| 56 |
+ }); |
|
| 57 |
+ |
|
| 58 |
+ if (currentId) {
|
|
| 59 |
+ $('.year_item, .month_ul').removeClass('active');
|
|
| 60 |
+ $('#' + currentId).addClass('active'); // 월 리스트 활성화
|
|
| 61 |
+ $('#' + currentId.replace('year_', 'year')).addClass('active'); // 연도 버튼 활성화
|
|
| 62 |
+ } |
|
| 63 |
+ }); |
|
| 64 |
+ |
|
| 65 |
+ /** |
|
| 66 |
+ * 2) 윈도우 스크롤 시 연혁 영역 활성화 제어 (스티키 효과 등) |
|
| 67 |
+ */ |
|
| 68 |
+ const TARGET = 719; // 활성화 기준 좌표 |
|
| 69 |
+ const RANGE = 20; // 감지 허용 오차 범위 |
|
| 70 |
+ const $history = $('.history_month');
|
|
| 71 |
+ |
|
| 72 |
+ $(window).on('scroll.history', function () {
|
|
| 73 |
+ const scrollTop = $(this).scrollTop(); |
|
| 74 |
+ |
|
| 75 |
+ // 특정 스크롤 위치에 도달했을 때 클래스 부여 |
|
| 76 |
+ if (scrollTop >= TARGET - RANGE && scrollTop <= TARGET + RANGE) {
|
|
| 77 |
+ $history.addClass('active');
|
|
| 78 |
+ } else {
|
|
| 79 |
+ $history.removeClass('active');
|
|
| 80 |
+ } |
|
| 81 |
+ }); |
|
| 82 |
+ } |
|
| 83 |
+ |
|
| 84 |
+ // 연혁 스크롤 이벤트 초기화 |
|
| 85 |
+ bindHistoryScroll(); |
|
| 86 |
+ |
|
| 87 |
+ // 브라우저 리사이즈 시 대응 |
|
| 88 |
+ $(window).on('resize', function() {
|
|
| 89 |
+ bindHistoryScroll(); |
|
| 90 |
+ }); |
|
| 91 |
+}); |
|
| 92 |
+ |
|
| 93 |
+/** |
|
| 94 |
+ * 하위 메뉴 구조를 분석하여 상위 메뉴의 href 링크를 자동으로 설정 |
|
| 95 |
+ */ |
|
| 96 |
+function updateMenuLinks() {
|
|
| 97 |
+ // 1. 2Depth 메뉴 링크 업데이트 |
|
| 98 |
+ $('.depth02').each(function () {
|
|
| 99 |
+ const $this = $(this); |
|
| 100 |
+ const menuText = $.trim($this.text()); |
|
| 101 |
+ |
|
| 102 |
+ // Selective Autophagy: 하위 메뉴가 아닌 고정 경로로 이동 |
|
| 103 |
+ if (menuText === "Selective Autophagy") {
|
|
| 104 |
+ if ($("#lang-eng").is(".active")) {
|
|
| 105 |
+ $this.attr('href', '/web/content.do?proFn=998214001');
|
|
| 106 |
+ } else {
|
|
| 107 |
+ $this.attr('href', '/web/content.do?proFn=999314000');
|
|
| 108 |
+ } |
|
| 109 |
+ return true; |
|
| 110 |
+ } |
|
| 111 |
+ |
|
| 112 |
+ // 하위 3Depth 중 첫 번째 유효한 링크 탐색 |
|
| 113 |
+ const firstDepth03Href = $this.closest('li').find('.depth03').filter(function () {
|
|
| 114 |
+ const href = $(this).attr('href');
|
|
| 115 |
+ return href && href !== '#' && href !== ''; |
|
| 116 |
+ }).first().attr('href');
|
|
| 117 |
+ |
|
| 118 |
+ if (firstDepth03Href) {
|
|
| 119 |
+ $this.attr('href', firstDepth03Href);
|
|
| 120 |
+ } |
|
| 121 |
+ }); |
|
| 122 |
+ |
|
| 123 |
+ // 2. 1Depth 메뉴 링크 업데이트 |
|
| 124 |
+ $('.depth01').each(function () {
|
|
| 125 |
+ // 하위에 업데이트된 2Depth 또는 존재하는 3Depth 중 첫 번째 유효한 링크 탐색 |
|
| 126 |
+ const firstChildHref = $(this).closest('li').find('.depth02, .depth03').filter(function () {
|
|
| 127 |
+ const href = $(this).attr('href');
|
|
| 128 |
+ return href && href !== '#' && href !== ''; |
|
| 129 |
+ }).first().attr('href');
|
|
| 130 |
+ |
|
| 131 |
+ if (firstChildHref) {
|
|
| 132 |
+ $(this).attr('href', firstChildHref);
|
|
| 133 |
+ } |
|
| 134 |
+ }); |
|
| 131 | 135 |
}(No newline at end of file) |
Add a comment
Delete comment
Once you delete this comment, you won't be able to recover it. Are you sure you want to delete this comment?