@charset "utf-8";
@import url(http://cdn.jsdelivr.net/font-nanum/1.0/nanumgothic/nanumgothic.css);

*{margin:0; padding:0;}
body{
	font:13px/1.7 'Nanum Gothic',"돋움", "굴림", sans-serif;
	color:#222;
	margin:0 auto;
}

/*  Total CSS  */
ol,ul,li { list-style: none; }
a { outline:0; text-decoration:none; color:#555; }
img {
	border:0;
}
.line{
	clear:both;
	border-bottom:#CCC dashed 1px;
	margin-bottom:10px;
	width:100%;
}
.clearfix:before, 
.clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }
.main_box_title{
	position:absolute;
	left:0; top:0;
	z-index:1;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td, th {
  padding: 0;
}

/*****************  header   *****************/

.top_header{
	position:absolute;
	width:100%;
	z-index:20;
	margin-top:96px;
}
h1.toplogo{
	position: fixed;
	background:#52a2fc;
	background:linear-gradient(55deg, #7cbbd8, #52a2fc);
	transform:skewX(-55deg);
	width:200px;
	height:500px;
	top:0;
	left:-420px;
	z-index:31;
}
h1.toplogo img{
	position:absolute;
	left:97px;
	top:5px;
	height:auto;
	transform:skewX(55deg);
}
.top_link{
	position:fixed;
	background:#fff;
	width:100%;
	height:40px;
	top:0;
	margin:0 auto;
	z-index:25;
}
.top_link ul{
	position:fixed;
	width:300px;
	right:0px;
	background:#222;
}
.top_link ul li{
	float:left;
	width:100px;
	height:40px;
	line-height:40px;
	text-align:center;
}
.top_link ul li a{
	text-transform:uppercase;
	font: bold 10px "Ropa Sans", sans-serif;
	color: rgba(255,255,255,0.6);
	transition:all 0.5s;
}
.top_link ul li:hover a{
	font-size:11px;
}
.top_menu{
	position: fixed;
	width:100%;
	background:#fff;
	height:60px;
	overflow:hidden;
	top:40px;
	border-top:1px solid #e4e4e4;
	border-bottom:1px solid #e4e4e4;
	box-sizing:border-box;
}
#line{
	position:absolute;
	top:60px;
	width:100%;
	height:1px;
	border-bottom:1px solid #e4e4e4;
	z-index:1;
}
.menu_open{
	position:absolute;
	display:none;
	font-size:22px;
	right:50px;
	top:11px;
	z-index:1;
	cursor:pointer;
}
.menu_close{
	position:absolute;
	display:block;
	font-size:26px;
	left:-50px;
	top:48px;
	z-index:0;
	cursor:pointer;
}
.menu_close i{
	font-size:26px;
}
.gnb{
	position:absolute;
	width:96%;
	margin-left:4%;
	display:block;
	/*
	left:50%;
	margin-left:-600px;
	*/
	border-left:1px solid #e4e4e4;
	box-sizing:border-box;
	
}
.gnb > li{
	float:left;
	position:relative;
	width:20%;
	height:100%;
	line-height:60px;
	border-right:1px solid #e4e4e4;
	box-sizing:border-box;
	transition:all 0.5s;	
}
.gnb > li:last-child{
	border-right:0;
}
.gnb > li > i{
	position:absolute;
	top:19px;
	color:#fff;
	font-size:20px;
	right:10px;
	opacity:0.7;
}

.gnb > li > a{
	display:block;
	padding-left:20px;
	box-sizing:border-box;
	width:100%;
	height:100%;
	font-weight:bold;
	font-size:16px;
	letter-spacing:1px;
}
.gnb > li:hover > a{
	color:#fff;
	background:#26272c;
}
.gnb > li > a > span{
	position:absolute;
	text-transform:uppercase;
	left:100px;
	top:25px;
	opacity:0.3;
	font:bold 9px "Ropa Sans",arial, sans-serif;
}
.gnb > li:nth-child(3) > a > span{
	left:118px;
}
.gnb > li:hover > a > span{
	color:#fff;
}
.gnb ul{
	position:absolute;
	width:100%;
	height:145px;
	left:0px;
}
.gnb ul a{
	display:block;
	width:100%;
	box-sizing:border-box;
	height:35px;
	line-height:35px;
	font-size:13px;
	padding-left:20px;
	color:#222;
	transition:all 0.5s;
}
.gnb ul a:hover{
	color:#fff;
	background:rgba(0,0,0,0.8);
}
.gnb ul li{
	position:relative;
}
.gnb:after{
	clear:both;
}

/************* mobile top menu *************/

.mobile_top_menu{
    position: fixed;
    width:50%;
    height:100%;    
    top:0;
    right:-100%;
    background:#fff;
    z-index:20;
}
.mobile_top_menu > ul > li:after{
   content:'+';
   position:absolute;
   height:20px;
   line-height:20px;
   font-size:18px;
   font-weight:bold;
   top:20px;
   right:20px;
   text-align:center;
   vertical-align:middle;
   cursor:pointer;
}
.mobile_top_menu > ul > li:hover:after{
	color:#fff;
}
.m_gnb{
   position: absolute;
   width:100%;
   right:0;
   top:40px;
   display:none;
   border-top:1px solid  rgba(204,204,204,0.5);
}
.m_gnb > li{
   position:relative;
   width:100%;
   height:100%;
   background:#fff;
   border-bottom:1px solid  rgba(204,204,204,0.5);
   box-sizing:border-box;
   transition:all 0.5s;
}
.m_gnb > li > a{
	display:block;
	height:57px;
	line-height:57px;
	padding-left:20px;
	box-sizing:border-box;
	font-weight:bold;
	font-size:16px;
	letter-spacing:1px;
}
.m_gnb > li.on > a,
.m_gnb > li:hover > a,
.m_gnb > li> ul li a:hover{
  background:#222;
  color:#fff;
}
.m_gnb > li > a > span{
	position: relative;
	text-transform:uppercase;
	left:10px;
	top:0px;
	opacity:0.3;
	font:bold 9px "Ropa Sans",arial, sans-serif;
}
 .m_gnb ul{
   position:absolute;
   display:block;
   width: auto;
   top:0;
   left:20px;
  transition:all 0.5s;
}
.m_gnb li ul{
  position:relative;
  border-top:1px solid  rgba(204,204,204,0.5);
  transition:all 0.7s;
  left:0;
  display:none;
}
.m_gnb > li.on ul,
.m_gnb li ul.on{
  display:block;
}
.m_gnb ul li a{
	display:block;
	width:100%;
	height:40px;
	line-height:40px;
	text-indent:30px;
	font-size:13px;
	text-align:left;
	color:#222;
	transition:all 0.5s;
	background:#fff;
}
/*
.m_gnb ul li a{
	display:block;
	height:30px;
	line-height:30px;
	text-indent:30px;
}
.m_gnb ul a:hover{
	color:#222;
	background:rgba(204,204,204,0.5);
	font-size:13px;
}


/***********     navigation     ****************/

.main_nav{
	position: fixed;
	background:#4d4d4d;
	top:50%;
	left:10px;
	margin-top: -62px;
    padding-top: 1px;
	z-index:15;
}
.main_nav li{
	padding:0 1px 1px;
}
.main_nav a{
	display:block;
	background:#26272c;
	color:#fff;
	width:40px;
	height:40px;
	line-height:40px;
	text-align:center;
	font-size:13px;
	transition:all 0.5s;
}
#menu li.on a,
#menu li:hover a{
	background:#fff;
	color:#222;
	font-weight:bold;
	font-size:15px;
}

.wrap{
	position: relative;
	width:100%;
}
/************* main box    *************/

.main{
	width:100%;
	height:900px;
	position:relative;
	background-size:cover;
	background-position:right center;	
	overflow:hidden;
}
.main1{background-image:url(../images/main_bg_1.jpg);}
.main2{background-color:#fff;}
.main3{background-image:url(../images/main3_bg.jpg); background-attachment:fixed;}

.main > article{
	position: relative;	
	text-align:center;
}
.main > article>  p{
	font:bold 45px/1 arial;
}

.main > article>  p > span{
	font: bold 14px 'Nanum Gothic',"돋움", "굴림", sans-serif;
	margin-left:5px;
}
.main > article > span{
	font-size: 11px;
	letter-spacing:1px;
	text-transform:uppercase;
}

.main1 article {
	top:300px;
	display:none;
}
.main2 article,
.main3 article{
	margin:40px 0;
}

.main1 .main_slide_group{
	position:absolute;
	overflow:hidden;
	width:100%;
	height:600px;
	bottom:0;
}
.main_slide{
	position:absolute;
	width:100%;
	height:100%;
	left:7%;
	opacity:0;
}
.main_slide img{
	position: absolute;
	left:7%;
	opacity:1;
}
.main_slide > b{
	position: absolute;
	display:block;
	top:7px;
	left:50%;
	width:500px;
	padding:9px 0;
	box-sizing:border-box;
	text-align:center;
	font: 18px/1.3   'Nanum Gothic',sans-serif;
	font-weight:normal;
	color: rgba(255,255,255,0.5);
	background:rgba(0,0,0,0.5);
	opacity:0;
}

/********** 새로추가 *****************/
.port_slide{
	position:absolute;
	width:96%;
	margin:0 2%;
	height:150px;
	bottom:210px;
	overflow:hidden;
}
.port_slide_wrap{
	position:relative;
	width:100%;
	height:100%;
}

.port_slide_wrap ul li{
	width:25%;
	height:150px;
	padding:7px;
	background: rgba(255,255,255,0.8);
	overflow:hidden;
	box-sizing:border-box;
}
.port_slide_wrap ul li img{
	width:100%;
	height:137px;
}

.port_nav{
	position:absolute;
	top:50%;
	margin-top:-23px;
	cursor:pointer;
}
.port_nav#prev{
	width:2.5%;
	left:10px;
}
.port_nav#next{
	width:2.5%;
	right:10px;
}

