@charset "utf-8";
/* CSS Document */
html{font-size:16px;}
body{font-size:1rem;}

body{background: #f0f0f0; /*#f3f3f8; */ /*linear-gradient(to right, #f3f3f8, #d7d7e3 );*/} 

header .close,
header .all,
header .left > div > div,
header h2{display:none;}   /* 4) pc에서 안보이게 */

/*header .line{border-top:2px solid #000; }   */
header .ilsung{width:75rem; margin:0 auto;}
header .ilsung .main_logo{border-bottom:1px solid #852c32;}
header .ilsung .main_logo h1 a{display:block; margin:0 auto; width:15rem; height:14.875rem; background:url("../img/main_logo.png")no-repeat; font-size: 0; color:transparent;transform: scale(0.7);}  
/* 2) */
header .ilsung .left{float:left; padding:0.6875rem 0 0 0.875rem; }  /*left 위, 좌측 여백 주기 */
header .ilsung a{color:#fff; font-weight: bold;} /* 1) 헤더 전체 a text color */
header .ilsung nav a{position:relative; display:block; height:3.9375rem; line-height: 3.9375rem; font-size: 1.0625rem; color:#2b2e57; }  /* 3) */
header .ilsung nav a:before{content:""; position :absolute; left:0; bottom:1.125rem; width:0; height:2px;background:#852c32; 
	transition: all 0.5s; }
header .ilsung nav a:hover:before{width:100%; }
header .ilsung .left > div {float:left;} /* .nav 를 왼쪽 배치  */
header .ilsung .left > div  nav li{float:left;padding: 0 1.875rem;} /* li를 좌우 30px 여백 주기 */
header .ilsung > ul{float:right; padding:1.6875rem 2.5rem 0 0;}
header .ilsung > ul li.join {float:left; } /* li의 왼쪽 마진을 넣어 선을 하나로 */

header .ilsung > ul li.sessin {float:left; }  /* 세션 로그인 상태 -- 님, 로그아웃|정보수정  */
header .ilsung > ul li a{display:block; width:6rem; height:2.0625rem; line-height: 2.0625rem; text-align: center; 
			border:1px solid rgba(255,255,255,0.9);border-radius: 3px; background:#852c32;font-size:0.6875rem;}

header .ilsung > ul div.mypage a{display:none;}  /* pc에서는 안보이게  */
header{padding-bottom: 8rem;}

 
/* service  */
.service{padding-bottom: 1.25rem; background:#f0f0f0; }
.service > div{margin:0 auto; padding: 1.25rem 0 0; width:75rem;} /* 전체 공통 가운데정렬 */
.service .product > article{position:relative;  width:36.25rem; height:32.5rem; }
/* .btn_more의 기준 :relative 경우 padding=> margin으로 , relative값때문에    */
.service .event{float:left;  width:36.25rem;  }
.service .event > div {position:relative ;}
.service .event h3{padding: 0 0 1.5625rem;font-size:1.5625rem; color:#852c32; border-bottom: 2px solid #333; }

.service .event .enlarge {margin:1.25rem 0 0; width:36.25rem; height: 26.25rem; border-radius: 5px; }
.service .event .enlarge > div a{position:absolute;left:0; top:0; width:36.25rem; height: 26.25rem;transition: all .3s; border-radius: 5px; }
.service .event .enlarge img{width: 100%; height:26.25rem; transform: scale(1); transition: all .2s; border-radius: 5px; }
.service .event .enlarge em{overflow: hidden; width: 100%; display:inline-block;height:26.25rem; border-radius: 5px;}	

.service .event .enlarge > div a p{position:absolute; left:30%; top:10%;font-size: 1.25rem;font-family: 'Nanum Myeongjo', serif;  color:#fff; font-weight:normal;}	
.service .event .enlarge > div a span{display:block; font-size:1.4rem; font-weight: 400;  color:#852c32;font-family: 'Nanum Myeongjo', serif;}
.service .event .enlarge > div a strong{display:none;font-family: 'Nanum Myeongjo', serif;}	

.service .event .enlarge:hover img{transform: scale(1.2);border-radius: 5px;}
.service .event .enlarge:hover a{background: rgba(0,0,0, .9); cursor:alias; border-radius: 5px;}
.service .event .enlarge:hover a p{position:absolute; left:30%; top:40%;font-size: 1.25rem;line-height:2rem;  color:#fff; font-weight:normal; 										transform:translateY(-40%); font-family: 'Nanum Myeongjo', serif;}	
.service .event .enlarge:hover div a span{display:block; font-size:1.25rem;font-family: 'Nanum Myeongjo', serif; font-weight: 500;  color:#fff;}
.service .event .enlarge:hover div a strong{display: block;font-family: 'Nanum Myeongjo', serif;}	

.service .recom {float:right; }
.service .recom h3{padding: 0 0 1.5625rem; font-size:1.5625rem; color:#852c32; border-bottom: 2px solid #333; }
.service .card_info > div{float:left; width:37.5rem; height:30rem;  }   
.service .card_info img {overflow:hidden; width:100%; margin:0 .1rem 0; height:26.25rem;border-radius: 5px; }  
.service .slider1 { padding:1.25rem 0 0; }

/* 높이조절하여 .control 남은 거 없애기- 선때문에   */
.service .slider1 .control{position:absolute; left:16rem; bottom:3.125rem;z-index: 100;}
.service .slider1 .control button{width:4.6875rem; height:2.1875rem; cursor: pointer; color:#fff; }
.service .slider1 .control button~button{border-left: 1px solid #ddd;}
.service .slider1 .control button.prev{background:url("../img/sArrow_prev.png")no-repeat left center; }
.service .slider1 .control button.next{background: url("../img/sArrow_next.png")no-repeat right  center;}
.btn_more{position:absolute; right:0; top:0; width:8.5rem;line-height:2.5rem;border:1px solid #333;
border-radius: 4px; text-align:center; font-size: 1rem; color:#333;}  



/* 1px 20rem기준을 16rem 기준으로 변경 */
.special_wrap{padding:1rem 0 1rem; background: #f0f0f0; }
.special_wrap .line{ width:75rem; margin:0 auto; 	/*border-bottom: 1px solid #bcbbbc; border-top: 1px solid #bcbbbc;*/ }
.special{ /*width:75rem;margin:0 auto; */} 
.special h2{float:left; width:13.4375rem; padding:2rem 2.5rem 0; font-size: 1.875rem; line-height: 2.0625rem; color:#852c32;
			background: url("../img/arrow.PNG")no-repeat right 1rem top 2rem;}
	
.special ul{position:relative; float:left; }
.special ul li{ position:relative; float:left;margin-right: 1rem ; height:17.5rem; width:17.5rem ; color:#222; 
	background:no-repeat top; transform: scale(1);} 

.special ul a{display:block; padding:3.75rem 0 0; width:17.5rem; height:17.5rem; text-align: center; box-sizing:border-box; font-size: 1.5625rem; 
					font-weight: normal; color:#fff; transition: all 0.5s;}

.special ul a span{display:block;position :relative; top:10px; opacity:0;padding: 1.25rem 0 0; font-weight: normal; font-size: 1.25rem;
				transition: all 0.5s;}
.special ul a:hover {background: rgba(0,0,0,0.3);}
.special ul a:hover span{ top:0; opacity: 1;  } /* top 0 으로 제자리 올림 */
.special ul a:hover .btn_more_01{opacity: 1;}
.special ul li:nth-child(1){background-image: url("../img/PHOTO_02-1_280.jpg");}
.special ul li:nth-child(2){background-image: url("../img/PHOTO_11_280.jpg");}
.special ul li:nth-child(3){background-image: url("../img/photo_hand_280.jpg");}
.btn_more_01{position:absolute; right:4.6875rem; bottom:2.8125rem; width:7.5rem;line-height:2.0rem; opacity:0;border:1px solid #fff;
border-radius: 4px; text-align:center; font-size: 1rem; color:#fff; transition: all 1.3s;}  


.banner{background: #f0f0f0;}
.banner > div {width:75rem; margin: 0 auto; }
.banner > div h3{color:transparent;}
.banner > div img{ width:75rem; height:25rem;}


/* 고객가이드 를 special wrap이용, 1px 20rem기준을 16rem 기준으로 변경     */
.guide_box{background: #f0f0f0; padding: 3.125rem 0 0;}
.guide_box .line{width:75rem; margin:0 auto; border-bottom: 1px solid #bcbbbc;}
.guide{display: flex; justify-content: space-between; padding: 1.5625rem 0 0; width:68.125rem;margin:0 auto; box-sizing: border-box;} 
/* flex h2와 ul 행배치 , j-c: s b : 1st child 맨왼쪽 2nd chind 맨오른쪽   */
.guide h2 {width:8rem; height:8rem; font-size: 1.5rem; line-height: 8rem; color:#fff; background:#852c32 right top; 
	border-radius: 100%; text-align: center;} 
.guide ul{ display:flex; width:52.5625rem;} /* flex ul1의 li 행배치, ul의 가로 크기주고 li flex 1로 하면 li 가 1/n이 됨    */
.guide ul li{flex: 1; position: relative; padding: 0 1.875rem 0 1.875rem; height:15rem; color:#222;} 
	/* 높이를 240px 주면 h2 img 는 가운데로 오게 된다  */
.guide ul li:before{content:""; position:absolute; left:0; top:0; height:12.5rem; border-left: 1px solid #bcbbbc;}
.guide ul li strong{text-decoration: underline; font-size: 1.5625rem;}  /* strong 인라인 요소로 위아래 패딩 안됨 */
/*.guide_01 ul li p{padding: 1.65rem 0 0; font-size: .8rem;} */

.guide ul li:nth-child(1) a{display:block; padding:5.6rem 3.125rem 0 ; text-align: center; font-size: .95rem; color:#002870;
		background: url("../img/ico_main_util01.png")no-repeat top 2rem center ; transform: scale(1.4);}
.guide ul li:nth-child(2) { font-size:1.125rem; line-height: 1.25rem;}
.guide ul li:nth-child(2) h3{padding: 0.3rem 0 0.3rem;}
.guide ul li:nth-child(2) p{padding: 0.3rem 0 0.3rem; font-size: 1rem;}
.guide ul li:nth-child(3) span{font-size: 1.5625rem; color:#042e6f;}


/* 문의게시판 .list_01 */
/*.list_wrap .content{width:75rem; margin:0 auto;}	 
 .list_wrap .content .column h2{padding:2rem 0 0; text-align: center;}
 .list_wrap .content .column p{position:relative; padding: 2rem 0 3rem; font-size: 1.0625rem; text-align: center;  color:#aaa; }
 .list_wrap .content .column p:after{content:""; position:absolute;left:50%; bottom:2.8125rem; width:31.6875rem; height:1px; background: #aaa; 									transform: translateX(-50%);}
 .list_wrap .content .column form .search_left{float:left;}
 .list_wrap .content .column form .search_left h3{padding-left:2rem; font-weight: normal;}
 .list_wrap .content .column form .search_right{float:right;}
 .list_wrap .content .column form .search_right > ul li{float:left;margin-right:.3rem;  display:inline-block;line-height: 2rem; color:#aaa;} 
 .list_wrap .content .column form .search_right > ul li:nth-child(1){font-size: 1rem;font-weight: 600;} 
 .list_wrap .content .column form .search_right > ul li:nth-child(2) select{padding-right: 2rem; width:5.5rem; height:2.0rem;line-height: 2.0rem; 	text-index:5px;	text-align: center;}
 .list_wrap .content .column form .search_right > ul li:nth-child(3)input{width:10.5rem;padding:0; text-index:4px;line-height: 1;
							font-size: 1rem;color:#000;}
 .list_wrap .content .column form .search_right > ul li:nth-child(4) input{width:5rem; height:2.0rem; border-radius: 5px;}
 .list_wrap .content .column form .search_right > ul li:nth-child(4) span{font-size: 0;}
 .list_wrap .content .column .list_top_title{margin-top: 2rem; height:2rem; border-top: 2px solid #000;background: #eee; color:#000;}
 .list_wrap .content .column .list_top_title > ul{display:flex;width:75rem;text-align: center;}
 .list_wrap .content .column .list_top_title > ul li:nth-child(2){width:30%;}
 .list_wrap .content .column .list_top_title > ul li:nth-child(1),
 .list_wrap .content .column .list_top_title > ul li:nth-child(3),
 .list_wrap .content .column .list_top_title > ul li:nth-child(4),
 .list_wrap .content .column .list_top_title > ul li:nth-child(5) {width:17.5%;}
 .list_wrap .content .column .list_content{position:relative;}
 .list_wrap .content .column .list_content > ul {display:flex;width:75rem;text-align: center; color:#000;}
 .list_wrap .content .column .list_content > ul li{ border-bottom: 2px solid #eee;}
 .list_wrap .content .column .list_content > ul li:nth-child(2){width:30%;}
 .list_wrap .content .column .list_content > ul li:nth-child(1),
 .list_wrap .content .column .list_content > ul li:nth-child(3),
 .list_wrap .content .column .list_content > ul li:nth-child(4),
 .list_wrap .content .column .list_content > ul li:nth-child(5){width:17.5%;}
 .list_wrap .content .column .list_content .page_button{margin-top:5rem;}
 .list_wrap .content .column .list_content .page_num{position:absolute;left:50%;top:300%; }
 .list_wrap .content .column .list_content .write_button{position:absolute; right:0; top:50%; border-radius:5px;  margin-top:5rem; }	 
 .list_wrap .content .column .list_content .write_button .btn_list{display:inline-block; width:6.25rem;height:2rem; text-align: center; 
	 line-height: 2rem; border:1px solid #000;	background: #eee; font-size: .8rem; color:#000; border-radius: 5px;}
 .list_wrap .content .column .list_content .write_button .btn_write{display:inline-block; width:6.25rem;height:2rem; text-align: center; 
	 line-height: 2rem; border:1px solid #000;	background: #000; font-size: .8rem; color:#fff; border-radius:5px;}  
*/



footer{/*margin:5rem 0 0; */ background: #272f3c;}
footer > div{position:relative ; width:75rem; padding: 1.0rem 0;  margin: 0 auto;}
footer > div > a{position:absolute; right:0; top:-1.5625rem; width:2.4375rem;height:3.0625rem; color:transparent; background: url("../img/icon.png")no-repeat -156px 8px #22a5d5;  }/* id header로 올라가기 a에 p-ab주면 block요소  w x h 가능 */
footer > div .left{text-align: center; line-height:100%;}/* l-h 100% 초기화 라인이 딱붙음 */
footer > div .left div a{font-size: 1rem; color:#fff; margin: 0 0.7rem 0 0;}  /* 왼쪽 정렬경우  오른쪽으로 마진 */
footer > div .left p{padding:0.8125rem 0 0; line-height: 1.3125rem; font-size: 1rem; color:#747b85;}
footer > div .left p span{padding:0 .8125rem 0 0; } /* span을 이용해 문단 띄우기 , 인라인 요소 좌우만 여백 가능 */
footer > div .left p a{text-decoration: none; color:#747b85;}