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

 /* 카카오 맵 */
 .root_daum_roughmap {width: 100% !important; padding: 0 !important; border: none !important}
 .root_daum_roughmap .wrap_map {}
 .root_daum_roughmap .wrap_controllers {}
/* ------------------------------------------------------------------ */
/* Common Styles
main : 7ed8d3    blue
point : 104380   blue
point : 2483cc   blue
point : 76a5ad   blue

'Noto Sans KR', 'Noto Sans KR', sans-serif, 'Noto Sans KR', 'FontAwesome', "Font Awesome 5 Free"

@media screen and (max-width: 768px) {
}
@media screen and (max-width: 640px) {
}
@media screen and (max-width: 480px) {
}
*/
/* ------------------------------------------------------------------ */
article {margin-bottom: 80px;}
/* article:last-child {margin-bottom: 0;} */

/*---------------------------------------------------------
  2. Typography
  Vertical rhythm with leading derived from 6
--------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 { font-family: inherit;  }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }
h1 { font-size: 48px; line-height: 48px; }
h2 { font-size: 36px; line-height: 42px; }
h3 { font-size: 28px; line-height: 30px; }
h4 { font-size: 24px; line-height: 30px; }
h5 { font-size: 18px; line-height: 30px;}
h6 { font-size: 16px; line-height: 30px; }

p { font-family: 'Noto Sans KR', sans-serif; font-size: 18px; font-weight: 300; word-break: keep-all;}
p span {color: #7ed8d3; font-weight: 500;}
p img { margin: 0; }
p.lead { font: 26px/1.8 'Noto Sans KR', sans-serif; margin-bottom: 18px; color: #666; font-weight: 700; }
p.lead span {color: #104380; font-weight: 700;}
p.head { font: 22px/1.5 'Noto Sans KR', sans-serif; margin-bottom: 10px; color: #222; font-weight: 500; }
p.txtwrap {padding: 0 20px;}

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

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

@media screen and (max-width: 480px) {
  h1 { font-size: 32px; line-height: 42px; }
  h2 { font-size: 28px; line-height: 34px; }
  h3 { font-size: 24px; line-height: 28px; }
  h4 { font-size: 18px; line-height: 24px; }
  h5 { font-size: 16px; line-height: 20px; }
  h6 { font-size: 14px; line-height: 18px; }
  p.txtwrap {padding: 0;}
}
/* 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; }

/* Noto Sans KR */
.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;}

/* Noto Sans KR
.fw100 {font-weight: 100 !important;}
.fw300 {font-weight: 300 !important;}
.fw300 {font-weight: 300 !important;}
.fw400 {font-weight: 400 !important;}
.fw500 {font-weight: 500 !important;}
.fw700 {font-weight: 700 !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 { }

/*---------------------------------------------------------
4. Images
--------------------------------------------------------- */
img { height: auto; vertical-align: top;}
img.pull-right { margin: 12px 0px 0px 18px; }
img.pull-left { margin: 12px 18px 0px 0px; }
i {font-style: normal;}
.cont-img {width: 100%;  margin:0 0 30px 0px; padding-bottom: 3%; background: url('../images/slider_shadow.png') bottom center no-repeat;  background-size: 100%;}
.cont-img img {width: 100% ; margin:0;}
.cont-img2 {margin:0 0 30px 0px; }
.cont-ov-img {width: 100%;  margin:0 0 30px -30px;}
.cont-ov-img img {width: 100% ; margin:0;}

@media screen and (max-width: 768px) {
    .cont-img {margin-left: -20px; padding-bottom: 12px; width: calc(100% + 40px);}
    .cont-img2 img {width: 100% ; margin:0;}

}