/********** 새로추가 끝 *****************/
.notice_group{
	position:absolute;
	width:96%;
	margin:0 2%;
	border:15px solid rgba(255,255,255,0.5);
	height:160px;
	background:#fff;
	bottom:30px;
	box-sizing:border-box;
	overflow:hidden;
}
.notice_group > div{
	float:left;
	position:relative;
}
.notice_group > div.tel{
	width:19%;
}
.notice1, .notice2, .notice3{
	width:27%;
	height:100%;
	position:relative;
	/*margin-left:10px;*/
	overflow:hidden;
}
.notice1{
	margin-left:0;
}

.notice1 em, .notice2 em, .notice3 em{
	display:block;
	font-style:normal;
	position:relative;
	width:auto;
	height:52px;
	overflow:hidden;
}
.notice1 em span:first-child,
.notice2 em span:first-child,
.notice3 em span:first-child{
	font:bold 15px/0.5 "Ropa Sans", sans-serif,arial;
	letter-spacing:0;
}
.notice1 em img,
.notice2 em img,
.notice3 em img{
	position:absolute;
	left:0px;
	top:20px;
}
.main2_box,
.main3_box{
	position: relative;
	width:96%;
	margin:0 2%;
	height:660px;
	overflow:hidden;
}

/*******************    slide     ******************/

.main2_box > div{
	float:left;
	position:relative;
	width:32.3333%;
	height:230px;
	padding:20px;
	box-sizing:border-box;
	overflow:hidden;
	transition:all 0.5s;
}
.main2 > article>  p{
	font:bold 45px/1 arial;
}
.main2_box > div.slide{
	width:33.3333%; 
	height:100%;
	top:0; left:0;
	padding:0; 
}
.slide_img_group{
	position:relative;
	width:100%;
	height:100%;
	overflow:hidden;
}
.slide_img_group img{	
	position:absolute;
	width:100%;
	height:100%;
	left:0; top:0;
	opacity:0;
}
.slide_nav{
	position:absolute;
	top:75%;
	margin-top:-30px;
	width:45px;
	height:60px;
	cursor:pointer; 
}
.slide_nav#prev{
	left:0;
}
.slide_nav#next{
	right:0; 
}
.slide_nav img{
	margin-top:5px;
}


.main2_box > div:nth-child(4),
.main2_box > div:nth-child(5){margin-top:10px;}

