@charset "utf-8";

.inner { width: 100%;  padding: 0 var(--inner-pd);}

.flex{display: flex;align-items: center;}
.grid-2{display: grid;grid-template-columns: repeat(2,1fr);}
.grid-3{display: grid;grid-template-columns: repeat(3,1fr);}
.grid-4{display: grid;grid-template-columns: repeat(4,1fr);}
.grid-5{display: grid;grid-template-columns: repeat(5,1fr);}
.grid-6{display: grid;grid-template-columns: repeat(6,1fr);}

br.br_pc{display: inline-block;}
br.br_mo{display: none;}

.fw-300{font-weight: 300;}
.fw-400{font-weight: 400;}
.fw-500{font-weight: 500;}
.fw-600{font-weight: 600;}
.bold, .fw-700{font-weight: bold;}
.fw-800{font-weight: 800;}

.btn-wr{display: flex;align-items: center;justify-content: center;}
.more-btn{font-family: "Poppins", sans-serif;background-color: transparent;padding: 1.5rem 4rem;border-radius: 3.5rem; border: 1px solid #fff;font-size: 2rem;color: #fff;text-align: center;transition: .4s;}
.more-btn:hover{background-color: #e5002d;border-color: #e5002d;}

@media all and (max-width:960px) {
 .more-btn{padding: 1.2rem 3rem;}
}
@media all and (max-width:640px) {
 .more-btn{padding: 1rem 2rem;font-size: 1.6rem;}
}


/*트랜지션*/
#header, #header .gnb > li > a, #header .gnb > li .depth a{ transition: var(--transi); }

/*헤더*/
.index #header{background-color: transparent}
.index #header .ham_menu_btn span{background-color: #fff}

 #header { position: fixed; top: 0; left: 0; width: 100%; height: var(--header-hei); background-color: transparent; background-position: 99% 97%; background-size: 30%; background-repeat: no-repeat; z-index: 99; overflow: hidden; }
 #header .logo { width: 5rem; height: 5rem; background-image: url(/theme/basic/img/cmn/logo.svg); background-position: left; background-repeat: no-repeat; background-size: contain; }
 #header .inner { justify-content: space-between; width: 100%; height: var(--header-hei); padding: var(--header-pd); }
 #header .gnb > li {position: relative; width: 17rem; position: relative; height: 100%; line-height: var(--header-hei); }
 #header .gnb > li > a {  display: block;  font-size: 2rem; font-weight: 500; text-align: center;color: #fff;}
 #header .gnb .depth  {
  position: absolute;
  top: var(--header-hei);
  left: 50%;
  width: 100%;
  height: 200%;
  padding-top: 2rem;
  padding-bottom: 4rem;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -1rem);
 }
 #header .gnb .depth > li { display: block; width: 100%; line-height: 2; text-align: center; }
 #header .gnb .depth > li > a { position: relative; font-size: 1.8rem; font-weight: 200; line-height: 1.8; }
 #header .gnb .depth > li > a:hover { color: var(--color-point); font-weight: 400; }
 #header .gnb::after { position: absolute; width: 100%; height: 300%;top: 0;left: 0; content: ''; z-index: -1; }

 #header .call-wr{font-size: 2rem;font-weight: 800;}
 #header .call-wr .icon{margin-right: .5rem;}

 #header.hidden { transform: translateY(calc(var(--header-hei) * -1)); }
 #header.on, #header.scroll { background-color: #fff; filter: drop-shadow(1px 1px 4px rgba(0, 0, 0, 0.2));}
#header.on{background: linear-gradient(180deg, #FFFFFF 24.21%, #F2F2F2 100%);}
 #header.on .gnb > li > a, #header.scroll .gnb > li > a { color: #000; font-weight: 600; }

 #header.on .inner, #header.scroll .inner{border-bottom: 1px solid var(--color-border);}
 #header.on .gnb > li .depth { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
 #header.on .gnb > li .depth a { color: var(--color-txt); font-weight: 400; }
 #header.on .gnb > li .depth a:hover { color: var(--color-point); font-weight: 500; }
 #header.on, #header.scroll { filter: drop-shadow(1px 1px 4px rgba(0,0,0,.2)); }


 /*헤더 메뉴 버튼*/
 #header .ham_menu_btn { display: none; align-content: space-around; grid-gap:0; position: relative; width: 3rem; height: 3rem; margin-left: 2rem; }
 #header .ham_menu_btn span { width: 100%; height: 2px; background-color: #fff; }
#header.scroll .ham_menu_btn span,  #header.ham_on .ham_menu_btn span{background-color: #000;}
 #header.ham_on .ham_menu_btn { }
 #header.ham_on .ham_menu_btn span { position: absolute; top: 50%; left: 0; }
 #header.ham_on .ham_menu_btn span:nth-child(2) { opacity: 0; visibility: hidden; }
 #header.ham_on .ham_menu_btn span:nth-child(1) { transform: rotateZ(45deg); }
 #header.ham_on .ham_menu_btn span:nth-child(3) { transform: rotateZ(-45deg); }

