@charset "utf-8";

/* Layout */
.wrap{min-width:320px}
.container{position:relative}
#contents{background:#fff;min-height:300px}
#contents.bgGray{background:#f0f0ed}
.closeWrapAll{overflow:hidden;position:fixed}

/* Title */
.topTitle{position:relative;}
.topTitle > .right{position:absolute;top:-3px;right:0}
.topTitle.type02 > .right{top:13px;right:15px}
.subTit{display:block;font-size:14px;color:#222;line-height:18px;margin-bottom:10px}
.subTit.eng{font-family:'Roboto-Medium';}
.subTit02{display:block;font-size:13px;font-family:'NotoKR-Medium';color:#444}
.subTit02.big{font-size:14px;}
.subTit03{display:block;font-size:13px;color:#444}

/* Header */
#header{position:relative;}
.headerWrap{ position:relative;height:50px;background:#fff}
.headerWrap .logo { position:relative; top:11px }
.headerWrap .logo a {display:block; text-indent:-999em; }
.headerWrap .btnGnb{display:block;position:absolute;top:0;left:0;padding:17px 15px;}
.headerWrap .btnGnb span{display:block;width:21px;height:1px;background:#fff;margin-top:6px}
.headerWrap .btnGnb span:first-child{margin-top:0}
.headerWrap .utilMenu{position:absolute;top:0;bottom:0;right:15px}
.headerWrap .utilMenu:after{display:block;clear:both;content:''}
.headerWrap .utilMenu a{display:block;float:left;text-indent:-999em;background-repeat:no-repeat;background-position:50%;background-size:21px;padding:0 20px;width:21px;height:100%}
.headerWrap .utilMenu .btnMaypage{background-image:url(/Res/U/M/NASMART/img/common/btn_head_mypage.png)}
.headerWrap .utilMenu .btnCart{position:relative;background-image:url(/Res/U/M/NASMART/img/common/btn_head_cart.png)}
.headerWrap .utilMenu .btnCart em{position:absolute;top:8px;right:0px;display:block;text-indent:0;font-size:12px;font-family:'Roboto-Medium';color:#fff;width:20px;height:20px;line-height:21px;background:#2f3137;text-align:center;border-radius:50%}

#gnb{display:none;position:fixed;top:0;left:0;bottom:0;z-index:100;width:86%;transform: translateX(-100%);-webkit-transform: translateX(-100%);-moz-transform: translateX(-100%);padding-right:14%;box-sizing:initial;-webkit-box-sizing:initial;-moz-box-sizing:initial;}
#gnb .dimm{display:block;opacity:0;width:14%;height:100%;background:#000;position:absolute;top:0;right:0;transition:opacity 0.2s ease-in-out;-webkit-transition:opacity 0.2s ease-in-out;-moz-transition:opacity 0.2s ease-in-out;z-index:10}
.gnbWrap{background:#fff;height:100%;overflow-y:auto;-webkit-overflow-scrolling :touch}
.gnbWrap .gnbHead{position:relative;}
.gnbWrap .gnbHead .gnbPrev{position:relative;background:#fff}
.gnbWrap .gnbHead .gnbHeadCode{padding:11px 15px}
.gnbWrap .gnbHead .gnbHeadCode .btnLogin{display:inline-block;vertical-align:top;border:1px solid #e5e5e5;border-radius:15px;padding:6px 15px 5px 15px;line-height:1;background:#fff}
.gnbWrap .gnbHead .gnbHeadCode .btnLogin span{font-size:13px;color:#222;}
.gnbWrap .gnbHead .gnbHeadCode .paragraph{display:inline-block;vertical-align:top;line-height:27px;margin-left:10px;color:#666}
.gnbWrap .gnbHead .btnGnbClose{display:block;text-indent:-999em;position:absolute;top:0;right:0;background:url(/Res/U/M/DEF/img/common/btn_gnb_close.png) no-repeat 50%;background-size:15px;padding:15px 15px 16px 15px;}
.gnbWrap .gnbHead .gnbAfter{position:relative;background:#700000}
.gnbWrap .gnbHead .gnbAfter .gnbHeadCode .name{display:inline-block;vertical-align:top;line-height:27px;margin-right:10px;color:#fff}
.gnbWrap .gnbHead .gnbAfter .gnbHeadCode .btnLogin{background:#fff}
.gnbWrap .gnbHead .gnbAfter .gnbHeadCode .btnLogin span{color:#700000}
.gnbWrap .gnbHead .gnbAfter .btnGnbClose{background-image:url(/Res/U/M/DEF/img/common/btn_gnb_after_close.png)}
.gnbWrap .gnbHead .gnbHeadMenu ul{display:table;width:100%;table-layout: fixed;border-top:1px solid #5a0000}
.gnbWrap .gnbHead .gnbHeadMenu li{display:table-cell;width:25%;text-align:center;border-left:1px solid #5a0000;border-bottom:1px solid #5a0000;height:71px}
.gnbWrap .gnbHead .gnbHeadMenu li:first-child{border-left:none}
.gnbWrap .gnbHead .gnbHeadMenu li a{position:relative;display:block;padding-top:43px;color:#fff;font-family:'NotoKR-Medium';font-size:12px;color:#fff;line-height:1}
.gnbWrap .gnbHead .gnbHeadMenu li a:before{display:block;content:'';width:100%;height:43px;background-repeat:no-repeat;background-position:50%;position:absolute;left:0;right:0;top:0;margin:0 auto}
.gnbWrap .gnbHead .gnbHeadMenu li.mn01 a:before{background-image:url(/Res/U/M/DEF/img/common/ico_gnb_mn01.png);background-size:19px}
.gnbWrap .gnbHead .gnbHeadMenu li.mn02 a:before{background-image:url(/Res/U/M/DEF/img/common/ico_gnb_mn02.png);background-size:16px}
.gnbWrap .gnbHead .gnbHeadMenu li.mn03 a:before{background-image:url(/Res/U/M/DEF/img/common/ico_gnb_mn03.png);background-size:21px}
.gnbWrap .gnbHead .gnbHeadMenu li.mn04 a:before{background-image:url(/Res/U/M/DEF/img/common/ico_gnb_mn04.png);background-size:21px}
.gnbWrap .gnbSection{border-top:4px solid #f0f0ed}
.gnbWrap .gnbSection .tit{font-size:12px;font-family:'NotoKR-Medium';color:#444;padding:10px 0 8px 0;text-align:center}
.gnbWrap .category {font-size:0 }
.gnbWrap .category li{ position:relative;display:inline-block;vertical-align:top;width:50%;height:40px;text-align:left;border-top:1px solid #f7f7f5;border-left:1px solid #f7f7f5; background:#fff}
.gnbWrap .category li:nth-child(4n-3){border-left:none}
.gnbWrap .category li a{display:block; height:100%; font-size:14px;font-family:'NotoKR-Medium'; color:#666;line-height:14px; text-align:center; }

.gnbWrap .prod{font-size:0;text-align:center;margin-top:10px;padding:0 15px 20px 15px}
.gnbWrap .prod a{display:inline-block;vertical-align:top;width:25%}
.gnbWrap .prod .thum{width:54px;margin:0 auto 10px auto}
.gnbWrap .prod .name{display:block;font-size:12px;font-family:'NotoKR-Medium';color:#222;line-height:1}
.gnbWrap .banner{display:block}
.gnbWrap .menu{font-size:0}
.gnbWrap .menu li{position:relative;display:inline-block;vertical-align:top;width:33.33%;height:80px;text-align:center;border-bottom:1px solid #f7f7f5;border-left:1px solid #f7f7f5;background:#fff}
.gnbWrap .menu li:nth-child(3n-2){border-left:none}
.gnbWrap .menu li a{display:block;font-size:12px;font-family:'NotoKR-Medium';color:#222;padding-top:53px;line-height:1}
.gnbWrap .menu li a:before{display:block;content:'';width:100%;height:53px;background-repeat:no-repeat;background-position:50%;position:absolute;left:0;right:0;top:0;margin:0 auto}
.gnbWrap .menu li.menu01 a:before{background-image:url(/Res/U/M/DEF/img/common/ico_gnb_menu01.png);background-size:19px}
.gnbWrap .menu li.menu02 a:before{background-image:url(/Res/U/M/DEF/img/common/ico_gnb_menu02.png);background-size:19px}
.gnbWrap .menu li.menu03 a:before{background-image:url(/Res/U/M/DEF/img/common/ico_gnb_menu03.png);background-size:19px}
.gnbWrap .menu li.menu04 a:before{background-image:url(/Res/U/M/DEF/img/common/ico_gnb_menu04.png);background-size:16px}
.gnbWrap .menu li.menu05 a:before{background-image:url(/Res/U/M/DEF/img/common/ico_gnb_menu05.png);background-size:20px}
.gnbWrap .menu li.menu06 a:before{background-image:url(/Res/U/M/DEF/img/common/ico_gnb_menu06.png);background-size:19px}
.gnbWrap .menu li.menu07 a:before{background-image:url(/Res/U/M/DEF/img/common/ico_gnb_menu07.png);background-size:19px}
.gnbWrap .gnbFooter{text-align:center;padding:25px 0}
.gnbWrap .gnbFooter .name{font-size:13px;font-family:'NotoKR-Medium';color:#444;line-height:1;margin-bottom:15px}
.gnbWrap .gnbFooter .tel{ display:block; font-size:20px;font-family:'Roboto-Medium';color:#222;line-height:1;margin-bottom:6px}
.gnbWrap .gnbFooter .copy{font-size:12px;color:#666;line-height:19px}

#gnb.on{display:block;}
#gnb.dim .dimm{opacity:0.6}

/* HeadDetail */
.headDetail{position:relative;background:#000;border-bottom:1px solid #000;height:50px;}
.headDetail .title{padding-top:17px;text-align:center;font-size:16px;font-family:'NotoKR-Medium';color:#fff;line-height:1;}
.headDetail .btnBack{display:block;text-indent:-999em;position:absolute;top:4px;left:0;padding:11px 15px; background:url(/Res/U/M/NASMART/img/common/btn_back.png) no-repeat 50%;background-size:19px; }

.headDetail .utilMenu{position:absolute;top:0;bottom:0;right:15px}
.headDetail .utilMenu:after{display:block;clear:both;content:''}
.headDetail .utilMenu a {display:block;float:left;text-indent:-999em;background-repeat:no-repeat;background-position:50%;background-size:21px;padding:0 20px;width:21px;height:100%}
.headDetail .utilMenu .btnCart { position:relative;background-image:url(/Res/U/M/NASMART/img/common/ico_cart.png)}
.headDetail .utilMenu .btnCart em{ position:absolute;top:2px;right:0px;display:block;text-indent:0;font-size:12px;font-family:'Roboto-Medium';color:#fff;width:20px;height:20px;line-height:21px;background:#911027;text-align:center;border-radius:50%}

/* menuDep */
.menuDep{position:relative;left:0;right:0;min-width:320px;height:50px;background:#000000 ;z-index:10;-webkit-transform: translateZ(0px);-webkit-transform: translate3d(0,0,0);-webkit-overflow-scrolling:touch; border-bottom:1px solid #333}
.menuDep.fixed{position:fixed !important;top:0 !important;z-index:100}
.menuDep ul{font-size:0;text-align:center;width:100%;padding:0 15px;white-space: nowrap;}
.menuDep li{display:inline-block;margin:0 12px;text-align:center;}
.menuDep li a{position:relative;display:block;font-size:16px;padding:12px 0 13px 0;line-height:1;color:#fff}
.menuDep li:first-child{margin-left:0}
.menuDep li:last-child{margin-right:0}
.menuDep li a:after{display:none;content:'';width:100%;height:3px;background:#fff;position:absolute;left:0;right:0;bottom:-1px}
.menuDep li.on a{color:#01b2c9;font-family:'NotoKR-Medium';}
.menuDep li.on a:after{display:block;}

/* Footer */
#footer{border-top:1px solid #e5e5e5;background-color:#fff;text-align:center;padding:0 15px 35px 15px}
#footer .footerMenu{font-size:0;margin:17px 0 25px 0}
#footer .footerMenu li{position:relative;display:inline-block;padding:0 15px;line-height:1}
#footer .footerMenu li:before{display:block;content:'';width:1px;height:9px;background:#e5e5e5;position:absolute;top:1.5px;left:0}
#footer .footerMenu li:first-child:before{display:none}
#footer .footerMenu li a{font-size:13px;color:#444}
#footer .name{font-size:16px;color:#222;margin-bottom:10px}
#footer .copy{font-size:12px;color:#666;line-height:21px}
#footer .btm{font-size:0;margin-top:12px}
#footer .btm dl{position:relative;display:inline-block;padding-right:10px}
#footer .btm dl:after{display:block;content:'';width:1px;height:9px;background:#e5e5e5;position:absolute;top:5px;right:0}
#footer .btm dl dt{display:inline-block;font-size:13px;color:#666;margin-right:10px}
#footer .btm dl dd{display:inline-block;}
#footer .btm dl dd a{font-family:'Roboto-Medium';font-size:13px;color:#222}
#footer .btm .mail{display:inline-block;font-size:13px;color:#222;margin-left:10px}