html , body {font-size:16px; font-family:"Noto Sans KR"; color:#333;min-height:100%; min-width:320px;line-height:1.6; position:relative; letter-spacing: -0.5px;max-width:480px;margin:auto;}
body {overflow-x:hidden; position:relative;margin: auto;}
img {max-width:100%;vertical-align:top;}
a {color:inherit;text-decoration:none;}
* {box-sizing:border-box; -webkit-text-size-adjust:none;word-break:keep-all;}  
.auto {position: relative;padding:0 10px;}
.auto:after,.clearFix:after,ol:after,ul:after,dl:after {content:""; display:block;width:0; height:0; overflow:hidden;clear:both;font-size:0; overflow: hidden;}
.wholeWrap {position:relative; min-height:100%; width:100%; overflow:hidden;}
.wrap {position:relative; min-height:100%; width:100%; overflow:hidden; ;left:0; top:0;}
#header {width:100%;position:fixed;z-index:1003; overflow:hidden; background: #0971ce;border-bottom:1px solid #d9d9d9;top:0;left:0;}
#header .topBanner {height:95px;position:relative;overflow:hidden;}
#header .topBanner .banner img {position:absolute;top:0;left:50%;transform:translateX(-50%);height:100%;max-width:none;}
#header .topBanner .btnClose {position:absolute;top:14px;right:10px;width:20px;}
#header .topBanner .btnClose img {}
#header .headerTop {position:relative;padding:0 10px;overflow:hidden;height: 60px;}
#header .logo {text-align:center;}
#header .logo a {position:relative;display: block;padding:18px 0;}
#header .logo img {height:30px;}
#header .btnAllMenu {display:block;position:absolute;top:0;right: 0;height:100%;width:50px;}
#header .btnAllMenu span {display: block;width: 30px;height:3px;background:#fff;position: absolute;right: 10px;
	-webkit-transition:0.3s all ease-out;
	-moz-transition:0.3s all ease-out;
	-o-transition:0.3s all ease-out;
	-ms-transition:0.3s all ease-out;
	transition:0.3s all ease-out;
}
#header .btnAllMenu span:nth-child(1) {top:19px;}
#header .btnAllMenu span:nth-child(2) {top:29px;}
#header .btnAllMenu span:nth-child(3) {top:39px;}
#header .btnAllMenu.open span:nth-child(1){transform: rotate(135deg);top:28px;} 
#header .btnAllMenu.open span:nth-child(3){transform: rotate(-135deg);top:28px;} 
#header .btnAllMenu.open span:nth-child(2){opacity: 0;} 
#header .myCart {position: absolute;left:10px;top:16px;display: block;}
#header .myCart img {width:30px;}
#header .headerBanner {position:absolute;height:60px;}
#header .headerBanner img {height:100%;}
#header .headerTop .cartLength span {position:absolute;top:-3px;right:-11px;background:#fff;border-radius:20px;width:23px;text-align:center;font-size:11px;color:#0971ce;line-height:15px;}
#header .gnbWrap {overflow:hidden;border-top:1px solid #e8e8e8;background: #fff;}
#header .gnbWrap .gnbList li {float:left;width:33%;text-align:center;}
#header .gnbWrap .gnbList li > a {display:inline-block;text-align:center;font-size:14px;color:#4c4c4c;line-height:40px;font-weight:500;position:relative;}
#header .gnbWrap .gnbList li > a:after {content:"";position:absolute;bottom:0;left:0;width:100%;height:2px;background:#0971ce;display:none;}
#header .gnbWrap .gnbList li.on > a {color:#0971ce;}
#header .gnbWrap .gnbList li.on > a:after {display:block;}
#header .gnbWrap .gnbList li > a i {display:none;}
#header .gnbWrap .gnbList .sub {display:none;}



