File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
/* ==================================================
공통레이아웃
================================================== */
.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;}
.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;}
.sub_visual_nav{position:relative;display:flex;width:45%;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{width:calc((100% - 66px)/2);}
.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);}
.major_result .sub_visual{background:url(/publish/usr/images/major_result/visual.jpg);}
.platform_tech .sub_visual{background:url(/publish/usr/images/platform_tech/visual.jpg);}
.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;}
.box{background:#f2f4f6;border-radius:40px;}
/* ==================================================
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;}
/* 조직도 */
.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;}
/* 오시는 길 */
.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 0 auto;}
.month_ul:first-child li:first-child{border-top:1px solid #e0e0e0;}
.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;}
.history_month.active{position:fixed;left:0;top:207px;}
.active .month_ul{width:calc(100% - 903px);margin:0 5.7% 0 auto;}
/* ==================================================
Major Result
================================================== */
.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;}
/* 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 .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 ul{display:flex;}
.pipeline ul li{height:42px;border-right:1px dashed #bbc8ea;font-size:16px;font-weight:bold;flex-grow:1;}
.pipeline ul li:last-child{border:0;}
.pipeline tr:first-child ul li:nth-child(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;}
/* ==================================================
Platform Tech
================================================== */
.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 img{mix-blend-mode:darken;}
/* background */
.background .figure_content .box img{mix-blend-mode:normal;}
/* 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;}
@media (max-width: 1400px){
/* ==================================================
공통레이아웃
================================================== */
.sub_visual_nav{width:80%;}
/* ==================================================
Company
================================================== */
/* 설립배경 */
.overview .card li{width:calc((100% / 4) - 60px);}
/* 오시는 길 */
.location_area{width:660px;}
}
@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%);}
/* 오시는 길 */
.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;}
/* ==================================================
Major Result
================================================== */
.figure_desc{gap:12px;}
.figure_desc li{font-size:20px;}
.figure_content.column .box{margin:20px 0;}
/* Pipeline Summary */
.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);}
.rd .figure_content.column{gap:0;}
}
@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;;}
}
@media (max-width: 640px){
/* ==================================================
공통레이아웃
================================================== */
.sub_visual_nav .snb_wrap{width:100%;}
.sub_visual_nav .snb_wrap:nth-child(2){display:none;}
.content_title h3{font-size:40px;}
/* ==================================================
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;}
/* ==================================================
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;}
}
@media (max-width: 500px){
/* ==================================================
Company
================================================== */
/* 연혁 */
.month_ul dl{flex-direction:column;gap:12px;}
.month_ul dd{width:100%;}
}