/* CSS Document */


main{width:100%;}

header{border-bottom:1px solid #852c32;height:5rem; margin-bottom:  1rem;}

header .close,
header .all,
header .left > div > div,
header h2{display:block;}  /* 복구 시킴  */

header .ilsung{width:100%; }
header .line{ }
header .ilsung .main_logo{position:relative; border-bottom:none;}
header .ilsung .main_logo h1 a{position: absolute; left:50%; top: -2.0625rem; transform: translateX(-50%) scale(0.5);	padding: 0 ;}
	/*로고 크기 줄이기 css 변경 대신 scale(0.8)로 줄이면 됨 */   
header .ilsung .left{padding:2.0625rem 0 0 .875rem; }
header .ilsung .all{float:left; margin:2rem 0 0 1rem; position: relative; width: 2rem; height:0.875rem; border-top:2px solid #2b2e57; border-bottom: 2px solid #2b2e57; color: transparent; transform:scale(0.7);}  /* all 로고 크기 줄이기 css 변경 대신 scale(0.7)로 줄이면 됨 */
header .ilsung .all:before{content:""; position: absolute; left:0; top: 50%; width: 100%; height:2px;background: #2b2e57; margin-top: -1px;}
			/* 전체 메뉴 icon 그리기  */
header .ilsung .left > div{float:none;} /* display:none;애니메이션위해 제거   */
header .ilsung > ul{ padding:1.25rem 1.0625rem 0 0;}
header .ilsung > ul li{display:none;} /* 모바일에서 신상품/인기/로그인 없애고 마이페이지 대체   */
header .ilsung > ul li a{width:4.375rem; } /* 크기 작게 */ /* 테블릿에서  96->76px로 작게 만든다  */ 

header .ilsung .nav{ position: absolute; left:-120%; top:0;z-index: 101; transition:left 0.8s; padding:0.9375rem 1.5rem 0.9374rem 1.375rem; width:calc(100% - 2rem); height:100% ; background: #fff; box-sizing: border-box; scroll-behavior: auto;}  /* 머바일 가로 방향일때 길이가 길어 scroll 넣어 주어야함  */
header .ilsung .nav.on{left:0;}  /* 왼쪽엣  오른쪽으로 animation효 */

header .ilsung .nav.on nav{padding : 0 0 2.75rem; border-top: 1px solid #2b2e57;} /* .nav 아래 ul/li를 아래로 여백주어 내려주기 */
header .ilsung .nav.on nav a{height:2.5rem; line-height: 2.5rem; color:#2b2e57;}
header .ilsung .nav.on nav a:before{display:none;}  /* 마우스대면 선보요주기  없애기  */
header .ilsung .nav li:nth-child(5):hover p{color:#31DB2B; }
header .ilsung .left > div  nav li{float:none; border-bottom: 1px solid #eee;}  /* float-left를 없애 li block요소로 세로로 떨러뜨리기 */
header .ilsung .nav.on div{display:flex; border:1px solid #eee; background: #852c32;} /* 로그인/ 로그어웃 영역 */
header .ilsung .nav.on div a{flex: 1; height:2.375rem; line-height: 2.375rem; border-left: 1px solid #eee; text-align:center; color:#fff; font-size:0.8125rem; font-weight:bold; }
header .ilsung .nav.on div a:first-child{border-left:none;}  /* 왼쪽선 곁침 제거 */

header .ilsung .nav.on .close{position: absolute; right:1.5rem; top:1.5rem;width:0.75rem; height:0.75rem;color:transparent;  }
/*  p-abs안에 abd는 부모 따라감   */ 
header .ilsung .nav.on .close:before{content:"";position:absolute; left:46%; top:0; width:1px; height:100%; background: #5a5a5a;transform: rotate(45deg);} /* /  */
header .ilsung .nav.on .close:after{content:"";position:absolute; right:45%; top:0; width:1px; height:100%; background: #5a5a5a;transform: rotate(-45deg);} /* X  */

header .ilsung .nav.on h2{margin: 1rem 0 1rem 2rem; display:block; width:7.5rem; height:7.4375rem; background: url("../img/main_logo_02.png")no-repeat; color:transparent;}/* .nav .on시 로고 아래로 마진 32px 주어 nav요소와 간격 주기 */

.dim{ display:none; position: fixed;left:0; top:0;z-index:100;  width:100%; height:100%; background:  rgba(0,0,0, 0.5);}
header{padding-bottom: 4.5rem;}


header .ilsung > ul div.mypage a{display:block; padding-top:2.625rem; font-size: 1.5rem; color:#2b2e57;}
header .ilsung > ul div.mypage a span{font-size:0; color:transparent; }
/* 검은색 채우기,display: none햇다가 dim on시 실행,  z-index 100으로 주면 대상은 더높게 101로 */

/* service  */
.service{padding-bottom: .5rem; } 
.service > div{width:100%;} /* 전체 공통 가운데정렬 */
.service .product > article{width:100%; }
/* .btn_more의 기준 :relative 경우 padding=> margin으로 , relative값때문에    */
.service .event{display:block;float:none;  width:100%;  }
/*.service .event > div {/*position:relative ;border-radius: 5px }  */
.service .event > div h3{ font-size:1.25rem;  }

.service .event .enlarge {width:100%; }
.service .event .enlarge > div a{width:100%; }
.service .event .enlarge:hover a{background: rgba(0,0,0, .6); cursor:none;}




.service .recom {display: block; float:none;width:100%; }
.service .recom h3{font-size:1.25rem;} 
.service .card_info > div{float:left; width:100%;   }   
/*.service .card_info img {overflow:hidden; width:100%; height:auto;border-radius: 5px; }  */
/*.service .slider1 { padding:1.25rem 0 0; } */

/* 높이조절하여 .control 남은 거 없애기- 선때문에   */
.service .slider1 .control{ left:9rem; }
.service .slider1 .control button{/*width:75px; height:35px; cursor: pointer;*/ color:#000; }
.btn_more{width:6.5rem;line-height:2.0rem; font-size: 1rem;}  

.special_wrap .line{width:100%;}
.special_wrap{padding:0 .5rem .5rem;}  
.special{display: block; padding:0; width:100%;} 
.special h2 br{display: none;} /* 스페셜 굿즈<br>구매하기 한줄로 하기위해 br 없애기  */
.special h2{width:100%; padding:0 0 1rem; font-size: 1.125rem; line-height: 2.5rem; color:#852c32;/* #ed1c24;*/ background: none; text-align: center;
	border-bottom: 1px solid #bcbbbc;}
.special h2:after{content:""; display:inline-block; width:10px; height:10px; transform: rotate(45deg) translateY(-0.375rem);
	border-right:2px solid #852c32;border-bottom:2px solid #852c32;/* #ed1c24;*/ }
/* h2옆에 첵크표시 선넣기 사각형에 45도 돌려 right , bottom에 만 선넣기 */
	
.special ul{float:none;width:100%; padding: 1.5rem 0 0;  box-sizing: border-box; text-align: center;} 
/*필요한 것은 삭제, 필요 없는 것은 초기화, flex ul1의 li 행배치=> 필요/삭제, ul의 가로 크기 : 초기화 100%, 가로선 h2에 있어 ul에 패딩 주어 뛰우기    */
.special ul li {float:none; display: inline-block; width:7.9rem; height:7.9rem; padding: 0; margin : .5rem -0.5rem 0 0;transform: scale(0.95);} 
.special ul li img {width:100%;}	
.special ul li a{width:7.9rem;padding:10px 0 0;height:7.9rem; font-size: 1.0625rem;}	
.special ul li a span{padding: 1.0rem 0 0; font-size: .875rem;color:#fff;}
.btn_more_01{display:none;}	

.special ul li:nth-child(1){background-image: url("../img/PHOTO_02-1_160.jpg");}
.special ul li:nth-child(2){background-image: url("../img/PHOTO_11_160.jpg");}
.special ul li:nth-child(3){background-image: url("../img/photo_hand_160.jpg");}
.special ul li:nth-child(3) a{ color:#852c32;}

.banner > div {width:100%; }
.banner > div img{ width:100%;}

/*.guide_box_01{width:100%;} /*가운데 정렬, 위로60 좌우 오토 아래50 */
.guide_box{ padding: 1rem 1.25rem 3.125rem;}
.guide_box .line{width:100%;}
.guide{display: block; padding: 0; width: 100%;} 
.guide h2 {float:none; padding:0.625rem 0 0; width:100%; height:2.8125rem;line-height: 100%; font-size: 1.5rem;  color:#002870; background:none; 
	border-radius: 0; text-align: center; font-weight:normal; 	border-bottom: 1px solid #bcbbbc;} 
.guide h2:after{content:""; display:inline-block; width:10px; height:10px; transform: rotate(45deg) translateY(-0.375rem);border-right:2px solid #002870;
			border-bottom:2px solid #002870; }
.guide_box article{float:none; }
.guide ul{ width:100%;padding:1.0rem 0 1.0rem;} 
.guide ul li{padding: 2rem 0.1875rem 0 ; color:#222; height:9rem; box-sizing: border-box; } 
.guide ul li:before{height:9rem; }
.guide ul li:nth-child(1) a{width : 100%;padding:5rem 0 0 ; font-size: .8rem; color:#002870;
		background: url("../img/ico_main_util01.png")no-repeat top .5rem center ; transform: scale(1.2);}
.guide ul li:nth-child(1):before{border-left: none;}
.guide ul li:nth-child(2) {font-size: .8rem; line-height: 1; padding: .5rem .3rem 0 .3rem;}
.guide ul li:nth-child(2) h3{font-size:1rem;  padding:0 0 .3rem 0 ;}
.guide ul li:nth-child(2) div{font-size:0.8rem; }
.guide ul li:nth-child(2) p{ display: none; /*padding: 0.1rem 0 0.1rem; font-size: 0.8rem;*/}
.guide ul li:nth-child(3){font-size: .7rem; padding:.5rem 0 0 0.3rem;}
.guide ul li:nth-child(3) span{font-size: 1.0rem; color:#042e6f;}
.guide ul li:nth-child(3) h3{font-size:1rem;  }

.list_wrap .content{width:100%; margin:0 auto;}
.list_wrap .content .column p{padding: 2rem 0 3rem; font-size: 1.0rem;  }
.list_wrap .content .column form .search_left{float:none;}	
.list_wrap .content .column form .search_left h3{font-size: 1.2rem; margin-bottom: 1rem;}	
.list_wrap .content .column .list_top_title > ul{width:100%;}	
.list_wrap .content .column .list_content > ul {width:100%;}	
.list_wrap .content .column .list_content .page_num{transform:  translateX(-50%);}
.list_wrap .content .column .list_content .write_button{margin-top: 0; position:absolute; left: 50%;top:500%; transform: translateX(-40%);}
		


footer > div{ width:100%; line-height: 1;}
footer > div > a{right: .5rem }
footer > div .left div a{font-size: 0.8rem;margin: 0 0.3rem 0 0; } 
footer > div .left p{ padding:0.2rem 0 0; line-height: 1.5;font-size: 0.7rem;;}
footer > div .left p span{padding:0 .4rem 0 0; } /* span을 이용해 문단 띄우기 , 인라인 요소 좌우만 여백 가능 */