/* 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
75a9d5
main : 32742c    green
point : 70d900   green
point : 9fd900   green
point : b8d900   green
point : 75a9d5   yellow
point : 222      gray
'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 {padding: 80px 0;}
article:first-of-type {padding: 20px 0 80px;}
article:nth-child(even) {background: #f5f5f5;}
article:last-child {margin-bottom: 0;}
@media screen and (max-width: 768px) {
    article {padding-left: 20px !important; padding-right: 20px !important;}
}
@media screen and (max-width: 640px) {
    article {padding: 40px 0;}
    article:first-of-type {padding: 0px 0 40px;}
}
/*---------------------------------------------------------
  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; color: #444; font-weight: 300; word-break: keep-all;}
p span {color: #75a9d5; font-weight: 700;}
p img { margin: 0; }
p.lead { font: 26px/1.8 'Noto Sans KR', sans-serif; margin-bottom: 20px; color: #444; font-weight: 500; text-align: center; }
p.head { font: 22px/1.1 'Noto Sans KR', sans-serif; margin-bottom: 10px; color: #444; 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: 18px;}
  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: 22px; line-height: 26px; }
  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;}
  p.txt1 { font-size: 14px !important; line-height: 18px; font-weight: 400; }
}
/* 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 { }
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 {width: 100%;  margin:0 0 30px 0px;}
.cont-img2 img {width: 100% ; margin:0;}
.cont-ov-img {width: 100%;  margin:0 0 30px -30px;}
.cont-ov-img img {width: 100% ; margin:0;}

.img-box { text-align: center; }
.img-box img { width:1000px; }
.img-box2 { display: none; }

@media screen and (max-width: 900px) {
.img-box { text-align: center; }
.img-box img { width: 100%; }
}
@media screen and (max-width: 768px) {
.cont-img {margin-left: -20px; padding-bottom: 12px; width: calc(100% + 40px);}
}
@media screen and (max-width: 480px) {
.img-box { display:none;  }
.img-box2 { display:block; }
}

/* ------------------------------------------------------------------ */
/* Sub Page visual
/* ------------------------------------------------------------------ */
.sub-visual {position: relative; height: 320px;}
.sub-visual .slogan-wrap {position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 800px; text-align: center;}
.sub-visual .slogan-wrap .slogan {margin-bottom: 30px; font-size: 42px; color: #fff; line-height: 1.4; font-weight: 700; word-break: keep-all; text-shadow: 0px 1px 5px rgba(0, 0, 0, .4); }
.sub-visual .slogan-wrap a {}
.sub-visual .img1 {position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: url("../images/3.jpg") 50% 50%/cover no-repeat;}
.sub-visual .img2 {position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: url("../images/2.jpg") 50% 50%/cover no-repeat;}
.sub-visual .img3 {position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: url("../images/1.jpg") 50% 50%/cover no-repeat;}
.sub-visual .img4 {position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: url("../images/menu2/business-01.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: 24px;}
}
/* page title */
#page-title {
    margin-top: 0;
    padding-top: 60px;
    padding-bottom: 60px;
    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;}
}

/*---------------------------------------------------------
5. page
100,300,400,500,700,900
--------------------------------------------------------- */