#gnb {width:100%;min-height:100%;position:fixed;top:60px;bottom:0;background:#fff;right:-100%;z-index:11980;overflow:auto;padding-bottom:60px;}
#gnb.on {left:0;}
#gnb .prd-recent {padding:10px;}
#gnb .prd-recent .title {font-size:13px;color:#666;margin-bottom:10px;}
#gnb .prd-recent ul {margin:-5px;}
#gnb .prd-recent ul li {float:left;padding:5px;width:25%;}
#gnb .prd-recent ul li a {display:block;border:1px solid #d9d9d9;}
#gnb h2 {height: 50px;background: #fff;padding: 10px 0 10px 15px;}
#gnb h2 img {height: 30px;width: auto;}
#gnb .gnbList {overflow:auto;}
#gnb .gnbList > li {overflow:hidden;}
#gnb .gnbList > li > a {display: block;height: 50px;line-height: 50px;background: #fff; border-bottom: 1px solid #d9d9d9;padding-left: 20px;position: relative;color:rgba(0,0,20,1);}
#gnb .gnbList > li > a .icon {position:absolute;top:50%;transform:translateY(-50%);right:20px;}
#gnb .gnbList > li > a .icon span {position:absolute;right:0;width:15px;height:2px;background:#0971ce;transition:0.3s all ease-out;}
#gnb .gnbList > li > a .icon span:nth-child(2) {transform:rotate(90deg);}
#gnb .gnbList > li.on > a {color:#0971ce;}
#gnb .gnbList > li.on > a .icon span:nth-child(2) {transform:rotate(0);}
#gnb .gnbList > li > a:after {content: "";display: block;width: 50px;height: 50px; background-size:35%;position: absolute; right:10px; top:0; transition:all 0.5s;}
#gnb .gnbList > li > .sub {display: none;background:#f8f8f8;}
#gnb .gnbList > li > .sub li {position:relative;}
#gnb .gnbList > li > .sub li a {display:block;font-size:0.85rem;height:40px;line-height:40px;padding-left: 30px;position:relative;border-bottom: 1px solid #d9d9d9;color:#666;}
/* #gnb .gnbList > li:nth-child(9) {padding-top:20px;margin-top:20px;border-top:1px solid #e8e8e8;} */
.btnAllClose {position: fixed; right:-50px; top:0;display: block;width: 50px;height: 50px;padding: 10px;z-index: 1192; transition:all 0.5s;}
.btnAllClose.on {right:50px;transform:rotate(-180deg);}
.btnAllClose img {width: 30px;}
#gnb .util {position:absolute;bottom:10px;left:0;padding:20px;width:100%;background:#fff;z-index:1;}
#gnb .util .util_l {float:left;}
#gnb .util .util_l a {display:inline-block;margin-right:10px;position:relative;}
#gnb .util .util_l a img {height:23px;}
#gnb .util .login {float:right;display:block;width:80px;text-align:center;border:1px solid #000;font-size:15px;color:#000;}
#gnb .util a span {position:absolute;top: -3px;right: -35px;width:29px;height:29px;background:url("../images/layout/icon_balloon.png") no-repeat 50% 50%;background-size: 100%;font-size:12px;color:#fff;font-weight:700;text-align:center;padding-top: 6px;padding-left: 3px;}

.wrap > .btnAllClose {position:fixed;top:0;right:-100%;z-index:1198;transition:all 0.5s;padding:15px;}
.wrap > .btnAllClose.on {right:0;}
.wrap > .btnAllClose img {width:20px;}



/* footer */
.fMenu {text-align:center;border-bottom:1px solid rgba(255,255,255,0.2);border-top:1px solid #e8e8e8;border-bottom:1px solid #e8e8e8;}
.fMenu ul li {display:inline-block;position:relative;}
.fMenu ul li:after {content:"";position:absolute;top:20px;right: -1px;width:1px;height: 11px;background:#e8e8e8;}
.fMenu ul li:last-child:after {display:none;}
.fMenu ul li a {display:block;padding: 0 10px;line-height:50px;font-size:14px;color:#7e7e7e;}

#footer {text-align: center;padding-bottom:75px;}
#footer .addrWrap {text-align:center;padding:20px 10px;}
#footer .addrWrap p {font-size:12px;color:#999;line-height: 18px;}
#footer .copyright {opacity:0.5;}

.bottom-quickMenu {position:fixed;bottom:0;left:0;width:100%;background:#fff;border-top:1px solid #d9d9d9;padding:10px 0;z-index:9;}
.bottom-quickMenu ul li {float:left;width:25%;text-align:center;}
.bottom-quickMenu ul li .icon {display:block;height:30px;background-repeat:no-repeat;background-position:50% 50%;background-size:25px;}
.bottom-quickMenu ul li .icon.icon01 {background-image:url("../images/layout/bottom-quickMenu-icon01.png");}
.bottom-quickMenu ul li .icon.icon02 {background-image:url("../images/layout/bottom-quickMenu-icon02.png");}
.bottom-quickMenu ul li .icon.icon03 {background-image:url("../images/layout/bottom-quickMenu-icon03.png");}
.bottom-quickMenu ul li .icon.icon04 {background-image:url("../images/layout/bottom-quickMenu-icon04.png");}
.bottom-quickMenu ul li p {font-size:13px;color:#999;}

.mobileSearch {position:fixed;top:-100%;left:0;right:0;height:100%;z-index:10020;}
.mobileSearch .inner {padding:20px;height:100%;background:#fff;padding-bottom:100px;}
.mobileSearch .search-box {position:relative;border-bottom:1px solid #999;}
.mobileSearch .search-box input[type="text"] {outline:none;height:40px;border:none;background:none;font-size:14px;color:#999;font-weight:300;padding:0;}
.mobileSearch .search-box a {position:absolute;top:10px;right:0;width:18px;height:18px;background:url("../images/layout/icon_search_on.png") no-repeat 50% 50%;}
.mobileSearch .inner .title {display:block;font-size:16px;color:#333;padding:10px 0;}
.mobileSearch .inner .keyword {overflow:hidden;margin:-5px;}
.mobileSearch .inner .keyword a {display:block;float:left;padding:2px 10px;border-radius:15px;background:#f7f7f7;border:1px solid #d9d9d9;font-size:13px;color:#4c4c4c;margin:5px;}