/* 헤더 Header ============================================================================= */ .Header {background-color:#fff; border-bottom:1px solid #eeeeee;} .Header .layout_fix {display:flex; align-items:center; gap:28px; height:76px;} .Header .brand_logo {position:relative; display:inline-flex; align-items:center; flex-shrink:0;} .Header .brand_logo img {display:block; width:154px; height:38px;} .Header .search_box {gap:8px; width:320px; position:relative; display:flex; justify-content:center; align-items:center; flex-direction:row; box-sizing:border-box;} .Header .search_box.if_open {display:flex;} .Header .search_box .search_input {flex:1; background:#fff; font-size:15px; font-weight:400; letter-spacing:-0.01em; color:#111; height:42px; padding:0 20px; border:1px solid var(--color-primary); border-radius:999px; box-sizing:border-box; padding-right:60px; transition:all 0.3s ease-out;} .Header .search_box .search_input::placeholder {color:#8c8c8c;} .Header .search_box .search_input:focus {box-shadow:0px 0px 0px 4px color-mix(in srgb, var(--color-primary) 20%, transparent);} .Header .search_box .search_btn {width:50px; height:42px; background:url('../images/fix_search.svg') center center / 18px no-repeat; filter:invert(51%) sepia(96%) saturate(2000%) hue-rotate(10deg) brightness(101%) contrast(99%); cursor:pointer; position:absolute; right:0;} .Header .gnb_menu {display:flex; align-items:center; gap:20px; margin-left:auto;} .Header .gnb_menu .util_link {font-size:15px; font-weight:500; color:#8c8c8c; padding:5px 0;} .Header .gnb_menu .type_blog {color:var(--color-secondary); font-weight:600;} .Header .auth_box {display:flex; align-items:center; gap:8px; flex-shrink:0;} .Header .auth_box .auth_action {display:inline-flex; align-items:center; justify-content:center; height:38px; padding:10px 14px; border-radius:8px; box-sizing:border-box; font-family:inherit; font-size:15px; font-weight:500; line-height:18px; text-decoration:none; cursor:pointer; border:1px solid #d9d9d9;} .Header .auth_box .type_join {background-color:#fff; color:#111;} .Header .auth_box .type_login {border-color:var(--color-primary); background-color:var(--color-primary); color:#fff;} .Header .mo_actions {display:none;} .Header .mo_actions .mo_btn {display:inline-flex; align-items:center; justify-content:center; width:32px; height:34px; padding:0; border:1px solid #d9d9d9; border-radius:8px; background-color:#fff; color:#111; cursor:pointer; box-sizing:border-box;} .Header .mo_actions .mo_btn img {width:16px; height:16px; display:block;} @media (hover:hover) and (pointer:fine) { .Header .gnb_menu .util_link:hover {text-decoration:underline;} .Header .auth_box .type_join:hover {background:#f2f2f2;} } @media (max-width:900px) { .Header .layout_fix {height:56px; gap:0; justify-content:space-between;} .Header .brand_logo img {width:auto; height:24px;} .Header .search_box {position:absolute; left:0; top:57px; width:100%; background:#fff; z-index:101; padding:20px; box-shadow:0px 10px 10px rgba(0,0,0,0.2); display:none;} .Header .search_box .search_btn {right:20px} .Header .gnb_menu {display:none;} .Header .auth_box {display:none;} .Header .mo_actions {display:flex; align-items:center; gap:6px;} } /* 푸터 Footer ============================================================================= */ .Footer {background-color:#222; padding:56px 0; color:#fff; font-size:14px; padding-bottom:100px !important; box-sizing:border-box; margin-top:70px;} .Footer .main_split {display:flex; justify-content:space-between; gap:20px;} .Footer .brand_logo {margin-bottom:24px;} .Footer .brand_logo .link_home {display:inline-flex; align-items:center; text-decoration:none;} .Footer .brand_logo img {height:27px; display:block;} .Footer .policy_menu {display:flex; align-items:center; margin-bottom:32px; flex-wrap:wrap} .Footer .policy_menu .one_menu {display:flex; align-items:center; font-size:18px;} .Footer .policy_menu .one_menu + .one_menu::before {content:''; width:1px; height:12px; margin:0 16px; background-color:#555;} .Footer .policy_menu .link_policy {color:#fff; font-weight:600; text-decoration:none;} .Footer .company_name {margin-bottom:12px; font-weight:600; color:#fff; font-size:16px;} .Footer .company_detail {display:flex; gap:60px; margin-bottom:32px;} .Footer .company_detail .one_detail .info_line {display:flex; align-items:center; margin-bottom:6px; color:#999; font-size:16px;} .Footer .company_detail .one_detail .info_line:last-child {margin-bottom:0;} .Footer .company_detail .one_detail .label {display:flex; align-items:center;} .Footer .company_detail .one_detail .label::after {content:''; width:1px; height:10px; margin:0 8px; background-color:#555; flex:none;} .Footer .copy_text {color:#777; font-size:16px;} .Footer .sns_menu {display:flex; flex-direction:column; align-items:flex-end; gap:16px; flex:none;} .Footer .sns_menu .link_sns {color:#ccc; font-size:14px; text-decoration:none;} @media (hover:hover) and (pointer:fine) { .Footer .policy_menu .link_policy:hover {color:var(--color-primary);} .Footer .one_detail a.value:hover {color:#ccc;} .Footer .sns_menu .link_sns:hover {color:#fff;} } @media (max-width:1280px) { .Footer .company_detail {flex-direction:column; gap:16px;} } @media (max-width:768px) { .Footer {padding:40px 0; font-size:13px;} .Footer .main_split {flex-direction:column; gap:0;} .Footer .site_content {display:contents;} .Footer .brand_logo {order:1; margin-bottom:20px;} .Footer .one_detail .info_line {font-size:14px;} .Footer .policy_menu {order:2; margin-bottom:24px;} .Footer .policy_menu .one_menu {font-size:16px;} .Footer .policy_menu .one_menu + .one_menu::before {margin:0 12px;} .Footer .company_name {order:3; margin-bottom:10px;} .Footer .company_detail {order:4; gap:14px; margin-bottom:20px;} .Footer .one_detail .info_line {margin-bottom:4px; word-break:keep-all;} .Footer .sns_menu {order:5; align-items:flex-start; gap:10px; margin-bottom:24px;} .Footer .copy_text {order:6; font-size:14px;} } /* 홈 > 그리드 레이아웃 ============================================================================= */ .HomeGrid {margin-top:32px;} .HomeGrid> .layout_fix {display:flex; justify-content:flex-start; align-items:stretch; flex-direction:column; gap:24px} .HomeGrid .Container {display:grid; grid-template-columns:1fr 300px; gap:24px; align-items:start; gap:24px;} .HomeGrid .Content {display:flex; justify-content:flex-start; align-items:stretch; flex-direction:column; overflow:hidden;} .HomeGrid .Aside {gap:24px; display:flex; justify-content:flex-start; align-items:stretch; flex-direction:column;} @media (max-width:1100px) { .HomeGrid {margin-top:24px;} .HomeGrid .Container {display:block;} .HomeGrid .Content {overflow:visible} .HomeGrid .Aside {margin-top:24px;} } /* 홈 > 아이템/타이틀 ============================================================================= */ .HomeMDItem {} .HomeMDItem .brand_tab {display:flex; align-items:center; gap:16px; margin-bottom:50px; height:92px; position:relative; overflow:hidden;} .HomeMDItem .brand_tab .btn_arrow {width:40px; height:40px; border:1px solid rgba(204,204,204,0.8); border-radius:50%; background:#fff; flex:none; display:flex; justify-content:center; align-items:center; flex-direction:column;} .HomeMDItem .brand_tab .btn_arrow:before {content:""; width:26px; aspect-ratio:1/1; background:center center / 100% no-repeat;} .HomeMDItem .brand_tab .btn_arrow.type_prev:before {background-image:url('../images/arrow_left.svg'); } .HomeMDItem .brand_tab .btn_arrow.type_next:before {background-image:url('../images/arrow_right.svg');} .HomeMDItem .brand_tab .btn_arrow.no_move {pointer-events:none; background-color:#EEe;} .HomeMDItem .brand_tab .btn_arrow.no_move:before {opacity:0.4;} .HomeMDItem .brand_tab .swipe_box {max-width:100%; height:100%; overflow:hidden; position:relative;} .HomeMDItem .brand_tab .tab_list {display:flex; width:max-content;} .HomeMDItem .brand_tab .tab_list li {width:95px; flex:none;} .HomeMDItem .brand_tab .tab {display:flex; flex-direction:column; align-items:center; gap:10px; box-sizing:border-box;} .HomeMDItem .brand_tab .picto {flex:none; width:66px; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; border:1px solid #eee; border-radius:100px; background:#fff; box-shadow:0 8px 20px rgba(25,31,40,0.04); box-sizing:border-box; overflow:hidden;} .HomeMDItem .brand_tab .picto img {display:block; width:100%; height:100%; object-fit:cover;} .HomeMDItem .brand_tab .name {max-width:100%; font-size:14px; font-weight:500; line-height:16px; letter-spacing:-0.02em; color:#777; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .HomeMDItem .brand_tab .hit .picto {border-color:var(--color-primary);} .HomeMDItem .brand_tab .hit .name {font-weight:700; color:var(--color-primary); text-underline-offset:3px;} @media (hover:hover) and (pointer:fine) { .HomeMDItem .brand_tab .btn_arrow:hover {border-color:#999;} .HomeMDItem .brand_tab .tab:hover .name {color:#191F28;} .HomeMDItem .brand_tab .hit .tab:hover .name {color:var(--color-primary);} } @media (max-width:1200px) { .HomeMDItem .brand_tab .btn_arrow {display:none} .HomeMDItem .brand_tab {margin-left:-20px; margin-right:-20px;} .HomeMDItem .brand_tab .swipe_box {padding:0 20px;} } @media (max-width:900px) { .HomeMDItem .brand_tab {margin-bottom:32px;} .HomeMDItem .brand_tab .tab_list li {width:80px;} .HomeMDItem .brand_tab .name {font-size:13px;} .HomeMDItem .brand_tab .picto {width:56px;} } .HomeItems {margin-top:80px;} .HomeTitle {display:flex; justify-content:space-between; align-items:center; flex-direction:row; margin-bottom:24px;} .HomeTitle .tit {font-size:24px; font-weight:600; color:#111; line-height:1;} .HomeTitle .btn_more {display:inline-flex; align-items:center; gap:4px; font-size:15px; font-weight:400; line-height:1; color:#999;} .HomeTitle .btn_more:after {content:""; flex:none; width:16px; height:16px; background:url('../images/arrow_right.svg') center center / 24px no-repeat; opacity:0.4} @media (hover:hover) and (pointer:fine) { .HomeTitle .btn_more:hover {text-decoration:underline;} } /* 홈 > 메인 배너 HomeMainBanner ============================================================================= */ .HomeBanner {display:flex; align-items:center; gap:10px; height:72px; padding:0 24px; margin-top:40px; border-radius:8px; background:#6F43C9; box-sizing:border-box; color:#fff; margin-top:50px; position:relative; overflow:hidden;} .HomeBanner .title {flex:1; font-size:18px; font-weight:600; line-height:1.2; color:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .HomeBanner .icon {flex:none; width:32px; height:32px; display:block; object-fit:contain;} @media (max-width:900px) { .HomeBanner {height:56px; padding:0 18px;} .HomeBanner .icon {width:24px; height:24px;} } /* 홈 > 게시판 ============================================================================= */ .HomeBoard {gap:16px; display:flex; justify-content:flex-start; align-items:stretch; flex-direction:row; margin-top:80px;} .HomeBoard .board_area {flex:1; display:flex; flex-direction:column; gap:24px;} .HomeBoard .top_head {display:flex; align-items:center; gap:6px; height:24px;} .HomeBoard .top_head .tit {font-size:24px; font-weight:600; line-height:1; color:#111;} .HomeBoard .top_head .btn_more {flex:none; width:24px; height:24px; background:url('../images/arrow_right.svg') center center / 28px no-repeat; opacity:0.6;} .HomeBoard .recent_list {padding:0 24px; border-radius:16px; background:#fff; box-shadow:0 8px 20px rgba(25,31,40,0.04); box-sizing:border-box; flex:1; display:flex; justify-content:flex-start; align-items:stretch; flex-direction:column;} .HomeBoard .recent_list li {position:relative; display:flex; align-items:center; gap:16px; height:60px;} .HomeBoard .recent_list li + li {border-top:1px solid #eee;} .HomeBoard .recent_list .title {flex:1; font-size:16px; font-weight:500; color:#111; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp:1; -webkit-box-orient:vertical; display:-webkit-box;} .HomeBoard .recent_list .date {flex:none; font-size:14px; color:#999; font-variant-numeric:tabular-nums; letter-spacing:-0.5px;} .HomeBoard .recent_list .c_none {flex:1} @media (hover:hover) and (pointer:fine) { .HomeBoard .recent_list li:hover .title {text-decoration:underline;} } @media (max-width:900px) { .HomeBoard {flex-direction:column; gap:64px} .HomeBoard .board_area {gap:22px} .HomeBoard .top_head .tit {font-size:22px;} .HomeBoard .top_head .btn_more {background-size:24px !important;} .HomeBoard .recent_list li {height:52px;} .HomeBoard .recent_list .title {font-size:15px;} .HomeBoard .recent_list .date {font-size:13px;} } /* 홈 > 사이드 퀵 버튼 ============================================================================= */ .HomeQuick {display:flex; flex-direction:column; gap:16px;} .HomeQuick .one_link {display:flex; align-items:center; justify-content:center; gap:10px; height:56px; padding:0 16px; border-radius:10px; text-decoration:none; font-size:16px; font-weight:700; line-height:1; box-sizing:border-box;} .HomeQuick .one_link .icon {width:24px; height:24px; flex:none; display:block;} .HomeQuick .one_link .tx {font-size:16px; font-weight:700; line-height:1;} .HomeQuick .one_link.type_guide {background:color-mix(in srgb, var(--color-primary) 10%, transparent); border:1px solid var(--color-primary); color:var(--color-primary);} .HomeQuick .one_link.type_cert {background:color-mix(in srgb, var(--color-secondary) 10%, transparent); border:1px solid var(--color-secondary); color:var(--color-secondary);} @media (hover:hover) and (pointer:fine) { .HomeQuick .one_link:hover {filter:brightness(.97);} } @media (max-width:1100px) { .HomeGrid .Aside .HomeQuick {display:none;} } /* 홈 > 할인혜택 ============================================================================= */ .HomeDiscount {display:flex; flex-direction:column; background:#fff; border-radius:16px; box-shadow:0 8px 20px 0 rgba(25,31,40,0.04); box-sizing:border-box;} .HomeDiscount .card_title {display:flex; align-items:center; gap:8px; height:24px; font-size:20px; font-weight:600; color:#111; flex:none; padding:20px; pointer-events:none;} .HomeDiscount .card_title img {width:24px; height:24px; flex:none; display:block;} .HomeDiscount .card_title strong {flex:1} .HomeDiscount .card_title em {flex:1; display:none;} .HomeDiscount .card_title .count {color:var(--color-primary); margin-left:auto; font-size:16px;} .HomeDiscount .card_list {display:flex; flex-direction:column; flex:1; padding:12px; border-top:1px solid #eee; overflow-y:auto; max-height:450px} .HomeDiscount .card_list::-webkit-scrollbar {width:4px;} .HomeDiscount .card_list::-webkit-scrollbar-thumb {background-color:color-mix(in srgb, var(--color-primary) 20%, transparent); border-radius:100px;} .HomeDiscount .card_list::-webkit-scrollbar-track {background-color:transparent;} .HomeDiscount .card_list li {position:relative; display:flex; align-items:center; gap:10px; height:60px; color:#333; border-radius:16px; box-sizing:border-box; border:1px solid transparent; padding:0 12px;} .HomeDiscount .card_list .logo {flex:none; width:40px; height:40px; border:1px solid #EEE; border-radius:100px; overflow:hidden; box-sizing:border-box;} .HomeDiscount .card_list .logo img {width:100%; height:100%; object-fit:cover; display:block;} .HomeDiscount .card_list .name {flex:1; font-size:15px; font-weight:500; letter-spacing:-0.01em; color:#333; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp:1; -webkit-box-orient:vertical; display:-webkit-box;} .HomeDiscount .card_list .rate {flex:none; font-size:15px; font-weight:600; letter-spacing:-0.01em; color:var(--color-primary); max-width:60px} .HomeDiscount .card_list .count {flex:none; font-size:15px; font-weight:600; letter-spacing:-0.01em; color:#999; } .HomeDiscount.this_mobile {display:none; border:1px solid var(--color-primary); background:color-mix(in srgb, var(--color-primary) 10%, transparent);} .HomeDiscount.this_mobile .card_list {display:none; padding-top:0px; max-height:510px} .HomeDiscount.this_mobile .card_title {pointer-events:initial; padding:0 16px; height:48px; color:var(--color-primary); font-size:16px;} .HomeDiscount.this_mobile .card_title em {display:block;} .HomeDiscount.this_mobile .card_title strong {display:none;} .HomeDiscount.this_mobile .card_title:after {content:""; width:24px; aspect-ratio:1/1; background:url('../images/arrow_down.svg') center center / 11px no-repeat; margin-left:auto; transition:all 0.2s ease-out;} .HomeDiscount.this_mobile.if_open .card_title:after {transform:rotate(-180deg);} .HomeDiscount.this_mobile.if_open .card_list {display:flex;} @media (hover:hover) and (pointer:fine) { .HomeDiscount .card_list li:hover {border-color:var(--color-primary); background:color-mix(in srgb, var(--color-primary) 5%, transparent);} } @media (max-width:1100px) { .HomeDiscount {margin-top:0px; margin-bottom:24px; border-radius:10px;} .HomeDiscount.this_pc {display:none;} .HomeDiscount.this_mobile {display:flex;} } /* 홈 > 고객센터 ============================================================================= */ .HomeService {display:flex; flex-direction:column; gap:20px; padding:24px; background:#2B8B56; border-radius:16px; color:#fff; box-sizing:border-box} .HomeService.this_mobile {display:none;} .HomeService .tieup {display:flex; justify-content:flex-start; align-items:stretch; flex-direction:column; gap:8px;} .HomeService .card_title {display:flex; align-items:center; gap:8px; font-size:20px; font-weight:700; line-height:1;} .HomeService .card_title img {width:24px; height:24px; flex:none; display:block;} .HomeService .card_desc {font-size:14px; font-weight:500; line-height:1; color:#fff; opacity:0.6;} .HomeService .card_button {display:flex; align-items:center; justify-content:center; gap:6px; height:48px; border-radius:8px; background:#FEEB22; text-decoration:none; font-size:16px; font-weight:600; color:#191919; box-sizing:border-box; padding:0 20px;} .HomeService .card_button img {height:26px; fleX:none} @media (max-width:1100px) and (min-width:901px) { .HomeService {flex-direction:row; justify-content:space-between; align-items:center;} } @media (max-width:900px) { .HomeService.this_pc {display:none;} .HomeService.this_mobile {display:flex;} } /* 홈 > 비주얼 ============================================================================= */ .HomeVisual {display:flex; flex-direction:column; gap:24px; width:100%; margin-bottom:30px;} .HomeVisual .rolling_box {overflow:hidden; width:100%; border-radius:16px; } .HomeVisual .one_banner {position:relative; display:block; width:100%; overflow:hidden;} .HomeVisual .one_banner .banner {display:block; width:100%;} .HomeVisual .one_banner .banner img {display:block; width:100%; height:auto;} .HomeVisual .one_banner .banner img.pc_img {display:block;} .HomeVisual .one_banner .banner img.mo_img {display:none;} .HomeVisual .one_banner .visual_text {position:absolute; z-index:1; left:0; top:0; display:flex; flex-direction:column; justify-content:center; gap:12px; width:100%; height:100%; color:#fff; box-sizing:border-box; padding:0 70px;} .HomeVisual .one_banner .badge {align-self:flex-start; display:inline-flex; align-items:center; height:29px; padding:0 12px; border-radius:99px; background:rgba(0,0,0,0.2); color:#fff; white-space:nowrap; font-size:14px; font-weight:500; line-height:17px; opacity:0; transform:translateY(16px);} .HomeVisual .one_banner .title {font-size:38px; font-weight:600; line-height:1.3; letter-spacing:-0.01em; opacity:0; transform:translateY(16px);} .HomeVisual .one_banner .desc {font-size:16px; font-weight:500; line-height:1.4; letter-spacing:-0.01em; opacity:0; transform:translateY(16px);} .HomeVisual .one_banner .desc br {display:none;} .HomeVisual .one_banner.if_show .badge {animation:homevisual_text_in 0.5s ease forwards;} .HomeVisual .one_banner.if_show .title {animation:homevisual_text_in 0.5s ease 0.15s forwards;} .HomeVisual .one_banner.if_show .desc {animation:homevisual_text_desc 0.5s ease 0.3s forwards;} @keyframes homevisual_text_in { 0% {opacity:0; transform:translateY(16px);} 100% {opacity:1; transform:translateY(0);} } @keyframes homevisual_text_desc { 0% {opacity:0; transform:translateY(16px);} 100% {opacity:0.84; transform:translateY(0);} } .HomeVisual .indicator {display:flex; align-items:center; gap:16px; height:24px;} .HomeVisual .indicator .progress_bar {flex:1; height:2px; border-radius:8px; background:rgba(0,0,0,0.1); overflow:hidden;} .HomeVisual .indicator .fill {display:block; height:100%; width:0; border-radius:8px; background:#111;} .HomeVisual .indicator .ctrl_nav {flex:none; display:flex; align-items:center; gap:8px; height:24px;} .HomeVisual .indicator .btn_arrow {flex:none; width:24px; height:24px; background:center center / 24px no-repeat;} .HomeVisual .indicator .btn_arrow.type_prev {background-image:url('../images/arrow_left.svg');} .HomeVisual .indicator .btn_arrow.type_next {background-image:url('../images/arrow_right.svg');} .HomeVisual .indicator .page_count {flex:none; display:flex; align-items:center; justify-content:center; gap:4px; font-size:14px; width:45px; color:#ccc; font-weight:400; font-variant-numeric:tabular-nums; letter-spacing:-0.8px;} .HomeVisual .indicator .now {font-weight:600; color:#111;} @media (max-width:700px) { .HomeVisual .one_banner .banner img.pc_img {display:none;} .HomeVisual .one_banner .banner img.mo_img {display:block;} .HomeVisual .one_banner .visual_text {justify-content:flex-end; padding:24px 32px;} .HomeVisual .one_banner .desc br {display:block;} .HomeVisual .one_banner .title {font-size:28px;} .HomeVisual .one_banner .desc {font-size:14px;} .HomeVisual .one_banner .badge {font-size:13px;} .HomeVisual {gap:16px} } /* 그리드 레이아웃 ============================================================================= */ .SectionGrid {margin-top:32px;} .SectionGrid> .layout_fix {display:flex; justify-content:flex-start; align-items:stretch; flex-direction:column; gap:24px} .SectionGrid .Container {display:grid; grid-template-columns:1fr 300px; align-items:start; gap:24px} .SectionGrid .Content {gap:24px; display:flex; justify-content:flex-start; align-items:stretch; flex-direction:column;} .SectionGrid .Aside {gap:24px; display:flex; justify-content:flex-start; align-items:stretch; flex-direction:column; position:sticky; top:24px; z-index:10} .SectionGrid .grid_inner {background:#fff; border-radius:16px; box-shadow:0px 8px 20px rgba(25,31,40,0.04); box-sizing:border-box;} .SectionGrid .grid_content {padding:24px; box-sizing:border-box} .SectionGrid .grid_head {padding:24px; border-bottom:1px solid #eee; display:flex; align-items:center; justify-content:space-between; gap:8px 16px; flex-wrap:wrap; box-sizing:border-box;} .SectionGrid .grid_head .tit {color:#111; font-size:20px; font-weight:600; flex:none} .SectionGrid .grid_head .label {font-size:16px; color:var(--color-primary); font-weight:500;} .SectionGrid .grid_head .comment {color:#999; font-size:16px; font-weight:400; line-height:1.4; width:100%;} .SectionGrid .grid_head .right {flex:none;} .SectionGrid .grid_head .btn_more {display:inline-flex; align-items:center; gap:4px; color:var(--color-primary); font-size:16px; font-weight:500; line-height:21px;} .SectionGrid .grid_head .btn_more:after {content:""; flex:none; width:10px; height:16px; background:url('../images/arrow_right_color.svg') center center / 16px no-repeat;} .SectionGrid .sort_list {display:flex; align-items:center; gap:10px;} .SectionGrid .sort_list .one_sort {display:flex; align-items:center; justify-content:center; height:42px; padding:0 20px; border:1px solid #eee; border-radius:8px; background:#fff; font-size:15px; color:#777; box-sizing:border-box; white-space:nowrap;} .SectionGrid .sort_list .one_sort.hit {border-color:var(--color-primary); background:rgba(252,119,3,0.07); color:var(--color-primary);} /* 페이지위치 */ .PagePath {display:flex; align-items:center; gap:2px; font-size:15px; font-weight:500; color:#999;} .PagePath .link_home {} .PagePath .now {display:inline-flex; align-items:center; gap:2px; font-weight:600;} .PagePath .now:before {content:""; flex:none; width:16px; height:24px; background:url('../images/arrow_right.svg') center center / 24px no-repeat; opacity:0.4;} .PagePath .now:last-child {color:var(--color-primary); } /* 페이지히어로 */ .PageHero {display:flex; align-items:center; justify-content:space-between; gap:24px; padding:32px; background:#fff; border-radius:16px; flex-wrap:wrap; box-shadow:0px 8px 20px rgba(25,31,40,0.04);} .PageHero .picto {fleX:none; margin-bottom:auto; background:color-mix(in srgb, var(--color-primary) 7%, transparent); width:48px; aspect-ratio:1/1; border-radius:14px; display:flex; justify-content:center; align-items:center; flex-direction:column;} .PageHero .picto img {width:34px; display:block;} .PageHero .thumb {fleX:none; margin-bottom:auto; width:140px; aspect-ratio:1/1; border-radius:8px; display:flex; justify-content:center; align-items:center; flex-direction:column; border:1px solid #eee; box-sizing:border-box; overflow:hidden; border-color:#eee;} .PageHero .thumb img {width:100%; display:block;} .PageHero .text_block {flex:1} .PageHero .text_block .eyebrow {display:block; margin-bottom:10px; font-size:12px; font-weight:700; line-height:1; letter-spacing:0.08em; color:var(--color-primary);} .PageHero .text_block .title {font-size:28px; font-weight:700; color:#111;} .PageHero .text_block .title strong {color:var(--color-primary);} .PageHero .text_block .desc {margin-top:8px; font-size:15px; font-weight:400; line-height:1.4; color:#666;} .PageHero .limit_alert {display:flex; align-items:center; gap:8px; flex:none; padding:16px; border-radius:8px; background:#FFF9F9; border:1px solid #F7DADA;} .PageHero .limit_alert .icon {flex:none; color:#EA2222;} .PageHero .limit_alert .icon img {width:24px; display:block;} .PageHero .limit_alert .draw {display:block;} .PageHero .limit_alert .label {font-size:16px; font-weight:600; color:#EA2222; white-space:nowrap;} .PageHero .limit_alert .text {font-size:14px; font-weight:600; color:#999; white-space:nowrap;} .PageHero .limit_alert.type_cs {border-color:color-mix(in srgb, var(--color-primary) 10%, transparent); background:#FFF9F9;} .PageHero .limit_alert.type_cs .label {color:#111;} .PageHero .search_form {position:relative; flex:none; width:371px; display:flex; justify-content:center; align-items:center; flex-direction:row;} .PageHero .search_form .search_input {width:100%; height:42px; padding:0 48px 0 20px; border:1px solid #eee; border-radius:8px; background:#F7F8FA; box-sizing:border-box; font-size:15px; font-weight:400; color:#111;} .PageHero .search_form .search_input::placeholder {color:#8C8C8C !important;} .PageHero .search_form .search_input:focus {border-color:#ccc;} .PageHero .search_form .btn_search {position:absolute; right:0; width:48px; height:42px; background:url('../images/item_top_search.svg') center center / 18px no-repeat;} .PageHero .search_form .btn_reset {position:absolute; right:48px; width:22px; height:22px; background:#ddd url('../images/icon_close.svg') center center / 14px no-repeat; border-radius:100px;} .PageHero .keyword {width:100%; flex:0 0 100%; max-width:100%; overflow:hidden;} .PageHero .keyword .word_list {width:100%; max-width:100%; overflow-x:auto; overflow-y:hidden; cursor:grab; -ms-overflow-style:none; scrollbar-width:none; user-select:none; -webkit-user-select:none; touch-action:pan-x;} .PageHero .keyword .word_list::-webkit-scrollbar {display:none;} .PageHero .keyword .word_list.if_drag {cursor:grabbing;} .PageHero .keyword .word_list.if_drag .word_btn {pointer-events:none;} .PageHero .keyword .word_list ul {display:flex; gap:10px; width:max-content;} .PageHero .keyword .word_list ul li {flex:none;} .PageHero .keyword .word_btn {display:inline-flex; align-items:center; height:42px; padding:0 20px; border:1px solid #eee; border-radius:8px; background:#fff; box-sizing:border-box; font-size:15px; font-weight:400; color:#777; white-space:nowrap;} .PageHero .keyword .word_btn.type_hit {border-color:var(--color-primary); background:color-mix(in srgb, var(--color-primary) 7%, transparent); color:var(--color-primary); font-weight:500; pointer-events:none;} /* 페이지메뉴 */ .PageMenu {padding:32px; background:#fff; border-radius:16px; box-shadow:0px 8px 20px rgba(25,31,40,0.04);} .PageMenu ul {gap:16px; display:grid; grid-template-columns:repeat(auto-fit, minmax(min(160px, 100%), 1fr));} .PageMenu li {} .PageMenu .btn_link {display:flex; justify-content:center; align-items:center; flex-direction:column; height:48px; box-sizing:border-box; border:1px solid #eee; border-radius:8px; color:#999; font-size:16px; font-weight:600; background:#f5f5f5;} .PageMenu .btn_link.hit {border-color:var(--color-primary); background:#FFF9F4; color:var(--color-primary);} @media (hover:hover) and (pointer:fine) { .PagePath a:hover {text-decoration:underline; color:#111;} .PageHero .keyword .word_btn:hover {border-color:#ccc; color:#111;} .SectionGrid .grid_head .btn_more:hover {text-decoration:underline;} .SectionGrid .sort_list .one_sort:hover {border-color:#ccc; color:#111;} .SectionGrid .sort_list .one_sort.hit:hover {border-color:var(--color-primary); color:var(--color-primary);} } @media (max-width:1100px) { .SectionGrid> .layout_fix {gap:16px} .SectionGrid .Container {grid-template-columns:1fr} .SectionGrid .Content {gap:16px} .SectionGrid .Aside {flex-direction:row; position:static} .SectionGrid .Aside .grid_inner {flex:1;} .SectionGrid .grid_content {padding:16px;} .SectionGrid .grid_head .label {font-size:14px;} } @media (max-width:900px) { .SectionGrid {margin-top:20px;} .SectionGrid .Aside {flex-direction:column;} .SectionGrid .grid_head {padding:20px 16px;} .SectionGrid .grid_head .tit {font-size:18px;} .SectionGrid .grid_head .comment {font-size:15px;} .SectionGrid .grid_head .btn_more {font-size:15px;} .SectionGrid .grid_head .right {width:100%;} .SectionGrid .sort_list {display:grid; grid-template-columns:repeat(3, 1fr); gap:8px} .SectionGrid .sort_list .one_sort {padding:0px; font-size:14px;} .PagePath {font-size:13px;} .PageHero {flex-direction:column; align-items:stretch; gap:16px; padding:20px; border-radius:12px;} .PageHero .text_block .title {font-size:22px;} .PageHero .text_block .desc {font-size:14px;} .PageHero .limit_alert {width:100%; justify-content:flex-start; padding:14px 16px; box-sizing:border-box;} .PageHero .limit_alert .label {font-size:14px;} .PageHero .limit_alert .text {font-size:13px; white-space:normal;} .PageHero .search_form {width:100%;} .PageHero .keyword .word_list ul {gap:8px;} .PageHero .keyword .word_btn {height:38px; font-size:14px; padding:0 12px;} .PageMenu {padding:20px;} } /* 상품공통 ============================================================================= */ .ItemBox {position:relative; width:100%;} .ItemBox .thumb {overflow:hidden; border-radius:16px; position:relative; box-shadow:0px 8px 20px rgba(0,0,0,0.04); display:flex; justify-content:center; align-items:center; flex-direction:column;} .ItemBox .thumb img {width:100%; display:block;} .ItemBox .thumb:before {content:""; width:100%; height:100%; box-sizing:border-box; position:absolute; left:0; top:0; border-radius:16px; background:rgba(0,0,0,0.5); transition:all 0.3s ease-out; opacity:0;} .ItemBox .over {display:flex; justify-content:center; align-items:center; flex-direction:row; position:absolute; gap:8px; z-index:11; transition:all 0.3s ease-out; transform:translateY(30px); opacity:0; visibility:hidden;} .ItemBox .over .btn_icon {border-radius:100px; background:#fff; display:flex; justify-content:center; align-items:center; flex-direction:column; width:48px; aspect-ratio:1/1; background-size:24px; background-repeat:no-repeat; background-position:center center ;} .ItemBox .over .btn_icon.type_view {background-image:url('../images/item_order.svg');} .ItemBox .over .btn_icon.type_wish {background-image:url('../images/item_wish.svg');} .ItemBox .over .btn_icon.type_wish.hit {background-image:url('../images/item_wish_on.svg');} .ItemBox .info {margin-top:24px; overflow:hidden;} .ItemBox .item_tag {margin-bottom:8px; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp:1; -webkit-box-orient:vertical; display:-webkit-box; font-size:13px; color:#999;} .ItemBox .item_name {color:#111; font-weight:600; font-size:18px; line-height:1.3; word-wrap:break-word; word-break:break-all; white-space:normal;} .ItemBox .sub_name {color:#777; font-size:14px; margin-top:5px;} .ItemBox .price {margin-top:12px; font-size:20px; font-weight:600; display:flex; justify-content:flex-start; align-items:center; flex-direction:row; flex-wrap:wrap; gap:8px; color:#111;} .ItemBox .price .percent {color:var(--color-primary);} .ItemBox .soldout {width:100%; height:100%; position:absolute; left:0; top:0; background:rgba(255,255,255,0.8); display:flex; justify-content:center; align-items:center; flex-direction:column; color:#111; font-size:15px; font-weight:600;} .ItemList {position:relative;} .ItemList ul {display:grid; grid-template-columns:repeat(auto-fill, minmax(min(207px, 100%), 1fr)); gap:32px 16px} .ItemList .list_more { margin-top:60px;} .ItemList .list_more .btn_more {display:flex; justify-content:center; align-items:center; flex-direction:column; height:48px; box-sizing:border-box; border:1px solid #eee; border-radius:8px; color:#111; font-size:16px; font-weight:500; background:#fff;} @media (hover:hover) and (pointer:fine) { .ItemBox:hover .item_name {color:var(--color-primary);} .ItemBox:hover .thumb:before {opacity:1;} .ItemBox:hover .over {opacity:1; transform:translateY(0); visibility:visible;} } @media (max-width:900px) { .ItemBox .thumb {border-radius:10px;} .ItemBox .thumb:before {border-radius:10px;} .ItemBox .item_name {font-size:16px;} .ItemBox .info {margin-top:14px;} .ItemBox .price {margin-top:6px;} .ItemList .list_more { margin-top:30px;} } @media (max-width:600px) { .ItemList ul {grid-template-columns:1fr 1fr;} } /* 로그인/회원가입 간편화 ============================================================================= */ .MemberLogin {position:relative; margin-top:32px;} .MemberLogin .area_wrap {display:flex; justify-content:stretch; align-items:stretch; flex-direction:column; flex:1; overflow:hidden; max-width:440px; margin:0 auto; background:#fff; border-radius:16px; padding:32px; box-sizing:border-box; box-shadow:0px 8px 20px rgba(25,31,40,0.04); } .MemberLogin .form_head {display:flex; flex-direction:column; gap:8px; margin-bottom:15px;} .MemberLogin .form_head .eyebrow {font-size:12px; font-weight:700; line-height:14px; letter-spacing:0.08em; color:var(--color-primary);} .MemberLogin .form_head .title {font-size:24px; font-weight:700; line-height:28px; color:#111;} .MemberLogin .form_head .desc {font-size:14px; font-weight:400; line-height:21px; color:#999;} .MemberLogin .area_content {flex:1; box-sizing:border-box; overflow-y:auto; z-index:2} .MemberLogin .area_bottom {z-index:1; position:relative; margin-top:20px; display:none;} .MemberLogin.if_pass_step_1 .area_bottom {display:block;} .MemberLogin.if_pass_step_2 .area_bottom {display:block;} .MemberLogin .gree_list {} .MemberLogin .gree_list li {display:flex; justify-content:space-between; align-items:stretch; flex-direction:row;} .MemberLogin .gree_list li.this_all_check {border-bottom:0.8px solid #e5e5e5; margin-bottom:5px; padding-bottom:10px;} .MemberLogin .gree_list li.this_all_check label .tx {font-size:15px; font-weight:500;} .MemberLogin .gree_list li.this_line {border-bottom:0.8px solid #e5e5e5; margin-bottom:5px; padding-bottom:5px;} .MemberLogin .gree_list label {padding:0px; display:flex; justify-content:flex-start; align-items:center; flex-direction:row; gap:10px; height:40px;} .MemberLogin .gree_list label input {position:absolute; left:0; top:0; opacity:0; filter:alpha(opacity=0); -ms-filter:alpha(opacity=0); width:0px; height:0px; overflow:hidden;} .MemberLogin .gree_list label input:after {display:none;} .MemberLogin .gree_list label .tx {color:#000; font-size:13px; line-height:1; word-break:keep-all;} .MemberLogin .gree_list label .ic {width:22px; height:22px; border:0.8px solid var(--color-primary); border-radius:3px; box-sizing:border-box;} .MemberLogin .gree_list label input:checked+ .ic {background:var(--color-primary) url('../images/member/label_check.svg?v=2') center center no-repeat; background-size:10px;} .MemberLogin .gree_list label.fake_label {pointer-events:none;} .MemberLogin .gree_list label.fake_label .ic {display:none;} .MemberLogin .gree_list .btn_agree_open {background:transparent url('../images/member/btn_ic_more.svg') center center / 8px no-repeat; width:20px; opacity:0.3;} .MemberLogin .form_list> ul {display:flex; justify-content:center; align-items:stretch; flex-direction:column; gap:15px} .MemberLogin .form_list li {position:relative;} .MemberLogin .form_list input.input {height:48px; font-size:16px; padding:0 15px; border:1px solid #eee; width:100%; box-sizing:border-box; color:#000; border-radius:8px; background:#f5f5f5;} .MemberLogin .form_list input.input:focus {border-color:var(--color-primary);} .MemberLogin .form_list .upper_area {position:absolute; right:10px; bottom:0; height:48px; display:flex; justify-content:flex-start; align-items:center; flex-direction:row; gap:10px} .MemberLogin .form_list .btn_upper {height:30px; display:flex; justify-content:center; align-items:center; flex-direction:column; background:var(--color-primary); color:#fff; border-radius:8px; width:75px; font-size:14px;} .MemberLogin .form_list .rm_time_abs {white-space:nowrap; position:static; margin:0px; color:var(--color-primary); font-size:14px; font-weight:600;} .MemberLogin .form_list .selected {height:48px; font-size:16px; padding:0 15px; border:1px solid #eee; width:100%; box-sizing:border-box; color:#000; border-radius:8px; background:#f5f5f5;} .MemberLogin .form_list .selected {display:flex; justify-content:center; align-items:flex-start; flex-direction:column;} .MemberLogin .form_list .gender_type {gap:0; border:1px solid var(--color-primary); border-radius:8px; box-sizing:border-box; display:flex; justify-content:center; align-items:center; flex-direction:row; width:75px; background:#fff; overflow:hidden;} .MemberLogin .form_list label.label_gender {padding:0px !important; margin:0px !important; height:30px; flex:1; line-height:30px;} .MemberLogin .form_list label.label_gender input {position:absolute; left:0; top:0; overflow:hidden; width:0px; height:0px; border:none;} .MemberLogin .form_list label.label_gender .tx {color:#000; display:flex; justify-content:center; align-items:center; flex-direction:column; font-size:14px;} .MemberLogin .form_list label.label_gender input:checked+ .tx {background:var(--color-primary); color:#fff;} .MemberLogin .form_list .form_label {color:#111; font-size:14px; font-weight:500; margin-bottom:5px; } .MemberLogin .form_list .form_label:before {content:"*"; color:var(--color-primary); margin-right:3px;} .MemberLogin .open_agency {position:fixed; left:0; bottom:0; display:flex; justify-content:flex-end; align-items:stretch; flex-direction:column; width:100%; height:100%; z-index:1000;} .MemberLogin .open_agency {transition:all 0.3s ease-out; -webkit-transition:all 0.3s ease-out; visibility:hidden; opacity:0; filter:alpha(opacity=0); -ms-filter:alpha(opacity=0);} .MemberLogin .open_agency .bg_close {position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.7); z-index:1; opacity:0; filter:alpha(opacity=0); -ms-filter:alpha(opacity=0);} .MemberLogin .open_agency .bg_close {transition:all 0.3s ease-out; -webkit-transition:all 0.3s ease-out;} .MemberLogin .open_agency .wrapping {background:#fff; position:relative; z-index:2; box-sizing:border-box; padding:30px; border-radius:30px 30px 0 0; transition:all 0.3s ease-out; -webkit-transition:all 0.3s ease-out; max-width:440px; margin:0 auto; width:100%;} .MemberLogin .open_agency .wrapping {transform:translateY(100%);} .MemberLogin .open_agency .title {color:#000; font-size:17px; margin-bottom:20px;} .MemberLogin .open_agency .btn_ok {display:flex; justify-content:center; align-items:center; flex-direction:column; border:0.8px solid #000; background:#fff; border-radius:3px; height:50px; font-size:14px; margin-top:20px; border-radius:8px;} .MemberLogin .open_agency .label_list {} .MemberLogin .open_agency .label_list label {color:#000; font-size:14px; padding:0px; box-sizing:border-box; height:auto; width:100%; display:flex; justify-content:center; align-items:stretch; flex-direction:column;} .MemberLogin .open_agency .label_list label .tx {border:0.8px solid #eee; padding:0 20px; display:flex; justify-content:center; align-items:flex-start; flex-direction:column; height:40px; } .MemberLogin .open_agency .label_list label input {overflow:hidden; width:0px; height:0px; border:none;} .MemberLogin .open_agency .label_list label input:checked+ .tx {background:var(--color-primary); color:#fff;} .MemberLogin .open_agency .label_list li+ li label .tx {border-top:none;} .MemberLogin .open_agency.if_open {visibility:visible; opacity:1; filter:alpha(opacity=100); -ms-filter:alpha(opacity=100);} .MemberLogin .open_agency.if_open .bg_close {opacity:1; filter:alpha(opacity=100); -ms-filter:alpha(opacity=100);} .MemberLogin .open_agency.if_open .wrapping {transform:translateY(0);} .MemberLogin .btn_confirm {display:flex; justify-content:center; align-items:center; flex-direction:column; background:var(--color-primary); color:#fff; font-size:18px; height:60px; pointer-events:none;} .MemberLogin .btn_confirm {opacity:0.2; filter:alpha(opacity=20); -ms-filter:alpha(opacity=20); border-radius:8px;} .MemberLogin .btn_confirm.if_pass {pointer-events:initial; opacity:1; filter:alpha(opacity=100); -ms-filter:alpha(opacity=100);} .MemberLogin .area_step {box-sizing:border-box; display:none;} .MemberLogin .area_step.step_1 {display:block;} .MemberLogin.if_pass_step_1 .area_step.step_2 {display:block;} .MemberLogin.if_pass_step_1 .gree_list li.agree_check {display:none;} .MemberLogin.if_pass_step_2 .area_step.step_3 {display:block;} .MemberLogin.if_pass_step_2 .area_step.step_2 {display:none;} .MemberLogin.if_pass_step_2 .gree_list li.agree_check {display:none;} .MemberLogin.if_pass_step_1.if_pass_step_2 .gree_list label {pointer-events:none;} .MemberLogin.if_pass_step_2.if_pass_step_3 .gree_list label {pointer-events:none;} .MemberLogin .layer_pop {position:fixed; left:0; top:0; width:100%; height:100%; display:flex; justify-content:stretch; align-items:stretch; flex-direction:column; overflow:hidden; z-index:2000; transition:all 0.2s ease-out; -webkit-transition:all 0.2s ease-out; transform:translateY(100%); background:rgba(0,0,0,0.8); padding-top:50px; box-sizing:border-box;} .MemberLogin .layer_pop .wrapping {background:#fff; border-radius:10px 10px 0 0; flex:1; display:flex; justify-content:stretch; align-items:stretch; flex-direction:column; overflow:hidden; padding:20px; width:100%; max-width:440px; margin:0 auto; box-sizing:border-box;} .MemberLogin .layer_pop .tit_box {padding-bottom:20px; display:flex; justify-content:center; align-items:center; flex-direction:column; border-bottom:0.8px solid #e5e5e5;} .MemberLogin .layer_pop .tit_box { color:#000; font-weight:600; font-size:18px; text-align:center; word-break:keep-all;} .MemberLogin .layer_pop .scroll_box {flex:1; overflow-y:auto; padding:20px 0; color:#343B4F;} .MemberLogin .layer_pop .scroll_box .agree_table {margin-top:10px;} .MemberLogin .layer_pop .scroll_box .agree_table table {border:1px solid #666; color:#343B4F; text-align:center;} .MemberLogin .layer_pop .scroll_box .agree_table th {padding:2px; border:1px solid #666;} .MemberLogin .layer_pop .scroll_box .agree_table td {padding:2px; border:1px solid #666; color:#343B4F;} .MemberLogin .layer_pop .bottom_box {} .MemberLogin .layer_pop .btn_ok {font-size:16px; font-weight:500; height:50px; box-sizing:border-box; background:#fff; border:0.8px solid #666; color:#666; display:flex; justify-content:center; align-items:center; flex-direction:column; border-radius:8px;} .MemberLogin .layer_pop.if_open {transform:translateY(0);} .MemberLogin .js_join_agree {margin-top:0;} .MemberLogin .js_join_agree .if_open {padding-bottom:0;} @media (max-width:900px) { .MemberLogin {margin-top:24px;} .MemberLogin .area_wrap {padding:20px;} } /* 인증센터 ============================================================================= */ .PageAuth .cert_list {display:flex; flex-direction:column; gap:16px;} .PageAuth .one_cert {display:flex; align-items:center; gap:16px; padding:24px; border:1px solid #eee; border-radius:12px; background:#fff; box-sizing:border-box;} .PageAuth .one_cert .icon {flex:none; width:48px; height:48px; display:flex; align-items:center; justify-content:center; border-radius:10px; border:1px solid #eee; background:#F5F5F5; color:#999; box-sizing:border-box; margin-bottom:auto;} .PageAuth .one_cert .icon img {width:28px; display:block;} .PageAuth .one_cert .draw {display:block;} .PageAuth .one_cert.if_done .icon {border-color:#1BAF20; background:#F5FFF6;} .PageAuth .one_cert.if_done .icon img {filter:brightness(0) saturate(100%) invert(49%) sepia(18%) saturate(2674%) hue-rotate(75deg) brightness(101%) contrast(97%);} .PageAuth .one_cert .info_block {flex:1;} .PageAuth .one_cert .title {font-size:18px; font-weight:700; line-height:1.4; color:#111;} .PageAuth .one_cert .desc {margin-top:6px; font-size:15px; line-height:1.6; color:#666;} .PageAuth .one_cert .meta {margin-top:10px; font-size:13px; line-height:1.5; color:#999;} .PageAuth .one_cert .action {flex:none;} .PageAuth .btn_auth {display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 24px; border-radius:8px; font-size:16px; font-weight:700; line-height:1.3; box-sizing:border-box;} .PageAuth .btn_auth.type_done {background:#1BAF20; color:#fff;} .PageAuth .btn_auth.type_wait {background:#F1F1F1; color:#bbb; cursor:default;} .PageAuth .guide_list {display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px;} .PageAuth .one_guide {padding:20px; border:1px solid #eee; border-radius:12px; background:#fff; box-sizing:border-box;} .PageAuth .one_guide .icon {display:block; width:24px; height:24px; margin-bottom:12px; background:url('../images/auth_check.svg') center center / contain no-repeat;} .PageAuth .one_guide .title {font-size:16px; font-weight:700; line-height:1.4; color:#111;} .PageAuth .one_guide .desc {margin-top:8px; font-size:14px; line-height:1.6; color:#666; word-break:keep-all;} .MiniDsc {display:flex; justify-content:stretch; align-items:stretch; flex-direction:column; gap:24px} .MiniDsc ul {display:flex; flex-direction:column; gap:16px;} .MiniDsc li{display:flex; align-items:center; gap:20px; font-weight:500;} .MiniDsc .label {flex:1; font-size:16px; color:#999; } .MiniDsc .value {flex:none; font-size:16px; color:#111; font-variant-numeric:tabular-nums; letter-spacing:-0.5px;} .MiniCard {text-align:center;} .MiniCard .icon {width:48px; height:48px; margin:0 auto 12px; display:flex; align-items:center; justify-content:center; border-radius:12px; background:color-mix(in srgb, var(--color-primary) 10%, transparent); color:var(--color-primary);} .MiniCard .icon img {width:34px; display:block;} .MiniCard .draw {display:block;} .MiniCard .title {font-size:18px; font-weight:700; line-height:1.4; color:#111;} .MiniCard .desc {margin:8px 0 20px; font-size:14px; line-height:1.6; color:#666; word-break:keep-all;} .MiniCard .btn_auth {display:flex; align-items:center; justify-content:center; min-height:48px; padding:0 24px; border-radius:8px; font-size:16px; font-weight:700; line-height:1.3; box-sizing:border-box; background:var(--color-primary); color:#fff;} .MiniCard .card_button {display:flex; align-items:center; justify-content:center; gap:6px; height:48px; border-radius:8px; background:#FEEB22; text-decoration:none; font-size:16px; font-weight:600; color:#191919; box-sizing:border-box; padding:0 20px;} .MiniCard .card_button img {height:26px; fleX:none} .MiniText {display:flex; flex-direction:column; gap:24px;} .MiniText .find_copy {display:flex; flex-direction:column; gap:12px;} .MiniText .find_copy .title {font-size:18px; font-weight:600; color:#111;} .MiniText .find_copy .desc {font-size:14px; line-height:1.4; color:#999;} .MiniText .card_button {display:flex; align-items:center; justify-content:center; gap:6px; height:48px; border-radius:8px; background:#FEEB22; text-decoration:none; font-size:16px; font-weight:600; color:#191919; box-sizing:border-box; padding:0 20px;} .MiniText .card_button img {height:26px; fleX:none} @media (max-width:900px) { .PageAuth .one_cert {display:block;} .PageAuth .one_cert .icon {width:40px; height:40px; margin-bottom:12px;} .PageAuth .one_cert .title {font-size:16px;} .PageAuth .one_cert .desc {font-size:14px;} .PageAuth .one_cert .meta {margin-top:8px; font-size:12px;} .PageAuth .one_cert .action {margin-top:16px;} .PageAuth .one_cert .btn_auth {width:100%; min-height:46px; font-size:15px;} .PageAuth .guide_list {grid-template-columns:1fr;} .PageAuth .one_guide .icon {margin-bottom:8px;} .PageAuth .one_guide .title {font-size:15px;} .PageAuth .one_guide .desc {font-size:13px;} .MiniDsc .label {font-size:14px;} .MiniDsc .value {font-size:14px;} .MiniCard .icon {width:44px; height:44px;} .MiniCard .title {font-size:16px;} .MiniCard .desc {margin-bottom:16px; font-size:13px;} .MiniCard .btn_auth {min-height:46px; font-size:15px;} } /* 상품목록 > 검색·정렬 ============================================================================= */ .ItemHead {display:flex; align-items:center; justify-content:space-between; gap:24px;} .ItemHead .search_form {position:relative; flex:none; width:370px; display:flex; justify-content:center; align-items:center; flex-direction:row;} .ItemHead .search_form .search_input {width:100%; height:42px; padding:0 48px 0 20px; border:1px solid #eee; border-radius:8px; background:#F7F8FA; box-sizing:border-box; font-size:15px; font-weight:400; color:#111;} .ItemHead .search_form .search_input::placeholder {color:#8C8C8C !important;} .ItemHead .search_form .search_input:focus {border-color:#ccc;} .ItemHead .search_form .btn_search {position:absolute; right:0; width:48px; height:42px; background:url('../images/item_top_search.svg') center center / 18px no-repeat;} .ItemHead .search_form .btn_reset {position:absolute; right:48px; width:22px; height:22px; background:#ddd url('../images/icon_close.svg') center center / 14px no-repeat; border-radius:100px;} .ItemHead .order_list {display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:8px;} .ItemHead .order_list .order_btn {display:inline-flex; align-items:center; justify-content:center; height:42px; padding:0 20px; border:1px solid #eee; border-radius:8px; background:#fff; box-sizing:border-box; font-size:15px; font-weight:500; color:#777; white-space:nowrap;} .ItemHead .order_list .order_btn.hit {border-color:var(--color-primary); background:color-mix(in srgb, var(--color-primary) 7%, transparent); color:var(--color-primary); pointer-events:none;} @media (max-width:900px) { .ItemHead {flex-direction:column; align-items:stretch; gap:12px;} .ItemHead .search_form {width:100%;} .ItemHead .order_list {display:none} } /* 상품목록 > 필터 */ .ItemFilter {display:flex; align-items:center; justify-content:space-between; gap:24px;} .ItemFilter .total_count {display:flex; align-items:center; gap:8px; flex:1;} .ItemFilter .total_count .label {font-size:16px; font-weight:500; color:#8c8c8c; white-space:nowrap;} .ItemFilter .total_count .value {font-size:24px; font-weight:700; color:#111; white-space:nowrap;} .ItemFilter .filter_list {display:flex; align-items:center; flex-wrap:wrap; gap:8px; flex:none;} .ItemFilter .filter_btn {display:flex; align-items:center; justify-content:center; gap:8px; height:42px; padding:0 20px; border:1px solid #eee; border-radius:8px; background:#fff; box-sizing:border-box; font-size:15px; font-weight:500; color:#777; white-space:nowrap;} .ItemFilter .filter_btn.hit {border-color:var(--color-primary); background:color-mix(in srgb, var(--color-primary) 7%, transparent); color:var(--color-primary); pointer-events:none;} .ItemFilter .filter_btn.type_reset .icon {display:block; width:16px; height:16px; background:url('../images/icon_refresh.svg') center center / 16px no-repeat;} .ItemFilter .mobile_filter {display:none; align-items:center; gap:8px; flex:none; position:relative;} .ItemFilter .mobile_filter .order_trigger {display:inline-flex; align-items:center; gap:8px; height:35px; padding:0 14px; border:1px solid #eee; border-radius:8px; background:#fff; box-sizing:border-box; font-size:14px; font-weight:500; color:#777; white-space:nowrap;} .ItemFilter .mobile_filter .order_trigger:after {content:""; width:11px; height:11px; background:url('../images/arrow_down_mono.svg') center center / 11px no-repeat; flex:none;} .ItemFilter .mobile_filter .filter_trigger {display:inline-flex; align-items:center; gap:6px; height:35px; padding:0 14px; border:1px solid #eee; border-radius:8px; background:#fff; box-sizing:border-box; font-size:14px; font-weight:500; color:#777; white-space:nowrap;} .ItemFilter .mobile_filter .filter_trigger:before {content:""; width:18px; height:18px; background:url('../images/icon_filter.svg') center center / 18px no-repeat; flex:none; filter:grayscale(100%);} .ItemFilter .mobile_filter .filter_trigger.hit {border-color:var(--color-primary); background:color-mix(in srgb, var(--color-primary) 7%, transparent); color:var(--color-primary);} .ItemFilter .mobile_filter .filter_trigger.hit:before {filter:grayscale(0);} .ItemFilter .mobile_filter .option_btn {display:flex; align-items:center; height:36px; padding:0 12px; border-radius:6px; font-size:14px; font-weight:500; color:#777; white-space:nowrap;} .ItemFilter .mobile_filter .option_btn.hit {color:var(--color-primary); background:color-mix(in srgb, var(--color-primary) 7%, transparent); pointer-events:none;} @media (max-width:900px) { .ItemFilter {flex-direction:row; align-items:center; gap:12px;} .ItemFilter .total_count .value {font-size:18px;} .ItemFilter .filter_list {display:none;} .ItemFilter .mobile_filter {display:flex;} } /* 홈 > 할인혜택 ============================================================================= */ .ItemCategory {display:flex; flex-direction:column; background:#fff; border-radius:16px; box-shadow:0 8px 20px 0 rgba(25,31,40,0.04); box-sizing:border-box;} .ItemCategory .card_title {display:flex; align-items:center; gap:8px; height:24px; font-size:20px; font-weight:600; color:#111; flex:none; padding:20px; pointer-events:none;} .ItemCategory .card_title img {width:24px; height:24px; flex:none; display:block;} .ItemCategory .card_title strong {flex:1} .ItemCategory .card_title em {display:none;} .ItemCategory .card_title .count {color:var(--color-primary); margin-left:auto; font-size:16px;} .ItemCategory .card_list {display:flex; flex-direction:column; flex:1; padding:16px 12px; border-top:1px solid #eee; overflow-y:auto; max-height:450px;} .ItemCategory .card_list::-webkit-scrollbar {width:4px;} .ItemCategory .card_list::-webkit-scrollbar-thumb {background-color:color-mix(in srgb, var(--color-primary) 20%, transparent); border-radius:100px;} .ItemCategory .card_list::-webkit-scrollbar-track {background-color:transparent;} .ItemCategory .card_list li {position:relative; display:flex; align-items:center; gap:10px; color:#333; padding:8px 12px; border-radius:100px; box-sizing:border-box; transition:all 0.3s ease-out; border:1px solid transparent;} .ItemCategory .card_list li.hit {border:1px solid var(--color-primary);} .ItemCategory .card_list li.hit .name {color:var(--color-primary);} .ItemCategory .card_list .logo {flex:none; width:40px; height:40px; border:1px solid #EEE; border-radius:100px; overflow:hidden; box-sizing:border-box; background:#eee url('../images/logo_bi.svg') center center / 16px no-repeat;} .ItemCategory .card_list .logo img {width:100%; height:100%; object-fit:cover; display:block;} .ItemCategory .card_list .name {flex:1; font-size:15px; font-weight:500; letter-spacing:-0.01em; color:#333; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp:1; -webkit-box-orient:vertical; display:-webkit-box;} .ItemCategory .card_list .rate {flex:none; font-size:15px; font-weight:600; letter-spacing:-0.01em; color:var(--color-primary); max-width:60px} .ItemCategory .card_list .count {flex:none; font-size:15px; font-weight:600; letter-spacing:-0.01em; color:#999; } .ItemCategory .card_list .btn_all {border:1px solid #eee; border-radius:100px; background:#fff; font-size:15px; font-weight:600; box-sizing:border-box; margin-bottom:10px; padding:0px;} .ItemCategory .card_list .btn_all .name {padding:12px 16px; display:flex; justify-content:flex-start; align-items:center; flex-direction:row; color:#777;} .ItemCategory.this_mobile {display:none; border:1px solid var(--color-primary); background:color-mix(in srgb, var(--color-primary) 10%, transparent);} .ItemCategory.this_mobile .card_list {display:none;} .ItemCategory.this_mobile .card_title {pointer-events:initial; padding:0 16px; height:48px; color:var(--color-primary); font-size:16px;} .ItemCategory.this_mobile .card_title em {display:inline;} .ItemCategory.this_mobile .card_title:after {content:""; width:24px; aspect-ratio:1/1; background:url('../images/arrow_down.svg') center center / 11px no-repeat; margin-left:auto; transition:all 0.2s ease-out;} .ItemCategory.this_mobile .card_title .count {display:none;} .ItemCategory.this_mobile.if_open .card_title:after {transform:rotate(-180deg);} .ItemCategory.this_mobile.if_open .card_list {display:flex;} @media (hover:hover) and (pointer:fine) { .ItemCategory .card_list li:hover {background:color-mix(in srgb, var(--color-primary) 15%, transparent);} .ItemCategory .card_list li:hover .name {color:var(--color-primary);} } @media (max-width:1100px) { .ItemCategory {margin-top:0px; border-radius:10px;} .ItemCategory.this_pc {display:none;} .ItemCategory.this_mobile {display:flex;} } .p_Qorder {background:#f1f1f1; border:1px solid #eeeeee; border-left:0; border-right:0; box-sizing:border-box; padding-bottom:15px;} .p_Qorder li {list-style:none;} .p_Qorder .area_box {border-radius:10px; border:1px solid #f2f2f2; box-sizing:border-box; background:#fff; margin-top:20px;} .p_Qorder .group_tit {border-bottom:1px solid #f2f2f2; height:45px; display:flex; justify-content: space-between; align-items: center; flex-direction:row; padding:0 15px;} .p_Qorder .group_tit strong {color:#000; font-size:16px; font-weight:600;} .p_Qorder .group_tit .btn_reset {width:30px; height:30px; background:transparent url('../images/todaypin/view_reset.svg') right center no-repeat; background-size:15px;} .p_Qorder .box_tip {position:relative;} .p_Qorder .box_tip .btn_tip {color:#cecbcb; background:transparent url('../images/todaypin/view_tip.svg') right center no-repeat; padding-right:16px; background-size:13px;} .p_Qorder .box_tip .btn_tip {height:30px; display:flex; justify-content: center; align-items: center; flex-direction:column;} .p_Qorder .box_tip .tip_conts {position:absolute; right:-10px; top:30px; background:#fff; border-radius:3px; border:1px solid #333; padding:15px; width:300px; box-sizing:border-box; font-size:12px;} .p_Qorder .box_tip .tip_conts {box-shadow:5px 5px 10px rgba(0,0,0,0.1); color:#333; line-height:1.35; padding-right:40px; z-index:100; display:none;} .p_Qorder .box_tip .btn_close {width:35px; height:40px; background:transparent url('../images/todaypin/view_close.svg') center center no-repeat; background-size:10px; position:absolute; right:0; top:0;} .p_Qorder .box_tip .if_open.tip_conts {display:block;} .p_Qorder .phone_box {} .p_Qorder .phone_box .group_tit {border-bottom:0;} .p_Qorder .phone_box .group_tit strong {background:transparent url('../images/todaypin/view_phone.svg') left center no-repeat; background-size:10px; padding-left:15px;} .p_Qorder .phone_box .phone_number {border:1px solid #f2f2f2; border-radius:10px; margin:15px; margin-top:0px;} .p_Qorder .phone_box .phone_number {display:flex; justify-content: stretch; align-items: stretch; flex-direction:row} .p_Qorder .phone_box .phone_number li.this_dash {position:relative; width:20px; display:flex; justify-content: center; align-items: center; flex-direction:column;} .p_Qorder .phone_box .phone_number li.this_dash:before {content:""; width:8px; height:1px; background:#000; display:inline-block;} .p_Qorder .phone_box .phone_number li.this_form {flex:1} .p_Qorder .phone_box input.design {color:#000; text-align:center; font-size:15px; height:45px; width:100%;} /* 결제수단 UI변경전 :: 2024-09-23 ARA */ .p_Qorder .pay_list {} .p_Qorder .pay_list .first {width:max-content; padding:15px;} .p_Qorder .pay_list .first {display:flex; justify-content:flex-start; align-items:stretch; flex-direction:row; flex-wrap:wrap; box-sizing:border-box; gap:10px} .p_Qorder .pay_list .first li {box-sizing:border-box; width:115px;} .p_Qorder .pay_list label.pay {overflow:hidden; position:relative; height:100%; width:auto; margin:0px; display:block; display:flex; justify-content:flex-start; align-items:stretch; flex-direction:column;} .p_Qorder .pay_list label.pay input {display:none;} .p_Qorder .pay_list label.pay .tx {box-sizing:border-box; border-radius:10px; border:1px solid #f2f2f2; overflow:hidden; display:flex; justify-content:center; align-items:center; flex-direction:column; color:#000;} .p_Qorder .pay_list label.pay .tx {padding-bottom:25px; flex:1} .p_Qorder .pay_list label.pay .picto {font-size:0px; padding:10px; padding-bottom:0px;} .p_Qorder .pay_list label.pay .picto img {width:100%;} .p_Qorder .pay_list label.pay .pay_type {font-size:12px; line-height:1; margin-top:6px;} .p_Qorder .pay_list label.pay .pay_name {font-size:16px; font-weight:600; color:#000;} .p_Qorder .pay_list label.pay input:checked+ .tx {color:#000; border:1px solid #4285F4; background:#fff;} .p_Qorder .pay_list label.pay input:disabled+ .tx:before {content:""; width:100%; height:100%; position:absolute; left:0; top:0; background:rgba(0,0,0,0.1); border-radius:10px;} .p_Qorder .pay_list label.pay input:disabled+ .tx {opacity:0.3;} .p_Qorder .pay_list .scroll_wrap {overflow-y:auto;} .p_Qorder .pay_list .scroll_wrap::-webkit-scrollbar {height:6px; display:none;} .p_Qorder .pay_list .scroll_wrap::-webkit-scrollbar-thumb { background-color:#ccc; border-radius:100px;} .p_Qorder .pay_list .scroll_wrap::-webkit-scrollbar-track {background-color:#fff;} html.if_pcmode .p_Qorder .pay_list .scroll_wrap::-webkit-scrollbar {display:block;} .p_Qorder .pay_list .next {display:flex; justify-content: flex-start; align-items: flex-start; flex-direction:row; flex-wrap:wrap; box-sizing:border-box;} .p_Qorder .pay_list .next li {width:33.3333%; box-sizing:border-box; margin-top:15px;} .p_Qorder .pay_list .next label {overflow:hidden; position:relative; height:60px; width:100%; margin:0px; display:flex; justify-content: center; align-items: center; flex-direction:column;} .p_Qorder .pay_list .next label input {position:absolute; left:0; top:0; opacity: 0; filter: alpha(opacity=0); -ms-filter:alpha(opacity=0);} .p_Qorder .pay_list .next label .tx {border:1px solid #f2f2f2;} .p_Qorder .pay_list .next label input:checked+ .tx {color:#4285F4;} .p_Qorder .pay_list .next label .ic {order:1; display:flex; justify-content: center; align-items: center; flex-direction:column;} .p_Qorder .pay_list .next label .ic img {height:35px;} .p_Qorder .pay_list .next.type_online {gap:10px;} .p_Qorder .pay_list .next.type_online li:first-of-type {flex:1} .p_Qorder .pay_list .next.type_online li:last-of-type {width:120px;} .p_Qorder .pay_list .next.type_online .input_design {border-radius:5px; border:1px solid #f2f2f2; height:40px; box-sizing:border-box; width:100%; padding:0 10px;} .p_Qorder .pay_list .next.type_online .input_design:focus {border-color:#333;} .p_Qorder .pay_list .next.type_virtual {/* flex-direction:column; align-items: stretch; margin-top:15px; */} .p_Qorder .pay_list .next.type_virtual dl {display:flex; justify-content: space-between; align-items: center; flex-direction:row} .p_Qorder .pay_list .next.type_virtual dl+ dl {border-top:1px dashed #f0f0f0; margin-top:5px; padding-top:5px;} .p_Qorder .pay_list .next.type_virtual dt img {height:30px;} .p_Qorder .pay_list .next.type_virtual dd {font-weight:500; color:#d1d6dd; font-size:16px; display:flex; justify-content: center; align-items: center; flex-direction:row} .p_Qorder .pay_list .next.type_virtual .btn_issue {border-radius:5px; height:31px; color:#fff; background:#afb7c2; font-size:12px; font-weight:500; margin-left:10px; padding:0 10px;} .p_Qorder .pay_list .next.type_virtual .btn_issue {display:flex; justify-content: center; align-items: center; flex-direction:column;} .p_Qorder .pay_list .next.type_virtual .btn_issue.after {display:none; background:#222} .p_Qorder .pay_list .next.type_virtual .if_selected dd {color:#000;} .p_Qorder .pay_list .next.type_virtual .if_selected .btn_issue.after {display:flex} .p_Qorder .pay_list .next.type_virtual .if_selected .btn_issue.before {display:none} /* 결제수단 UI변경 :: 2024-09-23 ARA */ :root { --color-pink:#ff5e11; --color-blueblack:#4c5a66; } .p_Qorder .pay_group {display:flex; justify-content:stretch; align-items:stretch; flex-direction:column;} .p_Qorder .pay_group ul {display:flex; justify-content:stretch; align-items:stretch; flex-direction:column; border-top:1px solid #f2f2f2; } .p_Qorder .pay_group ul.js_gift24_point_form {border-top:0; padding-top:0px;} .p_Qorder .pay_group ul.this_pay_group {display:grid; grid-template-columns:repeat(2, 1fr); background:#f5f5f5; border-radius:15px; margin:15px; margin-top:0px;} .p_Qorder .pay_group .upper_type {padding:15px; height:auto; display:flex; justify-content:flex-start; align-items:center; flex-direction:row;} .p_Qorder .pay_group .upper_type .tx {color:#000; font-size:16px; font-weight:600; display:flex; justify-content:flex-start; align-items:center; flex-direction:row;} .p_Qorder .pay_group .upper_type .ic {width:24px; height:24px; box-sizing:border-box; border-radius:100px; border:1px solid #e7e7e7; position:relative; margin-right:10px;} .p_Qorder .pay_group .upper_type .ic {display:flex; justify-content:center; align-items:center; flex-direction:column;} .p_Qorder .pay_group .upper_type .ic:before {content:""; width:12px; height:12px; background:var(--color-pink); border-radius:100px; transform:scale(0); -webkit-transform:scale(0);} .p_Qorder .pay_group .upper_type .ic:before {transition:all 0.2s ease-out; -webkit-transition:all 0.2s ease-out;} .p_Qorder .pay_group .upper_type input {display:none;} .p_Qorder .pay_group .upper_type input:checked+ .tx .ic {border:2px solid var(--color-pink);} .p_Qorder .pay_group .upper_type input:checked+ .tx .ic:before {transform:scale(1.0); -webkit-transform:scale(1.0);} .p_Qorder .pay_group .mid_type {border-top:1px solid #f2f2f2; display:flex; justify-content:flex-start; align-items:center; flex-direction:row} .p_Qorder .pay_group label.pay {display:flex; justify-content:stretch; align-items:stretch; flex-direction:column; height:auto;} .p_Qorder .pay_group label.pay .tx {display:flex; justify-content:center; align-items:center; flex-direction:column; height:45px; border-radius:15px; border:2px solid #f5f5f5; box-sizing:border-box;} .p_Qorder .pay_group label.pay .pay_type {color:#999; font-size:14px; font-weight:500;} .p_Qorder .pay_group label.pay .pay_name {display:none;} .p_Qorder .pay_group label.pay input {display:none;} .p_Qorder .pay_group label.pay input:checked+ .tx {border-color:var(--color-primary); background:#fff;} .p_Qorder .pay_group label.pay input:checked+ .tx .pay_type {color:#000;} .p_Qorder .pay_group .add_card_monthly {margin:0 15px; margin-top:-15px;} .p_Qorder .charge_per {margin-left:auto; position:relative; margin-right:15px;} .p_Qorder .charge_per .selected {color:var(--color-pink); font-size:14px; font-weight:500; display:flex; justify-content:center; align-items:center; flex-direction:row; gap:4px; cursor:pointer; height:35px;} .p_Qorder .charge_per .selected:after {content:""; width:0; height:0; border-left:6px solid transparent; border-right:6px solid transparent; border-top:8px solid var(--color-pink);} .p_Qorder .charge_per .selected:after {transition:all 0.3s ease-out; -webkit-transition:all 0.3s ease-out;} .p_Qorder .charge_per .option_list {position:absolute; right:-10px; top:35px; background:#fff; border-radius:10px; padding:0 10px; box-sizing:border-box; width:150px; box-shadow:0 0 10px rgba(0,0,0,0.15);} .p_Qorder .charge_per .option_list {transition:all 600ms cubic-bezier(0.19, 1, 0.22, 1); visibility:hidden; opacity:0; transform:translateY(-20px);} .p_Qorder .charge_per .option_list .option {display:block; display:flex; justify-content:center; align-items:center; flex-direction:column; height:36px; box-sizing:border-box; color:var(--color-pink); font-size:14px; font-weight:500;} .p_Qorder .charge_per .option_list .option+ .option {border-top:1px solid #eee;} .p_Qorder .charge_per.if_open_option .option_list {visibility:visible; opacity:1; transform:translateY(0);} .p_Qorder .charge_per.if_open_option .selected:after {transform:rotate(180deg); -webkit-transform:rotate(180deg);} .p_Qorder .phone_autofill {margin:15px; margin-top:0px; border-top:0 !important;} .p_Qorder .phone_autofill li {border:1px solid #f2f2f2; border-radius:px; display:flex; justify-content:center; align-items:center; flex-direction:row; border-radius:10px; font-size:15px; overflow:hidden;} .p_Qorder .phone_autofill li+ li {margin-top:10px;} .p_Qorder .phone_autofill input.design {color:#000; font-size:15px; height:45px; width:100%; flex:1; padding:0 15px; font-variant-numeric:tabular-nums;} .p_Qorder .phone_autofill .id_number_last {position:relative; flex:1} .p_Qorder .phone_autofill .id_number_last:after {content:"●●●●●"; position:absolute; left:30px; top:0; color:#000; height:100%; display:flex; justify-content:center; align-items:center; flex-direction:column; pointer-events:none;} .p_Qorder .phone_autofill .select select {border:0 !important; font-size:15px; background:transparent; padding-left:15px; min-width:150px} .p_Qorder .phone_autofill .divi {color:#000; width:15px;} .p_Qorder .gift24_point {padding:15px; padding-top:0px;} .p_Qorder .gift24_point .check_barbode {display:flex; justify-content:flex-start; align-items:stretch; flex-direction:row; gap:10px; height:55px;} .p_Qorder .gift24_point .find {flex:1; border:1px solid #f2f2f2; border-radius:10px; font-size:17px; font-weight:500; padding:0 15px; box-sizing:border-box; width:100%; color:var(--color-point);} .p_Qorder .gift24_point .find:focus {border-color:var(--color-blueblack);} .p_Qorder .gift24_point div.find {display:flex; justify-content:flex-end; align-items:center; flex-direction:row; font-size:19px; letter-spacing:-0.5px;} .p_Qorder .gift24_point div.find strong {font-weight:800;} .p_Qorder .gift24_point .btn_find {background:var(--color-blueblack); color:#fff; font-size:16px; flex:none; display:flex; justify-content:center; align-items:center; flex-direction:column; border-radius:10px; font-weight:500;} .p_Qorder .gift24_point .btn_find {padding:0 15px; box-sizing:border-box;} .p_Qorder .gift24_point .benefit_comment {margin-top:15px; font-size:16px; color:#000; font-weight:500;} .p_Qorder .gift24_point .benefit_comment em {color:var(--color-point);} .p_Qorder .gift24_point .benefit_comment strong {font-weight:700;} .p_Qorder .vol_list {} .p_Qorder .vol_list dl {display:flex; justify-content: flex-start; align-items: flex-end; flex-direction:row; padding:15px;} .p_Qorder .vol_list dl+ dl {border-top:1px solid #f5f5f5;} .p_Qorder .vol_list dt {flex:1; display:flex; justify-content: flex-start; align-items: center; flex-direction:row; flex-wrap:wrap} .p_Qorder .vol_list dd {text-align:right; font-weight:500; color:#c2c2c2; font-size:15px; white-space:nowrap; padding-left:10px; height:30px; display:flex; justify-content: center; align-items: center; flex-direction:column;} .p_Qorder .vol_list .opt_name {width:100%; color:#c2c2c2; font-size:13px; font-weight:500; margin-bottom:10px;} .p_Qorder .view_counter {background:#fff; display:flex; justify-content:center; align-items:center; flex-direction:row; box-sizing:border-box; height:48px; padding:0 3px;} .p_Qorder .view_counter a {width:40px; height:40px; display:flex; justify-content:center; align-items:center; flex-direction:column; position:relative; border-radius:6px; flex:none} .p_Qorder .view_counter .shape {height:1px; width:11px; background:#111;} .p_Qorder .view_counter a.btn_up:before {content:""; width:1px; height:11px; position:absolute; background:#111;} .p_Qorder .view_counter .btn_down.disabled {opacity:0.3; pointer-events:none;} .p_Qorder .view_counter .updown_input {height:46px; color:#000; border:0; font-weight:600; font-size:18px; flex:1; text-align:center; width:100%} .p_Qorder .price_cal {} .p_Qorder .price_cal dl {display:flex; justify-content: flex-start; align-items: center; flex-direction:row; font-size:15px;} .p_Qorder .price_cal dl+ dl {margin-top:5px;} .p_Qorder .price_cal dt {flex:1; display:flex; justify-content: flex-start; align-items: center; flex-direction:row; flex-wrap:wrap; font-size:inherit; color:#000; line-height:1;} .p_Qorder .price_cal dd {text-align:right; font-weight:700; color:#000; font-size:inherit; white-space:nowrap; padding-left:10px; line-height:1;} .p_Qorder .price_cal dl.last {margin-top:10px; font-size:19px;} .p_Qorder .price_cal dl.vat dd {color:#4285F4;} .p_Qorder .price_cal .box_tip .btn_tip {color:#000;} .p_Qorder .price_cal .box_tip .tip_conts {right:auto; left:-5px;} .view_btn.type_item_charge {padding:10px; padding-left:0px;} .view_btn.type_item_charge .btn {border-radius:10px; height:50px; font-size:16px; position:relative; display:flex; justify-content:center; align-items:center; flex-direction:column; background:var(--color-primary); color:#fff;} .view_btn.type_item_charge .bubble {position:absolute; left:50%; top:-17px; font-size:10px; height:26px; line-height:1; display:flex; justify-content:center; align-items:center; flex-direction:column; z-index:3; padding:0 10px;} .view_btn.type_item_charge .bubble {border-radius:100px; color:#fff; padding-left:28px; background:#4285F4 url('../images/main_renew/gift24_logo.svg') 8px center no-repeat; background-size:14px; white-space:nowrap} .view_btn.type_item_charge .bubble {transform:translateX(-72px);} .view_btn.type_item_charge .bubble:after {content:""; width:15px; height:15px; background:transparent url('../images/main_renew/bubble_edge.svg') center center no-repeat; position:absolute; left:12px; bottom:-10px;} .view_btn.type_item_charge .bubble:after {filter: invert(70%) sepia(78%) saturate(5931%) hue-rotate(201deg) brightness(100%) contrast(92%); background-size:13px;} /* 상품상세 NEW =================================================== */ .ViewGrid {margin-top:32px;} .ViewGrid .Container {display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start; gap:24px; margin-top:32px;} .ViewGrid .Content {display:flex; justify-content:flex-start; align-items:stretch; flex-direction:column;} .ViewGrid .Aside {display:flex; justify-content:flex-start; align-items:stretch; flex-direction:column; position:sticky; top:24px; z-index:10} .ViewGrid .grid_inner {background:#fff; border-radius:16px; overflow:hidden; box-shadow:0px 8px 20px rgba(25,31,40,0.04); box-sizing:border-box; padding:24px; gap:20px} .ViewGrid .form_inner {display:flex; justify-content:flex-start; align-items:stretch; flex-direction:column; gap:20px} .ViewGrid .thumb {display:flex; justify-content:center; align-items:center; flex-direction:column;} .ViewGrid .thumb img {width:100%; max-width:360px;} .ViewGrid .view_name {display:flex; flex-direction:column; gap:8px;} .ViewGrid .view_name .item_tag {display:flex; flex-wrap:wrap; gap:6px; overflow:hidden; font-size:14px; color:#999; margin-bottom:10px;} .ViewGrid .view_name .view_tit .title {font-size:26px; font-weight:700; color:#111;} .ViewGrid .view_name .sub_name {font-size:16px; font-weight:400;color:var(--color-primary); font-weight:600;} .ViewGrid .view_name .price {margin-top:8px; padding-top:16px; border-top:1px solid #eee; font-size:34px; display:flex; flex-direction:row; flex-wrap:wrap; align-items:flex-start; gap:4px;} .ViewGrid .view_name .price .after { font-weight:700; color:#111;} .ViewGrid .view_name .price .per {font-weight:600; color:var(--color-primary);} .ViewGrid .view_name .price .before {font-size:13px; color:#999; text-decoration:line-through;} .ViewGrid .view_name .comment {color:#999; font-size:14px;} .ViewGrid .inner_box {padding:24px; border:1px solid #eee; border-radius:14px; background:#F9FAFB; box-sizing:border-box; display:flex; flex-direction:column; gap:16px;} .ViewGrid .view_info {font-size:16px;} .ViewGrid .view_info .info_tit {font-weight:600; color:#192028;} .ViewGrid .view_info dl {display:flex; align-items:flex-start; gap:16px;} .ViewGrid .view_info dt {flex:none; font-size:15px; font-weight:400; color:#777;} .ViewGrid .view_info dd {flex:1; font-size:15px; font-weight:600; color:#192028; text-align:right;} .ViewGrid .group_tit {display:flex; justify-content:space-between; align-items:center; flex-direction:row; color:#191F28; font-size:18px;} .ViewGrid .group_tit strong {flex:1; line-height:1; font-weight:700; } .ViewGrid .group_tit .btn_reset {width:30px; height:30px; background:transparent url('../images/icon_refresh.svg') center center / 20px no-repeat;} .ViewGrid .group_tit .btn_reset.if_spin {animation:view_reset_spin 0.45s ease-out;} @keyframes view_reset_spin {from {transform:rotate(0deg);} to {transform:rotate(360deg);}} .ViewGrid .group_tit .side {color:#999; font-size:16px;} .ViewGrid .view_counter {background:#fff; display:flex; justify-content:center; align-items:center; flex-direction:row; border-radius:10px; border:1px solid #eee; box-sizing:border-box; height:48px; padding:0 3px;} .ViewGrid .view_counter a {width:40px; height:40px; display:flex; justify-content:center; align-items:center; flex-direction:column; position:relative; border-radius:6px; flex:none} .ViewGrid .view_counter .shape {height:1px; width:11px; background:#111;} .ViewGrid .view_counter a.btn_up:before {content:""; width:1px; height:11px; position:absolute; background:#111;} .ViewGrid .view_counter .btn_down.disabled {opacity:0.3; pointer-events:none;} .ViewGrid .view_counter .updown_input {height:46px; color:#000; border:0; font-weight:600; font-size:18px; flex:1; text-align:center; width:100%} .ViewGrid .total_box {display:flex; flex-direction:column; gap:14px; padding:24px; border-radius:14px; background:#FFF7EF; box-sizing:border-box;} .ViewGrid .total_box .price_cal {display:flex; flex-direction:column; gap:14px;} .ViewGrid .total_box .price_cal dl {display:flex; align-items:flex-start; gap:16px; font-size:16px;} .ViewGrid .total_box .price_cal dt {flex:none; font-weight:400; color:#777; font-weight:500;} .ViewGrid .total_box .price_cal dd {flex:1; color:#192028; text-align:right; font-weight:600;} .ViewGrid .total_box .price_cal dl.last {font-size:18px; font-weight:700; border-top:1px solid #FFE7CE; padding-top:13px;} .ViewGrid .total_box .price_cal dl.last * {color:var(--color-primary) !important;} .ViewGrid .pay_group {display:flex; justify-content:stretch; align-items:stretch; flex-direction:column; gap:16px} .ViewGrid .pay_group ul {display:flex; justify-content:stretch; align-items:stretch; flex-direction:column;} .ViewGrid .pay_group ul.js_gift24_point_form {border-top:0; padding-top:0px;} .ViewGrid .pay_group ul.this_pay_group {display:grid; grid-template-columns:repeat(3, 1fr); gap:10px} .ViewGrid .pay_group .upper_type {height:auto; display:flex; justify-content:flex-start; align-items:center; flex-direction:row;} .ViewGrid .pay_group .upper_type .tx {color:#000; font-size:16px; font-weight:600; display:flex; justify-content:flex-start; align-items:center; flex-direction:row;} .ViewGrid .pay_group .upper_type .ic {width:24px; height:24px; box-sizing:border-box; border-radius:100px; border:1px solid #eee; position:relative; margin-right:10px; display:flex; justify-content:center; align-items:center; flex-direction:column; background:#fff;} .ViewGrid .pay_group .upper_type .ic:before {content:""; width:12px; height:12px; background:var(--color-primary); border-radius:100px; transform:scale(0); -webkit-transform:scale(0); transition:all 0.2s ease-out; -webkit-transition:all 0.2s ease-out;} .ViewGrid .pay_group .upper_type input {display:none;} .ViewGrid .pay_group .upper_type input:checked+ .tx .ic {border:2px solid var(--color-primary);} .ViewGrid .pay_group .upper_type input:checked+ .tx .ic:before {transform:scale(1.0); -webkit-transform:scale(1.0);} .ViewGrid .pay_group .mid_type {display:flex; justify-content:flex-start; align-items:center; flex-direction:row} .ViewGrid .pay_group label.pay {display:flex; justify-content:stretch; align-items:stretch; flex-direction:column; height:auto;} .ViewGrid .pay_group label.pay .tx {display:flex; justify-content:center; align-items:center; flex-direction:column; height:48px; border-radius:8px; border:1px solid #eee; box-sizing:border-box; background:#fff; color:#aaa; font-size:16px; font-weight:600;} .ViewGrid .pay_group label.pay input {display:none;} .ViewGrid .pay_group label.pay input:checked+ .tx {border-color:var(--color-primary); background:color-mix(in srgb, var(--color-primary) 10%, #fff);} .ViewGrid .pay_group label.pay input:checked+ .tx .pay_type {color:var(--color-primary);} .ViewGrid .pay_group .add_card_monthly {margin:0 15px; margin-top:-15px;} .ViewGrid .float_option {box-sizing:border-box;} .ViewGrid .float_option .view_btn {background:#fff; display:flex; justify-content:stretch; align-items:center; flex-direction:row; gap:10px} .ViewGrid .float_option .view_btn ul {flex:1; display:flex; justify-content:center; align-items:center; flex-direction:row; gap:5px} .ViewGrid .float_option .view_btn li {flex:1} .ViewGrid .float_option .view_btn .btn {height:48px; display:flex; justify-content:center; align-items:center; flex-direction:column; font-size:16px; font-weight:600; border-radius:8px; color:#fff; position:relative;} .ViewGrid .float_option .view_btn .btn_wish {width:50px; display:flex; justify-content:center; align-items:center; flex-direction:column; background:#fff; border:1px solid #eee; height:48px; border-radius:8px; box-sizing:border-box;} .ViewGrid .float_option .view_btn .btn_wish:before {content:""; width:25px; height:25px; background:transparent url('../images/item_wish.svg') center center / 20px no-repeat;} .ViewGrid .float_option .view_btn .btn_wish.hit:before {background:transparent url('../images/item_wish_on.svg') center center / 20px no-repeat;} .ViewGrid .float_option .view_btn.type_item_charge .btn {font-size:16px; background:var(--color-primary); color:#fff; border:1px solid var(--color-primary);} .ViewGrid .float_option .view_btn.type_item_charge .btn.btn_black {background:#111; color:#fff !important; border-color:#111;} .ViewGrid .float_option .view_btn.type_item_charge .btn.btn_line {color:var(--color-primary) !important; background:#fff;} .ViewGrid .float_option .view_btn.type_item_charge .btn.btn_soldout {background:#ccc; border-color:#ccc; pointer-events:none;} .ViewGrid .float_option .view_btn.type_item_charge .bubble {position:absolute; left:50%; top:-17px; font-size:10px; height:26px; display:flex; justify-content:center; align-items:center; flex-direction:column; z-index:3; padding:0 10px; border-radius:100px; color:#fff; padding-left:28px; background:#4285F4 url('../images/main_renew/gift24_logo.svg') 8px center no-repeat; background-size:14px; white-space:nowrap; transform:translateX(-72px);} .ViewGrid .float_option .view_btn.type_item_charge .bubble:after {content:""; width:15px; height:15px; background:transparent url('../images/main_renew/bubble_edge.svg') center center no-repeat; position:absolute; left:12px; bottom:-10px; filter:invert(70%) sepia(78%) saturate(5931%) hue-rotate(201deg) brightness(100%) contrast(92%); background-size:13px;} .ViewGrid .phone_box {} .ViewGrid .phone_box .phone_number {border-radius:10px; background:#fff; display:flex; justify-content:center; align-items:center; flex-direction:row; border:1px solid #eee; overflow:hidden;} .ViewGrid .phone_box .phone_number li.this_dash {position:relative; width:20px; display:flex; justify-content:center; align-items:center; flex-direction:column;} .ViewGrid .phone_box .phone_number li.this_dash:before {content:""; width:8px; height:1px; background:#999; display:inline-block;} .ViewGrid .phone_box input.design {color:#000; text-align:center; font-size:15px; height:46px; width:100%; background:#fff;} .ViewGrid .pay_list {} .ViewGrid .pay_list .first {width:max-content; padding:15px;} .ViewGrid .pay_list .first {display:flex; justify-content:flex-start; align-items:stretch; flex-direction:row; flex-wrap:wrap; box-sizing:border-box; gap:10px} .ViewGrid .pay_list .first li {box-sizing:border-box; width:115px;} .ViewGrid .pay_list label.pay {overflow:hidden; position:relative; height:100%; width:auto; margin:0px; display:block; display:flex; justify-content:flex-start; align-items:stretch; flex-direction:column;} .ViewGrid .pay_list label.pay input {display:none;} .ViewGrid .pay_list label.pay .tx {box-sizing:border-box; border-radius:10px; border:1px solid #f2f2f2; overflow:hidden; display:flex; justify-content:center; align-items:center; flex-direction:column; color:#000;} .ViewGrid .pay_list label.pay .tx {padding-bottom:25px; flex:1} .ViewGrid .pay_list label.pay .picto {font-size:0px; padding:10px; padding-bottom:0px;} .ViewGrid .pay_list label.pay .picto img {width:100%;} .ViewGrid .pay_list label.pay .pay_type {font-size:12px; line-height:1; margin-top:6px;} .ViewGrid .pay_list label.pay .pay_name {font-size:16px; font-weight:600; color:#000;} .ViewGrid .pay_list label.pay input:checked+ .tx {color:#000; border:1px solid #4285F4; background:#fff;} .ViewGrid .pay_list label.pay input:disabled+ .tx:before {content:""; width:100%; height:100%; position:absolute; left:0; top:0; background:rgba(0,0,0,0.1); border-radius:10px;} .ViewGrid .pay_list label.pay input:disabled+ .tx {opacity:0.3;} .ViewGrid .pay_list .scroll_wrap {overflow-y:auto;} .ViewGrid .pay_list .scroll_wrap::-webkit-scrollbar {height:6px; display:none;} .ViewGrid .pay_list .scroll_wrap::-webkit-scrollbar-thumb { background-color:#ccc; border-radius:100px;} .ViewGrid .pay_list .scroll_wrap::-webkit-scrollbar-track {background-color:#fff;} html.if_pcmode .ViewGrid .pay_list .scroll_wrap::-webkit-scrollbar {display:block;} .ViewGrid .pay_list .next {display:flex; justify-content:flex-start; align-items:flex-start; flex-direction:row; flex-wrap:wrap; box-sizing:border-box;} .ViewGrid .pay_list .next li {width:33.3333%; box-sizing:border-box; margin-top:15px;} .ViewGrid .pay_list .next label {overflow:hidden; position:relative; height:60px; width:100%; margin:0px; display:flex; justify-content:center; align-items:center; flex-direction:column;} .ViewGrid .pay_list .next label input {position:absolute; left:0; top:0; opacity:0; filter:alpha(opacity=0); -ms-filter:alpha(opacity=0);} .ViewGrid .pay_list .next label .tx {border:1px solid #f2f2f2;} .ViewGrid .pay_list .next label input:checked+ .tx {color:#4285F4;} .ViewGrid .pay_list .next label .ic {order:1; display:flex; justify-content:center; align-items:center; flex-direction:column;} .ViewGrid .pay_list .next label .ic img {height:35px;} .ViewGrid .pay_list .next.type_online {gap:10px;} .ViewGrid .pay_list .next.type_online li:first-of-type {flex:1} .ViewGrid .pay_list .next.type_online li:last-of-type {width:120px;} .ViewGrid .pay_list .next.type_online .input_design {border-radius:5px; border:1px solid #f2f2f2; height:40px; box-sizing:border-box; width:100%; padding:0 10px;} .ViewGrid .pay_list .next.type_online .input_design:focus {border-color:#333;} .ViewGrid .pay_list .next.type_virtual {/* flex-direction:column; align-items:stretch; margin-top:15px; */} .ViewGrid .pay_list .next.type_virtual dl {display:flex; justify-content:space-between; align-items:center; flex-direction:row} .ViewGrid .pay_list .next.type_virtual dl+ dl {border-top:1px dashed #f0f0f0; margin-top:5px; padding-top:5px;} .ViewGrid .pay_list .next.type_virtual dt img {height:30px;} .ViewGrid .pay_list .next.type_virtual dd {font-weight:500; color:#d1d6dd; font-size:16px; display:flex; justify-content:center; align-items:center; flex-direction:row} .ViewGrid .pay_list .next.type_virtual .btn_issue {border-radius:5px; height:31px; color:#fff; background:#afb7c2; font-size:12px; font-weight:500; margin-left:10px; padding:0 10px;} .ViewGrid .pay_list .next.type_virtual .btn_issue {display:flex; justify-content:center; align-items:center; flex-direction:column;} .ViewGrid .pay_list .next.type_virtual .btn_issue.after {display:none; background:#222} .ViewGrid .pay_list .next.type_virtual .if_selected dd {color:#000;} .ViewGrid .pay_list .next.type_virtual .if_selected .btn_issue.after {display:flex} .ViewGrid .pay_list .next.type_virtual .if_selected .btn_issue.before {display:none} .ViewGrid .charge_per {margin-left:auto; position:relative; margin-right:15px;} .ViewGrid .charge_per .selected {color:var(--color-pink); font-size:14px; font-weight:500; display:flex; justify-content:center; align-items:center; flex-direction:row; gap:4px; cursor:pointer; height:35px;} .ViewGrid .charge_per .selected:after {content:""; width:0; height:0; border-left:6px solid transparent; border-right:6px solid transparent; border-top:8px solid var(--color-pink);} .ViewGrid .charge_per .selected:after {transition:all 0.3s ease-out; -webkit-transition:all 0.3s ease-out;} .ViewGrid .charge_per .option_list {position:absolute; right:-10px; top:35px; background:#fff; border-radius:10px; padding:0 10px; box-sizing:border-box; width:150px; box-shadow:0 0 10px rgba(0,0,0,0.15);} .ViewGrid .charge_per .option_list {transition:all 600ms cubic-bezier(0.19, 1, 0.22, 1); visibility:hidden; opacity:0; transform:translateY(-20px);} .ViewGrid .charge_per .option_list .option {display:block; display:flex; justify-content:center; align-items:center; flex-direction:column; height:36px; box-sizing:border-box; color:var(--color-pink); font-size:14px; font-weight:500;} .ViewGrid .charge_per .option_list .option+ .option {border-top:1px solid #eee;} .ViewGrid .charge_per.if_open_option .option_list {visibility:visible; opacity:1; transform:translateY(0);} .ViewGrid .charge_per.if_open_option .selected:after {transform:rotate(180deg); -webkit-transform:rotate(180deg);} .ViewGrid .gift24_point {padding:15px; padding-top:0px;} .ViewGrid .gift24_point .check_barbode {display:flex; justify-content:flex-start; align-items:stretch; flex-direction:row; gap:10px; height:55px;} .ViewGrid .gift24_point .find {flex:1; border:1px solid #f2f2f2; border-radius:10px; font-size:17px; font-weight:500; padding:0 15px; box-sizing:border-box; width:100%; color:var(--color-point);} .ViewGrid .gift24_point .find:focus {border-color:var(--color-blueblack);} .ViewGrid .gift24_point div.find {display:flex; justify-content:flex-end; align-items:center; flex-direction:row; font-size:19px; letter-spacing:-0.5px;} .ViewGrid .gift24_point div.find strong {font-weight:800;} .ViewGrid .gift24_point .btn_find {background:var(--color-blueblack); color:#fff; font-size:16px; flex:none; display:flex; justify-content:center; align-items:center; flex-direction:column; border-radius:10px; font-weight:500;} .ViewGrid .gift24_point .btn_find {padding:0 15px; box-sizing:border-box;} .ViewGrid .gift24_point .benefit_comment {margin-top:15px; font-size:16px; color:#000; font-weight:500;} .ViewGrid .gift24_point .benefit_comment em {color:var(--color-point);} .ViewGrid .gift24_point .benefit_comment strong {font-weight:700;} .ViewGrid .vol_list {} .ViewGrid .vol_list dl {display:flex; justify-content:flex-start; align-items:flex-end; flex-direction:row; padding:15px;} .ViewGrid .vol_list dl+ dl {border-top:1px solid #f5f5f5;} .ViewGrid .vol_list dt {flex:1; display:flex; justify-content:flex-start; align-items:center; flex-direction:row; flex-wrap:wrap} .ViewGrid .vol_list dd {text-align:right; font-weight:500; color:#c2c2c2; font-size:15px; white-space:nowrap; padding-left:10px; height:30px; display:flex; justify-content:center; align-items:center; flex-direction:column;} .ViewGrid .vol_list .opt_name {width:100%; color:#c2c2c2; font-size:13px; font-weight:500; margin-bottom:10px;} .ViewGrid .view_conts {margin-top:48px;} .ViewGrid .view_conts .title_onoff {display:flex; justify-content:space-between; align-items:center; flex-direction:row; gap:5px 20px; flex-wrap:wrap} .ViewGrid .view_conts .title_onoff strong {flex:none; font-size:24px; font-weight:700; color:#191F28; white-space:none;} .ViewGrid .view_conts .title_onoff .right {color:#999; font-size:16px;} .ViewGrid .view_conts .view_detail {background:#fff; padding:36px; box-sizing:border-box; border-radius:18px; overflow: hidden; margin-top:24px; box-shadow:0px 8px 20px rgba(25,31,40,0.04); } .ViewGrid .view_banner {margin-top:48px;} .ViewGrid .view_banner img {display:block; max-width:100%;} .ViewGrid .ralative_item {margin-top:48px;} .ViewGrid .ralative_item .title {display:flex; justify-content:flex-start; align-items:center; flex-direction:row; color:#191F28; font-size:24px; font-weight:700; margin-bottom:24px;} .ViewGrid .account_auth_conts {} .ViewGrid .auth_guide {background:#f9f9f9; border:1px solid #f2f2f2; border-radius:10px; padding:12px 15px; box-sizing:border-box;} .ViewGrid .auth_guide p {font-size:13px; color:#666; letter-spacing:-0.5px; line-height:1.5; word-wrap:break-word; word-break:keep-all; white-space:normal;} .ViewGrid .auth_form_list {margin-top:10px; display:flex; justify-content:center; align-items:center; flex-direction:row; gap:5px} .ViewGrid .auth_form_list .select {height:45px; background-color:#f2f2f2; border-radius:10px;} .ViewGrid .auth_form_list .select:before {display:none;} .ViewGrid .auth_form_list .select select.design {border:0 !important; font-size:15px; padding:0 15px; height:45px; width:100%; color:#000; border-radius:10px;} .ViewGrid .auth_form_list input.design {color:#000; font-size:15px; height:45px; width:100%; padding:0 15px; box-sizing:border-box; border:0; background:transparent; flex:1; border:1px solid #f2f2f2; border-radius:10px;} .ViewGrid .auth_form_list input.design::placeholder {color:#ccc;} .ViewGrid .auth_form_list input.design:focus {outline:none;} .ViewGrid .auth_form_list .btn_auth {height:45px; flex:none; background:var(--color-blueblack); color:#fff; border-radius:10px; display:flex; justify-content:center; align-items:center; flex-direction:column; font-size:15px; padding:0 15px;} .ViewGrid .auth_form_list .btn_auth.type_complite {background:var(--color-pink);} .ViewGrid .badge_done {display:inline-flex; justify-content:center; align-items:center; padding:6px 12px; background:color-mix(in srgb, var(--color-pink) 10%, var(--color-pink) 0%); border-radius:100px; font-size:12px; font-weight:600; color:#4c5a66; letter-spacing:-0.5px; line-height:1; color:var(--color-pink);} .ViewGrid .auth_useb_kyc_wrap{position:fixed;left:0;top:0;right:0;bottom:0;z-index:99999;background:#fff;} .ViewGrid .auth_useb_kyc_wrap iframe{width:100%;height:100%;border:0;display:block;} .ViewGrid .account_auth_conts .auth_guide {flex:1;} .ViewGrid .account_auth_conts .btn_auth {height:45px; flex:none; background:#4285F4; color:#fff; border-radius:10px; display:flex; justify-content:center; align-items:center; flex-direction:column; font-size:15px; padding:0 15px; white-space:nowrap; font-weight:600;} .ViewGrid .face_auth_request_view .btn_auth.if_complete {background:#B2BBC4; font-weight:500;} .ViewGrid .if_account_auth_done .btn_auth {background:#B2BBC4} .ViewGrid .face_auth_tip {margin-bottom:15px;} .ViewGrid .face_auth_tip dt {font-size:14px; border-bottom:1px solid #f3f3f3; margin-bottom:15px; padding-bottom:15px; word-wrap:break-word; word-break:keep-all; white-space:normal; font-weight:500; line-height:1.4; color:#444;} .ViewGrid .face_auth_tip dt strong {font-weight:700; word-wrap:break-word; word-break:keep-all; white-space:normal;} .ViewGrid .face_auth_tip dd {display:flex; justify-content:flex-start; align-items:flex-start; flex-direction:row; color:#666; font-size:13px; line-height:1.4; word-wrap:break-word; word-break:keep-all; white-space:normal; display:none;} .ViewGrid .face_auth_tip dd+ dd {margin-top:5px;} .ViewGrid .face_auth_tip dd::before {content:'•'; font-size:12px; color:#ccc; margin-right:5px;} .ViewGrid .account_auth_box .btn_fold {width:30px; aspect-ratio:1/1; display:flex; justify-content:center; align-items:center; flex-direction:column;} .ViewGrid .account_auth_box .btn_fold:before {content:""; width:10px; aspect-ratio:1/1; box-sizing:border-box; border:1.5px solid #ccc; transform:rotate(45deg); border-top:0; border-left:0; transition:all 0.3s ease-out;} .ViewGrid .account_auth_box.if_open .face_auth_tip dd {display:flex;} .ViewGrid .account_auth_box.if_open .btn_fold:before {transform:rotate(225deg);} @media (hover:hover) and (pointer:fine) { .ViewGrid .view_counter a:hover {background:#eee;} } @media (max-width:900px) { .ViewGrid {margin-top:20px;} .ViewGrid .Container {grid-template-columns:1fr; margin-top:24px;} .ViewGrid .Aside {position:static} .ViewGrid .grid_inner {padding:20px;} .ViewGrid .thumb img {max-width:220px;} .ViewGrid .view_name .view_tit .title {font-size:24px} .ViewGrid .view_name .price .after {font-size:28px;} .ViewGrid .view_name .sub_name {font-size:14px;} .ViewGrid .view_name .price {font-size:28px;} .ViewGrid .pay_group ul.this_pay_group {grid-template-columns:repeat(2, 1fr);} .ViewGrid .inner_box {padding:16px;} .ViewGrid .group_tit {font-size:16px;} .ViewGrid .total_box {padding:16px;} .ViewGrid .total_box .price_cal dl {font-size:14px;} .ViewGrid .total_box .price_cal dl.last {font-size:16px;} .ViewGrid .view_conts .title_onoff .right {font-size:14px;} .ViewGrid .view_conts .view_detail {padding:16px;} .ViewGrid .float_option {position:fixed; left:0; bottom:0; width:100%; z-index:100; background:#fff; padding:16px; border-top:1px solid #eee;} .ViewGrid .ralative_item .ItemList li:nth-of-type(5) {display:none;} } @media (max-width:400px) { .ViewGrid .pay_group ul.this_pay_group {grid-template-columns:repeat(1, 1fr);} } /* 상품상세안의 에디터 틀 */ .rvi_edit {} .rvi_edit .box_top {text-align:center} .rvi_edit .d_tit {font-size:26px; color:#000; font-weight:500; letter-spacing:-1px; line-height:1;} .rvi_edit .box_cst {padding:30px 0;} .rvi_edit .tab_box {margin-top:30px; padding:0 15px; box-sizing:border-box; font-size:0;} .rvi_edit .tab_box ul {overflow:hidden; display:inline-block; width:100%; max-width:350px; border-radius:3px; box-sizing:border-box; padding:0;} .rvi_edit .tab_box li {list-style:none; display:inline-block; float:left; width:33.3334%; padding:0; text-align:center; position:relative;} .rvi_edit .tab_box li+ li:before {content:''; position:absolute; left:0; top:0; width:1px; height:100%; background:#fff; z-index:1;} .rvi_edit .tab_box .btn {width:100%; background:#edeff3; font-size:15px; color:rgba(71, 71, 81, 0.6); letter-spacing:-0.8px; height:40px; line-height:40px;} .rvi_edit .tab_box .btn.hit {color:#fff; font-weight:500; background:#4285f4;} .rvi_edit .tab_cont {margin-top:30px;} .rvi_edit .tab_cont .t_cont {font-size:0; max-width:none !important;} .rvi_edit .tab_cont .tx {font-size:15px; color:#333; letter-spacing:-0.8px; line-height:1.4;} .rvi_edit .tab_cont .img {margin-top:30px;} .rvi_edit .box_bt {border-top:8px solid #efefef; max-width:none !important; box-sizing:border-box; } .rvi_edit .box_bt dl+ dl{margin-top:35px;} .rvi_edit .box_bt dt {border-bottom:1px solid #f2f2f2; position:relative; display:flex; justify-content:space-between; align-items:flex-start; flex-direction:row; } .rvi_edit .box_bt dt .tit {display:inline-block; font-size:17px; color:#000; font-weight:500; letter-spacing:-1px; line-height:1; position:relative; padding-bottom:15px; } .rvi_edit .box_bt dt .tit:before {content:''; position:absolute; left:0; bottom:-1px; width:100%; height:1px; background:#000;} .rvi_edit .box_bt dd {margin-top:10px; position:relative; overflow:hidden;} .rvi_edit .box_bt dd:before {content:''; position:absolute; left:10px; top:6px; width:4px; height:4px;} .rvi_edit .box_bt dd:before {background:#ccc; border:1px solid #ccc; border-radius:50%; box-sizing:border-box;} .rvi_edit .box_bt dd .tx {font-size:12px; color:#8c8c93; letter-spacing:-1px; line-height:1.5; word-wrap:break-word; word-break:keep-all; white-space:normal;} .rvi_edit .box_bt dd .tx {margin-left:10px; padding-left:10px; padding-right:10px; box-sizing:border-box;} .rvi_edit .box_bt .if_over dd {overflow:hidden;} .rvi_edit .box_bt .if_over dd .tx {display:block; display:-webkit-box; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp:5; -webkit-box-orient:vertical; line-height:1.5;} .rvi_edit .box_bt .view_btn {background:#efefef; border:1px solid #efefef; border-radius:50px; box-sizing:border-box; text-align:center;} .rvi_edit .box_bt .view_btn {padding:0 10px; height:25px;} .rvi_edit .box_bt .view_btn .tt {font-size:11px; color:#888; letter-spacing:-1px; height:25px; line-height:25px; padding-right:11px;} .rvi_edit .box_bt .view_btn .tt {background:transparent url('../images/todaypin/edit_open_ic.png') right center no-repeat; background-size:8px auto !important;} .rvi_edit .box_bt dl.if_open_edit_view1 .tx {-webkit-line-clamp:100;} .rvi_edit .box_bt dl.if_open_edit_view2 .tx {-webkit-line-clamp:100;} .rvi_edit .box_bt dl.if_open_edit_view1 .tt {background-image:url('../images/todaypin/edit_close_ic.png');} .rvi_edit .box_bt dl.if_open_edit_view2 .tt {background-image:url('../images/todaypin/edit_close_ic.png');} .rvi_edit.if_e_coupon {} .rvi_edit.if_e_coupon .d_tit {font-size:19px;} .rvi_edit.if_e_coupon .box_bt {border:0;} .rvi_edit.if_pluscard .box_bt {border:0;} /* 상품상세 위로가기/공유버튼 ========================================= */ .p_View_fly {position:fixed; right:15px; bottom:20px; display:flex; justify-content:center; align-items:center; flex-direction:column; gap:10px; transition:all 0.3s ease-out; -webkit-transition:all 0.3s ease-out;} .p_View_fly .btn {border-radius:100px; box-sizing:border-box; border:0.8px solid #b2bbc4; width:45px; height:45px; display:flex !important; justify-content:center; align-items:center; flex-direction:column;} .p_View_fly .btn {transition:all 0.3s ease-out; -webkit-transition:all 0.3s ease-out; background:#fff; opacity:1 !important;} .p_View_fly .btn.btn_gotop {transform:scale(0); -webkit-transform:scale(0);} .p_View_fly .btn img {height:18px;} @media (max-width:900px) { .p_View_fly {bottom:95px} } /* 상품상세 공유하기 레이어 ========================================= */ .p_LayerContent {position:fixed; left:0; top:0; width:100%; height:100%; z-index:1001; visibility:hidden; box-sizing:border-box; display:flex; justify-content:center; align-items:center; flex-direction:column; transition:all 0.3s ease-out; padding:20px;} .p_LayerContent .wrapping {background:#fff; border-radius:25px; z-index:2; box-sizing:border-box; box-sizing:border-box; transform:translateY(100%);transition:all 900ms cubic-bezier(0.19, 1, 0.22, 1); max-height:100%; display:flex; justify-content:flex-start; align-items:stretch; flex-direction:column; width:100%; max-width:320px; opacity:0; } .p_LayerContent .bg_close {position:absolute; left:0; top:0; width:100%; height:100%; z-index:1; background:rgba(0,0,0,0.65); transition:all 0.3s ease-out; opacity:0; pointer-events:none;} .p_LayerContent .layer_title {margin-bottom:15px; display:flex; justify-content:flex-start; align-items:center; flex-direction:row; height:60px; border-bottom:1px solid #eee; padding:0 20px;} .p_LayerContent .layer_title strong {color:#000; font-size:17px; font-weight:600; flex:1} .p_LayerContent .layer_title .btn_close {box-sizing:border-box; padding:10px;} .p_LayerContent .layer_title .btn_close:before {content:""; background:transparent url('../images/main_renew/top_ic_close.svg') center center no-repeat; background-size:12px; width:12px; height:12px; display:block;} .p_LayerContent .comment {text-align:center; color:#000; font-weight:600; font-size:16px; display:flex; justify-content:center; align-items:center; flex-direction:column; margin:10px 0;} .p_LayerContent .bar_close {display:flex; justify-content:center; align-items:center; flex-direction:column; padding:20px 0;} .p_LayerContent .bar_close:before {content:""; background:#e7e7e7; width:40px; height:4px; border-radius:100px;} .p_LayerContent .share_list {display:flex; justify-content:center; align-items:center; flex-direction:row; gap:20px; padding:30px;} .p_LayerContent .share_list li.this_sms {display:none;} .p_LayerContent .share_list .btn_share {color:#000; font-size:13px; font-weight:500; padding:0 10px; padding-top:55px; background-size:45px !important; background-position:center top !important; background-repeat:no-repeat;} .p_LayerContent .share_list .btn_share.btn_kakao {background-image:url('../images/main_renew/view_share_kakao.svg');} .p_LayerContent .share_list .btn_share.btn_url {background-image:url('../images/main_renew/view_share_url.png');} .p_LayerContent .share_list .btn_share.btn_sms {background-image:url('../images/main_renew/view_share_sms.svg');} .p_LayerContent .option_list {display:flex; justify-content:stretch; align-items:stretch; flex-direction:column; padding:10px 0 30px; flex:1; overflow-y:auto} .p_LayerContent .option_list .btn_option {text-align:center; display:block; color:#000; font-size:15px; font-weight:500; padding:12px 10px;} .p_LayerContent.if_open {visibility:visible;} .p_LayerContent.if_open .wrapping {transform:translateY(0px); opacity:1;} .p_LayerContent.if_open .bg_close {opacity:1; pointer-events:initial} @media (max-width:900px) { .p_LayerContent .share_list li.this_sms {display:block;} } /* 카드사할부안내 레이어 ========================================= */ .p_Card_plan {position:fixed; right:0; top:0; width:100%; height:100%; background:#fff; display:flex; justify-content:stretch; align-items:stretch; flex-direction:column; z-index:1000; transition:var(--mv-cubic); transform:translateX(100%);} .p_Card_plan .layer_title {position:relative; flex:none; text-align:center; padding:15px 20px; border-bottom:8px solid #eaedf2;} .p_Card_plan .layer_title * {color:#000; font-size:17px; font-weight:500;} .p_Card_plan .layer_title dd {margin-top:5px;} .p_Card_plan .layer_title .btn_close {width:30px; height:30px; position:absolute; right:10px; top:10px; background:transparent url('../images/main_renew/top_ic_close.svg') center center no-repeat; background-size:15px;} .p_Card_plan .plan_list {flex:1; overflow-y:auto;} .p_Card_plan .plan_list dl {padding:20px 15px; display:flex; justify-content:center; align-items:center; flex-direction:row;} .p_Card_plan .plan_list dl+ dl {border-top:1px solid #e0e4e7; } .p_Card_plan .plan_list dt {flex:none; width:130px; color:#000; font-size:16px; font-weight:600; display:flex; justify-content:center; align-items:center; flex-direction:column; gap:5px; text-align:center;} .p_Card_plan .plan_list dt img {height:26px;} .p_Card_plan .plan_list dd {flex:1; color:#000; font-size:13px; line-height:1.4; margin-left:10px;} html.if_open_card_plan {overflow:hidden;} html.if_open_card_plan .p_Card_plan {transform:translateX(0);} html.if_pcmode .p_Card_plan {max-width:400px;} html.if_pcmode.if_open_card_plan .p_Card_plan {box-shadow:-10px 0px 10px rgba(0,0,0,0.1);} /* 수기결제 ========================================= */ html.if_full_page {overflow:hidden;} html.if_full_page body {height:100%; overflow:hidden;} html.if_full_page .wrap {overflow:hidden;} .add_card_monthly {display:flex; justify-content:center; align-items:flex-end; flex-direction:column;} .add_card_monthly .btn_more_view {color:var(--color-pink); font-size:13px; font-weight:500; display:flex; justify-content:center; align-items:center; flex-direction:row; gap:3px; letter-spacing:-0.5px; padding:15px 0;} .add_card_monthly .btn_more_view:after {content:"";width:8px; height:10px; background:transparent url('../images/main_renew/pay_arrow_right.svg') center center no-repeat; background-size:6px; } .add_card_monthly .btn_more_view:after {filter:invert(70%) sepia(86%) saturate(2792%) hue-rotate(278deg) brightness(101%) contrast(96%);} .p_HandleOrder {display:flex; justify-content:stretch; align-items:stretch; flex-direction:column; height:100%;} .p_HandleOrder li {list-style:none;} .p_HandleOrder .form_area {flex:1; overflow-y:auto; padding:30px;} .p_HandleOrder .element_list ul {margin-top:60px;} .p_HandleOrder .element_list li {display:flex; justify-content:center; align-items:center; flex-direction:row; gap:15px} .p_HandleOrder .element_list li+ li {margin-top:15px; } .p_HandleOrder .input_design {width:100%; height:50px; padding:0px; font-size:17px; font-weight:600; color:#000;} .p_HandleOrder .input_design::-webkit-input-placeholder {color:#e7e7e7 !important} .p_HandleOrder .input_design:-ms-input-placeholder {color:#e7e7e7 !important} .p_HandleOrder .input_design:focus+ .line:before {transform:scale(1,1); -webkit-transform:scale(1,1); } .p_HandleOrder li.this_card_num .input_design {text-align:center;} .p_HandleOrder li.this_card_num .input_wrap .line:before {transform-origin:center} .p_HandleOrder .input_wrap {position:relative; flex:1; } .p_HandleOrder .input_wrap .line {width:100%; height:5px; display:block; background:#e7e7e7; position:absolute; left:0; bottom:0; border-radius:100px; position:relative; overflow:hidden;} .p_HandleOrder .input_wrap .line:before {content:""; width:100%; height:100%; background:var(--color-blueblack); position:absolute; left:0; top:0; border-radius:100px;} .p_HandleOrder .input_wrap .line:before {transform:scale(0,1); -webkit-transform:scale(0,1); transition:all 0.3s ease-out; -webkit-transition:all 0.3s ease-out; transform-origin:left center} .p_HandleOrder .select_plan {display:flex; justify-content:flex-star; align-items:center; flex-direction:row; color:#e7e7e7; font-size:17px; height:50px; font-weight:600;} .p_HandleOrder .select_plan:after {content:""; background:transparent url('../images/main_renew/arrow_down.svg') center center no-repeat; width:20px; height:15px; background-size:15px ;} .p_HandleOrder .select_plan:after {margin-left:auto; opacity:0.1;} .p_HandleOrder .select_plan.if_selected {color:#000;} .p_HandleOrder .comment {color:#000; font-size:22px; font-weight:700; line-height:1.45;} .p_HandleOrder .bottom_area {background:#fff; padding:15px 20px; flex:none} .p_HandleOrder .bottom_area .btn_pay {display:flex; justify-content:center; align-items:center; flex-direction:column; background:var(--color-blueblack); color:#fff; height:55px; border-radius:15px;} .p_HandleOrder .bottom_area .btn_pay {font-size:17px; font-weight:600;} /* 휴대폰결제 자동채움 레이어폼 ========================================= */ .p_LayerFull {position:fixed; right:0; bottom:0; width:100%; height:100%; z-index:101; display:flex; justify-content:flex-end; align-items:flex-end; flex-direction:column; visibility:hidden} .p_LayerFull .wrapping {background:#fff; position:relative; z-index:2; width:100%; height:100%; max-width:500px; display:flex; justify-content:center; align-items:stretch; flex-direction:column; transform:translateX(100%); transition:all 900ms cubic-bezier(0.19, 1, 0.22, 1); box-sizing:border-box; padding:0 24px;} .p_LayerFull .bg_close {background:rgba(0,0,0,0.6); position:absolute; left:0; top:0; width:100%; height:100%; z-index:1; opacity:0; transition:all 0.3s ease-out; pointer-events:none;} .p_LayerFull .top_area {position:relative; text-align:center; color:#000; font-size:21px; font-weight:700; height:70px; display:flex; justify-content:center; align-items:flex-start; flex-direction:column; flex:none;} .p_LayerFull .top_area .btn_back {width:50px; height:50px; position:absolute; right:0; background:transparent url('../images/icon_close.svg') center center / 20px no-repeat;} .p_LayerFull .bottom_area {flex:none; padding-bottom:24px;} .p_LayerFull .bottom_area .btn_payment {background:var(--color-pink); gap:3px; display:flex; justify-content:center; align-items:center; flex-direction:column; height:48px; color:#fff; font-size:16px; font-weight:600; border-radius:8px;} .p_LayerFull .bottom_area .float_option {position:static; width:initial; margin-left:0px;} .p_LayerFull .bottom_area .float_option .view_btn {padding:0px;} .p_LayerFull .content {margin-top:0px; flex:1; overflow-y:auto; background:#fff; border:0; box-sizing:border-box;} .p_LayerFull .content::-webkit-scrollbar {width:6px;} .p_LayerFull .content::-webkit-scrollbar-thumb { background-color:#333; border-radius:100px;} .p_LayerFull .content::-webkit-scrollbar-track {background-color:#333; border-radius:100px;} .p_LayerFull .pay_group {margin-top:10px; border-radius:0px;} .p_LayerFull .pay_group .per_title {display:flex; justify-content:flex-start; align-items:center; flex-direction:row; gap:5px; color:#000; font-size:15px; font-weight:600; flex:1; position:relative; z-index:2} .p_LayerFull .pay_group .per_title {padding-left:40px; pointer-events:none;} .p_LayerFull .pay_group .per_title .logo {display:none;} .p_LayerFull .pay_group ul.this_pay_group {margin:0px; background:#fff; display:grid; grid-template-columns:repeat(2, 1fr); border-radius:0px; border:0; margin-top:10px; gap:10px 0;} .p_LayerFull .pay_group ul.this_pay_group li {border-radius:0 10px 10px 0; position:relative; height:45px;} .p_LayerFull .pay_group label.pay {position:absolute; left:-100%; top:0; width:200%; z-index:1} .p_LayerFull .pay_group label.pay .tx {background:#f5f5f5; align-items:flex-end; padding-right:20px;} .p_LayerFull .pay_group label.pay .tx:before {content:""; width:20px; height:20px; z-index:2; position:absolute; left:12px; top:50%; transform:translateY(-50%); opacity:0.25;} .p_LayerFull .pay_group label.pay .tx:before {background:transparent url('../images/layer_order_check.svg') center center / 12px no-repeat; } .p_LayerFull .pay_group label.pay input:checked+ .tx:before {opacity:1; filter:invert(40%) sepia(94%) saturate(1854%) hue-rotate(352deg) brightness(101%) contrast(102%);} .p_LayerFull .bottom_area .area_box {border:0; margin-top:0px;} .p_LayerFull .bottom_area .price_cal {padding-bottom:30px;} .p_LayerFull .area_box {margin-top:0px;} .p_LayerFull.if_open {visibility:visible} .p_LayerFull.if_open .bg_close {opacity:1; pointer-events:initial} .p_LayerFull.if_open .wrapping {transform:translateX(0);} .add_LayerPay {position:fixed; right:0; top:0; width:100%; height:100%; display:flex; justify-content:center; align-items:center; flex-direction:column; box-sizing:border-box; padding:15px; z-index:999; visibility:hidden; transition:all 700ms cubic-bezier(0.19, 1, 0.22, 1);} .add_LayerPay .wrapping {background:#fff; z-index:2; position:relative; border-radius:10px; overflow:hidden; box-sizing:border-box; width:100%; height:100%; max-width:100%; max-height:100%; overflow:hidden; display:flex; justify-content:stretch; align-items:stretch; flex-direction:column; opacity:0; transition:all 700ms cubic-bezier(0.19, 1, 0.22, 1); transform:translateY(100%);} .add_LayerPay .content {padding:15px; max-height:100%; overflow-y:auto; box-sizing:border-box; flex:1} .add_LayerPay .content::-webkit-scrollbar {width:8px;} .add_LayerPay .content::-webkit-scrollbar-thumb {background-color:#333; border-radius:100px;} .add_LayerPay .content::-webkit-scrollbar-track {background-color:#fff;} .add_LayerPay .content iframe {width:100%; height:99%; border:0; box-sizing:border-box;} .add_LayerPay .bg_close {position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.6); z-index:1; opacity:0; transition:all 0.2s ease-out; -webkit-transition:all 0.2s ease-out; pointer-events:none;} .add_LayerPay.if_open {visibility:visible; transform:translateY(0);} .add_LayerPay.if_open .bg_close {opacity:1; pointer-events:initial} .add_LayerPay.if_open .wrapping {opacity:1; transform:translateY(0);} /* 마이페이지 ================================================================= */ .PageUser {} .PageUser .user_type {display:flex; flex-direction:column; gap:24px;} .PageUser .user_type .type_head {display:flex; flex-direction:column; align-items:center; gap:8px;} .PageUser .user_type .type_head .icon {width:48px; height:48px; background:url('../images/auth_check.svg') center center / 48px no-repeat;} .PageUser .user_type .type_head .name {font-size:24px; font-weight:600; color:#111;} .PageUser .user_type .btn_modify {display:flex; align-items:center; justify-content:center; height:48px; border:1px solid #eee; border-radius:8px; font-size:16px; font-weight:500; color:#111; box-sizing:border-box;} .PageUser .quick_link {display:grid; grid-template-columns:repeat(3, 1fr); gap:20px;} .PageUser .quick_link .one_link {display:flex; flex-direction:column; gap:8px; padding:16px; border:1px solid #eee; border-radius:8px; background:#fff; box-sizing:border-box;} .PageUser .quick_link .one_link .icon {width:24px; height:24px; background-position:center center; background-repeat:no-repeat; background-size:24px;} .PageUser .quick_link .one_link .icon.type_order {background-image:url('../images/mypage_ic_order.svg');} .PageUser .quick_link .one_link .icon.type_auth {background-image:url('../images/mypage_ic_auth.svg');} .PageUser .quick_link .one_link .icon.type_wish {background-image:url('../images/mypage_ic_wish.svg');} .PageUser .quick_link .one_link .link_copy {display:flex; flex-direction:column; gap:8px;} .PageUser .quick_link .one_link .title {font-size:18px; font-weight:600; color:#111;} .PageUser .quick_link .one_link .desc {font-size:14px; font-weight:400; line-height:1.4; color:#999;} .PageUser .order_state {display:grid; grid-template-columns:repeat(4, 1fr); gap:20px;} .PageUser .order_state .one_state {padding:24px; border-radius:16px; background:#fff; box-shadow:0 8px 20px rgba(25,31,40,0.04); box-sizing:border-box; display:flex; align-items:flex-start; gap:16px;} .PageUser .order_state .picto {flex:none; display:flex; align-items:center; justify-content:center; width:40px; height:40px; border:1px solid #FFD7B4; border-radius:8px; background:#FFF9F4; box-sizing:border-box;} .PageUser .order_state .picto .icon {width:24px; height:24px; background-position:center center; background-repeat:no-repeat; background-size:24px;} .PageUser .order_state .picto .icon.type_order1 {background-image:url('../images/mypage_order1.svg');} .PageUser .order_state .picto .icon.type_order2 {background-image:url('../images/mypage_order2.svg');} .PageUser .order_state .picto .icon.type_order3 {background-image:url('../images/mypage_order3.svg');} .PageUser .order_state .picto .icon.type_order4 {background-image:url('../images/mypage_order4.svg');} .PageUser .order_state .copy {flex:1; display:flex; flex-direction:column; gap:4px;} .PageUser .order_state .count {display:flex; flex-direction:column;} .PageUser .order_state .tit {font-size:16px; font-weight:600; color:#111;} .PageUser .order_state .num {font-size:28px; font-weight:600; color:var(--color-primary);} .PageUser .order_state .desc {font-size:14px; color:#999;} .PageUser .order_info {display:flex; flex-direction:column; gap:10px;} .PageUser .order_info dl {display:flex; flex-direction:row; gap:5px;} .PageUser .order_info dt {font-size:14px; font-weight:500; color:#999; flex:1} .PageUser .order_info dd {font-size:14px; color:#111; font-weight:600; flex:none; text-align:right} .PageUser .btn_list {display:flex; justify-content:center; align-items:center; flex-direction:column; height:48px; border-radius:8px; border:1px solid #eee; color:#111; font-size:15px; font-weight:600; margin-top:20px;} .PageUser .order_list ul {display:flex; flex-direction:column; gap:16px;} .PageUser .order_list .one_order {position:relative; display:flex; align-items:center; gap:10px; min-height:108px; padding:24px; border:1px solid #eee; border-radius:16px; background:#fff; box-sizing:border-box;} .PageUser .order_list .order_main {display:flex; align-items:center; gap:16px; flex:1;} .PageUser .order_list .order_thumb {flex:none; display:flex; align-items:center; justify-content:center; width:60px; aspect-ratio:1/1; border:1px solid #eee; border-radius:4px; background:#fff; box-sizing:border-box; overflow:hidden;} .PageUser .order_list .order_thumb img {width:100%; display:block;} .PageUser .order_list .order_info {display:flex; flex-direction:column; gap:8px; flex:1;} .PageUser .order_list .order_name {font-size:18px; font-weight:600; line-height:18px; color:#111;} .PageUser .order_list .order_meta {display:flex; align-items:center; gap:8px; font-size:14px; font-weight:500; flex-wrap:wrap;} .PageUser .order_list .meta_date {color:#999;} .PageUser .order_list .meta_num {color:#555;} .PageUser .order_list .order_pay {flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:8px;} .PageUser .order_list .pay_value {font-size:16px; font-weight:600; color:#111;} .PageUser .order_list .pay_state {font-size:16px; font-weight:600; color:var(--color-primary);} .PageUser .order_list .state_icon {position:absolute; width:1px; height:1px; overflow:hidden; opacity:0;} .PageUser .order_list .order_num {position:absolute; width:1px; height:1px; overflow:hidden; opacity:0;} .PageUser .order_list .delivery_num {margin-top:8px; padding:0 24px;} .PageUser .order_list .order_cancel {margin-top:8px; padding:0 24px;} /* 주문목록 상세 카드 */ .PageUser .order_list .one_order.type_detail {flex-direction:column; align-items:stretch; gap:0; min-height:0; padding:0; background:transparent; border:1px solid #eee; border-radius:16px; overflow: hidden;} .PageUser .order_list .order_head {display:flex; align-items:center; justify-content:space-between; gap:10px; padding:24px; background:#f5f5f5; box-sizing:border-box; } .PageUser .order_list .head_meta {display:flex; align-items:center; gap:8px; flex:1; font-weight:500; flex-wrap:wrap; font-size:16px;} .PageUser .order_list .head_meta .meta_label {color:#999;} .PageUser .order_list .head_meta .meta_value {color:#555;} .PageUser .order_list .head_state {flex:none; font-size:16px; font-weight:600; color:var(--color-primary);} .PageUser .order_list .head_state.tone_cancel {color:#999;} .PageUser .order_list .order_body {display:flex; gap:16px; padding:24px; box-sizing:border-box; align-items:flex-start; justify-content:space-between; gap:10px;} .PageUser .order_list .type_detail .order_main {align-items:flex-start; gap:16px;} .PageUser .order_list .type_detail .order_thumb {width:78px; aspect-ratio:1/1; border-radius:6px;} .PageUser .order_list .order_copy {display:flex; flex-direction:column; gap:6px; flex:1;} .PageUser .order_list .product_name {font-size:18px; color:#111; font-weight:600;} .PageUser .order_list .sub_name {color:var(--color-primary); font-weight:400; font-size:16px; font-weight:600;} .PageUser .order_list .order_copy .order_meta {display:flex; align-items:center; gap:8px; font-size:14px;} .PageUser .order_list .order_copy .meta_label {color:#999;} .PageUser .order_list .order_copy .meta_num {color:#555;} .PageUser .order_list .type_detail .order_pay {align-items:flex-end; gap:8px; font-size:16px; } .PageUser .order_list .type_detail .pay_value {font-size:20px; color:#111; font-weight:700;} .PageUser .order_list .type_detail .pay_unit {color:#999; font-weight:500;} .PageUser .order_list .type_detail .pay_way {color:#999; font-weight:500;} .PageUser .order_list .order_action {display:flex; align-items:center; justify-content:flex-end; gap:10px;} .PageUser .order_list .btn_outline {display:flex; align-items:center; justify-content:center; height:42px; padding:0 20px; border:1px solid #eee; border-radius:8px; background:#fff; font-size:15px; color:#111; box-sizing:border-box;} .PageUser .order_list .btn_primary {display:flex; align-items:center; justify-content:center; height:42px; padding:0 20px; border:0; border-radius:8px; background:var(--color-primary); font-size:15px; color:#fff; box-sizing:border-box;} .PageUser .list_more {margin-top:20px;} .PageUser .list_more .btn_more {display:flex; justify-content:center; align-items:center; flex-direction:column; height:48px; box-sizing:border-box; border:1px solid #eee; border-radius:8px; color:#111; font-size:16px; font-weight:500; background:#fff;} .PageUser .guide_list {display:flex; flex-direction:column; gap:8px;} .PageUser .guide_list .one_guide {display:flex; align-items:flex-start; gap:8px;} .PageUser .guide_list .one_guide .icon {flex:none; width:20px; height:20px; background:url('../images/auth_check.svg') center center / 20px no-repeat;} .PageUser .guide_list .one_guide .text {flex:1; font-size:15px; font-weight:400; line-height:19px; color:#999;} .PageUser .wish_list ul {display:grid; grid-template-columns:repeat(auto-fill, minmax(min(180px, 100%), 1fr)); gap:20px;} .PageUser .wish_list .ctrl {display:flex; justify-content:space-between; align-items:center; flex-direction:row; gap:10px; margin-top:10px; border-top:1px solid #eee; padding-top:10px;} .PageUser .wish_list .check {cursor:pointer; box-sizing:border-box; display:flex; justify-content:center; align-items:center; flex-direction:row; gap:3px} .PageUser .wish_list .check input {display:block; width:20px; height:20px; margin:0; border-radius:4px; background:#ddd url('../images/member/label_check.svg') center center / 10px no-repeat; cursor:pointer;} .PageUser .wish_list .check input:checked {border-color:var(--color-primary); background-color:var(--color-primary);} .PageUser .wish_list .wish_box {position:relative; display:flex; flex-direction:column;} .PageUser .wish_list .wish_box .thumb {position:relative; overflow:hidden; border-radius:16px; display:flex; align-items:center; justify-content:center; border:1px solid #eee;} .PageUser .wish_list .wish_box .thumb img {width:100%; display:block;} .PageUser .wish_list .wish_box .soldout {position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(255,255,255,0.8); display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:600; color:#111;} .PageUser .wish_list .wish_box .info {margin-top:16px; display:flex; flex-direction:column; gap:6px;} .PageUser .wish_list .wish_box .item_name {font-size:16px; font-weight:600; line-height:1.3; color:#111; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp:1; -webkit-box-orient:vertical; display:-webkit-box;} .PageUser .wish_list .wish_box .price {font-size:16px; font-weight:600; color:#111;} .PageUser .wish_list .btn_delete {flex:none; width:20px; height:20px; background:url('../images/icon_trash.svg') center center / 16px no-repeat; cursor:pointer; opacity:0.6;} .PageUser .this_mypage_mobile {display:none;} @media (hover:hover) and (pointer:fine) { .PageUser .user_type .btn_modify:hover {border-color:#ccc; color:#111;} .PageUser .find_item .btn_search:hover {background:color-mix(in srgb, var(--color-primary) 88%, #000);} .PageUser .quick_link .one_link:hover {border-color:#ccc;} .PageUser .order_list .one_order:hover {background:#eee;} .PageUser .order_list .one_order.type_detail:hover {background:transparent;} .PageUser .order_list .btn_outline:hover {border-color:#ccc;} .PageUser .order_list .btn_primary:hover {background:color-mix(in srgb, var(--color-primary) 88%, #000);} .PageUser .order_list .type_detail:hover {border-color:var(--color-primary);} .PageUser .wish_box:hover .item_name {color:var(--color-primary);} } @media (max-width:900px) { .PageUser .user_type {gap:20px;} .PageUser .user_type .type_head .icon {width:40px; height:40px; background-size:40px;} .PageUser .user_type .type_head .name {font-size:15px;} .PageUser .user_type .btn_modify {font-size:15px;} .PageUser .find_item {gap:20px;} .PageUser .find_item .find_copy .desc {font-size:14px;} .PageUser .find_item .btn_search {font-size:15px;} .PageUser .quick_link {grid-template-columns:repeat(1, 1fr);} .PageUser .order_state {grid-template-columns:repeat(2, 1fr); gap:16px} .PageUser .order_state .one_state {flex-direction:column; padding:20px;} .PageUser .guide_list .one_guide .text {font-size:14px;} .PageUser .quick_link .one_link .title {font-size:16px;} .PageUser .order_list .one_order {padding:16px; flex-direction:column; align-items:stretch;} .PageUser .order_list .order_pay {flex-direction:row-reverse; align-items:center; gap:8px; justify-content:space-between;} .PageUser .this_mypage_mobile {display:block;} .PageUser .this_mypage_pc {display:none;} .PageUser .order_list .order_head {padding:16px; flex-direction:column; align-items:stretch; gap:8px;} .PageUser .order_list .order_head .head_meta {justify-content:space-between;} .PageUser .order_list .head_meta {font-size:14px;} .PageUser .order_list .sub_name {font-size:14px;} .PageUser .order_list .product_name {font-size:16px;} .PageUser .order_list .order_body {padding:20px; flex-direction:column; gap:10px; align-items:stretch;} .PageUser .order_list .type_detail .order_thumb {width:70px;} .PageUser .order_list .type_detail .order_pay {flex-direction:row; align-items:center; gap:6px; justify-content:center; font-size:14px;} .PageUser .order_list .type_detail .pay_way {flex:1; order:1} .PageUser .order_list .type_detail .pay_value {font-size:16px; order:3} .PageUser .order_list .type_detail .pay_unit {order:2} .PageUser .wish_list ul {grid-template-columns:repeat(2, 1fr); gap:12px;} .PageUser .wish_list .check {left:10px; top:10px;} .PageUser .wish_list .wish_box .thumb {border-radius:10px;} .PageUser .wish_list .wish_box .info {margin-top:14px; gap:6px;} .PageUser .wish_list .wish_box .item_name {font-size:16px;} .PageUser .wish_list .wish_box .price {font-size:18px;} } /* 고객센터+게시판 ================================================================= */ .PageBoard {} .PageBoard .post_list {} .PageBoard .post_list ul {display:flex; flex-direction:column; gap:16px;} .PageBoard .post_list li {padding:24px; border:1px solid #eee; border-radius:16px; background:#FFF9F4; box-sizing:border-box;} .PageBoard .post_list .posting {display:flex; align-items:center; gap:16px; position:relative;} .PageBoard .post_list .posting .upper_link {position:absolute; left:0; top:0; width:100%; height:100%; z-index:1;} .PageBoard .post_list .cate {flex:none; display:inline-flex; align-items:center; justify-content:center; height:34px; padding:0 16px; border-radius:99px; background:var(--color-primary); font-size:14px; font-weight:600; color:#fff; white-space:nowrap;} .PageBoard .post_list .title {flex:1; position:relative; font-size:18px; font-weight:600; color:#111; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp:1; -webkit-box-orient:vertical; display:-webkit-box;} .PageBoard .post_list .toggle {flex:none; display:flex; align-items:center; gap:8px;} .PageBoard .post_list .date {font-size:14px; color:#999; white-space:nowrap; font-variant-numeric:tabular-nums; font-weight:500;} .PageBoard .post_list .btn_toggle {flex:none; width:32px; height:32px; background:url('../images/arrow_down.svg') center center / 15px no-repeat; transition:transform 0.2s ease;} .PageBoard .post_list li.if_open .btn_toggle {transform:rotate(180deg);} .PageBoard .post_list .post_view {margin-top:16px; margin-left:70px; box-sizing:border-box; padding:16px; border-radius:16px; background:#fff; font-size:16px; line-height:1.6; color:#333;} @media (max-width:900px) { .PageBoard .post_list li {padding:20px;} .PageBoard .post_list .posting {flex-wrap:wrap; align-items:center; gap:8px;} .PageBoard .post_list .cate {order:1;} .PageBoard .post_list .toggle {order:2; margin-left:auto; gap:0;} .PageBoard .post_list .date {display:none;} .PageBoard .post_list .title {order:3; flex:1 1 100%; width:100%; font-size:16px;} .PageBoard .post_list .post_view {margin-left:0; margin-top:16px; font-size:15px;} } /* 블로그게시판 ================================================================= */ .PageBlog {display:flex; flex-direction:column; gap:32px;} .PageBlog .list_head {display:flex; align-items:center; justify-content:space-between; gap:24px;} .PageBlog .list_head .tit {font-size:22px; font-weight:600; color:#111;} .PageBlog .list_head .total {font-size:16px; font-weight:600; color:var(--color-primary);} .PageBlog .blog_list ul {display:grid; grid-template-columns:repeat(3, 1fr); gap:32px 24px;} .PageBlog .blog_list .one_blog {position:relative; display:flex; flex-direction:column; border:1px solid #eee; border-radius:16px; background:#fff; overflow:hidden; box-shadow:0 8px 20px rgba(25,31,40,0.04); box-sizing:border-box; transition:all 0.3s ease-out;} .PageBlog .blog_list .blog_thumb {background:#f5f5f5; overflow:hidden;} .PageBlog .blog_list .blog_thumb img {width:100%; object-fit:cover; display:block;} .PageBlog .blog_list .blog_copy {display:flex; flex-direction:column; gap:8px; min-height:200px; padding:20px; box-sizing:border-box;} .PageBlog .blog_list .blog_cate {font-size:15px; font-weight:600; color:var(--color-primary);} .PageBlog .blog_list .title {font-size:20px; font-weight:600; color:#111; line-height:1.3; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;} .PageBlog .blog_list .desc {font-size:16px; line-height:1.5; color:#777; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;} .PageBlog .blog_list .date {margin-top:auto; font-size:15px; color:#999; font-variant-numeric:tabular-nums;} /* 블로그 상세 */ .PageBlog.type_view {gap:40px;} .PageBlog.type_view .view_upper {display:flex; flex-direction:column; gap:32px;} .PageBlog.type_view .view_nav {display:flex; flex-direction:column; gap:24px;} .PageBlog.type_view .view_back {display:inline-flex; align-items:center; gap:4px; font-size:15px; font-weight:500; color:#555;} .PageBlog.type_view .view_back .ic_arrow {flex:none; width:16px; height:16px; background:url('../images/arrow_right_color.svg') center center / contain no-repeat; transform:scaleX(-1);} .PageBlog.type_view .blog_thumb {border-radius:16px; CTM-608307 : ARA -- overflow:hidden; background:#f5f5f5;} .PageBlog.type_view .blog_thumb img {width:100%; display:block;} .PageBlog.type_view .view_head {display:flex; flex-direction:column;} .PageBlog.type_view .view_tit_group {display:flex; flex-direction:column; gap:16px; margin-bottom:20px;} .PageBlog.type_view .view_head .blog_cate {font-size:18px; font-weight:600; color:var(--color-primary);} .PageBlog.type_view .view_head .title {font-size:36px; font-weight:700; color:#111; line-height:1.3;} .PageBlog.type_view .view_head .date {font-size:16px; color:#999;} .PageBlog.type_view .view_body {font-size:18px; line-height:1.6; color:#777; border-top:1px solid #ccc; padding-top:30px;} .PageBlog.type_view .view_more {display:flex; flex-direction:column; gap:32px; border-top:1px solid #ccc; padding-top:30px;} @media (hover:hover) and (pointer:fine) { .PageBlog .blog_list .one_blog:hover {transform:translateY(-10px);} .PageBlog.type_view .view_back:hover {color:#111;} } @media (max-width:1200px) and (min-width:901px) { .PageBlog .blog_list ul {grid-template-columns:repeat(2, 1fr);} } @media (max-width:900px) { .PageBlog {gap:24px;} .PageBlog .list_head .tit {font-size:16px;} .PageBlog .list_head .total {font-size:15px;} .PageBlog .blog_list ul {grid-template-columns:1fr; gap:20px;} .PageBlog.type_view {gap:32px;} .PageBlog.type_view .view_upper {gap:24px;} .PageBlog.type_view .view_nav {gap:20px;} .PageBlog.type_view .view_head .title {font-size:28px;} .PageBlog.type_view .view_head .blog_cate {font-size:15px;} .PageBlog.type_view .view_head .date {font-size:15px;} .PageBlog.type_view .view_body {font-size:16px;} } @media (max-width:600px) { .PageBlog.type_view .view_more {display:none;} } /* 회사소개 ================================================================= */ .PageAbout .about_card ul {display:grid; grid-template-columns:repeat(3, 1fr); gap:20px;} .PageAbout .about_card .one_card {display:flex; flex-direction:column; padding:16px; border-radius:8px; background:#fff; box-shadow:0 8px 20px rgba(25,31,40,0.04); box-sizing:border-box;} .PageAbout .about_card .card_thumb {border-radius:8px; overflow:hidden;} .PageAbout .about_card .card_thumb .draw {width:100%; display:block;} .PageAbout .about_card .card_copy {display:flex; flex-direction:column; gap:8px; margin-top:16px;} .PageAbout .about_card .card_copy .title {font-size:22px; font-weight:600; color:#111; line-height:1.4;} .PageAbout .about_card .card_copy .desc {font-size:16px; line-height:1.45; color:#999;} .PageAbout .promise_list {display:flex; flex-direction:column; gap:20px;} .PageAbout .promise_list .one_promise {display:flex; flex-direction:column; gap:8px; padding:16px; border:1px solid #eee; border-radius:8px; background:#fff; box-sizing:border-box;} .PageAbout .promise_list .one_promise .icon {flex:none; width:28px; height:28px; background:url('../images/auth_check.svg') center center / contain no-repeat;} .PageAbout .promise_list .one_promise .promise_copy {display:flex; flex-direction:column; gap:8px;} .PageAbout .promise_list .one_promise .title {font-size:18px; font-weight:600; color:#111; line-height:1.3;} .PageAbout .promise_list .one_promise .desc {font-size:14px; line-height:1.3; color:#999;} @media (max-width:1100px) and (min-width:901px) { .PageAbout .about_card ul {grid-template-columns:repeat(2, 1fr);} } @media (max-width:900px) { .PageAbout .about_card ul {grid-template-columns:1fr;} .PageAbout .about_card .card_copy .title {font-size:18px;} .PageAbout .about_card .card_copy .desc {font-size:14px;} .PageAbout .one_promise .title {font-size:16px;} .PageAbout .one_promise .desc {font-size:14px;} } /* 이용가이드 ================================================================= */ .PageGuide .order_step {display:grid; grid-template-columns:repeat(4, 1fr); gap:16px;} .PageGuide .order_step .one_step {display:flex; flex-direction:column; gap:10px; padding:20px; border:1px solid #FFD7B4; border-radius:8px; background:#FFF9F4; box-sizing:border-box;} .PageGuide .order_step .step_num {flex:none; display:flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:999px; background:var(--color-primary); font-size:14px; font-weight:600; color:#fff; line-height:1;} .PageGuide .order_step .step_copy {display:flex; flex-direction:column; gap:8px;} .PageGuide .order_step .one_step .title {font-size:18px; font-weight:600; color:#111; line-height:1.3;} .PageGuide .order_step .one_step .desc {font-size:15px; line-height:1.5; color:#999; letter-spacing:-0.5px;} .PageGuide .pay_method {display:flex; flex-direction:column; gap:16px;} .PageGuide .pay_method .one_method {display:flex; flex-direction:column; gap:20px; padding:24px; border:1px solid #eee; border-radius:16px; background:#fff; box-sizing:border-box;} .PageGuide .pay_method .method_head {display:flex; align-items:flex-start; gap:16px;} .PageGuide .pay_method .pay_icon {flex:none; display:flex; align-items:center; justify-content:center; width:50px; height:50px; border:1px solid #FFD7B4; border-radius:10px; background:#fff; box-sizing:border-box;} .PageGuide .pay_method .pay_icon .draw {width:30px; height:30px; display:block;} .PageGuide .pay_method .method_copy {display:flex; flex-direction:column; gap:8px; flex:1;} .PageGuide .pay_method .method_copy .title {font-size:18px; font-weight:600; color:#111; line-height:1.3;} .PageGuide .pay_method .method_copy .desc {font-size:15px; line-height:1.5; color:#999;} .PageGuide .pay_method .method_rule {height:1px; background:#eee;} .PageGuide .pay_method .check_list {display:flex; flex-wrap:wrap; gap:16px;} .PageGuide .pay_method .one_check {display:flex; align-items:center; gap:8px;} .PageGuide .pay_method .one_check .icon {flex:none; width:24px; height:24px; background:url('../images/auth_check.svg') center center / contain no-repeat;} .PageGuide .pay_method .one_check .txt {font-size:16px; color:#333; font-weight:500;} .PageGuide .pg_error {display:flex; flex-direction:column; border:1px solid #eee; border-radius:16px; overflow:hidden; box-sizing:border-box;} .PageGuide .pg_error .error_head {display:flex; gap:40px; padding:16px 20px; background:#eee; box-sizing:border-box; font-size:16px; color:#777; font-weight:500;} .PageGuide .pg_error .error_head .field_code {flex:none; width:140px; } .PageGuide .pg_error .error_head .field_msg {flex:1;} .PageGuide .pg_error .error_head .field_reason {flex:1;} .PageGuide .pg_error .error_rows .one_error {display:flex; gap:40px; padding:16px 20px; box-sizing:border-box; font-size:16px; font-weight:500;} .PageGuide .pg_error .error_rows .one_error+ .one_error {border-top:1px solid #eee; } .PageGuide .pg_error .one_error .field_code {flex:none; width:140px; font-weight:600; color:var(--color-primary); line-height:1.4;} .PageGuide .pg_error .one_error .field_msg {flex:1; line-height:1.4; color:#333; font-weight:600;} .PageGuide .pg_error .one_error .field_reason {flex:1; line-height:1.4; color:#777;} .PageGuide .pay_limit {display:flex; flex-direction:column; gap:24px;} .PageGuide .pay_limit .limit_list {display:flex; justify-content:flex-start; align-items:stretch; flex-direction:row; gap:16px} .PageGuide .pay_limit .one_limit {flex:1; display:flex; flex-direction:column; gap:10px; padding:20px; border:1px solid #FFD7B4; border-radius:8px; background:#FFF9F4; box-sizing:border-box;} .PageGuide .pay_limit .limit_icon {flex:none; display:flex; align-items:center; justify-content:center; width:40px; height:40px; border:1px solid #FFD7B4; border-radius:8px; background:#fff; box-sizing:border-box;} .PageGuide .pay_limit .limit_icon .draw {width:24px; height:24px; display:block;} .PageGuide .pay_limit .limit_copy {display:flex; flex-direction:column; gap:8px;} .PageGuide .pay_limit .limit_copy .title {font-size:18px; font-weight:700; color:#111; line-height:1.3;} .PageGuide .pay_limit .limit_copy .desc {font-size:15px; line-height:1.5; color:#999;} .PageGuide .pay_limit .limit_notice {display:flex; align-items:flex-start; gap:8px; padding:16px; border-radius:8px; background:#FFF9F4; box-sizing:border-box;} .PageGuide .pay_limit .limit_notice .notice_icon {flex:none; width:20px; height:20px; background:url('../images/icon_info.svg') center center / contain no-repeat;} .PageGuide .pay_limit .limit_notice .notice_txt {flex:1; font-size:15px; line-height:1.5; color:#999;} .PageGuide .pay_approve {padding:24px; border:1px solid #eee; border-radius:8px; background:#fff; box-sizing:border-box;} .PageGuide .pay_approve .one_approve {display:flex; align-items:center; gap:8px;} .PageGuide .pay_approve .one_approve + .one_approve {margin-top:20px; padding-top:20px; border-top:1px solid #eee;} .PageGuide .pay_approve .one_approve .icon {flex:none; width:24px; height:24px; background:url('../images/auth_check.svg') center center / contain no-repeat;} .PageGuide .pay_approve .one_approve .txt {flex:1; font-size:16px; line-height:1.4; color:#333; font-weight:500;} @media (max-width:1100px) and (min-width:901px) { .PageGuide .order_step {grid-template-columns:repeat(2, 1fr);} } @media (max-width:900px) { .PageGuide .order_step {grid-template-columns:1fr;} .PageGuide .order_step .one_step .desc {font-size:15px;} .PageGuide .pay_method .method_head {flex-direction:column; gap:16px;} .PageGuide .pay_method .pay_icon {width:40px; height:40px; border-radius:8px;} .PageGuide .pay_method .pay_icon .draw {width:24px; height:24px;} .PageGuide .pay_method .method_copy .title {font-size:18px;} .PageGuide .pay_method .method_copy .desc {font-size:15px;} .PageGuide .pay_method .check_list {flex-direction:column; gap:8px;} .PageGuide .pg_error .error_head {display:none;} .PageGuide .pg_error {border:0; overflow:visible;} .PageGuide .pg_error .error_rows {display:flex; flex-direction:column; border-radius:16px; border:1px solid #eee;} .PageGuide .pg_error .error_rows .one_error {flex-direction:column; gap:10px;} .PageGuide .pg_error .one_error .field_code {width:auto;} .PageGuide .pay_limit .limit_list {flex-direction:column;} .PageGuide .pay_approve .one_approve .txt {font-size:15px;} } /* 주문완료 ================================================================= */ .PageOrder .complete_summary {display:flex; flex-direction:column; gap:20px;} .PageOrder .complete_summary .one_row {display:flex; align-items:center; gap:20px;} .PageOrder .complete_summary .one_row .label {flex:1; font-size:16px; font-weight:500; color:#999;} .PageOrder .complete_summary .one_row .value {flex:none; font-size:16px; font-weight:600; color:#111; text-align:right;} .PageOrder .complete_summary .one_row.type_state .value {color:var(--color-primary);} .PageOrder .complete_summary .one_row.type_state.tone_cancel .value {color:#999;} .PageOrder .complete_summary .one_row.type_state.tone_done .value {color:#1BAF20;} .PageOrder .complete_summary .one_row.type_total {align-items:flex-end;} .PageOrder .complete_summary .one_row.type_total .label {color:#111; font-weight:600;} .PageOrder .complete_summary .one_row.type_total .value {font-size:24px; font-weight:600; color:var(--color-primary); line-height:24px;} .PageOrder .complete_summary .one_row.type_total .value .unit {font-size:16px; font-weight:600;} .PageOrder .complete_action {display:flex; flex-direction:column; gap:10px; margin-top:20px; border-top:1px solid #eee; padding-top:20px; box-sizing:border-box;} .PageOrder .guide_list {display:flex; flex-direction:column; gap:8px;} .PageOrder .guide_list .one_guide {display:flex; align-items:flex-start; gap:8px;} .PageOrder .guide_list .one_guide .icon {flex:none; width:20px; height:20px;} .PageOrder .guide_list .one_guide .icon img {width:20px; height:20px; display:block;} .PageOrder .guide_list .one_guide .text {flex:1; font-size:15px; color:#999;} .PageOrder .order_product {display:flex; flex-direction:column; gap:16px;} .PageOrder .order_product .one_product {display:flex; align-items:center; gap:10px; padding:24px; border:1px solid #eee; box-sizing:border-box; border-radius:16px;} .PageOrder .order_product .product_main {display:flex; align-items:center; gap:20px; flex:1;} .PageOrder .order_product .thumb {position:relative; flex:none; width:107px; border:1px solid #eee; border-radius:8px; background:#fff; overflow:hidden; box-sizing:border-box;} .PageOrder .order_product .thumb img {width:100%; display:block;} .PageOrder .order_product .copy {display:flex; flex-direction:column; gap:4px; flex:1;} .PageOrder .order_product .copy .brand {font-size:15px; font-weight:600; color:var(--color-primary); line-height:21px;} .PageOrder .order_product .copy .name {font-size:18px; font-weight:600; color:#111; line-height:23px;} .PageOrder .order_product .copy .option {font-size:15px; font-weight:400; color:#999; line-height:21px;} .PageOrder .order_product .product_pay {flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:4px;} .PageOrder .order_product .product_pay .count {font-size:15px; font-weight:400; color:#999;} .PageOrder .order_product .product_pay .price {font-size:20px; font-weight:600; color:#111;} .PageOrder .pay_summary {display:flex; flex-direction:column; border:1px solid #eee; box-sizing:border-box; border-radius:16px; overflow:hidden;} .PageOrder .pay_summary .one_row {display:flex; align-items:center; gap:10px; padding:24px; border-bottom:1px solid #eee; box-sizing:border-box;} .PageOrder .pay_summary .one_row:last-child {border-bottom:0;} .PageOrder .pay_summary .one_row .label {flex:1; font-size:15px; font-weight:500; color:#777;} .PageOrder .pay_summary .one_row .value {flex:none; font-size:16px; font-weight:600; color:#111;text-align:right;} .PageOrder .pay_summary .one_row.type_total {background:#FFF9F4;} .PageOrder .pay_summary .one_row.type_total .label {color:#111; font-size:20px; font-weight:600;} .PageOrder .pay_summary .one_row.type_total .value {font-size:20px; color:var(--color-primary); font-weight:600;} .PageOrder .send_summary {display:flex; flex-direction:column; gap:24px;} .PageOrder .send_state {display:flex; flex-direction:row; border:1px solid #eee; border-radius:16px; overflow:hidden; box-sizing:border-box;} .PageOrder .send_state .one_cell {flex:1; padding:24px; border-right:1px solid #eee; box-sizing:border-box;} .PageOrder .send_state .one_cell:last-child {border-right:0;} .PageOrder .send_state .copy {display:flex; flex-direction:column; gap:10px;} .PageOrder .send_state .label {font-size:15px; font-weight:500; color:#999; line-height:18px;} .PageOrder .send_state .value {font-size:16px; font-weight:600; color:#111; line-height:16px;} .PageOrder .send_state .one_cell.type_state .value {color:var(--color-primary);} .PageOrder .send_notice {display:flex; align-items:flex-start; gap:8px; padding:16px; border-radius:8px; background:#FFF9F4; box-sizing:border-box;} .PageOrder .send_notice .icon {flex:none; width:20px; height:20px; background:url('../images/icon_info.svg') center center / contain no-repeat;} .PageOrder .send_notice .text {flex:1; font-size:15px; font-weight:400; color:#999; line-height:16px;} @media (hover:hover) and (pointer:fine) { } @media (max-width:900px) { .PageOrder .complete_summary .one_row .label {font-size:15px;} .PageOrder .complete_summary .one_row .value {font-size:15px;} .PageOrder .complete_summary .one_row.type_total .value {font-size:22px; line-height:22px;} .PageOrder .complete_action {margin-top:24px; position:fixed; left:0; bottom:0; background:#fff; width:100%; padding:20px; flex-direction:row} .PageOrder .complete_action .c_btn {flex:1;} .PageOrder .guide_list .one_guide .text {font-size:14px; line-height:18px;} .PageOrder .order_product .one_product {flex-direction:column; align-items:stretch; padding:16px; gap:16px;} .PageOrder .order_product .product_main {gap:16px;} .PageOrder .order_product .thumb {width:80px; height:80px;} .PageOrder .order_product .copy .name {font-size:16px; line-height:22px;} .PageOrder .order_product .product_pay {flex-direction:row; align-items:center; justify-content:space-between;} .PageOrder .order_product .product_pay .price {font-size:18px; line-height:24px;} .PageOrder .pay_summary .one_row {padding:16px;} .PageOrder .pay_summary .one_row .label {font-size:14px; line-height:16px;} .PageOrder .pay_summary .one_row .value {font-size:15px; line-height:15px;} .PageOrder .pay_summary .one_row.type_total .label {font-size:15px; line-height:22px;} .PageOrder .pay_summary .one_row.type_total .value {font-size:18px; line-height:18px;} .PageOrder .send_state {flex-direction:column;} .PageOrder .send_state .one_cell {border-right:0; border-bottom:1px solid #eee; padding:16px;} .PageOrder .send_state .one_cell:last-child {border-bottom:0;} .PageOrder .send_notice {padding:14px 16px;} .PageOrder .send_notice .text {font-size:14px; line-height:18px;} } /* 앱 알림함 2022-01-26 {LCY} : 하이앱 */ .alarm_app {padding-bottom:100px; position:fixed; left:0; top:0; width:100%; height:100%; background:#fff; display:flex; justify-content: stretch; align-items: stretch; flex-direction:column; z-index:1000} .alarm_app img {width:100%;} .alarm_app .am_top {border-bottom:1px solid #f2f2f2; height:60px; display:flex; justify-content: center; align-items: center; flex-direction:column; position:relative;} .alarm_app .am_top .tit {color:#000; font-size:18px; font-weight:500;} .alarm_app .am_top .btn_back {position:absolute; left:0; top:0; width:65px; height:100%; display:flex; justify-content: center; align-items: center; flex-direction:column;} .alarm_app .am_top .btn_back svg {width:23px;} .alarm_app .am_list {padding:20px; flex:1; overflow-y:scroll;} .alarm_app .am_list li+ li {margin-top:30px;} .alarm_app .am_list .no_list {display:flex; justify-content: center; align-items: center; flex-direction:column; height:100%;} .alarm_app .am_list .no_list strong {color:#bbb; font-size:13px; line-height:1; margin-top:15px; letter-spacing:-0.5px;} .alarm_app .am_list .no_list .ic {opacity: 0.2; filter: alpha(opacity=20); -ms-filter:alpha(opacity=20);} .alarm_app .am_list .no_list .ic svg {width:50px;} .alarm_app .am_box {padding-left:25px; position:relative; overflow:hidden; display:flex; justify-content: center; stretch: flex-start; flex-direction:column;} .alarm_app .am_box:before {content:""; width:7px; height:7px; background:#ddd; border-radius:100px; position:absolute; left:3px; top:2px;} .alarm_app .am_box:after {content:""; width:1px; height:100%; background:#f2f2f2; position:absolute; left:6px; top:18px;} .alarm_app .am_box .date {color:#bbb; font-size:12px; line-height:1;} .alarm_app .am_box .conts {margin-top:8px;} .alarm_app .am_box .conts dt {color:#000; font-size:17px; font-weight:500; line-height:1.4; letter-spacing:-0.5px; margin-bottom:5px;} .alarm_app .am_box .conts dd {color:#888; font-size:13px; line-height:1.4; letter-spacing:-0.5px;} .alarm_app .am_box .photo {font-size:0px; margin-top:10px;} .alarm_app .am_box .btn_link {display:flex; justify-content: center; align-items: center; flex-direction:row; padding:3px 0; margin-top:10px; margin-left:auto} .alarm_app .am_box .btn_link strong {color:#ff0000; line-height:1; font-size:12px; letter-spacing:-0.5px;} .alarm_app .am_box .btn_link .ic {display:flex; justify-content: center; align-items: center; flex-direction:column;} .alarm_app .am_box .btn_link .ic svg {fill:#ff0000; width:15px;}