/* ------------------------------------------------------------------ */
/* Common Styles
main : 1673c4     blue
point : f2432f     red
point : 6782b8    blue2
'notokr', 'NotoSansKR', 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) {
}
*/
/* ------------------------------------------------------------------ */
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:42px; line-height:46px;}
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;}
.subheader { }
p { margin:0 0 30px 0; font-family:'NotoSansKR', sans-serif; font-size:16px; font-weight:200; text-align:justify; letter-spacing:-0.05em;}
p img { margin:0;}
p.lead { font:26px/1.8 'NotoSansKR', sans-serif; margin-bottom:18px; color:#666; font-weight:600;}
p.head { font:18px/1.8 'NotoSansKR', sans-serif; margin-bottom:10px; color:#666; font-weight:200; text-align:justify; letter-spacing:-0.07em;}
p.head span { color:#f2432f; font-weight: 600;}

@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 { font-size:13px;}
}

@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;}
}
/* 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-size:15px; font-style:italic;}
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 {}
ul.large li { }
li p { }

/*---------------------------------------------------------
4. Images
--------------------------------------------------------- */
img { max-width:100%; 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 0x;}
.cont-img img { width:100%; margin:0;}
.cont-ov-img { width:100%; margin:0 0 30px -30px;}
.cont-ov-img img { width:100%; margin:0;}

