/* 
    문자 초기화
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    letter-spacing: inherit;
    line-height: inherit;
*/
/* 
    트랜지션
    transition: All .2s ease-out;
    -webkit-transition: All .2s ease-out;
    -moz-transition: All .2s ease-out;
    -o-transition: All .2s ease-out
*/

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

html,body,div,ul,li,p,h3,h1,h2,h4,h5{padding:0;margin:0;line-height:1}
ul,li{list-style:none}
a{text-decoration:none;color:#000}
textarea,input{font-family: 'Poppins', 'Noto Sans KR', sans-serif;}
optgroup,select,button{cursor:pointer}
input::-webkit-input-placeholder{color:#AAAAAA;font-weight:400}
textarea::-webkit-input-placeholder{color:#AAAAAA;font-weight:400}
input::-ms-input-placeholder{color:#AAAAAA;font-weight:400}
textarea::-ms-input-placeholder{color:#AAAAAA;font-weight:400}
input::-moz-placeholder{color:#AAAAAA;font-weight:400}
textarea::-moz-placeholder{color:#AAAAAA;font-weight:400}
input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #fff inset}
input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}
input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none}
select::-ms-expand{display:none}
select{-moz-appearance:none;-webkit-appearance:none;appearance:none}
img{vertical-align:top}
body{width:100%;position:relative;box-sizing:border-box;}
body{min-height: 100vh;}
.contents{min-height: 100vh;}
#header + .contents {min-height: calc(100vh - 60px)}
caption{display:none}
*{margin:0;padding:0;text-decoration:none;-webkit-text-size-adjust:none;outline:0;-webkit-appearance:none; -webkit-tap-highlight-color:transparent; -webkit-font-smoothing:antialiased; letter-spacing: -0.04em;}
*{font-family: 'Poppins', 'Noto Sans KR', sans-serif;line-height:1em;color:#000;box-sizing: border-box;font-weight: normal;}
i,em {line-height: inherit;font-style: normal}
.blind {display: none  !important;}
span,i {font-size: inherit;font-weight: inherit;line-height: inherit;color: inherit; letter-spacing: inherit; font-family: inherit;}
b {font-size: inherit;font-weight: 500;line-height: inherit;color: inherit; letter-spacing: inherit; font-family: inherit;}
table {width: 100%;table-layout: fixed;border-collapse: collapse;border-spacing: 0;}

@-webkit-keyframes showUp {
0% {opacity: 0;-webkit-transform: translateY(10px)}
100% {opacity: 1;-webkit-transform: translateY(0)}
}

@keyframes showUp {
0% {opacity: 0;transform: translateY(10px)}
100% {opacity: 1;transform: translateY(0)}
}

@-webkit-keyframes showOpacity {
0% {opacity: 0;}
100% {opacity: 1;}
}

@keyframes showOpacity {
0% {opacity: 0;}
100% {opacity: 1;}
}

@-webkit-keyframes unread {
0% {padding-left: 0px;}
100% {padding-left: 20px;}
}

@keyframes unread {
0% {padding-left: 0px;}
100% {padding-left: 20px;}
}

@-webkit-keyframes showBlink {
0% {opacity: 1;}
50% {opacity: 0;}
100% {opacity: 1;}
}

@keyframes showBlink {
0% {opacity: 1;}
50% {opacity: 0;}
100% {opacity: 1;}
}

#header {
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100%;
    height: 60px;
    border-bottom: 1px solid transparent;
    transition: All .2s ease-in-out;
    -webkit-transition: All .2s ease-in-out;
    -moz-transition: All .2s ease-in-out;
    -o-transition: All .2s ease-in-out;
}

#header.fixable {
    background-color: #fff;
    border-bottom: 1px solid #DFDFDF;
}

#header.hide {
    top: -60px;
}

#header.sub {
    background-color: #fff;
    border-bottom: 1px solid #DFDFDF;
}

#header .header_wrap {
    position: relative;
    width: 100%;
    height: 100%;
}
#header .header_wrap .ico_profile {
    display: block;
    margin: 4px auto;
    width: 24px;
    height: 24px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(../img/assets/ico-tool-profile.svg)
}
#header.main .header_wrap .ico_profile {
    background-image: url(../img/assets/ico-tool-profile_white.svg)
}

