@charset "utf-8";

/* [ S ] 옵션 */
:root {
    --sat: env(safe-area-inset-top);
    --sar: env(safe-area-inset-right);
    --sab: env(safe-area-inset-bottom);
    --sal: env(safe-area-inset-left);
}

.btn-close.small {
    width: 0.875em;
    height: 0.875em;
}

.smaller {
    font-size: 0.775rem;
}


#tabs .nav-item .nav-link {
    color: #575e66;
    border: transparent;
}

#tabs .nav-item .nav-link.active {
    background-color: transparent;
    color: var(--bs-danger);
    border-bottom: 2px solid var(--bs-danger);
}


/* .option_contents .accordion-item {
    border: 1px solid;
} */

/* mobile */
@media (max-width: 768px) {
    #option_canvas {
        /* bottom: calc(env(safe-area-inset-bottom) + 25px + 50px) !important; */
        bottom: 50px;
        background: #e5e5e5;
        border: 0;
    }
    
    #option_canvas .offcanvas-header {
        padding:0;
    }
    
    .btn_option_canvas_onoff {
        display: block;
        position: absolute;
        top: 6px;
        left: 50%;
        width: 76px;
        height: 26px;
        margin-left: -38px;
        font-size: 16px;
        line-height: 26px;
        text-align: center;
        z-index: 1;
        background: #fff;
        background: url(/data/costhot/option_window_btn.png);
        background-size: 76px;
    }
    
    .form-control:disabled, .form-control[readonly] {
        background-color: #fff !important;
    }
    
    .collapsing {
        -webkit-transition: none;
        transition: none;
        display: none;
    }
    
    .accordion-button:not(.collapsed) {
        color: initial;
        background-color: initial;
        box-shadow: initial;
        border-bottom: 1px solid #ccc;
    }
    
    .option_contents .accordion-item {
        /* border: 0; */
        margin-bottom: 0.5rem;
    }
    
    .option_contents .accordion-body {
        padding: 0;
    }
    
    .option_contents .accordion-button {
        font-size: 0.85rem;
        padding: 0.85rem 1rem;
    }
    
    .option_contents .accordion-button::after {
        width: 0.85rem;
        height: 0.85rem;
        background-size: 0.85rem;
    }
    
    .option_contents .accordion-button:not(.collapsed) {
        color: #000;
        background-color: #ffe4e2;
        box-shadow: none;
        border-top: 1px solid #ff2233;
        border-left: 1px solid #ff2233;
        border-right: 1px solid #ff2233;
    }
    
    .option_contents .accordion-collapse.collapse.show {
        border-bottom: 1px solid #ff2233;
        border-left: 1px solid #ff2233;
        border-right: 1px solid #ff2233;
    }
    
    .option_contents .card .btn-close {
        position: absolute;
        top : 1rem;
        right : 1rem;
    } 
    
    .option_contents .itemPriceFinal {
        flex-shrink: 0;
        width: auto;
        text-align: right;
    }
}
/* [ E ] 옵션 */

/* [ S ] 이미지 가로 크기 만큼 높이로 잡기 (강제 정사각형 만들기) by.namgu */
.thumb_area {
    width: 100%;
    padding-bottom: 100%;
    position: relative;
    overflow: hidden;
}

.thumb_area img {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 5px;
    border: solid 1px #e5e5e5;
}
/* [ E ] 이미지 가로 크기 만큼 높이로 잡기 (강제 정사각형 만들기) by.namgu */

#tab_contents img {
    width: 100%;
}

#tab_contents p {
    margin: 0 !important;
}

.chk_type input[type=checkbox]:checked {
    background-color: #ff2233;
}

.chk_type input[type=checkbox] {
    display: inline-block;
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 22px;
    height: 22px;
    margin: 0;
    border: 1px solid #ff2233;
    -webkit-border-radius: 0;
    background: #fff;
    -webkit-appearance: none;
}

.chk_type input[type=checkbox]:after {
    display: block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 9px;
    height: 14px;
    margin: 0 auto;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    content: "";
}




.sm-label {
    font-size: .675rem;
    border-radius: 0.2rem;
    color: #0d6efd;
    border: 1px solid #0d6efd;
    padding: 1px 3px;
    margin-right: 10px;
}


/* [ S ] 상품정보 */
.won:after { content: '원'; /* font-size: 70%; */ } 
.percent:after { content: '%'; /* font-size: 70%; */ } 
.ea:after { content: '개'; /* font-size: 70%; */ } 

.goods_title {
    font-size: 1.15rem;
    margin-bottom: 10px;
}