.page section { }
.page h1 {line-height: 1.2; font-weight: 300; letter-spacing: -0.05em; }
/*  .page h1:after{
	position:absolute;
	content:" ";
	top:5%;
	left:0;
	height:90%;
	width:3px;
	background:#000;
}  ----*/
.page h1 span {color: #1b2020; font-weight: 700;}
.page h2 {font-weight: 400;}
.page h3 {position: relative; padding-left: 30px; font-weight: 500; color: #444;}
.page h3 span {display: block; font-size: 18px; font-weight: 500; color: #999;}
.page h3:after {
    position:absolute;
    content:" ";
    top: 12px;
    left:0;
    height:2px;
    width:20px;
    background:#444;
}
.page h4 {position: relative; margin-bottom: 20px; padding-left: 10px; font-weight: 300; }
.page h4::after {
    position:absolute;
    content:" ";
    top: 10%;
    left:0;
    height:90%;
    width:3px;
    background:#000;
}
.page h4 span {font-weight: 700;}
span.bar {display: block; width: 1px; height: 20px; background-color: #222; margin: 15px 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; }
  .page h3 {margin-bottom: 30px; padding-left: 20px;}
  .page h3:after {width: 10px;}
  span.bar {height: 15px;margin: 10px auto 10px;}
}

/* ------------------------------------------------------------------ */
/* Sub Page title
/* ------------------------------------------------------------------ */
/* 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 #666;
	border-width: 2px 0 0;
	width: 240px;
	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.4em}
#cont_header .cont_title h1 {font-size: 36px; font-weight: 700; letter-spacing: 0.1em; color: #222;}
#cont_header .cont_title h1 span {display: block; margin-top: 10px; font-size: 24px; font-weight: 500; letter-spacing: 0; color: #444;}

@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_header .cont_title h1 span { font-size: 16px; line-height: 1.2;}
}

.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;}


.ttl-hd {line-height: 1.2; font-weight: 300; letter-spacing: -0.05em; text-align: center;}
/* ------------------------------------------------------------------ */
/* About Styles
/* ------------------------------------------------------------------ */
#about01 {}

#about01 p {}
p.txt1 {font: 22px/1.5 'Noto Sans KR', sans-serif; margin-bottom: 10px; color: #444; font-weight: 500;}
p.txt2 { font-size: 18px; font-weight: 400; }

@media screen and (max-width: 480px) {
    p.txt2 { font-size: 14px;  }
}
/* ------------------------------------------------------------------ */
/* box Section - Main Page
/* ------------------------------------------------------------------ */
.s03 #box {
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    align-items: stretch;
    max-width: 1440px;
    margin: 0 auto;
}
.s03 #box .box_container {
    -webkit-box-flex: 1;
    flex-grow: 1;
	width: 33.333%;
    margin: 5px;
    padding: 50px 55px 50px;
 }
.s03 #box .box_container:nth-child(1) {
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(27, 31, 37, 0.7)), url("../images/menu1/about-s03-01.jpg") no-repeat 50% 50% / cover;
}
.s03 #box .box_container:nth-child(2) {
    background: linear-gradient(rgba(117, 169, 213, 0.9), rgba(117, 169, 213, 0.9)), url("../images/menu1/about-s03-02.jpg") no-repeat 50% 50% / cover;
}
.s03 #box .box_container:nth-child(3) {
    background: linear-gradient(45deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("../images/menu1/about-s03-03.jpg") no-repeat 50% 50% / cover;
}
.s03 #box .box_container .box-inner {color: #fff;}

.s03 #box .box_container .box-inner h3 {padding: 0; font-weight: 700; line-height: 1.2; color: #fff; text-align: center; margin-bottom: 30px;}
.s03 #box .box_container .box-inner h3::after {display: none;}
.s03 #box .box_container .box-inner p {font-size: 24px; font-weight: 500; line-height: 1.2; text-align: center; color: #fff; text-transform: uppercase; word-break: keep-all;}

.s03 #box.box33 {}
.s03 #box.box33 .box_container, .s03 #box.box33 .box_container:nth-child(1), .s03 #box.box33 .box_container:nth-child(2),.s03 #box.box33 .box_container:nth-child(3) { padding: 45px; background: #f0f0f0; }
.s03 #box.box33 .box_container .box-inner {color: #444;}
.s03 #box.box33 .box_container .box-inner p {font-size: 18px; font-weight: 500; line-height: 1.4; text-align: center; color: #444; text-transform: uppercase; word-break: keep-all;}


.vision-box #box .box_container { background-position-y: 0; padding:0;display: flex; flex-direction: column;  justify-content: space-between; }
.vision-box #box .box_container .box-inner { padding: 50px; }
.vision-box #box .box_container .box-inner2 { padding: 35px; background: #f0f0f0; height: 40%; }
.vision-box #box .box_container .box-inner2 p { font-size: 18px; font-weight: 500; line-height: 1.5; text-align: center; color: #444; }


