@charset "utf-8";
/************************************************************************
 * filename : sub_style1.css
 * description :JUNO ACADEMY >COURSE > 서브 페이지
 * date : 2017.10.10
************************************************************************/
@font-face {
   font-family: 'Noto Sans KR';
   font-style: normal;
   font-weight: 300;
   src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.otf) format('opentype');
 }
#course #container {padding-bottom:100px;}
#course .section1,
#course .section2,
#course .section3,
#course .section4,
#course .section5,
#course .section6{display: none;}
#course .section1.active,
#course .section2.active,
#course .section3.active,
#course .section4.active,
#course .section5.active,
#course .section6.active{display: block;}

#course .section_tit .bar{display: block;width: 1px;background: #b2b2b2;height: 60px;margin: 30px auto}
#course .section_contet{overflow: hidden}
#course .term_filter {background:#abaaaa;}
#course .term_filter ul{overflow:hidden;width:1440px;margin:0 auto}
#course .term_filter ul li{width:50%;float: left;text-align: center;}
#course .term_filter ul li:first-child{text-align: center;}
#course .term_filter ul li a {display: inline-block;width: 100%;text-align: center !important;color:#eaeaea;font-size:22px;font-weight: 600;;line-height: 50px}
#course .term_filter.col3 ul li {width:33.3%;}
#course .term_filter.col3 ul li:last-child {width:33.4%;}
#course .term_filter.col4 ul li {width:25%;}
#course .term_filter.col4 ul li a {font-size:21px}
#course .term_filter.col5 ul li {width:20%;}
#course .term_filter.col5 ul li {width:20%;}
#course .term_filter.col5 ul li a {font-size:20px;}
#course .term_filter.col6 ul li {width:16.67%;}
#course .term_filter.col6 ul li a {font-size:19px;}
#course .term_filter.col7 ul li {width:14.29%;}
#course .term_filter.col7 ul li a {font-size:18px;}
#course .term_filter.col8 ul li {width:12.5%;}
#course .term_filter.col8 ul li a {font-size:18px;}

#course .term_filter ul li.active{background: #231f20;}
#course .term_filter ul li.active a{color:#fff;}

#course .tab_menu{background: #f7f7f7;padding:35px 0 24px 0}
#course .tab_list{overflow: hidden}
#course .tab_list_slide{display: none}
#course .tab_list li{float: left;width: 224px;margin-left: 13px;margin-bottom: 11px;}
#course .tab_list li:first-child{margin-left: 0;}
#course .tab_list li a{display: block;height: 64px;background: #fff;text-align: center;font-size:18px;line-height: 64px;color:#8d8b8c;font-weight: 300;border:1px solid #c2c2c2;box-sizing: border-box;}
#course .tab_list li a br.m{display: none;}
#course .section1 .tab_list li.li8 a,
#course .section2 .tab_list li.li1 a,
#course .section2 .tab_list li.li3 a{line-height:44px;padding:10px 0}
#course .tab_list li.li7{margin-left: 0;}
#course .tab_list li.active a{font-weight: 400;color:#fff;background: #998778;}

