@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,700;1,600&display=swap');
/*=================모바일 및 기본 세팅===================*/


.main_visual_area{ position:relative; background-color:#000 }
.visual_slide li{ float:left; width:100%; display:flex; justify-content:top;  flex-direction: column; height: 300px;  padding:50px; background-size:cover; background-position:center; color:#fff;  text-align: center  }
.visual_slide li p{display:none; font-size:14px; margin-bottom:10px;   transition:all 0.5s ease 0.3s; opacity: 0; }
.visual_slide li span{display:none; font-size:26px; font-weight:bold;  margin-top:0;  transition:all 0.5s ease 0.5s;  opacity: 0; word-break: keep-all; line-height: 1.3; }
.visual_slide li.move p{ transition:all 1s ease 0.3s;  margin-bottom:10px;   margin-top:0; opacity: 1 }
.visual_slide li.move span{ transition:all 1s ease 0.6s;    margin-top:0; opacity: 1 }

.visual_pager{ position:absolute; bottom:40px; width:100%; text-align: center; }
.visual_pager .pager{ display:inline-block;  line-height:13px; height:13px;  vertical-align: -1px; }
.visual_pager a{ display:inline-block; position:relative; color:#fff; margin-right:5px;   vertical-align: middle  }
.visual_pager a span{ display:inline-block; background:#fff; width:13px;  text-indent: -9999px; border-radius: 20px;  }
.visual_pager a.selected span{ background:#49b40d; width:32px; }

.visual_ctrl{ position:absolute; top:100px; width:100%; }
.visual_ctrl a{ position:absolute; color:#fff; margin:0 5px;  font-size:30px; transform:translateY(-50%) }
.visual_ctrl a.prev{ left:10px; }
.visual_ctrl a.next{ right:10px; }

.safe_bnr{ position:absolute; right:15px; left:15px; bottom:15px; background:#fff; padding:70px 15px 15px 15px; border-radius: 15px;  }
.safe_bnr .icon{ position:absolute; font-size:48px; top:10px; left:50%; transform: translateX(-50%); color:#0076ff; }
.safe_bnr div{ overflow:hidden }
.safe_bnr span{ display:block; font-weight:bold; font-size:18px; margin-bottom:10px; text-align:center; color:#545454 }
.safe_bnr dl{ padding:10px 20px; }
.safe_bnr dl dt{ color:#0076ff; font-weight:bold; margin-bottom:10px;   }
.safe_bnr dl dt i{ margin-right:10px; color:#222 }
.safe_bnr dl dd{ font-size:14px; line-height: 1.3}
.safe_bnr a{  display:block; width:50%; margin:0 auto; background:#0076ff; color:#fff; font-size:14px;  font-weight:500; padding:10px 20px 12px; border-radius:50px; margin-top:10px; text-align: center }

.latest_row1{margin-top:15px;}

.quick_links{ padding:15px; overflow:hidden  }
.quick_links h3{ color:#414347; margin-bottom:20px; font-weight:300;    }
.quick_links h3 span{ display:inline-block; font-weight:bold; margin-left:5px;   }
.quick_links ul li{ float:left; width:33.333%; margin-bottom:10px; min-height:128px;}
.quick_links ul li a{ display:block; font-size:14px; text-align: center; padding:15px 0;  border-radius: 15px; }
.quick_links ul li a:hover{ background:#1873DA; color:#fff; }
.quick_links ul li i{ display:block; width:60px; height:60px; margin:0 auto; background-color:#f2f2f2;  border-radius: 60px; margin-bottom:10px;  background-size:550px;    }
.quick_links ul li i.icon01{background-position: -1px -46px;}
.quick_links ul li i.icon02{background-position: -63px -46px;}
.quick_links ul li i.icon03{background-position: -133px -46px;}
.quick_links ul li i.icon04{background-position: -191px -44px;}
.quick_links ul li i.icon05{background-position: -263px -46px;}
.quick_links ul li i.icon06{background-position: -402px -50px;}
.quick_links ul li i.icon07{background-position: -480px -50px;}

.latest_area{ position:relative; padding:15px; }
.latest_area:after{ display:block; clear: both; content:"" }
.latest_area h3{  font-size:20px; font-family: 'Montserrat'; margin-bottom:20px; }
.latest_area h3 span a{ display:inline-block; font-size:14px;  font-weight:bold; color:#505050; border:#000 solid 1px; padding:10px; border-radius: 30px; vertical-align: middle; margin-left:10px;  }

.latest_area div{ display:none}
.latest_area div:nth-child(2){ display:block  }
.latest_area ul li { margin-bottom:20px; }
.latest_area ul li:last-child{ margin:0; }
.latest_area ul li a{ display:block; float:left;}
.latest_area div ul li a{ width:100%; font-size:16px;  font-weight:bold; color:#000; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; margin-bottom:10px;  }
.latest_area .text{ line-height: 1.3; font-size:14px;   }
.latest_area span{ display:inline-block; font-size:14px;   font-weight:300;}
.latest_area .title{text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
.latest_area .date{float:right;}
.latest_area h3 span a.active{ color:#007836;  border:#007836 solid 1px;  float:none;}
.latest_area .view_more{ position:absolute; right:20px; top:25px; }

@media all and (max-width:767px) {
	.latest_area div ul li a{width:71%; text-overflow:ellipsis;}
}

@media all and (min-width:768px) {
	.latest_area h3 span a{padding:10px 20px;}
	
	.latest_area div ul li a{width:84%; text-overflow:ellipsis;}
	.latest_area div ul li span{margin-top:10px;}
}

.notify_main{ position:relative; margin:15px; border-radius: 15px; overflow:hidden }
.notify_main .caroufredsel_wrapper{ border-radius:15px; }
.notify_main_list li{ float:left; border-radius: 15px;   overflow:hidden }
.notify_main_list li img{ width:100%; max-width:100%; }
.notify_ctrl{ position:absolute; left:0; right:0;  bottom:0; background:rgba(70,70,70,0.9); padding:10px 15px; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px;  }
.notify_ctrl a{ color:#fff; margin:0 3px;   }
.notify_ctrl .paging{ color:#fff; display:inline-block; margin-right:10px; }

.notify_main_pager{ display:none !important}

.mid_banner{ padding:15px; }
.mid_banner > div{ background:#fddbca url(/home/jeonil/images/main/bg_m_bnr01.png) left bottom no-repeat; background-size:contain; color:#000; padding:20px 15px 120px 15px; border-radius: 15px;   }
.mid_banner > div .title{ font-weight:bold; display:inline-block; margin-bottom:20px; font-size:20px; }
.mid_banner > div p{ font-size:14px; line-height: 1.3 }
.mid_banner > div .links{ text-align: center; margin-top: 20px; }
.mid_banner > div .links li{  font-size:14px; margin:5px 0;  }
.mid_banner > div .links li a{ display:block; color:#212121; font-weight:bold; border:#212121 solid 1px; border-radius: 20px; padding:8px 0; }


.latest_row2{margin:30px 0 20px 0; clear:both;}
.quick_banner { position:relative; margin:15px; padding:30px; background:url(/home/jeonil/images/main/bg_bnr.jpg) center no-repeat; background-size:cover; border-radius: 20px; text-align: center;}
.quick_banner h3{ margin-bottom:20px; font-size:25px;  color:#fff; }
.quick_banner p{ color:#fff; line-height: 1.3; margin-bottom:20px;  }
.quick_banner a{ display:inline-block; background:#0076ff; color:#fff; padding:10px 40px; border-radius: 20px; }

.prom_video{ position:relative; padding:25px 15px; }
.prom_video h3{  margin-bottom:15px; }
.prom_video_list li{ float:left; width:160px; margin:0 5px;   }
.prom_video_list li a{ display:block; }
.prom_video_list li p{ text-overflow: ellipsis; overflow: hidden; white-space: nowrap; color:#333; margin:22px 0 12px; font-weight:bold  }
.prom_video_list .thumb{ min-height:150px; background-size:cover; background-position:center; border-radius: 15px;  }
.prom_video .video_ctrl{ position:absolute; right:15px; top:15px; }
.prom_video .video_ctrl a{ margin-left:5px; }

.con_btn_wrap{ position:relative; padding-bottom:50px; height:270px;}
.btn_list li{position:relative; float:left; width:236px; height:270px;}

.btn_list li div{position:absolute; left:0; right:0; top:210px; bottom:0px; background: linear-gradient(180deg, rgb(40,35,31,0.001), rgb(40,35,31,0.4), rgb(40,35,31,0.6), rgb(40,35,31,0.9)); border-radius:0 0 15px 15px; transition:all 0.3s;}
.btn_list li:hover div{top:0; bottom:0; transition:all 0.3s; background:rgb(40,35,31,0.7); border-radius:15px;}
.btn_list li:hover div a{margin-top:20px; display:inline-block;}
.btn_list li:hover p{margin-top:90px;}
.btn_list li div p{font-size:18px; text-align:center; color:#fff; font-weight:500; line-height:1.3;}
.btn_list li div span{display:block; font-weight:300; font-size:16px;}
.btn_list li div a{margin-left:62px; margin-top:60px; background:#39b0ee;  padding:8px 30px; font-size:14px; border-radius: 100px; color:#fff; display:none;  background-size:cover; transition:all 0.3s ease-out;}
.btn_list li div a:after{display:none;}


.con_btn_ctrl{ position:absolute; top:50%; left:0; right:0; }
.con_btn_ctrl > a{ color:#242424; margin:0 3px;  font-size:30px;  vertical-align: middle; transform:translateY(-50%); position:absolute;}
.con_btn_ctrl > a.prev{  float:left; margin-left:10px; left:0; } 
.con_btn_ctrl > a.next{  float:right; margin-right:10px; right:0;} 


#footer_area{ clear:both  }


/*===============서브영역==============*/

/*===============서브영역 끝==============*/

/*==================
사이즈별 추가코드
==================*/

/*smartphones ( portrait )*/
@media all and (max-width:320px) {

}

/*smartphones ( landscape )*/
@media all and (min-width:321px) and (max-width:360px) {

}

/*smartphones ( landscape )*/
@media all and (min-width:361px) and (max-width:375px) {

}

/*smartphones ( landscape )*/
@media all and (min-width:376px) and (max-width:414px) {

}

/*smartphones ( landscape )*/
@media all and (min-width:415px) and (max-width:480px) {

}

/*tablet( portrait )*/
@media all and (min-width:640px) {



}
@media all and (min-width:641px) and (max-width:767px) {

}


/*=================
태블릿 기본 세팅
===================*/
@media all and (min-width:768px) {

	.container{ max-width:760px; }
	.visual_slide li{ justify-content: center; align-content: flex-start; height:300px; padding:0 50px; overflow:hidden }
	.visual_slide li p{ font-size:20px;  }
	.visual_slide li span{ font-size:30px;  margin-bottom:0;  }
	.visual_ctrl{ top:50%; transform: translateY(-50%);}

	.safe_bnr{ width:36%; right:10%; top:50%; bottom:auto; left:auto; transform: translateY(-50%);}

	.quick_links ul li{ width:20%; }
	
	.latest_area{float:left; width:49%}
	.latest_area ul { overflow:hidden }
	.latest_area ul li{ width:97%;}
	.latest_area ul li:last-child{ margin-right:0; border-right:0;  }

	.notify_main{ float:left; width:49%; margin-right:0; }
	.mid_banner{ float:right; width:49%; }
	.mid_banner ul li{ margin:0 0 20px; }
	.mid_banner ul li p{ display:none; }
	.quick_banner{ float:left; width:49%; margin:15px 0 15px 15px}

	.prom_video{ clear:both; }
	
	.latest_row2{padding-top:25px;}
	.btn_list li{ margin:0 10px; }
}

/*=================
데스크탑 기본 세팅
===================*/
 @media all and ( min-width:1024px){

	 .container{ max-width:1000px; }

	 .visual_slide li p{ max-width:1000px; margin:0 auto }
	 .visual_pager{ text-align:left; margin-left: -460px; bottom:120px; }

	 .safe_bnr{ position:absolute; width:350px; left:auto;  right:50px; bottom:auto; top:50%; transform: translateY(-50%); text-align: left; }
	 .safe_bnr .icon{ display:block;   float:none; margin:0 auto 25px auto}

	 .quick_links h3{ float:left; width:15%; text-align:left; font-size:25px; margin-bottom:0; padding-top:30px;  }
	 .quick_links h3 span{ display:block; margin:10px 0 0 0; }
	 .quick_links ul{ float:right; width:85%; }

	 .latest_area{ float:left; width:60%; margin-bottom:15px;  padding:0;  }
	 .latest_area .view_more{top:8px;}

	 .notify_main{ width:38%; margin-top:0; }

	 .mid_banner{ clear: both; float: none; width:100%; }
	 .mid_banner > div{ padding:20px 20px 20px 40%; background-size:auto   }
	 .mid_banner ul{ display:flex; justify-content: space-between; }
	 .mid_banner ul li{ width:32%; }
	 .mid_banner ul li p{ display:block; }

	 .latest_row2{ clear:both; overflow:hidden }
	 .quick_banner{ float:left; width:35%; margin:20px 0;  }
	 .quick_banner h3{ float:none; }
	 .quick_banner > div{ float:none; width:auto;  max-width:350px; max-height:250px; }

	 .prom_video{ float:right; width:65%; clear: none }
	 .prom_video_list li{ width:180px; margin:0 10px;  }

	 #footer_area{ clear:both  }

 }

 @media all and ( min-width:1440px){
	 .visual_slide li{ height:650px; }
	 .visual_slide li .container{ width:1280px;  }
	 .visual_slide li span{ font-size:60px; margin-bottom:100px;    }
	 .visual_slide li p{ font-size:43px;   }

	 .visual_ctrl a{ font-size:65px; }
	 .visual_pager{  left:0; right:0; margin:0; text-align: center; bottom:180px}
	 .safe_bnr{ right:50%; margin-right:-640px; transform: translateY(-70%); }


	 #latest_area:after{ display:block; clear: both;  content:"" }

	 .quick_links{ position:relative; margin-top:-120px; margin-bottom:100px;  background:#fff; border-radius: 20px; box-shadow:rgba(0,0,0,0.2) 1px 1px 40px;    z-index: 100}
	 .quick_links h3{ font-size:30px; padding-left:50px; width:20%;}
	 .quick_links ul{ width:80%; }
	 .quick_links ul li i{ width:106px; height:106px; margin-bottom:15px;  }
	 .quick_links ul li i.icon01{ background-position:0 -107px; }
	 .quick_links ul li i.icon02{ background-position:-98px -108px; }
	 .quick_links ul li i.icon03{ background-position:-210px -107px; }
	 .quick_links ul li i.icon04{ background-position:-313px -107px; }
	 .quick_links ul li i.icon05{ background-position:-428px -107px; }
	 .quick_links ul li i.icon06{ background-position:-527px -54px; }
	 .quick_links ul li i.icon07{ background-position:-635px -54px; }
	 .quick_links ul li a{ font-size:16px; font-weight:bold }

	 .latest_area{ float:left; width:720px; margin-bottom:65px;  padding:0;  height:298px;}
	 .latest_area h3{ font-size:22px; margin-bottom:12px;}
	 .latest_area h3 span{ font-size:18px; }
	 .latest_area ul li{ width:97%;  margin-bottom:-4px;  }
	 .latest_area ul li:last-child{ margin-right:0; padding-right:0; }
	 .latest_area .title{ font-size:19px; padding:10px 0; color:#292b30; font-weight:500; }
	 .latest_area .text{ line-height:1.8 }

	 .mid_banner{ margin-bottom:25px; }
	 .mid_banner > div{ padding:30px 3% 25px 40%; }
	 .mid_banner ul{ padding:0; }

	 .notify_main{ float:right; padding:0; width:500px;  }
	 .notify_ctrl{ left:0; right:0; bottom:0;  }

	 
	 .quick_banner{ float:left; width:360px; margin:0; padding:50px 30px; }
	 .quick_banner h3{ margin-bottom:40px; }
	 .quick_banner p{ word-break: keep-all; margin-bottom:30px; }
	 .quick_banner .bnr_ctrl{ top:25px; }

	 .prom_video{ clear: none; float:right; width:851px; padding:0;  }
	 .prom_video > div.caroufredsel_wrapper{ width:851px !important; }
	 .prom_video h3{ font-size:22px; margin-bottom:33px; }
	 .prom_video_list li{ width:267px; margin:0 25px 0 0; }
	 .prom_video_list li span{ display:inline-block; font-size:14px; }
	 .prom_video_list .thumb{  height:190px; }
	 .prom_video .video_ctrl{ top:0; right:0; }
	 .prom_video .video_ctrl a{ font-size:20px; }
	
	
	 .con_btn_wrap { padding-bottom:120px; }
	 .con_btn_ctrl{ top:50%; height:0;  } 
	 .con_btn_ctrl > a{ font-size:40px; }
	 .con_btn_ctrl > a.prev{ margin-left:-50px;  }
	 .con_btn_ctrl > a.next{ margin-right:-50px;  }

 }

@media all and (min-width:768px) and (max-width:1439px) {
	.latest_area div ul li a{width:70%;}
	.latest_area div ul li span{margin-top:0;}
}

@media all and (max-width:767px){
	.con_btn_ctrl{ position:absolute; top:50%; left:0; right:0; }
	.con_btn_ctrl > a{display:flex; justify-content: center; align-items: center; color:#242424; margin:0 3px;  font-size:30px;  vertical-align: middle; transform:translateY(-50%); position:absolute;background: #fff;width: 50px;height: 50px;box-shadow: rgb(0 0 0 / 60%) 2px 2px 5px;border-radius: 100%;}
	.con_btn_ctrl > a.prev{  float:left; margin-left:10px; left:0; } 
	.con_btn_ctrl > a.next{  float:right; margin-right:10px; right:0;} 

}

/* IE9,10 */
@media screen and (min-width:0\0){
	.btn_list li div{background:rgba(40,35,31,0.4); padding:6px 0}
	
	.banner_list_wrap ul li{margin-top:14px}
}