@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;}


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

/*헤더*/
header.hr { position: fixed; top: 0; left: 0; width: 100%; height: var(--header-hei); background-color: #fff; background-position: 99% 97%; background-size: 30%; background-repeat: no-repeat; z-index: 99; overflow: hidden; }
header.hr .logo { width: 24.6rem; height: 5.3rem; background-image: url(/theme/basic/img/cmn/logo.svg); background-position: left; background-repeat: no-repeat; background-size: contain; }
header.hr .inner { justify-content: space-between; width: 100%; height: var(--header-hei); padding: var(--header-pd); }
header.hr .gnb > li {position: relative; width: 15rem; position: relative; height: 100%; line-height: var(--header-hei); }
header.hr .gnb > li > a {  display: block;  font-size: 2rem; font-weight: 500; text-align: center;}
header.hr .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.hr .gnb .depth > li { display: block; width: 100%; line-height: 2; text-align: center; }
header.hr .gnb .depth > li > a { position: relative; font-size: 1.8rem; font-weight: 200; line-height: 1.8; }
header.hr .gnb .depth > li > a:hover { color: var(--color-point); font-weight: 400; }
header.hr .gnb::after { position: absolute; width: 100%; height: 300%;top: 0;left: 0; content: ''; z-index: -1; }

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

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

header.hr.on .inner,header.hr.scroll .inner{border-bottom: 1px solid var(--color-border);}
header.hr.on .gnb > li .depth { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
header.hr.on .gnb > li .depth a { color: var(--color-txt); font-weight: 400; }
header.hr.on .gnb > li .depth a:hover { color: var(--color-point); font-weight: 500; }
/* header.hr.on,header.hr.scroll { filter: drop-shadow(1px 1px 4px rgba(0,0,0,.2)); } */
/* header.hr.on .gnb>li:hover,header.hr.scroll .gnb>li:hover {background: #094890;} */
/* header.hr.on .gnb>li:hover>.depth,header.hr.scroll .gnb>li:hover>.depth{background: linear-gradient(0deg, #372D82, #094890);} */
header.hr.on .gnb>li:hover>.depth a{color: #fff;}
/*header.hr.on .gnb > li:hover::after{
  position: absolute;
  content: '';
  bottom:0 ;
  left: 50%;
  transform: translateX(-50%);
  background-color: #fff;
  width: calc(100% - 3rem);
  height: 1px;
  z-index: 10;
 } */

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

@media all and (max-width:1240px) {
  header.hr .logo { width: 18.6rem; height: 4.3rem}
  header.hr .gnb > li > a { font-size: 1.8rem; }
  header.hr .gnb > li:not(:last-child) { margin-right: 4.8rem; }
  header.hr .gnb .depth > li > a { font-size: 1.6rem; }
  header.hr.on .gnb > li .depth { min-height: 15.6rem; }
  header.hr .laboratory { padding: .5rem 2rem; }
  header.hr .inner { padding: 0 calc(var(--inner-pd) /2 ); }
}
@media all and (max-width:1025px) {
  header.hr .gnb { display: none; }
  header.hr .laboratory { margin-left: auto; }

  /*헤더 메뉴 버튼*/
  header.hr .ham_menu_btn { display: grid; }
  header.hr.scroll .ham_menu_btn span { background-color: #000; }
}
@media all and (any-pointer:coarse) {
  header.hr .gnb { display: none; }

  /*헤더 메뉴 버튼*/
  header.hr .ham_menu_btn { display: grid; }
  header.hr.scroll .ham_menu_btn span { background-color: #000; }
  header.hr .call-wr{display: none;}
}
@media all and (max-width:768px) {
  header.hr .inner { padding: 0 var(--inner-pd); }
  header.hr .call-wr{display: none;}
}
@media all and (max-width:500px) {
  header.hr .laboratory { width: 11rem; }
  header.hr .ham_menu_btn{margin-left: 1rem;}
}

 /*모바일 메뉴*/
 .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: var(--color-point); overflow: hidden; opacity: 0; visibility: hidden; transition: .5s; z-index: 4; transform: translateX(100%); }
 .ham_menu a { color: #fff; }
 .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.3em; 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.5rem; font-weight: 600; }
 .ham_menu > ul > li > .gnb-depth { display: none; position: relative; padding:1.5rem 2rem;background: rgba(255, 255, 255, 0.11); font-size: 2rem; }
 .ham_menu > ul > li > .gnb-depth a { display: block; line-height: 2; font-weight: 200; }
 /* .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:after,.ham_menu > ul > li:before {display: none !important}

.ham_menu .call-wr{margin-top: 2.5rem;border: 1px solid #fff;padding: 1rem 2rem;justify-content: center;border-radius: 2rem;font-weight: 400;}
.ham_menu .call-wr .icon{ filter: invert(1);margin-right: 1rem;}




/*풋터*/
footer.ft{padding: 7.4rem 0 5rem;border-top: 1px solid #B0B0B0;}
footer.ft .inner{width: 100%; padding: var(--header-pd);}
footer.ft .logo{padding-bottom: 3rem;width: 21.5rem}
footer.ft strong, footer.ft .f-txt{font-size: 1.4rem;color: #858585;}
footer.ft strong{display: inline-block;margin-right: 1rem;}
footer.ft .f-txt{font-weight: 400;}
footer.ft .ft-list{padding-bottom: 2.6rem;}
footer.ft .ft-list > li, footer.ft .ft-list2 > li{display: flex;align-items: center;}
footer.ft .ft-list > li:not(:last-child){padding-bottom: .8rem}
footer.ft .ft-list .line{display: inline-block; margin: 0 .8rem;}
footer.ft .ft-list2 > li:not(:last-child){margin-right: 1rem;}

footer.ft .ft-btm{margin-top: .4rem;}
footer.ft .ft-btm > li:not(:last-child){padding-bottom: .8rem}

footer.ft #ftAdm {padding-top: 1rem;display: flex;align-items: center;justify-content: flex-start;}
footer.ft #ftAdm li:not(:last-child) {margin-right: .8rem}
footer.ft #ftAdm li a { display: inline; padding: .4rem .6rem; border: 1px solid #797979; border-radius: 1em; font-size: 1.1rem; color: #797979;font-weight: 500}


/*탑 버튼*/
#top_btn { display: flex;align-items: center;justify-content: center;position:fixed; bottom:20px; right: 3rem; width: 70px; height:70px; 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-outlined{font-size: 30px}
#top_btn.on { opacity: 1; }
/* #top_btn:hover { border-color:#fff; background:#fff; } */
#top_btn.nofixed { bottom: 30rem; }


.mo-img{display: none}

 @media all and (max-width:768px) {
  .pc-img, .btn-img{display: none !important}
  .mo-img{display: inline-block;}
  #top_btn {width: 50px;height: 50px;right: 2rem;}
  #top_btn .material-symbols-outlined{font-size: 24px;}
 }




 @media all and (max-width:768px) {
   footer.ft{padding: 5rem 0}
 .ft-list2{flex-direction: column;align-items: flex-start !important;}
 footer.ft .ft-list > li, footer.ft .ft-list2 > li{align-items: flex-start;}
 footer.ft .ft-list2 > li:not(:last-child){margin-right: 0}
 footer.ft .f-txt br.br_mo{display: inline-block;}
 footer.ft .ft-list .line{display: none}
  footer.ft .ft-list > li:not(:last-child), footer.ft .ft-list2 > li:not(:last-child){padding-bottom: 1.5rem}
  footer.ft strong, footer.ft .f-txt{font-size: 1.8rem;line-height: 21px;}
}