#course .tab_menu .inner{position: relative}
#course .tab_menu .right{display: none;position: absolute;
    top: 0;
    right: -1px;
    height: 50px;
    width: 20px;
    z-index: 1;
    background: -moz-linear-gradient(right, rgba(247,247,247,1) 0%, rgba(247,247,247,0.58) 42%, rgba(247,247,247,0.31) 69%, rgba(247,247,247,0) 100%);
    background: -webkit-linear-gradient(right, rgba(247,247,247,1) 0%,rgba(247,247,247,0.58) 42%,rgba(247,247,247,0.31) 69%,rgba(247,247,247,0) 100%);
    background: linear-gradient(to left, rgba(247,247,247,1) 0%,rgba(247,247,247,0.58) 42%,rgba(247,247,247,0.31) 69%,rgba(247,247,247,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#00ffffff',GradientType=1 );pointer-events: none;
	}
#course .tab_menu .left{display: none;position: absolute;
    top: 0;
    left: -1px;
    height: 50px;
    width: 20px;
    z-index: 1;
    background: -moz-linear-gradient(left, rgba(247,247,247,1) 0%, rgba(247,247,247,0.58) 42%, rgba(247,247,247,0.31) 69%, rgba(247,247,247,0) 100%);
    background: -webkit-linear-gradient(left, rgba(247,247,247,1) 0%,rgba(247,247,247,0.58) 42%,rgba(247,247,247,0.31) 69%,rgba(247,247,247,0) 100%);
    background: linear-gradient(to right, rgba(247,247,247,1) 0%,rgba(247,247,247,0.58) 42%,rgba(247,247,247,0.31) 69%,rgba(247,247,247,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#00ffffff',GradientType=1 );pointer-events: none;
	}

#course .tab_item{overflow:hidden;padding-top:50px;display: none;margin-top:15px;border-top:1px solid #e0e0e0}
#course .tab_item:first-of-type {margin-top:0;border-top:0}
#course .tab_item.active{display:block;}
#course .tab_item .ti_left{float: left;width: 50%;}
#course .tab_item .ti_left .course_title{color:#231f20;font-size:30px;font-weight: 600;;display: block;line-height: 30px}
#course .tab_item .ti_left .course_title+.bar{margin:15px 0 50px 0;width: 50px;height: 1px;background: #231f20;}
#course .tab_item .ti_left .ti_text{margin-bottom: 30px;}
#course .tab_item .ti_left .ti_text span{display: block;width: 100px;text-align: center;line-height: 35px;color:#fff;font-size:16px;font-weight: 600;background: #998778;}
#course .tab_item .ti_left .ti_text div{color:#231f20;font-size:16px;font-weight: 300;line-height: 25px;padding-top: 20px;word-break: keep-all}
#course .tab_item .ti_left .sugang_btnS {margin:30px auto 0 auto; display: block;; width: 200px; height: 50px; line-height: 50px;color:#fff;font-size:16px;font-weight: 600;background: #998778;border:0;cursor: pointer;}

#course .tab_item .ti_right{float: right;width: 50%;box-sizing: border-box;padding-left: 20px;}
#course .tab_item .ti_right img{max-width: 100%;}
#course .tab_item .ti_right .owl-dots{text-align: center;margin-top: 20px;}
#course .tab_item .ti_right .owl-dot{display: inline-block;float: none;vertical-align: middle;margin-left: 10px;background:#d0d0d0;}
#course .tab_item .ti_right .owl-dot.active{background:#998778}
#course .tab_item .ti_right .owl-dot:first-child{margin-left: 0;}

#course .search_area {width:100%; border:1px solid #000;padding:81px 100px 67px 100px;box-sizing: border-box;;}
#course .search_area .title{font-size: 25px; margin-bottom: 75px;}
#course .search_area .input_table{width: 100%; font-size: 20px;text-align: center;}
#course .search_area .input_table .item {overflow: hidden; margin-bottom: 48px;}
#course .search_area .input_table .item .th {float: left;}
#course .search_area .input_table .item > div{float: left;}
#course .search_area .input_table .custom .th{padding-top:7px; margin-right: 28px;}
#course .search_area .input_table .custom3{height: 60px;}
#course .search_area .input_table .custom3 .th{margin-right: 44px;padding-top: 24px;}
#course .search_area .input_table .p_cal{display: inline-block;overflow: hidden;; border:1px solid #000;}
#course .search_area .input_table .calendar {position: relative;float: left;}
#course .search_area .input_table .calendar i{position: absolute;right: 0; margin-top: -10px;top:50%; color: #998778;}
#course .search_area .input_table .calendar i.mr{right: 26px}
#course .search_area .input_table .calendar input{border:0; height: 58px;}


#course .search_area .input_table tr, #course .search_area .input_table th, #course .search_area .input_table td{vertical-align: middle;font-size: 20px;line-height: 1;}
#course .search_area .input_table tr.second_tr th, #course .search_area .input_table tr.second_tr td{padding-top:52px;}
#course .search_area .input_table .selects{width: 350px; height: 30px; box-sizing: content-box; border:0; border-bottom: 1px solid #ccc;}
#course .search_area .input_table .inputs{box-sizing: border-box;height: 60px;font-size: 19px;padding:0 29px;width: 1139px;float: left;border:1px solid #000 }
#course .search_area .input_table .inputs.wd{width: 484px; margin-right: 62px;}
#course .search_area .input_table .inputs.sd{width: 206px; }
#course .search_area .input_table .gu{display: inline-block; margin:0 26px;float: left;margin-top:21px;}
#course .search_area .input_table .search_btn{width: 297px; height: 77px; line-height: 77px; font-size: 24px; color: white; background: #998778; border:0; margin-left: auto; margin-right: auto;margin-top:4px;cursor: pointer;}
#course .basket_table .txt{font-size: 16px; margin-bottom: 14px; }
#course .basket_table .sugang_btn{border:1px solid #998778;background: white;color: #998778; width: 120px; height: 37px; box-sizing: border-box;cursor: pointer;}
#course .top_txt {font-size: 20px; overflow: hidden;margin-top:87px; margin-bottom: 18px;}
#course .top_txt > div {float: left;}
#course .top_txt > .radio {float: right}
#course .top_txt .container_radio {font-size: 20px;}
#course .top_txt .container_radio:last-child {margin-right: 0;}
#course .top_txt .red{color: #c12626;}

.selectdiv {
  position: relative;
  float: left;
    top:10px;
    margin-left: 26px;
    margin-right: 48px;
}
.selectdiv:last-child{
  margin-right: 0;
}

.selectdiv:after {
    content: '\f078';
    font: normal normal normal 17px/1 FontAwesome;
    color: #4c4c4c;
    right: 11px;
    top: -2px;
    height: 21px;
    padding: 15px 0px 0px 8px;
    position: absolute;
    pointer-events: none;
    box-sizing: content-box;
}

/* IE11 hide native button (thanks Matt!) */
select::-ms-expand {
display: none;
}

.selectdiv select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* Add some styling */
  font-size: 20px;
  display: block;
  width: 484px;
  max-width: 484px;
  height: 35px;
  float: right;
  padding: 0px 24px;
  font-size: 16px;
  line-height: 1.75;
  color: #333;
  background-color: #ffffff;
  background-image: none;
  border:0;
  border-bottom: 1px solid #333;
  -ms-word-break: normal;
  word-break: normal;
  box-sizing: border-box;;
}
#course .container_radio {    display: block;    position: relative;    padding-left: 35px;    padding-top: 3px;    margin-bottom: 12px;    cursor: pointer;    font-size: 22px;    float: left;    -webkit-user-select: none;    -moz-user-select: none;    -ms-user-select: none;    user-select: none; top:3px; margin-right: 86px;}
#course .container_radio input {    position: absolute;    cursor: pointer;    display: none;}
#course .container_radio + .txt{  float: left;  font-size: 20px;  margin-top: 5px;}
#course .container_radio .checkmark2 { position: absolute;    top: -3px;    left: 0;    height: 25px;    width: 25px;    background-color: #eee;    border-radius: 50%;    border:2px solid #998778;    background: white;}
#course .container_radio input:checked ~ .checkmark2:after {    background-color: #998778;}
#course .checkmark2:after {    content: "";    position: absolute;    display: none;}
#course .container_radio input:checked ~ .checkmark2:after {    display: block;}
#course .container_radio .checkmark2:after { 	top: 5px;	left: 5px;	width: 15px;	height: 15px;	border-radius: 50%;	background: white;}
#course .basket_table td{border-bottom: 1px solid #bbbcbf}
#course .basket_table{width:100%; font-size: 16px; margin-bottom: 30px;}
#course .basket_table th{color: white; background: #4c4c4c; padding:17px 0; text-align: center; border:1px solid #4c4c4c;}
#course .basket_table td{ padding:51px 0; text-align: center; vertical-align: middle;;}
#course .basket_table .f {padding:0; vertical-align: middle; }



.pagination{text-align: center;margin:30px auto 156px auto}
.pagination a{border:1px solid #bbbcbf;box-sizing: border-box;width: 38px;height: 38px;vertical-align: middle;text-align: center;}
.pagination a{color:#333;vertical-align: middle;margin:0 3px;font-size:16px;width: 30px;line-height: 29px;height: 30px;}
.pagination a.prev,
.pagination a.first,
.pagination a.next,
.pagination a.last{padding-top: 6px;}
.pagination a.cur{background: #4a4a4a;color:#fff;}

@media (max-width: 1440px){
  .selectdiv select {width: 185px;}
  #course .search_area .input_table .p_cal{margin-left: -36px;}
  #course .search_area .input_table .inputs{width: 708px;}
  #course .search_area .input_table .inputs.wd{width: 252px;}
  #course .search_area .input_table .inputs.sd{width: 137px;padding:0;}
  #course .search_area .input_table .gu{margin-left:0;margin-right: 0;}
  #course .search_area .input_table .calendar i{right: 10px;}
}
@media (max-width: 1024px){
  #course .search_area{text-align: center; padding:50px 10px;}
  #course .search_area .input_table .item{overflow: hidden; height: auto; float: none;}
  #course .search_area .input_table .item .th{display: block; text-align: center; width: 100%; float: none;}
  #course .search_area .input_table .item > div{float: none;}
  #course .search_area .input_table .inputs{width: 100%;}
  .selectdiv select{width: 100%; min-width: 100%;}
  .selectdiv{ margin:0; top:0; left: 0; margin-top: 20px; width: 100%; overflow: hidden;}
  #course .container_radio{margin-top: 20px;}
  #course .search_area .input_table .custom3 .th{padding-top:0;}
  #course .search_area .input_table .inputs{margin-top:20px;}
  #course .search_area .input_table .inputs.wd{width: 100%; margin-bottom: 48px;}
  #course .search_area .input_table .inputs.sd{width:100%;}
  #course .search_area .input_table .p_cal{margin-top: 20px;width: 100%;box-sizing: border-box;;margin-left: 0;}
  #course .search_area .input_table .gu{display: block; width: 100%; text-align: center; margin:0;}
  #course .search_area .input_table .calendar i{right:10px;}
  #course .search_area .input_table .search_btn{width: 100%;}
  #course .search_area .input_table .calendar{width: 100%;}
}
@media all and (max-width:1440px){
  #course .term_filter ul {width:100%;}
  #course .term_filter ul li{width:25% !important;}
  #course .term_filter ul li a {font-size:19px !important;}
	#course .term_filter ul li a{/*width: 512px;*/font-size:18px}
	#course .tab_list li{margin-left: 6px;width: 200px;}
	#course .section1 .tab_list li.li7{margin-left: 6px;}
	#course .section1 .tab_list li.li6{margin-left: 0;}
	#course .tab_list li a{font-size:16px;height: 60px;line-height: 60px}
	#course .section1 .tab_list li.li8 a,
	#course .section2 .tab_list li.li1 a,
	#course .section2 .tab_list li.li3 a{line-height:34px;}
	#course .tab_item .ti_left .course_title+.bar{margin:15px 0 30px 0}
	#course .tab_item .ti_left .ti_text div{font-size:15px;line-height: 20px}
  
}

@media all and (max-width:1024px){
	#course .term_filter ul li a{width: 100%;}
	#course .tab_menu{padding:30px 0 24px 0}
	#course .tab_list li{width: 187.5px;margin-bottom: 6px;}
	#course .section1 .tab_list li.li6{margin-left: 6px;}
	#course .section1 .tab_list li.li5,
	#course .section1 .tab_list li.li9{margin-left: 0;}
  #course .tab_item{margin-top:0;border-top:0}
	#course .tab_item:first-of-type {padding-top:35px}
	#course .tab_item .ti_left,
	#course .tab_item .ti_right{float: none;width: 100%;}
	#course .tab_item .ti_right{text-align: center;padding-left: 0;margin-top: 20px;}
}
@media all and (max-width:768px){
	.section_content{width: 100%;}
	#course .section_tit .bar{display: none}

	#course .term_filter ul li a{width: 100%;font-size:15px;line-height: 40px}

	#course .tab_list{display: none;}
	#course .tab_list_slide{display: block;overflow: hidden;height: 50px;}
	#course .tab_list_slide li{width: 100%;margin-left: 0 !important;margin-bottom: 0;}
	#course .tab_list_slide li a{font-size:14px;line-height: 34px;height: 50px;padding:7px 0}
	#course .section1 .tab_list_slide li.li8 a{padding:7px 0 !important;line-height: 18px !important}
	#course .section1 .tab_list_slide li.li10 a{padding:16px 0}
	#course .section2 .tab_list li.li1 br{display: none;}
	#course .section2 .tab_list li.li1 br.m{display: block;}
	#course .section2 .tab_list li.li1 a,
	#course .section2 .tab_list li.li3 a{line-height:18px !important;padding:7px 0 !important}
	#course .section2 .tab_list li.li4 a{padding:16px 0}
	#course .tab_list_slide li br.m{display:block !important;}
	#course .tab_menu .right,
	#course .tab_menu .left{display: block;}
	#course .tab_menu{padding:17px 0}

	#course .tab_item .ti_left .course_title{font-size:24px;line-height: 30px}
	#course .tab_item .ti_left .course_title+.bar{margin:10px 0 20px 0}
	#course .tab_item .ti_left .ti_text span{font-size:15px;width: 85px;line-height: 32px}
	#course .tab_item .ti_left .ti_text div{font-weight: 400;color:#555;padding-top: 12px;}
	#course .tab_item .ti_right .owl-dots{margin-top: 8px;}

  
  #course .term_filter ul li{width:33% !important;}
  #course .term_filter ul li a {font-size:16px !important;}
  #course #container {padding-bottom:0}
}