@charset "utf-8";
/* CSS Document */


h2 { font-size:35px; line-height: 38px; text-align: center; margin-bottom:10px;}
.add { text-align: center; color: #6a6a6a; font-size:15px;}
.add2 { width:70%; margin:0 auto}
h3 { font-weight: 500}
.sub_conts h2 { color: #333}
#subTitle .add { font-size:0.5em; font-weight: normal} 
/*인트로*/
.intro_header h2 { width:300px; margin:0 auto;  position: relative; padding: 30px 0 0 0}
.intro_header h2 img { width:100%;}
.visual_video {
    position: fixed;
    left: 50%;
    transform: translate(-50%, 0);
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    background-size: auto;
    background-size: cover;
		}
#intro_txt { text-align: center; color: #fff; font-size: 25px; line-height: 35px; position:relative; width:100%; margin-top: 100px;text-shadow: 1px 1px 3px #000;}
#intro_txt dl { margin-top: 50px;  margin-bottom:80px}
#intro_txt dl dt { font-size:93px; line-height: 98px;  margin-bottom: 20px; letter-spacing: -4px;}
#intro_txt dl dd { font-size: 35px; line-height:45px;} 
#intro_txt ul li { display: inline-block; width: 365px; }
#intro_txt ul li a { display: block; padding: 15px 0; color: #fff;  background: url(../img/intro/arrow_img.png) no-repeat 95% center rgba(0,0,0,0.6); font-size: 23px;border: 2px solid #fff}
#intro_txt ul li a:hover {  text-decoration: underline}
#intro_txt ul li p { font-size:13px;}

.intro_footer { position: fixed; bottom: 0; font-size: 13px; text-align: center; background:rgba(0,0,0,0.8); width: 100%; padding: 2px 0; color: #e6e6e6; }
		.intro_footer a {  color: #21b3b3; margin-left: 10px; text-decoration: underline}


#contentWrap { position: relative; width: 100%; overflow: hidden; padding-top: 131px;}
#footerWrap { position:relative; width:100%; background: #162431; color: #7b868f; padding: 50px 0; height: 110px; }
.inner { width:1300px; margin: 0 auto; position: relative; overflow: hidden}
.inner2 { width: 1150px;}
.tb_space { padding: 70px 0;}

.bt_blue { width:180px;}
.bt_blue a {  background:url(../img/bt_mark.png) no-repeat 90% center #0d5284; color: #fff; border-radius: 30px; width:100%; padding:10px 0; text-align: center; font-size:15px; line-height: 20px; margin: 0 auto; font-weight: 400; display: block }
.bt_blue a:hover { background-color: #0c4873; }

.bt_mint { width:210px; margin: 20px auto 0; text-shadow:none}
.bt_mint a {  background:url(../img/bt_mark.png) no-repeat 90% center #21b3b3; color: #fff; border-radius: 30px; width:100%; padding:13px 0; text-align: center; font-size:15px; line-height: 20px; margin: 0 auto; font-weight: 400; display: block }
.bt_mint a:hover { background-color: #2fd1d1; }

.bt_blue2 {width:180px; margin: 0 auto}
.bt_blue2 a {width:180px; border-radius: 30px; width:100%; padding:10px 0; text-align: center; font-size:15px; line-height: 20px; margin: 0 auto; font-weight: 400; display: block; border: 2px solid #0d5284; color: #0d5284}
.bt_blue2 a:hover { background-color: #0c4873; color: #fff }

/*서비스 영역*/
.service_area ul li {  float: left; background-size: cover; background-position: center; background-repeat: no-repeat;width: 100%;}
.service_area >div > ul > li { width:32%; margin: 0px 0.6% }
.service_area >div > ul > li > ul > li:first-child { margin-bottom: 14px; }
.service_area >div > ul > li  a { display:inline-block; width:100%; height: 100%}
.service_area .box1 { height:197px;box-shadow: 2px 3px 9px #ddd; position: relative}
.service_area .box2 { height:408px; box-shadow: 2px 3px 9px #ddd;  position: relative}
.service_area .sv1 { background-image: url("../img/service_img1.jpg");}
.service_area .sv2 { background-image: url("../img/service_img3.jpg");}
.service_area .sv3 { background-image: url("../img/service_img2.jpg");}
.service_area .sv4 { background-image: url("../img/service_img4.jpg");}
.service_area .sv5 { background-image: url("../img/service_img5.jpg");}
.service_area li >a> div { position: absolute; bottom: 27px; left:32px; color: #fff; }
.service_area li >a> div h3 { font-size:21px; margin-bottom: 2px; }
.service_area li >a> div p { color:#ddd}

/* noffz 영역 */
.noffz_area {float:left;  background-image: url(../img/ban_reprorise_noffz.jpg); background-size: cover; background-position: center; background-repeat: no-repeat; width:98.5%; height:250px;  margin: 20px 0.6% 0px 0.6%; box-shadow: 2px 3px 9px #ddd;}
.noffz_area_con {padding:40px; color:#ffffff; }
.noffz_area_con .noffz_title{font-size:26px; color:#ffffff; padding-bottom:12px;}
.noffz_area_con h1{position: relative; top:105px;}
.noffz_area_solution {position: relative; top:60px; left:22%; font-size:16px; color:#dddddd; }
.noffz_area_solution01 {float:left; list-style: none; margin:0; padding-right:40px;}
.noffz_area_solution02 {float:left; list-style: none; margin:0; padding-right:40px;}
.noffz_area_solution03 {float:left; list-style: none; margin:0; padding-right:40px;}
.noffz_area_solution04 {float:left; list-style: none; margin:0; padding-right:40px;}
.noffz_area_solution05 {float:left; list-style: none; margin:0; padding-right:0px;}


/*검색영역*/
.keyword_area { /*background: #f5f6f8*/background: url("../img/best_bg.jpg") no-repeat center center;   background-size: auto;background-size: cover; }
.keyword_area h2 { color: #fff}
.keyword_area h4 { margin-bottom: 10px; color: #c1e6f8}
.keyword_area .searchbox { margin-top:20px}

/*추천상품*/
.best_area {background: url("../img/best_bg.jpg") no-repeat center center;   background-size: auto;background-size: cover; display: none}
.best_area .tabs { text-align: center; }
.best_area .tabs li { display: inline-block; width: 12%; margin: 0 3px 15px ;   }
.best_area .tabs li a { color: #fff; display: block; width: 100%;  padding: 6px 0; border: 1px solid #fff; background: url(../img/arrow.png) no-repeat 95% center}
.best_area ul.tabs li.active {}
.best_area ul.tabs li.active a{	background-color: #21a9b6;	border: 1px solid #fff;	}
.best_area .tab_container { text-align: center;}
.best_area .tab_container dl { float:left; width:45.5%; background: #fff; margin: 1%; padding: 1.2% }
.best_area .tab_container dl dt { float:left; width:36%; position:relative; height: 158px;}
.best_area .tab_container dl dt p { position:absolute; right:0; bottom: 0; width:40px }
.best_area .tab_container dl dt img {     height: 100%;    max-height: 100%;    max-width: 100%;    width: 100%;}
.best_area .tab_container dl dd { float: left; width:60%; text-align: left; padding-left: 4%; margin-top: 10px}
.best_area .tab_container dl dd .tit { font-size:18px; line-height: 25px; font-weight: bold; margin-bottom: 10px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.best_area .tab_container dl dd ul { color: #878787; font-size:14px; font-weight: 600}
.best_area .tab_container dl dd ul li span:first-child { display:inline-block; width:80px; background: url(../img/best_line.gif) no-repeat right center; margin-right:10px } 
.best_area .tab_container dl dd ul li .price { color: #1f63a5; font-size:18px}

/*회사소개 영역*/
.company_area {background: url("../img/com_bg.jpg") no-repeat center center;   background-size: auto;background-size: cover; padding: 20px 0}
.company_area .company_conts { width:34%; float:right; background: #f2f5f8; text-align: left; padding:5% 8% 8%; height: 315px; position: relative}
.company_area .company_conts h2, .company_area .company_conts .add { text-align: left}
.company_area .company_conts .add { font-size:15px; margin-top: 20px}
.company_area .company_conts h3 { font-size:18px; line-height: 27px; margin-bottom:25px; letter-spacing: -1px}
.company_area .company_conts h3 img { vertical-align: middle; margin-right:5px; width: 27px;}
.company_area .company_conts .bt_blue { position: absolute; bottom:72px; left: 100px}


/*뉴스*/
.news_area > div > div { float:left;}
.news_area > div > div:first-child { width:19%; }
.news_area > div > div h2, .news_area > div > div .add {text-align: left}
.news_area > div > div:last-child { width:70%; float: right}
.news_area > div > div:last-child ul li { border-bottom: 1px solid #d1dfe1; padding:20px 10px 20px 0}
.news_area > div > div:last-child ul li .date { border-bottom: 1px solid #165888; color: #165888;  padding:25px 23px; letter-spacing: 1px}
.news_area > div > div:last-child ul li:last-child .date { border-bottom: 0}
.news_area > div > div:last-child ul li .board_tit {color: #165888; border: 1px solid #165888; padding:0; width:95px; text-align: center; display: inline-block; font-weight:bold; margin:0 15px; font-size: 13px; line-height: 21px;}
.news_area > div > div:last-child ul li:last-child { border-bottom: 0}
.news_area > div > div:last-child ul li a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; width: 52%; vertical-align: middle}


/*지도*/
.map_area { position: relative}
.map_conts { position:absolute; left:50%; margin-left:-664px; top:20px; background: rgba(255,255,255,0.9);  padding: 25px; width:350px; box-shadow:1px 1px 8px #ccc}
.map_conts dt { font-size:23px; line-height: 26px; border-bottom: 2px solid #004a81; color: #004a81; margin-bottom: 15px; display:inline-block}
.map_conts dd { color: #727272; font-size:15px;}
.map_conts dd div { color: #000; font-weight: bold; font-size: 19px; line-height: 25px;}
.map_conts dd div span {font-size: 15px; font-weight: normal}
.gm-style .place-card-large { display: none !important}

/*아이콘 링크*/
.icon_area { padding:70px 0;}
.icon_area dl { float:left; width:25%; text-align: center; background: url(../img/icon_line.gif) repeat-y right top;}
.icon_area dl dt img { width:90px; }
.icon_area dl dt img:hover { }
.icon_area dl dt p { font-size:21px;  font-weight: bold; margin: 15px 0}

/*메이커*/
.maker_area { padding:45px 0; background: #f4f4f4; border-top: 1px solid #ddd}
.maker_area ul { border:1px solid #ddd; border-left:0; display: inline-block}
.maker_area ul li {float:left; width:50%;}
.maker_area img { width:100%; }

.maker_area_table_st {border-top: 1px solid #cccccc; border-left: 1px solid #cccccc; text-align: center; background:#ffffff; } 
.maker_area_table_st th {background:#03b585; color:#fff; border-right:1px solid #666666;  border-bottom: 1px solid #cccccc; font-size:16px; padding:5px;}
.maker_area_table_st tr:nth-child(2n) {background: #ffffff;}
.maker_area_table_st td {padding:13px ; text-align:center; border-bottom: 1px solid #cccccc; border-right: 1px solid #cccccc; font-weight:bold; font-size:17px; line-height:1.6; color:#0265b6;}
.maker_area_table_st .maker_name {font-size:15px; line-height:1.5; color:#999999;}


#footerWrap h1 { float: left; width:25%; margin-top: 10px  }
#footerWrap .address { float: left; width:50%}
#footerWrap .address span { display: inline-block; width: 10px}
#footerWrap .address .copy { margin-top: 15px;}
#footerWrap .address a { color: #fff}
#footerWrap .address a:hover { text-decoration: underline}
#footerWrap .japhic_area {width: 88%; float:left;  margin-top: -100px; /* color: #fff; */ }
#footerWrap .japhic_area img { width:324px; }
/*#footerWrap .japhic_area {width:25%; float: left; margin-top:25px; color: #fff}*/
/*#footerWrap .japhic_area img { width: 100% }*/

.quick_banner { position:fixed; right: 20px; top: 200px; z-index: 100}
.quick_banner ul li { width:103px; text-align: center; margin-bottom: 10px}
.quick_banner ul li a { background : linear-gradient(40deg, #1dacad, #319bdf); display: block; padding:20px 15px 17px 15px; color: #fff; font-weight: bold; border-radius: 50px}
.quick_banner ul li a:hover { background : linear-gradient(40deg, #1dacad, #1dacad);}
.quick_banner ul li a img { width:40px;}


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

@media screen and (max-width:1280px) { 
	.inner { width:90%; margin: 0 auto; position: relative; }
	
	
	/*베스트영역*/
	.best_area .tab_container dl dd { margin-top: 0;}
	
	/*회사영역*/
	.company_area .company_conts { width:41%; padding: 5% 5% 9%}
	.company_area .company_conts .bt_blue { left:45px}
	
	/*지도*/
	.map_conts { left:20px; margin-left: 0;}
	
	
	.news_area > div > div:last-child ul li .date { padding:25px 16px}
	
}

/*모바일 버튼 나옴 1075*/
@media screen and (max-width:1075px) { 
#contentWrap { padding-top: 0}
	
	.quick_banner { display: none}
	
	/*회사소개*/
	.company_area .company_conts { background: rgba(242,245,248,0.8); width:90%; text-align: center; margin: 0 auto; float: none; height:198px;}
	.company_area .company_conts h2, .company_area .company_conts .add { text-align: center}
	.company_area .company_conts .bt_blue { left:50%; margin-left: -95px; bottom:29px;}
	
	
	/*인트로*/
	.intro_header h2 { width:250px;}
	#intro_txt { letter-spacing: -0.5px; margin-top: 77px; margin-bottom: 77px;}
	#intro_txt dl dt { font-size:72px; line-height: 85px; margin-bottom: 10px;}
	#intro_txt dl dd { font-size:33px;}
	#intro_txt ul li {width:250px;}
	#intro_txt ul li a { font-size:21px; padding: 11px 0}
	.noffz_area_con .noffz_title{font-size:24px; padding-bottom:5px;}
	.noffz_area_con h1{position: relative; top:0px;}
    .noffz_area_solution {top:62px; left:2%; font-size:15px;}
	
	                                                                     
}

@media screen and (max-width:1024px) { 
#contentWrap { padding-top: 0}
	
	
	
	
	
	/*하단*/
	#footerWrap { display: inline-block; height: auto; padding: 30px 0}
	#footerWrap h1 { float:none; width:100%; margin-bottom: 10px}
	#footerWrap h1 img { width:150px;}
	#footerWrap .address { float:none; width:100%;}
	
	/*인트로*/
	#intro_txt  { font-size:20px; }
	#intro_txt dl { margin: 27px 0 58px 0;}
	#intro_txt dl dt { font-size:60px; line-height: 80px; margin-bottom: 0}
	#intro_txt dl dd { font-size:29px;}
	#intro_txt ul li { width:295px;}
	#intro_txt ul li a { font-size:18px; padding:7px 0}
	
	.add2 { width:100%}
	
	.company_area .company_conts { height:100%; padding: 5% 5% 100px  }
	
	
	#footerWrap .japhic_area { width:84%; clear: both}
	#footerWrap .japhic_area img { width: 50px}
	
}

@media screen and (max-width:976px) { 
	.bt_blue2 { width:130px;}
	.bt_blue2 a {padding:6px 0}
	
	/*서비스 영역*/
	.service_area >div > ul > li { width:48.8%;}
	.service_area >div > ul > li:last-child { width:100%;  float: none; margin:0 0.6%;}
	.service_area .sv_last li { float: left; width: 49%; margin-top:12px }
	.service_area .sv_last li:first-child { margin-right: 1% }
	
	/*검색영역*/
	.searchbox .input > div { float:none; width:100%; margin-bottom: 15px;}
	.searchbox input, .searchbox .maker select { width:100%}
	.searchbox .price select { width:48%}
	
	/*베스트영역*/
	.best_area .tab_container dl dt { width:100%; height: auto}
	.best_area .tab_container dl dd { width:94%}
	.best_area .tabs li { width:40%;}
	
	/*아이콘 링크*/
	.icon_area dl dt img { width:70px;}
	.icon_area dl dt p { font-size:19px;}
	
	
	
	.news_area > div > div:last-child ul li a { width: 48%;}
	
	
	
	
}

@media screen and (max-width:767px) {  
	
	
	/*검색영역*/
	.searchbox .price select { width:47%}
	
	/*베스트영역*/
	.best_area .tab_container dl  { float:none; width:93%; display:inline-block; padding: 3%}
	.best_area .tab_container dl dt { height: 130px; width:27%}
	.best_area .tab_container dl dd { width:55%;}
	.best_area .tab_container dl dd .tit { font-size: 16px; line-height: 24px;}
	.best_area .tab_container dl dt p { width:32px;}
	
   
	/*회사소개*/
	
	
	/*뉴스*/
	.news_area { height: 606px;}
	.news_area > div > div { float: none; width:100% !important}
	.news_area > div > div:first-child { text-align: center; margin-bottom:20px}
	.news_area .bt_blue { position:absolute; bottom: 10px; left: 50%; margin-left:-100px;}
	.news_area > div > div h2, .news_area > div > div .add { text-align: center}
	.news_area > div > div:last-child ul li .date { padding:18px 10px;}
	.news_area > div > div:last-child ul li { padding: 13px 10px 13px 0}
	.news_area > div > div:last-child ul li .board_tit { margin: 0 10px}
	
	/*지도*/
	.map_area > div { padding-top:195px;}
	.map_area > div .map_google { height:300px !important;}
	.map_area > div .map_google .place-card { display: none !important}
	.map_conts { left:0; top: 0; width:90%; background: #f2f5f8; box-shadow:none; padding: 25px 5%}
	
	/*아이콘 링크*/
	.icon_area { padding:50px 0 30px }
	.icon_area dl {  width:50%;  background:none; margin-bottom: 30px}

	/*메이커*/
	.maker_area ul li:first-child { border-bottom: 1px solid #ddd}
	.maker_area ul li { float:none; width:100%;}
	
	.maker_area_table_st td {padding:10px; font-size:12px; line-height:1.4;}
	
	
	
	/*하단*/
	#footerWrap .address p:first-child {  display: inline}
	
	/*인트로*/
	.visual_video { left:0;transform: translate(-55%, 0);}
	.intro_header h2 { width:213px;}
	#intro_txt { width:95%; margin: 0 auto; top:40px; position: relative;}
	#intro_txt dl dt { font-size:2.5em; line-height: 63px; }
	#intro_txt dl dd { font-size:1em; line-height: 30px}
	#intro_txt ul li { width:80%; margin-bottom: 5px}
	
	
	.company_area .company_conts h3 img { display: none}
}

@media screen and (max-width:640px) {  
	h2 { font-size:25px; line-height: 35px; margin-bottom: 7px;}
	h2 span { display: block}
	
	/*서비스 영역*/
	.service_area li >a> div { bottom: 18px; left: 14px;}
	.service_area >div > ul > li { width:99%; float:none; margin:1%}
	.service_area >div > ul > li:first-child { width:100%;  float: none;}
	.service_area >div > ul > li > ul > li:first-child { margin-bottom: 1%}
	.service_area .sv_first li { float: left; width: 49%;  }
	.service_area .sv_first li:first-child { margin-right: 1% }
	.service_area .box2 { height:197px; clear: both; width: 99%}
	.service_area .sv_last li { margin-top: 0}
	.service_area li >a> div p { font-size:13px;}
	
	/*검색영역*/
	.searchbox .price select { width:46%}
	
	/*베스트 영역*/
	.best_area .tab_container dl dt { width:39%; height: 125px;}
	.best_area .tab_container dl dd .tit { line-height: 19px;}
	.best_area .tab_container dl dd ul li { line-height:18px; font-size:13px;}
	.best_area .tab_container dl dd ul li .price { font-size:17px;}
	.best_area .tab_container dl dd ul li span:first-child { width:72px;}
	
	 /*회사소개*/
	.company_area .company_conts {  }
	.company_area .company_conts h3 { font-size:17px; margin-bottom: 15px;}
	.company_area .company_conts .add { font-size:14px; letter-spacing: -1px;}
	
	
	/*뉴스*/
	.news_area > div > div:last-child ul li .date { display: none}
	
	.news_area > div > div:last-child ul li a { width:61%;}
	
	.news_area > div > div:last-child ul li .board_tit { font-size:0.8em;}
	
	.maker_area_table_st td {font-size:11px;}
	
	.noffz_area_con {padding:28px;}
	.noffz_area_solution {top:40px; left:0%; font-size:15px;}
	
}
@media screen and (max-width:560px){
		.service_area li >a> div h3 { font-size:1.1em;}
		.service_area li >a> div p { font-size:12px;}

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

{  
	/*인트로*/
	#intro_txt {top:30px;}
	#intro_txt dl { margin: 19px 0 40px 0}
	#intro_txt dl dt { font-size:2em; line-height: 59px;}
	
	.service_area li > a > div p { font-size:0.8em;}
	
	.map_conts dt { font-size:1.5em;}
	.map_conts dd div { font-size:1.3em;}
	
	.noffz_area_con .noffz_title{font-size:22px; padding-bottom:5px;}
	.noffz_area_solution {top:40px; left:0%; font-size:14px;}
	
}

@media screen and (max-width:360px) {  
	.bt_blue2 a { font-size:13px; padding:4px 0}
	
	.company_area .company_conts h3 { font-size:15px;}
	.company_area .company_conts {}
	
	.searchbox .price select { width:45.5%;}
	
	.news_area > div > div:last-child ul li .board_tit { width:78px; margin: 0 5px; }
	
	.icon_area dl dt p { font-size:17px;}
	
	#intro_txt dl dt { font-size:1.8em; }
	
	.map_conts dd div { font-size:1.1em;}
	
	.noffz_area {height:360px;}
	.noffz_area_solution04 {padding-right:0px;}
}