@charset "utf-8";
/* 목록:s */
.program--search .search_inner{width: 76%}
.program--search .fieldset{width:100%}

@media only screen and (max-width:991px){
  .program--search .search_inner.float-md-right{width:auto}
}

.board--card--list, .board--card--list .obj{overflow:visible;}
.board--card--list.type2 .obj .item {min-height:421px;border:none;}
.board--card--list.type2 .col .inner-box {box-shadow:none;}
.board--card--list.type2 .obj .link {position:relative;border:1px solid #dedede;}
.board--card--list .obj .link:after {opacity:0; position:absolute; left:-3px; top:-3px; content:''; width:100%; height:100%; border:3px solid #fca834; -webkit-transition:all 0.3s;transition:all 0.3s;}
.board--card--list.type2 .obj .link:hover,
.board--card--list.type2 .obj .link:focus {box-shadow:5px 5px 15px rgba(0,0,0,.2);}
.board--card--list.type2 .obj .link:hover:after,
.board--card--list.type2 .obj .link:focus:after { opacity:1;}
.board--card--list .obj .thm--box {padding-top:230px;}
.board--card--list .obj .thm--box .inner img {width: 100%;height: auto;min-height: 100%;max-height: 1000%;}
.board--card--list.type2 .obj .card--body .tit {line-height:1;margin:0 0 10px;}
.board--card--list.type2 .obj .card--body > span {display:block; font-size:15px; color:#777;}
.board--card--list.type2 .obj .card--body > p {display:block;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;position: relative;height: 65px;margin: 20px 0 0;padding: 20px 0 0 40px;border-top: 1px dashed #dedede;font-size:15px;color:#777;text-overflow: ellipsis;white-space: normal;}
.board--card--list.type2 .obj .card--body > p:after {display:block; position:absolute; top:15px; left:0;content:''; width:34px; height:34px; background:url(/images/prog/coursDetail/icon.png)no-repeat;}
/* 목록:e*/

/* 상세페이지 */
#crse_banner {overflow: hidden;position: relative;width: 100%;padding: 0 60px 40px 60px;border: 1px solid #ddd;border-top: 3px solid #3464b8;}
#crse_banner .crse_title{position: relative;padding:44px 50px 46px 152px;background: url(/images/prog/coursDetail/title_bg.png) no-repeat right 50px;}
#crse_banner .crse_num{position: absolute;top: 0;left: 0;width: 126px;height: 132px;padding:20px 16px;color: #fff;background: #3464b8 url(/images/prog/coursDetail/tit_bg2.png) no-repeat right top;}
#crse_banner .crse_num:before{content: "";position: absolute;top: 130px;left: 0;width: 100%;height: 11px;background: url(/images/prog/coursDetail/tit_bg.png) no-repeat;}
#crse_banner .crse_num em{display: block;text-align: center;font-style: italic;}
#crse_banner .crse_num .num{display:block;position:relative;margin-top:42px; font-size:14px;font-style:italic;font-weight:bold;text-align:center;line-height:1}
#crse_banner .crse_num .num:before{content: ""; position: absolute; top: -30px;left: 50px;width: 2px; height: 13px; background-color: #fff;-moz-transform: rotate(20deg);-ms-transform: rotate(20deg);-o-transfrom: rotate(20deg);-webkit-transform: rotate(20deg);transform: rotate(20deg);}
#crse_banner .crse_title .gubun{color: #3464b8;font-size: 16px;font-weight: 500;}
#crse_banner .crse_title h2 {margin: 5px 0 0;padding-right: 200px;font-size:30px;color:#fff;line-height: 30px;color: #000;font-weight:bold;}
#crse_banner .crse_title h2:before { background:none; }
#crse_banner .crse_title h2 span { display:block; font-size:28px; color:#ffea00; }
#crse_banner .crse_grap{position:relative;padding: 20px 100px 30px;background-color: #f9f9f9;margin: 40px 0;}
#crse_banner .grap {  position: relative;  width: 100%;  overflow: hidden; }
#crse_banner .grap .obj {overflow:hidden;position:relative;width:1000%;height: 100%;margin: 20px auto 0;}
#crse_banner .grap .obj .item { position:relative; float:left; width:180px; text-align:center;  }
#crse_banner .grap .obj .item a{display:inline-block}
#crse_banner .control {}
#crse_banner .control button {position:absolute;bottom:55px;z-index: 999;display:inline-block;width:60px;height:60px;border:1px solid #ddd;border-radius:50%;background-color:#fff;font-size:0;}
#crse_banner .control button.pre {left: 50px;}
#crse_banner .control button.ne {right:50px;}
button[data-control="prev"]:before,
button[data-control="next"]:before{width:13px;height:13px;border-color: #333;} 
#crse_banner .grap .obj .item a .img { display: block; position:relative;padding-right: 4px; margin: 5px auto 50px; width: 42px; height: 54px; background: url(/images/prog/coursDetail/mark.png) no-repeat; line-height: 39px;color:#252525;font-weight:bold}
#crse_banner .grap .obj .item a .img:before{ content: ""; position: absolute; top: 72px; left: 50%; margin-left: -6px; width: 8px; height: 8px; background-color: #373737; border-radius: 10px;z-index: 100;}
#crse_banner .grap .obj .item a span.info { display:block;  }
#crse_banner .grap .obj .item a span.info em { display:block; }
#crse_banner .grap .obj:after { content: ""; position: absolute; display: block; left: 0; right: -1px; top: 80px; border: 1px dashed #797979;}
#crse_banner .grap .obj .item  span.km { position: absolute; top: 64px; right: 0; padding: 4px 15px; font-size: 14px; border: 1px solid #b9b9b9; border-radius: 20px; background-color: #fff; z-index: 100;}
#crse_banner .grap .obj .item:last-child span.km: { width:36px; height:25px; }
#crse_banner .grap .obj.four_step .item { width:25%; }
#crse_banner .grap .obj.five_step .item { width:20%; }
@media (max-width: 1484px){
  #crse_banner .grap {margin:0 auto;}
}
@media (max-width: 1200px){
  #crse_banner .grap .obj .item a{margin-left:0}
}
@media (max-width: 1023px){
  #crse_banner .crse_title{padding: 160px 0 20px;}
  #crse_banner .crse_title h2 {padding:0;}
}
@media (max-width: 767px){
  #crse_banner{padding:0 20px 20px 20px}
  #crse_banner .crse_title h2{font-size:28px}
  #crse_banner .crse_grap{padding: 20px 30px;margin: 20px 0;}
  #crse_banner .grap {width: 100%;height:100%;}
  #crse_banner .grap .obj .item {height:100%; }
  #crse_banner .grap .obj .item a span.km { top:21%; }
  #crse_banner .control button{height:40px;width:40px;}
  #crse_banner .control button.pre {left: 20px;}
  #crse_banner .control button.ne {right:20px;}
  button[data-control="prev"]:before,
  button[data-control="next"]:before{width:10px;height:10px;} 
}

@media (max-width: 445px) {
  #crse_banner .crse_title {background:none;}
  #crse_banner .grap .obj { margin-left:0; }
  #crse_banner h2, #crse_banner  h2 span { font-size:24px; }
  #crse_banner h2 span { display:inline; }
  #crse_banner h2 span.no_in { display:block; }
}

.num_title {display: block;padding-right:51%;font-weight: 500;font-size: 19px;color: #121212;}
.num_title:before { background:none; }
.num_title i {margin: -3px 6px 0 0;display: inline-block;width: 30px;height: 30px;color: #fff;font-size: 14px;background-color: #3464b8;border-radius: 50%;font-weight: 500;font-style: normal;text-align: center;line-height: 28px;vertical-align: middle;}
.course_wrap {overflow:hidden;padding:60px 0;border-bottom: 1px solid #ddd;}
.course_wrap:last-child{border:0}
.course_wrap .txt_box {float:left;width:60%;position: relative;}
.course_wrap .map_box {position:relative; float:right; width:38%; min-height:280px; }
.course_wrap .map_box  .ui-maps{height:280px}
.course_wrap .txt_box p { margin-top:15px; color:#404040;  }
.course_wrap .txt_box .tag_box { overflow:hidden; margin-top:10px;  }
.course_wrap .txt_box .tag_box span { display:inline-block; padding:7px 13px; margin-right:3px; margin-top:5px; border:1px solid #ababab; color:#000; }
.course_wrap .txt_box .c_list {overflow: hidden;position: relative;margin-top: 20px;}
.course_wrap .txt_box .c_list li {position: relative;color: #404040;min-height: 46px;padding: 13px 0;padding-left: 132px;border-top: 1px dashed #dddddd;line-height: 20px;}
.course_wrap .txt_box .c_list li:first-child{border-top:0}
.course_wrap .txt_box .c_list li em {display:block;position:absolute;left:0;top: 6px;color: #121212;font-weight: bold;line-height: 1;}
.course_wrap .txt_box .c_list li em:before{content: "";position: absolute;display: block;left: 101px;top: 12px;width: 1px;height: 12px;background-color: #cacaca;}
.course_wrap .txt_box .c_list li em i{display: inline-block;position: relative;top: 5px;width: 22px;height: 22px;margin-right:7px;background-color: #2c3230;border-radius: 30px;text-align: center;}
.course_wrap .txt_box .c_list li em i:before{position: absolute;top: 5px;left: 7px;color: #fff;font-size: 13px;}
.course_wrap .txt_box .c_list li:last-child em i:before{left: 5px;}

.course_wrap .map_box .map {  width:100%; height:364px; background:#ccc; }
.img_wrap { margin-top:25px; }
.img_wrap img { width:100%; }
.imgs { overflow:hidden; margin-top:17px; }
.imgs ul li { float:left; width:49%; }
.imgs img { width:100%; }
.imgs ul li:nth-child(2) { margin-left:2%; }

.link_view{position: absolute;top: -36px;right:10px;}

@media (max-width:1231px) {
.course_wrap .map_box:after { width:0; height:0; }
}
@media (max-width:920px){
.course_wrap .txt_box .c_list li.two .are { display:block; margin-left:89px; }
}
@media (max-width:900px){
.num_title{padding-right: 130px}
.course_wrap .txt_box, .course_wrap .map_box { float:none; width:100%; }
.course_wrap .map_box { min-height:auto; }
.course_wrap .map_box .map { position: relative; width:100%; height:350px; margin-top:30px; }
.course_wrap .map_box:after { width:0; height:0; }
.link_view{top: -48px;}
}
@media (max-width:767px) {
  .course_wrap .map_box .map { height:250px; margin-bottom:20px; }
  .imgs ul li { width:100%; }
  .imgs ul li:nth-child(2) { margin-left:0; margin-top:17px; }
  .course_wrap .txt_box .c_list li {padding-left:100px;}
  .course_wrap .txt_box .c_list li.two .are { margin-left:65px; }
  .course_wrap .txt_box .c_list li em:before {display:none;}
}
@media (max-width:550px){
  .course_wrap { padding:20px 0 }
}
@media (max-width:470px) {
  .course_wrap .txt_box .c_list li.one em, .course_wrap .txt_box .c_list li.two em, .course_wrap .txt_box .c_list li.three em, .course_wrap .txt_box .c_list li.three.fee em    { display:block; }
  .course_wrap .txt_box .c_list li.two .are, .course_wrap .txt_box .c_list li.three .are { margin-left:0; }
}
@media (max-width:380px){
  .num_title em { display:block; margin-left:32px; font-weight:700; }
}
.img_slide{ overflow: hidden; position: relative; margin: 30px 0; clear: both; padding: 40px 10%; background-color: #e1e1e1;}
.img_slide .h2:first-child{margin: 0 0 30px}
.img_slide .grap{overflow:hidden;width:100%;height:100%}
.img_slide .grap .obj{width:200%;height:100%}
.img_slide .grap .obj .item{display:inline-block;float:left;position:relative;width:11.7%;height:160px;border:1px solid #ddd;margin-left:1%;text-align:center;background-color:#fafafa}
.img_slide .grap .obj .item:first-child{margin-left:0}
.img_slide .grap .obj .item a{display:block;position:relative;width:100%;height:100%}
.img_slide .grap .obj .item a:hover:before,
.img_slide .grap .obj .item a:focus:before{content: "";position: absolute;top: 0;left: 0;display: block;background-color: rgba(0,0,0,0.5);height: 100%;width: 100%;z-index: 1;}
.img_slide .grap .obj .item a:hover:after,
.img_slide .grap .obj .item a:focus:after{ content: ""; position: absolute; top: 43%; left: 50%;  margin-left: -13px;display: block; background: url(/images/prog/coursDetail/hover.png) no-repeat; height: 22px; width: 22px; z-index: 1;}
.img_slide .grap .obj .item_box{overflow:hidden;width:100%;height:100%}
.img_slide .grap .obj .item_box .thm--box{width:100%;height:100%;background-color:#fafafa;position:relative;z-index:1;}
.img_slide .grap .obj .item_box .thm--box .inner{display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; text-align: center; width: 100%; height: 100%}
.img_slide .grap .obj .item_box .thm--box img{position: absolute; top: 50%; left: 50%; max-width: none; max-height: 100%; transform: translate(-50%,-50%); transition: -webkit-transform cubic-bezier(.22,.61,.36,1) .4s; transition: transform cubic-bezier(.22,.61,.36,1) .4s; transition: transform cubic-bezier(.22,.61,.36,1) .4s,-webkit-transform cubic-bezier(.22,.61,.36,1) .4s; -webkit-transform: translate(-50%,-50%); -webkit-transition: -webkit-transform cubic-bezier(.22,.61,.36,1) .4s; -o-transition: transform cubic-bezier(.22,.61,.36,1) .4s; -ms-transform: translate(-50%,-50%)}
.img_slide .grap .obj .item_box .card--body{background-color:#fff;font-size:16px;padding:14px;border-top:1px solid #ddd}
.img_slide .grap .obj .item_box .card--body .tit{display: block;width: 100%;overflow: hidden;color: #222;font-size: 20px;text-overflow: ellipsis;font-weight: bold;white-space: nowrap}
.img_slide .control{position: absolute;top: 44%;right: 0;width: 100%;}
.img_slide button{position:absolute;top:32%;font-size:0}
.img_slide button[data-control=prev]{left:4%;}
.img_slide button[data-control=next]{right:4%;}

@media only screen and (max-width:767px){
.img_slide .grap{height:160px}
.img_slide .grap .obj .item{width:24.5%}
}

@media only screen and (max-width:460px){
.img_slide .grap .obj .item{width:50%}
.img_slide button[data-control=next]{right:-4%}}

.activate {display: table;color:#fff !important;background: #2e5db0;line-height: 20px;padding: 9px;border-radius: 22px;color: #fff;font-weight: 500;cursor: pointer;transition: background .3s ease, box-shadow .3s ease, -webkit-transform .2s ease;transition: transform .2s ease, background .3s ease, box-shadow .3s ease;transition: transform .2s ease, background .3s ease, box-shadow .3s ease, -webkit-transform .2s ease;}
.activate span {display: inline-block;vertical-align: top;width: 20px;height: 20px;background: #fff;border-radius: 50%;margin: 0 4px 0 0;position: relative;overflow: hidden;}
.activate span:before {content: '';left: 0;top: 0;width: 100%;height: 100%;position: absolute;background: #252525;border-radius: 50%;-webkit-transform: scale(0);transform: scale(0);transition: background .3s ease, -webkit-transform .3s ease;transition: transform .3s ease, background .3s ease;transition: transform .3s ease, background .3s ease, -webkit-transform .3s ease;}
.activate span svg {position: absolute;width: 12px;height: 12px;left: 50%;top: 50%;margin: -6px 0 0 -6px;z-index: 1;}
.activate span svg:nth-child(1) {width: 20px;height: 20px;top: 0;left: 0;fill: none;margin: 0;stroke: #fff;stroke-width: 1px;stroke-dashoffset: 94.248;stroke-dasharray: 47.124;}
.activate span svg:nth-child(2) {fill: #252525;transition: -webkit-transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);}
.activate span svg:nth-child(3) {fill: #252525;-webkit-transform: translateY(20px);transform: translateY(20px);transition: opacity 0.3s ease, -webkit-transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease;transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease, -webkit-transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);}
.activate:hover {box-shadow: 0 8px 24px rgba(86, 40, 238, 0.15);}
.activate:hover span svg:nth-child(2) {-webkit-transform: translateY(-20px);transform: translateY(-20px);}
.activate:hover span svg:nth-child(3) {-webkit-transform: translateY(0);transform: translateY(0);}
.activate:active { -webkit-transform: scale(0.94);transform: scale(0.94);box-shadow: 0 4px 16px rgba(63, 220, 117, 0.18);}
.activate.loading span {background: none;transition: background .1s ease .3s;}
.activate.loading span:before {-webkit-transform: scale(1);transform: scale(1);}
.activate.loading span svg:nth-child(1) {-webkit-animation: turn 1.6s linear infinite forwards, path 1.6s linear infinite forwards;animation: turn 1.6s linear infinite forwards, path 1.6s linear infinite forwards;}
.activate.loading span svg:nth-child(2) {-webkit-transform: translateY(-20px);transform: translateY(-20px);}
.activate.loading span svg:nth-child(3) {opacity: 0; -webkit-transform: translateY(0) scale(0.6);transform: translateY(0) scale(0.6);}
.activate em {color:#fff !important;padding: 0;margin: 0;list-style: none;height: 20px;width: 70px;font-size: 15px;display: inline-block;vertical-align: top;text-align: center;position: relative;-webkit-transform-style: preserve-3d;transform-style: preserve-3d;transition: -webkit-transform .3s ease;transition: transform .3s ease;transition: transform .3s ease, -webkit-transform .3s ease;}
@-webkit-keyframes turn {
  100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);}
}
@keyframes turn {
  100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);}
}
@-webkit-keyframes path {
  100% {stroke-dashoffset: 0;}
}
@keyframes path {
  100% {stroke-dashoffset: 0;}
}