#header.main.fixable .header_wrap .ico_profile {
    background-image: url(../img/assets/ico-tool-profile.svg)
}


#header .header_wrap .lcnt {
    display: flex;
    height: 100%;
    align-items: center;
    padding-left: 20px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 50;
}

#header .header_wrap .lcnt .logo {
    width: 173px;
    text-align: left;
}

#header .header_wrap .lcnt .logo svg {
    width: 100%;
}

#header .header_wrap .lcnt .logo > button, .select_btn {
    border: none;
    background-color: transparent;
    width: auto;
    margin: 0%;
    position: relative;
}

#header .header_wrap .lcnt .logo > button::after, .select_btn::after {
    content: "";
    display: block;
    width: 9px;
    height: 32px;
    position: absolute;
    right: 0;
    top: 0;
    background-image: url(../img/assets/ico-header-arrow-select.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

#header.fixable .header_wrap .lcnt .logo > button::after, .select_btn::after {
    background-image: url(../img/assets/ico-header-arrow-select-dark.svg);
}

#header .header_wrap .lcnt .logo .toggle_header {
    top: 50px;
    left: 20px;
    width: 168px;
}

.toggle_header {
    position: absolute;
    border-radius: 6px;
    background-color: #fff;
    padding: 10px 0;
    animation: showUp 0.3s forwards;
    display: none;
    box-shadow: 4px 4px 8px rgba(0,0,0,0.4);
    z-index: 1;
}

.toggle_header.open {
    display: block;
}

.toggle_header a {
    display: block;
    line-height: 20px;
    text-align: left;
    width: 100%;
    margin: 0;
    padding: 3px 15px;
    font-size: 14px;
    color: #707070;
}

.toggle_header a.active {
    font-weight: bold;
    color: #265B3E;
}

.toggle_header a.active::after {
    content: "";
    display: inline-block;
    vertical-align: top;
    width: 8px;
    height: 20px;
    margin-left: 5px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(../img/assets/ico-header-toggle-active.svg);
}


.ccnt{
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 60px;
    width: 100%;
    z-index: 50;
}
.ccnt span{
    display: flex;
    justify-content: center;
    align-items: center;
    top: 60px;
    width: 100%;
    z-index: 50;
    z-index: 2;
    font-size: 15px;
    color: #fff;
    font-weight: bold;
}

.ccnt span::after {
    content: "";
    display: block;
    width: 9px;
    height: 32px;
    position: unset;
    margin-left: 10px;
    right: -16;
    top: -5px;
    background-image: url(../img/assets/ico-header-arrow-select.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
.toggle_dark::after{
    content: "";
    display: inline-flex;
    width: 9px;
    height: 9px;
    position: unset;
    margin-left: 5px;
    background-image: url(../img/assets/ico-header-arrow-select-dark.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
.toggle_shop_brand {
    position: absolute;
    top: 95px;
    width: 90%;
    margin: 0 15px;
    border-radius: 6px;
    background-color: #fff;
    padding: 10px 0;
    animation: showUp 0.3s forwards;
    display: none;
    box-shadow: 4px 4px 8px rgba(0,0,0,0.4);
}

.toggle_shop_brand.open {
    z-index: 2;
    display: block;
}

.toggle_shop_brand  a {
    display: block;
    line-height: 20px;
    text-align: left;
    width: 100%;
    margin: 0;
    padding: 3px 15px;
    font-size: 14px;
    color: #707070;
}

.toggle_shop_brand  a.active {
    font-weight: bold;
    color: #265B3E;
}

.toggle_shop_brand  a.active::after {
    content: "";
    display: inline-block;
    vertical-align: top;
    width: 8px;
    height: 20px;
    margin-left: 5px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(../img/assets/ico-header-toggle-active.svg);
}

.toggle_qr_modal {
    position: fixed;
    top: 95px;
    width: 90%;
    margin: 0 15px;
    border-radius: 6px;
    background-color: #fff;
    padding: 50px 0;
    animation: showUp 0.3s forwards;
    display: none;
    box-shadow: 4px 4px 8px rgba(0,0,0,0.4);
}

.modal_type_list.open .toggle_qr_modal {
    z-index: 999;
    display: block;
    left : 5px;
}


#header .header_wrap .lcnt .nav {
    display: flex;
}

#header .header_wrap .lcnt button, .select_btn {
    background-color: transparent;
    border: none;
    width: 32px;
    height: 32px;
    position: relative;
    margin-left: -7px;
    width: 100%;
    padding-right: 19px;
}

#header.fixable .header_wrap .lcnt .logo path {
    fill: #000;
}

#header .header_wrap .rcnt {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
    padding-right: 20px;
    z-index: 50;
}

