@media screen and (min-width: 1450px) { /*클때*/
	.main_visual { background:#86c1df url('/dgn/ver02/images/kpffc_img_02.jpg') no-repeat  center 100px ;   padding:100px  0px 0 0px;     width:100%;  height: 405px;  margin: 0 0px; } /*padding: 100px 0px 0 0px;    width: calc(100% - 160px);   margin: 0 80px;*/
	 	
	.img_visual { width: 100%; max-width: 1270px; margin: 0 auto;   height: 403px; background:url('/dgn/ver02/images/kpffc_img_02.png') no-repeat  center 95px ;    position: relative;   }
	
	.text_box .txt_01 {  display: none;  }

	.text_box .txt_02 {  display: none; }
}


@media screen and (max-width: 1450px) {
	.main_visual {background: #86c1df url('/dgn/ver02/images/kpffc_img_02.jpg') no-repeat  center 100px ;  padding: 100px 0px 0 0px;    width:100%; height: 405px;  margin: 0;    }
 
	.img_visual { width: 100%; max-width: 1270px; margin: 0 auto;   height: 403px; background:url('/dgn/ver02/images/kpffc_img_02.png') no-repeat  center 95px ; position: relative;   }
	
	
	.text_box .txt_01 {  display: none;  }

	.text_box .txt_02 {  display: none;  }
	
}

 @media screen and (max-width: 991px) {  /*아래 */
	.main_visual {background: #86c1df url('/dgn/ver02/images/kpffc_img_02.jpg') no-repeat  right bottom ; padding: 100px 0px 0 0px;    width:100%; height: 350px;   margin: 0; background-size: cover;  }
 
	.img_visual { width: 100%; max-width: 1270px; margin: 0 auto;  height: 350px;  background:url('/dgn/ver02/images/kpffc_img_02.png') no-repeat    center 95px;   background-size: 70%; position: relative;  }
	 
	.text_box .txt_01 {  display: none; }

	.text_box .txt_02 {   display: none;  }
}

  
@media screen and (max-width: 740px) {  /*아래 */
	.main_visual {background: #86c1df  ; padding: 100px 0px 0 0px;    width:100%; height: 350px;   margin: 0; background-size: cover;  }
 
	.img_visual { width: 100%; max-width: 1270px; margin: 0 auto;  height: 350px;  background:url('/dgn/ver02/images/kpffc_img_02_m.png') no-repeat  center 95px ;   background-size: 80%; position: relative;  }
	
	.text_box .txt_01 {  display:none;  }

	.text_box .txt_02 {   display: none;   }
}



 
.text_box .txt_01 span, .text_box .txt_02 span {display: none;  }
.text_box { text-align: center; padding: 18px 0 0 0;   }
 
.visual_box { text-align: center; }
.visual_box .btn_box {position: relative; margin: 0 auto; display: flex; flex-direction: row; justify-content: space-between; text-align: center; max-width: 300px;  width: 100%; overflow: hidden; padding-top: 250px;  }
.btn_sugang { background: #0a4593; width: 48%;  height: 42px;  font-size: 13px; font-weight: 500;  border: 0px ;  color: #fff; padding: 0px; border-radius: 25px; text-align: center;  letter-spacing: -1px; border: 2px solid #fff;   }
.btn_sugang i { padding-left: 10px; }
.btn_sugang_list { background: #0a4593;  width: 48%;  height: 42px;  font-size: 13px; font-weight: 500;  border: 0px ;  color: #fff; padding: 0px; border-radius: 25px; text-align: center;  letter-spacing: -1px;  border: 2px solid #fff; }
.btn_sugang_list i {padding-left: 10px; }

.btn_edu { background: #0a4593;  width: 48%;  height: 42px;  font-size: 13px; font-weight: 500;  border: 0px ;  color: #fff; padding: 0px; border-radius: 25px; text-align: center;  letter-spacing: -1px; border: 2px solid #fff;   }
.btn_edu i {padding-left: 10px; }

 

/*@media screen and (min-width: 1400px) {
.img_visual { width: 100%; max-width: 1270px; margin: 0 auto;   height: 320px; background:url('/dgn/ver02/images/img_keli_main02.png') no-repeat  right 140px ; background-size: 100%;  }
}*/


@media screen and (min-width: 992px) {
	
	/*.img_visual { width: 100%; max-width: 1270px; margin: 0 auto;   height: 400px; background:url('/dgn/ver02/images/img_keli_main02.png') no-repeat  right 20px ; background-size: none;  }*/
	.text_box { display: none;  text-align: center; padding: 90px 0 0 0;   }	
 
	.visual_box .btn_box {position: relative; margin: 0 auto; display: flex; flex-direction: row; justify-content: space-between; text-align: center; max-width: 410px;  width: 100%; overflow: hidden; padding-top: 300px;  }
	.btn_sugang { background: #0a4593; width: 48%;  height: 50px;  font-size: 16px; font-weight: 500;  border: 0px ;  color: #fff; padding: 0px; border-radius: 25px; text-align: center;  letter-spacing: -1px; border: 2px solid #fff;   }
	.btn_sugang i { padding-left: 10px; }
	.btn_sugang_list { background: #0a4593;  width: 48%;  height: 50px;  font-size: 16px; font-weight: 500;  border: 0px ;  color: #fff; padding: 0px; border-radius: 25px; text-align: center;  letter-spacing: -1px;  border: 2px solid #fff; }
	.btn_sugang_list i {padding-left: 10px; }

	.btn_edu { background: #0a4593;  width: 48%;  height: 50px;  font-size: 16px; font-weight: 500;  border: 0px ;  color: #fff; padding: 0px; border-radius: 25px; text-align: center;  letter-spacing: -1px; border: 2px solid #fff;   }
	.btn_edu i {padding-left: 10px; }

	 
	}




.content {background: #f8f8f8; width:100%; }

	.notice { width: 90%;  margin: 0 auto; overflow: hidden; padding:0px 0px 38px 0px;   }
	.notice .title_box {width: 100%; float: none; padding: 18px 0px;  }
	.notice .title_box a {text-decoration: none; position: relative; }
	.notice .title_box a  .sub_title{ position: relative;  display: none;   font-size: 30px; color: #374047; font-weight: 400;  }
	.notice .title_box a h3{ position: relative;  display: block;  font-size: 20px; color: #374047; font-weight: 900;  }
	.notice .title_box a h3 .icon_box{ position: relative;  display: inline-block; width: 44px; height: 44px;   background: none;  }
	.notice .title_box  .btn_notice {position: relative;  display: block; background: url('/dgn/ver02/images/sub_menu_arrow.png') no-repeat right 23px; margin-top: 10px; padding-right: 10px; width: 100px;       }
	.notice .title_box  .btn_notice span { display: inline-block; color: #979597; font-size: 14px; background: url('/dgn/ver02/images/sub_menu_arrow.png') no-repeat 55px;     }
	.notice .title_box  .btn_notice:hover span { color: #d6000f;   }
	.notice .tableA_main {float:none; width: 100%; margin: 0 auto;  display: block;    }
	.notice .tableA_main li { display: block;  width:calc(100% - 36px ); padding: 16px;  height:auto;  border: 1px solid #dbdbdb; border-radius: 6px;  margin-top: 10px;     }
	.notice .tableA_main li a {text-decoration: none;  }  /**	box-shadow: 0 0 1px 3px rgba(111, 111, 111, 0.02); box-shadow: 0 0 0 3px -moz-mac-focusring; **/ 
	.notice .tableA_main li a {display: block; width: 100%; height: auto;  text-align: left; position: relative; }
	.notice .tableA_main li a .num span { display: inline-block; color: #20ae9b; font-size: 14px; position: relative; }
	.notice .tableA_main li.new a .num  span{ background: url('/dgn/ver02/images/new_icon.png') no-repeat left; padding-left: 37px;  position: relative; }
	.notice .tableA_main li a .title  {color: #000; font-size: 18px; line-height: 24px; position: relative; padding-top: 8px;  }
	.notice .tableA_main li a:hover .title  {color: #d6000f; }
	.notice .tableA_main li a .day {color: #979597; font-size: 14px; position: relative; padding-top: 8px;     }
 



@media screen and (min-width: 1280px) { 
 
	.notice { width: 100%; max-width: 1270px; margin: 0 auto; overflow: hidden; padding: 60px 0px 74px 0px;   }
	.notice .title_box {width: 20%; float: left; padding-top: 40px;  }
	.notice .title_box a { display: block; width: 100%; height: 100%;  position: relative;  text-decoration: none; }
	.notice .title_box a  .sub_title{ position: absolute; top: 0px; left: 0px;   display: block;   font-size: 32px; color: #374047; font-weight: 400; letter-spacing: -1px;   }
	.notice .title_box a h3{ position: absolute; top: 41px; left: 0px;  display: block;  font-size: 32px; color: #374047; font-weight: 900;  letter-spacing: -1px;  }
	.notice .title_box a h3 .icon_box{ position: absolute; top: -7px; left: 130px;  display: inline-block; width: 44px; height: 44px;   background: url('/dgn/ver02/images/notice_icon.png') no-repeat center;  }
	.notice .title_box  .btn_notice {position: absolute; top: 120px; left: 0px; display: block; background: url('/dgn/ver02/images/sub_menu_arrow.png') no-repeat 62px 4px;  padding-right: 10px; width: 100px;       }
	.notice .title_box  .btn_notice span { display: inline-block; color: #979597; font-size: 14px;   }
	.notice .tableA_main {float: left; width:calc(80% - 3px ); display: flex; flex-direction: row; justify-content:flex-start; align-items: stretch; padding: 0px 3px 0px 0px;    }
	.notice .tableA_main li { display: block; width: 26%; padding: 22px;  height: 160px;  border: 1px solid #dbdbdb; border-radius: 6px; margin-right: 5%;    }
	.notice .tableA_main li a {text-decoration: none;  }
	.notice .tableA_main li a {display: block; width: 100%; height: 100%; text-align: left; position: relative; }
	.notice .tableA_main li a .num span {color: #20ae9b; font-size: 14px; position: absolute; top: 10px; left: 0px; font-weight: 900;  }
	.notice .tableA_main li a .title  {color: #374047; font-size: 20px; line-height: 28px; position: absolute; top: 30px; left: 0px; letter-spacing: -1px;  font-weight: 900; }
	.notice .tableA_main li a .day { display: block;  color: #979597; font-size: 14px; position: absolute;  bottom: 5px; left: 0px;   background: url('/dgn/ver02/images/sub_menu_arrow.png') no-repeat 80px 4px;    }
	.notice .tableA_main li a .day i{ display:none;    }
 
}
 
	
/*@media screen and (min-width: 1450px) { 클때
	.callcenter_main { background: #4bc5cf; height: 240px;   width: calc(100% - 160px);  margin: 0 auto;  } }*/

.callcenter_main {  background:#f3eed5;   width:100%; height: auto; padding-bottom: 30px;  } /*background: linear-gradient(to right bottom, #21ceb5, #7dbde6);*/
.callcenter { width: 100%; max-width: 1270px; margin: 0 auto; overflow: hidden;  }
.callcenter div { float:left;  }
.callcenter .title_box{  display: none;  width: 90%; padding-left: 10%;  text-align: left; padding-top: 30px;   }
.callcenter .title_box .sub_title {  display:inline-block;  font-size: 20px; letter-spacing: -1px;  color: #374047; font-weight: 300;   }

.callcenter .title_box .sub_title02 { display:inline-block;  font-size: 20px; letter-spacing: -1px;  color: #374047; font-weight: 300;  background:none; padding: 10px 48px 10px 0px ;  }
.callcenter .title_box .sub_title03 { display: block;   font-size: 14px; color: #374047; margin-top: 0px;  font-weight: 400; text-indent: -999px; width: 321px; height: 45px;  background:  url('/dgn/ver02/images/img_keli_subtitle03.png') no-repeat left top;   }
.callcenter .callcenter_box{  width: 90%; padding-left: 10%;  text-align: left; padding-top: 30px;  overflow:hidden;  }
.callcenter .callcenter_box div {float: left; }
.callcenter .callcenter_box .box_01 { width: 100%; padding-bottom: 24px;   }
.callcenter .callcenter_box .box_01 > span { font-size: 20px; color: #424d54 }
.callcenter .callcenter_box .box_01 > span.title { display: block;  font-size: 14px; color: #424d54; font-weight: 400; padding-bottom: 6px;   }
.callcenter .callcenter_box .box_01 .phone span {display: inline-block; padding-right: 16px;  font-weight: 900; font-size: 20px;  }
.callcenter .callcenter_box .box_02, .callcenter .callcenter_box .box_03, .callcenter .callcenter_box .box_04 { width: 100%; color: #424d54; font-size: 16px; padding-bottom: 6px;    }

 .callcenter .callcenter_box .box_02 span, .callcenter .callcenter_box .box_03 span, .callcenter .callcenter_box .box_04 span {display: inline-block; padding-right: 8px; }


@media screen and (min-width: 1280px) { 
	.callcenter_main { 
	width:100%; height: 300px; padding: 25px 0px; } 
	.callcenter { width: 100%; max-width: 1270px; margin: 0 auto; overflow: hidden;  }
	.callcenter div { float: left;  }
	.callcenter .title_box{ display: block;  width: 32%; text-align: left; padding-top: 60px; padding-left: 0px;    }
	.callcenter .title_box .sub_title {  display: block;  font-size: 30px; letter-spacing: -2px;  color: #374047; font-weight: 400;   }
	.callcenter .title_box .sub_title02 { display:inline-block;  font-size: 30px; letter-spacing: -1px;  color: #374047; font-weight: 400;  background: url('/dgn/ver02/images/call_icon.png') no-repeat right; padding: 10px 48px 10px 0px ;  }
	.callcenter .title_box .sub_title02 .point { color: #004899; font-weight: 900; }
	.callcenter .title_box .sub_title03 { display: block;   font-size: 14px; color: #374047; margin-top: 14px;  font-weight: 300; line-height: 22px; width: 280px;  }
	.callcenter .callcenter_box{ position: relative;  width: 63%; height: 206px; text-align: left; padding: 0px 0px 0px 4%;     overflow:hidden; background: #fff; margin-top: 45px;  }
	.callcenter .callcenter_box div { }
	.callcenter .callcenter_box .box_01 {    padding-bottom: 40px; padding-top: 46px;   width: 100%;   }
	.callcenter .callcenter_box .box_01 > span { font-size: 30px; color: #004899;  }
	.callcenter .callcenter_box .box_01 > span.title { display: block;  font-size: 20px; color: #000; font-weight: 900; padding-bottom: 6px;   }
	.callcenter .callcenter_box .box_01 .phone span { display: inline-block;  font-weight: 300; font-size: 30px; line-height: 40px;  }
	.callcenter .callcenter_box .box_02 {   width: 33%; color:#848383; font-size: 16px; padding-bottom: 6px;  font-weight: 400; }
	.callcenter .callcenter_box .box_03  {  width: 33%; color:#848383; font-size: 16px; padding-bottom: 6px;  font-weight: 400;  }
	.callcenter .callcenter_box .box_04  {    width: 33%; color:#848383; font-size: 16px; padding-bottom: 6px;  font-weight: 400;  }  

	 .callcenter .callcenter_box .box_02 span, .callcenter .callcenter_box .box_03 span, .callcenter .callcenter_box .box_04 span {display: inline-block; padding-right: 8px; }
}

 


@keyframes text {
		0% {opacity: 0; transform: translateY(30px); }
		100% {opacity: 1; transform: translateY(0px); }	
		
	}



/****퀵메뉴 ***/
.quick_menu {display: none;  }
@media screen and (min-width: 1280px) { 
	.quick_menu { display: block;  position:fixed; top: 100px; right: 0px; width: 110px; height: 450px;   }
	.quick_menu  ul li { display: block; }
	.quick_menu  ul li a {text-decoration: none; display: block;  padding: 20px 0px 10px 0px;   height: 70px; border-bottom: 1px solid #2160a6; background: #004899; } 
	.quick_menu  ul li a:hover {background: #d6000f;  } 
	.quick_menu  ul li:nth-child(1) a .icon_box:after { content: '\f46d'; font-size: 20px; font-family: "Font Awesome 5 Free"; font-weight: 900;   }
	.quick_menu  ul li:nth-child(2) a .icon_box:after { content: '\f274'; font-size: 20px; font-family: "Font Awesome 5 Free"; font-weight: 900;  }
	.quick_menu  ul li:nth-child(3) a .icon_box:after { content: '\f083'; font-size: 20px; font-family: "Font Awesome 5 Free"; font-weight: 900;   }
	.quick_menu  ul li:nth-child(4) a .icon_box:after { content: '\f187'; font-size: 20px; font-family: "Font Awesome 5 Free"; font-weight: 900;   }
	.quick_menu  ul li:nth-child(5) a .icon_box:after { content: '\f46c'; font-size: 20px; font-family: "Font Awesome 5 Free"; font-weight: 900;    }
	
	.quick_menu  ul li a span { display: block;  color: #fff; font-size: 15px; letter-spacing: -1px;  line-height: 120%; text-align: center; margin-top: 10px;   }

}




.m_hide {display: none;  }
@media screen and (min-width: 1280px) { .m_hide {display: block ;  } }


/*******************************************gnb**************************************************/
.header.sub-header .pc-nav .menu-list>a,
.header:hover .pc-nav .menu-list>a,
.header.fixed .pc-nav .menu-list>a
{color:#333}
.header.sub-header .menu-btn .line,.header:hover .menu-btn .line,
.header.fixed .menu-btn .line,.header.sub-header .menu-btn .line:before,
.header:hover .menu-btn .line:before,
.header.fixed .menu-btn .line:before,
.header.sub-header .menu-btn .line:after,
.header:hover .menu-btn .line:after,
.header.fixed .menu-btn .line:after
{background-color:#11a381}
.header.sub-header .btn-search,
.header:hover .btn-search,
.header.fixed .btn-search
{background-image:url(/dgn/ver02/images/logo_kpffc_2.png)} /**/
.header.sub-header .logo .logo-img,
.header:hover .logo .logo-img,
.header.fixed .logo .logo-img
{background-image:url(/dgn/ver02/images/logo_kpffc_2.png)}
body.pc-nav-open{overflow:hidden}

.header
{position:relative;top:0;left:0;width:100%;-webkit-transition:all .4s;transition:all .4s;z-index:700}

.header.sub-header
{position:relative;height:70px}

@media screen and (min-width: 992px)
{.header.sub-header{height:90px}}

@media screen and (min-width: 992px)
{.header.is-hide .fixed-wrap{top:-90px !important}}

.header.fixed .fixed-wrap
{background-color:#fff;border-bottom:1px solid #ddd}

@media screen and (min-width: 992px)
{.header.fixed .header-inner{height:90px}.header.fixed .navBg{top:90px;border-top:0}.header.fixed .sub-menu-list-wrap{top:90px}.header.fixed .fixed-wrap{height:90px}}

.header.fixed.sub-header{position:relative !important}

.header .fixed-wrap{position:fixed;top:0;left:0;width:100%;height:100px;background-color:#fff;transition:all .4s}

/*pc용 메뉴 높이 */
@media screen and (min-width: 992px)
{.header .fixed-wrap{height:100px; background: #fff;     }.pc-nav-open .header .fixed-wrap:after{content:'';display:inline-block;position:absolute;bottom:0;left:0;width:100%;height:1px;border-bottom:1px solid #ddd;z-index:701}}

.header .fixed-wrap:hover{background-color:#fff}

.header .header-inner{position:relative;display:flex;justify-content:center;margin:0 auto;height:100px; background: #fff;}

@media screen and (min-width: 992px){.header .header-inner{height:90px;padding:0 15px;transition:height .4s}}

.header .logo{position:absolute;top:0%;left:15px;transform:translateY(-50%);width:100%;height:100px;z-index:701; }

@media screen and (min-width: 992px){.header .logo{width:310px; top: 65%; }}

@media screen and (min-width: 1325px){.header .logo{left:calc((100% - 1280px) / 2)}}

.header .logo .logo-img{display:block;  height:150px; background:#fff url(/dgn/ver02/images/logo_kpffc_2.png)  no-repeat left 90px/170px auto ; } /* width:100%;  max-width: 288px; no-repeat center/100% auto*/
.pc-nav-open .header .logo .logo-img{background-image:url(/dgn/ver02/images/logo_kpffc_2.png) no-repeat; }
.header .logo .logo-img span {display: inline-block; font-size: 12px; text-indent: -9999px;  } /* */

.header .navBg{display:none}


@media screen and (min-width: 992px)
{
	.header .logo .logo-img{display:block;width:80%; max-width: 288px; height:100%; background:url(/dgn/ver02/images/logo_kpffc_2.png)  no-repeat left 6px/84% auto; } /* width:100%;  no-repeat center/100% auto*/
	.header .navBg{display:block;position:absolute;left:0;top:90px;display:none;width:100%;height:245px;border-bottom:1px solid #ddd;border-top:1px solid #ddd;background-color:#fff;transition:top .4s;overflow:hidden}}

@media screen and (min-width: 992px)
{.header .bg-img{position:absolute;top:50px;right:0;width:508px;height:272px;background:#fff url(/views/res/imgs/common/menu-bg-img.jpg) no-repeat right bottom/contain}}@media screen and (min-width: 1310px){.header .bg-img{right:calc((100% - 1280px)/2 + 100px)}}

.pc-nav{display:none}

@media screen and (min-width: 992px)
{.pc-nav{display:flex; padding-top: 20px; padding-left: 0%;  }.pc-nav .menu-list-wrap{display:flex}.pc-nav .menu-list{position:relative;display:flex;justify-content:center;padding:0 19px}}

@media screen and (min-width: 992px) and (min-width: 1200px)
{.pc-nav .menu-list{padding:0; width:146px}}

/*pc용 */
@media screen and (min-width: 992px){.pc-nav .menu-list>a{position:relative;display:flex;align-items:center;justify-content:center;font-size:17.5px; text-decoration: none; letter-spacing:-1px;color:#374047; transition:color .4s;-webkit-transition:color .4s;cursor:pointer; font-weight: 900; }

.pc-nav .menu-list>a:after{content:"";display:inline-block;position:absolute;bottom:0;left:0;width:100%;height:3px;background-color:#d6000f;opacity:0;transition:opacity .4s}
body.search-nav-open .pc-nav .menu-list>a:after{content:none}.pc-nav .menu-list:hover>a:after{opacity:1}
.pc-nav .menu-list.on>a{color:#d6000f !important}.pc-nav .sub-menu-list-wrap{display:none;position:absolute;left:0;top:90px;width:100%;height:315px;text-align:center;z-index:1;transition:top .4s}.pc-nav .sub-menu-list:nth-of-type(1){padding-top:0px}
.pc-nav .sub-menu-list.on>a{color:#d6000f}.pc-nav .sub-menu-list a{position:relative;display:flex;align-items:center;justify-content:center;height:52px;font-size:18px; letter-spacing: -1px;  color:#777;opacity:0.98;transition:color .4s;-webkit-transition:color .4s}.pc-nav .sub-menu-list:hover>a{color:#d6000f}.pc-nav .sub-menu-list:hover>a:after{transform:scaleX(1);-webkit-transform:scaleX(1)}.pc-nav .sub-menu-list .text{word-break:keep-all; line-height: 24px; font-size: 16px; }}

.header-right-wrap{position:absolute;right:15px;top:35px;height:40px;display:flex;align-items:center; background: #fff;    }

@media screen and (min-width: 1325px){.header-right-wrap{right:calc((100% - 1280px) / 2)}}

.header-right-wrap .menu-btn-wrap{position:relative;display:flex;align-items:center;justify-content:center;padding-left:15px; padding-right:15px;height:100%;cursor:pointer;z-index:701; background: #004899; border-radius: 4px; }

@media screen and (max-width: 991.98px){.pc-nav-open .header-right-wrap .menu-btn-wrap{z-index:701}}

/*@media screen and (min-width: 992px){*/.header-right-wrap .btn-nav-eggsc{position:relative;z-index:701; font-size: 13px;  font-weight: 900;  padding: 0  10px; color: #848383; text-decoration: none; }
 

@media screen and (min-width: 992px){.header-right-wrap .btn-nav-eggsc{ color: #848383; font-size: 13px;  padding: 0 10px; font-weight: 900;  }}
.menu-btn .line{margin:7px 0;transition:transform .4s}
.menu-btn .line{margin:7px 0;transition:transform .4s}

.pc-nav-open .menu-btn .line{background-color:rgba(0,0,0,0) !important}
.menu-btn .line,.menu-btn .line:before,.menu-btn .line:after
{content:"";display:block;width:20px;height:1px;background-color:#fff;transition:transform .4s}

@media screen and (min-width: 992px){.menu-btn .line,.menu-btn .line:before,.menu-btn .line:after{background-color:#fff}}

.pc-nav-open .menu-btn .line:before,.pc-nav-open .menu-btn .line:after{background-color:#fff !important}

.menu-btn .line:before{transform:translateY(-7px)}

.pc-nav-open .menu-btn .line:before{-webkit-transform:translateY(0) rotateZ(135deg);transform:translateY(0) rotateZ(135deg)}

.menu-btn .line:after{transform:translateY(5px)}

 

.pc-nav-open .menu-btn .line:after{-webkit-transform:translateY(-1px) rotateZ(-135deg);transform:translateY(-1px) rotateZ(-135deg)}

.open-nav-wrap{position:fixed;top:0;left:0;right:0;bottom:0;width:100%; background-color:#fff;opacity:0;transform:translateX(100%);transition:opacity .4s;z-index:700; padding-bottom: 100px; overflow-y: scroll; }

.pc-nav-open .open-nav-wrap{opacity:1;transition:opacity .4s,transform .4s;transform:translateX(0);background:#fff url(/views/res/imgs/common/menu-bg-img-m-n.jpg) no-repeat right bottom/contain}

@media screen and (min-width: 992px)
{.pc-nav-open .open-nav-wrap{background-image:url(/views/res/imgs/common/nav_open_bg.jpg)}}

.open-nav-wrap .inner-wrap{position:relative; max-width:1280px;margin:0 auto;height:inherit; padding:100px 30px 0; } /*padding:100px 30px 0;*/

@media screen and (min-width: 992px){.open-nav-wrap .inner-wrap{display:flex;align-items:center;justify-content:center; padding:100px 30px 0;}}

.open-nav-wrap .menu-list-wrap{width:100%; height: 750px; padding-bottom: 30px;  overflow-x:hidden} /* overflow-y:scroll;*/

@media screen and (min-width: 992px){.open-nav-wrap .menu-list-wrap{display:flex;flex-wrap:nowrap;display:block;width:auto;height:auto;counter-reset:section;overflow:hidden}.open-nav-wrap .menu-list-wrap:hover .menu-list{transition-delay:0s !important}.open-nav-wrap .menu-list-wrap:hover .menu-list>a,.open-nav-wrap .menu-list-wrap:hover .sub-menu-list{color:#aaa;opacity:0.3}}

.open-nav-wrap .menu-list-wrap>*{width:100%}

@media screen and (min-width: 992px){.open-nav-wrap .menu-list-wrap>*{flex:1 1 0%}}

.open-nav-wrap .menu-list{opacity:0;transition:opacity .4s 0.2s}

@media screen and (min-width: 992px){.open-nav-wrap .menu-list{position:relative;display:flex;align-items:center;transform:translateX(45px);margin-bottom:37px;transition:transform 0.55s, opacity 0.55s}
.open-nav-wrap .menu-list:hover{transform:translateX(25px) !important}.open-nav-wrap .menu-list:hover:before{opacity:1;transform:translateX(-35px)}
.open-nav-wrap .menu-list:hover>a{opacity:1 !important;color:#333 !important}
.open-nav-wrap .menu-list:hover>a,.open-nav-wrap .menu-list:hover .sub-menu-list{opacity:1;color:#333}}

.pc-nav-open .open-nav-wrap .menu-list{opacity:1}

@media screen and (min-width: 992px)
{.pc-nav-open .open-nav-wrap .menu-list{transform:translateX(0)}.pc-nav-open .open-nav-wrap .menu-list:nth-child(1){transition-delay:.4s}.pc-nav-open .open-nav-wrap .menu-list:nth-child(2){transition-delay:.46s}.pc-nav-open .open-nav-wrap .menu-list:nth-child(3){transition-delay:.52s}.pc-nav-open .open-nav-wrap .menu-list:nth-child(4){transition-delay:.58s}.pc-nav-open .open-nav-wrap .menu-list:nth-child(5){transition-delay:.64s}}

.open-nav-wrap .menu-list>a
{display:flex;align-items:center;height:40px;border-bottom:1px solid rgba(238,238,238,0.98);font-size:16px;font-weight:500;letter-spacing:0.72px;color:#333; text-decoration: none; transition:color 0.15s}

@media screen and (min-width: 992px)
{.open-nav-wrap .menu-list>a{height:auto;font-size:34px;letter-spacing:-1.5px;border-bottom:0;width:330px;transition:color 0.4s, opacity 0.4s; font-weight: 900; }}

.open-nav-wrap .menu-list.on>a{color:#1671c7}

@media screen and (min-width: 992px){.open-nav-wrap .menu-list.on>a{color:#333; text-decoration: none; }}

.open-nav-wrap .menu-list:before{counter-increment:section;content:"0" counter(section);position:absolute;top:3px;left:10px;line-height:25px;font-size:13px;font-weight:600;font-family:"Roboto", sans-serif;opacity:0;color:#000;transform:translateX(0px);transition:all 0.5s cubic-bezier(0.63, 0.03, 0.21, 1),color 0s}
.open-nav-wrap .menu-list .has-sub{position:relative}
.open-nav-wrap .menu-list .has-sub:before,.open-nav-wrap .menu-list .has-sub:after{content:"";position:absolute;top:25px;right:16px;display:inline-block;width:17px;height:1px;background-color:#555;z-index:1;transition:transform 0.2s linear}

@media screen and (min-width: 992px)
{.open-nav-wrap .menu-list .has-sub:before,.open-nav-wrap .menu-list .has-sub:after{display:none}}

.open-nav-wrap .menu-list .has-sub:before{transform:rotate(-90deg)}

@media screen and (max-width: 991.98px){.open-nav-wrap .menu-list .has-sub.open{border-bottom:1px solid #8dd889}
	.open-nav-wrap .menu-list .has-sub.open:before{transform:rotate(0)}.open-nav-wrap .menu-list .has-sub.open:after{transform:rotate(180deg)}}

.open-nav-wrap .sub-menu-list-wrap{padding:0 14px;border-bottom:1px solid rgba(238,238,238,0.98)}/*display:none; */

@media screen and (min-width: 992px){.open-nav-wrap .sub-menu-list-wrap{display:flex !important; padding-left:0;border-bottom:0}.pc-nav-open .open-nav-wrap .sub-menu-list-wrap{height:auto !important}}

.open-nav-wrap .sub-menu-list{font-size:14px;color:#999}

@media screen and (min-width: 992px)
{.open-nav-wrap .sub-menu-list{position:relative;font-size:18px;margin-right:40px;color:#333;transition:opacity 0.3s}.open-nav-wrap .sub-menu-list:not(:last-child):after{content:"";position:absolute;top:10px;right:-20px;display:block;width:1px;height:13px;transform:skew(-30deg);background-color:#999}.open-nav-wrap .sub-menu-list:hover{color:#1671c7 !important}}

.open-nav-wrap .sub-menu-list:first-child{margin-top:4px}

@media screen and (min-width: 992px){.open-nav-wrap .sub-menu-list:first-child{margin-top:0}}

.open-nav-wrap .sub-menu-list:last-child{margin-bottom:4px}

@media screen and (min-width: 992px){.open-nav-wrap .sub-menu-list:last-child{margin-bottom:0}}

.open-nav-wrap .sub-menu-list.on{color:#333}

@media screen and (min-width: 992px)
{.open-nav-wrap .sub-menu-list.on{color:#8dd889 !important}}

.open-nav-wrap .sub-menu-list .text{display:inline-flex;align-items:center;height:34px;transition:color 0.2s; color: #000; }
.sub-menu-list  a {text-decoration: none; }

.open-nav-wrap .bottom-wrap{display:flex;padding:50px 15px 20px}

@media screen and (min-width: 992px){.open-nav-wrap .bottom-wrap{display:none}}

.open-nav-wrap .bottom-wrap .txt{position:relative;font-size:14px;color:#ccc}

.open-nav-wrap .bottom-wrap .txt:not(:last-child){margin-right:25px}

.open-nav-wrap .bottom-wrap .txt:not(:last-child):after{content:"";display:inline-block;position:absolute;top:4px;right:-13px;width:1px;height:10px;background-color:#ccc}

.open-nav-wrap .eggsc-wrap{position:absolute;bottom:30px;left:0;padding:0 30px;width:100%;text-align:center;opacity:0}

@media screen and (min-width: 992px){.open-nav-wrap .eggsc-wrap{display:none}}

.open-nav-wrap .eggsc-wrap .btn-nav-eggsc{width:100%}
.pc-nav-open .open-nav-wrap .eggsc-wrap{opacity:1;transition:opacity 0.5s 0.35s}

.header-btn-box{ width:76px; height: 100%; border-radius: 4px; line-height: 40px;  background: #fff;  border: 1px solid #fff; margin-right: 6px; text-align: center;  }
.btn_member {display: none; }
.btn_logout {border-left: 0px solid #dbdbdb; height: 100%;  }
.btn_login {border-left: 0px solid #dbdbdb; height: 100%;  }

@media screen and (min-width: 992px){ 
	.header-btn-box{ width: 150px; height: 100%; border-radius: 4px; line-height: 40px;  background: #f8f8f8;  border: 1px solid #dbdbdb; margin-right: 6px; text-align: center;  }
	.btn_member {display: inline-block; }
	.btn_login {border-left: 1px solid #dbdbdb; height: 100%;  }
	.btn_logout {border-left: 0px solid #dbdbdb; height: 100%;  }

}

 /******************************************* //  gnb    **************************************************/

 
 /***** 사이트 정보  *****/

.footer { width: 100%; background: #161616; height: 170px; }/* margin-top: 80px; */
.footer_box {  width: 100%;   padding-top: 30px; overflow: hidden;  }
.footer_box ul {  width: 90%; margin: 0 auto; } 
.footer_box ul li {  font-size: 12px; text-align: left; color: #fff; line-height: 16px;  }
.footer_box ul li:first-child {padding-bottom: 10px; } 
.footer_box ul li .footer_company { display: inline-block;  text-indent: -9999px;  background: url(/dgn/ver02/images/logo_kpffc_footer.png) no-repeat  left top ; height:40px; width: 283px ; margin-bottom: 6px; background-size: 68%;    }

.footer_box .btn_box { width: 90%; margin: 0 auto;  text-align:left; margin-top: 10px;  }
.footer_box .btn_box a {box-sizing: border-box; display: inline-block; text-align: left; padding: 0px 0px; width: 110px; height: 35px; line-height: 35px;   color: #c8c9c9; margin-left: 10px; font-size: 12px;  text-decoration: none; border-radius: 5px; background: none; }
.footer_box .btn_box .familysite { position: relative; border-radius: 10px; 	padding: 0px 79px 14px 26px; cursor: pointer; }
.pl{
	width: 200px;
	border: 1px solid #C4C4C4;
	box-sizing: border-box;
	border-radius: 10px;
	padding: 12px 13px;
	font-style: normal;
	font-weight: 400;
	font-size: 14px;
	line-height: 16px;
}

.pl select:hover {
	border-color: #888;
}
.pl select:focus {
	border-color: #aaa;
	box-shadow: 0 0 1px 3px rgba(59, 153, 252, 0.7);
	box-shadow: 0 0 0 3px -moz-mac-focusring;
	color: #222;
	outline: none;
}

.pl select:disabled {
	opacity: 0.5;
}

/*.footer_box .btn_box .familysite ul li a {
	display: block;
	font-size: 14px;
	text-align: center;
	padding: 8px 0;
	border-bottom: 1px solid #ddd;
	color: #444;
}*/
@media screen and (min-width: 992px) {
 .footer { width: 100%; background: #161616; height: 170px;  }
.footer_box {  width: 90%;  max-width: 1270px; margin: 0 auto;   padding-top: 18px; overflow: hidden;  }

.footer_box ul { width: 40%; float: left;} 
.footer_box ul li { font-size: 12px; text-align: left; color: #fff; line-height: 18px;  }
.footer_box ul li:first-child {padding-bottom: 10px; } 
.footer_box ul li .footer_company {  display: inline-block;  text-indent: -9999px;  background: url(/dgn/ver02/images/logo_kpffc_footer.png) no-repeat  left top ; height: 40px; width: 283px ;  background-size: 68%;   }
.footer_box .btn_box { width: 60%; float: right; text-align: right; margin-top: 0px;  }
.footer_box .btn_box a {box-sizing: border-box; display: inline-block; text-align: left; padding: 0px 20px; width: 160px; height: 35px; line-height: 35px;    border: 1px solid #7e8080; color: #c8c9c9; margin-left: 10px; font-size: 12px;  text-decoration: none; border-radius: 5px; background: url(/new_main/gate/tpl8/images/icon_ehrd03.png) no-repeat 133px -991px; }

.footer_box .btn_box .familysite { position: relative;  border-radius: 10px; 	padding: 0px 79px 14px 26px; cursor: pointer; }
	.pl{
		width: 160px;
		border: 1px solid #C4C4C4;
		box-sizing: border-box;
		border-radius: 5px;
		padding: 0px 20px;
		font-style: normal;
		font-weight: 400;
		font-size: 12px;
		line-height: 35px;
		height: 35px;
	}
	.pl select:hover {
		border-color: #888;
	}
	.pl select:focus {
		border-color: #aaa;
		box-shadow: 0 0 1px 3px rgba(59, 153, 252, 0.7);
		box-shadow: 0 0 0 3px -moz-mac-focusring;
		color: #222;
		outline: none;
	}

	.pl select:disabled {
		opacity: 0.5;
	}
}