@charset "utf-8";
/* 서브 비주얼 영역 */
#sub_visual {position:relative;height:300px; overflow:hidden; z-index:20;margin-top:60px;}
#sub_visual .swiper-container {width:100%;height:100%;}
#sub_visual .swiper-slide {background-position: center;background-size: cover;}
#sub_visual .swiper-container-horizontal>.swiper-pagination-bullets, #mainVisual .swiper-pagination-custom, #mainVisual .swiper-pagination-fraction {bottom:30px;}
#sub_visual .swiper-pagination-white .swiper-pagination-bullet-active {background:#000;width:20px;border-radius:50px;}
#sub_visual .swiper-pagination-bullet {width:10px;height:10px;background:#fff;border-radius:30px;transition:all .3s ease;opacity:1;}
#sub_visual .swiper-slide img {position:relative;left:50%;margin-left:-600px;top:200px;}
#sub_visual .swiper-button-next {right:20px;}
#sub_visual .swiper-button-prev {left:20px;}

/* 로케이션 영역 */
#container .location_bar {height:60px; border-bottom:1px solid #e6e6e6; background:#fff}
#container .location_bar .inner {max-width:1400px; margin:0 auto; padding:0 50px; text-align:right}
#container .location_bar .inner ul {text-align:right}
#container .location_bar .inner ul li {display:inline-block; color:#888; line-height:60px}
#container .location_bar .inner ul li.divider {margin:0 5px}
#container .location_bar .inner ul li.current {color:#333}
/* 컨텐츠 영역 레이아웃 */
#container > .inner:before {position:absolute; top:0; left:-1px; content:''; border-left:1px solid #e6e6e6; width:1px; height:100%}
#container > .inner {position:relative; max-width:1300px; margin:0 auto }
#container > .inner:after {clear:both; display:block; content:''; position:absolute; top:0; right:0; border-right:1px solid #e6e6e6; width:1px; height:100%}
#container > .inner .content:before {position:absolute; top:0; left:0; content:''; border-left:1px solid #e6e6e6; width:1px; height:100%}
#container > .inner .content {position:relative; /*margin-left:250px;*/ min-height:500px; padding:50px}
.btm_img {clear:both; height:560px; background:url(../img/sub_btm_img.jpg) center top no-repeat; background-size:cover}
.btm_img .inner {max-width:1400px; margin:0 auto; padding:0 50px}
.btm_img .inner .caption {padding-top:10%}
.btm_img .inner .caption h2 {font-size:50px; font-weight:600; color:#fff; line-height:1; margin-bottom:30px}
.btm_img .inner .caption p {font-size:15px; font-weight:300; color:#fff; max-width:60%}
/* 좌측 서브메뉴 */
/*#leftBar {float:left; width:250px; margin-top:-60px}
#leftBar .title {height:160px; padding:20px; background:#1c1c1c}
#leftBar .title h2 {display:inline-block; font-size:20px; font-weight:600; color:#fff}
#leftBar .title span {font-size:12px; font-weight:600; margin-left:10px; color:#fff}
#leftBar a.dropdown {display:none}
.lnb li {border-bottom:1px dotted #dcdcdc}
.lnb li.on a {color:#fff; background:#555}
.lnb li:hover a {color:#fff; text-decoration:underline; background:#555}
.lnb li a {display:block; padding:10px 20px}
#leftBar .box {padding:20px; border-bottom:1px dotted #dcdcdc; background:#f1f3f2}
#leftBar .box h4 {font-size:16px; font-weight:400; color:#333; line-height:1.1; margin-bottom:10px}
#leftBar .box p {color:#666}
#leftBar .box p span {font-size:16px; font-weight:600; color:#444}*/

#leftBar {width:100%; margin:0; border-bottom:1px solid #dcdcdc; background:#fff}
#leftBar a.dropdown {display:none}
 #leftBar:after {clear:both; display:block; content:''}
 #leftBar .title {float:left; width:18.4%; height:60px; padding:0 0 0 20px;/*background:#1c1c1c*/ background:#2460a9}
 #leftBar .title h2 {display:none}
 #leftBar .title span {font-size:18px; font-weight:600;;margin:0; line-height:60px;color:#fff;}
 #leftBar .box {display:none}

 .lnb {/*margin-left:25%;*/ height:100%; /*border-bottom:1px dotted #dcdcdc*/}
 .lnb li {position:relative; float:left; height:100%;border-right:1px solid #dcdcdc}
 .lnb li a {display:inline-block; padding:0 20px; height:100%; line-height:60px; text-align:center}
 .lnb li a > span{ font-size:15px}
 .lnb li.on a {color:#fff; /*background:#555*/ background:#538cd0}
 .lnb li:hover a {color:#fff; text-decoration:underline; background:#538cd0}


/* 컨텐츠 내부 공통 */
#container > .inner img.img_tab, #container > .inner img.img_mob {display:none !important}
#container .inner .content .title {margin-bottom:40px}
#container .inner .content .title h2 {font-size:35px; font-weight:600; color:#333; line-height:1.2; margin-bottom:15px}
#container .inner .content .title p {font-size:12px; color:#888; line-height:1.6}
#container .inner .content h3.sub_tit {font-size:22px; font-weight:400; line-height:1.2; color:#555; margin-bottom:30px}
#container .inner .content .business img {display:block; width:100%}
#container .inner .content .greeting img {display:block; width:100%}

/* 컨텐츠 영역 레이아웃 하단동영상*/
#bottomCover {position:relative;width:100%;overflow:hidden}
#bottomCover .mask {position:absolute; top:0; left:0; width:100%; height:100%; background:#000; opacity:.7; filter:alpha(opacity='30'); z-index:30}
#bottomCover .video {position:relative; width:100%; height:450px; z-index:20}
#bottomCover .video video {position:absolute;display:block; width:100%;top:-250px;object-fit:cover}
#bottomCover .inner {position:absolute;text-align:center;padding:0 50px;z-index:40;}
#bottomCover .inner .caption {padding-top:10%}
#bottomCover .inner .caption h2 {font-size:50px; font-weight:600; color:#fff; line-height:1; margin-bottom:30px}
#bottomCover .inner .caption p {font-size:15px; font-weight:300; color:#fff; max-width:60%;margin:0px auto;display:inline-block;}



/* COMPANY - 회사소개 */
.content .greeting{ height:400px}
.content .greeting .grt_tit {margin-bottom:60px; width:45%; float:left; word-break:keep-all}
.content .greeting .grt_tit h3 {font-size:22px; font-weight:600; color:#444; line-height:1.2; margin-bottom:20px}
.content .greeting .grt_tit p {font-size:15px; color:#333; padding:0 0 10px 0}
.content .greeting .grt_tit p.thanks {font-weight:bold}
.content .greeting .grt_tit p.ceo { text-align:right; font-size:18px; font-weight:bold}
.content .greeting .grt_img{margin-bottom:20px;width:45%; float:right; height:300px; overflow:hidden}
.content .com_table{text-align:center; overflow:auto}
.content .com_table tr{border-bottom:1px dotted #ccc;}
.content .com_table tr:first-child{border-top:3px solid #333;}
.content .com_table tr:last-child{border-bottom:3px solid #333}
.content .com_table th{padding:20px; width:130px; border-right:1px dotted #ccc;font-size:20px; color:#333}
.content .com_table td{ color:#333;font-size:15px; word-break:keep-all; text-align:left; padding:20px}
.content .greeting ul.teamList {text-align:justify; margin-bottom:60px}
.content .greeting ul.teamList:after {display:inline-block; width:100%; content:''}
.content .greeting ul.teamList > li {display:inline-block; width:30%; vertical-align:top}
.content .greeting ul.teamList > li .info {margin-bottom:30px}
.content .greeting ul.teamList > li .info h4 {font-size:18px; font-weight:600; color:#555; line-height:1.1}
.content .greeting ul.teamList > li .info span {font-size:12px; color:#888}
.content .greeting ul.teamList > li .info ul {margin-top:20px}
.content .greeting ul.teamList > li .info ul li {color:#666}
.content .greeting ul.teamList > li .info ul li:before {display:inline-block; width:2px; height:2px; content:''; margin-right:5px; background:#ccc; vertical-align:middle}
.content .greeting ul.teamList > li .imgArea {width:80%; margin:0 auto; border-radius:50%; overflow:hidden}
.content .greeting .info_box {margin-top:30px}
.content .greeting .info_box dl {margin:0; overflow:hidden}
.content .greeting .info_box dl dt {display:block; float:left; width:12%; padding:8px 0; font-weight:600; color:#444; border-bottom:1px dotted #ccc}
.content .greeting .info_box dl dd {display:block; margin-left:15%; padding:8px 0; color:#666; border-bottom:1px dotted #ccc}
/* COMPANY - 연혁 */
.content .history .history_box {margin-bottom:60px}
.content .history .history_box:after {clear:both; display:block; content:''}
.content .history .history_box .his_tit {margin-bottom:30px; padding-bottom:15px; border-bottom:2px solid #aaa}
.content .history .history_box .his_tit span {font-size:20px; color:#888}
.content .history .history_box .his_tit h3 {font-size:24px; font-weight:600; color:#444; line-height:1}
.content .history .history_box .left {float:left; width:45%}
.content .history .history_box .left p {color:#666; margin-bottom:25px; text-align:justify}
.content .history .history_box .right {float:right; width:50%}
.content .history .history_box .right dl {clear:both; margin:0 0 20px 0; overflow:hidden}
.content .history .history_box .right dl dt {float:left; width:60px; font-size:24px; font-weight:600; color:#444}
.content .history .history_box .right dl dd {margin-left:80px; line-height:2; color:#666}

.content .history .history_box dl dt {font-size:24px; font-weight:600; color:#444}
.content .history .history_box dl dd{ line-height:2; color:#666; font-size:18px} 

/* COMPANY - 찾아오시는 길 */
#map {position:relative; height:400px; margin-bottom:30px; overflow:hidden}
.content .map_box {padding:30px; background:#f6f6f6}
.content .map_box ul.map_info li {color:#666}
.content .map_box ul.map_info li:before {display:inline-block; width:3px; height:3px; margin-right:5px; content:''; background:#aaa; vertical-align:4px}
/* BUSINESS - 사업안내 */
.content .business ul.typeList {text-align:justify; margin-bottom:60px; border-bottom:5px solid #ccc}
.content .business ul.typeList:after {display:inline-block; width:100%; content:''}
.content .business ul.typeList li {display:inline-block; width:100%; vertical-align:top; margin-bottom:50px;}
.content .business ul.typeList li.double_area { width:45%;}
.content .business ul.typeList .VideoArea {width: 100% !important;}
.content .business ul.typeList .VideoArea video{width: 100%}
.content .business ul.typeList .txtArea {width: 45%; display:block; margin:0 auto}
.content .business ul.typeList .imgArea {display:block;margin-bottom:25px; overflow:hidden; border: 1px solid #ccc}
.content .business ul.typeList .btnArea {display:block; text-align:center}
.content .business ul.typeList .btnArea .outside{display: inline-block; background:green; padding:20px;}
.content .business ul.typeList .btnArea .catalog{display: inline-block; background:blue ;padding:20px;}
#container .inner .content .business ul.typeList .btnArea .outside a img{margin-right:10px; display:inline-block; width:20px}
.content .business ul.typeList .btnArea .outside p{display:inline-block; font-size:18px; color:#fff}
#container .inner .content .business ul.typeList .btnArea .catalog a img{margin-right:10px; display:inline-block; width:20px}
.content .business ul.typeList .btnArea .catalog p{display:inline-block; font-size:18px; color:#fff}
#container .inner .content .business img.SubMainImg{width:100; margin:0 auto}
.content .business ul.processList {text-align:justify; /*margin-bottom:60px*/}
.content .business ul.processList:after {display:inline-block; width:100%; content:''}
.content .business ul.processList li {margin-bottom:20px;display:inline-block; width:31%;border:1px solid #ccc}
.content .business ul.processList li:last-child {border:none}
.content .business ul.processList li:hover {border-color:blue}
.content .business ul.processList li.no_product {border:none}
.content .business ul.processList .imgArea {/*margin-bottom:20px;*/ overflow:hidden}
.content .business ul.processList .info {padding:10px 15px; background:#ebebeb}
.content .business ul.processList .info.color {background:#555}
.content .business ul.processList .info.color span {color:#fff}
.content .business ul.processList .info span {font-size:15px; color:#777}
/* BUSINESS - 사업영역 */
.content .business .area_wrap {text-align:justify; overflow:hidden}
.content .business .area_wrap:after {display:inline-block; width:100%; content:''}
.content .business .area_wrap > .area_box {display:inline-block; width:49.5%; margin-bottom:20px; vertical-align:top}
.content .business .area_wrap > .area_box .imgArea {overflow:hidden}
.content .business .area_wrap > .area_box .info {padding:30px; min-height:260px; background:#efefef}
.content .business .area_wrap > .area_box .info h4 {font-size:24px; font-weight:400; color:#444; line-height:1; margin-bottom:40px}

/*거래처별 list*/
.content .skil_table{text-align:center; overflow:auto}
.content .skil_table table{ width:100%}
.content .skil_table tr{border-bottom:1px dotted #ccc;}
.content .skil_table tr:first-child{border-top:3px solid #333;}
.content .skil_table tr:last-child{border-bottom:3px solid #333}
.content .skil_table th{padding:20px; width:130px; border-right:1px dotted #ccc;font-size:20px; color:#333}
.content .skil_table td{color:#333;font-size:15px; word-break:keep-all;padding:20px; border-right:1px dotted #ccc;}
.content .skil_table td:last-child{border-right:none}
/* 미디어 쿼리 */
@media screen and (max-width:1024px) {
 /* 서브 비주얼 영역 */
 #sub_visual {position:relative; overflow:hidden; z-index:20}
 #sub_visual {/*height:auto;*/margin-top:80px;}
 #sub_visual .caption {top:12%;position:absolute;max-width:100%;}
 #sub_visual .caption h2 {font-size:28px}
 #sub_visual .caption p {font-size:13px}
 #sub_visual .caption a.btn {font-size:13px; margin-top:40px}
 #sub_visual .swiper-slide {background:none !important;}
 #sub_visual .swiper-slide img.mobile-style {left:0px;top:0px;width:100%;margin-left:0px;}
 #sub_visual .swiper-button-next, #mainVisual .swiper-button-prev, #mainVisual .swiper-pagination-bullet  {display:none;}

 /* 서브 공통 레이아웃 */
 #container .location_bar {display:none}
 #container > .inner {border:none}
 
 #container .inner .content .title h2 {font-size:24px;}
 
 #leftBar {float:none; width:100%; margin:0; border-bottom:1px solid #dcdcdc}
 #leftBar:after {clear:both; display:block; content:''}
 #leftBar .title {float:left; /*width:25%;*/ height:60px; padding:0 0 0 50px}
 #leftBar .title h2 {display:none}
 #leftBar .title span {font-size:18px; margin:0; line-height:60px}
 #leftBar .box {display:none}
 .lnb {/*margin-left:25%;*/ height:100%}
 .lnb li {position:relative; float:left; height:100%; border-bottom:none; border-right:1px solid #dcdcdc}
 .lnb li a {display:inline-block; /*padding:0 30px;*/ height:100%; line-height:60px}
 .lnb li.on a:after {position:absolute; bottom:-18px; left:50%; margin-left:-9px; content:''; border-style:solid; border-width:9px; border-color:transparent; border-top-color:#555}
 #container > .inner .content {margin:0; /*min-height:auto*/}
 .btm_img {height:450px}
 .btm_img .inner .caption p {max-width:90%}
 
 #bottomCover .video {height:350px; }
 #bottomCover .video video {width:250%;top:0px;}
 #bottomCover .inner {padding:0 20px;z-index:30;}
 #bottomCover .inner .caption {padding-top:20%}
 #bottomCover .inner .caption h2 {font-size:30px;margin-bottom:30px}
 #bottomCover .inner .caption p {font-size:13px; max-width:100%;}
 
 
 /* COMPANY - 회사소개 */
 .content .greeting .grt_tit p br {display:none}
 .content .greeting ul.teamList > li .info ul li {font-size:12px}
 .content .greeting ul.teamList > li .info span {font-size:11px}
 .content .greeting ul.teamList > li .imgArea {width:70%}
 /* BUSINESS - 사업안내 */
 .content .business > p br {display:none}
 .content .business ul.typeList li {/*width:48%;*/ margin-bottom:40px}
 .content .business ul.typeList li.double_area { width:100%;}
 .content .business ul.typeList .txtArea {width: 100%; }
 /*.content .business ul.typeList li .imgArea {max-height:250px}*/
 .content .business ul.typeList li .imgArea img {/*margin-top:-20%*/margin-top:-5%}
 .content .business ul.processList .info span {font-size:13px}
 
 /* BUSINESS - 사업영역 */
 .content .business .area_wrap > .area_box .info {min-height:280px}
}
@media screen and (max-width:768px){
 #leftBar .title {width:15%;padding:0 0 0 30px}
 .lnb li a {padding:0 5px;}

	}
@media screen and (max-width:640px) {
 /* 서브 비주얼 영역 */
 #sub_visual > .imgList {height:200px}
 #sub_visual > .imgList > li {height:200px}

#container > .inner .content:before {display:none;}

 /* 서브 공통 레이아웃 */
 #container > .inner {padding:0 30px}
 #container > .inner .content {padding:0 0 50px 0; border:none}
 #leftBar {position:relative; padding:30px 0 0 0; border:none; overflow:visible; z-index:50}
 #leftBar .title {display:none}
 #leftBar a.dropdown {position:relative; display:block !important; margin-bottom:60px; padding:13px 15px; color:#fff; background:#555}
 #leftBar a.dropdown:after {position:absolute; top:50%; right:15px; width:0; height:0; margin-top:-3px; content:''; border-style:solid; border-width:6px; border-color:transparent; border-top-color:#fff}
 #leftBar a.dropdown.open:after {margin-top:-9px; border-top-color:transparent; border-bottom-color:#fff}
 .lnb {display:none; position:absolute; left:0; top:77px; width:100%; height:auto; margin-left:0; border-top:1px solid #f0f0f0; background:#fff; box-shadow:0 0 2px rgba(0,0,0,.2)}
 .lnb li {float:none; height:auto !important; border:none}
 .lnb li a {display:block; padding:13px 15px; line-height:1; color:#a1a1a1; border-bottom:1px solid #f0f0f0}
 .lnb li:hover a {color:#181818; text-decoration:none; background:none}
 .lnb li.on a {color:#181818; background:none}
 .lnb li.on a span {border-bottom:1px solid #181818}
 .lnb li.on a:after {display:none}
 #container .inner .content h3.sub_tit {font-size:16px; font-weight:600}
 #container > .inner img.img_mob {display:block !important}
 #container > .inner img.img_pc, #container > .inner img.img_tab {display:none !important}
 .btm_img {height:400px}
 .btm_img .inner {padding:0 30px}
 .btm_img .inner .caption h2 {font-size:36px}
 .btm_img .inner .caption p {max-width:100%; font-size:13px}

 /* COMPANY - 회사소개 */
 .content .greeting{ height:auto}
 .content .greeting .grt_tit { width:100%; float:none;}
 .content .greeting .grt_tit h3 {font-size:16px}
.content .greeting .grt_img{width:100%; float:none; height:auto}

 .content .greeting ul.teamList > li {width:100%; margin-bottom:30px; padding-top:30px; text-align:center; border-top:1px solid #e6e6e6}
 .content .greeting ul.teamList > li:first-child {border-top:none}
 .content .greeting ul.teamList > li .imgArea {width:160px}
 .content .greeting .info_box dl {border-bottom:1px dotted #ccc}
 .content .greeting .info_box dl dt {width:20%; border:none}
 .content .greeting .info_box dl dd {margin-left:25%; border:none}
 
 
 /* COMPANY - 연혁 */
/* .content .history .history_box .his_tit span {font-size:14px}*/
 .content .history .history_box .his_tit h3 {font-size:18px; margin-top:5px}
 .content .history .history_box .left {float:none; width:100%; margin-bottom:40px}
 .content .history .history_box .left p {font-size:12px}
 .content .history .history_box .right {margin-left:none; width:100%}
 .content .history .history_box .right dl {margin:15px 0; padding:15px 0 0 0; border-top:1px solid #e6e6e6}
 .content .history .history_box .right dl:first-child {border-top:none}
 .content .history .history_box .right dl dt {width:45px; font-size:18px}
 .content .history .history_box .right dl dd {margin-left:60px; font-size:12px}
 /* COMPANY - 찾아오시는 길 */
 #map {height:350px}
 .content .map_box ul.map_info li {font-size:12px}
 /* BUSINESS - 사업안내 */
 .content .business ul.typeList li {width:100%}
 .content .business ul.typeList .info h4 {font-size:15px}
 .content .business ul.typeList li .imgArea {max-height:initial}
 .content .business ul.typeList li .imgArea img {margin-top:0}
 .content .business ul.processList li {width:100%; margin-bottom:40px}
 .content .business ul.processList li:last-child {margin-bottom:0}
 /* BUSINESS - 사업영역 */
 .content .business .area_wrap > .area_box {width:100%; margin-bottom:15px}
 .content .business .area_wrap > .area_box .info {min-height:initial; padding:20px}
 .content .business .area_wrap > .area_box .info h4 {font-size:15px; font-weight:600; margin-bottom:20px}
 .content .business .area_wrap > .area_box .info p {font-size:12px}
}
@media screen and (max-width:480px){
.content .business ul.typeList .btnArea .catalog p{font-size:15px;}
	
}