/* ------------------------------------------------------------------ */
/* Sub Page visual
/* ------------------------------------------------------------------ */
.sub-visual {position: relative; height: 360px;}
.sub-visual .slogan-wrap {position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 1280px; text-align: center;}
.sub-visual .slogan-wrap .slogan {margin-bottom: 0px; /*font-family: 'Noto Serif KR', serif;*/ font-size: 28px; color:#888; line-height: 1.5; font-weight: 500; word-break: keep-all;}
.sub-visual .slogan-wrap a {}
.sub-visual .img1 {position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: url('../images/bg-sub.jpg') 50% 50%/cover no-repeat;}

@media screen and (max-width: 768px) {
    .sub-visual {height: 350px;}
    .sub-visual .slogan-wrap {width: 80%;}
    .sub-visual .slogan-wrap .slogan {font-size: 30px;}
}
@media screen and (max-width: 480px) {
    .sub-visual {height: 320px;}
    .sub-visual .slogan-wrap .slogan {font-size: 22px;}
    .sub-visual .img1 {background-position: 37% 50%}
}
/*---------------------------------------------------------
5. page
100,300,400,500,700,900
--------------------------------------------------------- */

.page section { }
.page h1, .title-heading {margin-bottom: 40px; line-height: 1.2; font-weight: 300; letter-spacing: -0.05em; text-align: center;}
/*  .page h1:after{
	position:absolute;
	content:" ";
	top:5%;
	left:0;
	height:90%;
	width:3px;
	background:#000;
}  ----*/
.page h1 span {color: #7ed8d3; font-weight: 700;}
.page h2 {font-weight: 400;}
.page h3 {position: relative; margin-bottom: 20px; padding-left: 10px; color: #444; font-weight: 500; }
.page h3::after {
    position:absolute;
    content:" ";
    top: 10%;
    left:0;
    height:90%;
    width:3px;
    background:#000;
}
.page h3 span {font-weight: 700;}
span.bar {display: block; width: 1px; height: 30px; background-color: #222; margin: 20px auto 20px;}

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

}

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

/* ------------------------------------------------------------------ */
/* Sub Page title
/* ------------------------------------------------------------------ */
/* page title */
#page-title {
    margin-top: 0;
    padding-top: 40px;
    padding-bottom: 0;
    border-top: 0px solid #e5e5e5;
    overflow: hidden;
    background: #eee;
 }
#page-title .title-img { position: relative; height: 300px; background: url("../images/1.jpg") repeat-x scroll 50% 50% / cover; }
#page-title .title-img .title_wrap { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
#page-title h1 { padding: 0; margin: 0; font-size: 36px; line-height: 1; color: #444; text-align: center; text-shadow: 0px 1px 5px rgba(0, 0, 0, .0); font-weight: 700;}
#page-title h1 span, #page-title a { color: #f2da00; }
#page-title p { padding: 0; margin: 12px 5% 0; font-size: 18px; line-height: 36px; color: #ccc; text-shadow: 0px 1px 2px rgba(0, 0, 0, .0); }
#page-title .root { color: #222;}
#page-title .root span { padding: 0 5px;}
@media screen and (max-width: 1024px) {
}
@media screen and (max-width: 768px) {
    #page-title { padding-top: 20px;}
    #page-title .title-img { height: 150px;}
    #page-title .title-img::before { background-position: top;}
    #page-title h1 { font-size: 24px; }
    #page-title p { font-size: 13px; }
    #page-title .root {font-size: 12px;}
}

/* page cont_header */
#cont_header.header_bg01 { background: #f5f5f5; margin-bottom: 60px;} /* header bg */
#cont_header .cont_title { padding: 60px 0 !important; padding: 0; text-align: center;}
#cont_header .cont_title hr {
    border: solid #888;
	border-width: 2px 0 0;
	width: 230px;
	margin: 0 auto 0 auto;
	height: 0;
	clear: both;
	text-align: left; }
    #cont_header .cont_title p {margin-top: 20px; font-size: 13px; text-align: center; text-transform: uppercase;  letter-spacing: 0.25em;}
    #cont_header .cont_title h1 {font-size: 36px; font-weight: 700; letter-spacing: 0.1em; color: #888;margin-bottom: 0;}

@media screen and (max-width: 768px) {
    #cont_header { margin-left: -20px; width: calc(100% + 40px);}
    #cont_header .cont_title hr {width: 180px;}
    #cont_header .cont_title p {font-size: 12px;}
    #cont_header .cont_title h1 {font-size: 22px;}
}

.cont_style p {margin-bottom: 30px;}
.cont_style dl {margin-bottom: 30px;}
.cont_style dl dd {margin-bottom: 10px;}
.cont_style ul {margin-bottom: 30px;}
/* ------------------------------------------------------------------ */
/* About Styles
/* ------------------------------------------------------------------ */
#about01 {}
#about01 .s01 .txt-1 {}
#about01 .s01 .head {margin-bottom: 30px; color: #666;}
@media screen and (max-width: 768px) {
    #about01 .s01 .txt-1 {margin-bottom: 30px;}
}

#about01 .s02 {margin-bottom: 0; padding: 100px 0; background: #fff;}
#about01 .s02 h1 {margin-bottom: 20px; font-size: 50px; color: #222; font-weight: 700;}
#about01 .s02 h1 span {font-family: Arial, Sans-Serif; color: #fff;}
/* #about01 .s02 h1:first-of-type {  font-size: 70px; font-weight: 700; color:#fff; background: linear-gradient(90deg,#7ed8d3,#376bcc,#2483cc); -webkit-background-clip: text;  -webkit-text-fill-color: transparent; } */
/* ------------------------------------------------------------------ */
/* History 2 Styles
/* ------------------------------------------------------------------ */
/*-- GENERAL STYLES ------------------------------*/
.timeline { line-height: 1.4em; list-style: none; margin: 0; padding: 0; width: 100%; }
.timeline h1, .timeline h2, .timeline h3, .timeline h4, .timeline h5, .timeline h6 { line-height: inherit; }

/*----- TIMELINE ITEM -----*/
.timeline-item { padding-left: 40px; position: relative; }
.timeline-item:last-child { padding-bottom: 0; }
li.timeline-item {margin:0;}

/*----- TIMELINE INFO -----*/
.timeline-info { margin: 0 0 .5em 0; padding-top:2px; font-family: 'Barlow','Noto Sans KR', sans-serif; font-size: 18px; font-weight: 800; line-height: 1.3; letter-spacing: 3px; text-transform: uppercase; white-space: nowrap; }

/*----- TIMELINE MARKER -----*/
.timeline-marker { position: absolute; top: 0; bottom: 0; left: 0; width: 15px; }
.timeline-marker:before { background: #7ed8d3; border: 3px solid transparent; border-radius: 100%; content: ""; display: block; width: 15px; height: 15px; position: absolute; top: 4px; left: 0; transition: background 0.3s ease-in-out, border 0.3s ease-in-out; }
.timeline-marker::after { content: ""; width: 3px; background: #CCD5DB; display: block; position: absolute; top: 24px; bottom: 0; left: 6px; }
.timeline-item:last-child .timeline-marker:after { content: none; }
.timeline-item:not(.period):hover .timeline-marker:before { background: transparent; border: 3px solid #7ed8d3; }

/*----- TIMELINE CONTENT -----*/
.timeline-content { padding-bottom: 20px; }
.timeline-content h3 {margin-bottom:10px;}
.timeline-content p {padding-top:0px;font-family: 'Barlow','Noto Sans KR', sans-serif;line-height: 1.3;}
/* .timeline-content p span {display: inline-block; padding-right:10px; font-weight: bold; letter-spacing: 3px; margin: 0 0 .5em 0; text-transform: uppercase; white-space: nowrap;} */
.timeline-content p:last-child { margin-bottom: 0; }

/*----- TIMELINE PERIOD -----*/
.period { padding: 0; }
.period .timeline-info { display: none; }
.period .timeline-marker:before { background: transparent; content: ""; width: 15px; height: auto; border: none; border-radius: 0; top: 0; bottom: 30px; position: absolute; border-top: 3px solid #CCD5DB; border-bottom: 3px solid #CCD5DB; }
.period .timeline-marker:after { content: ""; height: 32px; top: auto; }
.period .timeline-content { padding: 40px 0 70px; }
.period .timeline-title { margin: 0; }

/*--    MOD: MARKER OUTLINE
----------------------------------------------*/
.marker-outline .timeline-marker:before { background: transparent; border-color: #66b395; }
.marker-outline .timeline-item:hover .timeline-marker:before { background: #7ed8d3; }

@media (min-width: 768px) {
  /* ------------------------------------------------------------------ */
  /* History Styles
  /* ------------------------------------------------------------------ */
  .timeline-2,
  .timeline-2 .timeline-item,
  .timeline-2 .timeline-info,
  .timeline-2 .timeline-marker,
  .timeline-2 .timeline-content { display: block; margin: 0; padding: 0; }
  .timeline-2 .timeline-item { padding-bottom: 40px; overflow: hidden; }
  .timeline-2 .timeline-marker { position: absolute; left: 80px; margin-left: -7.5px; }
  .timeline-2 .timeline-info{float: left; width:80px; padding-top:2px; padding-right: 20px; text-align:right;}
  .timeline-2 .timeline-content { float: left; width: auto; padding-left: 30px; text-align:left;}
  .timeline-2 > .timeline-item.period .timeline-content { float: none; padding: 0; width: 100%; text-align: left; }
  .timeline-2 .timeline-item.period { padding: 40px 0 60px; }
  .timeline-2 .period .timeline-marker:after { height: 30px; bottom: 0; top: auto; }
  .timeline-2 .period .timeline-title { left: auto; }

	.timeline-centered,
	.timeline-centered .timeline-item,
	.timeline-centered .timeline-info,
	.timeline-centered .timeline-marker,
	.timeline-centered .timeline-content { display: block; margin: 0; padding: 0; }
	.timeline-centered .timeline-item { padding-bottom: 60px; overflow: hidden; }
	.timeline-centered .timeline-marker { position: absolute; left: 50%; margin-left: -7.5px; }
	.timeline-centered .timeline-info,
	.timeline-centered .timeline-content { width: 50%; }
  .timeline-centered .timeline-info {padding-top: 0;}
	.timeline-centered > .timeline-item:nth-child(odd) .timeline-info { float: left; text-align: right; padding-right: 30px; }
	.timeline-centered > .timeline-item:nth-child(odd) .timeline-content { float: right; text-align: left; padding-left: 30px; }
	.timeline-centered > .timeline-item:nth-child(even) .timeline-info { float: right; text-align: left; padding-left: 30px; }
	.timeline-centered > .timeline-item:nth-child(even) .timeline-content { float: left; text-align: right; padding-right: 30px; }
	.timeline-centered > .timeline-item.period .timeline-content { float: none; padding: 0; width: 100%; text-align: center; }
	.timeline-centered .timeline-item.period { padding: 50px 0 90px; }
	.timeline-centered .period .timeline-marker:after { height: 30px; bottom: 0; top: auto; }
	.timeline-centered .period .timeline-title { text-align: center; }
}



#about01 .s03 {padding: 80px 0;}


#about02 {}
#about02 .txt-point-wrap {position: relative; width: 100%; height: 0; padding-bottom: 60%; background: url('../images/txt-point-bg.jpg') no-repeat 50% 50% / cover; border-radius: 5px;}

/* ------------------------------------------------------------------ */
/* Location Styles
/* ------------------------------------------------------------------ */
/* Location */
 h4.add {display:block; margin:20px 0 10px 5px; font-weight: 400; }
 .map_info { width:100%; padding: 20px;border:0px solid #dfdfdf; background-color:#fff; }
 .map_info h4 {margin-bottom: 30px;}
 .map_info ul {font-size: 16px;}
 .map_info ul li {padding: 10px 10px 10px 100px;}
 .map_info ul li span.tit {display:inline-block; width:100px; margin-left: -100px; color:#444; font-weight: 700; }
 .map_info ul li span.add {}

.map iframe {width: 100%; border: 1px solid #e5e5e5 !important}

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

@media screen and (max-width: 640px) {
     .map_info {margin-bottom: 30px;}
}

/* ------------------------------------------------------------------ */
/* Team Styles
/* ------------------------------------------------------------------ */


#team-wrapper {text-align: center; }
#team-wrapper .member { margin-bottom: 20px; margin-top: 10px; padding: 0 20px; }
#team-wrapper img { margin-bottom: 12px; border-radius: 50%}
#team-wrapper .member-name {text-align: center;}
#team-wrapper .member-name h5 { }
#team-wrapper .member-name span {top: -6px; font-size: 13px; line-height: 18px; color: #999; }
#team-wrapper .member-social { font-size: 24px; margin: 10px 0 0 0; padding: 0; }
#team-wrapper .member-social li { display: inline-block; margin: 0 7px; }
#team-wrapper .member-social li a { color: #999; }
#team-wrapper .member-social li a:hover { color: #f2da00; }







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

/* business box */
#business-wrapper .member {width: 50%; }
#business-wrapper .box { margin-bottom: 20px; margin-top: 10px; }
#business-wrapper img { margin-bottom: 12px; width: 100%; }
#business-wrapper h5 { font: 18px/24px "Noto Sans KR", sans-serif; font-weight: 700;color: #376bcc;}
#business-wrapper span { position: relative; top: -1px; font-size: 14px; line-height: 18px; color: #969696; }