/* youtube Style */
.board_description #post_area .youtube_box {position: relative; width: 100%; padding-bottom: 56.25%;}
.board_description #post_area .youtube_box embed {position:absolute; width: 100%; height: 100%}


/* ------------------------------------------------------------------ */
/* Common Styles
main : 222
point : e83f04
point : 686868
'Noto Sans KR', 'Noto Sans KR', sans-serif, 'Gothic A1', 'FontAwesome', "Font Awesome 5 Free"

@media screen and (max-width: 768px) {
}
@media screen and (max-width: 640px) {
}
@media screen and (max-width: 480px) {
}
*/
/* ------------------------------------------------------------------ */


/*---------------------------------------------------------
  2. Typography
  Vertical rhythm with leading derived from 6
--------------------------------------------------------------------- */
h1 { font-size: 42px;}
h2 { font-size: 36px;}
h3 { font-size: 28px;}
h4 { font-size: 24px;}
h5 { font-size: 18px;}
h6 { font-size: 16px;}
.subheader { }
p { font-family: var(--font-1); margin: 0; font-weight: 400; letter-spacing: -0.01em}
p span {color: var(--text-point);}
p img { margin: 0; }
p.lead { font-size: 26px; margin-bottom: 20px; font-weight: 700; }
p.head { font-size: 20px; margin-bottom: 10px; font-weight: 600; color: var(--gray-8); }

@media screen and (max-width: 811px) {
    h1 { font-size: 32px; line-height: 1.5; }
    h2 { font-size: 28px; line-height: 1.5; }
    h3 { font-size: 24px; line-height: 1.5; }
    h4 { font-size: 20px; line-height: 1.5; }
    h5 { font-size: 18px; line-height: 1.5; }
    h6 { font-size: 16px; line-height: 1.5; }
}

@media screen and (max-width: 640px) {
    p.lead {font-size: 18px;}
    p.head {font-size: 16px;}
    p { font-size: 15px;}
}

@media screen and (max-width: 480px) {
}
/* for 'em' and 'strong' tags, font-size and line-height should be same with
the body tag due to rendering problems in some browsers */

em {font-style: normal; }
strong, b { font-weight: bold;}
small { font-size: 11px; line-height: inherit; }

/* Gothic A1 */
.fw100 {font-weight: 100 !important;}
.fw200 {font-weight: 200 !important;}
.fw400 {font-weight: 400 !important;}
.fw600 {font-weight: 600 !important;}
.fw800 {font-weight: 800 !important;}

/* Gothic A1
.fw100 {font-weight: 100 !important;}
.fw200 {font-weight: 200 !important;}
.fw300 {font-weight: 300 !important;}
.fw400 {font-weight: 400 !important;}
.fw500 {font-weight: 500 !important;}
.fw600 {font-weight: 600 !important;}
.fw700 {font-weight: 700 !important;}
.fw800 {font-weight: 800 !important;}
.fw900 {font-weight: 900 !important;}
*/
/*---------------------------------------------------------
3. List
--------------------------------------------------------- */
ul, ol { margin-bottom: 0; margin-top: 0; }
ul { list-style: none outside; }
ol { list-style: decimal; }
ol, ul.square, ul.circle, ul.disc { margin-left: 30px; }
ul.square { list-style: square outside; }
ul.circle { list-style: circle outside; }
ul.disc { list-style: disc outside; }
ul ul, ul ol, ol ol, ol ul { margin: 0x; }
ul ul li, ul ol li, ol ol li, ol ul li { margin-bottom: 0; }
li { line-height: 18px; }
ul.large li { }
li p { }

/* ------------------------------------------------------------------ */
/* Text Block
---------------------------------------------------------------------*/
@media only screen and (max-width:810px) {
	.block-tab {display: block;}
	.block-md {display: none;}
}
@media only screen and (min-width:811px) {
	.block-md {display: block;}
	.block-tab {display: none;}
}

/*---------------------------------------------------------
 Images
--------------------------------------------------------- */
img { max-width: 100%; height: auto; vertical-align: top}
img.pull-right { margin: 5px 0px 20px 20px; }
img.pull-left { margin: 5px 20px 20px 0px; }
img.pull-right, img.pull-left {max-width: 300px;}
.cont-img {position: relative; width: 100%; margin-bottom: 30px;}
.cont-img img {width: 100%;}
.cont-img.over {width: calc(100% + 160px); margin-left: -80px; margin-bottom: 0;} 
.cont-img.over img {width: 100%;}

