@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;500;700&display=swap');

/* CSS Document */
html,body{width:100%;height:100%;background-color:#E9EDF2;}
body{padding:0;margin:0;font-family:'Nanum Gothic', 'Roboto', 'Noto Sans KR','sans-serif', 'Meiryo', 'Microsoft YaHei';font-size:14px;color:#1d1e1f;font-weight:400;line-height: 1.2;letter-spacing:-0.5px;-webkit-font-smoothing: antialiased; }
body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,tr,td,thead,tbody,form,fieldset,legend,input,textarea,button{margin:0;padding:0;}
h1, h2, h3, h4, h5, h6{font-weight:normal;}
body *{-webkit-box-sizing:border-box;box-sizing: border-box;-moz-box-sizing: border-box;}
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display: block;}
ul,ol,li,dl,dt,dd {list-style:none;}
i,em,address{font-style:normal;}
label,button{cursor:pointer;-webkit-tap-highlight-color: transparent;}
button{position:relative;outline:none;touch-action: manipulation;}
hr,legend {position:absolute;left:-1000%;top:0;width:1px;height:1px;font-size:0;line-height:0;overflow:hidden;}
fieldset,iframe {border:none;vertical-align:middle;}
img{max-width:100%;vertical-align:top;border:0;image-rendering:-webkit-optimize-contrast;}
caption {/*position:absolute;left:-1000%;top:0;width:1px;height:1px;font-size:0;line-height:0;overflow:hidden*/line-height:0;visibility:hidden;font-size:0;}
input,select,button{vertical-align:middle;font-family:inherit;outline:none;font:inherit;}
textarea{font:inherit;outline:none;}
button{border:none;-webkit-tap-highlight-color: transparent;}
table{border:none; border-collapse:collapse; padding:0; border-spacing:0;}
table th{font-weight:400;}
table img{vertical-align:middle;}
a{text-decoration:none;color:inherit;-webkit-tap-highlight-color: transparent;}
a:link,a:visited,a:focus{text-decoration:none;}
a:hover,a:active{text-decoration:none;}
.blind{display:block;overflow:hidden;top:-1000em;position:absolute;}
::before, ::after, :before, :after {-webkit-box-sizing:border-box;box-sizing: border-box;-moz-box-sizing: border-box;}
a.under{text-decoration:underline;}

/*공통부분*/
input[type=text], input[type=password], input[type=tel], input[type=email], input[type=number]{height:42px;border-radius:0;border:1px solid #43485a;background:#fff;padding:0 16px;-webkit-appearance:none;-moz-appearance:none;appearance:none;transition:box-shadow 0.2s ease;}
textarea{border:1px solid #43485a;padding:12px 16px;border-radius:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;resize:none;transition:box-shadow 0.2s ease;}
select{border-radius:0;background:#fff;border:1px solid #43485a;height:42px;margin:0;padding:0 20px 0 12px;vertical-align:middle;background:#fff right 8px center / 10px auto url('./select_arrow.png') no-repeat;-webkit-appearance:none;-moz-appearance:none;appearance:none;transition:box-shadow 0.2s ease;}
/*button:active{filter:brightness(90%);}
a:active{filter:brightness(90%);}*/
input[type=text]:focus, input[type=password]:focus, input[type=tel]:focus, input[type=email]:focus, input[type=number]:focus, textarea:focus, select:focus, textarea:focus{border-color:#000 !important;box-shadow:inset 0 0 2px 1px rgba(67,72,90,0.1);}
input[type=text]:disabled, input[type=password]:disabled, input[type=tel]:disabled, input[type=email]:disabled, input[type=number]:disabled, textarea:disabled, select:disabled{background:#ddd !important;border-color:#d4d4d5 !important;color:#7d7d7d !important;}
input[type=text]:read-only, input[type=password]:read-only, input[type=tel]:read-only, input[type=email]:read-only, input[type=number]:read-only, textarea:read-only{background:#ddd;border-color:#d4d4d5;color:#7d7d7d;}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #7f7f7f; }
input::-ms-input-placeholder, textarea::-ms-input-placeholder { color: #7f7f7f; }
input::-moz-placeholder, textarea::-moz-input-placeholder { color: #7f7f7f; }
/*.requiredError:after{display:block;padding-top:2px;font-size:12px;color:#ff0000;content:'필수값을 입력해주세요';}*/
.requiredError input[required], .requiredError select[required]{border-color:#ff0000;}
[required].requiredError{border-color:#ff0000;}
@media (max-width:340px) {
    input[type=text], input[type=password], input[type=tel], input[type=email], input[type=number]{padding:0 12px;}
    textarea{padding:10px 12px;}
}

*::selection {
    background-color :#0583F2;
    color: #fff;
}

/**/
.fc_point01 {color:#0583f2 !important;}
.fc_point02 {color:#ff3b37 !important;}
.-transition {
    transition:all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition:all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -moz-transition:all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.scrollbar-design::-webkit-scrollbar-track {
  background-color:transparent;
  border: none;
  padding:0;
}
.scrollbar-design::-webkit-scrollbar {
  width:12px;
  background-color:transparent;
}
.addList.scrollbar-design::-webkit-scrollbar {
  width: 8px;
}
.scrollbar-design::-webkit-scrollbar-thumb {
  background-color:#d8d8d8;
  border-left:6px solid #E9EDF2;
  transition: all 0.6s ease;
}
.addList.scrollbar-design::-webkit-scrollbar-thumb {
  border:2px solid #fff;
}
.scrollbar-design:hover::-webkit-scrollbar-thumb {
  background-color:#bbb;
}

/**/
.chkForm .chkLabel {position:relative;display:block;width:22px;height:22px;border:1px solid #43485a;box-sizing:border-box;content:'';}
.chkForm > input[type=radio], .chkForm > input[type=checkbox] {display:none;}
.chkForm input[type=radio] ~ .chkLabel{border-radius:100%;}
.chkForm input[type=radio] ~ .chkLabel:after{position:absolute;left:6px;top:6px;right:6px;bottom:6px;border-radius:100%;background-color:transparent;transition:all 0.2s ease;content:'';}
.chkForm input[type=checkbox] ~ .chkLabel:after{position:absolute;left:0;top:0;right:0;bottom:0;font-size:18px;line-height:20px;font-weight:800;transition:all 0.2s ease;content:'';}
.chkForm input[type=radio]:checked ~ .chkLabel:after{background-color:#43485a;}
.chkForm input[type=checkbox]:checked ~ .chkLabel:after{background:none;font-family:xeicon;vertical-align:middle;content:"\e928";}

/*common*/
.innerWidth {position:relative;max-width:1220px; margin:0 auto;padding:0 20px;}

@media (max-width:860px) {
    .innerWidth {padding:0 15px;}
    .scroll-wrapper > .scroll-content {overflow:auto !important;}
}

/*header*/
header {position:fixed; z-index:20; left:0; top:0; right:0; width:100%; background-color:#fff;border-top:3px solid #0583F2;}
header > .innerWidth {display:flex;justify-content:flex-start;align-items:center;height:70px;transition:all 0.2s ease;}
header h1 { font-size:0;}
header h1 > a{display:block; width:180px; height:28px; margin:0 auto; background:center center / 180px auto url('./logo.png') no-repeat;image-rendering:-webkit-optimize-contrast;}

header .gnbWrap {display:flex; flex:1; justify-content:flex-end;}
header .gnb {display:flex;align-items:center;}
header .gnb > li {position:relative;}
header .gnb > li > a{position:relative;display:flex; align-items:center; justify-content:center; padding:12px 15px; font-size:16px; font-weight:700; transition:all 0.2s ease;}
header .gnb > li:hover > a, header .gnb > li > a.active{color:#0583f2;}
header .btnMenu {position:absolute;left:10px;top:50%;width:28px;height:28px;margin-top:-14px;display:none;border:none;background-color:#fff;}
header .btnMenu > span {position:absolute;left:5px;width:18px;height:2px;background:#000;transition:all 0.2s ease;transform-origin:left center;}
header.fixed .btnMenu > span {background-color:#000;}
header .btnMenu > span:nth-of-type(1) {top:6px;}
header .btnMenu > span:nth-of-type(2) {top:13px;}
header .btnMenu > span:nth-of-type(3) {top:20px;}

@media (max-width:860px) {
    header > .innerWidth {/*display:block;*/justify-content:center;height:60px !important;}
    header .btnMenu {display:block;}
    header.showGnb .btnMenu {}
    header.showGnb .btnMenu > span:nth-of-type(1) {width:20px;transform:rotate(45deg);}
    header.showGnb .btnMenu > span:nth-of-type(2) {width:0;}
    header.showGnb .btnMenu > span:nth-of-type(3) {width:20px;transform:rotate(-45deg);}

    header .gnbWrap {position:fixed;display:block;left:0;top:63px;right:0;bottom:0;background:rgba(0,0,0,0.5);visibility:hidden;opacity:0;transition:all 0.2s ease;}
    header.showGnb .gnbWrap {opacity:1;visibility:visible;}
    header .gnb {display:block;padding:8px 0;border-top:1px solid #e9ecf1;background-color:#fff;transform:translateY(-15px);visibility:hidden;opacity:0;transition:all 0.2s ease;}
    header .gnb > li {transform:translateY(-10px);opacity:0;transition:all 0.2s ease;}
    header.showGnb .gnb {transform:translateY(0);visibility:visible;opacity:1;}
    header.showGnb .gnb > li {transform:translateY(0);opacity:1;}
    header.showGnb .gnb > li:nth-of-type(1) {transition-delay:0.1s;}
    header.showGnb .gnb > li:nth-of-type(2) {transition-delay:0.2s;}
    header.showGnb .gnb > li:nth-of-type(3) {transition-delay:0.3s;}
    header.showGnb .gnb > li:nth-of-type(4) {transition-delay:0.4s;}
    header.showGnb .gnb > li:nth-of-type(5) {transition-delay:0.5s;}
    header.showGnb .gnb > li:nth-of-type(6) {transition-delay:0.6s;}
}


/*content*/
/**/
#container {height:100vh;min-height:768px;padding:90px 0 105px 0;}
#container > .innerWidth {display:flex;height:100%;}

@media (max-width:860px) {
    #container {height:auto;min-height:calc(100vh - 60px);padding:63px 0 20px 0;}
    #container > .innerWidth {display:block;height:auto;padding-top:16px;}
}

.categoryWrap {position:relative;display:flex;overflow:hidden;height:54px;margin-bottom:20px;background-color:#fff;
    -webkit-box-shadow: 0px 0px 6px 0px rgba(67,72,90,0.1);
    -moz-box-shadow: 0px 0px 6px 0px rgba(67,72,90,0.1);
    box-shadow: 0px 0px 6px 0px rgba(67,72,90,0.1);
}
.resultSide {position:relative;width:340px;background-color:#fff;margin-left:20px;
    -webkit-box-shadow: 0px 0px 6px 0px rgba(67,72,90,0.1);
    -moz-box-shadow: 0px 0px 6px 0px rgba(67,72,90,0.1);
    box-shadow: 0px 0px 6px 0px rgba(67,72,90,0.1);
}
.sideWrap {height:100%;}
.sideWrap .btnClose {position:absolute;display:none;right:8px;top:9px;width:36px;height:36px;text-align:center;background:none;}
.sideWrap .btnClose:before {font-family:xeicon;vertical-align:middle;color:#fff;font-size:18px;content:"\e921";}
.productTitle {position:relative;display:flex;align-items:flex-end;justify-content:space-between;height:54px;margin-bottom:20px;}
.productTitle span {font-size:24px;font-weight:700;}
.productTitle button {padding: 6px 8px; border-radius:4px;background-color:#ff3b37;color:#fff;font-size:12px;font-weight:700;}
.productWrap {flex:1; /* overflow:hidden; */ }
.productList {/*height:100%;*//*overflow-y:auto;*/height:calc(100% - 74px);-webkit-overflow-scrolling:touch;}

@media (max-width:860px) {
    .resultSide {position:fixed;display:none;top:0;right:0;bottom:0;left:0;z-index:100;width:auto;padding:30px 15px;margin:0;overflow-y:auto;box-shadow:none;background:rgba(0,0,0,0.5);}
    body.showModal {overflow:hidden;}
    body.showModal .resultSide {display:block;}
    .sideWrap {position:relative;width:100%;max-width:420px;height:auto;background-color:#fff;margin:0 auto;}
    .sideWrap .btnClose {display:block;}
    .productList {height:auto;}
}

/**/
.searchBox {position:relative;width:280px;padding-right:54px;border-left:1px solid #E9EDF2;}
.searchBox .btnSearch {position:absolute;right:0;top:0;width:54px;height:54px;background-color:#0583F2;color:#fff;}
.searchBox .keyword {border:none;height:54px;width:100%;padding:0 15px;font-size:16px;}

/**/
.categoryList {position:relative;/*display:flex;*/flex:1;}
.categoryList:after {
    position:absolute;z-index:1;right:0;top:0;bottom:0;width:15px;
    background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(67,72,90,0.1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(67,72,90,0.1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(67,72,90,0.1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    content:'';
}
.categoryList ul {/*overflow:hidden;*/display:flex;flex-wrap:nowrap;/*overflow-x:auto;padding:4px;*/}
.categoryList ul > li {/*flex:1 0 auto;padding:4px;*/flex:1 0 auto;overflow:hidden;padding:8px 4px;}
.categoryList ul > li:first-of-type{padding-left:8px;}
.categoryList ul > li:last-of-type{padding-right:8px;}
.categoryList ul > li > a {display:flex;flex:1;height:100%;justify-content:center;align-items:center;padding:0 10px;white-space:nowrap;border-radius:6px;border:1px solid #E9EDF2;transition:all 0.2s ease;}
.categoryList ul > li > a:hover {background-color:#0583F2;color:#fff;border-color:#0583F2;}
.categoryList ul > li > a.active {background-color:#0583F2;color:#fff;border-color:#0583F2;}

/**/
.productList {}
.productList ul.prd {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 8px;
    row-gap: 24px;
    /* display:flex;
    flex-wrap:wrap;
    align-items:stretch;
    justify-content:flex-start; */
}
.productList ul.prd > li {
    position: relative;
    /* width:calc(33.33% - 10px);
    margin-left:15px;
    margin-bottom:15px; */
    padding: 48px 0 0 0;
    border: 3px solid transparent;
    background-color:#fff;
    border-radius: 6px;
    box-sizing: border-box;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    /*-webkit-box-shadow: 0px 0px 6px 0px rgba(67,72,90,0.1);
    -moz-box-shadow: 0px 0px 6px 0px rgba(67,72,90,0.1);
    box-shadow: 0px 0px 6px 0px rgba(67,72,90,0.1);*/
}
.productList ul.prd > li.soldout {cursor:auto;overflow:hidden;}
.productList ul.prd > li.soldout:before {position:absolute;display:flex;align-items:center;justify-content:center;left:0;top:0;right:0;bottom:0;width:100%;height:100%;background-color:rgba(0,0,0,0.4);color:#fff;font-size:24px;font-weight:700;content:'SOLD OUT';}
.productList ul.prd > li.blank {cursor:auto;overflow:hidden;display:flex;align-items:center;justify-content:center;}
.productList ul.prd > li.blank:before {position:absolute;display:flex;align-items:center;justify-content:center;left:0;top:0;right:0;bottom:0;width:100%;height:100%;background-color:rgba(0,0,0,0.2);content:'';}
.productList ul.prd > li:nth-of-type(3n+1) {margin-left:0;}
/* .productList ul.prd > li.active, .productList ul.prd > li:hover:not(.soldout):not(.blank) {border-color:#0583F2;} */
.productList ul.prd > li.active {border-color:#0583F2;}
/* .productList ul.prd > li.active:after {position:absolute;left:50%;bottom:-3px;width:0;height:0;margin-left:-8px;border-color:transparent transparent #E9EDF2 transparent;border-width:0 8px 8px 8px;border-style:solid;content:'';}
.productList ul.prd > li.active:before {position:absolute;left:50%;bottom:-3px;width:0;height:0;margin-left:-12px;border-color:transparent transparent #0583F2 transparent;border-width:0 12px 12px 12px;border-style:solid;content:'';} */
.productList .infor {}
.productList .mark {position:absolute;z-index:1;left:8px;top:8px;}
.productList .mark > span {display:flex;padding:3px 5px;justify-content:center;align-items:center;text-align:center;font-size:12px;font-weight:700;border-radius:4px;}
.productList .mark > span strong {padding-left:2px;font-size:16px;}
.productList .mark > span + span {margin-left:5px;}
.productList .mark > span.sale {
    background-color: #9068ff;
    color: #fff;
}
.productList .thumb {
    padding: 8px;
    border-bottom: 2px dashed #EDEDED;
}
.productList .thumb img {
    display: block;
    max-width: 120px;
    margin: 0 auto;
}
.productList .subj {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 16px 8px;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical;
    word-wrap: break-word; 
    line-height: 1.2em;
    height: 2.4em;
    /* box-sizing: content-box; */
}
.productList .btn-wrap {
    margin: 0 -3px -3px -3px;
}
.productList .btn-buy-clicked {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    text-align: center;
    height: 60px;
    border: none;
    background-color: #0583F2;
    color: #fff;
    font-size: 20px;
    font-size: 500;
    border-radius: 0 0 6px 6px; 
    -webkit-appearance :none;
    -moz-appearance: none;
    appearance: none;
}
.productList .btn-buy-clicked:after {
    width: 24px;
    height: 24px;
    margin-left: 2px;
    background: center center / 24px auto url('./ico_arrow_r_w.png') no-repeat;
    content: '';
}
.productList .btn-help {
    position: absolute;
    right: 12px;
    top: 12px;
    width: 24px;
    height: 24px;
    background: center center / 24px auto url('./ico_help.png') no-repeat;
}
.productList .sale-flag {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    left: 8px;
    top: -8px;
    width: 78px;
    height: 64px;
    padding: 2px 12px 16px 8px;
    background: center center / 78px auto url('./flag_pc.png') no-repeat;
}
.productList .sale-flag strong {
    font-size: 18px;
    font-weight: 700;
}

@media (max-width: 1152px) {
    /* .productList ul.prd > li {width:calc(50% - 8px);margin-left:0;} */
    /* .productList ul.prd > li:nth-of-type(even) {margin-left:16px;} */
}

@media (max-width: 860px) {
    .productList ul.prd {
        grid-template-columns: repeat(3, 1fr);
    }
    /* .productList ul.prd > li {width:calc(33.33% - 10px);margin-left:15px;padding:6px 6px 12px;} */
    .productList ul.prd > li {
        padding-top: 24px;
        /* padding: 6px 6px 12px; */
    }
    .productList .thumb {
        padding: 4px;
    }
    .productList .thumb img {
        max-width: 90px;
    }
    /* .productList ul.prd > li.active:after {margin-left:-6px;border-width:0 6px 6px 6px;}
    .productList ul.prd > li.active:before {margin-left:-10px;border-width:0 10px 10px 10px;} */
    /* .productList ul.prd > li:nth-of-type(even) {margin-left:15px;}
    .productList ul.prd > li:nth-of-type(3n+1) {margin-left:0;} */
    .productList .subj {
        margin: 12px 6px;
        font-size: 16px;
    }
    .productList .btn-buy-clicked {
        height: 42px;
        font-size: 16px;
    }
    .productList .btn-help {
        right: 6px;
        top: 6px;
    }
}

@media (max-width: 620px) {
    .productList ul.prd {
        gap: 8px;
    }
    /* .productList ul.prd > li {width:calc(50% - 8px);margin-left:0;} */
    /* .productList ul.prd > li:nth-of-type(3n+1) {margin-left:0;}
    .productList ul.prd > li:nth-of-type(even) {margin-left:16px;} */
    /* .productList .subj {font-size: 16px;} */
}


/**/
.scroll-wrapper.resultBox {padding:8px !important;}
.resultBox {height:calc(100% - 54px - 168px);padding:8px;/*overflow-y:auto;*/}
.scroll-wrapper.resultBox.selected:before, .scroll-wrapper.resultBox.selected:after {position:absolute;z-index:1;left:8px;right:8px;height:20px;opacity:0;visibility:hidden;transition:all 0.1s ease;content:'';}
.scroll-wrapper.resultBox.selected:before {
    top:8px;
    background: -moz-linear-gradient(top,  rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */

}
.scroll-wrapper.resultBox.selected:after {
    bottom:8px;
    background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */
}
.scroll-wrapper.resultBox.selected.top:before {opacity:0.4;visibility:visible;}
.scroll-wrapper.resultBox.selected.bottom:after {opacity:0.4;visibility:visible;}
.resultBox.notSelected {height:calc(100% - 54px);}
.resultBox.notSelected .notSelectedMsg {display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;}
.resultBox.notSelected .notSelectedMsg:before {margin-bottom:10px;font-family:xeicon;vertical-align:middle;font-size:54px;content:"\e9ab";}
.resultBox.notSelected .notSelectedMsg .msg {font-size:18px;font-weight:700;}
.resultHead {height:54px;text-align:center;line-height:56px;font-size:18px;font-weight:700;color:#fff;background-color:#0583F2;}
.sectionHead {/*border-bottom:2px solid #43485a;*/font-size:16px;padding:12px 15px;font-weight:700;background-color:#43485a;color:#fff;}
.resultSection {}
.resultSection.type {flex:1;overflow:hidden;}
.resultSection + .resultSection {margin-top:10px;}
.resultSide .totalBox {overflow:hidden;height:168px;margin-top:auto;padding:0 8px 8px 8px;}

.resultSide.selected .selected {display:flex;flex-direction:column;overflow:hidden;}
.resultSide.selected .notSelected {display:none;}
.resultSide.selected .totalBox {display:block;}

.resultSide.notSelected .selected {display:none;}
.resultSide.notSelected .notSelected {display:block;}
.resultSide.notSelected .totalBox {display:none;}


@media (max-width:860px) {
    .resultBox{height:auto;}
}

/**/
.addList {height:calc(100% - 43px);overflow-y:auto;border-left:1px solid #e9ecf1;border-right:1px solid #e9ecf1;}
.scroll-wrapper.addList:before, .scroll-wrapper.addList:after {position:absolute;z-index:1;left:0;right:0;height:15px;opacity:0;visibility:hidden;transition:all 0.1s ease;content:'';}
.scroll-wrapper.addList:before {
    top:0;
    background: -moz-linear-gradient(top,  rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */

}
.scroll-wrapper.addList:after {
    bottom:0;
    background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */
}
.scroll-wrapper.addList.top:before {opacity:0.2;visibility:visible;}
.scroll-wrapper.addList.bottom:after {opacity:0.2;visibility:visible;}
.addList > li {position:relative;border-bottom:1px solid #e9ecf1;}
/**/
.addList > li.list{padding:18px 125px 18px 15px;}
.addList > li .prdName {font-size:17px;font-weight:700;margin-bottom:5px;}
.addList > li .prdPrice {}
.addList > li .prdPrice .before {padding-left:5px;color:#7f7f7f;}
.addList > li .prdPrice .sale {font-size:16px;color:#ff3b37;}
.addList > li .prdPrice .default {font-size:16px;color:#ff3b37;}
.addList > li .btnDelete {position:absolute;right:15px;top:50%;width:24px;height:24px;margin-top:-12px;font-size:14px;background-color:#e9ecf1;color:#43485a;border-radius:100%;transition:all 0.2s ease;}
.addList > li .btnDelete i {vertical-align:middle;}
.addList > li .btnDelete:hover {background-color:#ff3b37;color:#fff;}
.addList > li .control {position:absolute;right:10px;top:50%;width:110px;margin-top:-16px;}
.addList > li .amount {position:relative;padding:0 30px;border:1px solid #7f7f7f;border-radius:4px;overflow:hidden;}
.addList > li .amount input.qty_count {width:100%;height:30px;padding:0;border:none;border-left:1px solid #7f7f7f !important;border-right:1px solid #7f7f7f !important;color:#1d1e1f !important;background:#fff !important;text-align:center;font-size:16px;font-weight:700;}
.addList > li .amount .qty_btns {position:absolute;top:0;width:30px;height:30px;background-color:#fff;text-align:center;font-weight:800;}
.addList > li .amount .qty_btns:hover {color:#fff;background-color:#7f7f7f;}
.addList > li .amount .qty_btns:before {vertical-align:middle;font-family:xeicon;}
.addList > li .amount .qty_btns.plus {right:0;}
.addList > li .amount .qty_btns.minus {left:0;}
.addList > li .amount .qty_btns.plus:before {content:'\e913';}
.addList > li .amount .qty_btns.minus:before {content:'\e91a';}
.addList > li .utilBtn {display:flex;height:30px;margin-top:2px;}
.addList > li .qty_full {flex:1;border:1px solid #3bbf36;background-color:#fff;color:#3bbf36;text-align:center;font-weight:700;border-radius:4px;font-weight:800;}
.addList > li .qty_full:hover {background-color:#3bbf36;color:#fff;}
.addList > li .qty_reset {width:30px;margin-left:2px;text-align:center;border:1px solid #ffc200;background-color:#fff;color:#ffc200;border-radius:4px;font-weight:800;}
.addList > li .qty_reset:hover {background-color:#ffc200;color:#000;}
.addList > li .qty_reset:before {font-family:xeicon;vertical-align:middle;content:"\e921";}

/**/
.addList > li.payment {/*display:flex;*/padding:12px 15px;}
.addList > li.payment .chkForm {display:flex;}
.addList > li.payment .label {display:flex;flex:1;align-items:center;font-size:16px;font-weight:700;}
.addList > li.payment .label .fee {padding:3px 0 0 6px;font-size:12px;}
.addList > li.payment .chkLabel {/*border:none;*/line-height:24px;text-align:center;}
/*.addList > li.payment .chkLabel:after {position:absolute;left:0;top:0;right:0;bottom:0;font-size:20px;font-weight:800;color:#ff3b37;}*/
.addList > li input.use_tel {width:100%;height:48px;border:none;font-size:16px;font-weight:700;}
.addList > li.payment :checked ~ .label {color:#ff3b37;font-weight:700;}
.addList > li.payment :checked ~ .chkLabel {border-color:#ff3b37;}
.addList > li.payment :checked ~ .chkLabel:after {background-color:#ff3b37;}

/**/
.prdResult {display:flex;align-items:center;height:40px;margin:8px 0 4px 0;padding:0 8px;font-size:16px;font-weight:700;border-top:1px solid #e9ecf1;}
.prdResult:not(:last-of-type) {height:22px;margin:0 0 8px 0;font-size:14px;border:none;}
.prdResult:first-of-type {margin-top:4px;}
.prdResult .title {}
.prdResult .price {margin-left:auto;font-size:18px;}
.prdResult .price strong {font-weight:800;}
.prdResult:last-of-type .price {color:#ff3b37;}
.prdResult:not(:last-of-type) .price {font-size:14px;}

.buyResult {display:flex;align-items:center;padding:4px 0;font-weight:700;font-size:16px;}
.buyResult .title {}
.buyResult .price {margin-left:auto;}
.buyResult .price strong {font-weight:800;}

.btnBuy {display:block;width:100%;height:52px;border-radius:4px;background-color:#ff3b37;color:#fff;font-size:16px;font-weight:700;}
.btnBuy:hover {filter:brightness(90%);}


/*서브*/
#container.content {height:auto;}
#container.content > .innerWidth {display:block;height:auto;background-color:#fff;padding-top:40px;padding-bottom:40px;border-top:2px solid #43485a;}
.subSection {}
.subSection + .subSection {margin-top:40px;padding-top:40px;border-top:1px solid #e9ecf1;}
.contact .contactTitle {margin-bottom:10px;font-size:18px;font-weight:700;}
.contact .contactList {overflow:hidden;}
.contact .contactList > li {position:relative;display:flex;align-items:flex-start;overflow:hidden;font-size:16px;margin-top:15px;}
.contact .contactList > li i{overflow:hidden;display:flex;width:30px;height:30px;margin-right:12px;justify-content:center;align-items:center;border-radius:100%;background-color:#0697f2;color:#fff;font-size:18px;}
.contact .contactList > li div {flex:1;margin-top:4px;}
.contact .contactList > li div > p + p{margin-top:6px;}
.contact .tel {}
.contact .mail {}
.contact .time {}

@media (max-width:860px) {
  #container.content > .innerWidth {margin-top:20px;padding-top:30px;padding-bottom:30px;}
}

/*게시판형태*/
.arcodianBoard {}
.arcodianBoard > li {border-top:1px solid #43485a;border-bottom:1px solid #ddd;}
.arcodianBoard > li + li {border-top:none;}
.arcodianBoard > li .link {position:relative;display:flex;align-items:center;padding:15px 40px 15px 15px;line-height:normal;font-size:14px;line-height:1.5;}
.arcodianBoard > li.empty {position:relative;padding:15px;line-height:normal;font-size:14px;text-align:center;}
.arcodianBoard > li .link:after {position:absolute;display:flex;justify-content:center;align-items:center;right:10px;top:50%;width:30px;height:30px;margin-top:-15px;font-size:20px;transform:rotate(0);transition:transform 0.2s ease;font-family:xeicon;content:'\e943';}
.arcodianBoard > li .cate {width:105px;padding-right:15px;font-size:14px;}
.arcodianBoard > li .date {width:100px;padding:0 10px 0 15px;font-size:14px;}
.arcodianBoard > li .num {width:50px;padding-right:15px;text-align:center;}
.arcodianBoard > li .subj{flex:1;padding-right:10px;}
.arcodianBoard > li .contentWrap {display:none;overflow:hidden;background-color:#fff;}
.arcodianBoard > li .content{word-break:break-all;padding:25px 15px;line-height:1.8;font-size:14px;border-top:1px solid #e9ecf1;}
.arcodianBoard > li.active {background-color:#fafafa;}
.arcodianBoard > li.active .link:after{transform:rotate(-180deg);}
.arcodianBoard > li.active .contentWrap {display:block;}
/*.arcodianBoard > li .date {margin-bottom:10px;color:#7f7f7f;}*/

/*검색바*/
.searchWrap {position:relative;width:220px;padding:2px 35px 2px 0;background-color:#fff;border:1px solid #ddd;}
.searchWrap input[type=search] {background:none;border:none;width:100%;height:30px;padding:0 12px;}
.searchWrap .btnSearch {position:absolute;right:2px;top:2px;width:30px;height:30px;text-align:center;background-color:#fff;}
.searchWrap .btnSearch:before {font-family:xeicon;font-size:20px;content:"\e97a";}

.csSection .boardContent {flex:6;}
.csSection .boardHead {display:flex;align-items:center;margin-bottom:10px;}
.csSection .boardName {font-size:18px;font-weight:700;}
.csSection .boardName strong {}
.csSection .boardSearch {margin-left:auto;}

@media (max-width:860px) {
  .csSection .sectionTitle {margin-bottom:20px;text-align:center;}
  .csSection .innerWidth {display:block;}
  .csSection .headContent {margin-bottom:40px;text-align:center;}
  .csSection .headContent .subMsg {font-size:18px;}
  .csSection .headContent .tel {margin-top:10px;font-size:36px;}
  .csSection .boardHead {display:block;}
  .csSection .boardSearch {margin-top:10px;}
  .searchWrap {width:auto;}
}

/*페이징*/
.paging {margin-top:25px;}
.paging ul {display:flex;align-items:center;justify-content:center;}
.paging ul > li {margin:0 3px;}
.paging ul > li > a{display:flex;justify-content:center;align-items:center;width:24px;height:24px;font-size:14px;text-align:center;color:#7f7f7f;transition:all 0.2s ease;}
.paging ul > li > a:hover {color:#1d1e1f;}
.paging ul > li.active > a {color:#1d1e1f;font-weight:800;}
.paging ul > li.disabled > a{cursor:not-allowed;color:#949494 !important;}
.paging ul > li[class*=prev] > a, .paging ul > li[class*=next] > a {font-size:0;}
.paging ul > li[class*=prev] > a:before, .paging ul > li[class*=next] > a:before {font-family:xeicon;font-size:16px;}
.paging ul > li[class*=prev] > a:before {content:'\e93b';}
.paging ul > li[class*=next] > a:before {content:'\e93e';}


/*footer*/
footer {position:fixed;z-index:20;left:0;right:0;bottom:0;width:100%;height:85px;background-color:#fff;}
footer .innerWidth {display:flex;align-items:center;justify-content:flex-end;height:100%;font-size:14px;text-align:right;color:#7f7f7f;}
footer button {margin-right: auto;padding: 6px 8px; border-radius:4px;background-color:#ff3b37;color:#fff;font-size:12px;font-weight:700;}
footer .footerSection {width:55%;text-align: left;}
footer .footerSection .csList, .csList1 {display:inline-block;padding-bottom: 8px;}
footer .csList + .csList {margin-left:18px;}
footer .csList + .csList1 {margin-left:18px;}
footer .footerCopyrightSection {width:30%;text-align: right}

@media (max-width:860px) {
    footer {position:static;width:auto; height: 170px;}
    footer button {
        margin-bottom: 6px;
        margin-left: auto;
        margin-right: 0;
    }
    footer .innerWidth {
        flex-direction: column;
        justify-content: center;
        align-items: flex-end;
    }
    footer .footerSection {width:100%;text-align: left;}
    footer .footerSection .csList, .csList1 {display:inline-block;padding-bottom: 8px;}
    footer .csList + .csList {margin-left:18px;}
    footer .csList + .csList1 {margin-left:0px;}
    footer .footerCopyrightSection {width:100%;text-align: left;}
}


/*sysmodal*/
.sysModal{position:fixed;display:flex;align-items:center;justify-content:center;z-index:120;left:0;top:0;right:0;bottom:0;visibility:hidden;background:rgba(0,0,0,0.5);opacity:0;transition:all 0.2s ease;pointer-events:none;}
.sysModal .modalWrap{position:relative;width:312px;height:auto;padding-bottom:52px;background-color:#fff;transform:translateY(-20px);visibility:hidden;opacity:0;transition:all 0.2s ease;}
.sysModal.show{visibility: visible;opacity:1;pointer-events:all;}
.sysModal.show .modalWrap{opacity:1;visibility:visible;transform:translateY(0);}
.sysModal .content{position:relative;padding:30px 24px;}
.sysModal .content > .title{margin-bottom:16px;font-size:16px;font-weight:600;word-break:break-all;}
.sysModal .content > .msg{word-break:break-all;font-size:16px;text-align:center;line-height:1.5;}
.sysModal .btn_wrap{position:absolute;display:flex;left:0;right:0;bottom:0;width:100%;}
.sysModal .btn_wrap button{display:block;width:100%;height:52px;background:#0583F2;color:#fff;font-weight:500;font-size:16px;}
.sysModal .btn_wrap button.type1{background:#fff;border-top:1px solid #e9ecf1;color:#1d1e1f;}

/*contentModal*/
.contentModal{position:fixed;z-index:110;left:0;top:0;right:0;bottom:0;padding:30px 15px;overflow-y:auto;visibility:hidden;opacity:0;background:rgba(0,0,0,0.5);transition:all 0.2s ease;pointer-events:none;}
.contentModal .modalWrap{position:absolute;left:50%;top:50%;width:calc(100% - 30px);max-width:calc(480px - 30px);height:auto;margin-top:-20px;background-color:#fff;transform:translateX(-50%) translateY(-50%);visibility:hidden;opacity:0;transition:all 0.2s ease;}
.contentModal.show{visibility: visible;opacity:1;pointer-events:all;}
.contentModal.show .modalWrap.visible{opacity:1;visibility:visible;margin-top:0;}
.contentModal .content{position:relative;}
.contentModal .content > .title{height:54px;text-align:center;line-height:56px;font-size:18px;font-weight:700;color:#fff;background-color:#0583F2;}
.contentModal .content > .inner {padding:25px 20px;max-height:calc(100vh - 100px);overflow-y:auto;}
/* .contentModal .content > .inner {padding:25px 20px;max-height:calc(100vh - 54px);overflow-y:auto;} */
.contentModal .content > .inner.npd { padding: 0 !important; text-align: center; }
.contentModal .content > .inner.npd .modal-form { text-align: left !important; }
.contentModal .btn_wrap {margin-top:20px;text-align:center;font-size:0;}
.contentModal .btn_wrap button{display:inline-block;min-width:125px;max-width:50%;height:48px;margin:0 5px;background:#0583F2;color:#fff;font-weight:700;font-size:16px;}
.contentModal .btn_wrap button.type1{background:#fff;border:1px solid #1d1e1f;color:#1d1e1f;}
.contentModal .btn-close {
    position: absolute;
    right: 3px;
    top: 3px;
    width: 48px;
    height: 48px;
    border: none;
    background: center center / 36px auto url('./ico_close_36px.png') no-repeat;
}

.contentModal .content .chkForm {padding:5px 0;display:flex;align-items:center;}
.contentModal .content .label {display:flex;flex:1;align-items:center;font-size:16px;font-weight:700;}
.contentModal .content .label .fee {padding:3px 0 0 6px;font-size:12px;}
.contentModal .content .chkLabel {margin-right:8px;line-height:24px;text-align:center;}
.contentModal .content .chkLabel:after {color:#ff3b37;}
.contentModal .content :checked ~ .label {color:#ff3b37;font-weight:700;}
.contentModal .content :checked ~ .chkLabel {border-color:#ff3b37;}

@media (max-width:340px) {
    .contentModal .content > .inner {padding:20px 10px;}
}

/**/
.fishingMsg {font-size:16px;line-height:1.4;}
.fishingMsg dt {margin-bottom:15px;font-weight:700;font-size:18px;}
.fishingMsg dd {position:relative;margin-top:5px;padding-left:16px;}
.fishingMsg dd:before {position:absolute;left:0;top:10px;width:8px;height:1px;background-color:#1d121f;content:'';}
.fishingMsg dd.fc_point02:before {background-color:#ff3b37;}

.cancelMsg {font-size:14px;line-height:1.4;}
.cancelMsg dd {position:relative;margin-top:5px;}
.cancelMsg dt {margin-bottom:15px;font-weight:700;font-size:18px;}
.cancelMsg dd.fc_point02:before {background-color:#ff3b37;}
.cancelSub { margin-top: 10px; font-size: 13px; line-height: 1.4;}
.cancelSub li {position:relative;margin-top:5px;padding-left:14px;}
.cancelSub li:before {position:absolute;left:0;top:8px;width:6px;height:1px;background-color:#1d121f;content:'';}

.cancel-form-area {padding: 15px; margin-top: 20px; align-items:center; border: 1px solid #ddd; background: #fafafa; }
.cancel-form-area label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 700; }
.cancel-form-area input { width: 100%; }

#warningContent .chkForm {margin-top:20px;justify-content:center;}
#warningContent .chkForm .label {flex:none;}

#resultContent .buyBox {margin-bottom:10px;}
#resultContent .buyBox + .buyBox {padding-top:10px;border-top:1px solid #e9ecf1;}
#resultContent .totalBox {padding:8px;border:1px solid #e9ecf1;}
#resultContent .totalBox .prdResult:last-of-type{margin-bottom:0;}
#resultContent .chkForm {margin-top:20px;justify-content:center;}
#resultContent .chkForm .label {flex:none;}

/* */
.refundWarning {
    border: 1px solid #ff3b37;
    margin-top: 16px;
    padding: 8px;
    font-size: 16px;
    text-align: center;
    line-height: 1.5;
    color: #ff3b37;
}
.refundWarning strong {
    text-decoration: underline;
}

/* */
.modal-tcash-content {
    background: #299ee4;
}
.modal-tcash-content .btn-modal-close {
    position: absolute;
    right: 0;
    top: 0;
    width: 44px;
    height: 44px;
    background: center center / 12px auto url('./ico_modal_close.png') no-repeat;
}
.modal-tcash-content .tcash-btn-wrap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 24px;
    text-align: center;
}
.tcash-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 230px;
    height: 54px;
    text-align: center;
    background: #fff;
    border-radius: 26px;
    font-size: 18px;
    color: #000;
    border: 2px solid #000;
    font-weight: 700;
}
.tcash-btn:after {
    margin-left: 8px;
    width: 16px;
    height: 16px;
    background: center center / 16px auto url('./ico_arrow_r.png') no-repeat;
    content: '';
}

@media (max-width:480px) {
    .modal-tcash-content .tcash-btn-wrap {
        bottom: 16px;
    }
    .tcash-btn {
        min-width: 200px;
        height: 48px;
        font-size: 16px;
    }
}

/* */
.auth-modal-wrap {
    position: fixed;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    padding: 16px;
    background-color:rgba(0, 0, 0, 0.4);
}
.auth-modal-wrap.show {
    display: flex;
}
.auth-modal-wrap iframe {
    width: 100%;
    height: 100%;
    max-width: 520px;
    max-height: 628px;
    background-color: #fff;
}
.auth-modal-wrap .btn-wrap {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 520px;
    text-align: right;
    margin-bottom: -42px;
}
.auth-modal-wrap .btn-close {
    width: 42px;
    height: 42px;
    border: none;
    background: rgba(0, 0, 0, 0.5) center center / 20px auto url('./ico_modal_close.png') no-repeat;
    border-radius: 0;
}
@media (max-width:620px) {
    .auth-modal-wrap {
        padding: 0;
    }
    .auth-modal-wrap iframe {
        max-width: none;
        max-height: none;
    }
}

/* */
.prd-modal-img-wrap {
    font-size: 0;
}
.prd-modal-img-wrap img {
    display: block;
}
.prd-modal-img-wrap .flex-wrap {
    display: flex;
    font-size: 0;
}
.prd-modal-img-wrap .flex-wrap > .inner {
    display: block;
    flex: 1;
    font-size: 0;
}

/* */
#container {
    height: auto;
}
.productWrap {
    flex-direction: column;
    max-width: 820px;
    /* overflow: hidden; */
}
.productList {
    height: auto;
    flex: 1;
}
.banner-wrap {
    width: 100%;
    margin-bottom: 24px;
    height: auto !important;
}
.banner-wrap .swiper-wrapper {
    height: auto !important;
}
.banner-wrap li {
    height: auto !important;
    overflow: hidden;
    border-radius: 6px;
}

@media (max-width: 860px) {
    .banner-wrap {
        /* display: none; */
        margin: 18px 0 24px;
    }
}

.paymentFrameStyle {
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.4)
}

/* 404 error page */
.error-container {
    text-align: center;
    padding: 195px 0 105px 0;
}

.error-container h1 {
    font-size: 2rem;
    margin-bottom: 50px;
    color: #333;
}

.error-container p {
    font-size: 1.2rem;
    color: #666;
    margin-bottom: 30px;
}

.error-container .btn {
    padding: 10px 20px;
    border-radius: 4px;
    background-color: #ff3b37;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
}

/* blazor-error */
#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui a {
    color: #0583f2;
    font-weight:800;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* disconnected */
#components-reconnect-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    /*background-color: gray;
    opacity: 0.8;*/
    background-color: rgba(255, 255, 255, 0.8);
    text-align: center;
    padding-top: 20px;
    z-index: 10001;
    color: black
}

#components-reconnect-modal h5 {
    margin-top: 20px;
    font-size: 1.1rem;
}

#components-reconnect-modal a {
    color: #0071c1;
    text-decoration: underline;
}

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: block;
}

#components-reconnect-modal.components-reconnect-hide {
    display: none;
}