@charset "UTF-8"; 
@import url("reset.css"); 

html, body {
    height: 100%;
}


html {
    scroll-behavior: smooth;
  }

:root { 
 --color-brand: #192BC2; 
 --color-sub-brand: #E9A636; 
 --primary:#F30905;
 --timing:cubic-bezier(0.77, 0, 0.175, 1);
 } 
.wrap{overflow-x: hidden;}
body { position: relative;} 
#aside { display: none !important; } 
#hd_login_msg { display: none; } 
.mont { font-family: 'Montserrat', sans-serif; } 
br.mo { display: none; } 
body:has(#header.add-menu) { height: 100vh; overflow-y: hidden; } 
/* #header */
#header.bg { background-color: rgba(0, 0, 0, 0.16); backdrop-filter: blur(30px); } 
#header.black .gnb>ul>li>a{color: #111;} 
#header.black .logo{background: url(../img/geneselabs/logo_black.png) no-repeat center center / contain;}

#header {
    position: absolute;
    z-index: 100;
    width: 100%;
    height: 130px;
    padding: 10px 160px 0;
    display: flex;
    flex-direction: column;
    align-items: center;

    opacity: 0; /* 초기 숨김 */
    transform: translateY(-50px); /* 위에서 시작 */
    transition: opacity 0.8s ease, transform 0.8s ease;
}

#header.show {
    opacity: 1;
    transform: translateY(0);
}

#header:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 0;
    transform: translateY(-101%);
    transition: .1s linear .2s;
}

#header .logo {
    width: 230px;
    height: 64px;
    background: url('../img/geneselabs/logo.png') no-repeat center center/contain;
    overflow: hidden;
    text-indent: -999px;
    z-index: 10;
    transition: .1s linear .2s;
}

#header .gnb {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 56px;
    z-index: 5;
    background: transparent;
}

#header .gnb>ul {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 48px;
}

#header .gnb>ul>li {
    z-index: 2;
    width: fit-content;
}

#header .gnb>ul>li>a {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    color: #FFF;
    font-size: 18px;
    font-weight: 400;
    transition: .1s linear .2s;
}

#header .gnb>ul>li:hover .depth {
    max-height: 590px;
    transition: .2s linear .1s;
    /* display: flex; */
}

#header .gnb .depth {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    top: 130px;
    max-height: 0;
    display: flex;
    justify-content: center;
    background: #FFF;
    transition: .2s linear;
    overflow: hidden;
    /* display: none; */
}

#header .gnb .depth:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: #ccc;
}

#header .gnb .depth:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: #ccc;
}

#header .gnb .depth .depthBox {
    display: flex;
    justify-content: center;
    width: 1320px;
    height: 590px;
}

#header .gnb .depth .depthSection {
    flex: 1;
    padding: 50px 80px;
}

#header .gnb .depth .depthSection+.depthSection {
    border-left: 1px solid #ccc;
}

#header .gnb .depth .depthSection .titSection {
    margin-bottom: 40px;
    color: #6699cc;
    font-size: 17px;
    font-weight: 700;
}

#header .gnb .depth .depthSection .itemSectionBox {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 100%;
    margin-bottom: -60px;
    margin-right: -60px;
}

#header .gnb .depth .depthSection .itemSection {
    margin-bottom: 60px;
    margin-right: 60px;
}

#header .gnb .depth .depthSection .itemSection .tit {
    display: inline-block;
    margin-bottom: 28px;
    color: #000;
    font-size: 15px;
    font-weight: 700;
}

#header .gnb .depth .depthSection .itemSection:hover .tit {
    color: #198fcc;
}

#header .gnb .depth .depthSection .itemSection ul li a {
    position: relative;
    color: #000;
    opacity: .5;
    font-size: 15px;
    font-weight: 400;
}

#header .gnb .depth .depthSection .itemSection ul li a::after {
    content: '';
    position: absolute;
    right: -30%;
    top: 50%;
    width: 4px;
    height: 4px;
    border-radius: 2px;
    margin-top: -2px;
    background: #198fcc;
    transition: .3s;
    opacity: 0;
}

#header .gnb .depth .depthSection .itemSection ul li+li {
    margin-top: 25px;
}

#header .gnb .depth .depthSection .itemSection ul li a:hover {
    color: #000;
    opacity: 1;
}

#header .gnb .depth .depthSection .itemSection ul li a:hover::after {
    opacity: 1;
    right: -10%;
}

#header .gnb .depth.s2>ul {
    display: flex;
    justify-content: center;
    align-items: center;
}

#header .gnb .depth.s2>ul>li {
    margin: 0 20px;
}

#header .gnb .depth.s2>ul>li>a {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    font-size: 16px;
    font-weight: 400;
}

#header .gnb .depth.s2.pro>ul>li>a{
    flex-direction: column;
}

#header .gnb .depth.s2>ul>li>a:hover {
    color: #E9A636;
}

#header.on:before {
    transform: translateY(0);
    transition: .1s linear;
}

#header.on .logo {
    background-image: url('../img/geneselabs/logo_black.png');
    transition: .1s linear;
}

#header.on .lang ul li a {
    color: #000;
    transition: .1s linear;
    opacity: 1;
}

#header.on .lang ul li a::after {
    background: #000;
    transition: .1s linear;
    opacity: 1;
}

#header.on .gnb ul>li>a {
    color: #000;
    transition: .1s linear;
}

#header.on .btnMenu {
    background-image: url('../img/geneselabs/btn_m_menu_black.png');
    transition: .1s linear;
}

#header .lang {
    position: absolute;
    top: 50%;
    right: 110px;
    margin-top: -5px;
    z-index: 10;
}

#header .lang ul {
    display: flex;
    justify-content: center;
    align-items: center;
}

#header .lang ul li+li {
    margin-left: 18px;
}

#header .lang ul li a {
    display: block;
    position: relative;
    color: #FFF;
    font-size: 18px;
    transition: .1s linear .3s;
    opacity: 0.3;
}

#header .lang ul li a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -20%;
    height: 2px;
    right: 100%;
    background: #FFF;
    transition: .3s .1s;
    opacity: 0.3;
}

#header .lang ul li.on a {
    opacity: 1;
}

#header .lang ul li.on a::after {
    right: 0;
    opacity: 1;
}

#header .lang ul li:hover a::after {
    right: 0;
    opacity: 1;
}

#header .btnMenu {
    display: none;
    width: 30px;   /* 원하는 버튼 너비 */
    height: 20px;  /* 원하는 버튼 높이 */
    background: url(../img/geneselabs/btn_m_menu.png) no-repeat center / contain;
    overflow: hidden;
    text-indent: -999px;
    transition: .1s linear .3s;
  }

  #header.black .btnMenu{background: url(../img/geneselabs/btn_m_menu_black.png) no-repeat center / contain;}

