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

/*tablet => mobile은 상속이 안됨 , table.css를 복사하여 갖고와 수정 부분 변경 */
header{border-bottom:1px solid #2b2e57;height:2rem; margin-bottom:  2rem;}

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

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

header .suhwoo .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 .suhwoo .nav.on{left:0;}  /* 왼쪽엣  오른쪽으로 animation효 */

/* 로그인 로그아웃영역 */
header .suhwoo .nav.on nav{padding : 0 0 2.75rem; border-top: 1px solid #2b2e57; } /* .nav 아래 ul/li를 아래로 여백주어 내려주기 */

header .suhwoo .nav.on nav a{float: left; height:1.2rem; line-height: 1.2rem; color:#2b2e57;}
header .suhwoo .nav.on nav a:before{display:none;}  /* 마우스대면 선보요주기  없애기  */
header .suhwoo .nav li:nth-child(5):hover p{color:#31DB2B; }
header .suhwoo .left > div  nav li{float:none; border-bottom: 1px solid #eee;}  /* float-left를 없애 li block요소로 세로로 떨러뜨리기 */
header .suhwoo .nav.on li a{display:inline-block; padding-top: 0.5rem; font-size: 0.6rem;}
header .suhwoo .nav.on li a select{font-size: 0.6rem;}

header .suhwoo .nav.on div{display:flex; border:1px solid #eee; background: #2b2e57; background: url("../images/suhwoo_02.png")no-repeat ; } /* 로그인/ 로그어웃 영역 */
header .suhwoo .nav.on div a{ height:1.2rem; line-height: 1.2rem; border-left: 1px solid #eee; text-align:center; color:#fff; font-size:0.7rem; font-weight:normal; }
header .suhwoo .nav.on div a:first-child{border-left:none;}  /* 왼쪽선 곁침 제거 */

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

header .suhwoo .nav.on h2{width:6.5rem; height:4.4375rem; background: url("../images/suhwoo_02.png")no-repeat ; color:transparent; margin:0 auto;}
/* .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: 6.5rem;}

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

/* .banner .suhwoo .container { 	position: relative;	width: 100%;	margin: 0 auto;  } */
.banner .suhwoo h3{
	position:relative;  display:block; height:1.25rem; line-height: 1.25rem; text-align: center; font-size: 0.6rem; color:#2b2e57;
  }
.banner .suhwoo .container .slide {
	overflow: hidden;
	position: relative;
	width: 100%;
	height: 200px;
  }
  .banner .suhwoo .container .slide li {
	position: absolute;
	left: 0;
	top: 0;
  }
  .banner .suhwoo .container .slide li img {
	width: 100%;
	height: 100%;
  }




.banner{width:100%;}
.banner > div {height:14rem;}
.banner > div img{width:100%; height:28rem;}
.banner > div{text-align: center; }

.banner > div p{top:6rem; font-size:1.3rem;left: 7rem; color:orangered; }
.banner > div p em{display:block; color:#000;}
.banner > div p span{display: block;font-size:1.2rem; color:#fff; } 

.contents {padding:0 0 1rem; width:100%; text-align: center; margin:0 auto; }
.contents h3{width:100%; height: 1.0rem; font-weight: 400;line-height: 1.0rem;	font-size: 0.7rem;	text-align: center;
	color: #000; padding:0; margin-top: 2rem; margin-bottom: 3rem; }


.contents .con2 h2 {width: 5rem; height: 1rem;line-height: 1rem; background: #2b2e57;	font-size: 0.7rem;	font-weight: normal;
	text-align: center;	color: #fff;	padding: 0.5rem;	
  }
.contents .con2 ul li {width: 49rem; height: 100%; text-align: center; }
.contents .con2 ul li img {width: 100%;	height: 200px;  }

.service {width:100%; height:5.5rem; padding:0; margin-bottom: 1.8rem; margin-top: 0;}
.service .adv{height:4rem;}
.service .adv p{font-size: 0.7rem; }
.service .adv p span{text-align: center; font-size: 0.7rem;color:#2b2e57; }
.service .adv p em{color:orangered;}

.visual > article{width:100%;}
.visual .adv > div.txt1{top: 6.2rem; height: 1.0rem; line-height: 1.0rem; font-size:0.7rem;  font-weight: normal; color:#fff;}
.visual .adv .txt1 p{padding:0.2rem 0 0;font-size: 0.7rem; }
.visual .adv > div.txt2{bottom: 5rem; font-size:0.8rem; color:blue;height: 1.0rem; line-height: 1.0rem;}
.visual .adv > div.txt3{left:3rem; font-size:0.8rem;height: 1.0rem; line-height: 1.0rem;}
.visual .adv > div.txt4{left:.5rem; top:5rem; font-size:0.7rem; height:1.0rem;line-height: 1.0rem;}


.visual .control{position: relative;padding-bottom: 1rem; text-align: center;}
.visual .control button{display:inline-block ; margin-top: 1rem; width:5.25rem; height:1.5625rem; background: #2b2e57;font-size: 0.8rem; color:#fff;border:1px solid #2b2e57; cursor: pointer;}



footer > div div{padding:0.8rem 0 1.25rem; border-top: 1px solid #eee; text-align: center;}
footer > div div > a{display:inline-block; padding :0.2rem; margin: 0 0.2rem; height:1.0rem;line-height:1.0rem; border:1px solid #2b2e57;  
vertical-align: middle;	border-radius: 3px; font-size:0.70rem; color:#2b2e57;}

footer > div .bottom{ padding:1.5rem 0 2.0rem; text-align: center;}
footer > div .bottom p{font-size: 0.8rem; }  
footer > div .bottom li{font-size:  0.70rem; }
/* footer > div .bottom li:nth-child(2){display:block;}
footer > div .bottom li:first-child:after,
footer > div .bottom li:nth-child(2):after{display:none;} */

footer > div .bottom address{font-size: 0.6rem;  }







/* footer > div .bottom ul{padding:0.625rem 0 0.625rem 0;}	   */
/* footer > div .bottom li{display:inline-block; position:relative; padding:0 0.625rem; font-size: 1.0rem; color:#2b2e57;  }
footer > div .bottom li:after{content:""; position: absolute; right:0; top:50%; margin-top: -5px; width:1px; height:12px; background: #2b2e57;}
footer > div .bottom li:last-child:after{display:none;}
footer > div .bottom address{font-size: 0.90rem; color:#2b2357; } */