.naver_price_box::before {
    content: ' ';
    /* background-image: url(https://indend-resource.s3.ap-northeast-1.amazonaws.com/icon/naver.svg); */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='655' height='655' overflow='hidden'%3E%3Cdefs%3E%3CclipPath id='clip0'%3E%3Crect x='128' y='110' width='655' height='655'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path='url(%23clip0)' transform='translate(-128 -110)'%3E%3Cpath d='M781.13 710.225C781.13 738.924 757.896 762.169 729.08 762.169L184.05 762.169C155.364 762.169 132 738.924 132 710.225L132 164.944C132 136.245 155.364 113 184.05 113L729.08 113C757.766 113 781.13 136.245 781.13 164.944L781.13 710.225Z' fill='%2300C300' fill-rule='evenodd' fill-opacity='1'/%3E%3Cpath d='M399.631 275.979C359.174 274.159 318.587 275.459 278 275.329 278.259 383.749 278.13 492.169 278.13 600.589 318.587 600.849 359.174 600.719 399.631 600.589 400.279 546.899 398.853 493.079 400.279 439.259 413.635 457.849 425.695 477.349 439.31 495.679 462.002 531.039 487.677 564.319 509.462 600.199 550.308 601.239 591.024 600.199 631.87 600.849 632.26 595.779 632.778 590.709 632.778 585.639 632.13 482.159 633.297 378.679 632.26 275.199 591.932 274.939 551.605 275.329 511.277 275.069 511.018 329.149 511.536 383.229 510.888 437.179 473.413 383.879 438.013 328.759 399.631 275.979Z' fill='%23FFFFFF' fill-rule='evenodd' fill-opacity='1'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 16px 16px;
    height: 16px;
    width: 16px;
    /* margin-right: 0.2rem!important; */
}

/* 
goods_title
percent
price
del_price
won */
/* [ E ] 상품정보 */



/* [ S ] ORDER 관련 */
#order_goods .goods_price {
    font-size: 1.2rem;
    font-weight: bold;
}
#order_goods .won::after {
    font-size: .875rem;
    content: '원';
    font-weight: normal;
}
/* [ E ] ORDER 관련 */



.pop_toolbox_cart {
    display: none;
    z-index: 99999;
    border: 1px solid #b7bfc8;
    border-top: 2px solid #000;
    background-color: #fff;
    position: absolute;
    bottom: 100%;
    left: 50%;
    width: 290px;
    margin-bottom: 6px;
    margin-left: -147px;
}

.pop_toolbox_cart .inner {
    padding: 37px 0 30px;
    text-align: center;
    position: relative;
    line-height: 26px;
}

.pop_toolbox_cart .inner .tit {
    font-size: 17px;
    color: #16181a;
}

.pop_toolbox_cart .inner .tit_sub {
    font-size: 14px;
    color: #666;
}

.pop_toolbox_cart .inner .pop_toolbox_cart_btn {
    margin-top: 18px;
    text-align: center;
}

.pop_toolbox_cart .inner .pop_toolbox_cart_btn a.cart_btn {
    display: inline-block;
    min-width: 58px;
    height: 33px;
    padding: 0 15px;
    border: 1px solid #555;
    background-color: #555;
    font-size: 14px;
    line-height: 30px;
    color: #fff;
    text-align: center;
}

.pop_toolbox_cart .inner .pop_toolbox_cart_btn a.cart_btn.white {
    border: 1px solid #dadada;
    background-color: #fff;
    color: #666;
}

.pop_toolbox_cart .inner .del {
    position: absolute;
    right: 0;
    top: 0;
    width: 27px;
    height: 27px;
    border: 0;
    background: #fff;
    margin-top: 0;
    vertical-align: bottom;
    font-size: 0;
    cursor: pointer;
}

.pop_toolbox_cart .inner .del:before,
.pop_toolbox_cart .inner .del:after {
    overflow: hidden;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16.5px;
    height: 1px;
    margin: -.5px 0 0 -8.2px;
    background: #bbbbbb;
    font-size: 0;
    line-height: 999px;
    color: transparent;
    vertical-align: top;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    content: '';
}

.pop_toolbox_cart .inner .del:after {
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.youtubeWrap {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
}

.youtubeWrap iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
}

.is_pay_button > a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    color: #fff;
    font-size: 1rem;
}















.modal-backdrop {
    --bs-backdrop-zindex: 1055;
}

.modal {
    z-index: 1056;
}

.ui-widget.ui-widget-content {
    width:100%;
    display: block;
    padding: 0.55rem;
    border: 1px solid #bfbfbf;
    background-color: #efefef;
}

.ui-datepicker .ui-datepicker-header {
    background: #fff;
    border: none;
    padding: 0.7rem;
}

.ui-datepicker-title {
    font-size: 1rem;
    font-family: 'SUIT';
}

.ui-icon-circle-triangle-e,
.ui-icon-circle-triangle-w {
    background: none !important;
}

.ui-datepicker .ui-datepicker-prev {
    content: "\f284";
    left: 1rem;
    top: 0.9rem;
}

.ui-datepicker .ui-datepicker-next {
    content: "\f285";
    right: 1rem;
    top: 0.9rem;
}

.ui-datepicker .ui-datepicker-prev:before {
    content: "\f284";
}

.ui-datepicker .ui-datepicker-next:before {
    content: "\f285";
}

.ui-datepicker .ui-datepicker-prev:before, 
.ui-datepicker .ui-datepicker-next:before {
    font-size: 1.3rem;
    display: inline-block;
    font-family: bootstrap-icons !important;
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    vertical-align: -0.125em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.ui-datepicker table {
    font-size: 1rem;
       font-family: 'SUIT';
    background: #fff;
}

.ui-datepicker td span, 
.ui-datepicker td a {
    text-align: center;
    border: none !important;
    background: #fff !important;
}

.ui-state-active {
    position: relative;
    z-index: 1;
    color: #fff !important;
    font-weight: bold !important;
}

.ui-state-active:before {
    content: "";
    position: absolute;
    background: #ff4349 !important;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 34px;
    height: 34px;
    border-radius: 100%;
    z-index: -1;
}

.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
    font-weight: bold;
    color: #496cef;
}