.m_menu {display:block; z-index:100; position:fixed; top:0; right:0; width:100%; height:100%; background:#FFF; transform:translateX(100%); transition:.3s .1s;}
.m_menu .m_menu_header {position:relative; height:50px; border-bottom:1px solid #E5E5E5; line-height:50px;}
.m_menu .m_menu_header .btn_home {position:absolute; left:10px; top:50%; width:24px; height:24px; background:url('../img/geneselabs/icon_home.png') no-repeat center center/24px; transform:translateY(-50%); overflow:hidden; text-indent:-999px;}
.m_menu .m_menu_header .btn_close {position:absolute; right:10px; top:50%; width:24px; height:24px; background:url('../img/geneselabs/icon_close_black.png') no-repeat center center/24px; transform:translateY(-50%); overflow:hidden; text-indent:-999px; border: 0;}
.m_menu .m_menu_header .lang {position:absolute; right:40px; top:50%; transform:translateY(-50%);}
.m_menu .m_menu_header .lang ul li {float:left; line-height:50px;}
.m_menu .m_menu_header .lang ul li + li {margin-left:10px;}
.m_menu .m_menu_header .lang ul li a {position:relative; display:inline-block; vertical-align:middle; color:#000; font-family:'MyriadPro', sans-serif; font-size:12px; font-weight:700; line-height:12px;}
.m_menu .m_menu_header .lang ul li a:after {content:''; position:absolute; left:0; bottom:-3px; width:0; height:1px; background:#3B88B4; opacity:0; transition:.2s .1s;}
.m_menu .m_menu_header .lang ul li:hover a {color:var(--color-brand);}
.m_menu .m_menu_header .lang ul li:hover a:after {width:100%; opacity:1;}
.m_menu .m_menu_header .lang ul li.on a {color:var(--color-brand);}
.m_menu .m_menu_header .lang ul li.on a:after {width:100%; opacity:1;}
.m_menu .m_gnb {height:calc(100% - 50px); overflow-y:auto;}
.m_menu .m_gnb > ul > li > a {position:relative; display:block; padding:0 40px 0 15px; color:#000; font-size:16px; line-height:50px; font-weight:500;}
.m_menu .m_gnb > ul > li > a:after {content:''; position:absolute; top:50%; right:15px; width:20px; height:20px; background:url('../img/geneselabs/icon_plus.png') no-repeat 0 0 /100%; transform:translateY(-50%);}
.m_menu .m_gnb > ul > li > a.on:after {background-image:url('../img/geneselabs/icon_arrowDown_black.png');}
.m_menu .m_gnb > ul > li + li {border-top:1px solid #E5E5E5;}
.m_menu .m_gnb .sub_gnb {display:none; padding:20px 30px; background:#F9F9F9; border-top:1px solid #E5E5E5;}
.m_menu .m_gnb .sub_gnb li + li {margin-top:10px;}
.m_menu .m_gnb .sub_gnb li a {display:inline-block; color:#000; font-size:15px; line-height:18px; font-weight:500;}
.openMenu .m_menu {transform:translateX(0);}
.mask {display:none; position:fixed; z-index:99; top:0; left:0; width:100%; height:100%; background:#000; opacity:.7;}
.openMenu {overflow:hidden;}
.openMenu .mask {display:block;}

#foot {
    padding: 2.18vw;
    background: #434343;
    text-align: center;
}

#foot .address {
    color: #FFF;
    font-size: 14px;
    font-weight: 300;
}

#foot .contact {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0.83vw;
}

#foot .contact li {
    position: relative;
    margin: 0 6px;
    color: #FFF;
    font-size: 14px;
    font-weight: 300;
}

#foot .contact li+li::before {
    content: '';
    position: absolute;
    left: -6px;
    top: 0;
    width: 1px;
    height: 100%;
    background: #858585;
}

#foot .contact li .tit {
    margin-top: 5px;
}

#foot .contact li a {
    color: #FFF;
    font-size: 14px;
    font-weight: 300;
}

#foot .copyright {
    color: #FFF;
    font-size: 13px;
    opacity: 0.8;
    margin-top: 1.04vw;
    font-weight: 300;
}


.depth .list_wrap{display: flex; justify-content: center; width: 700px;}
.depth .list_wrap .left{width: 140px;}
.depth .list_wrap .left .list{display: flex; flex-direction: column; width: 140px;}
.depth .list_wrap .left .list a{display: flex; justify-content: center; align-items: center; font-size: 16px; font-weight: 500; height: 35px;}
.depth .list_wrap .left .list a:hover{color: var(--color-brand) !important; font-weight: bold;}
.depth .list_wrap .left .list ul{width: 100%;}
.depth .list_wrap .left .list ul>li{width: 100%; height: 26px;}
.depth .list_wrap .left .list ul>li>a{display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; font-size: 15px; color: #929292 !important;}
.depth .list_wrap .left .list ul>li>a:hover{color: var(--color-brand) !important; font-weight: bold;}
.depth .list_wrap .right{display: flex; flex-wrap: wrap; width: fit-content; gap: 24px 0;}
.depth .list_wrap .right .list{display: flex; flex-direction: column; width: 140px;}
.depth .list_wrap .right .list a{display: flex; justify-content: center; align-items: center; font-size: 16px; font-weight: 500; height: 35px;}
.depth .list_wrap .right .list a:hover{color: var(--color-brand) !important; font-weight: bold;}
.depth .list_wrap .right .list ul{width: 100%;}
.depth .list_wrap .right .list ul>li{width: 100%; height: 26px;}
.depth .list_wrap .right .list ul>li>a{display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; font-size: 15px; color: #929292 !important; font-weight: 400;}
.depth .list_wrap .right .list ul>li>a:hover{color: var(--color-brand) !important; font-weight: bold;}
#header.on li:hover .depth.pro {padding: 24px 0 24px;}

 
.nav-icon-1 { width: 30px; height: 30px; position: relative; transition: .1s; margin: 10px 10px; cursor: pointer; display: inline-block; } 
.nav-icon-1 span { width: 5px; height: 5px; background-color: #fff; display: block; border-radius: 50%; position: absolute;} 
#header.hover .nav-icon-1 span { background-color: #111;} 
#header.hover .nav-icon-1.open span { background-color: #fff;} 
.nav-icon-1:hover span { transform: scale(1.2); transition: 350ms cubic-bezier(.8, .5, .2, 1.4); } 
.nav-icon-1 span:nth-child(1) { left: 0; top: 0;} 
.nav-icon-1 span:nth-child(2) { left: 12px; top: 0; } 
.nav-icon-1 span:nth-child(3) { right: 0; top: 0; } 
.nav-icon-1 span:nth-child(4) { left: 0; top: 12px;} 
.nav-icon-1 span:nth-child(5) { position: absolute; left: 12px; top: 12px;} 
.nav-icon-1 span:nth-child(6) { right: 0px; top: 12px; } 
.nav-icon-1 span:nth-child(7) { left: 0px; bottom: 0px;} 
.nav-icon-1 span:nth-child(8) { position: absolute; left: 12px; bottom: 0px;} 
.nav-icon-1 span:nth-child(9) { right: 0px; bottom: 0px;} 
.nav-icon-1.open { transform: rotate(180deg); cursor: pointer; transition: .2s cubic-bezier(.8, .5, .2, 1.4);} 
.nav-icon-1.open span { border-radius: 50%; transition-delay: 200ms; transition: .5s cubic-bezier(.8, .5, .2, 1.4); } 
.nav-icon-1.open span:nth-child(2) { left: 6px; top: 6px; } 
.nav-icon-1.open span:nth-child(4) { left: 6px; top: 18px; } 
.nav-icon-1.open span:nth-child(6) {right: 6px; top: 6px;} 
.nav-icon-1.open span:nth-child(8) { left: 18px; bottom: 6px; } 
 
 /* 펼침 메뉴 */
 .all-menu { position:fixed; left:0; top:0; width:100vw; height:100vh; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); background-color:rgba(0,0,0,.8); z-index:1000; display:none; align-items:center; } 
 .all-menu { display:none; } 
 .all-menu,#header.add-menu .menu,#header.add-menu::after,#header.add-menu::before { display:none; } 
 .all-menu.show { display:flex; background: linear-gradient(to bottom, rgba(0, 174, 239, 0.9), rgba(13, 52, 130, 0.9)); } 
 #header.add-menu { z-index:2000; } 
 .all-menu .expand-menu { display:flex; width:100vw; justify-content:center; padding:6vw; } 
 .all-menu .expand-menu>ul { width:100vw; display:flex; justify-content:center; } 
 .all-menu .expand-menu>ul>li { border-right:1px solid #ddd; width:100%; padding:1vw; } 
 .all-menu .expand-menu>ul>li:last-child { border-right:none; } 
 .all-menu .expand-menu>ul>li>a { text-decoration:none; font-size:2vw; width:100%; display:flex; justify-content:center; color:#fff; } 
 .all-menu .expand-menu .deps-menu { width:100%; margin-top:2vw; display:flex; flex-direction:column; } 
 .all-menu .expand-menu .deps-menu li { width:100%; } 
 .all-menu .expand-menu .deps-menu li a { width:100%; color:#ededed; text-decoration:none; padding:.5vw; display:flex; justify-content:center; font-size:16px; text-align: center; } 
 .all-menu .expand-menu .deps-menu li a:hover { color: #fff; font-weight: bold; } 


#header .etc { position: absolute; right: 160px; display: flex; flex-direction: row; align-items: center; height: 100%; transition: .1s linear .2s;} 

.menu_bar { display: flex; flex-direction: column; gap: 10px; height: fit-content; } 
.menu_bar .bar { display: block; 
 height: 3px; 
 width: 34px; 
 background: #fff; 
 -webkit-transition: all .7s ease; 
 transition: all .7s ease; 
 } 
 #header.hover .menu_bar .bar { background-color: #111; } 
 #header.hover.add-menu .menu_bar .bar { background-color: #fff; } 
 .bar.x-middle { width: 24px; } 
 .menu_bar.active .x-top { 
 background: #fff; 
 transform: translateY(13px) rotateZ(45deg); 
 } 
 
 .menu_bar.active .x-middle { 
 width: 0; 
 } 
 
 .menu_bar.active .x-bottom { 
 background: #fff; 
 transform: translateY(-13px) rotateZ(-45deg); 
 } 


 #header .etc .select_lang {  position: relative; display: flex; gap: 8px; justify-content: center; align-items: center; line-height: 36px; z-index: 101; border: 1px solid #fff; border-radius: 500px; padding: 0 16px; box-sizing: border-box; }   
 #header.on .etc .select_lang {  border: 1px solid #111; }   
 #header .etc .select_lang button { font-size: 14px; text-align: left; outline: none; box-sizing: border-box; padding: 0 0px; border: 0; color:#fff; line-height: 32px; background-color: transparent; font-weight: bold;} 
 #header .etc .select_lang button a {font-size: 14px; color: #fff;  } 
 #header.on .etc .select_lang button a {font-size: 14px; color: #CFCFCF;} 
 #header .etc .select_lang button a.on {color: var(--color-brand);} 











/* 메인 페이지 */
/* main_visual */
.main_visual { overflow: hidden; } 
.main_visual .section { overflow: hidden; border-radius: 40px 200px 40px 0;} 
.pro { position: relative;  overflow: hidden; } 

.main_visual #main_01 { 
 width: 100%; 
 height: 100%; 
 } 
.main_visual #main_02 { 
 width: 100%; 
 height: 100%; 
 } 
.main_visual #main_03 { 
 width: 100%; 
 height: 100%; 
 } 
 .main_visual #main_01.swiper-slide-visible .slide_img { 
 transform: scale(1); overflow: hidden; 
 } 
 .main_visual #main_02.swiper-slide-visible .slide_img { 
 transform: scale(1); overflow: hidden; 
 } 
 .main_visual #main_03.swiper-slide-visible .slide_img { 
 transform: scale(1); overflow: hidden; 
 } 
 
.main_visual #main_01 .slide_img { 
width: 100%; 
height: 100%; 
background-image: url(../img/geneselabs/mainvisual01.png); 
background-size: auto 100%;
background-position: center; 
overflow: hidden; 
transform: scale(1.1);
transition: transform 3s linear;
 } 
