@charset "utf-8";
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");

/* GmarketSans */
@font-face {
    font-family:'GmarketSansLight';
    src:url('/fonts/GmarketSansLight.woff') format('woff');
    font-weight:normal;
    font-style:normal;
}
@font-face {
    font-family:'GmarketSansMedium';
    src:url('/fonts/GmarketSansMedium.woff') format('woff');
    font-weight:normal;
    font-style:normal;
}
@font-face {
    font-family:'GmarketSansBold';
    src: url('/fonts/GmarketSansBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* reset css*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {margin:0; padding:0; border:0; font-size:100%; background:transparent; font-family:"Pretendard Variable", Pretendard, sans-serif; letter-spacing:0}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}
body {line-height:1 !important; word-break:keep-all}
ol, ul, li {list-style:none}
blockquote, q {quotes:none}
blockquote:before, blockquote:after, q:before, q:after {content:''; content:none}
table {border-collapse:collapse; border-spacing:0; table-layout:fixed}
caption, legend {overflow:hidden; text-indent:-9999px; height:1px; padding:0 !important}
html {font-family:sans-serif; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%}
a {background-color:transparent; color:inherit; text-decoration:none}
a:active, a:hover {outline:0; text-underline-position:under}
p {outline:none}
img {border:0}
button {cursor:pointer; background:none}
select {font:inherit}
select:hover {cursor:pointer}
textarea {padding:0}
input, select {vertical-align:top; margin-top:0 !important}
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {-webkit-appearance:none; margin:0}
input[type=number] {-moz-appearance:textfield}


/* theme color */
.allMenuBtn.active,
.allMenuBtn:hover,
.searchIcon,
.headerGnb > li.active > a,
.headerGnb > li > a:hover,
.allMenuList > div:hover > h3,
.allMenuList > div > ul > li > a:hover,
.productCate > li > a.active,
.productCate > li > ul > li > a.active,
.productCate > li > a.active > i:before,
.productCate > li > ul > li > a.active > i:before,
.productCate > li > ul.active > li > ul > li > a:hover,
.productCate > li > ul.active > li > ul > li > a.active,
.subCateMenuDep2 > a:hover,
.leftMenu > li > ul > li > a.active,
.orderStepWrap > div.active .orderStep-tit,
.pointColor,
.faqQ,
.searchResults > strong,
.searchFilter span {color:#01A3B8 !important}

.searchBox,
.checkStyle:checked,
.amountRangeMin,
.amountRangeMax {border-color:#01A3B8 !important}

.headerGnb > li.active > a:after,
.headerGnb > li > a:hover:after,
.rankingNum,
.checkStyle:checked,
.amountRangeBar,
.orderStepWrap > div.active > i {background-color:#01A3B8 !important}

.tblBoard tr.notice td, .tblSkin1 tr.notice td {background-color:#E001280d}


/* common */
.widthAuto {width:auto !important}
.minWidthAuto {min-width:auto !important}
.width50px {width:50px !important}
.width55px {width:55px !important}
.width60px {width:60px !important}
.width65px {width:65px !important}
.width70px {width:70px !important}
.width75px {width:75px !important}
.width80px {width:80px !important}
.width90px, .width90 {width:90px !important}
.width95px {width:95px !important}
.width100px {width:100px !important}
.width110px {width:110px !important}
.width120px {width:120px !important}
.width125px {width:125px !important}
.width130px {width:130px !important}
.width140px {width:140px !important}
.width150px {width:150px !important}
.width170px {width:170px !important}
.width180px {width:180px !important}
.width185px {width:185px !important}
.width190px {width:190px !important}
.width200px {width:200px !important}
.width250px {width:250px !important}
.width260px {width:260px !important}
.width270px {width:270px !important}
.width280px {width:280px !important}
.width285px {width:285px !important}
.width290px {width:290px !important}
.width300px {width:300px !important}
.width350px {width:350px !important}
.width360px {width:360px !important}
.width400px {width:400px !important}
.width450px {width:450px !important}
.width500px {width:500px !important}
.width600px {width:600px !important}
.width24_ {width:24% !important}
.width25_ {width:25% !important}
.width30_ {width:30% !important}
.width40_ {width:40% !important}
.width50_ {width:50% !important}
.width100, .width100_ {width:100% !important}
.minWidth60px {min-width:60px !important}
.minWidth65px {min-width:65px !important}
.maxWidth60 {max-width:60px !important}
.maxWidth70 {max-width:70px !important}
.maxWidth80 {max-width:80px !important}
.maxWidth90 {max-width:90px !important}
.maxWidth100 {max-width:100px !important}
.maxWidth110 {max-width:110px !important}
.maxWidth115 {max-width:115px !important}
.maxWidth120 {max-width:120px !important}
.maxWidth130 {max-width:130px !important}
.maxWidth140 {max-width:140px !important}
.maxWidth150 {max-width:150px !important}
.maxWidth200 {max-width:200px !important}
.maxWidth250 {max-width:250px !important}
.maxWidth350 {max-width:350px !important}
.maxWidth25_ {max-width:25% !important}
.maxWidth30_ {max-width:30% !important}
.maxWidth40_ {max-width:40% !important}
.maxWidth50_ {max-width:50% !important}
.maxWidth60_ {max-width:60% !important}
.maxWidth70_ {max-width:70% !important}
.maxWidth80_ {max-width:80% !important}
.maxWidth90_ {max-width:90% !important}
.height45px {height:45px !important}
.height100px {height:100px !important}
.margin0 {margin:0 !important}
.mt0 {margin-top:0 !important}
.mt5 {margin-top:5px !important}
.mt10 {margin-top:10px !important}
.mt15 {margin-top:15px !important}
.mt20 {margin-top:20px !important}
.mt23 {margin-top:23px !important}
.mt25 {margin-top:25px !important}
.mt30 {margin-top:30px !important}
.mt40 {margin-top:40px !important}
.mt50 {margin-top:50px !important}
.mt60 {margin-top:60px !important}
.mt70 {margin-top:70px !important}
.mt80 {margin-top:80px !important}
.mt90 {margin-top:90px !important}
.mt100 {margin-top:100px !important}
.mb0 {margin-bottom:0px !important}
.mb5 {margin-bottom:5px !important}
.mb10 {margin-bottom:10px !important}
.mb15 {margin-bottom:15px !important}
.mb20 {margin-bottom:20px !important}
.mb30 {margin-bottom:30px !important}
.ml0 {margin-left:0px !important}
.ml2 {margin-left:2px !important}
.ml5 {margin-left:5px !important}
.ml10 {margin-left:10px !important}
.ml20 {margin-left:20px !important}
.ml30 {margin-left:30px !important}
.ml40 {margin-left:40px !important}
.ml50 {margin-left:50px !important}
.mr5 {margin-right:5px !important}
.mr10 {margin-right:10px !important}
.mr20 {margin-right:20px !important}
.mr30 {margin-right:30px !important}
.mr40 {margin-right:40px !important}
.mr50 {margin-right:50px !important}
.pd0 {padding:0 !important}
.pd20 {padding:20px !important; box-sizing:border-box}
.pt50 {padding-top:50px !important}
.pt100 {padding-top:100px !important}
.hrSt {border:none; width:100%; height:1px; background:#eee; margin:20px 0}
.hrSt2 {border:none; width:100%; height:1px; background:rgba(0,0,0,0.15); margin:15px 0}
.hrSt3 {border:none; width:100%; height:1px; background:rgba(0,0,0,0.15); margin:20px 0}
.downLink, .downLink:hover, .downLink:focus {text-decoration:underline; text-underline-position:from-font}
.h2Tit {margin:0; font-size:24px; font-weight:700}
.h3Tit {font-size:24px; font-weight:700; color:#333; margin-bottom:20px}
.h4Tit {font-size:20px; font-weight:700; color:#333}
.h5Tit {font-size:18px; font-weight:700; color:#333}
.sbTit {font-size:16px; font-weight:500; color:#333}
.cursor {cursor:pointer}
.dList > li {display:flex; margin-left:0; margin-bottom:5px; line-height:130%}
.dList > li:before {content:''; display:inline-flex; flex-shrink:0; width:5px; height:5px; background:#777; border-radius:100%; margin-top:7px; margin-right:5px}
.dList.font13 > li {line-height:120%}
.dList.font13 > li:before {margin-top:5px}
.dList.font14 > li {line-height:120%}
.dList.font14 > li:before {margin-top:5px}
.dList > li:last-child {margin-bottom:0}
.bList > li {display:flex; margin-left:0; margin-bottom:5px; line-height:130%}
.bList > li:before {content:''; display:inline-flex; flex-shrink:0; width:5px; height:1px; background:#777; margin-top:8px; margin-right:5px}
.bList.font13 > li {line-height:120%}
.bList.font13 > li:before {margin-top:5px}
.bList.font14 > li {line-height:120%}
.bList.font14 > li:before {margin-top:5px}
.bList > li:last-child {margin-bottom:0}
.numList {margin-left:20px}
.numList > li {list-style:decimal;; margin-bottom:5px; line-height:130%}
.alertStdList > li {display:flex; margin-left:0; margin-bottom:5px; line-height:120%; font-size:14px}
.alertStdList > li:before {content:''; display:inline-flex; flex-shrink:0; width:5px; height:5px; background:#fff; border-radius:100%; margin-top:6px; margin-right:5px}
.alertStdList > li:last-child {margin-bottom:0}
.linkText, .linkText:hover, .linkText:focus {color:#134583; text-decoration:underline; text-underline-position:from-font}
.text-left {text-align:left !important}
.text-center {text-align:center !important}
.text-right {text-align:right !important}
.vertical-align-top {vertical-align:top !important}
.vertical-align-middle {vertical-align:middle !important}
.font12 {font-size:12px !important}
.font13 {font-size:13px !important}
.font14 {font-size:14px !important}
.font15 {font-size:15px !important}
.font16 {font-size:16px !important}
.font17 {font-size:17px !important}
.font18 {font-size:18px !important}
.font20 {font-size:20px !important}
.font22 {font-size:22px !important}
.font24 {font-size:24px !important}
.font26 {font-size:26px !important}
.font28 {font-size:28px !important}
.font30 {font-size:30px !important}
.font40 {font-size:40px !important}
.fontWeight400 {font-weight:400}
.lineHeight120 {line-height:120%}
.lineHeight130 {line-height:130%}
.lineHeight140 {line-height:140%}
.starTxt {color:red !important}
.colorRed {color:red !important}
.colorBlue {color:#134583 !important}
.color-F4371D {color:#F4371D !important}
.color-0385A1 {color:#0385A1 !important}
.color-134583 {color:#134583 !important}
.color666 {color:#666 !important}
.colorTurquoise {color:#01A3B8 !important}
.overflow-y {overflow-y:auto}
.textOver {overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin:0; width:99%}
.block {display:block}
.border-radius0 {border-radius:0 !important}
.opacity07 {opacity:0.7}
.zoom1-1 {zoom:1.1}
.zoom1-2 {zoom:1.2}


/* flex */
.flex {display:flex}
.align-items-center {align-items:center}
.align-items-end {align-items:flex-end}
.justify-space-between {justify-content:space-between}
.justify-space-center {justify-content:center}
.justify-space-end {justify-content:flex-end}
.flex-shrink0 {flex-shrink:0}
.align-self-end {align-self:end}
.align-self-baseline {align-self:baseline}
.flex-wrap-wrap {flex-wrap:wrap}
.gap10 {gap:10px !important}
.gap17 {gap:17px !important}
.gap20 {gap:20px !important}
.gap30 {gap:30px !important}
.gap40 {gap:40px !important}
.gap50 {gap:50px !important}
.gap60 {gap:60px !important}
.gap70 {gap:70px !important}


/* Tooltip */
.toolTipSt {color:#B2B2B2; vertical-align:baseline; position:relative; cursor:pointer; z-index:99}
.toolTipSt .toolTipText {visibility:hidden; width:210px; line-height:17px; box-sizing:border-box; background-color:#fff; border:1px solid #D5D5D5; color:#707070; font-weight:400; text-align:left; padding:10px; position:absolute; z-index:1; bottom:125%; left:50%; margin-left:-20px; opacity:0; transition:opacity 0.3s; box-shadow:0 0 5px #eee; letter-spacing:-0.75px; font-size:14px}
.toolTipSt .toolTipText::after {content:""; position:absolute; top:100%; left:15px; border-width:5px; border-style:solid; border-color:#D5D5D5 transparent transparent transparent}
.toolTipSt.toolRight .toolTipText {left:inherit; right:0}
.toolTipSt.toolRight .toolTipText::after {left:calc(100% - 10px)}
.toolTipSt:hover .toolTipText {visibility:visible; opacity:1}


/* input */
.inputStyle {border:1px solid #D5D5D5; border-radius:4px; color:#333; padding:0 10px; width:100%; height:50px; line-height:50px; box-sizing:border-box; font-size:14px; font-weight:500; vertical-align:middle; -webkit-appearance:none; -moz-appearance:none; appearance:none; position:relative; background:#fff}
.inputStyle.inputMd {height:40px; line-height:40px; font-size:14px; font-weight:400}
.inputStyle.inputSm {height:30px; line-height:30px; font-size:13px; font-weight:400}
.inputStyle.inputSm2 {height:32px; line-height:32px; font-size:13px; font-weight:400}
.inputStyle.inputXs {height:20px; line-height:20px; font-size:11px; font-weight:400}
.inputStyle.readonly {border-color:#D8DBDE; background:#F6F8FA; color:#333}
.inputStyle::placeholder {color:#B2B2B2; font-weight:400}
.inputStyle:focus-visible {border:2px solid #0F264E; background:#fff; outline:none}
.inputStyle.readonly:focus-visible {border:1px solid #D8DBDE; background:#F6F8FA; outline:none}
.numInput {display:flex; align-items:center; border:1px solid #BFBFBF; border-radius:5px; padding:0 10px; width:100%; height:32px; background-color:#fff; box-sizing:border-box}
.numInput input {height:100%; border:none; outline:none; flex:1; font-size:13px; font-weight:400; color:#888; background:none; width:100%; text-align:right; margin-right:4px}
.numInput input::placeholder {color:#3333334D; font-weight:400}
.cntInput {display:flex; align-items:center; border:1px solid #eee; border-left:none; border-right:none; border-radius:0; padding:0 8px; width:100%; height:26px; background-color:#fff; box-sizing:border-box; font-size:12px; font-weight:400}
.cntInput input {height:100%; border:none; outline:none; flex:1; font-size:12px; font-weight:400; color:#888; background:none; width:100%; text-align:right; margin-right:2px}
.cntInput input::placeholder {color:#3333334D; font-weight:400}
.cntInput2 {display:flex; align-items:center; border:1px solid #eee; border-left:none; border-right:none; border-radius:0; padding:0 6px; width:100%; height:32px; background-color:#fff; box-sizing:border-box; font-size:12px; font-weight:400}
.cntInput2 input {height:100%; border:none; outline:none; flex:1; font-size:12px; font-weight:400; color:#888; background:none; width:100%; text-align:right; margin-right:0px}
.cntInput2 input::placeholder {color:#3333334D; font-weight:400}
.datepicker, .datepicker-month {background:url('../images/datepickerIcon.svg') #fff right 15px center no-repeat; background-size:15px}

.amountInput {border:1px solid #D5D5D5; border-radius:5px; color:#ccc; padding:0 10px; width:100%; height:30px; line-height:30px; box-sizing:border-box; font-size:12px; font-weight:500; vertical-align:middle; -webkit-appearance:none; -moz-appearance:none; appearance:none; letter-spacing:-0.75px}
.amountInput.readonly {border-color:#D8DBDE; background:#F6F8FA; color:#333}
.amountInput::placeholder {color:#ccc; font-size:12px; font-weight:400}
.amountInput:focus-visible {border:2px solid #0F264E; background:#fff; outline:none}
.amountInput.readonly:focus-visible {border:1px solid #D8DBDE; background:#F6F8FA; outline:none}
.amountWave {color:#333; margin:0 7px}

.optionAmount {border:1px solid #aaa; border-radius:3px; color:#858585; padding:0 5px; width:100%; height:18px; line-height:18px; box-sizing:border-box; font-size:11px; font-weight:400; vertical-align:middle; -webkit-appearance:none; -moz-appearance:none; appearance:none; text-align:center}
.optionAmount.readonly {border-color:#D8DBDE; background:#F6F8FA; color:#333}
.optionAmount::placeholder {color:#ccc; font-size:11px; font-weight:400}
.optionAmount:focus-visible {border:2px solid #0F264E; background:#fff; outline:none}
.optionAmount.readonly:focus-visible {border:1px solid #D8DBDE; background:#F6F8FA; outline:none}


/* input field */
.loginInputStyle {border:1px solid #F5F5F5; background:#F5F5F5; border-radius:5px; color:#333; padding:0 30px; width:100%; height:60px; line-height:60px; box-sizing:border-box; font-size:16px; font-weight:400; -webkit-appearance:none; -moz-appearance:none; appearance:none; outline:none}
.loginInputStyle.readonly {border-color:#D8DBDE; background:#F6F8FA; color:#333}
.loginInputStyle::placeholder {color:#7A7A7A; font-size:16px; font-weight:400}
.loginInputStyle:focus-visible {border:2px solid #0085A1; background:#fff; outline:none}
.loginInputStyle.readonly:focus-visible {border:1px solid #D8DBDE; background:#F6F8FA; outline:none}


/* textarea */
.textareaStyle {border:1px solid #D5D5D5; border-radius:4px; color:#333; padding:6px 10px; width:100%; height:50px; line-height:18px; box-sizing:border-box; font-size:14px; font-weight:500; vertical-align:middle; -webkit-appearance:none; -moz-appearance:none; appearance:none; letter-spacing:-0.45px}
.textareaStyle.inputLg {height:40px; line-height:15px; font-size:13px; font-weight:400; padding:10px 10px}
.textareaStyle.inputMd {height:32px; line-height:15px; font-size:13px; font-weight:400}
.textareaStyle.inputSm {height:30px; line-height:15px; font-size:13px; font-weight:400}
.textareaStyle.inputXs {height:20px; line-height:13px; font-size:11px; font-weight:400}
.textareaStyle.borderBFBFBF {border-color:#BFBFBF}
.textareaStyle.readonly {border-color:#D8DBDE; background:#F6F8FA; color:#333}
.textareaStyle::placeholder {color:#B2B2B2; font-size:15px; font-weight:400}
.textareaStyle:focus-visible {border:2px solid #0F264E; background:#fff; outline:none}
.textareaStyle.readonly:focus-visible {border:1px solid #D8DBDE; background:#F6F8FA; outline:none}
.resizeNone {resize:none}


/* select */
.selectStyle2 {border:1px solid #DCDCDC; border-radius:12px; padding:0 10px; width:100%; height:24px; line-height:24px; box-sizing:border-box; font-size:11px; font-weight:500; color:#333; vertical-align:middle; background:url('../images/selectArw.png') #F2F2F2 no-repeat right 10px center; -webkit-appearance:none; -moz-appearance:none; appearance:none; outline:none}
.selectStyle2::-ms-expand {display:none}
.selectStyle {border:1px solid #DCDCDC; border-radius:5px; padding:0 10px; width:100%; height:34px; line-height:34px; box-sizing:border-box; font-size:14px; font-weight:500; color:#333; vertical-align:middle; background:url('../images/selectArw.png') #fff no-repeat right 10px center; -webkit-appearance:none; -moz-appearance:none; appearance:none; outline:none}
.selectStyle::-ms-expand {display:none}
.selectStyle.selectMd {height:40px; line-height:40px; font-size:14px; font-weight:400}
.selectStyle.selectSm {height:30px; line-height:30px; font-size:13px; font-weight:400}
.selectStyle.selectSm2 {height:32px; line-height:32px; font-size:13px; font-weight:400}
.selectStyle.selectXs {height:20px; line-height:20px; font-size:11px; font-weight:400}

.selectLabel.active {background-color:#ccc}
.selectLabel:focus-visible, .selectLabel:focus {outline:none !important}
.selectLabelTit {width:100%; color:#333; font-size:13px; font-weight:400}
.selectLabelPlus {flex-shrink:0; width:11px; height:11px; background:url('../images/selectLabelDown.svg') center center no-repeat}
.selectLabel.active .selectLabelPlus {background:url('../images/selectLabelUp.svg') center center no-repeat}
.optionList {display:none; position:absolute; top:100%; left:0; min-width:max-content; width:100%; background-color:#fff; z-index:1000; list-style:none; padding:0; margin:0; border:1px solid #ccc}
.optionItem {padding:0px}
.optionItem a {display:flex; align-items:center; width:100%; height:31px; padding:0 10px; text-decoration:none; background-color:#fff; color:#333; font-size:14px; font-weight:400; cursor:pointer; transition:.2s}
.optionItem a:hover {background-color:#ddd; color:#333}
.optionItem a:focus-visible, .optionItem a:focus {outline:none !important; background-color:#002A3F}


/* check */
.checkStyle {margin:0; appearance:none; -webkit-appearance:none; width:18px; height:18px; background:#fff; border:1px solid #BFBFBF; border-radius:3px; display:inline-block; cursor:pointer; position:relative}
.checkStyle + label {display:inline-flex; align-items:center; position:relative; cursor:pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; font-size:14px; font-weight:400; color:#333; padding:0; margin:0; margin-left:6px}
.checkStyle:checked {background-image:url('../images/checkStyle.svg'); background-repeat:no-repeat; background-position:center}
.checkStyle.checkOnly + label {margin-left:0}
.checkStyle:focus-visible, .checkStyle:focus {outline:none !important}


/* radio */
.radioStyle {display:inline-flex !important; align-items:center; justify-content:center; -webkit-appearance:none; -moz-appearance:none; -ms-appearance:none; -o-appearance:none; appearance:none; border-radius:100% !important; height:18px; width:18px; background:#fff; border:1px solid #BFBFBF; color:#fff; cursor:pointer; display:inline-block; outline:none; position:relative; margin:0 !important; margin-top:0 !important}
.radioStyle.radioXs {height:14px; width:14px}
.radioStyle:checked {border:6px solid #01A3B8}
.radioStyle.radioXs:checked {border:4px solid #01A3B8}
.radioStyle:focus {padding:0 !important; margin:0 !important; background:none !important; outline:none !important; outline-offset:0 !important; margin-top:0 !important}
.radioStyle + label {cursor:pointer; padding:0 !important; margin:0 !important; background:none !important; font-size:14px !important; font-weight:400 !important; color:#333; margin-left:6px !important; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; width:calc(100% - 24px)}
.radioStyle + label.dimmed {cursor:no-drop}
.radioStyle + label.font16 {font-size:16px !important}
.radioStyle:disabled {cursor:no-drop; background:#ededed}
.radioStyle:disabled + label {cursor:no-drop; opacity:0.4}


/* modal */
.modalStyle {overflow-y:auto !important}
.modalStyle .modal-content {content:''; border-radius:10px; overflow:hidden}
.modalStyle .modal-body {padding:40px 20px 20px 20px}
.modalStyle .modal-body:before{content:''; width:100%; height:7px; display:block; position:absolute; top:0; left:0}
.ModalClose {position:absolute; top:15px; right:15px; font-size:20px}
.modalTitle {font-size:26px; font-weight:700; border-bottom:1px solid #ccc; padding-bottom:15px; margin-bottom:15px}
.modalTopBox {background:#F5F5F5; padding:15px; border-radius:10px}
.modalTopBox ul > li {display:flex; margin-left:0; margin-bottom:5px; line-height:130%}
.modalTopBox ul > li:before {content:''; display:inline-flex; flex-shrink:0; width:5px; height:5px; background:#777; border-radius:100%; margin-top:8px; margin-right:5px}
.modalTopBox ul > li:last-child {margin-bottom:0}
.alertText1 {font-size:18px; font-weight:500; color:#333; text-align:center; line-height:140%}
.alertText2 {font-size:16px; font-weight:500; color:#333; text-align:center; line-height:140%}
.modalFooter {border-top:1px solid #ddd; margin-top:30px; padding:20px 0 0 0; text-align:center}
.modalBtnClose {border:1px solid #222; color:#222; background:#fff; display:inline-flex; align-items:center; justify-content:center; height:45px; width:auto; padding:0 25px; border-radius:4px; box-sizing:border-box; font-size:14px; font-weight:500; margin:0 5px; transition:.3s}
.modalBtnClose:hover {border:1px solid #222; color:#333; background:#eee}
.modalBtnCheck {color:#fff; background:#333; display:inline-flex; align-items:center; justify-content:center; height:45px; width:auto; padding:0 25px; border-radius:4px; box-sizing:border-box; font-size:14px; font-weight:500; margin:0 5px; transition:.3s}
.modalBtnCheck:hover {background:#000}
.modalBtnCheck2 {color:#333; background:#fff; border:1px solid #333; display:inline-flex; align-items:center; justify-content:center; height:45px; width:auto; padding:0 25px; border-radius:4px; box-sizing:border-box; font-size:14px; font-weight:500; margin:0 5px; transition:.3s}


/* header */
.headerWrap {}
.headerTop {background:#6666660D}
.headerTop > .inner {width:1200px; height:30px; margin:0 auto; display:flex; align-items:center; justify-content:space-between}
.headerTopLeft {display:flex; flex-shrink:0}
.headerTopLeft > button {background:inherit ; border:none; box-shadow:none; border-radius:0; padding:0; overflow:visible; cursor:pointer; display:inline-flex; align-items:center; font-size:12px; font-weight:400; color:#666}
.headerTopLeft > button > i {color:#FFA41B; margin-right:4px}
.headerTopRight {display:flex; flex-shrink:0}
.headerTopRight > a {display:inline-flex; align-items:center; font-size:12px; font-weight:400; color:#666}
.headerTopRight > a:after {content:''; display:inline-block; width:2px; height:2px; background:#ccc; margin:0 8px}
.headerTopRight > a:last-child:after {display:none}

header {width:1200px; margin:35px auto; display:flex; align-items:center; justify-content:space-between}
.headerLeft {display:flex; align-items:center}
.headerLeft > h1 {margin-right:40px}
.headerLeft > h1 a {display:block}
.headerLeft > h1 img {height:46px}
.searchBoxWrap {position:relative}
.searchBox {display:flex; align-items:center; border:2px solid; border-radius:25px; padding:0 25px; width:560px; height:50px; background-color:#fff; box-sizing:border-box}
.searchInput {height:100%; border:none; outline:none; flex:1; font-size:15px; font-weight:500; color:#333; background:none}
.searchInput::placeholder {color:#B2B2B2; font-weight:400}
.searchIcon {cursor:pointer; font-size:20px; font-weight:700; border:none; padding:0}
.recentSearchBox {position:absolute; top:60px; width:560px; box-sizing:border-box; max-height:195px; border:1px solid #ddd; background:#fff; border-radius:20px; z-index:100; padding:20px 10px 20px 20px; overflow:hidden}
.recentScrollInner {max-height:135px; overflow-y:auto; padding-right:10px}
.recentScrollInner::-webkit-scrollbar {width:6px}
.recentScrollInner::-webkit-scrollbar-thumb {background-color:#ccc; border-radius:10px}
.recentScrollInner::-webkit-scrollbar-track {background:transparent}
.recentSearchBox.hidden {display:none}
.recentSearchTit {font-size:15px; font-weight:700; color:#333; margin:0 0 10px 0}
.recentSearchBox ul {list-style:none; padding:0; margin:0}
.recentSearchBox li > a {display:flex; align-items:center; justify-content:space-between; cursor:pointer; font-size:14px; color:#333; font-weight:400; padding:5px 0}
.recentSearchBox li > a .recentDel {border:none; box-shadow:none; font-size:15px}

.headerRight {display:flex; align-items:center}
.headerRightItem {text-align:center; margin-right:30px; position:relative}
.headerRightItem:last-child {margin-right:0}
.headerRightItem i {font-size:22px; color:#333}
.headerRightItem p {margin:12px 0 0 0; font-size:12px; font-weight:500; color:#666}

.headerBottom {border-top:1px solid #ddd; border-bottom:1px solid #ddd}
.headerBottom > .inner {width:1200px; margin:0 auto; display:flex; align-items:center; justify-content:space-between}
.headerBottomLeft {display:flex; position:relative}
.allMenuBtn {display:flex; align-items:center; height:60px; font-size:20px; font-weight:700; color:#333; margin-right:65px}
.allMenuBtn > img {margin-right:12px}
.allMenuBtn.active > img, .allMenuBtn:hover > img {filter:invert(20%) sepia(500%) saturate(1200%) hue-rotate(160deg)}
.headerGnb {display:flex; align-items:center}
.headerGnb > li {display:flex; align-items:center; justify-content:center; height:100%; position:relative; margin:0 10px}
.headerGnb > li > a {display:flex; align-items:center; height:100%; font-size:20px; font-weight:700; color:#333; position:relative; padding:0 10px}
.headerGnb > li.active > a, .headerGnb > li > a:hover {font-weight:700}
.headerGnb > li.active > a:after, .headerGnb > li > a:hover:after {content:''; display:block; width:100%; height:2px; position:absolute; bottom:0; left:0}
.headerBottomRight {display:flex; align-items:center}
.headerBottomRight > a {display:flex; align-items:center; justify-content:center; border:1px solid #DCDCDC; border-radius:5px; width:100px; height:32px; font-size:14px; font-weight:400; color:#333; margin-left:10px}
.headerBottomRight > a:first-child {margin-left:0}
.headerBottomRight > a > i {margin-right:4px}
.headerBottomRight > a:hover {background:#f4f4f4}

.allMenuList {display:none; position:absolute; top:100%; width:1200px; height:min-content; border:1px solid #01a3b8; background:#fff; z-index:9999}
.allMenuList.active {display:flex; flex-wrap:wrap}
.allMenuList > div {flex-basis:16.66%; border-right:1px solid #ECECEC; border-bottom:1px solid #ECECEC; padding:13px 10px}
.allMenuList > div.br0 {border-right:none}
.allMenuList > div.bb0 {border-bottom:none}
.allMenuList > div > h3 {display:flex; align-items:center; height:36px; background:#FAFAFA; font-size:15px; font-weight:500; color:#333; padding-left:20px; margin-bottom:10px}
.allMenuList > div:hover > h3 {color:#01A3B8}
.allMenuList > div > ul > li > a {font-size:14px; font-weight:400; color:#555; padding-left:20px; line-height:20px}


/* productItem */
.productItem {padding:10px; box-sizing:border-box; position:relative}
.productItem:hover:before {content:''; position:absolute; top:0; left:0; width:230px; height:100%; border:2px solid #00A3B8; z-index:-1}
.productItem2 {position:relative}
.productItem3 {padding:10px; box-sizing:border-box; position:relative; width:210px;}
.productItem3:hover:before {content:''; position:absolute; top:0; left:0; width:210px; height:100%; border:2px solid #00A3B8; z-index:-1}
.productItem-top {display:block; position:relative; background:#F2F2F2; width:210px; height:210px}
.productItem-top img {width:210px; height: 210px;}
.productItem-top .checkStyle {position:absolute; top:10px; left:10px}
.pruduct-del {background:inherit ; border:none; box-shadow:none; border-radius:0; padding:0; overflow:visible; cursor:pointer; background:none; position:absolute; top:17px; right:17px; font-size:20px; color:#333}
.productItem-top2 {display:block; position:relative; background:#fff; width:387px; height:387px; border:1px solid #CDCDCD; box-sizing:border-box}
.productItem-top2 img {width:100%}
.productItem-top2 .checkStyle {position:absolute; top:10px; left:10px}
.productItem-top3 {display:block; position:relative; background:#F2F2F2; width:190px; height:190px}
.productItem-top3 img {width:100%; height: 100%;}
.productItem-top3 .checkStyle {position:absolute; top:10px; left:10px}
.rankingNum {position:absolute; top:0; left:0; display:flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:10px 0 10px 0; font-size:16px; font-weight:700; color:#fff}
.productItem-mid {display:flex; align-items:center; justify-content:space-between; margin-top:8px}
.brandName {display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; font-weight:500; color:#999}
.productItem-op {flex-shrink:0}
.productItem-op button {background:inherit ; border:none; box-shadow:none; border-radius:0; padding:0; overflow:visible; cursor:pointer; background:none; width:26px; height:30px; display:inline-flex; align-items:center; justify-content:center; font-size:14px; font-weight:400; color:#333}
.productItem-op-btn.active i {color:#E00128; font-weight:900}
.productItem-bottom {display:block; margin-top:4px}
.productItem-name {overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; font-size:16px; font-weight:700; color:#333; line-height:19px; margin-bottom:10px}
.productItem-name2 {overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; font-size:20px; font-weight:700; color:#333; line-height:24px; margin-bottom:10px}
.productItem-del {font-size:10px; font-weight:500; color:#999}
.productItem-del del {font-size:12px; font-weight:500; color:#999}
.productItem-del2 {font-size:14px; font-weight:500; color:#999}
.productItem-del2 del {font-size:16px; font-weight:500; color:#999}
.productItem-priceWrap {display:flex; margin-top:4px; margin-bottom:5px}
.productItem-discount {font-family:'GmarketSansBold'; font-weight:900; font-size:20px; color:#E0002B; margin-right:12px}
.productItem-price {font-family:'GmarketSansBold'; font-weight:900; font-size:20px; color:#333}
.productItem-price span {font-family:"Pretendard Variable", Pretendard, sans-serif; font-size:16px; font-weight:400; color:#333; margin-left:2px}
.productItem-discount2 {font-family:'GmarketSansBold'; font-weight:900; font-size:24px; color:#E0002B; margin-right:12px}
.productItem-price2 {font-family:'GmarketSansBold'; font-weight:900; font-size:24px; color:#333; display:flex; align-items:flex-end}
.productItem-price2 span {font-family:"Pretendard Variable", Pretendard, sans-serif; font-size:18px; font-weight:400; color:#333; margin-left:2px}
.productItem-tag {display:inline-flex; align-items:center; justify-content:center; height:22px; padding:0 4px; font-size:12px; font-weight:400; color:#333; background:#F2F2F2; border-radius:2px; margin-right:6px}
.swiperA, .recommendSwiperWrap {margin-left:-10px; margin-right:-10px; width:calc(100% + 20px)}


/* main */
.mainVisualWrap {margin-top:0px; position:relative}
.mainControlWrap {position:absolute; bottom:0; left:0; width:100%; z-index:9}
.mainControl {width:1200px; margin:0 auto; display:flex; justify-content:flex-end}
.mainControl > .inner {width:120px; height:30px; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.4)}
.mainSwiper-prev, .mainSwiper-next {font-size:13px; color:#fff; cursor:pointer}
.mainSwiper-pagination {width:auto !important; margin:0 10px; font-size:14px; font-weight:300; color:#fff}
.mainSwiper-pagination .current-page {font-weight:700}
.swiper-control-btn {background:inherit ; border:none; box-shadow:none; border-radius:0; padding:0; overflow:visible; cursor:pointer; background:none; margin-left:10px}
.swiper-control-btn .icon {font-family:"Font Awesome 6 Pro"; font-weight:900; color:#fff; font-size:14px}
.swiper-control-btn.pause .icon:before {content:"\f04c"}
.swiper-control-btn.play .icon:before {content:"\f04b"}
.mainConWrap {margin-top:80px}
.mainConA, .mainConB, .mainConD {width:1200px; margin:0 auto; position:relative}
.mainConTit {font-size:32px; font-weight:700; color:#333}
.mainConTit > span {font-size:16px; font-weight:400; color:#aaa; margin-left:16px}
.swiperAwrap, .swiperBwrap, .swiperCwrap, .swiperDwrap {position:relative}

.swiperA-prev, .swiperA-next {font-size:22px; color:#333; position:absolute; top:115px; cursor:pointer; z-index:9}
.swiperA-prev {left:-25px}
.swiperA-next {right:-25px}

.mainConB-item {background:#F7F7F7; display:flex; align-items:center; justify-content:center; height:100px; border-radius:10px; padding:0 30px}
.swiperB-prev, .swiperB-next {display:flex; align-items:center; justify-content:center; width:37px; height:37px; font-size:22px; color:#333; position:absolute; top:32px; cursor:pointer; box-shadow:0 3px 5px rgba(0,0,0,0.05); background:#fff; border-radius:100%; z-index:9}
.swiperB-prev {left:-18.5px}
.swiperB-next {right:-18.5px}

.mainConC {background:linear-gradient(#00A3B8 400px, #fff 400px)}
.mainConC .inner {width:1200px; margin:0 auto; padding-top:40px}
.mainConC-subTit {font-size:16px; font-weight:400; color:#fff; opacity:0.6}
.mainConC-tit {font-size:40px; font-weight:700; color:#fff; margin-top:7px}
.swiperC-prev, .swiperC-next {display:flex; align-items:center; justify-content:center; width:50px; height:50px; font-size:22px; color:#333; position:absolute; top:168px; cursor:pointer; border:1px solid #999; background:#fff; border-radius:100%; z-index:9}
.swiperC-prev {left:-25px}
.swiperC-next {right:-25px}

.mainHr {border:none; background:#ddd; height:1px; margin:0}

.bestTab {width:auto; flex-shrink:0}
.bestTab > a {display:flex; align-items:center; justify-content:center; height:44px; padding:0 20px; border:1px solid #ddd; box-sizing:border-box; font-size:15px; font-weight:400; color:#333}
.bestTab.active > a {border-color:#01A3B8; background:#01A3B8; color:#fff; font-weight:500}
.swiperD-prev, .swiperD-next {display:flex; align-items:center; justify-content:center; width:36px; height:36px; font-size:22px; color:#333; position:absolute; top:4px; cursor:pointer; box-shadow:0 3px 5px rgba(0,0,0,0.05); background:#fff; border-radius:100%; z-index:9}
.swiperD-prev {left:-18.5px}
.swiperD-next {right:-18.5px}

.bestList {margin-left:-10px; margin-right:-10px; width:calc(100% + 20px); display:flex; flex-wrap:wrap; gap:17px}
.bestList > .productItem {width:230px}
.bestCateMoreWrap {margin:30px auto 170px auto; text-align:center}
.bestCateMore {display:inline-flex; align-items:center; justify-content:center; height:40px; padding:0 20px; border:1px solid #333; box-sizing:border-box; font-size:16px; font-weight:500; color:#333}
.bestCateMore:hover {background:#eee}


/* conLayout */
.contents {width:1200px; margin:20px auto 0 auto; position:relative}
.conLayoutA {min-height:calc(100vh - 150px); padding-bottom:100px; margin-top:50px}
.layout2col {display:flex}
.layoutCol-left {width:190px; min-height:100vh; margin-right:40px; position:relative}
.layoutCol-right {width:calc(100% - 230px); padding:0; padding-bottom:200px}
.layout2col-left {width:calc(100% - 350px); padding:0; padding-bottom:200px}
.layout2col-right {width:320px; min-height:100vh; margin-top:-20px; margin-left:30px; background:#F2F2F2; padding:20px 25px 0 25px; position:relative}


/* searchWrap */
.searchWrap {display:flex; padding-bottom:100px}
.searchLeft {width:190px; margin-right:50px; margin-top:10px}
.sclTit {font-size:16px; font-weight:600; color:#333; margin-bottom:15px}
.amountRange {width:100%; height:3px; background:#D6DDE6; position:relative}
.amountRangeMin {width:15px; height:15px; box-sizing:border-box; background:#fff; border:5px solid; border-radius:100%; position:absolute; top:-6px; z-index:9; cursor:pointer}
.amountRangeMax {width:15px; height:15px; box-sizing:border-box; background:#fff; border:5px solid; border-radius:100%; position:absolute; top:-6px; z-index:9; cursor:pointer}
.amountRangeBar {width:100%; height:3px; position:absolute; top:0}
.reSearchBox {display:flex; align-items:center; border:1px solid #BFBFBF; border-radius:5px; padding:0 10px; width:100%; height:30px; background-color:#fff; box-sizing:border-box}
.reSearchInput {height:100%; border:none; outline:none; flex:1; font-size:12px; font-weight:500; color:#333; background:none; width:calc(100% - 14px)}
.reSearchInput::placeholder {color:#3333334D; font-weight:500}
.reSearchIcon {cursor:pointer; font-size:14px; font-weight:400; border:none; padding:0}
.searchRight {width:calc(100% - 240px)}
.searchResultTit {font-size:18px; font-weight:700; color:#333; margin-bottom:20px}
.searchResultTit > strong {font-weight:700}


/* 검색결과 상품 리스트 */
.searchProductList {display:flex; padding-bottom:20px; margin-bottom:20px; border-bottom:1px solid #eee}
.searchProductList > a {display:flex}
.spl_thum {display:flex; flex-shrink:0; align-items:center; justify-content:center; width:165px; height:165px; overflow:hidden; border-radius:10px; border:1px solid #ccc; box-sizing:border-box}
.spl_info {width:329px; padding-right:20px; margin-left:20px; margin-right:20px; box-sizing:border-box; border-right:1px solid #eee}
.badge_ji {display:inline-flex; align-items:center; justify-content:center; height:24px; padding:0 8px; border-radius:4px 0 4px 0; margin-right:4px; font-size:11px; font-weight:500; color:#fff; background:#E00128}
.badge_il {display:inline-flex; align-items:center; justify-content:center; height:24px; padding:0 8px; border-radius:4px 0 4px 0; margin-right:4px; font-size:11px; font-weight:500; color:#fff; background:#AAAAAA}
.badge_gong {display:inline-flex; align-items:center; justify-content:center; height:24px; padding:0 8px; border-radius:4px 0 4px 0; margin-right:4px; font-size:11px; font-weight:500; color:#fff; background:#333333}
.badge_kcs {display:inline-flex; align-items:center; justify-content:center; height:24px; padding:0 8px; border-radius:4px 0 4px 0; margin-right:4px; font-size:11px; font-weight:500; color:#fff; background:#478F33}
.badge_bo {display:inline-flex; align-items:center; justify-content:center; height:24px; padding:0 8px; border-radius:4px 0 4px 0; margin-right:4px; font-size:11px; font-weight:500; color:#fff; background:#F69B2E}
.badge_deung {display:inline-flex; align-items:center; justify-content:center; height:24px; padding:0 8px; border-radius:4px 0 4px 0; margin-right:4px; font-size:11px; font-weight:500; color:#fff; background:#555555}
.badge_an {display:inline-flex; align-items:center; justify-content:center; height:24px; padding:0 8px; border-radius:4px 0 4px 0; margin-right:4px; font-size:11px; font-weight:500; color:#fff; background:#F4371D}
.badge_op {display:inline-flex; align-items:center; justify-content:center; height:24px; padding:0 8px; border-radius:4px 0 4px 0; margin-right:4px; font-size:11px; font-weight:500; color:#fff; background:#134583}
.badge_mul {display:inline-flex; align-items:center; justify-content:center; height:24px; padding:0 8px; border-radius:4px 0 4px 0; margin-right:4px; font-size:11px; font-weight:500; color:#fff; background:#007D98}
.badge_chu {display:inline-flex; align-items:center; justify-content:center; height:24px; padding:0 8px; border-radius:4px 0 4px 0; margin-right:4px; font-size:11px; font-weight:500; color:#fff; background:#434B95}
.badge_homs {display:inline-flex; align-items:center; justify-content:center; height:24px; padding:0 8px; border-radius:4px 0 4px 0; margin-right:4px; font-size:11px; font-weight:500; color:#fff; background:#333333}
.badge_discount {display:inline-flex; align-items:center; justify-content:center; height:24px; padding:0 8px; border-radius:4px 0 4px 0; margin-right:4px; font-size:11px; font-weight:500; color:#fff; background:#01A3B8}
.spl_info > h3 {display:block; font-size:18px; font-weight:600; color:#333; margin:10px 0 5px 0}
.spl_info > h4 {font-size:13px; font-weight:400; color:#333; line-height:15px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}
.spl_spec {margin-top:20px; display:flex; flex-wrap:wrap}
.spl_spec > dl {display:flex; margin-right:20px}
.spl_spec > dl > dt {flex-shrink:0; font-size:13px; font-weight:600; color:#333; margin-right:4px}
.spl_spec > dl > dd {font-size:13px; font-weight:400; color:#333}
.spl_cp {margin-top:10px; width:195px; padding-right:20px; margin-right:20px; box-sizing:border-box; border-right:1px solid #eee}
.spl_cp > div {margin-bottom:15px; display:flex; align-items:center}
.spl_pr {width:216px}
.spl_pr_col1, .spl_pr_col2 {display:flex; align-items:center; margin-bottom:8px}
.spl_pr_col1 > dt {width:75px; flex-shrink:0; font-size:13px; font-weight:600; color:#333}
.spl_pr_col1 > dd {display:flex; align-items:center; border:none; border-radius:5px; padding:0 10px; width:100%; height:30px; background-color:#F2F2F2; box-sizing:border-box; color:#33333399; font-weight:500; font-size:12px}
.spl_pr_col2 > dt {width:75px; flex-shrink:0; font-size:13px; font-weight:600; color:#333}
.spl_pr_col2 > dd {display:flex; align-items:center; border:1px solid #BFBFBF; border-radius:5px; padding:0 10px; width:100%; height:30px; background-color:#fff; box-sizing:border-box; color:#33333399; font-weight:500; font-size:12px}
.spl_pr_input {height:100%; border:none; outline:none; flex:1; font-size:12px; font-weight:500; color:#333; background:none; width:100%; text-align:right; margin-right:4px}
.spl_pr_input2 {height:100%; border:none; outline:none; flex:1; font-size:12px; font-weight:500; color:#333; background:none; width:100%; text-align:right; margin-right:4px}
.spl_pr_input::placeholder, .spl_pr_input2::placeholder {color:#3333334D; font-weight:500}


/* 버튼 */
.btnFlexContainer {display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.btnFlex {display:flex; align-items:center; justify-content:center; background:none; border:none; box-shadow:none; box-sizing:border-box; flex:1; padding:0; min-width:auto; font-size:12px; font-weight:600; border-radius:5px; height:40px; transition:.3s; width:100%}
.btnInlineFlex {display:inline-flex; align-items:center; justify-content:center; background:none; border:none; box-shadow:none; box-sizing:border-box; padding:0 15px; min-width:auto; font-size:12px; font-weight:600; border-radius:5px; height:40px; transition:.3s; width:auto}
.btnLg {font-size:16px; font-weight:600; border-radius:10px; height:55px; box-shadow:0 3px 5px rgba(0,0,0,0.04)}
.btnLg2 {font-size:14px; font-weight:600; border-radius:10px; height:50px; box-shadow:0 3px 5px rgba(0,0,0,0.04)}
.btnMd {font-size:15px; font-weight:500; border-radius:5px; height:38px; padding:0 15px}
.btnMd2 {font-size:15px; font-weight:500; border-radius:5px; height:40px; padding:0 15px}
.btnMd3 {font-size:14px; font-weight:500; border-radius:5px; height:40px; padding:0 8px}
.btnMd4 {font-size:14px; font-weight:500; border-radius:5px; height:36px; padding:0 20px}
.btnsm, .btnSm {font-size:14px; font-weight:500; border-radius:5px; height:34px; padding:0 10px}
.btnSm2 {font-size:14px; font-weight:500; border-radius:5px; height:30px; padding:0 8px}
.btnXs {font-size:13px; font-weight:400; border-radius:5px; height:32px; padding:0 5px}
.btnXs2 {font-size:13px; font-weight:400; border-radius:5px; height:24px; padding:0 5px}
.btnFlex > i, .btnInlineFlex > i {margin-right:5px}
.btnFlex-red, .btnRed {background:#E0002B; color:#fff}
.btnFlex-white, .btnWhite {background:#fff; color:#333}
.btnFlex-lightGray, .btnLightGray {background:#AAA; color:#fff}
.btnFlex-gray, .btnGray {background:#333; color:#fff}
.btnTurquoise {background:#01A3B8; color:#fff}
.btnFlex-gray:hover, .btnGray:hover {background:#111}
.btnFlex-outlineGray, .btnOutlineGray {background:#fff; border:1px solid #999; color:#333}
.btnFlex-outlineGray:hover, .btnOutlineGray:hover {background:#f5f5f5}
.btnFlex-outlineLightGray, .btnOutlineLightGray {background:#fff; border:1px solid #ccc; color:#333}
.btnFlex-outlineLightGray:hover, .btnOutlineLightGray:hover {background:#f5f5f5}
.btnFlex-outlineRed, .btnOutlineRed {background:#fff; border:1px solid #E0002B; color:#E0002B}
.btnOutlineTurquoise {background:#fff; border:1px solid #01A3B8; color:#01A3B8}
.btnSearch {position:absolute; right:40px}
.btnFlex:disabled, .btnInlineFlex:disabled {cursor:no-drop; opacity:0.5}


/* skyQuick */
.skyQuickWrap {position:absolute; top:0; left:calc(100% + 50px); transition:top 0.3s ease}
.skyQuick {border-radius:15px; border:1px solid #E1E1E1; box-sizing:border-box; width:90px; padding:20px 0; text-align:center; box-shadow:0 0 6px rgba(0,0,0,0.05); background:#fff}
.skyQuickBtn {display:block; text-align:center; margin-bottom:20px}
.skyQuickBtn > i {display:flex; align-items:center; justify-content:center; width:40px; height:40px; background:#F2F2F2; border-radius:100%; font-size:20px; color:#333; margin:0 auto 5px auto; position:relative}
.skyQuickBtn > p {margin:0; padding:0; font-size:13px; font-weight:500; color:#333}
.skyQuickBtn:last-child {margin-bottom:0}
.badgeAlarm {display:flex; align-items:center; justify-content:center; width:18px; height:18px; font-size:12px; font-weight:400; color:#fff; background:#E00128; border-radius:100%; position:absolute; top:-5px; right:-5px}
.inquiryWrap {text-align:center; margin-top:20px}
.inquiry {display:inline-flex; align-items:center; justify-content:center; width:60px; height:60px; font-size:20px; color:#fff; border-radius:100%; position:relative; box-shadow:0 3px 6px rgba(0,0,0,0.1)}
.inquiry i {cursor:pointer}
.inquiryMore {width:0; overflow:hidden; position:absolute; z-index:10; top:-5px; right:0; padding:12px 0; display:flex; align-items:center; border-radius:38px; white-space:nowrap; transition:width 0.3s ease; box-shadow:0 3px 6px rgba(0,0,0,0.1)}
.inquiryMore i {font-size:20px; color:#fff}
.inquiryMore > div {text-align:left; margin-left:10px}
.inquiryMore h3 {font-size:16px; font-weight:700; color:#fff; letter-spacing:-0.75px}
.inquiryMore h4 {font-size:13px; font-weight:500; color:#fff; margin:1px 0 4px 0}
.inquiryMore p {font-size:12px; font-weight:300; color:#fff; margin:0}
.inquiry:hover .inquiryMore {width:200px; padding:12px 20px}
.inquiryWrap:hover .inquiryMore {width:205px}
.inquiryWrap:not(:hover) .inquiryMore {width:0; padding:12px 0}
.footerTop {display:flex; align-items:center; justify-content:center; width:60px; height:60px; font-size:22px; color:#333; background:#fff; margin:30px auto 0 auto; box-shadow:0 3px 6px rgba(0,0,0,0.1); border-radius:100%; transition:.3s}
.footerTop:hover {background:#333; color:#fff}


/* recentProduct */
.recentProductWrap {width:1200px; margin:0 auto; position:relative}
.recentProductList {position:absolute; top:0; left:calc(100% + 50px); transition:top 0.3s ease}
.recentProduct {border:1px solid #E1E1E1; box-sizing:border-box; width:104px; padding:0; text-align:center; background:#fff}
.rpTit {display:flex; align-items:center; justify-content:center; height:40px; font-size:14px; font-weight:500; color:#333; border-bottom:1px solid #E1E1E1}
.rpList {padding:12px; box-sizing:border-box}
.rpThum {position:relative; margin-bottom:8px}
.rpThum > a {display:block; background:#F2F2F2}
.rpThum > button {background:inherit ; border:none; box-shadow:none; border-radius:0; padding:0; overflow:visible; cursor:pointer; background:#717070; color:#fff; display:flex; align-items:center; justify-content:center; width:12px; height:12px; position:absolute; top:0; right:0; font-size:8px}
.rpThum:last-child {margin-bottom:0}
.rpControl {display:flex; align-items:center; justify-content:space-between; margin-top:12px}
.rpSwiper-prev, .rpSwiper-next {display:flex; align-items:center; justify-content:center; width:16px; height:16px; font-size:8px; color:#333; cursor:pointer; border:1px solid #E1E1E1}
.rpSwiper-pagination {width:auto !important; font-size:12px; font-weight:300; color:#666}
.rpSwiper-pagination .current-page {font-weight:700; color:#0385A1}


/* pagination */
.pagination {display:block; text-align:center}
.pagination .number {border:1px solid #D5D5D5; background-color:#fff; color:#A3A3A5; font-size:14px; padding:0; border-radius:4px; margin-right:1px; width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center}
.pagination .number.active, .pagination .number:hover {border:1px solid #333; background:#333; color:#fff}
.pagination .fa-chevron-left {border:1px solid #D5D5D5; background-color:#FBFBFB; color:#B2B2B2; font-size:14px; padding:0; border-radius:4px; margin-right:1px; width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center; margin-right:17px}	
.pagination .fa-chevron-left:hover {border:1px solid #333; color:#333}
.pagination .fa-chevron-right {border:1px solid #D5D5D5; background-color:#FBFBFB; color:#B2B2B2; font-size:14px; padding:0; border-radius:4px; margin-right:1px; width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center; margin-left:17px}	
.pagination .fa-chevron-right:hover {border:1px solid #33; color:#333}
.pagination .fa-chevrons-left {border:1px solid #D5D5D5; background-color:#FBFBFB; color:#B2B2B2; font-size:14px; padding:0; border-radius:4px; margin-right:1px; width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center}	
.pagination .fa-chevrons-left:hover {border:1px solid #333; color:#333}
.pagination .fa-chevrons-right {border:1px solid #D5D5D5; background-color:#FBFBFB; color:#B2B2B2; font-size:14px; padding:0; border-radius:4px; margin-right:1px; width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center}	
.pagination .fa-chevrons-right:hover {border:1px solid #333; color:#333}


/* textTooltip */ 
.ellipsis {overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:pointer}
.textTooltip {display:none; position:absolute; background-color:#333; color:#fff; padding:5px; border-radius:4px; font-size:12px; font-weight:300; line-height:120%; max-width:280px; word-wrap:break-word; z-index:99999}


/* footer */
footer {border-top:1px solid #ccc; background:#F5F5F5}
footer > .inner {width:1200px; margin:0 auto; padding:50px 0; display:flex; align-items:baseline}
.footLogo > img {height:33px}
.footLogo {margin-right:30px}
.footerRight {width:100%}
.footerUtil {display:flex; align-items:center}
.footerUtil > a {font-size:15px; font-weight:500; color:#333}
.footerUtil > a:after {content:''; display:inline-block; width:1px; height:10px; background:#D1D1D1; margin:0 10px}
.footerUtil > a:last-child:after {display:none}
.footerRightBottom {font-size:15px; font-weight:400; color:#333333B3}
.footerRightBottom-span {display:flex; align-items:center}
.footerRightBottom-span span {display:flex; align-items:center}
.footerRightBottom-span span:after {content:''; display:inline-block; width:3px; height:3px; background:#33333326; margin:0 10px}
.footerRightBottom-span span:last-child:after {display:none}
.footerCopy {font-size:15px; font-weight:400; color:#333333B3}


/* 상품상세 */
.productInfo {display:flex; margin-top:15px}
.productInfoLeft {width:calc(100% - 430px)}
.productImgBig {width:420px; height:420px; border:1px solid #eee; border-radius:10px; box-sizing:border-box; overflow:hidden}
.productImgBig img {width:100%; height: 100%;}
.productInfoRight {width:410px; margin-left:20px}
.productInfoTit {font-size:32px; font-weight:700; color:#333}
.productInfoSubTit {font-size:16px; font-weight:400; color:#333; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}
.productImgPreview {display:flex; align-items:center; gap:15px; margin-top:15px}
.productImgPreview > .productImgPreviewThum {background:none; border:1px solid #aaa; border-radius:5px; box-shadow:none; width:72px; height:72px; padding:0; box-sizing:border-box; overflow:hidden; opacity:0.3; transition:.3s}
.productImgPreview > .productImgPreviewThum img {width:100%; height:100%;}
.productImgPreview > .productImgPreviewThum.active, .productImgPreview > .productImgPreviewThum:hover {opacity:1}
.productInfoList {display:flex; align-items:flex-start; margin-bottom:12px}
.productInfoList > dt {display:flex; align-items:center; justify-content:space-between; width:88px; box-sizing:border-box; margin-right:10px; font-size:15px; font-weight:700; color:#333}
.productInfoList > dt:after {content:''; display:block; width:1px; height:14px; background:#aaa}
.productInfoList > dd {width:calc(100% - 100px); font-size:15px; font-weight:300; color:#666}
.productInfoList > dd.productST {overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; white-space:normal}
.productInfoBox {background:#F2F2F2; border-radius:5px; padding:15px; box-sizing:border-box}
.productInfoBox > div {margin-bottom:8px}
.productInfoBox > div:last-child {margin-bottom:0}
.reco_thum {display:flex; flex-shrink:0; align-items:center; justify-content:center; width:160px; height:160px; overflow:hidden; border-radius:10px; border:1px solid #ccc; box-sizing:border-box}
.recommendTxt {font-size:14px; font-weight:500; color:#333; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:pointer; margin-top:8px}
.recoSwiperControl {display:flex; align-items:center}
.recoSwiperControl .recommendSwiper-pagination {font-size:12px; font-weight:300; margin-right:10px}
.recoSwiperControl .recommendSwiper-pagination .swiper-pagination-current {font-weight:500}
.recoSwiperControl .recommendSwiper-prev {display:flex; align-items:center; justify-content:center; flex-shrink:0; width:18px; height:18px; border:1px solid #E0E0E0; font-size:9px}
.recoSwiperControl .recommendSwiper-next {display:flex; align-items:center; justify-content:center; flex-shrink:0; width:18px; height:18px; border:1px solid #E0E0E0; font-size:9px; margin-left:-1px}


.noticeBtn {border:1px solid #E00128; color:#E00128; background:#fff; display:inline-flex; align-items:center; justify-content:center; min-width:60px; height:30px; font-size:14px; font-weight:700}


/* 우측 영역 */
.rightBoxWrap {position:absolute; top:20px; width:calc(100% - 50px); height:820px; overflow-y:auto}
.rightBox {background:#fff; border-radius:10px; padding:20px; box-sizing:border-box; width:100%; box-shadow:0 3px 5px rgba(0,0,0,0.04)}
.rightBox.alertSt {color:#fff}
.rightBoxList {display:flex; align-items:baseline; justify-content:space-between; margin-bottom:10px}
.rightBoxList:last-child {margin-bottom:0}
.rightBoxList > dt {display:flex; align-items:center; font-size:14px; font-weight:700; color:#333; margin-right:10px}
.rightBoxList > dd {font-size:14px; font-weight:300; color:#333; text-align:right; letter-spacing:-0.75px}
.rightBoxList2 {display:flex; align-items:baseline; margin-bottom:10px}
.rightBoxList2:last-child {margin-bottom:0}
.rightBoxList2 > dt {display:flex; align-items:baseline; justify-content:space-between; flex-shrink:0; font-size:14px; font-weight:600; color:#333; margin-right:10px; letter-spacing:-0.75px}
.rightBoxList2 > dt:after {content:''; display:block; width:1px; height:11px; background:#aaa; margin-left:10px}
.rightBoxList2 > dd {font-size:14px; font-weight:300; color:#333; text-align:left; word-break:break-all; letter-spacing:-0.75px}
.rightBoxList3 {display:flex; align-items:baseline; justify-content:space-between; margin-bottom:8px}
.rightBoxList3:last-child {margin-bottom:0}
.rightBoxList3 > dt {display:flex; align-items:baseline; justify-content:space-between; flex-shrink:0; font-size:14px; font-weight:400; color:#333; margin-right:10px; letter-spacing:-0.75px}
.rightBoxList3 > dt:after {content:''; display:block; width:1px; height:11px; background:#aaa; margin-left:10px}
.rightBoxList3 > dd {font-size:14px; font-weight:300; color:#333; text-align:left; word-break:break-all; letter-spacing:-0.75px}
.rightBoxList4 {display:flex; align-items:baseline; justify-content:space-between; margin-bottom:10px}
.rightBoxList4:last-child {margin-bottom:0}
.rightBoxList4 > dt {display:flex; align-items:center; font-size:15px; font-weight:700; color:#333; margin-right:10px}
.rightBoxList4 > dd {font-size:15px; font-weight:700; color:#333; text-align:right; letter-spacing:-0.75px}
.rightBoxListSub {display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap}
.rightBoxListSub > dt {display:flex; align-items:center; font-size:13px; font-weight:500; color:#333; margin-right:10px}
.rightBoxListSub > dd {font-size:13px; font-weight:300; color:#333; text-align:right}


.boxStyle {width:100%; border-radius:5px; background:#F3F3F3; box-sizing:border-box; padding:10px; margin-top:5px; position:relative}
.boxStyle2 {width:100%; border-radius:8px; background:#F3F3F3; box-sizing:border-box; padding:20px; position:relative}
.boxStyle3 {width:100%; border-radius:8px; background:#fff; border:1px solid #ccc; box-sizing:border-box; padding:20px; position:relative}
.boxStyle4 {width:100%; border-radius:8px; background:#F3F3F3; box-sizing:border-box; padding:40px; position:relative}
.boxStyle5 {width:100%; border-radius:8px; background:#fff; border:1px solid #01A3B8; box-sizing:border-box; padding:30px; position:relative}
.topBox {width:100%; border-radius:8px; background:#F3F3F3; box-sizing:border-box; padding:30px 40px; position:relative}
.modalStyle .rightBoxListSub > dt {font-size:15px}
.modalStyle .rightBoxListSub > dd {font-size:14px}
.selectOption {background:inherit; border:none; box-shadow:none; border-radius:0; padding:0; overflow:visible; cursor:pointer}
.selectOption i {margin-left:4px}
.selectOption.active i:before {content:"\f077"}
.optionBox {display:none; width:100%; border-radius:5px; border:1px solid #ccc; box-sizing:border-box; padding:10px 8px; margin-top:5px; overflow-y:auto; max-height:300px}
.optionBox.active {display:block}
.rightBoxTotal {display:flex; align-items:baseline; justify-content:space-between; border-top:1px solid}
.rightBoxTotal > dt {display:flex; align-items:center; font-size:15px; font-weight:700; margin-right:10px; color:#E00128}
.rightBoxTotal > dd {font-size:25px; font-weight:700; text-align:right; padding-top:10px; color:#E00128}
.rightBoxTotal > dd .won {font-size:15px; font-weight:700; text-align:right; margin-left:5px}


/* table */
.optionTbl {width:100%; background:#fff; text-align:center; border-top:none; border-bottom:none}
.optionTbl thead th {background-color:#F2F2F2; font-size:11px; font-weight:600; color:#333; padding:9px 0; border-right:1px solid #fff; border-bottom:none; vertical-align:middle; text-align:center}
.optionTbl thead th:first-child {border-radius:6px 0 0 6px}
.optionTbl thead th:last-child {border-radius:0 6px 6px 0; border-right:none}
.optionTbl tbody th {font-size:12px; font-weight:600; color:#333; padding:4px 4px; border-left:none; border-right:none; border-bottom:1px solid #F2F2F2; vertical-align:middle; background-color:#F1F1F1}
.optionTbl tbody td {font-size:12px; font-weight:400; color:#333; padding:4px 4px; border-left:none; border-right:none; border-bottom:1px solid #F2F2F2; vertical-align:middle; height:26px}
.optionTbl.paddingMd tbody td {font-size:12px; font-weight:400; color:#333; padding:10px 10px; border-left:none; border-right:none; border-bottom:1px solid #F2F2F2; vertical-align:middle; height:26px}
.optionTbl tbody tr:last-child td {border-bottom:none}
.optionTbl .brNone {border-right:none !important}

.basketTbl {table-layout:fixed; width:100%; background:#fff; text-align:center; border-top:1px solid #333; border-bottom:none; margin-top:20px}
.basketTbl thead th {background-color:#fff; font-size:15px; font-weight:400; color:#333; padding:15px 0; border-right:none; border-bottom:1px solid #ddd; vertical-align:middle; text-align:center}
.basketTbl tbody td {border:none; padding:20px 0; position:relative; border-bottom:1px solid #ddd; vertical-align:top; position:relative}
.basketTbl .br:after {content:''; display:block; width:1px; height:calc(100% - 40px); background:#ddd; position:absolute; top:20px; right:0}

.tblSkin1 {width:100%; background:#fff; text-align:center; border-top:1px solid #333; border-bottom:none; word-break:break-all}
.tblSkin1 thead th {background-color:#F1F1F1; font-size:14px; font-weight:700; color:#333; padding:15px 10px; border-right:1px solid #ddd; border-bottom:1px solid #ddd; vertical-align:middle; text-align:center}
.tblSkin1 tbody th {background-color:#F1F1F1; font-size:14px; font-weight:700; color:#333; padding:15px 10px; border-right:1px solid #ddd; border-bottom:1px solid #ddd; vertical-align:middle; text-align:center}
.tblSkin1 tbody td {padding:15px 10px; position:relative; border-right:1px solid #ddd; border-bottom:1px solid #ddd; vertical-align:middle; position:relative; font-size:14px; text-align:center; line-height:130%}
.tblSkin1 tfoot th {background-color:#F1F1F1; font-size:14px; font-weight:700; color:#333; padding:12px 10px; border-right:1px solid #ddd; border-bottom:1px solid #ddd; vertical-align:middle; text-align:center}
.tblSkin1 thead tr > th:last-child {border-right:none; border-left:1px solid #ddd}
.tblSkin1 tbody tr > td:last-child {border-right:none; border-left:1px solid #ddd}
.tblSkin1 tfoot tr > th:last-child {border-right:none; border-left:1px solid #ddd}
.tblSkin1 tr:hover td {background-color:#f7f7f7}
.tblSkin1.hoverNone tr:hover td {background-color:inherit}
.tblSkin1.pdLarge thead th {padding:15px 12px}
.tblSkin1.pdLarge tbody th {padding:20px 12px}
.tblSkin1.pdLarge tbody td {padding:20px 12px}
.tblSkin1.small thead th {padding:10px 10px}
.tblSkin1.small tbody th {padding:10px 10px}
.tblSkin1.small tbody td {padding:10px 10px}
.tblSkin1.xsmall thead th {padding:5px 2px}
.tblSkin1.xsmall tbody th {padding:10px 10px}
.tblSkin1.xsmall tbody td {padding:10px 10px}
.tblSkin1 .bl {border-left:1px solid #3333331A; border-bottom:none}
.tblSkin1 .bl2 {border-left:1px solid #3333331A}
.tblSkin1 .brNone {border-right:none !important}
.tblSkin1 .blNone {border-left:none !important}
.viewContent {display:none}
.viewContent.active {display:table-row}
.viewContent > td{padding:20px 30px !important; background:#f5f5f5 !important}
.viewContent:hover td {background-color:#f5f5f5 !important}
.qWrap {display:flex}
.qWrap > i {flex-shrink:0; display:flex; align-items:center; justify-content:center; width:25px; height:25px; border-radius:100%; background:#333; color:#fff; font-size:13px; margin-right:10px}
.qWrapMore {width:100%; margin-top:4px}
.aWrap {display:flex}
.aWrap > i {flex-shrink:0; display:flex; align-items:center; justify-content:center; width:25px; height:25px; border-radius:100%; background:#01A3B8; color:#fff; font-size:13px; margin-right:10px}
.aWrapMore {width:100%; margin-top:4px}
.deleteInquiry {background:inherit ; border:none; box-shadow:none; border-radius:0; padding:0; overflow:visible; cursor:pointer}

.tblBoard {width:100%; background:#fff; text-align:center; border-top:2px solid #333; border-bottom:2px solid #333; word-break:break-all}
.tblBoard thead th {background-color:#fff; font-size:14px; font-weight:700; color:#333; padding:15px 20px; border-right:1px solid #ddd; border-bottom:1px solid #333; vertical-align:middle; text-align:center}
.tblBoard tbody th {background-color:#F1F1F1; font-size:14px; font-weight:700; color:#333; padding:25px 20px; border-right:1px solid #ddd; border-bottom:1px solid #ddd; vertical-align:middle; text-align:center}
.tblBoard tbody td {padding:20px 15px; position:relative; border-right:1px solid #ddd; border-bottom:1px solid #ddd; vertical-align:middle; position:relative; font-size:14px; text-align:center; line-height:130%}
.tblBoard thead tr > th:last-child {border-right:none}
.tblBoard tbody tr > td:last-child {border-right:none}
.tblBoard tr:hover td {background-color:#f7f7f7}
.tblBoard.hoverNone tr:hover td {background-color:inherit}
.tblBoard .linkText {font-size:15px}

.topTblSkinWrap {border:1px solid #33333366; border-radius:8px; box-sizing:border-box; overflow:hidden}
.topTblSkin {width:100%; background:#fff; text-align:center; word-break:break-all}
.topTblSkin > tbody > tr > th {background-color:#3333330D; font-size:14px; font-weight:700; color:#333; padding:10px 15px; vertical-align:middle; text-align:left; border-bottom:1px solid #3333331A}
.topTblSkin > tbody > tr > td {padding:10px 15px; vertical-align:middle; font-size:14px; text-align:left; border-bottom:1px solid #3333331A; height:62px}
.topTblSkin > tbody > tr:last-child > th, .topTblSkin > tbody > tr:last-child > td {border-bottom:none}
.topTblSkin .bbNone {border-bottom:none}
.topTblSkin .bl {border-left:1px solid #3333331A; border-bottom:none}
.topTblSkin .bl2 {border-left:1px solid #3333331A}

.tblScroll {overflow-x:auto; padding-bottom:10px}
.tblScroll table {min-width:100%; width:max-content}

.overflow-y-table {width:100%; max-width:100%; overflow-y:auto; border-top:1px solid #333}
.overflow-y-table thead {position:sticky; top:0; background-color:#f4f4f4; z-index:1; border-bottom:1px solid #ddd}
.overflow-y-table tfoot {position:sticky; bottom:0; background-color:#f4f4f4; z-index:1; border-bottom:1px solid #ddd}
.overflow-y-table .tblSkin1 {border-top:none}

.overflow-xy-table {overflow-x:auto; border-top:1px solid #333}
.overflow-xy-table table {min-width:100%; width:max-content;; border-top:none}
.overflow-xy-table table thead {position:sticky; top:0; background-color:#f4f4f4; z-index:9; border-bottom:1px solid #ddd}
.overflow-xy-table table tfoot {position:sticky; bottom:0; background-color:#f4f4f4; z-index:9; border-bottom:1px solid #ddd}


.dragging {background-color:#f0f0f0; opacity:0.7}


.addThum {border:1px solid #ccc}
.addTit {font-size:12px; font-weight:700; color:#333; margin:0 0 5px 0}
.addTxt {font-size:11px; font-weight:700; color:#333; margin:4px 0 0 0}
.addList {display:flex; align-items:baseline; margin-bottom:2px}
.addList > dt {display:flex; align-items:center; flex-shrink:0; font-size:11px; font-weight:500; line-height:10px; color:#333; margin-right:5px}
.addList > dd {font-size:11px; font-weight:300; line-height:10px; color:#333}
.btnPlus {background:inherit; border:none; box-shadow:none; border-radius:0; padding:0; overflow:visible; cursor:pointer; font-size:14px}
.modalStyle .addTit {font-size:14px; font-weight:700; color:#333; margin:0 0 10px 0}
.modalStyle .addTxt {font-size:13px; font-weight:700; color:#333; margin:5px 0 0 0}
.modalStyle .addList {margin-bottom:4px}
.modalStyle .addList > dt {font-size:12px; line-height:12px}
.modalStyle .addList > dd {font-size:12px; line-height:12px}


/* 장바구니 */
.basketTabWrap {display:flex; justify-content:space-between}
.basketTab {display:flex}
.basketTab > a {display:flex; align-items:center; justify-content:center; width:150px; height:50px; background:#F2F2F2; color:#333; font-size:15px; font-weight:600; transition:.3s}
.basketTab > a:hover {background:#ccc}
.basketTab > a:first-child {border-top-left-radius:8px; border-bottom-left-radius:8px}
.basketTab > a:last-child {border-top-right-radius:8px; border-bottom-right-radius:8px}
.basketTab > a.active {color:#fff; position:relative}
.basketTab > a.active::after {content:''; position:absolute; top:100%; left:50%; transform:translateX(-50%); width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent; border-top:7px solid}
.basketGear {border:none; display:flex; align-items:center; justify-content:center; width:50px; height:50px; background:#F2F2F2; border-radius:8px; box-sizing:border-box; font-size:16px; transition:.3s}
.basketGear:hover, .basketGear:focus {background:#333; color:#fff}
.basketInfo {margin-top:30px; display:flex; justify-content:space-between; gap:30px}
.basketInfoBox {background:#F2F2F2; border-radius:10px; padding:20px; width:100%}
.basketInfoBoxList {display:flex; align-items:baseline; margin-bottom:10px}
.basketInfoBoxList > dt {display:flex; align-items:center; justify-content:space-between; width:60px; box-sizing:border-box; margin-right:10px; font-size:14px; font-weight:600; color:#333}
.basketInfoBoxList > dt:after {content:''; display:block; width:1px; height:12px; background:#aaa}
.basketInfoBoxList > dd {width:calc(100% - 100px); font-size:14px; font-weight:300; color:#666}
.basketTopWrap {display:flex; align-items:center; justify-content:space-between; margin-top:50px}
.basketTopTit {flex-shrink:0; font-size:16px; font-weight:400; color:#333}
.basketTopTit > strong {font-weight:700}
.basketTopBtn {display:flex; align-items:center; justify-content:flex-end; width:100%; gap:10px}
.basketList {display:flex}
.bl_Thum {display:flex; flex-shrink:0; width:125px; height:125px; overflow:hidden; border-radius:10px; border:1px solid #ccc; box-sizing:border-box; margin-right:20px}
.bl_Thum2 {display:flex; flex-shrink:0; width:150px; height:150px; overflow:hidden; border-radius:10px; border:1px solid #ccc; box-sizing:border-box}
.bl_Thum3 {display:flex; flex-shrink:0; width:100px; height:100px; overflow:hidden; border-radius:10px; border:1px solid #ccc; box-sizing:border-box}
.bl_info {display:block; padding:0 20px}
.bl_info h3 {display:block; font-size:18px; font-weight:600; color:#333; margin:0 0 10px 0}
.bl_info h4 {font-size:14px; font-weight:400; color:#333; line-height:17px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}
.bl_spec {margin-top:17px; display:flex; flex-wrap:wrap}
.bl_spec > dl {width:100%; display:flex; margin-bottom:2px}
.bl_spec > dl > dt {flex-shrink:0; font-size:14px; font-weight:400; color:#858585; margin-right:10px; min-width:80px}
.bl_spec > dl > dd {font-size:14px; font-weight:400; color:#333}
.bl_spec2 {display:flex; flex-wrap:wrap; padding:0 20px}
.bl_spec2 > dl {width:100%; display:flex; align-items:center; margin-bottom:10px}
.bl_spec2 > dl > dt {flex-shrink:0; font-size:14px; font-weight:500; color:#333; margin-right:10px; min-width:80px}
.bl_spec2 > dl > dd {width:100%; font-size:14px; font-weight:400; color:#333}
.bl_btnWrap {position:absolute; bottom:20px; right:20px; display:flex; justify-content:flex-end; width:calc(100% - 40px); gap:10px}
.formTit {font-size:15px; font-weight:500; color:#333}


.uploadThum {border:1px solid #ccc; box-sizing:border-box; width:130px; height:130px; margin:0 auto 10px auto}
.tagSt {display:inline-flex; align-items:center; justify-content:center; background:#F2F2F2; border-radius:5px; box-sizing:border-box; padding:0 15px; height:34px; font-size:13px; font-weight:500; color:#333; margin-right:5px; margin-bottom:5px}
.tagSt > span {margin-right:2px}
.fileTag {display:inline-flex; align-items:center; justify-content:center; background:#F2F2F2; border:1px solid #333; border-radius:5px; box-sizing:border-box; padding:0 15px; height:34px; font-size:13px; font-weight:400; color:#333}
.fileTag .fileDel {border:none; margin-left:5px; padding:0}
.fileTag.fileMd {height:40px; font-size:14px}
.fileTag.fileXs {padding:0 10px; height:32px; font-size:13px}

.orderTotal {display:flex; align-items:center; background:#eee; border-radius:8px; overflow:hidden; height:80px}
.orderTotal > h2 {display:flex; align-items:center; justify-content:center; flex-shrink:0; width:250px; font-size:20px; font-weight:600; color:#fff; margin:0}
.orderTotal > div {display:flex; align-items:center; justify-content:center; width:100%; gap:30px}
.orderTotal > div > h3 {margin:0; font-size:18px}
.orderTotal > div > h3 .totalAmount {font-size:26px; margin-left:10px}
.orderTotal > div > span {font-size:20px}


/* upload-box */
.file-list {margin-top:5px}
.file-item {display:flex; align-items:center; margin-bottom:4px}
.file-item span {overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-right:10px; font-size:14px}
.file-item button {flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; color:#fff !important; background:#333; border:none; height:22px; padding:0 10px; box-sizing:border-box; border-radius:4px; font-size:12px; font-weight:400; transition:.3s}
.file-item button:hover {color:#fff !important; background:#000}


/* tab */
.tabStyle {display:flex; flex-wrap:wrap; border-bottom:1px solid #333; margin-left:1px}
.tabStyle > a {display:inline-flex; align-items:center; justify-content:center; width:calc(20% - 3px); height:56px; padding:0 10px; box-sizing:border-box; font-size:16px; font-weight:500; background:#f8f8f8; border:1px solid #ddd; border-bottom:none; transition:.3s; position:relative; margin-left:-1px}
.tabStyle.tab8 > a {width:calc(12.5% + 1px); height:56px; padding:0 10px; box-sizing:border-box; font-size:16px; font-weight:500; background:#f8f8f8; border:1px solid #ddd; border-bottom:none; transition:.3s; position:relative; margin-left:-1px}
.tabStyle > a.active {color:#333; border-color:#333; border-bottom:none; background:#fff; position:relative; z-index:9}
.tabStyle > a.active:before {content:''; display:block; width:100%; height:2px; position:absolute; top:0; background:#333}
.tabStyle > a.active:after {content:''; display:block; width:100%; height:3px; position:absolute; top:100%; background:#fff}

.subTabStyle {display:flex; flex-wrap:wrap; border-bottom:1px solid #01A3B8; margin-left:1px; position:relative; top:0; z-index:1000}
.subTabStyle.fixed {position:fixed; top:0; left:auto; right:auto; width:inherit; background-color:#fff; box-shadow:0 2px 5px rgba(0, 0, 0, 0.1); margin-top:0 !important}
.subTabStyle > li {display:inline-flex; align-items:center; justify-content:center; width:calc(20% + 1px); margin-left:-1px}
.subTabStyle > li > a {display:inline-flex; align-items:center; justify-content:center; width:100%; height:50px; padding:0 10px; box-sizing:border-box; font-size:15px; font-weight:500; background:#f8f8f8; transition:.3s; border:1px solid #ddd; border-bottom:none; position:relative}
.subTabStyle > li > a:hover {background:#eee}
.subTabStyle > li.active > a {color:#01A3B8; border-color:#01A3B8; border-bottom:none; background:#fff; z-index:9; position:relative}
.subTabStyle > li.active > a:before {content:''; display:block; width:100%; height:2px; position:absolute; top:0; background:#01A3B8}
.subTabStyle > li.active > a:after {content:''; display:block; width:100%; height:1px; position:absolute; top:100%; background:#fff}


/* subCateMenu */
.subCateMenu {display:flex; align-items:center}
.subCateMenu > li {display:flex; align-items:center; position:relative; font-size:13px; font-weight:400; color:#666}
.subCateMenu > li:after {font-family:"Font Awesome 6 Pro"; content:"\f054"; display:inline-block; margin:0 12px; font-size:8px}
.subCateMenu > li:last-child:after {display:none}
.subCateMenu > li > a {display:flex; align-items:center; font-size:13px; font-weight:400; color:#666}
.subCateMenu > li:last-child > a {font-weight:600; color:#666}
/*.subCateMenu > li > a:after {font-family:"Font Awesome 6 Pro"; content:"\f13a"; display:inline-block; font-size:10px; color:#999; margin-left:4px}*/
.subCateMenu > li:last-child > a:after {font-weight:400}
.subCateMenu > li.home > a:after {display:none}
.subCateMenuDep2 {display:none; position:absolute; top:calc(100% + 5px); left:-10px; min-width:120px; max-width:max-content; height:120px; overflow-y:auto; padding:10px; background:#fff; border:1px solid #ddd; border-radius:10px; box-shadow:0 5px 10px rgba(0, 0, 0, .05)}
.subCateMenu > li.active .subCateMenuDep2 {display:block}
.subCateMenuDep2 > a {display:block; font-size:12px; font-weight:400; color:#333; margin-bottom:5px}
.subCateMenuDep2 > a:last-child {margin-bottom:0}


/* productCate */
.productCateTit {display:flex; align-items:center; justify-content:space-between; cursor:pointer}
.productCateTit > i {font-size:12px; color:#555}
.productCateTit.active > i:before {content:"\f077"}
.productCate {display:none; border-top:1px solid #eee; padding-top:12px}
.productCate.active {display:block}
.productCate > li > a {display:flex; align-items:center; justify-content:space-between; padding-bottom:12px; font-size:14px; font-weight:400; color:#333}
.productCate > li > a > i {font-size:12px; color:#555}
.productCate > li > a.active {font-weight:600}
.productCate > li > a.active > i:before {content:"\f077"}
.productCate > li > ul {display:none; margin-left:10px}
.productCate > li > ul.active {display:block}
.productCate > li > ul > li > a {display:flex; align-items:center; justify-content:space-between; padding-bottom:5px; font-size:13px; font-weight:400; color:#333}
.productCate > li > ul > li:last-child > a {padding-bottom:10px}
.productCate > li > ul > li > a > i {font-size:12px; color:#555}
.productCate > li > ul > li > a > div {display:flex; align-items:center}
.productCate > li > ul > li > a .cateNum {font-size:11px; font-weight:600; color:#33333366; margin-left:5px}
.productCate > li > ul > li > a.active {font-weight:600}
.productCate > li > ul > li > a.active > i:before {content:"\f077"}
.productCate > li > ul > li > ul {display:none; margin-left:10px; background:#F5F5F5; padding:6px 10px}
.productCate > li > ul.active > li > ul.active {display:block; margin-bottom:8px}
.productCate > li > ul.active > li > ul > li > a {font-size:12px; font-weight:400; color:#333; margin-bottom:2px}
.modalStyle .productCate {border-top:none; padding-top:0}
.modalStyle .productCate > li > a {font-size:16px}
.modalStyle .productCate > li > ul > li > ul {padding:10px}
.modalStyle .productCate > li > ul > li > a {font-size:15px; padding-bottom:10px}
.modalStyle .productCate > li > ul.active > li > ul > li > a {font-size:14px; margin-bottom:5px; display:block}
.modalStyle .productCate > li > ul.active > li > ul > li:last-child > a {margin-bottom:0}
.scMore {font-size:13px; font-weight:600; color:#33333366}
.scMoreList {display:none}

.producListTit {display:flex; align-items:center; font-size:24px; font-weight:700; color:#333; margin-bottom:20px}
.producListTit > div:after {font-family:"Font Awesome 6 Pro"; content:"\f054"; display:inline-block; margin:0 8px; font-size:14px}
.producListTit > div:last-child {font-weight:700}
.producListTit > div:last-child:after {display:none}

.producListTit2 {font-size:32px; font-weight:700; color:#333}
.producSortBox {background:#F7F7F7; width:100%; padding:13px 20px; position:relative}
.listStyleBtnWrap {display:flex; margin-left:10px}
.listStyleBtnWrap > .listStyleBtn {background:inherit ; border:none; box-shadow:none; border-radius:0; padding:0; overflow:visible; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border:1px solid #DCDCDC; box-sizing:border-box; background:#fff; color:#ccc}
.listStyleBtnWrap > .listStyleBtn:first-child {border-radius:5px 0 0 5px}
.listStyleBtnWrap > .listStyleBtn:last-child {border-left:1px solid #ccc; margin-left:-1px; border-radius:0 5px 5px 0}
.listStyleBtnWrap > .listStyleBtn.active i {font-weight:900; color:#333}


.payMethod {display:flex; gap:20px}
.pm-item {background:inherit; border:none; box-shadow:none; border-radius:0; padding:0; overflow:visible; cursor:pointer; display:flex; align-items:center; justify-content:center; width:100%; height:60px; background:#eee; font-size:15px; font-weight:500}
.pm-item.active {background:#01a3b8; color:#fff}

.leftMenu > li {margin-bottom:15px}
.leftMenu > li > a {display:flex; align-items:center; padding:5px 0; font-size:16px; font-weight:600; color:#333; border-bottom:1px solid #eee; margin-bottom:5px}
.leftMenu > li > ul {padding:0}
.leftMenu > li > ul > li {margin-bottom:2px}
.leftMenu > li > ul > li:last-child {margin-bottom:0}
.leftMenu > li > ul > li > a {font-size:14px; font-weight:400; color:#333}
.leftMenu > li > ul > li > a.active, .leftMenu > li > ul > li > a:hover {font-weight:600}


.orderStepWrap {display:flex}
.orderStepWrap > div {width:100%; position:relative}
.orderStepWrap > div:after {font-family:"Font Awesome 6 Pro"; font-size:28px; font-weight:400; content:"\f105"; position:absolute; top:34px; right:0}
.orderStepWrap > div:last-child:after {display:none}
.orderStepWrap > div > i {display:flex; align-items:center; justify-content:center; width:95px; height:95px; margin:0 auto; background:#ddd; font-size:38px; border-radius:100%}
.orderStepWrap > div.active > i {color:#fff}
.orderStep-tit {font-size:20px; font-weight:700; margin:15px 0 10px 0}
.orderStep-txt {font-size:15px; font-weight:400; line-height:130%}


.loginWrap {max-width:450px; margin:0 auto; text-align:center}


/* faq */
.faq_item {display:none}
.faq_item_wrap .show {display:block}
.faq_item_wrap {margin-top:30px}
.faq_item_wrap > .faq_item {border:1px solid #D8DBDE; border-radius:5px; padding:0 20px; margin-bottom:10px}
.faqTitle {display:flex; align-items:center; justify-content:space-between; padding:20px 0; cursor:pointer}
.faqTitle > div {display:flex; align-items:baseline}
.faqQ {font-size:20px; font-weight:700; margin-right:10px}
.faqA {font-size:20px; font-weight:700; color:#333; margin-right:10px}
.faqTit {font-size:16px; font-weight:700; line-height:150%; color:#191919; margin-bottom:0}
.faqIcon {font-size:20px; color:#6F767C}
.faqAn {display:none}
.faqAn .faqTxt {font-size:16px; font-weight:400; line-height:140%; color:#6F767C; margin-top:0}
.faq_item_wrap > .faq_item.active .faqAn {display:flex; margin-bottom:20px}
.faq_item_wrap > .faq_item.active .faqTitle {height:auto; border-bottom:1px dotted #D8DBDE; margin-bottom:20px}
.faq_item_wrap > .faq_item.active .faqIcon:before {content:"\f077"}


.loginFind {display:flex; align-items:center}
.loginFind > li {margin-right:10px; padding-right:14px; position:relative}
.loginFind > li:before {content:''; display:block; width:4px; height:4px; background:#DCDEE5; border-radius:100%; position:absolute; right:0; top:6px}
.loginFind > li:last-child {margin-right:0px; padding-right:0; position:relative}
.loginFind > li:last-child:before {display:none}
.loginFind > li a {font-size:15px; font-weight:400; color:#333}
.loginFind > li a:hover {color:#0085A1; font-weight:500}


.searchSortWrap {display:flex; align-items:center; justify-content:space-between}
.searchResults {font-size:14px; font-weight:400; color:#333}
.searchResults > strong {font-weight:700}
.searchSortListWrap {display:flex; align-items:center; justify-content:flex-end}
.searchSortList {display:flex; align-items:center}
.searchSortList > a {display:inline-flex; font-size:13px; font-weight:400; color:#000; margin-left:16px}
.searchSortList > a.active, .searchSortList > a:hover {font-weight:600}
.searchSortList > a.active:before {font-family:"Font Awesome 6 Pro"; content:"\f00c"; margin-right:4px}

.searchFilterWrap {display:flex; align-items:center; flex-wrap:wrap}
.resetSearchBtn {display:flex; align-items:center; justify-content:center; background:#fff; border:1px solid #ccc; box-shadow:none; border-radius:5px; box-sizing:border-box; padding:0 10px; cursor:pointer; height:34px; font-size:13px; font-weight:500; color:#333; margin-right:10px; margin-bottom:5px}
.resetSearchBtn > i {margin-right:5px}
.resetSearchBtn:hover {background:#eee}
.resetSearchBtn:active {background:#ddd}
.searchFilter {display:flex; align-items:center; justify-content:center; background:#F2F2F2; border-radius:5px; box-sizing:border-box; padding:0 10px; cursor:pointer; height:34px; font-size:13px; font-weight:500; color:#333; margin-right:5px; margin-bottom:5px}
.searchFilter span {margin-right:4px}
.searchFilterDel {margin-left:10px}


/* 선택한 상품 */
.selectedWrap {margin-top:10px; background:#F2F2F2; border-radius:10px; position:relative; padding:12px; box-sizing:border-box}
.selectedTitle {font-size:12px; width:calc(100% - 15px)}
.selectedPriceWrap {display:flex; align-items:center; justify-content:space-between; margin-top:7px}
.selectedNumber {display:flex; align-items:center}
.btn-minus {display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border:1px solid #eee; border-radius:5px 0 0 5px; background:#fff; box-sizing:border-box; font-size:16px}
.btn-minus2 {display:inline-flex; align-items:center; justify-content:center; width:24px; height:32px; border:1px solid #eee; border-radius:5px 0 0 5px; background:#fff; box-sizing:border-box; font-size:16px}
.cnt {display:inline-flex; align-items:center; justify-content:center; width:35px; height:26px; border:1px solid #eee; border-left:none; border-right:none; background:#fff; box-sizing:border-box; text-align:center; font-size:12px}
.btn-plus {display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border:1px solid #eee; border-radius:0 5px 5px 0; background:#fff; box-sizing:border-box; font-size:16px}
.btn-plus2 {display:inline-flex; align-items:center; justify-content:center; width:24px; height:32px; border:1px solid #eee; border-radius:0 5px 5px 0; background:#fff; box-sizing:border-box; font-size:16px}
.selectedDel {background:inherit ; border:none; box-shadow:none; border-radius:0; padding:0; overflow:visible; cursor:pointer; position:absolute; top:10px; right:12px; color:#999}
.selectedPrice {font-size:13px}


/* 댓글 */
.commentsList {border-top:1px solid #ccc}
.commentsList > li {padding:10px 0 15px 0; border-bottom:1px solid #ccc}
.commentsListInfo > strong {font-size:14px}
.commentsListInfo > span {font-size:14px; margin-left:10px; color:#999}
.commentsListCon {font-size:14px; margin-top:5px}