@media screen and (max-width: 768px) {
	.s03 #box .box_container {padding: 30px 20px 20px 20px;}
	.s03 #box .box_container .box-inner h3 {margin-bottom: 10px; font-size: 16px;}
    .vision .box_container .box-inner h3 {  font-size: 24px;}
    .s03 #box .box_container .box-inner p {margin-bottom: 30px; font-size: 18px;}
	.vision-box #box .box_container { padding: 0; width: 100%;} 
	.vision-box #box .box_container .box-inner2 { padding: 25px; }
	.vision-box #box .box_container .box-inner2 p { font-size: 16px; line-height: 1.4;}
}
@media screen and (max-width: 640px) {
    .s03 #box {display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    flex-direction: column;
    }
	.vision-box #box .box_container .box-inner2 p { font-size: 15px; line-height: 1.3;}
}

#about01 .info-list {}
#about01 .info-list li {position: relative; margin-bottom: 20px;padding-left: 120px; padding-bottom: 10px; font-size: 18px; border-bottom:1px dashed #ddd;}
#about01 .info-list li span {position: absolute; left: 0;}

/* ------------------------------------------------------------------ */
/* Location Styles
/* ------------------------------------------------------------------ */
/* Location */
 h4.add {display:block; margin:20px 0 10px 5px; font-weight: 400; }
 .map_info { width:100%; padding: 0px;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 {}

 /* 카카오 맵 */
 .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;}
}
@media screen and (max-width: 480px) {
     #about01 .info-list li { font-size: 14px; }
}