#header .header_wrap .rcnt .utils > * + * {
    margin-left: 3px;
}

#header .header_wrap .rcnt .utils {
    display: flex;
    margin-right: -7px;
}

#header.detail .header_wrap .btn_back path {
    stroke: #fff;
}

#header.fixable .header_wrap .btn_back path {
    stroke: #1d3126;
}

#header .header_wrap .fixed_stroke {
    stroke: #fff;
}

#header.fixable .header_wrap .fixed_stroke,
#header.sub .header_wrap .fixed_stroke {
    stroke: #1d3126;
}

#header.fixable .header_wrap .fixed_fill,
#header.sub .header_wrap .fixed_fill {
    fill: #1d3126;
}

#header .header_wrap .rcnt .utils a,
#header .header_wrap .rcnt .utils button {
    background-color: transparent;
    border: none;
    width: 32px;
    height: 32px;
    position: relative;
}

#header .header_wrap .btn_search path{
    fill: #fff;
}

#header.sub .header_wrap .btn_search path {
    fill: #1d3126;
}

#header .header_wrap .rcnt .utils .is_alert {
    display: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #75D275;
    position: absolute;
    top: 6px;
    right: 6px;
    animation: showBlink 1s forwards;
    animation-iteration-count: 3
}

#header .header_wrap .rcnt .utils .is_alert.active {
    display: block;
}

#header .header_wrap .rcnt .utils .is_basket {
    display: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #1D3126;
    position: absolute;
    top: 0px;
    right: -2px;
    font-size: 11px;
    text-align: center;
    line-height: 16px;
    color: #fff;
    animation: showOpacity 1s forwards;
}

#header .header_wrap .rcnt .utils .is_basket.active {
    display: block;
}

#header .header_wrap .rcnt .utils .btn_menu {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

#header .header_wrap .rcnt .utils .btn_menu i{
    display: block;
    width: 20px;
    height: 2px;
    background-color: #fff;
}

#header.fixable .header_wrap .rcnt .utils .btn_menu i {
    background-color: #1d3126;
}

#header.sub .header_wrap .rcnt .utils .btn_menu i {
    background-color: #1d3126;
}

#header .header_wrap .rcnt .utils .btn_menu i:nth-child(1) {
    -webkit-animation: outT 0.8s backwards;
    animation: outT 0.8s backwards;
    -webkit-animation-direction: reverse;
    animation-direction: reverse;
}
#header .header_wrap .rcnt .utils .btn_menu i:nth-child(2) {
    margin: 5px auto;
    -webkit-animation: outM 0.8s backwards;
    animation: outM 0.8s backwards;
    -webkit-animation-direction: reverse;
    animation-direction: reverse;
}
#header .header_wrap .rcnt .utils .btn_menu i:nth-child(3) {
    -webkit-animation: outBtm 0.8s backwards;
    animation: outBtm 0.8s backwards;
    -webkit-animation-direction: reverse;
    animation-direction: reverse;
}

