body {
    background:#fafafa;
}

.topcontent {
    width: 100%;
    background: white;
    height: auto;
    padding-bottom: 4%;
}

.bigSize_container.on {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 200001;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    background-color: rgba(0, 0, 0, 0.80);
    display: flex;
    align-items: baseline;
    justify-content: center;
}

.no-scroll {
    overflow:hidden;
}

#bigSize_img {
    position: relative;
    z-index: 2;
    max-width: 800px;
    width: 100%;
    height: auto;
}


@media screen and (max-width:768px) {
    .DetailContent .topImage {
        width:100%;
        height:300px;
    }
}

.topImage {
    height: auto;
    width: 100%;
}

.mainimage {
    width: 500px;
    height: 500px;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
}

.mainimage > img {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(50, 50);
    object-fit: cover;
    margin: auto;
    aspect-ratio: auto;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.subimagelist {
    width: 500px;
    height: 120px;
    margin-top: 10px;
    display: flex;
    position: relative;
    overflow-x: auto;
    flex-wrap: nowrap;
    white-space: nowrap;
    scroll-behavior: smooth;
    box-sizing: border-box;
}

.subimage {
    width: 98px;
    height: 98px;
    position: relative;
    float: left;
    margin-right: 5px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    min-width: 98px;
    line-height: 100px;
    cursor: pointer;
}

.subimage >img {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(50, 50);
    object-fit: cover;
    margin: auto;
    aspect-ratio: auto;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.sideoption {
    width:380px;
}

@media screen and (min-width: 992px) {
    .pc_image_startarea {
        width: 100%;
        position: relative;
        display: flex;
        flex-direction: row;
        justify-content: center;
        border:none;
    }

    .Detailcontent {
        width: 100%;
        padding-bottom: 40px;
        max-width: 100%;
        display: block;
        margin: auto !important;
        background: #fafafa;
    }

    .topmainImage {
        height:auto;width:500px;margin-right:10px;
        position: relative;
    }

    .detailheadinfo {
        width: calc(100% - 520px);
        height:auto;
        padding-left: 50px;
        padding-top: 5px;

    }
    .star {
        width: 14px;
        height: 14px;
        background-size: 14px;
    }

    .order-check {
        width: 100%;
        height: auto;
        position: static;
        z-index: 9999;
        border-radius: 6px;
        margin-bottom: 10px;
        padding: 0px;
    }

    .pc_detail_content_wrapper {
        max-width: 1080px;
       
    }

    .menuContent {
        max-width: 1200px;
        margin: auto;
        display: flex;
        flex-direction: row;
    }

    .detailcontentarea {
        flex:1;
        width:100%;
        max-width: 820px;
    }

    .sideorder {
        width: 440px;
        height: fit-content;
        padding:30px 20px 0px 60px;
    }

    .menupick {
        position:fixed;
        top:120px;
        
    }

    .orderbottom {
        margin-top:400px;
    }

    .orderbottompick {
        position:fixed;
        bottom:10px;
        width: 360px;;
    }

    .swiper-slide {
        width: 500px !important; 
    }

    .order-bottom-btn {
        display:none;
    }

    
}

.tabcont {
    display: flex;
    width: 100%;
    max-width: 1080px;
}
.order-check-selected-box {
    width: 100%;
    padding: 13px;
    background-color: #eee;
    border-radius: 2px;
    position: relative;
    margin-bottom: 10px;
}

.categoryname {
    color: #7c7c7c;
}

.detailmid {
    display: flex;
    margin-top: 10px;
    font-size: 20px;
    font-weight: bold;
    color: black;
    align-items: center;
    justify-content: space-between;
}

.stararea {
    display: flex;
    align-items: center;
    gap: 10px;
}

.starpoint  {
    font-size: 15px;
    font-weight: 500;
}

.mainpricearea {
    margin-top: 20px;
    display: flex;
}

.maingiftprice > span {
    font-size: 20px;
    color: black;
    font-weight: bold;
    margin-right: 2px;
}

.iconarea {
    display: flex;
    margin-left: 20px;
    align-items: center;
    gap: 3px;
}

.maindelivery {
    margin-top: 20px;
    display: flex;
    gap: 13px;
    color: #9e9e9e;
}

.deliveryprice {
    color: black;
    font-weight: 500;
}

.deliverydate {
    font-size: 11px;
    margin-top: 5px;
    margin-bottom: 6px;
    color: #4f4f4f;
}

.deliveryinfo {
    font-size: 10px;
    color: #4f4f4f;
}

.line, .linemobile {
    background: #e9e9e9;
    height: 1px;
    margin-top: 40px;
    margin-bottom: 40px;
}

.select-box {
    position: relative;
    width: 100%;
    margin: 20px 0;
}

.selected {
background-color: transparent;
border: 1px solid #d9d9d9;
padding: 10px;
border-radius: 3px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 12px;
background-image:url('../../img/selectclose.png');
background-repeat: no-repeat;
background-size: 10px;
background-position-x: calc(100% - 10px);
background-position-y: center;

}

.selected.open {
border: 1px solid #00a0b6;
background-image:url('img/selectopen.png');
  background-repeat: no-repeat;
background-size: 10px;
background-position-x: calc(100% - 10px);
background-position-y: center;
}


.options-container {
display: none;
position: absolute;
top: 100%;
left: 0;
width: 100%;
border: 1px solid #00a0b6;      
background: white;      
z-index: 101;
margin-top: -3px;
max-height:210px;
overflow-y:scroll;
}

.option {
padding: 7px;
cursor: pointer;
border-bottom: 1px solid #e9e9e9;
font-size: 12px;
padding-left: 10px;
display: flex;
justify-content: space-between;
padding-right: 10px;
color: #505050;
    height: 40px;
    line-height: 29px;
}

.optionnosel {
padding: 7px;
border-bottom: 1px solid #e9e9e9;
font-size: 12px;
padding-left: 10px;
display: flex;
justify-content: space-between;
padding-right: 10px;
color:rgb(170, 170, 170);
    height: 40px;
    line-height: 29px;
}

#sidemenu > .orderresult {
    padding-right:40px;
}

.option:hover {
background-color: #f0f0f0;
}

.option.selected {
background-color: #e0f7fa;
}

.ordercalc {
display: flex;
justify-content: space-between;
font-weight: bold;
color: black;
font-size: 12px;
align-items: center;
padding:10px;
}

.order_total_price {
font-size:14px;
}

.orderbtn {
width: 100%;
margin-top: 40px;
display: flex;
gap: 20px;
}

.giftitems {
font-size:12px;
cursor: pointer;
}

.productinfo {
    max-width: 820px;
   
}

.productdesc {
    padding:0px;
    margin:0px;
}

.priceititle {
    text-align: center;
    font-size: 14px;
    background: #00a0b6;
    margin-left: 0px;
    margin-top: 0px;
    line-height: 40px;
    height: 40px;
    color: white;
}
.art_con_text {
    margin-top: 0px;
    padding: 20px;
    color: black;
}
.gifttab.sticky {
    position: fixed;
    top: 63px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    z-index: 100;
  }

  .swiper-button-next {
    width: 18px;
    height: 18px;
    position: absolute;
    top: 42%;
    right: 10px;
    transform: translateY(-50%);
    margin-top: 0;
    background: initial;
    background-size: 18px 18px;
    color:#00a0b6 !important;
}

.swiper-button-prev {
    width: 18px;
    height: 18px;
    position: absolute;
    top: 42%;
    left: 10px;
    transform: translateY(-50%);
    margin-top: 0;
    background: initial;
    background-size: 18px 18px;
    color:#00a0b6 !important;
}

.order-check {
    background-color: transparent;
}

.scrollLock {
    overflow :hidden;
}

.go_top_style {
    font-size: 1.8rem;
    width: 45px;
    height:45px;
    background-color:white;
    color:#c2c0c0;
    border: none;
    border-radius: 50%;
    box-shadow: 0px 0px 9px 1px rgba(3,3,3,0.20);
}

@media screen and (max-width: 768px) {
    .mainimage {
        width: 100%;
        position: relative;
        border-radius: 0px;
        overflow: hidden;
        height: fit-content;
    }

    .swiper-button-next, .swiper-button-prev {
        top:200px !important;
    }

    .subimagelist {
        display:none;
    }

    .swiper-slide {
        aspect-ratio: 1;
        height: fit-content !important;
    }

    .detailheadinfo {
        padding:20px;
    }

    .line, .optionarea {
        display:none;
    }

    .order-bottom-btn {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .order-bottom-btn > .head_icon {
        width: 40px;
    }

    .sideorder {
        display:none;
    }

    .detailcontentarea {
        padding-bottom:80px;
    }

    .order_cont > .order-option {
        padding: 20px;
        border-top-right-radius: 10px;
        border-top-left-radius: 10px;
        padding-top: 30px;
    }

    .order_cont > .order-option > .select-box {
        margin-bottom: 10px;
        margin-top: 0px;
    }

    .orderbtn {
        width: 100%;
        margin-top: 10px;
        display: flex;
        gap: 20px;
    }

    .order-check {
        padding:0px;
        bottom:0px;
    }

    .options-container {
        height: 140px;
        overflow-y:scroll;
    }
}

.couponarea {
    width:100%;
    height:45px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.couponbg {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.couponbg::before {
  content: "";
  position: absolute;
  top: 0; left: 10px; right: 64px; bottom: 0;
  background: url('../../img/couponbg_center.png') repeat-x;
  background-size: auto 100%;
  z-index: 1;
}

.couponbg::after {
  content: "";
  position: absolute;
  top: 0; left: 0; bottom: 0; width: 14px;
  background: url('../../img/couponbg_left.png') no-repeat left center;
  background-size: contain;
  z-index: 2;
}

.couponbg {
  background: url('../../img/couponbg_right.png') no-repeat right center;
  background-size: contain;
}

.couponbg:hover::before {
  content: "";
  position: absolute;
  top: 0; left: 10px; right: 64px; bottom: 0;
  background: url('../../img/couponbg_center_hover.png') repeat-x;
  background-size: auto 100%;
  z-index: 1;
}

.couponbg:hover::after {
  content: "";
  position: absolute;
  top: 0; left: 0; bottom: 0; width: 14px;
  background: url('../../img/couponbg_left_hover.png') no-repeat left center;
  background-size: contain;
  z-index: 2;
}

.couponbg:hover {
  background: url('../../img/couponbg_right_hover.png') no-repeat right center;
  background-size: contain;
}

.couponcomment {
    width: 100%;
    color: black;
    z-index: 100;
    position: relative;
    display: flex;
    height: 100%;
    align-items: center;
    margin-left: 13px;
    font-size: 12px;
    font-family: 'NanumSquareNeoBold';
}

.couponcont {
    margin: auto;
    background: white;
    z-index: 1000;
    position: relative;
    width: 360px;
    height: auto;
    border-radius: 8px;
}

.modalheader{
    width: 100%;
    height: 60px;
    position: relative;
}

.modaltitle {
    width: 100%;
    text-align: center;
    line-height: 60px;
    font-size: 16px;
    color: black;
    font-family: 'NanumSquareNeoBold';
}

.modalcont {
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
}

.couponlist {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.couponitem {
    display: flex;
    width: 100%;
    border: 1px solid #d9d9d9;
    border-radius: 8px;
    align-items: center;
}

.couponleft {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 20px;
}

.coupontitle1 {
    width: 100%;
    font-size: 20px;
    color: #00a0b6;
    font-family: 'NanumSquareNeoBold';
    line-height: 40px;
}

.couponbadge {
    width: 100%;
    display: flex;
    height: 30px;
    align-items: center;
}

.couponinfo1 {
    font-size: 12px;
    margin-top: 20px;
    color: #9e9e9e;
    font-family: 'NanumSquareNeoBold';
    margin-bottom: 10px;
}

.couponright {
    width: 90px;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.couponline {
    background: url(../../img/couponline.png);
    background-repeat: no-repeat;
    background-size: 1px 113px;
    background-position-y: center;
    width: 1px;
    height:113px;
}

.coupondown {
    background: url(../../img/coupondown.png);
    background-repeat: no-repeat;
    background-size: 56px;
    background-position: center;
    flex: 1;
    height:56px;
}

.coupondown.complate {
    background: url(../../img/coupondown_complate.png);
    background-repeat: no-repeat;
    background-size: 56px;
    background-position: center;
    flex: 1;
    height:56px;
}


.couponalldown {
    width: 100%;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #00a0b6;
    margin-top: 20px;
    color: white;
    border-radius: 8px;
    font-size: 16px;
    font-family: 'NanumSquareNeoBold';
    cursor: pointer;
}

.couponalldowncomplate {
    width: 100%;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #9e9e9e;
    margin-top: 20px;
    color: white;
    border-radius: 8px;
    font-size: 16px;
    font-family: 'NanumSquareNeoBold';
    cursor: pointer;
}

.badgeitem {
    font-size: 11px;
    padding:4px 8px 4px 8px;
    border: 1px solid #d9d9d9;
    border-radius: 8px;
}