.main2_box > div:not(:nth-child(1)){
	box-sizing:border-box;
	margin-left:0.9%;
	height:325px;
	border:1px solid #e4e4e4;
}
.main2_box > div:not(:nth-child(1)) h3{
	transition:all 0.7s;
	-webkit-transition:all 0.7s;
}
.main2_box > div:not(:nth-child(1)):hover h3{
	background:#222;
	color:#fff;
	font-weight:normal;
	text-indent:20px;
}
.main2_box > div:first-child > h3{
	margin-top:40px;
}
.main2_box > div > h3,
.main3_box > div > h3,
.qa_group > li > h3{
	font-size:18px;
	letter-spacing:1px;
}

.main2_box >  div > em,
.main3_box >  div > em,
.qa_group >  li > em{
	display:block;
	position: relative;
	top:0px;
}
.main2_box > div > p,
.main3_box > div> p,
.qa_group > li > p{
	margin:20px 0 7px 0;
	font-size:13px;
}
.main2_box > div > p img{
	position:relative;
	padding-bottom:10px;
}
.per_75,
.per_100{
	position:relative;
}
.per_75 > .per_num{
	position:absolute;
	top:45px;
	left:50px;
	font-size:38px;
	font-weight:normal;
}
.per_75 > .per{
	position:absolute;
	top:70px;
	left:100px;
	font-size:16px;
}
.per_100 .per_num{
	position:absolute;
	top:45px;
	left:38px;
	font-size:38px;
	font-weight:normal;
}
.per_100 .per{
	position:absolute;
	top:70px;
	left:110px;
	font-size:16px;
}
.main2_box  button,
.main3_box  button,
.qa_group lbutton{
	position: absolute;
	text-transform:uppercase;
	display:block;
	width:120px;
	height:30px;
	font-size:12px;
	border:none;
	background:#999;
	color:#fff;
	cursor:pointer;
	bottom:20px;
	right:20px;
	transition:all 0.5s;
	z-index:1;
}
.qa_group button{
	background:#111;
}
.main button:hover,
.qa_group li button:hover{
	color:#fff;
	background:#2c6195;
}

.main3_box > div{
	position:relative;
	float:left;
	width:32.6962%;
	height:50%;
	padding:20px;
	box-sizing:border-box;
	overflow:hidden;
	transition:all 0.5s;
}
.main3_box  > div:first-child{ 
	background:#26272c;
	background:url(../images/main3_box1_img.jpg) no-repeat;
	background-size:cover;
}
.main3_box  > div:first-child h5{
	position: absolute;
	display:block;
	left:88px;
	bottom:100px;
	font-weight:normal;
	color: rgba(255,255,255,1);
	text-transform:uppercase;
}
.main3_box  > div:first-child h5 i{
	font-size:30px;	
	width:80px;
	height:80px;
	line-height:80px;
	border-radius:50%;
	background:rgba(0,153,255,1);
	text-align:center;
}
.main3_box > div:first-child h5 i:after{
	content: '';
	position: absolute;
	left: 28px;
	top:98px;
	margin-top:-20px;
	border-left: 12px solid transparent;
	border-top: 12px solid rgba(0,153,255,1);
	border-right: 12px solid transparent;
}
.main3_box  > div:first-child h5 span{
	position:absolute;
	font-size:13px;
	letter-spacing:1px;
	color: rgba(255,255,255,0.6);
	left:0px;
	bottom:-40px;
}
.main3_box  > div:first-child h5 span a{
	color:#fff;
	display:block;
	padding:0 10px;
	background:#0b0b0d;
}
.main3_box  > div.online_order{
	float:right;
	width:66.4038%;
	margin-left:0.9%;
	background:#26272c;
	background-image:url(../images/main3_box2_img.png);
	background-repeat:no-repeat;
	background-position:right center;
	box-sizing:border-box;
}
.main3 > article > p,
.main3 > article > span,
.main3_box  > div h3,
.main3_box  > div p,
.main3_box  > div span{
	color:#fff;
}
.main3_box > div:nth-child(2) p{
	position:relative;
	top:0px;
}
.main3_box > div:not(:nth-child(2)) p{
	background:rgba(0,0,0,0.3);
	padding:3px 5px;
}
.main3_box > div:nth-child(2) p span{
	display:block;
	text-align:center;
	font-style:normal;
	font-size:22px;
	background:rgba(0,0,0,0.7);	
}
.main3_box .qa_group{
	margin-top:10px;
	overflow:hidden;
	box-sizing:border-box;
}
.main3_box  > div:nth-child(3){
	width:32.6962%;
	background:url(../images/main3_box3_img.jpg) no-repeat;
	background-size:cover;
}
.main3_box  > div:nth-child(4){
	width:32.6962%;
	background:url(../images/main3_box4_img.jpg) no-repeat center;
	background-size:cover;
	margin-left:0.9%;
}
.main3_box  > div:nth-child(5){
	float:right;
	width:32.6962%;
	background:url(../images/main3_box5_img.jpg) no-repeat;
	background-size:cover;
	margin-left:0.9%;
}
.main3_box >  div > em{
	opacity:0.2;
}
.main3_box > div.qa_tel span{
	position:absolute;
	display:block;
	bottom:70px;
	font-size:22px;
	padding:0px 13px;
	background:rgba(0,0,0,0.6);
}
.main3_box > div h4{
	position:absolute;
	width:90%;
	margin:0 5%;
	font-size:20px;
	line-height:30px;
	font-weight:normal;
	text-align:left;
	color:rgba(255,255,255,0.7);
	top:40px;
}

/*********  상담폼  ***************/
#reg {
  position: relative;
  height:175px;
  margin-top:30px;
}
#reg p{
	margin-bottom:15px;
}
#reg label {
  display: none;
}
#reg input:not([type=image]),
#reg select{
  font:13px 'Nanum Gothic',"돋움", "굴림", sans-serif;
  vertical-align:middle;
  width: 15em;
  padding: 0.5em 0.5em 0.5em 2.5em;
  background:url(../images/form_bg_icon.png) no-repeat 0 4px;
  background-color: rgba(255,255,255,0.7);
  border-radius:5px;
  transition: all 0.3s;
  border:0;
  outline-style:none;
}
#reg textarea{
	border:0;
	outline-style:none;
	border-radius:5px;
	background-color: rgba(255,255,255,0.7);
}
#reg textarea:hover{
	background-color:#fff;
}
#reg select{
	width:18em;
	color:#555; 
}
#reg input::-webkit-input-placeholder,
#reg textarea::-webkit-input-placeholder { color:#222; }
#reg input::-moz-placeholder,
#reg textarea::-moz-input-placeholder { color:#222; }
#reg input::-ms-placeholder,
#reg textarea::-ms-input-placeholder { color:#222; }

