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, font, 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 { background: transparent; border: 0; margin: 0; padding: 0; vertical-align: middle; }
div { vertical-align: top; }
body { margin: 0; font-family: 'Noto Sans Kr', sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; color: #777; text-align: left; background-color: #fff; box-sizing: border-box; min-width: 1200px; }
section { box-sizing: border-box; }
span, a { display: inline-block; }
select, textarea, input[type="text"], input[type="password"], input[type="number"], input[type="file"] { color: #777; border: 1px solid #ddd; padding: 0 10px; line-height: 40px; min-height: 42px; vertical-align: middle; box-sizing: border-box }
input[type="text"]:focus, input[type="password"]:focus { border-color: #e7380c; }
select { padding: 0 0 0 10px; height: 40px; line-height: 40px; min-width: 120px; }
select option { line-height: 22px; }
a { text-decoration: none; color: inherit; cursor: pointer; }
a:hover, a:focus { color: #e7380c; text-decoration: none; }
a.material-icons:hover { }
em{font-style:normal;}
ul { list-style: none; }
li { display: block; }
li div { vertical-align: middle; }
button { -webkit-transform: all 0.3s ease-in; -moz-transform: all 0.3s ease-in; -ms-transform: all 0.3s ease-in; transition: all .3s ease-in; }
:focus { outline: none; }
.borderSolid { border: 1px solid #eaeaea; }
.borderNone { border: none; }
.borderLeft { border-left: 1px solid #eaeaea; }
.borderR3 { border-radius: 3px; }


.lines { height: 3px; margin-top: -8px; width: 100%; }
.lines .line1.center { position: absolute; left: 50%; width: 60px; height: 3px; background-color: #e7380c; margin-left: -30px; margin-top: -1.5px; }
.lines .line1.left { width: 60px; height: 3px; background-color: #e7380c; margin-top: -1.5px; }
.lines .line2 { width: 100%; height: 1px; background-color: #f8f8f8; margin-top: -0.5px; }
.lines .line2.grayback { width: 100%; height: 1px; background-color: #f3f3f3; margin-top: -0.5px; }
#layout-wrapper { position: relative; }
#footer { background-color: #1a1a1a; color: #666; }
#footer .logo { height: 36px; }
#footer h2 { color: #999; }
#footer i { font-size: 20px; margin-right: 8px; margin-top: -2px; color: #777; line-height: 1.8; }
#footer .W333 { margin: 0; }
#footer p, #footer a { line-height: 34px; vertical-align: top; }
#footer span { line-height: 22px; }
#scrollTopBtn { position: fixed; right: 25px; bottom: 40px; width: 40px; height: 40px; line-height: 36px; border-radius: 3px; background-color: #e7380c; color: #fff; text-align: center; }
#topImg { position: relative; margin: 0; height: 100vh; background-image: url('../Images/homeImg/bg_top_1.jpg'); background-size: cover; }
.vjs { opacity: 0; }
.vjs.bind { opacity: 1; }

.bgpopup { }
.popup { position: absolute; left: 10px; top: 100px; width: 400px; background: #eaeaea; margin-top: 40px; box-shadow: 0 0 5px 0 rgba(0,0,0,0.2); z-index: 888; }
.popup.step2 { left: 420px; }
.popup.step3 { left: 840px; }
.popup .head { display: none; }
.popup .close { position: absolute; width: 30px; height: 30px; right: 10px; top: 10px; z-index: 2; }
.popup .close .material-icons { color: #fff; text-shadow: 0 2px #000; }
.popup .banner { position: relative; width: 100%; height: calc((400px - 20px) + (400px - 90px ) * 0.7); background: #eaeaea url('') no-repeat center center; background-size: contain; z-index: 1; }
.popup .expire { position: relative; background: #fff; padding: 10px 0; height: 44px; }
.popup .expire .brcheck { left: 10px; top: 0; width: 100%; font-size: 14px; line-height: 22px; background: transparent; }
.popup .expire .brcheck .checkmark { border: 1px solid #000; }

/*--------------------------------------------------*/
/*레이아웃*/

.disInlineBlock { display: inline-block; }
.disBlock { display: block; }
.disFlex { display: flex; }
.flexAlign { justify-content: center; align-items: center; }
.floatRight { float: right !important; text-align: right; }
.floatRight::after { content: ''; display: block; clear: both; }
.padding0 { padding: 0 !important; }
.padding15 { padding: 0 15px; }
.padding15_0 { padding: 15px 0; }

.titleP_XL { padding: 120px 0; }
.titleP_L { padding: 70px 0; }
.titleP_M { padding: 50px 0; }
.titlePT_M { padding-top: 50px; }
.titlePB_M { padding-bottom: 50px; }
.titleP_S { padding: 30px 0; }

.mAuto { margin: auto !important; }
.headMb { margin-bottom: 50px; }
.smallMb { margin-bottom: 20px; }

.leftM { margin-left: 30px; }
.rightM { margin-right: 30px; }
.SLeftM { margin-left: 10px; }
.SRightM { margin-right: 10px; }
.STopM { margin-top: 10px; }
.rcontent { position: absolute; right: 0; top: 0; }
.lcontent { position: absolute; left: 0; top: 0; }

.topM70 { margin-top: -70px; }
.leftM4 { margin-left: -4px; }
.M15 { margin: 0 -15px; }
.M10 { margin: 0 -10px; }

.W25 { width: 25%; box-sizing: border-box; padding: 0 8px; margin-left: -4px; }
.W25:first-child { margin-left: 1px; }
.W333 { width: 33.33333%; padding: 0 15px; box-sizing: border-box; margin-left: -4px; }
.W333:first-child { margin-left: 1px; }
.W50:first-child { margin-left: 0; }
.W50 { width: 50%; padding: 0 15px; box-sizing: border-box; margin-left: -4px; }
.W50:first-child { padding-left: 0; margin-left: 0; }
.W50:last-child { padding-right: 0; }
.W666 { width: 66.66666%; padding: 0 15px; box-sizing: border-box; margin-left: -4px; }
.W100 { width: 100%; }

.container { width: 1200px; height: 100%; margin: 0 auto; padding: 0 15px; box-sizing: border-box; min-width: 1200px; }
.container.leftmenu { padding-left: 200px; }
.inner { width: 100%; box-sizing: border-box; }

.siteContent { width: 100%; display: inline-block; }
.sidebar { width: 25%; float: right; display: inline-block; margin-top: 10px; display: none; }
.sidebar::after { content: ''; display: block; clear: both; }

/*--------------------------------------------------*/
/*타이포*/
.fontEn { font-family: 'Noto Sans', sans-serif !important; }
.material-icons { font-family: 'Material Icons'; font-weight: normal; font-style: normal; }

h1, h2, h3, h4, h5, h6 { font-weight: 500; line-height: 1.5; color: #4b4b4b; }

h1 { font-size: 26px; line-height: 100%; }
h2 { font-size: 20px; font-weight: 500; margin-bottom: 20px; }
h3 { font-size: 18px; font-weight: 500; margin-bottom: 12px; }

.font_XS { font-size: 14px; }
.font_S { font-size: 16px; }
.font_M { font-size: 20px; }
.font_L { font-size: 26px; }
.font_XL { font-size: 40px; }
.font_XXL { font-size: 70px; }

.font200 { font-weight: 200; }
.font400 { font-weight: 400; }
.font500 { font-weight: 500; }
.font700 { font-weight: 700; line-height: 1.6; }

.textCenter { text-align: center; }
.textRight { text-align: right; }

/*--------------------------------------------------*/
/*컬러*/

:root { --red: #e7380c; }

.textWhite { color: #fff; }
.textRed { color: #e7380c !important; }
.textBlue { color: dodgerblue !important; }
.textLGray { color: #ddd; }
.textGray { color: #999; }
.textDGray { color: #4b4b4b; }
.bgGray { background-color: #ddd; }
.bgLGray { background-color: #f0f0f0; }

/*--------------------------------------------------*/
/*버튼*/
.btnlist { margin-top: 50px; }
.stdbtn { height: 30px; line-height: 28px; border: 1px solid #ccc; color: #999; background: #fff; font-size: 14px; padding: 0 15px; }
.midbtn { font-size: 16px; color: #999; line-height: 40px; padding: 0 20px; border: 1px solid #999; background: #fff; }
.bigbtn { height: 44px; line-height: 42px; border: 1px solid #ccc; padding: 0 30px; font-size: 16px; color: #fff; font-weight: 500; }
.grayBtn { background: #888; border-color: #888; color: #fff; }
.redBtn { background: #e7380c; border-color: #e7380c; color: #fff; }
.blueBtn { background: #3281f2f2; border-color: #3281f2; color: #fff; }
.blackBtn { background: #000; border-color: #000; color: #fff; }
.clickcnt { width: 28px; height: 28px; text-align: center; background: #fff; border: 1px solid #444; padding: 0; }
.clickcnt .material-icons { margin: 0; color: #444; min-width: 10px; }
.clickcnt:hover .material-icons { color: #e7380c; }

.btn { height: 50px; font-family: 'Noto Sans Kr', sans-serif; font-size: 14px; font-weight: 500; display: inline-block; padding: 10px 30px; background-color: #e7380c; color: #fff; border: 1px solid #e7380c; border-width: 1px; border-radius: 2px; vertical-align: middle; line-height: 100%; transition: all ease .238s; cursor: pointer; }
.btn.Mbtn { height: 42px; padding: 10px 20px; }
.btn.white { background-color: #fff; border-color: #fff; color: #4b4b4b; }
.btn.border { background-color: #fff; border-color: #eaeaea; color: #777; font-weight: 400; }
.btn:hover { background-color: #4b4b4b; color: #fff; border-color: #4b4b4b; }

.btn.slider { width: 30px; height: 30px; display: inline-block; padding: 0; text-align: center; background: none; border: 2px solid #999; color: #999; cursor: default; }
.btn.slider.active { border: 2px solid #e7380c; color: #e7380c; cursor: pointer; }
.btn.slider.active:hover { background-color: #4b4b4b; color: #fff; border-color: #4b4b4b; }
.btn.slider i { font-size: 18px; line-height: 30px; }

.bbtn { height: 44px; line-height: 42px; border: 1px solid #ccc; padding: 0 30px; font-size: 16px; color: #fff; font-weight: 500; }
.grayBtn { background: #888; border-color: #888; color: #fff; }
.redBtn { background: #e7380c; border-color: #e7380c; color: #fff; }
.blueBtn { background: #3281f2f2; border-color: #3281f2; color: #fff; }
.blackBtn { background: #000; border-color: #000; color: #fff; }
.actionbtn { background: #fff; color: #aaa; border-color: #dedede; line-height: 30px; height: 32px; padding: 0 15px; font-size: 14px; }
.actionbtn:hover { border-color: #000; color: #000; }

.searchbox { margin-bottom: 20px; padding-bottom: 15px; background: #f3f3f3; padding: 10px; }
.searchbox, .searchbox input[type=text], .searchbox select, .searchbox button { line-height: 30px; min-height: 32px; vertical-align: top; }
.searchbox select { height: 30px; }
.searchbox button:not(.actionbtn) { height: 32px; min-height: 30px; line-height: 30px; padding: 0 15px; background: #000; border: 1px solid #000; color: #fff; }
.searchbox .rcontent { top: 10px; right: 10px; }

.sliderBtn { position: relative; float: right; }

.dealTabs { background-color: #fff; border-bottom: 1px solid #eaeaea; }
.dealTabs li { display: inline-block; width: 150px; height: 50px; line-height: 50px; text-align: center; vertical-align: middle; box-sizing: border-box; cursor: pointer; font-size: 18px; }
.dealTabs li:hover { color: #e7380c; }
.dealTabs li.active { position: relative; top: 1px; border: 1px solid #eaeaea; border-bottom: 1px solid #fff; color: #4b4b4b; cursor: default; font-weight: 500; }

.navbar-header { position: absolute; left: 0; top: 0; width: 100%; height: 124px; margin: 0; padding: 0; z-index: 999; }
.topbar .line1 { width: 100%; height: 44px; background-color: #e7380c; color: #fff; }
.topbar .line1 .inner { padding: 10px 0; width: 100%; height: 100%; box-sizing: border-box }
.topbar .line1 a span { vertical-align: -1px; }
.topbar .line1 a:hover, .topbar .line1 a:focus { color: #f0f0f0; text-decoration: none; }
.topbar .line2 { width: 100%; height: 80px; background-color: #fff; color: #000; font-weight: 500; }
.topbar .line2.fixed { position: fixed; left: 0; top: 0; opacity: 0.9; z-index: 9; border-bottom: 1px solid #ddd; }
.topbar .line2 .inner { padding: 25px 0; width: 100%; height: 100%; }
.topbar.main { position: absolute; left: 0; top: 0; width: 100%; height: 124px; margin: 0; padding: 0; z-index: 999; }
.topbar.main .line1 { background-color: rgba(0,0,0,0.2); border-bottom: 1px solid rgba(180,180,180,0.2); }
.topbar.main .line2 { background-color: rgba(0,0,0,0.2); color: #fff; }
.topbar.main .line2.fixed { background-color: #000; border-bottom-color: #000; }

.topBarText { text-align: right; font-size: 18px; line-height: 20px; }
.topBarText i { padding: 0 6px; line-height: 20px; }
.topBarText i:last-child { padding-right: 0; }

.logo { display: inline-block; height: 30px; }
.topBarText > ul > li:first-child { padding-left: 0; }
.topBarText > ul > li { float: left; padding: 0 18px; width: auto; line-height: 20px; vertical-align: top; }

.Siconset i { line-height: 16px; font-size: 16px; padding: 4px; }
.cartalarm { position: absolute; right: -4px; top: -10px; background: #e7380c; color: #fff; width: 20px; height: 20px; border-radius: 50%; font-size: 10px; text-align: center; }
.Liconset { text-align: center; font-size: 18px; color: #fff; }
.Liconset div { padding: 30px 0; }
.Liconset span { width: 100px; height: 100px; background-color: #e7380c; color: #fff; text-align: center; line-height: 70px; border-radius: 50%; }
.Liconset span .material-icons { font-size: 38px; padding-top: 20px; }

.aligncenter { text-align: center; }
.alignright { text-align: right; }


.topImgUnder { padding: 15px 0; background-color: #e7380c; }
.topImgUnder h2 { margin-bottom: 0; line-height: 50px; }

.imgBox { width: 100%; overflow: hidden; }
.imgBox .textBox { padding-top: 24px; }
.img370:first-child { margin-left: 0; }
.img370:last-child { margin-right: 0; }
.img370 { width: 370px; margin-left: -4px; }

.toggleTitle { cursor: pointer; font-size: 17px; font-weight: 400; padding: 13px 18px 13px 18px; background-color: #f8f8f8; margin-bottom: 10px; line-height: 100%; }

.TextBox .inner { padding: 20px 30px; margin-bottom: 40px; }
.partners a { display: inline-block; width: 218px; height: 110px; background: #fff url('') center center no-repeat; background-size: 60% auto; opacity: 0.5; border: 1px solid #999; margin: 0 12px 16px 0; }
.partners a:hover { opacity: 1; }
.tagbox { position: relative; padding-right: 0; min-height: 190px; }
.tagbox .selector { width: 30px; height: 30px; cursor: pointer; margin-left: 10px; }
.tagbox .selector .material-icons { color: #999; font-size: 28px; }
.tagbox .selector.current .material-icons { color: #e7380c }
.tagbox .workkey > * { vertical-align: top; }

.tags { margin: 10px 0 30px 0; }
.tags span { background: #888; color: #fff; font-size: 14px; border-radius: 20px; line-height: 30px; padding: 0 15px; cursor: pointer; margin: 0 8px 8px 0; }
.tags span.fixtag { background: #F09C00; color: #fff; }
.tags span:before { content: "#"; }
.tags.smalltag span { font-size: 14px; border-radius: 4px; margin-right: 4px; line-height: 26px; margin: 0 6px 6px 0; padding: 0 8px; background: #f0f0f0; }
.tags span:hover, .tags span.on { background: #E7380C; color: #fff; }
.tags span.best {/*border:1px solid #e7380c !important;*/ color:#e7380c !important;}

.bestlayer {height:10px;}
.bestlayer span.best  {font-size:10px/*; background:#e7380c; */; color:#fff; padding:0 4px; border-radius:3px;  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); background-size: 400% 400%; animation: gradient 2s ease infinite;}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}


.workkey { position: relative; margin: 0 auto 20px auto; text-align: center; width: 460px; }
.workkey input { border: 3px solid #E7380C; width: 460px; font-size: 16px; padding: 0 80px 0 20px; color: #E7380C; }
.workkey input::placeholder { color: #E7380C; display: inline-block; opacity: 0.9; }
.workkey button { position: absolute; right: 0; top: 0; line-height: 42px; height: 44px; font-size: 16px; padding: 0 15px; background: transparent; border: 0; }
.workkey button .material-icons { font-size: 28px; color: #E7380C; }
.orderform { padding: 0; font-size: 16px; }
.orderinfo { font-size: 16px; line-height: 20px; }
.orderinfo span { display: block; color: #000; }
.orderinfo label.title { color: #999; margin: 15px 0 4px 0; font-size: 14px; display: block; }
.orderinfo input[type=text] { width: 100%; margin-top: 3px; }
.widget li { position: relative; width: 214px; height: 100px; padding: 15px; background: #fff; box-shadow: 0px 0px 4px 0px rgba(82, 63, 105, 0.1); margin: 0 11px 10px 0; display: inline-block; }
.widget li:before { content: ""; position: absolute; top: 14px; bottom: 4px; left: 0; right: auto; height: 24px; border-left: 5px solid #e7380c; border-bottom: 0; margin-left: -0px; }
.widget li:last-child { float: right; margin-right: 0; }
.widget li .title { color: #999; }
.widget li .amount { font-size: 18px; color: #000; font-weight: bold; position: absolute; bottom: 15px; right: 15px; }

.partners img { width: 183px; height: 132px; border: 1px solid #eaeaea; box-sizing: border-box; }
ul.list { min-height: 500px; }
.listBar { position: relative; border-bottom: 1px solid #dedede; font-size: 16px; padding: 10px 0; min-height: 60px; }
.listBar span { display: inline-block; margin-left: 30px; line-height: 40px; min-width: 100px; vertical-align: middle; }
.listBar .bg_thumb { width: 50px; height: 50px; background: #f0f0f0; min-width: inherit; min-width: initial; }
.listBar .thumb { width: 100%; height: 100%; background: url('/Common/images/demo03.jpg') no-repeat; background-size: cover; min-width: inherit; min-width: initial; }
.listBar.th { background: #f4f4f4; color: #fff; padding: 0 5px; border-bottom: 0; min-height: 20px; line-height: 20px; }
.listBar.th span { color: #fff; line-height: 20px; }
.listBar.th label { display: inline-block; line-height: 22px; padding: 0 8px; border-radius: 38px; color: #444; text-align: center; min-width: 50px; font-size: 12px; }
.listBar.th .rcontent { top: 0; }
.listBar span:first-child, .listBar.th span:first-child { margin-left: 0; }
.listBar .boxmsg { font-size: 14px; line-height: 28px; border: 1px solid #000; background: #000; color: #fff; min-width: 70px; text-align: center; border-radius: 3px; vertical-align: 2px; text-align: center; }
.listBar .boxmsg.red { background: #e7380c; border-color: #e7380c; }
.listBar .rcontent { top: 0; right: 10px; margin: 0; }
.listBar:not(.th) .rcontent { top: 10px; right: 5px; }
.listBar .rcontent button { margin-top: 6px; }
.listBar .rcontent i.material-icons { font-size: 24px; }
.listBar .date, .listBar .pcode, .listBar .email { font-size: 14px; }
.listBar .pcode { font-size: 14px; }
.listBar .optnm { margin-left: 5px; color: #999; padding: 0; }

.cartbar { position: relative; font-size: 16px; line-height: 20px; padding: 10px 0; border-bottom: 1px solid #ddd; }
.cartbar.th { line-height: 20px; font-size: 14px; border-bottom: 0; padding: 0; background: #f4f4f4; }
.cartbar.th label { display: inline-block; line-height: 22px; padding: 0 2px; border-radius: 0; color: #000; text-align: center; min-width: 10px; font-size: 12px; background: #f4f4f4; font-weight: normal; }
.cartbar span { margin-right: 15px; min-width: 80px; }
.cartbar .bgthumb { width: 50px; height: 50px; min-width: 50px; margin-right: 10px; }
.cartbar .title { color: #000; font-size: 16px; width: 520px; margin-right: 25px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}
.cartbar .amount, .cartbar .total { text-align: right; }
.cartbar .total { font-weight: 500; color: #000; }
.cartbar .cnt { text-align: center; min-width: 137px; }
.cartbar input { width: 50px; line-height: 28px; height: 28px; min-height: 28px; border-color: #444; }
.cartbar .delete { float: right; width: 40px; margin-top: 12px; margin-right: 10px; text-align: right; }
.cartbar .delete .material-icons { color: red; font-size: 20px; cursor: pointer; }
.cartbar .bitbox { font-size: 10px; background: #f4f4f4; margin-right: 2px; line-height: 18px; padding: 0 5px; display: inline-block; text-align: center; vertical-align: 1px; }
.cartbar .rcontent.flex { top: inherit; top: initial; bottom: 10px; margin: 0; }
.cartbar .rcontent.flex span { font-size: 14px; min-width: 60px; text-align: right; }
.cartbottom { position: relative; }
.payment { position: absolute; right: 0; bottom: 24px; width: 200px; }
.payment .coupon { font-size: 14px; }
.payment .coupon input { width: 100%; padding: 0 10px; }
.payment .couponapply { background: #000; color: #fff; margin-top: 5px; padding: 5px 10px; font-size: 12px; }
.payment .couponapply li { position: relative; line-height: 24px; padding-right: 20px; }
.payment .couponapply li .material-icons { font-size: 16px; }
.payment button { background: #E7380C; color: #fff; line-height: 44px; font-size: 18px; text-align: center; padding: 0 40px; border: 0; margin-top: 5px; width: 100%; cursor: pointer; }

.setbanner { position: relative; background: #f3f3f3; padding: 0 200px 0 30px; }
.setbanner ul, .setbanner a { display: inline-block; }
.setbanner .title { font-size: 18px; font-weight: 500; color: #000; line-height: 40px; padding: 10px 0; }
.setbanner .proditem, .setbanner .priceitem { display: inline-block; width: 180px; margin-right: 50px; height: 200px; position: relative; }
.setbanner .proditem:last-child { margin-right: 0; }
.setbanner .proditem:last-child .plusicon { display: none; }
.setbanner .proditem .bgthumb { width: 100%; height: 120px; }
.setbanner .proditem .desc { position: relative; padding-bottom: 24px; }
.setbanner .proditem .prodnm { font-size: 14px; color: #000; font-weight: 500; margin: 12px 0 2px 0; max-height: 36px; overflow: hidden; line-height: 18px; }
.setbanner .proditem .count { position: absolute; width: 100%; bottom: 0; color: #E7380C; }
.setbanner .proditem .plusicon { position: absolute; right: -46px; top: 35px; }
.setbanner .proditem .plusicon .material-icons { color: #999; font-size: 40px; }
.setbanner .proditem a { width: 100%; display: block; }
.setbanner .priceitem { position: absolute; top: 82px; right: 0; font-size: 18px; font-weight: bold; margin: 0; }
.setbanner .priceitem .norprice { text-decoration: line-through; font-size: 14px; }
.setbanner .priceitem .norprice .salemsg { background: #e7380c; color: #fff; font-size: 12px; line-height: 22px; padding: 0 8px; font-weight: normal; border-radius: 4px; vertical-align: 2px; margin-right: 2px; }
.setbanner .priceitem .saleprice { color: #E7380C; }

.tabmenu { text-align: center; }
.tabmenu li { line-height: 20px; font-size: 18px; display: inline-block; margin-bottom: 10px; color: #000; padding: 0 10px; margin-right: 10px; border-right: 1px solid #dedede; margin: 20px 0; }
.tabmenu li:last-child { border: 0; }
.tabmenu li.current { font-weight: 500; color: #e7380c; }

.c_history { position: relative; padding: 30px 0 30px 300px; text-align: right; }
.c_history .inner { position: relative; }
.c_history li { display: inline-block; width: 110px; height: 110px; font-size: 18px; line-height: 20px; border: 1px solid #fff; border-radius: 50%; text-align: center; padding-top: 30px; margin-left: -12px; }

.adbox { padding: 30px 0; }
.bgwhite { background: #fff; }
.bglgray { background: #f8f8f8; }

.bgthumb { position: relative; display: inline-block; background: #fff url('/Common/images/thumblogo.png') center center no-repeat; background-size: 40%; border: 1px solid #ddd; }
.thumb { position: relative; width: 100%; height: 100%; background: url('') center center no-repeat; background-size: 90% auto; cursor: pointer; min-width: 10px !important; }
.thumb.vertical { background-color: #fff; background-size: auto 90%; }
.thumb img, .smallThumb img { width: 100%; }
.smallThumb { display: inline-block; width: 65px; height: 65px; background-color: #f8f8f8; margin: 0 15px 0 0; border: 1px solid #eaeaea; }
.products { margin: 0; clear: both; }
.products li { display: inline-block; margin: 0 19px 20px 0; }
.products li:nth-child(4n) { float: right; margin-right: 0; }
.prodbar { width: 276px; height: 400px; display: inline-block; }
.prodbar .bgthumb { width: 100%; height: 184px; background-size: 30%; }
.prodbar .desc { position: relative; padding-bottom: 40px; min-height: 144px; }
.prodbar .prodnm { font-size: 16px; color: #000; font-weight: 500; margin: 14px 0 2px 0; max-height: 46px; overflow: hidden; line-height: 22px; letter-spacing: -1px; }
.prodbar .optnm { font-size: 14px; color: #999; padding: 0; line-height: 18px; }
.prodbar .optnm .dsale { margin-left: 5px; border-left: 1px solid #dedede; padding-left: 5px; }
.prodbar .price { position: absolute; left: 0; bottom: 0; font-size: 20px; color: #e7380c; font-weight: bold; line-height: 32px; }
.prodbar .price .salemsg { margin-left: 5px; background: #e7380c; color: #fff; font-size: 12px; line-height: 22px; padding: 0 5px; font-weight: normal; border-radius: 4px; vertical-align: 2px; }
.prodbar .btnset { position: absolute; right: 0; bottom: 0; }
.prodbar .btnset button .material-icons { color: #aaa; font-size: 20px; margin: 0; }
.prodbar .btnset button { border-color: #eee; text-align: center; }
.prodbar .btnset button:hover { border-color: #e7380c; }
.prodbar .btnset button:hover .material-icons { color: #e7380c; }
.prodbar .tags { min-height: 10px; margin: 10px 0 5px 0; height: 24px; overflow: hidden; }
.prodbar .tags span { font-size: 12px; background: #f9f9f9; color: #aaa; border-radius: 4px; line-height: 20px; padding: 0 5px; margin: 0 4px 4px 0; }
.prodbar .tags span:hover { background: #999; color: #fff; }
.prodbar .tags span:before { content: "#"; }
.products.main .prodbar { height: 340px; }
.products.main .desc { position: relative; padding-bottom: 40px; min-height: 104px; }
.products.main .bgthumb { border-color: #ddd; }
.products.main .prodbar .prodnm { color: #000; }
.products.main .prodbar .tags, .products.main .prodbar .btnset { display: none; }
.products.main .prodbar .tags span { background: transparent; color: #999; padding: 0; }
.products.main .prodbar .btnset button { background: transparent; border-color: #666; }
.products.main .prodbar .btnset button:hover { border-color: #e7380c; }

.categorysw .container { width: 1170px; box-shadow: 0px 0px 4px 0px rgba(82, 63, 105, 0.35); min-width: 1170px; box-sizing: padding-box; background: #e7380c; padding: 0; }
.categorysw .swiper-button-next, .categorysw .swiper-container-rtl, .categorysw .swiper-button-prev { box-shadow: none; top: 16px; width: 20px; height: 24px; border: 1px solid #ddd; border: 0; }
.categorysw .swiper-button-prev:after, .categorysw .swiper-button-next:after { color: #e7380c; font-size: 10px; font-weight: bold; }
.categorysw { position: absolute; bottom: -26px; }
.categorysw .shade { position: relative; z-index: 2; }
.categorysw .swiper-container { overflow: hidden; position: relative; z-index: 1; }
.categorysw .shade .curtain { position: absolute; width: calc(50% - 585px); height: 100px; background: #f8f8f8; }
.categorysw .shade .curtain.r { right: 0; }
.categorysw .shade .curtain.bottom { width: 100%; height: 14px; background: #fff; }

.cat { margin: 0 auto; }
.cat span.fixtag { position: relative; height: 54px; line-height: 54px; color: #fff; font-size: 16px; font-weight: 500; letter-spacing: -1px; text-align: center; padding: 0 15px; cursor: pointer; display: inline-block; background: #e7380c; overflow: hidden; border: 0px solid #e7380c; }
.cat span .material-icons { position: absolute; left: 40px; top: -20px; font-size: 0px; color: #AD2B0A; opacity: 0; z-index: 0; }
.cat span .count { position: absolute; right: 10px; color: #999; font-size: 11px; font-family: Verdana; opacity: 0.5; display: none; }
.cat span:hover { color: #FFDA2B; -webkit-transform: all 0.3s ease-in; -moz-transform: all 0.2s ease-in; -ms-transform: all 0.2s ease-in; transition: all .2s ease-in; background-color: #CC310B; border-color: #CC310B; }
.cat span:hover .material-icons { color: #999; }

.listBar.seloption { padding: 5px 80px 5px 0; min-height: 30px; -webkit-transition: .2s; transition: .2s; text-align: left; }
.listBar.seloption span { min-width: 20px; margin-left: 10px; }
.listBar.seloption .clickcnt, .addoption .listBar .rcontent input[type=text] { line-height: 34px; height: 34px !important; vertical-align: top; margin: 0; border-color: #999; }
.listBar.seloption .clickcnt .material-icons { line-height: 34px !important; margin: 0; vertical-align: top; }
.listBar.seloption.on > *, .listBar.seloption.on input[type=text] { color: #e7380c; }

.dealbox { position: relative; padding: 15px 0 80px 530px; min-height: 400px; }
.dealbox .bgthumb { position: absolute; left: 0; top: 0; width: 500px; height: 400px; }
.dealbox .prodcd { font-size: 14px; line-height: 20px; margin-bottom: 4px; color: #000; }
.dealbox .prodnm { font-size: 26px; font-weight: bold; color: #000; line-height: 28px; }
.dealbox .optnm { font-size: 16px; color: #999; margin-top: 5px; }
.dealbox .price { font-size: 22px; color: #E7380C; font-weight: 500; margin-top: 40px; }
.dealbox .price .salemsg { background: #E7380C; color: #fff; font-size: 14px; line-height: 22px; padding: 0 15px; margin-right: 10px; vertical-align: -1px; }
.dealbox .orderbtn { position: relative; margin-top: 60px; max-width: 550px;}
.dealbox .orderbtn > * { vertical-align: top; }
.dealbox .optselect { margin-bottom: 5px; }
.dealbox .optselect select { border-color: #444; font-size: 16px; padding: 0 0 0 10px; color: #000; }
.dealbox .tags span { color: #999; }
.dealbox .tags span:hover { color: #fff; }
.dealbox .addoption { position: relative; position: relative; min-width: 422px; max-width: 528px; min-height: 28px; margin:0 0 10px; }
.dealbox .addoption > * { vertical-align: middle; }
.dealbox .addoption  .rcontent{top:50%; transform:translateY(-50%);}
.dealbox .addoption  .rcontent .selcprice{min-width:112px; font-size:14px; text-align:right;}
.dealbox .addoption .delete .material-icons { font-size: 18px; color: #999; vertical-align: -4px; cursor: pointer; }
.dealbox .addoption .delete:hover .material-icons { color: #e7380c; }
.dealbox .delivery { font-size: 14px; color: #444; font-weight: normal; margin-left: 15px; border-left: 1px solid #444; padding-left: 15px; line-height: 14px; }
.dealbox .totlaprice{margin:0 -15px -10px; padding:10px; background:#fff; border-top:1px solid #ddd; overflow:hidden;}
.dealbox .totlaprice span{float:left; width:20%; line-height:32px; font-size:16px;}
.dealbox .totlaprice p{float:right; width:80%; font-size:22px; text-align:right; font-weight:bold; color:#222; line-height:28px;}
.dealbox .totlaprice p em{padding:0 10px 0 0; vertical-align:0; font-size:14px; color:#777; font-weight:normal;}
.deliyday{display:block; color:#777; line-height:20px; font-size:12px;}

.recentview { position: fixed; right: 0; top: 250px; bottom: 0; width: 120px; height: 580px; background: #fff; padding: 0 20px 20px 20px; z-index: 8; text-align: center; box-shadow: 0px 0px 13px 0px rgba(82, 63, 105, 0.15); }
.recentview .title { background: #E7380C; color: #fff; font-size: 12px; line-height: 24px; text-align: center; margin-bottom: 15px; }
.recentview li { margin-bottom: 15px; }
.recentview .bgthumb { width: 80px; height: 80px; }
.recentview .goshow { margin-left: -67px; width: 50px; height: 80px; background: #E7380C; border: 1px solid #E7380C; padding: 25px 5px; cursor: pointer; box-shadow: 0px 0px 13px 0px rgba(82, 63, 105, 0.15); opacity: 0.9; display: none; }
.recentview .goshow .material-icons { color: #fff; }
.recentview .goshow:hover { opacity: 1; }
.recentview .gohide { margin: 10px -64px 20px 0; display: inline-block; }
.recentview .gohide .material-icons { font-size: 20px; font-weight: 200; color: #aaa; padding: 2px; cursor: pointer; }
.recentview .gohide .material-icons:hover { color: #E7380C; }
.recentview.closed { right: -120px; box-shadow: none; }
.recentview.closed .goshow { display: block; }

.confirmmsg { position: relative; font-size: 20px; font-weight: bold; color: #fff; background: #E7380C; padding: 20px; margin: 0 0 25px 0; }
.confirmmsg .contact { position: absolute; right: 16px; top: 22px; font-size: 16px; font-weight: normal; }
.pageNumbers { width: 40px; height: 40px; line-height: 40px; margin-right: 10px; background: #eaeaea; text-align: center; }
.pageNumbers:hover { background-color: #4b4b4b; color: #fff; }
.pageNumbers.active { background-color: #e7380c; color: #fff; }
.pageNumbers:last-child { margin-right: 0; }
.pageNumbers i { margin-top: -4px; }

.priceSlider { width: 100%; height: 7px; background-color: #eaeaea; margin-bottom: 25px; }

#leftCart li { border-bottom: 1px solid #eaeaea; padding: 15px 0; }
#leftCart li:first-child { padding-top: 0; }
#leftCart li:last-child { border-bottom: none; }

.panel { border-bottom: 1px solid #eaeaea; margin-bottom: 30px; box-shadow: none; font-size: 16px; line-height: 20px; }
#panel1 { display: block; min-height: 350px; }
#panel2 { display: none; min-height: 350px; }
.panel table { width: 100%; text-align: center; line-height: 40px; border-width: 1px; border-collapse: collapse; margin: 30px 0; }
.panel table tr { border-bottom: 1px solid #fff; }
.panel table tr th { background-color: #e7380c; color: #fff; }
.panel table tr td:first-child { background-color: #ddd; }


.articles { position: relative; padding-right: 280px; }
.articles a:hover, .articles a:focus { color: inherit; }
.articles.left { padding: 0; padding-left: 270px; }
li .articlebar { margin-bottom: 40px; border-top: 1px solid #dedede; padding-top: 20px; }
li:first-child .articlebar { border-top: 0; padding-top: 0; }
.articlebar .bgthumb { width: 100%; height: 350px; background: #fff url('/Common/images/thumblogo.png') center center no-repeat; background-size: 15% auto; border: 0; }
.articlebar .thumb { width: 100%; height: 100%; background-size: cover; }
.articlebar .title { font-size: 22px; color: #000; line-height: 26px; margin: 14px 0; text-align: justify; }
.articlebar .byline { color: #999; padding: 0 0 5px 0; font-size: 12px; margin: 5px 0; }
.articlebar .desc { padding: 10px 0; color: #999; font-size: 16px; text-align: justify; min-height: 130px; max-height: 200px; overflow: hidden; margin-bottom: 15px; vertical-align: top; }
.articlebar button { background: #E7380C; color: #fff; line-height: 30px; border: 0; font-size: 16px; padding: 0 15px; }

.lefgnb { position: absolute; right: 0; top: 0; width: 250px; }
.lefgnb .menubar { position: relative; line-height: 40px; border-bottom: 1px solid #eee; font-size: 16px; }
.lefgnb .menubar .cnt { position: absolute; right: 0; color: #E7380C; font-size: 12px; }

.lefgnb.left { right: initial; left: 0; background: #fff; padding: 0; }
.lefgnb.left ul { padding-top: 23px; }
.lefgnb.left .menubar { border-bottom: 0; color: #000; }
.lefgnb.left .li { line-height: 50px; font-size: 16px; }

.nothing { min-height: 350px; font-size: 18px; font-weight: 500; text-align: center; padding-top: 160px; }
.hand { cursor: pointer; }

.brcheck { display: block; position: relative; padding-left: 35px; margin-bottom: 12px; cursor: pointer; font-size: 22px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.brcheck input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; }
.brcheck .checkmark { position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: #f8f8f8; min-width: 10px !important; margin: 0 !important; }
.brcheck:hover input ~ .checkmark { background-color: #ccc; }
.brcheck input:checked ~ .checkmark { background-color: #2196F3; }
.brcheck:after { content: ""; position: absolute; display: none; }
.brcheck input:checked ~ .checkmark:after { display: block; }
.brcheck .checkmark:after { left: 9px; top: 5px; width: 5px; height: 10px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }

.brradio { display: inline-block; position: relative; padding-left: 32px; margin: 12px 20px 12px 0; cursor: pointer; font-size: 22px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; font-size: 16px; line-height: 22px; }
.brradio input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; }
.brradio .checkmark { position: absolute; top: 0; left: 0; height: 24px; width: 24px; background-color: #eee; border-radius: 50%; }
.brradio:hover input ~ .checkmark { background-color: #ccc; }
.brradio input:checked ~ .checkmark { background-color: #e7380c; }
.brradio input:checked ~ .checkmark:after { display: block; }
.brradio .checkmark:after { content: ""; position: absolute; display: none; }
.brradio .checkmark:after { top: 6px; left: 6px; width: 12px; height: 12px; border-radius: 50%; background: white; }

.slideup { -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: cubic-bezier(.4,0,.2,1); animation-timing-function: cubic-bezier(.4,0,.2,1); -webkit-animation-duration: 700ms; animation-duration: 700ms; -webkit-animation-name: upSlide; animation-name: slideup; }
.animate span { animation-delay: 600ms; -webkit-animation-delay: 600ms; }
.animate span:nth-child(1) { animation-delay: 100ms; -webkit-animation-delay: 100ms; }
.animate span:nth-child(2) { animation-delay: 200ms; -webkit-animation-delay: 200ms; }
.animate span:nth-child(3) { animation-delay: 300ms; -webkit-animation-delay: 300ms; }
.animate span:nth-child(4) { animation-delay: 400ms; -webkit-animation-delay: 400ms; }
.animate span:nth-child(5) { animation-delay: 500ms; -webkit-animation-delay: 500ms; }

.salechannel { margin-top: 10px; line-height: 20px; }
.salechannel .cinfo { width: 100%; margin-bottom: 4px; }
.salechannel .cinfo span { color: #fff; font-size: 12px; background: #000; padding: 0 10px; line-height: 24px; font-weight: 500; margin-top: 10px; }
.salechannel .cinfo span.a01 { background: #00B3B7; }
.salechannel .cinfo span.a02 { background: #999; }
.salechannel .cinfo span.a03 { background: #aaa; }

.cancelcode { position: absolute; bottom: 30px; left: 0; width: 400px; min-height: 300px; padding: 20px; border: 1px solid #ccc; background: #fff; box-shadow: 0 0 5px 0 rgba(0,0,0,0.2); }
.cancelcode .material-icons { position: absolute; right: 10px; top: 10px; }
.cancelcode li { line-height: 34px; }
.cancelcode .brradio { margin: 0 10px 24px 0; }
.cancelcode .btnlist { margin-top: 30px; }
.cancelcode .title {color:#000; font-weight:500;}
.cancelcode.hide {display:none;}

.calcbox { background: #f4f4f4; padding: 30px; width: 500px; margin: 20px 0; display: inline-block; font-size: 16px; }
.calcbar { position: relative; }
.calcbar .amount { float: right; }
.calcbar.total { color: #E7380C; font-weight: bold; }

.pageNumbers { width: 30px; height: 30px; line-height: 30px; margin: 6px 6px; background: #eaeaea; text-align: center; }
.pageNumbers:hover { background-color: #4b4b4b; color: #fff; }
.pageNumbers.active { background-color: var(--red, #e7380c); color: #fff; }
.pageNumbers:last-child { margin-right: 0; }
.pageNumbers i { margin-top: -4px; }

@keyframes slideup {
    from { opacity: 0; -webkit-transform: translate3d(0,120%,0); transform: translate3d(0,120%,0); }
    to { opacity: 1; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); }
}

.font14 { font-size: 14px; line-height: 18px; }
.font12 { font-size: 14px; line-height: 15px; }


.spinner { margin: 0 auto; width: 40px; height: 40px; text-align: center; font-size: 10px; display: inline-block; }
.spinner > span, .spinner > div { background-color: #fff; height: 100%; width: 6px; margin-right: 2px; display: inline-block; -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out; animation: sk-stretchdelay 1.2s infinite ease-in-out; }
.spinner .rect2 { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; }
.spinner .rect3 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; }
.spinner .rect4 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; }
.spinner .rect5 { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; }

@-webkit-keyframes sk-stretchdelay {
    0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
    20% { -webkit-transform: scaleY(1.0) }
}

@keyframes sk-stretchdelay {
    0%, 40%, 100% { transform: scaleY(0.4); -webkit-transform: scaleY(0.4); }
    20% { transform: scaleY(1.0); -webkit-transform: scaleY(1.0); }
}

/*
@-webkit-keyframes sk-stretchdelay {
    0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
    20% { -webkit-transform: scaleY(1.0) }
}

@keyframes sk-stretchdelay {
    0%, 40%, 100% { transform: scaleY(0.4); -webkit-transform: scaleY(0.4); }
    20% { transform: scaleY(1.0); -webkit-transform: scaleY(1.0); }
}
*/