• Y
  • List All
  • Feedback
    • This Project
    • This Group
    • All Projects
Profile Account settings Log out
  • Favorite
  • Project
  • All
Loading...
  • Log in
  • Sign up
2025_PROJECT / orgasis star
  • Project homeH
  • CodeC
  • IssueI
  • Pull requestP
  • Review R
  • MilestoneM
  • BoardB
  • Files
  • Commit
  • Branches
orgasissrcmainwebapppublishusrcsscontent.css
Download as .zip file
File name
Commit message
Commit date
src/main
호버 수정
20 hours ago
.gitignore
5648 관리자 메인비주얼관리 수정
01-26
GEMINI.md
메뉴관리 > eng 영역 추가
02-04
README.md
first commit
2025-12-11
pom.xml
first commit
2025-12-11
File name
Commit message
Commit date
java/kcc
오가시스 서브페이지 수정
04-16
resources
메뉴관리 > eng 영역 추가
02-04
webapp
호버 수정
20 hours ago
File name
Commit message
Commit date
META-INF
first commit
2025-12-11
WEB-INF
메인, 푸터
21 hours ago
ark
first commit
2025-12-11
common
first commit
2025-12-11
css
first commit
2025-12-11
editor
first commit
2025-12-11
font
first commit
2025-12-11
html
first commit
2025-12-11
ico
first commit
2025-12-11
images
first commit
2025-12-11
js
서브페이지 snb...
04-15
publish
호버 수정
20 hours ago
index.jsp
first commit
2025-12-11
insp.html
first commit
2025-12-11
tempPrint.html
first commit
2025-12-11
File name
Commit message
Commit date
adm
관리자 헤더 select 삭제, 메인 텍스트 변경, 사용자 사이트맵 스크롤
04-17
common
관리자 접속통계 수정
01-30
usr
호버 수정
20 hours ago
File name
Commit message
Commit date
achievement
서브페이지 추가
21 hours ago
company
서브페이지 추가
21 hours ago
css
호버 수정
20 hours ago
guide
서브페이지 추가
21 hours ago
images
organexus 추가
20 hours ago
layout
서브페이지 추가
21 hours ago
menu1
오가시스 사용자 페이지
01-20
pipeline
서브페이지 추가
21 hours ago
platform-tech
organexus 추가
20 hours ago
script
서브페이지 추가
21 hours ago
index.html
오가시스 사용자 페이지
01-20
File name
Commit message
Commit date
button.css
포토형 게시판, 일반게시판 상세 수정
01-28
calendar.css
first commit
2025-12-11
common.css
오가시스 사용자 페이지
01-20
content.css
호버 수정
20 hours ago
icon.css
서브페이지 snb...
04-15
main.css
서브페이지 snb...
04-15
popup.css
오가시스 사용자 페이지
01-20
style.css
팝업 css 수정
01-30
tab.css
오가시스 사용자 페이지
01-20
table.css
포토형 게시판, 일반게시판 상세 수정
01-28
subsub 20 hours ago 35107d4 호버 수정 UNIX
Raw Open in browser Change history
/* ================================================== 공통레이아웃 ================================================== */ .skip_menu {position: absolute;left: 0;top: 0;width: 100%;margin: 0 auto;z-index: 999;} .skip_menu a {outline: 3px solid red;display: block;position: absolute;left: 0;padding: 10px 20px;height: 50px;line-height: 30px;color: #fff;background: #000;width: 100%;text-align: center;font-size: 18px;box-sizing: border-box;} .skip_menu a:link,.skip_menu a:visited,.skip_menu a:active {top: -10000px;} .skip_menu a:hover,.skip_menu a:focus {top: 3px;} .sub_visual{position:relative;width:100%;height:615px;border-radius:0 0 80px 80px;background-position:center;} .sub_title{display:flex;height:100%;font-family:var(--secondary-title-font);font-size:60px;font-weight:bold;color:#fff;letter-spacing:1px;text-shadow:0 0 20px rgba(0,0,0,.3);align-items:center;justify-content:center;text-transform:uppercase;} .sub_visual_nav{position:relative;display:flex;width:70%;border-radius:38px 38px 0 0;background:#fff;padding:0 20px;bottom:66px;left:50%;transform:translateX(-50%);align-items:center;} .sub_visual_nav a,.sub_visual_nav .snb_wrap{position:relative;height:66px;} .sub_visual_nav>a::after,.sub_visual_nav .snb_wrap::after{position:absolute;display:inline-block;content:"";width:1px;height:20px;background:#d9d9d9;right:0;top:50%;transform:translateY(-50%);} .sub_visual_nav .snb_wrap:last-child::after{display:none;} .sub_visual_nav::before,.sub_visual_nav::after{position:absolute;content:"";width:41px;height:41px;bottom:0;} .sub_visual_nav::before{background:url(/publish/usr/images/common/sub_visual_nav_left.png);left:-40px;} .sub_visual_nav::after{background:url(/publish/usr/images/common/sub_visual_nav_right.png);right:-40px;} .sub_visual_nav .snb_wrap{min-width:calc((100% - 66px)/3);max-width:calc((100% - 66px)/2);flex:1;} .snb_title{width:100%;height:100%;font-size:20px;font-weight:500;text-align:left;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;padding:0 60px 0 20px;border:none;background:url(/publish/usr/images/component/icon_select.png) no-repeat calc(100% - 20px) center;} .snb_select{position:absolute;display:none;width:100%;background:#fff;padding:10px;overflow:hidden;top:calc(100% + 4px);border-radius:8px;box-shadow:2px 3px 4px 0 rgba(0, 0, 0, .08);} .snb_select a{display:flex;height:40px;font-size:16px;padding:0 20px;justify-content:flex-start;align-items:center;} .snb_select a:hover{background:var(--primary-light-color);color:var(--primary-color);border-radius:8px;} .active .snb_select{width:100%;height:auto;left:0;border:1px solid #f0f0f0;} .company .sub_visual{background:url(/publish/usr/images/company/visual.jpg) center;} .platform_tech .sub_visual{background:url(/publish/usr/images/platform-tech/visual.jpg) center;} .pipeline .sub_visual{background:url(/publish/usr/images/pipeline/visual.jpg) center;} .achievement .sub_visual{background:url(/publish/usr/images/achievement/visual.jpg) center;} .con_title{display:flex;margin:80px 0 36px 0;flex-direction:column;} .con_title .summary{font-family:var(--secondary-title-font);font-size:24px;margin:0 0 12px 0;} .con_title .summary.black{font-family:var(--primary-title-font);} .con_title .title{font-family:var(--secondary-title-font);font-size:36px;text-align:left;;} .box{background:#f2f4f6;border-radius:40px;} .video_wrap,.video{width:100%;border-radius:8px;} .video_wrap{position:relative;} .video_wrap::after{position:absolute;content:"";width:calc(100% + 6px);height:calc(100% + 6px);border-radius:8px;background:linear-gradient(114deg,rgba(95, 72, 176, 1) 0%, rgba(59, 91, 176, 1) 100%);left:-3px;top:-3px;z-index:-1;} .btn_move{display:inline-flex;height:60px;margin:80px auto 0;border:1px solid var(--primary-color);border-radius:100px;font-family:var(--secondary-title-font);font-size:24px;font-weight:bold;color:var(--primary-color);padding:0 60px;justify-content:center;align-items:center;gap:8px;transition:all .3s;} .btn_move i{display:inline-block;width:70px;height:35px;background:url(/publish/usr/images/component/icon_arrow_right_long.png) no-repeat center;} .btn_move:hover{background:var(--primary-color);color:#fff;} .btn_move:hover i{background:url(/publish/usr/images/component/icon_arrow_right_long_white.png) no-repeat center;} /* ================================================== Company ================================================== */ /* 설립배경 */ .overview{text-align:center;} .overview_contents_top{background:url(/publish/usr/images/company/corp_bg.png) no-repeat center 80px;} .overview .txt strong{font-family:var(--secondary-title-font);font-size:52px;font-weight:bold;} .overview .txt strong span{font-family:var(--secondary-title-font);font-weight:bold;} .overview .txt p{font-family:var(--secondary-title-font);font-size:24px;} .overview .card{display:flex;padding:90px 0 280px 0;gap:46px;justify-content:center;} .overview .card li{position:relative;display:flex;width:calc((100% / 4) - 90px);height:363px;padding:0 30px;text-align:left;color:#fff;border-radius:24px;flex-direction:column;justify-content:flex-end;} .overview .card li:nth-child(2n){transform:translateY(52px);} .overview .card li:nth-child(1){background:url(/publish/usr/images/company/card_01.png) no-repeat center;} .overview .card li:nth-child(2){background:url(/publish/usr/images/company/card_02.png) no-repeat center;} .overview .card li:nth-child(3){background:url(/publish/usr/images/company/card_03.png) no-repeat center;} .overview .card li:nth-child(4){background:url(/publish/usr/images/company/card_04.png) no-repeat center;} .overview .card .number,.overview .card .title{font-family:var(--secondary-title-font);font-weight:bold;} .overview .card .number{position:absolute;font-size:20px;top:25px;right:25px;} .overview .card .title{display:block;font-size:24px;font-weight:bold;} .overview .card .summary{font-size:16px;opacity:0.8;margin:0 0 32px 0;word-break:keep-all;} .overview .circles{position:relative;justify-content:space-between;padding:0 180px;margin:80px 0;} .overview .circles::after{position:absolute;content:"";width:45%;height:1px;border:1px dashed var(--primary-color);right:180px;z-index:-1;} .overview .circles,.overview .circles .left{display:flex;align-items:center;} .overview .circles .left, .overview .circles .right{position:relative;} .overview .circles .left::after, .overview .circles .right::after{position:absolute;content:"";width:16px;height:16px;border-radius:100%;top:50%;transform:translateY(-50%);} .overview .circles .left::after{background:var(--primary-color);right:-8px;} .overview .circles .right::after{border:1px solid var(--primary-color);background:#fff;left:-8px;} .overview .circle.line{position:relative;display:flex;width:400px;height:400px;font-family:var(--secondary-title-font);font-size:32px;color:var(--primary-color);background:#fff;border:1px solid var(--primary-color);border-radius:100%;justify-content:center;align-items:center;} .overview .circle.line:first-child{z-index:2;background:transparent;} .overview .circle.line:first-child::after{position:absolute;content:"+";width:20px;height:40px;font-family:var(--secondary-title-font);font-size:32px;font-weight:bold;right:18px} .overview .circle.line:last-child{margin:0 0 0 -60px;} .overview .circle.fill{position:relative;display:flex;width:460px;height:460px;font-family:var(--secondary-title-font);font-size:40px;color:#fff;background:var(--primary-color);border-radius:100%;justify-content:center;align-items:center;} .overview .circle.fill::after{position:absolute;content:"";width:calc(100% + 60px);height:calc(100% + 60px);background:url(/publish/usr/images/company/obg_deco.png) no-repeat center center;left:-30px;top:-30px;z-index:-1;} .overview table{table-layout:fixed;width:calc(100% + 24px);border-spacing:12px;border-collapse:separate;margin:0 0 0 -12px;} .overview 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;} .overview thead th img{margin:0 auto;} .overview tr>th,.overview 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;} .overview tbody td{position:relative;background:#f4f4f4;} .overview tbody img{margin:0 auto;mix-blend-mode:darken;} .overview .emphasis_tr{position:relative;} .overview .emphasis_tr::after{position:absolute;content:"";width:100%;height:calc(100% + 10px);border:2px solid #5F48B0;left:-6px;top:-5px;z-index:-1;border-radius:8px;} .overview .emphasis_tr td{background:#EFEDF8;color:#5F48B0;} .overview .box_wrap{display:flex;gap:24px;margin:48px 0 0 0;} .overview .box{background:#fff;} .overview .box dt{position:relative;display:flex;width:80%;height:50px;margin:0 auto;font-family:var(--secondary-title-font);font-size:20px;font-weight:bold;color:#fff;border-radius:90px;justify-content:center;align-items:center;z-index:2;} .overview .skyblue dt{background:var(--accent-color);} .overview .blue dt{background:var(--secondary-color);} .overview .purple dt{background:var(--primary-color);} .overview .box dd{min-height:174px;padding:60px 30px 40px;margin:-26px 0 0 0;font-size:20px;border:1px solid #d5d5d5;border-radius:8px;} .overview .skyblue dd{border:1px solid var(--accent-color);} .overview .blue dd{border:1px solid var(--secondary-color);} .overview .purple dd{border:1px solid var(--primary-color);} .overview .box b{font-weight:700;} .overview .box span{font-weight:700;color:var(--secondary-color);} /* 조직도 */ .org_list{display:flex;flex-wrap:wrap;gap:48px 58px;} .org_list>li{width:calc((100% / 2) - 29px);padding:40px;background:#f2f4f6;border-radius:20px;} .org_name{display:flex;flex-direction:column;} .org_name span{font-size:16px;font-weight:700;} .org_name strong{font-family:var(--secondary-title-font);font-size:28px;font-weight:700;} .org_list .list{display:flex;list-style:disc;margin:12px 0 0 0;padding:0 20px;flex-direction:column;gap:4px;} .org_list .list .summary{font-size:14px;color:#444;text-indent:28px;} .organization{max-width:1200px;margin:0 auto 80px;padding:80px 20px;position:relative;} .organization *{box-sizing:border-box;font-family:var(--secondary-title-font);font-weight:bold;} /* CEO */ .organization_top{position:relative;padding-bottom:269px;text-align:center;} .organization_ceo{display:inline-flex;align-items:center;justify-content:center;width:378px;height:87px;border-radius:100px;background:#5c46c2;color:#fff;font-size:22px;font-weight:700;margin:0 auto;} .organization_top::after{content:"";position:absolute;top:64px;left:50%;width:1px;height:100%;background:#5F48B0;transform:translateX(-50%);} /* CTO */ .organization_cto{position:absolute;left:0.3%;top:50%;display:flex;align-items:center;justify-content:center;width:378px;height:87px;border:1px solid #8e7be4;border-radius:100px;background:#f3f0ff;color:#5c46c2;font-size:22px;font-weight:700;} .organization_cto::after{content:"";position:absolute;top:50%;right:-200px;width:200px;height:1px;background:#5F48B0;} /* 가운데 */ .organization_middle{position:relative;display:flex;justify-content:space-between;align-items:flex-start;} .organization_middle::before{content:"";position:absolute;top:50%;left:16.66%;right:16.66%;height:1px;background:#5F48B0;} /* 본부 */ .organization_item{position:relative;width:31%;padding:8px 0 0 0;display:flex;flex-direction:column;align-items:center;} .organization_item>span{display:block;} .organization_item{font-size:22px;font-weight:700;} .organization_item{display:flex;} .organization_item:first-child, .organization_center, .organization_item:last-child{align-items:center;} .organization_item:first-child::after, .organization_item:last-child::after{content:"";position:absolute;top:85px;left:50%;width:1px;height:80px;border-left:1px dashed var(--primary-color);transform:translateX(-50%);} .organization_item, .organization_center{min-height:64px;} .organization_item{justify-content:flex-start;} .organization_item{color:#5c46c2;} .organization_item{width:31%;} .organization_item{text-align:center;} .organization_item{border:1px solid #8e7be4;border-radius:100px;height:87px;justify-content:center;background:#fff;} /* 팀 */ .organization_team{position:absolute;width:100%;margin:70px 0 0;padding:0;list-style:none;top:80px;} .organization_team li{display:flex;align-items:center;justify-content:center;width:100%;height:56px;font-family:var( --primary-title-font);margin-top:16px;border-radius:40px;background:#f2effb;color:var(--primary-color);font-weight:600;} /* 오시는 길 */ /* 오시는 길 -> Contact us로 변경*/ .mail_banner{position:relative;border-radius:20px;background:#5F48B0 ;background-size:cover;margin:0 0 80px 0;padding:78px 140px;} .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;} .mail_banner strong{font-family:var(--secondary-title-font);font-size:52px;font-weight:bold;color:#fff;} .mail_banner span{display:block;padding:12px 0 0 0;font-family:var(--secondary-title-font);font-size:22px;font-weight:500;color:#fff;} .mail_banner img{position:absolute;right:118px;top:50px;} .location_list{display:flex;flex-direction:column;gap:80px;} .location_list>li{display:flex;gap:60px;align-items:center;} .location_area{width:760px;height:500px;border-radius:20px;background:#f2f4f6;} .location_list .title{display:flex;margin:0 0 20px 0;font-size:36px;align-items:center;gap:12px;} .location_list .location{width:32px;height:42px;background:url(/publish/usr/images/component/location.png) no-repeat center;} .location_list .info{width:calc(100% - 820px);} .location_list .info p{font-size:20px;font-weight:400;} .location_list .boxs{display:flex;margin:40px 0 0 0;flex-direction:column;gap:20px;} .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;} .location_list .phone{width:40px;height:40px;background:url(/publish/usr/images/component/phone.png) no-repeat center center;} .location_list .email{width:40px;height:40px;background:url(/publish/usr/images/component/email.png) no-repeat center center;} .location_list .fax{width:40px;height:40px;background:url(/publish/usr/images/component/fax.png) no-repeat center center;} .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;;} /* 연혁 */ .history_area{position:relative;display:flex;height:818px;gap:89px;overflow:hidden;} .history_year{position:sticky;width:600px;display:flex;height:900px;flex-shrink:0;flex-direction:column;top:0;} .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;} .year_item.active{opacity:1;transform:translateY(0);} .year_item strong{font-family:var(--secondary-title-font);font-size:60px;font-weight:bold;} .year_item .img_box{margin:20px 0 0 0;border-radius:20px;overflow:hidden;} .history_month {position:absolute;width:100%;max-height:100%;overflow-y:auto;-ms-overflow-style:none;scrollbar-width:none;} .month_ul{display:flex;width:calc(100% - 690px);flex-direction:column;margin:0 0 80px auto;} .month_ul li:first-child{border-top:1px solid #e0e0e0;} .month_ul li:last-child{border:0;} .month_ul li{border-bottom:1px solid #e0e0e0;} .month_ul dl{display:flex;padding:40px 0;gap:60px;align-items:flex-start;} .month_ul dd{width:calc(100% - 80px);} .month_ul dd p:nth-child(n+2){margin:36px 0 0 0;} .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;} .month_ul strong{font-size:20px;font-weight:600;;} .month_ul .summary{display:block;font-size:20px;font-weight:400;color:#444;margin:8px 0 0 0;} #year_2025 .month{width:100px;} .history_month.active{position:fixed;left:0;top:207px;} .active .month_ul{width:calc(100% - 903px);margin:0 5.7% 0 auto;} /* ================================================== Platform Technologies ================================================== */ .autophagy_common{padding:40px 20px;} .autophagy_common img{margin:0 auto;} .figure_content{display:flex;gap:65px;align-items:center;} .figure_content.column{flex-direction:column;align-items:flex-start;} .figure_content .box{display:flex;width:50%;padding:50px 30px;justify-content:center;align-items:center;box-sizing:border-box;} .figure_content .box img{mix-blend-mode:multiply;} .figure_content.column .box{width:100%;margin:20px 0 60px 0;} .figure_content.column .figure_desc{width:100%;} .figure_desc{display:flex;flex-direction:column;gap:24px;} .figure_desc li{min-height:30px;font-size:24px;font-weight:400;text-indent:32px;} .figure_desc.circle li{background:url(/publish/usr/images/component/list_circle.png) no-repeat left 8px;} .figure_desc.square li{background:url(/publish/usr/images/component/list_square.png) no-repeat left 8px;} .paper_content{display:flex;margin:0 0 40px 0;flex-wrap:wrap;gap:20px;} .paper_content .box{width:calc(50% - 10px);padding:32px 0;text-align:center;} .paper_content img{max-height:407px;margin:0 auto 12px auto;} .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;} /* Anti Cancer */ .cancer .figure_content .box img{mix-blend-mode:darken;} /* R&D */ .rd .figure_content.column{gap:40px;} .rd .figure_content .box{margin:0;} .rd .figure_content .box:first-child img{mix-blend-mode: normal;} /* Pipeline Summary */ .pipeline table{table-layout:fixed;width:100%;border-spacing:12px;border-collapse:separate;} .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;} .pipeline thead tr:nth-child(2) th{height:44px;font-size:16px;background:#EBEFF7;} .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;} .pipeline tbody th{background:#f4f4f4;} .pipeline tbody td{position:relative;border:1px solid #e0e0e0;background:#fff;} .pipeline tbody td[colspan="6"]{border:2px solid #cbd7ff;} .pipeline tbody td.primary_light{background:#E9EDF8;border:0;} .pipeline .graph{position:absolute;width:100%;top:50%;transform:translateY(-50%);} .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} .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;} .pipeline .graph.purple span{background:linear-gradient(90deg, #EFEDF7 0%, #5F48B0 100%);} .pipeline .graph.purple span::after{background:url(/publish/usr/images/major_result/polygon_purple.png) no-repeat center center;} .pipeline .graph.orange span{background:linear-gradient(90deg, #FFEADF 0%, #FF8748 100%);} .pipeline .graph.orange span::after{background:url(/publish/usr/images/major_result/polygon_orange.png) no-repeat center center;} .pipeline .graph1 span{width:calc((100% / 6) - 20px);} .pipeline .graph2 span{width:calc((100% / 6)*2 - 100px);} .pipeline .graph3 span{width:calc((100% / 6)*3 - 100px);} .pipeline .graph4 span{width:calc((100% / 6)*4 - 100px);} .pipeline .graph5 span{width:calc((100% / 6)*5 - 100px);} .pipeline table ul{display:flex;} .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;} .pipeline table ul li:last-child{border:0;} /* .pipeline tr:first-child ul li:nth-child(n+5){flex-grow:0.5;color:#3b5bb0;} */ .pipeline .purple+ul li{color:#5F48B0;} .pipeline .purple+ul li:nth-child(4){flex-grow:1.2;} .pipeline .orange+ul li{color:#FF8748;} .pipeline .orange+ul li:nth-child(5){flex-grow:1.2;} .dl_wrap{display:flex;width:100%;gap:32px;} .dl_wrap dl{width:50%;} .dl_wrap dt{font-size:20px;font-weight:700;text-align:center;padding:11px 36px;background:var(--secondary-light-color);border-radius:8px;} .dl_wrap dt span{display:block;font-size:16px;font-weight:400;} .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;} .dl_wrap dd.dd_table{background:none;display:block;} .dl_wrap dd img{mix-blend-mode:darken;} .dl_wrap.fill.accent dt{height:56px;background:var(--accent-color);color:#fff;} .dl_wrap.fill.accent dd{margin:20px 0 0 0;} .timeline_list {position:relative;display:flex;width:100%;margin:0;padding:40px 0;justify-content:space-between;align-items:flex-start;} /* .timeline_list::before {position:absolute; top:24px; left:4%; right:4%; height:2px; background:#d9d9d9; content:"";} */ .timeline_list li {position:relative;width:calc(100% / 6);text-align:center;} .timeline_list li:not(:last-child)::after {position:absolute;content:"▶";top:13px;right:-10px;font-size:12px;color:#d9d9d9;} .timeline_list li.active::after {color:#33a6e8;} .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;} .timeline_list .active .year {border:2px solid #33a6e8; color:#33a6e8;} .timeline_list .line {position:absolute;width:2px;height:calc(100% - 70px);background:#cfcfcf;left:20%;} .timeline_list .active .line {background:#33a6e8;} .timeline_list .active .line::after {border-color:#33a6e8;} .timeline_list .content {margin:20px 0 0 0;} .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;} .timeline_list .content strong b{font-weight:700;} .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;} .timeline_list .active .content strong{color:#33a6e8;} .timeline_list .active .content strong::after{border:2px solid #33a6e8;} .timeline_list .content span {display:block;font-size:16px;font-weight:400;color:#666;} .timeline_list .content .point {font-weight:600; color:#33a6e8;} .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;} .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;} /* 퇴행성 뇌질환 */ .brain_health .figure_content{margin:80px 0 0 0;} .brain_health .box_wrap.border.accent p{font-size:18px;} .brain_health .box_wrap.border.accent img{margin:30px auto 0;} .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;} .brain_health .box_wrap.border.accent b{margin:0 0 0 4px;color:var(--accent-color);font-weight:bold;} .brain_health .box_small.white{display:flex;flex-direction:column;gap:30px;} .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;} .brain_health .box_small.white i{display:inline-block;width:108px;height:108px;background:var(--accent-light-color);border-radius:100%;} .brain_health .box_small.white li:first-child i{background-image:url(/publish/usr/images/pipeline/brain_health_icon01.png);} .brain_health .box_small.white li:nth-child(2) i{background-image:url(/publish/usr/images/pipeline/brain_health_icon02.png);} .brain_health .box_small.white p{width:calc(90% - 138px);font-size:18px;} .brain_health .box_small.white small{display:block;font-size:14px;font-weight:700;color:var(--accent-color);} .brain_health .box_small.white b{color:var(--accent-color);font-weight:700;} .brain_health .dl_wrap dd{margin:20px 0 0 0;padding:0 70px;} .brain_health .timeline_list li:first-child .line{height:calc(100% - 94px);} .brain_health .legend_content{align-items:stretch;margin:0 auto;} .brain_health .legend_content .box{display:flex;margin:0;padding:0 120px;flex-direction:column;gap:30px;} .brain_health .legend_content img{mix-blend-mode:darken;} .brain_health .legend_content .legend_list{display:flex;margin:20px 0 0 0;font-style:18px;font-weight:500;flex-direction:column;gap:8px;} .brain_health .legend_content .legend{display:inline-block;width:16px;height:16px;margin:-2.5px 6px 0 0;border-radius:100%;vertical-align:middle;} .brain_health .legend_content .legend.orange{background:linear-gradient(180deg, #FF8A3A 0%, #E45D00 100%);} .brain_health .legend_content .legend.blue{background:linear-gradient(180deg, #3B5BB0 0%, #19264A 100%);} /* 피부질환 */ .skin .dl_wrap dl:first-child{width:70%;} .skin .dl_wrap dl:first-child dd{padding:40px 37px 51px 37px;} .skin .dl_wrap .box_wrap{display:flex;gap:37px;} .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;} .skin .dl_wrap .box_wrap li b{color:var(--accent-color);font-weight:bold;} .skin .dl_wrap i{width:152px;height:152px;margin:0 auto;background:#ebf6fa;border-radius:100%;overflow:hidden;} .skin .dl_wrap li:nth-child(1) i{background-image:url(/publish/usr/images/pipeline/skin_icon01.png);} .skin .dl_wrap li:nth-child(2) i{background-image:url(/publish/usr/images/pipeline/skin_icon02.png);} .skin .dl_wrap li:nth-child(3) i{background-image:url(/publish/usr/images/pipeline/skin_icon03.png);} .skin .dl_wrap dl:last-child{width:30%;} .skin .dl_wrap dl:last-child img{margin:-10px 0 0 -10px;} .skin .tech_content{width:100%;align-items:stretch;gap:30px;} .skin .tech_content .box{width:60%;padding:40px 20px;gap:20px;} .skin .tech_content .box .box_wrap{width:calc(100% - 280px);} .skin .tech_content .box .box_wrap .title{width:90%;padding:8px 0 0 0;margin:12px auto 0;} .skin .tech_content .box .box_wrap li:nth-child(n+3) .title{width:100%;} .skin .tech_content .box .box_wrap .box{padding:40px 40px 20px 40px;} .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;} .skin .tech_content .box_wrap{width:40%;} .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;} .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;} .skin .purple .box .figure_desc{gap:12px;margin:20px 0 0 0;} .skin .purple .box .figure_desc li{font-size:18px;} .hts_system dt{display:flex;height:80px;font-size:24px;align-items:center;justify-content:center;} .hts_system table{table-layout:fixed;width:calc(100% + 24px);border-spacing:12px;border-collapse:separate;margin:0 0 0 -12px;} .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;} .hts_system thead th img{margin:0 auto;} .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;} .hts_system tbody th{background:#f4f4f4;} .hts_system tbody td{position:relative;background:#fff;} .hts_system .blue{background:#deebf7;} .hts_system .orange{background:#FBE5D6;} .hts_system .gray{background:#F2F2F2;} .hts_system .green{background:#DEE8DB;} .hts_system .legend{display:flex;font-size:18px;font-weight:500;margin:10px 0 0 0;align-items:center;gap:20px;justify-content:center;} .hts_system .legend i{display:inline-block;width:12px;height:12px;margin:0 6px 0 0;border-radius:100%;} /* Health Food */ .food .table_wrap tbody tr>td{font-size:16px;} .food .dl_wrap.accent{margin:60px 0;} .food .dl_wrap.accent dd{display:flex;font-size:18px;padding:40px 0;flex-direction:column;} .food .dl_wrap.accent dd b{color:var(--primary-color);} .food .box_wrap.blue.fill{text-align:center;} .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;} .food .box_wrap.blue.fill .box{margin:-30px 0 0 0;} .food .box_wrap.blue.fill img{margin:0 auto;} .food .industry_content dl{width:100%;} .food .industry_content dt{background:var(--accent-color);color:#fff;} .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);} .food .industry_content .box_wrap{display:flex;gap:33px;align-items:center;justify-content:center;} .food .industry_content .box_wrap>img{max-width:544px;width:35%;} .food .industry_content .boxs{display:flex;width:20%;flex-direction:column;gap:27px;} .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;} .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;} .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;} .food .industry_content .icon_area{display:flex;width:180px;flex-wrap:wrap;gap:43px 12px;} .food .industry_content .icon_area li{width:calc((100%/2) - 24px);text-align:center;} .food .industry_content .icon_area i{display:block;width:60px;height:60px;background:#e9edf8;border-radius:100%;margin:0 auto 6px auto;} .food .industry_content li:nth-child(1) i{background-image:url(/publish/usr/images/pipeline/food_icon01.png);} .food .industry_content li:nth-child(2) i{background-image:url(/publish/usr/images/pipeline/food_icon02.png);} .food .industry_content li:nth-child(3) i{background-image:url(/publish/usr/images/pipeline/food_icon03.png);} .food .industry_content li:nth-child(4) i{background-image:url(/publish/usr/images/pipeline/food_icon04.png);} .food .industry_content li:nth-child(5) i{background-image:url(/publish/usr/images/pipeline/food_icon05.png);} .food .industry_content li:nth-child(6) i{background-image:url(/publish/usr/images/pipeline/food_icon06.png);} .food .industry_content .text_area{display:flex;width:calc(100% - 220px);flex-direction:column;gap:22px;} .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;} .food .industry_content .text_area strong{font-size:16px;font-weight:700;color:var(--secondary-color);} .food .industry_content .text_area p{font-size:14px;font-weight:500;color:#222;} .food .industry_content .text_area p b{font-weight:700;color:#222;} .food .info_content{flex-wrap:wrap;gap:68px 32px;} .food .info_content dl{width:calc((100%/4) - 24px);} .food .info_content dd{border:1px solid var(--accent-color);background:#F5FAFC;} .food .info_content .top_dl dd{padding:10px 0;} .food .info_content .top_dl.blue dt{background:var(--secondary-color);} .food .info_content .top_dl.blue dd{border:1px solid var(--secondary-color);background:#F6F9FF;padding:40px 0;} .food .info_content .top_dl.purple dt{background:var(--primary-color);} .food .info_content .top_dl.purple dd{border:1px solid var(--primary-color);background:#F7F5FB;} .food .info_content .top_dl ul{display:flex;width:100%;padding:0 20px;flex-direction:column;gap:12px;} .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;} .food .info_content .top_dl.blue li{background:url(/publish/usr/images/component/icon_stage_blue.png) no-repeat center bottom;} .food .info_content .top_dl.purple li{background:url(/publish/usr/images/component/icon_stage_purple.png) no-repeat center bottom;} .food .info_content .top_dl li:last-child{background:none;padding:0;} .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;} .food .info_content .top_dl .title.border+.box_wrap .box{height:80px;} .food .info_content .top_dl .box_wrap{display:flex;width:100%;gap:8px;} .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;} .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;} .food .info_content dl:not(.top_dl) dt{position:relative;display:flex;width:80%;padding:12px 0;margin:0 auto;font-size:16px;font-family: var(--secondary-title-font);justify-content:center;align-items:center;z-index:1;} .food .info_content.dl_wrap.fill.accent .box_white{height:100%;padding:24px 0 10px 0;margin:-29px 0 20px 0;background:#fff;} .food .info_content .purple dt{background:var(--primary-color);} .food .info_content .purple dd{border:1px solid var(--primary-color);} .food .info_content .blue dt{background:var(--secondary-color);} .food .info_content .blue dd{border:1px solid var(--secondary-color);} .food .info_content .check_ul{display:flex;flex-direction:column;gap:8px;} .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;} /* cosmeceuticals */ .cosme .table_wrap tbody th,.cosme .table_wrap td{font-size:16px;} .cosme .table_wrap tbody .orange{color:#ff8a3a;} .cosme .table_wrap tbody .blue{color:#3b5bb0;} .cosme .table_wrap tbody b{display:block;line-height:2;} .cosme table ul li{height:58px;} .cosme .graph{top:71%;} .cosme .graph.orange{top:24px;} .cosme .graph.orange.only{top:50%;} .cosme .graph span{height:15px;} .cosme .graph span::after,.cosme .graph.orange span::after{width:35px;height:26px;background-size:contain;right:-23px;} .cosme .graph1 span{width:calc((100% / 6)*1 - 25px);} .cosme .graph2 span{width:calc((100% / 6)*2 - 25px);} .cosme .graph3 span{width:calc((100% / 6)*3 - 25px);} .cosme .graph4 span{width:calc((100% / 6)*4 - 25px);} .cosme .graph5 span{width:calc((100% / 6)*5 - 25px);} .cosme .dl_wrap dd{height:100%;flex-direction:column;padding:0 22px;} .cosme .dl_wrap .top_area{display:flex;width:100%;height:50px;background:#fff;border-radius:60px;justify-content:center;align-items:center;} .cosme .dl_wrap .top_area li{position:relative;width:50%;font-size:18px;font-weight:bold;text-align:center;} .cosme .dl_wrap .top_area li::after{position:absolute;content:"";width:1px;height:25px;background:#d9d9d9;right:0;top:2px;} .cosme .dl_wrap .top_area li:last-child::after{display:none;} .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;} .cosme .stage_ul>li{width:50%;padding:26px 0;border-radius:8px;background:#fff;} .cosme .stage_ul>li:first-child{border:1px solid #EE4758;} .cosme .stage_ul>li:last-child{border:1px solid #3b5bb0;} .cosme .stage_ul>li img{margin:20px auto;} .cosme .stage_ul .title{font-size:18px;font-weight:bold;} .cosme .stage_ul li:first-child .title,.cosme .stage_ul li:first-child li:last-child{color:#EE4758;} .cosme .stage_ul li:last-child .title,.cosme .stage_ul li:last-child li:last-child{color:#3b5bb0;} .cosme .stage_ul .depth_stage{display:flex;font-size:16px;font-weight:400;flex-direction:column;} .cosme .stage_ul .depth_stage li{padding:0 0 28px 0;} .cosme .stage_ul .depth_stage li:last-child{padding:0;background:none !important;font-size:19px;font-weight:bold;} .cosme .stage_ul li:first-child .depth_stage li{background:url(/publish/usr/images/pipeline/cosmeceuticals_icon04.png) no-repeat center calc(100% - 8px);} .cosme .stage_ul li:last-child .depth_stage li{background:url(/publish/usr/images/pipeline/cosmeceuticals_icon05.png) no-repeat center calc(100% - 8px);} .cosme .box_white{display:flex;margin:30px 0 0 0;gap:20px;} .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;} .cosme .box_white i{display:inline-block;width:80px;height:80px;background:#e9edf8;border-radius:100%;} .cosme .box_white li:nth-child(1) i{background-image:url(/publish/usr/images/pipeline/cosmeceuticals_icon01.png);} .cosme .box_white li:nth-child(2) i{background-image:url(/publish/usr/images/pipeline/cosmeceuticals_icon02.png);} .cosme .box_white li:nth-child(3) i{background-image:url(/publish/usr/images/pipeline/cosmeceuticals_icon03.png);} .cosme dl:nth-child(2) dd{gap:40px;} .cosme dl:nth-child(2) dd strong{font-family:var(--secondary-title-font);font-size:20px;font-weight:bold;} .cosme .box:last-child{margin:90px 0 0 0;padding:30px;} .cosme .box:last-child img{margin:0 auto;mix-blend-mode:darken;} /* AI-assisted Organelle homeostasis */ .ai .con_title .title b{color:var(--primary-color);} .ai .box_wrap{text-align:center;} .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;;} .ai .box_wrap .box{background:#fff;margin:-25px 0 60px 0;} .ai .box_wrap .box img{width:100%; text-align:center;margin:0 auto;} .ai .box_wrap.border.purple .box{border:1px solid var(--primary-color);border-radius:8px;;} /* autophagy */ .step_ul{display:flex;width:100%;align-items:center;gap:12px;} .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;} .autophagy .box:nth-child(2){margin:0;} .achievement .table_type_cols tr{cursor:auto;} /* ================================================== Community ================================================== */ .length_wrap .textarea{height:100px;} @media (max-width: 1400px){ /* ================================================== 공통레이아웃 ================================================== */ .sub_visual_nav{width:80%;} /* ================================================== Company ================================================== */ /* 설립배경 */ .overview .card li{width:calc((100% / 4) - 60px);} .overview .circles{padding:0;} .overview tr>th, .overview tr>td{font-size:16px;} .overview .box dt{height:40px;font-size:17px;padding:4px 0 0 0;} .overview .box dd{min-height:110px;font-size:16px;padding:40px 30px 32px 30px;} /* 오시는 길 */ .location_area{width:660px;} /* 퇴행성 뇌질환 */ .brain_health .table_wrap{overflow-x:auto;} .brain_health .table_wrap table{min-width:1440px;} .brain_health tr>th, .brain_health tr>td{font-size:16px;} .brain_health .dl_wrap dd{padding:0 20px;} /* 피부질환 */ .skin .tech_content{width:100%;flex-direction:column;} .skin .tech_content .box{width:100%;} .skin .dl_wrap .box_wrap{gap:14px;} .skin .dl_wrap .box_wrap li{gap:14px;} .skin .dl_wrap dl:last-child img{width:calc(100% - 60px);} } @media (max-width: 1280px){ /* ================================================== 공통레이아웃 ================================================== */ .sub_title{font-size:40px;} .sub_visual{height:480px;} .sub_visual_nav{width:65%;} .sub_visual_nav .snb_wrap{width:calc(100% - 66px);} .con_title{margin:80px 0 16px 0;} .con_title .title{font-size:28px;} .con_title .summary{font-size:20px;} .platform_tech .sub_visual{background-position:75% center;} /* ================================================== Company ================================================== */ /* 설립배경 */ .overview .card{flex-wrap:wrap;} .overview .card li{width:calc((100% / 2) - 60px);height:485px;} .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;} .overview .circles, .overview .circles .left{flex-direction:column;} .overview .circles{gap:120px;} .overview .circles::after{width:1px;height:45%;right:50%;bottom:0;transform:translateX(-50%);} .overview .circles .left::after{left:50%;bottom:-8px;top:auto;transform:translateX(-50%);} .overview .circles .right::after{left:50%;top:-8px;transform:translateX(-50%);} .overview .circle.line:last-child{margin:-60px 0 0 0;} .overview .circle.line:first-child::after{bottom:10px;right:45%;transform:translateX(-50%);} .overview .table_wrap{overflow-x:auto;} .overview .table_wrap table{min-width:1400px;padding:0 0 0 10px;} .overview .box_wrap{flex-wrap:wrap;flex-direction:column;gap:20px;} .overview .box dt{height:50px;font-size:20px;padding:6px 0 0 0;} .overview .box dd{font-size:18px;padding:47px 30px 32px 30px;} /* 오시는 길 */ .location_list>li{flex-wrap:wrap;gap:30px} .location_area{width:100%;} .location_list .info{width:100%;} .location_list .boxs{flex-direction:row;} .location_list .boxs li{width:50%;} .location_list .boxs li:only-child{width:100%;} /* 연혁 */ .history_area{flex-direction:column;} .history_year{display:none;} .month_ul{position:relative;width:90%;padding:100px 0 0 0;margin:0 auto;} .month_ul::after{position:absolute;content:"";width:100%;height:70px;top:0;font-family:var(--secondary-title-font);font-size:52px;font-weight:bold;} .month_ul:last-child{margin:160px auto 0 auto;} #year_2023::after{content:"2023";} #year_2022::after{content:"2022";} /* ================================================== Platform Tech ================================================== */ /* autophagy */ .step_ul{flex-wrap:wrap;} .step_ul li:not(.next){width:calc((100%/3) - 40px);} .step_ul li:nth-child(6){display:none;} .figure_desc{gap:12px;} .figure_desc li{font-size:20px;} .figure_content.column .box{margin:20px 0;} .pipeline .table_wrap{width:100%;overflow:auto;} .pipeline table{width:1024px;border-spacing:6px;} .pipeline tr>th, .pipeline tr>td{height:60px;font-size:14px;} .pipeline .graph span{font-size:14px;} .pipeline .graph span::after{background-size:60% auto;right:-38px;} .pipeline .graph.purple span::after,.pipeline .graph.orange span::after{background-size:60% auto;right:-38px;} .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;} .pipeline ul li{display:flex;justify-content:center;align-items:center;} .pipeline .graph1 span{width:calc((100% / 6) - 20px);} .pipeline .graph2 span{width:calc((100% / 6)*2 - 60px);} .pipeline .graph3 span{width:calc((100% / 6)*3 - 60px);} .pipeline .graph4 span{width:calc((100% / 6)*4 - 60px);} .pipeline .graph5 span{width:calc((100% / 6)*5 - 60px);} .hts_system .table_wrap{width:100%;overflow:auto;} .hts_system table{width:1400px;} .hts_system table th,.hts_system table td{font-size:16px;} .hts_system .legend{font-size:16px;margin:26px 0 0 0;} .rd .figure_content.column{gap:0;} /* ================================================== Pipeline ================================================== */ /* 퇴행성 뇌질환 */ .brain_health .dl_wrap{flex-wrap:wrap;} .brain_health .dl_wrap dl{width:100%;} .brain_health .dl_wrap dl:last-child dd{padding:40px 20px;} .brain_health .box_small.white li{padding:20px} .timeline_list{flex-wrap:wrap;gap:40px 0;} .timeline_list li{width:calc(100%/3);} .timeline_list li:nth-child(3)::after{display:none;} /* 피부질환 */ .skin .tech_content .box_wrap li{flex-wrap:balance;} .skin .tech_content .box_wrap.purple{width:100%;} .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;} .skin .purple .box .figure_desc{width:auto;text-align:left;} .skin .purple .box img{width:40%;} .skin .purple .box .figure_desc li{justify-content:flex-start;} .skin .dl_wrap dl:first-child{width:60%;} .skin .dl_wrap dl:last-child{width:40%;} .skin .dl_wrap .box_wrap{flex-direction:column;} .skin .dl_wrap .box_wrap li{width:100%;flex-direction:row;} .skin .dl_wrap .box_wrap li p{width:calc(100% - 156px);text-align:left;} /* food */ .food .table_wrap{overflow-x:auto;} .food .table_wrap table{min-width:1440px;} .food .table_wrap td{padding:10px;} .food ul li{flex-direction:column;} .food .industry_content .box_wrap{padding:0 30px;} .food .industry_content .boxs{width:30%;} .food .industry_content .box{padding:29px 20px 20px 20px;flex-direction:column;} .food .industry_content .icon_area{width:100%;gap:30px;} .food .industry_content .icon_area li{width:calc((100%/3) - 21px);} .food .industry_content .text_area{width:100%;} .food .info_content>dl{width:calc((100% / 2) - 20px);} .food .info_content .top_dl .title.border{width:100%;} .food .info_content .top_dl ul{padding:20px;} /* cosmeceuticals */ .cosme .table_wrap{overflow-x:auto;} .cosme .table_wrap table{min-width:1440px;} .pipeline .cosme .graph span::after{right:-22px;} .cosme .stage_ul{gap:48px;} .cosme .stage_ul>li{flex-direction:column;padding:26px 10px;} .cosme dl:nth-child(2) dd strong{text-align:center;} .cosme .table_wrap tbody th, .cosme .table_wrap td{font-size:14px;} } @media (max-width: 1024px){ .food .industry_content .box_wrap{flex-wrap:wrap;align-items:stretch;} .food .industry_content .box_wrap .boxs li{height:calc(100% / 3);} .food .industry_content .box_wrap>img{width:100%;} .food .industry_content .box,.food .industry_content .boxs{width:calc((100% - 34px)/2);} .food .industry_content .boxs .box{height:calc(100% - 12px);justify-content:center;} /* cosmeceuticals */ .cosme .dl_wrap.fill.accent{flex-direction:column;} .cosme .dl_wrap.fill.accent dl{width:100%;} .cosme .dl_wrap.fill.accent dd{padding:20px;} .cosme .stage_ul{gap:96px;} } @media (max-width: 768px){ /* ================================================== 공통레이아웃 ================================================== */ .sub_visual{height:500px;border-radius:0 0 40px 40px;;} .sub_visual_nav{height:66px;} .sub_visual_nav>a{display:none;} .sub_visual_nav .snb_wrap{width:calc(100% / 2);} .con_title .title{font-size:28px;} /* ================================================== Company ================================================== */ /* 설립배경 */ .overview .txt strong{font-size:40px;line-height:1.4;} .overview .txt strong span{display:block;} .overview .card{gap:20px;} .overview .card li{width:calc((100% / 2) - 20px);height:400px;} .figure_content.row{flex-direction:column;gap:20px;} .figure_content.row .box{width:100%;} .figure_desc{width:100%;gap:12px;} .figure_desc li{font-size:18px;} .figure_desc.square li{text-indent:26px;background:url(/publish/usr/images/component/list_square.png) no-repeat left 4px;} .figure_desc.circle li{text-indent:26px;background:url(/publish/usr/images/component/list_circle.png) no-repeat left 4px;background-size:auto 20px;} /* 조직도 */ .org_list{gap:20px} .org_list>li{width:100%;} /* 오시는 길 */ .location_list .boxs{flex-direction:column;} .location_list .boxs li{width:100%;} /* 연혁 */ .month_ul{padding:80px 0 0 0;} .month_ul::after{font-size:36px;} .month_ul .month{width:60px;font-size:20px;} .month_ul dl{padding:20px 0;gap:20px;} .month_ul dt{padding:2px 0 0 0;} .month_ul dd p:nth-child(n+2){margin:18px 0 0 0;} .month_ul strong{font-size:18px;} .month_ul .summary{font-size:16px;} /* ================================================== Platform Tech ================================================== */ .dl_wrap{flex-direction:column;gap:60px;} .dl_wrap dl{width:100%;} .dl_wrap dd{margin:20px 0 0 0;;} /* ================================================== Pipeline ================================================== */ .timeline_list li{width:calc(100%/2);} .timeline_list li:nth-child(2n)::after{display:none;} .timeline_list li:nth-child(3)::after{display:block;} .timeline_list .content strong{font-size:16px;} .brain_health .legend_content .box{padding:40px 20px;} /* 피부질환 */ .skin .dl_wrap{flex-wrap:wrap;} .skin .dl_wrap dl:first-child{width:100%;} .skin .dl_wrap dl:last-child{width:100%;} .skin .dl_wrap dl:last-child img{width:calc(100% - 100px);margin:0;padding:40px 20px;} .skin .tech_content .box{flex-direction:column;} .skin .tech_content .box .box_wrap{width:100%;} .skin .tech_content .box_wrap.purple .box{flex-direction:column;} .skin .purple .box .figure_desc{width:100%;} .skin .purple .box img{width:auto;} /* food */ .food .info_content{gap:40px;} .food .info_content>dl{width:100%;} .food .info_content dl:not(.top_dl) dt br{display:none;} .food .info_content.dl_wrap.fill.accent .box_white{padding:48px 0 30px 0;} .ai .box_wrap .box{padding:40px 0 0 0;} } @media (max-width: 640px){ /* ================================================== 공통레이아웃 ================================================== */ .sub_visual_nav .snb_wrap{max-width:100%;} .sub_visual_nav .snb_wrap:not(:last-child){display:none;} .content_title h3{font-size:32px;} .con_title .title{font-size:20px;} .sub_title{font-size:28px;text-align:center;} .box{border-radius:8px;margin:40px 0 0 0;} /* ================================================== Company ================================================== */ /* 설립배경 */ .overview .txt strong{font-size:28px;} .overview .txt p{font-size:18px;margin:8px 0 0 0;} .overview .card{gap:36px;padding:90px 0 120px 0;} .overview .card li{width:100%;} .overview .card li:nth-child(2n){transform:none;;} .overview .card .title br{display:none;} .overview .circles{padding:0;margin:40px 0 80px 0;gap:60px;} .overview .circles::after{height:50%;right:49.5%;} .overview .circle.line{width:200px;height:200px;font-size:18px;} .overview .circle.line:last-child{margin:-40px 0 0 0;} .overview .circle.line:first-child::after{height:20px;font-size:24px;bottom:14px;right:40%;} .overview .circle.fill{width:260px;height:260px;font-size:20px;;} .overview .circle.fill::after{width:calc(100% + 20px);height:calc(100% + 20px);left:-10px;top:-10px;background-size:100% auto;} .overview .circles .left::after, .overview .circles .right::after{width:12px;height:12px;} .overview .circles .left::after{bottom:-5px;} /* 오시는 길 */ .location_list .title{font-size:20px;margin:0 0 10px 0;gap:8px;} .location_list .info p{font-size:16px;} .location_list .btn_map,.location_list .boxs li{height:60px;font-size:16px;} .location_list .location{width:22px;height:22px;background-size:contain;} /* ================================================== Platform Tech ================================================== */ /* autophagy */ .step_ul{flex-direction:column;} .step_ul li:not(.next){width:100%;} .step_ul li.next img{transform:rotate(90deg);} .step_ul li:nth-child(6){display:block;} /* food */ .food .industry_content .box, .food .industry_content .boxs{width:100%;} /* cosmeceuticals */ .cosme .stage_ul{background:url(/publish/usr/images/pipeline/cosmeceuticals_icon07.png) no-repeat center; flex-direction:column;} .cosme .stage_ul li{width:100%;} .cosme .box_white{flex-direction:column;} .cosme .box_white li{width:100%;flex-direction:row;text-align:left;} .cosme .box_white li p{width:calc(100% - 100px);} .btn_move{font-size:18px;padding:0 40px;white-space:nowrap} .btn_move i{display:none;} } @media (max-width: 500px){ /* ================================================== Company ================================================== */ /* 연혁 */ .month_ul dl{flex-direction:column;gap:12px;} .month_ul dd{width:100%;} }

          
        
    
    
Copyright Yona authors & © NAVER Corp. & NAVER LABS Supported by NAVER CLOUD PLATFORM

or
Sign in with github login with Google Sign in with Google
Reset password | Sign up