#header .header_wrap .rcnt .utils .btn_menu.open i:nth-child(1) {
    -webkit-animation: inT 0.8s forwards;
    animation: inT 0.8s forwards;
    width: 22px;
}
#header .header_wrap .rcnt .utils .btn_menu.open i:nth-child(2) {
    -webkit-animation: inM 0.8s forwards;
    animation: inM 0.8s forwards;
}
#header .header_wrap .rcnt .utils .btn_menu.open i:nth-child(3) {
    -webkit-animation: inBtm 0.8s forwards;
    animation: inBtm 0.8s forwards;
    width: 22px;
}

@-webkit-keyframes inM {
50% {-webkit-transform: rotate(0deg);opacity: 1;}
100% {-webkit-transform: translateX(1px) rotate(225deg);opacity: 0;}
}
@keyframes inM {
50% {transform: rotate(0deg);opacity: 1;}
100% {transform: translateX(1px) rotate(225deg);opacity: 0;}
}
@-webkit-keyframes outM {
50% {-webkit-transform: rotate(0deg); opacity: 0;}
100% {-webkit-transform: rotate(225deg);opacity: 1;}
}
@keyframes outM {
50% {transform: rotate(0deg);opacity: 0;}
100% {transform: rotate(225deg);opacity: 1;}
}
@-webkit-keyframes inT {
0% {-webkit-transform: translateY(0px) rotate(0deg);}
50% {-webkit-transform: translateY(5px) rotate(0deg);}
100% {-webkit-transform: translateY(7px) rotate(135deg);}
}
@keyframes inT {
0% {transform: translateY(0px) rotate(0deg);}
50% {transform: translateY(7px) rotate(0deg);}
100% {transform: translateY(7px) rotate(135deg);}
}
@-webkit-keyframes outT {
0% {-webkit-transform: translateY(0px) rotate(0deg);}
50% {-webkit-transform: translateY(7px) rotate(0deg);}
100% {-webkit-transform: translateY(7px) rotate(135deg);}
}
@keyframes outT {
0% {transform: translateY(0px) rotate(0deg);}
50% {transform: translateY(7px) rotate(0deg);}
100% {transform: translateY(7px) rotate(135deg);}
}
@-webkit-keyframes inBtm {
0% {-webkit-transform: translateY(0px) rotate(0deg);}
50% {-webkit-transform: translateY(-7px) rotate(0deg);}
100% {-webkit-transform: translateY(-7px) rotate(135deg);}
}
@keyframes inBtm {
0% {transform: translateY(0px) rotate(0deg);}
50% {transform: translateY(-7px) rotate(0deg);}
100% {transform: translateY(-7px) rotate(-135deg);}
}
@-webkit-keyframes outBtm {
0% {-webkit-transform: translateY(0px) rotate(0deg);}
50% {-webkit-transform: translateY(-7px) rotate(0deg);}
100% {-webkit-transform: translateY(-7px) rotate(-135deg);}
}
@keyframes outBtm {
0% {transform: translateY(0px) rotate(0deg);}
50% {transform: translateY(-7px) rotate(0deg);}
100% {transform: translateY(-7px) rotate(-135deg);}
}

#header .header_wrap .cnt {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}

#header .header_wrap .cnt h1 {
    display: block;
    flex: 1;
    width: 100%;
    padding: 0 78px;
    line-height: 24px;
    font-size: 16px;
    color: #222222;
    font-weight: bold;
    text-align: center;
}

#header .header_wrap .cnt .search_wrap {
    width: 100%;
    height: 100%;
    padding-left: 56px;
    padding-right: 81px;
    position: relative;
}

#header .header_wrap .cnt .search_wrap::after {
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    background-color: #265B3E;
    position: absolute;
    bottom: -1px;
    left: 0;
}

#header .header_wrap .cnt .search_wrap form {
    width: 100%;
    height: 100%;
}

