@charset "utf-8";

/*skip navigation*/
#skipNavi{ position:relative; z-index:20000; width:100%;  margin:0 auto; }
#skipNavi > ul {}
#skipNavi > ul li{}
#skipNavi > ul li a{ display:block; position:absolute; top:-1000px; left:0px; width:100%;  height:46px; text-align:center;  line-height:46px;  color:#FFF; font-weight:700; background-color:#d11920;  }



/***** Header *****/
/* header */
#header{position:relative; /*z-index:97;*/}
#header .headerTop{width:100%; min-width:1150px; height:97px; background:#fff; border-bottom:1px solid #dcdcdc;}
#header .headerTop > .inner{position:relative; width:1150px; height:97px; margin:0 auto; overflow:hidden;}
#header .headerTop > .inner h1.logo{position: absolute;left:0; width:128px;height:48px;top: 23px}
#header .headerTop > .inner .TopBanner {margin:0 0 0 250px;width: 670px;padding-top: 39px;color: #222;font-size: 19px;font-weight: 500;line-height: 23px; text-align:center}
#header .headerTop > .inner .TopBanner span {padding:0 5px 0 35px;}
#header .headerTop > .inner .TopBanner span > span {color: #e14b4a;font-weight: 700;padding:0;}
#header .headerTop > .inner .TopBanner .left {float: left;}
#header .gnbArea{position:relative; width:100%; min-width:1150px; height:65px; background:#fff; border-bottom:3px solid #e14b4a;}
#header .gnbArea > .inner {width:1150px; margin:0 auto;}
#header .gnbArea .gnbMenu .twoD a:hover, #header .gnbArea .gnbMenu .twoD a:focus {color:#424242}
#header .twoDBg {display:none; position:absolute; top:100px; left:0; width:100%; height:258px; background:#fff; z-index:150}
#header .gnbBtn {display: none;}
#header .gnbArea > .inner .depth1{width:910px;margin: 0 auto;text-align: center;}
#header .gnbArea > .inner .depth1 > li{display:inline-block; text-align:center; transition:all .3s ease; margin:25px 0 0 -5px; vertical-align:top;}
#header .gnbArea > .inner .depth1 > li:hover{height:100px;}
#header .gnbArea > .inner .depth1 > li:first-child{margin:25px 0 0 80px;}
#header .gnbArea > .inner .depth1 > li:first-child a{padding:0 40px 0 0;}
#header .gnbArea > .inner .depth1 > li > a{position:relative; display:inline-block; color:#333; font-size:20px; font-weight: 500;padding:0 40px 0; letter-spacing:-2px;}
#header .gnbArea > .inner .gnbAreaBtn {display: none;}
#header .gnbArea > .inner .depth1 > li.on > a,
#header .gnbArea > .inner .depth1 > li:hover > a{color:#e14b4a;}
#header .gnbArea > .inner .depth1 > li > a:after{position:absolute; left:0; top:50%; content:""; background:#dbdbdb; width:1px; height:19px; margin:-8px 0 0;}
#header .gnbArea > .inner .depth1 > li:first-child > a:after{background:none;}


 .TopBanner_m {display:none; text-align:center; margin:3% 0; line-height:150%; font-size:17px}
 .TopBanner_m span {padding:0 5px; color:#373737;font-weight: 700}
 .TopBanner_m span > span,
 .TopBanner_m a {color: #e14b4a;padding:0;}

/*모바일*/
.mGnbBg {display:none; width:100%; height:100%; background:url("../images/black_bg1.png") repeat 0 0; position:absolute; top:0; left:0; z-index:99998}
.mGnbArea {display:none;width:272px;height:100%;background:#333;position:absolute;top:0;right:-300px;z-index:99999;}
.mGnbArea .gnbHead {background:#e14b4a; padding:16px 15px 17px;height: 19px;}
.mGnbArea .gnbHead a {font-size:13px; color:#fff}
.mGnbArea .gnbHead .close {float:right; width:13px; height:13px; margin-top:0px}
.mGnbArea .gnbHead .close img {width:13px; height:13px}
.mGnbArea .gnbBody .oneD {display:block; font-size:16px;color:#fff; padding:11px 15px; border-bottom:1px solid #767676; background:#333 url("../images/mgnb_oneD.png") no-repeat 94% 50%; background-size:15px 15px}
.mGnbArea .gnbBody .oneD.on {color: #e14b4a}

.contents {width: 1150px; margin: 30px auto 0;overflow: hidden; padding-bottom:60px}
.contents .mainBanner img {width: 100%}
.contents .mainBanner {background:url(/images/main_visual.jpg) no-repeat; background-size:cover; background-position:center; max-height:430px; min-height:200px}

.contents .mainBanner .page_tit {position: absolute;left:0;top: 40%; z-index: 100;text-align: center; width:100%; color: #fff;font-size: 36px;font-weight: 500;letter-spacing: -2px;line-height: 150%}
.contents .mainBanner .page_tit span {display: block;;font-size: 18px;font-weight: 300;}



/* 오시는길  */
.contacts {width:100%;margin:0px; padding-top:20px;text-align: left; }
.contacts ul {border-bottom:2px dotted #dedede;padding:10px 0px}
.contacts .ltitle {display:inline-block;width:150px;font-size:14px;color:#222;font-family: 'NotoSansKR';font-style: normal;font-weight:400;padding-left:10px;box-sizing: border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;}
.contacts .rcontent{display:inline-block;width:auto;color:#555;font-size:14px;font-family: 'NotoSansKR';font-style: normal;font-weight:200;line-height:24px;}



.contents .customerBox {position: relative;}
.contents .customerBox .noticeW {float: left;width: 810px;}
.contents .customerBox .noticeW ul > li {float: left; margin-left: 15px;margin-bottom: 27px;width: 260px;height: auto;position: relative}
.contents .customerBox .noticeW ul > li:first-child {margin-left: 0px}
.contents .customerBox .noticeW ul > li  a{display: block;padding: 20px;border: 1px solid #d9d9d9;box-sizing: border-box;}
.contents .customerBox .noticeW ul > li a .hos_cont{position: relative; min-height:132px}
.contents .customerBox .noticeW ul > li a .hos_cont .reduce_multi.title{margin-bottom:5%;width:100%;max-height:40px; color:#000;}
.contents .customerBox .noticeW ul > li a .hos_cont .reduce_multi.title strong{display:block; font-size:16px; line-height:20px; min-height:40px; width:100%; margin:0px; font-weight:800;}
.contents .customerBox .noticeW ul > li a .hos_cont .reduce_multi.cont{width:100%;min-height:58px;font-weight: 300;font-size: 14px;color: #666}
.contents .customerBox .noticeW ul > li a .hos_cont .reduce_multi.cont p{font-size:14px; line-height:19px; /*color:#777777;*/color:#555; min-height:58px; width:100%; margin:0px; font-weight:normal; }
.contents .customerBox .noticeW ul > li a .hos_cont .reduce_multi:after{color:#797979;}
.contents .customerBox .noticeW ul > li a .hos_cont .data_con{position:absolute; bottom:0; color:#797979;font-size: 12px}
.contents .customerBox .noticeW ul > li a .label_wrap{position:absolute; top:-2px;left:0px;}
.contents .customerBox .noticeW ul > li .btn_img{position:inherit;}
.contents .customerBox .noticeW .tit, h3.tit {margin-bottom:15px;color: #000;font-size: 20px;font-weight: 500;letter-spacing: -1.5px;line-height: 25px;}
.contents .customerBox .noticeW ul > li a .hos_cont .reduce_multi.cont {width: 100%;min-height: 58px;}



.contents .customerBox .noticeW ul > li.row_cont1 a {border:1px solid #0d78c0}
.contents .customerBox .noticeW ul > li.row_cont2 a {border:1px solid #1dc800}
.contents .customerBox .noticeW ul > li.row_cont1 {background-color:#0d78c0}
.contents .customerBox .noticeW ul > li.row_cont2 {background-color:#1dc800}
.contents .customerBox .noticeW ul > li .fa_icon {color:#fff; font-size:50px; text-align:center; padding-top:19px}
.contents .customerBox .noticeW ul > li a .title_con{position:absolute; bottom:19px; width:100%; text-align:center}
.contents .customerBox .noticeW ul > li a .title_con .txt {color:#fff;font-size: 14px; font-weight:400;}



.contents .customerBox .noticeW h3.tit {display: block;padding-top: 25px;}


.contents .customerBox .noticeW .s2{display:inline-block; float:right; position:relative; width:55px; height:30px}
.contents .customerBox .noticeW .s2 a {font-size:13px; font-weight:400}
.contents .customerBox .noticeW .s2:after{position:absolute; right:0px; top:10px; content:""; background: url(../images/btn_go.png) no-repeat; width:15px; height:20px;}


.reduce_multi {max-height: 37px;}
/*.reduce_multi, .reduce_multi > * {width: 140px; padding-right: 15px;}*/
.reduce_multi, .reduce_multi > * {  position: relative; overflow: hidden;display: block; word-break: break-all;}
.reduce_multi > *:after {content: '';position: absolute;right: 0;bottom: 0;width: 15px;height: 10px;background-color: #fff;z-index: 9;}
.cont_box-hos_story .list-type03 ul li a:hover p {text-decoration:none;}
.label_wrap [class^='label-'][class*='new'] {background-color: #f54337;vertical-align: top; margin:2px 0 0 1px}
.label_wrap [class^='label-']:first-child {margin-left: 0;}
.label_wrap [class^='label-'] {float: left;display: inline-block;height:17px;margin-left: 1px;padding: 0 5px 0 5px;}
.label_wrap [class^='label-'][class*='new']:after {content:'N';display:block;color:#fff;font-size:11px;text-align:center;line-height:17px;}
.blind {overflow: hidden;position: absolute;width: 0;height: 0;line-height: 0;text-indent: -9999px;}
.contents .customerBox .customer {float: right;width: 300px;margin:50px 0 0; border-top:2px solid #000;padding:38px 0 38px 5px; letter-spacing:-1px}
.contents .customerBox .customer .box1{float:left; position:relative; width:90px;}
.contents .customerBox .customer .box1:after{position:absolute; left:0; top:50px; content:""; display:block; background: url(../images/icon_customer.png) no-repeat; width:67px; height:67px;}
.contents .customerBox .customer .box1 .tit{color:#151515; font-size:20px; font-weight:400;}
.contents .customerBox .customer .box2{float:left; margin:-6px 0 0 20px; width:190px}
.contents .customerBox .customer  .box2 .number{color:#646464; font-size:27px;letter-spacing: -1px;font-weight: 700; line-height:1;}
.contents .customerBox .customer  .box2 .s1{margin:12px 0 0; color:#646464; font-size:15px; line-height:1.4;}
.contents .customerBox .customer  .box2 .s1 span {display: block;}
.contents .customerBox .customer  .box2 .s2{position:relative; margin:12px 0 0; border:1px solid #d7d7d7; width:170px; height:39px;}
.contents .customerBox .customer  .box2 .s2:after{position:absolute; right:14px; top:10px; content:""; background: url(../images/btn_go.png) no-repeat; width:15px; height:20px;}
.contents .customerBox .customer  .box2 .s2 a{width:100%; height:100%; display:block; padding:12px 0 0 15px; color:#000; font-size:15px; font-weight:300;}

.fullBox {height:180px; margin-bottom: 20px; margin-top:0px; background:  url(../images/bg_subvisual.jpg) no-repeat; background-size:cover; background-position:bottom center}
.box_inner {width: 1150px;margin: 0 auto;}
.posR {position: relative !important;height: 100%;}
.fullBox .page_tit {height: 100px;padding: 70px 0 0;text-align: center; }
.fullBox .page_tit span {font-size: 24px; color: #fff;font-weight: 600; line-height:140%; text-shadow: 0px 0px 4px rgba(0, 0, 0, 1); }
h3.dbl_uline {border-bottom: 2px solid #333;margin:30px 0 50px;}
h3.dbl_uline span:first-child {display: block; padding-bottom: 15px;font-size: 24px;font-weight: 500;color: #444;letter-spacing: -1px;}
.greetingBox img {float: left;}
.greetingBox .txt {float: left;width: 520px;padding-left: 58px;padding-top: 20px; }
.greetingBox .txt p {font-size: 16px;line-height: 1.6em;}
.greetingBox .txt p strong {display: block;}
.greetingBox .txt u {font-weight: 500}

.pageGuide {margin: 30px 0px 50px;border: 1px solid #d3d4d8;padding: 20px;}
.pageGuide >.title {margin-bottom: 12px;}
.pageGuide > .title strong {font-size: 20px;line-height: 1em;font-weight: 400;color: #e14b4a;}
.pageGuide > .inTxt {font-size: 15px;line-height: 1.5em;}

.business_list > dl{ display:table; width:100%;}
.business_list > dl > dt{ display:table-cell; vertical-align:middle; width:14%; text-align:center; padding:28px; border-top:solid 1px #494a4e; background:url('../images/cnt_2078_bg.png'); font-size:18px; font-weight:400; line-height:1.3em;}
.business_list > dl > dd{ display:table-cell; vertical-align:middle; width:86%; text-align:center; padding:28px; border-top:solid 1px #d3d4d8; font-size:23px; word-break:keep-all;line-height: 1.1em}
.business_list .list01 span{ display:block; margin:0 auto;}
.business_list .list01 .sloganTxt span {display: inline-block;line-height: 1.1em;}
.business_list .list01 .sloganTxt span.txtBlue {color:#3a73db}
.business_list .list01 .sloganTxt span.txtPuple {color:#f46534}
.business_list > dl > dd.txtGray {color: #999}
.business_list .list01 .txt{ font-size: 48px; line-height: 1.1em; padding:30px 0;}
.business_list .list01 .txt strong{ font-size: 48px; font-weight:700;}
.business_list .list01 .sloganTxt{ margin:10px 0;}
.business_list > dl.last > dt{ border-bottom:solid 1px #494a4e;}
.business_list > dl.last > dd{ border-bottom:solid 1px #d3d4d8;}

.conBox {width: 1030px;margin: 0 auto;margin-top: 30px;padding-top: 20px;}
.conBox .item{ float: left; width: 500px; min-height: 120px; text-align: center; border: 1px solid #d3d4d8;  }
.conBox .item > strong{ display: block; width: 90%; margin: 0 auto; margin-top: -20px; height: 40px; line-height: 40px; background-color: #e14b4a; color: #ffffff;  font-size: 18px; font-weight: 400; text-align: center; border-radius: 20px;}
.conBox .item+.item{ margin-left: 25px;margin-bottom: 40px}
.conBox .item:nth-child(3) {margin-left: 0}
.conBox .item .singleTxt{ padding: 0 44px; margin-top: 36px;}

.footer {background: #f9f9f9;border-top:1px solid #e1e1e1;padding:30px 10%;margin-top: 0px}
.footer .inner{position:relative; width:100%;  margin:0 auto; overflow:hidden;text-align: center;}
.footer p {line-height: 150%; font-size:13px}


/* 회사소개 */
.company_head {margin:0 0 50px 100px; }
.company_head img {width:100%; max-width:632px}

/* 제품소개 */
.productBody > div p {text-align:center; margin-top:30px}
.productBody > div p.title {font-size:23px; color:#333; font-weight:700; margin-top:20px}
.productBody > div p.img img {max-width:800px}
.productBody > div p.txt {font-size:15px; color:#F00; margin-top:10px}

.product2 { background:url(/images/products2.jpg) fixed bottom center no-repeat; background-size:cover}
.product2 .row {width:94%; max-width:1150px; margin:0 auto; padding:50px 3%; color:#fff; text-align:center}
.product2 h1 {font-size:50px; line-height:130%; margin-bottom:40px}
.product2 .txt1 {font-size:25px; line-height:150%}
.product2 .txt2 {font-size:17px; margin-top:40px}



@media (max-width:980px) {
	#header .gnbArea {display: none;}
	#header .gnbBtn {display: block;position: absolute;top: 23px;right: 4%;}
	#header .gnb h1 {padding-top: 28px}
	#header .headerTop > .inner .TopBanner {display: none;}
	#header .headerTop {min-width: auto;height: 77px;}
	 #header .headerTop > .inner {width: 100%;height: 77px;}
	 #header .headerTop > .inner h1.logo {left:10px;top:15px;}

	.contents.main {margin-top:0}
	.TopBanner_m {display:block;}

	 /*
#header .headerTop{width:100%; min-width:1150px; height:97px; background:#fff; border-bottom:1px solid #dcdcdc;}
#header .headerTop > .inner{position:relative; width:1150px; height:97px; margin:0 auto; overflow:hidden;}
#header .headerTop > .inner h1.logo{position: absolute;left:0; width:128px;height:48px;top: 23px}
#header .headerTop > .inner .TopBanner {margin:0 auto;width: 615px;padding-top: 39px;color: #222;font-size: 19px;font-weight: 500;line-height: 23px; text-align:center}
#header .headerTop > .inner .TopBanner span {padding:0 5px;}
#header .headerTop > .inner .TopBanner span > span {color: #e14b4a;font-weight: 700;padding:0;}
*/
	 .contents {width: 94%;margin:10px auto 0}

	 .contents .mainBanner .page_tit {font-size: 3vw;}
	 .contents .mainBanner .page_tit span {font-size: 1.7vw;}	 

	 .contents .customerBox {padding-top: 30px;}
	 .contents .customerBox .noticeW {float: none;width: 100%;clear: both;}
	 .contents .customerBox .noticeW ul > li {width: 32%;margin-left:1.5%;}
	 .contents .customerBox .noticeW ul > li a {padding:23px;}
	 .contents .customerBox .customer {float: none;clear: both;width: 100%;overflow: hidden;}
	 .contents .customerBox .customer .box1 {width: 15%}
	 .contents .customerBox .customer .box2 {width: 81%}
	 .contents .customerBox .customer .box2 .s1 span {display: inline-block;}
	 .contents .customerBox .customer .box2 .s1 span {padding:0 5px;}
	 .contents .customerBox .customer .box2 .s1 span + span {padding:0;}

	.fullBox .page_tit span {font-size: 20px}


	  


	  h3.dbl_uline {margin:30px 0 10px;}
	  .company_head {margin:0 0 0 0; }
	  .greetingBox img {display: none;}
	  .greetingBox .txt {padding-left: 0;width: auto}
	  .box_inner {width: 100%}

	  .business_list > dl dt {display: block;vertical-align: middle;width: 92%;text-align: left;padding: 10px 0;border-top: none;background: none;color: #3a73db;font-size: 18px;font-weight: 400;line-height: 1.3em;}
	  .business_list > dl dd {display: block;vertical-align: middle;width: 92%;text-align: center;padding: 30px;border: solid 1px #d3d4d8;font-size: 18px;margin-bottom: 30px;line-height: 1.5em;}
	  .business_list > dl.last > dt {border: none;}

	  .conBox {width: 94%}

	  .conBox .item {float: none;width: 100%;min-height: 90px;padding-bottom: 20px;text-align: center;border: 1px solid #d3d4d8;}
	  .conBox .item+.item {margin-left: 0px;margin-top: 50px;}

	  /* 메인 고객센터*/
	  .contents .customerBox .customer {padding-bottom:20px}

	  .contents {margin-top: 30px}
}

@media (max-width:760px) {
	.contents .customerBox {padding-top:0;}
	.contents .customerBox .customer .box1 {width: 30%;margin-top: -20px}
	.contents .customerBox .customer .box2 {width: 61%}
	.contents .customerBox .customer .box2 .number {font-size: 20px;}
	.contents .customerBox .customer .box1 .tit {font-size: 18px;}
	.contents .customerBox .customer .box2 .s1 span {padding:0;}
	.contents .customerBox .noticeW ul > li a {}
	.contents .customerBox .noticeW ul > li a .hos_cont .reduce_multi.title strong {font-size: 14px;}
	.contents .customerBox .noticeW ul > li a .hos_cont .reduce_multi.cont, .contents .customerBox .noticeW ul > li a .hos_cont .reduce_multi.cont p {font-size: 13px;}	

	.footer {padding:15px}
	.footer p {font-size:11px}
	.fullBox .page_tit {font-size: 20px;line-height: 20px;padding:70px 20px 0px;}
	h3.dbl_uline span:first-child {font-size: 20px;}


	/* 메인 고객센터  */
	.contents .customerBox .customer {margin-top:30px}

	/* 메인 슬라이드 페이징 크기조절  */
	.mainVisualArea .flexslider .flex-control-paging {bottom:2%}
	.mainVisualArea .flexslider .flex-control-paging li a {width: 7px;height: 7px;display: block;border:2px solid #fff}

	.fullBox .page_tit span {font-size: 17px}
}

@media (max-width:600px) {
	.contents .customerBox {outline:1px solid}
	.contents .customerBox .noticeW ul > li:first-child {clear:both; margin-left:0; width:100%}
	.contents .customerBox .noticeW ul > li.row_cont1,
	.contents .customerBox .noticeW ul > li.row_cont2 {width:48.5%; margin-left:3%}
	.contents .customerBox .noticeW ul > li.row_cont1 {margin-left:0}
	.fullBox .page_tit span {font-size: 15px}

	/* 제품소개 */
	.productBody > div {clear:both; width:100%; display:block}
	.productBody > div p {margin-top:50px}
	.productBody > div p.title { margin-top:5px}

	.product2 .row {padding:25px 0;}
	.product2 h1 {font-size:19px; line-height:130%; margin-bottom:20px}
	.product2 .txt1 {font-size:14px; line-height:150%}
	.product2 .txt2 {font-size:12px; margin-top:20px}
}


@media (max-width:480px) {
	#header .headerTop {height: 50px}
	 #header .headerTop > .inner h1.logo {left:10px;top:10px;width: 90px;height: 40px}
	 #header .headerTop > .inner h1.logo img { width:113px; height:32px;}
	#header .gnbBtn {top: 18px;}
	#header .gnbBtn img {width: 30px;height: 18px;}		

	.contents .customerBox .noticeW .s2 {width:50px}
	.contents .customerBox .noticeW .s2 a {font-size:12px}
	.contents .customerBox .noticeW .s2:after{top:8px}	

	.TopBanner_m {margin:5% 0; font-size:13px}

	.contents .mainBanner {background:url(/images/main_visual_m.jpg) no-repeat; background-size:cover; background-position:center;}
}


@media (max-width:370px) {
	.contents .customerBox {outline:1px solid}
	.contents .customerBox .noticeW ul > li {clear:both; margin-left:0; width:100%}
	.contents .customerBox .noticeW ul > li.row_cont1,
	.contents .customerBox .noticeW ul > li.row_cont2 {clear:both; width:100%; margin-left:0}	

	/* 회사소개 */
    .greetingBox .txt p {font-size:13px}
}