#reg input:not([type=image]):hover {
  width: 17em;
  background-color: #fff;
}
#reg select:hover{
	width:20em;
}
#reg #wr_name {
  background-position: 0 2px;
}
#reg #wr_name:hover {
  background-position: 0 -26px;
}
#reg #hp {
  background-position: 0 -54px;
}
#reg #hp:hover {
  background-position: 0 -81px;
}
#reg select{
	 background-position: 0 -109px;
}
#reg select:hover{
	 background-position: 0 -139px;
}
#reg p.reg_con{
	position:absolute;
	left:300px;
	top:0;
}
.add_count{
	display:inline-block;
	position: relative;
	width:100px;
	height:30px;
	left:400px;
	bottom:30px;
}

/***************     footer   *********************/
#top_btn{
	position:fixed;
	width:80px;
	height:80px;
	text-align:center;
	line-height:50px;
	right:0;
	bottom:5%;
	cursor:pointer;
	z-index:10;
	display:none;
}
#top_btn i{
	font-size:40px;
	color:#666;
}

.footer{
	position: relative;
	width:100%;
	height:150px;
	clear:both;
}
.main_footer{
	position: relative;
	background:#222;
	width:100%;
	height:110px;
}
.copy{
	width:100%;
	margin:0 auto;
}
.copy h2{
	float:left;
	width:10%;
	height:110px;
	margin:0 5%;
}
.copy h2 img{
	margin-top:25px;
}
.copy_menu{
	padding:10px 0;
}
.copy .copy_menu a{
	display:block;
	padding:0.4em 1.5em;
	color:#fff;
	float:left;
	background:#2d2c2c;
}
.copy .copy_menu a:hover{
	color:#86c840;
}
.copy_txt{
	color:#9d9e9d;
	margin-top:30px;
	letter-spacing:1px;
	font-size:11px;
}
.main_copyright{
	position: relative;
	width:100%;
	height:40px;
	background:#fff;
	text-align:center;
	z-index:10;
}
.main_copyright p{
	padding-top:5px;	
	font:  0.675em "Ropa Sans",arial, sans-serif;
	line-height:1.5;
}
.main_copyright p a{
	font:  1em "Ropa Sans",arial, sans-serif;
}
.main_copyright strong{
	color:#2c76b6;
}

/******************   sub page     ***************/

.dijainart{
	font-weight:bold;
	color:#2c76b6;
	letter-spacing:1px;
}

.sub_wrap{
	position: relative;
	width:100%;
	/*padding-top:98px;
	padding-top:76px;
	*/
	margin-top:100px;
}

/***************** sub main slide **************/
.sub_slide_wrap{
	position:relative;
	width:100%;
	height:350px;
	overflow:hidden;
}
.sub1_bg{
	background: url(../company/images/slide_bg.jpg) no-repeat;
	background-size:cover;
}
.sub2_bg{
	background: url(../webdesign/images/slide_bg1.jpg) no-repeat;
	background-size:cover;
}
.sub5_bg{
	background: url(/bbs/images/slide5_bg.jpg) no-repeat  center;
	background-size:cover;
}
.sub_slide_img_group{
	position:relative;
	width:100%;
	height:100%;
	overflow:hidden;
	
}
.sub_slide_img_group p{
	position:absolute;
	display:inline-block;
	bottom:0px;
	left:15%;
	opacity:0;
	z-index:1;
}
.sub_slide_img_group p img{
	width:100%;
	height:auto;
	vertical-align:bottom;
}
.sub_slide_img_group > h2{
	position:absolute;
	bottom:35px;
	left:50%;
	opacity:0;
}
.sub2_bg h2{
	bottom:88px;
}

/********************* sub slide img gruop  end****************/

.sub_main{
	position:relative;
	width:100%;
	height:auto;
	background:#fff;
}
.contents_menu{
	width:100%;
	height:50px;
	background:#fff;
	border-top:1px solid #e4e4e4;
	border-bottom:1px solid #e4e4e4;
	box-sizing:border-box;
}
.contents_menu ul{
	margin:0 auto;
	width:98%;
	margin:0 1%;
}
.contents_menu ul li{
	float:left;
	position:relative;
	width:130px;
	height:50px;
	line-height:50px;
	border-right:1px solid #e4e4e4;
	box-sizing:border-box;
	overflow:hidden;
}
.contents_menu ul li:first-child{
	border-left:1px solid #e4e4e4;
	width:60px;
	text-align:center;
}

.contents_menu ul li i{
	font-size:20px;
	color:rgba(0,0,0,0.5);
	transition:all 0.5s;
}
.contents_menu ul li.on,
.contents_menu ul li:hover a{
	font-weight:bold;
	color:#2c76b6;
}

.contents_menu ul li:first-child i:hover{
	color:rgba(0,0,0,0.8);
}
.contents_menu ul li:nth-child(2){
	font-weight:bold;
}

.contents_menu ul li:nth-child(n+2){
	text-indent:10px;
	font-size:14px;
}
.contents_menu ul li:nth-child(n+2) i{
	font-size:12px;
	position:absolute;
	right:10px;
	top:50%;
	margin-top:-6px;
	
}
.contents_menu ul li a{
	display:block;
	width:auto;
	height:auto;
}
.sub_content{
	position:relative;
	width:98%;
	margin:0 1%;
	box-sizing:border-box;
	background:#fff;
	overflow:hidden;
	margin-bottom:50px;
}

.sub_content_main{
	position:relative;
	width:100%;
}

.sub_content article{
	margin:50px 0;
}
.sub_content article h2{
	letter-spacing:2px;
	font-size:26px;
}
.sub_content article h3{
	font: bold 10px/1 'arial', sans-serif;
	text-transform:uppercase;
	color:#aeaa97;
	letter-spacing:0;
}
.sub_content article p{
	font:bold 45px/1 arial;
	color: rgba(0,0,0,0.3);
	text-transform:uppercase;
	margin:15px 0;
}
.sub_content_left{
	float:left;
	position:relative;
	width:30%;
	overflow:hidden;
	
}