#header .header_wrap .cnt .search_wrap input[type=text] {
    width: 100%;
    border: none;
    height: 100%;
    font-size: 16px;
    color: #000000;
}

#header .header_wrap .cnt .search_wrap input[type=text] + label {
    display: none;
}

#header .header_wrap .cnt .search_wrap .btn_reset {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 53px;
    border: none;
    background-color: transparent;
    display: none;
}

#header .header_wrap .cnt .search_wrap .btn_reset.active {
    display: block;
}

/* 레이아웃 */
.layout.btm {
    padding-bottom: 0
}

.cont_block + .cont_block {
    border-top: 10px solid #F0F0F0;
}

/* 툴바 */
.toolbar_container {
    position: sticky;
    bottom: 0;
    width: 100%;
}

.toolbar {
    height: 65px;
    background-color: #fff;
    border-top: 1px solid #E8E8E8;
    transition: All .2s ease-out;
    -webkit-transition: All .2s ease-out;
    -moz-transition: All .2s ease-out;
    -o-transition: All .2s ease-out;
    z-index: 10;
}

.toolbar.hide {
    bottom: -65px;
}

.toolbar ul {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: space-around;
    align-items: center;
}

.toolbar ul li {
    text-align: center;
    flex: 40px 0 0;
}

.toolbar ul li i {
    display: block;
    margin: 0 auto;
    width: 24px;
    height: 24px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.toolbar ul li i.ico_map {
    background-image: url(../img/assets/ico-tool-map.svg);
}

.toolbar ul li i.ico_search {
    background-image: url(../img/assets/ico-tool-search.svg);
}

.toolbar ul li i.ico_home {
    background-image: url(../img/assets/ico-tool-home.svg);
}

.toolbar ul li i.ico_favor {
    background-image: url(../img/assets/ico-tool-favor.svg);
}

.toolbar ul li i.ico_profile {
    background-image: url(../img/assets/ico-tool-profile.svg);
}

.toolbar ul li.active i.ico_map {
    background-image: url(../img/assets/ico-tool-map-active.svg);
}

.toolbar ul li.active i.ico_search {
    background-image: url(../img/assets/ico-tool-search-active.svg);
}

.toolbar ul li.active i.ico_home {
    background-image: url(../img/assets/ico-tool-home-active.svg);
}

.toolbar ul li.active i.ico_favor {
    background-image: url(../img/assets/ico-tool-favor-active.svg);
}

.toolbar ul li.active i.ico_profile {
    background-image: url(../img/assets/ico-tool-profile-active.svg);
}

.toolbar ul li span {
    font-size: 11px;
    color: #000000;
    line-height: 16px;
}

/* 리스트형 모달 */
.modal_type_list {
    position: fixed;
    top: 0;
    width: 32%;
    height: 100%;
    z-index: 200;
    pointer-events: none;
}

.modal_type_list .modal_cover {
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.7);
    pointer-events: none;
    opacity: 0;
    transition: All .2s ease-in-out;
    -webkit-transition: All .2s ease-in-out;
    -moz-transition: All .2s ease-in-out;
    -o-transition: All .2s ease-in-out
}

.modal_type_list.open .modal_cover {
    opacity: 1;
    pointer-events: visible;
}

.modal_type_list .inner {
    position: absolute;
    bottom: -100%;
    left: 0;
    width: 100%;
    background-color: #fff;
    border-radius: 30px 30px 0 0;
    pointer-events: visible;
    transition: All .2s ease-in-out;
    -webkit-transition: All .2s ease-in-out;
    -moz-transition: All .2s ease-in-out;
    -o-transition: All .2s ease-in-out
}

.modal_type_list .inner.linear {
    transition: none;
    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none
}

.modal_type_list .inner.in {
    transition: All .2s ease-out;
    -webkit-transition: All .2s ease-out;
    -moz-transition: All .2s ease-out;
    -o-transition: All .2s ease-out
}

.modal_type_list .inner.out {
    transition: All .3s ease-out;
    -webkit-transition: All .3s ease-out;
    -moz-transition: All .3s ease-out;
    -o-transition: All .3s ease-out
}

