/* ------------------------------------------------------------------ */
/* Common Styles
main : d40003    
@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;}
.red {color: #d40003 !important;}
.border_n {border: none;}
 mob-none
/* 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%}

@media screen and (max-width: 640px) {
    .mob-none {display: none;}
}


/* ------------------------------------------------------------------ */
/* Sub Page visual
/* ------------------------------------------------------------------ */
/* page cont_header */
#cont_header.header_bg01 {background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.0)), url("../images/sub-bg1.jpg") repeat-x scroll 50% 50% / cover; } /* header bg */
#cont_header .cont_title {padding: 80px 0 ; text-align: center;}
#cont_header .cont_title hr {
    display: none;
    border: solid #666;
	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-bottom: 10px; font-size: 20px; color: #fff; text-align: center; text-transform: uppercase;  letter-spacing: 0.4em}
#cont_header .cont_title h1 {margin-bottom: 0; font-size: 36px; font-weight: 700; letter-spacing: 0.1em; color: #fff; border: none}

@media screen and (max-width: 810px) {
    #cont_header.header_bg01 { width: calc(100% + 40px); margin-left: -20px; margin-bottom: 0px;}
    #cont_header .cont_title {padding: 60px 0;}
    #cont_header .cont_title hr {width: 180px;}
    #cont_header .cont_title p {font-size: 12px;}
    #cont_header .cont_title h1 {font-size: 22px;}
}
/*---------------------------------------------------------
5. page
100,300,400,500,700,900
--------------------------------------------------------- */
.page section { }
/* .page h1 {
position: relative;
}
.page h1:after{
	position:absolute;
	content:" ";
	top:5%;
	left:0;
	height:90%;
	width:3px;
	background:#000;
}   */
.page h1 {display: inline-block; margin-bottom: 30px; font-weight: 800; color: #888; border-bottom: 5px solid #aaa;}
.page h1 span {color: #1b2020; font-weight: 700;}
.page h1 span.b {color: #85a222;}
.page h2 {font-weight: 500;}
.page h3 {position: relative; margin-bottom: 30px; padding-left: 0px; font-weight: 600; color: #444; }
/*  
.page h3::after {
    position:absolute;
    content:" ";
    top: 50%;
    left:0;
    transform: translateY(-50%);
    height:70%;
    width:5px;
    background:#b6cb71;
    border-radius: 3px;
}
*/
.page h3 span {font-weight: 800;}
.page h4 {}
.page h5 {color: #444;}
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;}

}

.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; text-align: center;}
.cont-img2 img {width: 100%; margin:0;}
.cont-img3 {width: 100%;  margin:0 0 30px 0px; text-align: center;}
.cont-img3 img { margin:0;}

.cont-ov-img {width: 100%;  margin:0 0 30px -30px;}
.cont-ov-img img {width: 100% ; margin:0;}

@media screen and (max-width: 1024px) {
    .cont-img3 img { width: 100%; margin:0;}
}

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

.cont-coming h1 {padding: 120px 0; color: #aaa !important;}
.cont-coming h1 span {font-size: 80px;color: #aaa;}
@media screen and (max-width: 480px) {
    .cont-coming h1 {padding: 80px 0;}
    .cont-coming h1 span {font-size: 36px;}
    .cont-img3 img { width: 100%; margin:0;}
}

/* ------------------------------------------------------------------ */
/* Sub Page title
/* ------------------------------------------------------------------ */

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

.com_info {}
.com_info ul {padding-top: 10px; border-top: 2px solid #aaa}
.com_info ul li {margin-bottom: 10px; padding: 0px 0 10px 10px; border-bottom: 1px solid #ccc}
.com_info ul li span {margin-right: 10px; font-weight: 700;}

.title-heading {margin-bottom: 60px; border-bottom: 1px solid #e5e5e5;}
.title-heading h2 {margin-bottom: 30px; font-size: 32px; color: #444; line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; text-align: center; }
.title-heading h2 span {color: #1b2020; font-weight: 700;}
.title-heading h2 span.b {color: #da251c;}
.title-heading p {}
.title-heading p span {color: #85a222;}
@media screen and (max-width: 640px) {
    .title-heading {margin-bottom: 60px;}
    .title-heading h2 {font-size: 24px;}
}

/* ------------------------------------------------------------------ */
/* table Styles
/* ------------------------------------------------------------------ */
/* 기본테이블 */
.tbl_wrap table {width:100%;border-collapse:collapse;border-spacing:0}
.tbl_wrap caption {padding:10px 0;font-weight:bold;text-align:left}


.tbl_head01 {margin:0 0 10px}
.tbl_head01 caption {padding:0;font-size:0;line-height:0;overflow:hidden}
.tbl_head01 thead th {padding:17px 0;border:1px solid #c4c4c4;background:#ebebeb;color:#383838;text-align:center;font-size:1.083em}
.tbl_head01 thead a {color:#383838}
.tbl_head01 thead th input {vertical-align:top} /* middle 로 하면 게시판 읽기에서 목록 사용시 체크박스 라인 깨짐 */
.tbl_head01 tr:hover{background:#fafafa}
.tbl_head01 td { }
.tbl_head01 a {color:#666}

.tbl_head02 {margin:0 0 10px}
.tbl_head02 caption {padding:0;font-size:0;line-height:0;overflow:hidden}
.tbl_head02 thead th {padding:5px 0;border-top:1px solid #d1dee2;border-bottom:1px solid #d1dee2;background:#e5ecef;color:#383838;font-size:0.95em;text-align:center;letter-spacing:-0.1em;}
.tbl_head02 thead a {color:#383838}
.tbl_head02 thead th input {vertical-align:top} /* middle 로 하면 게시판 읽기에서 목록 사용시 체크박스 라인 깨짐 */
.tbl_head02 tfoot th, .tbl_head02 tfoot td {padding:10px 0;border-top:1px solid #c1d1d5;border-bottom:1px solid #c1d1d5;background:#d7e0e2;text-align:center}
.tbl_head02 tbody th {padding:5px 0;border-top:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9}
.tbl_head02 td {padding:5px 3px;border-top:1px solid #ffffff;border-bottom:1px solid #ffffff;line-height:1.4em;word-break:break-all}
.tbl_head02 a {}



/* ------------------------------------------------------------------ */
/* About Styles
/* ------------------------------------------------------------------ */
#about04 ul.client {display: flex; flex-wrap: wrap; width: calc(100 + 20px); margin-left: -10px;}
#about04 ul.client li {width: calc((100% / 5) - 20px); margin: 10px; padding: 20px; border: 1px solid #e5e5e5 }
#about04 ul.client li img {width: 100%; }
@media screen and (max-width: 640px) {
    #about04 ul.client li {width: calc((100% / 2) - 20px); padding: 20px;}
}

/* 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:0px; font-family: 'Pretendard', sans-serif; font-size: 18px; font-weight: 700;  color: #444; line-height: 1.5; text-transform: uppercase; white-space: nowrap;
}

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

/*----- TIMELINE CONTENT -----*/
.timeline-content { padding-bottom: 20px; }
.timeline-content h3 {margin-bottom:10px;}
.timeline-content p {padding-top:2px;}
.timeline-content p span {
    display: block; margin: 0 0 .5em 0; padding-right:10px; font-weight: 700; letter-spacing: 2px; color: #d80100; 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 {
    position: absolute; top: 0; bottom: 30px;
    background: transparent; content: ""; width: 15px; height: auto; border: none; border-radius: 0;
    /* border-top: 3px solid #CCD5DB;  */
    border-bottom: 3px solid #CCD5DB;
}
.period .timeline-marker:after { content: ""; height: 32px; top: auto; }
.period .timeline-content { padding: 0px 0 70px; }
.period .timeline-title { margin: 0; font-weight: 700; color: #222;}

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

@media (min-width: 810px) {
    .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%; }
    .timeline-centered .timeline-info {padding-top: 0px;}
    .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: 0px 0 90px; }
    .timeline-centered .period .timeline-marker:after { height: 30px; bottom: 0; top: auto; }
    .timeline-centered .period .timeline-title { text-align: center; }

    .timeline-content p span { display: inline-block; }
}


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

.mapinfo{
	display:flex; flex-wrap:wrap; align-items:center;
	box-sizing:border-box;
	position:relative;z-index:10;
    width: 100%;
	background:#fff;
	padding:30px 45px;
	margin: -65px auto 0 ;
    border: 1px solid #e5e5e5;
}
.mapinfo .tit .eng{ margin-bottom: 5px; font-size:28px; color:#888; font-weight:900; text-transform: uppercase;}
.mapinfo .tit .kor{font-size:24px; color:#333;}
.mapinfo .info { padding-top: 20px; width:calc(100% - 295px); padding-left:40px;}
.mapinfo .info .addr{font-size:16px;color:#454545;}
.mapinfo .info .contact{margin:15px 0;}
.mapinfo .info .contact ul{display:flex;flex-wrap:wrap;}
.mapinfo .info .contact ul li{
	margin-right:20px;
	font-size:16px; color:#555; font-weight: 400; line-height: 1.7;
}
.mapinfo .info .contact ul li span{color:#da251c; font-weight:700;}

@media screen and (max-width: 810px) {
.mapinfo {width: 100%; margin: 10px 0 0 0; padding: 30px 20px; }
.mapinfo .tit .eng {font-size: 28px;}
.mapinfo .tit .kor {font-size: 24px;}
.mapinfo .info {display: block; width: calc(100% - 130px); padding-left:40px;}
}
@media screen and (max-width: 480px) {
    .mapinfo{ flex-direction: column; padding: 30px 20px; }
    .mapinfo .tit {margin-bottom: 10px;}
    .mapinfo .info {box-sizing:border-box; width: 100%; padding-left:0;}
}



#help {margin-bottom: 30px; background: none; }
#help .help_wrap {}
#help .title  {display: inline-block; }
#help h3 {margin: 0; color: #444; }
#help h3 span {font-size: 18px;}
#help .right {}
#help .right .txt {margin-left: 60px; font-size: 28px; font-weight: 700; color: #2e2e2e;}
#help .right .txt span { color: #888;}


@media screen and (max-width:768px) {
    .map_info {margin-bottom: 30px;}
	#help {margin-bottom: 0;}
	#help .row {height: auto; padding: 30px 20px;}
	#help h3 {margin-left: 10px; line-height: 1.1; color: #85a222; }
	#help h3 span {font-size: 16px; }
	#help .right {flex-wrap: wrap; }
	#help .right .txt {margin-left: 30px; font-size: 20px;}
	#help .right .txt span {display: none; font-size: 16px; }
	#help .right .button {margin-top: 10px; margin-left: 30px;}
}

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

/* ------------------------------------------------------------------ */
/* Product Styles
/* ------------------------------------------------------------------ */
.in_cont_wrap {margin-bottom: 60px;}
.in_cont_wrap > p {padding-bottom: 20px;font-size: 16px; border-bottom: 1px solid #ccc }
.in_cont_wrap > p b {display: block; padding-bottom: 10px; font-size: 18px; color: #333;}
.in_cont_wrap .in_cont {margin-bottom: 20px; padding: 20px; background: #f2f2f2;}
.in_cont_wrap .in_cont p {font-size: 16px;}
ul.circle { margin:20px 0 0 0; }
ul.circle li { position:relative; margin-bottom:15px; padding-left: 15px; font-size: 16px; line-height: 1.5; }
ul.circle li:after {
    content: "";
    position: absolute; top: 8px; left: 0;
    width: 6px; height: 6px;
    border-radius: 50%; background-color: #ccc;
}
@media screen and (max-width: 640px) {
    .in_cont_wrap .in_cont {padding: 20px;}
    ul.circle li {font-size: 14px;}
}

/*  */
.support_box_wrap {display: flex; flex-wrap: wrap; width: calc(100% + 40px);margin-left: -20px;}
.support_box { width: calc(33.3% - 40px); margin: 0px 20px 30px 20px; }
.support_box .ttl {
    position: relative; width: 100%; padding: 10px 20px; text-align: center; color: #fff; font-weight: 700; background: #444; border-radius: 7px; box-shadow: 0 0 10px rgba(0,0,0,0.2); z-index: 1
}
.support_box p {position: relative; margin-top: -10px; padding: 30px 25px; font-size: 16px; background: #f2f2f2;  border-radius: 10px; z-index: 0}

@media screen and (max-width: 640px) {
    .support_box {width: 100%;}
}