@charset "UTF-8";


/* Heading */
.objHeading_h2 {position: relative; display: inline-block; margin-top: 50px; font-family:'Noto Medium'; font-size: 30px; letter-spacing: -0.5px; line-height: 1.2; color: #121212;}
.objHeading_h3 {position: relative; display: block; margin-top: 30px; font-family:'Noto Medium'; line-height: 1.2; font-size: 22px; letter-spacing: -0.5px; color: #008395;}
.objHeading_h4 {position: relative; display: block; margin-top: 30px; font-family: 'Noto Medium'; font-size: 20px; line-height: 1.2; letter-spacing: -0.5px; color: #121212;}
.objHeading_h5 {position: relative; display: block; margin-top: 30px; padding-left: 20px; font-family: 'Noto Medium'; font-size: 18px; line-height: 1.2; letter-spacing: -0.5px; color: #002d56;}
.objHeading_h5::before {content: ''; position: absolute; left: 0; top: 7px; width: 9px; height: 9px; background: #002d56; border-radius: 100%;}


/* List Type */
.con-list1 > ul > li {position: relative; margin: 12px 0 0 0; padding-left: 20px; font-family: 'Noto Regular'; font-size: 18px; line-height: 1.5; letter-spacing: -0.5px; color: #666;}
.con-list1 > ul > li::before {content: ''; position: absolute; left: 0; top: 11px; width: 5px; height: 5px; background: #002d56; border-radius: 100%;}
.con-list1 > ul > li strong {color: #002d56;}

@media all and (max-width: 660px) {
  .con-list1 > ul > li {font-size: 15px; }
  .con-list1 > ul > li::before {top: 9px;}
}

/* Align */
.align-r {text-align: right;}
.align-c {text-align: center;}
.align-l {text-align: left;}

/* Point Color */
.c1 {color: #006acb;}
.c2 {color: #e63b53;}
.c3 {color: #002d56;}
.c4 {color: #a78258;}
.c5 {color: #0b3274;}
.c6 {color: #121212;}
.b1 {font-family: 'Noto Medium';}
.b2 {font-family: 'Noto Bold';}
.c_gray {color:#666;}

/*조직도테이블코딩
.iucf_org {width: 100%;}
.org_01 {background-color: #002d56;color:#ffffff}
.org_02 {background-color: #ffffff;color:#002d56; border:2px solid #002d56;height: 40px;}
.org_03 {background-color: #a78258;color:#ffffff;height: 40px;}
.org_04 {background-color: hsl(31, 49%, 91%);color:#333;border:1px solid #a78258;height: 40px;}
.org_05 {background-color: #ffffff;color:#002d56; border:1px solid #a78258;height: 40px;;text-align:left}
.org_06 {background-color: #ebe8df;color:#002d56;margin-left:5px;height: 40px;border-right:3px #fff solid;}
table.iucf_org  tr td:first-child  {background-image: url("https://dep.hufs.ac.kr/sites/iucf/images/common/line_bg.png"); background-repeat: repeat-y;  background-position: 10px center;}
th.org_06:last-child {border:none;}
.org_line{background-image: url("https://dep.hufs.ac.kr/sites/iucf/images/common/line_bg.png"); background-repeat: repeat-y;  background-position: center top;}
.org_line_10{background-image: url("https://dep.hufs.ac.kr/sites/iucf/images/common/line_bg.png"); background-repeat: repeat-y;  background-position: 10px top;}
.org_line2{background-image: url("https://dep.hufs.ac.kr/sites/iucf/images/common/line_bg.png"); background-repeat: repeat-x;  background-position: 10px center;}
.org_line3{background-image: url("https://dep.hufs.ac.kr/sites/iucf/images/common/line_bg3.png"); background-repeat: no-repeat; background-position: 10px center;}
.org_line4{background-image: url("https://dep.hufs.ac.kr/sites/iucf/images/common/line_bg4.png"); background-repeat: no-repeat; background-position: 10px center;}
.org_line5{background-image: url("https://dep.hufs.ac.kr/sites/iucf/images/common/line_bg5.png"); background-repeat: no-repeat; background-position: left center;}*/


/*연구비중앙관리>절차*/
.flow_list > li {display: block;width: 100%;}
.flow_part {display: flex;flex-direction: row;flex-wrap: nowrap;border:1px #ccc solid;align-items: center;background-color:#f1f1f1;}
.flow_part > li:first-child {width:25%;font-size:1.1em;font-weight: bold;text-align: center;padding:10px;}        
.flow_part > li:first-child span{display:inline-block;margin:10px;color:#333;}
.flow_part > li:last-child {width:75%;padding:0 20px 15px 20px;border-left:1px solid #ccc;background-color:#fff}
.flow_arrow {text-align: center;padding-top:10px;}
.small_ti {font-weight: bold;margin-top:15px;margin-bottom:10px;}
.flow_ico {padding-top:10px;}



/* 이용절차 */
.step-diag ul {position: relative; display: flex; justify-content: space-around; gap: 0 23px; align-items: center; padding-bottom: 65px;}
.step-diag ul::after {content: ''; position: absolute; left: 0; bottom: 85px; z-index: -1; width: 100%; height: 1px; background: #0064aa;}
.step-diag li {position: relative;}
.step-diag.row5 li {width: 20%;}
.step-diag.row6 li {width: 16.666%;}
.step-diag li::after {content: ''; position: absolute; right: 0; bottom: 16px; width: 8px; height: 10px; background: url('../../images/sub/arrow-step2.jpg') no-repeat center;}
.step-diag li:last-child::after {display: none;}
.step-diag li.color {background: #03499a; border: 2px solid #03499a;}
.step-diag li.color .ico .on {display: none;}
.step-diag li.color .ico .on {display: inline-block;}
.step-diag li.color .ico .off {display: none;}
.step-diag li.color .num {color: #fff;}
.step-diag .box {text-align: center;}
.step-diag .desc {position: relative; display: flex; align-items: center; justify-content: center; width: 140px; height: 140px; margin: 0 auto; margin-bottom: 10px; background: #cceaff; border-radius: 100%; font-family: 'Noto Medium'; font-size: 18px; line-height: 1.4; color: #0f4367;}
.step-diag .desc::after {content: ''; position: absolute; left: 50%; top: 99%; width: 19px; height: 10px; background: url('../../images/sub/arrow-step.jpg') no-repeat center; transform: translate(-50%, 0);}
.step-diag .num {display: inline-block; width: 40px; height: 40px; margin-top: 10px; background: #ffffff; border-radius: 100%; font-family: 'Play Bold'; font-size: 16px; border: 2px solid #116eb0; line-height: 35px; color: #0064aa;}
.step-diag .title {position: absolute; left: 50%; top: 100%; width: auto; padding-top: 10px; font-family: 'Noto Regular'; font-size: 14px; text-align: center; color: #666; transform: translate(-50%, 0); white-space: nowrap; line-height: 1.3; color: #808080;}
.step-diag-list img {display: inline-block; margin-right: 18px; vertical-align: middle;}

@media all and (max-width: 860px) {
  .step-diag ul {flex-wrap: wrap; padding-bottom: 0;}
  .step-diag li {width: 31% !important; margin: 0 0 60px 0;}
  .step-diag li::after {display: none;}
  .step-diag ul::after {display: none;}
}


           
/* 예약현황 */
.gra.style1{border: 1px solid #999; margin-bottom:50px; height:200px;background: url(/sites/hufstmp01/images/common/graback.jpg) no-repeat;
background-size:cover;width: 98%;margin: 0 auto;}
.gra.style1 .gra_menu {
    position: relative;
    width: 33.333333%;
    float: left;
    height: 198px;
    text-align: center;
    display: block;
    background: linear-gradient(120deg,rgba(256,256,256,.5), rgba(256,256,256,58));
    padding: 50px 10px;
}
.gra.style1 .gra_menu h1{letter-spacing: -0.15rem; color: #043e9d;font-size: 1.5rem; line-height:2rem;height: 70px;
    font-weight: 600;}
.gra.style1 .gra_menu h1 strong{color:#3576a3;}

.gra.style1 .gra_menu span{font-size: 0.9rem;
    text-transform: uppercase;
    display: block;
    color: #000;
    width: 85%;
    margin: 0 auto;
    margin-top: 20px;}
.gra.style1 .gra_menu2 {
    position: relative;
    width: 50%;
    float: left;
    height: 225px;
    font-size: 0px;
}
.gra.style1 .gra_menu img {
    
    display: block;
    text-align: center;
    margin: 0 auto;margin-top:65px; height:50px;
}
.gra.style1 .gra_menu .content-part {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 50%);
  text-align: center;
  z-index: 1;
  transition: all 0.3s ease;
  opacity: 0;
}
.gra.style1 .gra_menu .content-part .name {
  margin-bottom: 8px;
  font-size: 22px;letter-spacing: -0.15rem;
}
.gra.style1 .gra_menu .content-part .name a {
  color: #ffffff;
}
.gra.style1 .gra_menu .content-part .name a:hover {
  color: #fff;
}
.gra.style1 .gra_menu .content-part .gra_subtitle {
  color: #02e7fb;
  margin-bottom: 16px; font-size:12px; text-transform:uppercase;
  display: block;
}
.gra.style1 .gra_menu .content-part .gra_link li {
  display: inline;
  margin-right: 35px;
}

.gra.style1 .gra_menu .gra_link {
    bottom: 50px;
    position: absolute;
    left: 50%;
    margin-left: -30px;
}

.gra.style1 .gra_menu .content-part .gra_link {
	position:static;
    margin-left: 0px;
}
.gra.style1 .gra_menu .gra_link li a {
  display: inline-block;
  color: #000;font-size: 13px;
    border: 1px dotted #000;
    padding: 5px 15px 5px 15px;
}
.gra.style1 .gra_menu .content-part .gra_link li a {
  display: inline-block;
  color: #ffffff;font-size: 13px;
    border: 1px solid #fff;
    padding: 5px 15px 5px 15px;
}
.gra.style1 .gra_menu .content-part .gra_link li a:hover { background-color:rgba(0,0,0,.5);
}
.gra.style1 .gra_menu .content-part .gra_link li:last-child {
  margin: 0;
}
.gra.style1 .gra_menu:after {
  position: absolute;
  content: '';
  left: 50%;
  top: 50%;
  transform: translate(-50%, 100%) scale(0.1);
  background: #21a7d0;
  opacity: 0;
  border-radius: 3px;
  transition: all 0.3s ease;
}


.gra.style1 .gra_menu:hover .content-part {
  transform: translate(-50%, -50%);
  opacity: 1;
}
.gra.style1 .gra_menu:hover:after {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}


.gra.style1.orange-color .gra_menu::after {
    background:#002d77;
}

.gra.style1 .gra_menu .content-part .name {
    margin-bottom: 8px;
    font-size: 1.5rem; margin-top:-50px; line-height:2rem;
}
 
.gra.style1 .gra_menu .content-part {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 50%);
    text-align: center;
    z-index: 1;
    transition: all 0.3s ease;
    opacity: 0;
}