/* ------------------------------------------------------------------------------------------------------------
    common
------------------------------------------------------------------------------------------------------------ */
:root{
    /* --fontNanum:'Nanum Gothic', sans-serif;
    --fontjua:'jua', sans-serif; */
    --mainRed:#d01945;
    --mainBlue:#346aff;
    --subBlue:#1085b4;
    --mainBlack:#333333;
    --mainGray:#ccc;
}

a { text-decoration: none; color:var(--mainBlack); }
a:hover, a:active, a:focus { outline:none; text-decoration:none; color:var(--mainGray); }
h1 { font-size:30px; }
h2 { font-size:24px; }
h3 { font-size:18px; }
h4 { font-size:16px; }
h5 { font-size:12px; }
h6 { font-size:10px; }
h1, h2, h3, h4, h5, h6 { margin:0; font-weight:400; }
sup { color:#ff0000; }

/* input 기본 스타일 초기화 */
input { -webkit-appearance:none; -moz-appearance:none; appearance:none; /* width:2.0rem; height:2.0rem; */ }
input:disabled { cursor: not-allowed; }

.formGroup { margin:10px 0 0; }
.formControl { width:100%; height:40px; font-size:16px; padding:3px 10px; background:#fff; border:1px solid #c5c5c5; }
/* .formControl:hover, .formControl:active, .formControl:focus { outline:none; box-shadow:0px 0px 6px 2px #a181f8; } */

.formItem { display: flex; justify-content: flex-start; align-items: center; }
.formItem .formTitle { width: 177px; text-align: left; padding:10px 10px; }
.formItem .formGroup { display: flex; justify-content: flex-start; align-items: center;  width:100%; margin:0; padding:10px 10px; background:#fff; }
.formItem input { margin:0; }
.bold { font-weight:700; }

/* ------------------------------------------------------------------------------------------------------------
    element - button
------------------------------------------------------------------------------------------------------------ */
.btn { display: flex; justify-content: center; align-items: center; height:30px; padding:0 12px; font-size:14px; line-height:1.42857143; white-space:nowrap; border:1px solid #d9d9d9; border-radius:4px; -ms-touch-action:manipulation; touch-action:manipulation; cursor:pointer;  -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; }
/* .btn:active, .btn.active {  } */
/* .btn:focus { outline:none !important; } */
/* .btn.disabled { opacity: 0.65; box-shadow: none; cursor: not-allowed; } */

.btnXs { height:20px; padding:0 8px; font-size:12px; }
.btnSm { height:25px; padding:0 10px; font-size:12px; }
.btnMd { width:160px; height:30px; padding:0 15px; }
.btnLg { width:80px; height:44px; padding:0 25px; font-size:14px; }
.btnXl { height:50px; padding:0 35px; font-size:12px; }

.btn.btnRound { width:4.0rem; height:4.0rem; padding:0 1.0rem; border-radius:50%; font-size:1.2rem; }
.btn.btnRound.btnXs { width:2.2rem; height:2.2rem; padding:0 0.1rem; font-size:1.2rem; }
.btn.btnRound.btnSm { width:3.0rem; height:3.0rem; padding:0 0.4rem; font-size:1.3rem; }
.btn.btnRound.btnMd { width:3.5rem; height:3.5rem; padding:0 0.6rem; font-size:1.5rem; }
.btn.btnRound.btnLg { width:4.5rem; height:4.5rem; padding:0 0.9rem; font-size:1.7rem; }
.btn.btnRound.btnXl { width:5.0rem; height:5.0rem; padding:0 1.0rem; font-size:2.0rem; }
.btn.btnRound.btnLg i { margin-top:4px; margin-left:5px; }

.btnWrs { color:var(--mainBlue); background:#fff; border-color:var(--mainBlue); }
.btn.btnWrs:hover, .btn.btnWrs:focus { color:#fff; background:var(--mainBlue); }
.btn.btnWrs:active, .btn.btnWrs.active { color:#fff; background:var(--mainBlue); }

.btnWrsFull { color:#fff; background:var(--mainBlue); }
.btn.btnWrsFull:hover, .btn.btnWrsFull:focus { color:#fff; background:var(--mainBlue); }
.btn.btnWrsFull:active, .btn.btnWrsFull.active { color:#fff; background:var(--mainBlue); }

.btnCancel { font-size:14px; font-weight: 700; color:#999999; background:#fff; border-color:#dddddd; }
.btn.btnCancel:hover, .btn.btnCancel:focus { color:#999999; background:#fff; border-color:#dddddd; }
.btn.btnCancel:active, .btn.btnCancel.active { color:#999999; background:#fff; border-color:#dddddd; }

.btnConfirm { font-size:14px; font-weight: 700; color:#fff; background:var(--mainRed); border-color:var(--mainRed); }
.btn.btnConfirm:hover, .btn.btnConfirm:focus { color:#999999; background:var(--mainRed); border-color:var(--mainRed); }
.btn.btnConfirm:active, .btn.btnConfirm.active { color:#999999; background:var(--mainRed); border-color:var(--mainRed); }

.btnfilter { font-size:12px; font-weight: 400; color:#454f5b; background:#fff; border-color:#c4cdd5; }
.btn.btnfilter:hover, .btn.btnfilter:focus { color:#fff; background:var(--mainBlue); border-color:var(--mainBlue); }
.btn.btnfilter:active, .btn.btnfilter.active { color:#fff; background:var(--mainBlue); border-color:var(--mainBlue); }

.btnSearch { font-size:12px; font-weight: 400; color:#fff; background:var(--mainBlue); border-color:var(--mainBlue); }
.btn.btnSearch:hover, .btn.btnSearch:focus { color:#fff; background:var(--mainBlue); border-color:var(--mainBlue); }
.btn.btnSearch:active, .btn.btnSearch.active { color:#fff; background:var(--mainBlue); border-color:var(--mainBlue); }

.btnPre { font-size:14px; font-weight: 400; color:#cccccc; background:#eeeeee; border-color:#dddddd; }
.btn.btnPre:hover, .btn.btnPre:focus { color:#cccccc; background:#eeeeee; border-color:#dddddd; }
.btn.btnPre:active, .btn.btnPre.active { color:#cccccc; background:#eeeeee; border-color:#dddddd; }

.btnNext { font-size:14px; font-weight: 400; color:#111111; background:#fff; border-color:#dddddd; }
.btn.btnNext:hover, .btn.btnNext:focus { color:#111111; background:#fff; border-color:#dddddd; }
.btn.btnNext:active, .btn.btnNext.active { color:#111111; background:#fff; border-color:#dddddd; }

.btnModify { font-size:14px; font-weight: 700; color:#fff; background:#555454; border-color:#555454; }
.btn.btnModify:hover, .btn.btnModify:focus { font-size:14px; font-weight: 700; color:#fff; background:#555454; border-color:#555454; }
.btn.btnModify:active, .btn.btnModify.active { color:#fff; background:#555454; border-color:#555454; }


/* ------------------------------------------------------------------------------------------------------------
    form-radio
------------------------------------------------------------------------------------------------------------ */
.radioGroup { display: flex; justify-content:flex-start; align-items: flex-start; flex-flow: column; width:80px; margin:0 0; }
.radioGroup label { font-size: 13px; color:#666666; }
.radioGroup input[type="radio"]{ display: none; }
.radioGroup input[type="radio"] + label{ position: relative; display: inline-block; padding-left:20px; cursor: pointer; line-height: 20px; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
.radioGroup input[type="radio"] + label:before, .radioGroup input[type="radio"] + label:after{ content: ''; position: absolute; top:4px; left: 3px; width: 13px; height: 13px; text-align: center; color: #fff; border-radius: 50%; -webkit-transition: all .3s ease; transition: all .3s ease; }
.radioGroup input[type="radio"] + label:before { -webkit-transition: all .3s ease; transition: all .3s ease; box-shadow: inset 0 0 0 1px #767676, inset 0 0 0 10px #fff; }
.radioGroup input[type="radio"] + label:hover:before { -webkit-transition: all .3s ease; transition: all .3s ease; box-shadow: inset 0 0 0 2px #0075ff, inset 0 0 0 10px #fff; }
.radioGroup input[type="radio"]:checked + label:before { -webkit-transition: all .3s ease; transition: all .3s ease; box-shadow: inset 0 0 0 2px white, inset 0 0 0 10px #0075ff; border:1px solid #0075ff; }
.radioGroup input[type="radio"]:disabled + label:before { -webkit-transition: all .3s ease; transition: all .3s ease; box-shadow: inset 0 0 0 2px white, inset 0 0 0 10px #fff; border:1px solid #767676; }

/* ------------------------------------------------------------------------------------------------------------
    selectBox
------------------------------------------------------------------------------------------------------------ */
.selectBox { display: flex; width: 48%; flex-direction: column; position: relative; }
.selectBox .options-container { max-height: 0; width:100%; opacity: 0; transition: all 0.4s; overflow: hidden; border-radius: 5px; border: solid 1px #d0d0d0; background-color: #ffffff; order: 1; position: absolute; top: 34px; z-index:3000; }
.selected { display: flex; justify-content: center; align-items: center; flex-flow:column; position: relative; width:100%; height: 64px; padding:0 1.2rem; margin:0 0 1rem; background: #a181f8; border-radius: 5px; border: solid 1px #dcdfe5; order: 0; }
.selected::after { content: ''; width: 7px; height: 7px; position: absolute; top: 9px; right: 15px; border-top: 2px solid #d9d9d9; border-left: 2px solid #d9d9d9; transform: rotate(225deg); transition: all 1s; }
.selected .selectedTxt { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column; width:100%; }
.selected h3, .selectBox label h3 { font-size: 13px; font-weight: 400; line-height: 1.57; color: #666666; width:100%; text-align: left  ; }
.selected h5, .selectBox label h5{ width:100%; font-size: 12px; font-weight: 400; line-height: 1.83; color:var(--mainTxt); }

.selectBox .options-container.active { max-height: 240px; opacity: 1; overflow-y: scroll; }
.selectBox .options-container.active + .selected::after { transform: rotate(45deg); transition: all 1s; }
.selectBox .options-container::-webkit-scrollbar { width: 8px; background: #0d141f; background: #81878f; background: #f1f2f3; border-radius: 0 5px 5px 0; }
.selectBox .options-container::-webkit-scrollbar-thumb { background: #525861; background: #81878f; border-radius: 0 5px 5px 0; }
.selectBox .option { padding:0 1.2rem; cursor: pointer; }
.selectBox .option:hover { background: #dcdfe5; }
.selectBox label { display: flex; justify-content: center; align-items: center; flex-flow:column; position: relative; width:100%; height: 34px; cursor: pointer; }
.selectBox .option .radio { display: none; }

/* ------------------------------------------------------------------------------------------------------------
    form-textarea
------------------------------------------------------------------------------------------------------------ */
textarea { width:100%; }
textarea.formControl { width:100%; min-height:100px; }
textarea:hover, textarea:active, textarea:focus { outline:none; /* box-shadow:0px 0px 6px 2px #a181f8; */ }

/* ------------------------------------------------------------------------------------------------------------
    form-checkbox
------------------------------------------------------------------------------------------------------------ */
input[type="checkbox"]{ display:none; }
input[type="checkbox"] + label{ position:relative; display:inline-block; width:2.0rem; height:2.0rem; border:2px solid #d9d9d9; transition: all .75s;  }

/*input[type="checkbox"] + label::after{ position:absolute; left:-0.2rem; top:-0.2rem; content:'✔'; width:2.0rem; height:2.0rem; font-size:1.8rem; color:#dddddd; text-align:center; transition: all .75s; }*/
input[type="checkbox"] + label::after{ position:absolute; left:-0.2rem; top:-0.2rem; width:2.0rem; height:2.0rem; font-size:1.8rem; color:#dddddd; text-align:center; transition: all .75s; }

input[type="checkbox"]:hover + label::after{ color:#181818; }
input[type="checkbox"]:checked + label { border-color:#181818; }
input[type="checkbox"]:checked + label::after{ color:#181818; }
input[type="checkbox"]:checked + label:hover::after{ color:#181818; }

.checkGroup { display: flex; justify-content:flex-start; align-items: flex-start; width:100%; }
.checkGroup h4 { margin:0 0 0 5px; }
.checkGroup input[type="checkbox"]{ display:none; }
.checkGroup input[type="checkbox"] + label{ position:relative; display:inline-block; width:20px; height:20px; border:2px solid #d9d9d9; transition: all .75s;  }
.checkGroup input[type="checkbox"] + label::after{ position:absolute; left:1px; top:0px; content:'✔'; width:20px; height:20px; font-size:16px; color:#333333; text-align:center; transition: all .75s; }
.checkGroup input[type="checkbox"]:not(:checked) + label::after{ color: transparent; }
.checkGroup input[type="checkbox"]:not(:checked) + label { border-color: #d9d9d9; }


.checkGroup input[type="checkbox"]:checked + label { background:#ffffff; border-color:#181818;  }
.checkGroup input[type="checkbox"]:checked + label::after{ color:#d3023b;  }
.checkGroup input[type="checkbox"]:checked + label:hover::after{ color:#d3023b; }  

.checkGroup input[type="checkbox"] + label{ position:relative; display:inline-block; width:20px; height:20px; border:2px solid #d9d9d9; transition: all .75s;  }
.checkGroup input[type="checkbox"] + label::after{ position:absolute; left:0px; top:1px; content:'✔'; width:20px; height:20px; font-size:0.85rem; color:#ffffff; text-align:center; transition: all .75s; opacity: 0; }
.checkGroup input[type="checkbox"]:hover + label::after{ color:#d3023b; }
.checkGroup input[type="checkbox"]:checked + label::after{ color:#d3023b; opacity: 1; }


.checkGroup input[type="checkbox"]:not(:checked) + label::after{ color:rgba(221,221,221,1); }
.checkGroup input[type="checkbox"]:not(:checked) + label { border-color: #d9d9d9; }

/* ------------------------------------------------------------------------------------------------------------
    Modal
------------------------------------------------------------------------------------------------------------ */
.modal { display: none; position: fixed; top:0; right:0; flex-direction: column; align-items: center; justify-content: center; width:100%; height:100%; background:rgb(0, 0, 0, 0.9); transition: all 1s ease-in-out; z-index:8887; }
.modalContent { width:50vw; height:50vh; background: #fff; color:#545454; }
.modalHeader { display: flex; flex-direction: row; justify-content: space-between; align-items: center; border-bottom: 1px solid #d9d9d9; padding:1.5rem; }
.modalHeader .title { font-size:2.0rem; font-weight:900; }
.modalClose { color: red; text-decoration: none; font-size:2.8rem; font-weight: 400; }
.modalClose:hover, .modalClose:focus { text-decoration: none; cursor: pointer; }
.modalBody { padding:1.5rem; }

/* ------------------------------------------------------------------------------------------------------------
    mobileBody
------------------------------------------------------------------------------------------------------------ */
.mobileBody * { box-sizing: border-box !important; }
.page-footer { width:100%; }

/*#sub_container.mobileBody { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow:column nowrap; width:100%; height:auto; padding:0 0 60px; margin:50px 0 0; }*/
#sub_container.mobileBody { display: flex; justify-content: flex-start; flex-flow:column nowrap; width:100%; height:auto; padding:0 0 60px; margin:50px 0 0; }

.mobileBody .welcomeTitle { display: flex; justify-content: center; align-items: center; flex-flow: row nowrap; width:100%; height:109px; }
.mobileBody .welcomeTitle h3 { font-size:18px; font-weight:700; color:#333333; line-height: 32.4px; text-align: center; }
.mobileBody .welcomeTitle h3 span { color:#d31f1b; }

.mobileBody .meberGradeInfo { display: flex; justify-content: center; align-items: flex-start; flex-flow: row nowrap; width:100%; height:64px; border-top:1px solid #e7e7e7; border-bottom:1px solid #e7e7e7; }
.mobileBody .meberGradeInfo h3 { font-size:18px; font-weight:700; color:#333333; line-height: 32.4px; text-align: center; }
.mobileBody .meberGradeInfo h3 span { color:#d31f1b; }
.mobileBody .meberGradeInfo .left { display: flex; justify-content: center; align-items: center; flex-flow: row nowrap; width:50%; height:100%; border-right:1px solid #e7e7e7; }
.mobileBody .meberGradeInfo .right { display: flex; justify-content: center; align-items: center; flex-flow: row nowrap; width:50%; height:100%; }

.mobileBody .btnArea.memberChange { width:100%; padding:0 4%; margin:9px 0 12px; }
.mobileBody .btnArea.memberChange a { height:60px; font-size:20px; font-weight:700; }

.mobileBody .mobileMenuList { display: flex; justify-content: center; align-items: flex-start; flex-flow:column nowrap; width:100%; padding:0 0; margin:0 0; }
.mobileBody .mobileMenuItem { display: flex; justify-content: flex-start; align-items:center; flex-flow: row nowrap; width:100%; height:70px; padding:0 25px 0 30px; border-top:1px solid #e7e7e7; border-bottom:1px solid #e7e7e7; }
.mobileBody .mobileMenuItem h3 { font-size:18px; font-weight:500; color:#333333; margin:0 0 0 20px; }
.mobileBody .mobileMenuItem img { width:auto; margin:0 0 0 auto; }
.mobileBody .mobileMenuItem .iconBox { display: flex; justify-content: center; align-items:center; flex-flow:column nowrap; width:35px; }
.mobileBody .mobileMenuItem .iconBox img { width:auto; margin:0; }

/*----- Mobile Page Title -----*/
.mobileBody .pageTitle { display: flex; justify-content:center; align-items:center; flex-flow:row nowrap; position:relative; width:100%; height:63px; padding:0 4%; }
.mobileBody .pageTitle a { position: absolute; top:20px; left:4%; }
.mobileBody .pageTitle h3 { font-size:20px; font-weight:700; color:#333; }

/* ------------------------------------------------------------------------------------------------------------
    mobile orderList - 주문/배송내역
------------------------------------------------------------------------------------------------------------ */
.mOrderList { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; }
.mOrderList .menuTitle { height:28px; }
.mOrderList .menuTitle h3 { font-size: 20px; font-weight:700; }

.mOrderList .filterBox { display: flex; justify-content: flex-start; align-items: flex-start; width:100%; flex-flow:row wrap; padding:20px 4% 15px; margin:0 0; }
.mOrderList .quickFilter { display: flex; justify-content: flex-start; align-items: flex-start; width:100%; }
.mOrderList .quickFilter a { width:72px; height:26px; margin:0 0 0 4px; border-radius:13px; }
.mOrderList .quickFilter a:first-child { margin:0 0; }
.mOrderList .searchFilter { display: flex; justify-content: flex-start; align-items: center; width:100%; margin:12px 0 0; }
.mOrderList .searchFilter .formControl { width:calc(100% - 84px); font-size:13px; color:#666666; font-weight: 400; height:40px; }
.mOrderList .searchFilter a { width:76px; height:40px; margin:0 0 0 8px; }
.mOrderList .termFilter { display: none; justify-content: flex-start; align-items: center; width:100%; margin:10px 0 0; }
.mOrderList .termFilter .startDay { position: relative; width:108px; }
.mOrderList .termFilter .startDay .formControl { width:93px; font-size:13px; margin:0 0; }
.mOrderList .termFilter .endDay { position: relative; width:108px; }
.mOrderList .termFilter .endDay .formControl { width:65px; font-size:13px; margin:0 0; }


.mOrderList .dateBox { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; padding:15px 4%; margin:0 0; }
.mOrderList .dateBox .dateTitle h3 { font-size:20px; font-weight: 700; }
.mOrderList .dateBox .productBox { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow:column nowrap; width:100%; padding:12px 12px; margin:12px 0 0; border:1px solid #e7e7e7; border-radius: 10px;   box-shadow: 0 0 1px 0 #00000029, 0 4px 5px 0 #00000020; }
.mOrderList .dateBox .productBox .top { display: flex; justify-content: flex-start; align-items:center; flex-flow:row nowrap; width:100%; }
.mOrderList .dateBox .productBox .top h3 { font-size:18px ; font-weight:700; margin:0 0; }
.mOrderList .dateBox .productBox .top h5 { font-size:16px ; font-weight: 400; color:#666; margin:0 15px 0 auto; }
.mOrderList .dateBox .productBox .top a { width:108px; height:36px; }
.mOrderList .dateBox .productBox .bottom { display: flex; justify-content: flex-start; align-items:flex-start; flex-flow:row nowrap; width:100%; padding:25px 0 5px; margin:0 0; border-bottom:1px solid #dbdbdb; }
.mOrderList .dateBox .productBox .bottom:last-child { border:none; }
.mOrderList .dateBox .productBox .bottom img { width:64px; height:68px; margin:0 16px 0 0; }
.mOrderList .dateBox .productBox .bottom .productExplain { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:calc(100% - 64px); }
.mOrderList .dateBox .productBox .bottom .productExplain h4 { width:100%; color:#111111; font-size: 16px; font-weight: 400; text-align: left; margin:0 0 10px; }
.mOrderList .dateBox .productBox .bottom .productExplain h4 span { width:100%; color:#555555; margin:0 0 0 8px; }
.mOrderList .dateBox .productBox .bottom .productExplain h4:last-child { margin:0 0 0; }

.mOrderList .btnArea { display: flex; justify-content:center; align-items:center; flex-flow:row nowrap; width:100%; margin:28px 0 0; }
.mOrderList .btnArea a:last-child { margin:0 0 0 10px; }

/* ------------------------------------------------------------------------------------------------------------
    paymentInfoSection - 주문상세
------------------------------------------------------------------------------------------------------------ */
.paymentInfoSection { display: flex; justify-content: flex-start; align-items:flex-start; flex-flow:column nowrap; width:100%; padding:10px 4%; }
.paymentInfoSection .infoTitle { display: flex; justify-content: flex-start; align-items:flex-start; flex-flow:row nowrap; width:100%; }
.paymentInfoSection .infoTitle h2 { font-size:20px; font-weight:700; color:#111111; }
.paymentInfoSection .infoTitle h3 { font-size:16px; font-weight:400; color:#666666; margin:0 0 0 auto; }
.paymentInfoSection .infoTitle h3 span { font-weight:700; }
.paymentInfoSection .infoBox { display: flex; justify-content: flex-start; align-items:flex-start; flex-flow:column nowrap; width:100%; padding:14px 3%; margin:13px 0 0; border:1px solid #e7e7e7; border-radius:10px; }
.paymentInfoSection .infoBox .infoBoxTitle { display: flex; justify-content: flex-start; align-items:flex-start; flex-flow:row nowrap; width:100%; }
.paymentInfoSection .infoBox .infoBoxTitle h3 { font-size:18px; font-weight:700; line-height:28px; }
.paymentInfoSection .infoBox .infoBoxDetail { display: flex; justify-content: flex-start; align-items:flex-start; flex-flow:row nowrap; width:100%; }        
.paymentInfoSection .infoBox .infoBoxDetail h4 { font-size:16px; font-weight:400; line-height:28px; margin:8px 0 0; }
.paymentInfoSection .infoBox .infoBoxDetail h4:last-child { margin:8px 0 0 auto; }
.paymentInfoSection .infoBox .infoBoxDetail h4 span { color:var(--mainBlue); font-weight:700; }
.paymentInfoSection .infoBox .infoBoxDetail h4 span.bold { color:#111111; }
.paymentInfoSection .infoBox .infoBoxDetail h4 span.mainRed { color:#D3163E; }
.paymentInfoSection .infoBox .btnArea { width:100%; margin:18px 0 0; }
.paymentInfoSection .infoBox .btnArea a { font-size:18px; font-weight:400; width:calc((100% - 18px) / 3 ); height:40px; }
.paymentInfoSection .infoBox .btnArea a.fullWidth { width:100%; height:40px; }
.paymentInfoSection .infoBox .btnArea a:nth-child(2) { margin:0 9px; }

.paymentInfoSection .orderingTitle { display: flex; justify-content: flex-start; align-items:flex-start; flex-flow:row nowrap; width:100%; margin:20px 0 0; }
.paymentInfoSection .orderingTitle h3 { font-size:18px; font-weight:700; color:#111111; }
.paymentInfoSection .orderingBox { display: flex; justify-content: flex-start; align-items:flex-start; flex-flow:column nowrap; width:100%; padding:14px 3%; margin:13px 0 0; border:1px solid #e7e7e7; border-radius:10px; }
.paymentInfoSection .orderingBox .orderingDetail { display: flex; justify-content: flex-start; align-items:flex-start; flex-flow:row nowrap; width:100%; }        
.paymentInfoSection .orderingBox .orderingDetail h4 { font-size:16px; font-weight:400; line-height:28px; margin:0 0; }

.paymentInfoSection .confereeTitle { display: flex; justify-content: flex-start; align-items:flex-start; flex-flow:row nowrap; width:100%; margin:20px 0 0; }
.paymentInfoSection .confereeTitle h3 { font-size:18px; font-weight:700; color:#111111; }
.paymentInfoSection .confereeBox { display: flex; justify-content: flex-start; align-items:flex-start; flex-flow:column nowrap; width:100%; padding:14px 2%; margin:13px 0 0; border:1px solid #e7e7e7; border-radius:10px; }
.paymentInfoSection .confereeBox .confereeDetail { display: flex; justify-content: flex-start; align-items:flex-start; flex-flow:row nowrap; width:100%; }        
.paymentInfoSection .confereeBox .confereeDetail h4 { font-size:16px; font-weight:400; line-height:28px; margin:8px 0 0; }
.paymentInfoSection .confereeBox .confereeDetail { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; margin:0 0; background:#fafafa; border-top:none; } 
.paymentInfoSection .confereeBox .confereeDetail .formItem { display: flex; justify-content: flex-start; align-items: center; width:100%; border-bottom:none; }
.paymentInfoSection .confereeBox .confereeDetail .formItem .formGroup { display: flex; justify-content: flex-start; align-items: center;  width:100%; margin:0; padding:5px 10px; background:#fff; }

.paymentInfoSection .confereeBox .confereeDetail .formItem.hpSetting .formGroup { justify-content: flex-start; align-items: flex-start; flex-flow:column nowrap; }
.paymentInfoSection .confereeBox .confereeDetail .formItem.hpSetting .formControl { width:82px; margin:0 0 0 3px; line-height: 40px; } /* 수정 완료 */
.paymentInfoSection .confereeBox .confereeDetail .formItem.hpSetting .formControl:first-child { margin:0 0; }
.paymentInfoSection .confereeBox .confereeDetail .formItem.tel select.formControl { width:126px; margin:0 0; }
.paymentInfoSection .confereeBox .confereeDetail .formItem.tel .formControl { width:126px; margin:0 0 0 8px; }
.paymentInfoSection .confereeBox .confereeDetail .formItem.address .formGroup { justify-content: flex-start; align-items: flex-start; flex-flow:column nowrap; }
.paymentInfoSection .confereeBox .confereeDetail .formItem.address .formControl { width:100%; line-height: 40px;}
.paymentInfoSection .confereeBox .confereeDetail .formItem.address .addReg { display: flex; justify-content: flex-start; align-items: center; width:100%; } 
.paymentInfoSection .confereeBox .confereeDetail .formItem.address .addReg .formControl { max-width:82px; margin:0 8px 0 0; line-height: 40px;  }
.paymentInfoSection .confereeBox .confereeDetail .formItem.address .addReg .btnSm { width:82px; height:40px; padding:0 15px; font-size:14px; }
.paymentInfoSection .confereeBox .confereeDetail .formItem.address .formControl:nth-child(2) { margin:10px 0 12px; }
.paymentInfoSection .confereeBox .confereeDetail textarea { width: 100%; min-width: 100%; min-height: 98px; max-height: 98px; }

.paymentInfoSection .oProductTitle { display: flex; justify-content: flex-start; align-items:flex-start; flex-flow:row nowrap; width:100%; margin:20px 0 0; }
.paymentInfoSection .oProductTitle h3 { font-size:18px; font-weight:700; color:#111111; }
.paymentInfoSection .oProductBox { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow:column nowrap; width:100%; padding:20px 20px; margin:12px 0 0; border:1px solid #e7e7e7; border-radius: 10px; }
.paymentInfoSection .oProductBox .top { display: flex; justify-content: flex-start; align-items:center; flex-flow:row nowrap; width:100%; }
.paymentInfoSection .oProductBox .top h3 { font-size:18px ; font-weight:700; margin:0 0; color:#111111; }
.paymentInfoSection .oProductBox .bottom { display: flex; justify-content: flex-start; align-items:flex-start; flex-flow:row nowrap; width:100%; padding:25px 0 5px; margin:0 0; border-bottom:1px solid #dbdbdb; }
.paymentInfoSection .oProductBox .bottom:last-child { border:none; }
.paymentInfoSection .oProductBox .bottom img { width:64px; height:68px; margin:0 16px 0 0; }
.paymentInfoSection .oProductBox .bottom .productExplain { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:calc(100% - 64px); }
.paymentInfoSection .oProductBox .bottom .productExplain h4 { width:100%; color:#111111; font-size: 16px; font-weight: 400; text-align: left; margin:0 0 10px; }
.paymentInfoSection .oProductBox .bottom .productExplain h4 span { width:100%; color:#555555; margin:0 0 0 8px; }
.paymentInfoSection .oProductBox .bottom .productExplain h4:last-child { margin:0 0 0; }
.paymentInfoSection .oProductBox .bottom .productExplain h5 { width:100%; font-size: 16px; font-weight: 700; color:#111111; text-align: left; margin:0 0 10px; }

.paymentInfoSection .btnArea { display: flex; justify-content: center; align-items: center; width: 100%; margin:14px 0 0; padding:0 0; }
.paymentInfoSection .btnArea a { width:100%; }

/* ------------------------------------------------------------------------------------------------------------
    cancelModal - 주문취소 레이어
------------------------------------------------------------------------------------------------------------ */
#cancelModal { height:calc(100% - 50px); margin:50px 0 0; }
#cancelModal .modalContent { width:100%; height:calc(100vh - 50px); overflow-y: auto; }
#cancelModal .modalHeader { display: flex; justify-content: center; align-items: center; flex-flow: row nowrap; position: relative; width: 100%; height: 63px; padding: 0 4%; border:none; }
#cancelModal .modalHeader h3 { font-size: 20px; font-weight: 700; color: #333; }
#cancelModal .modalHeader img { position: absolute; top: 20px; left: 4%; width:24px; height:24px; }
#cancelModal .modalBody { padding:0px 4% 70px; margin:10px 0 0; }
#cancelModal .modalBody .formControl { color:#333333; }

#cancelModal .detailBox { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; }
#cancelModal .detailBox .boxHeader { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; margin:0 0; }
#cancelModal .detailBox .boxHeader h3 { font-size:18px; font-weight: 700; color:#111111; }
#cancelModal .detailBox .boxBody { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; 
/* margin:10px 0 0;  */
background:#fafafa; border-top:2px solid #111111; border-bottom:1px solid #dddddd; } 
#cancelModal .detailBox .boxBody .formItem { display: flex; justify-content: flex-start; align-items: center; width:100%; border-bottom: 1px solid #d0d0d0; }
#cancelModal .detailBox .boxBody .formItem:first-child .formGroup h4 { line-height: 20px; }
#cancelModal .detailBox .boxBody .formItem h4 { color:#333333;}
#cancelModal .detailBox .boxBody .formItem .formGroupWrap { display: flex;flex-direction: column; background: #fff; width: 100%;}
#cancelModal .detailBox .boxBody .formItem .formGroup h3 { font-size: 16px; padding: 10px 0; letter-spacing: -0.5px; line-height: 1.2;}

#cancelModal .detailBox .boxBody .formItem:nth-child(2) .formGroup { padding:10px 10px; gap: 5px; border-bottom: 1px solid #d0d0d0; justify-content: space-between;}
#cancelModal .detailBox .boxBody .formItem:nth-child(2) .formGroup:last-child { border-bottom: none;}
#cancelModal .detailBox .boxBody .formItem:nth-child(2) .formGroupWrap h4 { font-size: 14px; }
#cancelModal .detailBox .boxBody .formItem:nth-child(2) .formGroupWrap h4:first-child { width: 70%; }


#cancelModal .detailBox .boxBody .formItem .formGroup.subTxt { display: flex; justify-content: flex-start; align-items:flex-start; flex-flow: column nowrap; }
#cancelModal .detailBox .boxBody .formItem .formGroup.subTxt h5 { margin:8px 0 0; }
#cancelModal .detailBox .boxBody .formItem .formTitle { width:110px; text-align: left; padding: 10px 10px; }
#cancelModal .detailBox .boxBody .formItem:nth-child(3) .formGroup { padding:17px 10px; }

#cancelModal .detailBox .boxBody .formItem:last-child { flex-flow: column nowrap; }
#cancelModal .detailBox .boxBody .formItem:last-child .formTitle { width:100%; }
#cancelModal .detailBox .boxBody .formItem:last-child .formGroup { width:100%; padding:0 0 10px 0; }

/* #cancelModal .detailBox .boxBody .formControl { width:180px; } */
#cancelModal .detailBox .boxBody .formItem.hpSetting .formGroup { justify-content: flex-start; align-items: flex-start; flex-flow:column nowrap; }
#cancelModal .detailBox .boxBody .formItem.hpSetting .formControl { width:calc((100% - 16px) / 3); margin:0 0 0 3px; }
#cancelModal .detailBox .boxBody .formItem.hpSetting .formControl:first-child { margin:0 0; }

#cancelModal .detailBox .boxBody .formItem.tel select.formControl { width:calc((100% - 16px) / 3); margin:0 0; }
#cancelModal .detailBox .boxBody .formItem.tel .formControl { width:calc((100% - 16px) / 3); margin:0 0 0 8px; line-height: 40px;}

#cancelModal .detailBox .boxBody .formItem.address .formGroup { justify-content: flex-start; align-items: flex-start; flex-flow:column nowrap; }
#cancelModal .detailBox .boxBody .formItem.address .formControl { width:100%; }

#cancelModal .formItem.bankInfo .formGroup { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow:column nowrap; }
#cancelModal .formItem.bankInfo select.formControl { width:100%; margin:0 0; }
#cancelModal .formItem.bankInfo .line01 { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow:row nowrap; width:100%; margin:0 0; }
#cancelModal .formItem.bankInfo .line02 { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow:row nowrap; width:100%; margin:10px 0 0; }
#cancelModal .formItem.bankInfo .line02 h5 { font-size:16px; font-weight:400; }
#cancelModal .formItem.bankInfo .line02 .formControl { width:calc(100% - 75px); margin:0 0 0 10px; }
#cancelModal .formItem.bankInfo .noticeArea { display: flex; justify-content: flex-start; align-items: center; width:100%; margin:10px 0 0; }
#cancelModal .formItem.bankInfo .notice { display: flex; justify-content: flex-start; align-items: center; width:100%; }
#cancelModal .formItem.bankInfo .notice h5 sup { font-size:16px; font-weight: 500; color: var(--mainRed); }

#cancelModal .detailBox .boxBody .formItem.address .addReg { display: flex; justify-content: flex-start; align-items: center; width:100%; } 
#cancelModal .detailBox .boxBody .formItem.address .addReg .formControl { max-width:87px; margin:0 8px 0 0; }
#cancelModal .detailBox .boxBody .formItem.address .addReg .btnSm { width:82px; height:40px; padding:0 15px; font-size:14px; }
#cancelModal .detailBox .boxBody .formItem.address .formControl:nth-child(2) { margin:10px 0 12px; }

#cancelModal .detailBox textarea { width:100%; min-width:100%; min-height:115px; max-height:115px; }
#cancelModal .btnArea { display: flex; justify-content: center; align-items: center; width:100%; margin:19px 0 0; }
#cancelModal .btnArea a { width:49%; font-size:14px; }
#cancelModal .btnArea a:nth-child(2) { margin:0 0 0 2%; }   




/* ------------------------------------------------------------------------------------------------------------
    refundModal - 교환환불 레이어
------------------------------------------------------------------------------------------------------------ */
#refundModal { height:calc(100% - 50px); margin:50px 0 0; }
#refundModal .modalContent { width:100%; height:calc(100vh - 50px); overflow-y: auto; }
#refundModal .modalHeader { display: flex; justify-content: center; align-items: center; flex-flow: row nowrap; position: relative; width: 100%; height: 63px; padding: 0 4%; border:none; }
#refundModal .modalHeader h3 { font-size: 20px; font-weight: 700; color: #333; }
#refundModal .modalHeader img { position: absolute; top: 20px; left: 4%; width:24px; height:24px; }
#refundModal .modalBody { padding:0px 4% 70px; margin:10px 0 0; }
#refundModal .modalBody .formControl { color:#333333; }

#refundModal .detailBox { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; }
#refundModal .detailBox .boxHeader { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; margin:0 0; }
#refundModal .detailBox .boxHeader h3 { font-size:18px; font-weight: 700; color:#111111; }
#refundModal .detailBox .boxBody { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; margin:10px 0 0; background:#fafafa; border-top:2px solid #111111; border-bottom:1px solid #dddddd; } 
#refundModal .detailBox .boxBody .formItem { display: flex; justify-content: flex-start; align-items: center; width:100%; border-bottom: 1px solid #d0d0d0; }
#refundModal .detailBox .boxBody .formItem:first-child .formGroup h4 { line-height: 20px; }
#refundModal .detailBox .boxBody .formItem h4 { color:#333333; }
#refundModal .detailBox .boxBody .formItem .formGroup { padding:7px 10px; }
#refundModal .detailBox .boxBody .formItem .formGroup.subTxt { display: flex; justify-content: flex-start; align-items:flex-start; flex-flow: column nowrap; }
#refundModal .detailBox .boxBody .formItem .formGroup.subTxt h5 { margin:8px 0 0; }
#refundModal .detailBox .boxBody .formItem .formTitle { width:110px; text-align: left; padding: 10px 10px; }
#refundModal .detailBox .boxBody .formItem:nth-child(3) .formGroup { padding:17px 10px; }
#refundModal .detailBox .boxBody .formItem:last-child { flex-flow: column nowrap; }
#refundModal .detailBox .boxBody .formItem:last-child .formTitle { width:100%; }
#refundModal .detailBox .boxBody .formItem:last-child .formGroup { width:100%; padding:0 0 10px 0; }

#refundModal .detailBox .boxBody .formItem.hpSetting .formGroup { justify-content: flex-start; align-items: flex-start; flex-flow:column nowrap; }
#refundModal .detailBox .boxBody .formItem.hpSetting .formControl { width:calc((100% - 16px) / 3); margin:0 0 0 3px; }
#refundModal .detailBox .boxBody .formItem.hpSetting .formControl:first-child { margin:0 0; }

#refundModal .detailBox .boxBody .formItem.tel select.formControl { width:calc((100% - 16px) / 3); margin:0 0; }
#refundModal .detailBox .boxBody .formItem.tel .formControl { width:calc((100% - 16px) / 3); margin:0 0 0 8px; }

#refundModal .detailBox .boxBody .formItem.address .formGroup { justify-content: flex-start; align-items: flex-start; flex-flow:column nowrap; }
#refundModal .detailBox .boxBody .formItem.address .formControl { width:100%; }
#refundModal .formItem.bankInfo .formGroup { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow:column nowrap; }
#refundModal .formItem.bankInfo select.formControl { width:100%; margin:0 0; }
#refundModal .formItem.bankInfo .line01 { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow:row nowrap; width:100%; margin:0 0; }
#refundModal .formItem.bankInfo .line02 { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow:row nowrap; width:100%; margin:10px 0 0; }
#refundModal .formItem.bankInfo .line02 h5 { font-size:16px; font-weight:400; }
#refundModal .formItem.bankInfo .line02 .formControl { width:calc(100% - 75px); margin:0 0 0 10px; }
#refundModal .formItem.bankInfo .noticeArea { display: flex; justify-content: flex-start; align-items: center; width:100%; margin:10px 0 0; }
#refundModal .formItem.bankInfo .notice { display: flex; justify-content: flex-start; align-items: center; width:100%; }
#refundModal .formItem.bankInfo .notice h5 sup { font-size:16px; font-weight: 500; color: var(--mainRed); }
#refundModal .detailBox .boxBody .formItem.address .addReg { display: flex; justify-content: flex-start; align-items: center; width:100%; } 
#refundModal .detailBox .boxBody .formItem.address .addReg .formControl { max-width:87px; margin:0 8px 0 0; }
#refundModal .detailBox .boxBody .formItem.address .addReg .btnSm { width:82px; height:40px; padding:0 15px; font-size:14px; }
#refundModal .detailBox .boxBody .formItem.address .formControl:nth-child(2) { margin:10px 0 12px; }

#refundModal .detailBox textarea { width:100%; min-width:100%; min-height:115px; max-height:115px; }
#refundModal .btnArea { display: flex; justify-content: center; align-items: center; width:100%; margin:19px 0 0; }
#refundModal .btnArea a { width:49%; font-size:14px; }
#refundModal .btnArea a:nth-child(2) { margin:0 0 0 2%; }


/* ------------------------------------------------------------------------------------------------------------
    mobileWishList - 위시리스트
------------------------------------------------------------------------------------------------------------ */
.mwList { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width: 100%; padding:0 4%; }
.mwList .detailBox { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; }
.mwList .detailBox .boxHeader { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: row nowrap; width:100%; margin:10px 0 0; }
.mwList .detailBox .boxHeader a:nth-child(2) { margin:0 0 0 auto; }
.mwList .detailBox .boxHeader a:last-child { margin:0 0 0 6px; }
.mwList .detailBox .boxHeader h4 { font-size:16px; font-weight: 700; color:#333333; }

.mwList .detailBox .boxBody { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; margin:16px 0 0; background:#fafafa; border-top:2px solid #111111; } 
.mwList .detailBox .boxBody .formItem { display: flex; justify-content: flex-start; align-items: center; width:100%; border-bottom:1px solid #dddddd; }
.mwList .detailBox .boxBody .formItem h4 { color:#333333; }
.mwList .detailBox .boxBody .mainRed { color:#d80000; }
.mwList .detailBox .boxBody .mainBlue { color:#0038FF; }

/* .mwList .checkGroup input[type="checkbox"]{ display:none; }
.mwList .checkGroup input[type="checkbox"] + label{ position:relative; display:inline-block; width:20px; height:20px; border:2px solid #d9d9d9; transition: all .75s; }
.mwList .checkGroup input[type="checkbox"] + label::after{ position:absolute; left:1px; top:0px; content:'✔'; width:20px; height:20px; font-size:16px; color:#ffffff; text-align:center; transition: all .75s; }
.mwList .checkGroup input[type="checkbox"]:not(:checked) + label::after{ color: transparent; }
.mwList .checkGroup input[type="checkbox"]:not(:checked) + label { border-color: #000; } */

/* .mwList .checkGroup input[type="checkbox"]:hover + label{ position:relative; display:inline-block; width:20px; height:20px; background:var(--mainRed); border:none; }
.mwList .checkGroup input[type="checkbox"]:hover + label::after{ color:var(--mainRed); } */

/* .mwList .checkGroup input[type="checkbox"]:checked + label { background:var(--mainRed); border:none; }
.mwList .checkGroup input[type="checkbox"]:checked + label::after{ color:#ffffff; }
.mwList .checkGroup input[type="checkbox"]:checked + label:hover::after{ color:#ffffff; } */

.mwList .detailBox .titleLine { display: flex; justify-content: flex-start; align-items:center; flex-flow:row nowrap; width:100%; height:41px; }
.mwList .detailBox .titleLine h4 { font-weight: 400; color:#333333; }
.mwList .detailBox .titleLine div:first-child { width: 10%; }
.mwList .detailBox .titleLine div:nth-child(2) { width:90% }
.mwList .detailBox .titleLine div:nth-child(3) { width:60% }
.mwList .detailBox .titleLine div:last-child { width: 10%; }

.mwList .detailBox .orderLine { display: flex; justify-content: flex-start; align-items:center; flex-flow:row nowrap; width:100%; padding:10px 0; background: #fff; border-bottom:1px solid #cccccc; }
.mwList .detailBox .orderLine h5 { font-size:16px; font-weight: 350; color:#666666; width:100%; }
.mwList .detailBox .orderLine div:first-child { width: 10%; }
.mwList .detailBox .orderLine div:nth-child(2) { width:80%; }
.mwList .detailBox .orderLine .pThum { display: flex; justify-content: flex-start; align-items:center; flex-flow: row nowrap; }
.mwList .detailBox .orderLine .pThum .pthumnail { width:54px; }
.mwList .detailBox .orderLine .pThum .pscript { display: flex; justify-content: center; align-items:center; flex-flow:column nowrap; width:100%; height:60px; padding:0 10px; text-align: left; }
.mwList .detailBox .orderLine .pThum .pscript h5 { font-size:15px; font-weight: 400; color:#666666; width:100%; line-height: 21px; letter-spacing: -1px;}
.mwList .detailBox .orderLine .pThum .pscript h5 span { font-size:20px; font-weight:700; color:#D21C42; line-height: 27px; letter-spacing: -0.5px; }

.mwList .detailBox .orderLine div:last-child { width: 11%; }
.mwList .detailBox .orderLine div .btn {font-size: 14px;}

/* ------------------------------------------------------------------------------------------------------------
    적립금 및 쿠폰 현황
------------------------------------------------------------------------------------------------------------ */
.myPointHistory { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width: 100%; padding:0 4%; }
.myPointHistory .menuTitle { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: row nowrap; width: 100%; margin: 10px 0 0; }
.myPointHistory .menuTitle h3 { font-size: 20px; font-weight: 700; color:#111111; }
.myPointHistory .detailBox { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; }
.myPointHistory .detailBox .boxHeader { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: row nowrap; width:100%; margin:10px 0 0; }
.myPointHistory .detailBox .boxHeader a:nth-child(2) { margin:0 0 0 auto; }
.myPointHistory .detailBox .boxHeader a:last-child { margin:0 0 0 6px; }
.myPointHistory .detailBox .boxHeader h4 { font-size:16px; font-weight: 700; color:#333333; }
.myPointHistory .detailBox .boxBody { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; margin:16px 0 0; background:#fafafa; border-top:2px solid #111111; } 
.myPointHistory .detailBox .boxBody .formItem { display: flex; justify-content: flex-start; align-items: center; width:100%; height:50px; border-bottom:1px solid #dddddd; }
.myPointHistory .detailBox .boxBody .formItem .formTitle { width:40%; }
.myPointHistory .detailBox .boxBody .formItem h4 { color:#333333; }
.myPointHistory .detailBox .boxBody .formItem h4 span { color:var(--mainRed); }
.myPointHistory .detailBox .boxBody .formItem .formGroup { width:60%; height:100%; padding:0 10px; }
.myPointHistory .detailBox .boxBody .formItem .formGroup .formControl { height:49px; border:none; }
.myPointHistory .detailBox .boxBody .mainRed { color:#d80000; }
.myPointHistory .detailBox .boxBody .mainBlue { color:#0038FF; }

/* ------------------------------------------------------------------------------------------------------------
    savingList - 적립금리스트
------------------------------------------------------------------------------------------------------------ */
.savings { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width: 100%; padding:0 4%; margin:39px 0 0; }
.savings .detailBox { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; }
.savings .detailBox .boxHeader { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: row nowrap; width:100%; margin:10px 0 0; }
.savings .detailBox .boxHeader a:nth-child(2) { margin:0 0 0 auto; }
.savings .detailBox .boxHeader a:last-child { margin:0 0 0 6px; }
.savings .detailBox .boxHeader h4 { font-size:20px; font-weight: 700; color:#333333; }

.savings .detailBox .boxBody { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; margin:16px 0 0; background:#fafafa; border-top:2px solid #111111; } 
.savings .detailBox .boxBody .formItem { display: flex; justify-content: flex-start; align-items: center; width:100%; border-bottom:1px solid #dddddd; }
.savings .detailBox .boxBody .formItem h4 { color:#333333; }
.savings .detailBox .boxBody .mainRed { color:#d80000; }
.savings .detailBox .boxBody .mainBlue { color:#0038FF; }

.savings .detailBox .titleLine { display: flex; justify-content: flex-start; align-items:center; flex-flow:row nowrap; width:100%; height:41px; }
.savings .detailBox .titleLine h4 { font-size:14.5px; font-weight:700; color:#333333; text-align: center; }
.savings .detailBox .titleLine div:first-child { width: 20%; }
.savings .detailBox .titleLine div:nth-child(2) { width:35%; }
.savings .detailBox .titleLine div:nth-child(3) { width: 15%; }
.savings .detailBox .titleLine div:nth-child(4) { width: 15%; }
.savings .detailBox .titleLine div:last-child { width: 20%; }

.savings .detailBox .orderLine { display: flex; justify-content: flex-start; align-items:center; flex-flow:row nowrap; width:100%; height:40px; padding:10px 0; background: #fff; border-bottom:1px solid #cccccc; }
.savings .detailBox .orderLine h5 { font-size:12px; font-weight:400; color:#666666; width:100%; text-align: center; }
.savings .detailBox .orderLine div:first-child { width: 20%; }
.savings .detailBox .orderLine div:nth-child(2) { width:35%; text-align:left; }
.savings .detailBox .orderLine div:nth-child(3) { width: 15%; }
.savings .detailBox .orderLine div:nth-child(4) { width: 15%; }
.savings .detailBox .orderLine div:last-child { width: 20%; }

/* ------------------------------------------------------------------------------------------------------------
    my_delivery - 나의 배송지
------------------------------------------------------------------------------------------------------------ */
.basicDelivery { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width: 100%; padding:0 4%; margin:10px 0 0; }
.basicDelivery .title h3 { font-size:18px; font-weight:700; color:#111; }
.addDelivery { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width: 100%; padding:0 4% 30px; margin:30px 0 0; }
.addDelivery .title h3 { font-size:18px; font-weight:700; color:#111; }
.basicDelivery .deliveryCard { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width: 100%; padding:13px 20px; margin: 19px 0 0; border: 1px solid #D21C42; border-radius: 10px; box-shadow: 0px 4px 5px 0px #00000020; }

.addDelivery form { display: flex; justify-content: flex-start; align-items: center; flex-flow: column nowrap; width: 100%; }
.addDelivery #list-container { display: flex; justify-content: flex-start; align-items: center; flex-flow: column nowrap; width: 100%; }

.addDelivery .deliveryCard { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width: 100%; padding:13px 20px; margin:19px 0 0; border: 1px solid #e7e7e7; border-radius: 10px; box-shadow: 0px 4px 5px 0px #00000020; }
.addDelivery .deliveryCard .firstLine { display: flex; justify-content: flex-start; align-items: center; flex-flow:row nowrap; width: 100%; } 
.deliveryCard h3 { position: relative; font-size:18px; font-weight:700; line-height: 28px; color:#111111; margin:4px 0 0; }
.deliveryCard .firstLine .menuOn { position:relative; width:26px; height:26px; margin:0 0 0 auto; }
.deliveryCard h4 { font-size:16px; font-weight:400; line-height: 24px; color:#111111; margin:5px 0 0; }

.addDelivery .menuPop { display:none; justify-content: flex-start; align-items:flex-start; flex-flow:column nowrap; width: 161px; padding:13px 3px 15px 12px; position: absolute; top:26px; right:0; background: #fff; box-shadow: 0px 4px 4px 0px #00000040; z-index:1000; }
.addDelivery .menuPop a { font-size: 18px; font-weight:400; line-height: 30px;  }
    
.addDelivery .btnArea { display: flex; justify-content: center; align-items: center; width: 100%; 
/* margin:14px 0 0;  */
padding:0 0; }
.addDelivery .btnArea a { width:100%; height:60px; font-size:18px; font-weight:400; color:#346aff; }
    
/* ------------------------------------------------------------------------------------------------------------
    deliveryEditModal - 배송지 추가/수정
------------------------------------------------------------------------------------------------------------ */
#deliveryEditModal { height:calc(100% - 50px); margin:50px 0 0; }
#deliveryEditModal .modalContent { width:100%; height:calc(100vh - 50px); overflow-y: auto; }
#deliveryEditModal .modalHeader { display: flex; justify-content: center; align-items: center; flex-flow: row nowrap; position: relative; width: 100%; height: 63px; padding: 0 4%; border:none; }
#deliveryEditModal .modalHeader h3 { font-size: 20px; font-weight: 700; color: #333; }
#deliveryEditModal .modalHeader img { position: absolute; top: 20px; left: 4%; width:24px; height:24px; }
#deliveryEditModal .modalBody { padding:0px 4% 70px; margin:10px 0 0; }
#deliveryEditModal .modalBody .formControl { color:#333333; }

#deliveryEditModal .detailBox { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; }
#deliveryEditModal .detailBox .boxHeader { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; margin:0 0; }
#deliveryEditModal .detailBox .boxHeader h3 { font-size:18px; font-weight: 700; color:#111111; }
#deliveryEditModal .detailBox .boxBody { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; margin:10px 0 0; background:#fafafa; border-top:2px solid #111111; border-bottom:1px solid #dddddd; } 
#deliveryEditModal .detailBox .boxBody .formItem { display: flex; justify-content: flex-start; align-items: center; width:100%; border-bottom: 1px solid #d0d0d0; }
#deliveryEditModal .detailBox .boxBody .formItem h4 { color:#333333; }
#deliveryEditModal .detailBox .boxBody .formItem .formGroup { padding:7px 10px; }
#deliveryEditModal .detailBox .boxBody .formItem .formGroup.subTxt { display: flex; justify-content: flex-start; align-items:flex-start; flex-flow: column nowrap; }
#deliveryEditModal .detailBox .boxBody .formItem .formGroup.subTxt h5 { margin:8px 0 0; }
#deliveryEditModal .detailBox .boxBody .formItem .formTitle { width: 150px; text-align: left; padding: 10px 10px; }

#deliveryEditModal .detailBox .boxBody .formControl { width:100%; }
#deliveryEditModal .detailBox .boxBody .formItem.hpSetting .formGroup { justify-content: flex-start; align-items: flex-start; flex-flow:column nowrap; }
#deliveryEditModal .detailBox .boxBody .formItem.hpSetting .formControl { width:calc((100% - 16px) / 3); margin:0 0 0 3px; }
#deliveryEditModal .detailBox .boxBody .formItem.hpSetting .formControl:first-child { margin:0 0; }

#deliveryEditModal .detailBox .boxBody .formItem.tel select.formControl { width:calc((100% - 16px) / 3); margin:0 0; }
#deliveryEditModal .detailBox .boxBody .formItem.tel .formControl { width:calc((100% - 16px) / 3); margin:0 0 0 8px; }

#deliveryEditModal .detailBox .boxBody .formItem.address .formGroup { justify-content: flex-start; align-items: flex-start; flex-flow:column nowrap; }
#deliveryEditModal .detailBox .boxBody .formItem.address .formControl { width:100%; }
#deliveryEditModal .detailBox .boxBody .formItem.address .addReg { display: flex; justify-content: flex-start; align-items: center; width:100%; } 
#deliveryEditModal .detailBox .boxBody .formItem.address .addReg .formControl { max-width:87px; margin:0 8px 0 0; }
#deliveryEditModal .detailBox .boxBody .formItem.address .addReg .btnSm { width:82px; height:40px; padding:0 15px; font-size:14px; }
#deliveryEditModal .detailBox .boxBody .formItem.address .formControl:nth-child(2) { margin:10px 0 12px; }


#deliveryEditModal .detailBox textarea { width:100%; min-width:100%; min-height: 73px; max-height: 73px; }
#deliveryEditModal .btnArea { display: flex; justify-content: center; align-items: center; width:100%; margin:19px 0 0; }
#deliveryEditModal .btnArea a { width:49%; font-size:14px; }
#deliveryEditModal .btnArea a:nth-child(2) { margin:0 0 0 2%; }    

/* ------------------------------------------------------------------------------------------------------------
    myOne - 1:1친절상담
------------------------------------------------------------------------------------------------------------ */
.myOne { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width: 100%; min-height:calc(100vh - 200px); padding:0 4%; margin:0px 0 0; }
.myOne .detailBox { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; }
.myOne .detailBox .boxHeader { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: row nowrap; width:100%; margin:10px 0 0; }
.myOne .detailBox .boxHeader a:nth-child(2) { margin:0 0 0 auto; }
.myOne .detailBox .boxHeader a:last-child { margin:0 0 0 6px; }
.myOne .detailBox .boxHeader h4 { font-size:18px; font-weight: 700; color:#333333; }

.myOne .detailBox .boxBody { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; margin:16px 0 0; background:#fff; border-top:2px solid #111111; } 
.myOne .detailBox .boxBody a { width:100%; }
.myOne .detailBox .boxBody .formItem { display: flex; justify-content: flex-start; align-items: center; width:100%; border-bottom:1px solid #dddddd; }
.myOne .detailBox .boxBody .formItem h4 { color:#333333; }
.myOne .detailBox .boxBody .mainRed { color:#d80000; }
.myOne .detailBox .boxBody .mainBlue { color:#0038FF; }

.myOne .detailBox .titleLine { display: flex; justify-content: flex-start; align-items:center; flex-flow:row nowrap; width:100%; height:41px; background: #fafafa; }
.myOne .detailBox .titleLine h4 { font-size:14.5px; font-weight:700; color:#333333; text-align: center; }
.myOne .detailBox .titleLine div:first-child { width: 20%; }
.myOne .detailBox .titleLine div:nth-child(2) { width:40%; }
.myOne .detailBox .titleLine div:nth-child(3) { width: 20%; }
.myOne .detailBox .titleLine div:last-child { width: 20%; }

.myOne .detailBox .orderLine { display: flex; justify-content: flex-start; align-items:center; flex-flow:row nowrap; width:100%; height:40px; padding:10px 0; background: #fff; border-bottom:1px solid #cccccc; }
.myOne .detailBox .orderLine h5 { font-size:12px; font-weight:400; color:#666666; width:100%; text-align: center; }
.myOne .detailBox .orderLine div:first-child { width: 20%; }
.myOne .detailBox .orderLine div:nth-child(2) { width:40%; text-align:left; }
.myOne .detailBox .orderLine div:nth-child(3) { width: 20%; }
.myOne .detailBox .orderLine div:last-child { width: 20%; }

.myOne .btnArea { display: flex; justify-content: center; align-items: center; width: 100%; margin:auto 0 0 0; padding:0 0; }
.myOne .btnArea a { width:100%; height:60px; font-size:18px; font-weight:400; color:#346aff; }


/* ------------------------------------------------------------------------------------------------------------
    myOneWrite - 1:1친절상담 글쓰기
------------------------------------------------------------------------------------------------------------ */
.oneWrite { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; min-height:calc(100vh - 200px); padding:0 4%; }
.oneWrite .detailBox { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; }
.oneWrite .detailBox .boxHeader { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; margin:10px 0 0; }
.oneWrite .detailBox .boxHeader h3 { font-size:18px; font-weight: 700; color:#111111; }
.oneWrite .detailBox .boxBody { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; margin:10px 0 0; background:#fafafa; border-top:2px solid #111111; border-bottom:1px solid #dddddd; } 
.oneWrite .detailBox .boxBody .formItem { display: flex; justify-content: flex-start; align-items: center; width:100%; border-bottom: 1px solid #d0d0d0; }
.oneWrite .detailBox .boxBody .formItem h4 { color:#333333; }
.oneWrite .detailBox .boxBody .formItem .formGroup { padding:7px 10px; }
.oneWrite .detailBox .boxBody .formItem .formGroup.subTxt { display: flex; justify-content: flex-start; align-items:flex-start; flex-flow: column nowrap; }
.oneWrite .detailBox .boxBody .formItem .formGroup.subTxt .noticeArea { display: flex; justify-content: flex-start; align-items: center; flex-flow:column nowrap; width:100%; margin:10px 0 0; }
.oneWrite .detailBox .boxBody .formItem .formGroup.subTxt .notice { display: flex; justify-content: flex-start; align-items: center; width:100%; }
.oneWrite .detailBox .boxBody .formItem .formGroup.subTxt .notice h5 { font-size:14px; font-weight:400; margin:8px 0 0; }
.oneWrite .detailBox .boxBody .formItem .formGroup.subTxt .selectArea { display: flex; justify-content: flex-start; align-items: center; width:100%; }
.oneWrite .detailBox .boxBody .formItem .formTitle { width: 100px; text-align: left; padding: 10px 10px; }
.oneWrite .detailBox h5.writeGuide { font-size:14px; font-weight:400; color:#5c5c5c; letter-spacing: -1.5px; margin:20px 0 20px; line-height: 18px;} /* 수정 완료 */



.oneWrite .detailBox .boxBody .formControl { width:100%; }
.oneWrite .detailBox .boxBody .formItem.hpSetting .formGroup { justify-content: flex-start; align-items: flex-start; flex-flow:column nowrap; }
.oneWrite .detailBox .boxBody .formItem.hpSetting .formControl { width:calc((100% - 16px) / 3); margin:0 0 0 3px; }
.oneWrite .detailBox .boxBody .formItem.hpSetting .formControl:first-child { margin:0 0; }

.oneWrite .detailBox .boxBody .formItem.tel select.formControl { width:calc((100% - 16px) / 3); margin:0 0; }
.oneWrite .detailBox .boxBody .formItem.tel .formControl { width:calc((100% - 16px) / 3); margin:0 0 0 8px; }

.oneWrite .detailBox .boxBody .formItem.address .formGroup { justify-content: flex-start; align-items: flex-start; flex-flow:column nowrap; }
.oneWrite .detailBox .boxBody .formItem.address .formControl { width:100%; }
.oneWrite .detailBox .boxBody .formItem.address .addReg { display: flex; justify-content: flex-start; align-items: center; width:100%; } 
.oneWrite .detailBox .boxBody .formItem.address .addReg .formControl { max-width:87px; margin:0 8px 0 0; }
.oneWrite .detailBox .boxBody .formItem.address .addReg .btnSm { width:82px; height:40px; padding:0 15px; font-size:14px; }
.oneWrite .detailBox .boxBody .formItem.address .formControl:nth-child(2) { margin:10px 0 12px; }

.oneWrite .detailBox textarea { width:100%; min-width:100%; min-height: 187px; max-height: 187px; }
.oneWrite .btnArea { display: flex; justify-content: center; align-items: center; width:100%; margin:auto 0 0 0; }
.oneWrite .btnArea a { width:49%; font-size:14px; }
.oneWrite .btnArea a:nth-child(2) { margin:0 0 0 2%; }   

/* ------------------------------------------------------------------------------------------------------------
    myOneView - 1:1친절상담 글쓰기
------------------------------------------------------------------------------------------------------------ */
.myOneView { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; min-height:calc(100vh - 200px); padding:4% }
.myOneView .detailBox { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; }
.myOneView .detailBox:nth-child(2) { margin:20px 0; }
.myOneView .detailBox .boxHeader { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; margin:0 0; }
.myOneView .detailBox .boxHeader h3 { font-size:18px; font-weight: 700; color:#111111; }
.myOneView .detailBox .boxBody { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; margin:10px 0 0; background:#fafafa; border-top:2px solid #111111; border-bottom:1px solid #dddddd; } 
.myOneView .detailBox .boxBody .formItem { display: flex; justify-content: flex-start; align-items: center; width:100%; border-bottom: 1px solid #d0d0d0; }
.myOneView .detailBox .boxBody .formItem h4 { color:#333333; }
.myOneView .detailBox .boxBody .formItem .formGroup { padding:7px 0; }
.myOneView .detailBox .boxBody .formItem .formGroup h5 { font-size:16px; font-weight:400; }
.myOneView .detailBox .boxBody .formItem .formGroup.subTxt { display: flex; justify-content: flex-start; align-items:flex-start; flex-flow: column nowrap; }
.myOneView .detailBox .boxBody .formItem .formGroup.subTxt h5 { font-size:14px; font-weight:400; margin:8px 0 0; }
.myOneView .detailBox .boxBody .formItem .formTitle { width: 110px; text-align: left; padding: 10px 10px; }
.myOneView .detailBox h5.writeGuide { font-size:14px; font-weight:400; color:#5c5c5c; letter-spacing: -1.5px; margin:5px 0 0; }

.myOneView .detailBox .boxBody .formControl { width:100%; border:none; }
.myOneView .detailBox .boxBody .formItem.hpSetting .formGroup { justify-content: flex-start; align-items: flex-start; flex-flow:column nowrap; }
.myOneView .detailBox .boxBody .formItem.hpSetting .formControl { width:calc((100% - 16px) / 3); margin:0 0 0 3px; }
.myOneView .detailBox .boxBody .formItem.hpSetting .formControl:first-child { margin:0 0; }

.myOneView .detailBox .boxBody .formItem.tel select.formControl { width:calc((100% - 16px) / 3); margin:0 0; }
.myOneView .detailBox .boxBody .formItem.tel .formControl { width:calc((100% - 16px) / 3); margin:0 0 0 8px; }

.myOneView .detailBox .boxBody .formItem.address .formGroup { justify-content: flex-start; align-items: flex-start; flex-flow:column nowrap; }
.myOneView .detailBox .boxBody .formItem.address .formControl { width:100%; }
.myOneView .detailBox .boxBody .formItem.address .addReg { display: flex; justify-content: flex-start; align-items: center; width:100%; } 
.myOneView .detailBox .boxBody .formItem.address .addReg .formControl { max-width:87px; margin:0 8px 0 0; }
.myOneView .detailBox .boxBody .formItem.address .addReg .btnSm { width:82px; height:40px; padding:0 15px; font-size:14px; }
.myOneView .detailBox .boxBody .formItem.address .formControl:nth-child(2) { margin:10px 0 12px; }

.myOneView .detailBox textarea { width:100%; min-width:100%; min-height: 187px; max-height: 187px; }
.myOneView .btnArea { display: flex; justify-content: center; align-items: center; width:100%; margin:auto 0 0 0; }
.myOneView .btnArea a { width:100%; font-size:14px; }
.myOneView .btnArea a:nth-child(2) { margin:0 0 0 2%; }

/* ------------------------------------------------------------------------------------------------------------
    minfoEdit - 회원정보수정 모바일
------------------------------------------------------------------------------------------------------------ */

.minfoEdit { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; padding: 0 4%; margin-top: 10px;}

.minfoEdit .formItem .formTitle { width: 116px; text-align: left; padding: 10px 10px; }


.minfoEdit .contentTitle { display: flex; justify-content:flex-start; align-items: center; width:100%; height:20px; 
/* margin:29px 0 0;  */
}
.minfoEdit .contentTitle h4 { font-size:18px; font-weight:700; }
.minfoEdit .contentTitle h4 sup { font-size:16px; font-weight:400; }
.minfoEdit .contentTitle h4 span { font-size:14px; font-weight:400; }
.minfoEdit .contentTitle .right { margin:0 0 0 auto; }

.minfoEdit .contentBox { display: flex; justify-content:flex-start; align-items: center; flex-flow: column nowrap; width:100%; margin:8px 0 0; background:#fafafa; border-top:2px solid #111111; }
.minfoEdit .formItem { display: flex; justify-content: flex-start; align-items: center; width:100%; border-bottom:1px solid #dddddd; }

.minfoEdit .formItem:first-child .formControl { border:none; background:#fff; }
.minfoEdit .formItem.pwSetting .formGroup { justify-content: flex-start; align-items: flex-start; flex-flow:column nowrap; }

.minfoEdit .formItem .formGroup .pwChange {width: 100%;}
.minfoEdit .formItem .formGroup .pwChange .btn { margin-top: 8px; width: 100%;}

.minfoEdit .formItem .formGroup .pwChange01 { display: none; }
.minfoEdit .formItem .formGroup .pwSet { display: none; justify-content: flex-start; align-items: center; flex-flow:row wrap; width:100%; margin:10px 0 0; }
.minfoEdit .formItem .formGroup .pwSet h4 { font-size:16px; color:var(--mainBlack); width:130px; text-align: left; }
.minfoEdit .formItem .formGroup .pwSet .formControl { width:calc(100% - 130px); max-width:180px; }
.minfoEdit .formItem .formGroup .pwSet01 { display: flex; justify-content: flex-start; align-items: center; width:100%; }
.minfoEdit .formItem .formGroup .pwSet02 { display: flex; justify-content: flex-start; align-items: center; width:100%; margin:10px 0 0; }
.minfoEdit .formItem .formGroup .pwSet03 { display: flex; justify-content: flex-start; align-items: center; width:100%; margin:10px 0 0; }

.minfoEdit .formItem.hpSetting .formGroup { justify-content: flex-start; align-items: flex-start; flex-flow:column nowrap; }
.minfoEdit .formItem .formControl {line-height: 40px;}
.minfoEdit .formItem.hpSetting select.formControl { width:80px; margin:0 0; }
.minfoEdit .formItem.hpSetting .hpChange .formControl { width:57px; margin:0 0 0 4px; padding: 3px 5px; }
.minfoEdit .formItem.hpSetting .formControl:first-child { margin:0 0; }
.minfoEdit .formItem.hpSetting a { margin:0 0 0 8px; width: 65px; height: 40px; padding: 0 5px; }

.minfoEdit .formItem.hpSetting .hpChange { display: flex; justify-content: flex-start; align-items: center; width:100%; }
.minfoEdit .formItem.hpSetting .noticeArea { display: flex; justify-content: flex-start; align-items: center; flex-flow:column nowrap; width:100%; margin:10px 0 0; }
.minfoEdit .formItem.hpSetting .notice { display: flex; justify-content: flex-start; align-items: center; width:100%; }
.minfoEdit .formItem.hpSetting .notice h5 { font-size:13px; line-height: 1.2;}
.minfoEdit .formItem.hpSetting .selectArea { display: flex; justify-content: flex-start; align-items: center; width:100%; margin:5px 0 0; }

.minfoEdit .formItem:nth-child(4) .formControl { width:180px; }

.minfoEdit .formItem.birthYmd .formGroup { justify-content: flex-start; align-items: flex-start; flex-flow:column nowrap; }
.minfoEdit .formItem.birthYmd .formControl { border:none; background:#fff; max-width:180px; }
.minfoEdit .formItem.birthYmd .noticeArea { display: flex; justify-content: flex-start; align-items: center; width:100%; margin:0 0; }
.minfoEdit .formItem.birthYmd .notice { display: flex; justify-content: flex-start; align-items: center; width:50%; }
.minfoEdit .formItem.birthYmd .selectArea { display: flex; justify-content: flex-start; align-items: center; width:50%; }

.minfoEdit .formItem.tel select.formControl { width:calc((100% - 126) / 3); margin:0 0; }
.minfoEdit .formItem.tel .formControl { width:calc((100% - 126) / 3); margin:0 0 0 8px; }

.minfoEdit .formItem.emailSetting .formGroup { justify-content: flex-start; align-items: flex-start; flex-flow:column nowrap; }
.minfoEdit .formItem.emailSetting .formControl { max-width:170px; }
.minfoEdit .formItem.emailSetting .emailReg { display: flex; justify-content: flex-start; align-items: center; width:100%; } 
.minfoEdit .formItem.emailSetting .emailReg1 { display: flex; justify-content: flex-start; align-items: center; width:100%; margin:5px 0 0; } 
.minfoEdit .formItem.emailSetting .emailReg1 .btnSm { width:66px; height:40px; padding:0 10px; font-size:14px; margin:0 0 0 8px; }
.minfoEdit .formItem.emailSetting .emailReg .specialCharacters { padding:0 10px; }

.minfoEdit .formItem.emailSetting .emailReg select.formControl { width:178px; margin:0 8px 0; }

.minfoEdit .formItem.emailSetting .noticeArea { display: flex; justify-content: flex-start; align-items: center; flex-flow:column nowrap; width:100%; margin:10px 0 0; }
.minfoEdit .formItem.emailSetting .notice { display: flex; justify-content: flex-start; align-items: center; width:100%; }
.minfoEdit .formItem.emailSetting .notice h5 { font-size:13px; line-height: 1.2;}
.minfoEdit .formItem.emailSetting .selectArea { display: flex; justify-content: flex-start; align-items: center; width:100%; margin: 5px 0 0;}

.minfoEdit .formItem.address .formGroup { justify-content: flex-start; align-items: flex-start; flex-flow:column nowrap; }
.minfoEdit .formItem.address .formControl { max-width:87px; margin:0 8px 0 0; }
.minfoEdit .formItem.address .addReg { display: flex; justify-content: flex-start; align-items: center; width:100%; } 
.minfoEdit .formItem.address .addReg .btnSm { width:82px; height:40px; padding:0 15px; font-size:14px; }
.minfoEdit .formItem.address .formControl:nth-child(2) { max-width:582px; margin:10px 0 12px; }
.minfoEdit .formItem.address .formControl:nth-child(3) { max-width:582px; }

.minfoEdit .formItem.wedding .formGroup { justify-content: flex-start; align-items: flex-start; flex-flow:row nowrap; }
.minfoEdit .formItem.wedding .formControl { border:none; background:#fff; }
.minfoEdit .formItem.wedding .selectArea { display: flex; justify-content: flex-start; align-items: center; width:135px; height:30px; }
.minfoEdit .formItem.wedding .weddingYmd { display: flex; justify-content: flex-start; align-items: center; flex-flow: row nowrap; width:300px; margin:0 0; }
.minfoEdit .formItem.wedding .weddingYmd h5 { font-size:14px; color:#333; margin:0 4px 0 8px; }
.minfoEdit .formItem.wedding .weddingYmd h5 sup { font-size:14px; color:#333; }
.minfoEdit .formItem.wedding .weddingYmd h4 { margin:0 4px 0 8px; }
.minfoEdit .formItem.wedding .weddingYmd .formControl { border: 1px solid #d0d0d0; } 
.minfoEdit .formItem.wedding .weddingYmd .formControl.wedY { max-width:66px; }
.minfoEdit .formItem.wedding .weddingYmd .formControl.wedM { max-width:36px; }
.minfoEdit .formItem.wedding .weddingYmd .formControl.wedD { max-width:36px; }

.minfoEdit .formItem.memo textarea { width:100%; min-width:100%; max-width:100%; height:70px; min-height:63px; max-height:63px; line-height: normal;}

.minfoEdit .btnArea { display: flex; justify-content: center; align-items: center; width:100%; margin:28px 0; }
.minfoEdit .btnArea a { width:49%; }
.minfoEdit .btnArea .btnConfirm { margin:0 0 0 2%; }
.minfoEdit sup { top: -.3em; }
/* ------------------------------------------------------------------------------------------------------------
    mSecession - 모바일 회원탈퇴
------------------------------------------------------------------------------------------------------------ */
.mSecession { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; padding:0 4%; }
.mSecession .contentTitle00 { display: flex; justify-content:flex-start; align-items: flex-start; flex-flow:column nowrap; width:100%; height:auto; margin:5px 0 0; }
.mSecession .contentTitle00 h4 { font-size:16px; font-weight:300; color:#333333; line-height: 1.3;}
.mSecession .contentTitle { display: flex; justify-content:flex-start; align-items: flex-start; flex-flow:column nowrap; width:100%; height:auto; margin:29px 0 0; }
.mSecession .contentTitle h4 { font-size:16px; font-weight:700; color:#333333; line-height: 20px;}
.mSecession .contentTitle h4 span { color:#d21c42;  }
.mSecession .contentTitle .bottom { margin:17px 0 0; }
.mSecession .contentTitle .bottomBox { display: flex; justify-content:flex-start; align-items: flex-start; flex-flow: row wrap; width:100%; margin:14px 0 0; font-size:16px; font-weight:400; text-align: left; border:2px solid #111111; border-left:none; border-right:none; }
.mSecession .contentTitle .bottomBox01 { display: flex; justify-content:flex-start; align-items: flex-start; width:100%; border-bottom: 1px solid #dddddd; }
.mSecession .contentTitle .bottomBox02 { display: flex; justify-content:flex-start; align-items: flex-start; width:100%; }
.mSecession .contentTitle .bottomBox .label { display: flex; justify-content:center; align-items: center; width:120px; height:90px; padding:10px 10px; background:#fafafa; color:#333333; border-radius: 0; font-size: 88%;}
.mSecession .contentTitle .bottomBox .content { display: flex; justify-content:center; align-items: flex-start; flex-flow:column nowrap; width:calc(100% - 120px); height:90px; padding:10px 10px 9px; }
.mSecession .contentTitle .bottomBox .content h4 { font-size:16px; font-weight: 400; color:#333333; line-height: 22px; }
.mSecession .contentTitle .bottomBox .content h4 span { font-weight: 700; color:var(--mainRed); }
.mSecession .contentTitle .bottomBox .content h4 span.black { font-weight: 700; color:#333333; }

.mSecession .contentTitle01 { display: flex; justify-content:flex-start; align-items: flex-start; flex-flow:column nowrap; width:100%; height:auto; margin:36px 0 0; }
.mSecession .contentTitle01 .left h4 { font-size: 16px; font-weight:700; line-height: 20px;}
.mSecession .contentTitle01 h4 { font-size: 14px; font-weight:500; }
.mSecession .contentTitle01 h4 span { color:#d21c42;  }

.mSecession .contentTitle01 .bottomBox { display: flex; justify-content:flex-start; align-items: flex-start; flex-flow: row wrap; width:100%; margin:16px 0 0; font-size:16px; font-weight:400; text-align: left; border-top:2px solid #111111; }
.mSecession .contentTitle01 .bottomBox .checkGroup { display: flex; justify-content:flex-start; align-items: center; width:100%; height:44px; padding:10px 10px; border-bottom:1px solid #dddddd; }
.mSecession .contentTitle01 .bottomBox .checkGroup h4 { margin:0 0 0 12px; }

/* .mSecession .checkGroup input[type="checkbox"]{ display:none; }
.mSecession .checkGroup input[type="checkbox"] + label{ position:relative; display:inline-block; width:20px; height:20px; border:2px solid #d9d9d9; transition: all .75s; }
.mSecession .checkGroup input[type="checkbox"] + label::after{ position:absolute; left:1px; top:0px; content:'✔'; width:20px; height:20px; font-size:16px; color:#333333; text-align:center; transition: all .75s; }
.mSecession .checkGroup input[type="checkbox"]:not(:checked) + label::after{ color: transparent; }
.mSecession .checkGroup input[type="checkbox"]:not(:checked) + label { border-color: #d9d9d9; } */

/* .mSecession .checkGroup input[type="checkbox"]:hover + label{ position:relative; display:inline-block; width:20px; height:20px; background:var(--mainRed); border:none; }
.mSecession .checkGroup input[type="checkbox"]:hover + label::after{ color:var(--mainRed); } */
/* .mSecession .checkGroup input[type="checkbox"]:checked + label { background:var(--mainRed); border:none; }
.mSecession .checkGroup input[type="checkbox"]:checked + label::after{ color:#fff; }
.mSecession .checkGroup input[type="checkbox"]:checked + label:hover::after{ color:#fff; } */

.mSecession .contentTitle01 .bottomBox .checkGroup:last-child { display: flex; justify-content:flex-start; align-items: center; flex-flow:row wrap; width:100%; height:auto; padding:10px 10px; border-bottom:1px solid #dddddd; }
.mSecession .contentTitle01 .bottomBox .checkGroup:last-child textarea { width:100%; min-width:100%; min-height:96px; max-height: 96px; margin:10px 0 0; background: #f9f9f9; border:1px solid #d0d0d0; }
.mSecession .contentTitle01 .bottomBox .checkGroup:last-child textarea:focus { background: #fff; }

.mSecession .contentTitle02 { display: flex; justify-content:flex-start; align-items: flex-start; flex-flow:column nowrap; width:100%; margin:15px 0 0; padding:11px 16px; background: #f9f9f9; }
.mSecession .contentTitle02 h4 { font-size:16px; font-weight: 700;color:#d21c42; line-height: 24px; text-align: left; }
.mSecession .contentTitle02 h4 span { font-size:13px; font-weight: 400; }

.mSecession .btnArea { display: flex; justify-content: center; align-items: center; width:100%; margin:35px 0; }
.mSecession .btnArea a { width:49%; }
.mSecession .btnArea .btnConfirm { margin:0 0 0 2%; }

/* ------------------------------------------------------------------------------------------------------------
    mAutoOrderList - 모바일 정기구매관리
------------------------------------------------------------------------------------------------------------ */
.mAutoOrderList { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; padding:0 4% 70px; margin:10px 0 0; }
.mAutoOrderList .menuTitle { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; text-align: left; }
.mAutoOrderList .menuTitle h3 { font-size: 20px; font-weight:700; width:100%; }
.mAutoOrderList .filterBox { display: flex; justify-content: flex-start; align-items: flex-start; width:100%; flex-flow:row nowrap; border:1px solid #dcdcdc; padding:12px 12px; margin:15px 0 0; }
.mAutoOrderList .quickFilter { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow:row wrap; width:100%; }
.mAutoOrderList .quickFilter a { width:calc((100% - 10px) / 3); margin:0 2px 5px 0; }
.mAutoOrderList .quickFilter a:nth-child(3n) { margin:0 2px 5px 0; }
.mAutoOrderList .quickFilter a:nth-child(4) { margin:0 5px 0 0; }
.mAutoOrderList .quickFilter a:nth-child(5) { margin:0 2px 0 0; }
.mAutoOrderList .quickFilter a:nth-child(6) { margin:0 2px 0 0; }

.mAutoOrderList .detailBox { width:100%; position: relative;}

.mAutoOrderList .detailBox .boxHeader { display: flex; justify-content: flex-end; align-items: center; flex-flow: row nowrap; width:100%; margin:20px 0 0; }
.mAutoOrderList .detailBox .boxHeader a { width:150px; height:40px; font-size:14px; font-weight: 700; }
.mAutoOrderList .detailBox .boxHeader .excludeCalendarMobile { margin:0 0 0 10px; }
.mAutoOrderList .detailBox .boxHeader .excludeCalendarMobile .btnAllChange { background:#fff; border:1px solid #949494; border-radius: 4px; color:#8d8d8d; font-weight: 700; }

.mAutoOrderList .detailBox .boxHeader .excludeCalendarMobile .btnArea { display: flex; justify-content: flex-end; align-items: center; flex-flow: row nowrap; width:100%; margin:0 0 20px; }
.mAutoOrderList .detailBox .boxHeader .excludeCalendarMobile .btnArea .btn { margin:0 0 0 10px; }
.mAutoOrderList .detailBox .boxHeader .excludeCalendarMobile .btnArea .btn.btnNext { font-size: 14px; font-weight: 700; color: #fff; background: var(--mainRed); border-color: var(--mainRed); width:auto; }
.mAutoOrderList .detailBox .boxHeader .excludeCalendarMobile .date.selected .date-text { color: #fff; }
.mAutoOrderList .detailBox .boxHeader .excludeCalendarMobile .date.selected::after { content: ''; width: 7px; height: 7px; position: absolute; top: 9px; right: 15px; border-top: 2px solid #2196f3; border-left: 2px solid #2196f3; transform: rotate(225deg); transition: all 1s;  }

.mAutoOrderList .detailBox .boxBody { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; background:#fff; } 

.mAutoOrderList .checkGroup { width:28px; }
/* .mAutoOrderList .checkGroup input[type="checkbox"]{ display:none; }
.mAutoOrderList .checkGroup input[type="checkbox"] + label{ position:relative; display:inline-block; width:20px; height:20px; border:2px solid #d9d9d9; transition: all .75s; }
.mAutoOrderList .checkGroup input[type="checkbox"] + label::after{ position:absolute; left:1px; top:0px; content:'✔'; width:20px; height:20px; font-size:16px; color:#333333; text-align:center; transition: all .75s; }
.mAutoOrderList .checkGroup input[type="checkbox"]:not(:checked) + label::after{ color: transparent; }
.mAutoOrderList .checkGroup input[type="checkbox"]:not(:checked) + label { border-color: #d9d9d9; } */

/* .mAutoOrderList .checkGroup input[type="checkbox"]:hover + label{ position:relative; display:inline-block; width:20px; height:20px; background:var(--mainRed); border:none; }
.mAutoOrderList .checkGroup input[type="checkbox"]:hover + label::after{ color:var(--mainRed); } */
/* .mAutoOrderList .checkGroup input[type="checkbox"]:checked + label { background:var(--mainRed); border:none; }
.mAutoOrderList .checkGroup input[type="checkbox"]:checked + label::after{ color:#fff; }
.mAutoOrderList .checkGroup input[type="checkbox"]:checked + label:hover::after{ color:#fff; } */

.mAutoOrderList .detailBox .orderLine { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; padding:27px 17px 17px; margin:20px 0 0; border:1px solid #e7e7e7; border-radius: 10px; }
.mAutoOrderList .detailBox .orderLine .dateLine { display: flex; justify-content: flex-start; align-items: center; flex-flow:row nowrap; width:100%; margin:0 0 25px; }
.mAutoOrderList .detailBox .orderLine .dateLine h4 { font-size:18px; font-weight:700; }
.mAutoOrderList .detailBox .orderLine .dateLine a { margin:0 0 0 auto; }
.mAutoOrderList .detailBox .orderLine .itemLine { display: flex; justify-content: flex-start; 
/* align-items: center;  */
flex-flow:row nowrap; width:100%; }
.mAutoOrderList .detailBox .orderLine .itemLine h4 { font-size:16px; font-weight:400; line-height: 28px; letter-spacing: -0.5px; margin:0 0 8px; }
.mAutoOrderList .detailBox .orderLine .itemLine h4.bold { font-weight:700; }
.mAutoOrderList .detailBox .orderLine .itemLine.canceled h4 span { color:var(--mainRed); font-weight: 700; }
.mAutoOrderList .detailBox .orderLine .itemLine.nextCharge h4 span { color:var(--mainRed); font-weight: 700; }
.mAutoOrderList .detailBox .orderLine .itemLine.keepGoing h4 span { color:var(--mainBlue); font-weight: 700; }

.mAutoOrderList .detailBox .orderLine .itemLine h4:last-child { margin:0 0 0 auto; }

.mAutoOrderList .btnArea { display: flex; justify-content: center; align-items: center; width:100%; margin:35px 0 0; }
.mAutoOrderList .btnArea a { width:101px; font-size:14px; }
.mAutoOrderList .btnArea a:nth-child(2) { margin:0 12px; }
.mAutoOrderList .excludeCalendarMobile .calendar-widget {
    position: static;
}
/* ------------------------------------------------------------------------------------------------------------
    mAutoOrderDetail - 주문상세보기
------------------------------------------------------------------------------------------------------------ */
.mAutoOrderDetail { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; padding:0 4% 120px; }
.mAutoOrderDetail .menuTitle { height:28px; }
.mAutoOrderDetail .menuTitle h3 { font-size: 20px; font-weight:700; }
.mAutoOrderDetail .guideBox { display: flex; justify-content:center; align-items:center; width:100%; height:99px; flex-flow:row nowrap; border:1px solid #dcdcdc; border-radius:10px; padding:14px 14px; margin:0 0; }
.mAutoOrderDetail .guideBox .guideTxt { display: flex; justify-content:center; align-items:center; flex-flow:row wrap; width:100%; line-height: 30px; text-align: center; }
.mAutoOrderDetail .guideBox h3 { font-size:18px; font-weight: 700; color:#000; width:100%; }
.mAutoOrderDetail .guideBox h3 span { font-weight: 700; color:#346aff; }

.mAutoOrderDetail .detailBox { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; }
.mAutoOrderDetail .detailBox .boxHeader { display: flex; justify-content: flex-start; align-items:center; flex-flow: row nowrap; width:100%; margin:22px 0 0; }
.mAutoOrderDetail .detailBox .boxHeader h3 { font-size:18px; font-weight: 700; color:#111111; }
.mAutoOrderDetail .detailBox .boxHeader a { width:112px; height:40px; margin:0 0 0 auto; }

.mAutoOrderDetail .detailBox .boxBody { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; margin:16px 0 0; background:#fff; 
/* border:1px solid #e7e7e7; border-radius: 10px;  */
} 
.mAutoOrderDetail .detailBox .boxBody .formItem { display: flex; justify-content: flex-start; align-items: center; width:100%; border-bottom:1px solid #dddddd; }
.mAutoOrderDetail .detailBox .boxBody .formItem h4 { color:#333333; }
.mAutoOrderDetail .detailBox .boxBody .mainRed { color:#d80000; }
.mAutoOrderDetail .detailBox .boxBody .mainBlue { color:#0038FF; }

.mAutoOrderDetail .detailBox .boxBody .orderFunction a { width:108px; margin:0 0 0 20px; }

.mAutoOrderDetail .detailBox .orderLine { display: flex; justify-content: flex-start; align-items:center; flex-flow:column nowrap; width:100%; padding:20px 29px 25px 20px; background: #fff; border:1px solid #e7e7e7; border-radius: 10px; margin-bottom: 10px; } 
.mAutoOrderDetail .detailBox .orderLine h5 { font-size:13px; font-weight: 350; color:#666666; width:100%; }
.mAutoOrderDetail .detailBox .orderLine .autoOrderDate { display: flex; justify-content: flex-start; align-items:center; flex-flow:row nowrap; width:100%; }
.mAutoOrderDetail .detailBox .orderLine .autoOrderDate h3 { font-size:18px; font-weight:700; color:#111111; }
.mAutoOrderDetail .detailBox .orderLine .autoOrderDate a { margin:0 0 0 auto; }

.mAutoOrderDetail .detailBox .orderLine .pThum { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: row nowrap; width:100%; margin:20px 0 0; }
.mAutoOrderDetail .detailBox .orderLine .pThum .pthumnail { width:64px; }
.mAutoOrderDetail .detailBox .orderLine .pThum .pDetail { display: flex; justify-content: flex-start; align-items:flex-start; flex-flow:column nowrap; width:calc(100% - 64px); padding:0 0 0 16px; }
.mAutoOrderDetail .detailBox .orderLine .pThum .pDetail h5 { font-size:16px; font-weight:400; color:#111111; line-height: 24px; }
.mAutoOrderDetail .detailBox .orderLine .pThum .pscript { display: flex; justify-content: flex-start; align-items:flex-start; flex-flow:column nowrap; width:100%; text-align: left; }
.mAutoOrderDetail .detailBox .orderLine .pThum .pOption { display: flex; justify-content: flex-start; align-items:center; flex-flow:row nowrap; width:100%; }
.mAutoOrderDetail .detailBox .orderLine .pThum .pOption a { width:70px; height:30px; font-size: 16px; font-weight: 700; background:#555454; }

.qtySelector { display: flex; justify-content: flex-start; align-items:flex-start; flex-flow:row nowrap; width:200px; }
.qtySelector .qtyValue{ border: none; padding: 6px; width: 35px; height: 30px; line-height: 30px; float: left; text-align: center; border: 1px solid #e7e7e7;}

.mAutoOrderDetail .detailBox .boxBody.oInfo { display: flex; justify-content: flex-start; align-items:center; flex-flow:column nowrap; width:100%; padding:12px 18px; margin:12px 0 0; background: #fff; border:1px solid #e7e7e7; border-radius: 10px; } 
.mAutoOrderDetail .detailBox .boxBody.oInfo .formItem { display: flex; justify-content: flex-start; align-items: center; width:100%; border:none; gap: 20px; }
.mAutoOrderDetail .detailBox .boxBody.oInfo .formItem h4 { font-size: 16px; font-weight: 400; color:#111111; line-height:30px; }
.mAutoOrderDetail .detailBox .boxBody.oInfo .formItem h4:nth-child(2) { margin:0 0 0 auto; }
.mAutoOrderDetail .detailBox .boxBody.oInfo .formItem h4 span { color:#346aff; font-weight: 700; }
.mAutoOrderDetail .detailBox .boxBody.oInfo .formItem h4 span.guide { font-size:16px; color:#d21c42; font-weight: 500; letter-spacing: -1.5px; }
/* .mAutoOrderDetail .detailBox .boxBody.oInfo img { width:20px; margin:0 0 0 8px; } */

.mAutoOrderDetail .detailBox .boxBody.oInfo .excludeCalendarMobile { margin:0 0 0 auto; }
.mAutoOrderDetail .detailBox .boxBody.oInfo .excludeCalendarMobile .currentDay { font-size:16px; color:#d21c42; font-weight: 700; }
.mAutoOrderDetail .detailBox .boxBody.oInfo .excludeCalendarMobile .currentDay input { border:none; line-height: 24px; }
.mAutoOrderDetail .detailBox .boxBody.oInfo .excludeCalendarMobile .calendar-wrapper { display: none; position: absolute; top: 100%; left: -40%; padding-top: 8px; z-index: 2; }
.mAutoOrderDetail .detailBox .boxBody.oInfo .excludeCalendarMobile .date.selected .date-text { color: #fff; }
.mAutoOrderDetail .detailBox .boxBody.oInfo .excludeCalendarMobile .date.selected::after { content: ''; width: 7px; height: 7px; position: absolute; top: 9px; right: 15px; border-top: 2px solid #2196f3; border-left: 2px solid #2196f3; transform: rotate(225deg); transition: all 1s;  }

.mAutoOrderDetail .detailBox.deliveryInfo .boxBody.dInfo { display: flex; justify-content: flex-start; align-items:center; flex-flow:column nowrap; width:100%; padding:12px 18px; margin:12px 0 0; background: #fff; border:1px solid #e7e7e7; border-radius: 10px; } 
.mAutoOrderDetail .detailBox .boxBody.dInfo .formItem { display: flex; justify-content: flex-start; align-items: center; width:100%; border-bottom:none; }
.mAutoOrderDetail .detailBox.deliveryInfo .boxBody.dInfo .formGroup { padding:10px 0; }
.mAutoOrderDetail .detailBox.deliveryInfo .boxBody.dInfo .formControl { width:180px; 
/* height:49px;  */
line-height: 40px;
}
.mAutoOrderDetail .detailBox.deliveryInfo .formItem.hpSetting .formGroup { justify-content: flex-start; align-items: flex-start; flex-flow:column nowrap; }
.mAutoOrderDetail .detailBox.deliveryInfo .formItem.hpSetting .formGroup .hpChange { display: flex; align-items: flex-start; gap: 8px; }
.mAutoOrderDetail .detailBox.deliveryInfo .formItem.hpSetting .formControl { width:89px; 
/* height:49px;  */
margin:0 0 0 0px; 
line-height: 40px;}
.mAutoOrderDetail .detailBox.deliveryInfo .formItem.hpSetting .formControl:first-child { margin:0 0; }

.mAutoOrderDetail .detailBox.deliveryInfo .formItem.tel select.formControl { width:126px; margin:0 0; }
.mAutoOrderDetail .detailBox.deliveryInfo .formItem.tel .formControl { width:126px; margin:0 0 0 8px; }

.mAutoOrderDetail .detailBox.deliveryInfo .formItem.emailSetting .formGroup { justify-content: flex-start; align-items: flex-start; flex-flow:column nowrap; }
.mAutoOrderDetail .detailBox.deliveryInfo .formItem.emailSetting .formControl { max-width:180px; }
.mAutoOrderDetail .detailBox.deliveryInfo .formItem.emailSetting .emailReg { display: flex; justify-content: flex-start; align-items: center; width:100%; } 
.mAutoOrderDetail .detailBox.deliveryInfo .formItem.emailSetting .emailReg .btnSm { width:82px; height:30px; padding:0 15px; font-size:14px; }

.mAutoOrderDetail .detailBox.deliveryInfo .formItem.address .formGroup { justify-content: flex-start; align-items: flex-start; flex-flow:column nowrap; }
.mAutoOrderDetail .detailBox.deliveryInfo .formItem.address .formControl { width:100%; }
.mAutoOrderDetail .detailBox.deliveryInfo .formItem.address .addReg { display: flex; justify-content: flex-start; align-items: center; width:100%; } 
.mAutoOrderDetail .detailBox.deliveryInfo .formItem.address .addReg .formControl { max-width:87px; margin:0 8px 0 0; }
.mAutoOrderDetail .detailBox.deliveryInfo .formItem.address .addReg .btnSm { width:82px; height:40px; padding:0 15px; font-size:14px; }
.mAutoOrderDetail .detailBox.deliveryInfo .formItem.address .formControl:nth-child(2) { margin:10px 0 0; }
.mAutoOrderDetail .detailBox.deliveryInfo .formItem.address .formControl:nth-child(3) { margin:10px 0 12px; }

.mAutoOrderDetail .detailBox .boxBody .formItem.local { display: flex; justify-content: flex-start; align-items: center; width:100%; border-top:2px solid #111111; border-bottom:1px solid #111111; background:#fafafa; }
.mAutoOrderDetail .detailBox .boxBody .formItem.local .formItem { border:none; }
.mAutoOrderDetail .detailBox .boxBody .formItem.local .formGroup { padding:10px 10px; }
.mAutoOrderDetail .detailBox .boxBody .formItem.local .formTitle { width:110px; }
.mAutoOrderDetail .detailBox .boxBody .formItem.local .formControl { width:100%; }


.mAutoOrderDetail .detailBox.paymentControl { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; border:none; }
.mAutoOrderDetail .detailBox.paymentControl .boxHeader { flex-flow: row nowrap; }
.mAutoOrderDetail .detailBox.paymentControl .boxHeader .btnArea { width:220px; margin:0 0 0 auto; }
.mAutoOrderDetail .detailBox.paymentControl .boxHeader .btnArea a { width:121px; height:33px; }

.mAutoOrderDetail .detailBox.paymentControl .boxBody.oInfo { display: flex; justify-content: flex-start; align-items:center; flex-flow:column nowrap; width:100%; padding:12px 18px; margin:12px 0 0; background: #fff; border:1px solid #e7e7e7; border-radius: 10px; } 
.mAutoOrderDetail .detailBox.paymentControl .boxBody.oInfo .formItem { display: flex; justify-content: flex-start; align-items: center; width:100%; border:none; }
.mAutoOrderDetail .detailBox.paymentControl .boxBody.oInfo .formItem h4 { font-size: 16px; font-weight: 400; color:#111111; line-height:30px; }
.mAutoOrderDetail .detailBox.paymentControl .boxBody.oInfo .formItem h4:nth-child(2) { margin:0 0 0 auto; }
.mAutoOrderDetail .detailBox.paymentControl .boxBody.oInfo .formItem h4 span { color:#333333; font-weight: 700; }

.mAutoOrderDetail .btnArea { display: flex; justify-content: center; align-items: center; width:100%; margin:35px 0 0; }
.mAutoOrderDetail .btnArea a { width:49%; height:54px; font-size:18px; font-weight: 500; }
.mAutoOrderDetail .btnArea a:nth-child(2) { margin:0 0 0 2%; }

/* ------------------------------------------------------------------------------------------------------------
    팝콘 이용내역
------------------------------------------------------------------------------------------------------------ */
.popStatus { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width: 100%; padding:0 4%; }
.popStatus .menuTitle { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: row nowrap; width: 100%; margin: 20px 0 0; }
.popStatus .menuTitle h3 { font-size: 20px; font-weight: 700; color:#111111; }
.popStatus .detailBox { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; }
.popStatus .detailBox .boxHeader { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: row nowrap; width:100%; margin:10px 0 0; }
.popStatus .detailBox .boxHeader a:nth-child(2) { margin:0 0 0 auto; }
.popStatus .detailBox .boxHeader a:last-child { margin:0 0 0 6px; }
.popStatus .detailBox .boxHeader h4 { font-size:16px; font-weight: 700; color:#333333; }
.popStatus .detailBox .boxBody { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; margin:16px 0 0; background:#fafafa; border-top:2px solid #111111; } 
.popStatus .detailBox .boxBody .formItem { display: flex; justify-content: flex-start; align-items: center; width:100%; height:50px; border-bottom:1px solid #dddddd; }
.popStatus .detailBox .boxBody .formItem .formTitle { width:40%; }
.popStatus .detailBox .boxBody .formItem h4 { color:#333333; }
.popStatus .detailBox .boxBody .formItem h4 span { color:var(--mainRed); }
.popStatus .detailBox .boxBody .formItem .formGroup { width:60%; height:100%; padding:0 10px; }
.popStatus .detailBox .boxBody .formItem .formGroup .formControl { height:49px; border:none; }
.popStatus .detailBox .boxBody .mainRed { color:#d80000; }
.popStatus .detailBox .boxBody .mainBlue { color:#0038FF; }

.popStatus .btnWrs.giftPop { width:100%; height:50px; margin:20px 0 30px; font-size:20px; font-weight:700; }

.popconUse { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; padding:0 4% 27px; margin:10px 0 0; }
.popconUse .menuTitle { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; text-align: left; }
.popconUse .menuTitle h3 { font-size: 20px; font-weight:700; width:100%; }
.popconUse .filterBox { display: flex; justify-content: flex-start; align-items: flex-start; width:100%; flex-flow:column nowrap; border:1px solid #dcdcdc; padding:12px 12px; margin:15px 0 0; }
.popconUse .quickFilter { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow:row wrap; width:100%; gap: 5px;}
.popconUse .quickFilter a { font-size:14px; font-weight:700; border-radius:13px; }
.popconUse .quickFilter a:last-child { margin:0 0 0 0; }
.popconUse .searchFilter { display: flex; justify-content: flex-start; align-items: center; width:100%; margin:12px 0 0; }
.popconUse .searchFilter .formControl { width:75%; height:50px; }
.popconUse .searchFilter a { width:25%; height:50px; margin:0 0 0 7px; font-size: 14px; font-weight: 700;}

.popUseHistory { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width: 100%; padding:0 4% 30px; margin:10px 0 0; }
.popUseHistory:last-child { padding:0 4% 70px; }
.popUseHistory .title h3 { font-size:18px; font-weight:700; color:#111; }
.popUseHistory .historyBox { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width: 100%; padding:20px 20px; margin:12px 0 0; border: 1px solid #e7e7e7; border-radius: 10px; box-shadow: 0px 4px 5px 0px #00000020; }
.popUseHistory .historyBox .histortIndex { display: flex; justify-content: flex-start; align-items: center; flex-flow:row nowrap; width: 100%; } 
.popUseHistory .historyBox .histortIndex h4 { font-size:18px; font-weight:700; line-height: 18px; color:#111111; width: 40%;}
.popUseHistory .historyBox .histortIndex h5 { font-size:16px; font-weight:400; line-height: 21px; color:#666666; width: 60%;}
.popUseHistory .historyBox .historyChange { display: flex; justify-content: flex-start; align-items: center; flex-flow:row nowrap; width: 100%; margin:20px 0 0; } 
.popUseHistory .historyBox .historyChange h5 { font-size:16px; font-weight:400; color:#111111; width: 119px; }
.popUseHistory .historyBox .historyChange h5:last-child { font-size:16px; font-weight:700; color:var(--mainBlue); width: auto;}
.popUseHistory .historyBox .historyChange h5.decrease { color:var(--mainRed); }


/* ------------------------------------------------------------------------------------------------------------
    팝콘 선물하기
------------------------------------------------------------------------------------------------------------ */
.giftPopIndex { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width: 100%; padding:0 4%; }
.giftPopIndex .menuTitle { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: row nowrap; width: 100%; margin: 10px 0 0; }
.giftPopIndex .menuTitle h3 { font-size: 20px; font-weight: 700; color:#111111; }
.giftPopIndex .detailBox { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; }
.giftPopIndex .detailBox .boxHeader { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: row nowrap; width:100%; margin:10px 0 0; }
.giftPopIndex .detailBox .boxHeader a:nth-child(2) { margin:0 0 0 auto; }
.giftPopIndex .detailBox .boxHeader a:last-child { margin:0 0 0 6px; }
.giftPopIndex .detailBox .boxHeader h4 { font-size:16px; font-weight: 700; color:#333333; }
.giftPopIndex .detailBox .boxBody { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; margin:16px 0 0; background:#fafafa; border-top:2px solid #111111; } 
.giftPopIndex .detailBox .boxBody .formItem { display: flex; justify-content: flex-start; align-items: center; width:100%; height:50px; border-bottom:1px solid #dddddd; }
.giftPopIndex .detailBox .boxBody .formItem .formTitle { width:46%; }
.giftPopIndex .detailBox .boxBody .formItem h4 { color:#333333; }
.giftPopIndex .detailBox .boxBody .formItem h4 span { color:var(--mainRed); }
.giftPopIndex .detailBox .boxBody .formItem .formGroup { width:60%; height:100%; padding:0 10px; }
.giftPopIndex .detailBox .boxBody .formItem .formGroup .formControl { height:49px; border:none; }
.giftPopIndex .detailBox .boxBody .mainRed { color:#d80000; }
.giftPopIndex .detailBox .boxBody .mainBlue { color:#0038FF; }

.takeSearchBox { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; padding:0 4%; }
.takeSearchBox .boxHeader { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; margin:23px 0 0; }
.takeSearchBox .boxHeader h3 { font-size:20px; font-weight: 700; color:#111111; }
.takeSearchBox .boxBody { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; margin:16px 0 0; background:#fafafa; border-top:2px solid #111111; border-bottom:1px solid #dddddd; } 

.takeSearchBox .boxBody .formItem { display: flex; justify-content: flex-start; align-items: center; width:100%; padding:0 0; }
.takeSearchBox .boxBody .formItem .formTitle { width:30%; text-align: left; padding: 10px 10px;}
.takeSearchBox .boxBody .formItem h4 { color:#333333; }
.takeSearchBox .boxBody .formItem .formGroup { width:70%; padding:7px 10px; background: transparent; padding:7px 10px 7px 0; }
.takeSearchBox .boxBody .formItem .formGroup .formControl { width:100%; }
.takeSearchBox .boxBody .formItem .formGroup a.btnSearch { height:40px; margin:0 0 0 10px; font-size:14px; font-weight: 700; }
.takeSearchBox .boxBody .formItem .formGroup a.btnWrs { font-size:14px; font-weight: 500; }

.takeUser { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; padding:0 4%; }
.takeUser .boxHeader { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; margin:20px 0 0; }
.takeUser .boxHeader h4 { font-size:16px; font-weight: 700; color:#111111; }

.takeUser .boxBody { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; height:400px; overflow-y:auto; margin:16px 0 0; background:#fff; border-top:2px solid #111111; } 
.takeUser .boxBody .formItem { display: flex; justify-content: flex-start; align-items: center; width:100%; border-bottom:1px solid #dddddd; }
.takeUser .boxBody .formItem h4 { color:#333333; }
.takeUser .boxBody .mainRed { color:#d80000; }
.takeUser .boxBody .mainBlue { color:#0038FF; }

.takeUser .titleLine { display: flex; justify-content: flex-start; align-items:center; flex-flow:row nowrap; width:100%; height:41px; padding:11px 10px; gap: 5px; background: #fafafa; text-align: center;}
.takeUser .titleLine h4 { font-weight: 400; color:#333333; font-size: 14px;}
.takeUser .titleLine div:first-child { width:8%; }
.takeUser .titleLine div:nth-child(2) { width:24%; }
.takeUser .titleLine div:nth-child(3) { width:28%; }
.takeUser .titleLine div:nth-child(4) { width:23%; }
.takeUser .titleLine div:last-child { width: 18%; }

.takeUser .orderLine { display: flex; justify-content: flex-start; align-items:center; flex-flow:row nowrap; width:100%; padding:10px 10px; background: #fff; border-bottom:1px solid #cccccc; gap: 5px; text-align: center; }
.takeUser .orderLine h5 { font-size:12px; font-weight:400; color:#666666; width:100%; }
.takeUser .orderLine div:first-child { width:8%; }
.takeUser .orderLine div:nth-child(2) { width:24%; }
.takeUser .orderLine div:nth-child(3) { width:28%; }
.takeUser .orderLine div:nth-child(4) { display: flex; justify-content:center; align-items:center; flex-flow:row nowrap; width:23%; text-align: center; }
.takeUser .orderLine div:nth-child(4) .formControl { width:90%; }
.takeUser .orderLine div:last-child { width:18%; }
.takeUser .orderLine div:last-child a { width:100%; height:40px; 
/* margin:0 0 0 5%;  */
}

.takeUser .btnArea { display: flex; justify-content: center; align-items: center; width:100%; margin:19px 0 0; }
.takeUser .btnArea a { width:100%; height:60px; font-size:20px; font-weight: 700; }

.takeUserGuide { display: flex; justify-content: flex-start; align-items:center; flex-flow:row nowrap; width:100%; padding:0 0; margin:22px 0 0; background:#fff; }
.takeUserGuide .left { width:712px; padding:15px 19px 15px; }
.takeUserGuide .right { width:180px; padding:43px 8px 26px; } 
.takeUserGuide ul { display: flex; justify-content: flex-start; align-items:center; flex-flow:column nowrap; width:100%; padding:0 0 0 20px; margin:0; list-style: disc; }
.takeUserGuide ul li { width:100%; font-size:14px; font-weight:400; color:#333333; text-align: left; line-height: 24px; }
.takeUserGuide li::marker { font-size:14px; }
.takeUserGuide .right a { width:164px; cursor: pointer; }

/* ------------------------------------------------------------------------------------------------------------
    공지사항 & 자주묻는 질문
------------------------------------------------------------------------------------------------------------ */
.csPannel { display: flex; justify-content: center; align-items: center; width:100%; }
.mobileNotice { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width: 100%; min-height:calc(100vh - 200px); padding:0 0; margin:10px 0 0; }

.mobileNotice .center_tab { display: flex; justify-content: flex-start; align-items: center; flex-flow:row nowrap; width: 100%; margin:0 0; overflow: hidden; border:1px solid #dddddd; border-radius: 10px 10px 0 0; }
.mobileNotice .center_tab li { display: flex; justify-content: flex-start; align-items: center; width: 50%; height: 54px; background: #dddddd; }
.mobileNotice .center_tab li a { display: flex; justify-content:center; align-items: center; width:100%; height:100%; font-size: 18px; font-weight: 700; color:#8e8e8e; }
.mobileNotice .center_tab li a.on { color: #333333; background: #fff;  padding:0 0; text-align: center; }
.mobileNotice .center_tab li a.off { color: #8e8e8e; background:transparent; padding:0 0; margin-top:0; }

.mobileNotice .panel-group { width:100%; margin-bottom: 20px; }
.mobileNotice .panel-group .panel + .panel { margin-top:0px; }
.mobileNotice .panelHead { display: flex; justify-content:flex-start; align-items: center; width:100%; height:55px; }
.mobileNotice .panelHead h4 { width:60%; font-size:16px; font-weight:400; color:#333; text-align: center; }
.mobileNotice .panelHead h4:nth-child(2) { width:20%; }
.mobileNotice .panelHead h4:nth-child(3) { width:15%; }
.mobileNotice .panelHead h4:last-child { width:20%; }
.mobileNotice .panel { border:none; border-bottom: 1px solid #cccccc; }
.mobileNotice .noti_list { background:#fff; padding:0 5px; }
.mobileNotice .panel.fix .noti_list { background:#F0F8FD; padding:0 5px; }

.mobileNotice .noti_view {  padding: 15px; font-size:15px; font-weight:400; color:#666666; line-height: 160%; background: #fff; overflow: hidden; }

.mobileNotice .panel-title a { display: flex; justify-content:flex-start; align-items: center; width:100%; height:55px; }
.mobileNotice .panel-title a span { width:60%; font-size:15px; font-weight:400; color:#666666; text-align: left; } 
.mobileNotice .panel-title a span:nth-child(2) { width:20%; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 
.mobileNotice .panel-title a span:nth-child(3) { width:15%; } 
.mobileNotice .panel-title a span:last-child { width:20%; } 

.mobileFaq { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width: 100%; min-height:calc(100vh - 200px); padding:0 0; margin:10px 0 0; }
.mobileFaq .center_tab { display: flex; justify-content: flex-start; align-items: center; flex-flow:row nowrap; width: 100%; margin:0 0; overflow: hidden; border:1px solid #dddddd; border-radius: 10px 10px 0 0; }
.mobileFaq .center_tab li { display: flex; justify-content: flex-start; align-items: center; width: 50%; height: 54px; background: #dddddd; }
.mobileFaq .center_tab li a { display: flex; justify-content:center; align-items: center; width:100%; height:100%; font-size: 18px; font-weight: 700; color:#8e8e8e; }
.mobileFaq .center_tab li a.on { color: #333333; background: #fff;  padding:0 0; text-align: center; }
.mobileFaq .center_tab li a.off { color: #8e8e8e; background:transparent; padding:0 0; margin-top:0; }


.mobileFaq form { width:100%; }
.mobileFaq .searchZone { display: flex; justify-content: flex-start; align-items: center; flex-flow:row nowrap; width: 100%; padding:12px 4%; border-bottom:1px solid #dcdcdc; }
.mobileFaq .searchZone .btn { width:86px; height:40px; margin:0 0 0 9px; }

.mobileFaq .quickFilter { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow:row wrap; width:100%; padding:0 4%; margin:15px 0 0; }
.mobileFaq .quickFilter a { font-size: 13px; font-weight: 500; height:28px; color:#454f5b; margin:0 0 8px 3px; border-radius:10px; }
.mobileFaq .quickFilter .btn.btnfilter.on { color: #fff; background: var(--mainBlue); border-color: var(--mainBlue); }
.mobileFaq .quickFilter a:first-child { margin:0 0 8px 0; }

.mobileFaq .panel-group { width:100%; border:none; border-bottom:0px solid #cccccc; }
.mobileFaq .panel.panelBox { border:none; }
.mobileFaq .panel.panelBox .faq_list { padding:10px 0; }
.mobileFaq .panel.panelBox .faq_list .panel { display: flex; justify-content: flex-start; align-items: center; flex-flow:row wrap; padding:0 4%; margin:0; }
.mobileFaq .panel.panelBox .faq_list .panel .faq_list { display: flex; justify-content: flex-start; align-items: center; flex-flow:row nowrap; width:100%; height:50px; padding:0 0; border-bottom:1px solid #cccccc; }
.mobileFaq .panel.panelBox .faq_list .panel .faq_list .panel-title { width:100%; }
.mobileFaq .panel.panelBox .faq_list .panel .faq_list .panel-title a span.txthead { font-size:15px; font-weight:400; color:#666666; }

.mobileFaq .panel.panelBox .faq_list .panel .collapse.in { display: block; visibility: visible; width:100%; }

/* ------------------------------------------------------------------------------------------------------------
    myQna - 1:1친절상담
------------------------------------------------------------------------------------------------------------ */
.myQna { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width: 100%; min-height:calc(100vh - 200px); padding:0 4%; }
.myQna .detailBox { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; }
.myQna .detailBox .boxHeader { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: row nowrap; width:100%; margin:10px 0 0; }
.myQna .detailBox .boxHeader a:nth-child(2) { margin:0 0 0 auto; }
.myQna .detailBox .boxHeader a:last-child { margin:0 0 0 6px; }
.myQna .detailBox .boxHeader h4 { font-size:18px; font-weight: 700; color:#333333; }

.myQna .detailBox .boxBody { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; margin:16px 0 0; background:transparent; border-top:2px solid #111111; } 
.myQna .detailBox .boxBody a { width:100%; }
.myQna .detailBox .boxBody .formItem { display: flex; justify-content: flex-start; align-items: center; width:100%; border-bottom:1px solid #dddddd; }
.myQna .detailBox .boxBody .formItem h4 { color:#333333; }
.myQna .detailBox .boxBody .mainRed { color:#d80000; }
.myQna .detailBox .boxBody .mainBlue { color:#0038FF; }

.myQna .detailBox .titleLine { display: flex; justify-content: flex-start; align-items:center; flex-flow:row nowrap; width:100%; height:41px; background: #fafafa;}
.myQna .detailBox .titleLine h4 { font-size:14.5px; font-weight:700; color:#333333; text-align: center; }
.myQna .detailBox .titleLine div:first-child { width: 22%; }
.myQna .detailBox .titleLine div:nth-child(2) { width:43%; }
.myQna .detailBox .titleLine div:last-child { width: 35%; }

.myQna .panel-group { width:100%; border:none; border-bottom:0px solid #cccccc; margin-bottom: 10px;}
.myQna .panel.panelBox { border:none; margin-top: 10px;}
.myQna .panel.panelBox .faq_list { padding:0 0; }
.myQna .panel.panelBox .faq_list .panel { display: flex; justify-content: flex-start; align-items: center; flex-flow:row wrap; padding:0 0; margin:0; border:none; box-shadow: 0 0px 0px rgba(0, 0, 0, 0); }
.myQna .panel.panelBox .faq_list .panel .faq_list { display: flex; justify-content: flex-start; align-items: center; flex-flow:row nowrap; width:100%; height:auto; padding:0 0; border-bottom:1px solid #cccccc; }
.myQna .panel.panelBox .faq_list .panel .faq_list .panel-title { width:100%; }
.myQna .panel.panelBox .faq_list .panel .faq_list .panel-title a { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow:row nowrap; padding:0 0 10px; margin:0; gap: 10px;}
.myQna .panel.panelBox .faq_list .panel .faq_list .panel-title a span:first-child { width:22%; }
.myQna .panel.panelBox .faq_list .panel .faq_list .panel-title a span:nth-child(2) { width:43%; }
.myQna .panel.panelBox .faq_list .panel .faq_list .panel-title a span:last-child { width:35%; }
.myQna .panel.panelBox .faq_list .panel .faq_list .panel-title a span.txthead { font-size:13px; font-weight: 400; color:#666666; line-height: 1.3;}
.myQna .panel.panelBox .faq_list .panel .collapse.in { display: block; visibility: visible; width:100%; }
.myQna .panel.panelBox .faq_list .panel .noti_view { overflow: hidden; line-height: 140%; padding: 15px; box-sizing: border-box; background: #f4f4f4; font-size:13px; font-weight: 400; color:#666666; }

/* ------------------------------------------------------------------------------------------------------------
    Card Edit - 정기구매
------------------------------------------------------------------------------------------------------------ */
#paymentLayer .modalBody .payInputArea .agreeTitle .toggle-container { width: auto !important; }
#paymentLayer .modalBody .payInputArea .agreeTitle .label {border: none;}
#paymentLayer .modalBody .payInputArea .agreeTitle .ball { height: 19px !important; width: 19px !important; top: -3px !important;}
#paymentLayer .modalBody .payInputArea .checkGroup input[type="checkbox"] + label { width: 18px !important; height: 18px !important; }
#paymentLayer .modalBody .payInputArea .checkGroup input[type="checkbox"] + label::after { top: -2px !important; font-size: 16px !important; color: transparent !important;}
#paymentLayer .modalBody .payInputArea .checkGroup input[type="checkbox"]:hover + label::after { color: transparent !important; }
#paymentLayer .modalBody .payInputArea .checkGroup input[type="checkbox"]:checked + label::after { color: #fff !important; }
#paymentLayer .modalBody .payInputArea .contentTitle { padding: 5px 0 !important; }
#paymentLayer .modalBody .payInputArea .formItem { padding: 10px 0 15px !important; }
#paymentLayer .modalBody .payInputArea .formItem .formControl { font-size: 14px !important; }


/* ------------------------------------------------------------------------------------------------------------
    Card Setting  - 정기구매
------------------------------------------------------------------------------------------------------------ */
#cardSettingModal .modalBody { padding: 0 20px 20px !important; }
#cardSettingModal .modalBody .modalBtn { padding: 0 !important; justify-content: center !important;}