@charset "utf-8";

/*=================모바일 및 기본 세팅===================*/
.ani{ transform:translateY(100px); opacity: 0; transition: 0.5s all }
.ani.active{ transform:translateY(0); opacity: 1; transition: 0.5s all }

#main_visual_area{ position:fixed; top:63px; width:100%;  z-index: 1000}
.visual_wrap{  background-color:#0b2041; background-size:cover; background-position:center; height:250px; display:flex;  justify-content: center; flex-direction: column; }
.visual_wrap p{ font-family:'NanumSquare'; color:#fff; text-shadow: rgba(0,0,0,0.5) 1px 1px 2px; text-align: center; }
.visual_wrap p.sub_title{ font-weight:300; margin-bottom:15px;  }
.visual_wrap p.title{ font-weight:500; font-size:30px; margin-bottom: 25px; }

.vis_con{ position:absolute; top:45%; width:100%; }
.vis_con a{ display:inline-block; color:#fff; font-size:40px; transform: translateY(-50%); text-shadow: rgb(0 0 0 / 50%) 1px 1px 2px }
.vis_con .prev{ position:absolute; left:0; }
.vis_con .next{ position:absolute; right:0; }

#main_area{ position:relative; margin-top:calc(100vh - 532px); background:#fff; z-index: 2000;}

.latest_area{ }
.latest_area .container{ position:relative; padding:0 15px; }

.latest_notice{ position:relative; padding:15px; background:#fff }
.latest_notice h3{ display:inline-block; position:absolute; padding:8px 20px 10px 0; font-size:20px; }
.notice_tab{ position:relative; width:100%; min-height:310px; padding-left:80px;  }
.notice_tab:after{ display:block; content:""; clear: both }
.notice_tab > li{ float: left;  }
.notice_tab > li > a{ display:block; color:#a7a7a7; font-size:18px; padding:10px;  }
.notice_tab > li > a.active{ color:#1580f9; font-weight:500; }
.notice_tab > li > ul{ display:none; position:absolute; width:100%; left:0; top:40px; }
.notice_tab > li > span{ display:none }
.notice_tab > li:first-child > ul{ display:block; }
.notice_tab > li > ul > li{ display:flex; justify-content: space-between; font-size:14px; }
.notice_tab > li > ul > li > a{ display:block; width:78%; text-overflow:ellipsis; overflow: hidden; white-space: nowrap; color:#333; padding:5px 0;  }
.notice_tab > li > ul > li > a:before{ display:inline-block; width:3px; height:3px; border-radius: 50%; content:""; background:#1580f9; vertical-align: 4px; margin-right:8px;  }
.notice_tab > li > ul > li > span{ display: block; padding:5px 0; }
.notice_tab > li > ul > li.first{ flex-direction: column;; padding-left:100px; background:url(/home/caeng/images/main/icon_notice.png) left center no-repeat; background-size:80px; margin-bottom:10px; padding-bottom:10px; border-bottom:#dedede solid 1px;  }
.notice_tab > li > ul > li.first > a{  display:block; width:100%; font-size:18px; font-weight:bold; margin-bottom:5px; }
.notice_tab > li > ul > li.first > a:before{ display:none; }
.notice_tab > li > ul > li.first > p{ line-height: 1.3; max-height:38px; margin-bottom:5px; overflow: hidden; }
.notice_tab .view_more{  display:flex; position:absolute; right:0; top:0; border:#dedede dotted 1px; border-radius: 3px; width:30px; height:30px; justify-content: center; align-items: center; }
.notice_tab > li:first-child > span{ display:inline-block; }

.mid_bnr_wrap{ position:relative; box-shadow: rgb(0 0 0 / 30%) 1px 1px 10px; border-radius: 15px;  overflow:hidden }
.mid_bnr li{ float:left; }
.mid_bnr li a{ display:block; line-height: 0; overflow:hidden  }
.mid_bnr li a img{ width:100%; max-width:100%; }
.mid_bnr_pager{ display:none !important}
.mid_bnr_ctrl{ position:absolute; bottom:20px; left:50%; transform: translateX(-50%); background:#181919; padding:0 15px 0 20px; border-radius: 30px;  width:160px;}
.mid_bnr_ctrl a{ color:#fff; vertical-align: middle; padding:7px 5px 9px; }
.mid_bnr_ctrl .paging{ display:inline-block; color:#fff; letter-spacing: 0.3em; vertical-align:middle; padding:10px 0;}

.quick_links_wrap{ background: linear-gradient(to top, #157ef6 0%,#157ef6 50%,#ffffff 50%,#ffffff 100%); }
.quick_links_wrap .container{ padding:0; }
.consult{ padding:0 15px; margin:20px 0; }
.consult p{ color:#1580f9; font-size:18px; font-weight:bold; margin-bottom:10px; }
.consult span{ position:relative; display:inline-block; width:270px; font-size:35px; font-weight:bold; }
.consult span:after{ display:inline-block; position:absolute; top:-30px; right:-60px; width:50px; height:50px; content:""; background-image:url(/home/caeng/images/main/icon_consult.png); background-repeat:no-repeat; background-size:contain; }
.quick_links{ position:relative; padding:20px 15px; background:#157ef6; }
.quick_links h3{ color:#fff; margin-bottom:15px;  }
.quick_links h3 span{ display:inline-block; font-size:14px; font-weight:300; display:block; margin-bottom:5px;  }
.quick_link_list{  overflow:hidden }
.quick_link_list li{ display:flex; justify-content: space-around; margin-top:10px;  }
.quick_link_list li a{ display:block; width:48%; padding:10px 0; border-radius:50px; border:#fff dotted 1px; color:#fff; text-align: center; }
.quick_link_list li a[target="_blank"]:after{display:none;}
.quick_ctrl{ position:absolute; top:15px; right:15px; }
.quick_ctrl a{ display:inline-block; padding:5px; color:#fff; }

.main_photo{ background:#f8fbff; padding:25px 15px;  }
.main_photo .container{ position:relative; }
.main_photo h3{ font-family:'NanumSquare'; font-size:23px; margin-bottom:20px; }
.photo_list li{ float:left; text-align: center;  }
.photo_list li a{ display:block; border:#dedede solid 1px; margin:0 5px;  }
.photo_list li .thumb{ min-height:200px; background-size:cover; background-position:top center; background-repeat:no-repeat; }
.photo_list li p{ background:#fff; padding:20px 20px 10px 20px; line-height: 1.3; font-size:18px; font-weight:bold; color:#000; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.photo_list li span{ display:block; padding:0 0 20px 0;  }
.main_photo .view_more{ position:absolute; right:0; top:0; border:#dedede dotted 1px; border-radius: 3px; width:30px; height:30px; display:flex; justify-content: center; align-items: center; }
.main_photo .photo_ctrl{ position:absolute; right:33px; top:0; display:flex;  }
.main_photo .photo_ctrl a{ border:#dedede dotted 1px; border-radius: 3px; width:30px; height:30px; display:flex; justify-content: center; align-items: center; margin:0 3px; }

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

/*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) {

  .visual_wrap{ height:540px; }

  .latest_notice:after{ display:block; clear: both; content:""; overflow:hidden }
  .notice_tab{ float: left; width:60%; }
  .mid_bnr_wrap{ float:right; width:35%; }
  .mid_bnr_ctrl{ text-align: center }

  .quick_links_wrap{  background:linear-gradient(to left, #157ef6 0%,#157ef6 50%,#ffffff 50%,#ffffff 100%); overflow:hidden }
  .quick_links_wrap .container{ display:flex; justify-content: center; flex-direction: row; }
  .quick_links_wrap .consult{ width:50%; display:flex; justify-content: center;  flex-direction: column;}
  .quick_links_wrap .quick_links{ float:right; width:50%; }

}

@media all and (min-width:769px) and (max-width:1023px) {

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


   #main_visual_area{ top:135px; height:540px;}
   .visual_wrap .container{ width:1000px;}
   .visual_wrap p{  text-align: left; }
   .visual_wrap p.title{ font-size:40px; margin-bottom:10px; font-weight:800; }

   #main_area{ margin-top: calc(100vh - 265px) }

   .latest_notice h3{ font-size:34px; }
   .notice_tab{ width:65%; padding-left:140px; min-height:240px; }
   .notice_tab > li > a{ font-size:20px; padding:17px 10px }
   .notice_tab > li > ul{ top:65px; overflow:hidden }
   .notice_tab > li > ul > li.first{ float:left; width:50%; margin-right:15px; border-bottom:0; border-right:#dedede solid 1px; padding-right:10px; padding-bottom:0; margin-bottom:0;    }
   .notice_tab > li > ul > li.first > a{ margin-bottom:15px; }
   .notice_tab > li > ul > li.first > p{ max-height:75px; }
   .notice_tab > li > ul > li{ margin:5px 0; }

   .mid_bnr_wrap{ position:relative; width:30%; margin-top:-100px; z-index: 100 }

 }

 @media all and ( min-width:1440px){

   .visual_wrap .container{ width:1400px;  margin-top:-70px;}
   .visual_wrap p.sub_title{ font-size:26px; }
   .visual_wrap p.title{ font-size:65px; }
   .visual_wrap p.eng_title{ font-size:22px; margin-bottom:60px; }

   .latest_area .latest_notice{ background:linear-gradient(to left, #157ef6 0%,#157ef6 50%,#ffffff 50%,#ffffff 100%); padding:15px 0 0; }
   .latest_area .latest_notice .container{ margin-top:-160px; background:#fff;   padding:35px 0 0 45px; border-bottom-right-radius:15px;  }
   .latest_area .latest_notice .container:after{ display:block; clear: both; content:""}

   .notice_tab{ width:980px; }
   .notice_tab > li > a{ font-size:22px }
   .notice_tab > li > ul > li.first{ padding-left:160px; margin-top:0; margin-right:50px; padding-right:50px; background-size:auto;  }
   .notice_tab > li > ul > li.first > p{ font-size:15px; line-height: 1.4; max-height:65px; margin-bottom:24px; }
   .notice_tab > li > ul > li{ margin:0 0 8px 0; font-weight:500 }
   .notice_tab .view_more{ width:40px; height:40px; color:#000; }

   .mid_bnr_wrap{ width:330px; border-top-left-radius: 15px; border-top-right-radius: 30px;  border-bottom-left-radius: 0; border-bottom-right-radius: 10px;  overflow:hidden }

   .quick_links_wrap .consult{ width:630px; height:190px; padding:0 35px; margin:0;}
   .quick_links_wrap .consult span{ font-size:40px; width:300px; }
   .quick_links_wrap .quick_links{ padding:60px 0 60px 60px; width:770px; }
   .quick_link_list_wrap{ display:inline-block; width:370px;  }
   .quick_links h3{ position:relative; font-size:26px; display:inline-block; width:325px; margin-bottom:0;  }
   .quick_links h3:after{ display:block; width:40%; height:1px; background:#fff; position:absolute; right:0; top:50%; content:""}
   .quick_links h3 span{ font-size:18px; margin-bottom:12px; }
   .quick_link_list li a{ padding:15px 0; }
   .quick_ctrl{ right:auto; left:-12px; top:50%; background:#0054b3; padding:10px; transform: rotate(90deg) translateX(-40%) translateY(50%); border-radius: 10px;}
   .quick_ctrl a{ padding:10px; font-size:20px; }

   .main_photo{ padding:54px 0; }
   .main_photo h3{ font-size:26px; margin-bottom:36px;  }
   .main_photo .view_more{ width:40px; height:40px; }
   .main_photo .photo_ctrl{ right:42px; }
   .main_photo .photo_ctrl a{ width:40px; height:40px; }
   .photo_list li{ width:270px; }
   .photo_list li .thumb{ height:200px; }

 }
@media all and ( min-width:1600px){


}
@media all and ( min-width:1900px){

}