@charset "utf-8";

/*---
font-family: 'NanumSquareNeoLight';
font-family: 'NanumSquareNeo';
font-family: 'NanumSquareNeoBold';
font-family: 'NanumSquareNeoExtraBold';
font-family: 'NanumSquareNeoHeavy';

font-family: 'Cormorant Garamond', serif;

300,400,700,800
font-family: "NanumSquare", sans-serif;
font-family: "NanumSquareAC", sans-serif;
---*/

/*-----------------------공통-----------------------*/
html {width:100%; -webkit-text-size-adjust:none; -moz-text-size-adjust: none; -ms-text-size-adjust:none; overflow-y:scroll; overflow-x:hidden; word-break:keep-all;}
html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {margin:0;padding:0;border:0;outline:0;vertical-align:baseline; list-style:none; font-family: 'NanumSquareNeo'; font-size:16px; color:#444; line-height:1.7; -webkit-text-size-adjust:none;}

html, body { height:100% !important;}

a {text-decoration:none;color:#000;-webkit-transition: background .3s ease, border .3s ease, color .3s ease, opacity .3s ease-in-out, outline .3s ease;-moz-transition: background .3s ease, border .3s ease, color .3s ease, opacity .3s ease-in-out, outline .3s ease;-ms-transition: background .3s ease, border .3s ease, color .3s ease, opacity .3s ease-in-out, outline .3s ease;-o-transition: background .3s ease, border .3s ease, color .3s ease, opacity .3s ease-in-out, outline .3s ease;transition: background .3s ease, border .3s ease, color .3s ease, opacity .3s ease-in-out, outline .3s ease;outline:none;}
a:hover, a:focus {text-decoration:none !important;}

p { word-break:keep-all;}

/*-----드래그----*/
::-moz-selection {
   background: #006f68;
   color: #fff;
}
::selection {
   background: #006f68;
   color: #fff;
}
/*-----드래그----*/

/*-----스크롤----*/
::-webkit-scrollbar { width:8px; height:4px;}
::-webkit-scrollbar-track { background:#fff;}
::-webkit-scrollbar-thumb { background:#006f68;}
/*-----스크롤----*/


/*-----공통----*/
img { height:auto; max-width:100%; vertical-align:middle;}

.text_center { text-align:center;}
.text_right { text-align:right;}

.container { font-family: 'NanumSquareNeo'; max-width:1400px; width:100%; position:relative; margin:0 auto; padding:0 20px;}
h1 { font-family: 'NanumSquareNeoHeavy';}
h2 { font-family: 'NanumSquareNeoBold';}
h3 { font-family: 'NanumSquareNeoLight';}

.footer { vertical-align: top; width:100%; background:#fff; padding:80px 0; border-top:#ccc solid 1px; text-align:center;}
.footer .f_logo { width:130px;}
.footer_ul { margin:30px 0 10px 0;}
.footer_ul li { font-size:14px; color:#000; line-height:1; margin:5px 0; padding:0 10px; display:inline-block; border-right:#000 solid 1px;}
.footer_ul li:last-child { border-right:none;}
.footer_ul li strong { font-size:14px; color:#000; line-height:1;}
.footer_copy { font-size:13px; color:#777;}
.footer_copy a { color:#777;}
/*-----공통----*/


/* 메인 */
.main_top { position:absolute; top:0; z-index:1; width:100%;}
.main_top img { width:75px;}
.main {
	position: relative; /* 기준점 */
	width: 100%;
	height: 100vh; /* 화면 높이 전체 */
	background: #000;
	overflow: hidden;
}

.main_video {
	position: absolute;
	top: 50%;
	left: 50%;
	min-width: 100%;
	min-height: 100%;
	width: 100%;
	height: 100%;
	object-fit: cover;   /* 화면에 꽉 차게 */
	transform: translate(-50%, -50%); /* 정중앙 기준 */
	opacity: .5;
}
/* 메인 */

/* 서브 */
.sub_section { padding:250px 0 200px 0;}
.sub_title h1 { font-family: 'Cormorant Garamond', serif; font-size:58px; color:#000; margin-bottom:15px;}

.sub_hr { height:120px; clear:both;}

.sub_nav { margin-bottom:70px;}
.sub_nav li {display:inline-block; margin-right:30px; margin-bottom:10px; font-size:17px;}
.sub_nav li a:hover {color:#006f68; border-bottom:#006f68 solid 1px;}
.sub_nav li .sub_nav_on {color:#006f68; border-bottom:#006f68 solid 1px;}


.over_t_ul { font-size:0; margin:-3px -3px 60px -3px;}
.over_t_ul li { display:inline-block; vertical-align:top;}
.over_t_ul li .img_box { border:#fff solid 3px;}
.over_t_ul li:nth-child(1) { width:30%;}
.over_t_ul li:nth-child(1) .img_box { float:left; width:100%; height:600px;}
.over_t_ul li:nth-child(2) { width:30%;}
.over_t_ul li:nth-child(2) .img_box { float:left;}
.over_t_ul li:nth-child(2) .img_box:first-child { width:100%; height:300px;}
.over_t_ul li:nth-child(2) .img_box:last-child { width:100%; height:300px;}
.over_t_ul li:nth-child(3) { width:40%;}
.over_t_ul li:nth-child(3) .img_box { float:left;}
.over_t_ul li:nth-child(3) .img_box:nth-child(1) { width:50%; height:400px;}
.over_t_ul li:nth-child(3) .img_box:nth-child(2) { width:50%; height:400px;}
.over_t_ul li:nth-child(3) .img_box:nth-child(3) { width:100%; height:200px;}

.over_b_ul { font-size:0; margin-top:40px;}
.over_b_ul li { padding-left:200px; margin:10px 0;}
.over_b_ul li span { display:inline-block; width:200px; margin-left:-200px; font-weight:bold;}

.ceo_top { position:relative; height:330px; overflow:hidden; margin-bottom:80px;}
/* 배경 이미지 전용 가상 요소 */
.ceo_top::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: url(/web/img/sub/ceo_top.jpg) center center no-repeat;
  background-size: cover;
  transform: scale(1.1);
  animation: zoomOut 3s ease-out forwards;
  z-index: 0;
}

.his_top { position:relative; height:330px; overflow:hidden; margin-bottom:80px;}
/* 배경 이미지 전용 가상 요소 */
.his_top::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: url(/web/img/sub/his_top.jpg) center center no-repeat;
  background-size: cover;
  transform: scale(1.1);
  animation: zoomOut 3s ease-out forwards;
  z-index: 0;
}

@keyframes zoomOut {
  from {
    transform: scale(1.1);
  }
  to {
    transform: scale(1);
  }
}

.ceo_box { position:relative;}
.ceo_box .ceo_text { margin-right:60%; line-height:2.5;}
.ceo_box .sign { margin-top:80px; /*width:350px; height:70px; background:url(/web/img/sub/sign.jpg) center right no-repeat;*/}
.ceo_box .ceo_img { position:absolute; width:50%; height:100%; right:0; top:0; font-size:0;}
.ceo_box .ceo_img li { display:inline-block; width:50%; height:100%;}
.ceo_box .ceo_img li:first-child { padding-bottom:50px;}
.ceo_box .ceo_img li:last-child { padding-top:50px;}
.ceo_box .ceo_img li .ceo_img01 { height:100%; margin-right:10px; background:#ccc url(/web/img/sub/ceo01.jpg) center center no-repeat; background-size:cover;}
.ceo_box .ceo_img li .ceo_img02 { height:100%; background:url(/web/img/sub/ceo02.jpg) center center no-repeat; background-size:cover;}

.sub_top_text { font-family: "NanumSquareAC", sans-serif; font-weight:300; margin-bottom:120px;}
.sub_top_text h1 { font-family: "NanumSquare", sans-serif; font-weight:800; font-size:20px; margin-bottom:20px;}
.sub_top_text h1 span { font-size:18px; color:#777;}
.sub_top_text p { color:#aaa; margin-bottom:50px;}

.org_img img { display:block; margin:0 auto;}
.org_img img:first-child {}
.org_img img:last-child { display:none;}

/* 연혁 */
.timeline { position:relative;}
.timeline-item {
  padding-left: 30px;
  padding-bottom: 60px;
  position: relative;
}
.timeline-item:last-child {
  padding-bottom: 0;
}
.timeline-info {
  color:#000;
  font-family: 'Cormorant Garamond', serif;
  font-size:55px;
  line-height:1.3;
  top: -25px;
  position:relative;
}
.timeline-centered .timeline-content li {
  margin-bottom:15px;
}

.timeline-marker {
  position: absolute;
  top: 5px;
  bottom: 0;
  left: 0;
  width: 10px;
}
.timeline-marker:before {
  background: #006f68;
  border: 1px solid transparent;
  border-radius: 100%;
  content: "";
  display: block;
  width: 11px;
  height: 11px;
  position: absolute;
  top: 5px;
  left: 1px;
  transition: background 0.3s ease-in-out, border 0.3s ease-in-out;
}
.timeline-marker:after {
  content: "";
  width: 1px;
  background:linear-gradient(to bottom, #006f68 50%, #ddd 50%) fixed;
  display: block;
  position: absolute;
  top: 20px;
  bottom: 0;
  left: 6px;
}
.timeline-marker-last:after {
  background:none;
}
.timeline-item:not(.period):hover .timeline-marker:before {
  background: transparent;
  border: 1px solid #006f68;
}
@media screen and (min-width:767px){
  .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: 80px;
    overflow: hidden;
  }
  .timeline-centered .timeline-item:last-child {
    padding-bottom: 0;
  }
  .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-content {
    padding-top:5px;
    top:-35px;
	margin:0 -20px;
  }
  .timeline-centered > .timeline-item:nth-child(odd) .timeline-info {
    float: left;
    text-align: right;
    padding-right: 30px;
    margin-left:-20px;
  }
  .timeline-centered > .timeline-item:nth-child(odd) .timeline-content {
    float: right;
    text-align: left;
    padding-left: 30px;
	margin-left:0;
  }
  .timeline-centered > .timeline-item:nth-child(even) .timeline-info {
    float: right;
    text-align: left;
    padding-left: 30px;
	margin-right:-20px;
  }
  .timeline-centered > .timeline-item:nth-child(even) .timeline-content {
    float: left;
    text-align: right;
    padding-right: 30px;
	margin-right:0;
  }
  .timeline-centered > .timeline-item.period .timeline-content {
    float: none;
    padding: 0;
    width: 100%;
    text-align: center;
  }
  .timeline-centered .period .timeline-marker:after {
    height: 10px;
    bottom: 0;
    top: auto;
  }
}
/* 연혁 */


.culture_t_ul { font-size:0; margin:-3px -3px 120px -3px;}
.culture_t_ul li { display:inline-block; vertical-align:top;}
.culture_t_ul li .img_box { border:#fff solid 3px;}
.culture_t_ul li:nth-child(1) { width:60%;}
.culture_t_ul li:nth-child(1) .img_box { float:left; width:100%; height:500px;}
.culture_t_ul li:nth-child(2) { width:40%;}
.culture_t_ul li:nth-child(2) .img_box { float:left;}
.culture_t_ul li:nth-child(2) .img_box:first-child { width:100%; height:250px;}
.culture_t_ul li:nth-child(2) .img_box:last-child { width:100%; height:250px;}

.rec_top { position:relative; height:500px;}
.rec_top .rec_top_left { position:absolute; left:0; top:0; width:500px; height:100%; background:url(/web/img/sub/ceo02.jpg) center center no-repeat; background-size:cover;}
.rec_top .rec_top_right { margin-left:550px;}

.sub_title02 { font-size:20px; color:#006f68; margin-bottom:10px;}

.step_ul { font-size:0; padding:40px 10px; border:#ddd solid 5px; border-radius:10px;}
.step_ul li { display:inline-block; vertical-align:top; width:25%;}
.step_ul li .step_box { margin:0 30px; font-size:14px; position:relative; text-align:center;}
.step_ul li .step_box .icon { margin:5px 0 10px 0;}
.step_ul li .step_box .arrow { position:absolute; top:60px; right:-5px;}
.step_ul li .step_box h1 { font-size:12px; color:#006f68;}
.step_ul li .step_box h2 { font-size:20px;}

.rec_field { position:relative; height:250px;}
.rec_field .rec_field_left { position:absolute; width:50%;}
.rec_field .rec_field_left ul { font-size:0;}
.rec_field .rec_field_left ul li { display:inline-block; vertical-align:top; width:50%;}
.rec_field .rec_field_left ul li .field_box { position:relative; height:250px; padding:40px 30px;}
.rec_field .rec_field_left ul li:first-child .field_box { background:#555 url(/web/img/sub/rec_field01.png) center center no-repeat; background-size:cover; margin-right:20px;}
.rec_field .rec_field_left ul li:last-child .field_box { background:#555 url(/web/img/sub/rec_field02.png) center center no-repeat; background-size:cover;}
.rec_field .rec_field_left ul li .field_box h1 { color:#fff; font-size:35px;}
.rec_field .rec_field_left ul li .field_box p { position:absolute; padding:40px 30px; color:#fff; width:100%; left:0; bottom:0;}

.rec_field .rec_field_right { margin-left:55%;}
.rec_field .rec_field_right ul { padding-left:170px;}
.rec_field .rec_field_right ul li { margin-bottom:20px;}
.rec_field .rec_field_right ul li span { font-size:15px; display:inline-block; width:170px; margin-left:-170px; font-weight:bold;}

.benefits_ul { font-size:0; padding:20px; border-radius:10px; background:#006f68;}
.benefits_ul li { display:inline-block; vertical-align:top; width:50%;}
.benefits_ul li .benefits_box { position:relative; padding-left:120px; margin:20px 30px; color:#fff;}
.benefits_ul li .benefits_box img { position:absolute; left:0; top:0; width:95px; padding:20px; background:rgba(0,0,0,0.1); border-radius:20px;}
.benefits_ul li .benefits_box h1 { font-size:20px; color:#fff; margin-bottom:5px;}
.benefits_ul li .benefits_box span { color:#f6ff00;}
/* 서브 */



@media screen and (max-width:991px){
	.ceo_box .ceo_text { margin-right:0; margin-top:40px;}
	.ceo_box .sign { margin-top:40px;}
	.ceo_box .ceo_img { position:relative; width:100%;}
	.ceo_box .ceo_img li .ceo_img01 { height:300px;}
	.ceo_box .ceo_img li .ceo_img02 { height:300px;}
	
	.rec_top { height:auto;}
	.rec_top .rec_top_left { position:relative; width:100%; height:250px;}
	.rec_top .rec_top_right { margin-left:0; margin-top:20px;}
	
	.rec_field { height:auto;}
	.rec_field .rec_field_left { position:relative; width:100%;}
	.rec_field .rec_field_left ul li .field_box { height:200px; padding:30px 20px;}
	.rec_field .rec_field_left ul li:first-child .field_box { margin-right:10px;}
	.rec_field .rec_field_left ul li .field_box h1 { font-size:28px;}
	.rec_field .rec_field_left ul li .field_box p { padding:30px 20px;}

	.rec_field .rec_field_right { margin-left:0; margin-top:30px;}
	
	.benefits_ul { padding:20px;}
	.benefits_ul li { width:100%;}
	.benefits_ul li .benefits_box { margin:20px 10px;}
}

@media screen and (max-width:767px){
	html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {font-size:15px;}
	
	.footer { padding:50px 0;}
	
	.sub_section { padding:150px 0 100px 0;}
	.sub_title h1 { font-size:40px;}
	
	.sub_hr { height:60px;}
	
	.sub_nav { margin-bottom:30px;}
	.sub_nav li {font-size:16px;}

	.over_t_ul li:nth-child(1) { width:100%;}
	.over_t_ul li:nth-child(1) .img_box { height:250px;}
	.over_t_ul li:nth-child(2) { width:100%;}
	.over_t_ul li:nth-child(2) .img_box:first-child { height:200px;}
	.over_t_ul li:nth-child(2) .img_box:last-child { height:200px;}
	.over_t_ul li:nth-child(3) { width:100%;}
	.over_t_ul li:nth-child(3) .img_box:nth-child(1) { height:200px;}
	.over_t_ul li:nth-child(3) .img_box:nth-child(2) { height:200px;}
	.over_t_ul li:nth-child(3) .img_box:nth-child(3) { height:250px;}
	
	.over_b_ul li { padding-left:0;}
	.over_b_ul li span { display:block; width:auto; margin-left:0;}
	
	.ceo_top { height:230px;  margin-bottom:40px;}
	
	.his_top { height:230px;  margin-bottom:40px;}

	.org_img img:first-child { display:none;}
	.org_img img:last-child { display:block;}
	
	.culture_t_ul li:nth-child(1) { width:100%;}
	.culture_t_ul li:nth-child(1) .img_box { height:300px;}
	.culture_t_ul li:nth-child(2) { width:100%;}
		
	.step_ul { padding:20px 0;}
	.step_ul li { width:50%;}
	.step_ul li .step_box { margin:20px 20px;}
	.step_ul li .step_box .icon { width:50px;}
	.step_ul li .step_box h2 { font-size:18px;}
}