.main_visual #main_02 .slide_img { 
 width: 100%; 
 height: 100%; 
 background-image: url(../img/geneselabs/mainvisual02.png); 
 background-size: 100% 100%; 
 overflow: hidden; 
 transform: scale(1.1);
transition: transform 3s linear;
 } 
.main_visual #main_03 .slide_img { 
 width: 100%; 
 height: 100%; 
 background-image: url(../img/geneselabs/mainvisual03.png); 
 background-size: 100% 100%; 
 overflow: hidden; 
 transform: scale(1.1);
transition: transform 3s linear;

 } 
.main_visual #main_04 .slide_img { 
 width: 100%; 
 height: 100%; 
 background-image: url(../img/geneselabs/mainvisual04.png); 
 background-size: 100% 100%; 
 overflow: hidden; 
 transform: scale(1.1);
transition: transform 3s linear;

 } 
.main_visual #main_05 .slide_img { 
 width: 100%; 
 height: 100%; 
 background-image: url(../img/geneselabs/mainvisual05.png); 
 background-size: 100% 100%; 
 overflow: hidden; 
 transform: scale(1.1);
transition: transform 3s linear;

 } 

.swiper-button-prev, .swiper-button-next { border: 0; } 

.swiper-slide { 
 align-items: center; 
 box-sizing: border-box; 
 } 
 .contents { 
 position: absolute; 
 left: 170px;
 top: 280px; 
 width: fit-content; 
 display: flex; 
 flex-wrap: wrap; 
 flex-direction: column; 
 justify-content: center; 
 z-index: 10; 
 box-sizing: border-box; 
 width: fit-content;

 opacity: 0;                /* 처음 숨김 */
    transform: translateY(30px); /* 약간 아래에서 시작 */
    transition: opacity 0.8s ease, transform 0.8s ease;
 } 

 .contents.show {
    opacity: 1;
    transform: translateY(0);
}

.contents .main_text { width: 100%;} 
.contents .main_text h2 {position: relative; font-size: 96px; font-weight: 300; line-height: 100px; color: #fff;}  
.contents .main_text h2::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -26px;
    width: 396px;   /* 원하는 넓이 */
    height: 50px;   /* 원하는 높이 */
    background: url(../img/geneselabs/main_text_line.png) no-repeat right bottom / contain;
    z-index: -1;
  }
