textarea{height:auto; min-height:104px; resize:vertical} input::placeholder,.cm_member_form textarea::placeholder{color:#9aa3af} input:focus,.cm_member_form select:focus,.cm_member_form textarea:focus{ outline:0; border-color:#2b6cf6 !important; box-shadow:0 0 0 4px rgba(43,108,246,.16); } ul { list-style: none; } .cm_member_form .opt{ position:absolute; font-weight:400; width:80px; max-width:80px; font-size:13px; background:#fff; border:1px solid #d7e6ff !important; color:#1d4ed8; border-radius:8px; margin:12px 0 8px; padding:0px 2px; text-align:center; height:45px; line-height:45px; overflow:hidden; } /* ●●●●●●●●●● 단락 타이틀 */ .cm_member_title {font-weight:600; letter-spacing:-1px; font-size:17px; border-bottom:1px solid #707070; position:relative; color:#333; padding:20px 5px 10px 0px; margin-top:20px; } .cm_member_title strong {color:#ff0000; font-weight:600} .cm_member_title .explain {font-weight:normal; font-size:12px; color:#999; letter-spacing:-0.5px; margin-top:3px} .cm_member_title:first-of-type {margin:0} /* Generic input class */ .input_design { width:100% !important; height:clamp(48px, 6.9vw, 54px);line-height:clamp(48px, 6.9vw, 54px); /* 높이와 동일하게 */ border:1.5px solid #d9e3ef !important; border-radius:12px; background:#fff; padding:12px 14px; font-size:clamp(15.5px, 2.5vw, 17px); color:#0f172a; box-shadow:0 1px 0 #f6f9ff inset; transition:border-color .18s, box-shadow .18s; margin:8px 8px 0px 0px; } .input_design_withdraw{ width:90% !important; height:clamp(48px, 6.9vw, 54px);line-height:clamp(48px, 6.9vw, 54px); /* 높이와 동일하게 */ border:1.5px solid #d9e3ef !important; border-radius:12px; background:#fff; padding:12px 14px; font-size:clamp(15.5px, 2.5vw, 17px); color:#0f172a; box-shadow:0 1px 0 #f6f9ff inset; transition:border-color .18s, box-shadow .18s; } .input_design:focus, .input_design_withdraw:focus{border-color:#2b6cf6 !important; box-shadow:0 0 0 4px rgba(43,108,246,.16)} .input_design[readonly]{background:#f3f6fb; color:#6b7280} /* .cm_mypage_action_bonus .input_design_withdraw {width:140px; background:#fff; height:31px; line-height:31px; border:1px solid #333; padding:0 10px; text-align:right; color:#333; font-size:15px; font-weight:600; margin:18px 0 3px 0} .cm_mypage_action_bonus .input_design_withdraw:focus {border:1px solid #ff0000;} */ .cm_member_form textarea, .textarea_design { width:100% !important; height:clamp(48px, 6.9vw, 54px);line-height:clamp(48px, 6.9vw, 54px); /* 높이와 동일하게 */ border:1.5px solid #d9e3ef !important; border-radius:12px; background:#fff; color:#0f172a; padding:12px 14px; font-size:clamp(15.5px, 2.5vw, 17px) !important; box-shadow:0 1px 0 #f6f9ff inset; transition:border-color .18s, box-shadow .18s; } /* ●●●●●●●●●● 입력폼테이블 */ .cm_member_form {} .cm_member_form ul {overflow:hidden;} .cm_member_form li {list-style:none; position:relative; border-bottom:1px solid #dedede; width:100%; clear:both;min-height:75px;} .cm_member_form .value {margin-left:90px; background:#fff; overflow:hidden; color:#333; letter-spacing:0px; font-size:15px;line-height:60px;} .cm_member_form .textarea_design {background:#f1f1f1; border:1px solid #c1c1c1; border-right:0; border-bottom:0; line-height:18px; height:90px; padding:10px; color:#666; border-radius:5px; font-size:15px; margin-bottom:5px; box-sizing:border-box; } .cm_member_form .textarea_design:focus {background-color:#ddd; color:#333} .cm_member_form .dash {float:left; margin:20px 5px 0 5px; font-size:15px; width:10px; height:1px; background:#ccc;} .cm_member_form label {border-radius:30px; border:1px solid #ddd; float:left; margin-right:5px; font-size:15px; line-height:20px; padding:5px 15px 5px 10px; margin-bottom:5px; box-sizing:border-box; } .cm_member_form .label_full {width:100%;} .cm_member_form .tip_txt {clear:both;} .cm_member_form .tip_txt dd {line-height:20px;padding:0px;margin-bottom:5px; color:#999; font-size:13px;} .cm_member_form .tip_txt dt {line-height:20px;padding:0px;margin-bottom:5px; color:#ff4949; font-size:13px;} .cm_member_form .opt25per {position:absolute;color:#333; height:40px; line-height:40px;padding-top:5%;font-weight:600;text-align:center;width:50%} .cm_member_form .value25per {margin-left:50%; background:#fff; border-left:1px solid #dedede; overflow:hidden; padding:12px; line-height:32px; color:#333; letter-spacing:0px;} /* Reset any conflicting base */ /*.select_design{ position:relative; display:block; width:100% }*/ /* (A) DIRECT ON … */ .select_design select{ -webkit-appearance:none; -moz-appearance:none; appearance:none; width:100%; height:clamp(48px, 6.9vw, 54px);line-height:clamp(48px, 6.9vw, 54px); /* 높이와 동일하게 */ padding:12px 44px 12px 14px; border:1.6px solid #d9e3ef; border-radius:12px; background:#fff; color:#0f172a; font-weight:800; font-size:clamp(15.5px, 2.5vw, 17px); letter-spacing:.1px; transition:border-color .18s, box-shadow .18s, background .18s; box-shadow:0 1px 0 #f6f9ff inset; } /* Arrow for wrapper container only (not when element is the select) */ .select_design:not(select)::after{ content:""; position:absolute; right:12px; top:50%; transform:translateY(-50%); width:22px; height:22px; pointer-events:none; background-repeat:no-repeat; background-position:center; background-size:20px 20px; background-image:url("data:image/svg+xml;utf8,\ \ \ "); } .select_design select:focus{border-color:#2b6cf6; box-shadow:0 0 0 4px rgba(43,108,246,.16)} .select_design select:disabled{background:#f3f6fb; color:#9aa3af; cursor:not-allowed} /* Wrapper size variants */ .select_design.sm select{height:44px; padding:10px 40px 10px 12px; border-radius:10px} .select_design.lg select{height:60px; padding:14px 46px 14px 16px; border-radius:14px} /* Wrapper state variants */ .select_design.is-error select{border-color:#ef4444; box-shadow:0 0 0 4px rgba(239,68,68,.16)} .select_design.is-success select{border-color:#10b981; box-shadow:0 0 0 4px rgba(16,185,129,.16)} .select_design.is-warning select{border-color:#f59e0b; box-shadow:0 0 0 4px rgba(245,158,11,.16)} /* ===== BUTTONS ===== */ .button_pack {clear:both;width:100%; !important;} .btn, .btn_primary, .btn_big, .btn_primary, .btn_lg_color, .btn_lg_black, .btn_lg_pink { display:flex; align-items:center; justify-content:center; gap:10px;width:100%; !important; padding:14px 18px; border-radius:12px; font-weight:900; border:1px solid transparent; cursor:pointer; transition:transform .15s, filter .15s, box-shadow .15s; font-size:clamp(15.5px, 2.8vw, 17.5px); } .btn_lg_color{ width:100%; !important; height: clamp(50px, 7.2vw, 56px); border:none; color:#fff !important; background:linear-gradient(135deg,#2b6cf6,#22b8ff); box-shadow:0 14px 36px rgba(43,108,246,.28); letter-spacing:.2px; } .btn_lg_color:hover{filter:saturate(1.05); transform:translateY(-1px)} .btn_lg_pink{ width:100%; !important; height: clamp(50px, 7.2vw, 56px); border:none; color:#fff !important; background:linear-gradient(135deg, #ff6ba6, #ff93b8); box-shadow:0 14px 36px rgba(43,108,246,.28); letter-spacing:.2px; } .btn_lg_pink:hover{filter:saturate(1.05); transform:translateY(-1px)} .btn_lg_black{ width:100%; !important; height: clamp(50px, 7.2vw, 56px); border:none; color:#fff !important; background:linear-gradient(135deg, #6b7280, #374151); box-shadow:0 14px 36px rgba(43,108,246,.28); letter-spacing:.2px; } .btn_lg_black:hover{filter:saturate(1.05); transform:translateY(-1px)} .btn_md_black {width:100%; !important;margin:5px 0px;background:#505258; color:#fff !important; border:1px solid #505258;font-size:13px; height:35px; line-height:35px; padding:0px 10px;display:inline-block;box-sizing: border-box;text-align:Center} .btn_md_white {width:100%; !important;margin:5px 0px;background:#fff; color:#333 !important; border:1px solid #ccc; font-size:13px; height:35px; line-height:35px; padding:0px 10px;display:inline-block;box-sizing: border-box;text-align:Center } .btn_sm_color {width:100%; !important;margin:5px 0px;background:#fb5074; color:#fff !important; border:1px solid #fb5074;font-size:12px; height:35px; line-height:35px; padding:0 10px;display:inline-block;box-sizing: border-box;text-align:Center} .btn_lg_white { display:flex; align-items:center; justify-content:center; gap:10px;width:100%; !important; padding:14px 18px; border-radius:12px; font-weight:900; border:1px solid transparent; cursor:pointer; transition:transform .15s, filter .15s, box-shadow .15s; font-size:clamp(15.5px, 2.8vw, 17.5px); } .btn_lg_white{ width:100%; !important; height: clamp(50px, 7.2vw, 56px); border:none; color:#fff !important; background:linear-gradient(135deg, #6b7280, #374151); box-shadow:0 14px 36px rgba(43,108,246,.28); letter-spacing:.2px; } .btn_lg_white:hover{filter:saturate(1.05); transform:translateY(-1px)} /* .cm_member_form .button_pack {margin-bottom:5px; clear:both} .button_pack {display:block; box-sizing:border-box; } .button_pack a,.button_pack input,.button_pack button {width:100%; text-align:center; background-image:none; position:relative; display:block; font-weight:normal; word-wrap:normal; word-break:keep-all; border-radius:3px; box-sizing:border-box; } .button_pack .btn_sm_white,.button_pack .btn_sm_black,.button_pack .btn_sm_color {font-size:12px; height:25px; line-height:23px; padding:0 10px;} .button_pack .btn_sm_white {background:#fff; color:#333 !important; border:1px solid #ccc; } .button_pack .btn_sm_black {background:#505258; color:#fff !important; border:1px solid #505258;} .button_pack .btn_sm_color {background:#fb5074; color:#fff !important; border:1px solid #fb5074; } .button_pack .btn_md_color {background:#fb5074; color:#fff !important; border:1px solid #fb5074; } .button_pack .btn_md_lightblue {background:#47cbfc; color:#fff !important; border:1px solid #47cbfc; } .button_pack .btn_lg_white,.button_pack .btn_lg_black,.button_pack .btn_lg_color {font-size:16px; height:50px; line-height:47px; padding:0 10px;} .button_pack .btn_lg_white {background:#fff; color:#333 !important; border:1px solid #ccc;} .button_pack .btn_lg_black {background:#505258; color:#fff !important; border:1px solid #505258;} .button_pack .btn_lg_color {background:#fb5074; color:#fff !important; border:1px solid #fb5074; } .button_pack .txt_sm_white,.button_pack .btn_sm_black,.button_pack .btn_sm_color {font-size:12px; height:14px; line-height:12px; line-height:14px\0; padding:2px 5px 0 2px !important;margin-top:2px;margin-right:2px;} .button_pack .txt_sm_white {background:#fff; color:#4374D9 !important; border:1px solid #4374D9;} .button_pack a.txt_sm_white {height:23px;} .button_pack .txt_pv_white,.button_pack .btn_sm_black,.button_pack .btn_sm_color {font-size:12px; height:14px; line-height:12px; line-height:14px\0; padding:2px 5px 0 0 !important;margin-top:2px;margin-right:2px;} .button_pack .txt_pv_white {background:#fff; color:#D941C5 !important; border:1px solid #D941C5;} .button_pack a.txt_pv_white {height:23px;} .button_pack .txt_sm_white:hover {background:#ececec !important; border:1px solid #bbb;} .button_pack .txt_sm_black {background:#505258; color:#fff !important; border:1px solid #505258;} .button_pack a.txt_sm_black {height:23px;} .button_pack .txt_sm_black:hover {background:#111 !important; border:1px solid #111;} .button_pack .txt_sm_color {background:#fb5074; color:#fff !important; border:1px solid #fb5074; } .button_pack a.txt_sm_color {height:23px;} .button_pack .txt_sm_color:hover {background:#fa0d3e !important; border:1px solid #fa0d3e;} .button_pack .per_sm_white,.button_pack .btn_sm_black,.button_pack .btn_sm_color {font-size:14px; height:16px; line-height:14px; line-height:16px\0; padding:0 4px !important;font-weight:bold;text-align:center;margin:0px 4px} .button_pack .per_sm_white {background:#ED0000; color:#fff !important; border:1px solid #ED0000; border-radius:10px; width:30px } .button_pack .per_white {font-size:11px;color:#fff !important;} .button_pack a.per_sm_white {height:23px;} .button_pack .per_sm_white:hover {background:#ececec !important; border:1px solid #bbb;} .button_pack .per_sm_black {background:#505258; color:#fff !important; border:1px solid #505258;} .button_pack a.per_sm_black {height:23px;} .button_pack .per_sm_black:hover {background:#111 !important; border:1px solid #111;} .button_pack .per_sm_color {background:#fb5074; color:#fff !important; border:1px solid #fb5074; } .button_pack a.per_sm_color {height:23px;} .button_pack .per_sm_color:hover {background:#fa0d3e !important; border:1px solid #fa0d3e;} */ /* ===== PAYMENT METHOD CARDS ===== */ .select_radio_trans { padding: 10px 0px; border:0px; margin:5px 0px; text-align: center; display: flex; justify-content: flex-end; } #_paymethod_rech,#_paymethod_online{display:none} #_paymethod_rech + label,#_paymethod_online + label{ flex:1 1 320px; display:flex; align-items:center; justify-content:center; padding:14px 10px; min-height: clamp(50px, 7.2vw, 56px); text-align:center; border:1px solid #d9e3ef; border-radius:12px; background:linear-gradient(180deg,#fff,#f3f8ff); font-weight:900; cursor:pointer; box-shadow:0 6px 16px rgba(0,0,0,.05); transition:.2s; font-size:clamp(15px, 2.4vw, 17px); } #_paymethod_rech:checked + label,#_paymethod_online:checked + label{ color:#fff; border-color:transparent; background:linear-gradient(135deg,#2b6cf6,#22b8ff); box-shadow:0 16px 40px rgba(43,108,246,.3); } #_paymethod_transform {display:none} #_paymethod_transform + label { flex:1 1 320px; display:flex; align-items:center; justify-content:center; padding:14px 10px; min-height: clamp(50px, 7.2vw, 56px); text-align:center; border:1px solid #d9e3ef; border-radius:12px; background:linear-gradient(180deg,#fff,#f3f8ff); font-weight:900; cursor:pointer; box-shadow:0 6px 16px rgba(0,0,0,.05); transition:.2s; font-size:clamp(15px, 2.4vw, 17px); } #_paymethod_transform:checked + label { color:#fff; border-color:transparent; background:linear-gradient(135deg,#2b6cf6,#22b8ff); box-shadow:0 16px 40px rgba(43,108,246,.3); } /* .select_radio_trans { padding: 10px 0px; border:0px; margin:5px 0px; text-align: center; display: flex; justify-content: flex-end; } .select_radio_trans input[type=radio]{ display: none; } .select_radio_trans input[type=radio]+label{ border-radius:0px; display: inline-block; cursor: pointer; height: 45px; width: 100%; border: 1px solid #333; line-height: 33px; text-align: center; font-weight:bold; font-size:15px; padding:5px; margin:0px 2px; } .select_radio_trans input[type=radio]+label{ background-color: #fff; color: #f9677e; border: 1px solid #f9677e; } .select_radio_trans input[type=radio]:checked+label{ background-color: #f9677e; color: #fff; border: 1px solid #f9677e; } */ .cm_order_search_unique {background:#fff; margin:15px 0; overflow:hidden; padding:0 10px} .cm_order_search_unique .period {overflow:hidden; display:table; width:100%; box-sizing:border-box;} .cm_order_search_unique .period ul {display:table-row; } .cm_order_search_unique .period li {list-style:none; display:table-cell; width:1%;} .cm_order_search_unique .period li a {font-size:14px;font-weight:400} .cm_order_search_unique .period .btn {display:block; padding:0 10px; line-height:30px; background:#fff; text-align:center; border:1px solid #ddd; border-right:0} .cm_order_search_unique .period li:last-of-type .btn {border-right:1px solid #ddd} .cm_order_search_unique .period .hit .btn {background:#485362; border:1px solid #485362; color:#fff; border-right:0 !important} .cm_order_search_unique .period .hit+ li .btn {border-left:0} .cm_order_search_unique .detail {overflow:hidden; margin-top:10px; position:relative;} .cm_order_search_unique .detail .input_wrap {} .cm_order_search_unique .detail .input_wrap li {list-style:none; width:50%; float:left; box-sizing:border-box; padding:0 7px 0 0; position:relative;} .cm_order_search_unique .detail .input_wrap li:last-of-type:before {content:'~'; position:absolute; left:0; top:0; width:14px; text-align:center; margin-left:-7px; font-size:15px; line-height:35px;} .cm_order_search_unique .detail .input_wrap li:last-of-type {padding:0 0 0 7px} .cm_order_search_unique .detail .input_date {border:1px solid #ddd; height:35px; box-sizing:border-box; padding:0 0 0 26px; width:100%; background:#fff url('../images/cm_images/ic_date.png') 8px center no-repeat; background-size:13px; letter-spacing:0} .cm_order_search_unique .detail .input_date:focus {border:1px solid #666;} .cm_order_search_unique .detail .dash {float:left; margin:0 5px; line-height:35px; font-size:14px} .token_tid .area div > #en_qr {display:flex; align-items:center; justify-content:center;width: 100%;margin:0px auto;padding:0px 100px} @media (min-width:800px) { .token_tid .area div > #en_qr {padding:0px 200px} } @media screen and (max-width: 500px) { .token_tid .area div > #en_qr {padding:0px 50px} } .token_tid{clear:both;height:150px;width:100%;} .token_tid .top{width:100%;background:#7fb3ff;padding-top:20px} .token_tid .top h2{font-size:14px;font-weight:700;color:#fff;padding-bottom:16px} .token_tid .top h2 img{width:32px;height:auto;vertical-align:middle;margin-right:8px} .token_tid .top strong{font-size:24px;color:#fff;font-weight:700;text-align:right;display:block;padding-right:17px} .token_tid .top strong img{width:24px;height:auto;vertical-align:middle;margin-right:12px} .token_tid .top ul{margin-top:18px;padding-bottom:8px;padding-left:0} .token_tid .top ul li{float:left;width:25%} .token_tid .top ul li a{display:block;width:100%;height:100%} .token_tid .top ul li a .icon{display:block;text-align:center} .token_tid .top ul li a .icon img{width:32px;height:auto} .token_tid .top ul li a h3{font-weight:700;text-align:center;color:#fff;padding-top:4px} .token_tid .mid{background:#fff;width:100%;padding-bottom:12px} .token_tid .mid .area{width:95%;margin:0 auto;padding-top:8px} .token_tid .mid .area .tit{position:relative;height:32px;width:100%;margin-bottom:12px} .token_tid .mid .area .tit .prev{position:absolute;left:0;top:50%;margin-top:-12px} .token_tid .mid .area .tit .prev img{width:24px;height:auto} .token_tid .mid .area .tit h3{position:absolute;top:50%;left:50%;margin-top:-16px;margin-left:-76px;width:152px;height:32px;line-height:32px;text-align:center;color:#3a79c7;-webkit-border-radius:16px; -moz-border-radius:16px; border-radius:16px;} .token_tid .mid .area .tit .next{position:absolute;right:0;top:50%;margin-top:-12px} .token_tid .mid .area .tit .next img{width:24px;height:auto} .token_tid .mid .area .txt{width:100%;} .token_tid .mid .area .txt .box{width:100%;} .token_tid .mid .area .txt p{word-wrap: break-word;background:#f2f2f2;padding:7px 5px;font-weight:700;font-size:19px;font-weight:normal;text-align:center} .token_tid .mid .area .txt .btn_wrap_tid{margin-top:12px;width:100%;font-weight:bold;} .token_tid .mid .area .txt .btn_wrap_tid a{float:left;width:100%;height:40px;line-height:40px;font-size:14px;text-align:center} .token_tid .mid .area .txt .btn_wrap_tid a.add{border:1px solid #3a79c7;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-border-radius:7px; -moz-border-radius:7px; border-radius:7px;color:#3a79c7} .token_tid .mid .area .txt .btn_wrap_tid a.copy{background:#3a79c7;-webkit-border-radius:7px; -moz-border-radius:7px; border-radius:7px;color:#fff;} .token_tid .mid .area .txt .btn_wrap_tid a img{width:15px;height:auto;margin-right:7px;margin-top:-5px;vertical-align:middle} .token_tid .btm{background:#fff;margin-top:12px} .token_tid .btm .area{width:90%;margin:0 auto} .token_tid .btm .area ul{width:100%} .token_tid .btm .area ul li{padding:13px 0;border-bottom:1px solid #efefef;width:100%} .token_tid .btm .area ul li a{display:block;width:100%;height:32px;line-height:32px;} .token_tid .btm .area ul li a > *{float:left;} .token_tid .btm .area ul li a .icon img{width:32px;height:auto;vertical-align:middle;margin-right:20px} .token_tid .btm .area ul li a h4{width:70%;font-weight:700;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal;overflow:hidden;} .token_tid .btm .area ul li.alarm a .icon{margin-right:20px} .token_tid .btm .area ul li.alarm a .icon em{display:block;width:28px;height:16px;background:#f9e7ba;text-align:center;line-height:16px;color:#3a79c7;-webkit-border-radius:8px; -moz-border-radius:8px; border-radius:8px;margin-top:4px} .token_tid .btm .area ul li.alarm a .icon img{width:16px;height:auto;display:block;margin-left:auto;margin-right:auto} .token_tid .btm .area ul li.alarm a h4{line-height:1;padding-bottom:8px} .token_tid .btm .area ul li.alarm a p{color:#ccc;line-height:1} .token_tid .black{position:fixed;top:0;left:0;width:100%;height:100%;background:#000;opacity:0;filter:Alpha(opacity=0);z-index:9;display:none;} /*게시판 칸이 잘 안맞아서 스킨공통 사용 m.default_setting.css 에서 이동 common */ .lineup {display:inline-block;} .wrap {width:100%; height:100%; position:relative;} .clear {clear:both} .upper_link {position:absolute; left:0; top:0; width:100%; height:100%; z-index:2} .select_radio_trans_purple { padding: 10px 0px; border:0px; margin:5px 0px; text-align: center; display: flex; justify-content: flex-end; } .select_radio_trans_purple input[type=radio]{ display: none; } .select_radio_trans_purple input[type=radio]+label{ border-radius:0px; display: inline-block; cursor: pointer; height: 45px; width: 100%; /*border: 1px solid #333;*/ border: 1px solid #333; line-height: 33px; text-align: center; font-weight:bold; font-size:15px; padding:5px 0px; box-sizing: border-box; margin:0px 2px; } .select_radio_trans_purple input[type=radio]+label{ background-color: #fff; color: #d941c5; border: 1px solid #d941c5; box-sizing: border-box; } .select_radio_trans_purple input[type=radio]:checked+label{ background-color: #d941c5; color: #fff; border: 1px solid #d941c5; box-sizing: border-box; } .select_radio_product_box { padding: 0px 0px; border:0px; margin:5px 0px; text-align: center; /* display: flex; justify-content: flex-end; */ } .select_radio_product_box input[type=radio]{ display: none; } .select_radio_product_box input[type=radio]+label{ border-radius:0px; display: inline-block; cursor: pointer; height: 270px; width: 49%; /*border: 1px solid #333;*/ border: 1px solid #333; line-height: 33px; text-align: center; font-weight:bold; font-size:15px; padding:5px; margin:2px 2px; } .select_radio_product_box input[type=radio]+label{ background-color: #fff; color: #608c3c; border: 1px solid #608c3c; } .select_radio_product_box input[type=radio]:checked+label{ background-color: #94bd48; color: #fff; border: 1px solid #608c3c; } .select_radio_pack_box { padding: 0px 0px; border:0px; margin:5px 0px; text-align: center; /* display: flex; justify-content: flex-end; */ } .select_radio_pack_box input[type=radio]{ display: none; } .select_radio_pack_box input[type=radio]+label{ border-radius:0px; display: inline-block; cursor: pointer; height: 100px; width: 48%; /*border: 1px solid #333;*/ border: 1px solid #333; line-height: 33px; text-align: center; font-weight:bold; font-size:15px; padding:5px; margin:2px 2px; } .select_radio_pack_box input[type=radio]+label{ background-color: #fff; color: #608c3c; border: 1px solid #999; } .select_radio_pack_box input[type=radio]:checked+label{ background-color: #fea832; color: #fff; border: 2px solid #4da6ff; } .select_radio_pack_box_radius { padding: 0px 0px; border:0px; margin:5px 0px; text-align: center; } .select_radio_pack_box_radius input[type=radio]{ display: none; } .select_radio_pack_box_radius input[type=radio]+label{ border-radius:12px; display: inline-block; cursor: pointer; height: 120px; width: 48%; border: 1px solid #333; text-align: center; font-weight:bold; font-size:15px; } .select_radio_pack_box_radius input[type=radio]+label{ background-color: #fff; color: #608c3c; border: 1px solid #999; } .select_radio_pack_box_radius input[type=radio]:checked+label{ background-color: #fea832; color: #fff; border: 2px solid #4da6ff; } .select_radio_trans_1 { padding: 0px 0px; border:0px; margin:5px; } .select_radio_trans_1 input[type=radio]{ display: none; } .select_radio_trans_1 input[type=radio]+label{ border-radius:0px; display: inline-block; cursor: pointer; height: 45px; width: 100%; /*border: 1px solid #333;*/ border: 1px solid #333; line-height: 33px; text-align: center; font-weight:bold; font-size:15px; padding:5px; } .select_radio_trans_1 input[type=radio]+label{ background-color: #fff; color: #ea4335; border: 1px solid #ea4335; } .select_radio_trans_1 input[type=radio]:checked+label{ background-color: #ea4335; color: #fff; border: 1px solid #ea4335; } .select_radio_trans_2 { padding: 0px 0px; border:0px; margin:5px; text-align: center; display: flex; justify-content: flex-end; } .select_radio_trans_2 input[type=radio]{ display: none; } .select_radio_trans_2 input[type=radio]+label{ border-radius:0px; display: inline-block; cursor: pointer; height: 45px; width: 100%; /*border: 1px solid #333;*/ border: 1px solid #333; line-height: 33px; text-align: center; font-weight:bold; font-size:15px; padding:5px; } .select_radio_trans_2 input[type=radio]+label{ background-color: #fff; color: #ea4335; border: 1px solid #ea4335; } .select_radio_trans_2 input[type=radio]:checked+label{ background-color: #ea4335; color: #fff; border: 1px solid #ea4335; } /* .select_radio_trans_2 input[type=radio]:first-child + label { width: 100%; } */ /* .select_radio_trans_2 > input[type=radio]:nth-child(1) + label { width: 100%; } */ /* .select_radio_trans_2 input[type=radio]:first-child:nth-last-child(1), label { width: 100%; } .select_radio_trans_2 input[type=radio]:first-child:nth-last-child(2), input[type=radio]:first-child:nth-last-child(2) ~ input[type=radio], label { width: 49%; } */ /* HTML CSSResult Skip Results Iframe EDIT ON body { margin:0; } ul { padding: 0 1em; margin: 1em 0; list-style: none; } ul:after { display: block; content: ""; clear: both; } li { float: left; outline: 2px solid gray; font-weight: bold; text-align: center; line-height: 2; } li:first-child:nth-last-child(1) { width: 100%; background-color: hsl(0,100%,80%); } li:first-child:nth-last-child(2), li:first-child:nth-last-child(2) ~ li { width: 50%; background-color: hsl(60,100%,80%); } li:first-child:nth-last-child(3), li:first-child:nth-last-child(3) ~ li { width: 33.3333%; background-color: hsl(120,100%,80%); } li:first-child:nth-last-child(4), li:first-child:nth-last-child(4) ~ li { width: 25%; background-color: hsl(180,100%,80%); } HTML CSSResult Skip Results Iframe EDIT ON */ /* .select_radio_trans_2 input[type=radio]:first-child:nth-last-child(n), input[type=radio]:first-child:nth-last-child(n) ~ input[type=radio], label { width: 1 / n * 100%; } */ /* .select_radio_trans_2 input[type=radio]:nth-last-child(n + 2) + label ~ input[type=radio] + label, label:nth-last-child(2) { width: 50%; } */ /* .select_radio_trans_2 input[type=radio]:nth-last-child(1) ~ input[type=radio], .select_radio_trans_2 label:nth-last-child(1) ~ label { width: 100%; } */ /* .select_radio_trans_2 input[type=radio]:nth-last-child(2) ~ input + label { width: 50%; } */ /* .select_radio_trans_2 input:first-child:nth-last-child(1) + label, .select_radio_trans_2 input:first-child:nth-last-child(1) + label ~ input + label { width: 100%; } */ /* .select_radio_trans_2 input[type=radio]:first-child:nth-last-child(1) + label, .select_radio_trans_2 input[type=radio]:first-child:nth-last-child(1) + label ~ input[type=radio] + label { width: 100%; } */ /* .select_radio_trans_2 input[type=radio] + label:first-child:nth-last-child(1), .select_radio_trans_2 input[type=radio] + label:first-child:nth-last-child(1) ~ input[type=radio] + label { width: 100%; } */ /* .select_radio_trans_2 input[type=radio]:first-child:nth-last-child(n) + label, input[type=radio]:first-child:nth-last-child(n) + label ~ input[type=radio] + label { width: 1 / n * 100%; } */ /* .select_radio_trans_2 input[type=radio]+label:first-child { width: 100%; } .select_radio_trans_2 input[type=radio]:checked+label:first-child { width: 100%; } */ /* .select_radio_trans_2 > label:first-child:nth-last-child(n), label:first-child:nth-last-child(n) ~ label { width: 100%; } */ /* .select_radio_trans_2 input[type=radio]+label:first-child:nth-last-child(n), input[type=radio]+label:first-child:nth-last-child(n) ~ input { width: 1 / n * 100%; } */ .select_radio_trans_3 { padding: 0px 0px; border:0px; margin:5px; text-align: center; } .select_radio_trans_3 input[type=radio]{ display: none; } .select_radio_trans_3 input[type=radio]+label{ border-radius:0px; display: inline-block; cursor: pointer; height: 45px; width: 32%; /*border: 1px solid #333;*/ border: 1px solid #333; line-height: 33px; text-align: center; font-weight:bold; font-size:15px; padding:5px; } .select_radio_trans_3 input[type=radio]+label{ background-color: #fff; color: #ea4335; border: 1px solid #ea4335; } .select_radio_trans_3 input[type=radio]:checked+label{ background-color: #ea4335; color: #fff; border: 1px solid #ea4335; } .select_radio_trans_4 { padding: 0px 0px; border:0px; margin:5px; text-align: center; } .select_radio_trans_4 input[type=radio]{ display: none; } .select_radio_trans_4 input[type=radio]+label{ border-radius:0px; display: inline-block; cursor: pointer; height: 45px; width: 24.2%; /*border: 1px solid #333;*/ border: 1px solid #333; line-height: 33px; text-align: center; font-weight:bold; font-size:15px; padding:5px; } .select_radio_trans_4 input[type=radio]+label{ background-color: #fff; color: #ea4335; border: 1px solid #ea4335; } .select_radio_trans_4 input[type=radio]:checked+label{ background-color: #ea4335; color: #fff; border: 1px solid #ea4335; } .select_radio_trans_4_purple { padding: 0px 0px; border:0px; margin:5px 0px; text-align: center; } .select_radio_trans_4_purple input[type=radio]{ display: none; } .select_radio_trans_4_purple input[type=radio]+label{ border-radius:0px; display: inline-block; cursor: pointer; height: 45px; width: 24.5%; /*border: 1px solid #333;*/ border: 1px solid #333; line-height: 33px; text-align: center; font-weight:bold; font-size:15px; padding:5px 0px; box-sizing: border-box; } .select_radio_trans_4_purple input[type=radio]+label{ background-color: #fff; color: #d941c5; border: 1px solid #d941c5; box-sizing: border-box; } .select_radio_trans_4_purple input[type=radio]:checked+label{ background-color: #d941c5; color: #fff; border: 1px solid #d941c5; box-sizing: border-box; } /* ●●●●●●●●●● 하단 버튼 */ .cm_bottom_button {overflow:hidden; box-sizing:border-box; margin:20px 0 20px 0; margin-left:auto !important; margin-right:auto !important;} .cm_bottom_button li {list-style:none; width:50%; float:left; box-sizing:border-box; padding:0 2px 0 0; overflow:hidden;} .cm_bottom_button li:nth-of-type(2n) {padding:0 0 0 2px} .cm_bottom_button li:only-of-type {width:100%; float:none; padding:0} .cm_bottom_button ul {overflow:hidden;} .cm_bottom_button ul:last-of-type {margin-top:4px;} .cm_bottom_button ul:only-of-type {margin:0} /* 리스트테이블 */ .list_return { margin-top:15px;} .cm_bonus_list1 { width:100%; background:#fff; border:1px solid #e7edf5; border-radius:12px; overflow-x:auto; -webkit-overflow-scrolling:touch; /* ✅ 스크롤 활성 */ box-shadow:0 4px 14px rgba(0,0,0,.04) } .cm_bonus_list1 .list_TB {display:flex; flex-direction:column; width:100%; min-width:460px; /* ← 핵심 */} .cm_bonus_list1 .list_TB ul{border-bottom:1px solid #e7edf5; display:grid; grid-template-columns:1fr; min-width:460px; align-items:center; margin:0; padding:0; list-style:none; font-size:clamp(13.5px, 2.0vw, 15px) } .cm_bonus_list1 .list_TB:first-child ul{background:#f9fafb; border-bottom:1.5px solid #e5e7eb; font-weight:900; color:#374151} .cm_bonus_list1 .list_TB ul li{padding:8px 4px; border-right:1px solid #f1f3f5; text-align:center;font-size:14px;} .cm_bonus_list1 .list_TB ul li:last-child{border-right:none} .cm_bonus_list2 { width:100%; background:#fff; border:1px solid #e7edf5; border-radius:12px; overflow-x:auto; -webkit-overflow-scrolling:touch; /* ✅ 스크롤 활성 */ box-shadow:0 4px 14px rgba(0,0,0,.04) } .cm_bonus_list2 .list_TB {display:flex; flex-direction:column; width:100%; min-width:460px; /* ← 핵심 */} .cm_bonus_list2 .list_TB ul{border-bottom:1px solid #e7edf5; display:grid; grid-template-columns:1fr 1fr; min-width:460px; align-items:center; margin:0; padding:0; list-style:none; font-size:clamp(13.5px, 2.0vw, 15px) } .cm_bonus_list2 .list_TB:first-child ul{background:#f9fafb; border-bottom:1.5px solid #e5e7eb; font-weight:900; color:#374151} .cm_bonus_list2 .list_TB ul li{padding:8px 4px; border-right:1px solid #f1f3f5; text-align:center;font-size:14px;} .cm_bonus_list2 .list_TB ul li:last-child{border-right:none} .cm_bonus_list3 { width:100%; background:#fff; border:1px solid #e7edf5; border-radius:12px; overflow-x:auto; -webkit-overflow-scrolling:touch; /* ✅ 스크롤 활성 */ box-shadow:0 4px 14px rgba(0,0,0,.04) } .cm_bonus_list3 .list_TB {display:flex; flex-direction:column; width:100%; min-width:460px; /* ← 핵심 */} .cm_bonus_list3 .list_TB ul{border-bottom:1px solid #e7edf5; display:grid; grid-template-columns:1fr 1fr 1fr; min-width:460px; align-items:center; margin:0; padding:0; list-style:none; font-size:clamp(13.5px, 2.0vw, 15px) } .cm_bonus_list3 .list_TB:first-child ul{background:#f9fafb; border-bottom:1.5px solid #e5e7eb; font-weight:900; color:#374151} .cm_bonus_list3 .list_TB ul li{padding:8px 4px; border-right:1px solid #f1f3f5; text-align:center;font-size:14px;} .cm_bonus_list3 .list_TB ul li:last-child{border-right:none} .cm_bonus_list4 { width:100%; background:#fff; border:1px solid #e7edf5; border-radius:12px; overflow-x:auto; -webkit-overflow-scrolling:touch; /* ✅ 스크롤 활성 */ box-shadow:0 4px 14px rgba(0,0,0,.04) } .cm_bonus_list4 .list_TB {display:flex; flex-direction:column; width:100%; min-width:460px; /* ← 핵심 */} .cm_bonus_list4 .list_TB ul{border-bottom:1px solid #e7edf5; display:grid; grid-template-columns:1fr 1fr 1fr 1fr; min-width:460px; align-items:center; margin:0; padding:0; list-style:none; font-size:clamp(13.5px, 2.0vw, 15px) } .cm_bonus_list4 .list_TB:first-child ul{background:#f9fafb; border-bottom:1.5px solid #e5e7eb; font-weight:900; color:#374151} .cm_bonus_list4 .list_TB ul li{padding:8px 4px; border-right:1px solid #f1f3f5; text-align:center;font-size:14px;} .cm_bonus_list4 .list_TB ul li:last-child{border-right:none} .cm_bonus_list5 { width:100%; background:#fff; border:1px solid #e7edf5; border-radius:12px; overflow-x:auto; -webkit-overflow-scrolling:touch; /* ✅ 스크롤 활성 */ box-shadow:0 4px 14px rgba(0,0,0,.04) } .cm_bonus_list5 .list_TB {display:flex; flex-direction:column; width:100%; min-width:460px; /* ← 핵심 */} .cm_bonus_list5 .list_TB ul{border-bottom:1px solid #e7edf5; display:grid; grid-template-columns:1fr 1fr 1fr 1fr 1fr; min-width:460px; align-items:center; margin:0; padding:0; list-style:none; font-size:clamp(13.5px, 2.0vw, 15px) } .cm_bonus_list5 .list_TB:first-child ul{background:#f9fafb; border-bottom:1.5px solid #e5e7eb; font-weight:900; color:#374151} .cm_bonus_list5 .list_TB ul li{padding:8px 4px; border-right:1px solid #f1f3f5; text-align:center;font-size:14px;} .cm_bonus_list5 .list_TB ul li:last-child{border-right:none} /* ●●●●●●●●●● 내용없음 */ .cm_no_conts {text-align:center; overflow:hidden; padding:30px 0 30px 0;} .cm_no_conts .no_icon {background:transparent url('../images/cm_images/no_conts.png') center bottom no-repeat; height:70px; background-size:60px;} .cm_no_conts .gtxt {color:#b2b2b2 !important; margin-top:10px; font-size:13px} .table_cm_bonus_list1 .list_TB {width:100%; background:#fff;clear:both; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.09);border-radius: 10px;border-top:1px solid #ddd;} .table_cm_bonus_list1 .list_TB li {vertical-align:middle;border-bottom:1px solid #ddd;border-left:1px solid #ddd;float:left;text-align:center;padding-top:5px;padding-bottom:5px;width:100%;padding-right:3px;list-style:none;overflow:hidden;height:35px; font-size:11px;} .table_cm_bonus_list1 .list_TB li:last-child { border-right:1px solid #ddd;} .table_cm_bonus_list2 .list_TB {width:100%; background:#fff;clear:both; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.09);border-radius: 10px;border-top:1px solid #ddd;} .table_cm_bonus_list2 .list_TB li {vertical-align:middle;border-bottom:1px solid #ddd;border-left:1px solid #ddd;float:left;text-align:center;padding-top:5px;padding-bottom:5px;width:50%;padding-right:3px;list-style:none;overflow:hidden;height:35px; font-size:11px;} .table_cm_bonus_list2 .list_TB li:last-child { border-right:1px solid #ddd;} .table_cm_bonus_list3 .list_TB {width:100%; background:#fff;clear:both; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.09);border-radius: 10px;border-top:1px solid #ddd;} .table_cm_bonus_list3 .list_TB li {vertical-align:middle;border-bottom:1px solid #ddd;border-left:1px solid #ddd;float:left;text-align:center;padding-top:5px;padding-bottom:5px;width:33.33%;padding-right:3px;list-style:none;overflow:hidden;height:35px; font-size:11px;} .table_cm_bonus_list3 .list_TB li:last-child { border-right:1px solid #ddd;} .table_cm_bonus_list4 .list_TB {width:100%; background:#fff;clear:both; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.09);border-radius: 10px;border-top:1px solid #ddd;} .table_cm_bonus_list4 .list_TB li {vertical-align:middle;border-bottom:1px solid #ddd;border-left:1px solid #ddd;float:left;text-align:center;padding-top:5px;padding-bottom:5px;width:25%;padding-right:3px;list-style:none;overflow:hidden;height:35px; font-size:11px;} .table_cm_bonus_list4 .list_TB li:last-child { border-right:1px solid #ddd;} .table_cm_bonus_list5 .list_TB {width:100%; background:#fff;clear:both; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.09);border-radius: 10px;border-top:1px solid #ddd;} .table_cm_bonus_list5 .list_TB li {vertical-align:middle;border-bottom:1px solid #ddd;border-left:1px solid #ddd;float:left;text-align:center;padding-top:5px;padding-bottom:5px;width:20%;padding-right:3px;list-style:none;overflow:hidden;height:35px; font-size:11px; } .table_cm_bonus_list5 .list_TB li:last-child { border-right:1px solid #ddd;} /* 2026-01-06 table_cm_bonus_list : wrap text + auto row height + optional fixed width */ .table_cm_bonus_list{ width:100%; background:#fff; border:1px solid #ddd; } .table_cm_bonus_list .list_TB{ width:100%; border-top:1px solid #ddd; } .table_cm_bonus_list .list_TB:first-child{ border-top:0; } /* ul = row */ .table_cm_bonus_list .list_TB > ul{ display:flex; flex-wrap:nowrap; /* ✅ 칸은 한줄 유지 */ width:100%; margin:0; padding:0; list-style:none; /* ✅ 높이 가변 */ align-items:stretch; } /* li = cell (default: auto equal) */ .table_cm_bonus_list .list_TB > ul > li{ flex:1 1 0; /* ✅ li 개수에 따라 자동 균등 */ min-width:0; /* ✅ 균등분배 유지 */ box-sizing:border-box; border-left:1px solid #ddd; padding:8px 10px; /* ✅ 높이 고정 제거 → 내용 길면 자동으로 늘어남 */ height:auto; min-height:36px; display:flex; align-items:center; justify-content:center; font-size:12px; line-height:1.35; text-align:center; /* ✅ 줄바꿈 허용(안 잘리게) */ white-space:normal; overflow:visible; /* ✅ 긴 영문/URL도 줄바꿈되게 */ word-break:break-word; overflow-wrap:anywhere; } .table_cm_bonus_list .list_TB > ul > li:first-child{ border-left:0; } /* header style (optional) */ .table_cm_bonus_list .list_TB:first-child > ul > li{ background:#f7f7f7; font-weight:700; } /* ✅ 선택: 특정 칸 너비 고정 */ .table_cm_bonus_list .list_TB > ul > li.its-col-fixed{ flex:0 0 var(--its-col-w, 120px); width:var(--its-col-w, 120px); } /* (선택) 텍스트 정렬 유틸 */ .table_cm_bonus_list .list_TB > ul > li.its-ta-left{ justify-content:flex-start; text-align:left; } .table_cm_bonus_list .list_TB > ul > li.its-ta-right{ justify-content:flex-end; text-align:right; } /* ========================================================= 2026-01-06 table_cm_bonus_list : column override helpers - 기본: li는 flex:1 1 0 (균등) - 아래 규칙으로 원하는 칸만 고정폭/비율로 덮어쓰기 ========================================================= */ /* ✅ 1) nth-child로 "고정폭(px)" 주기 (나머지는 자동 균등) */ /* .table_cm_bonus_list .list_TB > ul > li:nth-child(1){ flex:0 0 110px; width:110px; } .table_cm_bonus_list .list_TB > ul > li:nth-child(3){ flex:0 0 90px; width:90px; } */ /* ✅ 2) nth-child로 "비율(가중치)" 주기 - 예: 4번 칸(내용)을 더 넓게(3배) */ /*.table_cm_bonus_list .list_TB > ul > li:nth-child(4){ flex:3 1 0; }*/ /* ✅ 3) 특정 list(테이블)만 다르게 적용하고 싶으면 list_TB에 클래스 붙여서 범위 제한 가능 */ /* .table_cm_bonus_list .list_TB.its-cols-a > ul > li:nth-child(1){ flex:0 0 120px; width:120px; } .table_cm_bonus_list .list_TB.its-cols-a > ul > li:nth-child(2){ flex:1 1 0; } .table_cm_bonus_list .list_TB.its-cols-a > ul > li:nth-child(3){ flex:1 1 0; } .table_cm_bonus_list .list_TB.its-cols-a > ul > li:nth-child(4){ flex:4 1 0; } .table_cm_bonus_list .list_TB.its-cols-a > ul > li:nth-child(5){ flex:0 0 90px; width:90px; } */ /* ✅ 4) 안전장치: 균등/비율 분배 깨지지 않게 */ .table_cm_bonus_list .list_TB > ul > li{ min-width:0; } /* 긴 글자 있어도 분배 유지 */ /* select */ .select_drop_menu {width:120px; height:40px; overflow:hidden; position:relative;border:1px solid #ccc4b2; -webkit-border-radius:10px; background:#f7f7f7} .select_drop_menu select {width:110px; height:27px; color:#666; font-size:11px; text-indent:5px; letter-spacing:-1px; position:absolute; left:0; top:0; border:none; -webkit-appearance:none; background:transparent;} .select_drop_menu .ic_arrow {width:40px; height:40px; position:absolute; right:0; top:0; text-align:center; } .select_drop_menu .ic_arrow img {width:10px;margin-top:8px;margin-right:-10px} .select_drop_menu_type2 {width:100%; height:30px; overflow:hidden; position:relative;margin:5px 0px; border:1px solid #ccc4b2; -webkit-border-radius:10px; background:#f7f7f7} .select_drop_menu_type2 select {width:100%; height:27px; color:#666; font-size:14px; text-indent:5px; letter-spacing:-1px; position:absolute; left:0; top:0; border:none; -webkit-appearance:none; background:transparent;} .select_drop_menu_type2 .ic_arrow {width:40px; height:40px; position:absolute; right:0; top:0; text-align:center; } .select_drop_menu_type2 .ic_arrow img {width:15px; height:15px;margin-top:8px;margin-right:-10px} /*notice*/ .notice_bottom {border-bottom:1px solid #bbb;height:35px;line-height: 35px;width: 100%;padding-left: 35px;background-image: url("../images/animation/siren.gif");background-size:20px;background-repeat: no-repeat;background-position: 8px 2px;background-color:fff;overflow: hidden;bottom: 0;} .notice_bottom p { position:absolute;} .notice_bottom .notice_link { font-size:14px} .notice_bottom .ndate { text-align:right;margin-right:20px} .notice_bottom_my01 {height:70px;line-height: 70px;width: 100%;margin-left: 80px;padding-left: 50px;background-image: url("../images/icon_notice.svg");background-repeat: no-repeat;background-position: 20px 22px;background-color:var(--main-bg-white);border-top:1px solid var(--border-line-color);overflow: hidden;position: fixed;bottom: 0;} .notice_bottom_my01 p { position:absolute; bottom: -50px;} .notice_bottom_my01xx {margin-left: 0px;} .notice_bottom_my01xx p {width: 80%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;} .notice_bottom_my01xx {height:50px;line-height: 50px;width: 100%;padding-left: 50px;background-image: url("../images/icon_notice.svg");background-repeat: no-repeat;background-position: 15px 15px;background-color:var(--main-bg-white);border-top:1px solid var(--border-line-color);overflow: hidden;position: fixed;bottom: 0;} .notice_bottom_my01xx p { position:absolute; bottom: -50px;} /*.li_wrap_start_ul { display:grid; grid-template-columns:1fr 0% 0% 0%; }*/ .li_wrap_start_ul .li_wrap_start {display:flex; flex-direction:column;min-width:820px } /*.li_wrap_start_ul .li_wrap_start .li_wrap_div_step { width:100%;clear:both;text-align:left;margin-left:3%; }*/ .li_wrap_start_ul .li_wrap_start .li_wrap_div_step { width:100%;clear:both;text-align:center;} .li_wrap_start_ul .li_wrap_start .li_wrap_div_step .li_wrap_span {text-align:left;padding-left:25px;font-size:15px;color:#ff396f;font-weight:bold;} .li_wrap_start_ul .li_wrap_start .li_wrap_div_step .li_wrap_icon { position:relative; } .li_wrap_start_ul .li_wrap_start .li_wrap_div_step .li_wrap_icon::before { filter: invert(34%) sepia(83%) saturate(3582%) hue-rotate(327deg) brightness(112%) contrast(101%); content:""; position:absolute; inset:0; margin:auto; width:20px; height:20px; background-repeat:no-repeat; background-position:center; background-size:20px 20px; background-image:url("data:image/svg+xml;utf8,\ \ \ \ \ "); } .action-group { display: flex; align-items: flex-start; /*justify-content: space-between;*/ /*padding: 0px 16px 10px 16px;*/ background: #fff; } .listview-title { color: #958d9e; padding: 7px 16px; font-size: 13px; font-weight: 500; } .sidebar-balance { width:50%; text-align:center; margin-bottom:10px; } .sidebar-balance .listview-title { color: #302f54; font-size: 20px; text-align:center; } .sidebar-balance .amount { font-weight: 700; letter-spacing: -0.01em; line-height: 1em; font-weight: 32px; color: #3a79c7; text-align:center; } .main_section .admin_menu {padding:10px 10px 5px 10px; overflow:hidden; text-align:center;} .main_section .admin_menu li {list-style:none; box-sizing:border-box; padding:0 0 8px 0;} .main_section .admin_menu .menu {background:#fff; display:block; padding:12px 15px 10px 10px; box-sizing:border-box; border-radius:4px; border:1px solid #ccc; overflow:hidden; position:relative;} .main_section .admin_menu .menu img {width:28px; float:left;} .main_section .admin_menu .txt {float:left; font-size:16px; letter-spacing:-1px; margin-left:5px} .main_section .admin_menu .menu:after {content:''; position:absolute; right:15px; top:17px; width:10px; height:10px; border:1px solid rgba(0,0,0,0.3); border-left:0; border-bottom:0; transform: rotate(45deg); -webkit-transform: rotate(45deg);} .main_section .admin_menu_50 {padding:10px 10px 5px 10px; text-align:center;width:50%;float:left;} .main_section .admin_menu_50 li {list-style:none; box-sizing:border-box; padding:0 0 8px 0;} .main_section .admin_menu_50 .menu {background:#fff; display:block; padding:9px 15px 10px 15px; box-sizing:border-box; border-radius:4px; border:1px solid #ccc; overflow:hidden; position:relative;} .main_section .admin_menu_50 .menu img {width:18px; float:left;margin-top:4px} .main_section .admin_menu_50 .txt {float:left; font-size:16px; letter-spacing:-1px; margin-left:15px} .main_section .admin_menu_50 .menu:after {content:''; position:absolute; right:15px; top:17px; width:10px; height:10px; border:1px solid rgba(0,0,0,0.3); border-left:0; border-bottom:0; transform: rotate(45deg); -webkit-transform: rotate(45deg);} .dashboard_menu {padding:0px 0px 10px 0px; overflow:hidden; text-align:center;} .dashboard_menu .menu {background:#fff; box-shadow:0 0 2px rgba(0,0,0,0.3); display:block; padding:12px 15px 10px 15px; box-sizing:border-box; border-radius:4px; overflow:hidden; position:relative;} .dashboard_menu .menu img {width:24px; float:left;} .dashboard_menu .txt {float:left; font-size:16px; letter-spacing:-1px; margin-left:15px;padding-top:5px} .dashboard_menu .menu:after {content:''; position:absolute; right:15px; top:17px; width:10px; height:10px; border:1px solid rgba(0,0,0,0.3); border-left:0; border-bottom:0; transform: rotate(45deg); -webkit-transform: rotate(45deg);} .dashboard_menu_50 {padding:10px 10px 5px 10px; text-align:center;width:50%;float:left;} .dashboard_menu_50 .menu {background:#fff; display:block; padding:9px 15px 10px 15px; box-sizing:border-box; border-radius:4px; border:1px solid #ccc; overflow:hidden; position:relative;} .dashboard_menu_50 .menu img {width:18px; float:left;margin-top:4px} .dashboard_menu_50 .txt {float:left; font-size:16px; letter-spacing:-1px; margin-left:15px} .dashboard_menu_50 .menu:after {content:''; position:absolute; right:15px; top:17px; width:10px; height:10px; border:1px solid rgba(0,0,0,0.3); border-left:0; border-bottom:0; transform: rotate(45deg); -webkit-transform: rotate(45deg);} .btn_round_attend {background:#222; color:#fff; font-size:16px;border-radius:100px; height:40px; display:flex; justify-content: center; align-items: center; flex-direction:column; padding:0 30px; box-sizing:border-box;} .btn_round_attend {transition: all 0.25s ease-out; -webkit-transition: all 0.25s ease-out; border:1px solid #222; font-weight:500;} /*.btn_round_attend.if_ok {background:#fff; border-color:#eee; color:#999; pointer-events:none}*/ .btn_round_attend.if_ok {background:#fff; border-color:#eee; color:#999;} .btn_round_leftright {background:#222; color:#fff; font-size:16px;border-radius:100px; height:40px;display:inline-flex;justify-content:space-between;align-items:center;width: 100%;background: #fff;box-sizing: border-box; padding:0 15px; } .btn_round_leftright {transition: all 0.25s ease-out; -webkit-transition: all 0.25s ease-out; border:1px solid #222; font-weight:500;} /*.btn_round_leftright.if_ok {background:#fff; border-color:#eee; color:#999; pointer-events:none}*/ .btn_round_leftright.if_ok {background:#fff; border-color:#eee; color:#999;} .main_section .admin_state {background:#fbfbfb; margin:0 15px; text-align:center; padding:20px 10px 0 10px} .main_section .admin_state li {list-style:none; position:relative; overflow:hidden;} /* 박스 칸상단에 줄이 끄여저서 after 들어가있어서 height:1px; 주석처리 /*.main_section .admin_state li:after {content:''; position:absolute; left:0; top:10px; width:100%; height:1px; background:rgba(0,0,0,0.1); z-index:1}*/ .main_section .admin_state .title_box {position:absolute; left:0; top:0; z-index:2; width:100%; text-align:center;} .main_section .admin_state .txt {background:#fbfbfb; color:#555863; font-size:14px; font-weight:300; padding:0 15px; } .main_section .admin_state .value {font-size:30px; font-weight:300; overflow:hidden; color:#555863; margin:26px 0 30px 0} .main_section .admin_state .unit {font-size:15px; width:22px; height:22px; background:#fff; text-align:center; border:1px solid #555863; border-radius:50%; float:left; margin:10px 5px 0 0} .main_section .admin_state .btn_ready {float:right; background:#ed003e; color:#fff; font-weight:400; padding:4px 15px 5px 15px; border-radius:100px; margin:8px 0 0 8px; font-size:13px} .main_section .admin_state_hor_stroke {background:#fbfbfb; margin:0 15px; text-align:center; padding:20px 10px 0 10px} .main_section .admin_state_hor_stroke li {list-style:none; position:relative; overflow:hidden;} .main_section .admin_state_hor_stroke li:after {content:''; position:absolute; left:0; top:10px; width:100%; height:1px; background:rgba(0,0,0,0.1); z-index:1} .main_section .admin_state_hor_stroke .title_box {position:absolute; left:0; top:0; z-index:2; width:100%; text-align:center;} .main_section .admin_state_hor_stroke .txt {background:#fbfbfb; color:#555863; font-size:14px; font-weight:300; padding:0 15px; } .main_section .admin_state_hor_stroke .value {font-size:30px; font-weight:300; overflow:hidden; color:#555863; margin:26px 0 30px 0} .main_section .admin_state_hor_stroke .unit {font-size:15px; width:22px; height:22px; background:#fff; text-align:center; border:1px solid #555863; border-radius:50%; float:left; margin:10px 5px 0 0} .main_section .admin_state_hor_stroke .btn_ready {float:right; background:#ed003e; color:#fff; font-weight:400; padding:4px 15px 5px 15px; border-radius:100px; margin:8px 0 0 8px; font-size:13px} /* ●●●●● 메인페이지 */ .main_section {overflow:hidden;} .main_section .myinfo {background:#aaacb1; text-align:center;} .main_section .myinfo .imgicon {width:70px; height:70px; border-radius:100px; background:rgba(0,0,0,0.2); position:relative; box-shadow:inset 1px 1px 2px rgba(0,0,0,0.2);} .main_section .myinfo .imgicon .icon1 {width:70px; height:70px; background:transparent url('../images/intro_icon1.png') center center no-repeat; background-size:30px; position:absolute; left:0; top:0; -webkit-animation: spin 2s ease-in-out infinite; -webkit-animation: spin 3s ease-in-out infinite;} .main_section .myinfo .imgicon .icon2 {width:70px; height:70px; background:transparent url('../images/intro_icon1.png') center center no-repeat; background-size:50px; position:absolute; left:0; top:0; -webkit-animation: spin2 2s ease-in-out infinite; -webkit-animation: spin2 3s ease-in-out infinite; opacity:0.3} .main_section .myinfo dl {padding:0 10px 5px 10px} .main_section .myinfo dt {color:#00c0ff; font-size:28px; font-weight:300} .main_section .myinfo dd {color:rgba(255,255,255,0.5); font-size:14px; font-weight:300; margin-top:5px; } .main_section .myinfo .link {color:rgba(255,255,255,0.5); font-size:14px; font-weight:300} .main_section .myinfo .title_en {color:#fff; font-size:17px; font-weight:300; padding:15px 0 10px 0; border-bottom:1px solid rgba(255,255,255,0.05); margin:0 30px 10px 30px} .main_section .myinfo .btn_go_box {overflow:hidden; background:rgba(0,0,0,0.3); margin-top:10px} .main_section .myinfo .btn_go_box ul {display:inline-block} .main_section .myinfo .btn_go_box li {display:inline-block; float:left; } .main_section .myinfo .btn_go_box .btn {color:#ccc; font-size:12px; position:relative; padding:15px 5px 10px 8px;} .main_section .myinfo .btn_go_box .btn:before {content:''; width:1px; height:13px; background:rgba(0,0,0,0.3); position:absolute; left:0; top:50%; margin-top:-4px;letter-spacing : -5px;} .main_section .myinfo .btn_go_box li:first-of-type .btn:before {display:none} .main_section .user_guide_box {margin:15px 20px 0 ; background:transparent url('../images/main_guide_ic.png') left center no-repeat; background-size:30px; padding-left:40px; line-height:14px; font-size:11px; color:#888; min-height:30px} .main_section .go_banner {overflow:hidden; margin-top:20px; padding:0 16px;} .main_section .go_banner li {padding:0 2px; overflow:hidden; box-sizing:border-box; margin-bottom:5px; list-style:none;} .main_section .go_banner a {display:block; width:100%; float:left;} .main_section .go_banner img {width:100%; float:left;} /* wide */ /* @media screen and (min-width:500px) { .main_section .admin_menu li {width:33.33333%; float:left; padding:0 5px} .main_section .admin_menu .menu {text-align:center; padding:20px 0} .main_section .admin_menu .menu img {float:none; width:30px;} .main_section .admin_menu .txt {float:none; display:block; margin:5px 0 0 0; padding:0; font-weight:300; font-size:18px} .main_section .admin_menu .menu:after {display:none;} .main_section .user_guide_box {max-width:340px; margin:15px auto 0; background-position:center top; padding:35px 0 0 0; text-align:center;} } */ /* 공통페이지는 다음과 같은 경로안으로 들어갑니다. */ .common_page {padding:5px; overflow:hidden; background:#fff; } .common_inner {background:#fff; padding:10; overflow:hidden;} .common_full {padding:0} /* 패딩값없이 */ .common_full .cm_bottom_button {padding:0 15px;} .common_full .cm_user_guide {margin:10px} .font-inherit { font-size: inherit!important; font-family: inherit!important; font-weight: inherit!important; color: inherit!important; line-height: inherit!important; } /* ●●●●● 기본레이아웃 상단 */ .common_pages_top {overflow:hidden; background:#fff; border-bottom:1px solid #ccc;} .common_pages_top .this_page_name {position:relative; text-align:center; } .common_pages_top .txt {font-size:16px; line-height:45px; color:#555863; margin:0 45px;} .common_pages_top .btn_back {position:absolute; left:0; top:0; height:45px; width:50px; text-align:center; } .common_pages_top .btn_back .shape {width:22px; height:1px; background:#555863; position:absolute; left:10px; top:50%;} .common_pages_top .btn_back .shape:before {content:''; background:#555863; position:absolute; left:3px; top:0; margin-top:-8px; width:1px; height:10px; transform: rotate(45deg); -webkit-transform: rotate(45deg); } .common_pages_top .btn_back .shape:after {content:''; background:#555863; position:absolute; left:3px; top:0; margin-top:-1px; width:1px; height:10px; transform: rotate(-45deg); -webkit-transform: rotate(-45deg);} .common_pages_top .btn_openmenu {position:absolute; right:0; top:0; width:50px; height:45px; box-sizing:border-box; } /* 스킨 적용 버튼문제 공통으로 사용하기 위해 수정 .common_pages_top .btn_openmenu .shape {background:#666; margin:17px 0 0 11px; position:relative;}*/ .common_pages_top .btn_openmenu .shape {background:#666; margin:17px 0 0 5px; position:absolute;} .common_pages_top .btn_openmenu .shape:before {content:''; width:1px; height:14px; position:absolute; left:0; top:0; background:#555863; transform: rotate(45deg); -webkit-transform: rotate(45deg); margin:0 0 0 0} .common_pages_top .btn_openmenu .shape:after {content:''; width:1px; height:14px; position:absolute; left:0; top:0; background:#555863; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); margin:0 0 0 -10px} .common_pages_top .open_menu {display:none; background:rgba(0,0,0,0.05); padding:10px; } .common_pages_top .open_menu ul {overflow:hidden; background:#fff; border:1px solid rgba(0,0,0,0.1)} .common_pages_top .open_menu li {list-style:none; width:50%; float:left; border-bottom:1px solid rgba(0,0,0,0.1); box-sizing:border-box; border-right:1px solid rgba(0,0,0,0.1)} .common_pages_top .open_menu li:nth-last-of-type(2) {border-bottom:0} .common_pages_top .open_menu li:nth-of-type(2n) {border-bottom:1px solid rgba(0,0,0,0.1); border-right:0} .common_pages_top .open_menu li:last-of-type {border-bottom:0} .common_pages_top .open_menu .menu {padding:0 15px; height:34px; line-height:35px; color:#777; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp: 1; -webkit-box-orient: vertical; display: -webkit-box;} .common_pages_top .open_menu .hit {color:#f54d4d} .common_pages_top .if_open_menu .open_menu {display:block;} .common_pages_top .if_open_menu .btn_openmenu {transform: rotate(180deg); -webkit-transform: rotate(180deg); } .common_pages_three .open_menu {display:none; background:rgba(0,0,0,0.05); } .common_pages_three .open_menu ul {overflow:hidden; background:#fff; border:1px solid rgba(0,0,0,0.1)} .common_pages_three .open_menu li {list-style:none; width:33.33%; float:left; border-bottom:1px solid rgba(0,0,0,0.1); box-sizing:border-box; border-right:1px solid rgba(0,0,0,0.1)} .common_pages_three .open_menu li:nth-last-of-type(1) {border-bottom:0} .common_pages_three .open_menu li:nth-of-type(3n) {border-bottom:1px solid rgba(0,0,0,0.1); border-right:0} /*.common_pages_three .open_menu li:last-of-type {border-bottom:0}*/ .common_pages_three .open_menu .menu {padding:0 15px; height:34px; line-height:35px; color:#777; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp: 1; -webkit-box-orient: vertical; display: -webkit-box;} .common_pages_three .open_menu .hit {color:#f54d4d} .common_pages_three .if_open_menu .open_menu {display:block;} .common_pages_three .if_open_menu .btn_openmenu {transform: rotate(180deg); -webkit-transform: rotate(180deg); } /* ●●●●●●●●●● 보기 */ .cm_board_view {border-top:1px solid #333;} .cm_board_view .post_title {background:#fff; padding:15px 10px; border-bottom:1px solid #cdcdcd; color:#000; font-weight:600; font-size:15px; text-align:center} .cm_board_view .post_info {overflow:hidden; padding:8px 10px; border-bottom:1px solid #d9d9d9; position:relative;} .cm_board_view .post_info .one_tx {float:left; padding-left:5px; line-height:15px; margin-right:10px; color:#999; font-size:12px; white-space:nowrap} .cm_board_view .post_info .one_tx b {margin-left:14px; font-weight:normal; color:#333; position:relative;} .cm_board_view .post_info .one_tx b:before {content:""; width:1px; height:9px; position:absolute; left:-8px; top:50%; background:#ddd; margin:-4px 0 0 0} .cm_board_view .post_conts {overflow:hidden; padding:10px;} .cm_board_view .post_conts img {max-width:100%;} .cm_board_view .admin_answer {border:2px solid #494c4d; margin:20px 10px; padding:15px 15px 10px 15px; position:relative; border-radius:0 8px 8px 8px} .cm_board_view .admin_answer .admin_title {position:absolute; left:0; top:0; margin:-13px 0 0 -2px; background:#494c4d; height:35px; line-height:35px; color:#fff; font-size:13px; padding:0 20px 0 20px;} .cm_board_view .admin_answer .admin_title:after {content:''; width: 0; height: 0; border-bottom: 13px solid #333; border-right: 13px solid transparent; position:absolute; right:-13px; top:0; } .cm_board_view .admin_answer .admin_date {margin:20px 0 0 0; color:#ff6600; font-size:13px;} .cm_board_view .admin_answer .admin_conts {margin:10px 0 5px 0; overflow:hidden; font-size:13px} .cm_board_view .nextprev {border-top:1px solid #d9d9d9; margin:20px 0 0 0; overflow:hidden; } .cm_board_view .nextprev li {border-bottom:1px solid #d9d9d9; position:relative; list-style:none; overflow:hidden} .cm_board_view .nextprev .opt {background:#f1f1f1; position:absolute; left:0; top:0; padding-left:28px; height:30px; width:70px; line-height:30px; background:#f1f1f1; font-size:12px; box-sizing:border-box; } .cm_board_view .nextprev .opt .shape {position:absolute; left:0; top:0; width:30px; height:100%;} .cm_board_view .nextprev .opt .shape:before {content:''; width:1px; height:8px; position:absolute; left:50%; top:50%; background:#bbb; transform: rotate(45deg); -webkit-transform: rotate(45deg); margin:-4px 0 0 2px} .cm_board_view .nextprev .opt .shape:after {content:''; width:1px; height:8px; position:absolute; left:50%; top:50%; background:#bbb; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); margin:-4px 0 0 -3px} .cm_board_view .nextprev .value {margin:0 10px 0 70px; color:#888; height:30px; line-height:30px; padding-left:10px; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp: 1; -webkit-box-orient: vertical; display: -webkit-box} .cm_board_view .nextprev .pv .shape {transform: rotate(180deg); -webkit-transform: rotate(180deg);} .cm_board_view .nextprev .fi {text-align:center; padding-left:0; width:70px;} .cm_board_view .nextprev .fi_link {margin-left:10px; } .cm_board_view .nextprev .fi_link:first-of-type {margin-left:0} .cm_board_view .comment {overflow:hidden; margin:20px 0; } .cm_board_view .comment_top {overflow:hidden; margin:0 10px 5px 10px; font-size:14px; background:transparent url('../images/cm_images/board_ic_renum.png') left center no-repeat; background-size:25px; padding-left:30px} .cm_board_view .comment_form {background:#f7f7f7; border:1px solid #e2e2e2; padding:10px; overflow:hidden; position:relative;} .cm_board_view .comment_form .input_box {overflow:hidden; margin-bottom:5px;} .cm_board_view .comment_form .input_box li {float:left; list-style:none; width:50%; box-sizing:border-box; } /*.cm_board_view .comment_form .input_design {background:#fff; border:1px solid #ccc; width:100%; height:35px; margin-right:10px; padding:10px; box-sizing:border-box; border-radius:5px;} .cm_board_view .comment_form .input_design:focus {background:#eee;} .cm_board_view .comment_form .input_box li:first-of-type .input_design {border-right:0; border-radius:5px 0 0 5px;} .cm_board_view .comment_form .input_box li:last-of-type .input_design {border-radius:0 5px 5px 0;} */ .cm_board_view .comment_form .textarea {margin-right:65px} .cm_board_view .comment_form .textarea_design {background:#fff; border:1px solid #ccc; height:80px; width:100%; padding:10px; overflow:auto; box-sizing:border-box; border-radius:5px;} .cm_board_view .comment_form .textarea_design:focus {border:1px solid #555; background:#eee;} .cm_board_view .comment_form .btn_ok {border:1px solid #ccc; background:#eee; padding:10px 0; color:#666; font-size:13px; width:60px; height:80px; border-radius:5px; position:absolute; right:10px; bottom:10px;} .cm_board_view .comment_list {overflow:hidden;} .cm_board_view .comment_list li {border-bottom:1px dashed #dadada; padding:10px; position:relative; list-style:none;} .cm_board_view .comment_list li:last-of-type {border-bottom:0} .cm_board_view .comment_list .name {float:left; margin-right:10px; color:#333; line-height:19px; font-size:13px;} .cm_board_view .comment_list .id {color:#999; float:left; line-height:19px; letter-spacing:0; margin-right:10px} .cm_board_view .comment_list .date {color:#bbb; float:left; line-height:19px; } .cm_board_view .comment_list .conts {padding-top:5px; line-height:16px; clear:both;} .cm_board_view .comment_list .btn_delete {position:absolute; right:10px; top:8px; width:19px; height:19px; border-radius:100px; border:1px solid #ddd; text-align:center; margin-left:10px} .cm_board_view .comment_list .btn_delete .shape {margin:3px 0 0 0; display:inline-block; background:#000; width:1px; height:13px; position:relative; border-radius:100px; transform: rotate(45deg); -webkit-transform: rotate(45deg); } .cm_board_view .comment_list .btn_delete .shape:after {content: ""; background:inherit; width:13px; height:1px; position:absolute; top:6px; left:-6px; border-radius:inherit;} /* ●●●●●●●●●● 레이어팝업 */ .cm_ly_pop_tp {border:2px solid #2c2f34; border-radius:10px; overflow:hidden; background: #2c2f34; box-shadow:0 0 8px rgba(0,0,0,0.3); box-sizing:border-box; margin:10px} .cm_ly_pop_tp .cm_bottom_button {padding:20px 0 0 0} /* 기본형 */ .cm_ly_pop_tp .title_box {padding:0 20px; line-height:50px; color:#fff; font-size:17px; position:relative; background: #2c2f34;} .cm_ly_pop_tp .btn_close {position:absolute; top:0; right:0; width:50px; height:50px;} .cm_ly_pop_tp .btn_close .shape {width:25px; height:2px; background:#777; position:absolute; left:50%; top:50%; margin:-1px 0 0 -8px; transform: rotate(45deg); -webkit-transform: rotate(45deg);} .cm_ly_pop_tp .btn_close .shape:before {content:''; background:#808080; width:2px; height:25px; position:absolute; left:50%; top:50%; margin:-12px 0 0 -1px;} .cm_ly_pop_tp .inner_box {overflow:hidden; background:#fff;} .cm_ly_pop_tp .top_txt {color:#555; line-height:18px; text-align:center; font-size:14px; border-bottom:1px solid #ccc; background:#eee; padding:15px 20px; margin-bottom:10px} .cm_ly_pop_tp .top_txt strong {color:#ff2d2d;} .cm_ly_pop_tp .form_box {overflow:hidden; position:relative; background:#eee;} .cm_ly_pop_tp .form_box li {list-style:none; position:relative; border-bottom:1px solid #eee; background:#fff;} .cm_ly_pop_tp .form_box .opt {position:absolute; left:10px; top:5px; height:45px; line-height:45px;} .cm_ly_pop_tp .form_box .value {margin-left:95px; padding:8px 10px; position:relative; overflow:hidden; box-sizing:border-box;} .cm_ly_pop_tp .form_box .input_design {background:#eee; height:40px; width:100%; border-radius:5px; box-shadow:inset 1px 1px 0 rgba(0,0,0,0.1); margin-top:5px; padding:10px; box-sizing:border-box;} .cm_ly_pop_tp .form_box .input_design:focus {color:#000; background-color:#fafafa;} .cm_ly_pop_tp .form_box .input_design:first-of-type {margin-top:0} .cm_ly_pop_tp .form_box .textarea_design {background:#eee; line-height:16px; width:100%; height:100px; border-radius:5px; box-shadow:inset 1px 1px 0 rgba(0,0,0,0.1); border:0; padding:10px;} .cm_ly_pop_tp .form_box .textarea_design:focus {color:#000; background-color:#fafafa;} .cm_ly_pop_tp .form_box .select_design {float:left; padding:0 10px; width:100%; border-radius:5px; border:1px solid #ccc; height:45px;} .cm_ly_pop_tp .cm_bottom_button {margin:0 10px 10px 10px} .cm_ly_pop_tp .form_box .select {border-radius:5px; height:45px; box-sizing:border-box; float:left;} .cm_ly_pop_tp .form_box .select select {font-size:15px;} .cm_ly_pop_tp .form_box .save_check {overflow:hidden; display:inline-block; margin-top:8px !important; letter-spacing:-1px; font-size:13px;} .cm_ly_pop_tp .form_box .choice {overflow:hidden; color:#333; line-height:16px; font-size:14px; margin:4px;} .cm_ly_pop_tp .form_box .choice .radio {float:left; margin-right:10px;} .cm_ly_pop_tp .form_box .choice label {overflow:hidden; color:#343434} .cm_ly_pop_tp .form_box .choice .radio input {float:left; margin-right:5px;} .cm_ly_pop_tp .form_box .icon_name {background-image: url('../images/cm_images/member_find_name.png'); background-position:12px center; background-repeat:no-repeat; background-size:16px;} .cm_ly_pop_tp .form_box .icon_date {background-image: url('../images/cm_images/member_find_date.png'); background-position:12px center; background-repeat:no-repeat; background-size:16px;} .cm_ly_pop_tp .form_box .icon_email {background-image: url('../images/cm_images/member_find_email.png'); background-position:12px center; background-repeat:no-repeat; background-size:16px;} .cm_ly_pop_tp .form_box .icon_password {background-image: url('../images/cm_images/member_find_password.png'); background-position:12px center; background-repeat:no-repeat; background-size:16px; padding-left:35px} .cm_ly_pop_tp .form_box .icon_bank {background-image: url('../images/cm_images/member_find_bank.png'); background-position:12px center; background-repeat:no-repeat; background-size:16px;} .cm_ly_pop_tp .button_box {overflow:hidden; padding:20px 0 10px 0} .cm_ly_pop_tp .button_box li {list-style:none; width:50%; float:left; padding:0 3px 0 0; box-sizing:border-box; } .cm_ly_pop_tp .button_box li:last-of-type {padding:0 0 0 3px} /* 부분취소 상품정보 추가 2015-06-29 */ .cm_ly_pop_tp .this_item {overflow:hidden; position:relative; padding:10px; padding-top: 0; border-bottom:1px solid #ddd; min-height:110px; box-sizing:border-box; } .cm_ly_pop_tp .this_item .thumb {width:90px; position:absolute; left:10px; top:10px; overflow:hidden;} .cm_ly_pop_tp .this_item .thumb img {width:100%; float:left;} .cm_ly_pop_tp .this_item .info {margin-left:100px} .cm_ly_pop_tp .this_item .info dt {color:#333; font-weight:600; letter-spacing:-0.5px; font-size:14px; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; display: -webkit-box;} .cm_ly_pop_tp .this_item .info dd {margin-top:5px; color:#999} .cm_ly_pop_tp .this_item .info_title {color:#ff6600; font-weight:600; margin-bottom:5px; font-size:14px; letter-spacing:-1px;} .cm_ly_pop_tp .this_item .info_price {margin-top:10px; border-top:1px dashed #ddd; padding-top:10px; overflow:hidden; } .cm_ly_pop_tp .this_item .info_price .txt {display:block; color:#666; font-size:13px;} /* ●●●●●●●●●● 쓰기폼(문의폼) */ .cm_board_form {} .cm_board_form li {list-style:none; position:relative; border-bottom:1px solid #dedede; width:100%; clear:both;} .cm_board_form .opt {position:absolute; left:10px; top:50%; color:#888; padding-left:12px; margin-top:-6px} .cm_board_form .opt {background:transparent url('../images/cm_images/member_form_bullet.png') left center no-repeat; background-size:8px; } .cm_board_form .value {margin-left:95px; background:#fff; overflow:hidden; padding:10px 10px; line-height:15px; font-size:12px; color:#aaa; letter-spacing:-0.5px; overflow:hidden;} .cm_board_form .ess .opt {background-image:url('../images/cm_images/member_form_bullet2.png');} /* .cm_board_form .input_design {box-sizing:border-box; float:left; width:100%; background:#f1f1f1; border:1px solid #c1c1c1; border-right:0; border-bottom:0; height:35px; padding:0 10px; color:#666; border-radius:5px; letter-spacing:0px; font-size:13px;} .cm_board_form .input_design:focus {background-color:#ddd; color:#333} .cm_board_form .input_design+ .input_design {margin-top:5px} */ .cm_board_form .textarea_design {background:#f1f1f1; border:1px solid #c1c1c1; border-right:0; border-bottom:0; line-height:18px; height:140px; padding:10px; color:#666; border-radius:5px; font-size:13px; box-sizing:border-box; } .cm_board_form .textarea_design:focus {background-color:#ddd; color:#333} .cm_board_form label {overflow:hidden; float:left; line-height:21px; padding:5px 10px 5px 0} .cm_board_form .editor .opt {position:relative; margin-top:10px} .cm_board_form .editor .value {margin:0} .cm_board_form .tip_txt {clear:both; padding-top:5px} .cm_board_form .tip_txt dd {line-height:15px; color:#999; font-size:11px;} .cm_board_form .tip_txt dt {line-height:15px; color:#ff4949; font-size:11px;} .cm_board_form .input_date {background:#f1f1f1 url('../images/cm_images/ic_date.png') 40px center no-repeat; background-size:15px; padding-left:65px;} .cm_board_form .input_wrap {position:relative; overflow:hidden;} .cm_board_form .input_wrap .upper_txt {position:absolute; left:10px; top:0; line-height:35px} .cm_board_form .input_wrap+ .input_wrap {margin-top:5px} .cm_board_form .btn_photo_box {background:#4f515b; overflow:hidden; position:relative; border-radius:5px; padding:0; text-align:center; height:45px} .cm_board_form .btn_photo_box {box-shadow:inset 0 -3px 0 rgba(0,0,0,0.2); display:block; width:100%; float:none;} .cm_board_form .btn_photo_box .upper_txt {background:transparent url('../images/cm_images/input_photo.png') left 2px no-repeat; background-size:18px; color:#fff; padding-left:24px; margin:12px 0; font-size:13px;} .cm_board_form .input_photo {color:transparent; background:transparent; position:absolute; left:0; top:0; width:100%; z-index:555; visibility:hidden} .cm_board_form .img_preview {width:100% !important} .cm_board_form .photo_box {margin:5px 0 0 0; overflow:hidden; border:1px solid rgba(0,0,0,0.1); border-radius:5px; padding:5px;} .cm_board_form .photo_box img {width:100%; float:left;} .cm_board_form .photo_box .photo_inner {background:rgba(0,0,0,0.05) url('../images/cm_images/input_photo_none.png') center center no-repeat; background-size:40px; min-height:120px; overflow:hidden; border-radius:5px;} .cm_board_form .btn_photo_del {position:absolute; left:0; top:0;} /* 스팸방지추가 */ #recaptcha_widget {padding:10px; box-sizing:border-box; overflow:hidden;} #recaptcha_widget #recaptcha_image {text-align:center; margin:0 auto;} #recaptcha_widget .button_box {overflow:hidden; padding:0 10px 10px 10px; text-align:center;} #recaptcha_widget .button_box dl {display:inline-block; } #recaptcha_widget .button_box dd {display:inline-block; float:left; box-sizing:border-box; list-style:none; padding:0 4px} #recaptcha_widget .button_box .btn {border:1px solid rgba(0,0,0,0.1); display:block; width:40px; height:40px; border-radius:100px;} #recaptcha_widget .button_box .ic_re {background:transparent url('../images/cm_images/spam_ic_re.png') center center no-repeat; background-size:20px;} #recaptcha_widget .button_box .ic_sound {background:transparent url('../images/cm_images/spam_ic_sound.png') center center no-repeat; background-size:20px;} #recaptcha_widget .button_box .ic_img {background:transparent url('../images/cm_images/spam_ic_img.png') center center no-repeat; background-size:20px;} #recaptcha_widget .button_box .ic_help {background:transparent url('../images/cm_images/spam_ic_help.png') center center no-repeat; background-size:20px;} /* 부분취소 상품정보 추가 */ .cm_board_form .this_item {overflow:hidden; position:relative; min-height:70px} .cm_board_form .this_item .thumb {width:50px; position:absolute; left:0; top:0; overflow:hidden;} .cm_board_form .this_item .thumb img {width:100%; float:left;} .cm_board_form .this_item .info {} .cm_board_form .this_item .info dl {clear:both} /* .cm_board_form .this_item .info dt {color:#333; font-size:12px;} */ .cm_board_form .this_item .info dd {color:#999} .cm_board_form .this_item .info_title {color:#ff6600; font-weight:600; margin-bottom:10px; font-size:13px; letter-spacing:-1px; margin-left:60px; min-height:50px} .cm_board_form .this_item .info_price {margin-top:10px; border-top:1px dashed #ddd; padding-top:10px; overflow:hidden;} .cm_board_form .this_item .info_price .txt {float:left; color:#000; } .cm_board_form .this_item .info_price .bar {width:1px; height:10px; float:left; margin:2px 15px 0 15px; background:#ccc;} .cm_board_form .this_item .info label {color:#333; display:block; float:none; border-top:1px solid #ddd; padding:11px 0 8px 25px; line-height:14px; margin:0; position:relative;} .cm_board_form .this_item .info label input {position:absolute; left:0; top:0; margin:8px 5px 0 0} /* ●●●●●●●●●● 약관동의 */ .cm_step_agree {overflow:hidden; background:#fafafa; padding:15px 15px 0 15px;} .cm_step_agree .text_box {background:#fff; border:1px solid #ccc; overflow:hidden;} .cm_step_agree .textarea_design {background:#fff; padding:10px; width:100%; box-sizing:border-box; line-height:16px; height:120px; color:#999; font-size:11px;} .cm_step_agree textarea {background:#fff; padding:10px; width:100%; box-sizing:border-box; line-height:16px; height:80px; color:#999; font-size:11px;} .cm_step_agree .agree_check {overflow:hidden; position:relative; text-align:center;} .cm_step_agree .agree_check label {padding:10px 0; overflow:hidden; color:#555; font-size:13px;} /* ●●●●●●●●●● 목록 탭메뉴(카테고리있을경우) */ .cm_board_tab {overflow:hidden; background:#eee; display:table; width:100%; box-sizing:border-box; } .cm_board_tab ul {display:table-row;} .cm_board_tab li {display:table-cell; padding:15px 10px; position:relative; text-align:center; color:#888; border:1px solid #ddd; border-bottom:0} .cm_board_tab .hit {background:#fff; color:#000; background:#fff;} /* ●●●●●●●●●● 목록 일반형 */ .cm_board_normal {} .cm_board_normal li {border-bottom:1px solid rgba(0,0,0,0.13); overflow:hidden; box-sizing:border-box; position:relative; padding:10px; list-style:none} .cm_board_normal img {width:100%;} .cm_board_normal .cm_no_conts .no_icon {background-image: url('../images/cm_images/no_conts_board_normal.png');} .cm_board_normal .title {font-size:13px; color:#555; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp: 1; -webkit-box-orient: vertical; display: -webkit-box; margin-bottom:5px} .cm_board_normal .title:after {content:'';} .cm_board_normal .comment {float:left; background:transparent url('../images/cm_images/board_ic_renum.png') left center no-repeat; background-size:19px; color:#666; padding-left:23px; line-height:14px; margin-top:1px} .cm_board_normal .writer {float:right; line-height:15px; overflow:hidden;} .cm_board_normal .writer .name {color:#999; letter-spacing:0px; float:left;} .cm_board_normal .writer .date {color:#aaa; letter-spacing:0px; float:left;} .cm_board_normal .writer .bar {background:#ccc; float:left; width:1px; height:9px; margin:4px 10px 0 10px} .cm_board_normal .icon_new {border-radius:100px; width:15px; height:15px; overflow:hidden; background:#ff6600; position:absolute; right:10px; top:10px; box-sizing:border-box;} .cm_board_normal .icon_new {font-family:'lato'; line-height:15px; color:#fff; font-weight:600; padding-left:4px; font-size:10px;} .cm_board_normal .icon_new+ .icon_reply+ .title {margin-left:20px} .cm_board_normal .icon_front {float:left; width:11px; margin:0 5px 0 3px; } .cm_board_normal .icon_reply {position:absolute; right:10px; top:6px;} .cm_board_normal .icon_reply+ .title {margin-right:68px} .cm_board_normal .notice {background:#ddd; overflow:hidden; padding:8px 10px} .cm_board_normal .notice .texticon_pack {position:absolute; left:10px; top:50%; margin-top:-10px} .cm_board_normal .notice .title {margin:5px 0 2px 45px; font-size:14px; color:#333} .cm_board_qna .icon_new {border-radius:100px; width:15px; height:15px; overflow:hidden; background:#ff6600; position:absolute; left:10px; top:10px; box-sizing:border-box;} .cm_board_qna .icon_new {font-family:'lato'; line-height:15px; color:#fff; font-weight:600; padding-left:4px; font-size:10px;} .cm_board_qna .icon_new+ .icon_front {margin-left:20px} /* ●●●●●●●●●● 목록 FAQ */ .cm_faq_search {overflow:hidden; padding:15px; position:relative; background:#fff url('../images/cm_images/faq_img.jpg') 15px 15px no-repeat; background-size:105px;} .cm_faq_search .gtxt_box {position:relative;} .cm_faq_search .gtxt_box strong,.cm_faq_search .gtxt_box b {font-weight:400; color:#333} .cm_faq_search .telnumber {font-size:18px; color:#333; margin:15px 0 20px 120px; line-height:25px; box-sizing:border-box;} .cm_faq_search .telnumber .call {font-family:'lato'; font-size:24px; font-weight:600; color:#fa0d3e; margin-top:3px; display:block; } .cm_faq_search .explain {font-size:13px; color:#888; line-height:16px;} .cm_faq_search .explain a {color:#ff6600} .cm_faq_search .search_form {margin-top:15px; position:relative; overflow:hidden} .cm_faq_search .search_form .input_box {overflow:hidden; position:relative; padding-right:55px} .cm_faq_search .search_form .input_design {background:#fff; border:1px solid #ccc; font-size:13px; height:35px; padding:0 10px; border-radius:5px; box-sizing:border-box; width:100%;} .cm_faq_search .search_form .input_design:focus {background:#eee; color:#000; border:1px solid #666;} .cm_faq_search .btn_search {position:absolute; right:0; top:0; background:#555 url('../images/cm_images/ic_faq_search.png') center center no-repeat; background-size:18px; width:50px; height:35px; border-radius:5px;} .cm_faq_search .btn_viewall {background:#ddd; border:1px solid #ccc; height:35px; line-height:35px; color:#666; text-align:center; border-radius:5px; text-align:center; width:80px; font-size:13px; box-sizing:border-box; position:absolute; right:0; top:0;} .cm_faq_search .btn_viewall+ .input_box {margin-right:85px} .cm_board_faq {border-top:2px solid #333;} .cm_board_faq .cm_no_conts .no_icon {background-image:url('../images/cm_images/no_conts_board_faq.png');} .cm_board_faq li {border-bottom:1px solid #dadada; position:relative; list-style:none;} .cm_board_faq .upper_link {height:40px;} .cm_board_faq .state {text-align:center; border-right:1px solid #eee; width:50px; position:absolute; left:0; top:0; height:40px;} .cm_board_faq .state .state_icon {font-family:'lato'; font-weight:400; font-size:18px; color:#333; line-height:40px;} .cm_board_faq .question {color:#666; height:40px; line-height:40px; margin:0 10px 0 60px; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp: 1; -webkit-box-orient: vertical; display: -webkit-box; font-size:13px } .cm_board_faq .category {color:#999; margin-right:5px; font-size:13px } .cm_board_faq .answer {display:none; line-height:17px; border-top:1px dashed #ccc; position:relative; padding:15px 15px 15px 60px; background:#f1f1f1} .cm_board_faq .answer .shape_ic {width:14px; height:8px; border-right:1px solid #333; border-top:1px solid #333; position:absolute; left:20px; top:20px; transform: rotate(180deg); -webkit-transform: rotate(180deg);} .cm_board_faq .answer .shape_ic:before {content:''; background:#333; position:absolute; left:2px; top:0; margin-top:-7px; width:1px; height:8px; transform: rotate(45deg); -webkit-transform: rotate(45deg); } .cm_board_faq .answer .shape_ic:after {content:''; background:#333; position:absolute; left:2px; top:0; margin-top:-2px; width:1px; height:8px; transform: rotate(-45deg); -webkit-transform: rotate(-45deg);} .cm_board_faq .open .answer {display:block;} .cm_board_faq .open .state_icon {color:#ff0000} .cm_board_faq .open .question {color:#000;} .cm_board_faq .open .category {color:#000} /* wide */ @media screen and (min-width:500px) { .cm_faq_search {background-size:130px; background-position:20px 20px;} .cm_faq_search .explain {margin-left:160px} .cm_faq_search .telnumber {margin:15px 0 10px 160px} } /* ●●●●●●●●●● 목록 이벤트형(리스트) */ .cm_board_event {overflow:hidden;} .cm_board_event li {position:relative; list-style:none; border-bottom:1px solid rgba(0,0,0,0.13); padding:10px; overflow:hidden;} .cm_board_event .cm_no_conts .no_icon {background-image:url('../images/cm_images/no_conts_board_event.png');} .cm_board_event .title {margin:3px 0 0 80px; overflow:hidden; font-size:13px; color:#555; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp: 1; -webkit-box-orient: vertical; display: -webkit-box; margin-bottom:10px} .cm_board_event .texticon_pack {position:absolute; left:10px; top:9px;} .cm_board_event .date {float:right; font-family:'lato'; color:#333; padding-left:18px; font-size:13px; background:transparent url('../images/cm_images/ic_date.png') left center no-repeat; background-size:12px;} .cm_board_event .comment {float:left; background:transparent url('../images/cm_images/board_ic_renum.png') left center no-repeat; background-size:19px; color:#666; padding-left:23px; line-height:14px; margin-left:3px} .cm_board_event .close {background:rgba(0,0,0,0.03);} .cm_board_event .close .title {color:#999;} .cm_board_event .close .date {color:#999;} .cm_board_event .notice {background:#ddd; overflow:hidden; padding:8px 10px} .cm_board_event .notice .texticon_pack {position:absolute; left:10px; top:50%; margin-top:-10px} .cm_board_event .notice .title {margin:5px 0 2px 45px; font-size:14px; color:#333} /* ●●●●●●●●●● 목록 이벤트형(썸네일) */ .cm_board_event_thumb {/*b border-top:2px solid #333; */ overflow:hidden; } .cm_board_event_thumb ul {overflow:hidden;} .cm_board_event_thumb li {position:relative; list-style:none; padding:10px; border-bottom:1px solid rgba(0,0,0,0.13); } .cm_board_event_thumb .posting {padding:5px} .cm_board_event_thumb .texticon_pack {position:absolute; right:20px; top:20px;} .cm_board_event_thumb .thumb {width:100%; min-height:100px; overflow:hidden; background:#f4f4f4 url('../images/cm_images/no_conts_thumb.png') center center no-repeat; background-size:50px;} .cm_board_event_thumb .thumb img {width:100%; float:left;} .cm_board_event_thumb .conts dt {margin-top:10px; color:#333; font-size:14px; letter-spacing:-1px;} .cm_board_event_thumb .conts dd {margin-top:3px; color:#999; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp: 1; -webkit-box-orient: vertical; display: -webkit-box; } .cm_board_event_thumb .date {font-family:'lato'; color:#333; padding-left:18px; font-size:13px; background:transparent url('../images/cm_images/ic_date.png') left center no-repeat; background-size:12px; margin-top:8px} .cm_board_event_thumb .cm_no_conts .no_icon {background-image:url('../images/cm_images/no_conts_board_event.png');} .cm_board_event_thumb .notice {background:#ddd; overflow:hidden; padding:8px 10px} .cm_board_event_thumb .notice .texticon_pack {position:absolute; left:10px; top:50%; margin-top:-10px} .cm_board_event_thumb .notice .title {margin:5px 0 2px 45px; font-size:14px; color:#333; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp: 1; -webkit-box-orient: vertical; display: -webkit-box; } /* ●●●●●●●●●● 목록 뉴스형 */ .cm_board_news {/* border-top:2px solid #333; */} .cm_board_news li {border-bottom:1px solid rgba(0,0,0,0.13); position:relative; padding:10px; list-style:none;} .cm_board_news .posting {margin-left:100px;} .cm_board_news .thumb {width:90px; height:50px; overflow:hidden; position:absolute; left:10px; top:10px; background:#f4f4f4 url('../images/cm_images/no_conts_thumb.png') center center no-repeat; background-size:30px;} .cm_board_news .thumb img {width:100%; height:100%; float:left;} .cm_board_news .title {color:#555; font-size:14px; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; display: -webkit-box;} .cm_board_news .conts {margin-top:5px; line-height:15px; color:#999; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp: 3; -webkit-box-orient: vertical; display: -webkit-box;} .cm_board_news .date {font-family:'lato'; color:#999; padding-left:18px; background:transparent url('../images/cm_images/ic_date.png') left center no-repeat; background-size:12px; margin-top:8px} .cm_board_news .cm_no_conts .no_icon {background-image:url('../images/cm_images/no_conts_board_news.png');} .cm_board_news .notice {background:#ddd; overflow:hidden; padding:8px 10px} .cm_board_news .notice .texticon_pack {position:absolute; left:10px; top:50%; margin-top:-10px} .cm_board_news .notice .title {margin:5px 0 2px 45px; font-size:14px; color:#333; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp: 1; -webkit-box-orient: vertical; display: -webkit-box; } /* ●●●●●●●●●● 목록 갤러리형 */ .cm_board_gallery {/* border-top:2px solid #333;*/; overflow:hidden;} .cm_board_gallery li {list-style:none; position:relative; padding:10px; box-sizing:border-box; width:50%; float:left;;} .cm_board_gallery .post {background:#fff; overflow:hidden;} .cm_board_gallery .thumb {position:relative; overflow:hidden; background:#f4f4f4 url('../images/cm_images/no_conts_thumb.png') center center no-repeat; background-size:30px; min-height:90px} .cm_board_gallery .thumb img {width:100%; float:left;} .cm_board_gallery .title {margin:5px 0 5px 0; color:#555; font-size:13px; height:20px; line-height:25px; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp: 1; -webkit-box-orient: vertical; display: -webkit-box;} .cm_board_gallery .date {font-family:'lato'; color:#999; padding-left:18px; background:transparent url('../images/cm_images/ic_date.png') left center no-repeat; background-size:12px; float:left;} .cm_board_gallery .click {float:right; color:#999; line-height:16px;} .cm_board_gallery .click strong {font-weight:400; letter-spacing:0px;} .cm_board_gallery .cm_no_conts .no_icon {background-image:url('../images/cm_images/no_conts_board_gallery.png');} .cm_board_gallery .notice {background:#ddd; overflow:hidden; padding:8px 10px; width:100%;} .cm_board_gallery .notice .texticon_pack {position:absolute; left:10px; top:50%; margin-top:-10px} .cm_board_gallery .notice .title {margin:5px 0 2px 45px; font-size:14px; color:#333; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp: 1; -webkit-box-orient: vertical; display: -webkit-box; } /* ●●●●●●●●●● 고객센터메인 */ .cm_service_main {overflow:hidden;} .cm_service_main .first_area {overflow:hidden; position:relative;} .cm_service_main .guide_faq {background:transparent url('../images/cm_images/service_main_tel.png') center 10px no-repeat; background-size:120px; text-align:center;} .cm_service_main .guide_faq dl {padding:20px; padding-top:120px} .cm_service_main .guide_faq dt {font-weight:600; color:#45484c; font-size:25px; margin-bottom:10px} .cm_service_main .guide_faq dd {margin-top:5px; color:#a2a3a5} .cm_service_main .guide_faq dd:first-of-type {color:#333} .cm_service_main .faq_search {background:#536072; overflow:hidden; padding:15px; position:relative;} .cm_service_main .faq_search .input_box {margin:0 80px 0 0; background:#fff; overflow:hidden; border-radius:5px 0 0 5px;} .cm_service_main .faq_search .input_design {height:40px; width:100%; box-sizing:border-box; padding:0 10px; font-size:13px;} .cm_service_main .faq_search .btn_search {position:absolute; right:15px; top:15px; background:#111214; color:#fff; height:40px; width:80px; font-size:13px; border-radius:0 5px 5px 0;} .cm_service_main .inquiry_box {padding:15px; border-bottom:1px solid #ddd;} .cm_service_main .inquiry_box dt {font-family:'lato'; color:#ff4848; font-weight:600; font-size:34px; margin:0 10px 15px 10px} .cm_service_main .inquiry_box dt a {font-family:'lato'; color:#ff4848; font-weight:600; font-size:34px; } .cm_service_main .inquiry_box dd {position:relative; padding-left:50px; line-height:18px; color:#333; font-size:13px; margin:0 10px 3px 10px} .cm_service_main .inquiry_box .opt {position:absolute; left:0; top:0;} .cm_service_main .inquiry_box .btn_inquiry_box {margin-top:15px; } .cm_service_main .inquiry_box .btn_inquiry {width:100%; background:#ff4848; color:#fff; font-size:17px; text-align:center; line-height:40px; border-radius:5px;} /* 반응형 */ @media screen and (min-width:650px) { .cm_service_main .first_area {padding:10px 0 80px 0} .cm_service_main .faq_search {position:absolute; left:0; bottom:0; width:60%; box-sizing:border-box;} .cm_service_main .guide_faq {float:left; width:60%; box-sizing:border-box; background-size:145px;} .cm_service_main .guide_faq {text-align:left; background-position:15px 15px;} .cm_service_main .guide_faq dl {padding:18px 15px 15px 170px;} .cm_service_main .guide_faq dt {margin-bottom:15px} .cm_service_main .inquiry_box {float:left; width:40%; box-sizing:border-box; border-bottom:0} .cm_service_main .inquiry_box .btn_inquiry_box {position:absolute; right:0; bottom:0; width:40%; box-sizing:border-box; padding:0 15px;} .cm_service_main .inquiry_box .btn_inquiry {line-height:70px;} } .cm_service_main .quick_btn {margin-top:40px;} .cm_service_main .quick_btn .title_box {text-align:center; background:transparent url('../images/cm_images/service_main_linebg.png') left top repeat; background-size:2px; height:10px;} .cm_service_main .quick_btn .title_box .txt {background:#fff; padding:0 20px; font-size:13px; color:#999; margin-top:-10px} .cm_service_main .quick_btn .title_box .txt strong {display:block; color:#333; font-family:'lato'; font-size:25px; margin-bottom:3px} .cm_service_main .quick_btn ul {overflow:hidden; margin-top:40px} .cm_service_main .quick_btn li {float:left; width:33.333%; list-style:none; text-align:center; position:relative;} .cm_service_main .quick_btn li:before {content:''; width:1px; height:40px; background:rgba(0,0,0,0.1); position:absolute; right:0; top:50%; margin-top:-25px} .cm_service_main .quick_btn li:nth-of-type(3n):before {display:none;} .cm_service_main .quick_btn .btn_go {display:block; padding:10px 0} .cm_service_main .quick_btn .img_box {display:block; padding:0 0 10px 0;} .cm_service_main .quick_btn .img_box img {width:40px;} /* 반응형 */ @media screen and (min-width:650px) { .cm_service_main .quick_btn ul {margin-top:50px} .cm_service_main .quick_btn li {width:16.66666%;} .cm_service_main .quick_btn li:nth-of-type(3n):before {display:block;} .cm_service_main .quick_btn li:last-of-type:before {display:none;} } .cm_service_main .recent_board {overflow:hidden; margin-top:20px; padding:10px} .cm_service_main .recent_board li {list-style:none; box-sizing:border-box;} .cm_service_main .recent_board .list_box {padding:10px; margin:5px 0} .cm_service_main .recent_board .list_box dd {position:relative;} .cm_service_main .recent_board .list_box .title {color:#555; position:relative; font-size:13px; line-height:25px; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp: 1; -webkit-box-orient: vertical; display: -webkit-box;} .cm_service_main .recent_board .list_box .icon {font-family:'lato'; color:#333; margin-right:10px; font-size:14px} .cm_service_main .recent_board .list_box .date {font-family:'lato'; color:#999; margin-right:10px; font-size:12px} .cm_service_main .recent_board .cm_no_conts .no_icon {background-image:url('../images/cm_images/no_conts_mainboard.png'); background-size:50px; height:55px;} .cm_service_main .board_faq {border:1px solid #ddd;} .cm_service_main .board_faq .title_box {text-align:center; color:#333; font-size:14px; height:45px; line-height:45px; border-bottom:1px solid #ddd} .cm_service_main .board_faq .title_box a {display:block; color: #333; font-size:14px; } .cm_service_main .board_notice {border:1px solid #ddd; margin-top:10px} .cm_service_main .board_notice .title_box {text-align:center; overflow:hidden; background:#f1f1f1; position:relative;} .cm_service_main .board_notice .title_box:before {content:''; width:1px; height:100%; background:#ddd; position:absolute; left:50%; top:0;} .cm_service_main .board_notice .tab {width:50%; float:left; color:#333; font-size:14px; line-height:45px; height:45px; border-bottom:1px solid #ddd; } .cm_service_main .board_notice .hit {background:#fff; border-bottom:1px solid #fff; } /* 반응형 */ @media screen and (min-width:600px) { .cm_service_main .recent_board li {width:50%; float:left; padding:0 5px 0 0} .cm_service_main .recent_board li:last-of-type {padding:0 0 0 5px} .cm_service_main .board_notice {margin-top:0} .cm_service_main .board_faq {min-height:200px} .cm_service_main .board_notice {min-height:200px} } /* ●●●●●●●●●● 게시판 하단 검색 */ .cm_board_search {position:relative; padding:0 10px 10px 10px; box-sizing:border-box; margin:0 auto; max-width:350px;} .cm_board_search .check_box {display:none;position:absolute; left:10px; top:2px; } .cm_board_search .check_box label {margin-right:3px; line-height:15px; font-size:11px; padding:3px 0} .cm_board_search .check_box label input {background-size:30px; width:15px; height:15px; margin-right:3px;} .cm_board_search .input_search {border-bottom:1px solid #ddd; height:35px; padding:0 40px 0 10px; box-sizing:border-box; width:100%; font-size:13px; /* border-radius:5px; */} .cm_board_search .input_search:focus {border-bottom:1px solid #666;} .cm_board_search .right_btn {position:absolute; right:10px; top:0; } .cm_board_search .btn_search {float:left; width:35px; height:35px; background:transparent url('../images/cm_images/board_foot_search.png') center center no-repeat; background-size:18px; opacity:0.5; } .cm_board_search .input_search:focus+ .right_btn .btn_search {opacity:1} .cm_board_search .btn_viewall {float:left; background:#bbb; color:#fff; padding:0 8px; line-height:26px; margin:4px 0 0 0; letter-spacing:-1px;} /* ●●●●●●●●●● 통합검색 */ .cm_comb_search {padding-bottom:20px} /* 검색폼 */ .cm_comb_search .search_form {overflow:hidden; text-align:center; padding:0 20px 20px 20px; background:#fff; border-bottom:1px solid rgba(0,0,0,0.1);} .cm_comb_search .search_form .txt {color:#34373c; font-family:'lato'; font-size:26px; font-weight:300; padding:15px 0 10px 0} .cm_comb_search .search_form .input_box {padding-right:85px; position:relative;} .cm_comb_search .search_form .input_design {background:#fff; border:1px solid #ccc; height:40px; font-size:15px; padding:0 15px; color:#333; width:100%; letter-spacing:0px; box-sizing:border-box;} .cm_comb_search .search_form .input_design:focus {border:1px solid #000;} .cm_comb_search .search_form .btn_search {position:absolute; right:0; top:0; background:#333; height:40px; width:80px; color:#fff; font-size:14px;} /* 검색결과,카테고리 */ .cm_comb_search .search_result {text-align:center; padding:20px; font-size:16px; color:#333;} .cm_comb_search .search_result strong {font-weight:400; color:#ff0000} .cm_comb_search .search_category {overflow:hidden; background:#fff; border:1px solid #d7d7d7; padding-left:130px; position:relative; margin:0 10px} .cm_comb_search .search_category .txt {line-height:16px; position:absolute; left:10px; top:50%; margin-top:-8px; border-right:1px solid #d7d7d7; width:110px; } .cm_comb_search .search_category .select {border:0;} .cm_comb_search .search_category select {color:#ff6600} /* 조건검색들 */ .cm_comb_search .condition {background:#fff; border:2px solid #34373c; overflow:hidden; margin:10px; position:relative;} .cm_comb_search .condition .choice_box {padding:15px 15px 10px 15px; box-sizing:border-box; overflow:hidden;} .cm_comb_search .condition li {list-style:none; float:left; width:50%; padding:0 2px 0 0; box-sizing:border-box; margin-bottom:5px} .cm_comb_search .condition li:nth-of-type(2n) {padding:0 0 0 2px} .cm_comb_search .condition .one {display:block; padding:4px 0 4px 6px; border:1px solid #ddd; letter-spacing:0px; border-radius:100px;} .cm_comb_search .condition .one input:checked+ .txt {color:#ff0000} .cm_comb_search .condition .title {text-align:center; background:#eee; font-size:13px; padding:8px 0 5px 0} /* 검색결과없을때 */ .cm_comb_search .cm_no_conts {padding:30px;} .cm_comb_search .cm_no_conts .no_icon {background-image:url('../images/cm_images/no_conts_search.png');} .cm_comb_search .cm_no_conts .gtxt dt {color:#000; font-size:17px; margin:30px 0 30px 0; position:relative; letter-spacing:-1px;} .cm_comb_search .cm_no_conts .gtxt dt:after {content:""; width:30px; height:2px; background:#333; position:absolute; left:50%; bottom:-20px; margin-left:-15px} .cm_comb_search .cm_no_conts .gtxt dd {color:#999; font-size:12px; padding:2px 0; line-height:13px;} .cm_comb_search .group_title {border-bottom:1px solid #ddd; text-align:center; margin-bottom:15px; margin-top:20px} .cm_comb_search .group_title .txt_box {position:relative; padding:0 18px 15px 15px; font-size:17px; color:#333; letter-spacing:-1px;} .cm_comb_search .group_title .txt_box:after {content:''; height:5px; width:100%; position:absolute; left:0; bottom:-3px; background:#000; border-radius:200px;} .cm_comb_search .item_inner {margin:10px;} .cm_comb_search .item_inner .sub_list {padding:0} .cm_comb_search .item_inner .list_top {min-height:35px; padding:0} .cm_comb_search .item_inner .sub_list .list_arrange { margin:0; } /* .cm_comb_search .board_result .btn_more {position:absolute; right:0; top:0; font-size:11px; letter-spacing:-1px; padding:5px 15px; border:1px solid #ddd; background:#fff; border-radius:20px;} .cm_comb_search .board_result {background:#fff; border:1px solid #d5d8dd; margin-top:20px; padding:40px;} .cm_comb_search .board_result .result_t {font-size:17px; position:relative; color:#999; position:relative; margin-bottom:20px;} .cm_comb_search .board_result .result_t .title {font-size:20px; font-weight:600; color:#000; margin-right:5px;} .cm_comb_search .board_result .result_t .sum {font-size:21px; font-weight:600; color:#ff0000;} .cm_comb_search .board_result .result dl {padding:12px; border-top:1px dashed #e3e3e3; } .cm_comb_search .board_result .result dt a {font-size:14px; color:#333} .cm_comb_search .board_result .result dd a {color:#999; line-height:16px; margin-top:5px; letter-spacing:0px;} .cm_comb_search .board_result .result .word {background:#ffff00; font-weight:normal} */ @charset 'utf-8'; /* copyright(c) 상상너머·원데이넷 all rights reserved. 허용된 라이센스이외 무단도용재배포를 금합니다. */ /* ●●●●●●●●●● CSS형 버튼 사용법 에이링크 */ /* ●●●●●●●●●● 상태텍스트아이콘 (둘중 한가지만 선택) */ /* bg꽉찬형 .texticon_pack span {display:inline-block; line-height:23px; line-height:24px\0 !important; height:22px; padding:0 12px 0 12px; margin:0; cursor:default; overflow:hidden; border-radius:60px;} .texticon_pack span {font-weight:400; font-size:11px;color:#fff !important; } .texticon_pack .red {background:#ff365c !important;} .texticon_pack .orange {background:#ff8a00 !important;} .texticon_pack .green {background:#86ae00 !important;} .texticon_pack .sky {background:#00a7bc !important;} .texticon_pack .blue {background:#0058b4 !important;} .texticon_pack .purple {background:#8000ec !important;} .texticon_pack .dark {background:#474747 !important;} .texticon_pack .light {background:#b4b4b4 !important;} .texticon_pack .black {background:#2b2b31 !important;} .texticon_pack.checkicon span {background-image:url('../images/cm_images/txt_icon_check.png') !important; background-repeat:no-repeat !important; background-position: 15px center !important;} .texticon_pack.checkicon span { padding:0 18px 0 30px !important; font-size:12px !important; line-height:26px !important; height:26px !important; line-height:27px\0 !important;} */ /* 보더형 */ .texticon_pack span {display:inline-block; line-height:20px; height:22px; padding:0 8px 0 8px; margin:0; cursor:default; overflow:hidden; border-radius:100px; box-sizing:border-box; } .texticon_pack span {font-weight:400; font-size:12px; color:#fff !important; background:#fff !important; letter-spacing:-0.5px;} .texticon_pack .red {border:1px solid #ff365c !important; color:#ff365c !important; } .texticon_pack .orange {border:1px solid #ff8a00 !important; color:#ff8a00 !important;} .texticon_pack .green {border:1px solid #86ae00 !important; color:#86ae00 !important;} .texticon_pack .sky {border:1px solid #00a7bc !important; color:#00a7bc !important;} .texticon_pack .blue {border:1px solid #0058b4 !important; color:#0058b4 !important;} .texticon_pack .purple {border:1px solid #8000ec !important; color:#8000ec !important;} .texticon_pack .dark {border:1px solid #474747 !important; color:#474747 !important;} .texticon_pack .light {border:1px solid #b4b4b4 !important; color:#b4b4b4 !important;} .texticon_pack .black {border:1px solid #2b2b31 !important; color:#2b2b31 !important;} .texticon_pack.checkicon span {position:relative;} .texticon_pack.checkicon span:before {content:''; background:transparent url('../images/cm_images/txt_icon_check.png') center center no-repeat !important; background-size:10px !important; position:absolute; left:4px; top:3px; width:15px; height:15px; border-radius:100px;} .texticon_pack.checkicon .red:before {background-color:#ff365c !important;} .texticon_pack.checkicon .orange:before {background-color:#ff8a00 !important;} .texticon_pack.checkicon .green:before {background-color:#86ae00 !important;} .texticon_pack.checkicon .sky:before {background-color:#00a7bc !important;} .texticon_pack.checkicon .blue:before {background-color:#0058b4 !important;} .texticon_pack.checkicon .purple:before {background-color:#8000ec !important;} .texticon_pack.checkicon .dark:before {background-color:#474747 !important;} .texticon_pack.checkicon .light:before {background-color:#b4b4b4 !important;} .texticon_pack.checkicon .black:before {background-color:#2b2b31 !important;} .texticon_pack.checkicon span { padding:0 10px 0 25px !important;} /* ●●●●●●●●●● 페이지네이트 2016-01-18 : 안드로이드보더값 안보이는 문제 업데이트 */ .cm_paginate {text-align:center; margin:20px 0; position:relative; overflow:hidden;} .cm_paginate .inner {height:40px; overflow:hidden; box-sizing:border-box;} .cm_paginate .inner .number {background:#fff; float:left; color:#999; font-size:15px; margin-left:-1px; letter-spacing:-1px; border:1px solid rgba(0,0,0,0.15); box-sizing:border-box; } .cm_paginate .inner .number {position:relative; background:#fff; padding:0 15px; height:40px; line-height:40px;} .cm_paginate .inner .hit {color:#000;} .cm_paginate .prevnext { height:40px; line-height:40px; background:#f5f3f2; padding:0 15px; overflow:hidden; text-align:center; box-sizing:border-box; border:1px solid rgba(0,0,0,0.15); overflow:hidden;} .cm_paginate .prevnext:first-of-type {float:left; border-right:0; border-radius:50px 0 0 50px;} .cm_paginate .prevnext:last-of-type {float:left; border-left:0; border-radius:0 50px 50px 0;} /* .cm_paginate .prevnext .arrow {width:9px; height:22px; background:transparent url('../images/cm_images/paginate.png') left top no-repeat; background-size:18px; margin:10px 0 0 0} .cm_paginate .prevnext:last-of-type .arrow {background-position:right top} */ .cm_paginate .prevnext .arrow_pagenate {width:9px; height:22px; background:transparent url('../images/cm_images/paginate.png') left top no-repeat; background-size:18px; margin:10px 0 0 0} .cm_paginate .prevnext:last-of-type .arrow_pagenate {background-position:right top} /* 글쓰기 버튼이 있을경우 */ .cm_btn_write {position:absolute; right:10px; top:0; border-radius:100px; height:35px; width:35px; border-radius:10px; text-align:center; border:1px solid rgba(0,0,0,0.15); border-radius:100px; box-sizing:border-box;} .cm_btn_write {background:#fff url('../images/cm_images/btn_ic_write.png') center center no-repeat; background-size:18px;} /* ●●●●●●●●●● 탭메뉴이용시 */ .cm_tabmenu {} .cm_tabmenu .tabbox {display:table; width:100%;} .cm_tabmenu .tabbox ul {display:table-row;} .cm_tabmenu .tabbox li {display:table-cell; text-align:center; background:rgba(0,0,0,0.05); border-left:1px solid rgba(0,0,0,0.1); width:1%; box-sizing:border-box; position:relative;} .cm_tabmenu .tabbox li:before {content:''; background:rgba(0,0,0,0.1); width:100%; height:1px; position:absolute; left:0; bottom:0;} .cm_tabmenu .tabbox li:first-of-type {border-left:0} .cm_tabmenu .tabbox .tab {display:block; padding:10px 0; letter-spacing:-1px; color:rgba(0,0,0,0.4); font-size:13px} .cm_tabmenu .tabbox .hit {background:#fff;} .cm_tabmenu .tabbox .hit:before {display:none} .cm_tabmenu .tabbox .hit a { color:#333; box-shadow:none} /* ●●●●●●●●●● 페이지 도움말 */ .cm_user_guide {border:1px solid #ddd; border-radius:5px; background:#fff url('../images/cm_images/guide_txt.png') 15px center no-repeat; background-size:38px; margin-top:20px; text-align:left;} .cm_user_guide dl { margin-left:60px; padding:10px 10px; } .cm_user_guide dt {font-size:14px; color:#cc0000; margin-bottom:5px; letter-spacing:-1px; padding-top:20px} .cm_user_guide dt:first-child {padding-top:0} .cm_user_guide dd {font-size:11px; line-height:13px; color:#999; letter-spacing:0px; margin-top:4px} .cm_user_guide b,.cm_user_guide strong {color:#000; font-weight:400; letter-spacing:0px;} /* ●●●●●●●●●● 관리자설정 팝업창 */ .popup {/* position:absolute; */ z-index:99; display:block; position:relative; border-radius:10px; overflow:hidden; margin:20px; box-shadow:0 0 6px rgba(0,0,0,0.5);} .popup .img {overflow:hidden;} .popup .img a {display:block; float:left; width:100%;} .popup .img img {float:left; width:100%;} .popup .btn_area {position:relative; overflow:hidden; background:rgba(0,0,0,0.8);} .popup .btn_area label {overflow:hidden; color:#999; font-size:12px; float:left; padding:0 15px; line-height:35px;} .popup .btn_area input {margin:1px 3px 0 0; width:0; height:0;} .popup .btn_close {position:absolute; right:0; top:0; padding:10px 10px; height:35px; width:40px; box-sizing:border-box; background:rgba(0,0,0,0.5);} .popup .btn_close .shape {width:18px; height:2px; background:#ccc; position:absolute; left:50%; top:50%; margin:-1px 0 0 -8px; transform: rotate(45deg); -webkit-transform: rotate(45deg);} .popup .btn_close .shape:before {content:''; background:#d5d4d4; width:2px; height:18px; position:absolute; left:50%; top:50%; margin:-9px 0 0 -1px;} /* ●●●●●●●●●● 텍스트페이지(약관등) */ .cm_fulltext {overflow:hidden; line-height:18px;} .cm_fulltext dt {background:rgba(0,0,0,0.05); border-bottom:1px solid #e4e4e4; padding:10px 10px 10px 20px; color:#333; font-size:15px;} .cm_fulltext dd {white-space:pre-line; padding:20px; line-height:17px; font-size:12px; color:#888} .cm_fulltext strong {color:#ff6600; font-weight:400} /* ●●●●●●●●●● 마이통계치 */ .cm_mypage_sumbox_unique {overflow:hidden; text-align:center; margin-bottom:5px} .cm_mypage_sumbox_unique dt,.cm_mypage_sumbox_unique dd {text-align:center; color:#fff; box-sizing:border-box;} .cm_mypage_sumbox_unique b {font-weight:600; letter-spacing:0px;} .cm_mypage_sumbox_unique dt {background:#485362; font-size:17px; padding:15px 10px; overflow:hidden;} .cm_mypage_sumbox_unique dd {background:#a5a5a5; line-height:16px; padding:10px} /* ●●●●●●●●●● 목록 탭메뉴(카테고리있을경우) */ .cm_mypage_tab {overflow:hidden; position:relative; text-align:center;} .cm_mypage_tab .inner_tab {background:#eee; display:table; width:100%; box-sizing:border-box; } .cm_mypage_tab ul {display:table-row} .cm_mypage_tab li {list-style:none; display:table-cell; width:1%; border:1px solid #ddd;} .cm_mypage_tab a {display:block; padding:8px 0 6px 0;} .cm_mypage_tab strong {display:block; font-size:12px; font-weight:400; color:#000} .cm_mypage_tab .hit {background:#fff; border-bottom:1px solid #fff} .cm_mypage_tab .hit a {color:#000; } /* ●●●●●●●●●● 주문내역리스트 */ .cm_order_list {overflow:hidden; border-top:2px solid #333} .cm_order_list dl {border-bottom:1px solid #d9d9d9; } .cm_order_list dt {box-sizing:border-box; padding:10px;} .cm_order_list dd {padding:10px 10px 0 10px; overflow:hidden; position:relative;} .cm_order_list .number {color:#ff6600; font-size:15px; line-height:16px;} .cm_order_list .date {color:#888;} .cm_order_list .price {color:#888;} .cm_order_list .price strong {color:#ff0000;} .cm_order_list .name {font-size:13px; margin-top:5px; color:#333; font-weight:600; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; display: -webkit-box;} .cm_order_list .item_thumb {overflow:hidden; height:70px; width:70px; position:absolute; left:10px; top:10px;} .cm_order_list .item_thumb img {width:100%; height:100%; float:left;} .cm_order_list .item_info li {list-style:none; color:#333; box-sizing:border-box;} .cm_order_list .item_info ul:first-of-type {margin:0 60px 0 80px; height:80px;} .cm_order_list .item_info ul:last-of-type {overflow:hidden; background:rgba(0,0,0,0.05); position:relative;} .cm_order_list .item_info ul:last-of-type li {float:left; width:50%; box-sizing:border-box; padding:5px; text-align:center;} .cm_order_list .item_info ul:last-of-type:before {content:'';background:rgba(0,0,0,0.15); width:1px; height:12px; position:absolute; left:50%; top:50%; margin-top:-6px} .cm_order_list .icon_state {position:absolute; right:10px; top:10px; width:50px; height:50px; border:1px solid #666; border-radius:100px; line-height:50px; text-align:center; font-size:12px; background:#fff; font-weight:600} .cm_order_list .state_ready {border:1px solid #699f00; color:#699f00} .cm_order_list .state_pay {border:1px solid #1c9695; color:#1c9695} .cm_order_list .state_deliver {border:1px solid #0057b9; color:#0057b9} .cm_order_list .state_ok {border:1px solid #ca0000; color:#ca0000} .cm_order_list .state_cancel {border:1px solid #999; color:#999} .cm_order_list .btn_box {display:table; width:100%;} .cm_order_list .btn_box ul {display:table-row} .cm_order_list .btn_box li {display:table-cell; width:1%; box-sizing:border-box; padding:0 2px} .cm_order_list .btn_box li:only-of-type {padding:0} .cm_order_list .btn_box li:first-of-type {padding:0 4px 0 0} .cm_order_list .btn_box li:last-of-type {padding:0 0 0 4px} .cm_order_list .no_icon {background-image:url('../images/cm_images/no_conts_my_order.png');} /* ●●●●●●●●●● 마이페이지 기본리스트 */ .cm_mypage_list {} .cm_mypage_list.list_point .no_icon {background-image: url('../images/cm_images/no_conts_my_point.png');} .cm_mypage_list.list_coupon .no_icon {background-image: url('../images/cm_images/no_conts_coupon.png');} .cm_mypage_list.list_posting .no_icon {background-image: url('../images/cm_images/no_conts_my_posting.png');} .cm_mypage_list li {list-style:none; border-bottom:1px solid #dadada; position:relative; padding:10px; overflow:hidden;} .cm_mypage_list .date {color:#999; line-height:25px} .cm_mypage_list .title {color:#444; line-height:17px; font-size:14px; margin-top:5px; position:relative;} .cm_mypage_list .price {color:#ff6600; font-size:14px; text-align:right; line-height:20px;} .cm_mypage_list .state_icon {position:absolute; right:10px; top:10px;} .cm_mypage_list .date_soon {color:#999; line-height:25px; font-size:13px; line-height:22px;} .cm_mypage_list .date_due {color:#999; line-height:25px; font-size:13px; line-height:22px;} .cm_mypage_list .double_box {overflow:hidden; margin-top:5px; background:#f8f8f8; padding:3px 5px 2px 5px; box-sizing:border-box; } .cm_mypage_list .double_box .date_soon {float:left;} .cm_mypage_list .double_box .date_due {float:left;} .cm_mypage_list .double_box .price {float:right} .cm_mypage_list .double_icon {position:absolute; right:10px; top:10px;} .cm_mypage_list .double_icon .texticon_pack {float:left; margin-left:5px} .cm_mypage_list .relative_item {display:block; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp: 1; -webkit-box-orient: vertical; display: -webkit-box; position:relative; height:25px;} .cm_mypage_list .relative_item {color:#ff6600; line-height:25px; font-size:13px; padding-left:85px} .cm_mypage_list .relative_item .shape {width:8px; height:8px; border-left:2px solid #ccc; border-bottom:2px solid #ccc; position:absolute; left:5px; top:6px;} .cm_mypage_list .relative_item .front_txt {background:rgba(0,0,0,0.3); color:#fff; font-weight:400; padding:0 8px; border-radius:100px; font-size:12px; line-height:22px; position:absolute; left:20px; top:2px;} .cm_mypage_list.list_posting .if_relative {border-bottom:0} .cm_mypage_list.list_posting .if_relative:nth-of-type(2n) {background:rgba(0,0,0,0.03); border-bottom:1px solid #dadada; padding:6px 10px} .cm_mypage_list.list_posting .title {overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; display: -webkit-box; padding-right:40px; } .cm_mypage_list.list_posting .title .shape {position:absolute; right:0; top:0; width:30px; height:100%;} .cm_mypage_list.list_posting .title .shape:before {content:''; width:1px; height:14px; position:absolute; left:50%; top:50%; background:#bbb; transform: rotate(45deg); -webkit-transform: rotate(45deg); margin:-7px 0 0 2px} .cm_mypage_list.list_posting .title .shape:after {content:''; width:1px; height:14px; position:absolute; left:50%; top:50%; background:#bbb; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); margin:-7px 0 0 -8px} .cm_mypage_list.list_posting .conts_txt {overflow:hidden; line-height:16px; font-size:12px;} .cm_mypage_list.list_posting .conts_txt dd {color:#444; line-height:17px; font-size:14px;} .cm_mypage_list.list_posting .conts_txt dt {color:#000; font-weight:600; font-size:14px; padding-bottom:5px; margin-bottom:5px; border-bottom:1px dashed #ddd} .cm_mypage_list.list_posting .open_box {margin-top:5px; display:none; } .cm_mypage_list.list_posting .reply {position:relative; padding:10px 10px 10px 35px; overflow:hidden; text-align:left; border-radius:5px; background:rgba(0,0,0,0.05); margin:10px 0 0 0} .cm_mypage_list.list_posting .reply .shape_ic {width:14px; height:8px; border-right:1px solid #ff6600; border-top:1px solid #ff6600; position:absolute; left:10px; top:11px; transform: rotate(180deg); -webkit-transform: rotate(180deg);} .cm_mypage_list.list_posting .reply .shape_ic:before {content:''; background:#ff6600; position:absolute; left:2px; top:0; margin-top:-7px; width:1px; height:8px; transform: rotate(45deg); -webkit-transform: rotate(45deg); } .cm_mypage_list.list_posting .reply .shape_ic:after {content:''; background:#ff6600; position:absolute; left:2px; top:0; margin-top:-2px; width:1px; height:8px; transform: rotate(-45deg); -webkit-transform: rotate(-45deg);} .cm_mypage_list.list_posting .reply .admin {display:block; color:#ff6600; margin-bottom:5px; overflow:hidden; _w} .cm_mypage_list.list_posting .reply .admin .name {font-weight:600; color:#ff6600; float:left; line-height:18px;} .cm_mypage_list.list_posting .reply .admin .date {color:#333; letter-spacing:0px; float:left; line-height:18px;} .cm_mypage_list.list_posting .reply .admin .bar {background:#ccc; float:left; width:1px; height:10px; margin:4px 10px 0 10px} .cm_mypage_list.list_posting .open_full .open_box {display:block} .cm_mypage_list.list_posting .open_full .title {display:none;} .cm_mypage_list.list_posting .open_full .upper_link {display:none;} .cm_mypage_list .file_down {border:1px solid #ddd; padding:5px 10px; position:relative; margin:10px 0 0 0; background:#fff; color:#999; border-radius:5px;} .cm_mypage_list .file_down .opt {position:absolute; left:25px; top:50%; margin-top:-11px; width:70px; height:20px; line-height:20px; line-height:23px\0; color:#666; padding-left:20px; background:transparent url('../images/cm_images/board_view_file.gif') left center no-repeat;} .cm_mypage_list .file_down .value {margin-left:105px; padding-left:25px; overflow:hidden; border-left:1px dotted #ddd; } .cm_mypage_list .file_down .link {height:20px; line-height:20px; color:#888; text-decoration:underline; float:left; margin-right:15px; letter-spacing:0px;} .cm_mypage_list .file_down .link:hover {color:#000} /* ●●●●●●●●●● 참여점수 */ .cm_mypage_score {overflow:hidden; border-left:1px solid #ddd; border-right:1px solid #ddd; border-bottom:1px solid #ddd; background:rgba(0,0,0,0.05); } .cm_mypage_score li {list-style:none; float:left; width:20%; border-top:1px solid #ddd; position:relative;} .cm_mypage_score li:before {content:''; width:1px; height:100%; background:#eee; position:absolute; left:-1px; top:0;} .cm_mypage_score .box {text-align:center;} .cm_mypage_score .level {font-family:'lato'; font-size:19px; font-weight:300; color:#333; line-height:40px; position:relative; background:#fff;} .cm_mypage_score .score {padding:4px; font-size:9px; letter-spacing:-0.5px; color:#888; border-top:1px solid #ddd; font-family:helvetica;} .cm_mypage_score .hit .level {background:#bbb; color:#fff; font-weight:600} .cm_mypage_score .hit .score {background:#ddd; color:#444} .cm_mypage_score .hit:after {content:''; position:absolute; left:50%; top:-1px; width:0; height:0; border-left:5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #fff; margin-left:-5px;} .cm_mypage_action {overflow:hidden; background:#e3e3eb; padding:10px; } .cm_mypage_action .my_level {text-align:center; overflow:hidden; height:45px;} .cm_mypage_action .my_level .score {color:#fff; background:#4d4d57; line-height:45px; width:50%; float:left;} .cm_mypage_action .my_level .level {background:#a0a0a0; overflow:hidden; background:#ea0700; line-height:45px;} .cm_mypage_action .my_level .level {display:block; font-family:'lato'; font-size:20px; font-weight:600; color:#fff} .cm_mypage_action .my_score {background:#fff; overflow:hidden; border-right:1px solid #ddd; margin-top:5px} .cm_mypage_action .my_score li {position:relative; text-align:center; border-top:1px solid #ddd; border-bottom:1px solid #ddd; float:left; width:33.33%; list-style:none} .cm_mypage_action .my_score li:before {content:''; width:1px; height:100%; background:#ddd; position:absolute; left:0; top:0;} .cm_mypage_action .my_score .opt {color:#333; height:30px; line-height:30px; border-bottom:1px solid #ddd;} .cm_mypage_action .my_score .value {line-height:40px; font-size:14px; color:#333} .cm_mypage_action .my_score .value strong {font-size:15px; font-weight:400; font-family:'lato'; color:#ff0000; letter-spacing:0px;} .cm_mypage_action .change_point {background:#e3e3eb; overflow:hidden; position:relative; margin:15px 0 5px 0} .cm_mypage_action .change_point .input_box {margin-right:115px} .cm_mypage_action .change_point .input_design {width:100%; background:#fff; height:35px; border:2px solid #333; border-radius:3px; padding:0 10px; text-align:right; color:#333; font-size:16px; letter-spacing:0px;} .cm_mypage_action .change_point .input_design:focus {border:2px solid #ff0000;} .cm_mypage_action .change_point .change_point {position:absolute; right:30px; top:50%; margin-top:-15px} /* ●●●●●●●●●● 마이페이지 단락타이틀 */ .cm_mypage_ctrl {overflow:hidden; padding:10px;} /* ●●●●●●●●●● 마이페이지 찜 */ .cm_mypage_wish {overflow:hidden; border-top:1px solid #eee; /* border-top:2px solid #333; */} .cm_mypage_wish ul {overflow:hidden; text-align:left; padding:0 5px; overflow:hidden;} .cm_mypage_wish li {float:left; width:50%; padding:10px 5px; list-style:none; box-sizing:border-box;} .cm_mypage_wish .wish_box {position:relative;} .cm_mypage_wish .wish_box .thumb {overflow:hidden; display:block;} .cm_mypage_wish .wish_box .thumb img {width:100%; float:left;} .cm_mypage_wish .wish_box dt {position:relative;} .cm_mypage_wish .wish_box dd {position:relative; overflow:hidden; border-top:1px solid #eee; } .cm_mypage_wish .wish_box .title {margin:10px 0; height:30px; overflow:hidden; color:#666; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; display: -webkit-box;} .cm_mypage_wish .price {color:#999; position:relative; line-height:22px; overflow:hidden; padding-top:10px; color:#ff6600; letter-spacing:0px; font-weight:600; float:left; font-size:13px; } .cm_mypage_wish label {padding:5px; position:absolute; left:5px; top:5px; z-index:3; background:rgba(255,255,255,0.8); border-radius:5px;} .cm_mypage_wish label input {margin:0} .cm_mypage_wish .cm_no_conts .no_icon {background-image:url('../images/cm_images/no_conts_my_wish.png');} /* ●●●●●●●●●● 회원탈퇴 */ .cm_mypage_leave {overflow:hidden; padding:20px; background:#fff;} .cm_mypage_leave li {list-style:none} .cm_mypage_leave .title_img {text-align:center; font-family:'lato'; font-size:30px; color:#333; margin-bottom:15px; font-weight:600;} .cm_mypage_leave .sub_txt {border-top:1px solid #eee; padding:15px 0; text-align:center; line-height:16px;} .cm_mypage_leave .sub_txt strong {color:#ff6600; font-weight:400; margin-top:5px; display:block; font-size:14px} .cm_mypage_leave .form_box {position:relative; overflow:hidden} .cm_mypage_leave .form_box li {overflow:hidden; border:1px solid #d1d1d1; border-radius:5px 5px 0 0; position:relative;} .cm_mypage_leave .form_box li:last-of-type {border-top:0; border-radius:0 0 5px 5px} .cm_mypage_leave .form_box .input_design {height:60px; width:100%; font-size:16px; padding:0 20px; box-sizing:border-box; color:#888; background:#ededed; padding-left:55px;} .cm_mypage_leave .form_box .input_design:focus {color:#000; background-color:#ddd;} .cm_mypage_leave .form_box .login_id:before {content:''; width:55px; height:60px; position:absolute; left:0; top:0; background:transparent url('../images/cm_images/member_login_id.png') center center no-repeat; background-size:18px;} .cm_mypage_leave .form_box .login_pw:before {content:''; width:55px; height:60px; position:absolute; left:0; top:0; background:transparent url('../images/cm_images/member_login_pw.png') center center no-repeat; background-size:18px;} .cm_mypage_leave .cm_bottom_button {margin:10px 0 0 0} /* ●●●●●●●●●● 고객센터메인 */ .cm_mypage_main {overflow:hidden;} .cm_mypage_main .quick_btn {margin-top:30px} .cm_mypage_main .quick_btn .title_box {text-align:center; background:transparent url('../images/cm_images/service_main_linebg.png') left top repeat; background-size:2px; height:10px;} .cm_mypage_main .quick_btn .title_box .txt {background:#fff; padding:0 20px; font-size:13px; color:#999; margin-top:-10px} .cm_mypage_main .quick_btn .title_box .txt strong {display:block; color:#333; font-family:'lato'; font-size:25px; margin-bottom:3px} .cm_mypage_main .quick_btn ul {overflow:hidden; margin-top:50px} .cm_mypage_main .quick_btn li {float:left; width:20%; list-style:none; text-align:center; position:relative;} .cm_mypage_main .quick_btn li:before {content:''; width:1px; height:100%; background:#eee; position:absolute; left:0; top:0;} .cm_mypage_main .quick_btn li:first-of-type:before {display:none;} .cm_mypage_main .quick_btn .img_box {display:block; margin-bottom:10px} .cm_mypage_main .quick_btn .img_box img {width:30px;} .cm_mypage_main .quick_btn .number {display:block; font-family:'lato'; font-size:24px; font-weight:300; margin-top:5px; letter-spacing:-1px;} .cm_mypage_main .quick_btn .state_ready {color:#699f00} .cm_mypage_main .quick_btn .state_pay {color:#1c9695} .cm_mypage_main .quick_btn .state_deliver {color:#0057b9} .cm_mypage_main .quick_btn .state_ok {color:#ca0000} .cm_mypage_main .quick_btn .state_cancel {color:#999} .cm_mypage_main .my_stats {margin:20px 10px 0 10px; overflow:hidden; border:1px solid #ddd; position:relative;} .cm_mypage_main .my_stats:before {content:''; width:1px; height:100%; background:#ddd; position:absolute; left:50%; top:0; z-index:55} .cm_mypage_main .my_stats li {list-style:none; width:50%; float:left; position:relative; box-sizing:border-box; padding:10px; text-align:center;} .cm_mypage_main .my_stats .inner_box {font-size:14px; overflow:hidden; margin-bottom:10px} .cm_mypage_main .my_stats .opt {display:block; font-size:14px; margin-bottom:5px} .cm_mypage_main .my_stats .value {float:left; font-family:'lato'; font-size:20px; float:left; color:#45484c;} .cm_mypage_main .my_stats .unit {float:left; font-size:14px; margin:4px 0 0 0} .my_stats_wide {margin:20px 0px 0 0px; overflow:hidden; border:1px solid #ddd; position:relative;} .my_stats_wide:before {content:''; height:100%; background:#ddd; position:absolute; left:50%; top:0; z-index:55} .my_stats_wide li {list-style:none; width:100%; float:left; position:relative; box-sizing:border-box; padding:10px; text-align:center;} .my_stats_wide .inner_box {font-size:14px; overflow:hidden; margin-bottom:10px} .my_stats_wide .opt {display:block; font-size:14px; margin-bottom:5px} .my_stats_wide .value {float:left; font-family:'lato'; font-size:20px; float:left; color:#45484c;} .my_stats_wide .unit {float:left; font-size:14px; margin:4px 0 0 0} .cm_mypage_main .group_title {position:relative; border-bottom:2px solid #cfcfcf; color:#333; font-size:15px; padding:10px} .cm_mypage_main .group_title .btn_all {position:absolute; right:10px; top:5px; font-size:12px; font-weight:400; border-radius:100px; background:rgba(0,0,0,0.1); padding:5px 10px 4px 10px} .cm_mypage_main .cm_order_list {margin-top:40px; border-top:0} .cm_mypage_main .recent_board {overflow:hidden; margin-top:20px} .cm_mypage_main .board_wish {} .cm_mypage_main .board_wish .no_icon {background-image:url('../images/cm_images/no_conts_mainboard.png')} .cm_mypage_main .wish_box {overflow:hidden; padding:10px 5px; text-align:center;} .cm_mypage_main .wish_box ul {display:inline-block} .cm_mypage_main .wish_box li {list-style:none; float:left; width:33.333%; box-sizing:border-box; padding:0 5px; margin-bottom:10px} .cm_mypage_main .wish_box .item_box {overflow:hidden; position:relative; text-align:left;} .cm_mypage_main .wish_box .item_box dt {color:#000; height:25px; padding:5px 0; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; display: -webkit-box;} .cm_mypage_main .wish_box .item_box dd {color:#ff6600; font-weight:600; margin-top:5px;} .cm_mypage_main .wish_box .item_thumb {display:block; overflow:hidden;} .cm_mypage_main .wish_box .item_thumb img {width:100%; float:left;} .cm_mypage_main .board_inquiry {margin-top:30px;} .cm_mypage_main .board_inquiry .no_icon {background-image:url('../images/cm_images/no_conts_mainboard.png')} .cm_mypage_main .list_box {overflow:hidden; padding:10px 0;} .cm_mypage_main .list_box dd {position:relative; padding:3px 10px} .cm_mypage_main .list_box .title {color:#555; position:relative; font-size:13px; line-height:25px; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp: 1; -webkit-box-orient: vertical; display: -webkit-box; margin-right:70px} .cm_mypage_main .list_box .date {font-weight:400; color:#ccc; padding-right:10px; position:relative;} .cm_mypage_main .list_box .texticon_pack {position:absolute; right:10px; top:2px;} /* ●●●●●●●●●● 내부게시판 */ .cm_shop_inner .top_area {overflow:hidden; margin-bottom:10px;} .cm_shop_inner .form_area {overflow:hidden;} .cm_shop_inner .form_area .input_design {background:#fff; border:1px solid #ccc; height:35px; padding:0 10px; border-radius:5px; width:100%; box-sizing:border-box; } .cm_shop_inner .form_area .input_design:focus {background:#fafafa} .cm_shop_inner .form_area .textarea_design {background:#fff; border:1px solid #ccc; height:80px; width:100%; padding:10px; border-radius:5px; box-sizing:border-box; } .cm_shop_inner .form_area .textarea_design:focus {background:#f6f6f6; border:1px solid #666;} .cm_shop_inner .form_area .textarea_box {margin-right:70px} .cm_shop_inner .form_area .form_title {margin-bottom:5px; overflow:hidden;} .cm_shop_inner .form_area .form_title input {width:100%;} .cm_shop_inner .form_area .form_file {margin-bottom:5px; overflow:hidden;;} .cm_shop_inner .form_area .form_conts {position:relative;} .cm_shop_inner .form_area .btn_ok {background:#fff; color:#333; border-radius:5px; border:1px solid #888; position:absolute; right:0; top:0; width:65px; height:80px; font-size:14px; font-weight:600; box-sizing:border-box; } .cm_shop_inner .form_area .mark_box {overflow:hidden; margin-bottom:5px; background:#fff; border:1px solid #ccc; } .cm_shop_inner .form_area .mark_box label {float:left; overflow:hidden; padding:10px 15px; border-left:1px solid #fff; border-right:1px solid #fff} .cm_shop_inner .form_area .mark_box input {margin:2px 5px 0 0; float:left;} .cm_shop_inner .form_area .mark_box .txt {float:left; line-height:35px; color:#999; margin:0 10px 0 10px} .cm_shop_inner .form_area .form_area .mark {background:transparent url('../images/cm_images/inner_star.png') no-repeat; width:75px; height:15px;} .cm_shop_inner .form_area .star {background:transparent url('../images/cm_images/inner_star.png') 0 -20px no-repeat; width:100%; height:100%; float:left;} .cm_shop_inner .none_member {margin-bottom:5px; overflow:hidden} .cm_shop_inner .none_member input {margin-right:5px; width:170px;} .cm_shop_inner .none_member .do_secret {float:left; line-height:35px; height:35px !important; overflow:hidden; padding:0 10px;} .cm_shop_inner .none_member .do_secret input {margin:11px 5px 0 0; width:15px;} /* 목록 */ .cm_shop_inner .cm_no_conts .no_icon {background-image:url('../images/cm_images/no_conts_board_eval.png');} .cm_shop_inner .list_area {border-top:2px solid #919191; margin-top:10px} .cm_shop_inner .list_area li {list-style:none; border-bottom:1px solid #dedede; position:relative;} .cm_shop_inner .post_box {overflow:hidden; padding:8px 0; position:relative;} .cm_shop_inner .post_box .btn_delete {float:left; width:19px; height:19px; border-radius:100px; border:1px solid #ddd; text-align:center; margin-left:10px} .cm_shop_inner .post_box .btn_delete .shape {margin:3px 0 0 0; display:inline-block; background:#000; width:1px; height:13px; position:relative; border-radius:100px; transform: rotate(45deg); -webkit-transform: rotate(45deg); } .cm_shop_inner .post_box .btn_delete .shape:after {content: ""; background:inherit; width:13px; height:1px; position:absolute; top:6px; left:-6px; border-radius:inherit;} .cm_shop_inner .list_area .mark {float:left; margin:5px 5px 5px 15px;} .cm_shop_inner .list_area .texticon_pack {position:absolute; left:0; top:7px} .cm_shop_inner .list_area .title {color:#666; font-size:13px; line-height:20px; height:22px; margin-left:65px; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp: 1; -webkit-box-orient: vertical; display: -webkit-box;} .cm_shop_inner .list_area .title_icon {width:15px; padding:2px 0; line-height:1.1; overflow:hidden; background:#ff6600; text-align:center; color:#fff; font-weight:600; font-size:10px; position:absolute; right:0; bottom:11px;} .cm_shop_inner .list_area .writer {float:right; margin-right:5px; line-height:20px; padding-left:22px; overflow:hidden;} .cm_shop_inner .list_area .writer .name {color:#333; letter-spacing:0px; float:left;} .cm_shop_inner .list_area .writer .date {color:#999; letter-spacing:0px; float:left;} .cm_shop_inner .list_area .writer .bar {background:#ccc; float:left; width:1px; height:10px; margin:5px 10px 0 10px} .cm_shop_inner .list_area .title_icon+ .writer {margin-right:20px} .cm_shop_inner .list_area .open_box {padding:10px; border-top:1px dashed #dedede; background:#eee; display:none} .cm_shop_inner .list_area .img {overflow:hidden; margin-bottom:10px;} .cm_shop_inner .list_area .img img {float:left; max-width:100% !important; height:auto; width:inherit; float:left;} .cm_shop_inner .list_area .conts_txt {line-height:18px; overflow:hidden;} .cm_shop_inner .list_area .conts_txt dt {margin-bottom:8px; color:#333; font-weight:600} .cm_shop_inner .reply {position:relative; padding:10px 10px 10px 35px; overflow:hidden; text-align:left; border-radius:5px; background:#fff; margin:20px 0 0 0} .cm_shop_inner .reply .shape_ic {width:14px; height:8px; border-right:1px solid #ff6600; border-top:1px solid #ff6600; position:absolute; left:10px; top:11px; transform: rotate(180deg); -webkit-transform: rotate(180deg);} .cm_shop_inner .reply .shape_ic:before {content:''; background:#ff6600; position:absolute; left:2px; top:0; margin-top:-7px; width:1px; height:8px; transform: rotate(45deg); -webkit-transform: rotate(45deg); } .cm_shop_inner .reply .shape_ic:after {content:''; background:#ff6600; position:absolute; left:2px; top:0; margin-top:-2px; width:1px; height:8px; transform: rotate(-45deg); -webkit-transform: rotate(-45deg);} .cm_shop_inner .reply+ .reply {margin-top:10px} .cm_shop_inner .reply .admin {display:block; color:#ff6600; margin-bottom:5px; overflow:hidden;} .cm_shop_inner .reply .admin .name {font-weight:600; color:#ff6600; float:left;} .cm_shop_inner .reply .admin .date {color:#333; letter-spacing:0px; float:left;} .cm_shop_inner .reply .admin .bar {background:#ccc; float:left; width:1px; height:10px; margin:4px 10px 0 10px} .cm_shop_inner .reply .btn_delete {position:absolute; right:12px; top:8px; width:19px; height:19px; border-radius:100px; border:1px solid #ddd; text-align:center;} .cm_shop_inner .reply .btn_delete .shape {margin:3px 0 0 0; display:inline-block; background:#000; width:1px; height:13px; position:relative; border-radius:100px; transform: rotate(45deg); -webkit-transform: rotate(45deg); } .cm_shop_inner .reply .btn_delete .shape:after {content: ""; background:inherit; width:13px; height:1px; position:absolute; top:6px; left:-6px; border-radius:inherit;} .cm_shop_inner .open_box .textarea_design:focus {background:#fff; border:1px solid #666;} .cm_shop_inner .open .open_box {display:block} .cm_shop_inner .open .title {color:#000} .cm_shop_inner .open .form_area {margin:10px 0 0 0;} /* 티켓몰 추가작업으로 옮길예정 2015-09-14 */ .cm_shop_inner .mark_star {position:absolute; left:0; top:12px; width:60px; height:20px; background:transparent url('../images/cm_images/mark_star.png') left top no-repeat; background-size:60px;} .cm_shop_inner .mark_star .star {width:100%; height:100%; background:transparent url('../images/cm_images/mark_star_inner.png') left top no-repeat; background-size:60px;} .cm_shop_inner .mark_star+ .title {margin-left:70px} /* ●●●●●●●●●● 단락 타이틀 */ .cm_shop_title {font-weight:600; letter-spacing:-1px; font-size:16px; border-bottom:1px solid #707070; position:relative; color:#333; padding:10px; margin-top:20px;} .cm_shop_title strong {color:#ff0000; font-weight:600} .cm_shop_title .explain {font-weight:normal; font-size:12px; color:#999; letter-spacing:-0.5px; margin-top:3px} .cm_shop_title:first-of-type {margin:0} .cm_shop_title img {float:left; width:10px; margin:3px 3px 0 0} /* ●●●●●●●●●● 입점 업체 */ .cm_shop_entered {overflow:hidden; background:#fff; padding:10px; position:relative; border-bottom:2px solid #ccc;} .cm_shop_entered .txt {font-size:15px; color:#000; position:absolute; left:10px; top:10px;} .cm_shop_entered .shopname {color:#0077ca; margin-left:60px; font-size:15px; font-weight:600; position:relative; padding-left:10px} .cm_shop_entered .shopname:before {content:''; width:1px; height:12px; background:#ddd; position:absolute; left:0; top:50%; margin-top:-7px} .cm_shop_entered .charge {padding-top:5px; font-size:12px;} .cm_shop_entered .charge b {color:#000; text-decoration:underline; letter-spacing:0px;} .cart_item_list+ .cm_shop_entered {margin-top:30px;} /* ●●●●●●●●●● 장바구니 상품리스트 */ .cm_shop_cart_list {} .cm_shop_cart_list li {border-bottom:1px solid #d7d7d7; position:relative; list-style:none; padding:10px 10px 10px 35px} .cm_shop_cart_list .if_nocart li {padding:10px 10px 10px 10px} .cm_shop_cart_list strong {color:#333; padding-right:2px; font-weight:600; letter-spacing:0px;} .cm_shop_cart_list .del_check {position:absolute; left:10px; top:10px;} .cm_shop_cart_list .item_info {position:relative; overflow:hidden; min-height:80px} .cm_shop_cart_list .item_info .thumb {height:80px; max-width:80px; border:1px solid #ddd; position:relative; position:absolute; left:0; top:0; overflow:hidden; box-sizing:border-box; } .cm_shop_cart_list .item_info .thumb img {width:100%; float:left;} .cm_shop_cart_list .item_info .name {color:#333; font-size:14px; letter-spacing:-1px; font-weight:600; margin-left:90px; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; display: -webkit-box;} .cm_shop_cart_list .item_name {position:relative; margin:10px 0 0 0; background:#fafafa; } .cm_shop_cart_list .item_name dd {border:1px solid #ddd; padding:8px; position:relative; } .cm_shop_cart_list .item_name dd +dd {border-top:0} .cm_shop_cart_list .item_name .option_name {background:transparent url('../images/cm_images/member_form_bullet.png') 0 3px no-repeat; background-size:10px; padding-left:14px; line-height:15px;} .cm_shop_cart_list .item_name .ess {background:#f3f3f3;} .cm_shop_cart_list .item_name .ess .option_name {background-image:url('../images/cm_images/member_form_bullet2.png');} .cm_shop_cart_list .counter_box {margin:7px 0 0 15px; position:relative; height:25px;} .cm_shop_cart_list .option_number {font-size:13px; color:#333; line-height:25px;} .cm_shop_cart_list .option_number .select {width:75px; height:25px; color:#333; font-size:13px; box-sizing:border-box; } .cm_shop_cart_list .option_number select {color:#333; line-height:25px;} .cm_shop_cart_list .counter_right {position:absolute; right:0; top:0;} .cm_shop_cart_list .option_price {float:left; line-height:25px; margin-right:5px; width:100px; text-align:right; font-size:13px;} .cm_shop_cart_list .option_delete {float:left; background:#fff; margin-top:0px; border:1px solid #ddd; box-sizing:border-box; width:21px; height:21px; border-radius:3px;} .cm_shop_cart_list .option_delete .shape {display:inline-block; margin:3px 0 0 9px; background:#666; width:1px; height:13px; position:relative; border-radius:100px; transform: rotate(45deg); -webkit-transform: rotate(45deg); } .cm_shop_cart_list .option_delete .shape:after {content: ""; background:inherit; width:13px; height:1px; position:absolute; top:6px; left:-6px; border-radius:inherit;} .cm_shop_cart_list .option_cancel {width:75px;} .cm_shop_cart_list .option_cancel a {padding:0} .cm_shop_cart_list .item_charge {margin:10px 0 0 0} .cm_shop_cart_list .item_charge dd {font-size:14px; position:relative; border-bottom:1px solid #eee;} .cm_shop_cart_list .item_charge dd:last-of-type {border-bottom:0} .cm_shop_cart_list .item_charge .opt {position:absolute; left:5px; top:5px; font-size:13px;} .cm_shop_cart_list .item_charge .value {font-size:13px; margin:0 0 0 70px; box-sizing:border-box; position:relative; padding:5px; text-align:right} .cm_shop_cart_list .item_charge .value strong {color:#000; font-weight:600;} .cm_shop_cart_list .item_charge .value .guide_txt {display:block; color:#888; margin-top:3px} .cm_shop_cart_list .ctrl_btn {margin:10px; overflow:hidden; text-align:left} .cm_shop_cart_list .cm_no_conts .no_icon {background-image:url('../images/cm_images/no_conts_cart.png'); } /* 배송상품아닌 쿠폰상품의 경우 */ .cm_shop_cart_list .thisis_coupon {background:#fff !important; position:relative;} .cm_shop_cart_list .thisis_coupon .thisis_due {color:#ff6600; padding:2px 0 6px 0; font-size:14px} .cm_shop_cart_list .thisis_coupon .thisis_txt {color:#999; padding:6px 0 0 0; border-top:1px dashed #ddd; font-size:13px} .cm_shop_cart_list .thisis_coupon .coupon_number {color:#000; padding:5px 80px 5px 0; border-top:1px dashed #ddd; line-height:24px; overflow:hidden; position:relative;} .cm_shop_cart_list .thisis_coupon .coupon_number .texticon_pack {float:left; margin-right:5px;} .cm_shop_cart_list .thisis_coupon .coupon_number .texticon_pack span { width:60px; text-align:center;} /* 상품전용쿠폰표기 */ .cm_shop_cart_list .item_coupon {position:relative; overflow:hidden; box-sizing:border-box; height:50px; margin-top:5px} .cm_shop_cart_list .item_coupon label {display:block;} .cm_shop_cart_list .item_coupon input {position:absolute; left:10px; top:50%; margin-top:-10px} .cm_shop_cart_list .item_coupon .white_box {display:block; height:50px; padding:0 10px 0 35px; background:#fff; box-sizing:border-box; border:1px solid #ff0000; border-radius: 5px 0 0 5px; margin-right:94px} .cm_shop_cart_list .item_coupon .coupon_ti {display:block; color:#999; font-size:12px; margin-top:10px; line-height:1;} .cm_shop_cart_list .item_coupon .coupon_name {display:block; color:#000; letter-spacing:-1px; font-size:13px; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp: 1; -webkit-box-orient: vertical; display: -webkit-box;} .cm_shop_cart_list .item_coupon .color_box {height:50px; background:#ff0000; box-sizing:border-box; width:95px; position:relative; border-radius: 0 5px 5px 0; position:absolute; right:0; top:0; text-align:center;} .cm_shop_cart_list .item_coupon .coupon_discount {display:block; color:#fff; font-weight:600; background-size:10px; font-size:15px; margin-top:10px; line-height:1;} .cm_shop_cart_list .item_coupon .coupon_price {display:block; color:#fff; font-size:13px; line-height:1; margin-top:3px} .cm_shop_cart_list .item_coupon .edge1 {background:#fff; border-radius:60px; height:15px; width:15px; box-shadow:0 0 2px rgba(0,0,0,0.5); position:absolute; left:-8px; top:-10px;} .cm_shop_cart_list .item_coupon .edge2 {background:#fff; border-radius:60px; height:15px; width:15px; box-shadow:0 0 2px rgba(0,0,0,0.5); position:absolute; left:-8px; bottom:-10px;} .cm_shop_cart_list .item_coupon div {display:block;} .cm_shop_cart_list .item_coupon div input {display:none} .cm_shop_cart_list .item_coupon div .white_box {padding:2px 10px 0 10px} .cm_shop_cart_list .btn_open_option {position:absolute; right:0; bottom:0; background:#5a5c68; padding:6px 30px 5px 12px; border-radius:100px; color:#fff; z-index:3} .cm_shop_cart_list .btn_open_option .shape {position:absolute; right:0; top:0; width:30px; height:100%; border-radius:0 5px 5px 0;} .cm_shop_cart_list .btn_open_option .shape:before {content:''; width:1px; height:8px; position:absolute; left:50%; top:50%; background:#bbb; transform: rotate(45deg); -webkit-transform: rotate(45deg); margin:-4px 0 0 2px} .cm_shop_cart_list .btn_open_option .shape:after {content:''; width:1px; height:8px; position:absolute; left:50%; top:50%; background:#bbb; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); margin:-4px 0 0 -3px} .cm_shop_cart_list .if_orderview .item_name {display:none;} .cm_shop_cart_list .if_orderview .option_open .item_name {display:block;} .cm_shop_cart_list .if_orderview .option_open .btn_open_option .shape {transform: rotate(180deg); -webkit-transform: rotate(180deg);} .cm_shop_cart_list .order_view_state {margin-bottom:5px; } .cm_shop_cart_list .order_view_btn {margin-top:10px; display:table; width:100%;} .cm_shop_cart_list .order_view_btn dl {display:table-row;} .cm_shop_cart_list .order_view_btn dd {display:table-cell; width:1%; box-sizing:border-box; padding:0 1px 0 1px} .cm_shop_cart_list .order_view_btn dd:only-of-type {padding:0} .cm_shop_cart_list .order_view_btn dd:first-of-type {padding:0 2px 0 0} .cm_shop_cart_list .order_view_btn dd:last-of-type {padding:0 0 0 2px} /* ●●●●●●●●●● 장바구니 계산 */ .cm_shop_cart_sum {overflow:hidden; background:#fff; border:2px solid #e4e4e4; margin-top:20px; text-align:right; box-sizing:border-box; margin:10px} .cm_shop_cart_sum li {list-style:none;} .cm_shop_cart_sum .box {display:block; position:relative; padding:5px 10px; border-bottom:1px solid #ddd} .cm_shop_cart_sum .box:last-of-type {border-bottom:0} .cm_shop_cart_sum .txt {font-size:13px; color:#666; position:absolute; left:10px; top:50%; margin-top:-7px} .cm_shop_cart_sum .price {overflow:hidden; margin-top:3px; } .cm_shop_cart_sum .price em {font-size:14px; margin:2px 0 0 2px; float:left; color:#333} .cm_shop_cart_sum .price strong {font-size:18px; font-weight:600; color:#333; font-family:'lato'; float:left;} .cm_shop_cart_sum .box .icon {width:20px; height:20px; border-radius:100px; position:absolute; left:50%; top:50%; margin:-11px 0 0 -10px; text-align:center; } .cm_shop_cart_sum .normal_box .icon {display:none} .cm_shop_cart_sum .plus_box .price strong {color:#007cdc} .cm_shop_cart_sum .minus_box .price strong {color:#559d20} .cm_shop_cart_sum .equal_box { border-right:0} .cm_shop_cart_sum .equal_box .price strong {color:#ff6000;} .cm_shop_cart_sum .plus_box .icon {border:1px solid #007cdc; background:#fff;} .cm_shop_cart_sum .plus_box .shape {width:12px; height:2px; background:#007cdc; position:absolute; left:50%; top:50%; margin:-1px 0 0 -6px} .cm_shop_cart_sum .plus_box .shape:before {content:''; background:#007cdc; width:2px; height:12px; position:absolute; left:50%; top:50%; margin:-6px 0 0 -1px} .cm_shop_cart_sum .minus_box .icon {border:1px solid #559d20; background:#fff;} .cm_shop_cart_sum .minus_box .shape {width:12px; height:2px; background:#559d20; position:absolute; left:50%; top:50%; margin:-1px 0 0 -6px} .cm_shop_cart_sum .equal_box .icon {border:1px solid #ff6100; background:#fff;} .cm_shop_cart_sum .equal_box .shape {width:12px; height:2px; background:#ff6100; position:absolute; left:50%; top:50%; margin:-3px 0 0 -6px} .cm_shop_cart_sum .equal_box .shape:before {content:''; background:#ff6100; width:12px; height:2px; position:absolute; left:50%; top:50%; margin:3px 0 0 -6px} /* ●●●●●●●●●● 약관동의 */ .cm_order_agree {overflow:hidden; background:#fafafa; padding:15px 15px 5px 15px;} .cm_order_agree .text_box {background:#fff; border:1px solid #ccc; overflow:hidden;} .cm_order_agree .textarea_design {background:#fff; padding:10px; width:100%; box-sizing:border-box; line-height:18px; height:100px; color:#999; font-size:12px;} .cm_order_agree .agree_check {overflow:hidden; position:relative; text-align:center;} .cm_order_agree .agree_check label {padding:10px 0; overflow:hidden; color:#555; font-size:13px;} /* ●●●●●●●●●● 최종결제 할인등 */ .cm_order_benefit {overflow:hidden; background:#f6f6f6;} .cm_order_benefit .title_box {position:absolute; left:10px; top:50%; width:60px; height:60px; border-radius:80px; border:2px solid #ccc; background:#fff; text-align:center; line-height:60px; box-sizing:border-box; } .cm_order_benefit .title_box {margin-top:-30px; border-top:2px solid #666;} .cm_order_benefit .coupon_box {background:#;position:relative; border-bottom:1px solid #ccc;} .cm_order_benefit .coupon_box ul {margin-left:80px; border-left:1px solid #dedede; background:#fff; min-height:80px} .cm_order_benefit .coupon_box li {list-style:none; border-bottom:1px solid #dedede; overflow:hidden; padding:10px; position:relative;} .cm_order_benefit .coupon_box li:last-of-type {border-bottom:0} .cm_order_benefit .coupon_box .coupon_name {color:#333; letter-spacing:0px; margin-bottom:5px;} .cm_order_benefit .coupon_box .coupon_price {color:#999; font-size:14px; line-height:34px;} .cm_order_benefit .coupon_box .coupon_price strong { color:#ff6600; letter-spacing:0px;} .cm_order_benefit .coupon_box .coupon_ctrl {float:right;} .cm_order_benefit .coupon_box .coupon_ctrl label {display:block; padding:6px 10px 6px 10px; border-radius:30px; border:1px solid #ddd; background:#fff; box-sizing:border-box; } .cm_order_benefit .cm_no_conts {background:#fff; margin-left:80px; border-left:1px solid #dedede;} .cm_order_benefit .cm_no_conts .no_icon {background-image:url('../images/cm_images/no_conts_coupon.png');} .cm_order_benefit .point_box {position:relative;} .cm_order_benefit .point_box ul {margin-left:80px; border-left:1px solid #dedede; background:#fff; padding:20px 15px} .cm_order_benefit .point_box li {list-style:none; overflow:hidden;} .cm_order_benefit .point_box .mypoint dt {font-size:17px; font-weight:400; color:#000} .cm_order_benefit .point_box .mypoint dt strong {letter-spacing:0px; color:#ff0000} .cm_order_benefit .point_box .mypoint dd {color:#ff6600; margin-top:6px} .cm_order_benefit .point_box .mypoint dd strong {letter-spacing:0px;} .cm_order_benefit .point_box .apply_point {margin-top:10px; display:block;} .cm_order_benefit .point_box .apply_point input {border:2px solid #ff6600; height:40px; border-radius:4px; text-align:right; padding:0 10px; color:#000; width:100%; font-size:16px; letter-spacing:0; box-sizing:border-box; } .cm_order_benefit .point_box .apply_point input:focus {background:#eee; border:2px solid #ff1919 !important;} /* 프로모션 코드추가 */ .cm_code_box {overflow:hidden; position:relative; padding:0 15px 15px 15px; background:#eee; text-align:center; margin:20px 10px 10px 10px} .cm_code_box .code_txt {font-size:16px; color:#333; color:#333; letter-spacing:-1px; padding:12px 0 10px 25px; background:transparent url('../images/cm_images/promotion_code.png') left top no-repeat; background-size:20px; } .cm_code_box .code_form {overflow:hidden; display:block;} .cm_code_box input {background:#fff; height:35px; padding:0 10px; font-size:14px; font-weight:600; color:#333; width:100%; box-sizing:border-box; border:2px solid #44464b; margin-right:5px; border-radius:3px;} .cm_code_box input:focus {background:#ddd;} /* ●●●●●●●●●● 장바구니 계산 */ .cm_shop_last_sum {overflow:hidden; background:#fff; border:3px solid #393b40; text-align:right; border-radius:0 0 20px 20px;} .cm_shop_last_sum li {list-style:none;} .cm_shop_last_sum .box {display:block; position:relative; padding:5px 10px; border-bottom:1px solid #ddd} .cm_shop_last_sum .box:last-of-type {border-bottom:0} .cm_shop_last_sum .txt {font-size:14px; color:#333; position:absolute; left:10px; top:50%; margin-top:-7px} .cm_shop_last_sum .price {overflow:hidden; margin-top:3px; } .cm_shop_last_sum .price em {font-size:17px; margin:2px 0 0 2px; float:left; color:#333} .cm_shop_last_sum .price strong {font-size:20px; font-weight:600; color:#333; font-family:'lato'; float:left;} .cm_shop_last_sum .box .icon {width:20px; height:20px; border-radius:100px; position:absolute; left:50%; top:50%; margin:-11px 0 0 -10px; text-align:center; } .cm_shop_last_sum .normal_box .icon {display:none} .cm_shop_last_sum .plus_box .price strong {color:#007cdc} .cm_shop_last_sum .minus_box .price strong {color:#559d20} .cm_shop_last_sum .equal_box { border-right:0} .cm_shop_last_sum .equal_box .price strong {color:#ff6000;} .cm_shop_last_sum .plus_box .icon {border:1px solid #007cdc; background:#fff;} .cm_shop_last_sum .plus_box .shape {width:12px; height:2px; background:#007cdc; position:absolute; left:50%; top:50%; margin:-1px 0 0 -6px} .cm_shop_last_sum .plus_box .shape:before {content:''; background:#007cdc; width:2px; height:12px; position:absolute; left:50%; top:50%; margin:-6px 0 0 -1px} .cm_shop_last_sum .minus_box .icon {border:1px solid #559d20; background:#fff;} .cm_shop_last_sum .minus_box .shape {width:12px; height:2px; background:#559d20; position:absolute; left:50%; top:50%; margin:-1px 0 0 -6px} .cm_shop_last_sum .equal_box .icon {border:1px solid #ff6100; background:#fff;} .cm_shop_last_sum .equal_box .shape {width:12px; height:2px; background:#ff6100; position:absolute; left:50%; top:50%; margin:-3px 0 0 -6px} .cm_shop_last_sum .equal_box .shape:before {content:''; background:#ff6100; width:12px; height:2px; position:absolute; left:50%; top:50%; margin:3px 0 0 -6px} .cm_shop_last_sum .save_point {overflow:hidden; text-align:center; border-top:1px solid #ddd; padding:10px; background:#fafafa; color:#999; clear:both; font-size:13px} .cm_shop_last_sum .save_point strong {color:#000; letter-spacing:0px;} /* ●●●●●●●●●● 입력폼테이블 */ .cm_order_form {} .cm_order_form li {list-style:none; position:relative; border-bottom:1px solid #dedede; width:100%; clear:both; box-sizing:border-box;} .cm_order_form .opt {position:absolute; left:10px; top:50%; margin-top:-3px; color:#888; padding-left:12px;} .cm_order_form .opt {background:transparent url('../images/cm_images/member_form_bullet.png') left center no-repeat; background-size:8px; } .cm_order_form.if_noinput .opt {top:12px} .cm_order_form .value strong {color:#ff0000;} .cm_order_form .value {margin-left:105px; background:#fff; overflow:hidden; line-height:18px; font-size:13px; color:#444; letter-spacing:0px; min-height:33px; box-sizing:border-box; padding:8px 10px 6px 0; box-sizing:border-box;} .cm_order_form .ess .opt {background-image:url('../images/cm_images/member_form_bullet2.png');} /* .cm_order_form .input_design {box-sizing:border-box; float:left; width:100%; background:#f1f1f1; border:1px solid #c1c1c1; border-right:0; border-bottom:0; height:40px; padding:0 10px; color:#666; border-radius:5px; letter-spacing:0px; font-size:13px; margin-bottom:5px} .cm_order_form .input_design:focus {background-color:#ddd; color:#333} */ .cm_order_form .textarea_design {background:#f1f1f1; border:1px solid #c1c1c1; border-right:0; border-bottom:0; line-height:18px; height:90px; padding:10px; color:#666; border-radius:5px; font-size:13px; margin-bottom:5px; box-sizing:border-box; } .cm_order_form .textarea_design:focus {background-color:#ddd; color:#333} .cm_order_form label {border-radius:30px; border:1px solid #ddd; display:block; line-height:20px; padding:7px 15px 7px 10px; margin-bottom:5px; font-size:13px; box-sizing:border-box; letter-spacing:-1px;} .cm_order_form .dash {float:left; margin:20px 5px 0 5px; font-size:15px; width:10px; height:1px; background:#ccc;} .cm_order_form .tip_txt {clear:both;} .cm_order_form .tip_txt dd {line-height:15px; color:#999; font-size:11px;} .cm_order_form .tip_txt dt {line-height:15px; color:#ff4949; font-size:11px;} .cm_order_form .text_multi {overflow:hidden;} .cm_order_form .text_multi dt {color:#000; padding:6px 0; font-size:13px; line-height:16px;} .cm_order_form .text_multi dd {border-top:1px dotted #ddd; padding:6px 0; font-size:13px; line-height:16px;} .cm_order_form .before_address {background:#fff; border:1px solid #666; margin:5px 10px 15px 10px; border-radius:10px; position:relative;} .cm_order_form .before_address .data {letter-spacing:0px; line-height:14px; padding:12px 15px; color:#666; position:relative; padding-right:90px; overflow:hidden; border-bottom:1px solid #ddd} .cm_order_form .before_address .data:last-of-type {border-bottom:0} .cm_order_form .before_address .data strong {color:#000; margin-right:5px} .cm_order_form .before_address:before {content:''; width:0; height:0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid #333; position:absolute; right:30px; top:-8px;} /* 결제정보 (마지막단계) */ .cm_order_form .thisis_price {background:#fff; border:1px solid #333; border-top:0; overflow:hidden; position:relative; padding:15px 15px} .cm_order_form .thisis_price .txt {font-size:16px; color:#333; position:absolute; left:15px; top:50%; margin-top:-10px; border-right:1px solid #ddd; padding-right:15px; line-height:20px;} .cm_order_form .thisis_price .price {text-align:right; } .cm_order_form .thisis_price .price strong {font-size:28px; color:#ff0000; font-family:'lato'; float:left;} .cm_order_form .thisis_price .unit {float:left; font-size:18px; color:#333; margin:7px 0 0 2px} .cm_order_form .thisis_price .unit_front {display:none; float:left; font-size:16px; font-weight:600; color:#333; margin:10px 3px 0 0} .cm_order_form .payway {overflow:hidden; padding:10px 10px 12px 10px} .cm_order_form .payway dd {width:50%; float:left; box-sizing:border-box; padding:2px 2px 2px 2px} .cm_order_form .payway dd:only-of-type {float:none; width:100%; padding:2px 0 2px 0} .cm_order_form .payway label {text-align:center; border-radius:10px; padding:50px 0 5px 0; border:1px solid #ddd; letter-spacing:-1px; box-sizing:border-box; position:relative; margin:0} .cm_order_form .payway label input {position:absolute; left:8px; top:8px;} .cm_order_form .payway .use_card {background:transparent url('../images/cm_images/shop_pay_card.png') center 15px no-repeat; background-size:25px;} .cm_order_form .payway .use_real {background:transparent url('../images/cm_images/shop_pay_real.png') center 15px no-repeat; background-size:25px;} .cm_order_form .payway .use_vert {background:transparent url('../images/cm_images/shop_pay_vert.png') center 15px no-repeat; background-size:25px;} .cm_order_form .payway .use_point {background:transparent url('../images/cm_images/shop_pay_point.png') center 20px no-repeat; background-size:25px;} .cm_order_form .payway .use_phone {background:transparent url('../images/cm_images/shop_pay_phone.png') center 20px no-repeat; background-size:25px;} /* .cm_order_form .payway .use_bank {background:transparent url('../images/cm_images/shop_pay_bank.png') center 15px no-repeat; background-size:25px;} */ .cm_order_form .payway .use_bank {background:transparent url('../images/cm_images/shop_pay_real.png') center 15px no-repeat; background-size:25px;} .cm_order_form .payway .use_wallet {background:transparent url('../images/cm_images/shop_pay_bank.png') center 15px no-repeat; background-size:25px;} .cm_order_form .benefit_sum {overflow:hidden; text-align:right; box-sizing:border-box;} .cm_order_form .benefit_sum dd,.cm_order_form .benefit_sum dt {position:relative; border-radius:100px; color:#666; margin:1px 0} .cm_order_form .benefit_sum dl {margin-right:5px} .cm_order_form .benefit_sum .shape {width:15px; height:15px; background:#eee; border-radius:100px; position:relative; float:left; margin:2px 5px 0 0; overflow:hidden;} .cm_order_form .benefit_sum .shape:before {content:""; width:7px; height:1px; background:#333; position:absolute; left:4px; top:7px;} .cm_order_form .benefit_sum .shape:after {content:""; width:1px; height:7px; background:#333; position:absolute; left:7px; top:4px;} .cm_order_form .benefit_sum dt .lineup {color:#333; font-weight:600; overflow:hidden;} .cm_order_form .benefit_sum dt .shape {background:#ccc;} .cm_order_form .benefit_sum dt .shape:before {content:""; width:7px; height:1px; background:#333; position:absolute; left:4px; top:6px;} .cm_order_form .benefit_sum dt .shape:after {content:""; width:7px; height:1px; background:#333; position:absolute; left:4px; top:8px;} .cm_order_form .benefit_sum dd:first-of-type: .shape {display:none;} /* ●●●●●●●●●● 가입완료메세지 */ .cm_shop_ok_message {background:#fff; overflow:hidden; padding:10px; text-align:center;} .cm_shop_ok_message img {width:100%; max-width:150px} .cm_shop_ok_message .notice {border-bottom:1px solid #eee; padding-bottom:20px; font-weight:400; font-size:23px; margin-bottom:5px} .cm_shop_ok_message .notice strong {color:#000; font-weight:400; font-family:inherit} .cm_shop_ok_message .txt {font-size:14px; margin-top:10px; letter-spacing:-1px; color:#999} .cm_shop_ok_message .order_number {background:#ff6600; border-radius:100px; color:#fff; padding:10px 20px; font-size:17px; font-weight:600; margin-top:10px} .cm_shop_ok_message .order_number strong {letter-spacing:0px; } .cm_shop_ok_message .cm_user_guide {margin-left:0; margin-right:0} /* ●●●●●●●●●● 비회원주문검색 */ .cm_guest_order {overflow:hidden; padding:15px; position:relative; background:#fff url('../images/cm_images/guest_img.jpg') 10px 10px no-repeat; background-size:120px;} .cm_guest_order .gtxt_box { font-size:13px; color:#888; line-height:16px; margin:10px 0 10px 110px; } .cm_guest_order .gtxt_box strong,.cm_guest_order .gtxt_box b {font-weight:400; color:#333} .cm_guest_order .telnumber {font-size:18px; color:#333; line-height:25px; margin-bottom:5px} .cm_guest_order .telnumber .call {font-family:'lato'; font-size:24px; font-weight:600; color:#fa0d3e; margin-top:3px; display:block; } .cm_guest_order .search_form {position:relative; overflow:hidden} .cm_guest_order .search_form .input_box {overflow:hidden;} .cm_guest_order .search_form .input_box li {list-style:none; width:50%; float:left; padding:0 2px 0 0; box-sizing:border-box;} .cm_guest_order .search_form .input_box li:last-of-type {padding:0 0 0 2px} .cm_guest_order .search_form .input_box li:only-of-type {padding:0; width:100%;} /* .cm_guest_order .search_form .input_design {background:#fff; border:1px solid #ccc; font-size:13px; height:35px; padding:0 10px; border-radius:5px; box-sizing:border-box; width:100%;} .cm_guest_order .search_form .input_design:focus {background:#eee; color:#000; border:1px solid #666;} */ .cm_guest_order .search_form .input_name {width:120px} .cm_guest_order .search_form .input_number {width:250px;} .cm_guest_order .btn_search {width:100%; background:#5b5b5b; height:35px; color:#fff; font-size:13px; text-align:center; border-radius:5px; margin-top:5px} /* ●●●●●●●●●● 주문상세에서 주문번호 */ .cm_order_number {text-align:center; border:1px solid #ff6600; margin-bottom:-10px; padding:12px 15px 11px 15px; } .cm_order_number .order_number {display:block; color:#ff6600; font-size:17px; font-weight:400;} .cm_order_number .btn_box {display:block; margin-top:10px; text-align:center;} /* ●●●●●●●●●● 장바구니 상품리스트 */ .cart_item_list {border:2px solid #333;} .cart_item_list li {position:relative; list-style:none; border-bottom:2px solid #333;} .cart_item_list li:last-of-type {border-bottom:0} .cart_item_list strong {color:#333; padding-right:1px; font-weight:600; letter-spacing:0px;} .cart_item_list .item_info {position:relative; overflow:hidden; min-height:80px; margin:10px; } .cart_item_list .item_info .thumb {height:80px; max-width:80px; position:relative; position:absolute; left:0; top:0; overflow:hidden; box-sizing:border-box; } .cart_item_list .item_info .thumb img {width:100%; float:left;} .cart_item_list .item_info .name {color:#333; font-size:13px; letter-spacing:-1px; line-height:16px; margin-left:90px; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp: 5; -webkit-box-orient: vertical; display: -webkit-box;} .cart_item_list .item_name {position:relative; background:rgba(0,0,0,0.1); padding:10px; border-top:1px solid rgba(0,0,0,0.3)} .cart_item_list .item_name dd {position:relative; border-bottom:1px solid #ccc; padding-bottom:5px} .cart_item_list .item_name .option_name {background:transparent url('../images/cm_images/member_form_bullet.png') 0 3px no-repeat; background-size:10px; padding-left:14px; line-height:15px;} .cart_item_list .item_name .ess .option_name {background-image:url('../images/cm_images/member_form_bullet2.png');} .cart_item_list .order_view_state {margin:0 0 10px 0; overflow:hidden; border-bottom:1px dashed rgba(0,0,0,0.2); padding-bottom:10px} .cart_item_list .order_view_state .texticon_pack {float:left; margin-right:3px} .cart_item_list .order_view_btn {text-align:center; overflow:hidden; margin-top:10px} .cart_item_list .order_view_btn dl {display:inline-block;} .cart_item_list .order_view_btn dd {display:inline-block; float:left; padding:0 1px 0 1px; border:0;} .cart_item_list .order_view_btn dd:only-of-type {padding:0} .cart_item_list .order_view_btn dd:first-of-type {padding:0 2px 0 0} .cart_item_list .order_view_btn dd:last-of-type {padding:0 0 0 2px} /* 배송상품아닌 쿠폰상품의 경우 */ .cart_item_list .thisis_coupon {position:relative; background:#fff; margin-top:-1px; border:1px solid #ccc; padding:0 !important} .cart_item_list .thisis_coupon .coupon_number {color:#000; padding:5px 70px 5px 0; border-bottom:1px dashed #ddd; line-height:24px; overflow:hidden; position:relative;} .cart_item_list .thisis_coupon .coupon_number:last-of-type {border-bottom:0} .cart_item_list .thisis_coupon .coupon_number .texticon_pack {float:left; margin:0 5px;} .cart_item_list .thisis_coupon .coupon_number .texticon_pack span { width:60px; text-align:center;} .cart_item_list .thisis_coupon .thisis_txt {color:#333; padding:4px 10px; border-bottom:1px dashed #ddd;} .cart_item_list .thisis_coupon .thisis_txt:last-of-type {border-bottom:0} .cart_item_list .thisis_benefit {position:relative; background:#fff; margin-top:-1px; border:1px solid #ff6600 !important; color:#ff6600; padding:4px 10px; margin-bottom:5px} .cart_item_list .counter_box {margin:5px 0 0 15px; position:relative; height:25px;} .cart_item_list .option_number {font-size:13px; color:#333; line-height:25px;} .cart_item_list .counter_right {position:absolute; right:0; top:0;} .cart_item_list .option_price {float:left; line-height:25px; margin-right:5px; text-align:right; font-size:13px;} .cart_item_list .option_price em {color:#999; margin-left:5px} .cart_item_list .item_charge {padding:10px} .cart_item_list .item_charge dd {font-size:14px; position:relative; border-bottom:1px solid #eee;} .cart_item_list .item_charge dd:last-of-type {border-bottom:0} .cart_item_list .item_charge .opt {position:absolute; left:5px; top:5px; font-size:13px;} .cart_item_list .item_charge .value {font-size:13px; margin:0 0 0 70px; box-sizing:border-box; position:relative; padding:5px; text-align:right} .cart_item_list .item_charge .value strong {color:#000; font-weight:600;} .cart_item_list .item_charge .value .guide_txt {display:block; color:#888; margin-top:3px} .cart_item_list .ctrl_btn {margin:10px; overflow:hidden; text-align:left} .cart_item_list .cm_no_conts .no_icon {background-image:url('../images/cm_images/no_conts_cart.png'); } .token_tid_main{clear:both;height:50px;width:100%;} .token_tid_main .top{width:100%;background:#7fb3ff;padding-top:20px} .token_tid_main .top h2{font-size:14px;font-weight:700;color:#fff;padding-bottom:16px} .token_tid_main .top h2 img{width:32px;height:auto;vertical-align:middle;margin-right:8px} .token_tid_main .top strong{font-size:24px;color:#fff;font-weight:700;text-align:right;display:block;padding-right:17px} .token_tid_main .top strong img{width:24px;height:auto;vertical-align:middle;margin-right:12px} .token_tid_main .top ul{margin-top:18px;padding-bottom:8px;padding-left:0} .token_tid_main .top ul li{float:left;width:25%} .token_tid_main .top ul li a{display:block;width:100%;height:100%} .token_tid_main .top ul li a .icon{display:block;text-align:center} .token_tid_main .top ul li a .icon img{width:32px;height:auto} .token_tid_main .top ul li a h3{font-weight:700;text-align:center;color:#fff;padding-top:4px} .token_tid_main .mid{background:#fff;width:100%;padding-bottom:12px} .token_tid_main .mid .area{width:95%;margin:0 auto;padding-top:8px} .token_tid_main .mid .area .tit{position:relative;height:32px;width:100%;margin-bottom:12px} .token_tid_main .mid .area .tit .prev{position:absolute;left:0;top:50%;margin-top:-12px} .token_tid_main .mid .area .tit .prev img{width:24px;height:auto} .token_tid_main .mid .area .tit h3{position:absolute;top:50%;left:50%;margin-top:-16px;margin-left:-76px;width:152px;height:32px;line-height:32px;text-align:center;color:#3a79c7;-webkit-border-radius:16px; -moz-border-radius:16px; border-radius:16px;} .token_tid_main .mid .area .tit .next{position:absolute;right:0;top:50%;margin-top:-12px} .token_tid_main .mid .area .tit .next img{width:24px;height:auto} .token_tid_main .mid .area .txt{width:100%;} .token_tid_main .mid .area .txt .box{width:100%;} .token_tid_main .mid .area .txt p{word-wrap: break-word;background:#f2f2f2;padding:7px 15px;font-weight:700;font-size:15px;font-weight:normal;text-align:left} .token_tid_main .mid .area .txt .btn_wrap_tid{font-weight:bold;} .token_tid_main .mid .area .txt .btn_wrap_tid a{float:left;height:35px;line-height:35px;font-size:14px;text-align:center;} .token_tid_main .mid .area .txt .btn_wrap_tid a.add{border:1px solid #3a79c7;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-border-radius:7px; -moz-border-radius:7px; border-radius:7px;color:#3a79c7} .token_tid_main .mid .area .txt .btn_wrap_tid a.copy{background:#3a79c7;-webkit-border-radius:7px; -moz-border-radius:7px; border-radius:7px;color:#fff;padding:0px 20px;margin:0px 10px;} .token_tid_main .mid .area .txt .btn_wrap_tid a img{width:15px;height:auto;margin-top:-5px;vertical-align:middle} .token_tid_main .btm{background:#fff;margin-top:12px} .token_tid_main .btm .area{width:90%;margin:0 auto} .token_tid_main .btm .area ul{width:100%} .token_tid_main .btm .area ul li{padding:13px 0;border-bottom:1px solid #efefef;width:100%} .token_tid_main .btm .area ul li a{display:block;width:100%;height:32px;line-height:32px;} .token_tid_main .btm .area ul li a > *{float:left;} .token_tid_main .btm .area ul li a .icon img{width:32px;height:auto;vertical-align:middle;margin-right:20px} .token_tid_main .btm .area ul li a h4{width:70%;font-weight:700;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal;overflow:hidden;} .token_tid_main .btm .area ul li.alarm a .icon{margin-right:20px} .token_tid_main .btm .area ul li.alarm a .icon em{display:block;width:28px;height:16px;background:#f9e7ba;text-align:center;line-height:16px;color:#3a79c7;-webkit-border-radius:8px; -moz-border-radius:8px; border-radius:8px;margin-top:4px} .token_tid_main .btm .area ul li.alarm a .icon img{width:16px;height:auto;display:block;margin-left:auto;margin-right:auto} .token_tid_main .btm .area ul li.alarm a h4{line-height:1;padding-bottom:8px} .token_tid_main .btm .area ul li.alarm a p{color:#ccc;line-height:1} .token_tid_main .black{position:fixed;top:0;left:0;width:100%;height:100%;background:#000;opacity:0;filter:Alpha(opacity=0);z-index:9;display:none;} .m_quick_center_menu{ bottom:0; width: 100%; background: #fff; display: flex; } .m_quick_center_menu ul{ display: flex; align-items: center; justify-content: space-between; width: 100%; } .m_quick_center_menu ul li{ display: flex; align-items: center; flex-direction: column; width:20%; gap:10px; margin:5px; border:1px solid #eaedf2; border-radius:10px; } .m_quick_center_menu ul li span{ color:#A6A6A6; font-size:13px; } .m_quick_center_menu ul li img{ filter:grayscale(70%); -webkit-filter:grayscale(70%); opacity: .7; } .sssscommon_pages_three .open_menu li:nth-last-of-type(1) {border-bottom:0} .sssscommon_pages_three .open_menu li:nth-of-type(3n) {border-bottom:1px solid rgba(0,0,0,0.1); border-right:0} /*.common_pages_three .open_menu li:last-of-type {border-bottom:0}*/ .cm_mypage_action_bonus {background:#fff; border:1px solid #e4e4e4; margin-bottom:20px; overflow:hidden; position:relative;} .cm_mypage_action_bonus .my_level {text-align:center; width:200px; position:absolute; left:30px; top:10px;} .cm_mypage_action_bonus .my_level .score {color:#fff; background:#4d4d57; height:40px; line-height:40px;} .cm_mypage_action_bonus .my_level .level {background:#a0a0a0; overflow:hidden; background:#ea0700; height:70px; line-height:70px;} .cm_mypage_action_bonus .my_level .level {display:block; font-family:'lato'; font-size:30px; font-weight:600; margin-bottom:10px; color:#fff} .cm_mypage_action_bonus .my_score { overflow:hidden; border-right:1px solid #ddd;clear:both} .cm_mypage_action_bonus .my_score ul {} .cm_mypage_action_bonus .my_score li {position:relative; text-align:center; border-top:1px solid #ddd; border-bottom:1px solid #ddd; float:left; width:50%; height:108px; list-style:none} .cm_mypage_action_bonus .my_score li:first-child:nth-last-child(1) {width:100%} .cm_mypage_action_bonus .my_score li:before {content:''; width:1px; height:100%; background:#ddd; position:absolute; left:0; top:0;} .cm_mypage_action_bonus .my_score li:hover {background:#fafafa;} .cm_mypage_action_bonus .my_score .opt {color:#333; height:40px; line-height:40px; border-bottom:1px solid #ddd;} .cm_mypage_action_bonus .my_score .value {height:70px; line-height:70px; font-size:15px; color:#333} .cm_mypage_action_bonus .my_score .value strong {font-size:17px; font-family:'lato'; color:#ff0000; letter-spacing:0px;} .cm_mypage_action_bonus .change_point {background:#eee; width:100%; height:50px;} .cm_mypage_action_bonus .change_point li {text-align:center; list-style:none;margin-top:5px;} /*.cm_mypage_action_bonus .change_point .input_design:focus {border:1px solid #ff0000;}*/ .cm_mypage_action_bonus .change_point_botttom {background:#eee; width:100%; height:50px;} .cm_mypage_action_bonus .change_point_botttom li {text-align:center; list-style:none;margin-top:5px;} /*.cm_mypage_action_bonus .change_point_botttom .input_design:focus {border:2px solid #ff0000;}*/ .cm_user_guide_bonus {padding:10px 0px; text-align:left;border:1px solid #e4e4e4;} .cm_user_guide_bonus dl { /*border-left:1px dashed #d4d4d4;*/ padding-left:10px; } .cm_user_guide_bonus dt {font-size:15px; color:#000; margin-bottom:10px; font-weight:600; letter-spacing:-1px; padding-top:20px} .cm_user_guide_bonus dt:first-child {padding-top:0} .cm_user_guide_bonus dd {line-height:18px; color:#999; background:transparent url('../images/cm_images/bullet_s.gif') left 8px no-repeat; padding-left:8px; letter-spacing:0px;} .cm_user_guide_bonus b,.cm_user_guide_bonus strong {color:#000; font-weight:400; letter-spacing:0px;} /* <공통> 도움말 @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */ .guide_text { margin:5px 0; display:block; position:relative; padding-left:17px; line-height:16px; clear:both} /* 2015-01-23 스프라이트이미지삭제 */ .guide_text .ic_blue {background: transparent url('/myAdmin/images/bullet_ic1.png') 0 0 no-repeat; width:12px; height:12px; display:inline-block; margin:0 3px 0 0; position:absolute; left:0; top:3px;} .guide_text .blue {font-size:12px; color:#0072ca;} .guide_text .ic_orange {background: transparent url('/myAdmin/images/bullet_ic2.png') 0 0 no-repeat; width:12px; height:12px; display:inline-block; margin:0 3px 0 0; position:absolute; left:0; top:3px;} .guide_text .orange {font-size:12px; color:#ff5a00; } .guide_text .ic_red {background: transparent url('/myAdmin/images/bullet_ic3.png') 0 0 no-repeat; width:12px; height:12px; display:inline-block; margin:0 3px 0 0; position:absolute; left:0; top:3px;} .guide_text .red {font-size:12px; color:#f6445e;font-weight:bold } .guide_text .replace_item {margin-top:10px} .guide_text_not { display:block; position:relative; padding-left:17px; height:0px;} .guide_text_not .ic_blue {background: transparent url('/myAdmin/images/bullet_ic1.png') 0 0 no-repeat; width:12px; height:12px; display:inline-block; margin:0 3px 0 0; position:absolute; left:0; top:3px;} .guide_text_not .blue {font-size:12px; color:#0072ca;} .guide_text_not .ic_orange {background: transparent url('/myAdmin/images/bullet_ic2.png') 0 0 no-repeat; width:12px; height:12px; display:inline-block; margin:0 3px 0 0; position:absolute; left:0; top:3px;} .guide_text_not .orange {font-size:12px; color:#ff5a00; } /* <공통> TEXT버튼 모음 @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */ .main_tab {overflow:hidden;margin-top:-1px;} .main_tab .btn {width:33.33333333333333%; float:left; box-sizing:border-box; border-left:1px solid #fff; color:rgba(0,0,0,0.6); font-size:14px; letter-spacing:-0.7px;border-radius: 0;} .main_tab .btn {text-align:center; background:#e3e5eb; height:42px; line-height:42px;} .main_tab .btn:first-child {border:none;} .main_tab .btn_hit {color:#fff; background:#333;} .main_tab_head {overflow:hidden;margin-top:-1px;} .main_tab_head .btn {width:33.33333333333333%; float:left; box-sizing:border-box; border-left:1px solid #fff; color:#326bab; font-size:14px; letter-spacing:-0.7px;border-radius: 0;} .main_tab_head .btn {text-align:center; background:#ffffff; height:42px; line-height:42px;border:1px solid #326bab} .main_tab_head .btn:first-child {border-right:0px;} .main_tab_head .btn:last-child {border-left:0px;} .main_tab_head .btn_hit {color:#fff; background:#326bab;border:0px;} .main_tab_sub {overflow:hidden;margin-top:-1px;} .main_tab_sub .btn {width:33.33333333333333%; float:left; box-sizing:border-box; color:#aaa; font-size:14px; letter-spacing:-0.7px;border-radius: 0;} .main_tab_sub .btn {text-align:center; background:#ffffff; height:60px; line-height:22px;border-bottom:1px solid #ccc;border-right:1px solid #ccc;border-top:1px solid #ccc;} .main_tab_sub .btn:first-child {border-left:1px solid #ccc;} .main_tab_sub .btn:last-child {} .main_tab_sub .btn_hit {color:#666; border-bottom:5px solid #999;border-left:1px solid #999;border-right:1px solid #999;border-top:1px solid #999;font-weight:bold} .main_tab_col3 {overflow:hidden;margin-top:-1px;} .main_tab_col3 .btn {width:33.33333333333333%; float:left; box-sizing:border-box; border-left:1px solid #fff; color:rgba(0,0,0,0.6); font-size:14px; letter-spacing:-0.7px;border-radius: 0;} .main_tab_col3 .btn {text-align:center; background:#e3e5eb; height:42px; line-height:42px;} .main_tab_col3 .btn:first-child {border:none;} .main_tab_col3 .btn_hit {color:#fff; background:#333;} .main_tab_style1 {overflow:hidden;} .main_tab_style1 .btn {width:25%; float:left; box-sizing:border-box; border-left:1px solid #fff; color:rgba(0,0,0,0.6); font-size:11px; letter-spacing:-0.7px;} .main_tab_style1 .btn {text-align:center; background:#fff; height:42px; line-height:24px;} .main_tab_style1 .btn:first-child {border:none;} .main_tab_style1 .btn .txt_box {width:97%;margin:5px 0px;padding:0px 0px;border-radius:7px;background:#efefef;} .main_tab_style1 .btn .btn_hit {color:#fff; background:#b60019;} /*수당박스 가로 정렬 부분*/ *, ::after, ::before { box-sizing: border-box; } .m-0 { margin: 0 !important; } .mt-0, .my-0 { margin-top: 0 !important; } .mr-0, .mx-0 { margin-right: 0 !important; } .mb-0, .my-0 { margin-bottom: 0 !important; } .ml-0, .mx-0 { margin-left: 0 !important; } .m-1 { margin: 0.25rem !important; } .mt-1, .my-1 { margin-top: 0.25rem !important; } .mr-1, .mx-1 { margin-right: 0.25rem !important; } .mb-1, .my-1 { margin-bottom: 0.25rem !important; } .ml-1, .mx-1 { margin-left: 0.25rem !important; } .m-2 { margin: 0.5rem !important; } .mt-2, .my-2 { margin-top: 0.5rem !important; } .mr-2, .mx-2 { margin-right: 0.5rem !important; } .mb-2, .my-2 { margin-bottom: 0.5rem !important; } .ml-2, .mx-2 { margin-left: 0.5rem !important; } .m-3 { margin: 1rem !important; } .mt-3, .my-3 { margin-top: 1rem !important; } .mr-3, .mx-3 { margin-right: 1rem !important; } .mb-3, .my-3 { margin-bottom: 1rem !important; } .ml-3, .mx-3 { margin-left: 1rem !important; } .m-4 { margin: 1.5rem !important; } .mt-4, .my-4 { margin-top: 1.5rem !important; } .mr-4, .mx-4 { margin-right: 1.5rem !important; } .mb-4, .my-4 { margin-bottom: 1.5rem !important; } .ml-4, .mx-4 { margin-left: 1.5rem !important; } .m-5 { margin: 3rem !important; } .mt-5, .my-5 { margin-top: 3rem !important; } .mr-5, .mx-5 { margin-right: 3rem !important; } .mb-5, .my-5 { margin-bottom: 3rem !important; } .ml-5, .mx-5 { margin-left: 3rem !important; } .row { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; } .row { margin-left: -8px; margin-right: -8px; } .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 { padding-left: 8px; padding-right: 8px; } .m-0 { margin: 0 !important; } .m-05 { margin: 5px !important; } .m-1 { margin: 8px !important; } .m-2 { margin: 16px !important; } .m-3 { margin: 24px !important; } .m-4 { margin: 32px !important; } .m-5 { margin: 40px !important; } .mt-0 { margin-top: 0 !important; } .mt-05 { margin-top: 5px !important; } .mt-1 { margin-top: 8px !important; } .mt-2 { margin-top: 16px !important; } .mt-3 { margin-top: 24px !important; } .mt-4 { margin-top: 32px !important; } .mt-5 { margin-top: 40px !important; } .mb-0 { margin-bottom: 0px !important; } .mb-05 { margin-bottom: 5px !important; } .mb-1 { margin-bottom: 8px !important; } .mb-2 { margin-bottom: 16px !important; } .mb-3 { margin-bottom: 24px !important; } .mb-4 { margin-bottom: 32px !important; } .mb-5 { margin-bottom: 40px !important; } .ml-0 { margin-left: 0 !important; } .ml-05 { margin-left: 5px !important; } .ml-1 { margin-left: 8px !important; } .ml-2 { margin-left: 16px !important; } .ml-3 { margin-left: 24px !important; } .ml-4 { margin-left: 32px !important; } .ml-5 { margin-left: 40px !important; } .mr-0 { margin-right: 0px !important; } .mr-05 { margin-right: 5px !important; } .mr-1 { margin-right: 8px !important; } .mr-2 { margin-right: 16px !important; } .mr-3 { margin-right: 24px !important; } .mr-4 { margin-right: 32px !important; } .mr-5 { margin-right: 40px !important; } .stat-box { background: #ffffff; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.09); border-radius: 10px; padding: 20px 24px; } .stat-box .title { font-size: 13px; color: #958d9e; font-weight: 500; display: block; margin-bottom: 8px; line-height: 1.4em; } .stat-box .value { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; line-height: 1em; color: #27173E; } .bonusitem .item { background: #ffffff; box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.09); border-radius: 12px; border: 1px solid #DCDCE9; padding: 20px 20px; margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; } .bonusitem .item:last-child { margin-bottom: 0; } .bonusitem .item p { font-size: 14px; margin: 0; color: #958d9e; font-weight: 500; } .bonusitem .item .detail { display: flex; align-items: center; justify-content: flex-start; line-height: 1.2em; } .bonusitem .item .detail .image-block { margin-right: 16px; } .bonusitem .item .detail strong { display: block; font-weight: 500; color: #27173E; margin-bottom: 3px; } .bonusitem .item .right { padding-left: 10px; } .bonusitem .item .right .price { font-size: 26px; font-weight: 700; color: #27173E; letter-spacing: -0.03em; } .badge { display: inline-block; padding: .25em .4em; font-size: 75%; font-weight: 700; line-height: 1; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: .25rem; transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out; } @media (prefers-reduced-motion: reduce) { .badge { transition: none; } } a.badge:focus, a.badge:hover { text-decoration: none; } .badge:empty { display: none; } .btn .badge { position: relative; top: -1px; } .badge-pill { padding-right: .6em; padding-left: .6em; border-radius: 10rem; } .badge-primary { color: #fff; background-color: #007bff; } a.badge-primary:focus, a.badge-primary:hover { color: #fff; background-color: #0062cc; } a.badge-primary.focus, a.badge-primary:focus { outline: 0; box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5); } .badge-secondary { color: #fff; background-color: #6c757d; } a.badge-secondary:focus, a.badge-secondary:hover { color: #fff; background-color: #545b62; } a.badge-secondary.focus, a.badge-secondary:focus { outline: 0; box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5); } .badge-success { color: #fff; background-color: #28a745; } a.badge-success:focus, a.badge-success:hover { color: #fff; background-color: #1e7e34; } a.badge-success.focus, a.badge-success:focus { outline: 0; box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5); } .badge-info { color: #fff; background-color: #17a2b8; } a.badge-info:focus, a.badge-info:hover { color: #fff; background-color: #117a8b; } a.badge-info.focus, a.badge-info:focus { outline: 0; box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5); } .badge-warning { color: #212529; background-color: #ffc107; } a.badge-warning:focus, a.badge-warning:hover { color: #212529; background-color: #d39e00; } a.badge-warning.focus, a.badge-warning:focus { outline: 0; box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5); } .badge-danger { color: #fff; background-color: #dc3545; } a.badge-danger:focus, a.badge-danger:hover { color: #fff; background-color: #bd2130; } a.badge-danger.focus, a.badge-danger:focus { outline: 0; box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5); } .badge-light { color: #212529; background-color: #f8f9fa; } a.badge-light:focus, a.badge-light:hover { color: #212529; background-color: #dae0e5; } a.badge-light.focus, a.badge-light:focus { outline: 0; box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5); } .badge-dark { color: #fff; background-color: #343a40; } a.badge-dark:focus, a.badge-dark:hover { color: #fff; background-color: #1d2124; } a.badge-dark.focus, a.badge-dark:focus { outline: 0; box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5); } .badge { border: 1px solid #000; } h1, h2, h3, h4, h5, h6 { color: #27173E; margin: 0 0 10px 0; } h1 small, h2 small, h3 small, h4 small, h5 small, h6 small { color: rgba(39, 23, 62, 0.6); } h1 .badge, h2 .badge, h3 .badge, h4 .badge, h5 .badge, h6 .badge { line-height: 1em; } .badge { font-size: 12px; line-height: 1em; border-radius: 100px; letter-spacing: 0; height: 22px; min-width: 22px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; font-weight: 400; } .badge-primary, a.badge-primary { background: #6236FF !important; } .badge-secondary, a.badge-secondary { background: #8494A8 !important; } .badge-success, a.badge-success { background: #1DCC70 !important; } .badge-danger, a.badge-danger { background: #FF396F !important; } .badge-warning, a.badge-warning { background: #FFB400 !important; color: #FFF; } .badge-info, a.badge-info { background: #754AED !important; } .badge-light, a.badge-light { background: rgba(255, 255, 255, 0.6) !important; color: #27173E; } .badge-dark, a.badge-dark { background: #222 !important; } .badge-empty { display: block !important; min-width: 8px !important; width: 8px !important; height: 8px !important; padding: 0 !important; font-size: 0px; } .appHeader .badge { min-width: 16px; height: 16px; line-height: 9px !important; font-size: 10px; padding: 0 4px !important; position: absolute; right: 2px; top: 10px; } .appHeader .badge-empty { top: 14px; } .appBottomMenu .badge { min-width: 16px; height: 16px; line-height: 9px !important; font-size: 10px; padding: 0 4px !important; position: absolute; right: 50%; transform: translateX(120%); top: -3px; } .appBottomMenu .badge-empty { transform: translateX(200%); top: -1px; } .col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto { position: relative; width: 100%; padding-right: 15px; padding-left: 15px; } .col { -ms-flex-preferred-size: 0; flex-basis: 0; -ms-flex-positive: 1; flex-grow: 1; max-width: 100%; } .col-auto { -ms-flex: 0 0 auto; flex: 0 0 auto; width: auto; max-width: 100%; } .col-1 { -ms-flex: 0 0 8.333333%; flex: 0 0 8.333333%; max-width: 8.333333%; } .col-2 { -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667%; } .col-3 { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } .col-4 { -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333%; } .col-5 { -ms-flex: 0 0 41.666667%; flex: 0 0 41.666667%; max-width: 41.666667%; } .col-6 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .col-7 { -ms-flex: 0 0 58.333333%; flex: 0 0 58.333333%; max-width: 58.333333%; } .col-8 { -ms-flex: 0 0 66.666667%; flex: 0 0 66.666667%; max-width: 66.666667%; } .col-9 { -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; } .col-10 { -ms-flex: 0 0 83.333333%; flex: 0 0 83.333333%; max-width: 83.333333%; } .col-11 { -ms-flex: 0 0 91.666667%; flex: 0 0 91.666667%; max-width: 91.666667%; } .col-12 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .recomid_attain_box { display: flex; align-items: center; justify-content: center; flex-direction: column; } .recomid_attain_box .star_rec_icon { display: flex; flex-wrap:wrap; } .recomid_attain_box .star_rec_icon span { display: block; width: 1.75rem; height: 1.75rem; background: url('/mo/images/icons/user_rec.png') no-repeat; background-size:20px; } .recomid_attain_box .star_rec_icon span.active { background: url('/mo/images/icons/user_rec_active.png') no-repeat; background-size:20px; } /* 폼 -------------------------------------------------------------------------------------------------------------------------------- */ /* 폼 :: 폼크기 ==================== */ .c_formpage .layout_fix {max-width:700px;} /* 폼 :: 폼요소 ==================== */ .c_form {box-sizing: border-box;} .c_form li {list-style: none;} .c_form .form_dl {display: flex; flex-direction: row; justify-content: flex-start; align-items: center; box-sizing: border-box; border-bottom:1px solid #f2f2f2; padding:15px 0;} .c_form .form_dt {width: 130px; display: flex; justify-content: flex-start; align-items: center; margin-right: 10px; box-sizing: border-box;} .c_form .form_dd {flex: 1; word-wrap:break-word; word-break:keep-all; white-space:normal; font-size:13px; color:#555; line-height:1.4; display:flex; justify-content: stretch; align-items: stretch; flex-direction:column; gap:5px} .c_form .form_dt .tit {font-size: 13px; color: #222; font-weight:500; display:inline-flex; justify-content: center; align-items: center; flex-direction:row; position:relative;} .c_form .form_dt.ess .tit:after {content:"*"; content:""; position:absolute; right:-7px; top:1px; width:4px; height:4px; border-radius:100px; background:#e10000;} .c_form .form_ul {display:flex; justify-content: stretch; align-items: stretch; flex-direction:column;} .c_form .form_li {display:flex; justify-content: stretch; align-items:stretch; flex-direction:column; gap:5px} .c_form .form_li+ .form_li {margin-top:10px;} .c_form .form_ul+ .form_ul {margin-top:20px; padding-top:20px; border-top:1px solid #333;} .c_form .form_tit {display:flex; justify-content: flex-start; align-items: center; flex-direction:row; flex:1; } .c_form .form_tit .btn_open {width:30px; height:30px; margin-left: auto; background: transparent url('../images/c_img/arrow_down.svg') center center no-repeat; background-size: 12px 7px !important;} .c_form .form_tit .btn_open {opacity: 0.3; filter: alpha(opacity=30); -ms-filter: alpha(opacity=30); transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out;} .c_form .form_tit .c_label {flex:1; margin-right:10px;} .c_form .tx_price {color:#000; font-weight:700;} .c_form .tx_ordernum {color:#e10000; font-weight:700;} .c_form .tx_item {color:#0065e3; font-weight:600;} .c_form .tx_option {color:#888;} .c_form .tx_bank {color:#333; font-weight:500;} .c_form .tip_txt {font-size: 12px; color: #999; line-height: 1.3; text-align: left; word-wrap:break-word; word-break:keep-all; white-space:normal;} .c_form .tip_txt strong {color:#0065e3; font-weight:600;} .c_form .tip_txt em {color:#000; font-weight:600;} .c_form .tip_txt a {text-decoration:underline; color:#FF5D4A; font-weight:500;} .c_form .score_box {display: flex; flex-direction: column; justify-content: flex-start; align-items: center; text-align: center;} .c_form .score_box.if_score1 .star.this_value {width:20%;} .c_form .score_box.if_score2 .star.this_value {width:40%;} .c_form .score_box.if_score3 .star.this_value {width:60%;} .c_form .score_box.if_score4 .star.this_value {width:80%;} .c_form .score_box.if_score5 .star.this_value {width:100%;} .c_form .score_box .star_box {position: relative; display: flex; flex-direction: row; justify-content: center; align-items: center;} .c_form .score_box .star_box ul {position:absolute; left:0; top:0; width:175px; z-index: 10; display: flex; flex-direction: row; justify-content: flex-start; align-items: center;} .c_form .score_box .star_box li {flex:1;} .c_form .score_box .star_box .click {display:block; height:35px;} .c_form .score_box .mark {width: 175px; height: 35px; position: relative;} .c_form .score_box .mark .star {position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-size: 35px !important;} .c_form .score_box .mark .star {background: transparent url('../images/c_img/item_star.svg') left center repeat-x;} .c_form .score_box .mark .star.this_base {z-index: 1; opacity: 0.2; filter: alpha(opacity=20); -ms-filter: alpha(opacity=20);} .c_form .score_box .mark .star.this_value {z-index: 2; background-image: url('../images/c_img/item_star_red.svg');} .c_form .upload_box {display:flex; justify-content: stretch; align-items: stretch; flex-direction:column;} .c_form .upload_box .label_photo {background:#f5f5f5; border:1px solid #e5e5e5; overflow:hidden; position:relative; padding:0 15px; height:45px; box-sizing:border-box; border-radius:5px;} .c_form .upload_box .upper_txt {font-size: 13px; color:#333; height: 100%; display: flex; flex-direction: row; justify-content: flex-start; align-items: center;} .c_form .upload_box .upper_txt {background:transparent url('../images/c_img/ic_photo.svg') right center no-repeat; background-size:22px auto !important;} .c_form .upload_box .input_photo {display: none;} .c_form .upload_box .preview {margin-top:5px; display: flex; flex-direction: column; justify-content: center; align-items: center;} .c_form .upload_box .preview img {max-width:100%; max-height:500px} .c_form .open_box {background: #f5f5f5; padding:15px; display:flex; justify-content: stretch; align-items: stretch; flex-direction:column; display: none; margin-top:10px;} .c_form .open_box .text_design {font-size:12px; color:#888;} .c_form .if_open_box .open_box {display: flex;} .c_form .if_open_box .form_tit .btn_open {opacity: 1; filter: alpha(opacity=100); -ms-filter: alpha(opacity=100); transform: rotate(180deg);} .c_form .user_info_box {padding: 15px; box-sizing: border-box; margin-top: 10px; background: #fff; border:1px solid #e5e5e5;} .c_form .user_info_box dl {box-sizing: border-box; display:flex; justify-content: flex-start; align-items: flex-start; flex-direction:row;} .c_form .user_info_box dl+ dl {margin-top:10px; border-top:1px dashed #f2f2f2; padding-top:10px;} .c_form .user_info_box dt, .c_form .user_info_box dd {font-size: 12px; line-height: 1.3;} .c_form .user_info_box dt {color: #333; font-weight: 500; width:50px; font-weight:600;} .c_form .user_info_box dd {word-wrap:break-word; word-break:keep-all; white-space:normal; color: #888; flex:1} .c_form .with_btn {display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap:5px; overflow:hidden;} .c_form .with_btn .input_design {flex:1} .c_form .with_btn *+ .c_select {width:120px;} .c_form .with_btn .c_select:first-child {flex:1} .c_form .with_btn .c_btn {padding:0 15px !important;} .c_form .with_btn .unit {font-size:1.1em; font-weight:600;} .c_form .with_btn.type_fixed .input_design {flex:none; width:100px;} .c_form .with_btn .c_label:last-of-type {margin-left:10px;} .c_form .other {} .c_form .input_file_box {background:#fff; border:1px solid #e5e5e5; position:relative; height:45px; width:100%; overflow:hidden; background:#f5f5f5; border-radius:5px; box-sizing:border-box;} .c_form .input_file_box .fakeFileTxt {float:left; width:100%; color:#333; font-size: 13px; text-indent:15px; border:0; height:100%; opacity: 1; filter: alpha(opacity=100); -ms-filter:alpha(opacity=100);} .c_form .input_file_box .fakeFileTxt {padding-right:40px; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp: 1; -webkit-box-orient: vertical; display: -webkit-box;} .c_form .input_file_box .fileDiv {width:100%; height:100%; overflow: hidden; position:absolute; left:0; top:0;} .c_form .input_file_box .buttonImg {width:50px; height:100%; position: absolute; top:0; right:15px; font-size:0px; border:0;} .c_form .input_file_box .buttonImg {background:transparent url('../images/c_img/ic_attach.svg') right center no-repeat; background-size:18px !important;} .c_form .input_file_box .realFile {position:absolute; right:0px; top:0px; width:100%; font-size:13px; height:100%; cursor:pointer !important; box-sizing:border-box; } .c_form .input_file_box .realFile {opacity:0; filter: alpha(opacity=0); -ms-filter: "alpha(opacity=0)"; -khtml-opacity: 0; -moz-opacity: 0;} .c_form .input_file_box.type_photo .buttonImg {background:transparent url('../images/c_img/ic_photo.svg') right center no-repeat;} .c_form .upload_list {} .c_form .upload_list .upload-file {display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 10px;} .c_form .photo_preview {display:flex; justify-content: center; align-items: center; flex-direction:column; overflow:hidden;} .c_form .photo_preview img {max-width:100%; max-height:500px; margin-top:5px;} .c_form .attach_box {overflow:hidden; display: flex; flex-direction:column; justify-content: stretch; align-items: stretch; gap:5px} .c_form .attach_box .duplicate {display:flex; justify-content: center; align-items: stretch; flex-direction:row; gap:5px} .c_form .attach_box .add_btn_box {display:flex; justify-content: stretch; align-items: stretch; flex-direction:column;} .c_form .attach_box .file_btn {width: 60px; box-sizing: border-box; font-size: 12px; color:#999; line-height: 1; font-weight:600; flex:1; border-radius:5px;} .c_form .attach_box .file_btn {background: #fff; border: 1px solid #ccc; display: flex; flex-direction: row; justify-content: center; align-items: center;;} .c_form .attach_box .file_btn.exec-addfile {border-color:#333; color: #333;} .c_form .bank_box {display:flex; justify-content: flex-start; align-items: center; flex-direction:row; flex-wrap:wrap; gap:5px} .c_form .bank_box .c_select {flex:1} .c_form .bank_box .input_design {width:120px; margin:0px !important;} .c_form .bank_box .input_design:last-of-type {width:100%;} .c_form .mine {display:flex; justify-content: flex-start; align-items: center; flex-direction:row; gap:5px; margin-bottom:5px;} .c_form .mine .txt {color:#000; font-weight:500; font-size:13px; line-height:1; border-radius:100px; padding:0 10px; height:30px; background:#f5f5f5;} .c_form .mine .txt {display:flex; justify-content: center; align-items: center; flex-direction:row; gap:5px} .c_form .mine .txt em {color:#e10000;} .c_form .mine .txt .num {color:#0065e3;} .c_form .sum_price {background:#f9f9f9; padding:15px;} .c_form .sum_price dl {display:flex; justify-content: space-between; align-items: center; flex-direction:row; } .c_form .sum_price dl+ dl {margin-top:5px;} .c_form .sum_price dt, .c_form .sum_price dd {color:#333; font-weight:600;} .c_form .sum_price .this_last {border-top:2px dashed #e5e5e5; padding-top:10px; margin-top:10px;} .c_form .sum_price .this_last * {color:#e10000;} .c_form .sum_price .this_discount * {color:#0065e3;} .c_form .payway_box {display:grid; gap:10px; grid-template-columns: repeat(3, 1fr)} .c_form .payway_box .c_label .tx {height:50px; border:2px solid #e5e5e5; border-radius:5px; justify-content: center; text-align:center; padding:0 10px;} .c_form .payway_box .c_label .icon {display:none;} .c_form .payway_box .c_label input:checked+ .tx {border-color:#e10000; color:#e10000;} .c_form .c_btnbox.type_full ul {width:100%; max-width:500px; margin:0 auto;} .c_form .receipt_print {} .c_form .multi_box {display:flex; flex-direction:row; justify-content:flex-start; align-items:center; gap:10px;} .c_form .multi_box input.input_design {flex:1;} /* 세부 레이아웃 :: 페이지 단계 ==================== */ .c_process {margin-bottom:50px; display:flex; flex-direction:row; justify-content:center; align-items:center;} .c_process ul {display:flex; justify-content:space-between; align-items: center; flex-direction:row; width:100%; max-width:400px;} .c_process li {list-style:none; position:relative; display:flex; justify-content: center; align-items: center; flex-direction:column; flex:1;} .c_process li:before {content:""; width:50%; height:2px; background:#eee; position:absolute; left:0; top:13px; z-index:1} .c_process li:after {content:""; width:50%; height:2px; background:#eee; position:absolute; right:0; top:13px; z-index:1} .c_process li:first-of-type:before {display:none;} .c_process li:last-of-type:after {display:none;} .c_process .tit {font-size:13px; color:#aaa; font-weight:500; margin-top:5px; white-space:nowrap} .c_process .num {width:30px; height:30px; border-radius:100px; border:2px solid #eee; box-sizing:border-box; font-weight:600; font-size:11px; color:#aaa; position:relative; background:#fff;} .c_process .num {display:flex; justify-content: center; align-items: center; flex-direction:column; letter-spacing:0px; z-index:2} .c_process .hit .tit {color:#222;} .c_process .hit .num {background:#222; border-color:#222; color:#fff;} .c_process .hit:after {background:#222;} .c_process .hit+ li:before {background:#222;} .mypoint_charge {margin:5px;float:right;} .mypoint_charge dt {font-size:16px; font-weight:600; color:#000;} .mypoint_charge dt strong {letter-spacing:0px; color:#ff0000} .mypoint_charge dd {color:#ff6600; margin-top:6px} .mypoint_charge dd strong {letter-spacing:0px;} .apply_charge_point {position:absolute; top:50%; margin-top:-18px} .apply_charge_point input {border:2px solid #ff6600; height:31px; line-height:31px; float:left; text-align:right; padding:0 10px; font-weight:800; color:#000; width:120px; font-size:14px; letter-spacing:0 } .apply_charge_point input:focus {background:#eee; border:2px solid #ff1919 !important;} .its-detailbtn { display: inline; padding: 4px 8px; background: #f8f9fa; border-radius: 300px; cursor: pointer; transition: all 0.3s; font-size: 12px; font-weight: 500; color: white; background: #3498db; } .its-section-title { font-size: 18px; font-weight: 600; color: #2c3e50; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid var(--border-color); } /* 결제 방식 스타일 */ .its-payment-methods { background: white; border-radius: 10px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); padding: 25px; margin-bottom: 30px; } .its-copy-btn { background: #3498db; color: white; border: none; padding: 6px 12px; border-radius: 4px; cursor: pointer; transition: all 0.3s; font-size: 13px; margin-left: 10px; } .its-copy-btn:hover { background: #2980b9; } .its-input-group { margin-bottom: 15px; } .its-input-label { display: block; margin-bottom: 8px; font-weight: 500; color: #2c3e50; } .its-input-field { width: 100%; padding: 12px; border: 1px solid #e0e6ed; border-radius: 5px; font-size: 14px; transition: all 0.3s; } .its-input-field:focus { outline: none; border-color: #3498db; box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2); } .its-checkbox-group { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; } .its-checkbox-input { width: 18px; height: 18px; accent-color: #3498db; } .its-checkbox-label { font-weight: 500; color: #2c3e50; } .its-purchase-table th, .its-purchase-table td { text-align: center !important; vertical-align: middle; } @media (max-width: 992px) { /* 태블릿에서는 2개씩 배치 */ .its-purchase-options { grid-template-columns: repeat(2, 1fr); } .its-payment-options { flex-direction: column; } } @media (max-width: 768px) { /* 모바일에서는 1개씩 배치 */ .its-purchase-options { grid-template-columns: 1fr; } .its-purchase-table { display: block; overflow-x: auto; } .its-purchase-list-header { flex-direction: column; gap: 10px; align-items: flex-start; } } @media (max-width: 576px) { .its-purchase-option { padding: 20px; } .its-payment-methods { padding: 20px; } .its-account-detail { flex-direction: column; align-items: flex-start; } .its-account-value { margin-left: 0; margin-top: 5px; text-align: left; } .its-copy-btn { margin-left: 0; margin-top: 10px; width: 100%; } .its-purchase-table th, .its-purchase-table td { padding: 10px 8px; font-size: 14px; } } .its-payment-options { display: flex; gap: 15px; margin-bottom: 20px; } .its-payment-option { flex: 1; padding: 15px; background: #f8f9fa; border-radius: 8px; cursor: pointer; transition: all 0.3s; text-align: center; border: 2px solid transparent; } .its-payment-option:hover { background: #e9ecef; } .its-payment-option.active { border-color: #3498db; background-color: rgba(52, 152, 219, 0.05); } .its-payment-icon { font-size: 24px; margin-bottom: 10px; color: #3498db; } .its-payment-name { font-weight: 600; color: #2c3e50; } /* 결제 정보 스타일 */ .its-payment-info { background: #ffffff; border-radius: 8px; padding: 20px; margin-top: 20px; display: none; } .its-payment-info.active { display: block; } .its-account-info { background: white; border-radius: 5px; padding: 15px; margin-bottom: 15px; border: 1px solid #e0e6ed; } .its-account-detail { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .its-account-label { font-weight: 500; color: #7f8c8d; } .its-account-value { font-weight: 600; color: #2c3e50; word-break: break-all; text-align: right; flex: 1; margin-left: 10px; } .its-payment-notice { background: #fff3cd; border: 1px solid #ffeaa7; border-radius: 5px; padding: 15px; margin-top: 15px; font-size: 14px; color: #856404; } .its-option-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 15px; flex: 1; } .its-option-title { font-size: 18px; font-weight: 600; color: #2c3e50; flex: 1; margin-right: 10px; } .its-option-price { font-size: 22px; font-weight: 700; color: #27ae60; text-align: right; white-space: nowrap; } .its-option-description { color: #7f8c8d; margin-bottom: 15px; font-size: 14px; line-height: 1.5; flex: 1; } .its-option-badge { position: absolute; top: -10px; right: 20px; background: #27ae60; color: white; padding: 5px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; } /* 구매 옵션 스타일 - 수정된 부분 */ .its-purchase-options { display: grid; grid-template-columns: repeat(3, 1fr); /* PC에서는 3개 가로 배치 */ gap: 20px; margin-bottom: 30px; } .its-purchase-option { background: white; border-radius: 10px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); padding: 25px; cursor: pointer; transition: all 0.3s; border: 2px solid transparent; position: relative; display: flex; flex-direction: column; height: 100%; } .its-purchase-option:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); } .its-purchase-option.active { border-color: #3498db; background-color: rgba(52, 152, 219, 0.05); } /* 결제하기 버튼 */ .its-purchase-btn { display: block; width: 100%; background: #3498db; color: white; border: none; padding: 15px; border-radius: 8px; cursor: pointer; transition: all 0.3s; font-size: 16px; font-weight: 600; margin-top: 20px; } .its-purchase-btn:hover { background: #2980b9; } .its-purchase-btn:disabled { background: #bdc3c7; cursor: not-allowed; } /* 구매 내역 스타일 */ .its-purchase-history { background: white; border-radius: 10px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); overflow: hidden; margin-top: 30px; } .its-purchase-list-header { padding: 16px 20px; background: #f8f9fa; border-bottom: 1px solid #e0e6ed; display: flex; justify-content: space-between; align-items: center; } .its-purchase-list-title { font-size: 18px; font-weight: 600; color: #2c3e50; } .its-purchase-summary { font-size: 14px; color: #7f8c8d; } .its-purchase-table { width: 100%; border-collapse: collapse; } .its-purchase-table th { background-color: #f8f9fa; padding: 14px 12px; text-align: left; font-weight: 600; color: #2c3e50; border-bottom: 1px solid #e0e6ed; } .its-purchase-table td { padding: 14px 12px; border-bottom: 1px solid #f1f3f4; } .its-purchase-table tr:hover { background-color: #f8f9fa; } .its-purchase-date { color: #7f8c8d; font-size: 14px; } .its-purchase-content { font-weight: 500; color: #2c3e50; } .its-purchase-amount { font-weight: 600; color: #27ae60; } .its-title-radius { display: inline-block; font-weight: 600; margin-top: 10px; margin-bottom: 5px; color: #2c3e50; border-radius:30px; border:1px solid #ddd;font-size:15px; line-height:20px; padding:5px 15px 5px 10px;box-sizing:border-box; } /* 네트워크 전체 영역 */ .its-network-section { margin-top: 24px; /*background-color: #f5f7fb;*/ /* padding: 20px; border: 1px solid #d7e0f0; border-radius: 12px; */ } /* 제목 라인 */ .its-network-title-row { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; } .its-network-title { font-size: 17px; font-weight: 700; color: #222; } .its-network-subtitle { font-size: 13px; color: #666; } /* 네트워크 슬라이더 박스 */ .its-network-selector { position: relative; display: flex; align-items: center; background-color: #ffffff; border: 1px solid #c4d3f0; border-radius: 10px; /* 둥근 원형 X, 살짝 라운드 네모 */ padding: 10px 50px; /* 안쪽에 화살표 들어갈 여유 */ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04); } /* 좌우 화살표 버튼 – 박스 안 좌우 끝 */ .its-network-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 8px; border: 1px solid #c4d3f0; background-color: #f0f4ff; display: flex; align-items: center; justify-content: center; cursor: pointer; outline: none; } .its-network-arrow i { font-size: 14px; color: #3562d6; } .its-network-arrow-prev { left: 8px; } .its-network-arrow-next { right: 8px; } .its-network-arrow:hover { background-color: #e1e8ff; } /* 중앙 표시 부분 */ .its-network-center { flex: 1; text-align: center; } .its-network-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 96px; padding: 6px 14px; border-radius: 999px; background: linear-gradient(90deg, #3562d6, #3f8bff); color: #fff; font-weight: 700; font-size: 16px; /* 폰트 살짝 키움 */ letter-spacing: 0.5px; } .its-network-center-text { margin-top: 6px; font-size: 13px; color: #555; } /* 주소 + 복사 버튼 영역 */ .its-network-address-wrap { margin-top: 16px; } .its-network-address-label { font-size: 14px; font-weight: 600; color: #333; margin-bottom: 6px; } .its-network-address-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .its-network-address-box { flex: 1; min-height: 46px; border-radius: 10px; background-color: #f1f4fa; border: 1px solid #d7e0f0; padding: 10px 12px; display: flex; align-items: center; font-size: 15px; /* 2~3px 업 */ color: #222; overflow-x: auto; white-space: nowrap; } .its-network-address-value { word-break: break-all; } /* 기존 its-copy-btn 재사용 + 살짝 업그레이드 */ .its-copy-btn.its-network-copy-btn { padding: 11px 18px; border-radius: 10px; border: none; background-color: #3562d6; color: #fff; font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; } .its-copy-btn.its-network-copy-btn i { font-size: 14px; } .its-copy-btn.its-network-copy-btn:hover { background-color: #2748a8; } /* QR 영역 */ .its-qr-section { margin-top: 20px; padding-top: 16px; border-top: 1px dashed #d7e0f0; } .its-text-title { font-size: 15px; font-weight: 700; color: #222; margin-bottom: 10px; } .its-qr-body { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; } /* QR 박스 */ .its-qr-box { width: 160px; height: 160px; border-radius: 12px; background-color: #ffffff; border: 1px solid #d7e0f0; display: flex; align-items: center; justify-content: center; overflow: hidden; } .its-qr-placeholder { font-size: 12px; color: #777; text-align: center; padding: 0 8px; } /* QR 안내 텍스트 */ .its-qr-help { flex: 1; min-width: 200px; font-size: 13px; color: #444; } .its-qr-help p { margin-bottom: 6px; } .its-qr-help ul { margin: 0; /*padding-left: 16px;*/ } .its-qr-help li { margin-bottom: 3px; } .its-network-center-wrap { flex: 1; text-align: center; } .its-network-center-item { display: none; } .its-network-center-item.active { display: block; } /* 모바일 대응 */ @media (max-width: 640px) { .its-network-selector { padding: 10px 42px; } .its-network-chip { min-width: 88px; font-size: 15px; } .its-network-address-row { flex-direction: column; align-items: stretch; } .its-copy-btn.its-network-copy-btn { width: 100%; justify-content: center; } .its-qr-body { flex-direction: column; } .its-qr-box { margin: 0 auto; } .its-qr-body { text-align:center; } } .its-purchase-empty { display: flex; flex-direction: column; /* 아이콘 위, 텍스트 아래 세로 배치 */ align-items: center; /* 가로 가운데 정렬 */ justify-content: center; /* 세로 가운데 정렬 */ text-align: center; /* 텍스트 가운데 정렬 */ /* 영역 높이가 있어야 세로 중앙이 보임 */ min-height: 150px; /* 필요에 따라 값 조절 */ } .its-purchase-empty-icon { margin-bottom: 8px; /* 아이콘과 텍스트 사이 간격 */ } /* 2025-12-13 지갑주소 추가 버튼 래퍼 */ .its-wallet_add_wrap { width: 100%; margin-top: 12px; } /* 2025-12-13 지갑주소 추가 버튼 (밝은 톤) */ .its-btn_wallet_add { display: flex; align-items: center; width: 100%; padding: 12px 14px; background: #f8fafc; /* 밝은 배경 */ border: 1px solid #dde3eb; /* 옅은 테두리 */ border-radius: 10px; text-decoration: none; box-shadow: 0 2px 4px rgba(15, 23, 42, 0.06); color: #111827; /* 글자색: 거의 검정 */ font-size: 14px; font-weight: 500; box-sizing: border-box; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.1s ease, transform 0.1s ease; } /* hover/active 효과 */ .its-btn_wallet_add:hover { background: #eef3fb; border-color: #c7d2fe; box-shadow: 0 3px 6px rgba(15, 23, 42, 0.12); } .its-btn_wallet_add:active { transform: scale(0.99); box-shadow: 0 1px 3px rgba(15, 23, 42, 0.18); } /* 텍스트 영역 */ .its-btn_wallet_add_text { color: #111827 !important; /* 검정톤 유지 */ font-size: 14px; } /* 2025-12-13 플러스 아이콘 (CSS 아이콘, 동그라미 없음) */ .its-btn_wallet_add_icon { display: inline-flex; position: relative; width: 18px; height: 18px; margin-right: 8px; flex-shrink: 0; } /* 가로/세로 선으로 플러스 모양 만들기 */ .its-btn_wallet_add_icon::before, .its-btn_wallet_add_icon::after { content: ""; position: absolute; top: 50%; left: 50%; background: #111827; /* 아이콘도 진한 검정톤 */ border-radius: 2px; transform: translate(-50%, -50%); } /* 가로선 */ .its-btn_wallet_add_icon::before { width: 12px; height: 2px; } /* 세로선 */ .its-btn_wallet_add_icon::after { width: 2px; height: 12px; } /* 2025-12-23 추천인 메시지 박스 디자인 */ #msg_recomid.msg_recomid{ display:none; /* 기본 숨김(내용 있을 때만 보이게 JS로 토글) */ margin:12px 0 0; padding:12px 14px; border-radius:14px; border:1px solid #e5e7eb; background:#f8fafc; color:#0f172a; font-size:13px; font-weight:900; line-height:1.45; letter-spacing:-.2px; /*box-shadow: 0 8px 18px rgba(17,24,39,.06);*/ position:relative; } /* 왼쪽 컬러 바(기본: 성공 느낌) */ #msg_recomid.msg_recomid:before{ content:""; position:absolute; left:10px; top:10px; bottom:10px; width:4px; border-radius:999px; background: linear-gradient(180deg,#22c55e,#16a34a); opacity:.95; } /* 내부 좌측 여백(컬러바 때문에) */ #msg_recomid.msg_recomid{ padding-left:22px; margin-top:-5px; margin-bottom:5px; } /* ✅ 내용이 비어있지 않으면 자동 표시(브라우저 호환 무난) */ #msg_recomid.msg_recomid:not(:empty){ display:block; } /* 옵션: 상태별 컬러(원하면 msg_recomid에 클래스 추가) */ #msg_recomid.msg_recomid.is-ok{ border-color: rgba(34,197,94,.35); background: rgba(34,197,94,.08); } #msg_recomid.msg_recomid.is-ok:before{ background: linear-gradient(180deg,#22c55e,#16a34a); } #msg_recomid.msg_recomid.is-warn{ border-color: rgba(245,158,11,.35); background: rgba(245,158,11,.10); } #msg_recomid.msg_recomid.is-warn:before{ background: linear-gradient(180deg,#f59e0b,#d97706); } #msg_recomid.msg_recomid.is-error{ border-color: rgba(239,68,68,.35); background: rgba(239,68,68,.08); } #msg_recomid.msg_recomid.is-error:before{ background: linear-gradient(180deg,#ef4444,#dc2626); } /* Wallet empty mini (icon + text only) */ .its-empty-wallet-mini{ width:100%; padding:18px 12px; display:flex; align-items:center; justify-content:center; text-align:center; } .its-empty-wallet-mini-inner{ display:flex; align-items:center; justify-content:center; gap:10px; padding:12px 14px; border:1px dashed #d1d5db; border-radius:14px; } .its-empty-wallet-mini-icon{ width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center; border-radius:12px; background:linear-gradient(135deg, rgba(37,99,235,.12), rgba(79,70,229,.12)); border:1px solid rgba(37,99,235,.18); color:#2563eb; flex:0 0 auto; font-size:16px; } /* Font Awesome 없을 때 대체 아이콘 */ .its-empty-wallet-mini-dot{ width:14px; height:14px; border-radius:999px; background:linear-gradient(135deg, #2563eb, #4f46e5); box-shadow:0 8px 14px rgba(37,99,235,.22); } .its-empty-wallet-mini-text{ font-size:14px; font-weight:800; color:#111827; letter-spacing:-.2px; line-height:1.2; } .user_level_box_img{width: 50px; height: 50px; overflow: hidden; border-radius: 20px; background: #fff;} .user_level_box_img img{display: block; width: 100%; object-fit: cover;} /* Left visual panel */ .its-visual{ position:relative; flex: 1 1 48%; display:grid; place-items:center; background: radial-gradient(1200px 600px at 0% 0%, rgba(255,0,149,.18), transparent 60%), radial-gradient(800px 400px at 100% 100%, rgba(0,178,255,.20), transparent 60%), linear-gradient(135deg, #1b002e 0%, #02243e 100%); isolation:isolate; } .its-visual::before{ content:""; position:absolute; inset:-10% -10%; background-image: repeating-radial-gradient(circle at 20% 30%, rgba(255,0,149,.35) 0 2px, transparent 2px 12px), repeating-linear-gradient(45deg, rgba(0,178,255,.3) 0 2px, transparent 2px 22px); mix-blend-mode:screen; opacity:.35; filter: blur(1px); } /* ✅ portrait: 이미지 삽입용으로 변경 */ .its-portrait{ position:relative; z-index:1; width:min(480px, 80%); aspect-ratio: 3/4; /* border-radius:20px; border: 2px solid rgba(255,255,255,.28); */ background:#070a12; /* 이미지 뒤 바탕 */ box-shadow: 0 0 0 10px rgba(255,255,255,.06), 0 40px 80px rgba(0,0,0,.5); overflow:hidden; } .its-portrait .its-portrait-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transform: scale(1.01); /* 미세 확대(테두리/여백 방지) */ filter: saturate(1.05) contrast(1.02); } /* (선택) 얇은 회로 그리드 오버레이 - 원하면 유지, 싫으면 이 블록 통째로 삭제 */ .its-portrait::after{ content:""; position:absolute; inset:0; background-image: url('data:image/svg+xml;utf8,\ \ \ \ \ \ \ \ \ '); mix-blend-mode:screen; opacity:.22; pointer-events:none; } /* 2026-01-10 portrait margin: vertical 50px / horizontal 100px */ .its-portrait{ position:relative; z-index:1; /* ✅ 여백 */ margin: 10px 100px; /* ✅ 여백(좌우 200px) 제외한 실제 폭 */ width: calc(100% - 200px); height:auto; max-width: 980px; /* (선택) 너무 커지면 제한, 필요 없으면 삭제 */ aspect-ratio: auto; /*border-radius:10px;*/ /*border: 2px solid rgba(255,255,255,.14);*/ background:#070a12; overflow:hidden; } /* 이미지 비율 유지 */ .its-portrait .its-portrait-img{ position:relative; display:block; width:100%; height:auto; object-fit:cover; transform:none; filter: saturate(1.05) contrast(1.02); } .its-portrait{ box-shadow: none !important; /* ✅ 하단 검은 음영 제거 */ } .its-portrait{ /* 기존: 0 0 0 10px ... , 0 40px 80px ... */ box-shadow: 0 0 0 10px rgba(255,255,255,.06) !important; /* ✅ 바깥 링만 유지 */ } .its-visual{ overflow: hidden; /* ✅ 박스 밖 전부 잘라냄 */ /*border-radius: 20px; */ /* (선택) 네모/라운드 박스에 맞춰 자르기 */ } /* .its-visual{ background: radial-gradient(1200px 600px at 0% 0%, rgba(255,0,149,.22), transparent 60%), radial-gradient(800px 400px at 100% 100%, rgba(0,178,255,.24), transparent 60%), linear-gradient(135deg, #2a0a45 0%, #06345a 100%); } */ /* .its-visual{ background: radial-gradient(1200px 600px at 0% 0%, rgba(255,0,149,.26), transparent 60%), radial-gradient(800px 400px at 100% 100%, rgba(0,178,255,.28), transparent 60%), linear-gradient(135deg, #3a0f5f 0%, #0a4a75 100%); } */ /* .its-visual{ background: radial-gradient(1200px 600px at 0% 0%, rgba(255,0,149,.30), transparent 60%), radial-gradient(800px 400px at 100% 100%, rgba(0,178,255,.32), transparent 60%), linear-gradient(135deg, #4a1680 0%, #0f5f92 100%); } */ /* .its-visual{ background: radial-gradient(1200px 600px at 0% 0%, rgba(255,0,149,.34), transparent 60%), radial-gradient(800px 400px at 100% 100%, rgba(0,178,255,.36), transparent 60%), linear-gradient(135deg, #5a22a2 0%, #167ab0 100%); } */ /* .its-visual::before{ opacity: .22; filter: blur(1px); } .its-visual{ filter: brightness(1.12); } */ /* .its-visual{ background: radial-gradient(1200px 600px at 0% 0%, rgba(255,0,149,.10), transparent 60%), radial-gradient(800px 400px at 100% 100%, rgba(0,178,255,.12), transparent 60%), linear-gradient(135deg, #ffffff 0%, #f3f6ff 55%, #ffffff 100%); isolation:isolate; } */ .its-visual{ background: radial-gradient(1200px 600px at 0% 0%, rgba(255,0,149,.05), transparent 60%), /* .10 -> .05 */ radial-gradient(800px 400px at 100% 100%, rgba(0,178,255,.06), transparent 60%), /* .12 -> .06 */ linear-gradient(135deg, #ffffff 0%, #f9fbff 55%, #ffffff 100%); /* #f3f6ff -> 더 옅게 */ isolation:isolate; } .its-visual::before{ content:""; position:absolute; inset:-10% -10%; background-image: repeating-radial-gradient(circle at 20% 30%, rgba(255,0,149,.35) 0 2px, transparent 2px 12px), repeating-linear-gradient(45deg, rgba(0,178,255,.30) 0 2px, transparent 2px 22px); mix-blend-mode: multiply; opacity:.28; filter: none; } /* .its-portrait .its-portrait-img{ filter: brightness(1.10) saturate(1.05) contrast(1.02); } .its-portrait .its-portrait-img{ filter: brightness(1.18) saturate(1.05) contrast(1.02); } */ /* .its-portrait .its-portrait-img{ filter: brightness(1.08) contrast(1.02) saturate(1.03); } */ @media (max-width: 900px){ .its-portrait{ margin: 5px 5px; width: calc(100% - 10px); max-width: none; } } /* ========================================================= 2026-01-11 Button Set A (Neon / Primary / Outline) ========================================================= */ .its-btn-stake{ -webkit-tap-highlight-color: transparent; appearance:none; border: 1px solid rgba(15, 23, 42, .14); background: #ffffff; color: #0b1220; width:100%; max-width:none; display:flex; align-items:center; gap: 12px; padding: 14px 16px; border-radius: 16px; box-shadow: 0 10px 26px rgba(15, 23, 42, .10), 0 1px 0 rgba(255,255,255,.65) inset; cursor:pointer; user-select:none; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease, filter .12s ease; } .its-btn-stake:hover{ transform: translateY(-1px); box-shadow: 0 14px 34px rgba(15, 23, 42, .14), 0 1px 0 rgba(255,255,255,.70) inset; } .its-btn-stake:active{ transform: translateY(0px) scale(.995); } .its-btn-stake:focus-visible{ outline: none; box-shadow: 0 0 0 4px rgba(37, 99, 235, .18), 0 14px 34px rgba(15, 23, 42, .14); border-color: rgba(37, 99, 235, .35); } .its-btn-stake__icon{ width: 42px; height: 42px; border-radius: 14px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.65); border: 1px solid rgba(15, 23, 42, .10); box-shadow: 0 10px 18px rgba(15, 23, 42, .08); flex: 0 0 auto; font-size: 18px; } .its-btn-stake__text{ min-width: 0; display:flex; flex-direction:column; gap: 4px; flex: 1 1 auto; } .its-btn-stake__title{ font-weight: 800; letter-spacing: -.2px; line-height: 1.05; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .its-btn-stake__sub{ font-size: 12px; color: rgba(11,18,32,.65); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .its-btn-stake__chev{ font-size: 22px; line-height: 1; opacity: .55; flex: 0 0 auto; transform: translateY(-1px); } /* A-1) Neon (추천) */ .its-btn-stake--neon{ background: radial-gradient(900px 240px at 10% 10%, rgba(255, 0, 149, .22), transparent 55%), radial-gradient(900px 240px at 90% 90%, rgba(0, 178, 255, .22), transparent 55%), linear-gradient(135deg, #ffffff 0%, #f3f6ff 55%, #ffffff 100%); border-color: rgba(15, 23, 42, .10); } .its-btn-stake--neon:hover{ filter: saturate(1.05); box-shadow: 0 16px 38px rgba(15, 23, 42, .16), 0 0 0 1px rgba(255,255,255,.55) inset, 0 18px 44px rgba(255, 0, 149, .25), 0 18px 44px rgba(0, 178, 255, .25); } .its-btn-stake--neon .its-btn-stake__icon{ background: radial-gradient(14px 14px at 30% 25%, rgba(255,0,149,.22), transparent 60%), radial-gradient(14px 14px at 70% 75%, rgba(0,178,255,.22), transparent 60%), rgba(255,255,255,.75); } /* A-2) Primary */ .its-btn-stake--primary{ background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%); } .its-btn-stake--primary .its-btn-stake__icon{ background: rgba(37, 99, 235, .10); border-color: rgba(37, 99, 235, .16); } /* A-3) Outline */ .its-btn-stake--outline{ background: transparent; border-color: rgba(15, 23, 42, .18); box-shadow: 0 10px 26px rgba(15, 23, 42, .06); } .its-btn-stake--outline .its-btn-stake__icon{ background: rgba(255,255,255,.55); } /* disabled / loading (Set A) */ .its-btn-stake[disabled], .its-btn-stake.is-disabled{ opacity: .55; cursor: not-allowed; transform: none; box-shadow: 0 10px 26px rgba(15, 23, 42, .08); } .its-btn-stake.is-loading{ pointer-events:none; opacity:.78; } .its-btn-stake.is-loading .its-btn-stake__chev{ opacity:0; } .its-btn-stake.is-loading::after{ content:""; width: 18px; height: 18px; border-radius: 999px; border: 2px solid rgba(15, 23, 42, .18); border-top-color: rgba(15, 23, 42, .55); margin-left: 6px; animation: its-stake-spin 0.8s linear infinite; } @keyframes its-stake-spin{ to{ transform: rotate(360deg); } } /* ========================================================= 2026-01-11 Button Set B (Glow Border + APR Badge) ========================================================= */ .its-stake-cta{ -webkit-tap-highlight-color: transparent; appearance:none; border: 0; width:100%; max-width:none; display:flex; align-items:center; gap: 12px; padding: 14px 16px; border-radius: 18px; background: #ffffff; color: #0b1220; cursor:pointer; user-select:none; position: relative; overflow: hidden; box-shadow: 0 18px 46px rgba(15, 23, 42, .12), 0 1px 0 rgba(255,255,255,.70) inset; transition: transform .12s ease, box-shadow .12s ease, filter .12s ease; } .its-stake-cta:hover{ transform: translateY(-1px); box-shadow: 0 22px 56px rgba(15, 23, 42, .16), 0 1px 0 rgba(255,255,255,.75) inset; filter: saturate(1.06); } .its-stake-cta:active{ transform: translateY(0px) scale(.995); } .its-stake-cta:focus-visible{ outline: none; box-shadow: 0 0 0 4px rgba(37, 99, 235, .18), 0 22px 56px rgba(15, 23, 42, .16); } .its-stake-cta__icon{ width: 44px; height: 44px; border-radius: 16px; display:flex; align-items:center; justify-content:center; flex: 0 0 auto; background: radial-gradient(18px 18px at 30% 30%, rgba(255,0,149,.18), transparent 65%), radial-gradient(18px 18px at 70% 70%, rgba(0,178,255,.18), transparent 65%), rgba(255,255,255,.75); border: 1px solid rgba(15, 23, 42, .10); box-shadow: 0 10px 18px rgba(15, 23, 42, .08); font-size: 18px; } .its-stake-cta__body{ min-width: 0; flex: 1 1 auto; display:flex; flex-direction:column; gap: 4px; } .its-stake-cta__title{ font-weight: 900; letter-spacing: -.3px; font-size: 16px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .its-stake-cta__desc{ font-size: 12px; color: rgba(11,18,32,.66); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .its-stake-cta__right{ flex: 0 0 auto; display:flex; align-items:center; gap: 10px; } .its-stake-cta__badge{ font-size: 12px; font-weight: 800; letter-spacing: -.1px; padding: 7px 10px; border-radius: 999px; background: radial-gradient(120px 34px at 20% 30%, rgba(255,0,149,.18), transparent 60%), radial-gradient(120px 34px at 80% 70%, rgba(0,178,255,.18), transparent 60%), rgba(37, 99, 235, .10); color: rgba(11,18,32,.88); border: 1px solid rgba(37, 99, 235, .18); } .its-stake-cta__arrow{ font-size: 18px; font-weight: 900; opacity: .70; transform: translateY(-1px); } /* B-1) Glow Border */ .its-stake-cta--glow::before{ content:""; position:absolute; inset: 0; padding: 1px; border-radius: 18px; background: linear-gradient(120deg, rgba(255,0,149,.55), rgba(0,178,255,.55), rgba(124,58,237,.45), rgba(255,0,149,.55) ); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .65; pointer-events:none; transition: opacity .12s ease, filter .12s ease; } .its-stake-cta--glow:hover::before{ opacity: .92; filter: saturate(1.1); } /* shine sweep */ .its-stake-cta--glow::after{ content:""; position:absolute; top:-40%; left:-60%; width: 60%; height: 180%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); transform: rotate(18deg); opacity: 0; pointer-events:none; } .its-stake-cta--glow:hover::after{ opacity: .85; animation: its-stake-sweep 1.05s ease forwards; } @keyframes its-stake-sweep{ 0%{ transform: translateX(0) rotate(18deg); } 100%{ transform: translateX(220%) rotate(18deg); } } /* disabled / loading (Set B) */ .its-stake-cta[disabled], .its-stake-cta.is-disabled{ opacity: .55; cursor: not-allowed; transform: none; filter: none; } .its-stake-cta.is-loading{ pointer-events:none; opacity:.82; } .its-stake-cta.is-loading .its-stake-cta__arrow{ opacity:0; } .its-stake-cta.is-loading .its-stake-cta__right::after{ content:""; width: 18px; height: 18px; border-radius: 999px; border: 2px solid rgba(15, 23, 42, .16); border-top-color: rgba(15, 23, 42, .55); animation: its-stake-spin2 .8s linear infinite; } @keyframes its-stake-spin2{ to{ transform: rotate(360deg); } } /* (옵션) 데모 배치용 */ .its-stake-demo-wrap{ display:grid; gap:10px; } /* 버튼 스타일 시작 */ .its-staking-btn { position: relative; display: inline-flex; width: 100%; align-items: center; justify-content: space-between; gap: 15px; padding: 12px 40px; background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 50px; cursor: pointer; text-decoration: none; overflow: hidden; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 0 15px rgba(139, 92, 246, 0.5), inset 0 0 20px rgba(255, 255, 255, 0.1); /* 폰트 초기화 (혹시 모를 상속 방지) */ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; box-sizing: border-box; } /* 텍스트 영역 */ .its-btn-content { display: flex; flex-direction: column; align-items: flex-start; } .its-btn-title { color: #ffffff; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.5px; line-height: 1.1; text-shadow: 0 2px 4px rgba(0,0,0,0.2); margin: 0; /* 기존 p, h 태그 상속 방지 */ } .its-btn-subtitle { color: rgba(255, 255, 255, 0.8); font-size: 0.85rem; font-weight: 500; margin-top: 2px; text-transform: uppercase; letter-spacing: 1px; } /* 아이콘 스타일 */ .its-btn-icon { width: 28px; height: 28px; fill: white; filter: drop-shadow(0 0 5px rgba(255,255,255,0.6)); transition: transform 0.3s ease; flex-shrink: 0; /* 아이콘 찌그러짐 방지 */ } /* 호버 효과 */ .its-staking-btn:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(139, 92, 246, 0.7), inset 0 0 10px rgba(255, 255, 255, 0.3); border-color: rgba(255, 255, 255, 0.5); } .its-staking-btn:hover .its-btn-icon { transform: rotate(15deg) scale(1.1); } /* 빛이 지나가는 효과 */ .its-staking-btn::after { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.4), transparent ); transition: 0.5s; } .its-staking-btn:hover::after { left: 100%; } /* 클릭 효과 */ .its-staking-btn:active { transform: translateY(-1px); box-shadow: 0 5px 15px rgba(139, 92, 246, 0.4); } /* ================================ 2026-01-11 Layout (new) ================================ */ .its-ui-wrap{ width:100%; display:grid; gap:18px; } .its-ui-section{ border: 1px solid rgba(15,23,42,.10); border-radius: 18px; background: #ffffff; box-shadow: 0 14px 40px rgba(15,23,42,.08); overflow:hidden; } .its-ui-head{ padding: 14px 16px; border-bottom: 1px solid rgba(15,23,42,.08); background: linear-gradient(135deg, #ffffff, #f8fafc); display:flex; align-items:flex-end; justify-content:space-between; gap:10px; } .its-ui-title{ font-weight: 900; letter-spacing: -.3px; color:#0b1220; font-size: 14px; } .its-ui-desc{ color: rgba(11,18,32,.62); font-size: 12px; white-space: nowrap; overflow:hidden; text-overflow: ellipsis; } .its-ui-body{ padding: 14px 16px; } .its-ui-grid{ width:100%; display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:12px; } @media (max-width: 900px){ .its-ui-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 520px){ .its-ui-grid{ grid-template-columns: 1fr; } } /* 버튼 안 텍스트 레이아웃 (공통 유틸) */ .its-btxt{ min-width:0; display:flex; flex-direction:column; gap:2px; align-items:flex-start; flex: 1 1 auto; } .its-btxt b{ font-size: 13px; letter-spacing: -.2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .its-btxt span{ font-size: 12px; color: rgba(11,18,32,.62); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* ================================ 1) BRUTAL (각+굵테+강한 대비) ================================ */ .its-btn-brutal{ -webkit-tap-highlight-color: transparent; appearance:none; width:100%; min-height: 50px; padding: 12px 14px; border-radius: 10px; /* 살짝만 둥글 */ border: 2px solid #0b1220; /* 굵은 테두리 */ background: #fff7ed; /* 크림색 */ color:#0b1220; display:flex; align-items:center; gap:10px; cursor:pointer; user-select:none; box-shadow: 6px 6px 0 #0b1220; /* “툭” 튀는 그림자 */ transition: transform .10s ease, box-shadow .10s ease, background .10s ease; } .its-btn-brutal:hover{ background:#fff1d6; } .its-btn-brutal:active{ transform: translate(4px, 4px); box-shadow: 2px 2px 0 #0b1220; } .its-btn-brutal__tag{ flex:0 0 auto; font-weight: 900; font-size: 12px; padding: 6px 8px; border-radius: 8px; background: #0b1220; color:#ffffff; } .its-btn-brutal--mint{ background:#ecfeff; } .its-btn-brutal--mint:hover{ background:#d9f9ff; } .its-btn-brutal--pink{ background:#fff1f2; } .its-btn-brutal--pink:hover{ background:#ffe4e6; } /* ================================ 2) NEUMO (뉴모피즘/소프트 입체) ================================ */ .its-btn-neumo{ -webkit-tap-highlight-color: transparent; appearance:none; width:100%; min-height: 52px; padding: 12px 14px; border-radius: 18px; border: 1px solid rgba(15,23,42,.06); background: #eef2ff; /* 연보라 톤 */ color:#0b1220; display:flex; align-items:center; gap:12px; cursor:pointer; user-select:none; box-shadow: 10px 10px 22px rgba(15,23,42,.10), -10px -10px 22px rgba(255,255,255,.85); transition: box-shadow .12s ease, transform .12s ease, filter .12s ease; } .its-btn-neumo:hover{ filter: saturate(1.05); } .its-btn-neumo:active{ transform: translateY(1px); box-shadow: inset 10px 10px 18px rgba(15,23,42,.10), inset -10px -10px 18px rgba(255,255,255,.85); } .its-btn-neumo__dot{ width: 14px; height: 14px; border-radius: 999px; background: radial-gradient(circle at 30% 30%, #60a5fa, #a78bfa); box-shadow: 0 10px 18px rgba(15,23,42,.10); flex:0 0 auto; } /* ================================ 3) PIXEL (레트로 도트/픽셀) ================================ */ .its-btn-pixel{ -webkit-tap-highlight-color: transparent; appearance:none; width:100%; min-height: 54px; padding: 12px 14px; border-radius: 0; /* 완전 각진 */ border: 3px solid #111827; background: linear-gradient(0deg, rgba(17,24,39,.06), rgba(17,24,39,.06)), repeating-linear-gradient(45deg, rgba(0,0,0,.06) 0 6px, transparent 6px 12px); color:#111827; display:flex; align-items:center; gap:10px; cursor:pointer; user-select:none; box-shadow: 0 0 0 3px #ffffff inset, 8px 8px 0 #111827; transition: transform .10s ease, box-shadow .10s ease; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } .its-btn-pixel:hover{ transform: translateY(-1px); } .its-btn-pixel:active{ transform: translate(6px,6px); box-shadow: 0 0 0 3px #ffffff inset, 2px 2px 0 #111827; } .its-btn-pixel__px{ flex:0 0 auto; width: 22px; height: 22px; background: repeating-linear-gradient(90deg, #111827 0 3px, transparent 3px 6px), repeating-linear-gradient(0deg, #111827 0 3px, transparent 3px 6px); opacity:.75; } /* ================================ 4) MINIMAL (밑줄/텍스트 중심) ================================ */ .its-btn-min{ -webkit-tap-highlight-color: transparent; appearance:none; width:100%; min-height: 46px; padding: 10px 4px; border: 0; border-radius: 0; background: transparent; color:#0b1220; display:flex; align-items:center; justify-content:space-between; gap:12px; cursor:pointer; user-select:none; border-bottom: 2px solid rgba(11,18,32,.12); transition: border-color .12s ease, transform .12s ease, opacity .12s ease; } .its-btn-min:hover{ border-bottom-color: rgba(37,99,235,.55); transform: translateY(-1px); } .its-btn-min:active{ transform: translateY(0px); opacity:.85; } .its-btn-min__left{ display:flex; align-items:center; gap:10px; min-width:0; } .its-btn-min__mark{ flex:0 0 auto; width: 10px; height: 10px; border-radius: 999px; background:#0b1220; } .its-btn-min__arrow{ flex:0 0 auto; font-size: 18px; opacity:.55; } /* ================================ 5) 3D PRESS (눌림/게임UI 3D) ================================ */ .its-btn-3d{ -webkit-tap-highlight-color: transparent; appearance:none; width:100%; min-height: 52px; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(15,23,42,.12); background: linear-gradient(180deg, #ffffff, #f1f5f9); color:#0b1220; display:flex; align-items:center; gap:10px; cursor:pointer; user-select:none; box-shadow: 0 10px 0 rgba(15,23,42,.18), /* 아래 “바닥” */ 0 18px 34px rgba(15,23,42,.12); transform: translateY(0); transition: transform .10s ease, box-shadow .10s ease, filter .10s ease; } .its-btn-3d:hover{ filter: saturate(1.04); } .its-btn-3d:active{ transform: translateY(8px); /* 눌려 들어감 */ box-shadow: 0 2px 0 rgba(15,23,42,.18), 0 10px 22px rgba(15,23,42,.10); } .its-btn-3d__chip{ flex:0 0 auto; padding: 6px 10px; border-radius: 999px; font-size: 12px; font-weight: 900; color:#ffffff; background: linear-gradient(135deg, #2563eb, #7c3aed); box-shadow: 0 10px 18px rgba(15,23,42,.12); } /* ================================ 6) FAB (Floating Action Button) - 화면 우하단 고정용 ================================ */ .its-fab{ -webkit-tap-highlight-color: transparent; appearance:none; position: fixed; right: 18px; bottom: 18px; z-index: 9999; width: 56px; height: 56px; border-radius: 999px; border: 0; background: #0b1220; color:#ffffff; cursor:pointer; user-select:none; display:flex; align-items:center; justify-content:center; box-shadow: 0 18px 40px rgba(15,23,42,.28), 0 0 0 6px rgba(37,99,235,.12); transition: transform .12s ease, box-shadow .12s ease, background .12s ease; } .its-fab:hover{ transform: translateY(-2px); box-shadow: 0 22px 48px rgba(15,23,42,.32), 0 0 0 8px rgba(37,99,235,.14); } .its-fab:active{ transform: translateY(0px) scale(.98); } .its-fab__plus{ font-size: 24px; line-height: 1; } /* (옵션) FAB 라벨 */ .its-fab-label{ position: fixed; right: 86px; bottom: 28px; z-index: 9999; background:#0b1220; color:#fff; padding: 8px 10px; border-radius: 999px; font-size: 12px; opacity: .92; box-shadow: 0 14px 34px rgba(15,23,42,.22); } /* 접근성: disabled */ .its-btn-brutal[disabled], .its-btn-neumo[disabled], .its-btn-pixel[disabled], .its-btn-min[disabled], .its-btn-3d[disabled]{ opacity:.55; cursor:not-allowed; } /* 2026-01-11 Layout */ .its-btn-layout{ width:100%; display:grid; gap:16px; } .its-btn-grid{ width:100%; display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:12px; } @media (max-width: 900px){ .its-btn-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px){ .its-btn-grid{ grid-template-columns: 1fr; } } .its-btn-toolbar{ width:100%; display:flex; flex-wrap:wrap; gap:10px; align-items:center; } /* 2026-01-11 Base Button */ .its-btn{ -webkit-tap-highlight-color: transparent; appearance:none; border: 1px solid rgba(15, 23, 42, .14); background:#ffffff; color:#0b1220; width:100%; min-height: 46px; padding: 12px 14px; border-radius: 14px; display:flex; align-items:center; justify-content:center; gap:10px; cursor:pointer; user-select:none; text-decoration:none; box-shadow: 0 12px 28px rgba(15, 23, 42, .10), 0 1px 0 rgba(255,255,255,.70) inset; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, filter .12s ease, background .12s ease; } .its-btn:hover{ transform: translateY(-1px); box-shadow: 0 16px 36px rgba(15, 23, 42, .14), 0 1px 0 rgba(255,255,255,.75) inset; } .its-btn:active{ transform: translateY(0px) scale(.995); } .its-btn:focus-visible{ outline:none; border-color: rgba(37, 99, 235, .35); box-shadow: 0 0 0 4px rgba(37, 99, 235, .18), 0 16px 36px rgba(15, 23, 42, .14); } .its-btn[disabled], .its-btn.is-disabled{ opacity:.55; cursor:not-allowed; transform:none; filter:none; box-shadow: 0 10px 22px rgba(15, 23, 42, .08); } .its-btn__icon{ width: 34px; height: 34px; border-radius: 12px; display:flex; align-items:center; justify-content:center; flex:0 0 auto; background: rgba(37, 99, 235, .10); border: 1px solid rgba(37, 99, 235, .14); color: rgba(11,18,32,.92); box-shadow: 0 10px 18px rgba(15, 23, 42, .08); font-size: 16px; } .its-btn__text{ min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:2px; flex:1 1 auto; } .its-btn__title{ font-weight: 900; letter-spacing: -.2px; line-height: 1.1; font-size: 14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .its-btn__sub{ font-size: 12px; color: rgba(11,18,32,.62); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .its-btn__chev{ flex:0 0 auto; font-size: 18px; opacity:.6; } /* 2026-01-11 Size modifiers */ .its-btn--lg{ min-height: 54px; padding: 14px 16px; border-radius: 16px; } .its-btn--sm{ min-height: 40px; padding: 10px 12px; border-radius: 12px; } .its-btn--pill{ border-radius: 999px; } /* ========================================================= 2026-01-11 Style 1) Gradient CTA (요즘 메인 버튼) ========================================================= */ .its-btn--gradient{ border-color: rgba(15, 23, 42, .10); background: radial-gradient(900px 280px at 10% 10%, rgba(255,0,149,.20), transparent 55%), radial-gradient(900px 280px at 90% 90%, rgba(0,178,255,.20), transparent 55%), linear-gradient(135deg, #ffffff 0%, #f3f6ff 55%, #ffffff 100%); } .its-btn--gradient:hover{ filter: saturate(1.06); box-shadow: 0 18px 40px rgba(15, 23, 42, .16), 0 0 0 1px rgba(255,255,255,.55) inset, 0 18px 44px rgba(255,0,149,.22), 0 18px 44px rgba(0,178,255,.22); } /* ========================================================= 2026-01-11 Style 2) Solid Primary (깔끔/확실한 액션) ========================================================= */ .its-btn--primary{ border-color: rgba(37, 99, 235, .25); background: linear-gradient(135deg, rgba(37,99,235,.12), rgba(37,99,235,.06)); } .its-btn--primary .its-btn__icon{ background: rgba(37, 99, 235, .16); border-color: rgba(37, 99, 235, .24); } /* ========================================================= 2026-01-11 Style 3) Soft (부드러운 서브 액션) ========================================================= */ .its-btn--soft{ border-color: rgba(15, 23, 42, .10); background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%); } .its-btn--soft .its-btn__icon{ background: rgba(15, 23, 42, .06); border-color: rgba(15, 23, 42, .10); } /* ========================================================= 2026-01-11 Style 4) Outline (투명/가벼운 버튼) ========================================================= */ .its-btn--outline{ background: transparent; border-color: rgba(15, 23, 42, .18); box-shadow: 0 10px 22px rgba(15, 23, 42, .06); } .its-btn--outline:hover{ background: rgba(255,255,255,.70); } /* ========================================================= 2026-01-11 Style 5) Glass (유리/블러 느낌) ========================================================= */ .its-btn--glass{ border-color: rgba(255,255,255,.55); background: rgba(255,255,255,.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .its-btn--glass:hover{ background: rgba(255,255,255,.70); border-color: rgba(255,255,255,.75); } /* ========================================================= 2026-01-11 Style 6) Danger (경고/삭제) ========================================================= */ .its-btn--danger{ border-color: rgba(239, 68, 68, .28); background: linear-gradient(135deg, rgba(239,68,68,.12), rgba(239,68,68,.06)); } .its-btn--danger:focus-visible{ border-color: rgba(239, 68, 68, .40); box-shadow: 0 0 0 4px rgba(239, 68, 68, .16), 0 16px 36px rgba(15, 23, 42, .14); } .its-btn--danger .its-btn__icon{ background: rgba(239, 68, 68, .14); border-color: rgba(239, 68, 68, .22); } /* ========================================================= 2026-01-11 Style 7) Success (완료/저장) ========================================================= */ .its-btn--success{ border-color: rgba(34, 197, 94, .25); background: linear-gradient(135deg, rgba(34,197,94,.12), rgba(34,197,94,.06)); } .its-btn--success:focus-visible{ border-color: rgba(34, 197, 94, .38); box-shadow: 0 0 0 4px rgba(34, 197, 94, .16), 0 16px 36px rgba(15, 23, 42, .14); } .its-btn--success .its-btn__icon{ background: rgba(34, 197, 94, .14); border-color: rgba(34, 197, 94, .22); } /* ========================================================= 2026-01-11 Style 8) Split Button (좌:액션 / 우:드롭다운) ========================================================= */ .its-btn-split{ width:100%; display:flex; border-radius: 14px; overflow:hidden; box-shadow: 0 12px 28px rgba(15, 23, 42, .10), 0 1px 0 rgba(255,255,255,.70) inset; border: 1px solid rgba(15, 23, 42, .14); background:#fff; } .its-btn-split__main, .its-btn-split__more{ appearance:none; border:0; background: transparent; color:#0b1220; cursor:pointer; user-select:none; display:flex; align-items:center; justify-content:center; min-height: 46px; transition: background .12s ease, filter .12s ease; } .its-btn-split__main{ flex: 1 1 auto; padding: 12px 14px; gap:10px; justify-content:flex-start; } .its-btn-split__more{ flex: 0 0 54px; border-left: 1px solid rgba(15, 23, 42, .12); font-size: 18px; opacity:.75; } .its-btn-split:hover{ filter: saturate(1.05); } .its-btn-split__main:hover{ background: rgba(37,99,235,.06); } .its-btn-split__more:hover{ background: rgba(15,23,42,.06); } .its-btn-split:focus-within{ box-shadow: 0 0 0 4px rgba(37, 99, 235, .18), 0 16px 36px rgba(15, 23, 42, .14); border-color: rgba(37, 99, 235, .28); } .its-btn-split__icon{ width: 34px; height: 34px; border-radius: 12px; display:flex; align-items:center; justify-content:center; flex:0 0 auto; background: rgba(37, 99, 235, .10); border: 1px solid rgba(37, 99, 235, .14); box-shadow: 0 10px 18px rgba(15, 23, 42, .08); font-size: 16px; } .its-btn-split__text{ min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:2px; flex:1 1 auto; } .its-btn-split__title{ font-weight: 900; letter-spacing: -.2px; font-size: 14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .its-btn-split__sub{ font-size: 12px; color: rgba(11,18,32,.62); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* 버튼 컨테이너 */ .its-dropdown-container{ position:relative; display:inline-flex; align-items:center; justify-content:center; } /* 트리거 버튼 */ .its-profile-btn{ width:48px; height:48px; border-radius:50%; background:#ffffff; border:2px solid #e2e8f0; cursor:pointer; padding:0; display:flex; align-items:center; justify-content:center; color:#64748b; transition: all .2s; flex-shrink:0; } .its-profile-btn:hover, .its-profile-btn.active{ border-color:#3b82f6; color:#3b82f6; } /* ✅ 메뉴는 포털 안에서 absolute로 좌표 찍음 */ .its-dropdown-menu{ position:absolute; /* fixed 아님! (portal이 fixed라서) */ left:0; top:0; pointer-events:auto; /* 메뉴만 클릭 가능 */ display:flex; flex-direction:column; gap:2px; width:220px; background:#ffffff; border-radius:16px; box-shadow: 0 10px 30px -5px rgba(0,0,0,.15); border:1px solid #e2e8f0; padding:8px; box-sizing:border-box; opacity:0; visibility:hidden; transform: translateY(-10px); /*transition: all .2s cubic-bezier(0.16, 1, 0.3, 1);*/ transition: opacity .2s cubic-bezier(0.16, 1, 0.3, 1), transform .2s cubic-bezier(0.16, 1, 0.3, 1); } /* 메뉴 활성화 */ .its-dropdown-menu.show{ opacity:1; visibility:visible; transform: translateY(0); } /* 위로 열릴 때 */ .its-dropdown-menu.its-dropup{ transform: translateY(10px); } .its-dropdown-menu.its-dropup.show{ transform: translateY(0); } /* 메뉴 헤더 */ .its-menu-header{ display:flex; flex-direction:column; padding:12px 12px; border-bottom:1px solid #f1f5f9; margin-bottom:5px; height:55px; } .its-menu-name{ font-size:15px; font-weight:700; color:#1e293b; } .its-menu-role{ font-size:12px; color:#94a3b8; font-weight:500; margin-top:3px; } /* 메뉴 아이템 */ .its-menu-item{ display:flex; align-items:center; gap:10px; padding:10px 12px; font-size:14px; color:#475569; font-weight:500; text-decoration:none; border-radius:8px; transition: background .2s; } .its-menu-item:hover{ background:#f8fafc; color:#0f172a; } .its-menu-icon{ width:18px; height:18px; color:#94a3b8; } .its-menu-item:hover .its-menu-icon{ color:#3b82f6; } /* 구분선 */ .its-menu-divider{ height:1px; background:#f1f5f9; margin:4px 0; } /* 로그아웃 */ .its-item-logout:hover{ background:#fef2f2; color:#ef4444; } .its-item-logout:hover .its-menu-icon{ color:#ef4444; } .its-dropdown-portal{ position:fixed; inset:0; z-index:999; pointer-events:none; /* 기본은 클릭 막고 */ } /*button 레이어영역안에 조정 덮어쓰기부분*/ .its-dropdown-menu{ margin-top:-65px; } @media (max-width:768px){ .its-profile-btn{ width:34px; height:34px; } .its-dropdown-menu{ margin-top:-50px; } .its-menu-header{ height:40px; } } /* ●●●●●●●●●● 로그인 */ .login_bg {background:#555863;} .member_loading_wrap {position:absolute;width:100%; height:100vh; min-height:430px;background:#555863;z-index:10000000;opacity:0.8;display:none} .member_loading_wrap .floating {position:absolute; left:0; width:100%; text-align:center;} .cm_member_login_type2 {overflow:hidden; padding:30px; box-sizing:border-box; max-width:430px; margin:0 auto} .cm_member_login_type2 li {list-style:none} .cm_member_login_type2 .title_box {margin-bottom:15px; overflow:hidden; font-family:'lato'; font-size:30px; color:#333; letter-spacing:-1px; font-weight:600; text-align:center;} .cm_member_login_type2 .form_box {position:relative; overflow:hidden} .cm_member_login_type2 .form_box li {overflow:hidden; position:relative; margin-bottom:5px} .cm_member_login_type2 .form_box .input_design {line-height:1.5; border-radius:5px; height:50px; width:100%; font-size:15px; padding-left:55px; box-sizing:border-box; color:#888; background:#fff;border:1px solid #999} .cm_member_login_type2 .form_box .input_design:focus {color:#000; background-color:#fcfcfc;border:2px solid #999} .cm_member_login_type2 .form_box .login_id:before {content:''; width:50px; height:50px; position:absolute; left:0; top:0; background:transparent url('../images/cm_images/member_login_id.png') center center no-repeat; background-size:18px;} .cm_member_login_type2 .form_box .login_pw:before {content:''; width:50px; height:50px; position:absolute; left:0; top:0; background:transparent url('../images/cm_images/member_login_pw.png') center center no-repeat; background-size:18px;} /* x를 1~3px 정도만 바꿔가며 맞추면 딱 좋아요 */ .cm_member_login_type2 .form_box .login_id:before, .cm_member_login_type2 .form_box .login_pw:before{ background-position:50% 80%; /* 예: 오른쪽으로 약간 */ /* background-position:48% 50%; 예: 왼쪽으로 약간 */ } .cm_member_login_type2 .form_box .save_id {clear:both; overflow:hidden; } .cm_member_login_type2 .form_box .save_id label {padding:10px 10px 5px 0; line-height:20px; color:#666; float:left; letter-spacing:-1px; font-size:13px;} .cm_member_login_type2 .form_box .save_id input {margin:0 5px 0 0; float:left;} .cm_member_login_type2 .btn_login {background:#2991c7; width:100%; height:60px; border:0; color:#fff; font-size:20px; font-weight:600; border-radius:5px;} .cm_member_login_type2 .btn_box {overflow:hidden; text-align:center; border-top:1px solid rgba(0,0,0,0.1); padding-top:10px; margin:10px auto 0 auto} .cm_member_login_type2 .btn_box li {text-align:center; letter-spacing:-1px; color:#999; list-style:none; overflow:hidden; box-sizing:border-box; float:left; width:50%; padding:0 3px 0 0} .cm_member_login_type2 .btn_box li:last-of-type {padding:0 0 0 3px} .cm_member_login_type2 .button_pack {padding:0; display:block; width:100%; box-sizing:border-box; margin-top:6px} .cm_member_login_type2 .button_pack a {text-align:center; display:block; width:100%;} .cm_member_login_type2 .copyright {margin-top:20px; border-top:1px solid rgba(255,255,255,0.1); padding:15px 0; overflow:hidden;} .cm_member_login_type2 .copyright dt {color:rgba(255,255,255,0.5); font-size:11px; line-height:14px; letter-spacing:-0.5px;} .cm_member_login_type2 .copyright dd {color:rgba(255,255,255,0.3); font-size:11px; margin-top:10px; line-height:13px;} /* ●●●●●●●●●● 아이디비번찾기 */ .cm_member_find_type2 {overflow:hidden; position:relative; background:#fff; padding:20px;} .cm_member_find_type2 li {list-style:none} .cm_member_find_type2 .title_img {text-align:center; font-family:'lato'; font-size:30px; color:#333; margin-bottom:15px; font-weight:600;} .cm_member_find_type2 .form_box {position:relative; overflow:hidden; max-width:350px; margin:0 auto} .cm_member_find_type2 .form_box ul {overflow:hidden; position:relative;} .cm_member_find_type2 .form_box li {overflow:hidden; border-radius:5px 5px 0 0;margin-bottom:5px} .cm_member_find_type2 .form_box li:last-of-type {border-top:0; border-radius:0 0 5px 5px} .cm_member_find_type2 .form_box .input_design {border-radius:5px;height:60px; width:100%; font-size:16px; padding:0 20px; box-sizing:border-box; color:#888; background:#fff;border:1px solid #999} .cm_member_find_type2 .form_box .input_design:focus {color:#000; background-color:#fcfcfc;border:2px solid #999} .cm_member_find_type2 .guide_text {overflow:hidden; clear:both; padding:20px 0 0 0} .cm_member_find_type2 .guide_text li {list-style:none; color:#999; line-height:18px; margin-bottom:3px; font-size:12px; line-height:16px;} .cm_member_find_type2 .cm_bottom_button {margin:10px 0 0 0; } .cm_member_find_type2 .result_box {text-align:center; max-width:350px; margin:0 auto} .cm_member_find_type2 .result_txt { background:rgba(0,0,0,0.05); padding:23px 10px 0 10px; min-height:123px; box-sizing:border-box; border-radius:5px;} .cm_member_find_type2 .result_txt dt {font-size:16px; color:#333; margin-bottom:10px; line-height:18px; } .cm_member_find_type2 .result_txt dd {color:#888; line-height:16px; } .cm_member_find_type2 .result_box em {color:#ff0000;} /* ========== its 투자선택 테이블 UI (root 미사용 / 하드코딩) ========== */ .common_pages_three{ background:transparent; } .its-invest-wrap{ max-width: 920px; margin: 0 auto; padding: 14px 14px 20px; color:#111827; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif; } .its-invest-card{ background:#ffffff; border:1px solid #e5e7eb; border-radius:18px; box-shadow: 0 16px 40px rgba(17,24,39,.10); overflow:hidden; } /* Header */ .its-invest-head{ padding:14px 16px; background: linear-gradient(135deg, rgba(37,99,235,.10), rgba(37,99,235,.03)); border-bottom:1px solid #e5e7eb; display:flex; gap:10px; align-items:flex-start; justify-content:space-between; } /* ✅ 타이틀(해지할 투자 선택) 검은색 고정 */ .its-invest-head h3{ margin:0; font-size:16px; letter-spacing:-.2px; color:#111827 !important; /* 기존 h3 화이트 덮어쓰기 */ } .its-invest-head p{ margin:4px 0 0; font-size:12px; color:#6b7280; } /* Table */ .its-table-scroll{ overflow:auto; -webkit-overflow-scrolling:touch; background:#f4f7ff; } .its-invest-table{ width:100%; min-width:520px; border-collapse:separate; border-spacing:0; } .its-invest-table thead th{ position:sticky; top:0; z-index:1; background:#ffffff; border-bottom:1px solid #e5e7eb; padding:12px 12px; font-size:13px; color:#374151; text-align:left; white-space:nowrap; } .its-invest-table thead th:nth-child(2){ text-align:right; } .its-invest-table thead th:nth-child(3){ text-align:center; width:110px; } .its-invest-table tbody tr{ background:#ffffff; } .its-invest-table tbody tr + tr td{ border-top:1px solid #e5e7eb; } .its-invest-table tbody td{ padding:12px 12px; font-size:14px; vertical-align:middle; white-space:nowrap; } .its-invest-table tbody td:nth-child(2){ text-align:right; font-variant-numeric: tabular-nums; } .its-invest-table tbody td:nth-child(3){ text-align:center; } .its-invest-table tbody tr:hover{ box-shadow: inset 0 0 0 9999px rgba(37,99,235,.04); } .its-empty-row td{ text-align:center !important; color:#6b7280; padding:22px 12px !important; white-space:normal; } /* ✅ style_inst 로 들어오는 인라인(어두운 배경/흰글자) 강제 덮어쓰기: 흰 배경 + 검정 글자 */ .its-invest-table tbody tr[style]{ background:#ffffff !important; color:#111827 !important; } .its-invest-table tbody tr[style] td{ background:#ffffff !important; color:#111827 !important; } .its-invest-table tbody tr[style] a, .its-invest-table tbody tr[style] span, .its-invest-table tbody tr[style] strong{ color:#111827 !important; } /* Checkbox */ .its-check{ display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; user-select:none; } .its-check input{ position:absolute; opacity:0; width:1px;height:1px; } .its-check-ui{ width:18px; height:18px; border:2px solid #cbd5e1; border-radius:6px; background:#ffffff; display:inline-block; position:relative; transition: all .15s ease; } .its-check input:checked + .its-check-ui{ border-color:#2563eb; background: rgba(37,99,235,.12); } .its-check input:checked + .its-check-ui::after{ content:""; position:absolute; left:5px; top:1px; width:5px; height:9px; border-right:2px solid #2563eb; border-bottom:2px solid #2563eb; transform: rotate(40deg); } .its-invest-foot{ padding:10px 16px 14px; border-top:1px solid #e5e7eb; color:#6b7280; font-size:12px; background:#ffffff; } /* Mobile */ @media (max-width:520px){ .its-invest-wrap{ padding:10px 10px 16px; } .its-invest-head{ padding:12px 12px; } } /* 전체 래퍼: 화면 중앙 정렬 및 배경색 */ .signup-success-wrap { display: flex; justify-content: center; align-items: center; padding: 60px 20px; min-height: 50vh; /* 화면 높이 확보 */ } /* 카드 디자인 */ .signup-success-card { background: #ffffff; width: 100%; max-width: 480px; padding: 40px; border-radius: 16px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05); /* 부드러운 그림자 */ text-align: center; box-sizing: border-box; } /* 아이콘 영역 */ .signup-success-card .icon-area { margin-bottom: 24px; color: #28a745; /* 성공 의미 초록색 */ } .signup-success-card .icon-area svg { width: 64px; height: 64px; } /* 타이틀 */ .signup-success-card .success-title { font-size: 24px; font-weight: 700; color: #333; margin: 0 0 16px 0; line-height: 1.4; } /* 안내 텍스트 */ .signup-success-card .message-text { font-size: 15px; color: #666; margin-bottom: 24px; line-height: 1.6; } /* 아이디 강조 박스 */ .signup-success-card .user-id-box { background-color: #f1f3f5; padding: 15px; border-radius: 8px; margin-bottom: 30px; display: flex; justify-content: center; align-items: center; gap: 10px; } .signup-success-card .user-id-box .label { font-size: 14px; color: #868e96; } .signup-success-card .user-id-box .user-id { font-size: 20px; font-weight: 800; color: #e03131; /* 아이디 강조색 (기존 붉은 계열 유지) */ } /* 로그인 버튼 */ .signup-success-card .btn-login-action { display: block; width: 100%; padding: 16px 0; background-color: #4c6ef5; /* 모던한 블루 컬러 */ color: white; font-size: 16px; font-weight: 600; border-radius: 8px; text-decoration: none; transition: background-color 0.2s ease; } .signup-success-card .btn-login-action:hover { background-color: #3b5bdb; } /* 모바일 대응 */ @media (max-width: 480px) { .signup-success-card { padding: 30px 20px; } .signup-success-card .success-title { font-size: 20px; } } .ajax_msg_red {color:red;font-weight:bold} .ajax_msg_blue {color:blue;font-weight:bold}