/*---------------------------------------------------------
5. page
--------------------------------------------------------- */
.page section { padding-top:0px; padding-bottom:12px;}
.content-img { width:100%; margin-bottom:30px;}
.page h1, .title-heading { font-family:'Gothic A1', sans-serif; line-height:1.2; font-weight:200; letter-spacing:-0.05em;}
.page h1:after { background:#444; content:""; display:block; height:3px; width:70px; margin:20px 0 40px 0;}
.page h1 span { color:#1b2020; font-weight:600;}
.page h2 { font-weight:400;}
.page h3 { font-weight:200;}
.page h3 span {font-weight:600;}
.page h3:after { background:#444; content:""; display:block; height:3px; width:70px; margin:20px 0 40px 0;}
.page h3 span { color:#1b2020; font-weight:600;}

@media screen and (max-width:1024px) {
  .content-img { width:100%;}
  .content-img img { width:100%;}
}

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

/* ------------------------------------------------------------------ */
/* About Styles
/* ------------------------------------------------------------------ */

.cont_about { font-weight:100;}

.txt-point { font-size:28px; text-align:center;}
.txt-point span { font-size:36px;}
span.l-font1 { font-family:'Gothic A1', sans-serif; font-size:48px; text-align:center; color:#1b2020;}
span.l-font2 { font-family:'Gothic A1', sans-serif; font-size:36px; text-align:center; color:#6a6d87;}

@media screen and (max-width: 640px) {
  .txt-point { font-size:24px;}
  .txt-point span { font-size:28px;}
  span.l-font1 { font-size:32px;}
  span.l-font2 { 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 #444; border-bottom:1px solid #ccc;}
 .add_table td { padding:8px 10px; border-bottom:1px solid #e5e5e5;}
 .add_table td.sub{ font-weight:400; color:#222; background-color:#f5f5f5;}
 .map { display:block; margin-top:20px; border:0px solid #e5e5e5;}


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

#team-wrapper { }
#team-wrapper .member { margin-bottom:20px; margin-top:10px;}
#team-wrapper img { margin-bottom:12px; border-radius:50%;}
#team-wrapper h5 { font:16px/24px "notokr", sans-serif;}
#team-wrapper span { position:relative; top:-6px; font-size:13px; line-height:18px; color:#ccc;}
#team-wrapper .member-social { font-size:20px; font-weight:normal; line-height:18px; color:#ccc; margin:-12px 0 0 0; padding:0;}
#team-wrapper .member-social li { display:inline-block; margin-right:15px;}
#team-wrapper .member-social li a { color:#ccc;}
#team-wrapper .member-social li a:hover { color:#f2da00;}


/* ------------------------------------------------------------------ */
/* History 1 Styles
/* ------------------------------------------------------------------ */
.history-wrap > ul { width:100%; padding:0 50px 0 180px; box-sizing:border-box; list-style:none;}
.history-wrap > ul > li { position:relative; padding:23px 0 70px 45px; border-left:1px solid #d9d9d9;}
.history-wrap > ul > li:last-child { padding-bottom:0;}
.history-wrap .history-inner dt {
  position:absolute;
  left:-166px;
  top:0;
  width:170px;
  height:70px;
  line-height:70px;
  padding-right:50px;
  text-align:right;
  box-sizing:border-box;
  background:#fff;
  font-family:'Gothic A1', sans-serif;
  font-size:36px;
  font-weight:800;
  color:#111;
}
.history-wrap .history-inner dt:after {
  content:"";
  position:absolute;
  right:0;
  top:50%;
  display:inline-block;
  width:8px;
  height:8px;
  margin-top:-4px;
  border-radius:4px;
  background:#444;
}

.history-wrap .month-wrap > ul { list-style:none; float:left;}
.history-wrap .month-wrap > li { position:relative; padding-left:60px; margin-top:30px; font-size:18px;}
.history-wrap .month-wrap > li:first-child { margin-top:0;}
.history-wrap .month-wrap > li > span.month {
  position:absolute;
  left:0;
  top:0;
  display:inline-block;
  width:60px;
  font-weight:bold;
  color:#666;
}
.history-wrap .month-wrap > li li { width:100%; margin-top:20px; font-family:'NotoSansKR', sans-serif; font-size:14px;}
.history-wrap .month-wrap > li li:first-child { margin-top:0;}
.history-wrap .imgArea { padding-top:5px;}
.history-wrap .imgArea .poster { margin-bottom:5px;}
.history-wrap .imgArea .poster img { max-width:100%;}
.history-wrap .imgArea p strong { display:block; font-weight:normal; font-size:24px; color:#000;}

@media all and (max-width:1024px) {
	.history-wrap > ul { padding:0 10px 0 150px;}
}

@media all and (max-width:768px) {
	.history-wrap > ul { padding:0 15px;}
	.history-wrap > ul > li { padding:0 0 50px 30px;}
	.history-wrap .history-inner dt {
    position:relative;
    left:auto;
    top:auto;
    width:auto;
    height:34px;
    margin-left:-34px;
    line-height:34px;
    margin-bottom:15px;
    padding:0 0 0 35px;
    text-align:left;
    font-size:30px;
  }
	.history-wrap .history-inner dt:after { right:auto; left:0;}
	.history-wrap .month-wrap > li { padding-left:0;}
	.history-wrap .month-wrap > li > span.month {
    position:static;
    left:auto;
    top:auto;
    display:block;
    width:auto;
    margin-bottom:10px;
    font-size:14px;
  }
	.history-wrap .month-wrap > li li { margin-top:10px; font-size:13px !important;}
	.history-wrap > ul > li:last-child { border-left:0;}
	.history-wrap .imgArea p strong { font-size:16px;}
}

/* ------------------------------------------------------------------ */
/* 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:'Gothic A1', 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:#f2da00; 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 #f2da00;}

/*----- TIMELINE CONTENT -----*/
.timeline-content { padding-bottom:20px;}
.timeline-content h3  {margin-bottom:10px;}
.timeline-content p { padding-top:2px;}
.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:#f2da00;}

@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%;}
  	.timeline-centered .timeline-info { padding-top:3px;}
	.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 { left:auto;}
}

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

/* business box */
#business-wrapper { }
#business-wrapper .box { margin-bottom:20px; margin-top:10px;}
#business-wrapper img { margin-bottom:12px;}
#business-wrapper h5 { font:16px/24px 'NotoSansKR', sans-serif;}
#business-wrapper span { position:relative; top:-6px; font-size:13px; line-height:18px; color:#969696;}
.span_color { color:#f25e57;}

/* ------------------------------------------------------------------ */
/* formmail Module Styles
/* ------------------------------------------------------------------ */
.formmail .formmail_title_bgcolor { background:none;}
.formmail .formmail_title_bgcolor font { display:block; width:90%; margin:5px; padding:5px; font-family:'NotoSansKR', sans-serif; font-size:14px; color:#666 !important; line-height:24px; background:#e5e5e5; border-radius:3px;}
.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: 640px) {
  .formmail .formmail_title_bgcolor font, .formmail .formmail_cell_bgcolor input, .formmail .formmail_cell_bgcolor select { font-size:12px;}
}

/* ------------------------------------------------------------------ */
/* Board Module Styles
/* ------------------------------------------------------------------ */
/* Board Common */
.bbsnewf5 { font:inherit !important;}
.bbsnewf5 a:hover {}
.bbsnewf5 input { margin:0;}
.board { font-family:inherit !important;}

.ico-board { width:100%; margin-bottom:40px; margin-top:20px; border-top:2px solid #444;}
.ico-board .att_title, .ico-board .att_title font { text-align: center; color:#666; 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-size:14px !important; padding:10px 0; border-bottom:1px solid #999;}
.ico-board tbody td font, .ico-board tbody td span, .ico-board tbody td a { font:inherit !important;}
.board_bgcolor, .board_bgcolor span { width:30% !important; font:inherit !important; color:#444 !important; background:#none !important;}
#post_area { padding:0;}
#post_area img { max-width:100%; height:auto !important;}
.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;}
}



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