.shadow {position: relative;}
.shadow:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 0;
  margin: 0 13%;
  width: 74%;
  height: 100%;
  /*   transition: all 300ms ease; */
  box-shadow: 0px 7px 17px rgba(0, 0, 0, 0.7);
  -webkit-transform-origin: center bottom;
          transform-origin: center bottom;
  -webkit-transform: perspective(75px) rotate3d(1, 0, 0, 60deg);
          transform: perspective(75px) rotate3d(1, 0, 0, 60deg);
}
.shadow1 {box-shadow: 5px 5px 0px rgba(0, 0, 0, 0.1);}

@media screen and (max-width: 1024px) {
  .cont-img {width: 100%;}
  .cont-img img {width: 100%;}
  .cont-img.over {width: calc(100% + 40px); margin-left: -20px;}
}

@media screen and (max-width: 480px) {
  img.pull-right, img.pull-left {width: 100%; max-width: 100%;}
}

/*---------------------------------------------------------
5. page
--------------------------------------------------------- */

.page section { padding-top: 0px; padding-bottom: 12px; }
/* .page article {margin-bottom: 80px;}
.page article:last-child {margin-bottom: 0;} */
.page h1, .title-heading { 
  line-height: 1.2; font-weight: 200; letter-spacing: -0.05em; 
}
.page h1:after {background:#aaa; content:""; display:block; height:3px; width:30px; margin:20px 0 40px 0;}
.page h1 span { 
  font-weight: 700; color: transparent; 
  background: linear-gradient(90deg, #113f8c, #457B95, #2c3691 );
  background-clip: text;
  -webkit-background-clip: text;
}
.page .heading {margin-bottom: 60px; }
.page .heading h1 { text-align: center;}
.page .heading h1:after { margin: 20px auto 20px;}
.page .heading h1 span {color: #222;}
.page h2 {font-weight: 400;}
.page h3 {font-weight: 200;}
.page h3 span {font-weight: 600;}
.page h4 {position: relative; padding-left: 20px; font-weight: 400;}
.page h4 span {font-weight: 700;}
.page h4::after {
    position:absolute;
    content:" ";
    top: 50%;
    left:0;
    transform: translateY(-50%);
    height:60%;
    width:5px;
    background:var(--point-1);
    border-radius: 3px;
}
.page p {margin-bottom: 20px;}

.p-red {color: var(--point-4);}


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

}

@media screen and (max-width: 768px) {
  .page h1,  .title-heading { font-size: 32px; line-height: 42px;font-family: inherit; text-align: center;}
  .page h1:after {margin:10px auto 40px;}
  .page h1, .page p.lead { text-align: center; }
}

@media screen and (max-width: 768px) {
  .page h1,  .title-heading { font-size: 28px; line-height: 1.3;font-family: inherit; text-align: center;}
}  

/* ------------------------------------------------------------------ */
/* About Styles
/* ------------------------------------------------------------------ */
.about-list {}
.about-list ul { display:table;}
.about-list ul li {position:relative; margin-top:15px; min-height:50px; padding-left:80px; line-height:50px; font-size:18px;}
.about-list ul li:before {content:"";display:block;position:absolute;top:10%;left:60px;width:1px;height:80%;background:#eee;transform-origin:center;transform:rotate(15deg)}
.about-list ul li .num {position:absolute; top:0; left:0; line-height:50px; font-size:40px; font-weight:700; font-style:italic; color:#ddd; }

@media (max-width:991px){
    .about-list ul li {min-height:40px;padding-left:60px;line-height:20px;font-size:15px;font-weight:400}
    .about-list ul li:before {left:45px}
    .about-list ul li .num {line-height:40px;font-size:30px}
}
@media (max-width: 810px){
    #team-wrapper .member {padding: 0 10px;}
    .about-list ul li {min-height:inherit;padding-left:40px}
    .about-list ul li:before {left:30px;height:20px}
    .about-list ul li .num {line-height:20px;font-size:20px}
    .about-list h4 br,.about-list ul li br {display:none}
}


.txt-point {
  font-family: var(--font-1);
  text-align: center; font-weight: 700; line-height: 1.3;
  color: transparent; 
  background: linear-gradient(90deg, #457B95 10%, #2c3691, #525C9F, #457B95 );
  background-clip: text;
  -webkit-background-clip: text;
}
span.l-font1 {font-size: 66px;}
span.l-font1 b {font-weight: 800;}
span.l-font2 {font-size: 36px; font-weight: 700;}

@media screen and (max-width: 640px) {
  .txt-point span {font-size: 28px;}
  span.l-font1 {font-size: 28px;}
  span.l-font2 {font-size: 28px;}

}

.sign span {padding-left: 20px;font-family: Shouting; font-size: 40px; color: var(--gray-3);}
@media (max-width: 810px){
  .sign span {font-size: 28px;}
}  

/* ------------------------------------------------------------------ */
/* Location Styles
/* ------------------------------------------------------------------ */
/* Location */
 h4.add {display:block; margin:20px 0 10px 5px; font-weight: 400; }
 .add_table {width:100%; border-top:2px solid #aaa; border-bottom: 1px solid #aaa; }
 .add_table td {padding: 8px 10px; border-bottom: 1px solid #aaa}
 .add_table td.sub{font-weight:700;}
 .map {display:block; margin-top: 20px; border: 0px solid #aaa }

  /* 카카오 맵 */
 .root_daum_roughmap {width: 100% !important; padding: 0 !important; border: none !important}
 .root_daum_roughmap .wrap_map {}
 .root_daum_roughmap .wrap_controllers {}

/* 카카오 버스안내 */
.cont_findway .ride_wayout { overflow:hidden}
.cont_findway .ride_wayout .list_ride { margin-bottom: 10px; padding:0 0 10px 30%; border-bottom: 1px dashed #ccc}
.cont_findway .tit_wayout {
  float:left;
  font-size:14px;
  font-weight:400;
  overflow:hidden;
  padding-top:6px;
  width:30%
}
.cont_findway .link_wayout {
  color:#000;
  display:inline-block;
  max-width:100%;
  overflow:hidden;
  text-decoration:none;
  vertical-align:top
}

@media screen and (max-width: 640px) {
  .cont_findway .ride_wayout {overflow: auto;}
  .cont_findway .tit_wayout {display: block; width: 100%;}
  .cont_findway .ride_wayout .list_ride {display: block; width: 100%; padding: 0 0 10px;}
  .cont_findway .list_ride li { display: block; width: 100%; padding-top:8px; position:relative}
}

.cont_findway .link_wayout:hover,
.cont_findway .ride_on .link_wayout { border-bottom:1px solid #000; color:#000}
.cont_findway .txt_number {
  color:#666;
  float:left;
  /* font-family:Arial,sans-serif; */
  font-size:14px;
  letter-spacing:0;
  padding-left:4px;
  vertical-align:top
}
.cont_findway .txt_busstop {
  color:#3d75cc;
  float:left;
  max-width:140px;
  overflow:hidden;
  text-decoration:none;
  text-overflow:ellipsis;
  white-space:nowrap
}
.cont_findway .tit_findway { margin-bottom: 10px;}
.cont_findway .station_ride .tit_findway { padding-bottom:1px}
.cont_findway .station_ride { border-top:1px solid #f2f2f2}
.cont_findway .station_ride .bg_bar { background:#ddd;  margin:6px 2px 0}
.cont_findway .list_ride li { overflow:hidden; padding-top:8px; position:relative}
.cont_findway .list_ride .ico_traffic { float:left; margin-right:6px}
.cont_findway .list_ride .num_ride {
  color:#666;
  float:left;
  /* font-family:Arial,sans-serif; */
  font-size:14px;
  height:auto;
  letter-spacing:0;
  line-height:16px;
  /* overflow:hidden; */
  width:100%
}
.cont_findway .list_ride .btn_more .ico_more { background-position:-120px -50px; height:2px; margin:11px auto 0; width:12px}
.cont_findway .check_list .list_ride .num_ride { height:16px}
.cont_findway .list_ride .bus_ride { overflow:hidden; position:relative}
.cont_findway .num_ride .txt_bustype {
  font-family:"\B9D1\C740   \ACE0\B515",Malgun Gothic,sans-serif;
  font-size:13px;
  line-height:13px;
  /* vertical-align:top */
}
.cont_findway .num_ride .bg_bar { margin:3px 4px 0}
.cont_findway .list_ride .btn_more { height:26px; position:absolute; right:3px; top:-5px; width:26px}
.cont_findway .list_ride .btn_more .ico_more { background-position:-120px -50px; height:2px; margin:11px auto 0; width:12px}
.cont_findway .txt_caution { color:#888; overflow:hidden; padding:6px 0 0 11px}
.cont_findway .txt_caution .ico_dot { background-position:-130px -60px; float:left; height:4px; margin:9px 0 0 -11px; width:4px}

.ico_traffic {
  background:url(//t1.daumcdn.net/localimg/localimages/07/2018/pc/ico_traffic_240304.png) no-repeat;
  display:inline-block;
  font-size:0;
  line-height:0;
  line-height:999px;
  overflow:hidden;
  vertical-align:top
}
.bus_green { background-position:-60px -410px; height:16px; width:26px}
.bus_country { background-position:0 -430px; height:16px; width:33px}
.bus_town { background-position:-330px -410px; height:16px; width:26px}

.bg_bar {
  background:#e5e5e5;
  display:inline-block;
  height:10px;
  text-indent:-9999px;
  vertical-align:top;
  width:1px
}
.screen_out{overflow:hidden;position:absolute;width:0;height:0;line-height:0;text-indent:-9999px}
.ico_comm {
  background:url(//t1.daumcdn.net/localimg/localimages/07/2018/pc/ico_detail_240813.png) no-repeat;
  background-repeat:no-repeat
}
.ico_comm {
  display:block;
  font-size:1px;
  line-height:0;
  overflow:hidden;
  text-indent:-9999px
}

/* ------------------------------------------------------------------ */
/* First Aid Styles
/* ------------------------------------------------------------------ */
#first-aid {}

.header ul.circle {min-height: auto;}


ul.circle { margin:20px 0 0 0; min-height: 240px;}
ul.circle.mhnone {min-height: auto;}
ul.circle li { position:relative; margin-bottom:10px; padding-left: 20px; font-size: 16px; line-height: 1.6; list-style: none; }
ul.circle li:after {
    content: "";
    position: absolute; top: 9px; left: 0;
    /* margin-top: -3px; */
    width: 6px; height: 6px;
    border-radius: 50%; background-color: #bbb;
}
ul.circle p {font-size: 16px; line-height: 1.6; }

@media screen and (max-width: 640px) {
    .in_cont {padding: 20px;}
    ul.circle {min-height: auto;}
    ul.circle li {font-size: 14px;}
}

/* list */
.list_wrap {display: flex; flex-wrap: wrap; width: calc(100% + 20px); margin-left: -10px;}
.list_wrap ul {
  position: relative; 
  /* height: 100%;  */
  margin: -2px 2px 5px;  padding: 20px 20px 20px; 
  /* background: #f2f2f2;   */
  border-radius: 7px; 
  border: 1px dashed #e5e5e5;
  z-index: 0
}
.list_wrap .p-red {font-size: 16px; font-weight: 400; color: var(--point-4);}
/* .list_wrap ul li { line-height: 1.5;} */

.list {position: relative; width: calc((100% / 4) - 60px); margin: 0px 30px 30px 30px; }
.list .ttl {
    width: 100%; padding: 10px 20px; text-align: center; color: #fff; font-weight: 700; background: #85a222; border-radius: 30px; box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
.list li {}
.list ul li {}

/* list 02 */
.list02-01 {position: relative; width: calc(100% - 20px); margin: 0px 10px 30px 10px; }
.list02-02 {position: relative; width: calc((100% / 2) - 20px); margin: 0px 10px 30px 10px; }
.list02-03 {position: relative; width: calc((100% / 3) - 20px); margin: 0px 10px 30px 10px; }
.list02-03 .ttl, .list02-01 .ttl , .list02-02 .ttl {
    position: relative; 
    width: 100%; 
    padding: 10px 20px; 
    text-align: center; color: var(--point-2); font-weight: 700; 
    background: radial-gradient(at center left, rgba(255,255,255,0.1) 0%, rgba(0,0,0,0.1) 120%) #DDE3EE;
    background-blend-mode: multiply,multiply;
    border-radius: 10px; box-shadow: 0 0 2px rgba(0,0,0,0.3);
    z-index: 1
}

.txt-box-cont {display: flex; flex-wrap: wrap; width: calc(100% + 30px); margin-left: -15px; }
.txt-box-cont .txt-box-wrap {width: calc((100% / 2) - 30px) ; margin:0 15px 15px; padding: 30px; border: 1px dashed #e5e5e5}
.txt-box-cont.full .txt-box-wrap {width: 100%; margin: 0 0 15px;}


@media screen and (max-width: 640px) {
    .list, .list02-01, .list02-02, .list02-03  {width: 100%; margin-bottom: 60px;}
    /* .list:after, .list02:after {top: auto; bottom: -50px; left: 50%; margin-top: 0; margin-left: -18px; transform: rotate(90deg);} */
}

.img_box_wrap {display: flex; width: calc(100% + 20px); margin-left: -10px;}
.img_box_wrap.img2 {flex-wrap: wrap;}
.img_box_wrap.img2 .img_box {width: calc(100% / 2); }
.img_box_wrap .img_box {padding: 10px; }
.img_box img{padding: 7px; border: 1px solid #e5e5e5; border-radius: 2px; box-shadow: 0 2px 3px rgba(0, 0, 0, 0.05)}

@media screen and (max-width: 640px) {
  .img_box_wrap {flex-wrap: wrap;}
  .img_box_wrap.img2 .img_box {width: 100%; }
}





#edu h4 {margin:0 0 10px;}


/* #edu ul.circle li:after { margin-top: -3px;} */
#edu ul.circle li h5 {margin-bottom: 5px;}
#edu ul.circle li span {font-size: 16px;}

#edu ul.num { counter-reset: ctr;}
#edu ul.num li { counter-increment: ctr; margin-bottom: 10px; font-size: 16px;  line-height: 1.6;}
#edu ul.num li::before {
  display: inline-block;
  margin-right: 5px;
  content: counter(ctr) ".";
  /* counter-increment: ctr; */
  font-weight: 500;
  /* line-height: 1; */
  /* color: #666; */
}


@media screen and (max-width: 640px) {
  .txt-box-cont .txt-box-wrap {width: 100%;}
}  




/* Tab */
.worko-tabs {}
.worko-tabs .state { position: absolute; left: -10000px;}
.worko-tabs .flex-tabs { display: flex; justify-content: space-between; flex-wrap: wrap;}
.worko-tabs .flex-tabs .tab { flex-grow: 1; }
.worko-tabs .flex-tabs .panel {
  background-color: #fff;
  padding: 60px 0 0px;
  min-height: 300px;
  display: none;
  width: 100%;
  flex-basis: auto;
}
.worko-tabs .tab {
  display: inline-block;
  /* margin-left: -1px; */
  padding: 10px;
  vertical-align: top;
  text-align: center;
  font-weight: 700;
  background-color: #fff;
  cursor: hand;
  cursor: pointer;
  /* border-left: 10px solid #ccc !important; */
  border: 1px solid #ccc;
  border-radius: 30px;
}
.worko-tabs .tab:hover { background-color: #fff;}

#tab-one:checked ~ .tabs #tab-one-label,
#tab-two:checked ~ .tabs #tab-two-label,
#tab-three:checked ~ .tabs #tab-three-label,
#tab-four:checked ~ .tabs #tab-four-label {
  color: #fff;
  background: radial-gradient(at center center, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.3) 120%) var(--point-1);
  background-blend-mode: multiply,multiply;
  cursor: default;
  border: 1px solid #eee;
}

#tab-one:checked ~ .tabs #tab-one-panel,
#tab-two:checked ~ .tabs #tab-two-panel,
#tab-three:checked ~ .tabs #tab-three-panel,
#tab-four:checked ~ .tabs #tab-four-panel { display: block;}

@media (max-width: 640px) {
    .worko-tabs .tab {font-size: 16px;}
}


/* ------------------------------------------------------------------ */
/* business Styles
/* ------------------------------------------------------------------ */





/* ------------------------------------------------------------------ */
/* formmail Module Styles
/* ------------------------------------------------------------------ */
.formmail .formmail_title_bgcolor {background: none;}

.formmail .formmail_title_bgcolor font {display: block; width: 90%; margin: 5px; padding: 5px; font-size: 14px; line-height: 24px; border-radius: 3px;}
#formmail .formmail .formmail_cell_bgcolor tr:first-child {display: flex; flex-wrap: wrap;} 
.formmail .formmail_title_bgcolor, .formmail .formmail_cell_bgcolor {float:none !important;vertical-align: top; }
.formmail .btn-area {margin-top: 20px;}
.formmail .btn-area input {margin: 0;}