@media all and (max-width:1240px) {
  #header .gnb > li > a { font-size: 1.8rem; }
  #header .gnb > li:not(:last-child) { margin-right: 4.8rem; }
  #header .gnb .depth > li > a { font-size: 1.6rem; }
  #header.on .gnb > li .depth { min-height: 15.6rem; }
  #header .laboratory { padding: .5rem 2rem; }
  #header .inner { padding: 0 calc(var(--inner-pd) /2 ); }
}
@media all and (max-width:768px) {
  #header .gnb { display: none; }
  #header .ham_menu_btn { display: grid; }
  #header .ham_menu_btn span{background-color: #000;}
  #header.ham_on {filter: none;}
}
}
@media all and (any-pointer:coarse) {
  #header .gnb { display: none; }
  #header .ham_menu_btn { display: grid; }
  #header .ham_menu_btn span{background-color: #000;}
  #header.ham_on {filter: none;}
}
}
@media all and (max-width:768px) {
  #header{background-color: #fff;}
  #header .inner { padding: 0 var(--inner-pd); }
  #header .logo{width: 4.5rem;height: 4.5rem}
  #header.hidden{transform:initial}
}


 /*모바일 메뉴*/
 .ham_menu { display: block; position: fixed; right: 0; top: 0; z-index: 1; width: 100vw; height: 100vh; padding:var(--header-hei) var(--inner-pd); background: #fff; overflow: hidden; opacity: 0; visibility: hidden; transition: .5s; z-index: 4; transform: translateX(100%); }
 .ham_menu > ul { width: 100%; padding-top: var(--header-hei); }
 .ham_menu > ul > li { width: 100%; line-height: 2; position: relative; }
 .ham_menu > ul > li:after,.ham_menu > ul > li:before { content: ""; display: block; width: 20px; height: 1px; position: absolute; right: 20px; top: 2.5rem; background: #ccc; transform:rotate(0deg); transition-duration: 0.4s }
 .ham_menu > ul > li:after { transform:rotate(0); }
 .ham_menu > ul > li:before { transform:rotate(90deg); }
 .ham_menu > ul > li > a { font-size: 2.6rem; font-weight: 600; color: #000;width: 100%;display: block;}
 .ham_menu > ul > li > .gnb-depth { display: none; position: relative; padding:1.5rem 2rem;background: rgb(167 167 167 / 11%); }
 .ham_menu > ul > li > .gnb-depth a { display: block; line-height: 2; font-weight: 200; font-size: 1.8rem; }
 .ham_menu > ul > li.active:after { transform:rotate(180deg); transition-duration: 0.4s }
 .ham_menu > ul > li.active:before { transform:rotate(360deg); transition-duration: 0.4s }
 .ham_menu.ham_on { opacity: 1; visibility: visible; transform: translateX(0); }

.ham_menu > ul > li:nth-child(5):after, .ham_menu > ul > li:nth-child(5):before,
.ham_menu > ul > li:nth-child(6):after, .ham_menu > ul > li:nth-child(6):before{display: none;}




/*풋터*/
.footer{padding: 9.7rem 0 6.8rem;background-color: #fff;border-top: 1px solid #444;}
.ft-flex{align-items: flex-end;justify-content: space-between;}
.ft-info{align-items: flex-start;}
.ft-info > li:not(:last-child){margin-right: 1.3rem;}
.ft-info .ft-tit, .ft-info .ft-txt{font-size: var(--fontSize-15);letter-spacing: -0.75px;line-height: 25px;}
.ft-info .ft-tit{}
.ft-info .ft-txt{font-weight: 500;}
.footer .logo{}

.footer #ftAdm {padding-top: 1rem;}
.footer #ftAdm li:not(:last-child) {margin-right: .5rem}
.footer #ftAdm li a { display: inline; padding: 0.3em 0.5em; border: 1px solid #b1b1b1; border-radius: 1em; font-size: 1rem; color: #b1b1b1;}


@media all and (max-width:1400px) {
  .footer{padding: 6rem 0}
  .ft-flex{flex-direction: column-reverse;align-items: flex-start;}
  .ft-info{margin-top: 4rem;}
}
@media all and (max-width:768px) {
  .footer{padding: 4rem 0}
  .footer .logo{width: 12rem;}
  .ft-info{flex-direction: column;align-items: flex-start;margin-top: 2.5rem;}
  .ft-info > li:not(:last-child){margin-right: 0;padding-bottom: 2rem;}
  .ft-info .ft-tit, .ft-info .ft-txt{font-size: 1.5rem}
}


/*탑 버튼*/
#top_btn { display: flex;align-items: center;justify-content: center;position:fixed; bottom:20px; right: 3rem; width:50px; height:50px; line-height:46px; border:1px solid #cdcdcd; border-radius: 100%; color:var(--color-txt); text-align:center; font-size:15px; z-index:90; background:rgba(255,255,255,0.5); cursor: pointer; opacity: 0; transition: .5s; }
#top_btn .material-symbols-rounded { display: block; }
#top_btn.on { opacity: 1; }
/* #top_btn:hover { border-color:#fff; background:#fff; } */
#top_btn.nofixed { bottom:350px; }

@media all and (max-width:640px) {
  #top_btn{right: 2rem}
}