.modal_type_list .inner .pull {
    height: 40px;
    width: 100%;
    position: relative;
}

.modal_type_list .inner .pull::after {
    content: "";
    display: block;
    width: 60px;
    height: 5px;
    border-radius: 5px;
    background-color: #EDEDED;
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
}

.modal_type_list .inner .cont {
    padding: 20px;
    padding-top: 0;
}

.modal_type_list .inner .cont em {
    font-size: 18px;
    font-weight: bold;
    color: #111111;
    display: block;
    margin-bottom: 13px;
}

.modal_type_list .inner ul.radio_list li + li {
    border-top: 1px solid #EDEDED;
}

.modal_type_list .inner ul.radio_list li input[type=radio] {
    display: none;
}

.modal_type_list .inner ul.radio_list li input[type=radio] + label {
    background-image: url(../img/assets/ico-radio.svg);
    background-position: left center;
    background-repeat: no-repeat;
    background-size: 20px auto;
    padding-left: 27px;
    line-height: 50px;
    font-size: 15px;
    letter-spacing: -0.04em;
    font-weight: 500;
    color: #333333;
}

.modal_type_list .inner ul.radio_list li input[type=radio]:checked + label {
    background-image: url(../img/assets/ico-radio-checked.svg);
}

.modal_type_list .inner .share_list {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-around;
}

.modal_type_list .inner .share_list li {
    flex: 60px 0 0;
}

.modal_type_list .inner .share_list li button {
    border: none;
    width: 100%;
    background-color: transparent;
}

.modal_type_list .inner .share_list li i {
    display: block;
    margin: 0 auto;
    width: 55px;
    height: 55px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    margin-bottom: 10px;
}

.modal_type_list .inner .share_list li span {
    font-size: 13px;
    color: #666666;
    text-align: center;
}

.modal_type_list .inner .btn_report {
    display: block;
    border: none;
    background-color: transparent;
    line-height: 28px;
    font-size: 14px;
    color: #666666;
    font-weight: 500;
}