/********** sub_1 content slide ******************/
.sub_content_slide{
	width:100%; 
	height:550px;
	top:0; left:0;
	padding:0;
}
.sub_content_slide li{
	float:left;
	height:183.3333px;
	box-sizing:border-box;
	background-repeat:no-repeat;
	background-size:cover;
	overflow:hidden;
}
.sub_content_slide li:nth-child(1){
	width:60%;
	background-image:url(../company/images/sub1_main_slice1.jpg);
}
.sub_content_slide li:nth-child(2){
	 width:40%;
	 background-image:url(../company/images/sub1_main_slice2.jpg);
}
.sub_content_slide li:nth-child(3){
	width:100%;
	background-image:url(../company/images/sub1_main_slice3.jpg);
}
.sub_content_slide li:nth-child(4){
	width:40%;
	background-image:url(../company/images/sub1_main_slice4.jpg);
}
.sub_content_slide li:nth-child(5){
	width:60%;
	background-image:url(../company/images/sub1_main_slice5.jpg);
}


/**************** sub_content_slide end ********************/

.sub_content_right{
	float:right;
	width:65%;
	position:relative;
}
.sub_content_right h2{
	font-size:30px;
	display:block;
	margin-bottom:20px;
}
.sub_content_right p{
	letter-spacing:1px;
}

.address_info{
	margin-bottom:20px;
}
.address_info li{
	margin-right:10px;
	margin-bottom:15px;
}
.address_info li p{
	width:150px;
	font: 14px  sans-serif;
	color:#fff;
	background:#7a8595;
	padding:8px 0;
	letter-spacing:1px;
	text-align:center;
	float:left;
}
.address_info li span{
	margin-left:20px;
	display:inline-block;
	font-size:16px;
	padding-top:4px;
}

/****************** sub_2 slide *******************/
.sub2_slide{
	position:relative;
	width:100%;
	height:235px;
	overflow:hidden;
	margin-bottom:50px;
	background: url(../images/main3_bg.jpg) no-repeat bottom right;
	background-attachment:fixed;
	background-size:cover;
}
.sub2_slide_group > p{
	position:absolute;
	width:80%;
	margin:0 10%;
	font-size:15px;
	font-weight:bold;
	text-transform:uppercase;
	color:#fff;
	top:45%;
	text-align:center;
	opacity:1;
}
.sub2_slide_group > .slide_nav{
	top:50%;
}

.process_menu li{
	float:left;
	position:relative;
	width:32%;
	border:1px solid #e4e4e4;
	margin-right:2%;
	margin-bottom:2%;
	padding:20px;
	box-sizing:border-box;
	overflow:hidden;
}
.process_menu li:nth-child(3n){
	margin-right:0;
}
.process_menu li  > h3{
	font-size:18px;
	letter-spacing:1;
	font-weight:normal;
	height:40px;
}
.process_menu li  > h3 > b{
	display:inline-block;
	width:25px;
	height:25px;
	line-height:25px;
	border-radius:3px;
	background:#999;
	color:#fff;
	text-align:center;
	font-size:15px;
	font-weight:normal;
	margin-right:10px;
}
.process_menu li  > h3 > span{
	position:absolute;
	text-transform:uppercase;
	left:135px;
	top:33px;
	opacity:0.3;
	font:bold 9px 'arial', sans-serif;
}
.process_menu li p{
	position:relative;
	margin:20px 0;
	text-align:center;
}
.process_menu li p i{
	font-size:20px;
	width:50px;
	height:50px;
	line-height:50px;
	border-radius:50%;
	color:#fff;
	background:#ccc1a8;
	text-align:center;
}
.process_menu li p i:after{
	content: '';
	position: absolute;
	text-align:center;
	left: 50%;
	margin-left:-12px;
	top:67px;
	margin-top:-20px;
	border-left: 12px solid transparent;
	border-top: 12px solid #ccc1a8;
	border-right: 12px solid transparent;
}
.process_menu li:hover > h3 > b{
	background:#222;
}
.process_menu li:hover p i{
	background:#028fcc;
}
.process_menu li:hover p i:after{
	border-left: 12px solid transparent;
	border-top: 12px solid #028fcc;
	border-right: 12px solid transparent;
}
.price_wrap>  ul {
	position:relative;
	width:100%;
	border-left:1px solid #e4e4e4;
	border-top:1px solid #e4e4e4;
	border-bottom:1px solid #e4e4e4;
	box-sizing:border-box;
}
.price_wrap> ul > li{
	float:left;
	position:relative;
	overflow:hidden;
	width:25%;
	height:50px;
	line-height:50px;
	border-right:1px solid #e4e4e4;
	box-sizing:border-box;
	text-indent:50px;
	font-size:18px;
	letter-spacing:1px;
	transition:all 0.5s;
	-webkit-transition:all 0.5s;
}
.price_wrap> ul > li > a{
	display:block;
	width:100%;
	height:100%;
}
.price_wrap> ul > li > span,
.price_wrap> ul > li > a > span{
	position:absolute;
	text-transform:uppercase;
	left:70px;
	top:25px;
	opacity:0.3;
	font:bold 9px 'arial', sans-serif;
}
.price_wrap> ul > li.on,
.price_wrap> ul > li:hover,
.price_wrap> ul > li:hover a{
	background:#222;
	color:#fff;
}
.price1 li{
	position:relative;
}
ul.as_menu > li{
	width:50%;
	cursor:pointer;
}
ul.responsive_img > li{
	position:relative;
	float:left;
	width:20%;
	height:170px;
	text-align:center;
	border:none;
	transition:all 0.5s;
}
ul.responsive_img > li:hover p{
	background:#222;
	color:#fff;
}
ul.responsive_img > li p{
	height:50px;
	font-size:16px;
	line-height:50px;
	text-indent:0;
	border-top:1px solid #e4e4e4;
	border-bottom:1px solid #e4e4e4;
	border-right:1px solid #e4e4e4;
	box-sizing:border-box;
	text-transform:uppercase;
}
ul.responsive_img > li:first-child p{
	border-left:1px solid #e4e4e4;
}
/*
.price_wrap> ul.responsive_img > li{
	width:20%;
	cursor:pointer;
	text-align:center;
	text-indent:0;
	text-transform:uppercase;
	font-size:16px;
}
ul.responsive_img,
.price_wrap> ul.responsive_img li{
	border:0;
	height:auto;
}
.price_wrap> ul.responsive_img > li:hover{
	background:#fff;
	cursor: default;
}
*/

