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

/* 2번 템플릿 */

/* 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 .util ul {margin-left: auto; overflow: hidden;}
header .util ul li {float: left; position: relative;}
header .util ul li:before {content: ""; width: 1px; height: 14px; background: rgba(0, 0, 0, .3); position: absolute; left: 0; top: 13px;}
header .util ul li:first-child:before {display:none;}
header .util ul li a {display: block; padding: .7em 1.3em; font-size: .938em;}
header .inner-box {display: flex; align-items: center; 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 a {display: block; padding: .5em; width: 160px;}
header .inner-box h1 img {width: 100%;}
header .inner-box nav {margin-left: auto;}
header .inner-box nav li {float: left;}
header .inner-box nav li a {position: relative; display: block; padding: 1.55em 2em; font-size: 1.35em; font-weight: 700;}
header .inner-box nav li a:after {content:""; position:absolute; left: 1.25em; bottom: 0; display:block; width:0; height:3px; background:var(--brandColor, #EC5024); overflow:hidden; opacity:0; transition:all 0.2s ease-in-out;}
header .inner-box nav li.active a {color: var(--brandColor, #EC5024);}
header .inner-box nav li.active a:after {width: calc(100% - 2.5em); opacity:1;}
header .inner-box .total-search-open {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: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 nav {display: none;}
    header .inner-box .menu-btn {display: block;}
    header .inner-box .total-search-open,
    header .inner-box .total-search-close {margin-left: auto;}

}


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


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

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

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

}




/*******************************
        main page_콘텐츠
*******************************/

/* 게시판 2개 */
.main_postedMessages{  }
.main_postedMessages .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 .grid .column .listCnt{ padding-right: 2em !important; }
.main_postedMessages .grid .column:last-child .listCnt{ padding-left: 2em !important; padding-right: 0em !important; }

/*  .boxLine */
.main_postedMessages .grid .column .listCnt.boxLine{ padding-right: unset; }
.main_postedMessages .grid .column:last-child .listCnt.boxLine{ padding-left: unset; }
.main_postedMessages .grid .column .listCnt.boxLine{
  height: 100%;
  padding: 3.5em 3.5em 3.5em !important;
  border: 1px solid #ddd;
}
.main_postedMessages .listCnt.boxLine .content li{ border-bottom: 1px dotted #ddd !important; }
.main_postedMessages .listCnt.boxLine .content li:last-child{ border-bottom: none !important; }
.main_postedMessages .listCnt .header{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items:center;
  margin-bottom: 1.7em;
}
.main_postedMessages .listCnt .header h4{
  font-weight: 500;
  font-size: 2em;
  letter-spacing: -0.03em;
}
.main_postedMessages .listCnt .header .more{ font-size: 1.5em; }
.main_postedMessages .listCnt .content{ font-size: 1.7em; }
.main_postedMessages .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 .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 .listCnt .content a span{
  display: inline-block;
  max-width: calc(80% - 1.3em);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.main_postedMessages .listCnt .content a small{ color: #999; margin-left: auto; }
@media(max-width: 1024px){
  .main_postedMessages .grid{ font-size: 9px; }
}
@media(max-width: 767px){
    .main_postedMessages .grid .column .listCnt{ padding: 1em !important; margin-bottom: 3em;}
    .main_postedMessages .grid .column:last-child .listCnt{ padding: 1em !important; }
    .main_postedMessages .grid .column .listCnt.boxLine{ margin-bottom: unset; padding: 3.5em 3.5em 3.5em !important; }
    .main_postedMessages .grid .column:last-child .listCnt.boxLine{   padding: 3.5em 3.5em 3.5em !important; }

}
@media(max-width: 480px){
    .main_postedMessages .grid .column .listCnt.boxLine{ padding: 3em 2.5em 3em !important; }
    .main_postedMessages .grid .column:last-child .listCnt.boxLine{   padding: 3em 2.5em 3em !important; }
}

.text-new {
    flex: none;
    margin-right: 1em;
}












/* sub location area 서브 페이지 위치 영역 */
.location {position: absolute; top: 0; left: 0; width: 100%; border-bottom: 1px solid #ddd; background: #f0f0f0;}
.location .inner-box {display: flex; align-items: center;}
.location .inner-box .page_location {margin-left: auto; padding: 1em 0 1em 1em;}
.location .inner-box .page_location ul {display:inline-block; vertical-align:middle;}
.location .inner-box .page_location ul li {display:inline-block; background:url(/assets/responsive/img/icon_location_arrow.gif) no-repeat 0 7px; padding:0 8px 0 13px;}
.location .inner-box .page_location ul li:last-child {padding-right: 0; font-weight: 600;}
.location .inner-box .page_location ul li a {}
.location .inner-box .page_location ul li.on {font-weight: 500; color:#333;}
.location .inner-box .page_location ul li.home  {display:inline-block; width:13px; height:15px; margin-right:5px; vertical-align:middle; background:  url(/assets/responsive/img/location_home.gif) no-repeat left -2px; overflow:hidden; }
.location .inner-box .page_location ul li.home span {padding-left:200px;}




/********************************************************
        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;}
}