@charset "UTF-8";
/* Designed and Coding By Yoon Jain */
/* Designer Yoon Jain (design,html,css,jquery) */

/* font */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&family=Roboto:wght@400;500;700&display=swap');
/* reset */
*{box-sizing:border-box;-webkit-text-size-adjust:none;} /* 아이폰 텍스트 자동확대 막기 */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b, u, i, center,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,
time, mark, audio, video{margin:0;padding:0;border:0;list-style:none;font-size:100%;font:inherit;vertical-align:baseline;}
body{line-height:1;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
a{color:#222;text-decoration:none;}
a:visited,a:active{text-decoration:none;}
a:hover,a:focus{text-decoration:none;}
table{border-collapse:collapse;border-spacing:0;}
img{vertical-align:middle;}
b,strong{font-weight:bold;}
i,em{font-style:italic;}
u{text-decoration:underline;}
sup{font-size:.75em; vertical-align:text-top;}
/* basic : 1rem=10px */
html{overflow-y:auto; line-height:1; color:#222; font-size:16px; /*font-size:62.5%;*/ letter-spacing:-.055em; zoom:1; scroll-behavior:smooth;}
body{width:100%; height:100%; margin:0 auto; background:#fff; font-family:'Noto Sans KR',Roboto,-apple-system,BlinkMacSystemFont,system-ui,'Helvetica Nenu','Segoe UI','Apple SD Gothic Neo','Malgun Gothic','FontAwesome',sans-serif; /*font-size:1.6rem;*/ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;}
body.hidden{min-height:100%; overflow-y:hidden !important; touch-action:none;}
/* common */
#wrap{clear:both; position:relative; width:100%; min-width:1200px; height:100%; margin:0 auto;}
#container{clear:both; position:relative; width:100%; height:auto; min-height:800px; margin:0; padding:84px 0 0; background:#fff; z-index:auto; transition:.3s;}
#container:after{content:''; clear:both; display:block;}
.inner{clear:both; position:relative; margin:0 auto; width:1180px; padding:0 10px; box-sizing:content-box;}
.inner.w1200{width:1200px; max-width:1200px; padding:0;}
.inner:after{content:''; clear:both; display:block;}
.reading{clear:both; display:block; width:1px; height:1px; margin:-1px; border:0; overflow:hidden; clip:rect(1px,1px,1px,1px); clip-path:inset(50%);}
caption{clear:both; width:1px; height:1px; margin:-1px -1px 0; overflow:hidden;}
caption.view{width:auto; height:auto; margin:0 auto 5px; color:#acacac; font-size:.875rem; overflow:inherit;}
caption.view:before{content:'<';}
caption.view:after{content:'>';}
a, button, input, select, textarea{font-family:'Noto Sans KR',Roboto,-apple-system,BlinkMacSystemFont,system-ui,'Helvetica Nenu','Segoe UI','Apple SD Gothic Neo','Malgun Gothic','FontAwesome',sans-serif; font-size:100%; letter-spacing:-.055em; transition:.2s ease;}
a,a:hover,a:active,a:focus,button,button:hover,button:active,button:focus,input,input:hover,input:focus,select,select:hover,select:focus,textarea,textarea:hover,textarea:focus{transition:.2s ease;}
button{border:none;}
.layoutLeft{float:left;}
.layoutRight{float:right;}
.layoutRight:after{content:''; clear:both; display:block;}
ul.skip{position:fixed; top:0; z-index:999999;}
ul.skip li{}
ul.skip li a.skipTo{position:fixed; top:-99px; left:0; width:100%; padding:16px 0; background:#222; color:#fff; text-align:center; opacity:0;}
ul.skip li a.skipTo:focus, ul.skip li a.skipTo:hover, ul.skip li a.skipTo:active{display:block; top:0; opacity:1;}
.chk_pc{display:block;}
#bo_v_con{font-family:initial;}

i.ico{display:inline-block; font-family:'FontAwesome';}
i.ico.cart{width:19px; height:18px; background:url('../images/ico_cart.png') no-repeat center top 0;}
i.ico.search{width:12px; height:12px; background:url('../images/ico_search.png') no-repeat center top 0;}
i.ico.sns{width:17px; height:17px;}
i.ico.sns.instagram{background:url('../images/ico_sns_instagram.png') no-repeat center top 0;}

/* header */
#header{clear:both; display:inline-block; position:fixed; width:100%; height:84px; top:0; left:0; background:#000; text-align:left; transition:.2s; z-index:99;}
#header.scroll{background:rgba(0,0,0,.6); backdrop-filter:blur(4px);}
#header > .logo{position:absolute; width:204px; top:16px; left:50%; transform:translateX(-50%);}
#header > .logo h1{}
#header > .logo h1 a{}
#header > .logo h1 a img{width:100%;}
#header .gnb{display:inline-block; width:100%;}
#header .gnb .nav{display:inline-block; width:100%;}
#header .gnb .nav .menuList{display:inline-block; float:left; width:50%;}
#header .gnb .nav .menuList ul{display:inline-block; position:relative; float:left; line-height:84px; margin:0 auto; padding:0 2vw; box-sizing:border-box; text-align:left;}
#header .gnb .nav .menuList ul li{display:inline-block; position:relative; line-height:1; margin:0 .5vw;}
#header .gnb .nav .menuList ul li a{color:#fff; font-size:1.063rem;}
#header .gnb .nav .menuList ul li a:focus, #header .gnb .nav .menuList ul li a:hover{color:#ff8a00;}
#header .gnb .nav .menuList ul li a strong{}
#header .gnb .nav .menuList ul li ul{display:block; position:absolute; width:142px; height:auto; line-height:1.2; top:60px; left:50%; margin:0 auto 0 -71px; padding:12px 0; background:rgba(255,255,255,.8); border:1px solid #eee; text-align:center; word-break:keep-all; transition:all 0.18s ease; transition-delay:0.1s; box-sizing:border-box; opacity:0; visibility:hidden;}
#header .gnb .nav ul li a:focus + ul, #header .gnb .nav ul li a:hover + ul, #header .gnb .nav ul li:hover > ul, #header .gnb .nav ul li ul.on{opacity:1; visibility:visible;}
#header .gnb .nav .menuList ul li ul li{display:block; margin:4px auto;}
#header .gnb .nav .menuList ul li ul li a{display:inline-block; position:relative; padding:2px;}
#header .gnb .nav .menuList ul li ul li a:focus, #header .gnb .nav .menuList ul li ul li a:hover{color:#999;}
#header .gnb .nav ul li ul li.new > a:after{content:''; display:inline-block; width:12px; height:12px; margin-left:3px; background:url('../images/ico_newlink.png') no-repeat center center;}
#header .gnb .nav .snb{display:inline-block; float:right; width:50%; text-align:right;}
#header .gnb .nav .snb .menuList{display:inline-block; float:none; width:auto; vertical-align:top;}
#header .gnb .nav .snb .menuList ul.right{padding:0 .4vw 0 2vw; text-align:right;}
#header .gnb .nav .snb .searchBox{display:inline-block; position:relative; line-height:80px; margin:0 .2vw; vertical-align:top;}
#header .gnb .nav .snb .searchBox input{width:0; height:30px; margin-right:-2px; padding:0; background:transparent; border:none; border-bottom:2px solid #fff; color:#fff; font-size:.813rem; vertical-align:middle;}
#header .gnb .nav .snb .searchBox:focus input,
#header .gnb .nav .snb .searchBox:hover input,
#header .gnb .nav .snb .searchBox input:focus{width:128px;}
#header .gnb .nav .snb .searchBox button{display:inline-block; position:relative; width:30px; height:30px; background:none; border:2px solid #fff; cursor:pointer; vertical-align:middle;}
#header .gnb .nav .snb .searchBox button i.ico.search{position:relative; top:-1px;}
#header .gnb .nav .snb div.cart{display:inline-block; position:relative; line-height:80px; margin:0 .2vw;}
#header .gnb .nav .snb .cart a{display:inline-block; width:30px; height:30px; line-height:1; margin:0; border:2px solid #fff; vertical-align:middle;}
#header .gnb .nav .snb .cart i.ico.cart{position:relative; width:16px; height:15px; top:5px; left:-5px; background-size:cover;}
#header .gnb .nav .snb .cart span.count{position:absolute; min-width:16px; height:16px; line-height:12px; top:12px; right:0; margin-right:-8px; padding:1px 6px 2px 4px; background:#222; border-radius:16px; text-align:center;}
#header .gnb .nav .snb .cart span.count span{color:#fff; font-size:1.1rem;}
#header .gnb .nav .snb .member{display:inline-block; position:relative; line-height:84px; margin:0 2vw 0 .4vw; vertical-align:top;}
#header .gnb .nav .snb .member > div{display:inline-block; line-height:1; vertical-align:middle;}
#header .gnb .nav .snb .member a.mem{display:block; margin-top:-8px ;color:#fff; font-size:.813rem; vertical-align:middle;}
#header .gnb .nav .snb .member a.mem span{display:block; position:relative; margin:0 auto;}
#header .gnb .nav .snb .member a.mem:focus, #header .gnb .nav .snb .member a.mem:hover{opacity:0.7;}
#header .gnb .nav .snb .member a.mem:focus + ul, #header .gnb .nav .snb .member a.mem:hover + ul, #header .gnb .nav .snb .member:hover ul, #header .gnb .nav .snb .member ul:hover, #header .gnb .nav .snb .member ul.on{opacity:1; visibility:visible;}
#header .gnb .nav .snb .member ul{display:block; position:absolute; width:88px; height:auto; line-height:1.2; top:84px; left:50%; margin:0 auto 0 -42px; padding:8px 0; background:#000; text-align:center; word-break:keep-all; transition:all 0.18s ease; transition-delay:0.1s; box-sizing:border-box; opacity:0; visibility:hidden;}
#header.scroll .gnb .nav .snb .member ul{background:rgba(0,0,0,.6); backdrop-filter:blur(4px);}
#header .gnb .nav .snb .member ul li{display:block;}
#header .gnb .nav .snb .member ul li:last-child{margin:0;}
#header .gnb .nav .snb .member ul li a{display:inline-block; position:relative; padding:3px 12px 4px; color:#ddd; font-size:0.813rem; font-weight:400; line-height:1.3;}
#header .gnb .nav .snb .member ul li a:focus, #header .gnb .nav .snb ul li a:hover{color:#ff8a00;}
#header .gnb .nav .snb .member ul li.admin a{color:#ff8a00;}
#header .gnb .nav .snb .member ul li.admin a:focus, #header .gnb .nav .snb .member ul li.admin a:hover{color:#ff8a00;}
#header .sitemap{display:none;}
#header .navMobile{display:none;}

/* footer */
#footer{clear:both; width:100%; height:auto; background:#222;}
#footer .area01{padding:28px 0;}
#footer .area01 .company{float:left; width:50%;}
#footer .area01 .company span{display:inline-block; line-height:1.4; margin-right:12px; color:#888; font-size:.875rem; vertical-align:top;}
#footer .area01 .company span:last-child{margin-right:0;}
#footer .area01 .company .info{margin:0 auto 4px;}
#footer .area01 .company .info span{}
#footer .area01 .company .info span a{color:inherit;}
#footer .area01 .company .info span a:focus, #footer .area01 .company .info span a:hover{color:#ddd;}
#footer .area01 .company .copyright{margin:12px auto 0;}
#footer .area01 .addproduct{float:right; padding:28px 0;}
#footer .area01 .addproduct a.link.add.product{padding:8px 20px; background:#fff;}

/* quick */
#quick{display:block; position:fixed; width:76px; top:50%; right:20px; text-align:center; visibility:hidden; opacity:0; transition:all 0s, opacity .3s; transform:translateY(-50%); z-index:98;}
#quick.show{visibility:visible; opacity:1;}
#quick .btn_top{display:flex; width:38px; height:38px; line-height:34px; margin:4px auto; transition:.3s;}
#quick .btn_top a.back_to_top{display:block; width:100%; height:100%; color:#222; background:#fff; border:1px solid #ddd; border-radius:50%; text-align:center; transition:all 0s; cursor:pointer;}
#quick .btn_top a.back_to_top span{}
#quick .btn_top a.back_to_top span.arrow{display:inline-block; width:16px; height:9px; margin:0 auto 2px; background:url('../images/ico_arrow_top.png') no-repeat center;}
#quick .btn_top a.back_to_top:focus, #quick .btn_top a.back_to_top:hover{}
#quick .btn_bottom{display:flex; width:38px; height:38px; line-height:34px; margin:4px auto; transition:.3s;}
#quick .btn_bottom a.back_to_bottom{display:block; width:100%; height:100%; color:#222; background:#fff; border:1px solid #ddd; border-radius:50%; text-align:center; transition:all 0s; cursor:pointer;}
#quick .btn_bottom a.back_to_bottom span{}
#quick .btn_bottom a.back_to_bottom span.arrow{display:inline-block; width:16px; height:9px; margin:0 auto; background:url('../images/ico_arrow_bottom.png') no-repeat center;}
#quick .btn_bottom a.back_to_bottom:focus, #quick .btn_bottom a.back_to_bottom:hover{}

@media all and (max-width:1439px){
	#quick{right:10px;}
}

@media all and (max-width:1279px){
	#wrap{min-width:1000px;}
	.inner{width:100%; min-width:960px; box-sizing:border-box;}
	caption{margin:0;}
}

@media all and (max-width:1023px){
	#wrap{min-width:296px;}
	#container{min-height:500px; padding:72px 0 0;}
	.inner{width:100%; min-width:296px; padding:0 12px;}
	.layoutLeft{float:none;}
	.layoutRight{float:none;}
	#header{position:fixed; height:72px; top:0; z-index:9999;}
	#header.scroll{backdrop-filter:none;}
	#header .logo{width:129px; height:auto; top:17px; z-index:9;}
	#header .gnb{display:none;}
	#header .sitemap{display:block;}
	#header .navMobile{display:block;}
	#header .navMobile .navPanel{position:fixed; width:100%; height:100%; top:0; right:0; background:transparent; visibility:hidden; opacity:0; transition:.3s ease-in-out; z-index:1; overflow:hidden;}
	#header .navMobile .navPanel p.ti{margin:0 auto 12px;}
	#header .navMobile .navPanel ul{margin:0 auto;}
	#header .navMobile .navPanel .menuArea{display:flex; position:absolute; width:60%; height:100%; top:0; right:-100%; padding:20px; background:#fff; border:1px solid #ddd; font-size:80%; text-align:left; opacity:0; overflow:auto; transition:right 0.3s ease-in-out, opacity 0.2s ease-in-out; z-index:-1;}
	#header .navMobile .navPanel .menuArea .inner{display:block; padding:0;}
	#header .navMobile .navPanel .menuArea .inner:after{content:''; clear:both; display:block; width:100%; height:1px;}
	#header .navMobile .navPanel .menuArea .mobile{display:block;}
	#header .navMobile .navPanel .menuArea .logo{position:relative; top:0; left:0; margin:0 0 20px;}
	#header .navMobile .navPanel .menuArea .logo h1{}
	#header .navMobile .navPanel .menuArea .logo h1 a{}
	#header .navMobile .navPanel .menuArea .logo h1 a img{width:100%;}
	#header .navMobile .navPanel .menuArea .lang{position:absolute; top:0; right:0;}
	#header .navMobile .navPanel .menuArea .lang ul.lang_select{}
	#header .navMobile .navPanel .menuArea .lang ul.lang_select li{display:inline-block;}
	#header .navMobile .navPanel .menuArea .lang ul.lang_select li a{}
	#header .navMobile .navPanel .menuArea .lang ul.lang_select li a img{}
	#header .navMobile .navPanel .menuArea .lang ul.lang_select li a span.language{display:none;}
	#header .navMobile .navPanel .menuArea .lang ul.lang_select li a:focus, #header .navMobile .navPanel .menuArea .lang ul.lang_select li a:hover{}
	#header .navMobile .navPanel .menuArea .msnb{display:block; width:100%;}
	#header .navMobile .navPanel .menuArea .msnb p{}
	#header .navMobile .navPanel .menuArea .msnb p.ti{}
	#header .navMobile .navPanel .menuArea .msnb .member{margin:0 auto 20px;}
	#header .navMobile .navPanel .menuArea .msnb .member .memberW{width:100%;}
	#header .navMobile .navPanel .menuArea .msnb .member .memberW ul{display:inline-block; width:100%; margin:-2px 0;}
	#header .navMobile .navPanel .menuArea .msnb .member .memberW ul li{display:inline-block; position:relative; float:left; width:50%; margin:0; padding:2px 0; text-align:center;}
	#header .navMobile .navPanel .menuArea .msnb .member .memberW ul li:nth-child(2n-1){padding-right:2px;}
	#header .navMobile .navPanel .menuArea .msnb .member .memberW ul li:nth-child(2n){padding-left:2px;}
	#header .navMobile .navPanel .menuArea .msnb .member .memberW ul li a{display:block; padding:10px; background:#fff; border:1px solid #222;}
	#header .navMobile .navPanel .menuArea .msnb .member .memberW ul li:nth-child(2) a{background:#222; color:#fff;}
	#header .navMobile .navPanel .menuArea .msnb .member .memberW ul li a:focus, #header .navMobile .navPanel .menuArea .msnb .member .memberW ul li a:hover{}
	#header .navMobile .navPanel .menuArea .msnb .member .memberW ul li span.join_point{display:block; position:absolute; line-height:1; top:32px; left:50%; padding:3px; background:#888; border-radius:2px; color:#fff; font-size:1em; transform:translateX(-50%);}
	#header .navMobile .navPanel .menuArea .msnb .member .memberW ul li span.join_point:before{content:''; display:inline-block; position:absolute; width:0; height:0; top:-3px; left:50%; margin-left:-3px; border:3px solid transparent; border-top:none; border-bottom-color:#888; transition:.18s; z-index:5;}
	#header .navMobile .navPanel .menuArea .msnb .member .memberW ul li.admin{clear:both; width:100%;}
	#header .navMobile .navPanel .menuArea .msnb .member .memberW ul li.admin a{background:#ff8a00; border-color:#ff8a00; color:#fff;}
	#header .navMobile .navPanel .menuArea .msnb .member .memberW ul li.admin a:focus, #header .navMobile .navPanel .menuArea .msnb .member .memberW ul li.admin a:hover{}
	#header .navMobile .navPanel .menuArea .msnb .searchBox{clear:both; display:inline-block; position:relative; width:100%; margin:0 auto 20px;}
	#header .navMobile .navPanel .menuArea .msnb .searchBox input{width:100%; height:36px; padding:0 36px 0 12px; background:#fff; border:1px solid #ddd; font-size:1.1em; vertical-align:middle;}
	#header .navMobile .navPanel .menuArea .msnb .searchBox button{position:absolute; width:36px; height:36px; top:50%; right:0; margin-top:-18px; background:#222; cursor:pointer;}
	#header .navMobile .navPanel .menuArea .msnb .searchBox button i.ico.search{}

	#header .navMobile .navPanel .menuArea .menuList, #header .navMobile .navPanel .menuArea .menuList ul, #header .navMobile .navPanel .menuArea .menuList ul li, #header .navMobile .navPanel .menuArea .menuList ul li a{display:block; position:relative; line-height:1; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
	#header .navMobile .navPanel .menuArea .menuList{float:none; width:100%; height:auto; margin:0 auto 20px; padding:0; background:#fff; border:none; z-index:0; overflow-y:auto;}
	#header .navMobile .navPanel .menuArea .menuList ul{padding:0; border:1px solid #ddd;}
	#header .navMobile .navPanel .menuArea .menuList ul li{width:100%; margin:0 auto;}
	#header .navMobile .navPanel .menuArea .menuList ul li a{position:relative; cursor:pointer; z-index:2;}
	#header .navMobile .navPanel .menuArea .menuList > ul > li > a{padding:14px 20px; background:#fff; color:#222; font-size:1.25em; outline-offset:-1px;}
	#header .navMobile .navPanel .menuArea .menuList > ul > li > a:focus, #header .navMobile .navPanel .menuArea .menuList > ul > li > a:hover{color:#999;}
	#header .navMobile .navPanel .menuArea .menuList > ul > li.hasSub > a:after{content:''; display:inline-block; width:0; height:0; margin:0 0 3px 6px; border:4px solid transparent; border-top-color:#888; border-bottom:none; transition:.18s; z-index:5;}
	#header .navMobile .navPanel .menuArea .menuList > ul > li.hasSub.open > a{color:#ff8a00;}
	#header .navMobile .navPanel .menuArea .menuList > ul > li.hasSub.open > a:after{border-top:none; border-bottom:4px solid #ff8a00;}
	#header .navMobile .navPanel .menuArea .menuList ul ul{display:none; padding:12px 20px; background:#f7f7f7; border-left:none; border-right:none;}
	#header .navMobile .navPanel .menuArea .menuList ul ul li a{padding:10px 0; color:#222; font-size:1.15em; font-weight:500;}
	#header .navMobile .navPanel .menuArea .menuList ul ul li a:focus, #header .g#header .navMobile .navPanel .menuArea .menuList ul ul li a:hover{color:#222;}
	#header .navMobile .navPanel .menuArea .menuList ul ul > li.hasSub > a:after{content:''; display:inline-block; position:absolute; width:0; height:0; top:50%; right:0; margin-top:-2px; border:4px solid transparent; border-top-color:#888; border-bottom:none; transition:.18s; z-index:5;}
	#header .navMobile .navPanel .menuArea .menuList ul ul > li.hasSub.open > a:after{border-top:none; border-bottom:4px solid #888;}
	#header .navMobile .navPanel .menuArea .menuList ul ul ul{padding:4px 12px; background:#fff; border:1px solid #eee;}
	#header .sitemap button.navOpen, #header .navMobile .navPanel button.navClose{display:block;}
	#header .sitemap button.navOpen{position:absolute; width:20px; height:20px; top:26px; right:20px; margin:0; padding:0; background:transparent; cursor:pointer;}
	#header .sitemap button.navOpen span{display:inline-block; position:absolute; width:20px; height:2px; top:calc(50% - 1px); left:0; margin:0 auto; background:#fff; font-size:0; vertical-align:middle; transition:background .2s;}
	#header .sitemap button.navOpen span:before, #header .sitemap button.navOpen span:after{content:''; display:block; position:absolute; width:20px; height:2px; background:#fff; transition:background .2s;}
	#header .sitemap button.navOpen span:before{top:-7px;}
	#header .sitemap button.navOpen span:after{bottom:-7px;}
	#header .sitemap button.navOpen:focus span, #header .sitemap button.navOpen:hover span,
	#header .sitemap button.navOpen:focus span:before, #header .sitemap button.navOpen:hover span:before,
	#header .sitemap button.navOpen:focus span:after, #header .sitemap button.navOpen:hover span:after{background:#888;}
	#header .navMobile .navPanel button.navClose{position:absolute; width:20px; height:20px; top:20px; right:-20px; margin:0; padding:0; background:transparent; cursor:pointer; transition:right 0.3s ease-in-out;}
	#header .navMobile .navPanel button.navClose span{display:block; position:relative; width:20px; height:2px; margin:0 auto; background:transparent; border-radius:2px; font-size:0; transition:background .2s;}
	#header .navMobile .navPanel button.navClose span:before, #header .navMobile .navPanel button.navClose span:after{content:''; display:block; position:absolute; width:20px; height:2px; background:#fff; transition:background .2s;}
	#header .navMobile .navPanel button.navClose span:before{top:-7px; transform:translate3d(0,7px,0) rotate(45deg);}
	#header .navMobile .navPanel button.navClose span:after{bottom:-7px; transform:translate3d(0,-7px,0) rotate(-45deg);}
	#header .navMobile .navPanel button.navClose:focus span:before, #header .navMobile .navPanel button.navClose:hover span:before,
	#header .navMobile .navPanel button.navClose:focus span:after, #header .navMobile .navPanel button.navClose:hover span:after{background:#888;}
	#header .navMobile .navPanel button.navClose:after{content:''; clear:both; display:block;}
	#header .navMobile .menuBg{position:absolute; width:100%; height:100%; left:0; background:#000; opacity:0; z-index:-1; transition:opacity 0.2s ease-in-out;}
	#header .navMobile .navPanel.open{visibility:inherit; opacity:1; z-index:9;}
	#header .navMobile .navPanel.open .menuArea{right:0; opacity:1; z-index:0;}
	#header .navMobile .navPanel.open button.navClose{right:calc(60% + 20px);}
	#header .navMobile .navPanel.open .menuBg{opacity:0.6;}
	#header .navMobile .navPanel .menuArea .infoBox{float:none; width:100%; margin:0 auto 20px; padding:20px; border:1px solid #ddd;}
	#header .navMobile .navPanel .menuArea .infoBox .cscenter{margin:0 auto 28px;}
	#header .navMobile .navPanel .menuArea .infoBox .bankinfo{margin:0 auto 28px;}
	#header .navMobile .navPanel .menuArea .infoBox .sns{display:block; background-color:#222; text-align:center;}
	#header .navMobile .navPanel .menuArea .infoBox .sns a{display:inline-block; padding:8px; color:#fff; font-size:1.1em;}
	#header .navMobile .navPanel .menuArea .infoBox .sns a i.ico.sns{display:inline-block; margin-right:4px; background-color:transparent; vertical-align:middle;}
	#header .navMobile .navPanel .menuArea .infoBox .sns a span{letter-spacing:-.015em; vertical-align:middle;}

	#footer .area01{padding:28px 0;}
	#footer .area01 p{line-height:1.6;}
	#footer .area01 span{line-height:1.6;}

	#hd_pop, #hd_wrapper, #tnb ul, #gnb .gnb_wrap, #container_wr, #ft_wr{width:100%;}
	.hd_pops{width:100%; max-width:550px; top:68px !important; left:50% !important; margin-left:-275px;}
	.hd_pops img{width:100% !important;}
	.hd_pops_con{width:100% !important; height:auto !important;}
}

@media all and (max-width:768px){
	.chk_pc{display:none;}
	#header .navMobile .navPanel .menuArea{width:88%;}
	#header .navMobile .navPanel .menuArea .inner{min-width:auto;}
	#header .navMobile .navPanel.open button.navClose{right:calc(88% + 8px);}

	#footer .inner{width:100%;}
	#footer .area01 .company{float:none; width:100%;}
	#footer .area01 .addproduct{float:none; width:100%; text-align:right;}

	#quick{width:32px; top:auto; bottom:10px; right:10px; transform:translateY(0);}
	#quick .links{display:none;}
	#quick .btn_top{width:32px; height:32px; line-height:30px;}
	#quick .btn_bottom{width:32px; height:32px; line-height:30px;}

	.hd_pops{width:100%; max-width:70%; top:68px !important; left:50% !important; margin-left:-35%;}
	.hd_pops_footer button{font-size:.813rem;}
}

@media all and (max-width:480px){
	#header .gnb .navPanel .menuArea{min-width:90%; max-width:320px;}

	.hd_pops{max-width:90%; margin-left:-45%;}
	.hd_pops_footer button{font-size:.775rem;}
}

@media all and (max-width:319px){
	html{zoom:0.9;}
}

/* ie hack */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) and (max-width:768px){
}