/* ------------------------------------------------------------------ */
/* History 1 Styles
/* ------------------------------------------------------------------ */
.yearbox {position:relative; width:100%; min-height:195px; padding-left:440px; margin:0px 0 80px 0;}
.yearbox .head {position:absolute; left:0; top:0; width:370px; height:100%;}
.yearbox .head strong {display:block; position:relative; z-index:10; line-height:51px; font-weight:600; font-size:50px; color:#33373b;}
.yearbox .head p {position:relative; z-index:10; margin:20px 0 90px 0;}
.yearbox .head p span {display:inline-block; letter-spacing:-1px; position:relative; line-height:34px; font-weight:400; font-size:24px; color:#33373b;}
.yearbox .head p span:last-child {color:#444; font-size: 36px; font-weight:500; padding-top:10px; line-height:1.1;}
.yearbox .head p span:after {content:""; display:block; position:absolute; left:0; bottom:2px; width:100%; height:1px; background-color:#33373b;}
.yearbox .head p span:last-child:after {display:none;}
.yearbox .head .boxs img {display:block; width:100%;}
.yearbox .head .boxs img:not(:nth-child(1)) {margin-top:15px;}
.yearbox .midd {}
.yearbox .midd>ol {position:relative;}
.yearbox .midd>ol:before {content:""; display:block; position:absolute; left:12px; top:0; width:1px; height:100%; background-color:#ddd;}
.yearbox .midd>ol>li {position:relative; list-style:none;}
.yearbox .midd>ol>li:not(:nth-child(1)) {padding-top:10px;}
.yearbox .midd>ol>li:last-of-type {padding-bottom: 30px;}
.yearbox .midd>ol>li>strong {display:block; position:relative; line-height:24px; padding:5px 0 5px 50px;  font-size:28px; color:#75a9d5; background-color:#fff;}
.yearbox .midd>ol>li>strong:before,
.yearbox .midd>ol>li>strong:after {
	content:""; display:block; position:absolute; left:0; top:5px; width:24px; height:24px; background-color:#75a9d5;
	border-radius:50%;
	-webkit-border-radius:50%;
}
.yearbox .midd>ol>li>strong:before {opacity:0.1;}
.yearbox .midd>ol>li>strong:after {
	transform:scale(0.3);
}
.yearbox .midd>ol>li>ol {padding-bottom:20px; margin:10px 0 0 50px;}
.yearbox .midd>ol>li:not(:last-child)>ol {border-bottom:1px dashed #ddd; margin:20px 0 0 50px;}
.yearbox .midd>ol>li>ol>li {position:relative; list-style:none; padding-left:70px; margin:5px 0 10px;}
.yearbox .midd>ol>li>ol>li>strong {display:block; line-height:26px; position:absolute; left:0; top:0; font-size:18px; color:#444;}
.yearbox .midd>ol>li>ol>li>p {line-height:26px; margin:0;  font-size:18px; color:#596068;}

@media all and (max-width: 980px){
	.yearbox {padding-left:320px;}
	.tab-ul.clone {display:none !important;}
}
@media all and (max-width: 768px){
	.yearbox {padding-left:0; margin:40px 0;}
	.yearbox .head {position:relative; width:auto;}
	.yearbox .head p {width:100%; margin-bottom:30px;}
	.yearbox .head .boxs img {display:inline-block; width:auto; height:161px; vertical-align:top;}
	.yearbox .head .boxs img:not(:nth-child(1)) {margin-top:0;}
	.yearbox .midd {margin-top:40px;}
}
@media all and (max-width: 600px){
	.yearbox .head .boxs:after {content:""; display:block; clear:both;}
	.yearbox .head .boxs img {display:block; float:left; width:49%; height:auto;}
	.yearbox .head .boxs img:nth-child(2) {float:right;}
}
@media all and (max-width: 500px){
	.yearbox .head strong {line-height:41px; font-size:40px;}
	.yearbox .head p {margin:15px 0 20px 0;}
    .yearbox .head p span:last-child {font-size: 24px;}
	.yearbox .head p span {line-height:29px; font-size:20px;}
	.yearbox .midd {margin-top:20px;}
	.yearbox .midd>ol>li>strong {padding-left:40px; font-size:18px;}
	.yearbox .midd>ol>li>ol {margin-left:40px !important;}
	.yearbox .midd>ol>li>ol>li>strong,
	.yearbox .midd>ol>li>ol>li>p {font-size:14px;}
}


/* ------------------------------------------------------------------ */
/* business Styles
/* ------------------------------------------------------------------ */
/* ------------------------------------------------------------------ */
/* 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-size: 18px; font-weight: 800; line-height: 1.3; letter-spacing: 3px; text-transform: uppercase; color: #444; white-space: nowrap; }

/*----- TIMELINE MARKER -----*/
.timeline-marker { position: absolute; top: 0; bottom: 0; left: 0; width: 15px; }
.timeline-marker:before { background: #75a9d5; 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 #75a9d5; }

/*----- TIMELINE CONTENT -----*/
.timeline-content { padding-bottom: 20px; }
.timeline-content h3 {margin-bottom:10px;}
.timeline-content p {padding-top:2px; font-weight: 300; line-height: 30px; font-size: 16px; line-height: 24px;}
.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-content p strong { font-weight: 400; color: #444; }

/*----- 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: #75a9d5; }

@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: 40px; overflow: hidden; }
	.timeline-centered .timeline-marker { position: absolute; left: 50%; margin-left: -7.5px; }
	.timeline-centered .timeline-info,
	.timeline-centered .timeline-content { width: 50%; line-height: 1.5; }
  .timeline-centered .timeline-info {padding-top: 0; margin-top: -2px;}
	.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; color: #444;}
	.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; font-size: 30px; color: #75a9d5; font-weight: 700; line-height: 1; }
}
@media (min-width: 480px) {
    .timeline-content p { font-size: 14x; line-height:22px;}
    .timeline-content p strong { font-weight: 500; }
}
/* ------------------------------------------------------------------ */
/* business Styles
/* ------------------------------------------------------------------ */


.tbl_wrap {margin:0 0 30px 0px;}
/* Table */
.tbl01 {width: 100%; min-width: 400px;  border-top: 2px solid #293c74; border-bottom: 1px solid #293c74; }
.tbl01 th {width: 33.33%;padding: 10px; font-size: 16px; font-weight: 300; color: #eee; background: #293c74; border-left: 1px solid #e5e5e5; vertical-align: middle;}
.tbl01 th:first-child {border-left: none;}
.tbl01 td:nth-child(1) {width: 20%; border-left: none;}
.tbl01 td:nth-child(2) {width: 40%;}
.tbl01 td:nth-child(3) {width: 40%;}
.tbl01 tbody td.subject { text-align: center; color: #444; background: #f5f5f5; font-weight: 600;}
.tbl01 tbody td {
    padding: 15px 5px;
    color: #444;
    border-left: 1px solid #e5e5e5;
    border-top: 1px solid #e5e5e5;
    vertical-align: middle;
    text-align: center;
}
.tbl01 .top_line {font-weight: 500; color: #293c74; border-top: 1px solid #293c74}

@media screen and (max-width: 768px) {
  .tbl_wrap {width: 100%; overflow: auto;}
  .tbl01 th, .tbl01 td {font-size: 14px !important;}
}
/* ------------------------------------------------------------------ */
/* 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;background: #fff; border-radius: 1px; border: 1px solid #999;}
.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;}
@media screen and (max-width: 480px) {
    .formmail .formmail_title_bgcolor font {font-size: 12px;}
}
/* ------------------------------------------------------------------ */
/* Board Module Styles
/* ------------------------------------------------------------------ */
/* Board Common */
.bbsnewf5 {font:inherit !important}
.bbsnewf5 a:hover {color:#32742c !important}
.bbsnewf5 input {margin: 0;}
.board {font-family:inherit !important}

.ico-board {width:100%; margin-bottom:40px; border-top:2px solid #444}
.ico-board .att_title, .ico-board .att_title font {text-align: center; color: #666 !important ; background: none;}
.ico-board input[type=file] {width:80%}
.ico-board input[type=text], .ico-board input[type=password] {width:80%; }
.ico-board tbody td {font:inherit !important; font-size:16px !important; border-bottom:1px solid #eee; padding: 20px 0;}
.ico-board tbody td font, .ico-board tbody td span, .ico-board tbody td a {font:inherit !important; font-size:16px !important;}
.board_bgcolor, .board_bgcolor span {width:30% !important; font:inherit !important; color:#444 !important; background:#none !important}

#post_area {padding: 0;}
.prvThumbList {margin-top:40px}
.prvThumbList > table td table {width:135px}
div.nneditor-container .seResize2 span {font-size:0 !important}
.brd_btngroup {margin-top:50px}
.brd_btngroup a {margin-top:2px; margin-bottom:2px}
#check_all {margin-left:5px; vertical-align:-5px}
.board_bottom {margin-top:50px}
.board_bottom > a {float:right}
.board_admin_bgcolor {vertical-align: top;}
#ext_search {float:none}
table#search_table {float: none; width: 370px !important; margin: 0 auto !important;}
table#search_table .est_keyword_cell input {width: 94% !important ;}
.est_btn_cell {vertical-align:middle;}

.board_comment_bgcolor {padding-bottom:20px; background-color:#f9f9f9 !important}
.comment_txt {padding:10px 0 !important; word-break:}
.comment_txt:first-child {padding:20px !important}
.comment_txt textarea {width:60%; width:-webkit-calc(100% - 120px); width:-moz-calc(100% - 120px); width:calc(100% - 120px); height:50px; padding:10px; font:inherit !important; border:1px solid #e8e8e8; border-radius:3px}
.comment_txt > a.btn {margin:2px 0; padding:0 15px !important; height:30px !important; line-height:28px !important}
.comment_txt > font {display:block; margin-bottom:10px; color:#ccc !important}
@media screen and (max-width: 640px) {
  .ico-board tbody td.bbsetc_dateof_write { font-size:12px !important}
  .ico-board tbody td { font-size:12px !important; padding: 10px 0;}
  .ico-board tbody td font, .ico-board tbody td span, .ico-board tbody td a {font-size:12px !important;}

  #post_area img {width:100% !important; height:auto !important}
}


/* Gallery Style */
.gallery { }
.gallery > table {float:left; display:block; width:30.89% !important; margin:0 1.219% 10px 1.219%}
.gallery > table.board {float: none; }
.gallery td.bbsnewf5 {position:relative; overflow:hidden; border: 1px solid #e5e5e5}
.gallery td.bbsnewf5:hover, .gallery td.bbsnewf5:focus {box-shadow: 0 2px 3px rgba(0, 0, 0, 0.05); cursor: pointer; }
.gallery td.bbsnewf5 > table td a {display: block; overflow: hidden}
.gallery td.bbsnewf5 a > img {display:block; width:100%; height:auto !important; transition:all .5s ease}
.gallery td.bbsnewf5 a:hover > img {transform:scale(1.1)}

.gallery .hoverBox {position:absolute; display:block; top:0; left:0; width:100%; height:100%; padding:32% 30px 0 30px; text-align:center; background:rgba(0,0,0,.8); opacity:0; transition:all .5s ease}
.gallery .hoverBox .inner {}
.gallery .hoverBox .inner h3 {font-size:24px; font-weight:700; color:#fff; line-height:1.2}
.gallery .hoverBox .inner h3:after {display:block; width:40px; height:1px; margin:20px auto; content:''; background:#fff; opacity:.5}
.gallery .hoverBox .inner p {display:-webkit-box; color:#fff; max-height:69px; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; text-overflow:ellipsis}
.gallery .bbsnewf5:hover .hoverBox {opacity:1}
.gallery .board_write {text-align: right;}
.brd_paging {display:none; text-align:center}
.brd_paging > b, .brd_paging > a {display:inline-block; width:38px; height:38px; line-height:36px; text-align:center; margin:0 -2px; border:1px solid #e8e8e8}
.brd_paging > b {color:#fff; border-color:#666; background:#666}
.brd_paging > a {color:#666}
.brd_paging > a:hover {color:#555; border-color:#cdcdcd; background:#f4f4f4}

@media screen and (max-width: 1280px) {
    /* 제품소개 스타일 */
    .gallery .hoverBox {padding-top:20%}
    .gallery_inner .hoverBox .inner h3 {font-size:18px}
    .gallery_inner .hoverBox .inner p {font-size:12px; max-height:63px}
}

@media screen and (max-width: 768px) {
    /* 제품소개 스타일 */
    .gallery > table {width:46% !important; margin:0 2% 20px 2%;}
    .gallery .hoverBox {padding:25% 20px 0 20px}
    /* 게시판 읽기 */
    .ico-board tbody td {padding:12px 10px}
    .prvThumbList table td {padding:2px !important}
    .prvThumbList > table {width:100%}
    .prvThumbList > table td table {width:33%}
    .prvThumbList img {width:100%; height:auto}


}

@media screen and (max-width: 640px) {
    .gallery > table {width:100% !important; margin: 0 0 20px 0; }
    /* 게시판 - 공지사항 */
    .brd_notice .att_title:first-child {display:none}
    .brd_notice .att_title:nth-child(4) {display:none}
    .brd_notice .att_title:nth-child(5) {display:none}
    .brd_notice .bbsno {display:none}
    .brd_notice .bbswriter {display:none}
    .brd_notice .bbsetc_view_count  {display:none}
    /* 게시판 - QNA */
    .brd_qna .att_title:first-child {display:none}
    .brd_qna .att_title:nth-child(4) {display:none}
    .brd_qna .att_title:nth-child(5) {display:none}
    .brd_qna .att_title:nth-child(6) {display:none}
    .brd_qna .bbsno {display:none}
    .brd_qna .bbsetc_dateof_write {display:none}
    .brd_qna .bbspublic_ox {display:none}
    /* 게시판 공통 */
    #ext_search {display: none;}
    .comment_txt input {width:25% !important; text-align:left !important; padding:10px !important}
}


.poll_txt {width: 100%; max-width: 800px; margin: 0 auto;}
.poll_txt .poll_list {padding: 30px; border: 1px solid #e5e5e5}
/* 그래프 스타일 */
.poll_bar {background:url(/cimg/img_pollbar_03.gif) left no-repeat;padding-top:1}


.customerbbs #container_list .gallery_item_table .item_cell_infor, .customerbbs #container_list #ext_search { display:none; }



.service01 article .row .columns > h3,
.service02 article .row .columns > h3,
.service03 article .row .columns > h3,
.service04 article .row .columns > h3 {margin-bottom: 40px; }

.service01 article .row .columns > h3 + .txt1,
.service02 article .row .columns > h3 + .txt1,
.service03 article .row .columns > h3 + .txt1,
.service04 article .row .columns > h3 + .txt1 { margin-bottom:60px;}

.service01 article .row .columns > .head,
.service02 article .row .columns > .head,
.service03 article .row .columns > .head
.service04 article .row .columns > .head { padding-top: 10px; margin-bottom:16px;}

.service01 article .row .columns > .head +.txt2,
.service02 article .row .columns > .head +.txt2,
.service03 article .row .columns > .head +.txt2,
.service04 article .row .columns > .head +.txt2 { margin-bottom:34px;}

.service01 #box .box_container .box-inner h3,
.service02 #box .box_container .box-inner h3,
.service03 #box .box_container .box-inner h3,
.service04 #box .box_container .box-inner h3 { color: #fff; margin-bottom: 40px;}
.service01 #box .box_container .box-inner h3:after,
.service02 #box .box_container .box-inner h3:after,
.service03 #box .box_container .box-inner h3:after,
.service04 #box .box_container .box-inner h3:after { background-color: #fff;}

.service01 .s08 #box .box_container .box-inner,
.service02 .s07 #box .box_container .box-inner,
.service04 .s02 #box .box_container .box-inner, 
.service04 .s06 #box  { width: 100%; max-width: 1280px; margin: 20px auto;}


.service01 .s08 { padding:0;}
.service01 .s08 #box .box_container { padding: 60px 55px;}

.service02 .s02 { background: linear-gradient(rgba(70, 10, 0, 0.7), rgba(27, 31, 37, 0.7)), url(../images/sub-bg.jpg) no-repeat 50% 50% / cover; }
.service02 .s02 * {color: #fff;}
.service02 .s02 h3:after { background-color: #fff;}
.service02 .s02 .head { font-weight:300 !important; margin-bottom: 12px !important;}
.service02 .s05 .cont-img img {  height: 240px; object-fit: cover;}
.service02 .s07 { padding:0;}
.service02 .s07 #box .box_container { background: linear-gradient(rgba(40, 61, 100, 0.7), rgba(40, 61, 100, 0.7)), url(../images/box-bg.png) no-repeat 50% 50% / cover; padding: 60px 55px;}

.service03 .s03 .row .columns > .txt1 { margin-bottom:60px; }
.service03 .s03  #box .box_container .box-inner .head {line-height:1.5; }
.service03 .s03  #box .box_container .box-inner .txt2 {font-size: 18px; font-weight: 400; margin-top:30px; line-height:1.7; }
.service03 .s04  #box .box_container .box-inner .head { margin-bottom: 20px;}
.service03 .s05 .cont-img { margin-bottom:20px; }
.service03 .s05 .head:last-child { margin-bottom:50px;}

.service04 .s02 {background: linear-gradient(rgba(0, 0, 0, 0.0), rgba(27, 31, 37, 0.1)), #75a9d5;}
.service04 .s02 * { color: #fff; } 
.service04 .s06 #box .box_container:nth-child(1) { background: linear-gradient(rgba(0, 25, 70, 0.7), rgba(0, 50, 100, 0.7)), url(../images/box-bg.png) no-repeat 50% 50% / cover; }
.service04 .s06 #box .box_container:nth-child(2) { background: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0,0,0,0)), #75a9d5; }

@media screen and (max-width: 768px) {
    .service03 .s03  #box { display:block; }
	.service03 .s03  #box .box_container { width:100%;}
}