.responsive_main li{
	float:left;
	width:50%;
	border-right:1px solid #e4e4e4;
	box-sizing:border-box;
}
.responsive_main li:last-child{
	border-right:none;
}
.responsive_main li:last-child p{
	margin-left:20px;
}
.price_content,
.as_content{
	position:relative;
	margin-top:50px;
}
.as_content > div{
	display:none;
}
.as_content > div.on{
	display:block;
}
.price1 li,
#price1_tab ul li,
#price2_tab ul li{
	float:left;
	position:relative;
	width:50%;
	border-right:1px solid #e4e4e4;
	box-sizing:border-box;
}
.price1 li:last-child,
#price1_tab ul li:last-child,
#price2_tab ul li:last-child{
	padding-left:20px;
	border-right:0;
}
.price1 li{
	position:relative;
	height:185px;
}
.price1 li:first-child{
	text-transform:uppercase;
}
.price1 li:first-child p{
	font-size:85%;
	width:95%;
}
.price1 li:nth-child(2) p:first-child{
	float:left;
	margin-right:15px;
}
.price1 li b,
.responsive_main li b{
	display:block;
	font-size:16px;
	margin-bottom:10px;
}
.responsive_main li b{
	padding-bottom:20px;
}


/*************** price table ***********************/
.basic_1,
.basic_2{
	width:100%;
	margin-top:50px;
	border-top:1px solid #e4e4e4;
	border-bottom:1px solid #e4e4e4;
	box-sizing:border-box;
}
.basic_1 th,
.basic_2 th{
	letter-spacing:1px;
	height:50px;
	border-right:1px solid #e4e4e4; 
	text-align:left;
	padding-left:20px;
	border-bottom:1px solid #e4e4e4;
	font-size:16px;
	font-weight:normal;
	box-sizing:border-box;
}
.basic_2 th{
	width:40%;
}
.basic_1 th:first-child,
.basic_2 th:first-child{
	width:20%;
}
.basic_1 th:nth-child(2){
	width:80%;
}
.basic_1 th:nth-child(2) td{
	width:50%;
}
.basic_1 td,
.basic_2 td{
	padding-left:20px; 
	border-bottom:1px solid #e4e4e4; 
	border-right:1px solid #e4e4e4;
	height:35px;
}
.esti_button{
	text-transform:uppercase;
}

p.esti_button{
	position:relative;
	margin-top:20px;
	left:50%;
	margin-left:-65px;
}
.price_content button{
	text-transform:uppercase;
	display:block;
	width:130px;
	height:30px;
	font-size:12px;
	border:none;
	background:#181a1f;
	color:#fff;
	transition:all 0.5s;
	cursor:pointer;
}
.price_content button:hover{
	color:#fff;
	background:#2c6195;
}
table.as{
	position: absolute;
	bottom:0;
	width:95%;
	border-top:1px solid #e4e4e4;
	border-bottom:1px solid #e4e4e4;
}
table.as th{
	letter-spacing:1px;
	height:50px;
	border-right:1px solid #e4e4e4; 
	text-align:left;
	padding-left:20px;
	border-bottom:1px solid #e4e4e4;
	font-size:16px;
	width:42%;
	font-weight:normal;
}
table.as th:first-child{
	width:16%;
}
table.as td{
	padding-left:20px; 
	border-bottom:1px solid #e4e4e4; 
	border-right:1px solid #e4e4e4;
	height:35px;
}
.arrow_down{
	text-align:center;
	margin-top:30px;
}

@media screen and (min-width:1024px) and (max-width:1279px){
	
	/********* mobile top menu ******************/
   .gnb,
	.notice2{
		display:none;
    }
	.menu_open,
	.m_gnb{
		display:block;
	}
	.notice_group > div.tel{
	    width:24%;
    }
    .notice1, .notice3{
	   width:32%;
    }
    .responsive_main li img{
		width:90%;
		height:auto;
    }
	/****************sub page ********************/
}

@media screen and (min-width:780px) and (max-width:1023px){
	.gnb,
	.notice1, 
	.notice2,
	.main2_box > .slide,
	.main3_box > div.online_order,
	.copy h2,
	.copy_menu{
		display:none;
	}
	.menu_open,
	.m_gnb{
		display:block;
	}
	 #top_btn{
	   opacity:0;
	   width:0;
	   height:0;
   }
	.notice_group > div.tel{
	    width:35%;
    }
    .notice3{
	   width:64%;
    }
	.main2_box > div{
		width:49%;
	}
	.main3_box > div{
		width:49.5%;
    }
	.main3_box > div:nth-child(3){
		float:right;
		margin-top:0;
		width:49%;
	}
	.main3_box > div:nth-child(4){
		margin-left:0;
	}
   .main3_box > div:nth-child(n+3):nth-child(-n+6){
		width:49.5%;
	}
	/**************** sub page *****************/
	.sub_content_left,
	.price_wrap> ul > li span{
		display:none;
	}
	.sub_content_right{
	    float:none;
	    width:100%;
    }
	.price_wrap> ul > li{
	    text-indent:0px;
		text-align:center;
		font-size:16px;
    }
	.price1 li,
	#price1_tab ul li,
	#price2_tab ul li{
	   float:none;
	   width:100%;
	   border-right:0;
    }
	.price1 li:first-child{
		margin-bottom:20px;
	}
	.price1 li:last-child,
	#price1_tab ul li:last-child,
	#price2_tab ul li:last-child{
		padding-top:30px;
		border-top:1px dashed #ccc;
		border-bottom:0;
		padding-left:0;
	}
	.price1 li:last-child p:last-child b{
		padding-bottom:20px;
	}
	.price1 li:last-child p:last-child b:after{
		position:absolute;
		content:'';
		left:237px;
		top:70px;
		height:3px;
		width:15px;
		background:#028fcc;	
    }
	ul.responsive_img > li{
		width:33.3333%;
	}
	ul.responsive_img > li p{
	    font-size:14px;
    }
	ul.responsive_img > li:nth-child(4) p{
		border-left:1px solid #e4e4e4;
	}
	.responsive_main li img{
		width:90%;
		height:auto;
    }
	table.as{
		width:100%;
	}
	table.as th{
		width:40%;
	}
	table.as th:first-child{
		width:20%;
	}
	
	/**************** footer *****************/
	.footer{
	    height:120px;
   }
    .main_footer{
	    height:80px;
   }
   .copy h2{
	    float:left;
	    margin:0 5%;
   }
   .copy h2 img{
	   margin-top:5px;
   }
    .copy_txt{
	   margin-top:0px;
	   padding-top:12px;
	   text-align:center;
    }
	
}

