@charset "utf-8";

/* 구분 start -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {
	
.Introduction {width: 100%; height: 100vh; float: left; padding: 0px 0px}
.Introduction .inner{width: 1250px; margin: 0px auto;  grid-template-columns:380px auto ;display: grid;  grid-gap: 50px }
.Introduction .inner .in01 {width: 380px; float: left;  height: 570px;  border-radius: 15px; background-color: #EDF1F5; position:sticky; left: 0px; top: 100px}
.Introduction .inner .in01 img.view{position: absolute; left: 0px; top: 0px;}
.Introduction .inner .in01 img.ov_img{position: absolute; left: 0px; top: 0px; display: none}

.Introduction .inner .in01_m {width: 100%; float: left;  height: 570px; position: relative; border-radius: 15px; background-color: #EDF1F5; display: none}
.Introduction .inner .in01_m img.view{position: absolute; left: 0px; top: 0px;}
.Introduction .inner .in01_m img.ov_img{position: absolute; left: 0px; top: 0px; display: none}


}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
}
/**** 모바일 ****/
@media only all and (max-width:767px) {
	
.Introduction {width: 100%; float: left; padding: 20px 20px}
.Introduction .inner{width: 100%; float:left;   }
.Introduction .inner .in01 {width: 100%; float: left;  height: 350px; position: relative; border-radius: 15px; background-color: #EDF1F5;  display: flex;  justify-content: center;  align-items: center; margin-bottom: 20px; overflow: hidden; display: none}
.Introduction .inner .in01 img.view{position: absolute; left: 50%; top: 0px; margin-left: -130px; width:250px; }
.Introduction .inner .in01 img.ov_img{position: absolute; left: 50%; top: 0px; margin-left: -130px; width: 250px; display: none}
.Introduction .inner .in01_m {width: 100%; float: left;  height: 350px; position: relative; border-radius: 15px; background-color: #EDF1F5;  display: flex;  justify-content: center;  align-items: center; margin-bottom: 20px; overflow: hidden}
.Introduction .inner .in01_m img.view{position: absolute; left: 50%; top: 0px; margin-left: -130px; width:250px; }
.Introduction .inner .in01_m img.ov_img{position: absolute; left: 50%; top: 0px; margin-left: -130px; width: 250px; display: none}


}
/**** 모바일2 ****/
@media only all and (max-width:400px) {
}
/* 구분 //end -----------------------------------*/

.Introduction .inner .in02 {width: 100%; float: left; position: relative;}

/* 구분 start -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {

.intro_topstidky{width: 100%; float: left; position: sticky; top: 0px; left: 0px;  background-color: #fff; padding-top: 100px;z-index:1}
	
.intro_title{width: 100%; float: left; position: sticky; top: 0px; left: 0px; margin-bottom: 30px; background-color: #fff}
.intro_title .tit{width:auto!important; float: left; padding-right: 50px; font-size: 26px; color: #333; font-family: 'NanumSquareAcb'; position: relative}
.intro_title .tit:before{width:40px; height: 40px; position: absolute; right: 0px; top: -10px; content: "";  background: url("../../images/main/main_logo.png")no-repeat; background-size: 39px;  }


.intro_title .tit em{color: #000000; font-family: 'NanumSquareAceb'; }


.intro_title .tit{width:auto!important; float: left; padding-right: 50px; font-size: 26px; color: #333; font-family: 'NanumSquareAcb'; position: relative}

.intro_title  .btn{width:auto!important;position: absolute; right: 0px; top: -10px; border-radius: 50px; background-color: #cca37f; color: #fff; font-size: 16px; padding: 10px 55px 10px 15px;}


.intro_title  .btn:before{position: absolute; right: 10px; top: 10px; content: "\eb6e";   font-family: unicons-line; font-size: 30px; color: #fff; }

.intro_title_m{display: none}
	
}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
}
/**** 모바일 ****/
@media only all and (max-width:767px) {
	
	
.intro_title{display: none}
.intro_title_m{width: 100%; float: left; position: relative; margin-bottom:70px; }

.intro_title_m .tit{width:auto!important; float: left; padding-left: 45px; font-size: 18px; color: #333; font-family: 'NanumSquareAcb'; position: relative}

.intro_title_m .tit:before{width:40px; height: 40px; position: absolute; left: 0px; top: -10px; content: "";  background: url("../../images/main/main_logo.png")no-repeat; background-size: 100%; }


.intro_title_m .tit em{color: #000; font-family: 'NanumSquareAceb'; }


.intro_title_m  .btn{width:100%!important;position: absolute; left: 0px; top: 40px; border-radius: 5px; background-color: #cca37f; color: #fff; font-size:16px!important; padding: 10px 45px 10px 20px;}


.intro_title_m  .btn:before{position: absolute; right: 15px; top:10px; content: "\eb6e";   font-family: unicons-line; font-size:25px; color: #fff; }




}
/**** 모바일2 ****/
@media only all and (max-width:400px) {
}
/* 구분 //end -----------------------------------*/


/* 구분 start -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {
	.intro_tab{width: 100%; float: left; position: relative; margin-bottom: 10px}
	.intro_tab ul{width: 100%; float: left; position: relative; display: grid; grid-template-columns: repeat(8, 1fr); gap:2px;}

.intro_tab ul li{width: 100%; float: left; padding: 10px 0px; border-radius: 6px; background-color: #dfe5ea; text-align: center; color: #333; font-size: 15px;  cursor: pointer}
.intro_tab ul li.on{background-color: #014099; color: #fff }

}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
}
/**** 모바일 ****/
@media only all and (max-width:767px) {
	
	.intro_tab{width: 100%; float: left; position: relative; margin-bottom: 10px}
	.intro_tab ul{width: 100%; float: left; position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap:2px;}

.intro_tab ul li{width: 100%; float: left; padding: 10px 0px; border-radius: 4px; background-color: #dfe5ea; text-align: center; color: #333; font-size: 13px;  cursor: pointer}
.intro_tab ul li.on{background-color: #014099; color: #fff }

}
/**** 모바일2 ****/
@media only all and (max-width:400px) {
}



.intro_tab ul li.on.tab_id1{background-color: #ffad60!important;  }
.intro_tab ul li.on.tab_id2{background-color: #75D8B4!important;  }
.intro_tab ul li.on.tab_id3{background-color: #9892EC!important;  }
.intro_tab ul li.on.tab_id4{background-color: #3288d6!important;  }
.intro_tab ul li.on.tab_id5{background-color: #69bad4!important;  }
.intro_tab ul li.on.tab_id6{background-color: #BBD662!important;  }
.intro_tab ul li.on.tab_id7{background-color: #e8c357!important;  }



/* 구분/* 구분 start -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {
	
.intro_listbox{width: 100%; float: left; border-top: 3px solid #333; min-height: calc(100vh - 200px)}
.intro_listbox .thead{width: 100%; float: left;display: grid; grid-template-columns: 35% auto  120px 80px;; border-bottom: 1px solid #ccc;  background-color: #f7f7f7}

.intro_listbox .thead .th{width: 100%; float: left;padding: 15px 0px;  font-size: 16px; color: #666; font-family: 'NanumSquareAcb'; }

.intro_listbox .thead .th:first-child{padding-left: 15px }


.intro_listbox .tbody{width: 100%;  float: left;  overflow-x: hidden; display: flex; flex-direction: column;}
.intro_listbox .tbody .tr{width: 100%; float: left;display: grid; grid-template-columns: 35% auto  120px 80px; border-bottom: 1px solid #ccc;}

.intro_listbox .tbody .tr .td{width: 100%; float: left;padding: 15px 0px;  font-size: 16px; color: #666; border-bottom: 1px solid #eee;  display: flex;
  align-items: center; height: 100%;   }

.intro_listbox .tbody .tr .td:first-child{padding: 15px 15px; font-size: 17px ;font-family: 'NanumSquareAcb'; }
	.intro_listbox .tbody .tr .td:nth-child(2){padding-right: 20px;word-wrap: break-word;
 word-break: keep-all; }
	
.intro_listbox .tbody .tr .td .intx{width: 100%; float: left; }
.intro_listbox .tbody .tr .td .intx .tx1{width: 100%; float: left; margin-bottom: 5px; word-wrap: break-word;word-break: keep-all;  }
.intro_listbox .tbody .tr .td .intx .tx2{width: 100%; float: left; }



.intro_listbox .tbody .th .td.t_center{width: 100%; float: left; text-align: center}
	
.intro_listbox .tbody .tr .td .um{width:auto; float: left;display: none}

}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
}
/**** 모바일 ****/
@media only all and (max-width:767px) {
	
	.intro_listbox{width: 100%; float: left; border-top: 3px solid #333}
.intro_listbox .thead{width: 100%; float: left;display: grid; grid-template-columns: auto auto  120px 80px;; border-bottom: 1px solid #ccc;  background-color: #f7f7f7; display: none}

.intro_listbox .thead .th{width: 100%; float: left;padding: 15px 0px;  font-size: 16px; color: #666; font-family: 'NanumSquareAcb'; }

.intro_listbox .thead .th:first-child{padding-left: 15px }


.intro_listbox .tbody{width: 100%; float: left; overflow-y: auto; overflow-x: hidden;position:relative ; display: flex; flex-direction: column;}
.intro_listbox .tbody .tr{width: 100%; float: left;display: grid; border-bottom: 1px solid #ccc;position:relative; }

.intro_listbox .tbody .tr .td{width: 100%; float: left;padding: 15px 10px 15px;  font-size:13px; color: #666;   display: flex;
  align-items: center; height: 100%;   }

.intro_listbox .tbody .tr .td:first-child{ font-size: 16px ;font-family: 'NanumSquareAcb';padding: 20px 10px 0px;  }
.intro_listbox .tbody .tr .td:nth-child(2){ font-size: 13px ;font-family: 'NanumSquareAcb';padding: 5px 10px 15px;  }
	
.intro_listbox .tbody .tr .td:nth-child(3){ width: auto; position: absolute; right:0px; top: -0px;}
.intro_listbox .tbody .tr .td:nth-child(4){ width: auto;  position: absolute;  right:5px; top: -0px; display: none}



.intro_listbox .tbody .tr .td.t_center{width: 100%; float: left; text-align: center}

.intro_listbox .tbody .tr .td .um{width:auto; float: left;display: none}

}
/**** 모바일2 ****/
@media only all and (max-width:400px) {
}
/* 구분 //end -----------------------------------*/ 





/* 구분 start -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {
.btn_go1{width:auto; float: left; text-align: center; padding: 7px 40px 7px 15px; border-radius: 4px; background-color: #77b75d; position: relative; font-size: 15px; color: #fff; cursor: pointer; transition: all 0.5s;-moz-transition: all 0.5s; -webkit-transition: all 0.5s;-o-transition: all 0.5s; 
}
.btn_go1:before{font-size: 15px; color: #fff;content: "상세보기"; }
.btn_go1:after{position: absolute; right:7px; top:7px; color: #fff; font-size:25px;content: "\eb6e";   font-family: unicons-line;}
.btn_go1:hover{ background-color: #488231; }

.btn_go1_2{width:auto; float: left; text-align: center; padding: 7px 40px 7px 15px; border-radius: 4px; background-color: #ffc8c8; position: relative; font-size: 15px; color: #fff; cursor: pointer; transition: all 0.5s;-moz-transition: all 0.5s; -webkit-transition: all 0.5s;-o-transition: all 0.5s; 
}
.btn_go1_2:before{font-size: 15px; color: #fff;content: "바로보기"; }
.btn_go1_2:after{position: absolute; right:7px; top:7px; color: #fff; font-size:25px;content: "\eb6e";   font-family: unicons-line;}
.btn_go1_2:hover{ background-color: #f59bb2; }	
	
	
	
.btn_go2{width:auto; float: left; text-align: center; padding: 7px 40px 7px 15px; border-radius: 4px; background-color: #014099; position: relative; font-size: 15px; color: #fff; ; cursor: pointer; transition: all 0.5s;-moz-transition: all 0.5s; -webkit-transition: all 0.5s;-o-transition: all 0.5s; 
}
.btn_go2:before{font-size: 15px; color: #fff;content: "QR";}
.btn_go2:after{position: absolute; right:7px; top:7px; color: #fff; font-size:20px;content: "\ec4e";   font-family: unicons-line;}
.btn_go2:hover{ background-color: #0F2D57; }

}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
}
/**** 모바일 ****/
@media only all and (max-width:767px) {
.btn_go1{width:40px; height: 40px;  float: left; text-align: center; padding: 7px 20px 7px 7px; border-radius:50px; background-color: #77b75d; position: relative; font-size: 13px; color: #fff; cursor: pointer; transition: all 0.5s;-moz-transition: all 0.5s; -webkit-transition: all 0.5s;-o-transition: all 0.5s; 
}
.btn_go1:before{font-size: 15px; color: #fff;content: "";   }
.btn_go1:after{position: absolute; right:0px; top:0px; width:40px; height: 40px; display: flex;  justify-content: center;  align-items: center;color: #fff; font-size:25px;content: "\ebb5";   font-family: unicons-line;}
.btn_go1:hover{ background-color: #488231; }
	
.btn_go1_2{width:40px; height: 40px;  float: left; text-align: center; padding: 7px 20px 7px 7px; border-radius:50px; background-color: #ffc8c8; position: relative; font-size: 13px; color: #fff; cursor: pointer; transition: all 0.5s;-moz-transition: all 0.5s; -webkit-transition: all 0.5s;-o-transition: all 0.5s; 
}
.btn_go1_2:before{font-size: 15px; color: #fff;content: "";  }
.btn_go1_2:after{position: absolute; right:0px; top:0px; width:40px; height: 40px; display: flex;  justify-content: center;  align-items: center;color: #fff; font-size:25px;content: "\ebb5";   font-family: unicons-line;}
.btn_go1_2:hover{ background-color: #f59bb2; }	
	
	
	

.btn_go2{width:40px; height: 40px; float: left; text-align: center; padding: 7px 20px 7px 7px; border-radius:50px; background-color: #014099; position: relative; font-size: 13px; color: #fff; ; cursor: pointer; transition: all 0.5s;-moz-transition: all 0.5s; -webkit-transition: all 0.5s;-o-transition: all 0.5s; display: none
}
.btn_go2:before{font-size: 15px; color: #fff;content: ""; }
.btn_go2:after{position: absolute; right:0px; top:0px; width:40px; height: 40px; display: flex;  justify-content: center;  align-items: center;color: #fff; font-size:20px;content: "\ec4e";   font-family: unicons-line;}
.btn_go2:hover{ background-color: #0F2D57; }

}
/**** 모바일2 ****/
@media only all and (max-width:400px) {
}
/* 구분 //end -----------------------------------*/




.info_id1 .tr  .td  .btn_go1{background-color: #ffad60!important; }
.info_id1 .tr  .td  .btn_go1:hover{ background-color: #EB9340!important; }

.info_id2 .tr  .td  .btn_go1{background-color: #75D8B4!important; }
.info_id2 .tr  .td  .btn_go1:hover{ background-color: #51BC95!important; }


.info_id3 .tr  .td  .btn_go1{background-color: #9892EC!important; }
.info_id3 .tr  .td  .btn_go1:hover{ background-color: #8B84DF!important; }

.info_id4 .tr  .td  .btn_go1{background-color: #3288d6!important; }
.info_id4 .tr  .td  .btn_go1:hover{ background-color: #0D5BAF!important; }


.info_id5 .tr  .td  .btn_go1{background-color: #69bad4!important; }
.info_id5 .tr  .td  .btn_go1:hover{ background-color: #41A3C2!important; }

.info_id6 .tr  .td  .btn_go1{background-color: #BBD662!important; }
.info_id6 .tr  .td  .btn_go1:hover{ background-color: #9EB74C!important; }


.info_id7 .tr  .td  .btn_go1{background-color: #e8c357!important; }
.info_id7 .tr  .td  .btn_go1:hover{ background-color: #e8c357!important; }


/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  padding-top: 15%;
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 5px auto; /* 15% from the top and centered */
  border: 1px solid #888;
  width: 350px; height: 350px;; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
  /* Position it in the top right corner outside of the modal */
  position: absolute;
  right: 25px;
  top: 0;
  color: #000;
  font-size: 35px;
  font-weight: bold;
}

/* Close button on hover */
.close:hover,
.close:focus {
  color: red;
  cursor: pointer;
}

/* Add Zoom Animation */
.animate {
  -webkit-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
  from {-webkit-transform: scale(0)}
  to {-webkit-transform: scale(1)}
}

@keyframes animatezoom {
  from {transform: scale(0)}
  to {transform: scale(1)}
}