.modal_type_list .inner .btn_report::before {
    content: "";
    display: inline-block;
    vertical-align: top;
    width: 28px;
    height: 28px;
    margin-right: 6px;
    background-image: url(../img/assets/ico-report.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.modal_type_list .inner .option_wrap .item_info i {
    font-size: 13px;
    font-weight: 500;
    color: #33B3D2;
    line-height: 20px;
}

.modal_type_list .inner .option_wrap .item_info p {
    font-size: 15px;
    line-height: 20px;
    color: #333333;
    font-weight: 500;
}

.option_select {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}

.option_wrap .option_select{
    margin-top: 14px;
    padding-bottom: 16px;
    border-bottom: 1px solid #DFDFDF;
}

.option_select span {
    font-size: 14px;
    line-height: 20px;
    color: #000000;
    display: block;
}

.option_select span b {
    font-weight: 600;
}

.quantity {
    display: flex;
}

.quantity button {
    flex: 23px 0 0;
    width: 23px;
    height: 23px;
    border: none;
    background-color: transparent;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.quantity button.quan_up {
    background-image: url(../img/assets/ico-btn-quan-up.svg);
}

.quantity button.quan_down {
    background-image: url(../img/assets/ico-btn-quan-down.svg);
}

.quantity > div {
    width: 65px;
    text-align: center;
    font-size: 0;
}

.quantity p,
.quantity input[type=text] + label {
    display: inline-block;
    vertical-align: top;
    line-height: 23px;
    font-size: 14px;
    color: #000000;
}

.quantity input[type=text] {
    display: none;
}

.modal_type_list .inner .price_total {
    padding-top: 14px;
}

.modal_type_list .inner .price_total dl {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal_type_list .inner .price_total dl dt {
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: #666666;
}

.modal_type_list .inner .price_total dl dd span {
    font-size: 15px;
    color: #666666;
}

.modal_type_list .inner .price_total dl dd span i {
    font-size: 20px;
    color: #C80606;
    font-weight: 600;
}

.modal_type_list .inner .modal_form .form_row {
    display: flex;
}

.modal_type_list .inner .modal_form .form_row.col_wrap > div + div {
    margin-left: 10px;
}

.modal_type_list .inner .modal_form .form_row + .form_row {
    margin-top: 10px;
}

.modal_type_list .inner .modal_form .form_row .input_wrap {
    position: relative;
    flex: 1;
}

.form_row .input_wrap .select_date {
    border: none;
    width: 42px;
    height: 42px;
    background-image: url(../img/bean/ico-cal.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-color: transparent;
    position: absolute;
    right: 0;
}

.modal_type_list .inner .modal_form .form_row .btn_basic {
    display: block;
    flex: 1;
    line-height: 46px;
    width: 100%;
    background-color: #34925F;
    font-size: 15px;
    color: #FFFFFF;
    font-weight: bold;
    text-align: center;
    border-radius: 5px;
    border: none;
}



/* 에셋 */
.rate_star{
    height:14px;
    display:inline-block
}

.rate_star label{
    float:right;
    cursor:pointer;
    margin-right:2px;
    background-image: none !important;
    padding: 0 !important;
    cursor: default !important;
}

.rate_star label:before{
    content: "";
    display: block;
    width: 14px;
    height: 14px;
    box-sizing: border-box;
    background-image: url(../img/assets/ico-rate-star.svg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center
}

.rate_star input{
    display: none
}

.rate_star input:checked~label:before{
    background-image: url(../img/assets/ico-rate-star-fill.svg)
}

.rate_star.total{
    height: 25px
}

.rate_star.total label{
    margin-right: 25px
}

.rate_star.total input:first-child + label{
    margin: 0
}

.rate_star.total label:before{
    width: 26px;
    height: 25px
}

.select_box {
    width: 100%;
}

.select_box > div {
    width: 100%;
    border: 1px solid #DFDFDF;
    border-radius: 5px;
    position: relative;
    overflow: hidden;
}

.select_box > div::after {
    content: "";
    display: block;
    width: 13px;
    height: 8px;
    background-image: url(../img/assets/ico-angle-select.svg);
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 16px;
}

.select_box > div select {
    width: 100%;
    border: none;
    font-size: 14px;
    color: #333333;
    line-height: 40px;
    padding: 0 16px;
    background-color: #fff;
}

input[type=text],
input[type=password],
input[type=date],
input[type=number],
textarea {
    width: 100%;
    border: 1px solid #DFDFDF;
    border-radius: 5px;
    line-height: 40px;
    padding: 0 16px;
    font-size: 14px;
}

input[type=radio] {
    appearance: auto;
}

input[type=text]:read-only,
input[type=password]:read-only,
input[type=number]:read-only {
    background-color: #F7F7F7;
    border: 1px solid #E8E8E8;
    color: #787878;
}

input[type=text] + label,
input[type=password] + label {
    display: none;
}

input[type=file] {
    display: none;
}

input[type=file] + label {
    display: block;
    width: 100%;
    padding-top: 100%;
    background-image: url(../img/assets/ico-camera.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 24px auto;
    background-color: #F0F0F0;
    border-radius: 5px;
}

input[type=checkbox] {
    display: none;
}

input[type=checkbox] + label {
    padding-left: 22px;
    line-height: 22px;
    background-image: url(../img/assets/ico-checkbox.svg);
    background-position: left center;
    background-repeat: no-repeat;
    background-size: 22px auto;
}

input[type=checkbox]:checked + label {
    background-image: url(../img/assets/ico-checkbox-checked.svg);
}

input[type=checkbox] + label span {
    display: inline-block;
    vertical-align: top;
    line-height: 22px;
    font-size: 14px;
    color: #333333;
    padding-left: 9px;
}

/* 공통 컨펌 알럿 */
.confirm_modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: showOpacity 0.2s forwards;
}

.confirm_modal .inner {
    background-color: #fff;
    border-radius: 5px;
    width: 320px;
    padding: 20px 25px;
}

.confirm_modal .inner p {
    font-size: 14px;
    line-height: 20px;
    color: #666666;
    text-align: center;
}

.confirm_modal .inner .cont {
    padding: 20px 0;
}

.confirm_modal .inner .btn_wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
}

.confirm_modal .inner .btn_wrap > button {
    flex: 1;
    height: 40px;
    border: 1px solid #DFDFDF;
    font-size: 15px;
    color: #666666;
    border-radius: 4px;
}

.confirm_modal .inner .btn_wrap > button + button {
    margin-left: 8px;
}

.confirm_modal .inner .btn_wrap > button.btn_confirm {
    background-color: #265B3E;
    border: 1px solid #265B3E;
    color: #fff;
}

.pointer {
    cursor: pointer;
}

.modal_btn_theme {
    margin-top: 20px;
    width: 50%;
    line-height: 40px;
    border: none;
    background-color: #7367f0;
    border-radius: 7px;
    font-size: 16px;
    color: #fff;
}
.modal-refill{
    width: 100%;
    height: 70%;
    position: relative;
    top: 10%;
    border-radius: 5px;
    background-color: #fff;
    z-index: 999;
}
.modal-refill #header{
    position: relative;
    border-radius: 5px 5px 0 0;
}
.modal-refill .contents{
    min-height: unset;
}
.modal-refill .contents .section_do_refill{
    position: relative;
    display: block;
    top: auto;
}
.modal-refill .contents .section_do_refill .modal-select1{
    margin-top: 7vh;
}
.modal-refill .contents .section_do_refill .fixed_btm{
    position: relative;
    margin-top: 5vh;
}
.modal-refill .contents .section_do_refill .fixed_btm .modal_select2{
    border-radius: 5px;
}
/** sweetAlert css customize swal2 설정 **/
.swal2-show{
 width: 95% !important;
}
.swal2-content {
    word-break: keep-all;
}
.swal2-title {
    font-size: 25px;
}
.swal2-select {
    appearance: auto;
}
.swal2-validation-message{
    margin : 10px 0 0 0 !important;
    font-size: 14px !important;
}
.swal2-timer-progress-bar{
    background-color: rgb(164 220 134) !important;
}
.section_do_refill .green{
    color: rgb(164 220 134) !important;
}
.section_do_refill ul{
    border: 1px solid #999999;
    border-radius: 10px;
    padding : 0 10px 0 10px;
    overflow: auto;
    max-height: 240px;
}
.section_do_refill ul li{
    line-height: 16px;
    font-size: 13px;
    color: #02612e;
    padding: 10px 0 10px 0;
    display: flex;
    flex-direction: column;
    font-weight: 600;
}
.section_do_refill ul li+li{
    border-top: 1px solid #b0b0b0;
}
.section_do_refill ul span{
    font-size: 11px;
    color: #64011c;
    font-weight: 500;
}

/* 글자 자르기 설정 */
.cut_letter {
    white-space: initial;
    word-break: keep-all;
}

/* height initial로 설정: 스크롤 방지 */
.initial_height {
    min-height: initial;
}

.animation_show_up {
    animation: showUp 1s forwards;
}

.hr-sect {
    display: flex;
    flex-basis: 100%;
    align-items: center;
    color: rgba(0, 0, 0, 0.35);
    font-size: 12px;
    margin: 8px 0px;
}
.hr-sect::before,
.hr-sect::after {
    content: "";
    flex-grow: 1;
    background: rgba(0, 0, 0, 0.35);
    height: 1px;
    font-size: 0px;
    line-height: 0px;
}
.form_row .comment{
    font-size: 13px;
    color: rgba(0, 0, 0, 0.35);
}
.image_detail{
    display: grid;
    gap: 10px;
    padding-bottom: 30px;
}
.section_collect_item .hide{
    display: none;
}