@media screen and (min-width:640px) and (max-width:779px){
	.main{
		height:auto;
	}
	.gnb,
	.port_slide,
	.notice1, 
	.notice2,
	.main2_box > .slide,
	.main3_box > div:first-child,
	.main3_box > div:nth-child(4),
	.main3_box > div.online_order,
	.copy_menu,
	.copy h2,
	.copy_menu,
	.main2_box > .slide{
		display:none;
   }
   	.menu_open,
	.m_gnb{
		display:block;
	}
    #top_btn{
	   opacity:0;
	   width:0;
	   height:0;
   }
  .main_slide img{
	   bottom:-90px;
   }
   	.notice_group > div.tel{
	    width:40%;
    }
    .notice3{
	   width:59%;
    }
	.main2_box,
    .main3_box{
	   width:98%;
	   margin:0 1%;
	   height:auto;
    }
   .main2_box > div:nth-child(-n+5){
	   float:none;
	   width:99%;
	   height:280px;
	   margin-bottom:10px;
	}
	.main3_box > div:nth-child(3),
	.main3_box > div:nth-child(5){
		float:none;
		width:100%;
		height:280px;
		margin-bottom:10px;
    }
	.main3_box > div:last-child{
		margin-bottom:50px;
		margin-left:0;
	}
	/**************** sub page *****************/
	.contents_menu li,
	.sub_content_left,
	.price_wrap> ul > li span{
		display:none;
	}
	.contents_menu li:nth-child(-n+2),
	.contents_menu li.on{
		display:block;
	}
	 .sub_slide_img_group h2 img{
	   opacity:0;
   }
	.sub_content_right{
	    float:none;
	    width:100%;
    }
    .sub_content_right img{
		width:100%;
		height:auto;
	}
	.process_menu li{	
	   width:49%;
	   margin-right:2%;
   }
   .process_menu li:nth-child(2n){
	   float:right;
	   margin-right:0;
    }
	.price_wrap> ul > li{
		font-size:16px;
	    text-indent:0px;
		text-align:center;
    }
	.price1 li,
	#price1_tab ul li,
	#price2_tab ul li{
	   float:none;
	   width:100%;
	   border-right:0;
    }
	.price1 li:first-child{
		margin-bottom:20px;
	}
	.price1 li:last-child,
	#price1_tab ul li:last-child,
	#price2_tab ul li:last-child{
		padding-top:30px;
		border-top:1px dashed #ccc;
		border-bottom:0;
		padding-left:0;
	}
	.price1 li:last-child p:last-child b{
		padding-bottom:20px;
	}
	.price1 li:last-child p:last-child b:after{
		position:absolute;
		content:'';
		left:237px;
		top:70px;
		height:3px;
		width:15px;
		background:#028fcc;	
    }
	ul.responsive_img > li{
		width:33.3333%;
	}
	ul.responsive_img > li p{
	    font-size:14px;
    }
	ul.responsive_img > li:nth-child(4) p{
		border-left:1px solid #e4e4e4;
	}
	 .responsive_main li img{
		width:90%;
		height:auto;
    }
	table.as{
		width:100%;
	}
	table.as th{
		width:40%;
	}
	table.as th:first-child{
		width:20%;
	}

	/**************** footer *****************/
   .footer{
	    height:120px;
   }
    .main_footer{
	    height:80px;
   }
   .copy_txt{
	   margin-top:0px;
	   padding-top:12px;
	   text-align:center;
    }
}

