@charset "utf-8";
@import url(./ui-fo.css);

/* Mobile Layout */
/* @media screen and (max-width: 767px) { */

    body {padding-top: env(safe-area-inset-top);padding-top: constant(safe-area-inset-top);padding-bottom: env(safe-area-inset-bottom);padding-bottom: constant(safe-area-inset-bottom);touch-action:manipulation;}
    ::-webkit-input-placeholder,
    .inputSet input::-webkit-input-placeholder {color: #666;}
    :-ms-input-placeholder,
    .inputSet input:-ms-input-placeholder {color: #666;}
    .inputSet input {color: #666;}
    :focus:not(:focus-visible) {outline:0;}
    :focus-visible {outline-color:#ffa231 !important;}
    .wrap {width: 100%;padding: 0;margin: 0 auto;max-width: 767px;min-width: 280px;min-height:100vh;}
    .header {position: fixed;top: 0;left: 0;width: 100%;height: 58px;min-width: 280px;text-align: center;background: #fff;border-bottom: 1px solid #eee;z-index: 100;}
    .header .btn-back {position: absolute;display: block;top: 50%;left:0;width: 44px;height: 44px;transform: translateY(-50%);background: url(../images/header-icon-back-black.svg) no-repeat center center;background-size: 21px 21px;}
    .sectionHeader {position: relative;width: 100%;height: 100%;max-width: 767px;margin: 0 auto;padding: 16px 12px;border: 0;} 
    .sectionHeader .pageTitle {font-size: 20px;font-weight: bold;line-height: 1.3;text-align: center;}    
    .main {position: relative;display: block;width: 100%;padding: 0 16px;}
    .header:not([style*="display: none"]) + .main {padding-top: 58px;}
    .contentWrap {padding-top: 0;padding-bottom: 34px;}    
    .tabWrap .tabItem {width: 50%;max-width: 50%;}
    .tabArea .tabList .tabItem .tab.active::after {bottom:1px;}
    .contentWrap {max-width:767px;}
    .contentWrap .tabArea {width: 100%;left: 50%;transform: translateX(-50%);z-index: 10;}
    .contentWrap .tabArea .tabList {width: calc(100% + 32px); margin: 0 -16px;}
    .contentWrap .tabArea::after {left: -16px;width:calc(100% + 32px);}
    .contentWrap .inquiryWrap dt h3 {line-height:20px;}
    .btnWrap .btn {min-width: 100px;font-size:14px;line-height:16px;padding:14px;}
    .btnSelect {color: #666;}
    .btnSelect:after {content: '';position: absolute;top:14px;right:16px;display: block;width:16px;height:16px;background: #fff url(../images/icon-down-bold-16.svg) no-repeat;transform: rotate(-90deg);}    
    .contentWrap .inquiryWrap dt {width: 100%;}
    .contentWrap .inquiryWrap dd {width: 100%;}
    .contentWrap .inquiryWrap dt .fw-regular {color: #666;}
    .alertTxt, .errorMsg {margin-top: 6px;}
    .customerInputForm .inputSet.error + .alertTxt + .listDot {margin-top: 8px;}
    .customerInputForm .picUploadWrap .picUploadList li {width: 85px;height: 85px;}
    .productBox .productContent .info {padding-left: 10px; padding-right: 0;}
    .searchWrap .dropdown {width: 93px;}
    .searchWrap .dropdown.region + .searchSet {width: calc(100% - 101px);padding-right: 40px;}
    .searchWrap.regionBox {padding:0 0 19px 0;border-bottom: 1px solid #ddd;}
    .dropdown .dropdownInner::after {width: 16px;height: 16px;top:14px;right:16px;background-image:url(../images/icon-down-bold-16.svg)}
    .dropdown.region .dropdownInput {width:93px;color:#000;height:40px;line-height:40px;padding: 0 30px 0 10px;}
    .dropdown.region .dropdownInner.small::after {right:10px;width:16px;height:16px;}
    .dropdown.region .dropdownBox .option .optionItem {padding:10px;}
    .searchSet .inputSet .inputSearch {height:38px;line-height:38px;}
    .storeBox .storeHeader {font-size: 14px;line-height: 1.25;margin-bottom: 8px;}
    .storeBox .storeTitle {font-size: 16px;font-weight: bold; color:#000;line-height: 20px;}
    .storeBox .option {color:#000;font-size: 13px;line-height: 18px;}
    .storeBox .addressWrap {color: #666;font-size: 14px;line-height: 18px;}
    .productBox .productContent .info {width: calc(100% - 108px);}
    .productBox .btnDelBox, .storeBox .btnDelBox {top: 16px; right: 16px; width: 16px; height: 16px;background-image:url(../images/icon-close-black-16.svg);}
    .productBox .productContent .info .option {margin-top:9px;}
    .productBox .productContent .info .price strong {font-size:16px;font-weight:bold;}
    .productBox .productOrderInfo .orderDate {margin-right:19px;}
    /* .productBox .productOrderInfo .orderDate + .orderNo {margin-left:19px;} */
    .productOrderTxt {font-size: 14px;line-height:16px;}
    .searchSet .btnSearch {width: 24px;height: 24px;right: 10px;}
    .searchSet .inputSet .inputSearch {padding-right: 0;}
    .questionItem {position: relative;min-height: 79px;color: #000;border-bottom: 1px solid #ddd;cursor: pointer;}
    .questionItem .acc-head {display: block;}
    .accordion .acc-head .questionTitle {flex: 1;display: block;width: calc(100% - 62px);height: auto;line-height: 20px;padding-right: 12px;}
    .questionItem .questionTitle .label {font-weight: bold;}
    .accordion .acc-trigger {display: none;}
    .inquiryList {margin-top: 0;}
    .inquiryWrap .productBox .productContent .info .productTitle {max-height:40px;}
    .customerInputForm .picUploadWrap {margin-top:0;}
    .customerInputForm .listDot {margin-top:8px;}
    .customerInputForm .picUploadWrap .picUploadList li .btnUpload {background-size:40px 40px; background-image:url(../images/icon-camera-40.svg);}
    .customerInputForm .picUploadWrap .picUploadList li input[type="file"]:focus-visible +.btnUpload {outline: 3px solid #ffa231; outline-offset:-1px;}
    .questionStatus {display: block;}
    .questionStatus .flag {position: absolute;right: 0;top: 16px;border: 0;min-width: 50px;height: 22px;line-height: 20px;padding: 2px 4px;color: #000;font-size: 12px;letter-spacing: normal;background-color: #eee;}
    .questionStatus .date {/* display: block; */ color: #666;min-width:70px;font-size: 14px;letter-spacing:normal;line-height: 20px;margin: 6px 0 0 0;}
    .questionTitle {line-height: 20px;padding:0 60px 0 0;max-width:100%;}
    .questionTitle::before {content: none;}
    .questionDate {font-size: 14px;line-height: 16px;color: #000;margin-bottom:20px;}
    .questionDate > dt,
    .questionDate > dd {display: inline-block;}
    .questionDate > dd {padding-left: 2px;}
    .questionDate + .productBox {margin: 20px 0;}
    .detailAnswer {position: relative;}
    .detailAnswer .productBox .productContent .info {width: calc(100% - 85px);}
    .detailAnswer .questionContent {padding-bottom: 8px;margin-bottom:0; border-bottom:1px solid #eee;}
    .detailAnswer .questionContent + .answerContent {margin-top: -1px;padding-bottom: 4px;}
    .detailAnswer .productBox {padding: 16px;}
    .detailAnswer .questionContent.selectedBox {padding-top: 0;}
    .detailAnswer .btnDelBox {position: absolute;top:0;right: 0;width: 16px;height: 16px;background: url(../images/icon-close-black-16.svg) no-repeat center center;}
    .answerBox {border-top:0 !important;border-bottom: 1px solid #eee;}
    .answerBox .infoWrap .answerDate::before {background-color: #bbb;}
    .answerBox .icon-tooltip {margin-left: 2px;}
    /* .tooltipWrap .tooltipBox {top:24px;left:0;} */
    .swiper .swiper-button-prev, .swiper .swiper-button-next {width: 32px;height: 32px;}
    .noDataWrap {padding: 88px 0 100px;}
    .moreWrap {margin:24px auto 0;text-align:center;}
    .moreWrap .more {display:inline-flex;align-items:center;justify-content:center;min-width:135px;height:42px;font-size:13px;font-weight:500;color:#000;letter-spacing:-0.03px;border-radius:100px;background:#fff;border:1px solid #ddd;}
    .moreWrap .more em {font-weight:inherit}
    .inquiryList .noDataWrap {padding-top: 128px;}
    .popup .popHeader {height:52px;padding:12px;}
    .popup .popClose {top:12px;background-image: url(../images/icon-close-20.svg);background-size:20px 20px;}
    .popup.galleryPopup .popupBox .swiper .swiper-slide, 
    .popup.galleryPopup .popupBox .uploadImageWrap {padding: 40px 0 50px;}
    .popup.galleryPopup .popupBox .swiper .swiper-slide > figure, .popup.galleryPopup .popupBox .uploadImageWrap > figure {max-width:767px;}
    .popup.galleryPopup .popClose {top: 10px;right: 10px;}
    .popup .popupBox {position:absolute;top:0;left:0;right:0;bottom:0;width: 100%;height:100%;max-width:100%;max-height: 100%;border-radius:0;-ms-transform: translate(0,0);transform: translate(0,0);-webkit-animation:slideUpBottom 0.2s ease-in-out;animation:slideUpBottom 0.2s ease-in-out;}
    .popup .popHeader .popupTitle {text-align: center;font-weight: bold;letter-spacing: normal;}
    .popup .popContent {padding: 32px 16px;}
    .popup .productList .productItem .productBox {padding: 20px 0;}
    .popup .productList .productItem .productBox .productContent .thumb {width: 108px;height: 108px}
    .popup .productList .productItem:last-child::after {content: '';position: absolute; left: 0; bottom: 0;display: block; width: 100%; height: 1px; background: #eee;}
    .popup .productListWrap .productOrderInfo .orderDate {margin-right:36px;}
    .popup .productListWrap .productOrderInfo .orderDate + .orderNo {/* margin-left: 36px; */line-height:20px;}
    .popup .productBox .productContent .thumb {width: 85px; height: 85px;}
    .popup .productBox .productContent .info .option {margin-top:9px;}
    .popup .answerBox dd {margin-top: 10px;}
    .popup .answerBox .ellipsis2 {padding-right: 20px;}
    .popup .questionDetail {position: relative;padding: 0 0 0 21px;font-weight: 500;margin-bottom:12px;}
    .popup .questionDetail::before {content: 'Q.';position: absolute;top: 0;left: 0;display: inline-block;line-height: 1.57;letter-spacing: -0.28px;color: #000;width: 17px;padding-right: 4px;font-weight: bold;white-space:nowrap;}
    .popup .questionContent .questionPic {padding-left: 21px;margin-top: 20px;margin-bottom: 4px;}
    .popup .questionContent .questionPic > ul {font-size: 0;}
    .popup .questionContent .questionPicList {padding-left:21px;}
    .popup .popFooter {position: relative;margin-top: 32px;}
    .popup .popFooter .btn {padding:14px;line-height:1.5;}
    .popup .popFooter .btnWrap {margin-top: 0;}
    .popup .popFooter .footerInner {padding: 0;}
    .fixedFooter .popFooter {position: absolute;margin: 0 0 32px;padding: 0 16px;left: 0;}
    .fixedFooter .popFooter .footerInner {padding: 0;}
    .popup .fixedFooter .popContent {height: calc(100% - 52px);}

    @keyframes slideUpBottom {
        0% { 
            /* opacity: 0;  */
            transform: translate(0, 3%);
            -webkit-transform: translate(0, 3%);
            -moz-transform: translate(0, 3%);
            -o-transform: translate(0, 3%);
            -ms-transform: translate(0, 3%);
        }
        100% {
            /* opacity:1;  */
            transform: translate(0, 0);
            -webkit-transform: translate(0, 0);
            -moz-transform: translate(0, 0);
            -o-transform: translate(0, 0);
            -ms-transform: translate(0, 0);
        }
    }

    @media screen and (max-width: 280px) {
        /* .productBox .productOrderInfo .orderDate + .orderNo {margin-left:10px;} */        
        .productBox .btnDelBox, .storeBox .btnDelBox {right:10px;}
        .productBox .productOrderInfo .orderDate,
        .popup .productListWrap .productOrderInfo .orderDate {margin-right:10px;}
        .popup .productList .productItem .productBox .productContent .thumb {width:85px;height:85px;}
        .popup .productBox .productContent .info {width:calc(100% - 85px);}
    }

/* } */