@import url('//fonts.googleapis.com/css?family=Poppins:400,600,700'); @import url(../arrow.css); @import url('/css/front/collectionFont.css?v=1727156677'); ::selection {background:#a049ea; color:#fff;} body {margin:0; font-size:12px; font-family:'Noto Sans KR',sans-serif;} div {box-sizing:border-box;} a {text-decoration:none; color:inherit;} img {border:0;} input, textarea, button {font-family:'Noto Sans KR',sans-serif; outline:none;} button.btn,a.btn {margin-left:12px; border:2px solid #ff1557; background-color:white; color:#ff1557; padding:9px 25px; line-height:1; transition:all 0.25s cubic-bezier(0.7, 0, 0.3, 1); box-sizing:border-box; display:inline-block; height:34px; cursor:pointer; white-space:nowrap;} button.btn:hover,a.btn:hover {background-color:#ff1557; color:white;} button.btn:first-child {margin-left:0;} select {appearance:none; -webkit-appearance:none; -moz-appearance:none; padding:0 30px 0 12px; color:#818181; background-image:url(https://nqogzmoxteadbecwmhjy.supabase.co/storage/v1/object/public/jewelryps-public-assets/images/desktop/appo_arrow_down.667c9e70ed2f.png); background-size:11px 7px; background-position:calc(100% - 11px); background-repeat:no-repeat;} select::-ms-expand {display:none;} select>option:disabled {color:#ccc;} dt:not(:first-child) {margin-top:15px;} dt {margin-bottom:15px;} dd {margin-left:20px;} .row {padding:0; margin:0; list-style:none;} .row::before {content:''; display:table;} .row::after {content:''; display:table; clear:both;} .row>* {display:table-cell; float:left; box-sizing:border-box;} .nonselect {user-select:none; -ms-user-select:none; -o-user-select:none; -webkit-user-select:none; -moz-user-select:none;} .gray { filter: url('/js/front/desktop/filters.svg#grayscale') !important; /* Firefox 3.5+ */ filter: gray !important; /* IE6-9 */ -webkit-filter: grayscale(100%) !important; -webkit-filter: grayscale(1) !important; /* Webkit Nightlies, Google Chrome Canary and Microsoft Edge*/ filter: grayscale(1) !important; /* W3C */ } /* -- 헤더 -- */ .header{width:100%; height:111px; background-color: #fff; z-index:999;} /*.header{height:151px;} /*Top바*/ .header .header-wrapper{width:100%; height:auto; position: fixed; top: 0; left: 0; background-color: #fff; border-bottom: 1px solid #e5e5e5; box-shadow: 0 0 5px #eee; z-index:999;} .header .header-wrapper>div:last-child{position: relative;} .header .head_lang{position:absolute; left: 30px; top: 5px; font-size:0; z-index:1;} .header .head_lang a > img{margin-right:7px;} .header .head_user{position:absolute; right: 30px; top: 5px; font-size:0; z-index:1;} .header .head_user a{display:inline-block; font-size:14px; color:#000000; vertical-align:middle;} .header .head_user span{display:inline-block; font-size:14px; color:#000000; font-weight:300; padding:0 10px; vertical-align:middle;} .header h1{position:relative; top:auto; left:50%; margin-left:-115px;} .header h1 a img{position:relative; width:230px; z-index:1;} .header h1 > img{width:346px; position:absolute; top:-7px; left:-138.5px; opacity:0.15;} .header .head_menu{position:relative; width:100%; margin: 0 auto; padding: 0;} .header .head_menu > div{display: block; height: 40px; line-height: 40px;} .header .head_menu .gnb{padding-top:0; position:relative; text-align:center; letter-spacing:-1px;} .header .head_menu .gnb>ul{padding: 0; min-width:1400px; margin:0 auto;} .header .head_menu .gnb ul li{display:inline-block; margin-right:3%; font-size:15px;} .header .head_menu .gnb ul li:last-of-type{margin-right:0;} .header .head_menu .gnb ul li img{margin-top:14px;} .header .head_menu .gnb ul li:hover, .header .head_menu .gnb ul li.on{height:42px;} .header .head_menu .gnb ul li a{padding:5px;} .header .head_menu .gnb ul li a.active {color:#dc1a2a; font-weight: 500;} .header .head_menu .gnb .depth2{display: none; top: 35px; opacity: 0; width:100%; min-width: 1400px; background: #fff; position:absolute !important; left:0; box-shadow: 0 0 0 0; border-top: none; border-bottom: 1px solid rgb(229, 229, 229); } .header .head_menu .gnb .depth2 > div.on{display:block;} .header .head_menu .gnb .depth2 img{vertical-align:middle; width:250px; padding:0 20px; margin-right:60px;} .header .head_menu .gnb .depth2 ul{display:inline-block; width:100%; padding:0; vertical-align:top; background: #fff;} /*.header .head_menu .gnb .depth2 ul li{height:35px; line-height:35px;}*/ .header .head_menu .gnb .depth2[rel='2']{height:500px;} .header .head_menu .gnb .depth2[rel='2']>ul>li{width:125px; margin-right:10px; vertical-align: top;} .header .head_menu .gnb .depth2[rel='2']>ul>li>a {font-size:14px; letter-spacing: -2px; color:#777;} .header .head_menu .gnb .depth2[rel='2']>ul>li>ul>li{width:130px; font-size:13px; letter-spacing: -1.5px; line-height: 25px;} .header .head_menu .gnb .depth2[rel='2']>ul>li>ul>li:hover,.header .head_menu .gnb .depth2[rel='2']>ul>li>ul>li.on{height:25px;} .header .head_menu .gnb .depth2 ul li a{display:block; color:#aaa; } .header .head_menu .gnb .depth2 ul li a:hover{color:#000;} #header { position: relative; top: 0; z-index: 10; box-shadow: 0 0 5px #eee;} #header .header_top {position: relative; height:70px; margin: 0 auto; text-align: center; background-color: #fff;} #header h1 {position: absolute; margin:0; left: calc(50% - 115px); top: calc(50% - 15px); } #header h1 a {font-size:0; display: block;} #header h1 a img {vertical-align: middle;} #header .head_lang {position: absolute; top: calc(50% - 10px); left: calc(50% - 600px);} #header .head_user {position: absolute; top: calc(50% - 8px); right: calc(50% - 600px);} #header .head_user li {position: relative; display:inline-block; } #header .head_user li+li:before {position: absolute; top: 50%; left: 0; width: 1px; height: 8px; margin-top: -4px; background: #cccccc; content: '';} #header .head_user li a {display: block; padding: 0 12px; font-size: 13px; font-family: 'SeoulNamsanM'; line-height: 18px;} #header .head_user li:last-child a {padding-right:0;} #header .gnb {overflow: hidden; position: relative; min-width:950px; /*border-top: 1px solid #eaebed; */} #header .gnb:before {position: absolute; top: 40px; left: 0; width: 100%; height: 50px; background: rgba(255,255,255,0.9); content: '';} #header .gnb > div {background-color: #fff;} #header .gnb > div > ul, #header .gnb > div > ul > li > a + ul.sub-menu-depth-2 {max-width: 1200px; min-width: 860px; margin: 0 auto;} #header .gnb > div > ul {display:table; height: 40px; padding:0; border: 1px; text-align: center; -webkit-transition: height 0.4s ease-in-out; transition: height 0.4s ease-in-out;} #header .gnb > div > ul:hover {height:100px;} /*#header .gnb > div > ul.menu2:hover {height:480px;}*/ #header .gnb > div > ul > li {display: table-cell; font-size: 0;} #header .gnb > div > ul > li > a {display: block; position: relative; padding: 0 30px; font-size: 15px; color: #333333; line-height: 40px; -webkit-transition: color 0.4s; transition: color 0.4s;} #header .gnb > div > ul > li > a:after {content: ''; position: absolute; left: 50%; bottom: 5px; width: 0; height: 3px; opacity: 0; background: #b131e0; -webkit-transition: all 0.4s; transition: all 0.4s;} #header .gnb > div > ul > li > a.hover {color: #b131e0;} #header .gnb > div > ul > li > a.hover:after{left: 28px; width: calc(100% - 56px); opacity: 1;} #header .gnb > div > ul > li > a + ul.sub-menu-depth-2 {position: absolute; width:100%; display:none; top: 40px; left: 0; right: 0; text-align: center; padding:0;} #header .gnb > div > ul > li > a:hover + ul.sub-menu-depth-2, #header .gnb > div > ul > li > a + ul.sub-menu-depth-2:hover{display: block; } #header .gnb > div > ul > li ul.sub-menu-depth-2 li{display: inline-block; vertical-align: top;} #header .gnb > div > ul > li ul.sub-menu-depth-2 li a {display: block; padding: 0 20px; font-size: 15px; line-height: 60px; color: #333333; text-align: center; word-break: keep-all; -webkit-transition: color 0.4s; transition: color 0.4s;} #header .gnb > div > ul > li ul.sub-menu-depth-2 li > ul {margin-top:10px; padding:0;} #header .gnb > div > ul > li ul.sub-menu-depth-2 li > ul > div {display:block; font-size:15px; font-weight: 500; line-height: 30px;} #header .gnb > div > ul > li ul.sub-menu-depth-2 li > ul > div > a {line-height: 30px;} #header .gnb > div > ul > li ul.sub-menu-depth-2 li > ul > li {display: block; height:35px;} #header .gnb > div > ul > li ul.sub-menu-depth-2 li > ul > li > a {font-size:14px;} #header .gnb > div > ul > li ul.sub-menu-depth-2 li a.hover, #header .gnb > div > ul > li ul.sub-menu-depth-2 li a:hover, #header .gnb > div > ul > li ul.sub-menu-depth-2 li > ul > li > a:hover {color: #b131e0; font-weight: 500;} #header .gnb > div > ul > li ul.sub-menu-depth-3 {display: none; margin: 50px; width:100%; min-width:1150px; height:50px; background:#f7f2fc; border-radius: 10px;} #header .gnb > div > ul > li > a + ul.sub-menu-depth-2 > li > a + ul.sub-menu-depth-3 {position: absolute; left: 0; right: 0; margin:0; } #header .gnb > div > ul > li > a + ul.sub-menu-depth-2 > li > a + ul.sub-menu-depth-3 > li{display: inline-block;} #header .gnb > div > ul > li > a + ul.sub-menu-depth-2 > li > a + ul.sub-menu-depth-3 > li > a {padding:0 10px; font-size:13px; line-height:50px;} #header .gnb > div > ul > li > a + ul.sub-menu-depth-2 > li > a.hover + ul.sub-menu-depth-3 {display: block;} /*#header .gnb > div > ul > li ul.sub-menu-depth-2 >li >a.hover + ul.sub-menu-depth-3 {display: block;}*/ @media (max-width:1235px) { #header .head_lang {left: 10px;} #header .head_user {right: 10px;} } /*menu_200918*/ #header .gnb2 {overflow: hidden; position: relative; width:1200px; margin: 0 auto; /*border-top: 1px solid #eaebed; */} #header .gnb2:before {position: absolute; top: 40px; left: 0; width: 100%; /*height: 50px;*/ background: rgba(255,255,255,0.9); content: '';} #header .gnb2 > div {background-color: #fff; } #header .gnb2 > div > ul, #header .gnb2 > div > ul > li > a + div.sub-menu-depth-2 {width: 1200px; margin: 0 auto;} #header .gnb2 > div > ul {display:table; height: 40px; padding:0; border: 1px; text-align: center; -webkit-transition: height 0.4s ease-in-out; transition: height 0.4s ease-in-out;} #header .gnb2 > div > ul:hover{height:196px;} #header .gnb2 > div > ul > li {display: table-cell; font-size: 0;} #header .gnb2 > div > ul > li > a {display: block; position: relative; padding: 0 19px; font-size: 15px; letter-spacing: -0.5px; color: #333333; line-height: 40px; -webkit-transition: color 0.4s; transition: color 0.4s;} #header .gnb2 > div > ul > li > a:after {content: ''; position: absolute; left: 50%; bottom: 5px; width: 0; height: 3px; opacity: 0; background: #b131e0; -webkit-transition: all 0.4s; transition: all 0.4s;} #header .gnb2 > div > ul > li:first-child > a{padding-left:0;} #header .gnb2 > div > ul > li:last-child > a{padding-right:0;} #header .gnb2 > div > ul > li > a.hover {color: #b131e0;} #header .gnb2 > div > ul > li > a.hover:after{left: 22px; width: calc(100% - 44px); opacity: 1;} #header .gnb2 > div > ul > li:first-child > a.hover:after{left: 0; width: calc(100% - 22px);} #header .gnb2 > div > ul > li:last-child > a.hover:after{width: calc(100% - 22px); } #header .gnb2 > div > ul > li div.sub-menu-depth-2 li{display: inline-block; vertical-align: top;} #header .gnb2 > div > ul > li div.sub-menu-depth-2 li a {display: block; padding: 0 20px; font-size: 15px; letter-spacing: -1px; line-height: 60px; color:#8d8d8d; text-align: center; word-break: keep-all; -webkit-transition: color 0.4s; transition: color 0.4s;} #header .gnb2 > div > ul > li div.sub-menu-depth-2 li > ul {margin-top:10px; padding:0;} #header .gnb2 > div > ul > li div.sub-menu-depth-2 li > ul > li {display: block; width:25%; height:41px; text-align: left; } #header .gnb2 > div > ul > li div.sub-menu-depth-2 li > ul > li > a {font-size:14px;} #header .gnb2 > div > ul > li div.sub-menu-depth-2 li a.hover, #header .gnb2 > div > ul > li div.sub-menu-depth-2 li a:hover, #header .gnb2 > div > ul > li div.sub-menu-depth-2 li > ul > li > a:hover {color: #b131e0; opacity: 1; -webkit-transition: all 0.7s; transition: all 0.7s;} #header .gnb2 > div > ul > li div.sub-menu-depth-2 li > ul > div {display:block; font-size:15px; font-weight: 500; line-height: 30px;} #header .gnb2 > div > ul > li div.sub-menu-depth-2 li > ul > div > a {line-height: 30px;} #header .gnb2 > div > ul > li > a + div.sub-menu-depth-2{position: absolute; height:calc(100% - 35px); display:none; top: 35px; left: 0; right: 0; text-align: center; padding:0; overflow: hidden;} #header .gnb2 > div > ul > li > a + div.sub-menu-depth-2 > ul {padding:0; margin-top:-10px; width: calc(100% - 360px); align-self: center;} #header .gnb2 > div > ul > li > a + div.sub-menu-depth-2 > ul > li{display: inline-block; float:left; width:25%; height:41px; text-align: left;} #header .gnb2 > div > ul > li > a + div.sub-menu-depth-2 > ul > li > a {padding:0 10px; line-height:50px; text-align: left; margin-left:10px; position:relative;} #header .gnb2 > div > ul > li > a + div.sub-menu-depth-2 > ul > li > a::before {content: '\203A'; font-size:12px; margin-right:10px; vertical-align: top;} #header .gnb2 > div > ul > li > a + div.sub-menu-depth-2 > ul > li > a.hot::after{content: ''; display: inline-block; margin-left: 7px; background: url(https://nqogzmoxteadbecwmhjy.supabase.co/storage/v1/object/public/jewelryps-public-assets/images/header_icon_hot.2013dc4a7c5d.png) no-repeat; width: 27px; height: 27px; position: absolute; top: 50%; bottom: 50%; transform: translateY(-50%); animation: u_ol_blink 1.3s step-end infinite;} #header .gnb2 > div > ul > li > a + div.sub-menu-depth-2 > ul > li > a.new::after{content: ''; display: inline-block; margin-left: 7px; background: url(https://nqogzmoxteadbecwmhjy.supabase.co/storage/v1/object/public/jewelryps-public-assets/images/header_icon_new.b9439ffaffe2.png) no-repeat; width: 27px; height: 27px; position: absolute; top: 50%; bottom: 50%; transform: translateY(-50%); animation: u_ol_blink 1.3s step-end infinite;} #header .gnb2 > div > ul > li > a:hover + div.sub-menu-depth-2, #header .gnb2 > div > ul > li > a + div.sub-menu-depth-2:hover{display: flex;} #header .gnb2 > div > ul > li > a + div.sub-menu-depth-2 > ul + div{position: absolute; top:12px; right:0; width:300px; height: 140px; opacity: 0;} #header .gnb2 > div > ul > li > a.hover + div.sub-menu-depth-2 > ul + div{opacity: 1;} /*menu_200918 end*/ /*상단 바 */ #topBar { position: relative; z-index: 100; width: 100%; height: 72px; margin: 0 auto; overflow: hidden; background: #c460e5;} #topBar .btn_close {position: absolute; top: 50%;right: 20px; left: auto; margin-left: 0; z-index: 2; overflow: hidden; width: 19px; height: 19px; margin-top: -9px; text-indent: -999px; background: url(https://nqogzmoxteadbecwmhjy.supabase.co/storage/v1/object/public/jewelryps-public-assets/images/topBanner_close.fe358a687377.png) no-repeat center;} #topBar .swiper-container {width: calc(100% - 60px); float: left; overflow: hidden;} #topBar .swiper-container .swiper-slide {width: auto; line-height: 72px; font-size: 22px; font-weight: 400; color: #fff;} #topBar .swiper-container .swiper-slide > p{font-family: 'locus_sangsang'; display: inline-block; vertical-align: top; margin:0; padding:0;} #topBar .swiper-container .swiper-slide.swiper-slide-active > p {animation-iteration-count: 4;} #topBar .swiper-container .swiper-slide > p em {margin-right: 10px;} #topBar .swiper-container .swiper-slide img {position: relative; top: 10px; display: inline-block; width: auto; margin: 0 60px;} #topBar2{position: relative; width:100%; height:40px; overflow: hidden;margin:0;} #topBar2 .btn_close {position: absolute; top: 50%; right: 20px; left: auto; margin-left: 0; z-index: 2; overflow: hidden; width: 19px; height: 19px; margin-top: -9px; text-indent: -999px; background: url(https://nqogzmoxteadbecwmhjy.supabase.co/storage/v1/object/public/jewelryps-public-assets/images/topBanner_close.fe358a687377.png) no-repeat center;} #topBar2 .news-container{margin:0; padding:0; } #topBar2 .news-container ul{width:100%; height:100%; cursor: pointer; padding:0; margin:0;} #topBar2 .news-container ul>li{text-align: center; color:#fff; font-size:17px; line-height:40px;} #topBar2 .news-container ul>li span{font-size:23px; font-family: 'locus_sangsang'; margin-right:15px; letter-spacing: 1px;} #rgt_quick:not(.open), #rgt_quick:not(.open) p.quick_close, #rgt_quick:not(.open) + div.quick_csbtn{-webkit-transition: right 0.4s ease-out; transition: right 0.4s ease-out;} #rgt_quick {width: 111px; height:100%; position: fixed; top: 110px; /*top:151px; right: 0;*/ right:-111px; z-index: 998; background-color: #fcf9ff; } #rgt_quick>div{color:#fff; text-align: center; padding:0; line-height: 1.4;} #rgt_quick>div img{display:block;} #rgt_quick>div.call{padding:0;} #rgt_quick>div.model{padding:0; line-height: 1; position: fixed; bottom: 84px;} #rgt_quick>div.event{padding:0; line-height: 1; position: fixed; bottom: 25px;} #rgt_quick>div.agency{padding: 0; line-height: 1; position: fixed; bottom: 195px;} #rgt_quick>div.time{padding:0;} #rgt_quick ul {padding:0; margin:0; list-style: none; height: calc(100% - 502px); overflow-y: scroll; -ms-overflow-style: none; scrollbar-width: none;} #rgt_quick ul::-webkit-scrollbar {display: none;} #rgt_quick ul li{margin-top:9%; position: relative; cursor: pointer;} #rgt_quick ul li:last-child{/*margin-top:25px;*/ margin-bottom: 20px;} #rgt_quick ul li img{display: block; cursor: pointer; margin:0 auto;} #rgt_quick span#event_b{display: none; position: absolute; right: 100%; bottom: calc(50% - 130px);} #rgt_quick span#event_b>a{display: block; font-size: 0;} #rgt_quick span#event_b>a>img{width:500px;} #rgt_quick span#event_b>span.event_close{background: #adadad; width: 25px; height: 25px; display: block; position: absolute; right: 0; text-align: center; top: 0; border: 4px solid #adadad;} #rgt_quick .quick_qr{position: absolute; left: -145px; top: -25px; display: none; width: 145px; border: 10px solid #1c9d38; z-index:99; } #rgt_quick .quick_qr::after {content: ''; position: absolute; right: -15px; margin-top: -70px; width: 10px; height: 10px; display: block; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); background-color: #1c9d38;} #rgt_quick .quick_qr.open{display:block;} #rgt_quick .quick_qr.wechat{border:10px solid #64ab23;} #rgt_quick .quick_qr.wechat::after {background-color: #64ab23;} #rgt_quick .quick_qr.line{border:10px solid #00b900;} #rgt_quick .quick_qr.line::after {background-color: #00b900;} #rgt_quick p.quick_close{margin:0;padding:0;writing-mode: tb-rl;background-color:#fcf9ff;position:fixed;top:0;bottom:0;margin:auto 0;right:0;width:24px;height:75px;color:#111;text-align:center;z-index:99;box-shadow: -2px 2px 10px #e4e4e4;box-sizing:border-box;cursor:pointer;font-size:12px;font-weight:bold;border-radius:5px 0 0 5px;line-height:1.8;} #rgt_quick p.quick_close:before{content:'OPEN';} #rgt_quick + div.quick_csbtn{right:15px;} #rgt_quick.open {right:0; } #rgt_quick.open p.quick_close{right:111px;} #rgt_quick.open p.quick_close:before{content:'CLOSE';} #rgt_quick.open + div.quick_csbtn{right:120px;} #rgt_quick>#MOVE_TOP_BTN{position: fixed; bottom: 0; width:111px; height:25px; line-height: 25px; display: block; border-radius: 0; padding:0; color:#8F58BE; font-size:13px; font-weight: 600; font-family: 'SeoulNamsanM';} #close_quick_top{z-index:1;position: fixed; right:30px; bottom:190px; border-radius: 200px;cursor: pointer;height: 35px; width: 35px; background: #313131;} #rgt_quick.open ~ #close_quick_top{opacity: 0;} #rgt_quick ~ #close_quick_top{opacity: 1; transition: 2s;} #close_quick_top:before {content: "\21E1"; position: absolute; width:100%; height:100%; color:#fff; font-size:22px; text-align: center; } .quick_csbtn {position:fixed;width:177px;right:120px;bottom:100px;cursor:pointer;z-index:99;/* border-radius:25px; */text-align:center;line-height:62px;} .quick_csbtn a {width:177px;height:48px;} .quick_csbtn a.quick_chat{position: absolute;top:60px;left:0;} .quick_csbtn img{width:100%} /* -- 컨텐츠 컨테이너 -- */ .container {min-height:720px;} @media (max-width:768px) { .container {margin-top:50px; margin-bottom: 60px; min-height:unset;} .container>.wrapper {margin:50px auto 0px;} .container>.depth-2 {display:none;} } /* -- 푸터 -- */ .footer {clear:both; font-size:13px; border-top:1px solid #898989; background-color:white;} .footer>.noti{text-align: center; font-family: 'SDKukdetopokki-Lt'; font-weight: 300; line-height: 35px; border-bottom: 1px solid #898989;} .footer>.wrapper address {font-family: 'S-CoreDream'; font-style: normal; font-size:12px; text-align: center;} .footer>.wrapper>div{margin: 5px auto; display: table;} .footer>.wrapper {position:relative; padding:30px 20px 25px; margin:auto;} .footer>.wrapper .bar {background: #555; width: 1px; height: 10px; display: inline-block; line-height: 10px; margin: 0 10px; vertical-align: baseline;} .footer>.wrapper .break-desktop {background: transparent; width: 0; height: 0; display: block;} .footer>.wrapper>ul {} .footer>.wrapper>ul>li {padding-right:16px; box-sizing:border-box; position:relative;} .footer>.wrapper>ul>li::before {content:''; width:2px; height:100%; position:absolute; left:0; background:black;} .footer>.wrapper>ul>li>div {padding-left:20px;} .footer>.wrapper>ul>li>div>span {font-weight:600;position:absolute; left:20px;} .footer>.wrapper>ul>li.addr {width:400px; padding-left:40px;} .footer>.wrapper>ul>li.addr::before {content:none;} .footer>.wrapper>ul>li.info1 {width:220px; padding-left:100px;} .footer>.wrapper>ul>li.info2 {width:185px; padding-left:65px;} .footer>.wrapper>ul>li.info3 {width:340px; padding-left:75px;} .footer>.wrapper>.copyright {text-align: center; color:#c0c0c0;} @media (max-width:768px) { /*.footer {display:none;}*/ .footer {height:auto !important;} .footer .row>* {display: block; float: unset;} .footer>.wrapper {width:100% !important; height: auto !important; margin-bottom: 60px;} .footer>.wrapper>ul>li {width:100% !important; padding-left: 100px !important; margin: 10px 0;} .footer>.wrapper>ul>li::before {width: 0;} .footer>.wrapper .break-mobile {background: transparent; width: 0; height: 0; display: block;} } /* -- 바로 상담 -- */ .counsel {position:fixed; bottom:0; right:0; width:135px; height:135px; overflow:hidden; z-index:8;} /*.counsel_kakao {position: fixed; top: 115px; right: 40px; width: 100px; height: 100px; overflow: hidden; z-index: 9; cursor:pointer;}*/ /*#ch-plugin #ch-plugin-button-position {position: fixed; top: 115px !important; right: 150px !important; width: 100px; height: 100px; overflow: hidden; z-index: 9; cursor:pointer; } #ch-plugin #ch-plugin-button-position img {width:100px !important; height:100px !important;}*/ .counsel_chat {position: fixed; top: 115px; right: 150px; width: 100px; height: 100px; overflow: hidden; z-index: 9; cursor:pointer;} #ch-plugin #ch-plugin-core {overflow: hidden; z-index: 9; cursor: pointer;} #ch-plugin #ch-plugin-core>div[class^='sc-'] {z-index: 9;} /*#ch-plugin #ch-plugin-core #ch-plugin-launcher {width: 100px !important; height: 100px !important; position: fixed !important; top: 115px !important; right: 150px !important;}*/ #ch-plugin #ch-plugin-core .jTosFt {bottom: 170px !important; right: 120px !important;} .counsel>.background {width:200px; height:200px; background-color:/*#ff1557*/#fff100; transform:rotate(45deg) translate(55px, 0px); -ms-transform: rotate(45deg) translate(55px, 0px); z-index:1; cursor:pointer;} .counsel>.content {width:70px; height:100px; position:absolute; bottom:0; right:0; padding-left:10px; padding-top:17px; font-size:14px; font-weight: 500; z-index:2; color:#000000; cursor:pointer;} .counsel>.content>.icon {width:50px; height:40px;} .counsel>.content>.close {display:none;} @media (max-width:768px) { .counsel {width:90px; height:90px; z-index:100000002;} .counsel:not(.open){z-index:999;} .counsel_kakao,.counsel_chat {width:60px; height:60px; top: 60px;} .counsel_kakao {right: 2%;} .counsel_chat {right: calc(3% + 60px);} .counsel_kakao img,.counsel_chat img {width:100%; height:100%;} /*#ch-plugin #ch-plugin-button-position {position: fixed; top: 125px !important; right: 2% !important; width: 60px; height: 60px; overflow: hidden; z-index: 9; cursor:pointer;} #ch-plugin #ch-plugin-button-position img {width:60px !important; height:60px !important;}*/ #ch-plugin #ch-plugin-core #ch-plugin-launcher {width: 60px; height: 60px; position: fixed; top:125px; right: 2% !important;} .counsel>.background {transform:rotate(45deg) translate(23px, 0px);} .counsel.open>.content>div:not(.close):not(.background) {display:none;} .counsel.open>.content>.close {display:block;} .counsel>.content {width:49px; height:60px; letter-spacing:2px; line-height:1.4;} .counsel>.content>.icon {display:none;} } /* -- 오버레이 -- */ .overlay {position:fixed; top:60px; left:0; right:0; bottom:0; z-index:8; transition:opacity 0.425s cubic-bezier(0.7, 0, 0.3, 1); background:rgba(0,0,0,0.6); height:0; opacity:0;} #overlay {position:fixed; z-index:10; background:rgba(0,0,0,0.9); top:0; bottom:0; left:0; right:0; opacity:0;} /* -- 오버레이 - 바로 상담 -- */ #counsel_overlay {top:0; bottom:0; left:0; right:0; background-color:rgba(0,0,0,0.8); display:none; position:fixed; z-index:100000001;} #counsel_overlay>.counsel_wrapper>.quickMenu {position: absolute; top: 0px; left: -80px; width: 80px; height: 675px; background-color:#ff1557;} #counsel_overlay>.counsel_wrapper>.quickMenu p {text-align:center;color:#FFF;} #counsel_overlay>.counsel_wrapper>.quickMenu ul{list-style:none; margin:0; padding:0;} #counsel_overlay>.counsel_wrapper>.quickMenu ul>li{text-align:center; line-height:14px; color:#FFF; margin: 15px 10px;} #counsel_overlay>.counsel_wrapper>.quickMenu>ul>li{cursor:pointer;} #counsel_overlay>.counsel_wrapper>.quickMenu .quick_member{margin: 25px 0 20px 0;} #counsel_overlay>.counsel_wrapper>.quickMenu .quick_member span:first-child::after{content:'';display:block;height:1px;margin:2px 10px; background-color:#FFF;} #counsel_overlay>.counsel_wrapper>.quickMenu ul>li span.qMenu_icon_stargram{background:url('https://nqogzmoxteadbecwmhjy.supabase.co/storage/v1/object/public/jewelryps-public-assets/images/desktop/quick_stargram.95af8af14895.png') 50%; background-repeat: no-repeat;} #counsel_overlay>.counsel_wrapper>.quickMenu ul>li span.qMenu_icon_consult{background:url('https://nqogzmoxteadbecwmhjy.supabase.co/storage/v1/object/public/jewelryps-public-assets/images/desktop/quick_consult.5ad2a8906131.png') 50%; background-repeat: no-repeat;} #counsel_overlay>.counsel_wrapper>.quickMenu ul>li span.qMenu_icon_consult2{background:url('https://nqogzmoxteadbecwmhjy.supabase.co/storage/v1/object/public/jewelryps-public-assets/images/desktop/quick_consult2.45261e664171.png') 50%; background-repeat: no-repeat;} #counsel_overlay>.counsel_wrapper>.quickMenu ul>li span.qMenu_icon_blog{background:url('https://nqogzmoxteadbecwmhjy.supabase.co/storage/v1/object/public/jewelryps-public-assets/images/desktop/quick_blog.29ba7fb68669.png') 50%; background-repeat: no-repeat;} #counsel_overlay>.counsel_wrapper>.quickMenu ul>li span.qMenu_icon_fb{background:url('https://nqogzmoxteadbecwmhjy.supabase.co/storage/v1/object/public/jewelryps-public-assets/images/desktop/quick_fb.8350cd0ac3e2.png') 50%; background-repeat: no-repeat;} #counsel_overlay>.counsel_wrapper>.quickMenu ul>li span.qMenu_icon_insta{background:url('https://nqogzmoxteadbecwmhjy.supabase.co/storage/v1/object/public/jewelryps-public-assets/images/desktop/quick_insta.8c8a8a10a292.png') 50%; background-repeat: no-repeat;} #counsel_overlay>.counsel_wrapper>.quickMenu ul>li span.qMenu_icon_virtual{background:url('https://nqogzmoxteadbecwmhjy.supabase.co/storage/v1/object/public/jewelryps-public-assets/images/desktop/quick_virtual.c70aae38e6c6.png') 50%; background-repeat: no-repeat;} #counsel_overlay>.counsel_wrapper>.quickMenu ul>li span.qMenu_icon_map{background:url('https://nqogzmoxteadbecwmhjy.supabase.co/storage/v1/object/public/jewelryps-public-assets/images/desktop/quick_map.622857dcda37.png') 50%; background-repeat: no-repeat;} #counsel_overlay>.counsel_wrapper>.quickMenu ul>li span { height: 50px; display: block;} #counsel_overlay>.counsel_wrapper, #counsel_overlay>.fin_wrapper, #counsel_overlay>.error_wrapper {width:465px; height:450px; background:white; position:absolute; bottom:0; right:0;} #counsel_overlay>.counsel_wrapper>.close {position:absolute; top:0px; left:-64px; width:44px; height:44px; background:transparent url(https://nqogzmoxteadbecwmhjy.supabase.co/storage/v1/object/public/jewelryps-public-assets/images/desktop/close.182f359b3ee6.png); cursor:pointer;} #counsel_overlay>.counsel_wrapper>.flag {position:absolute; left:0px; font-size:13px; line-height:1; bottom:80px; z-index:2;} #counsel_overlay>.counsel_wrapper>.flag>a {padding:10px 14px; letter-spacing:1px; background-color:#ff1557; color:white; cursor:pointer; transform:rotate(90deg) translateY(71px); -ms-transform:rotate(90deg) translateY(71px); display:block;} #counsel_overlay>.counsel_wrapper>.flag>span {position:absolute; display:block; left:-255px; top:-90px; padding:10px 14px; background-color:#666; color:#292929; opacity:0; transition:opacity 0.25s cubic-bezier(0.7, 0, 0.3, 1);} #counsel_overlay>.counsel_wrapper>.flag>a:hover+span {opacity:1;} #counsel_overlay>.counsel_wrapper>.flag>span::after {content:''; position:absolute; bottom:-6px; right:6px; display:block; width:0; height:0; border:3px solid #666; border-left-color:transparent; border-bottom-color:transparent;} #counsel_overlay>.counsel_wrapper>.lang {height:30px; position:relative; background:#43454c;} #counsel_overlay>.counsel_wrapper>.lang>div {position:relative; right:50%; float:right;} #counsel_overlay>.counsel_wrapper>.lang>div>div {position:relative; left:50%; height:30px; line-height:30px; padding-left:10px; margin-left:10px; color:#919295; cursor:pointer;} #counsel_overlay>.counsel_wrapper>.lang>div>div.select {color:white;} #counsel_overlay>.counsel_wrapper>.lang>div>div::after {content:''; position:absolute; left:0; height:10px; width:1px; background:#919295; margin:auto; top:0; bottom:0;} #counsel_overlay>.counsel_wrapper>.lang>div>div:first-child::after {content:none;} #counsel_overlay>.counsel_wrapper>.kind {height:50px; line-height:50px; font-size: 25px; font-weight: 300; padding-left: 40px; background: #000; color:#fff; position:relative;} #counsel_overlay>.counsel_wrapper>.content_wrapper {height:215px; position:relative;} #counsel_overlay>.counsel_wrapper>.content_wrapper>div {width:100%; height:100%; position:absolute; top:0; left:0;} #counsel_overlay>.counsel_wrapper>.content_wrapper .quick_counsel {} #counsel_overlay>.counsel_wrapper>.content_wrapper .quick_counsel>ul {padding:50px 0 0;} #counsel_overlay>.counsel_wrapper>.content_wrapper .counsel_inquiry {display:none;} #counsel_overlay>.counsel_wrapper>.content_wrapper .counsel_inquiry>ul {padding:20px 0 0;} #counsel_overlay>.counsel_wrapper>.content_wrapper .counsel_inquiry>ul>li>.row>* {padding-right:12px; margin-right:12px; position:relative; color:#aaa; cursor:pointer;} #counsel_overlay>.counsel_wrapper>.content_wrapper .counsel_inquiry>ul>li>.row>*.select {color:#ff1557;} #counsel_overlay>.counsel_wrapper>.content_wrapper .counsel_inquiry>ul>li>.row>*::after {content:''; position:absolute; right:0; height:10px; width:1px; background-color:#aaa; top:0; bottom:0; margin:auto;} #counsel_overlay>.counsel_wrapper>.content_wrapper .counsel_inquiry>ul>li>.row>*:last-child::after {content:none;} #counsel_overlay>.counsel_wrapper>.content_wrapper div>ul {margin:0; padding:0; list-style:none; box-sizing:border-box; height:100%;} #counsel_overlay>.counsel_wrapper>#quickReserv ul {margin:0; padding:100px 0; list-style:none; box-sizing:border-box;} #counsel_overlay>.counsel_wrapper>.content_wrapper div>ul>li, #counsel_overlay>.counsel_wrapper>#quickReserv ul>li {padding:0 50px; position:relative; height:45px; line-height:45px; font-size:13px; margin-bottom:5px;} #counsel_overlay>.counsel_wrapper>.content_wrapper div>ul>li::before, #counsel_overlay>.counsel_wrapper>#quickReserv ul>li::before {content:''; position:absolute; left:40px; bottom:0; top:0; margin:22px 0; width:2px; height:2px; background:black; border-radius:50%;} #counsel_overlay>.counsel_wrapper>.content_wrapper div>ul>li>label, #counsel_overlay>.counsel_wrapper>#quickReserv ul>li>label {width:65px;} #counsel_overlay>.counsel_wrapper>.content_wrapper div>ul>li>input, #counsel_overlay>.counsel_wrapper>#quickReserv ul>li>input {width:300px; height:45px; border:1px dashed #aaa; border-width:0 0 1px 0; padding:0 12px;} #counsel_overlay>.counsel_wrapper>.content_wrapper div>ul>li>input:focus {border-color:black;} #counsel_overlay>.counsel_wrapper>.content_wrapper div>ul>li>textarea {width:300px; height:47px; border:1px dashed #aaa; border-width:0 0 1px 0; resize:none; line-height:22px; padding:12px;} #counsel_overlay>.counsel_wrapper>.content_wrapper div>ul>li>textarea:focus {border-color:black;} #counsel_overlay>.counsel_wrapper>#quickReserv ul>li>select {margin-top: 15px;} #counsel_overlay>.counsel_wrapper>#quickReserv, #counsel_overlay>.counsel_wrapper>#quickMap {width: 465px; height: 645px; margin-top:30px; background: white; position: absolute; bottom: 0; right: 0; z-index: 1; display:none; } #counsel_overlay>.counsel_wrapper>#quickMap>div.info ul {list-style: none; padding: 0 20px;} #counsel_overlay>.counsel_wrapper>#quickMap>div.info ul li {font-size: 13px; padding-left: 80px; box-sizing: border-box; position: relative; min-height: 25px; line-height: 25px; margin-bottom: 25px;} #counsel_overlay>.counsel_wrapper>#quickMap>div.info ul li span {font-weight: 600; position: absolute; left: 0; height: 25px; line-height: 25px; display: block; width: 60px; text-align: justify; text-align-last: justify; letter-spacing: -1px; color: #ff1557;} #counsel_overlay>.counsel_wrapper>#quickMap>div.info ul li.time div {position: relative; padding-left: 65px; height: 25px; line-height: 25px; font-family: 'Poppins',sans-serif; font-weight: 800; font-size: 14px;} #counsel_overlay>.counsel_wrapper>#quickMap>div.info ul li.time div span {font-weight: 400; color: #aaa; width: 50px; font-size: 13px;} #counsel_overlay>.counsel_wrapper>#quickMap>div.map {text-align: center;} #counsel_overlay>.counsel_wrapper>#quickMap>div.map>iframe{width: 90%; height: 375px;} #counsel_overlay>.counsel_wrapper>.btn, #counsel_overlay>.counsel_wrapper>#quickReserv .btn {color:#aaa;} #counsel_overlay>.counsel_wrapper>.btn>.privacy, #counsel_overlay>.counsel_wrapper>#quickReserv .btn>.privacy{padding-left:120px; height:30px; line-height:30px; width:100%;} #counsel_overlay>.counsel_wrapper>.btn>.privacy input[type=checkbox], #counsel_overlay>.counsel_wrapper>#quickReserv .btn>.privacy input[type=checkbox]{display:none;} #counsel_overlay>.counsel_wrapper>.btn>.privacy label, #counsel_overlay>.counsel_wrapper>#quickReserv .btn>.privacy label {padding-left:22px; position:relative; font-size: 13px; height:30px; line-height:30px; display:inline-block;} #counsel_overlay>.counsel_wrapper>.btn>.privacy label::before, #counsel_overlay>.counsel_wrapper>#quickReserv .btn>.privacy label::before {content:''; width:13px; height:13px; position:absolute; top:0; bottom:0; left:0; margin:auto; border:1px solid #aaa; vertical-align:middle;} #counsel_overlay>.counsel_wrapper>.btn>.privacy input[type=checkbox]:checked+label::before, #counsel_overlay>.counsel_wrapper>#quickReserv .btn>.privacy input[type=checkbox]:checked+label::before{background-color:#ff1557;} #counsel_overlay>.counsel_wrapper>.btn>.privacy>a{background: #666;color: #fff;padding: 1px 8px;margin-left: 5px;vertical-align: middle;} #counsel_overlay>.counsel_wrapper>.btn>div.row, #counsel_overlay>.counsel_wrapper>#quickReserv .btn>div.row {float:right; position:relative; width:100%; left:50%; margin-right:60px; padding-top:35px; white-space:nowrap;} #counsel_overlay>.counsel_wrapper>.btn>div>button {width:135px; /*left:50%;*/ border:0; position:relative; margin:0 10px; height:40px; padding:0; background-color:#000; color:white; font-size:17px; font-weight: 400; transition:all 0.25s cubic-bezier(0.7, 0, 0.3, 1); cursor:pointer;} #counsel_overlay>.counsel_wrapper>.btn>div>button:hover { background-color:#666;} #counsel_overlay>.counsel_wrapper>.btn>div>button::before {content:''; display:inline-block; vertical-align:middle; margin-right:6px; width:18px; height:18px; transition:all 0.25s cubic-bezier(0.7, 0, 0.3, 1);} #counsel_overlay>.counsel_wrapper>.btn>div>.kakao {border:0; background-color:#fadf00; color:#3b1c1c; width:155px;} #counsel_overlay>.counsel_wrapper>.btn>div>.kakao::before {background-image:url(https://nqogzmoxteadbecwmhjy.supabase.co/storage/v1/object/public/jewelryps-public-assets/images/desktop/icon_kakao.9ec1eeacba01.png); width:20px; height:18px;} #counsel_overlay>.counsel_wrapper>.btn>div>.call {} /*#counsel_overlay>.counsel_wrapper>.btn>div>.call:hover::before {background-image:url(https://nqogzmoxteadbecwmhjy.supabase.co/storage/v1/object/public/jewelryps-public-assets/images/desktop/icon_call.e0ed989ac935.png);}*/ #counsel_overlay>.counsel_wrapper>.btn>div>.call::before {background-image:url(https://nqogzmoxteadbecwmhjy.supabase.co/storage/v1/object/public/jewelryps-public-assets/images/desktop/icon_call_w.9d267e3c490b.png); background-size:18px;} #counsel_overlay>.counsel_wrapper>.btn>div>.text {} #counsel_overlay>.counsel_wrapper>.btn>div>.text::before {background-image:url(https://nqogzmoxteadbecwmhjy.supabase.co/storage/v1/object/public/jewelryps-public-assets/images/desktop/icon_text.1484f642604a.png);} #counsel_overlay>.counsel_wrapper>.btn>div>.text:hover::before {background-image:url(https://nqogzmoxteadbecwmhjy.supabase.co/storage/v1/object/public/jewelryps-public-assets/images/desktop/icon_text_w.ab156b45f1b4.png);} #counsel_overlay>.fin_wrapper, #counsel_overlay>.error_wrapper {display:none; background-color:rgba(0,0,0,0.6);} #counsel_overlay>.fin_wrapper>div {text-align:center; height:70px; position:absolute; top:0; bottom:0; margin:auto; left:0; right:0;} #counsel_overlay>.fin_wrapper>div>p {margin:0 0 20px; font-size:16px; color:white; line-height:25px;} #counsel_overlay>.fin_wrapper>div>p:last-child {margin:0;} #counsel_overlay>.error_wrapper>div {text-align:center; height:70px; position:absolute; top:0; bottom:0; margin:auto; left:0; right:0;} #counsel_overlay>.error_wrapper>div>p {margin:0 0 20px; font-size:16px; color:white; line-height:25px;} #counsel_overlay>.error_wrapper>div>p:last-child {margin:0;} @media (max-width:768px) { #counsel_overlay>.counsel_wrapper>.close {display:none;} #counsel_overlay>.counsel_wrapper, #counsel_overlay>.fin_wrapper, #counsel_overlay>.error_wrapper {width:300px; height:450px; top:50px; bottom:70px;} #counsel_overlay>.counsel_wrapper>.content_wrapper {height:calc(100% - 75px); padding-bottom:85px; overflow:hidden;} #counsel_overlay>.counsel_wrapper>.content_wrapper .quick_counsel>ul {padding:90px 0 0;} #counsel_overlay>.counsel_wrapper>.content_wrapper div>ul>li, #counsel_overlay>.counsel_wrapper>#quickReserv ul>li {padding:0 25px 0 85px; height:30px; line-height:30px; font-size:11px;} #counsel_overlay>.counsel_wrapper>.content_wrapper div>ul>li::before, #counsel_overlay>.counsel_wrapper>#quickReserv ul>li::before {left:15px; bottom:auto; margin: auto; bottom:initial; top:14px;} #counsel_overlay>.counsel_wrapper>.content_wrapper div>ul>li:last-child, #counsel_overlay>.counsel_wrapper>#quickReserv ul>li:last-child {height:60px;} #counsel_overlay>.counsel_wrapper>.content_wrapper div>ul>li>label, #counsel_overlay>.counsel_wrapper>#quickReserv ul>li>label {position:absolute; left:25px;} #counsel_overlay>.counsel_wrapper>.content_wrapper div>ul>li>input, #counsel_overlay>.counsel_wrapper>#quickReserv ul>li>input {width:100%; height:30px;} #counsel_overlay>.counsel_wrapper>.content_wrapper div>ul>li>textarea {width:100%; height:60px;} #counsel_overlay>.counsel_wrapper>.content_wrapper div>ul>li select, #counsel_overlay>.counsel_wrapper>#quickReserv ul>li select {font-size:11px; height:30px; line-height:30px; margin-top: 0;} #counsel_overlay>.counsel_wrapper>.content_wrapper>div {position:static;} #counsel_overlay>.counsel_wrapper>.content_wrapper .counsel_inquiry>ul>li {margin-bottom:0;} #counsel_overlay>.counsel_wrapper>.content_wrapper .counsel_inquiry>ul>li>.row>* {padding-right:5px; margin-right:5px;} #counsel_overlay>.counsel_wrapper>.btn {margin-top:0px; position:absolute; bottom:15px; left:0; right:0;} #counsel_overlay>.counsel_wrapper>.btn>div.row, #counsel_overlay>.counsel_wrapper>#quickReserv .btn>div.row {display:flex; padding:0 10px; right:0; float:none;} #counsel_overlay>.counsel_wrapper>.btn>div>button {margin:0 3px; left:0; font-size:10px; height:35px;} #counsel_overlay>.counsel_wrapper>#quickReserv .btn>div>button {margin:0 3px; left:50%; font-size:10px; height:35px;} #counsel_overlay>.counsel_wrapper>.btn>.privacy, #counsel_overlay>.counsel_wrapper>#quickReserv .btn>.privacy {padding-right:15px;} #counsel_overlay>.counsel_wrapper>.lang>div>div {padding-left:5px; margin-left:5px; font-size:10px;} #counsel_overlay>.counsel_wrapper>.kind {height:45px; line-height:45px;} #counsel_overlay>.counsel_wrapper>.kind>div.floater {left:35px;} #counsel_overlay>.counsel_wrapper>.flag>a {font-size:11px; transform:rotate(90deg) translateY(65px);} #counsel_overlay>.counsel_wrapper>#quickReserv ul {padding:35px 0;} #counsel_overlay>.counsel_wrapper>.quickMenu {height: 450px; left: -70px; width: 70px;} #counsel_overlay>.counsel_wrapper>.quickMenu .quick_member{margin: 7px 0 0 0; font-size:11px;} #counsel_overlay>.counsel_wrapper>.quickMenu ul>li {height: 47px; margin: 8px; font-size: 0; } #counsel_overlay>.counsel_wrapper>#quickMap, #counsel_overlay>.counsel_wrapper>#quickReserv {width: 300px; height: 420px; } #counsel_overlay>.counsel_wrapper>.kind, #counsel_overlay>.counsel_wrapper>#quickReserv>.kind2{height: 45px; line-height: 45px;} #counsel_overlay>.counsel_wrapper>#quickMap>div.info ul li {font-size: 12px; min-height: 25px; line-height: 25px; margin-bottom: 5px;} #counsel_overlay>.counsel_wrapper>#quickMap>div.info ul li span { left: 10px; height: 20px; line-height: 20px;} #counsel_overlay>.counsel_wrapper>#quickMap>div.info ul li.time div {height: 20px; line-height: 20px;font-size: 13px;} #counsel_overlay>.counsel_wrapper>#quickMap>div.info ul li.time div span {font-size: 12px;} #counsel_overlay>.counsel_wrapper>#quickMap>div.map>iframe{ height: 230px;} } /* overlay - 회원 가입, 로그인 */ #overlayMember.u {position:fixed; z-index:999; background:rgba(0,0,0,0.6); top:0; bottom:0; left:0; right:0; animation-name:u_ol; animation-duration:0.25s; animation-direction:alternate; animation-fill-mode:forwards; animation-timing-function:ease-in-out;} #overlayMember.u.ready {animation-name:u_ol_b;} #overlayMember.u.f {animation-name:u_ol_f;} #overlayMember.u.force {animation-name:u_ol_force;} #overlayMember.u div.layer-popup {width:700px; margin:auto; position:absolute; top:0; bottom:0; left:0; right:0; background-color:white; border-radius:8px; padding:50px 40px 0 60px;} #overlayMember.u div.layer-popup::before {content:''; position:absolute; top:0; left:0; width:8px; height:100%; background-color:#ff1557; border-radius:8px 0 0 8px;} #overlayMember.u div.layer-popup::after {position:absolute; top:20px; right:40px; font-size:18px; font-weight:800; font-family:'Poppins',sans-serif; color:#ff1557;} #overlayMember.u div.layer-popup>.close {position:absolute; right:-50px; top:10px; background-image:url(https://nqogzmoxteadbecwmhjy.supabase.co/storage/v1/object/public/jewelryps-public-assets/images/desktop/icon_user_overlay_close.4187445358bc.png); width:36px; height:36px; background-size:36px 36px; cursor:pointer;} #overlay.u {position:fixed; z-index:15; background:rgba(0,0,0,0.9); top:0; bottom:0; left:0; right:0; animation-name:u_ol; animation-duration:0.25s; animation-direction:alternate; animation-fill-mode:forwards; animation-timing-function:ease-in-out;} #overlay.u.ready {animation-name:u_ol_b;} #overlay.u.f {animation-name:u_ol_f;} #overlay.u.force {animation-name:u_ol_force;} #overlay.u > div {width:700px; margin:auto; position:absolute; top:0; bottom:0; left:0; right:0; background-color:white; border-radius:8px; padding:80px 40px 0 60px;} #overlay.u > div::before {content:''; position:absolute; top:0; left:0; width:8px; height:100%; background-color:#ff1557; border-radius:8px 0 0 8px;} #overlay.u > div::after {position:absolute; top:20px; right:40px; font-size:18px; font-weight:800; font-family:'Poppins',sans-serif; color:#ff1557;} #overlay.u div.close {position:absolute; right:8px; top:-50px; background-image:url(https://nqogzmoxteadbecwmhjy.supabase.co/storage/v1/object/public/jewelryps-public-assets/images/desktop/icon_user_overlay_close.4187445358bc.png); width:36px; height:36px; background-size:36px 36px; cursor:pointer;} @keyframes u_ol { 0% {opacity:0;} 100% {opacity:0;} } @keyframes u_ol_b { 0% {opacity:1;} 100% {opacity:0;} } @keyframes u_ol_f { 0% {opacity:0;} 100% {opacity:1;} } @keyframes u_ol_force { 0% {opacity:1;} 100% {opacity:1;} } @keyframes u_ol_blink{ 50%{opacity: 0;} } /* overlay - 로그인 */ #overlayMember.u div .form {margin-top:0;} #overlayMember.u .login {height:300px; padding:80px 100px 0 60px; transition:height 0.25s ease-in-out;} #overlayMember.u .login.find {height:580px;} #overlayMember.u .login.find_id {height:530px;} #overlayMember.u .login::after {content:'LOGIN';} #overlayMember.u div.login div.divider {/*(margin-left:-60px; margin-right:-100px;*/ height:0; border-bottom:1px dashed #e6e6e6;} #overlayMember.u div.login {user-select:none; -webkit-user-select:none; -moz-user-select:none;} #overlayMember.u div.login .form>div>div {width:66%;} #overlayMember.u div.login .form>div>div>div {height:46px; padding-left:110px; position:relative; padding-right:30px;} #overlayMember.u div.login .form>div>div>div:not(:last-child) {margin-bottom:12px;} #overlayMember.u div.login .form>div>div>div>span {position:absolute; left:0; top:0; height:46px; line-height:46px; width:90px; display:block; text-align:right; font-size:13px; font-weight:800; font-family:'Poppins',sans-serif; color:#ff1557; cursor:default;} #overlayMember.u div.login .form>div>div>div>input {width:210px; height:46px; line-height:46px; padding:0 12px; border:1px solid #e6e6e6; border-width:0 0 1px 0; color:#aaa; transition:border 0.15s ease-in-out;} #overlayMember.u div.login .form>div>div>div>input:focus {border-color:#ff1557;} #overlayMember.u div.login .form>div>div.btn {width:30%; padding-top:46px;} #overlayMember.u div.login .form>div>div.btn>button {display:block; height:56px; width:100%; padding:0; text-align:center; border:3px solid #ff1557; background-color:white; color:#ff1557; cursor:pointer;} #overlayMember.u div.login .form>div>div.btn>button:hover {background-color:#ff1557; color:white;} #overlayMember.u div.login .link {padding-top:10px; text-align:center; /*margin-right:-60px;*/ padding-bottom:30px;} #overlayMember.u div.login .link>a {padding-bottom:6px; padding: 3px 10px; border:1px solid #aaa; border-radius: 10px; box-shadow: 1px 1px #aaa; color:#aaa; font-weight: 300; cursor:pointer; margin-left:6px; display:inline-block;} #overlayMember.u div.login.find .link>a[data-action=find_pwd], #overlayMember.u div.login.find_id .link>a[data-action=find_id], #overlayMember.u div.login .link>a:hover {color:#fff; background-color: #757575} #overlayMember.u div.login .link>div.social {margin:15px 0 25px;} #overlayMember.u div.login .link>div.social>a{position: relative; border: 1px solid #aaa; padding: 5px 10px 5px 40px; color:#fff;display: inline-block;} #overlayMember.u div.login .link>div.social>a>i {position: absolute; margin: auto 0; top: 0; bottom: 0; left: 10px; width: 24px; height: 24px; background-repeat: no-repeat;} #overlayMember.u div.login .link>div.social>a.facebook {background-color: #4267B2;} #overlayMember.u div.login .link>div.social>a.naver {background-color: #1ec800;} #overlayMember.u div.login .link>div.social>a.kakao {background-color: #ffeb00; color: #3c1e1e;} #overlayMember.u div.login .link>div.social>a.facebook i {background-image:url(https://nqogzmoxteadbecwmhjy.supabase.co/storage/v1/object/public/jewelryps-public-assets/images/icon_facebook.067ade00c3ce.png); background-size: 24px 24px;} #overlayMember.u div.login .link>div.social>a.kakao i {background-image:url(https://nqogzmoxteadbecwmhjy.supabase.co/storage/v1/object/public/jewelryps-public-assets/images/icon_kakao_.f3f87db39e1f.png); background-size: 24px 24px; border-radius: 12px;} #overlayMember.u div.login .link>div.social>a.naver i {background-image:url(https://nqogzmoxteadbecwmhjy.supabase.co/storage/v1/object/public/jewelryps-public-assets/images/icon_naver.37c144089f34.png); background-size: 24px 24px; border-radius: 12px;} /*pw찾기*/ #overlayMember.u div.login > form > .find {overflow:hidden; height:0; margin-left:-60px; margin-right:-100px; padding-left:60px; padding-right:100px; transition:height 0.25s ease-in-out;} #overlayMember.u div.login > form > .find .form {padding-top:30px; padding-bottom:30px;} #overlayMember.u div.login > form > .find .form>div>div {width:100%;} #overlayMember.u div.login > form > .find .form>div>div>div {padding-right:0;} #overlayMember.u div.login > form > .find .form>div>div>div>button {height:46px; border:3px solid #ff1557;width:160px; float:right; background-color:white; color:#ff1557;} #overlayMember.u div.login > form > .find .form>div>div>div>button:hover {background-color:#ff1557; color:white; cursor: pointer;} #overlayMember.u div.login > form > .find .form>div>div>div>select {height:46px; border:1px solid #e6e6e6; border-width:0 0 1px 0; margin-left:12px; appearance:none; -webkit-appearance:none; -moz-appearance:none; width:90px; padding:0 30px 0 12px; box-sizing:content-box; float:right; background-image:url(https://nqogzmoxteadbecwmhjy.supabase.co/storage/v1/object/public/jewelryps-public-assets/images/desktop/appo_arrow_down.667c9e70ed2f.png); background-repeat:no-repeat; background-position:95% 50%;} #overlayMember.u div.login > form > .find .form>div>div>div>select::-ms-expand {display:none;} #overlayMember.u div.login > form > .find .form>div>div>div.email>input {} #overlayMember.u div.login > form > .find .form>div>div>div.name>input {} #overlayMember.u div.login > form > .find .txt {width:100%; padding-top:20px; text-align:center; color:#aaa; } #overlayMember.u div.login > form > .find .txt p {background-color:#5b3eb3; margin:0; padding:5px 0; font-weight: 300; color: #fff;} #overlayMember.u div.login.find > form >.find {height:280px;} /*id찾기*/ #overlayMember.u div.login > form > .find_id {overflow:hidden; height:0; margin-left:-60px; margin-right:-100px; padding-left:60px; padding-right:100px; transition:height 0.25s ease-in-out;} #overlayMember.u div.login > form > .find_id .form {padding-top:30px; padding-bottom:30px;} #overlayMember.u div.login > form > .find_id .form>div>div {width:100%;} #overlayMember.u div.login > form > .find_id .form>div>div>div {padding-right:0;} #overlayMember.u div.login > form > .find_id .form>div>div>div>button {height:46px; border:3px solid #ff1557;width:160px; float:right; background-color:white; color:#ff1557;} #overlayMember.u div.login > form > .find_id .form>div>div>div>button:hover {background-color:#ff1557; color:white; cursor: pointer;} #overlayMember.u div.login > form > .find_id .txt {width:100%; padding-top:20px; text-align:center; color:#aaa; } #overlayMember.u div.login > form > .find_id .txt p {background-color:#5b3eb3; margin:0; padding:5px 0; font-weight: 300; color: #fff;} #overlayMember.u div.login.find_id > form >.find_id {height:230px;} /* overlay - 회원가입 */ #overlayMember.u > form > .join {height:450px;} #overlayMember.u > form > .join::after {content:'JOIN'; } #overlayMember.u > form > div.join>.form {user-select:none; -webkit-user-select:none; -moz-user-select:none;} #overlayMember.u > form > div.join>.form button[data-action] {height:32px; border:0; padding:0 12px; color:white; background-color:#535353; cursor:pointer;} #overlayMember.u > form > div.join>.form button[data-action]:hover {background-color:#333;} #overlayMember.u > form > div.join>.form input[type=checkbox], #overlayMember.u > form > div.join>.form input[type=radio] {width:1px; height:1px; margin-right:-3px; display:inline-block; color:transparent; background-color:transparent; border:0;} #overlayMember.u > form > div.join>.form input[type=checkbox]+label, #overlayMember.u > form > div.join>.form input[type=radio]+label {padding-left:25px; position:relative; height:32px; line-height:32px; margin-right:6px; display:inline-block;} #overlayMember.u > form > div.join>.form input[type=checkbox]+label::before, #overlayMember.u > form > div.join>.form input[type=radio]+label::before {content:''; position:absolute; left:0; top:0; bottom:0; margin:auto; width:16px; height:16px; border:1px solid #e6e6e6; transition:background 0.25s cubic-bezier(0.7, 0, 0.3, 1);} #overlayMember.u > form > div.join>.form input[type=checkbox]:checked+label::before, #overlayMember.u > form > div.join>.form input[type=radio]:checked+label::before {background-color:#ff1557;} #overlayMember.u > form > div.join>.form .info-txt {display: inline-block; color: #afafaf; margin-left: 10px;} #overlayMember.u > form > div.join>.form>div.divider {margin-left:-60px; margin-right:-40px; height:0; border-bottom:1px dashed #e6e6e6;} #overlayMember.u > form > div.join>.form>div.agreement {} #overlayMember.u > form > div.join>.form>div.agreement>label {width:255px; text-align:right; display:block; margin-left:auto; margin-right:0; color:#aaa;} #overlayMember.u > form > div.join>.form>div.agreement>label>a {text-decoration:underline;} #overlayMember.u > form > div.join>.form>div.btn {padding-top:20px; text-align:right;} #overlayMember.u > form > div.join>.form>div.btn>button {height:44px; border:2px solid #9f9f9f; padding:16px 70px; line-height:0; background-color:white; color:#9f9f9f;} #overlayMember.u > form > div.join>.form>div.btn>button[data-action=member_join] {border-color:#ff1557; color:#ff1557; margin-left:6px;} #overlayMember.u > form > div.join>.form>div.btn>button[data-action=cancel]:hover {background-color:#9f9f9f; color:white;} #overlayMember.u > form > div.join>.form>div.btn>button[data-action=member_join]:hover {background-color:#ff1557; color:white;} #overlayMember.u > form > div.join>.form>div:not(:last-child) {margin-bottom:12px;} #overlayMember.u > form > div.join>.form>div>div {height:32px;} #overlayMember.u > form > div.join>.form>div>div>input {height:32px; box-sizing:border-box; margin:0; border:1px solid #e6e6e6; padding:0 12px; width:100%;} #overlayMember.u > form > div.join>.form>div>div>input:focus {border-color:#ff1557;} #overlayMember.u > form > div.join>.form>div>div>select {height:32px; padding:0 6px; border:1px solid #e6e6e6; float:left;} #overlayMember.u > form > div.join>.form>div>div>select#birth_year {width:33.3333%;} #overlayMember.u > form > div.join>.form>div>div>select#birth_month {width:calc(33.3333% - 5px); margin-left:5px;} #overlayMember.u > form > div.join>.form>div>div>select#birth_day {width:calc(33.3333% - 5px); margin-left:5px;} #overlayMember.u > form > div.join>.form>div.row>div {width:50%;} #overlayMember.u > form > div.join>.form>div.row>div:nth-child(odd) {padding-right:5px;} #overlayMember.u > form > div.join>.form>div.row>div:nth-child(even) {padding-left:5px;} #overlayMember.u > form > div.join>.form>div>div:not(.np) {padding-left:100px; position:relative; box-sizing:border-box;} #overlayMember.u > form > div.join>.form>div>div:not(.np)>span {position:absolute; left:0; top:0; padding-left:15px; line-height:32px; white-space:nowrap;} #overlayMember.u > form > div.join>.form>div>div:not(.np)>span::before {content:''; position:absolute; left:1px; top:0; bottom:0; width:4px; height:4px; background-color:#ff1557; transform:rotate(45deg); margin:auto;} #overlayMember.u > form > div.join>.form>div>div:not(.np):not(.require)>span::before {content:none;} #overlayMember.u > form > div.join>.form>div>div:not(.np):nth-child(even) {padding-left:105px;} #overlayMember.u > form > div.join>.form>div>div:not(.np):nth-child(even)>span {left:10px;} #overlayMember.u > form > div>.agreement, #overlayMember.u > form > div.join>.policy {position:absolute; top:0; left:8px; bottom:100%; right:0; border-radius:0 8px 8px 0; background-color:white; animation-name:u_ol; animation-duration:0.25s; animation-direction:alternate; animation-fill-mode:forwards; animation-timing-function:ease-in-out; z-index:2; overflow-x:hidden; overflow-y:auto; transition:bottom 0.25s ease-in-out; padding:20px 40px 20px 25px; border:0;} #overlayMember.u.ready > form > div.join>.policy, #overlayMember.u.ready > form > div.join>.agreement {animation-name:u_ol_b;} #overlayMember.u.ready > form > div.join>.policy::-webkit-scrollbar, #overlayMember.u.ready > form > div.join>.agreement::-webkit-scrollbar {border-radius:0 8px 8px 0; width:8px; overflow:hidden;} #overlayMember.u.ready > form > div.join>.policy::-webkit-scrollbar-thumb, #overlayMember.u.ready > form > div.join>.agreement::-webkit-scrollbar-thumb {min-height:12px; background-color:#818181;} #overlayMember.u.ready > form > div.join>.policy::-webkit-scrollbar-button, #overlayMember.u.ready > form > div.join>.agreement::-webkit-scrollbar-button {height:8px;} #overlayMember.u.ready > form > div.join>.policy.focus, #overlayMember.u.ready > form > div.join>.agreement.focus {bottom:0; animation-name:u_ol_f;} #overlayMember.u.ready > form > div.join>.agreement::before, #overlayMember.u.ready > form > div.join>.policy::before {position:absolute; top:20px; right:30px; font-size:18px; font-weight:800; color:#ff1557;} /*#overlayMember.u.ready > form > div.join>.agreement::before {content:'利用規約';} #overlayMember.u.ready > form > div.join>.policy::before {content:'個人情報処理方針';}*/ #overlayMember.u > div.member_join {height:300px;} #overlayMember.u > div.member_join::after {content:'JOIN';} #overlayMember.u > div.member_join>div:not(.close) {position:absolute; top:0; bottom:0; left:0; right:0; height:40px; font-size:18px; line-height:40px; text-align:center; margin:auto;} /* overlay - 마이페이지 */ #overlayMember.u > form > div.mypage {height:440px; padding:90px 40px 0 60px; transition:height 0.25s ease-in-out;} #overlayMember.u > form > div.mypage::after {content:'MYPAGE';} #overlayMember.u > form > div.mypage>.form {user-select:none; -webkit-user-select:none; -moz-user-select:none;} #overlayMember.u > form > div.mypage>.form button[data-action] {height:32px; border:0; padding:0 12px; color:white; background-color:#535353; cursor:pointer;} #overlayMember.u > form > div.mypage>.form button[data-action]:hover {background-color:#333;} #overlayMember.u > form > div.mypage>.form input[type=checkbox], #overlayMember.u > form > div.mypage>.form input[type=radio] {appearance:none; -webkit-appearance:none; -moz-appearance:none; display:none;} #overlayMember.u > form > div.mypage>.form input[type=checkbox]+label, #overlayMember.u > form > div.mypage>.form input[type=radio]+label {padding-left:25px; position:relative; height:32px; line-height:32px; margin-right:6px; display:inline-block;} #overlayMember.u > form > div.mypage>.form input[type=checkbox]+label::before, #overlayMember.u > form > div.mypage>.form input[type=radio]+label::before {content:''; position:absolute; left:0; top:0; bottom:0; margin:auto; width:16px; height:16px; border:1px solid #e6e6e6; transition:background 0.25s cubic-bezier(0.7, 0, 0.3, 1);} #overlayMember.u > form > div.mypage>.form input[type=checkbox]:checked+label::before, #overlayMember.u > form > div.mypage>.form input[type=radio]:checked+label::before {background-color:#ff1557;} #overlayMember.u > form > div.mypage>.form>div.divider {margin-left:-60px; margin-right:-40px; height:0; border-bottom:1px dashed #e6e6e6; margin-top:30px;} #overlayMember.u > form > div.mypage>.form>div.agreement {} #overlayMember.u > form > div.mypage>.form>div.agreement>label {width:255px; text-align:right; display:block; margin-left:auto; margin-right:0; color:#aaa;} #overlayMember.u > form > div.mypage>.form>div.agreement>label>a {text-decoration:underline;} #overlayMember.u > form > div.mypage>.form>div.btn {padding-top:20px; text-align:right;} #overlayMember.u > form > div.mypage>.form>div.btn>button {height:44px; border:2px solid #9f9f9f; padding:16px 70px; line-height:0; background-color:white; color:#9f9f9f;} #overlayMember.u > form > div.mypage>.form>div.btn>button[data-action=mypage_edit] {border-color:#ff1557; color:#ff1557; margin-left:6px;} #overlayMember.u > form > div.mypage>.form>div.btn>button[data-action=mypage_cancel]:hover {background-color:#9f9f9f; color:white;} #overlayMember.u > form > div.mypage>.form>div.btn>button[data-action=mypage_edit]:hover {background-color:#ff1557; color:white;} #overlayMember.u > form > div.mypage>.form>div:not(:last-child) {margin-bottom:12px;} #overlayMember.u > form > div.mypage>.form>div>div {height:32px;} #overlayMember.u > form > div.mypage>.form>div>div>input {height:32px; box-sizing:border-box; margin:0; border:1px solid #e6e6e6; padding:0 12px; width:100%;} #overlayMember.u > form > div.mypage>.form>div>div>select {height:32px; padding:0 6px; border:1px solid #e6e6e6; float:left;} #overlayMember.u > form > div.mypage>.form>div>div>select#birth_year {width:33.3333%;} #overlayMember.u > form > div.mypage>.form>div>div>select#birth_month {width:calc(33.3333% - 5px); margin-left:5px;} #overlayMember.u > form > div.mypage>.form>div>div>select#birth_day {width:calc(33.3333% - 5px); margin-left:5px;} #overlayMember.u > form > div.mypage>.form>div.row>div {width:50%;} #overlayMember.u > form > div.mypage>.form>div.row>div:nth-child(odd) {padding-right:5px;} #overlayMember.u > form > div.mypage>.form>div.row>div:nth-child(even) {padding-left:5px;} #overlayMember.u > form > div.mypage>.form>div>div:not(.np) {padding-left:100px; position:relative; box-sizing:border-box;} #overlayMember.u > form > div.mypage>.form>div>div:not(.np)>span {padding-left:15px; line-height:32px; white-space:nowrap;} #overlayMember.u > form > div.mypage>.form>div>div:not(.np)>span:first-child {position:absolute; left:0; top:0;} #overlayMember.u > form > div.mypage>.form>div>div:not(.np)>span::before {content:''; position:absolute; left:1px; top:0; bottom:0; width:4px; height:4px; background-color:#ff1557; transform:rotate(45deg); margin:auto;} #overlayMember.u > form > div.mypage>.form>div>div.require.not>span::before {background:#535353;} #overlayMember.u > form > div.mypage>.form>div>div:not(.np):not(.require)>span::before {content:none;} #overlayMember.u > form > div.mypage>.form>div>div:not(.np):nth-child(even) {padding-left:105px;} #overlayMember.u > form > div.mypage>.form>div>div:not(.np):nth-child(even)>span {left:10px;} /* overlay - 회원 모바일 */ @media (max-width:768px) { #overlayMember.u {z-index:12;} #overlayMember.u > form > div>.agreement, #overlayMember.u > form > div.join>.policy {position:fixed; top:50px; left:0; right:0; padding:0px 20px;} #overlayMember.u > form > div>.agreement button, #overlayMember.u > form > div.join>.policy button {display:block; width:100%; height:40px; text-align:center; border:2px solid #ff1557; color:#ff1557; font-size:12px; background-color:white; margin-top:60px;} #overlayMember.u > form > div>.agreement.focus, #overlayMember.u > form > div.join>.policy.focus {padding:120px 20px 40px;} #overlayMember.u div.layer-popup {width:100%; height:calc(100% - 50px) !important; top:50px; border-radius:0; overflow-x:hidden; overflow-y:auto; padding:120px 30px 20px;} #overlayMember.u div.layer-popup::before {content:none;} #overlayMember.u div.layer-popup::after {width:70px; font-size:12px; text-align:center; left:40px; margin:auto; text-align:center; width:50px; color:#ccc; font-weight:400; top:55px; border-bottom:2px solid #ff1557; padding-bottom:10px;} #overlayMember.u div.layer-popup.login::before {content:'ログイン'; background-color:transparent; font-size:16px; right:0; top:20px; width:60px; text-align:center; margin:auto;} #overlayMember.u div.layer-popup.join::before {content:'会員登録'; background-color:transparent; font-size:16px; right:0; top:20px; width:60px; text-align:center; margin:auto; height:30px;} #overlayMember.u div.layer-popup.join>.agreement::before {background-color:transparent; font-size:16px; left:30px; top:20px; width:80px; text-align:center; margin:auto; font-weight:400 !important; color:black !important;} #overlayMember.u div.layer-popup.join>.agreement::after {content:'Terms and Conditions'; position:absolute; top:55px; left:0; right:0; margin:auto; width:135px; text-align:center; padding-bottom:10px; border-bottom:2px solid #ff1557; color:#ccc;} #overlayMember.u div.layer-popup.join>.policy::before {background-color:transparent; font-size:16px; left:30px; top:20px; width:160px; text-align:center; margin:auto; font-weight:400 !important; color:black !important;} #overlayMember.u div.layer-popup.join>.policy::after {content:'Privacy Policy'; position:absolute; top:55px; left:0; right:0; margin:auto; width:100px; text-align:center; padding-bottom:10px; border-bottom:2px solid #ff1557; color:#ccc;} #overlayMember.u div.layer-popup>.close {display:none;} #overlayMember.u div.login .form>div>div {width:100%;} #overlayMember.u div.login .form>div>div.btn {width:100%; padding-top:20px; padding-left:55px;} #overlayMember.u div.login .form>div>div.btn>button {height:40px;} #overlayMember.u div.login .form>div>div>div {padding-left:55px; height:auto; padding-right:0;} #overlayMember.u div.login .form>div>div>div>input {height:30px; line-height:30px; border-width:1px 1px 1px 1px; width:100%; box-sizing:border-box;} #overlayMember.u div.login .form>div>div>div>span {width:45px; height:30px; line-height:30px;} #overlayMember.u .login.find {height:auto;} #overlayMember.u div.login>form>.find {margin-left:-30px; margin-right:-30px; padding-left:30px; padding-right:30px;} #overlayMember.u div.login>form>.find .txt {margin:0; word-break:keep-all;} #overlayMember.u div.login.find>form>.find {height:245px;} #overlayMember.u div.login>form>.find .form>div>div>div>button {margin-top:12px; height:40px; width:100%;} /* overlay - 소셜 로그인 */ #overlayMember div.login .link {padding-top:30px;} #overlayMember div.login .link .social {float:none; margin:30px -30px 0; padding:30px; border-top:1px dashed #e6e6e6; text-align:left;} #overlayMember div.login .link .social a {display:inline-block; margin-right:50%; margin-bottom:6px; padding-left:20px; height:15px; background-position:left center; background-repeat:no-repeat; background-size:auto 15px; line-height:15px; color:#aaa; cursor:pointer; position:relative; text-align:left; border:0;} #overlayMember div.login .link .social a::after {content:''; position:absolute; left:20px; right:0; bottom:0; height:1px; background-color:#aaa;} #overlayMember div.login .link>div.social>a>i {position: absolute; margin: auto 0; top: 0; bottom: 0; left: 10px; width: 24px; height: 24px; background-repeat: no-repeat;} #overlayMember div.login .link>div.social>a.facebook i {background-image:url(https://nqogzmoxteadbecwmhjy.supabase.co/storage/v1/object/public/jewelryps-public-assets/images/icon_facebook.067ade00c3ce.png); background-size: 24px 24px;} #overlayMember div.login .link>div.social>a.kakao i {background-image:url(https://nqogzmoxteadbecwmhjy.supabase.co/storage/v1/object/public/jewelryps-public-assets/images/icon_kakao_.f3f87db39e1f.png);} #overlayMember div.login .link>div.social>a.naver i {background-image:url(https://nqogzmoxteadbecwmhjy.supabase.co/storage/v1/object/public/jewelryps-public-assets/images/icon_naver.37c144089f34.png);} #overlayMember.u div.login div.divider {margin-left:-30px; margin-right:-30px;} #overlayMember.u > form > div.join>.form>div.row>div {width:100%;} #overlayMember.u > form > div.join>.form>div.row>div:nth-child(odd) {padding-right:0; margin-bottom:12px;} #overlayMember.u > form > div.join>.form>div>div:not(.np) {padding-left:110px;} #overlayMember.u > form > div.join>.form>div>div:not(.np):nth-child(even) {padding-left:110px} #overlayMember.u > form > div.join>.form>div>div:not(.np):nth-child(even)>span {left:0;} #overlayMember.u > form > div.join>.form>div.row>div.np {padding-left:110px;} #overlayMember.u > form > div.mypage {padding:30px 20px 50px 20px;} #overlayMember.u > form > div.mypage::after {content:none !important;} #overlayMember.u > form > div.mypage .mp_title {height:40px; margin:0 auto 10px; position:relative;} #overlayMember.u > form > div.mypage .mp_title::before {content:'マイページ'; font-size:16px; position:absolute; top:0; left:0; right:0; text-align:center;} #overlayMember.u > form > div.mypage .mp_title::after {content:'MY PAGE'; font-size:11px; position:absolute; bottom:0; left:0; right:0; text-align:center; color:#ccc;} #overlayMember.u > form > div.mypage>.form>div.row>div {width:100%;} #overlayMember.u > form > div.mypage>.form>div.row>div:not(:first-child) {margin-top:12px;} #overlayMember.u > form > div.mypage>.form>div.row>div:nth-child(odd) {padding-right:0;} #overlayMember.u > form > div.mypage>.form>div.row>div:nth-child(even) {padding-left:100px;} #overlayMember.u > form > div.mypage>.form>div>div:not(.np):nth-child(even) {padding-left:100px;} #overlayMember.u > form > div.mypage>.form>div>div:not(.np):nth-child(even)>span {left:0;} #overlayMember.u > form > div.mypage>.form button[data-action] {width:100%;} #overlayMember.u > form > div.mypage>.form>div.btn {display:flex;} #overlayMember.u > form > div.mypage>.form>div.btn>button {padding:16px 0;} } /* 게시글 - 수정, 삭제 */ .ask_pwd {} .ask_pwd>div {margin: auto; height:200px; width:500px; padding:40px 90px 40px 110px;} .ask_pwd>div>div>div.text {text-align:center; font-size:20px; height:30px; line-height:30px;} .ask_pwd>div>div>div.pwd_fail {position:absolute; top:93px; left:113px; color:#ff1557; padding:3px 12px; background-color:white; display:none;} .ask_pwd>div>div>input[type=password] {display:block; height:30px; line-height:30px; padding:0 12px; margin-top:20px; width:100%; box-sizing:border-box;} .ask_pwd>div>div>div.row {margin-top:15px;} .ask_pwd>div>div>div>button {width:145px; margin-right:10px; border:0; height:30px; line-height:30px; background-color:#535353; color:white; transition:opacity 0.25s ease-in-out; cursor:pointer;} .ask_pwd>div>div>div>button:last-child {margin:0;} .ask_pwd>div>div>div>button:hover {opacity:0.7;} /* 모델모집 완료 팝업 */ #overlay.application_form {} #overlay.application_form>div {width:700px; height:320px; padding:110px 0 55px;} #overlay.application_form>div>div:not(.close) {padding:0 100px 0 120px;} #overlay.application_form>div>.text {text-align:center; font-size:15px; padding-bottom:50px !important; border-bottom:1px dashed #e6e6e6} #overlay.application_form>div>.text>p {margin:0;} #overlay.application_form>div>.text>p:not(:last-child) {margin-bottom:12px;} #overlay.application_form>div>.btn {text-align:right; margin-top:20px;} #overlay.application_form>div>.btn>button {width:160px; height:45px; line-height:1; color:#ff1557; border:2px solid #ff1557; background-color:transparent; transition:all 0.25s ease-in-out; font-size:14px;} #overlay.application_form>div>.btn>button:hover {background-color:#ff1557; color:white;} /* -- container 2depth -- */ .container>.depth-2 {border-bottom:1px solid #e6e6e6; position:relative; background-color:white;} .container>.depth-2:after {content:''; display:block; clear:both;} .container>.depth-2>ul {margin:0; padding:0; list-style:none; height:120px; position:relative; text-align:center; white-space:nowrap;} .container>.depth-2>ul>li {width:135px; position:relative; height:100%; display:inline-block; vertical-align: top;} .container>.depth-2>ul>li.active a {color:#333 !important;} .container>.depth-2>ul>li a {display:block; height:100%; color:#cdcdcd; transition:color 0.425s cubic-bezier(0.7, 0, 0.3, 1);} .container>.depth-2>ul>li a:hover {color:#333;} .container>.depth-2>ul>li .icon {height:70px; line-height:90px; text-align:center; opacity:0.2; transition:opacity 0.25s cubic-bezier(0.7, 0, 0.3, 1); margin-top:10px;} .container>.depth-2>ul>li.active .icon {opacity:1;} .container>.depth-2>ul>li:hover .icon {opacity:1;} .container>.depth-2>ul>li .title {text-align:center;} .container>.depth-2>.floater {width:40px; height:1px; background:#ff1557; position:absolute; display:none; bottom:-1px;} .container>.depth-2>.floater::before {content:''; position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; width:5px; height:5px; background:#ff1557; transform:rotate(45deg); -ms-transform:rotate(45deg);} .container>.depth-2.small>ul {height:45px;} .container>.depth-2.small>ul>li .title {height:45px; line-height:45px;} /* -- board -- */ ul.board {border-top:2px solid #ff1557; margin:0; padding:0; list-style:none;} ul.board>li {height:55px; line-height:55px; border-bottom:1px solid #f1f1f1;} ul.board>li::before {content:''; display:table;} ul.board>li::after {content:''; display:table; clear:both;} ul.board>li>div {float:left; color:#aaa;} ul.board>li>div.title {max-width:calc(100% - 360px); color:black; position:relative; height:100%;} ul.board>li>div.pict {width:80px; text-align:center; height:100%; margin-right:10px;} ul.board>li>div.pict>.pic_wrapper {width:50px; height:50px; border:1px solid #aaa; display:inline-block; position:relative; overflow:hidden; vertical-align:middle;} ul.board>li>div.pict>.pic_wrapper>img {position:absolute; left:50%; top:50%; right:0; margin:auto; max-width:100px; max-height:100px; transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%);} ul.board.selfie>li>div.pict>.pic_wrapper>img {max-width:135px; max-height:135px; } ul.board>li>div.pict>a>.pic_wrapper {width:50px; height:50px; border:1px solid #aaa; display:inline-block; position:relative; overflow:hidden; vertical-align:middle;} ul.board>li>div.pict>a>.pic_wrapper>img {position:absolute; left:50%; top:50%; right:0; margin:auto; max-width:100px; max-height:100px; transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%);} ul.board.selfie>li>div.pict>a>.pic_wrapper>img {max-width:135px; max-height:135px; } ul.board>li>div.answer {width:40px; float:right; color:#ff1557;} ul.board>li>div.writer {width:60px; float:right; color:black; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;} ul.board>li>div.num {width:60px; text-align:center; margin-right:20px;} ul.board>li>div.date {float:right; width:80px; text-align:center;} ul.board>li>div.views {float:right; width:70px; text-align:center;} ul.board.appo>li {cursor:pointer;} ul.board.appo>li>div.num {width:100px;} ul.board.appo>li>div.name {width:170px; color:black; text-align:center;} ul.board.appo>li>div.phone {width:200px; color:black; text-align:center;} ul.board.appo>li>div.treatment {width:170px; color:black; text-align:center;} ul.board.appo>li>div.condition {width:90px; float:right; color:black; text-align:center;} ul.board.appo>li>div.condition.request {color:#ff1557;} ul.board.appo>li>div.appo_date {width:225px; text-align:center; color:black;} ul.board.appo>li>div.request_date {width:225px; text-align:center; color:black;} ul.board>li>div.title a {display:block; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;} ul.board>li.new>div.title::after {content:'N'; display:inline-block; margin-left:12px; position:absolute; right:-20px; top:0; bottom:0; margin:auto; width:13px; height:13px; background-color:#ff1557; border-radius:50%; font-size:10px; text-align:center; line-height:13px; color:white;} ul.board>li.secret>div.title::before {content:'秘密の投稿'; display:inline-block; margin-left:12px; position:absolute; right:-60px; top:0; bottom:0; margin:auto; width:35px; height:17px; line-height:17px; background-color:#666; font-size:10px; text-align:center; color:white; border-radius:3px;} ul.pagination, ul.pagination ul {list-style:none; margin:0; padding:0; text-align:center;} ul.pagination {margin-top:35px; padding-bottom: 50px; clear:both;} ul.pagination li {display:inline-block; color:#aaa; margin: 0 10px;} ul.pagination li.current {color:#ff1557;} ul.pagination>li.prev {margin-right:6px;} ul.pagination>li.next {margin-left:6px;} ul.pagination>li>ul>li {margin:0 1px;} @media (max-width:768px) { ul.pagination li {margin: 0 2%; font-size:14px;} } ul.board.media>li {height:85px; line-height:85px;} ul.board.media>li>div.title {max-width:calc(100% - 370px);} ul.board.b_counsel>li>div.title {max-width:calc(100% - 380px);} .board_head {height:20px; line-height:20px; text-align:right; margin-bottom:30px;} .board_head>ul {display:inline-block;} .board_head>ul>li {height:20px; white-space:nowrap; padding-right:8px; margin-right:8px; position:relative; color:#888;} .board_head>ul>li:last-child {margin-right:0; padding-right:0;} .board_head>ul>li:not(:last-child)::after {content:''; position:absolute; right:0; height:15px; width:1px; top:0; bottom:0; margin:auto; background-color:#eee;} .board_head>ul>li::before {content:''; position:absolute; top:0px; left:0; right:8px; margin:auto; width:3px; height:3px; background-color:#ff1557; transform:rotate(-45deg); opacity:0; transition:all 0.25s cubic-bezier(0.7, 0, 0.3, 1);} .board_head>ul>li:hover {color:black;} .board_head>ul>li:hover::before {opacity:1; top:-10px;} .board_head>ul>li.current_category {color:black; font-weight:500;} .board_head>ul>li.current_category::before {opacity:1; top:-10px;} .board_header {margin:0; padding:0; list-style:none;} .board_header>li {height:55px; line-height:55px; border-bottom:1px solid #f1f1f1;} .board_header>li::before {content:''; display:table;} .board_header>li::after {content:''; display:table;} .board_header>li>div {float:left; color:#aaa;} .board_header>li>div.date {float:right; width:80px; text-align:center;} .board_header.appo>li>div.num {width:100px; text-align:center; margin-right:20px;} .board_header.appo>li>div.name {width:170px; text-align:center;} .board_header.appo>li>div.phone {width:200px; text-align:center;} .board_header.appo>li>div.treatment {width:170px; text-align:center;} .board_header.appo>li>div.condition {float:right; width:90px; text-align:center;} .board_header.appo>li>div.appo_date {width:225px; text-align:center;} .board_header.appo>li>div.request_date {width:225px; text-align:center;} .board_footer {height:36px; position:relative;} .board_footer>* {box-sizing:border-box; height:36px;} .board_footer>.search {width:110px; display:inline-block;} .board_footer>.search>.target {height:36px; line-height:34px; border:2px solid #eee; padding:0 25px 0 12px; position:relative;} .board_footer>.search>.target::after {content:''; background:transparent url(https://nqogzmoxteadbecwmhjy.supabase.co/storage/v1/object/public/jewelryps-public-assets/images/desktop/icon_search_a.d5367fc9118f.png) no-repeat scroll center center; background-size:11px 7px; position:absolute; right:12px; top:0; bottom:0; margin:auto; width:11px; height:7px; transition:transform 0.25s cubic-bezier(0.7, 0, 0.3, 1);} .board_footer>.search.drop>.target::after {transform:rotate(-180deg);} .board_footer>.search>ul.dropdown {list-style:none; padding:0; margin:0; overflow:hidden; height:0; border:1px solid #eee; background-color:white; box-sizing:border-box; margin-top:-2px; overflow:hidden;} .board_footer>.search>ul.dropdown>li {line-height:26px; height:26px; padding:0 14px; cursor:pointer;} .board_footer>.search_form {display:inline-block; vertical-align:top;padding-left:12px;} .board_footer>.search_form>input {height:34px; border:0; border-bottom:2px solid #eee; padding:0 25px 0 6px; line-height:34px; width:145px; box-sizing:border-box; background:transparent url(https://nqogzmoxteadbecwmhjy.supabase.co/storage/v1/object/public/jewelryps-public-assets/images/desktop/icon_search.dab16c53a254.png) no-repeat scroll 125px center; font-size:12px;} .board_footer>.wed {position:absolute; right:0; top:0;} .board_footer>div>.btn {height:36px;} .board_footer.appo>div>.btn.list {background-color:#ff1557; color:white;} .board_footer.appo>div>.btn.list:hover {opacity:0.6;} .board_detail {border-top:2px solid #ff1557; margin-bottom:30px;} .board_detail>.title {min-height:60px; border-bottom:1px solid #f1f1f1; padding:6px 12px; position:relative;} .board_detail>.title>.text {line-height:1.4; font-size:15px;} .board_detail>.title>.writer {width:40px; display:inline-block;} .board_detail>.title>.date {line-height:30px; color:#ccc; width:calc(100% - 90px); display:inline-block;} .board_detail>.title>.views {position:absolute; right:0; width:45px; bottom:6px; line-height:30px; height:30px; white-space:nowrap; text-align:center; color:#ccc;} .board_detail>.content {min-height:400px; padding:12px; border-bottom:1px solid #f1f1f1;} .board_detail>.content p:first-child {margin-top:0;} .board_detail>.content p:last-child {margin-bottom:0;} .board_detail>.content img {width:80%; /*margin:30px auto; display:block;*/} .board_detail>.reply {border-top:1px solid #f1f1f1;} .board_detail>.reply>ul {padding:0; margin:0; list-style:none;} .board_detail>.reply>ul>li {padding:16px 12px 16px 165px; min-height:40px; border-bottom:1px solid #f1f1f1; position:relative;} .board_detail>.reply>ul>li>div.info {position:absolute; left:12px; top:16px; max-width:140px;} .board_detail>.reply>ul>li>div.info>.writer {font-size:13px;} .board_detail>.reply>ul>li>div.info>.date {color:#ccc;} .board_detail>.reply>ul>li>div.content {white-space:pre-line;} .board_detail .reply_write {padding:16px 0; border-bottom:1px solid #f1f1f1;} .board_detail .reply_write>div {padding:0 12px;} .board_detail .reply_write>div.writer {width:165px;} .board_detail .reply_write>div.writer>span {height:30px; display:block; line-height:30px; white-space:nowrap; font-size:13px;} .board_detail .reply_write>div.writer>input {width:100%; border:1px solid #f1f1f1; padding-left:12px; box-sizing:border-box; height:30px; line-height:30px; font-size:13px;} .board_detail .reply_write>div.content {width:calc(100% - 165px); padding-left:0; position:relative;} .board_detail .reply_write>div.content>textarea {resize:none; height:75px; display:block; width:calc(100% - 90px); border:1px solid #f1f1f1; box-sizing:border-box; padding:6px 12px;} .board_detail .reply_write>div.content>button {position:absolute; right:0; top:0px; width:80px; height:75px; line-height:75px; border:0;} .board_detail.appo {position:relative;} .board_detail.appo>.title {height:auto; position:absolute; top:-40px; font-size:16px; border:0;} .board_detail.appo>.info>ul {padding:0; margin:0; list-style:none; font-size:13px;} .board_detail.appo>.info>ul>li {height:60px; line-height:60px; width:50%; padding-left:170px; position:relative; white-space:nowrap; border-bottom:1px solid #f1f1f1;} .board_detail.appo>.info>ul>li>span {position:absolute; left:80px; top:0; bottom:0; height:20px; line-height:20px; margin:auto; font-weight:700;} .board_detail.appo>.content {position:relative; padding-left:170px; border-bottom:1px solid #f1f1f1;} .board_detail.appo>.content>span {position:absolute; top:20px; left:80px; font-weight:700;} .board.write {margin-bottom:50px;} .board.write>li {height:auto; min-height:55px;} .board.write>li input {height:30px; line-height:30px; padding:0 12px;} .board.write>li textarea {height:100%; resize:none; vertical-align:middle; margin:13px 0; height:460px; padding:30px;} .board.write>li input, .board.write>li textarea {border:1px solid #e6e6e6; width:100%; box-sizing:border-box;} .board.write>li>div {position:relative; padding-left:90px; float:none;} .board.write>li>.title {width:calc(100% - 350px); color:#aaa; float:left;} .board.write>li>.pwd {width:350px; padding-right:15px; display:inline-block; float:right;} .board.write>li>.pwd>input {width:100%;} .board.write>li>.content {width:100%; padding-right:15px;} .board.write>li>.subject {float:right; width:250px;} .board.write>li>.subject>select {height:30px; border:1px solid #e6e6e6; width:100%; padding:0 12px; box-sizing:border-box;} .board.write>li>.writer {float:left; color:#aaa; width:240px;} .board.write.virt>li>.title {width:calc(100% - 590px);} .board.write.counsel_write>li>.title {width:calc(100% - 600px);} .board.write.counsel_write>li>.email {width:360px; float:left;} .board.write.counsel_write>li>.email>input[type=email] {width:calc(100% - 120px);} .board.write.counsel_write>li>div>input[type=checkbox] {display:none;} .board.write.counsel_write>li>div>input[type=checkbox]+label {padding-left:40px; display:inline-block; box-sizing:border-box; width:100px; white-space:nowrap; position:relative; user-select:none; -webkit-user-select:none; -moz-user-select:none; -o-user-select:none; cursor:pointer;} .board.write.counsel_write>li>div>input[type=checkbox]+label::before {content:''; position:absolute; left:12px; top:0; bottom:0; width:15px; height:15px; margin:auto; border:1px solid #e6e6e6; transition:background 0.125s ease-in-out;} .board.write.counsel_write>li>div>input[type=checkbox]:checked+label::before {background-color:#aaa;} .board.write.counsel_write>li>.contact {float:left; width:360px;} .board.write.counsel_write>li>.contact>input[type=text] {width:calc(100% - 110px);} .board.write.realselfie>li>.title {width:calc(100% - 600px);} .board.write>li.files>div {padding:16px 12px 16px 90px;} .board.write>li.files>div>div {margin-bottom:6px; position:relative;} .board.write>li.files>div>div:last-child {margin-bottom:0;} .board.write>li.files>div>div:not(.subject) {line-height:1;} .board.write>li.files>div>div.subject {position:absolute; top:0;} .board.write>li.files>div>div>input[type=file] {display:none;} .board.write>li.files>div>div>input[type=file]+label {height:30px; padding-left:90px; display:inline-block; position:relative; line-height:30px; width:300px; vertical-align:top; z-index:2; cursor:pointer;} .board.write>li.files>div>div>input[type=file]+label+span {position:absolute; left:0px; top:0; height:30px; line-height:30px; display:inline-block; width:80px; text-align:center; background-color:#535353; color:white; cursor:pointer;} .board.write>li.files>div>div>input[type=file]+label:hover+span {opacity:0.6;} .board.write>li.files>div>div>button {height:30px; line-height:30px; display:inline-block; vertical-align:top; border:0; background-color:transparent; color:#ff1557; cursor:pointer;} .board.write>li.files>div>div>button.add {color:#aaa; border:1px solid #e6e6e6; line-height:1;} .board.write>li.files>div>div>button:hover {opacity:0.6;} .board.write>li.files>div>div.input_add>button {margin-top:13px;width:80px;} .board.write>li>div>.subject {position:absolute; left:20px; top:0;} @media (max-width:768px) { .board.write>li {min-height:45px; line-height:45px; height:45px;} .board.write>li:last-child {height:auto;} .board.write>li.m_l2 {height:90px;} .board.write>li>div {padding-left:55px;} .board.write>li>.subject {width:100%; border-top:1px solid #f1f1f1;} .board.write>li>.content {padding-top:55px; padding-left:10px;} .board.write>li>div>.subject {left:10px;} .board.write.realselfie>li>.title {width:100%; max-width:unset;} .board_footer>.search_form {width:auto;} .board_footer>.search_form>input {width:100%;} } /* -- mobile & desktop -- */ .desktop {display:none;} .mobile {display:block;} @media (min-width:769px) { .desktop {display:block;} .mobile {display:none;} } /* -- 상담 신청(이벤트페이지) -- */ .rc {user-select:none; -webkit-user-select:none; -moz-user-select:none; -o-user-select:none; -ms-user-select:none;} /*@media (min-width: 769px){ .header.stick ~ div .rc{position: fixed; left: 0; right: 0; top: 60px; z-index: 9; transition: all 0.275s cubic-bezier(0.7, 0, 0.3, 1);} }*/ .rc>.desktop {height:80px; background-color:#eaebef; max-width: 1500px; margin: 0 auto;} .rc>.desktop::after {content:''; clear:both; display:block; height:0; overflow:hidden;} .rc>.desktop>* {float:left; height:100%;} .rc>.desktop>.call {width:265px; position:relative;} .rc>.desktop>.call::before {content:''; position:absolute; top:0; bottom:0; margin:auto; left:13px; width:23px; height:27px; background-image:url(https://nqogzmoxteadbecwmhjy.supabase.co/storage/v1/object/public/jewelryps-public-assets/images/rc_icon_call.a11316df2914.png); background-repeat:no-repeat;} .rc>.desktop>.call::after {content:''; position:absolute; top:0; bottom:0; left:45px; margin:auto; font-size:36px; font-weight:500; line-height:80px; letter-spacing:-1px; color:#ff1557; white-space:nowrap;} .rc>.desktop>.content {width:calc(100% - 465px); min-width:990px; box-shadow:-5px 0 10px rgba(0,0,0,0.1); position:relative; padding-left:20px; padding-top: 2px; line-height:60px;} /*.rc>.desktop>.content::before {content:'相談申し込み'; position:absolute; left:13px; top:0; bottom:0; margin:auto; height:40px; padding-left:50px; background-image:url(https://nqogzmoxteadbecwmhjy.supabase.co/storage/v1/object/public/jewelryps-public-assets/images/rc_icon_24h.4b612e17b3f1.png); background-repeat:no-repeat; line-height:40px; font-weight:500; color:#ff1557; font-size:26px;}*/ .rc>.desktop>.content::after {content:''; position:absolute; left:230px; bottom:5px; line-height:20px; color:#ff1557; font-size:14px; } .rc>.desktop>.content span {font-size:30px;} .rc>.desktop>.content input {height: 35px; vertical-align: baseline; font-size: 30px;} .rc>.desktop>.content>input[type='text'] {width:100px; border:0; padding:3px; margin-left:10px;} .rc>.desktop>.content>input[type='number'] {width:60px; border:0; padding:3px; margin:0 10px;} .rc>.desktop>.content>input[type='tel'] {width:70px; border:0; padding:3px; margin:0 10px;} .rc>.desktop>.content>input[name='rc_d_name'] {margin-right:10px;} .rc>.desktop>.content>#rc_d_check {display:none;} .rc>.desktop>.content>#rc_d_check+label {padding-left:25px; position:relative;} .rc>.desktop>.content>#rc_d_check+label::before {content:''; position:absolute; left:0; top:0; bottom:0; width:15px; height:15px; background-color:white; margin:auto;} .rc>.desktop>.content>#rc_d_check+label::after {content:'SMS 形状情報受信同意';} .rc>.desktop>.content>#rc_d_check:checked+label::before {background-color:#ff1557;} .rc>.desktop>.content>.rc_btn {height:40px; line-height:1; white-space:nowrap; width:155px; text-align:center; border:0; background-color:#ff1557; margin-left:15px; cursor:pointer; display:inline-block;} .rc>.desktop>.content>.rc_btn::before {content:'相談問い合わせ'; color:white; font-size:26px; vertical-align:middle;} .rc>.desktop>.content>.rc_btn:hover {opacity:0.5;} .rc>.desktop>.kakao {width:200px; position:relative; padding-left:50px; box-shadow:-5px 0 10px rgba(0,0,0,0.1);} .rc>.desktop>.kakao::before {content:''; position:absolute; left:13px; top:0; bottom:0; margin:auto; background-image:url(https://nqogzmoxteadbecwmhjy.supabase.co/storage/v1/object/public/jewelryps-public-assets/images/rc_icon_kakao.c85c1a500138.png); width:30px; height:27px;} .rc>.desktop>.kakao::after {content:'カカオトークID：juelyps'; position:absolute; left:50px; top:0; bottom:0; margin:auto; line-height:80px; white-space:nowrap; font-size:19px; font-weight:500; color:#ff1557;} @media (max-width:1475px){ .rc>.desktop>.kakao {display:none;} } .rc>.mobile {} .rc>.mobile>.content {padding:100px 20px 20px; position:relative;} .rc>.mobile>.content::before {content:'ジュエリー形成外科 \A 相談申し込み'; position:absolute; white-space:pre-line; top:20px; left:20px; right:20px; text-align:center; line-height:1.2; color:#ff1557; font-weight:500; font-size:26px;} .rc>.mobile>.content>div:not(:last-child) {margin-bottom:20px;} .rc>.mobile>.content>.input {padding-left:80px; position:relative;} .rc>.mobile>.content>.input>span {position:absolute; left:0; top:0; bottom:0; height:24px; line-height:35px; font-size:25px;} .rc>.mobile>.content>.input input[type='text'] {width:90%; height:35px; box-sizing:border-box;} .rc>.mobile>.content>.input input[type='number'] {width:25%; margin:0 1.5%;} .rc>.mobile>.content>.input input[type='number']:first-of-type {margin-left:0;} .rc>.mobile>.content>.input input[type='number']:last-of-type {margin-right:0;} .rc>.mobile>.content>.input input[type='tel'] {width:25%; height:35px; margin:0 1.5%; box-sizing:border-box;} .rc>.mobile>.content>.input input[type='tel']:first-of-type {margin-left:0;} .rc>.mobile>.content>.input input[type='tel']:last-of-type {margin-right:0;} .rc>.mobile>.content>.info {color:#ff1557; font-size:14px;} .rc>.mobile>.content #rc_m_check {display:none;} .rc>.mobile>.content #rc_m_check+label {padding-left:25px; position:relative;} .rc>.mobile>.content #rc_m_check+label::before {content:''; position:absolute; left:0; top:0; bottom:0; width:15px; height:15px; background-color:white; margin:auto; border:1px solid #ccc;} .rc>.mobile>.content #rc_m_check+label::after {content:'SMS 形状情報受信同意';} .rc>.mobile>.content #rc_m_check:checked+label::before {background-color:#ccc;} .rc>.mobile>.content .rc_m_policy {float:right; padding:4px 10px; border-radius:25px; background-color:#484848; color:white;} .rc>.mobile>.content .rc_m_policy::before {content:'取扱方針を見る >';} .rc>.mobile>.content .rc_btn {height:35px; line-height:1; white-space:nowrap; width:120px; text-align:center; border:0; background-color:#ff1557; margin-left:15px; cursor:pointer; display:block; margin:0 auto;} .rc>.mobile>.content .rc_btn::before {content:'相談問い合わせ'; color:white; font-size:20px; vertical-align:middle;} .rc>.mobile>.call {height:45px; line-height:45px; background-color:black; color:white; position:relative; text-align:center; font-size:20px;} .rc>.mobile>.call::before {content:'相談/問い合わせ :';} .rc>.mobile>.call::after {content:''; font-weight:600;} /* -- icons -- */ .icon {font-style:normal; background-repeat:no-repeat; background-position:center center;} .icon.question {background-image:url(https://nqogzmoxteadbecwmhjy.supabase.co/storage/v1/object/public/jewelryps-public-assets/images/desktop/icon_question.fbffdb8822b5.png);} .icon.send {background-image:url(https://nqogzmoxteadbecwmhjy.supabase.co/storage/v1/object/public/jewelryps-public-assets/images/desktop/icon_send2.860b17bb0ccb.png);} .icon.tv {background-image:url(https://nqogzmoxteadbecwmhjy.supabase.co/storage/v1/object/public/jewelryps-public-assets/images/desktop/icon_tv.99f8395795a4.png);} .icon.news {background-image:url(https://nqogzmoxteadbecwmhjy.supabase.co/storage/v1/object/public/jewelryps-public-assets/images/desktop/icon_newspaper.8d8043c82e9f.png);} .icon.withstars {background-image:url(https://nqogzmoxteadbecwmhjy.supabase.co/storage/v1/object/public/jewelryps-public-assets/images/desktop/icon_withstars.049b4b801c3b.png);} .icon.notice {background-image:url(https://nqogzmoxteadbecwmhjy.supabase.co/storage/v1/object/public/jewelryps-public-assets/images/desktop/icon_megaphone.dd447baed120.png);} .icon.browse {background-image:url(https://nqogzmoxteadbecwmhjy.supabase.co/storage/v1/object/public/jewelryps-public-assets/images/desktop/icon_browse.89ca85acd97d.png);} .icon.time {background-image:url(https://nqogzmoxteadbecwmhjy.supabase.co/storage/v1/object/public/jewelryps-public-assets/images/desktop/icon_time.a3049821761e.png);} .icon.information {background-image:url(https://nqogzmoxteadbecwmhjy.supabase.co/storage/v1/object/public/jewelryps-public-assets/images/desktop/icon_information.e82ca0b50e56.png);} .icon.v_counsel {background-image:url(https://nqogzmoxteadbecwmhjy.supabase.co/storage/v1/object/public/jewelryps-public-assets/images/desktop/icon_virtual_counsel.c35b0d2e5f3b.png);} .icon.reservation {background-image:url(https://nqogzmoxteadbecwmhjy.supabase.co/storage/v1/object/public/jewelryps-public-assets/images/desktop/icon_reservation.63f7a57a0ace.png);} .icon.reservation_check {background-image:url(https://nqogzmoxteadbecwmhjy.supabase.co/storage/v1/object/public/jewelryps-public-assets/images/desktop/icon_reservation_check.964eb5a4bfc0.png);} .icon.consult_before {background-image:url(https://nqogzmoxteadbecwmhjy.supabase.co/storage/v1/object/public/jewelryps-public-assets/images/desktop/icon_consult_before.60bc7f73f761.png);} .icon.q_c {background-image:url(https://nqogzmoxteadbecwmhjy.supabase.co/storage/v1/object/public/jewelryps-public-assets/images/icon_mail.0515eeebdb43.png);} .icon.q_r {background-image:url(https://nqogzmoxteadbecwmhjy.supabase.co/storage/v1/object/public/jewelryps-public-assets/images/desktop/icon_reservation.63f7a57a0ace.png);} .icon.theatre {background-image:url(https://nqogzmoxteadbecwmhjy.supabase.co/storage/v1/object/public/jewelryps-public-assets/images/desktop/icon_theatre.7b05ed06e242.png);} .icon.realstory {background-image:url(https://nqogzmoxteadbecwmhjy.supabase.co/storage/v1/object/public/jewelryps-public-assets/images/desktop/icon_realstory.d64f593a43fc.png);} .icon.model {background-image:url(https://nqogzmoxteadbecwmhjy.supabase.co/storage/v1/object/public/jewelryps-public-assets/images/desktop/icon_model.b9354375753c.png);} .icon.selfie {background-image:url(https://nqogzmoxteadbecwmhjy.supabase.co/storage/v1/object/public/jewelryps-public-assets/images/desktop/icon_selfie.afbb9ac80294.png);} .icon.selfie2 {background-image:url(https://nqogzmoxteadbecwmhjy.supabase.co/storage/v1/object/public/jewelryps-public-assets/images/desktop/icon_selfie2.00afade7fa37.png);} .icon.review {background-image:url(https://nqogzmoxteadbecwmhjy.supabase.co/storage/v1/object/public/jewelryps-public-assets/images/desktop/icon_review.a8109d8e6e0f.png);} .icon.movie {background-image:url(https://nqogzmoxteadbecwmhjy.supabase.co/storage/v1/object/public/jewelryps-public-assets/images/desktop/icon_movie.f8e5b18d6bb5.png);} .icon.instagram {background-image:url(https://nqogzmoxteadbecwmhjy.supabase.co/storage/v1/object/public/jewelryps-public-assets/images/desktop/icon_instagram.37a2d4084eb4.png); background-size: 27px;} .icon.special {background-image:url(https://nqogzmoxteadbecwmhjy.supabase.co/storage/v1/object/public/jewelryps-public-assets/images/desktop/menu2_special.03a96b8472c9.png);} .icon.eye {background-image:url(https://nqogzmoxteadbecwmhjy.supabase.co/storage/v1/object/public/jewelryps-public-assets/images/desktop/menu2_eye.781ffce41e85.png);} .icon.nose {background-image:url(https://nqogzmoxteadbecwmhjy.supabase.co/storage/v1/object/public/jewelryps-public-assets/images/desktop/menu2_nose.ba0e703ee6b6.png);} .icon.face {background-image:url(https://nqogzmoxteadbecwmhjy.supabase.co/storage/v1/object/public/jewelryps-public-assets/images/desktop/menu2_face.04bfcc524ba8.png);} .icon.breast {background-image:url(https://nqogzmoxteadbecwmhjy.supabase.co/storage/v1/object/public/jewelryps-public-assets/images/desktop/menu2_breast.f1fcb5555c87.png);} .icon.antiaging {background-image:url(https://nqogzmoxteadbecwmhjy.supabase.co/storage/v1/object/public/jewelryps-public-assets/images/desktop/menu2_antiaging.6acae88b7df8.png);} .icon.body {background-image:url(https://nqogzmoxteadbecwmhjy.supabase.co/storage/v1/object/public/jewelryps-public-assets/images/desktop/menu2_body.d54739b3f2de.png);} .icon.men {background-image:url(https://nqogzmoxteadbecwmhjy.supabase.co/storage/v1/object/public/jewelryps-public-assets/images/desktop/menu2_men.7ad2b0b752b8.png);} .icon.skincare {background-image:url(https://nqogzmoxteadbecwmhjy.supabase.co/storage/v1/object/public/jewelryps-public-assets/images/desktop/menu2_skincare.7decf77e3be4.png);} .icon.hair {background-image:url(https://nqogzmoxteadbecwmhjy.supabase.co/storage/v1/object/public/jewelryps-public-assets/images/desktop/menu2_hair.6fa226c171cd.png);} .icon.signature {background-image:url(https://nqogzmoxteadbecwmhjy.supabase.co/storage/v1/object/public/jewelryps-public-assets/images/desktop/menu2_signature.b192e4fa23aa.png);} .icon.fatgrafting {background-image:url(https://nqogzmoxteadbecwmhjy.supabase.co/storage/v1/object/public/jewelryps-public-assets/images/desktop/menu2_fatgrafting.54abbb14fdbc.png);} .icon.outline {background-image:url(https://nqogzmoxteadbecwmhjy.supabase.co/storage/v1/object/public/jewelryps-public-assets/images/desktop/icon_outline.ed0f2b8c2685.png);} .icon.greeting {background-image:url(https://nqogzmoxteadbecwmhjy.supabase.co/storage/v1/object/public/jewelryps-public-assets/images/icon_greeting.29ff94f58aae.png);} .icon.introduce {background-image:url(https://nqogzmoxteadbecwmhjy.supabase.co/storage/v1/object/public/jewelryps-public-assets/images/icon_intro.813e66a9057f.png);} .icon.academic {background-image:url(https://nqogzmoxteadbecwmhjy.supabase.co/storage/v1/object/public/jewelryps-public-assets/images/icon_research.e8bb942b6733.png);} .icon.aftercare {background-image:url(https://nqogzmoxteadbecwmhjy.supabase.co/storage/v1/object/public/jewelryps-public-assets/images/desktop/icon_aftercare.270e5dee6682.png);} .icon.precautions {background-image:url(https://nqogzmoxteadbecwmhjy.supabase.co/storage/v1/object/public/jewelryps-public-assets/images/desktop/icon_precautions.92ef29de4ab0.png);} .icon.emergency {background-image:url(https://nqogzmoxteadbecwmhjy.supabase.co/storage/v1/object/public/jewelryps-public-assets/images/desktop/icon_emergency.5413ffc30464.png);} .icon.anesthesia {background-image:url(https://nqogzmoxteadbecwmhjy.supabase.co/storage/v1/object/public/jewelryps-public-assets/images/desktop/icon_anesthesia.f622bb02836a.png);} .icon.reborn {background-image:url(https://nqogzmoxteadbecwmhjy.supabase.co/storage/v1/object/public/jewelryps-public-assets/images/desktop/icon_reborn.ccbc9a0a3db1.png);} .icon.happyplus{background-image:url(https://nqogzmoxteadbecwmhjy.supabase.co/storage/v1/object/public/jewelryps-public-assets/images/desktop/icon_happyplus.3a3092748fb0.png);} .pointer { cursor: pointer; } div.has-error > span { color: red !important; } div.succeed > span { color: green; } input.has-error { color: red; } input.succeed { color: green; } ul.pagination li, ul.pagination li.active > span{ display: inline-block; font-size:15px; width: 25px; height: 25px; line-height: 25px; text-align: center; } ul.pagination li.active > span { color: orange; border:1px solid orange; }