@charset "utf-8";
/* CSS Document */

/* 3번 템플릿 */

/* header area 상단 메뉴바 */
header {display: flex; flex-direction: column; border-bottom: 1px solid #ddd;}
header:after {content:''; display:block; clear:both;}
header .util {display: flex; border-bottom: 1px solid #d7d7d7;}
header .inner-box {display: flex;align-items: center;position: relative;width: 100%;padding: 1.5em 0;justify-content: space-between;}
header .inner-box nav {width:100%;}
header .inner-box .menu-btn {display: none; position: relative; width: 30px; height: 30px; overflow: hidden;}
header .inner-box .menu-btn span {position: absolute;right: 0;height: 3px; background-color: #000; transition:all .2s ease-in-out; -webkit-transition:all .2s ease-in-out; width: 100%;}
header .inner-box .menu-btn span.barTop {top: 5px;}
header .inner-box .menu-btn span.barMid {top: 13px;}
header .inner-box .menu-btn span.barBot {top: 21px;right: 30%;}
header .inner-box h1 {/* position: absolute; *//* left: 0; *//* top:0.75em; */}
header .inner-box h1 a {display: block; width: 160px;}/*  padding: .5em; */
header .inner-box h1 img {width: 70%;}
header .inner-box .ui.input {     
	width: 30%; /*min-width: 20em; margin:0 auto;width: 450px; */
	margin-left: auto;
	margin-right: auto;
}
header .inner-box .ui.input form {display: inline-flex; position: relative;}
header .inner-box .ui.input form button {position: absolute; cursor: default; line-height: 1; text-align: center; top: 0px; right: 0px; margin: 0em; height: 100%; width: 3em; opacity: 0.5; border-radius: 0em 0.28571429rem 0.28571429rem 0em; -webkit-transition: opacity 0.3s ease; transition: opacity 0.3s ease;}
header .inner-box .ui.input input {padding: 0.75em 1em; border:3px solid #009be5; border-radius: 12px;}
header .inner-box .ui.input input .search.icon {color:#009be5;}
header .inner-box .util_menu {display: flex;overflow: hidden;/* position: absolute; *//* right: 0;margin-left: unset; */ }
header .inner-box .util_menu li {position: relative; float: left;}
header .inner-box .util_menu li:before {content: ""; width: 1px; height: 14px; background: rgba(0, 0, 0, .3); position: absolute; left: 0; top: 13px;}
header .inner-box .util_menu li:first-child:before {display:none;}
header .inner-box .util_menu li a {display: block; padding: .7em; font-size: .938em;}
header .inner-box h1.brand_mobile {display: none; width:0; height: 0; line-height: 0;}
header .inner-box nav ul {display: flex; justify-content: space-between;}
header .inner-box nav li {}
header .inner-box nav li a {position: relative; padding: 1.2em .5em; font-size: 1.25em; font-weight: 700;}
header .inner-box nav li a:after {content:""; position:absolute; left: 0; bottom: 0; display:block; width:0; height:3px; background:var(--brandColor, #009be5); overflow:hidden; opacity:0; transition:all 0.2s ease-in-out;}
header .inner-box nav li.active a {color: var(--brandColor, #009be5);}
header .inner-box nav li.active a:after { width: calc(100%); opacity:1; }
header .inner-box .total-search-open {display: none; width: 32px; font-size: 2.5em; color: #222;}
header .inner-box .total-search-close {width: 32px; font-size: 2.5em; color: #222; display: none;}

.header-search {text-align:center; width:100%; padding:2em 0; position:fixed; left:0; background: rgba(0, 0, 0, 0.75); display:none; z-index: 100;}
.header-search fieldset {position:relative; width:70%; max-width: 600px; margin: 0 auto;}
.header-search fieldset legend {display:none;}
.header-search fieldset input {height:55px; border:0; background:transparent; font-size: 1.125em; color:#fff;}
.header-search fieldset input[type=text] {border-right:0; padding:0 10px; width:100%; border:2px solid #fff;}
.header-search fieldset input[type=text]:focus {border:2px solid #73c3ff;}
.header-search fieldset input[type=text]::placeholder {color:#b8bcc4;}
.header-search fieldset button {width:55px; position:absolute; top: 0; right:0; height: 55px; font-size: 2em; color: #fff;}
.header-search fieldset button:hover,
.header-search fieldset button:focus {color: #4ba0ea;}
@media all and (max-width:1300px){
    .header-search {display:none;}
}
@media all and (max-width:1024px){
    header {position: fixed; top: 0; left: 0; width: 100%; box-shadow: 1px 1px 5px rgba(0, 0, 0, .3); background: #fff; z-index: 99;}
    header .util {display: none;}
    header .inner-box {padding: 1em 1.5em;}
    header .inner-box h1.brand_mobile {display: block; width:130px; height:auto; line-height: 1; position: static; margin: 0 auto; top: 0.7em;}
    header .inner-box h1.brand_mobile img {width: 130px; height: auto;}
    header .inner-box nav {display: none;}
    header .inner-box .menu-btn {display: block;}
    header .inner-box .total-search-open {display: block;}
    header .inner-box .total-search-open,
    header .inner-box .total-search-close {float: right; margin: 0;}
}
@media all and (max-width:767px){

}
@media all and (max-width:480px){

}


/* 메인, 서브 본문 영역 */
#container {display: flex; flex-direction: column; flex: 1 1 auto; position: relative;}

.main section {width: 100%; padding: 4em 1em; text-align: center;}
@media all and (max-width:1300px){

}
@media all and (max-width:1024px){
    .main section {padding: 2em 1em;}
}
@media all and (max-width:768px){

}
@media all and (max-width:480px){

}

.main footer {margin-top: 0;}


/*******************************
        main page_콘텐츠
*******************************/
/* 퀵배너_섹션에 배경색이 깔리는 경우 */
.main_quickBnr_icons.bgcolor {
  padding: 1.5em 1em;
  background-color: #009be5;
}
.main_quickBnr_icons.bgcolor .grid .column a .m_icon {
  margin-bottom: .7em;
    border-radius: 0;
    border: none;
}
.main_quickBnr_icons.bgcolor .grid .column a:hover .m_icon {
    border: none;
    background: transparent;
}
.main_quickBnr_icons.bgcolor .grid .column a:hover .txt {
    color: #bfff8b;
}
.main_quickBnr_icons.bgcolor .grid .column a .m_icon img{
  height: 70%;
}
.main_quickBnr_icons.bgcolor .grid .column a{ color: #fff; }




/* 게시판 1개 + 광고배너 2개 */
.main_postedMessages_AdsBnr{  }
.main_postedMessages_AdsBnr .grid{
  display: flex !important;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  max-width: 1300px;
  margin:0 auto;
  text-align: left;
  font-size: 10px;
}
.main_postedMessages_AdsBnr .grid .column .listCnt{ padding-right: 2em !important; }
.main_postedMessages_AdsBnr .grid .column:nth-child(2) .listCnt{
    padding-left: 2em !important;
    padding-right: 0em !important;
}
.main_postedMessages_AdsBnr .listCnt .header{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items:center;
  margin-bottom: 1.7em;
}
.main_postedMessages_AdsBnr .listCnt .header h4{
  font-weight: 500;
  font-size: 2em;
  letter-spacing: -0.03em;
}
.main_postedMessages_AdsBnr .listCnt .header .more{ font-size: 1.5em; }
.main_postedMessages_AdsBnr .listCnt .content{ font-size: 1.7em; }
.main_postedMessages_AdsBnr .listCnt .content li{
  /*padding-left: 1.3em;*/
  border-bottom: 1px solid #eee;
  padding-top: .81em;
  padding-bottom: .81em;
  /*background: url(/assets/responsive/img/icon_dot2.gif) no-repeat left center;*/
}
.main_postedMessages_AdsBnr .listCnt .content a{
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-items:center;
  font-size: 1em;
    line-height: 1.1;
  padding: .2em 0;
}
.main_postedMessages_AdsBnr .listCnt .content a span{
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding-right: 1em;
}
.main_postedMessages_AdsBnr .listCnt .content a small{ color: #999; margin-left: auto; }
.main_postedMessages_AdsBnr .adsBnrCnt{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    height: 100%;
    min-height: 327px;
}
.main_postedMessages_AdsBnr .adsBnrCnt a{
    display: block;
    width: 49%;
    background-size: cover;
    padding: 2em;
    font-size: 1.8em;
}
.main_postedMessages_AdsBnr .adsBnrCnt a h4{ font-weight: 500; }
.main_postedMessages_AdsBnr .adsBnrCnt a p{
    width: 100%;
    margin: .3em 0 0 0;
    font-size: .9em;
    color: #555;
    font-weight: lighter;
}
.main_postedMessages_AdsBnr .adsBnrCnt a button{
    position: relative;
    font-size: 1em;
    color:transparent;
}
.main_postedMessages_AdsBnr .adsBnrCnt a button:before{    background: #555;
    content: '';
    position: absolute;
    display: block;
    width: 1.5em;
    height: 1px;
    top: 0;
    left: 0;
}
.main_postedMessages_AdsBnr .adsBnrCnt a button:after{ background: #555;
    content: '';
    position: absolute;
    display: block;
    width: 5px;
    height: 1px;
    top: -1.5px;
    left: calc(1.5em - 5px);
    transform: rotate(30deg);
}

/* 광고배너 a 태그로 감싼 경우, 유도버튼 태그 추가  */
.main_postedMessages_AdsBnr .adsBnrCnt a i{
    position: relative;
    display: inline-block;
    font-style: normal;
    font-size: .9em;
    margin-top: 1.9em;
    color: transparent;
    text-indent: -999px;
}
.main_postedMessages_AdsBnr .adsBnrCnt a i::before{    background: #555;
    content: '';
    position: absolute;
    display: block;
    width: 1em;
    height: 1px;
    top: calc(50% + 1px);
    left: 5px;  /* calc(100% + 5px) */
}
.main_postedMessages_AdsBnr .adsBnrCnt a i::after{ background: #555;
    content: '';
    position: absolute;
    display: block;
    width: 5px;
    height: 1px;
    top: calc(50% - 1px);
    left: 1em; /* calc(100% + 1em) */
    transform: rotate(30deg);
}

@media(max-width: 1024px){
  .main_postedMessages_AdsBnr .grid{ font-size: 9px; }
}
@media(max-width: 767px){
    .main_postedMessages_AdsBnr .grid .column .listCnt{ padding: 1em !important; margin-bottom: 3em; }
    .main_postedMessages_AdsBnr .grid .column:nth-child(2) .listCnt{ padding: 1em !important; margin-top: 3em; }
}
@media(max-width: 500px){
    .main_postedMessages_AdsBnr .adsBnrCnt{  min-height:auto;     }
    .main_postedMessages_AdsBnr .adsBnrCnt a{  padding: 2em 1em; }
}
.text-new {
    flex: none;
    margin-right: 1em;
}






/* section4
.section4 {background: #f7f7f7;}
.section4 .inner-box .tit_area {margin-bottom: 1em;}
.section4 .inner-box h3 {text-align: left; font-weight: bold; font-size: 1.75em; letter-spacing: -0.03em;}
.section4 .inner-box .ui.card > .content > .header {white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
 */


/* section5 */
.main_review { background: url(../img/tem03_m_bgsec5.gif) repeat left top; text-align: center; }
.main_review .inner-box h3 {
    font-weight: 500;
}
.main_review .inner-box .slick-list .slick-slide .box { height: 100%; padding:2em; background: #fff; border:1px solid #ddd; border-radius: 15px;}
.main_review .inner-box .review_slider .box img { width: 5em; }
.main_review .inner-box .review_slider .box .person { color: #009be5; }
.main_review .inner-box .review_slider .box p {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
.main_review .inner-box .slick-prev,
.main_review .inner-box .slick-next {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}
.main_review .inner-box .slick-dots li {
    margin: 0 0px;
}



/* 광고형태의 배너_바로가기 자세히보기 버튼 있는 경우 */
.main_Ads_Bnr .grid .column .bnrCnt{
    min-height: 23em;
    background-position: bottom center;
    background-size: cover;
}



/* 서브 공통 */
ul.navList > li.active > a {
    color: var(--brandColor, #009be5);
}


/********************************************************
        sub-content 서브 페이지
********************************************************/
.text-red {color: #e57373 !important;}
.text-orange {color: #ff6600 !important;}
.text-green {color: #66cc00 !important;}

/* 서브 페이지 소 타이틀 */
h3.tit_page {text-align: center;}
h3.tit_page strong {position: relative; display: inline-block; margin: 0 auto; padding: 0 30px; font-size: 1.75em; letter-spacing: 2px; color: #333;}
h3.tit_page strong:before {content:""; position: absolute; top: 28px; left: 0; width: 100%; border-bottom: 5px solid #b4e4f1; z-index: -1;}

/* 서브 페이지 소 타이틀 옆 안내 메세지 */
h3.tit_comm {font-size: 2em; font-weight: 500; color: #333;}
h4.tit_comm {font-size: 1.5em; font-weight: normal; color: #333;}
h4.tit_comm .info_message {font-size: 1rem; color:#039be5;}
h5.tit_comm {font-size: 1.25em; font-weight: normal; color: #333;}

/* 서브 페이지 서브 타이틀 */
.stit_line h5 {font-size: 1.25em; font-weight: normal; color: #333;}
.stit_line span {display: inline-block; position: relative; padding: 0 .5em 0 1.25em; background: url(/assets/responsive/img/stit_line_bullet.png) left 50% no-repeat;}
.stit_line h5:after {content: ''; display: block; height: 1px; width: 100%; margin-top: 5px; background: #e1e1e1;}
.stit_line span:after {content: ''; width: 100%; position: absolute; left: 0; bottom: -6px; height: 1px; background: #e94040;}
.tit_ethic {display:block; font-size: 1.75em; font-weight: 500; color: #333; text-align:center;}
.tit_ethic .txt_growth {position: relative; display:inline-block; max-width: 80%; padding: 0 2em;}
.tit_ethic .ico_growth {width:22px; height:22px; vertical-align:top; margin-top:-5px; overflow:hidden; font-size:1px; line-height:0; text-indent:-9999px; background-image:url(/assets/responsive/img/ico_growth.png); background-repeat:no-repeat; background-position:0 0;}
.tit_ethic .ico_start {position: absolute; top: 0; left: 0; background-position:0 0;}
.tit_ethic .ico_end {position: absolute; top: 0; right: 0; background-position:-24px 0;}

/* info - sub page 교육원 소개 */
.president {overflow: hidden;}
.president .profile {float: left; width: 36%; margin-right: 4%;}
.president .info-text-box {float: right; width: 60%;}
.president .info-text-box dl dt {position: relative; margin-bottom: 20px; padding-bottom:10px; font-size: 2em; color: #333;}
.president .info-text-box dl dt:after {position:absolute; right:0; bottom:0; width: calc(100% + 100px); border-bottom:1px solid #ff8601; content:""; display:block;}
.president .info-text-box dl dt span {display: block; color: #f7931e;}
.president .info-text-box dl dd {padding-bottom: 20px; line-height: 160%;}
.president .info-text-box p.sign {display: inline-block; margin-top: 40px; padding: 20px 160px 20px 0; font-size: 1.25em; color: #333; background:url(/assets/responsive/img/president_sign.jpg) right 50% no-repeat; background-size: contain;}

/* location - sub page 오시는 길 */
.location-area {margin-top: 40px; line-height:24px;}
.location-area dt {color:#333; font-weight:bold}
.location-area dl {padding-left:42px; background-repeat:no-repeat; background-position:2px 0}
.location-area dt {margin-bottom:5px}
.location-area dd {padding-bottom:10px;}
.location-area dd .bullet {display:block; padding-left:18px; color:#657f87; background:url(/assets/responsive/img/icon_dot.gif) 10px 12px no-repeat;}
.location-area .kind1 {background-image:url('/assets/responsive/img/map_ico1.gif')}
.location-area .kind2 {background-image:url('/assets/responsive/img/map_ico2.gif')}
.location-area .kind3 {background-image:url('/assets/responsive/img/map_ico3.gif')}
.location-area .train1 {font-weight:600; color:#003499}
.location-area .train2 {font-weight:600;  color:#bf9f1e}
@media all and (max-width:1280px){

}
@media all and (max-width:1024px){

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

}
@media all and (max-width:480px){
    /* info */
    .president .profile {float: none; width: 100%; margin: 0 0 20px;}
    .president .info-text-box {width: 100%;}
    .president .info-text-box dl dt {font-size: 1.5em; line-height: 130%;}
    .president .info-text-box p.sign {font-size: 1.125em;}

    /* location */
    .location-area .kind1,
    .location-area .kind2,
    .location-area .kind3 {padding-left: 0; background-image: none;}

    /*  main  */
    .online-listBox .ui.card .ui.form .field {margin-bottom: 0 !important;}

    /* service_end */
    .service_end_area {width:100%; margin:auto; background:transparent;}
    .service_end_area h1 {font-weight:600; font-size:3em; color:#101010;}
    .service_end_area h3 {margin-bottom:1em; font-weight:300; font-size:1.25em; color:#333;}
    .service_end_area img {margin-bottom:2em;}
    .service_end_area .divider {margin:1rem 0 !important;}
}





/********************************************************
        sub-content 서브 페이지
********************************************************/
.text-red {color: #e57373 !important;}
.text-orange {color: #ff6600 !important;}
.text-green {color: #66cc00 !important;}

/* 서브 페이지 소 타이틀 */
h3.tit_page {text-align: center;}
h3.tit_page strong {position: relative; display: inline-block; margin: 0 auto; padding: 0 30px; font-size: 1.75em; letter-spacing: 2px; color: #333;}
h3.tit_page strong:before {content:""; position: absolute; top: 28px; left: 0; width: 100%; border-bottom: 5px solid #b4e4f1; z-index: -1;}

/* 서브 페이지 소 타이틀 옆 안내 메세지 */
h3.tit_comm {font-size: 2em; font-weight: 500; color: #333;}
h4.tit_comm {font-size: 1.5em; font-weight: normal; color: #333;}
h4.tit_comm .info_message {font-size: 1rem; color:#039be5;}
h5.tit_comm {font-size: 1.25em; font-weight: normal; color: #333;}

/* 서브 페이지 서브 타이틀 */
.stit_line h5 {font-size: 1.25em; font-weight: normal; color: #333;}
.stit_line span {display: inline-block; position: relative; padding: 0 .5em 0 1.25em; background: url(/assets/responsive/img/stit_line_bullet.png) left 50% no-repeat;}
.stit_line h5:after {content: ''; display: block; height: 1px; width: 100%; margin-top: 5px; background: #e1e1e1;}
.stit_line span:after {content: ''; width: 100%; position: absolute; left: 0; bottom: -6px; height: 1px; background: #e94040;}
.tit_ethic {display:block; font-size: 1.75em; font-weight: 500; color: #333; text-align:center;}
.tit_ethic .txt_growth {position: relative; display:inline-block; max-width: 80%; padding: 0 2em;}
.tit_ethic .ico_growth {width:22px; height:22px; vertical-align:top; margin-top:-5px; overflow:hidden; font-size:1px; line-height:0; text-indent:-9999px; background-image:url(/assets/responsive/img/ico_growth.png); background-repeat:no-repeat; background-position:0 0;}
.tit_ethic .ico_start {position: absolute; top: 0; left: 0; background-position:0 0;}
.tit_ethic .ico_end {position: absolute; top: 0; right: 0; background-position:-24px 0;}

/* info - sub page 교육원 소개 */
.president {overflow: hidden;}
.president .profile {float: left; width: 36%; margin-right: 4%;}
.president .info-text-box {float: right; width: 60%;}
.president .info-text-box dl dt {position: relative; margin-bottom: 20px; padding-bottom:10px; font-size: 2em; color: #333;}
.president .info-text-box dl dt:after {position:absolute; right:0; bottom:0; width: calc(100% + 100px); border-bottom:1px solid #ff8601; content:""; display:block;}
.president .info-text-box dl dt span {display: block; color: #f7931e;}
.president .info-text-box dl dd {padding-bottom: 20px; line-height: 160%;}
.president .info-text-box p.sign {display: inline-block; margin-top: 40px; padding: 20px 160px 20px 0; font-size: 1.25em; color: #333; background:url(/assets/responsive/img/president_sign.jpg) right 50% no-repeat; background-size: contain;}

/* location - sub page 오시는 길 */
.location-area {margin-top: 40px; line-height:24px;}
.location-area dt {color:#333; font-weight:bold}
.location-area dl {padding-left:42px; background-repeat:no-repeat; background-position:2px 0}
.location-area dt {margin-bottom:5px}
.location-area dd {padding-bottom:10px;}
.location-area dd .bullet {display:block; padding-left:18px; color:#657f87; background:url(/assets/responsive/img/icon_dot.gif) 10px 12px no-repeat;}
.location-area .kind1 {background-image:url('/assets/responsive/img/map_ico1.gif')}
.location-area .kind2 {background-image:url('/assets/responsive/img/map_ico2.gif')}
.location-area .kind3 {background-image:url('/assets/responsive/img/map_ico3.gif')}
.location-area .train1 {font-weight:600; color:#003499}
.location-area .train2 {font-weight:600;  color:#bf9f1e}
@media all and (max-width:1280px){

}
@media all and (max-width:1024px){

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

}
@media all and (max-width:480px){
    /* info */
    .president .profile {float: none; width: 100%; margin: 0 0 20px;}
    .president .info-text-box {width: 100%;}
    .president .info-text-box dl dt {font-size: 1.5em; line-height: 130%;}
    .president .info-text-box p.sign {font-size: 1.125em;}

    /* location */
    .location-area .kind1,
    .location-area .kind2,
    .location-area .kind3 {padding-left: 0; background-image: none;}

    /*  main  */
    .online-listBox .ui.card .ui.form .field {margin-bottom: 0 !important;}

    /* service_end */
    .service_end_area {width:100%; margin:auto; background:transparent;}
    .service_end_area h1 {font-weight:600; font-size:3em; color:#101010;}
    .service_end_area h3 {margin-bottom:1em; font-weight:300; font-size:1.25em; color:#333;}
    .service_end_area img {margin-bottom:2em;}
    .service_end_area .divider {margin:1rem 0 !important;}
}