--- src/main/webapp/WEB-INF/jsp/web/com/webCommonHeader.jsp
+++ src/main/webapp/WEB-INF/jsp/web/com/webCommonHeader.jsp
... | ... | @@ -176,6 +176,7 @@ |
| 176 | 176 |
var newHref = href; |
| 177 | 177 |
if (href.indexOf('?') > -1) {
|
| 178 | 178 |
newHref += '&menuUserType=' + currentLang; |
| 179 |
+ $(".container").addClass("eng");
|
|
| 179 | 180 |
} else {
|
| 180 | 181 |
newHref += '?menuUserType=' + currentLang; |
| 181 | 182 |
} |
--- src/main/webapp/WEB-INF/jsp/web/com/webLayout.jsp
+++ src/main/webapp/WEB-INF/jsp/web/com/webLayout.jsp
... | ... | @@ -32,6 +32,9 @@ |
| 32 | 32 |
<link rel="stylesheet" href="/publish/usr/css/table.css"> |
| 33 | 33 |
<link rel="stylesheet" href="/publish/usr/css/style.css"> |
| 34 | 34 |
<link rel="stylesheet" href="/publish/usr/css/content.css"> |
| 35 |
+ <c:if test="${param.menuUserType eq 'ENG'}">
|
|
| 36 |
+ <link rel="stylesheet" href="/publish/usr/css/content_eng.css"> |
|
| 37 |
+ </c:if> |
|
| 35 | 38 |
<!-- //css --> |
| 36 | 39 |
|
| 37 | 40 |
<!-- script --> |
--- src/main/webapp/WEB-INF/jsp/web/main/mainPageEng.jsp
+++ src/main/webapp/WEB-INF/jsp/web/main/mainPageEng.jsp
... | ... | @@ -187,7 +187,7 @@ |
| 187 | 187 |
<div class="text_area"> |
| 188 | 188 |
<b class="title">ORGASIS <span class="line">Organellostasis</span></b> |
| 189 | 189 |
<span class="summary"> |
| 190 |
- Developing innovative new drugs and <br />anti-aging materials with organelle homeostasis platform technology |
|
| 190 |
+ Development of Innovative Therapeutics and Anti-Aging Ingredients Using Organelle Homeostasis Platform Technology |
|
| 191 | 191 |
</span> |
| 192 | 192 |
<div class="slide_pagination"> |
| 193 | 193 |
|
... | ... | @@ -198,9 +198,7 @@ |
| 198 | 198 |
<a href="#"> |
| 199 | 199 |
<b class="title">ORGanelle Platform Tech</b> |
| 200 | 200 |
<span class="summary"> |
| 201 |
- Internal and external stimuli such as pathogenesis, stress and aging damage cellular organelles,<br /> |
|
| 202 |
- and the activity of selective autophagy that maintains their homeostasis declines or becomes deficient,<br /> |
|
| 203 |
- leading to a variety of diseases. |
|
| 201 |
+ Internal and external stimuli—including disease-related factors, stress, and aging—damage cellular organelles. Reduced or deficient selective autophagy, which maintains organelle homeostasis, can lead to various diseases. |
|
| 204 | 202 |
</span> |
| 205 | 203 |
</a> |
| 206 | 204 |
</li> |
... | ... | @@ -208,9 +206,7 @@ |
| 208 | 206 |
<a href="#"> |
| 209 | 207 |
<b class="title">ORGASIS Pipeline</b> |
| 210 | 208 |
<span class="summary"> |
| 211 |
- ORGASIS aims to contribute to a healthy future and a better life for humanity<br /> |
|
| 212 |
- through disease-specific drug development using selective autophagy<br /> |
|
| 213 |
- screening technology for damaged organelles and cellular waste. |
|
| 209 |
+ ORGASIS aims to contribute to a healthier future and better quality of life through disease-specific drug development using selective-autophagy technologies that identify and clear damaged organelles and cellular waste. |
|
| 214 | 210 |
</span> |
| 215 | 211 |
</a> |
| 216 | 212 |
</li> |
... | ... | @@ -218,9 +214,7 @@ |
| 218 | 214 |
<a href="#"> |
| 219 | 215 |
<b class="title">ORGASIS Achievement</b> |
| 220 | 216 |
<span class="summary"> |
| 221 |
- ORGASIS removes damaged cellular organelles, excess pigments and aggregates<br /> |
|
| 222 |
- with selective autophagy technology to realize anti-aging and Balanced Aging,<br /> |
|
| 223 |
- contributing to healthy aging and human longevity. |
|
| 217 |
+ ORGASIS aims to promote healthy aging and longevity by using selective autophagy to remove damaged organelles, excess pigment-related structures, and aggregates, supporting anti-aging and balanced aging. |
|
| 224 | 218 |
</span> |
| 225 | 219 |
</a> |
| 226 | 220 |
</li> |
--- src/main/webapp/publish/usr/css/content.css
+++ src/main/webapp/publish/usr/css/content.css
... | ... | @@ -932,4 +932,4 @@ |
| 932 | 932 |
.brain_health .timeline_list li:last-child .line{height:calc(100% - 70px);}
|
| 933 | 933 |
.timeline_list li:not(:last-child)::after{display:none;}
|
| 934 | 934 |
|
| 935 |
-}(No newline at end of file) |
|
| 935 |
+} |
+++ src/main/webapp/publish/usr/css/content_eng.css
... | ... | @@ -0,0 +1,789 @@ |
| 1 | +/* ================================================== | |
| 2 | + Company | |
| 3 | + ================================================== */ | |
| 4 | + | |
| 5 | +/* 설립배경 */ | |
| 6 | +.overview tr>th, .overview tr>td{font-size:16px;padding:10px;} | |
| 7 | + | |
| 8 | +/* 연혁 */ | |
| 9 | +.month_ul .month{white-space:nowrap;} | |
| 10 | + | |
| 11 | + | |
| 12 | +/* 조직도 */ | |
| 13 | +.organization_ceo,.organization_cto,.organization_item{font-size:20px;padding:8px;} | |
| 14 | +.organization_team li{padding:8px 20px;min-height:56px;} | |
| 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 | |
| 68 | + ================================================== */ | |
| 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%);} | |
| 189 | + | |
| 190 | +/* 피부질환 */ | |
| 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;} | |
| 202 | + | |
| 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%;} | |
| 211 | + | |
| 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;} | |
| 216 | + | |
| 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 | +} | |
| 593 | + | |
| 594 | +@media (max-width: 768px){ | |
| 595 | + | |
| 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 | + /* ================================================== | |
| 608 | + Company | |
| 609 | + ================================================== */ | |
| 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 | + | |
| 639 | + /* 연혁 */ | |
| 640 | + .month_ul .month{width:100px;font-size:20px;} | |
| 641 | + | |
| 642 | + | |
| 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 | +} | |
| 692 | + | |
| 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) |
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?