/* ------------------------------------------------------------------------------------------------------------ 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); } form { width:100%; max-width:100%; } 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; color:#333; /* width:2.0rem; height:2.0rem; */ } input:disabled { cursor: not-allowed; } .formGroup { margin:10px 0 0; } .formControl { width:100%; height:30px; font-size:14px; padding:3px 10px; background:#fff; border:1px solid #d0d0d0; } /* .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:calc(100% - 177px); margin:0; padding:10px 10px; background:#fff; color: #333; } .formItem input { margin:0; } .w100 { width:100px !important; } /* ------------------------------------------------------------------------------------------------------------ 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:100px; height:40px; 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); } .btnWrs:visited { 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); } .btnCancel { font-size:14px; font-weight: 500; color:#666; background:#fff; border-color:#dddddd; } .btnCancel:visited { font-size:14px; font-weight: 500; color:#666; background:#fff; border-color:#dddddd; } .btn.btnCancel:hover, .btn.btnCancel:focus { color:#666; background:#fff; border-color:#dddddd; font-size: 14px;font-weight: 500;font-family: auto;} .btn.btnCancel:active, .btn.btnCancel.active { color:#666; background:#fff; border-color:#dddddd; font-weight: 500;} .btnConfirm { font-size:14px; font-weight: 700; color:#fff; background:var(--mainRed); border-color:var(--mainRed); } .btnConfirm:visited { font-size:14px; font-weight: 700; color:#fff; background:var(--mainRed); border-color:var(--mainRed); } .btn.btnConfirm:hover, .btn.btnConfirm:focus { color:#fff; background:var(--mainRed); border-color:var(--mainRed); font-weight: 700; font-family: auto;} .btn.btnConfirm:active, .btn.btnConfirm.active { color:#fff; background:var(--mainRed); border-color:var(--mainRed);font-weight: 700; } .btnfilter { font-size:12px; font-weight: 400; color:#454f5b; background:#fff; border-color:#c4cdd5; } .btnfilter:visited { 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); } .btnSearch:visited { 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:13px; font-weight: 400; color:#cccccc; background:#eeeeee; border-color:#dddddd; } /* .btnPre:visited { 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; font-size: 13px;} .btn.btnPre:active, .btn.btnPre.active { color:#cccccc; background:#eeeeee; border-color:#dddddd; } .btnNext { font-size:13px; font-weight: 400; color:#111111; background:#fff; border-color:#dddddd; } /* .btnNext:visited { 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; font-size: 13px;} .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; } .btnModify:visited { 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"]: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:-5px; content:'✔'; width:14px; height:15px; font-size:16px; color:#333333; text-align:center; transition: all .75s; } .checkGroup input[type="checkbox"]:not(:checked) + label::after{ color: #dddddd; } .checkGroup input[type="checkbox"]:not(:checked) + label { border-color: #d9d9d9; } .checkGroup input[type="checkbox"]:hover + label::after{ color:#181818; } .checkGroup input[type="checkbox"]:checked + label { border-color:#181818; } .checkGroup input[type="checkbox"]:checked + label::after{ color:#181818; } .checkGroup input[type="checkbox"]:checked + label:hover::after{ color:#181818; } /* ------------------------------------------------------------------------------------------------------------ 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.6) !important; 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: 300; } .modalClose:hover, .modalClose:focus { text-decoration: none; cursor: pointer; } .modalBody { padding:1.5rem; } /* ------------------------------------------------------------------------------------------------------------ mypage - leftNav ------------------------------------------------------------------------------------------------------------ */ .myBody { display: flex; justify-content: center; align-items: flex-start; flex-flow: row nowrap; margin:0; padding:0; box-sizing: border-box; } .myBody * { box-sizing: border-box !important; } .myLeft { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:170px; padding:0 0; } .memberInfo { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; } .memberInfo .header { display: flex; justify-content: center; align-items: center; background: var(--mainRed); width:100%; padding:9px 0 10px; } .memberInfo .header h4 { font-size:15px; font-weight:350; color:#fff; } .memberInfo .header h4 span { font-weight:700; } .memberInfo .contentBody { display: flex; justify-content:flex-start; align-items: center; flex-flow:column nowrap; width:100%; height:auto; padding:10px 17px 7px 12px; background:#f7f7f7; border-bottom:3px solid #000000; } /* 수정 완료 */ .memberInfo .contentBody .contentItem { display: flex; justify-content:flex-start; align-items: center; flex-flow: row nowrap; width:100%; height:30px; } .memberInfo .contentBody .contentItem h5 { font-size:13px; font-weight: 700; text-align: right; color:#000; } .memberInfo .contentBody .contentItem label { width:50%; font-size:13px; font-weight: 700; text-align:left; } .memberInfo .contentBody .contentItem .contentInfo { width:50%; } .memberInfo .contentBody .contentItem .contentInfo h6 { font-size:13px; font-weight: 700; text-align: right; color: #9F5200; } .memberInfo .contentBody .contentItem .contentInfo h6 span { color: #666666; font-weight:350; margin:0 0 0 2px; } .myShoppingInfo { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; border:0.4px solid #d6d6d6; border-top:none; } .myShoppingInfo .header { display: flex; justify-content: flex-start; align-items: center; background: #f7f7f7; width:100%; padding:21px 0 13px 12px; } .myShoppingInfo .header h4 { font-size:15px; font-weight:700; color:#000; } .myShoppingInfo .contentBody { display: flex; justify-content:flex-start; align-items: center; flex-flow:column nowrap; width:100%; /* height:179px; */ height:auto; padding:0px 17px 18px 12px; background:#f7f7f7; } .myShoppingInfo .contentBody a { display: flex; justify-content:flex-start; align-items: center; flex-flow: row nowrap; width:100%; } .myShoppingInfo .contentBody .contentItem { display: flex; justify-content:flex-start; align-items: center; flex-flow: row nowrap; width:100%; height:23px; } .myShoppingInfo .contentBody .contentItem h5 { font-size:13px; font-weight: 400; text-align:left; color:#000; } .paymentControl { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; border:0.4px solid #d6d6d6; border-top:none; } .paymentControl .header { display: flex; justify-content: flex-start; align-items: center; background: #f7f7f7; width:100%; padding:21px 0 13px 12px; } .paymentControl .header h4 { font-size:15px; font-weight:700; color:#000; } .paymentControl .contentBody { display: flex; justify-content:flex-start; align-items: center; flex-flow:column nowrap; width:100%; height:auto; padding:0px 17px 18px 12px; background:#f7f7f7; } .paymentControl .contentBody a { display: flex; justify-content:flex-start; align-items: center; flex-flow: row nowrap; width:100%; } .paymentControl .contentBody .contentItem { display: flex; justify-content:flex-start; align-items: center; flex-flow: row nowrap; width:100%; height:23px; } .paymentControl .contentBody .contentItem h5 { font-size:13px; font-weight: 400; text-align:left; color:#000; } .myAction { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; border:0.4px solid #d6d6d6; border-top:none; } .myAction .header { display: flex; justify-content: flex-start; align-items: center; background: #f7f7f7; width:100%; padding:21px 0 13px 12px; } .myAction .header h4 { font-size:15px; font-weight:700; color:#000; } .myAction .contentBody { display: flex; justify-content:flex-start; align-items: center; flex-flow:column nowrap; width:100%; height:auto; padding:0px 17px 18px 12px; background:#f7f7f7; } .myAction .contentBody a { display: flex; justify-content:flex-start; align-items: center; flex-flow: row nowrap; width:100%; } .myAction .contentBody .contentItem { display: flex; justify-content:flex-start; align-items: center; flex-flow: row nowrap; width:100%; height:23px; } .myAction .contentBody .contentItem h5 { font-size:13px; font-weight: 400; text-align:left; color:#000; } .myInfo { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; border:0.4px solid #d6d6d6; border-top:none; } .myInfo .header { display: flex; justify-content: flex-start; align-items: center; background: #f7f7f7; width:100%; padding:21px 0 13px 12px; } .myInfo .header h4 { font-size:15px; font-weight:700; color:#000; } .myInfo .contentBody { display: flex; justify-content:flex-start; align-items: center; flex-flow:column nowrap; width:100%; height:auto; padding:0px 17px 18px 12px; background:#f7f7f7; } .myInfo .contentBody a { display: flex; justify-content:flex-start; align-items: center; flex-flow: row nowrap; width:100%; } .myInfo .contentBody .contentItem { display: flex; justify-content:flex-start; align-items: center; flex-flow: row nowrap; width:100%; height:23px; } .myInfo .contentBody .contentItem h5 { font-size:13px; font-weight: 400; text-align:left; color:#000; } .myRight { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:892px; padding:21px 0 0; margin:0 0 0 38px; } /* ------------------------------------------------------------------------------------------------------------ csCenter - leftNav ------------------------------------------------------------------------------------------------------------ */ .csCenter { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; } .csCenter .header { display: flex; justify-content: center; align-items: center; background: var(--mainBlue); width:100%; padding:9px 0 10px; } .csCenter .header h4 { font-size:15px; font-weight:350; color:#fff; } .csCenter .header h4 span { font-weight:700; } .quickServiceMenu { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; border:0.4px solid #d6d6d6; border-top:none; border-bottom:3px solid #000000; } .quickServiceMenu .header { display: flex; justify-content: flex-start; align-items: center; background: #f7f7f7; width:100%; padding:21px 0 13px 12px; } .quickServiceMenu .header h4 { font-size:15px; font-weight:700; color:#000; } .quickServiceMenu .contentBody { display: flex; justify-content:flex-start; align-items: center; flex-flow:column nowrap; width:100%; height:87px; padding:0px 17px 18px 12px; background:#f7f7f7; } .quickServiceMenu .contentBody a { display: flex; justify-content:flex-start; align-items: center; flex-flow: row nowrap; width:100%; } .quickServiceMenu .contentBody .contentItem { display: flex; justify-content:flex-start; align-items: center; flex-flow: row nowrap; width:100%; height:23px; } .quickServiceMenu .contentBody .contentItem h5 { font-size:13px; font-weight: 400; text-align:left; color:#000; } .faqList { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; border:0.4px solid #d6d6d6; border-top:none; } .faqList .header { display: flex; justify-content: flex-start; align-items: center; background: #f7f7f7; width:100%; padding:21px 0 13px 12px; } .faqList .header h4 { font-size:15px; font-weight:700; color:#000; } .faqList .contentBody { display: flex; justify-content:flex-start; align-items: center; flex-flow:column nowrap; width:100%; height:auto; padding:0px 17px 18px 12px; background:#f7f7f7; } .faqList .contentBody a { display: flex; justify-content:flex-start; align-items: center; flex-flow: row nowrap; width:100%; } .faqList .contentBody .contentItem { display: flex; justify-content:flex-start; align-items: center; flex-flow: row nowrap; width:100%; height:23px; } .faqList .contentBody .contentItem h5 { font-size:13px; font-weight: 400; text-align:left; color:#000; } .customerCenter { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; border:0.4px solid #d6d6d6; border-top:none; } .customerCenter .header { display: flex; justify-content: flex-start; align-items: center; background: #f7f7f7; width:100%; padding:21px 0 13px 12px; } .customerCenter .header h4 { font-size:15px; font-weight:700; color:#000; } .customerCenter .contentBody { display: flex; justify-content:flex-start; align-items: center; flex-flow:column nowrap; width:100%; height:110px; padding:0px 17px 18px 12px; background:#f7f7f7; } .customerCenter .contentBody a { display: flex; justify-content:flex-start; align-items: center; flex-flow: row nowrap; width:100%; } .customerCenter .contentBody .contentItem { display: flex; justify-content:flex-start; align-items: center; flex-flow: row nowrap; width:100%; height:23px; } .customerCenter .contentBody .contentItem h5 { font-size:13px; font-weight: 400; text-align:left; color:#000; } .customerCenterInfo { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; border:0.4px solid #d6d6d6; border-top:none; } .customerCenterInfo .header { display: flex; justify-content: flex-start; align-items: center; background: #f7f7f7; width:100%; padding:21px 0 13px 12px; } .customerCenterInfo .header h4 { font-size:24px; font-weight:700; color:var(--mainRed); text-align: left; } .customerCenterInfo .header h4 span { font-size:15px; } .customerCenterInfo .contentBody { display: flex; justify-content:flex-start; align-items: center; flex-flow:column nowrap; width:100%; height:110px; padding:0px 17px 18px 12px; background:#f7f7f7; } .customerCenterInfo .contentBody a { display: flex; justify-content:flex-start; align-items: center; flex-flow: row nowrap; width:100%; } .customerCenterInfo .contentBody .contentItem { display: flex; justify-content:flex-start; align-items: center; flex-flow: row nowrap; width:100%; height:23px; } .customerCenterInfo .contentBody .contentItem h5 { font-size:11.5px; font-weight: 500; text-align:left; color:#000; } .customerCenterInfo .contentBody .contentItem h6 { font-size:11.5px; font-weight: 500; text-align:left; color:#000; margin:0 0 0 auto; } /* ------------------------------------------------------------------------------------------------------------ mypage - 회원정보수정 ------------------------------------------------------------------------------------------------------------ */ .infoEdit { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; } .infoEdit .menuTitle { height:28px; } .infoEdit .menuTitle h3 { font-size: 20px; font-weight:700; } .infoEdit .contentTitle { display: flex; justify-content:flex-start; align-items: center; width:100%; height:20px; margin:29px 0 0; } .infoEdit .contentTitle h4 { font-weight:700; } .infoEdit .contentTitle h4 span { font-weight:400; } .infoEdit .contentTitle .right { margin:0 0 0 auto; } .infoEdit .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; } .infoEdit .formItem { display: flex; justify-content: flex-start; align-items: center; width:100%; border-bottom:1px solid #dddddd; } .infoEdit .formItem:first-child .formControl { border:none; background:#fff; } .infoEdit .formItem.pwSetting .formGroup { justify-content: flex-start; align-items: flex-start; flex-flow:column nowrap; } .infoEdit .formItem .formGroup .pwChange { display: flex; justify-content: flex-start; align-items: center; width:100%; } .infoEdit .formItem .formGroup .pwChange .formControl { width:180px; } .infoEdit .formItem .formGroup .pwChange a { margin:0 0 0 10px; } .infoEdit .formItem .formGroup .pwChange a.changeStart { display: flex; justify-content: center; align-items: center; } .infoEdit .formItem .formGroup .pwChange a.changeCancel { display: none; justify-content: center; align-items: center; } .infoEdit .formItem .formGroup .pwSet { display: none; justify-content: flex-start; align-items: center; flex-flow:row wrap; width:100%; margin:10px 0 0; } .infoEdit .formItem .formGroup .pwSet h4 { font-size:16px; color:var(--mainBlack); width:140px; text-align: left; } .infoEdit .formItem .formGroup .pwSet .formControl { width:calc(100% - 140px); max-width:180px; } .infoEdit .formItem .formGroup .pwSet01 { display: flex; justify-content: flex-start; align-items: center; width:100%; } .infoEdit .formItem .formGroup .pwSet01 span { font-size:16px; font-weight: 400; color:#333333; margin:0 0 0 8px; } .infoEdit .formItem .formGroup .pwSet02 { display: flex; justify-content: flex-start; align-items: center; width:100%; margin:10px 0 0; } .infoEdit .formItem.hpSetting .formGroup { justify-content: flex-start; align-items: flex-start; flex-flow:column nowrap; } .infoEdit .formItem.hpSetting select.formControl { width:80px; margin:0 0; } .infoEdit .formItem.hpSetting .formControl { width:126px; margin:0 0 0 8px; } .infoEdit .formItem.hpSetting .formControl:first-child { margin:0 0; } .infoEdit .formItem.hpSetting a { margin:0 0 0 8px; } .infoEdit .formItem.hpSetting .hpChange { display: flex; justify-content: flex-start; align-items: center; width:100%; } .infoEdit .formItem.hpSetting .noticeArea { display: flex; justify-content: flex-start; align-items: center; width:100%; margin:10px 0 0; } .infoEdit .formItem.hpSetting .notice { display: flex; justify-content: flex-start; align-items: center; width:32%; }/* 수정 완료 */ .infoEdit .formItem.hpSetting .notice h5 { font-size:14px; } .infoEdit .formItem.hpSetting .selectArea { display: flex; justify-content: flex-start; align-items: center; width:50%; gap: 20px; margin-left: 20px;} .infoEdit .formItem:nth-child(3) .formControl { width:80px; } /* 수정 완료 */ .infoEdit .formItem:nth-child(5) .formControl { width:180px; } .infoEdit .formItem.birthYmd .formGroup { justify-content: flex-start; align-items: flex-start; flex-flow:column nowrap; } .infoEdit .formItem.birthYmd .formControl { border:none; background:#fff; max-width:180px; } .infoEdit .formItem.birthYmd .noticeArea { display: flex; justify-content: flex-start; align-items: center; width:100%; margin:0 0; } .infoEdit .formItem.birthYmd .notice { display: flex; justify-content: flex-start; align-items: center; width:50%; } .infoEdit .formItem.birthYmd .selectArea { display: flex; justify-content: flex-start; align-items: center; width:50%; } .infoEdit .formItem.tel select.formControl { width:80px; margin:0 0; } /* 수정 완료 */ .infoEdit .formItem.tel .formControl { width:80px; margin:0 0 0 8px; } /* 수정 완료 */ .infoEdit .formItem.emailSetting .formGroup { justify-content: flex-start; align-items: flex-start; flex-flow:column nowrap; } .infoEdit .formItem.emailSetting .formControl { max-width:180px; } .infoEdit .formItem.emailSetting .emailReg { display: flex; justify-content: flex-start; align-items: center; width:100%; } .infoEdit .formItem.emailSetting .emailReg .btnSm { width:82px; height:30px; padding:0 15px; font-size:14px; } .infoEdit .formItem.emailSetting .emailReg .specialCharacters { padding:0 10px; } .infoEdit .formItem.emailSetting .emailReg select.formControl { width:178px; margin:0 8px 0; } .infoEdit .formItem.emailSetting .noticeArea { display: flex; justify-content: flex-start; align-items: center; width:100%; margin:10px 0 0; } .infoEdit .formItem.emailSetting .notice { display: flex; justify-content: flex-start; align-items: center; /* width:50%; */ gap: 20px;} .infoEdit .formItem.emailSetting .notice h5 { font-size:14px; } .infoEdit .formItem.emailSetting .selectArea { display: flex; justify-content: flex-start; align-items: center; width:50%; gap: 20px; margin-left: 20px;} .infoEdit .formItem.address .formGroup { justify-content: flex-start; align-items: flex-start; flex-flow:column nowrap; } .infoEdit .formItem.address .formControl { max-width:87px; margin:0 8px 0 0; } .infoEdit .formItem.address .addReg { display: flex; justify-content: flex-start; align-items: center; width:100%; } .infoEdit .formItem.address .addReg .btnSm { width:82px; height:30px; padding:0 15px; font-size:14px; } .infoEdit .formItem.address .formControl:nth-child(2) { max-width:582px; margin:10px 0 12px; } .infoEdit .formItem.address .formControl:nth-child(3) { max-width:582px; } .infoEdit .formItem.wedding .formGroup { justify-content: flex-start; align-items: flex-start; flex-flow:row nowrap; } .infoEdit .formItem.wedding .formControl { border:none; background:#fff; } .infoEdit .formItem.wedding .selectArea { display: flex; justify-content: flex-start; align-items: center; width:135px; height:30px; } .infoEdit .formItem.wedding .weddingYmd { display: flex; justify-content: flex-start; align-items: center; flex-flow: row nowrap; width:300px; margin:0 0; } .infoEdit .formItem.wedding .weddingYmd h5 { font-size:14px; color:#333; margin:0 4px 0 8px; } .infoEdit .formItem.wedding .weddingYmd h5 sup { font-size:14px; color:#333; } .infoEdit .formItem.wedding .weddingYmd h4 { margin:0 4px 0 8px; } .infoEdit .formItem.wedding .weddingYmd .formControl { border: 1px solid #d0d0d0; } .infoEdit .formItem.wedding .weddingYmd .formControl.wedY { max-width:66px; } .infoEdit .formItem.wedding .weddingYmd .formControl.wedM { max-width:36px; } .infoEdit .formItem.wedding .weddingYmd .formControl.wedD { max-width:36px; } .infoEdit .formItem.memo textarea { width:582px; min-width:582px; max-width:582px; height:70px; min-height:70px; max-height:70px; } .infoEdit .btnArea { display: flex; justify-content: center; align-items: center; width:100%; margin:35px 0 40px; } .infoEdit .btnArea .btnConfirm { margin:0 0 0 10px; } /* 수정 완료*/ .infoEdit .btnArea .btnCancel:hover { font-size:14px; } .infoEdit .btnArea .btnConfirm:hover { font-size:14px; color:#fff; } .infoEdit .btnArea .btnCancel {color: #666; font-weight: 500;} /* ------------------------------------------------------------------------------------------------------------ mypage - 회원탈퇴 ------------------------------------------------------------------------------------------------------------ */ .secession { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; } .secession .menuTitle { height:28px; } .secession .menuTitle h3 { font-size: 20px; font-weight:700; } .secession .contentTitle { display: flex; justify-content:flex-start; align-items: flex-start; flex-flow:column nowrap; width:100%; height:auto; margin:0 0 0; } /* 수정 완료 */ .secession .contentTitle h4 { font-weight:700; } .secession .contentTitle h4 span { color:#d21c42; } .secession .contentTitle .bottom { margin:17px 0 0; } .secession .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; } .secession .contentTitle .bottomBox01 { display: flex; justify-content:flex-start; align-items: flex-start; width:100%; } .secession .contentTitle .bottomBox02 { display: flex; justify-content:flex-start; align-items: flex-start; width:100%; } .secession .contentTitle .bottomBox .label { width:177px; padding:10px 10px; background:#fafafa; } .secession .contentTitle .bottomBox .content { width:calc(100% - 177px); padding:10px 10px 9px; } .secession .contentTitle .bottomBox .content span { color:var(--mainRed); } .secession .contentTitle01 { display: flex; justify-content:flex-start; align-items: flex-start; flex-flow:column nowrap; width:100%; height:auto; margin:36px 0 0; } .secession .contentTitle01 h4 { font-weight:400; } .secession .contentTitle01 h4 span { color:#d21c42; } .secession .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; } .secession .contentTitle01 .bottomBox .checkGroup { display: flex; justify-content:flex-start; align-items: center; width:100%; height:44px; padding:10px 10px; border-bottom:1px solid #dddddd; } .secession .contentTitle01 .bottomBox .checkGroup h4 { margin:0 0 0 12px; } .secession .checkGroup input[type="checkbox"]{ display:none; } .secession .checkGroup input[type="checkbox"] + label{ position:relative; display:inline-block; width:20px; height:20px; border:2px solid #d9d9d9; transition: all .75s; } .secession .checkGroup input[type="checkbox"] + label::after{ position:absolute; left:-1px; top:-5px; content:'✔'; width:20px; height:20px; font-size:16px; color:#333333; text-align:center; transition: all .75s; } .secession .checkGroup input[type="checkbox"]:not(:checked) + label::after{ color: transparent; } .secession .checkGroup input[type="checkbox"]:not(:checked) + label { border-color: #000; } .secession .checkGroup input[type="checkbox"]:hover + label{ position:relative; display:inline-block; width:20px; height:20px; background:var(--mainRed); } .secession .checkGroup input[type="checkbox"]:hover + label::after{ color:#ffffff; } .secession .checkGroup input[type="checkbox"]:checked + label { background:var(--mainRed); border-color: #181818; } .secession .checkGroup input[type="checkbox"]:checked + label::after{ color:#fff; } .secession .checkGroup input[type="checkbox"]:checked + label:hover::after{ color:#fff; } .secession .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; } .secession .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; } .secession .contentTitle02 { display: flex; justify-content:flex-start; align-items: flex-start; flex-flow:column nowrap; width:100%; height:96px; margin:15px 0 0; padding:11px 16px; background: #f9f9f9; } .secession .contentTitle02 h4 { font-size:16px; font-weight: 700;color:#d21c42; line-height: 24px; text-align: left; } .secession .contentTitle02 h4 span { font-size:13px; font-weight: 400; } .secession .btnArea { display: flex; justify-content: center; align-items: center; width:100%; margin:35px 0 0; } .secession .btnArea .btnConfirm { margin:0 0 0 10px; } /* 수정 완료*/ .secession .btnArea .btnCancel:hover { font-size:14px; } .secession .btnArea .btnConfirm:hover { font-size:14px; color:#fff; } .secession .btnArea .btnCancel {color: #666; font-weight: 500;} /* ------------------------------------------------------------------------------------------------------------ orderList - 주문/배송내역 ------------------------------------------------------------------------------------------------------------ */ .orderList { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; } .orderList .menuTitle { height:28px; } .orderList .menuTitle h3 { font-size: 20px; font-weight:700; } .filterBox { display: flex; justify-content: flex-start; align-items: flex-start; width:100%; flex-flow:column nowrap; border:1px solid #dcdcdc; padding:14px 14px; margin:20px 0 0; } .quickFilter { display: flex; justify-content: flex-start; align-items: flex-start; width:100%; } .quickFilter a { height:26px; margin:0 0 0 4px; border-radius:13px; } .quickFilter a:first-child { margin:0 0; } .methodFilter { display: flex; justify-content: flex-start; align-items: flex-start; width:100%; margin:12px 0; } .methodFilter .radioGroup { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: row nowrap; width:100%; } .methodFilter .radioGroup label { margin:0 0 0 10px; } .methodFilter .radioGroup label:nth-child(2) { margin:0 0 0 0; } .termFilter { display: flex; justify-content: flex-start; align-items: center; width:100%; } .termFilter .startDay { position: relative; width:108px; } .termFilter .startDay .formControl { width:100%; font-size:13px; margin:0 0; } .termFilter .endDay { position: relative; width:108px; } .termFilter .endDay .formControl { width:100%; font-size:13px; margin:0 0; } .termFilter .formControl { width:446px; font-size:13px; margin:0 0 0 6px; } .termFilter img { position:absolute; top:5px; right:6px; } .termFilter h4 { margin:0 10px; } .termFilter a { width:57px; margin:0 0 0 6px; } .dateBox { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; padding:30px 24px; margin:29px 0 0; border:1px solid #dcdcdc; border-radius: 12px; box-shadow: 0 0 1px 0 #00000029, 0 2px 4px 0 #00000014; } .dateBox .dateTitle h3 { font-size:20px; font-weight: 700; } .dateBox .productBox { display: flex; justify-content: flex-start; align-items: center; flex-flow:row nowrap; width:100%; margin:25px 0 0; border:1px solid #eeeeee; border-radius:8px; } .dateBox .productBox .left { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width: calc(100% - 203px); height:auto; min-height:154px; padding:10px 20px 26px; border-right:1px solid #eeeeee; } .dateBox .productBox .left .top { display: flex; justify-content: flex-start; align-items:center; flex-flow:row nowrap; width:100%; } .dateBox .productBox .left .top h3 { font-size:20px ; font-weight:700; margin:0 24px 0 0; } .dateBox .productBox .left .top h5 { font-size:16px ; font-weight:350; color:#666; margin:0 20px 0 0; } .dateBox .productBox .left .top h5:last-child { margin:0; } .dateBox .productBox .left .bottom { display: flex; justify-content: flex-start; align-items:flex-start; flex-flow:row nowrap; width:100%; padding:25px 0 5px; margin:20px 0 0; border-top:1px solid #dbdbdb; } .dateBox .productBox .left .bottom:first-child { border:none; } .dateBox .productBox .left .bottom img { width:64px; height:68px; margin:0 16px 0 0; } .dateBox .productBox .left .bottom .productExplain { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:calc(100% - 64px); } .dateBox .productBox .left .bottom .productExplain h4 { width:100%; color:#111111; font-size: 16px; font-weight: 400; text-align: left; margin:0 0 10px; } .dateBox .productBox .left .bottom .productExplain h4 span { width:100%; color:#555555; } .dateBox .productBox .left .bottom .productExplain h4:last-child { margin:0 0 0; } .dateBox .productBox .right { display: flex; justify-content: center; align-items: center; flex-flow: column nowrap; width:203px; height:100%; padding:10px 20px; } .orderList .btnArea { display: flex; justify-content:center; align-items:center; flex-flow:row nowrap; width:100%; margin:28px 0 0; } .orderList .btnArea a:last-child { margin:0 0 0 10px; } .orderList .btnArea a.btnPre:visited {color: #ccc; font-size: 13px;} .orderList .btnArea a.btnNext:visited {color: #111; font-size: 13px;} /* ------------------------------------------------------------------------------------------------------------ orderDetail - 주문상세보기 ------------------------------------------------------------------------------------------------------------ */ .orderDetail { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; } .orderDetail .menuTitle { height:28px; } .orderDetail .menuTitle h3 { font-size: 20px; font-weight:700; } .guideBox { display: flex; justify-content:center; align-items:center; width:100%; height:130px; flex-flow:row nowrap; border:1px solid #dcdcdc; padding:14px 14px; margin:20px 0 0; } .guideBox h3 { font-size:18px; font-weight: 400; color:#666666; } .guideBox h3 span { color:#0000ff; } .detailBox { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; } .detailBox .boxHeader { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; margin:40px 0 0; } .detailBox .boxHeader h4 { font-size:16px; font-weight: 700; color:#333333; } .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; } .detailBox .boxBody .formItem { display: flex; justify-content: flex-start; align-items: center; width:100%; border-bottom:1px solid #dddddd; } .detailBox .boxBody .formItem h4 { color:#333333; } .detailBox .boxBody .mainRed { color:#d80000; } .detailBox .boxBody .mainBlue { color:#0038FF; } .detailBox .boxBody .orderFunction a { width:108px; margin:0 0 0 20px; } .detailBox .boxBody .orderFunction a:last-child { width:108px; margin:0 0 0 10px; } .detailBox .titleLine { display: flex; justify-content: flex-start; align-items:center; flex-flow:row nowrap; width:100%; height:41px; } .detailBox .titleLine h4 { font-weight: 400; color:#333333; } .detailBox .titleLine div:first-child { width: 100px; } .detailBox .titleLine div:nth-child(2) { width:312px; } .detailBox .titleLine div:nth-child(3) { width: 80px; } .detailBox .titleLine div:nth-child(4) { width: 80px; } .detailBox .titleLine div:nth-child(5) { width: 90px; } .detailBox .titleLine div:nth-child(6) { width: 60px; } .detailBox .titleLine div:nth-child(7) { width: 90px; } .detailBox .titleLine div:last-child { width: 80px; } .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; } .detailBox .orderLine h5 { font-size:13px; font-weight: 350; color:#666666; width:100%; } .detailBox .orderLine div:first-child { width: 100px; } .detailBox .orderLine div:nth-child(2) { width:312px; } .detailBox .orderLine .pThum { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: row nowrap; padding:0 0 0 20px; } .detailBox .orderLine .pThum .pthumnail { width:72px; } .detailBox .orderLine .pThum .pscript { display: flex; justify-content: flex-start; align-items:flex-start; flex-flow:column nowrap; width:200px; margin:0 0 0 20px; text-align: left; } .detailBox .orderLine .pThum .pscript h6 { font-size:11px; font-weight:350px; color:#808080; width:100%; } .detailBox .orderLine div:nth-child(3) { width: 80px; } .detailBox .orderLine div:nth-child(4) { width: 80px; } .detailBox .orderLine div:nth-child(5) { width: 90px; } .detailBox .orderLine div:nth-child(6) { width: 60px; } .detailBox .orderLine div:nth-child(7) { width: 90px; } .detailBox .orderLine div:last-child { width: 80px; } .detailBox .sellerInfo { 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; } .detailBox .sellerInfo h5 { font-size:13px; font-weight:400; color:#333; } .detailBox.deliveryInfo .formControl { width:226px; } .detailBox.deliveryInfo .formItem.hpSetting .formGroup { justify-content: flex-start; align-items: flex-start; flex-flow:column nowrap; } .detailBox.deliveryInfo .formItem.hpSetting .formControl { width:69px; margin:0 0 0 8px; } .detailBox.deliveryInfo .formItem.hpSetting .formControl:first-child { margin:0 0; } .detailBox.deliveryInfo .formItem.tel select.formControl { width:69px; margin:0 0; } .detailBox.deliveryInfo .formItem.tel .formControl { width:69px; margin:0 0 0 9.5px; } .detailBox.deliveryInfo .formItem.emailSetting .formGroup { justify-content: flex-start; align-items: flex-start; flex-flow:column nowrap; } .detailBox.deliveryInfo .formItem.emailSetting .formControl { max-width:226px; } .detailBox.deliveryInfo .formItem.emailSetting .emailReg { display: flex; justify-content: flex-start; align-items: center; width:100%; } .detailBox.deliveryInfo .formItem.emailSetting .emailReg .btnSm { width:82px; height:30px; padding:0 15px; font-size:14px; } .detailBox.deliveryInfo .formItem.address .formGroup { justify-content: flex-start; align-items: flex-start; flex-flow:column nowrap; } .detailBox.deliveryInfo .formItem.address .formControl { width:100%; } .detailBox.deliveryInfo .formItem.address .addReg { display: flex; justify-content: flex-start; align-items: center; width:100%; } .detailBox.deliveryInfo .formItem.address .addReg .formControl { max-width:136px; margin:0 8px 0 0; } .detailBox.deliveryInfo .formItem.address .addReg .btnSm { width:82px; height:30px; padding:0 15px; font-size:14px; } .detailBox.deliveryInfo .formItem.address .formControl:nth-child(2) { margin:10px 0 12px; } .orderDetail .btnArea { display: flex; justify-content: center; align-items: center; width:100%; margin:35px 0 40px; } .orderDetail .btnArea a { width:101px; font-size:14px; font-weight: 500; color: #666;} .orderDetail .btnArea a:nth-child(2) { margin:0 10px; } /* 수정 완료*/ .orderDetail .btnArea a.btnConfirm { color:#fff; } .orderDetail .btnArea a.btnConfirm:hover { color:#fff; } /* ------------------------------------------------------------------------------------------------------------ cancelModal - 주문취소 레이어 ------------------------------------------------------------------------------------------------------------ */ #cancelModal .modalContent { width:849px; height:auto; } #cancelModal .modalBody { padding:38px; } #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:20px; 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:16px 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%; } #cancelModal .detailBox .boxBody .formItem h4 { color:#333333; } #cancelModal .detailBox .boxBody .formItem h4:first-child { width: 80%; } #cancelModal .detailBox .boxBody .formItem .formGroupWrap { display: flex; flex-direction: column;width: calc(100% - 177px); background: #fff; padding: 7px 10px;} #cancelModal .detailBox .boxBody .formItem .formGroupWrap .formGroup { justify-content: space-between; gap: 5px; padding: 5px 0; width: 100%; height: auto;} #cancelModal .detailBox .boxBody .formItem .formGroup { padding:7px 10px; height:43px; } /* #cancelModal .detailBox .boxBody .formItem:last-child { height:93px; } */ #cancelModal .detailBox .boxBody .formItem:last-child .formGroup { height:91px; } #cancelModal .formItem.emailInfo .formControl { width:290px; } #cancelModal .detailBox .boxBody .formItem.hpInfo .formGroup { display: flex; justify-content: center; align-items: flex-start; flex-flow:column nowrap; } #cancelModal .formItem.hpInfo select.formControl { width:290px; margin:0 0; } #cancelModal .formItem.hpInfo .formControl { width:100px; margin:0 0 0 10px; } #cancelModal .formItem.hpInfo .formControl:first-child { width:68px; margin:0 0; } #cancelModal .formItem.hpInfo a { margin:0 0 0 8px; } #cancelModal .formItem.bankInfo .formGroup { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow:column nowrap; } #cancelModal .formItem.bankInfo select.formControl { width:290px; 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:223px; 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 textarea { width:100%; min-width:100%; min-height: 73px; max-height: 73px; } #cancelModal .btnArea { display: flex; justify-content: center; align-items: center; width:100%; margin:19px 0 0; } #cancelModal .btnArea a { width:101px; font-size:14px; } #cancelModal .btnArea a:nth-child(2) { margin:0 0 0 10px; } /* 수정 완료 */ /* ------------------------------------------------------------------------------------------------------------ refundModal - 교환환불 레이어 ------------------------------------------------------------------------------------------------------------ */ #refundModal .modalContent { width:849px; height:auto; } #refundModal .modalBody { padding:38px; } #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:20px; 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:16px 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%; } #refundModal .detailBox .boxBody .formItem h4 { color:#333333; } #refundModal .detailBox .boxBody .formItem .formGroup { padding:7px 10px; } #refundModal .formItem.emailInfo .formControl { width:290px; } #refundModal .formItem.hpInfo .formGroup { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow:column nowrap; } #refundModal .formItem.hpInfo select.formControl { width:290px; margin:0 0; } #refundModal .formItem.hpInfo .formControl { width:126px; margin:0 0 0 8px; } #refundModal .formItem.hpInfo .formControl:first-child { margin:0 0; } #refundModal .formItem.hpInfo a { margin:0 0 0 8px; } #refundModal .formItem.bankInfo .formGroup { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow:column nowrap; } #refundModal .formItem.bankInfo select.formControl { width:290px; 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:223px; 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 textarea { width:100%; min-width:100%; min-height: 73px; max-height: 73px; } #refundModal .btnArea { display: flex; justify-content: center; align-items: center; width:100%; margin:19px 0 0; } #refundModal .btnArea a { width:101px; font-size:14px; } #refundModal .btnArea a:nth-child(2) { margin:0 0 0 10px; } /* 수정 완료*/ /* ------------------------------------------------------------------------------------------------------------ cmoney & coupon & wishlist Common ------------------------------------------------------------------------------------------------------------ */ .ccw { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; } .ccw .menuTitle { height:28px; } .ccw .menuTitle h3 { font-size: 20px; font-weight:700; width:100%; } .ccw .guideBox { display: flex; justify-content:center; align-items:center; width:100%; height:130px; flex-flow:row nowrap; border:1px solid #dcdcdc; padding:14px 14px; margin:20px 0 0; } .ccw .guideBox h3 { font-size:18px; font-weight: 350; color:#666666; } .ccw .guideBox h3 span { font-weight: 700; color:var(--mainRed); } .ccw .detailBox { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; } .ccw .detailBox .boxHeader { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; margin:40px 0 0; } .ccw .detailBox .boxHeader h4 { font-size:16px; font-weight: 700; color:#333333; } .ccw .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; } .ccw .detailBox .boxBody .formItem { display: flex; justify-content: flex-start; align-items: center; width:100%; border-bottom:1px solid #dddddd; } .ccw .detailBox .boxBody .formItem h4 { color:#333333; } .ccw .detailBox .boxBody .mainRed { color:#d80000; } .ccw .detailBox .boxBody .mainBlue { color:#0038FF; } .ccw.savings .detailBox .titleLine { display: flex; justify-content: flex-start; align-items:center; flex-flow:row nowrap; width:100%; height:41px; } .ccw.savings .detailBox .titleLine h4 { font-weight: 400; color:#333333; } .ccw.savings .detailBox .titleLine div:first-child { width: 158px; } .ccw.savings .detailBox .titleLine div:nth-child(2) { width:470px; } .ccw.savings .detailBox .titleLine div:nth-child(3) { width: 88px; } .ccw.savings .detailBox .titleLine div:nth-child(4) { width: 88px; } .ccw.savings .detailBox .titleLine div:last-child { width: 88px; } .ccw.savings .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; } .ccw.savings .detailBox .orderLine h5 { font-size:13px; font-weight: 350; color:#666666; width:100%; } .ccw.savings .detailBox .orderLine div:first-child { width: 158px; } .ccw.savings .detailBox .orderLine div:nth-child(2) { width:470px; text-align:left; } .ccw.savings .detailBox .orderLine div:nth-child(3) { width: 88px; } .ccw.savings .detailBox .orderLine div:nth-child(4) { width: 88px; } .ccw.savings .detailBox .orderLine div:last-child { width: 88px; } .ccw.coupon .detailBox .titleLine { display: flex; justify-content: flex-start; align-items:center; flex-flow:row nowrap; width:100%; height:41px; } .ccw.coupon .detailBox .titleLine h4 { font-weight: 400; color:#333333; } .ccw.coupon .detailBox .titleLine div:first-child { width: 110px; } .ccw.coupon .detailBox .titleLine div:nth-child(2) { width:80px; } .ccw.coupon .detailBox .titleLine div:nth-child(3) { width: 332px; } .ccw.coupon .detailBox .titleLine div:nth-child(4) { width: 80px; } .ccw.coupon .detailBox .titleLine div:nth-child(5) { width: 100px; } .ccw.coupon .detailBox .titleLine div:nth-child(6) { width: 110px; } .ccw.coupon .detailBox .titleLine div:last-child { width: 80px; } .ccw.coupon .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; } .ccw.coupon .detailBox .orderLine h5 { font-size:16px; font-weight: 350; color:#666666; width:100%; } .ccw.coupon .detailBox .orderLine div:first-child { width: 110px; } .ccw.coupon .detailBox .orderLine div:nth-child(2) { width:80px; } .ccw.coupon .detailBox .orderLine div:nth-child(3) { width: 332px; text-align:left; } .ccw.coupon .detailBox .orderLine div:nth-child(4) { width: 80px; } .ccw.coupon .detailBox .orderLine div:nth-child(5) { width: 100px; } .ccw.coupon .detailBox .orderLine div:nth-child(6) { width: 110px; } .ccw.coupon .detailBox .orderLine div:last-child { width: 80px; } .ccw.coupon .couponGuide { width:100%; padding:19px 19px; margin:53px 0 0; background:#f9f9f9; } .ccw.coupon .couponGuide ul { display: flex; justify-content: flex-start; align-items:center; flex-flow:column nowrap; width:100%; padding:0 0 0 20px; margin:0; } .ccw.coupon .couponGuide ul li { width:100%; font-size:14px; font-weight:400; color:#303030; text-align: left; line-height: 24px; } .ccw.coupon .couponGuide li::marker { font-size:3px; } .ccw.wishlist .detailBox .boxHeader { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: row nowrap; width:100%; margin:40px 0 0; } .ccw.wishlist .detailBox .boxHeader a { width:100px; font-size:14px; font-weight: 500; } .ccw.wishlist .detailBox .boxHeader a:first-child { width:150px; } .ccw.wishlist .detailBox .boxHeader a:nth-child(2) { margin:0 0 0 auto; } .ccw.wishlist .detailBox .boxHeader a:last-child { margin:0 0 0 8px; } .ccw.wishlist .detailBox .boxHeader a:last-child:hover { color:#fff; } .ccw.wishlist .detailBox .boxBody { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; margin:11px 0 0; background:#fafafa; border-top:2px solid #111111; } .ccw.wishlist .checkGroup input[type="checkbox"]{ display:none; } .ccw.wishlist .checkGroup input[type="checkbox"] + label{ position:relative; display:inline-block; width:20px; height:20px; border:2px solid #d9d9d9; transition: all .75s; } .ccw.wishlist .checkGroup input[type="checkbox"] + label::after{ position:absolute; left:-1px; top:-5px; content:'✔'; width:20px; height:20px; font-size:16px; color:#333333; text-align:center; transition: all .75s; } .ccw.wishlist .checkGroup input[type="checkbox"]:not(:checked) + label::after{ color: transparent; } .ccw.wishlist .checkGroup input[type="checkbox"]:not(:checked) + label { border-color: #000; } .ccw.wishlist .checkGroup input[type="checkbox"]:hover + label{ position:relative; display:inline-block; width:20px; height:20px; background:var(--mainRed); } .ccw.wishlist .checkGroup input[type="checkbox"]:hover + label::after{ color:#ffffff; } .ccw.wishlist .checkGroup input[type="checkbox"]:checked + label { background:var(--mainRed); border-color: #181818; } .ccw.wishlist .checkGroup input[type="checkbox"]:checked + label::after{ color:#fff; } .ccw.wishlist .checkGroup input[type="checkbox"]:checked + label:hover::after{ color:#fff; } .ccw.wishlist .detailBox .titleLine { display: flex; justify-content: flex-start; align-items:center; flex-flow:row nowrap; width:100%; height:41px; } .ccw.wishlist .detailBox .titleLine h4 { font-weight: 400; color:#333333; } .ccw.wishlist .detailBox .titleLine div:first-child { width: 40px; } .ccw.wishlist .detailBox .titleLine div:nth-child(2) { width:432px; } .ccw.wishlist .detailBox .titleLine div:nth-child(3) { width: 100px; } .ccw.wishlist .detailBox .titleLine div:nth-child(4) { width: 100px; } .ccw.wishlist .detailBox .titleLine div:nth-child(5) { width: 110px; } .ccw.wishlist .detailBox .titleLine div:last-child { width: 110px; } .ccw.wishlist .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; } .ccw.wishlist .detailBox .orderLine h5 { font-size:16px; font-weight: 350; color:#666666; width:100%; } .ccw.wishlist .detailBox .orderLine div:first-child { width: 40px; } .ccw.wishlist .detailBox .orderLine div:nth-child(2) { width:442px; } .ccw.wishlist .detailBox .orderLine .pThum { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: row nowrap; } .ccw.wishlist .detailBox .orderLine .pThum .pthumnail { width:60px; } .ccw.wishlist .detailBox .orderLine .pThum .pscript { display: flex; justify-content: center; align-items:center; flex-flow:row nowrap; width:100%; height:60px; padding:0 20px; text-align: left; } .ccw.wishlist .detailBox .orderLine .pThum .pscript h5 { font-size:16px; font-weight:350px; color:#808080; width:100%; } .ccw.wishlist .detailBox .orderLine div:nth-child(3) { width: 100px; } .ccw.wishlist .detailBox .orderLine div:nth-child(4) { width: 100px; } .ccw.wishlist .detailBox .orderLine div:nth-child(5) { width: 110px; } .ccw.wishlist .detailBox .orderLine div:last-child { width: 100px; } .ccw .btnArea { display: flex; justify-content: center; align-items: center; width:100%; margin:35px 0 40px; } .ccw .btnArea a { /* width:101px; */ font-size:14px; } .ccw .btnArea a:nth-child(2) { margin:0 10px; } /* 수정 완료 */ .ccw .btnArea a.btnPre { color: #ccc; font-size: 13px;} .ccw .btnArea a.btnNext { color: #111; font-size: 13px; } .ccw .btnArea a.btnCancel {color: #666; font-weight: 500;} .ccw.deliveryAddress .menuTitle { display: flex; justify-content: flex-start; align-items:center; height:28px; } .ccw.deliveryAddress .menuTitle h3 { font-size: 20px; font-weight:700; } .ccw.deliveryAddress .menuTitle a { margin:0 0 0 15px; } .ccw.deliveryAddress .detailBox .boxBody { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; margin:13px 0 0; background:#fafafa; border-top:2px solid #111111; } .ccw.deliveryAddress .detailBox .titleLine { display: flex; justify-content: flex-start; align-items:center; flex-flow:row nowrap; width:100%; height:41px; } .ccw.deliveryAddress .detailBox .titleLine h4 { font-weight: 400; color:#333333; } .ccw.deliveryAddress .detailBox .titleLine div:first-child { width: 40px; } .ccw.deliveryAddress .detailBox .titleLine div:nth-child(2) { width:120px; } .ccw.deliveryAddress .detailBox .titleLine div:nth-child(3) { width:472px; } .ccw.deliveryAddress .detailBox .titleLine div:nth-child(4) { width: 130px; } .ccw.deliveryAddress .detailBox .titleLine div:last-child { width: 130px; } .ccw.deliveryAddress .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; } .ccw.deliveryAddress .detailBox .orderLine h5 { font-size:16px; font-weight: 350; color:#666666; width:100%; } .ccw.deliveryAddress .detailBox .orderLine div:first-child { width: 40px; } .ccw.deliveryAddress .detailBox .orderLine div:nth-child(2) { width:120px; } .ccw.deliveryAddress .detailBox .orderLine div:nth-child(3) { width: 472px; text-align: left; } .ccw.deliveryAddress .detailBox .orderLine div:nth-child(4) { width: 130px; } .ccw.deliveryAddress .detailBox .orderLine div:last-child { width: 130px; } .ccw.deliveryAddress .radioGroup { display: flex; justify-content:flex-start; align-items: center; flex-flow: column; width:80px; height:24px; margin:0 0; } .ccw.deliveryAddress .radioGroup label { font-size: 13px; color:#666666; } .ccw.deliveryAddress .radioGroup input[type="radio"]{ display: none; } .ccw.deliveryAddress .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; } .ccw.deliveryAddress .radioGroup input[type="radio"] + label:before, .ccw.deliveryAddress .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; } .ccw.deliveryAddress .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; } .ccw.deliveryAddress .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; } .ccw.deliveryAddress .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; } .ccw.deliveryAddress .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; } .ccw.deliveryAddress .btnArea { display: flex; justify-content: flex-end; align-items: center; width:100%; margin:17px 0 40px; } .ccw.deliveryAddress .btnArea a { width:auto; font-size:14px; font-weight:700; } .ccw.deliveryAddress .btnArea a:nth-child(2) { margin:0 0 0 8px; } .ccw.deliveryAddress .btnArea a:last-child { margin:0 0 0 8px; } .ccw.deliveryAddress .btnArea a:last-child:hover { color:#fff; } .ccw.deliveryAddress .btnArea a.btnCancel { color: #666; font-weight: 500; } .ccw.addAdd { display: none; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; } /* ------------------------------------------------------------------------------------------------------------ autoOrderList - 정기구매관리 ------------------------------------------------------------------------------------------------------------ */ .autoOrderList { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; } .autoOrderList .menuTitle { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; height:19px; text-align: left; } /* 수정 완료*/ .autoOrderList .menuTitle h3 { font-size: 20px; font-weight:700; width:100%; } .autoOrderList .menuTitle h5 { font-size: 16px; font-weight:350; color:#111111; width:100%; } .autoOrderList .filterBox { display: flex; justify-content: flex-start; align-items: flex-start; width:100%; flex-flow:column nowrap; border:1px solid #dcdcdc; padding:14px 14px; margin:31px 0 0; } .autoOrderList .termFilter { display: flex; justify-content: flex-start; align-items: center; width:100%; margin:12px 0 0; } .autoOrderList .autoOrderNotice { display: flex; justify-content: flex-start; align-items: center; width:100%; margin:8px 0 0; } .autoOrderList .autoOrderNotice h5 { font-size: 16px; font-weight: 400; color:#ff2121; } .autoOrderList .detailBox .boxHeader { display: flex; justify-content: flex-start; align-items: center; flex-flow: row nowrap; width:100%; margin:50px 0 0; } .autoOrderList .detailBox .boxHeader a { width:140px; font-size:14px; font-weight: 500; } .autoOrderList .detailBox .boxHeader a:nth-child(2) { margin:0 0 0 auto; } .autoOrderList .detailBox .boxHeader a:last-child { width:160px; margin:0 0 0 8px; } .autoOrderList .detailBox .boxHeader .excludeCalendar { width:160px; /* margin:0 0 0 8px; */ } .autoOrderList .detailBox .boxHeader .excludeCalendar .currentDay { display: flex; justify-content: flex-start; align-items: center; } .autoOrderList .detailBox .boxHeader .excludeCalendar .currentDay .underBarForm { border: none; border-bottom: 1px solid #767676; width: 30px; text-align: center; } .autoOrderList .detailBox .boxHeader .excludeCalendar .currentDay img { margin: 0 0 0 10px; } .autoOrderList .detailBox .boxHeader .excludeCalendar .txtFiled { color: #d1173e; } .autoOrderList .detailBox .boxHeader .excludeCalendar .txtFiled01 { width: 450px; color: #d1173e; } .autoOrderList .detailBox .boxHeader .excludeCalendar .txtFiled01::placeholder { color: #d1173e; } .autoOrderList .detailBox .boxHeader .excludeCalendar .input-wrapper { display: inline-block; } .autoOrderList .detailBox .boxHeader .excludeCalendar .input-wrapper label { display: block; color: white; margin-bottom: 6px; } .autoOrderList .detailBox .boxHeader .excludeCalendar .input-wrapper input { display: none; border: none; border-radius: 3px; width: 200px; height: 48px; margin-right: 16px; padding-left: 16px; box-shadow: var(--shadow-2dp); } .autoOrderList .detailBox .boxHeader .excludeCalendar .date-field { cursor: pointer; } .autoOrderList .detailBox .boxHeader .excludeCalendar .calendar-widget { position: relative; } .autoOrderList .detailBox .boxHeader .excludeCalendar .calendar-widget:focus { outline: none; } .autoOrderList .detailBox .boxHeader .excludeCalendar .calendar-wrapper { display: none; justify-content: flex-start; align-items: flex-start; flex-flow:row wrap; max-width:776px; position: absolute; top:-10px; left:-767px; padding-top: 8px; z-index: 2; box-shadow: var(--shadow-2dp); } .autoOrderList .detailBox .boxHeader .excludeCalendar .dual-calendar { display: flex; width:100%; /* height: 300px; */ border-radius: 3px; padding: 16px; box-shadow:none; background-color: white; position: relative; } .autoOrderList .detailBox .boxHeader .excludeCalendar .dual-calendar .close { cursor: pointer; position: absolute; top: 10px; right: 10px; width: 35px; height: 10px; } .autoOrderList .detailBox .boxHeader .excludeCalendar .dual-calendar .calendar:first-child { margin-right: 16px; } .autoOrderList .detailBox .boxHeader .excludeCalendar .calendar { width: auto; } .autoOrderList .detailBox .boxHeader .excludeCalendar .calendar-header { position: relative; height: 40px; display: flex; align-items: center; justify-content: center; } .autoOrderList .detailBox .boxHeader .excludeCalendar .month-text { color: var(--gray-700); font-size: 24px; font-size: 16px; font-weight: bold; } .autoOrderList .detailBox .boxHeader .excludeCalendar .prev-btn, .autoOrderList .detailBox .boxHeader .excludeCalendar .next-btn { cursor: pointer; position: absolute; top: 50%; transform: translateY(-50%); z-index: 1; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border: none; border-radius: 50px; /* box-shadow: var(--shadow-2dp); background-color: var(--primary); color: white; transition: background-color 0.2s, box-shadow 0.2s; */ } .autoOrderList .detailBox .boxHeader .excludeCalendar .prev-btn:after { content: ''; width: 7px; height: 7px; position: absolute; top: 13px; left: 14px; border-top: 2px solid #d9d9d9; border-left: 2px solid #d9d9d9; transform: rotate(315deg); transition: all 1s; } .autoOrderList .detailBox .boxHeader .excludeCalendar .next-btn:after { content: ''; width: 7px; height: 7px; position: absolute; top: 13px; right: 15px; border-top: 2px solid #d9d9d9; border-left: 2px solid #d9d9d9; transform: rotate(135deg); transition: all 1s; } .autoOrderList .detailBox .boxHeader .excludeCalendar .prev-btn:hover, .autoOrderList .detailBox .boxHeader .excludeCalendar .next-btn:hover { box-shadow: var(--shadow-4dp); background-color: var(--primary-md); } .autoOrderList .detailBox .boxHeader .excludeCalendar .prev-btn:active, .autoOrderList .detailBox .boxHeader .excludeCalendar .next-btn:active { box-shadow: var(--shadow-8dp); background-color: var(--primary-lt); } .autoOrderList .detailBox .boxHeader .excludeCalendar .prev-btn.disabled, .autoOrderList .detailBox .boxHeader .excludeCalendar .next-btn.disabled { cursor: default; box-shadow: none; background-color: var(--gray-300); color: var(--gray-500); } .autoOrderList .detailBox .boxHeader .excludeCalendar .prev-btn *, .autoOrderList .detailBox .boxHeader .excludeCalendar .next-btn * { user-select: none; } .autoOrderList .detailBox .boxHeader .excludeCalendar .prev-btn { left: 0; } .autoOrderList .detailBox .boxHeader .excludeCalendar .next-btn { right: 0; } .autoOrderList .detailBox .boxHeader .excludeCalendar .date-table-header { display: flex; justify-content: space-between; width: 100%; margin-top: 8px; } .autoOrderList .detailBox .boxHeader .excludeCalendar .day { user-select: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; font-weight: 700; color: var(--gray-700); /* font-size: 16px; */ font-size: 12px; } .autoOrderList .detailBox .boxHeader .excludeCalendar .day.saturday { color: var(--primary); } .autoOrderList .detailBox .boxHeader .excludeCalendar .day.sunday { color: var(--secondary); } /* Date Styling */ .autoOrderList .detailBox .boxHeader .excludeCalendar .date-table-row { display: flex; height: 52px; justify-content: space-between; } .autoOrderList .detailBox .boxHeader .excludeCalendar .date { cursor: pointer; position: relative; display: flex; flex-direction: column; align-items: center; width: 52px; height: 52px; transition: color 0.2s; } /* DO NOT CHANGE THE ORDER */ .autoOrderList .detailBox .boxHeader .excludeCalendar .date.sunday { color: var(--secondary); } .autoOrderList .detailBox .boxHeader .excludeCalendar .date.today { color: #fff; background: var(--primary); border-radius: 50%; } .autoOrderList .detailBox .boxHeader .excludeCalendar .date.selected { color: #fff; background: var(--primary); border-radius: 50%; } .autoOrderList .detailBox .boxHeader .excludeCalendar .date.disabled { color: var(--gray-300); } .autoOrderList .detailBox .boxHeader .excludeCalendar .date.empty { cursor: default; user-select: none; } .autoOrderList .detailBox .boxHeader .excludeCalendar .date * { cursor: pointer; user-select: none; } .autoOrderList .detailBox .boxHeader .excludeCalendar .date.disabled * { cursor: not-allowed; } .autoOrderList .detailBox .boxHeader .excludeCalendar .date .help-text { position: absolute; top: 0; display: none; align-items: flex-start; justify-content: center; width: 100%; height: 15px; font-size: 10px; z-index: 1; } .autoOrderList .detailBox .boxHeader .excludeCalendar .date .date-text { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; font-size: 16px; z-index: 1; } .autoOrderList .detailBox .boxHeader .excludeCalendar .date .date-ripple { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); width: 52px; height: 100%; background-color: transparent; will-change: transform; transition: transform 0.18s cubic-bezier(0, .75, .5, 1), background-color 0.2s; } .autoOrderList .detailBox .boxHeader .excludeCalendar .date .date-ripple.no-transition { transition: none; } .autoOrderList .detailBox .boxHeader .excludeCalendar .date.hover .date-ripple { background-color: var(--gray-300); transform: translate(-50%, -50%) scale(1); border-radius: 50%; } .autoOrderList .detailBox .boxHeader .excludeCalendar .date.in-range .date-ripple { background-color: var(--primary-lightest); transform: translate(-50%, -50%) scale(1); } .autoOrderList .detailBox .boxHeader .excludeCalendar .date.selected .date-ripple { background-color: var(--primary); transform: translate(-50%, -50%) scale(1); border-radius: 50%; } .autoOrderList .detailBox .boxHeader .excludeCalendar .date.selected { padding:0; } .autoOrderList .detailBox .boxHeader .excludeCalendar .date.selected::after { content: ''; width: 0px; height: 0px; position: absolute; top: 0px; right: 0px; border-top: 0px solid #d9d9d9; border-left: 0px solid #d9d9d9; transform: rotate(225deg); transition: all 1s; } .autoOrderList .detailBox .boxHeader .excludeCalendar .modalBtn { display: flex; justify-content: flex-start; align-items:center; flex-flow: row nowrap; width:100%; padding:10px 10px; background:#fff; } .autoOrderList .detailBox .boxHeader .excludeCalendar .modalBtn .btnCancel { font-size:14px; font-weight: 700; color:#999999; background:#fff; border-color:#dddddd; width:49%; height:40px; } .autoOrderList .detailBox .boxHeader .excludeCalendar .modalBtn .btnConfirm { font-size:14px; font-weight: 700; color:#fff; background:var(--mainRed); border-color:var(--mainRed); width:49%; height:40px; margin:0 0 0 2%; } .autoOrderList .detailBox .boxBody { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; margin:11px 0 0; background:#fafafa; border-top:2px solid #111111; } .autoOrderList .checkGroup input[type="checkbox"]{ display:none; } .autoOrderList .checkGroup input[type="checkbox"] + label{ position:relative; display:inline-block; width:20px; height:20px; border:2px solid #d9d9d9; transition: all .75s; } .autoOrderList .checkGroup input[type="checkbox"] + label::after{ position:absolute; left:-1px; top:-5px; content:'✔'; width:20px; height:20px; font-size:16px; color:#333333; text-align:center; transition: all .75s; } .autoOrderList .checkGroup input[type="checkbox"]:not(:checked) + label::after{ color: transparent; } .autoOrderList .checkGroup input[type="checkbox"]:not(:checked) + label { border-color: #000; } .autoOrderList .checkGroup input[type="checkbox"]:hover + label{ position:relative; display:inline-block; width:20px; height:20px; background:var(--mainRed); } .autoOrderList .checkGroup input[type="checkbox"]:hover + label::after{ color:#ffffff; } .autoOrderList .checkGroup input[type="checkbox"]:checked + label { background:var(--mainRed); border-color: #181818; } .autoOrderList .checkGroup input[type="checkbox"]:checked + label::after{ color:#fff; } .autoOrderList .checkGroup input[type="checkbox"]:checked + label:hover::after{ color:#fff; } .autoOrderList .detailBox .titleLine { display: flex; justify-content: flex-start; align-items:center; flex-flow:row nowrap; width:100%; height:41px; padding:0 10px; } .autoOrderList .detailBox .titleLine h4 { font-weight: 400; color:#333333; } .autoOrderList .detailBox .titleLine div:first-child { width: 40px; } .autoOrderList .detailBox .titleLine div:nth-child(2) { width:120px; } .autoOrderList .detailBox .titleLine div:nth-child(3) { width: 100px; } .autoOrderList .detailBox .titleLine div:nth-child(4) { width: 140px; } .autoOrderList .detailBox .titleLine div:nth-child(5) { width: 200px; } .autoOrderList .detailBox .titleLine div:nth-child(6) { width: 80px; } .autoOrderList .detailBox .titleLine div:nth-child(7) { width: 132px; } .autoOrderList .detailBox .titleLine div:last-child { width: 80px; } .autoOrderList .detailBox .orderLine { display: flex; justify-content: flex-start; align-items:center; flex-flow:row nowrap; width:100%; padding:12px 10px; background: #fff; border-bottom:1px solid #cccccc; } .autoOrderList .detailBox .orderLine.canceled { background:#d7d7d7; } .autoOrderList .detailBox .orderLine h5 { font-size:14px; font-weight: 350; color:#666666; width:100%; } .autoOrderList .detailBox .orderLine h5 span { font-size:16px; font-weight:700; color:var(--mainRed); width:100%; } .autoOrderList .detailBox .orderLine div:first-child { width: 40px; } .autoOrderList .detailBox .orderLine div:nth-child(2) { width:120px; } .autoOrderList .detailBox .orderLine div:nth-child(3) { width: 100px; } .autoOrderList .detailBox .orderLine div:nth-child(4) { width: 140px; } .autoOrderList .detailBox .orderLine div:nth-child(5) { width: 280px; } .autoOrderList .detailBox .orderLine div:nth-child(5) .proInfo { display: flex; justify-content: flex-start; align-items:center; flex-flow:row nowrap; width:100%; border-bottom: 1px solid #cccccc; } .autoOrderList .detailBox .orderLine div:nth-child(5) .proInfo:last-child { border:none; } .autoOrderList .detailBox .orderLine div:nth-child(6) { width: 132px; } .autoOrderList .detailBox .orderLine div:last-child { width: 80px; } .autoOrderList .btnArea { display: flex; justify-content: center; align-items: center; width:100%; margin:35px 0 0; } .autoOrderList .btnArea a { width:101px; font-size:13px; } .autoOrderList .btnArea a:nth-child(2) { margin:0 10px; } /* 수정 완료 */ .autoOrderList .autoOrderListGuide { display: flex; justify-content: flex-start; align-items:center; flex-flow:row nowrap; width:100%; padding:0 0; margin:40px 0 0; background:#f9f9f9; } /* 수정 완료*/ .autoOrderList .autoOrderListGuide .left { width:712px; padding:29px 19px 15px; } .autoOrderList .autoOrderListGuide .right { width:180px; padding:43px 8px 26px; } .autoOrderList .autoOrderListGuide ul { display: flex; justify-content: flex-start; align-items:center; flex-flow:column nowrap; width:100%; padding:0 0 0 20px; margin:0; } .autoOrderList .autoOrderListGuide ul li { width:100%; font-size:14px; font-weight:400; color:#303030; text-align: left; line-height: 24px; } .autoOrderList .autoOrderListGuide li::marker { font-size:3px; } .autoOrderList .autoOrderListGuide .right a { width:164px; cursor: pointer; } /* ------------------------------------------------------------------------------------------------------------ autoOrderDetail - 주문상세보기 ------------------------------------------------------------------------------------------------------------ */ .autoOrderDetail { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; } .autoOrderDetail .menuTitle { height:28px; } .autoOrderDetail .menuTitle h3 { font-size: 20px; font-weight:700; } .autoOrderDetail .guideBox { display: flex; justify-content:center; align-items:center; width:100%; height:130px; flex-flow:row nowrap; border:1px solid #dcdcdc; padding:14px 14px; margin:20px 0 0; } .autoOrderDetail .guideBox .guideTxt { display: flex; justify-content:flex-start; align-items:flex-start; flex-flow:row wrap; width:280px; text-align: left; } .autoOrderDetail .guideBox h3 { font-size:18px; font-weight: 400; color:#666666; width:100%; } .autoOrderDetail .guideBox h3 span { font-weight: 700; color:#0000ff; } .autoOrderDetail .detailBox { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; } .autoOrderDetail .detailBox .boxHeader { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; margin:40px 0 0; } .autoOrderDetail .detailBox .boxHeader h4 { font-size:16px; font-weight: 700; color:#333333; } .autoOrderDetail .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; } .autoOrderDetail .detailBox .boxBody .formItem { display: flex; justify-content: flex-start; align-items: center; width:100%; border-bottom:1px solid #dddddd; } .autoOrderDetail .detailBox .boxBody .formItem h4 { color:#333333; } .autoOrderDetail .detailBox .boxBody .mainRed { color:#d80000; } .autoOrderDetail .detailBox .boxBody .mainBlue { color:#0038FF; } .autoOrderDetail .detailBox .boxBody .orderFunction a { width:108px; margin:0 0 0 20px; } .autoOrderDetail .detailBox.autoOrderInfo .boxBody span { color:var(--mainRed); font-weight: 700; text-decoration: underline; } .autoOrderDetail .detailBox.autoOrderInfo .boxBody img { margin:0 0 0 8px; } .autoOrderDetail .detailBox.autoOrderInfo .boxBody .formItem .formGroup:nth-child(2) { width:120px } .autoOrderDetail .detailBox.autoOrderInfo .boxBody .formItem .formGroup:last-child { width:calc(100% - 177px - 120px); } .autoOrderDetail .detailBox.autoOrderInfo .boxBody .nextAutoOrder { display: flex; justify-content: flex-start; align-items: center; flex-flow: row nowrap; } .autoOrderDetail .detailBox.autoOrderInfo .boxBody .nextAutoOrder h5 { font-size:16px; font-weight:700; color:var(--mainRed); } .autoOrderDetail .detailBox.autoOrderInfo .boxBody .nextAutoOrder sup { font-size:16px; font-weight:700; color:var(--mainRed); } .autoOrderDetail .detailBox .titleLine { display: flex; justify-content: flex-start; align-items:center; flex-flow:row nowrap; width:100%; height:41px; } .autoOrderDetail .detailBox .titleLine h4 { font-weight: 400; color:#333333; } .autoOrderDetail .detailBox .titleLine div:first-child { width: 100px; } .autoOrderDetail .detailBox .titleLine div:nth-child(2) { width:292px; } .autoOrderDetail .detailBox .titleLine div:nth-child(3) { width: 80px; } .autoOrderDetail .detailBox .titleLine div:nth-child(4) { width: 80px; } .autoOrderDetail .detailBox .titleLine div:nth-child(5) { width: 90px; } .autoOrderDetail .detailBox .titleLine div:nth-child(6) { width: 70px; } .autoOrderDetail .detailBox .titleLine div:nth-child(7) { width: 90px; } .autoOrderDetail .detailBox .titleLine div:last-child { width: 90px; } .autoOrderDetail .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; } .autoOrderDetail .detailBox .orderLine h5 { font-size:13px; font-weight: 350; color:#666666; width:100%; } .autoOrderDetail .detailBox .orderLine div:first-child { width: 100px; } .autoOrderDetail .detailBox .orderLine div:nth-child(2) { width:312px; } .autoOrderDetail .detailBox .orderLine .pThum { display: flex; justify-content: flex-start; align-items: center; flex-flow: row nowrap; } .autoOrderDetail .detailBox .orderLine .pThum .pthumnail { width:72px; } .autoOrderDetail .detailBox .orderLine .pThum .pscript { display: flex; justify-content: flex-start; align-items:flex-start; flex-flow:column nowrap; width:220px; text-align: left; margin: 0 0 0 10px; } .autoOrderDetail .detailBox .orderLine .pThum .pscript h6 { font-size:11px; font-weight:350px; color:#808080; width:100%; } .autoOrderDetail .detailBox .orderLine div:nth-child(3) { width: 80px; } .autoOrderDetail .detailBox .orderLine div:nth-child(4) { width: 80px; } .autoOrderDetail .detailBox .orderLine div:nth-child(5) { width: 90px; } .autoOrderDetail .detailBox .orderLine div:nth-child(6) { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow:column nowrap; width: 70px; } .autoOrderDetail .detailBox .orderLine div:nth-child(6) .numCounter { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow:row nowrap; width:100%; } .autoOrderDetail .detailBox .orderLine div:nth-child(6) .formControl { width:52px; padding:0; text-align: center; } .autoOrderDetail .detailBox .orderLine div:nth-child(6) .numChangeBtn { display: flex; justify-content: center; align-items:center; flex-flow:column nowrap; width: 13px; padding:4px 0; margin:0 0 0 5px; } .autoOrderDetail .detailBox .orderLine div:nth-child(6) .numChangeBtn img:last-child { margin:5px 0 0; } .autoOrderDetail .detailBox .orderLine div:nth-child(6) input::-webkit-inner-spin-button, .autoOrderDetail .detailBox .orderLine div:nth-child(6) input::-webkit-outer-spin-button { opacity: 1; } .autoOrderDetail .detailBox .orderLine div:nth-child(6) a { width:100%; margin:5px 0 0; } .autoOrderDetail .detailBox .orderLine div:nth-child(7) { width: 90px; } .autoOrderDetail .detailBox .orderLine div:last-child { width: 90px; } .autoOrderDetail .detailBox .orderLine div:last-child h5 { line-height: normal; } .autoOrderDetail .detailBox .orderLine div:last-child a { margin:5px 0 0; font-size: 13px;} .autoOrderDetail .detailBox.deliveryInfo .formControl { width:223px; } .autoOrderDetail .detailBox.deliveryInfo .formItem.hpSetting .formGroup { justify-content: flex-start; align-items: flex-start; flex-flow:column nowrap; } .autoOrderDetail .detailBox.deliveryInfo .formItem.hpSetting .formControl { width:69px; margin:0 0 0 8px; } .autoOrderDetail .detailBox.deliveryInfo .formItem.hpSetting .formControl:first-child { margin:0 0; } .autoOrderDetail .detailBox.deliveryInfo .formItem.tel select.formControl { width:69px; margin:0 0; } .autoOrderDetail .detailBox.deliveryInfo .formItem.tel .formControl { width:69px; margin:0 0 0 8px; } .autoOrderDetail .detailBox.deliveryInfo .formItem.emailSetting .formGroup { justify-content: flex-start; align-items: flex-start; flex-flow:column nowrap; } .autoOrderDetail .detailBox.deliveryInfo .formItem.emailSetting .formControl { max-width:226px; } .autoOrderDetail .detailBox.deliveryInfo .formItem.emailSetting .emailReg { display: flex; justify-content: flex-start; align-items: center; width:100%; } .autoOrderDetail .detailBox.deliveryInfo .formItem.emailSetting .emailReg .btnSm { width:82px; height:30px; padding:0 15px; font-size:14px; } .autoOrderDetail .detailBox.deliveryInfo .formItem.address .formGroup { justify-content: flex-start; align-items: flex-start; flex-flow:column nowrap; } .autoOrderDetail .detailBox.deliveryInfo .formItem.address .formControl { width:100%; } .autoOrderDetail .detailBox.deliveryInfo .formItem.address .addReg { display: flex; justify-content: flex-start; align-items: center; width:100%; } .autoOrderDetail .detailBox.deliveryInfo .formItem.address .addReg .formControl { max-width:87px; margin:0 8px 0 0; } .autoOrderDetail .detailBox.deliveryInfo .formItem.address .addReg .btnSm { width:82px; height:30px; padding:0 15px; font-size:14px; } .autoOrderDetail .detailBox.deliveryInfo .formItem.address .formControl:nth-child(2) { margin:10px 0 12px; } .autoOrderDetail .detailBox.localInfo .formControl { width:228px; } .autoOrderDetail .detailBox.paymentControl { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; border:none; } .autoOrderDetail .detailBox.paymentControl .boxHeader { flex-flow: row nowrap; } .autoOrderDetail .detailBox.paymentControl .boxHeader .btnArea { width:220px; margin:0 0 0 auto; } .autoOrderDetail .btnArea { display: flex; justify-content: center; align-items: center; width:100%; margin:35px 0 40px; } .autoOrderDetail .btnArea a { width:120px; font-size:14px; } .autoOrderDetail .btnArea a:nth-child(2) { margin:0 8px; } /* 수정 완료*/ .autoOrderDetail .btnArea a.btnCancel {color: #666; font-weight: 500;} /* ------------------------------------------------------------------------------------------------------------ simplePayList - 주문상세보기 ------------------------------------------------------------------------------------------------------------ */ .simplePayList { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; } .simplePayList .menuTitle { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; height:56px; text-align: left; } .simplePayList .menuTitle h3 { font-size: 20px; font-weight:700; color:#111111; width:100%; } .simplePayList .menuTitle h5 { font-size: 16px; font-weight:350; color:#111111; width:100%; } .simplePayList .simplePayBox { display: flex; justify-content: flex-start; align-items: center; flex-flow: row wrap; width: 100%; padding: 20px 19px; margin: 20px 0 0 0; border: solid 1px #dcdcdc; background-color: #fff; box-sizing: border-box; } .simplePayList .simplePayBox .cardItem { display: flex; justify-content: flex-start; align-items: center; width: 434px; height: 122px; margin: 0 12px 12px 0; padding: 20px 30px 20px 20px; border-radius: 10px; border: solid 1px #c3c3c3; background-color: #fff; box-sizing: border-box; } .simplePayList .simplePayBox .cardItem:nth-child(2n) { margin: 0 0 12px; } .simplePayList .simplePayBox .cardItem .simpleCardInfo { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: row wrap; margin: 0 0 0 16px; text-align: left; } .simplePayList .simplePayBox .cardItem .simpleCardInfo .cardCompany { width: 100%; font-size: 16px; color: #000; line-height: 26px; } .simplePayList .simplePayBox .cardItem .simpleCardInfo .cardNumber { width: 100%; font-size: 14px; color: #000; line-height: 26px; } .simplePayList .simplePayBox .cardItem button { display: flex; justify-content: center; align-items: center; width: 44px; height: 26px; font-size: 14px; line-height: 1.86; color: #d21c42; background-color: #fbe4e4; border: none; border-radius: 4px; margin: 0 0 0 auto; } .simplePayList .simplePayBox .cardReg .cardAdd { display: flex; justify-content: center; align-items: center; width: 124px; } .simplePayList .simplePayBox .cardReg .cardAdd .plusBg { display: flex; justify-content: center; align-items: center; width: 22px; height: 22px; border-radius: 50%; background: #0075ff; } .simplePayList .simplePayBox .cardReg .cardAdd .addTxt { font-size: 14px; line-height: 1.14; color: #000; margin: 0 0 0 7px; } .simplePayList .simplePayBox .cardReg { display: none; justify-content: center; align-items: center; width: 100%; height: 50px; margin: 30px 0 0; border-radius: 10px; border: 1px dashed #566173; background-color: #fafafb; } .simplePayList .simplePayBox .cardReg.on { display: flex; } .simplePayList .listControlGuide { display: flex; justify-content: flex-start; align-items: center; margin: 10px 0 0; width:100%; } .simplePayList .listControlGuide h5 { font-size: 14px; line-height: 1.86; color: #444; margin: 0; } .simplePayList .listControlGuide h5 span { color: #0075ff; } .simplePayList .listControlGuide .pwReset { display: flex; justify-content: center; align-items: center; height: 28px; padding: 0 8px; margin: 0 0 0 auto; font-size: 14px; border-radius: 4px; border: solid 1px #aaa; background-color: #fff; } /* ------------------------------------------------------------------------------------------------------------ myQna / goodsOpinion / goodsQna ------------------------------------------------------------------------------------------------------------ */ .qqr { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; } .qqr .menuTitle { height:28px; } .qqr .menuTitle h3 { font-size: 20px; font-weight:700; } .qqr .guideBox { display: flex; justify-content:center; align-items:center; width:100%; height:130px; flex-flow:row nowrap; border:1px solid #dcdcdc; padding:14px 14px; margin:20px 0 0; } .qqr .guideBox h3 { font-size:18px; font-weight: 350; color:#666666; } .qqr .guideBox h3 span { font-weight: 700; color:var(--mainRed); } .qqr .detailBox { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; } .qqr .detailBox .boxHeader { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; margin:40px 0 0; } .qqr .detailBox .boxHeader h4 { font-size:16px; font-weight: 700; color:#333333; } .qqr .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; } .qqr .detailBox .boxBody .formItem { display: flex; justify-content: flex-start; align-items: center; width:100%; border-bottom:1px solid #dddddd; } .qqr .detailBox .boxBody .formItem h4 { color:#333333; } .qqr .detailBox .boxBody .mainRed { color:#d80000; } .qqr .detailBox .boxBody .mainBlue { color:#0038FF; } .qqr.myqna .detailBox .titleLine { display: flex; justify-content: flex-start; align-items:center; flex-flow:row nowrap; width:100%; height:43px; } .qqr.myqna .detailBox .titleLine h4 { font-weight: 400; color:#333333; } .qqr.myqna .detailBox .titleLine div:first-child { width: 135px; } .qqr.myqna .detailBox .titleLine div:nth-child(2) { width:110px; } .qqr.myqna .detailBox .titleLine div:nth-child(3) { width: 460px; } .qqr.myqna .detailBox .titleLine div:nth-child(4) { width: 110px; } .qqr.myqna .detailBox .titleLine div:last-child { width: 110px; } .qqr.myqna .detailBox .orderLine { display: flex; justify-content: flex-start; align-items:center; flex-flow:row nowrap; width:100%; padding:17px 0; background: #fff; border-bottom:1px solid #cccccc; } .qqr.myqna .detailBox .orderLine h5 { font-size:13px; font-weight: 350; color:#666666; width:100%; } .qqr.myqna .detailBox .orderLine div:first-child { width: 135px; } .qqr.myqna .detailBox .orderLine div:nth-child(2) { width: 110px; } .qqr.myqna .detailBox .orderLine div:nth-child(3) { width:460px; text-align:left; } .qqr.myqna .detailBox .orderLine div:nth-child(4) { width: 110px; } .qqr.myqna .detailBox .orderLine div:last-child { width: 110px; } .qqr.myqnaDetail .contentTitle { display: flex; justify-content:flex-start; align-items: center; width:100%; height:20px; margin:29px 0 0; } .qqr.myqnaDetail .contentTitle h4 { font-weight:700; } .qqr.myqnaDetail .contentTitle h4 span { font-weight:400; } .qqr.myqnaDetail .contentTitle .right { margin:0 0 0 auto; } .qqr.myqnaDetail .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; } .qqr.myqnaDetail .formItem { display: flex; justify-content: flex-start; align-items: center; width:100%; border-bottom:1px solid #dddddd; } .qqr.myqnaDetail .formItem:first-child .formControl { border:none; background:#fff; } .qqr.myqnaDetail .formItem.pwSetting .formGroup { justify-content: flex-start; align-items: flex-start; flex-flow:column nowrap; } .qqr.myqnaDetail .btnArea { display: flex; justify-content: center; align-items: center; width:100%; margin:35px 0 0; } .qqr.myqnaDetail .btnArea .btnConfirm { margin:0 0 0 10px; } /* 수정 완료 */ .qqr.goodsOpinion .detailBox .titleLine { display: flex; justify-content: flex-start; align-items:center; flex-flow:row nowrap; width:100%; height:43px; } .qqr.goodsOpinion .detailBox .titleLine h4 { font-weight: 400; color:#333333; } .qqr.goodsOpinion .detailBox .titleLine div:first-child { width: 80px; } .qqr.goodsOpinion .detailBox .titleLine div:nth-child(2) { width:220px; } .qqr.goodsOpinion .detailBox .titleLine div:nth-child(3) { width: 352px; } .qqr.goodsOpinion .detailBox .titleLine div:nth-child(4) { width: 130px; } .qqr.goodsOpinion .detailBox .titleLine div:last-child { width: 110px; } .qqr.goodsOpinion .detailBox .orderLine { display: flex; justify-content: flex-start; align-items:center; flex-flow:row nowrap; width:100%; padding:17px 0; background: #fff; border-bottom:1px solid #cccccc; } .qqr.goodsOpinion .detailBox .orderLine h5 { font-size:13px; font-weight: 350; color:#666666; width:100%; } .qqr.goodsOpinion .detailBox .orderLine div:first-child { width: 80px; } .qqr.goodsOpinion .detailBox .orderLine div:nth-child(2) { width: 220px; text-align:left; } .qqr.goodsOpinion .detailBox .orderLine div:nth-child(3) { width:352px; } .qqr.goodsOpinion .detailBox .orderLine div:nth-child(4) { width: 130px; } .qqr.goodsOpinion .detailBox .orderLine div:last-child { width: 110px; } .qqr.goodsQna .detailBox .titleLine { display: flex; justify-content: flex-start; align-items:center; flex-flow:row nowrap; width:100%; height:43px; } .qqr.goodsQna .detailBox .titleLine h4 { font-weight: 400; color:#333333; } .qqr.goodsQna .detailBox .titleLine div:first-child { width: 160px; } .qqr.goodsQna .detailBox .titleLine div:nth-child(2) { width:492px; } .qqr.goodsQna .detailBox .titleLine div:nth-child(3) { width: 130px; } .qqr.goodsQna .detailBox .titleLine div:last-child { width: 110px; } .qqr.goodsQna .detailBox .orderLine { display: flex; justify-content: flex-start; align-items:center; flex-flow:row nowrap; width:100%; padding:17px 0; background: #fff; border-bottom:1px solid #cccccc; } .qqr.goodsQna .detailBox .orderLine h5 { font-size:13px; font-weight: 350; color:#666666; width:100%; } .qqr.goodsQna .detailBox .orderLine div:first-child { width: 160px; } .qqr.goodsQna .detailBox .orderLine div:nth-child(2) { width: 492px; } .qqr.goodsQna .detailBox .orderLine div:nth-child(3) { width:130px; } .qqr.goodsQna .detailBox .orderLine div:last-child { width: 110px; } .qqr .btnArea { display: flex; justify-content: center; align-items: center; width:100%; margin:35px 0 40px; } .qqr .btnArea a { width:101px; font-size:13px; } .qqr .btnArea a:nth-child(2) { margin:0 10px; } /* 수정 완료*/ .qqr .btnArea a:hover { font-size:13px; } /* ------------------------------------------------------------------------------------------------------------ popconUse - 정기구매관리 ------------------------------------------------------------------------------------------------------------ */ .popconUse { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; } .popconUse .menuTitle { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; height:28px; text-align: left; } .popconUse .menuTitle h3 { font-size: 20px; font-weight:700; width:100%; } .popconUse .menuTitle h5 { font-size: 16px; font-weight:350; color:#111111; width:100%; } .popconUse .contentTitle { display: flex; justify-content:flex-start; align-items: flex-start; flex-flow:column nowrap; width:100%; height:auto; margin:29px 0 0; } .popconUse .contentTitle h4 { font-weight:700; } .popconUse .contentTitle h4 span { color:#d21c42; } .popconUse .contentTitle .bottom { margin:17px 0 0; } .popconUse .contentTitle .bottomBox { display: flex; justify-content:flex-start; align-items: flex-start; flex-flow: row wrap; position:relative; 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; } .popconUse .contentTitle .bottomBox01 { display: flex; justify-content:flex-start; align-items: flex-start; width:100%; } .popconUse .contentTitle .bottomBox02 { display: flex; justify-content:flex-start; align-items: flex-start; width:100%; } .popconUse .contentTitle .bottomBox03 { display: flex; justify-content:flex-start; align-items: flex-start; width:100%; } .popconUse .contentTitle .bottomBox .label { width:177px; padding:10px 10px; background:#fafafa; } .popconUse .contentTitle .bottomBox .content { width:calc(100% - 177px); padding:10px 10px 9px; } .popconUse .contentTitle .bottomBox .content h4 { font-weight:400; } .popconUse .contentTitle .bottomBox .content span { color:var(--mainRed); font-weight:700; } .popconUse .contentTitle .bottomBox .content span.blue { font-weight:400; color: #2E9BFF; font-weight:400; } .popconUse .contentTitle .bottomBox a { position:absolute; top:43px; right:22px; } .popconUse .filterBox { display: flex; justify-content: flex-start; align-items: flex-start; width:100%; flex-flow:row wrap; border:1px solid #dcdcdc; padding:20px 21px 19px; margin:31px 0 0; } .popconUse .quickFilter { display: flex; justify-content: flex-start; align-items: flex-start; width:100%; } .popconUse .quickFilter a { height:26px; margin:0 0 0 4px; border-radius:13px; } .popconUse .quickFilter a:first-child { margin:0 0; } .popconUse .termFilter { display: flex; justify-content: flex-start; align-items: center; width:100%; margin:10px 0 0; } .popconUse .searchFilter { display: flex; justify-content: flex-start; align-items: center; width:100%; margin:12px 0 0; } .popconUse .searchFilter .formControl { width:318px; } .popconUse .searchFilter a { margin:0 0 0 7px; } .popconUse .detailBox .boxHeader { display: flex; justify-content: flex-start; align-items: center; flex-flow: row nowrap; width:100%; margin:50px 0 0; } .popconUse .detailBox .boxHeader a { width:140px; font-size:14px; font-weight: 500; } .popconUse .detailBox .boxHeader a:nth-child(2) { margin:0 0 0 auto; } .popconUse .detailBox .boxHeader a:last-child { width:160px; margin:0 0 0 8px; } .popconUse .detailBox .boxBody { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; margin:11px 0 0; background:#fafafa; border-top:2px solid #111111; } .popconUse .checkGroup input[type="checkbox"]{ display:none; } .popconUse .checkGroup input[type="checkbox"] + label{ position:relative; display:inline-block; width:20px; height:20px; border:2px solid #d9d9d9; transition: all .75s; } .popconUse .checkGroup input[type="checkbox"] + label::after{ position:absolute; left:-1px; top:-5px; content:'✔'; width:20px; height:20px; font-size:16px; color:#333333; text-align:center; transition: all .75s; } .popconUse .checkGroup input[type="checkbox"]:not(:checked) + label::after{ color: transparent; } .popconUse .checkGroup input[type="checkbox"]:not(:checked) + label { border-color: #000; } .popconUse .checkGroup input[type="checkbox"]:hover + label{ position:relative; display:inline-block; width:20px; height:20px; background:var(--mainRed); border:none; } .popconUse .checkGroup input[type="checkbox"]:hover + label::after{ color:#fff; } .popconUse .checkGroup input[type="checkbox"]:checked + label { background:var(--mainRed); border-color: #181818; } .popconUse .checkGroup input[type="checkbox"]:checked + label::after{ color:#fff; } .popconUse .checkGroup input[type="checkbox"]:checked + label:hover::after{ color:#fff; } .popconUse .detailBox .titleLine { display: flex; justify-content: flex-start; align-items:center; flex-flow:row nowrap; width:100%; height:41px; padding:0 10px; } .popconUse .detailBox .titleLine h4 { font-weight: 400; color:#333333; } .popconUse .detailBox .titleLine div:first-child { width: 150px; } .popconUse .detailBox .titleLine div:nth-child(2) { width:150px; } .popconUse .detailBox .titleLine div:nth-child(3) { width: 442px; } .popconUse .detailBox .titleLine div:last-child { width: 150px; } .popconUse .detailBox .orderLine { display: flex; justify-content: flex-start; align-items:center; flex-flow:row nowrap; width:100%; padding:12px 10px; background: #fff; border-bottom:1px solid #cccccc; } .popconUse .detailBox .orderLine.canceled { background:#d7d7d7; } .popconUse .detailBox .orderLine h5 { font-size:15px; font-weight: 100; color:#666666; width:100%; } .popconUse .detailBox .orderLine h5 span { font-size:16px; font-weight:700; color:var(--mainRed); width:100%; } .popconUse .detailBox .orderLine div:first-child { width: 150px; } .popconUse .detailBox .orderLine div:nth-child(2) { width:150px; } .popconUse .detailBox .orderLine div:nth-child(3) { width: 442px; } .popconUse .detailBox .orderLine div:last-child { width: 150px; } .popconUse .detailBox .orderLine div:last-child h5 { font-size:15px; font-weight:100; color:#ff2828; } .popconUse .detailBox .orderLine div:last-child h5.tPop { color:#0085ff; } .popconUse .btnArea { display: flex; justify-content: center; align-items: center; width:100%; margin:35px 0 0; } .popconUse .btnArea a { width:101px; font-size:14px; } .popconUse .btnArea a:nth-child(2) { margin:0 0 0 10px; } /* 수정완료 */ .popconUse .btnArea a.btnPre {font-size: 13px;} .popconUse .btnArea a.btnNext {font-size: 13px; color: #111;} .popconUse .popconUseGuide { display: flex; justify-content: flex-start; align-items:center; flex-flow:row nowrap; width:100%; padding:0 0; margin:40px 0 40px; background:#f9f9f9; } /* 수정 완료*/ .popconUse .popconUseGuide .left { width:712px; padding:29px 19px 15px; } .popconUse .popconUseGuide .right { width:180px; padding:43px 8px 26px; } .popconUse .popconUseGuide ul { display: flex; justify-content: flex-start; align-items:center; flex-flow:column nowrap; width:100%; padding:0 0 0 20px; margin:0; } .popconUse .popconUseGuide ul li { width:100%; font-size:14px; font-weight:400; color:#303030; text-align: left; line-height: 24px; } .popconUse .popconUseGuide li::marker { font-size:3px; } .popconUse .popconUseGuide .right a { width:164px; cursor: pointer; } /* ------------------------------------------------------------------------------------------------------------ givePopModal - 팝콘 선물하기 ------------------------------------------------------------------------------------------------------------ */ #givePopModal .modalContent { width:849px; height:auto; } #givePopModal .modalBody { padding:38px; } #givePopModal .modalBody .formControl { color:#333333; } #givePopModal .detailBox { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; } #givePopModal .detailBox .boxHeader { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; margin:0 0; } #givePopModal .detailBox .boxHeader h3 { font-size:20px; font-weight: 700; color:#111111; } #givePopModal .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; border-bottom:2px solid #111111; } #givePopModal .detailBox .boxBody .formItem { display: flex; justify-content: flex-start; align-items: center; width:100%; padding:0 0; } #givePopModal .detailBox .boxBody .formItem h4 { color:#333333; } #givePopModal .detailBox .boxBody .formItem .formGroup { height:44px; padding:7px 10px; } #givePopModal .takeSearchBox { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; margin:30px 0 0; } #givePopModal .takeSearchBox .boxHeader { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; margin:0 0; } #givePopModal .takeSearchBox .boxHeader h3 { font-size:16px; font-weight: 700; color:#111111; } #givePopModal .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; } #givePopModal .takeSearchBox .boxBody .formItem { display: flex; justify-content: flex-start; align-items: center; width:100%; padding:11px 0; } #givePopModal .takeSearchBox .boxBody .formItem h4 { color:#333333; } #givePopModal .takeSearchBox .boxBody .formItem .formGroup { padding:7px 10px; background: transparent; padding:7px 10px 7px 0; } #givePopModal .takeSearchBox .boxBody .formItem .formGroup .formControl { width:318px; } #givePopModal .takeSearchBox .boxBody .formItem .formGroup a.btnSearch { margin:0 10px; font-size:14px; font-weight: 700; } #givePopModal .takeSearchBox .boxBody .formItem .formGroup a.btnWrs { font-size:14px; font-weight: 500; } #givePopModal .detailBox.takeUser { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; } #givePopModal .detailBox.takeUser .boxHeader { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; margin:20px 0 0; } #givePopModal .detailBox.takeUser .boxHeader h4 { font-size:16px; font-weight: 700; color:#111111; } #givePopModal .detailBox.takeUser .checkGroup input[type="checkbox"]{ display:none; } #givePopModal .detailBox.takeUser .checkGroup input[type="checkbox"] + label{ position:relative; display:inline-block; width:20px; height:20px; border:2px solid #d9d9d9; transition: all .75s; } #givePopModal .detailBox.takeUser .checkGroup input[type="checkbox"] + label::after{ position:absolute; left:-1px; top:-5px; content:'✔'; width:20px; height:20px; font-size:16px; color:#333333; text-align:center; transition: all .75s; } #givePopModal .detailBox.takeUser .checkGroup input[type="checkbox"]:not(:checked) + label::after{ color: transparent; } #givePopModal .detailBox.takeUser .checkGroup input[type="checkbox"]:not(:checked) + label { border-color: #000; } #givePopModal .detailBox.takeUser .checkGroup input[type="checkbox"]:hover + label{ position:relative; display:inline-block; width:20px; height:20px; background:var(--mainRed); } #givePopModal .detailBox.takeUser .checkGroup input[type="checkbox"]:hover + label::after{ color:#ffffff; } #givePopModal .detailBox.takeUser .checkGroup input[type="checkbox"]:checked + label { background:var(--mainRed); border-color: #181818; } #givePopModal .detailBox.takeUser .checkGroup input[type="checkbox"]:checked + label::after{ color:#fff; } #givePopModal .detailBox.takeUser .checkGroup input[type="checkbox"]:checked + label:hover::after{ color:#fff; } #givePopModal .detailBox.takeUser .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; } #givePopModal .detailBox.takeUser .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; } #givePopModal .detailBox.takeUser .boxBody { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; height:376px; overflow-y:auto; margin:16px 0 0; background:#fafafa; border-top:2px solid #111111; } /* 수정 완료*/ #givePopModal .detailBox.takeUser .boxBody .formItem { display: flex; justify-content: flex-start; align-items: center; width:100%; border-bottom:1px solid #dddddd; } #givePopModal .detailBox.takeUser .boxBody .formItem h4 { color:#333333; } #givePopModal .detailBox.takeUser .boxBody .mainRed { color:#d80000; } #givePopModal .detailBox.takeUser .boxBody .mainBlue { color:#0038FF; } #givePopModal .detailBox.takeUser .titleLine { display: flex; justify-content: flex-start; align-items:center; flex-flow:row nowrap; width:100%; height:43px; padding:10px 10px; } #givePopModal .detailBox.takeUser .titleLine h4 { font-weight: 400; color:#333333; } #givePopModal .detailBox.takeUser .titleLine div:first-child { width: 30px; } #givePopModal .detailBox.takeUser .titleLine div:nth-child(2) { width:160px; } #givePopModal .detailBox.takeUser .titleLine div:nth-child(3) { width:160px; } #givePopModal .detailBox.takeUser .titleLine div:nth-child(4) { width:339px; } #givePopModal .detailBox.takeUser .titleLine div:last-child { width: 160px; } #givePopModal .detailBox.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; } #givePopModal .detailBox.takeUser .orderLine h5 { font-size:14px; font-weight:100; color:#666666; width:100%; } #givePopModal .detailBox.takeUser .orderLine div:first-child { width: 30px; } #givePopModal .detailBox.takeUser .orderLine div:nth-child(2) { width:160px; } #givePopModal .detailBox.takeUser .orderLine div:nth-child(3) { width:160px; } #givePopModal .detailBox.takeUser .orderLine div:nth-child(4) { width:339px; } #givePopModal .detailBox.takeUser .orderLine div:nth-child(4) .formControl { width:180px; } #givePopModal .detailBox.takeUser .orderLine div:last-child { width: 160px; } #givePopModal .detailBox.takeUser .orderLine div:last-child a { width:95px; } #givePopModal .detailBox.takeUser .orderLine div:last-child a:hover { font-size: 14px; color: #333;} #givePopModal .takeUserGuide { display: flex; justify-content: flex-start; align-items:center; flex-flow:row nowrap; width:100%; padding:0 0; margin:22px 0 0; background:#f9f9f9; } #givePopModal .takeUserGuide .left { width:712px; padding:29px 19px 15px; } #givePopModal .takeUserGuide .right { width:180px; padding:43px 8px 26px; } #givePopModal .takeUserGuide ul { display: flex; justify-content: flex-start; align-items:center; flex-flow:column nowrap; width:100%; padding:0 0 0 20px; margin:0; } #givePopModal .takeUserGuide ul li { width:100%; font-size:14px; font-weight:400; color:#303030; text-align: left; line-height: 24px; } #givePopModal .takeUserGuide li::marker { font-size:3px; } #givePopModal .takeUserGuide .right a { width:164px; cursor: pointer; } #givePopModal .btnArea { display: flex; justify-content: center; align-items: center; width:100%; margin:19px 0 0; } #givePopModal .btnArea a { width:101px; font-size:14px; } #givePopModal .btnArea a:nth-child(2) { width:auto; margin:0 0 0 10px; } /* 수정 완료*/ #givePopModal .btnArea a.btnCancel { color: #666; font-weight: 500;} /* ------------------------------------------------------------------------------------------------------------ 1:1친절상담 ------------------------------------------------------------------------------------------------------------ */ .oneAndOne { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; } .oneAndOne .menuTitle { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; height:56px; text-align: left; } .oneAndOne .menuTitle h3 { font-size: 20px; font-weight:700; width:100%; } .oneAndOne .menuTitle h5 { font-size: 16px; font-weight:350; color:#111111; width:100%; } .oneAndOne .contentTitle { display: flex; justify-content:flex-start; align-items: center; width:100%; height:20px; margin:29px 0 0; } .oneAndOne .contentTitle h4 { font-weight:700; } .oneAndOne .contentTitle h4 span { font-weight:400; } .oneAndOne .contentBox { display: flex; justify-content:flex-start; align-items: center; flex-flow: column nowrap; width:100%; margin:13px 0 0; background:#fafafa; border-top:2px solid #111111; } .oneAndOne .formItem { display: flex; justify-content: flex-start; align-items: center; width:100%; border-bottom:1px solid #dddddd; } .oneAndOne .contentBox .formControl::placeholder { font-size:16px; font-weight:400; color:#b6b6b6; } .oneAndOne .formItem.hpSetting .formGroup { justify-content: flex-start; align-items: flex-start; flex-flow:column nowrap; } .oneAndOne .formItem.hpSetting select.formControl { width:80px; margin:0 0; } .oneAndOne .formItem.hpSetting .formControl { width:126px; margin:0 0 0 8px; } .oneAndOne .formItem.hpSetting .formControl:first-child { margin:0 0; } .oneAndOne .formItem.hpSetting a { margin:0 0 0 8px; } .oneAndOne .formItem.hpSetting .hpChange { display: flex; justify-content: flex-start; align-items: center; width:100%; } .oneAndOne .formItem.hpSetting .noticeArea { display: flex; justify-content: flex-start; align-items: center; width:100%; margin:10px 0 0; } .oneAndOne .formItem.hpSetting .notice { display: flex; justify-content: flex-start; align-items: center; width:40%; } .oneAndOne .formItem.hpSetting .notice h5 { font-size:14px; } .oneAndOne .formItem.hpSetting .selectArea { display: flex; justify-content: flex-start; align-items: center; width:50%; gap: 20px } .oneAndOne .formItem:nth-child(4) .formControl { width:180px; } .oneAndOne .formItem.birthYmd .formGroup { justify-content: flex-start; align-items: flex-start; flex-flow:column nowrap; } .oneAndOne .formItem.birthYmd .formControl { border:none; background:#fff; max-width:180px; } .oneAndOne .formItem.birthYmd .noticeArea { display: flex; justify-content: flex-start; align-items: center; width:100%; margin:0 0; } .oneAndOne .formItem.birthYmd .notice { display: flex; justify-content: flex-start; align-items: center; width:50%; } .oneAndOne .formItem.birthYmd .selectArea { display: flex; justify-content: flex-start; align-items: center; width:50%; } .oneAndOne .formItem.tel select.formControl { width:126px; margin:0 0; } .oneAndOne .formItem.tel .formControl { width:126px; margin:0 0 0 8px; } .oneAndOne .formItem.emailSetting .formGroup { justify-content: flex-start; align-items: flex-start; flex-flow:column nowrap; } .oneAndOne .formItem.emailSetting .formControl { max-width:180px; } .oneAndOne .formItem.emailSetting .emailReg { display: flex; justify-content: flex-start; align-items: center; width:100%; } .oneAndOne .formItem.emailSetting .emailReg .btnSm { width:82px; height:30px; padding:0 15px; font-size:14px; } .oneAndOne .formItem.emailSetting .emailReg .specialCharacters { padding:0 10px; } .oneAndOne .formItem.emailSetting .emailReg select.formControl { width:178px; margin:0 8px 0; } .oneAndOne .formItem.emailSetting .noticeArea { display: flex; justify-content: flex-start; align-items: center; width:100%; margin:10px 0 0; } .oneAndOne .formItem.emailSetting .notice { display: flex; justify-content: flex-start; align-items: center; width:40%; } .oneAndOne .formItem.emailSetting .notice h5 { font-size:14px; } .oneAndOne .formItem.emailSetting .selectArea { display: flex; justify-content: flex-start; align-items: center; width:50%; gap: 20px;} .oneAndOne .formItem.memo textarea { width:100%; min-width:100%; max-width:100%; height:187px; min-height:187px; max-height:187px; } .oneAndOne .qGuide { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow:column nowrap; width:100%; margin:10px 0 0; } .oneAndOne .qGuide h5 { font-size:14px; font-weight:400; color:#5c5c5c; width:100%; text-align: left; } .oneAndOne .btnArea { display: flex; justify-content: center; align-items: center; width:100%; margin:35px 0 0; } .oneAndOne .btnArea .btnConfirm { margin:0 0 0 12px; } /* ------------------------------------------------------------------------------------------------------------ 게시판 ------------------------------------------------------------------------------------------------------------ */ .csBoard { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; padding:0 0 160px; } .csBoard .menuTitle { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; height:56px; text-align: left; } .csBoard .menuTitle h3 { font-size: 20px; font-weight:700; width:100%; } .csBoard .menuTitle h5 { font-size: 16px; font-weight:350; color:#111111; width:100%; } .csBoard .board { width:100%; transition:all 0.5s ease-in; -webkit-transition:all 0.5s ease-in; -moz-transition:all 0.5s ease-in; -o-transition:all 0.5s ease-in; } .csBoard .boardList { margin:25px 0 0; padding:0; border-top:2px solid #000; } .csBoard .boardList .lcItem { width:5%; height:50px; display: flex; justify-content: center; align-items: center; } .csBoard .boardList .lcItem:first-child { width:10%; } .csBoard .boardList .lcItem:nth-child(2) { display: flex; justify-content:center; align-items: center; width:55%; text-align:left; } .csBoard .boardList .lcItem:nth-child(3) { width:15%; } .csBoard .boardList .lcItem:last-child { width:15%; } .csBoard .listHeader { display: flex; justify-content: space-between; align-items: center; border-bottom:1px solid #cccccc; font-size:16px; text-align:center; color:#333333; } .csBoard .listContent { display: flex; justify-content: space-between; align-items: center; border-bottom:1px solid #cccccc; min-height:50px; font-size:15px; font-weight:500; text-align:center; color:#666666; } .csBoard .listContent.topFix { background: #F0F8FD; } .csBoard .listContent a { font-size:15px; font-weight:500; color:#666666; } .csBoard .listContent .lcItem:nth-child(2) { text-align:left; } .csBoard .btnArea { display: flex; justify-content: center; align-items: center; width:100%; margin:22px 0; } .csBoard .btnArea a { width:101px; font-size:14px; } .csBoard .btnArea a:hover { font-size:14px; } .csBoard .btnArea a:nth-child(2) { margin:0 10px; color: #181818;} /* 수정 완료*/ .csBoard .searchFilter { display: flex; justify-content:center; align-items:center; flex-flow:row nowrap; width:100%; } .csBoard .searchFilter select { width:80px; } .csBoard .searchFilter input { width:318px; margin:0 10px; } .csBoard .searchFilter a { width:57px; } .csBoard .input_gray01 { height: 30px; line-height: 30px; padding-left: 5px; border: 1px solid #d0d0d0;} .csBoard input[type="checkbox"] {margin: 0 5px;} .csBoard input[type="radio"] {margin: 0 5px 0 15px;} .csBoard input[type="radio"]:first-child {margin: 0 5px 0 0; } /* ------------------------------------------------------------------------------------------------------------ faqBoard ------------------------------------------------------------------------------------------------------------ */ .faqBoard { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; } .faqBoard .menuTitle { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column nowrap; width:100%; height:56px; text-align: left; } .faqBoard .menuTitle h3 { font-size: 20px; font-weight:700; width:100%; } .faqBoard .menuTitle h5 { font-size: 16px; font-weight:350; color:#111111; width:100%; } .faqBoard .contentTitle { display: flex; justify-content:flex-start; align-items: center; width:100%; height:20px; margin:29px 0 0; } .faqBoard .contentTitle h4 { font-weight:700; } .faqBoard .contentTitle h4 span { font-weight:400; } .faqBoard .searchFilter { display: flex; justify-content:flex-start; align-items:center; flex-flow:row nowrap; width:100%; padding:10px 0; margin:10px 0 0; background:#f2f2f2; border:1px solid #dcdcdc; } .faqBoard .searchFilter select { width:80px; } .faqBoard .searchFilter input { width:318px; margin:0 10px; } .faqBoard .searchFilter a { width:57px; font-size: 14px; font-weight: 700; } .faqBoard .quickFilter { display: flex; justify-content: flex-start; align-items: flex-start; width:100%; margin:15px 0 0; } .faqBoard .quickFilter a { font-size: 12px; font-weight: 500; height:26px; color:#454f5b; margin:0 0 0 3px; border-radius:13px; } .faqBoard .quickFilter a:first-child { margin:0 0; } /* ------------------------------------------------------------------------------------------------------------ Accordion ------------------------------------------------------------------------------------------------------------ */ .accordionArea { width:100%; padding:10px; } .accordionItem { margin:30px 0 0; padding:0 0 10px; border-bottom:0px solid #545454; } .accordion { font-size:15px; font-weight: 400; color:#666666; } .accordion .toggle { position:relative; display:block; padding:15px 10px; border:solid #ccc; border-width:0 0 1px; background:#fff; text-decoration:none; text-transform:uppercase; } /* .accordion .toggle:after { content:"+"; display:block; position:absolute; right:15px; top:20%; height:20px; width:20px; line-height:20px; border:2px solid #a497ab; border-radius:50%; text-align:center; color:#a497ab; } */ .accordion .toggle { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: row nowrap; width:100%; text-align: left; } .accordion .toggle .hTitle { width:5%; } .accordion .toggle .hIndex { width:10%; } .accordion .toggle .hContent { width:85%; } .accordion .toggleContents { display: none; justify-content: flex-start; align-items: flex-start; flex-flow: row nowrap; width:100%; text-align: left; } .accordion .toggleContents .hTitle { width:5%; } .accordion .toggleContents p { width:95%; font-size:15px; font-weight: 400; text-align:left; } .accordion:first-child .toggle { border-top-width:none; } .accordion.active .toggle { background-color:#fff; } /* .accordion.active .toggle, .accordion.active .toggle:after { font-weight: 700; color:var(--activeAccordionTxt); background: #a181f8; } */ /* .accordion.active .toggle:after { content:"_"; line-height:10px; border-color:#906090; } */ .accordion.active .toggleContents { display:flex; padding:5px 10px; border:solid #ccc; border-width:0 0 1px; background:#F0F8FD; color:#666666; } .faqBoard .btnArea { display: flex; justify-content:center; align-items: center; flex-flow: row nowrap; width:100%; margin:22px 0; } .faqBoard .btnArea a { width:101px; font-size:14px; } .faqBoard .btnArea a:nth-child(2) { margin:0 10px; } /* 수정 완료 */ .faqBoard .consultGuide { display: flex; justify-content:flex-start; align-items: center; flex-flow: row nowrap; width:100%; padding:19px 19px; margin:53px 0 0; background:#f9f9f9; } .faqBoard .consultGuide ul { width:80%; padding:0 0 0 20px; margin:0; } .faqBoard .consultGuide ul li { width:100%; font-size:14px; font-weight:400; color:#303030; text-align: left; line-height: 24px; } .faqBoard .consultGuide li::marker { font-size:13px; } .faqBoard .consultGuide .consultBtn { width:20%; } /* ------------------------------------------------------------------------------------------------------------ Card Edit ------------------------------------------------------------------------------------------------------------ */ #paymentLayer .modalBody .payInputArea .agreeTitle .label{border: none;} #paymentLayer .modalBody .payInputArea .agreeTitle .ball {height: 19px !important; width: 19px !important;} #paymentLayer .modalBody .payInputArea .checkGroup input[type="checkbox"] + label { width: 18px !important; height: 18px !important; }