@media screen and (min-width:480px) and (max-width:639px){
	.main{
		height:auto;
	}
	.gnb,
	.port_slide,
	.notice1, 
	.notice2,
	.main2_box > .slide,
	.main3_box > div:first-child,
	.main3_box > div:nth-child(4),
	.main3_box > div.online_order,
	.notice_group > div.tel,
	.copy_menu,
	.copy h2,
	.copy_menu,
	.main2_box > .slide{
		display:none;
   }
   	.menu_open,
	.m_gnb{
		display:block;
	}
    #top_btn{
	   opacity:0;
	   width:0;
	   height:0;
   }
   .main_slide img{
	   bottom:-90px;
   }
    .notice3{
	   width:95%;
    }
	.main2_box,
    .main3_box{
	   width:98%;
	   margin:0 1%;
	   height:auto;
    }
   .main2_box > div:nth-child(-n+5){
	   float:none;
	   width:99%;
	   height:300px;
	   margin-bottom:10px;
	}
	.main3_box > div:nth-child(3),
	.main3_box > div:nth-child(5){
		float:none;
		width:100%;
		height:280px;
		margin-bottom:10px;
    }
	.main3_box > div:last-child{
		margin-bottom:50px;
		margin-left:0;
	}
	/**************** sub page *****************/
	.contents_menu li,
	.sub_content_left,
	.price_wrap> ul > li span,
	.price1 li:last-child img{
		display:none;
	}
	.contents_menu li:nth-child(-n+2),
	.contents_menu li.on{
		display:block;
	}
	 .sub_slide_img_group h2 img{
	   opacity:0;
   }
	.sub_content_right{
	    float:none;
	    width:100%;
    }
	.sub_content_right img{
		width:100%;
		height:auto;
	}
	.sub_content_right h2{
	    font-size:24px;
	}
	.process_menu li{
		float:none;
	    width:100%;
	    margin-right:0%;
   }
   .price_wrap> ul > li{
	   font-size:16px;
	    text-indent:0px;
		text-align:center;
    }
	.price1 li,
	#price1_tab ul li,
	#price2_tab ul li{
	   float:none;
	   width:100%;
	   border-right:0;
	   box-sizing:border-box;
    }
	.price1 li:first-child{
		margin-bottom:20px;
	}
	.price1 li:last-child{
		height:140px;
	}
	.price1 li:last-child,
	#price1_tab ul li:last-child,
	#price2_tab ul li:last-child{
		padding-top:30px;
		border-top:1px dashed #ccc;
		border-bottom:0;
		padding-left:0;
	}
	.price1 li:last-child p:last-child b{
		padding-bottom:20px;
	}
	.price1 li:last-child p:last-child b:after{
		position:absolute;
		content:'';
		left:0;
		top:70px;
		height:3px;
		width:15px;
		background:#028fcc;	
    }
	ul.responsive_img > li{
		width:50%;
	}
	ul.responsive_img > li:nth-child(3) p,
	ul.responsive_img > li:nth-child(5) p{
		border-left:1px solid #e4e4e4;
	}
	.arrow_down img{
		width:40%;
		height:auto;
	}
	 .responsive_main li{
		 float:none;
		 width:100%;
		 border-right:0;
	 }
	 .responsive_main li:last-child{
		 margin:30px 0;
	 }
	 .responsive_main li img{
		width:100%;
		height:auto;
    }
	table.as th,
    .basic_1 th,
    .basic_2 th{
	    padding-left:3px;
	    font-size:14px;
    }
	table.as td,
	.basic_1 td,
    .basic_2 td{
		padding-left:3px;
	    font-size:12px;
	}
	table.as{
		width:100%;
	}
	table.as th{
		width:40%;
	}
	table.as th:first-child{
		width:20%;
	}
	
	/**************** footer *****************/
   .footer{
	    height:120px;
   }
    .main_footer{
	    height:80px;
   }
   .copy_txt{
	   margin-top:0px;
	   padding-top:12px;
	   text-align:center;
    }
}

@media screen and  (max-width:479px){
	.main{
		height:auto;
	}
	.gnb,
	.port_slide,
	.m_gnb > li > a > span,
	.main_slide > b,
	.notice1, 
	.notice2,
	.main2_box > .slide,
	.main3_box > div:first-child,
	.main3_box > div:nth-child(4),
	.main3_box > div.online_order,
	.main2_box > .slide,
	.notice_group > div.tel,
	.copy_menu,
	.copy h2,
	.copy_menu{
		display:none;
   }
   	.menu_open,
	.m_gnb{
		display:block;
	}
   #top_btn{
	   opacity:0;
	   width:0;
	   height:0;
   }
   .main_slide img{
	   bottom:-90px;
   }
   .main_slide > b{
	   top:87px;
    }
     .notice3{
	   width:95%;
    }
	.main2_box,
    .main3_box{
	   width:98%;
	   margin:0 1%;
	   height:auto;
    }
   .main2_box > div:nth-child(-n+5){
	   float:none;
	   width:99%;
	   height:300px;
	   margin-bottom:10px;
	}
	.main3_box > div:nth-child(3),
	.main3_box > div:nth-child(5){
		float:none;
		width:100%;
		height:280px;
		margin-bottom:10px;
    }
	.main3_box > div:last-child{
		margin-bottom:50px;
		margin-left:0;
	}
   .footer{
	    height:120px;
   }
    .main_footer{
	    height:80px;
   }
   	/**************** sub page *****************/
	.sub_content_left,
	.contents_menu li,
	.price_wrap> ul > li span,
	.price1 li:last-child p:first-child{
		display:none;
	}
	.contents_menu li:nth-child(-n+2),
	.contents_menu li.on{
		display:block;
	}
	 .sub_slide_img_group h2 img{
	   opacity:0;
   }
	.sub_content_right{
	    float:none;
	    width:100%;
    }
	.sub_content_right img{
		width:100%;
		height:auto;
	}
	.sub_content_right h2{
	    font-size:24px;
	}
    .price_wrap> ul > li{
	    font-size:16px;
	    text-indent:0px;
		text-align:center;
    }
	.process_menu li{
		float:none;
	    width:100%;
	    margin-right:0%;
   }
   	.price1 li,
	#price1_tab ul li,
	#price2_tab ul li{
	   float:none;
	   width:100%;
	   border-right:0;	  
	   box-sizing:border-box;
    }
	.price1 li:first-child{
		margin-bottom:20px;
	}
	.price1 li:last-child{
		height:140px;
	}
	.price1 li:last-child,
	#price1_tab ul li:last-child,
	#price2_tab ul li:last-child{
		padding-top:30px;
		border-top:1px dashed #ccc;
		border-bottom:0;
		padding-left:0;
	}
	.price1 li:last-child p:last-child b{
		padding-bottom:20px;
	}
	.price1 li:last-child p:last-child b:after{
		position:absolute;
		content:'';
		left:0;
		top:70px;
		height:3px;
		width:15px;
		background:#028fcc;	
    }
	ul.responsive_img > li{
		width:50%;
	}
	ul.responsive_img > li p{
		font-size:13px;
	}
	ul.responsive_img > li:nth-child(3) p,
	ul.responsive_img > li:nth-child(5) p{
		border-left:1px solid #e4e4e4;
	}
	.arrow_down img{
		width:50%;
		height:auto;
	}
	 .responsive_main li{
		 float:none;
		 width:100%;
		 border-right:0;
	 }
	 .responsive_main li:last-child{
		 margin:30px 0;
	 }
	 .responsive_main li img{
		width:100%;
		height:auto;
    }
	table.as th,
	.basic_1 th,
    .basic_2 th{
	    padding-left:3px;
	    font-size:14px;
    }
	table.as td,
	.basic_1 td,
    .basic_2 td{
		padding-left:3px;
	    font-size:12px;
	}
	table.as{
		width:100%;
	}
	table.as th{
		width:40%;
	}
	table.as th:first-child{
		width:20%;
	}
	
	/**************** footer *****************/
   .copy_txt{
	   margin-top:0px;
	   padding-top:12px;
	   text-align:center;
    }

}