.contents .main_text b {font-size: 96px; font-weight: 300; line-height: 100px; color: #fff; font-family: "Playfair Display", serif;}  
.contents .main_text p { margin-top: 25px; font-size: 24px; line-height: 34px; color: #fff; font-weight: 400;  } 
.contents .main_btn button { outline: none; cursor: pointer; border: none; width: 254px; height: 56px; margin-top: 76px; padding: 0; font-family: inherit; font-size: 17px; position: relative; display: flex; justify-content: center; align-items: center; letter-spacing: 0.05rem; font-weight: 500; border-radius: 500px; overflow: hidden; background: #fff; color: #fff; font-family: "Urbanist", sans-serif; }
.contents .main_btn button span { position: relative; z-index: 10; transition: color 0.4s; }
.contents .main_btn button img { position: relative; z-index: 10; transition: color 0.4s; }
.contents .main_btn button:hover img { mix-blend-mode: difference; }
.contents .main_btn button:hover span { color: black; }
.contents .main_btn button::before, .contents .main_btn button::after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; }
.contents .main_btn button::before { content: ""; background: #000; width: 120%; left: -10%; transform: skew(30deg); transition: transform 0.4s cubic-bezier(0.3, 1, 0.8, 1); }
.contents .main_btn button:hover::before { transform: translate3d(100%, 0, 0); }
 





 .in-left { 
 transform: translateX(-100%); 
 opacity: 0; 
 transition: .2s; 
 } 
 .in-left.active { 
 transform: translateX(0); 
 opacity: 1; 
 } 
 .animate.in-left { 
 animation: slideInFromLeft 1s ease-out forwards; 
 animation-fill-mode: forwards; 
 
 } 
 @keyframes slideInFromLeft { 
 0% { 
 transform: translateX(-100%); 
 opacity: 0; 
 } 
 100% { 
 transform: translateX(0); 
 opacity: 1; 
 } 
 } 
 
/* 컨트롤 */
.main_visual{position: relative; padding: 0 10px; box-sizing: border-box; border-radius: 40px 200px 40px 0; height: calc(100vh - 10px); min-height: calc(100vh - 10px);}
.main_visual .controls { position: absolute; display:flex; display: none; align-items:center; gap:35px; left: 13.54321vw; bottom: 100px; z-index: 999; } 
.main_visual .circle { position:relative; } 
.main_visual .circle .autoplay-progress { display:flex; align-items:center; justify-content:center; position:relative; width:60px; height:60px; } 
.main_visual .circle .autoplay-progress svg { z-index:10; width:100%; height:100%; stroke-width:2px; stroke:#fff; fill:none; stroke-dashoffset:calc(125.6 * (1 - var(--progress))); stroke-dasharray:125.6; transform:rotate(-90deg); } 
.main_visual .circle .autoplay-progress .bg { position:absolute; width:54px; height:54px; border-radius:50%; border:3px solid rgba(255,255,255,.5); } 
.main_visual .circle .play div { position:absolute; left:50%; top:50%; z-index:10; transform:translate(-50%,-50%); } 
.main_visual .circle .play span { cursor:pointer; font-variation-settings:'FILL' 1,'wght' 300,'GRAD' 0,'opsz' 40; font-size:18px; color: #fff; } 
.main_visual .circle .play div.swiper-pause { display:block; } 
.main_visual .circle .play div.swiper-play { display:none; } 
.main_visual .circle .play.on div.swiper-pause { display:none; } 
.main_visual .circle .play.on div.swiper-play { display:block; } 
.main_visual .arrow { display:flex; align-items:center; gap:25px; color: #fff; } 
.main_visual .arrow > span { display:flex; } 
.main_visual .arrow i { cursor:pointer; width:40px; opacity:1; transition:all .2s; color: #fff; } 
.main_visual .arrow .pager { display:flex; align-items:center; justify-content:center; gap:10px; width:43px; font-size:15px; font-weight:600; } 
.main_visual .arrow .i:hover { opacity:1; } 

.main_visual .radius { display:flex; justify-content:center; align-items:center; position:absolute; z-index:10; width:66px; height:264px; background:#fff; left:10px; bottom:0; border-radius:500px 500px 0 0; }
.main_visual .radius:before { content:''; position:absolute; left:0; top:-33px; z-index:-1; width:33px; height:33px; border-radius:0 0 33px 0; box-shadow:33px 33px 0 33px #fff; transform:rotate(90deg); }
.main_visual .radius:after { content:''; position:absolute; z-index:-1; right:-33px; bottom:0; width:33px; height:33px; border-radius:0 0 33px 0; box-shadow:33px 33px 0 33px #fff; transform:rotate(90deg); }

.scroll-down {text-align: center; opacity: 0; }
.scroll-down.start {opacity: 1; transform: translateY(0); transition: all .6s ease-in-out 1s;}
.scroll-down p {color: #D8D8D8; text-transform: uppercase; font-size: 12px; margin: 0; padding-bottom: 25px;}
.scroll-down span {border: 2px solid #D8D8D8; height: 30px; width: 20px; padding: 10px 10px; border-radius: 30px; position: relative; z-index: 1;}
.scroll-down span:after {content: ""; position: absolute; z-index: 1; background: #111111; top: 8px; left: calc(50% - 1.9px); padding: 5px 2px; border-radius: 30px; animation: 1s infinite scrolling;}

@keyframes scrolling {
  0% {
    transform: translateY(0) scaleY(1);
 }
  25% {
    transform: translateY(-3px) scaleY(0.5);
 }
  40% {
    transform: translateY(0) scaleY(1);
 }
  60% {
    transform: translateY(3px) scaleY(0.5);
 }
  100% {
    transform: translateY(0) scaleY(1);
 }
}



.section { width: 100%; margin: 0 auto; overflow: hidden; } 

.sec01{position: relative; width: 100%;}
/* inner가 뒤집힐 때 */
.sec01 .inner.reversed { flex-direction: row-reverse; }

.sec01 .inner{display: flex; gap: 146px; width: 1600px; margin: 0 auto; padding: 194px 0;}
.sec01 .img_wrap{display: flex; position: relative; width: 602px; height: 544px;}
.sec01 .img_wrap::before {
    content: "";
    position: absolute;
    right: -50px;
    top: 42px;
    width: 100px;   /* 원하는 크기 */
    height: 100px;  /* 원하는 크기 */
    border-radius: 500px;
    background: url(../img/geneselabs/main_img01_01.png) no-repeat center / contain;
    animation: floatUpDown1 5s ease-in-out infinite;
    z-index: 3;
  }
  .sec01 .img_wrap::after {
    content: "";
    position: absolute;
    left: -80px;
    bottom: 46px;
    width: 160px;   /* 원하는 크기 */
    height: 160px;  /* 원하는 크기 */
    border-radius: 500px;
    background: url(../img/geneselabs/main_img01_02.png) no-repeat center / contain;
    animation: floatUpDown2 6s ease-in-out infinite;
    z-index: 3;
  }
@keyframes floatUpDown1 {
    0%   { transform: translateY(0); }
    25%  { transform: translateY(-15px); }
    50%  { transform: translateY(0); }
    75%  { transform: translateY(15px); }
    100% { transform: translateY(0); }
}

/* 두 번째 애니메이션 (조금 느리고 살짝 회전 섞음) */
@keyframes floatUpDown2 {
    0%   { transform: translateY(0) rotate(0deg); }
    50%  { transform: translateY(-20px) rotate(2deg); }
    100% { transform: translateY(0) rotate(0deg); }
}
.sec01 .img_wrap img{border-radius: 150px 20px 0 20px;}
.sec01 .img_wrap .radius{display: flex; align-items: flex-end; justify-content: flex-end; position: absolute; right: 0; bottom: 0; width: 264px; height: 66px; border-radius: 66px 0 0 66px; background-color: #fff; z-index: 9;}
.sec01 .img_wrap .radius:before { content:''; position:absolute; right:264px; bottom: 0; width:33px; height:33px; border-radius:0 0 33px 0; box-shadow:33px 33px 0 33px #fff; }
.sec01 .img_wrap .radius:after { content:''; position:absolute;  right:0; bottom:66px; width:33px; height:33px; border-radius:0 0 33px 0; box-shadow:33px 33px 0 33px #fff;}

.sec01 .text_wrap{display: flex; flex-direction: column; justify-content: center; width: fit-content;}
.sec01 .text_wrap span{font-size: 48px; font-weight: 200;}
.sec01 .text_wrap .sub_text{display: flex; flex-direction: column; gap: 20px; width: 852px; margin-top: 32px;}
.sec01 .text_wrap .sub_text p{font-size: 18px; font-weight: 300; line-height: 28px;}
.sec01 .img_wrap .radius_box{position: relative; width: 100%; height: 100%; overflow: hidden;}
.sec01 .img_wrap .radius button { outline: none; cursor: pointer; border: none; width: 254px; height: 56px; margin-top: 76px; padding: 0; font-family: inherit; font-size: 17px; position: relative; display: flex; justify-content: center; align-items: center; letter-spacing: 0.05rem; font-weight: 500; border-radius: 500px; overflow: hidden; background: #FF4D00; color: #fff; font-family: "Urbanist", sans-serif;  z-index: 3;}
.sec01 .img_wrap .radius button span { position: relative; z-index: 10; transition: color 0.4s; }
.sec01 .img_wrap .radius button img { position: relative; z-index: 10; transition: color 0.4s; }
.sec01 .img_wrap .radius button:hover img { filter: brightness(100%); }
.sec01 .img_wrap .radius button:hover span { color: #fff; }
.sec01 .img_wrap .radius button::before, .sec01 .img_wrap .radius button::after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; }
.sec01 .img_wrap .radius button::before { content: ""; background: #000; width: 120%; left: -10%; transform: skew(30deg); transition: transform 0.4s cubic-bezier(0.3, 1, 0.8, 1); }
.sec01 .img_wrap .radius button:hover::before { transform: translate3d(100%, 0, 0); }

/* .sec01 .inner.reversed .img_wrap::before{content: url(../img/geneselabs/main_img01_03.png);}
.sec01 .inner.reversed .img_wrap::after{content: url(../img/geneselabs/main_img01_04.png);} */

.sec01 .inner.reversed .img_wrap::before {
    background: url(../img/geneselabs/main_img01_03.png) no-repeat center / contain;
  }
.sec01 .inner.reversed .img_wrap::after {
background: url(../img/geneselabs/main_img01_04.png) no-repeat center / contain;

}


.sec01 .img_wrap .img-base,
.sec01 .img_wrap .img-alt {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 150px 20px 0 20px;
  will-change: opacity, transform;
}
.sec01 .img_wrap .img-alt { opacity: 0; pointer-events: none; }

/* 스와프 애니메이션 중 살짝 이동 효과가 보이도록 컨테이너에 will-change */
.sec01 .img_wrap, .sec01 .text_wrap { will-change: transform; }



.sec02{position: relative; overflow: hidden; background-image: url(../img/geneselabs/main_sec02_bg.png); background-size: 100% 100%; background-repeat: no-repeat;}
.sec02 .inner{position: relative; display: flex; justify-content: space-between; gap: 106px; width: 1600px; margin: 0 auto; padding: 215px 0; box-sizing: border-box;}
.sec02 .inner .tit{width: 536px; padding-top: 56px;  box-sizing: border-box;}
.sec02 .inner .tit>span{font-size: 42px; font-weight: 400;}
.sec02 .inner .tit .sub_text{display: flex; flex-direction: column; gap: 20px; margin-top: 42px; width: 536px;}
.sec02 .inner .tit .sub_text p{width: 100%; font-size: 18px; font-weight: 300; line-height: 28px;}
.sec02 .sec02_btn button { outline: none; cursor: pointer; border: none; width: 254px; height: 56px; margin-top: 72px; padding: 0; font-family: inherit; font-size: 17px; position: relative; display: flex; justify-content: center; align-items: center; letter-spacing: 0.05rem; font-weight: 500; border-radius: 500px; overflow: hidden; background: #FF4D00; color: #fff; font-family: "Urbanist", sans-serif;  z-index: 3;}
.sec02 .sec02_btn button span { position: relative; z-index: 10; transition: color 0.4s; }
.sec02 .sec02_btn button img { position: relative; z-index: 10; transition: filter 0.4s; }
.sec02 .sec02_btn button:hover img { filter: brightness(100%); }
.sec02 .sec02_btn button:hover span { color: #fff; }
.sec02 .sec02_btn button::before, .sec02 .sec02_btn button::after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; }
.sec02 .sec02_btn button::before { content: ""; background: #000; width: 120%; left: -10%; transform: skew(30deg); transition: transform 0.4s cubic-bezier(0.3, 1, 0.8, 1); }
.sec02 .sec02_btn button:hover::before { transform: translate3d(100%, 0, 0); }

.sec02 .inner .pro_list_wrap{  width: 100%;          /* 1118px 고정 → 100% */
    max-width: 1118px;    /* 필요하면 최대폭만 제한 */
    margin-left: auto;
    margin-right: auto;}
.sec02 .inner .pro_list_wrap .swiper-wrapper{display: flex; width: 100%;}
.sec02 .inner .pro_list_wrap .swiper-slide{ width: 310px; background-color: #F3F3F3; border-radius: 20px; box-sizing: border-box;}
.sec02 .inner .pro_list_wrap .swiper-slide.swiper-slide-active{ background-color: #DEE6E9;}
.sec02 .inner .pro_list_wrap .swiper-slide .slide_img{display: flex; justify-content: center; align-items: center; width: 100%; border-radius: 20px; overflow: hidden;}
.sec02 .inner .pro_list_wrap .swiper-slide .slide_img img{width: 100%; transition: .6s;}
.sec02 .inner .pro_list_wrap .swiper-slide .slide_img:hover img{transform: scale(1.1);}
.sec02 .inner .pro_list_wrap .swiper-slide .slide_img>span{font-size: 20px; display: flex; justify-content: center; align-items: center; width: 100%; height: 342px;}
.sec02 .swiper-button-prev:after, .swiper-rtl .swiper-button-next:after{content: none;}


.sec03{position: relative; padding: 196px 0 ; box-sizing: border-box;}
.sec03 .inner{ display: flex; flex-direction: column; align-items: center; justify-content: center; width: 1600px; margin: 0 auto;}
.sec03 .pro_img{position: relative; width: 505px; height: 505px;}
.sec03 .pro_img img{width: 100%; height: 100%;  animation: floatUpDown2 4s ease-in-out infinite;}
.sec03 .pro_img .text_bg{display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 42px; position: absolute; left: 50%; transform: translateX(-50%); top: 90px; z-index: -1;}
.sec03 .pro_img .text_bg p{font-size: 200px; font-weight: bold; color: #f3f3f3; line-height: 161px; text-align: center;}
.sec03 .text_wrap{display: flex; flex-direction: column; align-items: center; width: fit-content;}
.sec03 .text_wrap span{font-size: 24px; font-weight: 700; letter-spacing: 5px;}
.sec03 .text_wrap>img{margin-top: 20px; width: 236px;}
.sec03 .text_wrap .sub_text{display: flex; flex-direction: column; gap: 30px; margin-top: 32px;}
.sec03 .text_wrap .sub_text p{font-size: 15px; font-weight: 400; line-height: 24px; color: #6e6e6e; text-align: center;}
.sec03 .sec03_btn{width: fit-content; height: fit-content;}
.sec03 .sec03_btn a{margin-top: 42px; display: flex; justify-content: center; align-items: center; padding: 16px 36px; gap: 4px; width: fit-content;  background-color: #CF231C; border-radius: 500px; font-size: 20px; font-weight: 500; color: #fff; font-family: "Urbanist", sans-serif;}
.sec03 .sec03_btn a {
    background-position: right center;
    background-size: 200% auto;
    -webkit-animation: pulse 2s infinite;
    animation: pulse512 1.5s infinite;
   }
   
   @keyframes pulse512 {
    0% {
     box-shadow: 0 0 0 0 #CF231C;
    }
   
    70% {
     box-shadow: 0 0 0 10px rgb(218 103 68 / 0%);
    }
   
    100% {
     box-shadow: 0 0 0 0 rgb(218 103 68 / 0%);
    }
   }

.sec04{position: relative;}
.global{position: relative; width: 100%; height: 100vh; background-image: url(../img/global_bg.png); background-size: cover; background-repeat: no-repeat;}
.global .text_wrap{position: absolute; left: 200px; bottom: 96px; z-index: 9999;}
.global .text_wrap span{font-size: 64px; font-weight: 400;}
.global .text_wrap p{font-size: 16px; line-height: 32px;}
.global .container { position: relative; inset: 0;  }
.global .canvas { width: 100%; height: 100%; display: block; }

/* 라벨 렌더러 루트는 pointer-events:none 이지만,
   개별 요소(pin/bubble)에서 다시 켤 수 있어요 */
.sec04 .labels { font-family: inherit; pointer-events: none; }

/* 말풍선 - 좌표에서 위로 띄우기 */
.sec04 .bubble {
    position: absolute;
    --lift: 32px; /* 좌표에서 얼마나 위로 띄울지 */
    transform: translate(-50%, calc(-100% - var(--lift)));
    pointer-events: auto; /* 말풍선 위에서도 이벤트 가능하게 (원하면 none으로) */
}
   
.sec04 .bubble-inner{
    display:flex;
    flex-direction: column;
    align-items: center;
    padding:12px 24px;
    border-radius:500px;
    background:#ffffff;
    color:#0b0f17;
    /* box-shadow:0 10px 28px rgba(0,0,0,.22); */
    border:1px solid rgba(0,0,0,.08);
    white-space:nowrap;
    margin-bottom: 106px;
}
.sec04 .bubble-title{ font-weight:600; font-size:20px; line-height:1; }
.sec04 .bubble-sub  { margin-top:3px; font-weight:600; font-size:16px; color: #787878; }

/* 핀(dot) - 각 나라 좌표에 정확히 놓이는 클릭/호버 타겟 */
.sec04 .pin_box{position: relative;}
.sec04 .pin {
position: absolute;
transform: translate(-50%, -50%);
pointer-events: auto;
border-radius: 50%;
background: #00C2FF;
transition: transform .15s ease, box-shadow .15s ease;
cursor: pointer;
z-index: 1;
}

  .pin_box:has(.pin.large)::before {
    content: "";
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #FF4D00;
    animation: wave 2s linear infinite;
    z-index: -10;
  }

  .pin_box:has(.pin.large)::after {
    content: "";
    position: absolute;
    width: 50px;
    height: 50px;
    top: 0;
    border-radius: 50%;
    background: #FFE5CD;
    animation: wave 3s linear infinite;
    z-index: -10;
  }

  .pin_box::after {
    opacity: 0;
    animation-delay: 1.5s; /* 두 번째 파동 지연 */
  }

  /* 파동 애니메이션 */
  @keyframes wave {
    0%   { transform: translate(-50%,-50%) scale(0);   opacity: 1; }
    100% { transform: translate(-50%,-50%) scale(1.1); opacity: 0; }
  }


/* 작은 핀 (기본값) */
.sec04 .pin.small {
position: relative;
width: 16px;
height: 16px;
background-color: #01103B !important;
}
/* .pin.small::after{position: absolute; left: 0; top: 0; transform: translate(-50%,-50%); content: "";width: 30px; height: 30px; background-color: rgba(206, 115, 30, 0.9); border-radius: 50%;} */
/* 큰 핀 (France / South Korea) */
.sec04 .pin.large {
width: 16px;
height: 16px;
}

.sec04 .pin:hover {
transform: translate(-50%, -60%) scale(1.25); /* 살짝 위로 */
background: #FF4D00 !important; /* 색상 바뀜 */
box-shadow: 0 6px 12px rgba(0,0,0,0.25);
}

.sec05{position: relative;}
.sec05 .inner{width: 1600px; margin: 0 auto; padding: 196px 0 156px; box-sizing: border-box;}
.sec05 .inner .tit{font-size: 42px; line-height: 52px; font-weight: 400;}
.sec05 .inner .news_wrap{overflow: hidden; width: 100%; margin-top: 82px;}
.sec05 .inner .lat .lat_title{display: none;}
.sec05 .inner .news_wrap .lat ul{display: flex; flex-wrap: wrap; width: 100%; padding: 0; margin-top: 96px; gap: 24px;}
.sec05 .inner .news_wrap .lat ul li.basic_li{display: flex; flex-direction: column; justify-content: space-between; width: calc((100% - 72px)/4); padding: 36px 42px; background-color: #F7F8FA; box-sizing: border-box; margin-bottom: 0; border-radius: 20px;}
.sec05 .inner .news_wrap .lat ul li.basic_li .lt_info .lt_nick{display: none;}
.sec05 .inner .news_wrap .lat ul li.basic_li .new_icon{display: none;}
.sec05 .inner .news_wrap .lat li .content_wrap>a{display: block; height: 58px; font-size: 24px; font-weight: bold; line-height: normal; overflow: hidden; white-space: normal; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: keep-all;}
.sec05 .inner .news_wrap .lat li a:hover{color: var(--color-brand);}
.sec05 .inner .news_wrap .lat li .content{margin-top: 28px; height: 180px;}
.sec05 .inner .news_wrap .lat li .content strong{font-size: 16px; line-height: 28px; color: #787878; overflow: hidden; white-space: normal; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; word-break: keep-all}
.sec05 .inner .news_wrap .lat li .lt_info{margin-top: 50px;}
.sec05 .inner .news_wrap .lat li .lt_info .lt_date{padding: 0; font-size: 18px; line-height: 32px; color: #939393;}
.sec05 .inner .news_wrap .lt_more{display: none;}
.sec05 .inner .news_wrap .lat ul li.basic_li:hover .content strong{color: #111;}
.sec05 .inner .news_wrap .lat ul li.basic_li:hover .lt_date{color: #111;}
/* 레이아웃 */
.latest-flex{display: flex; gap: 16px; width: 100%; height: 796px;}
.latest-flex .left{position: relative; width: 100%; border-radius: 120px 50px 0 50px; overflow: hidden;}
.latest-flex .left .img_wrap{overflow: hidden; width: 100%; }
.latest-flex .left .img_wrap img{transform: scale(1);transition: .6s;}
.latest-flex .left .news_info{width: 100%; height: calc(100% - 390px ); background-color: #F5F5F5; padding: 36px; box-sizing: border-box;}
.latest-flex .left .news_info>span{font-size: 16px; line-height: 24px;}
.latest-flex .left .news_info>a{margin-top: 40px; font-size: 24px; line-height: 30px;  font-weight: bold; overflow: hidden; white-space: normal; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; transition: all .2s;}
.latest-flex .left .news_info .content{margin-top: 24px; font-size: 16px; font-weight: 400; line-height: 24px; overflow: hidden; white-space: normal; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;}
.latest-flex .left .news_info .content *{font-weight: 400;}
.latest-flex .left:hover .img_wrap img{transform: scale(1.1);}
.latest-flex .left:hover .news_info>a{color: #FF4D00;}
.latest-flex .right{width: 100%;}
.latest-flex .right .right_list{display: flex; flex-direction: column; gap: 16px; width: 100%;}
.latest-flex .right .right_list .list{position: relative; display: flex; flex-direction: row; border-radius: 100px 20px 0 20px; overflow: hidden;}
.latest-flex .right .right_list .list .img_wrap{overflow: hidden; width: 390px; }
.latest-flex .right .right_list .list .img_wrap img{transform: scale(1);transition: .6s;}
.latest-flex .right .right_list>.list:hover >.img_wrap img{transform: scale(1.1);}
.latest-flex .right .right_list .list .news_info{width: calc(100% - 390px); background-color: #f5f5f5; padding: 36px; box-sizing: border-box;}
.latest-flex .right .right_list .list .news_info>span{font-size: 16px; font-weight: 400; line-height: 24px;}
.latest-flex .right .right_list .list .news_info>a{margin-top: 28px; font-size: 24px; font-weight: bold; line-height: 30px; overflow: hidden; white-space: normal; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; transition: all .2s;}
.latest-flex .right .right_list .list:hover .news_info>a{color: #FF4D00;}
.latest-flex .right .right_list .list .news_info .content{margin-top: 24px; font-size: 16px; font-weight: 400; line-height: 24px; overflow: hidden; white-space: normal; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;}
.latest-flex .right .right_list .list .news_info .content *{font-weight: 400;}






.latest-flex .left .radius{display: flex; align-items: flex-end; justify-content: flex-end; position: absolute; right: 0; bottom: 0; width: 66px; height: 66px; border-radius: 66px 0 0 66px; background-color: #fff;}
.latest-flex .left .radius a{width: 100%; height: 100%; display: flex; justify-content: flex-end; align-items: flex-end;}
.latest-flex .left .radius:before { content:''; position:absolute; right:66px; bottom: 0; width:33px; height:33px; border-radius:0 0 33px 0; box-shadow:33px 33px 0 33px #fff; }
.latest-flex .left .radius:after { content:''; position:absolute;  right:0; bottom:66px; width:33px; height:33px; border-radius:0 0 33px 0; box-shadow:33px 33px 0 33px #fff;}
.latest-flex .left .radius .arrow{ z-index: 9; display: flex; justify-content: center; align-items: center;  width: 56px; height: 56px; border: 1px solid #e1e1e1; border-radius: 50%; background-color: #fff; transition: all .2s;}
.latest-flex .left:hover .radius .arrow{ border: none; color: #fff; background: #FF4D00;}
.latest-flex .right .right_list .list .radius{display: flex; align-items: flex-end; justify-content: flex-end; position: absolute; right: 0; bottom: 0; width: 66px; height: 66px; border-radius: 66px 0 0 66px; background-color: #fff;}
.latest-flex .right .right_list .list .radius a{width: 100%; height: 100%; display: flex; justify-content: flex-end; align-items: flex-end;}
.latest-flex .right .right_list .list .radius:before { content:''; position:absolute; right:66px; bottom: 0; width:33px; height:33px; border-radius:0 0 33px 0; box-shadow:33px 33px 0 33px #fff; }
.latest-flex .right .right_list .list .radius:after { content:''; position:absolute;  right:0; bottom:66px; width:33px; height:33px; border-radius:0 0 33px 0; box-shadow:33px 33px 0 33px #fff;}
.latest-flex .right .right_list .list .radius .arrow{   z-index: 9; display: flex; justify-content: center; align-items: center;  width: 56px; height: 56px; border: 1px solid #e1e1e1; border-radius: 50%; background-color: #fff; transition: all .2s;}
.latest-flex .right .right_list .list:hover .radius .arrow{ border: none; color: #fff; background: #FF4D00; border: 0;}




.sec06{position: relative; background-image: url(../img/geneselabs/main_sec06_bg.png); background-size: cover; background-repeat: no-repeat;}
.sec06 .inner{width: 1600px; margin: 0 auto; padding: 281px 0; box-sizing: border-box;}
.sec06 .text_wrap{display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; text-align: center;  z-index: 2;}
.sec06 .text_wrap::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 653px;   /* 원하는 넓이 */
    height: 653px;  /* 원하는 높이 */
    transform: translate(-50%, -50%);
    background: url(../img/geneselabs/main_sec06_01.png) no-repeat center / contain;
    z-index: -1;
  }
.sec06 .text_wrap>span{font-size: 82px; font-weight: bold; line-height: 106px;}
.sec06 .text_wrap p{margin-top: 24px; font-size: 20px; font-weight: 400; line-height: 30px;}
.sec06 .text_wrap .sec06_btn{position: relative; margin: 0 auto; width: fit-content;}
.sec06 .text_wrap .sec06_btn button { outline: none; cursor: pointer; border: none; width: 254px; height: 56px; margin-top: 72px; padding: 0; font-family: inherit; font-size: 17px; position: relative; display: flex; justify-content: center; align-items: center; letter-spacing: 0.05rem; font-weight: 500; border-radius: 500px; overflow: hidden; background: #FF4D00; color: #fff; font-family: "Urbanist", sans-serif;  z-index: 3;}
.sec06 .text_wrap .sec06_btn button span { position: relative; z-index: 10; transition: color 0.4s; }
.sec06 .text_wrap .sec06_btn button img { position: relative; z-index: 10; transition: color 0.4s; }
.sec06 .text_wrap .sec06_btn button:hover img { filter: brightness(100%); }
.sec06 .text_wrap .sec06_btn button:hover span { color: #fff; }
.sec06 .text_wrap .sec06_btn button::before, .sec06 .text_wrap .sec06_btn button::after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; }
.sec06 .text_wrap .sec06_btn button::before { content: ""; background: #000; width: 120%; left: -10%; transform: skew(30deg); transition: transform 0.4s cubic-bezier(0.3, 1, 0.8, 1); }
.sec06 .text_wrap .sec06_btn button:hover::before { transform: translate3d(100%, 0, 0); }












.float_btn{display: flex; flex-direction: column; justify-content: center; align-items: center; position: fixed; right: 68px; width: 80px; height: 148px; bottom: 148px;overflow: hidden; border-radius: 500px; background-color: var(--color-sub-brand); z-index: 9998;}
.float_btn a{display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%;  gap: 12px;}
.float_btn span{font-size: 16px; font-weight: 500; color: #fff; text-align: center;}
.float_btn.hide {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}
/* footer */
.icon_wrap{width: 100%; border-top: 1px solid #E5E5E5;}
.icon_wrap .inner{display: flex; width: 1400px; height: 160px; margin: 0 auto;}
.icon_wrap .inner .box{display: flex; align-items: center; justify-content: center; width: calc(100%/6); height: 100%;}
.icon_wrap .inner .box img{width: 100%;}
footer { display: flex; width: 100%; padding: 100px 0 36px; box-sizing: border-box; background-color: #101010;} 
footer .inner {position: relative;  display: flex; flex-direction: column; gap: 72px; width: 1600px; margin: 0 auto; } 
footer .inner .footer_top { display: flex; justify-content: space-between; width: 100%; }
footer .inner .footer_top .left{width: fit-content;}
footer .inner .footer_top .left span {font-size: 64px; font-weight: bold; color: #fff; line-height: 76px;}
footer .inner .footer_top .right{display: flex; flex-direction: column; gap: 24px; width: fit-content;}
footer .inner .footer_top .right .info_wrap{display: flex; width: fit-content; gap: 196px;}
footer .inner .footer_top .right .info_wrap .quick_links{display: flex; flex-direction: column; width: fit-content;}
footer .inner .footer_top .right .info_wrap .quick_links>span{margin-bottom: 20px; font-size: 16px; font-weight: 500; color: #d2d2d2;}
footer .inner .footer_top .right .info_wrap .quick_links>ul{display: flex; flex-direction: column; gap: 6px; width: fit-content;}
footer .inner .footer_top .right .info_wrap .quick_links>ul>li{width: fit-content; font-size: 14px; font-weight: 400; color: #8d8d8d;}
footer .inner .footer_top .right .info_wrap .contactus{display: flex; flex-direction: column; width: fit-content;}
footer .inner .footer_top .right .info_wrap .contactus>span{margin-bottom: 20px; font-size: 16px; font-weight: 500; color: #d2d2d2;}
footer .inner .footer_top .right .info_wrap .contactus>ul{display: flex; flex-direction: column; gap: 6px; width: fit-content;}
footer .inner .footer_top .right .info_wrap .contactus>ul>li{width: fit-content; font-size: 14px; font-weight: 400; color: #8d8d8d;}
footer .inner .footer_bot{display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; gap: 10px;}
footer .inner .footer_top .right .copy{font-size: 12px; color: #8d8d8d; width: fit-content;}
footer .inner .footer_bot a{display: flex; justify-content: center; align-items: center;}
footer .inner .footer_bot a img{width: 154px;}
footer .inner .top_btn_wrap{position: absolute; width: 100px; height: 100px; top: -150px; left: 50%; transform: translateX(-50%); background-color: #101010; border-radius: 500px; border: 1px solid #1f1f1f;}
footer .inner .top_btn_wrap:hover{background-image: linear-gradient(to right, #ff4d4d, #f9cb28); border: 0; animation: pulse 1.5s infinite;}
.pulse-button:hover {
            animation: none;
  }
footer .inner .top_btn_wrap a{display: flex; justify-content: center; align-items: center; width: 100%; height: 100%;}

@keyframes pulse {
    0% {
    transform: translateX(-50%) scale(.9);
    }
    70% {
    transform: translateX(-50%) scale(1);
      /* box-shadow: 0 0 0 50px rgba(90, 153, 212, 0); */
    }
    100% {
              transform: translateX(-50%) scale(.9);
      /* box-shadow: 0 0 0 0 rgba(90, 153, 212, 0); */
    }
  }
 


/* 마우스커서 */
.cursor{position:fixed;z-index:1000;transform:translate(-50%, -50%);transition-property:background, transform;pointer-events:none}
.cursor .bg{opacity:0;position:absolute;left:-52px;top:-52px;transform:scale(0);width:105px;height:105px;border-radius:50%;font-size:10px;font-weight:600;text-align:center;line-height:105px;color:#fff;background:rgba(255, 255, 255, 0.1);transition:all .4s var(--timing);color: #111; backdrop-filter: blur(4px); border: 1px solid var(--color-sub-brand); font-weight: bold;}
.cursor.on .bg{opacity:1;transform:scale(1)}

@media screen and (max-width:1660px) {
    /* 헤더 */
    #header{padding: 10px 3.211vw 0;}
    #header .logo{left: 3.211vw; height: 26px; background-position: left; width: 166px;}
    #header .gnb>ul>li>a{font-size: 16px;}
    #header .etc .select_lang button a{font-size: 13px;}
    #header.on .etc .select_lang button a{font-size: 13px;}
    #header .gnb .depth.s2>ul>li>a{font-size: 15px;}
    .depth .list_wrap .left .list a{font-size: 15px;}
    .depth .list_wrap .left .list ul>li>a{font-size: 14px;}
    .depth .list_wrap .right .list a{font-size: 15px;}
    .depth .list_wrap .right .list ul>li>a{font-size: 14px;}
    #header .etc{right: 3.211vw}

    /* 메인비쥬얼 */
    .contents{left: 100px; top: 200px;}
    .main_visual{border-radius: 40px 120px 40px 40px;}
    .main_visual .section{border-radius: 40px 120px 40px 40px;}
    .contents .main_text h2{font-size: 64px; line-height: 64px;}
    .contents .main_text h2 b{font-size: 64px; line-height: 64px;}
    .contents .main_text p{font-size: 20px; line-height: 26px; margin-top: 16px;}
    .contents .main_text h2::after{width: 246px; bottom: -16px;}
    .contents .main_btn button{width: 198px; height: 48px; font-size: 16px; margin-top: 42px;}

    

    /* sec01 */
    .sec01{display: flex; justify-content: center;}
    .sec01 .inner{width: 90%; padding: 96px 0; gap: 56px; flex-direction: column;}
    .sec01 .inner.reversed{flex-direction: column;}
    .sec01 .img_wrap{width: 100%;}
    .sec01 .text_wrap{width: 100%;}
    .sec01 .text_wrap .sub_text{width: 100%;}
    .sec01 .text_wrap span{font-size: 32px;}
    

    /* sec02 */
    .sec02 .inner{width: 92%; padding: 96px 0;}
    .sec02 .inner .tit>span{font-size: 32px;}
    .sec02 .inner .tit .sub_text{margin-top: 16px;}
    .sec02 .sec02_btn button{width: 198px; height: 48px; font-size: 16px; margin-top: 42px;}
    /* sec03 */
    .sec03 .inner{width: 92%;}
    /* sec04 */
    .global .text_wrap{left: 100px;}
    .global .text_wrap span{font-size: 32px;}
    .global .text_wrap p{line-height: 28px;}
    /* sec05 */
    .sec05 .inner{width: 92%; padding: 96px 0;}
    .sec05 .inner .tit{font-size: 32px;}
    .sec05 .inner .news_wrap{margin-top: 56px;}
    /* sec06 */
    .sec06 .inner{width: 92%;}


    /* 푸터 */
    footer .inner{width: 92%;}
    

}
@media screen and (max-width:1400px) {
    .sec02 .inner{flex-direction: column;}
    .sec02 .inner .pro_list_wrap{width: 100%;}
    .sec02 .inner .tit{width: 100%;}
    .sec02 .inner .tit .sub_text{width: 100%;}
    .latest-flex{flex-direction: column; height: fit-content;}
    .latest-flex .left{display: flex; flex-direction: row;}
    .latest-flex .left .img_wrap{width: 390px;}
    .latest-flex .left .img_wrap a{display: flex; justify-content: center;}
    .latest-flex .left .news_info{width: calc(100% - 390px); height: 390px;}
}

@media screen and (max-width:1024px) {
    /* 헤더 */
    #header{height: 80px; justify-content: center;}
    #header .gnb{display: none;}
    #header .btnMenu{display: block; position: absolute; width: 20px; height: 13px; left: 24px;}
    #header .etc{right: 80px}

    
    /* 메인비주얼 */
    .main_visual #main_01 .slide_img {background-size: auto 100%; background-image: url(../img/geneselabs/mainvisual01_1024.png);
    }
    .main_visual{border-radius: 20px 50px 20px 0;}
    .main_visual .section{border-radius: 20px 50px 20px 0;}
    .scroll-down p{display: none;}
    .main_visual .radius{align-items: flex-end;}
    .scroll-down.start{margin-bottom: 24px;}
    


    /* sec01 */
    .sec01 .inner{flex-direction: column; padding: 96px 0; align-items: center;}
    .sec01 .inner.reversed{flex-direction: column;}
    .sec01 .text_wrap{width: 100%;}
    
    /* 메인-sec02 */
    .sec02 .inner{flex-direction: column; }
    .sec02 .inner .pro_list_wrap{width: 100%;}
    .sec02 .inner .tit{width: 100%; padding-top: 0;}
    .sec02 .inner .tit .sub_text{width: 100%;}


    /* 푸터 */
    footer .inner .top_btn_wrap{width: 72px; height: 72px; top: -136px;}
    footer .inner .footer_top{flex-direction: column; gap: 56px;}
    footer .inner .footer_top .left span{font-size: 56px; line-height: 56px;}
}
@media screen and (max-width:960px) {
    /* 푸터 */

    
}

@media screen and (max-width:768px) {

    .main_visual #main_01 .slide_img {background-size: 100% 100%; background-image: url(../img/geneselabs/mainvisual01_768.png);} 

    /* .main_visual .swiper-wrapper{height: 85vh !important;} */
    cursor{display: none !important;}
    /* 헤더 */
    #header{height: 60px; padding: 0;}
    #header .logo{height: 22px; width: 142px;}
    #header .etc{display: none;}

    /* 메인비쥬얼 */

    .contents{ width: 100%; top: 180px; left: 50%; transform: translateX(-50%) translateY(30px);}
    .contents.show{transform: translateX(-50%) translateY(0);}
    .contents .main_text{text-align: center;}
    .contents .main_text h2{width: fit-content; font-size: 48px; line-height: 48px; margin: 0 auto;}
    .contents .main_text h2 b{font-size: 48px; line-height: 48px;}
    .contents .main_text p{font-size: 16px; line-height: 26px;}
    .contents .main_text h2::after {
        right: 0px;
        bottom: -24px;
        width: 190px;
        height: 57px;
    }
    
    .main_visual .radius{left: 9px; width: 48px; height: 192px;}
    .main_visual .radius:before{width: 24px; height: 24px; top: -24px; border-radius: 0 0 24px 0; box-shadow: 24px 24px 0 24px #fff;}
    .main_visual .radius:after{width: 24px; height: 24px; bottom: 0; right: -24px; border-radius: 0 0 24px 0; box-shadow: 24px 24px 0 24px #fff;}
    .contents .main_btn button{font-size: 15px; width: 156px; height: 48px; margin: 56px auto 0;}


    /* sec01 */
    .sec01 {overflow: hidden;}
    .sec01 .img_wrap{width: 100%; }
    .sec01 .img_wrap::before{width: 80px; height: 80px; top: -40px; right: -10px;}
    .sec01 .img_wrap::after{width: 100px; height: 100px; left: -16px; bottom: -24px;}
    .sec01 .inner{flex-direction: column-reverse; padding: 56px 0; gap: 36px;}
    .sec01 .text_wrap span{font-size: 24px;}
    .sec01 .text_wrap .sub_text{margin-top: 20px; gap: 16px;}
    .sec01 .text_wrap .sub_text p{font-size: 16px; line-height: 26px;}
    .sec01 .img_wrap .img-base, .sec01 .img_wrap .img-alt{border-radius: 60px 20px 0 20px;}
    .sec01 .img_wrap .radius button{font-size: 15px;}
    .sec01 .img_wrap .radius{width: 192px; height: 48px;}
    .sec01 .img_wrap .radius:before{right: 192px; width: 24px; height: 24px; box-shadow: 24px 24px 0 24px #fff;}
    .sec01 .img_wrap .radius:after{bottom: 48px; width: 24px; height: 24px; box-shadow: 24px 24px 0 24px #fff;}
    .sec01 .img_wrap .radius button{width: calc(100% - 8px); height: calc(100% - 8px);}
    /* sec02 */
    .sec02 .inner{padding: 56px 0; gap: 36px;}
    .sec02 .inner .pro_list_wrap{width: fit-content;}
    .sec02 .inner .pro_list_wrap .swiper-slide{width: 100% !important;}
    .sec02 .inner .pro_list_wrap .swiper-slide .slide_img img{height: 100%;}
    .sec02 .inner .pro_list_wrap .swiper-slide a{display: block; height: 100%;}
    .sec02 .inner .pro_list_wrap .swiper-slide a .slide_img{height: 100%;}
    .sec02 .inner .tit>span{font-size: 24px;}
    .sec02 .inner .tit .sub_text{margin-top: 20px; gap: 16px;}
    .sec02 .inner .tit .sub_text p{font-size: 16px; line-height: 26px;}
    .sec02 .sec02_btn button{margin-top: 56px; width: 156px; height: 48px; font-size: 15px;}

    /* sec03 */
    .sec03{padding: 56px 0;}
    .sec03 .pro_img{width: 100%; height: fit-content;}
    .sec03 .pro_img .text_bg p{font-size: 84px; line-height: 90px;}
    .sec03 .pro_img img{height: fit-content;}
    .sec03 .text_wrap{width: 100%;}
    .sec03 .text_wrap span{font-size: 16px;}
    .sec03 .text_wrap>img{width: 180px;}
    .sec03 .text_wrap .sub_text{gap: 16px;}
    .sec03 .text_wrap .sub_text p br{display: none;}
    .sec03 .sec03_btn a{font-size: 15px; padding: 8px 24px;}
    .sec03 .pro_img{width: 350px;}
    /* sec04 */
    .sec04 .bubble-title{font-size: 15px;}
    .sec04 .bubble-sub{font-size: 12px;}
    .sec04 .pin.large{width: 10px; height: 10px;}
    .sec04 .pin.small{width: 10px; height: 10px;}
    .global .text_wrap{padding: 0 3.211vw; width: 100%; left: 0; bottom: 36px;}
    .global .text_wrap span{font-size: 24px;}
    .global .text_wrap p{font-size: 15px; line-height: 24px;}
    .global .text_wrap p br{display: none;}
    

    /* sec05 */
    .sec05 .inner{padding: 56px 0;}
    .sec05 .inner .tit{font-size: 24px; line-height: normal;}
    .sec05 .inner .news_wrap{margin-top: 56px;}
    .latest-flex .left .img_wrap{width: 320px; height: 320px;}
    .latest-flex .left .img_wrap img{width: auto; height: 100%;}
    .latest-flex .left .news_info{width: calc(100% - 320px); height: auto;}
    .latest-flex{height: fit-content; flex-wrap: wrap;}
    .latest-flex .left{border-radius: 50px 20px 0 20px;}
    .latest-flex .left .news_info>span{font-size: 14px;}
    .latest-flex .left .news_info>a{margin-top: 4px; font-size: 16px; line-height: 24px; -webkit-line-clamp: 1;}
    .latest-flex .left .news_info .content{margin-top: 10px; -webkit-line-clamp: 3;}
    .latest-flex .left .news_info{padding: 24px 24px 56px;}
    .latest-flex .left .news_info .content *{font-size: 15px;}
    .latest-flex .left .radius{width: 48px; height: 48px; border-radius: 48px 0 0 48px;}
    .latest-flex .left .radius:before{width: 24px; height: 24px; right: 48px; border-radius: 0 0 24px 0; box-shadow: 24px 24px 0 24px #fff;}
    .latest-flex .left .radius:after{width: 24px; height: 24px; bottom: 48px; border-radius: 0 0 24px 0; box-shadow: 24px 24px 0 24px #fff;}
    .latest-flex .left .radius .arrow{width: 42px; height: 42px;}
    .latest-flex .left .radius .arrow svg{width: 16px;}
    .latest-flex .right .right_list .list{flex-direction: row;}
    .latest-flex .right .right_list .list .img_wrap{width: 320px;}
    .latest-flex .right .right_list .list .img_wrap img{width: 100%;}
    .latest-flex .right .right_list .list .news_info{width: calc(100% - 320px); padding: 24px 24px 56px;}
    .latest-flex .right .right_list .list .news_info>span{font-size: 14px;}
    .latest-flex .right .right_list .list .news_info>a{margin-top: 4px; font-size: 16px; line-height: 24px;  -webkit-line-clamp: 1;}
    .latest-flex .right .right_list .list .news_info .content{margin-top: 10px; -webkit-line-clamp: 3;}
    .latest-flex .right .right_list .list .news_info .content *{font-size: 15px;}
    .latest-flex .right .right_list .list .radius{width: 48px; height: 48px; border-radius: 48px 0 0 48px;}
    .latest-flex .right .right_list .list .radius:before{width: 24px; height: 24px; right: 48px; border-radius: 0 0 24px 0; box-shadow: 24px 24px 0 24px #fff;}
    .latest-flex .right .right_list .list .radius:after{width: 24px; height: 24px; bottom: 48px; border-radius: 0 0 24px 0; box-shadow: 24px 24px 0 24px #fff;}
    .latest-flex .right .right_list .list .radius .arrow{width: 42px; height: 42px;}
    .latest-flex .right .right_list .list .radius .arrow svg{width: 16px;}
    .latest-flex .right .right_list .list{border-radius: 50px 20px 0 20px;}


    /* sec06 */
    .sec06 .inner{padding: 56px 0 96px;}
    .sec06 .text_wrap>span{font-size: 32px; line-height: 46px;}
    .sec06 .text_wrap p br{display: none;}
    .sec06 .text_wrap p{font-size: 17px; line-height: 24px;}
    .sec06 .text_wrap::after {
        width: 100%;   /* 원하는 넓이 */
        height: 100%;  /* 원하는 높이 */
      }
      .sec06 .text_wrap .sec06_btn button{font-size: 15px; margin-top: 56px; width: 156px; height: 48px;}









    /* 푸터 */
    footer .inner .footer_top .left span{font-size: 42px; line-height: 48px;}
    footer .inner .footer_top .right .info_wrap{gap: 72px;}

}

@media screen and (max-width:700px) {
    .latest-flex .left{flex-direction: column;}
    .latest-flex .left .img_wrap{width: 100%; height: fit-content;}
    .latest-flex .left .img_wrap img{width: 100%;}
    .latest-flex .left .news_info{width: 100%;}
    .latest-flex .right .right_list .list{flex-direction: column;}
    .latest-flex .right .right_list .list .img_wrap{width: 100%;}
    .latest-flex .right .right_list .list .news_info{width: 100%;}
}

@media screen and (max-width:475px) {


    .sec03 .pro_img{width: 350px; height: 350px;}
    .sec03 .pro_img img{height: 350px;}
    footer .inner .footer_top .right .copy{font-size: 10px; color: #8d8d8d; width: fit-content;}


}