※ 본 포스팅은 탑평생교육원에서 진행한 신미라 선생님의 강의를 듣고 공부한 내용을 정리한 것입니다.
목차
카페24 SNS 연동 버튼 기본 스타일
▼ 카페24 쇼핑몰에 카카오 로그인 연동을 하고 나면 기본 버튼 스타일은 아래와 같습니다.
▼ 아래와 같이 깔끔한 스타일의 긴 1줄짜리 버튼으로 변경해보겠습니다. 특히 카카오 로그인의 경우 카카오 스타일을 적용하였습니다.
카카오 로그인 버튼 스타일 변경하기
▼ [디자인 (PC/모바일)] - [디자인 대시보드] - [디자인 편집]에 들어갑니다. 좌측 하단의 [</> HTML 수정]을 클릭합니다. HTML 수정 후 오류가 발생하면 복구할 수 없다는 팝업이 뜹니다. 팝업이 뜨면 [확인] 버튼을 클릭합니다.
※ 수정에 들어가기에 앞서 [디자인 보관함]에서 기존 디자인을 복사해 두시는 것을 추천드립니다. 오류가 나면 되돌릴 수 있도록 백업을 해두는 것이라고 보시면 됩니다.
▼ 왼쪽에 [자주 쓰는 화면] 하단에 스크롤해 보시면 [로그인]이 있습니다. 클릭하여 들어가 준 뒤, HTML 가장 첫 줄에 마우스를 올리면 [파일열기] 버튼이 나타납니다. 클릭합니다.
▼ 하단으로 스크롤하다 보면 [sub_style.css]가 있습니다. (디자인에 따라 정확한 줄 위치는 다를 수 있습니다.) 마우스를 위에 올린 후 [파일열기]를 해줍니다.
▼ [sub_style.css] 내부의 코드를 전부 지우고 아래의 코드를 붙여 넣어 줄 것입니다.
sub_style.css 코드 전문
/** subpage_style **/
/* 상품진열 */
.ec-base-product .prdList .description {margin:20px 0 0 0;}
.ec-base-product .prdList > li {margin:0 0 60px 0;}
.ec-base-product .prdList .spec {margin:10px 0 0 0;}
.ec-base-product .prdList .spec > li {margin:0 0 5px;}
.ec-base-product .prdList .spec > li .title {padding:0;margin:0;border:0;}
/* 상품진열 5단 슬라이드 */
.ec-base-product ul.grid5_slide {display:flex;padding:0;margin:0;height:auto;}
.ec-base-product ul.grid5_slide .thumbnail {margin:0;}
.ec-base-product ul.grid5_slide > li {width:230px;vertical-align:top;overflow:hidden;margin:0;}
.ec-base-product ul.grid5_slide > li .prdList__item {margin:0;}
/* 상품진열 4단 슬라이드 */
.ec-base-product ul.grid4_slide {display:flex;padding:0;margin:0;height:auto;}
.ec-base-product ul.grid4_slide .thumbnail {margin:0;}
.ec-base-product ul.grid4_slide > li {width:292px;vertical-align:top;overflow:hidden;margin:0;}
.ec-base-product ul.grid4_slide > li .prdList__item {margin:0;}
/* 상품진열 3단 슬라이드 */
.ec-base-product ul.grid3_slide {display:flex;padding:0;margin:0;height:auto;}
.ec-base-product ul.grid3_slide .thumbnail {margin:0;}
.ec-base-product ul.grid3_slide > li {width:396px;vertical-align:top;overflow:hidden;margin:0;}
.ec-base-product ul.grid3_slide > li .prdList__item {margin:0;}
/* 상품진열 2단 슬라이드 */
.ec-base-product ul.grid2_slide {display:flex;padding:0;margin:0;height:auto;}
.ec-base-product ul.grid2_slide .thumbnail {margin:0;}
.ec-base-product ul.grid2_slide > li {width:605px;vertical-align:top;overflow:hidden;margin:0;}
.ec-base-product ul.grid2_slide > li .prdList__item {margin:0;}
/* 상품진열 뱃지(목록 추천상품) */
.ec-base-product .prdList .thumbnail .badge {position:absolute;top:5%;left:5%;z-index:3;padding:0px;color:#1a1a1a;font-size:16px;font-weight:700;text-align:center;line-height:1;display:none;flex-direction:row-reverse;}
.ec-base-product .prdList .thumbnail .badge span {padding-left:5px;}
/* 상품진열 좋아요 */
.ec-base-product .prdList .thumbnail .likeButton {position:absolute;top:5%;left:4%;z-index:1;padding:0px;background:transparent;cursor:pointer;text-align:center;width:40px;height:40px;display:flex;flex-direction:column;align-content:center;justify-content:center;align-items:center;}
.ec-base-product .prdList .thumbnail .likeButton button {background:transparent;height:23px;outline:none;}
.ec-base-product .prdList .thumbnail .likeButton::before {font-size:11px;content:'LIKE';color:#1a1a1a;display:block;}
.ec-base-product .prdList .thumbnail .likeButton img {display:none;}
.ec-base-product .prdList .thumbnail .likeButton strong {font-weight:400;padding:4px 0 0;font-size:11px;display:block;}
.ec-base-product .prdList .thumbnail .likeButton.selected {font-weight:500;}
/* 상품진열 할인율 */
.ec-base-product .prdList .thumbnail .sale_box {position:absolute;top:4%;right:4%;z-index:2;width:50px;height:50px;font-size:14px;text-align:center;color:#fff;font-weight:700;background-color:#1a1a1a;line-height:1;border-radius:50%;display:flex;align-content:center;justify-content:center;align-items:center;}
.ec-base-product .prdList.ez-discount-tag-off .thumbnail .sale_box {display:none;}
/* 상품진열 아이콘 */
.ec-base-product .prdList .icon {margin:0 0 5px 0;}
.ec-base-product .prdList .icon img {max-height:none;}
/* 상품진열 퀵바아이콘 */
.ec-base-product .prdList .icon__box {opacity:0;position:absolute;top:45%;right:0;left:0;z-index:3;display:flex;flex-direction:row;align-content:center;justify-content:center;align-items:center;transition:all 0.3s;-webkit-transition:all 0.3s;-o-transition:all 0.3s;-moz-transition:all 0.3s;-ms-transition:all 0.3s;}
.ec-base-product .prdList > li:hover .icon__box {opacity:1;}
.ec-base-product .prdList .prdList__item .icon__box > span {display:block;position:relative;font-size:11px;font-weight:500;color:#000;background-color:transparent;border:1px solid #999; border-radius:10px;box-sizing:border-box;cursor:pointer;margin:0 3px;min-width:72px;height:auto;line-height:1;padding:10px 15px;background-color:rgba(255, 255, 255, 0.7); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#B3FFFFFF,endColorstr=#B3FFFFFF);}
.ec-base-product .prdList .prdList__item .icon__box > span:hover,
.ec-base-product .prdList .prdList__item .icon__box > span.on {background-color:#000;border:1px solid #000;color:#fff;}
.ec-base-product .prdList .prdList__item .icon__box > span img {position:absolute;width:100%;height:100%;top:0;left:0;opacity:0;}
.ec-base-product ul.list_gallery .prdList__item .icon__box {display:none;}
/* 상품진열 옵션미리보기 */
.xans-product-optionpreview .prdOption {width:200px;}
.xans-product-optionpreview .prdOption .ico {display:none !important;}
.xans-product-optionpreview .prdOption .inner {padding:14px 24px !important;height:100%;overflow-y:auto;}
.xans-product-optionpreview .prdOption .close {width:11px;height:11px;right:25px !important;}
.xans-product-optionpreview .prdOption .close a {display:block;width:11px;height:11px;background:url("//img.echosting.cafe24.com/skin/base_ko_KR/product/ico_option_close.gif") no-repeat 0 center}
.xans-product-optionpreview .prdOption li {margin:0;}
/* 상품진열 강조형 */
.ec-base-product ul.list_gallery > li {margin:0 0 20px 0;}
.ec-base-product ul.list_gallery .prdList__item {position:relative;overflow:hidden;}
.ec-base-product ul.list_gallery .thumbnail {margin:0;}
.ec-base-product ul.list_gallery .thumbnail .icon {position:absolute;left:0;top:0;bottom:auto;font-size:0;margin:0;}
.ec-base-product ul.list_gallery .description {position:absolute;left:0;right:0;bottom:-20%;z-index:1;opacity:0;padding:5% 5% 3% 5%;background-color:rgba(255, 255, 255, 0.8); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCFFFFFF,endColorstr=#CCFFFFFF);transition:all 0.3s;-webkit-transition:all 0.3s;-o-transition:all 0.3s;-moz-transition:all 0.3s;-ms-transition:all 0.3s;}
.ec-base-product ul.list_gallery > li:hover .description {bottom:0;opacity:1;}
.ec-base-product ul.list_gallery .description .name span {display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ec-base-product ul.list_gallery .description .spec .color span {display:inline-block;}
.ec-base-product ul.list_gallery .icon__box {top:15%;}
/* 목록페이지 중분류 */
.ec-base-tab.typeMenu {max-width:1230px;padding:0;margin:0 auto;}
.ec-base-tab.typeMenu .menu {flex-wrap:wrap;}
.ec-base-tab.typeMenu li a.button {font-size:13px;color:#1a1a1a;background-color:#f4f4f4;border:1px solid #f4f4f4;line-height:1;padding:13px 25px;margin:0 5px;border-radius:35px;font-weight:500;box-sizing:border-box;}
.ec-base-tab.typeMenu li.selected a.button {color:#1a1a1a;background-color:#fff;border:1px solid #1a1a1a;}
.ec-base-tab.typeMenu ul > li {height:auto;margin-bottom:10px;}
.ec-base-tab.typeMenu ul > li .iconWrap:after{position:absolute;top:-24px;right:20px;}
.ec-base-tab.typeMenu ul > li > ul {padding:10px 0 10px 20px;top:41px;left:5px;z-index:9;border:0;}
.ec-base-tab.typeMenu ul > li > ul > li ul {padding:10px 20px;}
.ec-base-tab.typeMenu ul > li > ul > li {position:relative;padding:0 20px 0 0;margin:0;height:30px;}
.ec-base-tab.typeMenu ul > li > ul > li a:hover {color:#1a1a1a;}
.ec-base-tab.typeMenu ul > li > ul > li .iconWrap:after{ top:-20px; right:-10px; }
.ec-base-tab.typeMenu ul > li > ul > li ul.active {z-index:10;top:-11px;border:0;}
.ec-base-tab.typeMenu ul > li > ul > li ul.active li {margin:0;padding:0;height:30px;}
.xans-project-package .menuCategory > li {margin:0;}
.xans-project-package .menuCategory > li > a {font-weight:400;}
/* 로그인 */
.xans-member-login {margin-left:auto;margin-right:auto;text-align:center;}
.xans-member-login .login {max-width:400px;}
.xans-member-login .login input[type=text], .login input[type=password] {height:48px;margin-bottom:8px;border:1px solid #e3e3e3;}
.xans-member-login .wrap_security {max-width:400px;margin-left:auto;margin-right:auto;display:flex;justify-content:flex-end;}
.xans-member-login .wrap_find {display:flex;justify-content:center}
.xans-member-login .wrap_find div {margin:20px 0 0;padding:0 10px;font-size:14px;}
.xans-member-login .wrap_find div:nth-child(2) {padding: 0 0 0 11px;background:url('/SkinImg/img/line2.png') no-repeat left;}
.xans-member-login .login__button {max-width:400px;margin:0 auto;}
.xans-member-login .login__button div {margin:16px 0 0;font-size:14px;color:#8a8a8a;text-align:center;}
.xans-member-login .login__button [class^='btn'].sizeL {font-size:16px;height:56px;padding:19px 26px;}
.xans-member-login [class^='btn'].gFull + [class^='btn'].gFull {margin:40px 0 0;border:1px solid #1a1a1a;}
.xans-member-login .login__util {display:flex;flex-direction:column;justify-content:center;margin:20px 0 0 0;width:100%;max-width:400px;height:232px;border:1px solid #e3e3e3; box-sizing:border-box;margin-left:auto;margin-right:auto;}
.xans-member-login .login__util div:nth-child(1) {font-size:18px; font-weight:700; color:#1a1a1a;}
.xans-member-login .login__util div:nth-child(2) {margin:8px 0 23px 0;font-size:14px; color:#8a8a8a;}
.xans-member-login .login__util div:nth-child(3) {width:152px;height:56px;margin:0 auto;border:1px solid #d6d6d6; box-sizing:border-box;}
.xans-member-login .login__util div:nth-child(3) a {display:block;width:100%;height:100%;font-size:16px;font-weight:700;color:#1a1a1a;line-height:56px;}
.xans-member-login .login__sns {max-width:400px;margin:40px auto 0 auto;display:none;}
.xans-member-login .login__sns .sns_h {margin:0 0 24px;font-size:16px;font-weight:700;text-align:center;}
.xans-member-login .login__sns .wrap_sns_log {display:flex;justify-content: space-between;flex-wrap:wrap;width:100%;}
.xans-member-login .login__sns .wrap_sns_log.kakao { margin-bottom:20px; }
.xans-member-login .login__sns .wrap_sns_log a {width:100%;height:43px;padding:0 24px;margin:0 0 8px 0 !important;font-size:14px;font-weight:400;color:#1a1a1a;background-color:#fff;text-align:center;border:1px solid #ccc;box-sizing:border-box;line-height:43px;display:block;border-radius:5px;}
.xans-member-login .login__sns .btnKakao {background:url('/SkinImg/img/icon_sns_kakao.svg') no-repeat center left 24px; border:1px solid #ffcd00 !important; background-color:#ffcd00 !important; }
.xans-member-login .login__sns .btnNaver {background:url('/SkinImg/img/icon_sns_naver.svg') no-repeat center left 24px;}
.xans-member-login .login__sns .btnFacebook {background:url('/SkinImg/img/icon_sns_facebook.svg') no-repeat center left 24px;}
.xans-member-login .login__sns .btnLine {background:url('/SkinImg/img/icon_sns_line.svg') no-repeat center left 24px;}
.xans-member-login .login__sns .btnGoogle {background:url('/SkinImg/img/icon_sns_google.svg') no-repeat center left 24px;}
.xans-member-login .login__sns .btnApple {background:url('/SkinImg/img/icon_sns_apple.svg') no-repeat center left 24px;}
.xans-member-login .login__sns .yahoojp {background:url('/SkinImg/img/icon_sns_yahoo.png') no-repeat center left 24px;}
.xans-member-login .login__security {display:flex;align-items:flex-end;margin:10px 0 20px;}
.xans-member-login .login__security .secret {height:24px;padding:0;background:none;}
/* 비회원 주문조회 */
.xans-myshop-orderhistorynologin {max-width:400px;margin-left:auto;margin-right:auto;text-align:center;}
.xans-myshop-orderhistorynologin .login {width:100%;}
.xans-myshop-orderhistorynologin .login input[type=text], .login input[type=password] {height:48px;margin-bottom:8px;border:1px solid #e3e3e3;}
.xans-myshop-orderhistorynologin .txt_nonmem_check {margin:40px 0 8px;font-size:16px;font-weight:700;color:#1a1a1a;}
.xans-myshop-orderhistorynologin .txtInfo {margin:0px 0 24px;font-size:14px;;color:#8a8a8a;}
.xans-myshop-orderhistorynologin .login__button {margin:0;}
.xans-myshop-orderhistorynologin .btnSubmit {margin:24px 0 0px;}
/* 아이디찾기 */
.xans-member-findid {max-width:400px;}
.xans-member-findid .ec-base-help p:before,
.xans-member-findid .ec-base-help ul li:before {display:none;}
.xans-member-findid .ec-base-help {text-align:center;}
.xans-member-findid .ec-base-help ul li {padding:0;font-size:14px;margin-bottom:5px;}
.xans-member-findid .ec-base-box.typeMember {padding:0;border:0;}
.xans-member-findid .ec-base-box.typeMember .content {width:100%;}
.xans-member-findid .ec-base-desc.gVer .desc {margin:5px 0 20px;}
/* 아이디찾기 완료 */
.xans-member-findidresult {max-width:400px;}
.xans-member-findidresult .ec-base-box.typeMember {padding:0;border:0;}
.xans-member-findidresult .complete {width:100%;}
.xans-member-findidresult .ec-base-button.gBottom {display:flex;}
.xans-member-findidresult .ec-base-button.gBottom a {flex:1;}
/* 비밀번호찾기 */
.xans-member-findpasswd {max-width:400px;}
.xans-member-findpasswd .ec-base-box.typeMember {padding:0;border:0;}
.xans-member-findpasswd .ec-base-box.typeMember .content {width:100%;}
.xans-member-findpasswd .ec-base-desc.gVer .desc {margin:5px 0 20px;}
/* 비밀번호찾기 2단계 */
.xans-member-findpasswdmethod {max-width:400px;}
.xans-member-findpasswdmethod .ec-base-box.typeMember {padding:0;border:0;}
.xans-member-findpasswdmethod .ec-base-box.typeMember .content {width:100%;}
.xans-member-findpasswdmethod .ec-base-button.gBottom {display:flex;}
.xans-member-findpasswdmethod .ec-base-button.gBottom a {flex:1;}
/* 비밀번호찾기 2단계 힌트 */
.xans-member-findPasswdQuestion {max-width:400px;}
.xans-member-findPasswdQuestion .ec-base-box.typeMember {padding:0;border:0;}
.xans-member-findPasswdQuestion .ec-base-box.typeMember .content {width:100%;}
.xans-member-findPasswdQuestion .ec-base-desc.gVer .desc {margin:5px 0 20px;}
/* 비밀번호찾기 재설정 */
.xans-member-passwordreset {max-width:400px;}
.xans-member-passwordreset .ec-base-box.typeMember {padding:0;border:0;}
.xans-member-passwordreset .ec-base-box.typeMember .content {width:100%;}
.xans-member-passwordreset .ec-base-button.gBottom {display:flex;}
.xans-member-passwordreset .ec-base-button.gBottom a {flex:1;}
/* 비밀번호찾기 본인확인 */
.xans-member-passwordverification {max-width:400px;}
.xans-member-passwordverification .ec-base-box.typeMember {padding:0;border:0;}
.xans-member-passwordverification .ec-base-box.typeMember .content {width:100%;}
.xans-member-passwordverification .ec-base-desc.gVer .desc {margin:5px 0 20px;}
.xans-member-passwordverification .ec-base-button.gBottom {display:flex;}
.xans-member-passwordverification .ec-base-button.gBottom a {flex:1;}
/* 비밀번호찾기 완료 */
.xans-member-findpasswdresult {max-width:400px;}
.xans-member-findpasswdresult .ec-base-box.typeMember {padding:0;border:0;}
.xans-member-findpasswdresult .complete {width:100%;}
/* 버튼 */
.ec-base-button [class^='btn'].sizeL {height:56px;padding:0;line-height:56px;font-size:16px;}
.ec-base-button [class^='btn'].sizeM {height:50px;padding:0;line-height:50px;font-size:14px;}
.ec-base-button [class^='btn'].sizeS {height:50px;padding:17px 20px;line-height:1;font-size:14px;}
.ec-base-button.gBottom {margin:12px 0 0 0;}
.ec-base-button.gBottom .gLeft [class^='btn'] {margin:0 8px 0 0;}
.ec-base-button.gBottom .gRight [class^='btn'] {margin:0 0 0 8px;}
/* 회원가입 약관 */
.xans-member-join {max-width:720px;margin:0 auto;}
.xans-member-join .agreeInner {display:block;}
.xans-member-join .left {display:block;margin:0;}
.xans-member-join .agreeAll {margin:0 0 24px;padding:0 0 24px;border-bottom:1px solid #e8e8e8;}
.xans-member-join .agreeAll h3 {margin:0 0 24px;padding:0 0 16px;color:#1a1a1a;border-bottom:3px solid #1a1a1a;}
.xans-member-join .agreeAll label {font-weight:700;color:#1a1a1a;}
.xans-member-join label.check {color:#1a1a1a;}
.xans-member-join .additional {margin:24px 0 0;padding:24px 0 0;border-top:1px solid #e8e8e8;}
.xans-member-join .additional li {font-size:14px;}
.xans-member-join .ec-base-chk {margin:0 10px 0 0;}
.xans-member-join .ec-base-button.gBottom {display:flex;margin-top:40px;}
.xans-member-join .ec-base-button.gBottom button,
.xans-member-join .ec-base-button.gBottom a {flex:1;height:56px;padding:0;line-height:56px;font-size:16px;}
/* 회원가입 */
.xans-member-join .required {font-size:14px;color:#1a1a1a;}
.xans-member-join .icoRequired {margin-right:12px;}
.xans-member-join .ec-base-table {border-top:2px solid #1a1a1a;}
.xans-member-join .ec-base-table.typeWrite th[scope*="row"] {padding-left:16px;font-weight:400;font-size:14px;color:#1a1a1a;}
.xans-member-join .ec-base-table.typeWrite td input[type="text"],
.xans-member-join .ec-base-table.typeWrite td input[type="password"],
.xans-member-join .ec-base-table.typeWrite td select,
.xans-member-join .ec-base-table.typeWrite .ec-address input[type="text"],
.xans-member-join .ec-base-table.typeWrite .ec-address select {width:410px;}
.xans-member-join .ec-base-table.typeWrite .ec-address .ec-address-zipcode input[type="text"] {width:160px;}
.xans-member-join .ec-base-table .gFlow {display:block;margin:10px 0 0;}
.xans-member-join #mobile1,
.xans-member-join #mobile2,
.xans-member-join #mobile3,
.xans-member-join #phone1,
.xans-member-join #phone2,
.xans-member-join #phone3,
.xans-member-join #birth_year,
.xans-member-join #marry_year,
.xans-member-join #partner_year,
.xans-member-join #birth_month,
.xans-member-join #marry_month,
.xans-member-join #partner_month,
.xans-member-join #birth_day,
.xans-member-join #marry_day,
.xans-member-join #partner_day {width:110px;}
.xans-member-join .ec-base-table.typeWrite .formGroup {padding-left:20px;}
.xans-member-join .ec-base-table.typeWrite .formGroup input[type="text"],
.xans-member-join .ec-base-table.typeWrite .formGroup input[type="password"],
.xans-member-join .ec-base-table.typeWrite .formGroup select,
.xans-member-join .ec-base-table.typeWrite .formGroup [class^="btn"] {margin:0 14px;}
.xans-member-join .eTooltip {display:block;}
.xans-member-join #phone1,
.xans-member-join #mobile1,
.xans-member-join #birth_year,
.xans-member-join #marry_year,
.xans-member-join #partner_year {margin-left:0;}
.xans-member-join #birth_year,
.xans-member-join #birth_month,
.xans-member-join #birth_day,
.xans-member-join #marry_year,
.xans-member-join #marry_month,
.xans-member-join #marry_day,
.xans-member-join #partner_year,
.xans-member-join #partner_month,
.xans-member-join #partner_day {width:106px !important;margin-right:3px !important;}
.xans-member-join #cssn {margin:0;}
.xans-member-join .ec-base-table.typeWrite .formMultiple .formGroup {padding-left:0;margin:0;}
.xans-member-join .ec-base-table.typeWrite .formMultiple .formGroup input[type="text"] {flex:1;width:30%;}
.xans-member-join .ec-base-table.typeWrite .formMultiple .formGroup input[type="password"] {flex:1;width:30%;}
.xans-member-join .ec-base-table.typeWrite .formMultiple .formGroup input:first-child {margin-left:0;}
.xans-member-join .ec-base-table.typeWrite .formMultiple .formGroup .btnNormal {margin:0;}
.xans-member-join .ec-base-table.typeWrite table .interest {margin:10px 0 0 0;word-break:keep-all;}
.xans-member-join .ec-base-table.typeWrite table .interest input {margin:-2px 0 10px 0;}
.xans-member-join .ec-base-table.typeWrite table .interest label {font-size:14px;margin:0 24px 0 10px;}
.xans-member-join .ec-base-table.typeWrite table .interest label:nth-child(6n)::after {content:'\a';white-space:pre;}
/* 회원가입 완료 */
.xans-member-joincomplete {max-width:720px;margin:0 auto;}
.xans-member-joincomplete .joinComplete {width:auto;padding:40px 100px;border:1px solid #e3e3e3;}
.xans-member-joincomplete .member_icon {margin: 0 0 16px;}
.xans-member-joincomplete .joinComplete .desc {font-size:20px;font-weight:700;color:#1a1a1a;}
.xans-member-joincomplete .joinComplete .memberSpecial strong {font-size:14px;color:#1a1a1a;}
.xans-member-joincomplete .joinComplete .memberSpecial p strong {font-weight:400;}
.xans-member-joincomplete .ec-base-box.typeMember.gMessage {border-color:#e8e8e8;}
.xans-member-joincomplete .joinComplete .ec-base-box .ec-base-desc dt {font-size:14px;color:#1a1a1a;}
.xans-member-joincomplete .joinComplete .ec-base-box .ec-base-desc dt,
.xans-member-joincomplete .joinComplete .ec-base-box .ec-base-desc dd {min-height:auto;line-height:22px;}
.xans-member-joincomplete .joinComplete .ec-base-box .ec-base-desc span {font-size:14px;color:#1a1a1a;}
.xans-member-joincomplete .joinComplete .memberEmail {margin-top:24px;}
.xans-member-joincomplete .ec-base-button.gBottom {display:flex;margin-top:40px;}
.xans-member-joincomplete .ec-base-button.gBottom button,
.xans-member-joincomplete .ec-base-button.gBottom a {flex:1;height:56px;padding:0;line-height:56px;font-size:16px;}
/* 회원정보수정 */
.xans-myshop-asyncbenefit {max-width:100%;margin:0 auto;}
.xans-myshop-asyncbenefit .benefit {width:100%;max-width:720px;margin:0 auto;display:block;border:1px solid #e3e3e3;text-align:center;}
.xans-myshop-asyncbenefit .benefit .user,
.xans-myshop-asyncbenefit .benefit .description {display:block;padding:24px 0;}
.xans-myshop-asyncbenefit .benefit .user {padding:40px 0;border-bottom:1px solid #e3e3e3;}
.xans-myshop-asyncbenefit .benefit .user .user__thumbnail {display:block;width:60px;margin:0 auto;}
.xans-myshop-asyncbenefit .benefit .user .user__info {display:block;margin:0;}
.xans-myshop-asyncbenefit .benefit .user .user__info .title {display:block;margin:16px 0 8px;font-size:20px;font-weight:700;color:#1a1a1a;}
.xans-myshop-asyncbenefit .benefit .user .user__info p strong {color:#1a1a1a;}
.xans-member-edit {max-width:720px;margin:0 auto;}
.xans-member-edit .required {font-size:14px;color:#1a1a1a;margin:-19px 0 0 0;}
.xans-member-edit .icoRequired {margin-right:12px;}
.xans-member-edit .txtInfo {display:block;margin:10px 0 0 0;}
.xans-member-edit .ec-base-table {border-top:2px solid #1a1a1a;}
.xans-member-edit .ec-base-table.typeWrite th[scope*="row"] {padding:10px 16px;font-size:14px;font-weight:400;}
.xans-member-edit .ec-base-table.typeWrite .ec-address input[type="text"],
.xans-member-edit .ec-base-table.typeWrite .ec-address select,
.xans-member-edit .ec-base-table.typeWrite td input[type="text"],
.xans-member-edit .ec-base-table.typeWrite td input[type="password"],
.xans-member-edit .ec-base-table.typeWrite td select {width:410px;}
.xans-member-edit .ec-base-table.typeWrite .ec-address .ec-address-zipcode input[type="text"] {width:160px;}
.xans-member-edit .ec-base-table .gFlow {display:block;margin:10px 0 0;}
.xans-member-edit #mobile1,
.xans-member-edit #mobile2,
.xans-member-edit #mobile3,
.xans-member-edit #phone1,
.xans-member-edit #phone2,
.xans-member-edit #phone3,
.xans-member-edit #birth_year,
.xans-member-edit #marry_year,
.xans-member-edit #partner_year,
.xans-member-edit #birth_month,
.xans-member-edit #marry_month,
.xans-member-edit #partner_month,
.xans-member-edit #birth_day,
.xans-member-edit #marry_day,
.xans-member-edit #partner_day {width:110px;}
.xans-member-edit .ec-base-table.typeWrite .formGroup {padding-left:20px;}
.xans-member-edit .ec-base-table.typeWrite .formGroup input[type="text"],
.xans-member-edit .ec-base-table.typeWrite .formGroup input[type="password"],
.xans-member-edit .ec-base-table.typeWrite .formGroup select,
.xans-member-edit .ec-base-table.typeWrite .formGroup [class^="btn"] {margin:0 14px;}
.xans-member-edit .eTooltip {display:block;}
.xans-member-edit #phone1,
.xans-member-edit #mobile1,
.xans-member-edit #birth_year,
.xans-member-edit #marry_year,
.xans-member-edit #partner_year {margin-left:0;}
.xans-member-edit #birth_year,
.xans-member-edit #birth_month,
.xans-member-edit #birth_day,
.xans-member-edit #marry_year,
.xans-member-edit #marry_month,
.xans-member-edit #marry_day,
.xans-member-edit #partner_year,
.xans-member-edit #partner_month,
.xans-member-edit #partner_day {width:106px !important;margin-right:3px !important;}
.xans-member-edit [class^='btn'].sizeS {width:90px;height:48px;padding:0;line-height:48px;border:1px solid #d6d6d6;font-size:14px;color:#1a1a1a;}
.xans-member-edit .ec-base-button.gBottom {display:flex;margin-top:40px;}
.xans-member-edit .ec-base-button.gBottom button,
.xans-member-edit .ec-base-button.gBottom a {flex:1;height:56px;padding:0;line-height:56px;font-size:16px;}
.xans-member-edit .ec-base-table.typeWrite table .interest {margin:10px 0 0 0;word-break:keep-all;}
.xans-member-edit .ec-base-table.typeWrite table .interest input {margin:-2px 0 10px 0;}
.xans-member-edit .ec-base-table.typeWrite table .interest label {font-size:14px;margin:0 24px 0 10px;}
.xans-member-edit .ec-base-table.typeWrite table .interest label:nth-child(6n)::after {content:'\a';white-space:pre;}
/* 비밀번호 수정 */
.xans-member-changepasswd {max-width:400px;margin:0 auto;}
.xans-member-changepasswd .ec-base-help {text-align:center;}
.xans-member-changepasswd .ec-base-help p:before {display:none;}
.xans-member-changepasswd .ec-base-help p {padding:0;font-size:14px;margin:0;}
.xans-member-changepasswd .ec-base-box.typeMember {padding:0;border:0;}
.xans-member-changepasswd .ec-base-box.typeMember .content {width:100%;}
.xans-member-changepasswd .ec-base-button.gBottom {display:flex;}
.xans-member-changepasswd .ec-base-button.gBottom a {flex:1;}
/* 마이페이지 회원간편정보 */
.xans-myshop-asyncbankbook {border:1px solid #e3e3e3;margin:0 auto;box-sizing:border-box;}
.xans-myshop-asyncbankbook .xans-myshop-asyncbenefit {flex:2;}
.xans-myshop-asyncbankbook .xans-myshop-asyncbenefit .user {display:flex;justify-content:center;padding:0;}
.xans-myshop-asyncbankbook .xans-myshop-asyncbenefit .group {display:none;}
.xans-myshop-asyncbankbook .xans-myshop-asyncbenefit .user img {width:60px;max-width:none;border-radius:50%;}
.xans-myshop-asyncbankbook .xans-myshop-asyncbenefit .user .user__info {display:flex;flex-direction:column;justify-content:center;margin-left:16px;text-align:left;}
.xans-myshop-asyncbankbook .xans-myshop-asyncbenefit .user .user__info .txtEm1 {font-size:20px;font-weight:700;color:#1a1a1a;}
.xans-myshop-asyncbankbook .xans-myshop-asyncbenefit .user .user__info .user__data {font-size:14px;color:#6a6a6a;white-space:nowrap;}
.xans-myshop-asyncbankbook .xans-myshop-asyncbenefit .user .user__info .user__data span {color:#1a1a1a;}
.xans-myshop-asyncbankbook .xans-myshop-asyncbenefit .user .user__info p {font-size:12px;}
.xans-myshop-asyncbankbook li {display:flex !important;align-items:center;justify-content:center;padding:50px 30px;}
.xans-myshop-asyncbankbook li:not(:last-child):after {top:0;height:100%;margin:0;background:#e3e3e3;}
.xans-myshop-asyncbankbook .thumb {width:32px;height:32px;}
/* 마이페이지 공통 */
.myshopArea {width:calc(92% - 220px);max-width:calc(1230px - 220px) !important;padding:0 0 0 220px !important;margin:0 auto !important;min-height:630px;}
.myshopArea.section_full {width:calc(100% - 220px) !important;}
.myshopArea .titleArea--middle {margin:64px 0 16px 0;}
.myshopArea .ec-base-prdEmpty {border-top:2px solid #1a1a1a;border-bottom:1px solid #e6e6e6;font-size:16px;color:#9a9a9a;padding:64px 0;display:flex;flex-direction:column;align-items:center;}
.myshopArea .ec-base-prdEmpty svg {margin-bottom:16px;}
.myshopArea .titleArea--myshop h2 {font-weight:700;}
div.ec-base-help {margin:50px 0 0;}
div.ec-base-help .inner,
.xans-myshop-couponserial .couponSerial,
.xans-myshop-summary.ec-base-box.gHalf {border-top:2px solid #1a1a1a;}
div.ec-base-help ul {margin:0;}
/* 마이페이지 좌측메뉴 */
.myshopArea .xans-myshop-main > .subTitle {padding-bottom:6px;}
.myshopArea .xans-myshop-main > .subTitle:first-child {margin:0;}
.myshopArea .xans-myshop-main h3 {font-size:16px;}
.myshopArea .xans-myshop-main .menu li {margin:10px 0 0 0;}
.myshopArea .xans-myshop-main .consult a {font-size:14px;}
/* 마이페이지 나의주문처리 현황 */
.xans-myshop-orderstate .state__cs li {font-size:14px;}
.xans-myshop-orderstate .state__cs li strong {font-weight:400;}
/* 마이페이지 배송주소록 관리 */
.xans-myshop-addrlist .ec-base-table .message {font-size:16px;color:#9a9a9a;padding:64px 0;float:none;text-align:center;}
.xans-myshop-addrlist .ec-base-table .message svg {margin:0 auto 16px auto;}
.xans-myshop-addrlist .ec-base-table.typeList th {white-space:nowrap;}
.xans-myshop-addrlist a[class^='btnEm'] {margin:0;line-height:1;background-color:#77797d;padding:5px 10px;height:auto;}
.xans-myshop-addrlist a[class^='btnEm']:not(.disabled):hover {background-color:#1a1a1a;}
.xans-myshop-addrlist a[class^='btnNormal'] {padding:5px 10px;height:auto;}
.xans-myshop-addrregister .ec-base-table.typeWrite {border-top:2px solid #1a1a1a;}
.xans-myshop-addrregister .icoRequired {margin-right:12px;}
.xans-myshop-addrregister .ec-base-table.typeWrite .ec-address li {margin-bottom:10px;}
.xans-myshop-addrregister .ec-base-table.typeWrite .ec-address li#shippingRegist_detailAddr_wrap {margin:0;}
.xans-myshop-addrregister .ec-base-table.typeWrite #ma_main_flag0 {margin-top:-3px;}
.xans-myshop-addrmodify .ec-base-table.typeWrite {border-top:2px solid #1a1a1a;}
.xans-myshop-addrmodify .icoRequired {margin-right:12px;}
.xans-myshop-addrmodify .ec-base-table.typeWrite .ec-address li {margin-bottom:10px;}
.xans-myshop-addrmodify .ec-base-table.typeWrite .ec-address li#shippingUpdate_detailAddr_wrap {margin:0;}
.xans-myshop-addrmodify .ec-base-table.typeWrite #ma_main_flag0 {margin-top:-3px;}
/* 마이페이지 정기배송 관리 */
.xans-myshop-orderregularmanagelist .message {border-bottom:1px solid #e6e6e6;font-size:16px;color:#9a9a9a;padding:64px 0;text-align:center;}
.xans-myshop-orderregularmanagelist .message svg {margin:0 auto 16px auto;}
.xans-myshop-orderregularmanagelist.typeList th {white-space:nowrap;}
.xans-myshop-orderregularmanagelist .order {margin-bottom:50px;}
.xans-myshop-orderregularmanagelist .order h3 {overflow:hidden;padding:20px 0 20px 15px;font-size:13px;background-color:#f6f6f6;border-top:2px solid #000;}
.xans-myshop-orderregularmanagelist .order h3 a {font-weight:400;}
.xans-myshop-orderregularmanagelist .order .prdBox .thumbnail {width:120px;height:auto;border:0;}
.xans-myshop-orderregularmanagelist .order .prdFoot .gLeft {line-height:40px;}
.regularDeliveryPayInfo .ec-base-box .information .status {color:#1a1a1a;}
.regularDeliveryPayInfo .ec-base-box .button > .btnNormal {padding:10px 20px;}
.xans-myshop-orderregularpg .ec-base-box {border:1px solid #e5e5e5;border-top:2px solid #1a1a1a;}
.xans-myshop-orderregularmanagedetaillist .colOrder {width:190px;}
.xans-myshop-orderregularmanagedetailregister .colOrder {width:190px;}
.xans-myshop-orderregularmanagedetaillist h3.title {padding-bottom:16px;border-bottom:2px solid #1a1a1a;font-weight:500;}
.xans-myshop-orderregularmanagedetaillist .ec-base-table {border-top:1px solid #e5e5e5;}
.xans-myshop-orderregularmanagedetaillist .prdBox .thumbnail {width:120px;height:auto;border:0;}
.xans-myshop-orderregularmanagedetaillist .prdFoot {border-top:0;}
/* 마이페이지 최근본상품 */
.xans-product-recentlist .ec-base-prdInfo .thumbnail {width:120px;height:auto;border:0;}
.xans-product-recentlist .ec-base-prdInfo .optionSelect {margin:0 0 24px 135px;}
.xans-product-recentlist .xans-product-listitem {border-top:2px solid #1a1a1a;overflow:hidden;}
/* 마이페이지 위시리스트 */
.xans-myshop-wishlist .ec-base-prdInfo .thumbnail {width:120px;height:auto;border:0;}
.xans-myshop-wishlist .xans-myshop-wishlistitem {border-top:2px solid #1a1a1a;overflow:hidden;}
/* 마이페이지 주문조회 */
.xans-myshop-orderhistorylistitem .order .order__number {border-top:2px solid #1a1a1a;}
.xans-myshop-orderhistorylistitem .ec-base-prdInfo .thumbnail {width:120px;height:auto;border:0;}
/* 마이페이지 주문상세조회 */
.xans-myshop-orderhistorydetailbasic .ec-base-prdInfo .thumbnail {width:120px;height:auto;border:0;}
.xans-myshop-orderhistorydetail .ec-base-fold.theme1.gBottomLine > .title {border-bottom:2px solid #1a1a1a;}
/* 마이페이지 추천인 아이디 */
.myshop_recommender .invite {margin:0;padding:50px 0;border:1px solid #e3e3e3;border-top:0;text-align:center;}
.myshop_recommender .invite > div {display:block;padding:0 0 10px;color:#000;font-size:16px;}
.myshop_recommender .invite p input {padding:4px;max-width:450px;width:100%;height:40px;border:1px solid #e3e3e3 !important;color:#111;}
.myshop_recommender .invite ul {margin:15px 0 0;font-size:14px;line-height:1.5;color:#6a6a6a;}
.myshop_recommender .invite .btnNormal {display:inline-block;height:40px;margin:0;padding:0 10px;font-size:14px;line-height:40px;color:#111;cursor:pointer;vertical-align:middle;border:1px solid #e3e3e3; -moz-box-sizing:border-box;box-sizing:border-box;}
/* 장바구니 */
.xans-order-basketpackage {margin:0 auto;}
.xans-order-basketpackage .ec-base-fold.theme1 > .title {border-top:0;}
.xans-order-basketpackage .ec-base-fold.theme1 > .title h3 {font-size:16px;}
.xans-order-basketpackage .title.subTitle h4 {background-color:#f9f9f9;font-size:16px;}
.xans-order-basketpackage .ec-base-prdInfo {border-bottom:1px solid #e8e8e8;}
.xans-order-basketpackage .ec-base-prdInfo .btnDelete {top:33px;}
.xans-order-basketpackage .ec-base-prdInfo .prdBox {padding:35px 0;}
.xans-order-basketpackage .ec-base-prdInfo .thumbnail {width:120px;height:auto;border:0;}
.xans-order-basketpackage .ec-base-prdInfo .description .prdName img {max-height:30px;}
.xans-order-basketpackage .ec-base-prdInfo .optionGroup {margin:35px 0 0 37px;padding:10px 16px 13px;width:100%;background-color:#f9f9f9;font-size:14px;}
.xans-order-basketpackage .ec-base-prdInfo .optionGroup .name {position:relative;padding: 0 0 0 15px;}
.xans-order-basketpackage .ec-base-prdInfo .optionGroup .name:before { content:''; position:absolute; width:6px; height:6px; top:7px; left:0; background:url('/SkinImg/img/ico_option_modify.svg') no-repeat 0 0;}
.xans-order-basketpackage .ec-base-prdInfo.gCheck .quantity {padding:0 0 0 37px;display:flex;align-items:center;width:100%;margin:24px 0;}
.xans-order-basketpackage .ec-base-prdInfo.gCheck .quantity .label {flex:1;font-size:14px;color:#7a7a7a;}
.xans-order-basketpackage .ec-base-prdInfo.gCheck .quantity .ec-base-qty {width:123px;padding:0 40px;}
.xans-order-basketpackage .ec-base-prdInfo.gCheck .quantity .ec-base-qty input[type="text"] {height:40px;line-height:38px;}
.xans-order-basketpackage .ec-base-prdInfo.gCheck .quantity .ec-base-qty a {width:40px;height:40px;}
.xans-order-basketpackage .ec-base-prdInfo.gCheck .quantity .ec-base-qty a:before {width:11px;left:14px;}
.xans-order-basketpackage .ec-base-prdInfo.gCheck .quantity .ec-base-qty .up:after {height:11px;margin:-5px 0 0 0;}
.xans-order-basketpackage .ec-base-prdInfo.gCheck .quantity [class^='btn'].sizeQty {height:40px;font-size:14px;padding:13px 20px;}
.xans-order-basketpackage .ec-base-prdInfo.gCheck .sumPrice {padding:24px 0 0 0;display:flex;align-items:center;width:100%;margin:0 0 24px 37px;border-top:1px solid #e8e8e8;}
.xans-order-basketpackage .ec-base-prdInfo.gCheck .sumPrice .label {flex:1;font-size:14px;color:#1a1a1a;text-align:left;}
.xans-order-basketpackage .ec-base-prdInfo .buttonGroup {position:static;width:100%;display:flex;margin:0 0 0 37px;;}
.xans-order-basketpackage .ec-base-prdInfo .buttonGroup a {flex:1;height:auto;padding:16px 20px;font-weight:400;}
.xans-order-basketpackage .ec-base-prdInfo .buttonGroup [class^='btn'] + [class^='btn'] {margin-left:8px;}
.xans-order-basketpackage .summary {margin:0 0 40px 0;font-size:14px;padding:24px;border-bottom:1px solid #e8e8e8;}
.xans-order-basketpackage .summary .title h5 {font-size:14px;}
.xans-order-basketpackage .summary strong {font-weight:400;}
.xans-order-basketpackage .ec-base-button a {height:50px;padding:17px 20px;font-weight:400;font-size:14px;}
.xans-order-basketpackage .cart-total {width:360px;}
.xans-order-basketpackage .cart-total .sticky {top:100px;}
.xans-order-basketpackage .cart-total .ec-base-help li {line-height:16px;}
.xans-order-basketpackage .totalSummary {padding:30px 24px;}
.xans-order-basketpackage .totalSummary__item {margin-bottom:16px;}
.xans-order-basketpackage .totalSummary__item .title {font-size:16px;color:#1a1a1a;}
.xans-order-basketpackage .totalSummary__item .data {font-size:14px;color:#1a1a1a;}
.xans-order-basketpackage .totalSummary__item .data strong {font-size:16px;font-weight:400;color:#1a1a1a;}
.xans-order-basketpackage .totalSummary .total {margin-top:30px;padding-top:30px;border-top:1px solid #e8e8e8;}
.xans-order-basketpackage .totalSummary .total .title {font-size:16px;color:#1a1a1a;}
.xans-order-basketpackage .totalSummary .paymentPrice {color:#1a1a1a;}
.xans-order-basketpackage .ec-base-prdEmpty {border-top:0;border-bottom:1px solid #e6e6e6;font-size:16px;color:#9a9a9a;padding:14px 0 64px;display:flex;flex-direction:column;align-items:center;}
.xans-order-basketpackage .ec-base-prdEmpty svg {margin-bottom:16px;}
.xans-order-basketguide .inner ul {margin-top:15px;}
/* 예치금 */
.xans-myshop-deposithistorylist .ec-base-table .message {border-bottom:1px solid #e6e6e6;font-size:16px;color:#9a9a9a;padding:64px 0;}
.xans-myshop-deposithistorylist .ec-base-table .message svg {margin:0 auto 16px auto;}
.xans-myshop-depositsummary.ec-base-box.gHalf {border-top:2px solid #1a1a1a;}
/* 좋아요 */
.xans-myshop-likeproductlist .ec-base-table td {padding:25px 20px;}
.xans-myshop-likeproductlist .ec-base-table td strong {font-weight:500;}
.xans-myshop-likeproductlist .ec-base-table td .icon {display:none;}
.xans-myshop-likeproductlist .ec-base-table td .button {display:none;}
.xans-myshop-likeproductlist .ec-base-table td.thumb img {width:120px !important;}
.xans-myshop-likeproductlist .ec-base-table .message {border-bottom:1px solid #e6e6e6;font-size:16px;color:#9a9a9a;padding:64px 0;}
.xans-myshop-likeproductlist .ec-base-table .message svg {margin:0 auto 16px auto;}
.xans-myshop-likecategorylist .ec-base-table .message {border-bottom:1px solid #e6e6e6;font-size:16px;color:#9a9a9a;padding:64px 0;}
.xans-myshop-likecategorylist .ec-base-table .message svg {margin:0 auto 16px auto;}
/* 커뮤니티 */
.xans-board-listpackage .ec-base-tab.typeMenu {display:none;}
.xans-product-additional .subject img,
.xans-myshop-boardpackage .ec-base-table table td.subject img,
.xans-board-listpackage .ec-base-table table td.subject img {height:auto;}
.xans-board-listpackage-8 .boardListEmpty {margin:56px 0 0;}
.xans-board-search {margin-left:auto;margin-right:auto;max-width:1230px;}
.xans-board-function {max-width: 1230px;width: 92%;margin-left: auto;margin-right: auto;margin-top:60px;}
.xans-board-read .ec-base-button.gBottom {margin-bottom:12px;}
.xans-board-commentform input[type=checkbox] + label,
.xans-board-commentwrite input[type=checkbox] + label {margin:0;}
.xans-board-product .information h3 {padding:0;}
.myshop_boardlist_empty {text-align:center;padding:64px 0;flex-direction:column;align-items:center;border-bottom:1px solid #e6e6e6;font-size:16px;color:#9a9a9a;display:none;}
.myshop_boardlist_empty svg {margin-bottom:16px;}
/* 검색페이지 */
.xans-product-searchdata .searchField .keywordArea {max-width:100% !important;}
/* 상품 옵션변경 팝업 */
.ec-base-layer.typeModal {transform:translateY(-50%);}
/* 모바일 우편번호 이미지 아이콘 */
.mCafe24Post.gMobile .addressList .address > a > img {height:13px;}
/* 대량구매문의 */
.xans-board-inquiryform .ec-base-table.typeWrite .ec-address > li {margin-top:10px;}
.xans-board-inquiryform .ec-base-table.typeWrite .ec-address > li:first-child {margin-top:0;}
.xans-board-inquirymodify .ec-base-table.typeWrite .ec-address > li {margin-top:10px;}
.xans-board-inquirymodify .ec-base-table.typeWrite .ec-address > li:first-child {margin-top:0;}
.xans-board-inquiryhead .information h3 {margin:0 0 5px 0;}
.xans-board-inquiryhead .information .price {font-weight:400;color:#111;}
.xans-board-inquiryview .ec-base-table th {padding:14px 27px;}
/* 페이징 */
.ec-base-paginate.typeList {margin:60px 0 0;}
.ec-base-paginate.typeList > a::after,
.ec-base-paginate.typeList > a::before {display:none !important;}
.ec-base-paginate.typeList > a {background:url('/SkinImg/img/btn_page_next.png') no-repeat center center;background-size:40px;height:40px;vertical-align:top;}
.ec-base-paginate.typeList > a:first-child,
.ec-base-paginate.typeList > a:first-child + a {background:url('/SkinImg/img/btn_page_prev.png') no-repeat center center;background-size:40px;}
.ec-base-paginate.typeList > a.first {background:url('/SkinImg/img/btn_page_first.png') no-repeat center center;background-size:40px;}
.ec-base-paginate.typeList > a.last {background:url('/SkinImg/img/btn_page_last.png') no-repeat center center;background-size:40px;}
/* 페이지경로 */
.path {margin:0 auto;padding:20px 0 0 0;}
/* 기획전 페이지 */
.xans-project-list {border:0;margin:0;}
.xans-project-list h3 {position:relative;}
.xans-project-list h3 span {position:absolute;}
/* 서브페이지 타이틀 */
.titleArea h2 {word-break:keep-all;word-wrap:break-word;width:100%;}
@media all and (max-width:1680px) {
/* 상품진열 할인율 */
.ec-base-product .prdList .thumbnail .sale_box {width:calc(40px + (50 - 40) * ((100vw - 370px) / (1760 - 370)));height:calc(40px + (50 - 40) * ((100vw - 370px) / (1760 - 370)));font-size:calc(12px + (14 - 12) * ((100vw - 370px) / (1760 - 370)));}
/* 상품진열 뱃지(목록 추천상품) */
.ec-base-product .prdList .thumbnail .badge {font-size:calc(13px + (16 - 13) * ((100vw - 370px) / (1760 - 370)));}
}
@media screen and (max-width:1024px) {
/* 상품진열 퀵바아이콘 */
.ec-base-product .prdList .thumbnail .likeButton {display:none;}
/* 상품진열 퀵바아이콘 */
.ec-base-product .prdList .icon__box {display:none;}
/* 상품진열 일반형3단 */
.ec-base-product .prdList > li {margin:0 0 35px 0;}
.ec-base-product ul.grid3 > li {width:100%;box-sizing:border-box;}
.ec-base-product ul.grid3 > li:last-child {margin-bottom:35px;}
.ec-base-product ul.grid3 > li:after {display:block;content:"";clear:both;}
/* 상품진열 일반형4단 */
.ec-base-product ul.grid3_slide .description,
.ec-base-product ul.grid4_slide .description,
.ec-base-product ul.grid5_slide .description,
.ec-base-product ul.grid5 .description,
.ec-base-product ul.grid4 .description {margin:10px 0 0 0;}
/* 상품진열 강조형 */
.ec-base-product ul.list_gallery > li {margin:0 0 35px 0;}
.ec-base-product ul.list_gallery .prdList__item {overflow:visible;}
.ec-base-product ul.list_gallery .thumbnail {margin:0 0 10px;}
.ec-base-product ul.list_gallery .thumbnail .icon {position:absolute;left:0;top:auto;bottom:0;font-size:0;margin:0;}
.ec-base-product ul.list_gallery .description {position:static;opacity:1;padding:0;background-color:transparent;}
.ec-base-product ul.list_gallery .description .name span {display:block;white-space:normal;overflow:visible;text-overflow:unset;}
/* 목록페이지 중분류 */
.ec-base-tab.typeMenu {width:100%;height:40px;}
.ec-base-tab.typeMenu .menu {flex-wrap:nowrap;}
.ec-base-tab.typeMenu ul > li {margin-bottom:0;text-align:center;}
.ec-base-tab.typeMenu li a.button {font-size:11px;padding:12px 20px 11px 20px;}
.ec-base-tab.typeMenu ul > li .iconWrap {display:none;}
.xans-project-package .title.section {margin-bottom:20px;}
/* 로그인 */
.xans-member-login .login {width:100%;max-width:100%;margin:0 auto;}
.xans-member-login .login__sns,
.xans-member-login .login__util,
.xans-member-login .wrap_security {max-width:100%;}
.xans-member-login .login__button {width:100%;max-width:100%;}
.xans-member-login .login__sns .wrap_sns_log a {padding: 0 16px;}
.xans-member-login .login__sns .btnKakao {background:url('/SkinImg/img/icon_sns_kakao.svg') no-repeat center left 16px;}
.xans-member-login .login__sns .btnNaver {background:url('/SkinImg/img/icon_sns_naver.svg') no-repeat center left 16px;}
.xans-member-login .login__sns .btnFacebook {background:url('/SkinImg/img/icon_sns_facebook.svg') no-repeat center left 16px;}
.xans-member-login .login__sns .btnLine {background:url('/SkinImg/img/icon_sns_line.svg') no-repeat center left 16px;}
.xans-member-login .login__sns .btnGoogle {background:url('/SkinImg/img/icon_sns_google.svg') no-repeat center left 16px;}
.xans-member-login .login__sns .btnApple {background:url('/SkinImg/img/icon_sns_apple.svg') no-repeat center left 16px;}
.xans-member-login .login__sns .yahoojp {background:url('/SkinImg/img/icon_sns_yahoo.png') no-repeat center left 16px;}
.xans-member-login .login__security {font-size:12px;}
.xans-member-login .login .wrap_security .wrap_find div {font-size:12px;}
.xans-member-login .login__security .secret {height:18px;}
.xans-member-login input[type="checkbox"] {width:18px;height:18px;}
.xans-member-login input[type=checkbox] + label {margin:0 15px 0 5px;}
/* 비회원 주문조회 */
.xans-myshop-orderhistorynologin {max-width:100%;}
.xans-myshop-orderhistorynologin .login .txt_nonmem_check {margin:40px 0 24px;}
.xans-myshop-orderhistorynologin .login .txtInfo {display:none;}
/* 아이디찾기 */
.xans-member-findid {max-width:100%;}
.xans-member-findid .ec-base-box.typeMember .content {width:100%;}
/* 아이디찾기 완료 */
.xans-member-findidresult {max-width:100%;}
.xans-member-findidresult .complete {width:100%;}
/* 비밀번호찾기 */
.xans-member-findpasswd {max-width:100%;}
.xans-member-findpasswd .ec-base-box.typeMember .content {width:100%;}
/* 비밀번호찾기 2단계 */
.xans-member-findpasswdmethod {max-width:100%;}
/* 비밀번호찾기 2단계 힌트 */
.xans-member-findPasswdQuestion {max-width:100%;}
.xans-member-findPasswdQuestion .ec-base-box.typeMember .content {width:100%;}
/* 비밀번호찾기 재설정 */
.xans-member-passwordreset {max-width:100%;}
.xans-member-passwordreset .ec-base-box.typeMember .content {width:100%;}
/* 비밀번호찾기 본인확인 */
.xans-member-passwordverification {max-width:100%;}
.xans-member-passwordverification .ec-base-box.typeMember .content {width:100%;}
/* 비밀번호찾기 완료 */
.xans-member-findpasswdresult {max-width:100%;}
.xans-member-findpasswdresult .complete {width:100%;}
/* 회원가입 약관 */
.xans-member-join {max-width:100%;}
/* 회원가입 */
.xans-member-join .titleArea--middle {display:flex;justify-content: space-between;align-items: baseline;padding:0 0 16px;background:none;margin:0;}
.xans-member-join .ec-base-table.typeWrite th[scope*="row"] {padding-left:0;margin:0 0 8px;}
.xans-member-join .icoRequired {margin-right:10px;}
.xans-member-join .ec-base-table.typeWrite td {padding:0;}
.xans-member-join .ec-base-table.typeWrite td input[type="text"],
.xans-member-join .ec-base-table.typeWrite td input[type="password"],
.xans-member-join .ec-base-table.typeWrite td select {width:100%;}
.xans-member-join .ec-base-table.typeWrite td.formGroup {padding-left:0 !important;}
.xans-member-join .ec-base-table.typeWrite .ec-address input[type="text"],
.xans-member-join .ec-base-table.typeWrite .ec-address select {width:100%;}
.xans-member-join .ec-base-table.typeWrite tr {margin:0 0 24px;}
/* 회원가입 완료 */
.xans-member-joincomplete .joinComplete {padding:40px 0;}
.xans-member-joincomplete .joinComplete .memberSpecial ul li {text-align:center;}
.xans-member-joincomplete .joinComplete .ec-base-box .information .description {display:flex;justify-content: center;}
/* 회원정보수정 */
.xans-myshop-asyncbenefit {max-width:100%;}
.xans-myshop-asyncbenefit .benefit {padding:0;}
.xans-myshop-asyncbenefit .benefit .description,
.xans-myshop-asyncbenefit .benefit .user {padding:24px 16px;}
.xans-member-edit .titleArea--middle {background:none;padding:0;margin:40px 0 16px 0;}
.xans-member-edit .ec-base-table.typeWrite th[scope*="row"] {padding:0;margin:0 0 8px;}
.xans-member-edit .ec-base-table.typeWrite th.member_id {margin:10px 0 8px;}
.xans-member-edit .icoRequired {margin-right:10px;}
.xans-member-edit .ec-base-table.typeWrite td {padding:0;}
.xans-member-edit .ec-base-table.typeWrite td input[type="text"],
.xans-member-edit .ec-base-table.typeWrite td input[type="password"],
.xans-member-edit .ec-base-table.typeWrite td select {width:100%;}
.xans-member-edit .ec-base-table.typeWrite td.formGroup {padding-left:0 !important;}
.xans-member-edit .ec-base-table.typeWrite .ec-address input[type="text"],
.xans-member-edit .ec-base-table.typeWrite .ec-address select {width:100%;}
.xans-member-edit .ec-base-table.typeWrite tr {margin:0 0 24px;}
.xans-member-edit #phone3,
.xans-member-edit #mobile3 {margin-right:0;}
.xans-member-edit .func_del {margin-left:0;}
/* 마이페이지 회원간편정보 */
.xans-myshop-asyncbankbook {border:0;border-top:1px solid #e3e3e3;border-bottom:1px solid #e3e3e3;width:108%;margin-left:-4%;box-sizing:border-box;}
.xans-myshop-asyncbankbook .xans-myshop-asyncbenefit {flex:auto;}
.xans-myshop-asyncbankbook .xans-myshop-asyncbenefit .user {flex-direction:column;align-items:center;padding:40px 0;}
.xans-myshop-asyncbankbook .user__thumb {width:60px;height:60px;margin:0;}
.xans-myshop-asyncbankbook .xans-myshop-asyncbenefit .user .user__info {text-align:center;margin:16px auto 0;}
.xans-myshop-asyncbankbook li {padding:25px 0;}
.xans-myshop-asyncbankbook li:first-child::after {display:none;}
/* 마이페이지 공통 */
.myshopArea {width:100%;max-width:calc(1230px - 280px) !important;padding:0 !important;margin:0 auto !important;min-height:auto;}
.myshopArea.section_full {width:100% !important;}
.myshopArea .titleArea--middle {background:none;padding:0;margin:40px 0 16px 0;}
div.ec-base-help > h2,
div.ec-base-help > h3 {padding-left:0;}
/* 마이페이지 나의주문처리 현황 */
.xans-myshop-orderstate .state__cs li {font-size:14px;}
.xans-myshop-orderstate .state__cs li strong {font-weight:400;font-size:14px;}
/* 마이페이지 좌측메뉴 */
.myshopArea .xans-myshop-main .subTitle {display:block;margin:0;background:none;padding:40px 0 16px 0;}
.myshopArea .xans-myshop-main .menu {border-top:2px solid #1a1a1a;padding-top:6px;}
.myshopArea .xans-myshop-main .menu li {margin:12px 0 0 0;border:0;}
.myshopArea .xans-myshop-main .menu li a {font-size:14px;color:#6a6a6a;padding:0;}
.myshopArea .xans-myshop-main .menu li a:after {display:none;}
.myshopArea .xans-myshop-main .consult {margin:40px 0 0;}
/* 마이페이지 주문내역 조회 */
.xans-myshop-orderhistoryhead {padding:0;}
.xans-myshop-orderhistoryhead fieldset {width:auto;min-width:0;max-width:none;}
.xans-myshop-orderhistoryhead .fText {min-width:110px;}
/* 마이페이지 쿠폰내역 */
.xans-myshop-couponserial .couponSerial {padding:16px;}
/* 마이페이지 배송주소록 관리 */
.xans-myshop-addrlist a[class^='btnEm'] {color:#fff !important;}
.xans-myshop-addrlist .ec-base-table {border-top:2px solid #1a1a1a;}
.xans-myshop-addrlist .ec-base-table.typeList tr {padding:20px 0 19px;}
.xans-myshop-addrlist .ec-base-table.typeList td {line-height:31px;}
.xans-myshop-addrlist .ec-base-table table tr td:nth-child(8) {width:100%;text-align:right;padding:0;}
.xans-myshop-addrregister .ec-base-table.typeWrite th {padding:24px 0 8px;}
.xans-myshop-addrregister .ec-base-table.typeWrite td {padding:0 0 0;}
.xans-myshop-addrregister .icoRequired {margin-right:10px;}
.xans-myshop-addrregister #ma_rcv_phone1,
.xans-myshop-addrregister #ma_rcv_mobile_no1 {margin-left:0;}
.xans-myshop-addrregister .ec-base-table tr.right {margin-top:10px;}
.xans-myshop-addrregister .ec-base-table tr.right label {margin-right:5px;}
.xans-myshop-addrmodify .ec-base-table.typeWrite th {padding:24px 0 8px;}
.xans-myshop-addrmodify .ec-base-table.typeWrite td {padding:0 0 0;}
.xans-myshop-addrmodify .icoRequired {margin-right:10px;}
.xans-myshop-addrmodify #ma_rcv_phone1,
.xans-myshop-addrmodify #ma_rcv_mobile_no1 {margin-left:0;}
.xans-myshop-addrmodify .ec-base-table tr.right {margin-top:10px;}
.xans-myshop-addrmodify .ec-base-table tr.right label {margin-right:5px;}
/* 마이페이지 정기배송 관리 */
.regularDeliveryPayInfo .ec-base-box .information .title {display:none;}
.regularDeliveryPayInfo .ec-base-box .information .status {padding:0;}
.regularDeliveryPayInfo .ec-base-box .information .info {padding:13px 0 0;}
.regularDeliveryPayInfo ul li {background:none;padding:0;}
.regularDeliveryPayInfo .ec-base-box .button {display:block;padding:10px 0 0 0;}
.xans-myshop-orderregularmanagelist .order .prdBox .thumbnail {width:80px;height:auto;border:0;}
.xans-myshop-orderregularmanagedetailregister .colOrder {width:140px;}
.xans-myshop-orderregularmanagedetaillist .colOrder {width:140px;}
.xans-myshop-orderregularmanagedetaillist .prdBox .thumbnail {width:80px;height:auto;border:0;}
.xans-myshop-orderregularmanagedetaillist .ec-base-table.typeWrite {padding:0;}
.xans-myshop-orderregularmanagedetaillist .ec-base-table.typeWrite tr {display:table-row;}
.xans-myshop-orderregularmanagedetaillist .ec-base-table.typeWrite .colOrder {width:100px;}
.xans-myshop-orderregularmanagedetaillist .ec-base-table.typeWrite th,
.xans-myshop-orderregularmanagedetaillist .ec-base-table.typeWrite td {border-bottom:1px solid #e5e5e5;display:table-cell;padding:14px 20px;}
/* 마이페이지 최근본상품 */
.xans-product-recentlist .ec-base-prdInfo .prdBox {padding:24px 0;}
.xans-product-recentlist .ec-base-prdInfo .btnDelete {right:0;}
.xans-product-recentlist .ec-base-prdInfo .thumbnail {width:80px;height:auto;border:0;}
.xans-product-recentlist .ec-base-prdInfo .optionSelect {margin:0 0 24px 0;}
/* 마이페이지 위시리스트 */
.xans-myshop-wishlist .ec-base-prdInfo .thumbnail {width:80px;height:auto;border:0;}
.xans-myshop-wishlist .ec-base-prdInfo .prdBox {padding:24px 0;}
.xans-myshop-wishlist .ec-base-prdInfo .btnDelete {right:0;}
/* 마이페이지 주문조회 */
.xans-myshop-orderhistorylistitem .ec-base-prdInfo .thumbnail {width:80px;height:auto;border:0;}
.xans-myshop-orderhistorylistitem .ec-base-prdInfo .prdBox {padding:24px 0;}
/* 마이페이지 주문상세조회 */
.xans-myshop-orderhistorydetailbasic .ec-base-prdInfo .thumbnail {width:80px;height:auto;border:0;}
/* 마이페이지 취소 */
.xans-myshop-orderhistoryapplycancel .ec-base-prdInfo .prdBox,
.xans-myshop-orderhistoryapplycancel .ec-base-table.typeWrite td,
.xans-myshop-orderhistoryapplycancel .ec-base-table.typeWrite th {padding-left:0;padding-right:0;}
/* 마이페이지 교환 */
.xans-myshop-orderhistoryapplyexchange .ec-base-prdInfo .prdBox,
.xans-myshop-orderhistoryapplyexchange .ec-base-table.typeWrite td,
.xans-myshop-orderhistoryapplyexchange .ec-base-table.typeWrite th {padding-left:0;padding-right:0;}
/* 마이페이지 반품 */
.xans-myshop-orderhistoryapplyreturn .ec-base-prdInfo .prdBox,
.xans-myshop-orderhistoryapplyreturn .ec-base-table.typeWrite td,
.xans-myshop-orderhistoryapplyreturn .ec-base-table.typeWrite th {padding-left:0;padding-right:0;}
.xans-myshop-orderhistoryapplyreturn .question {display:block;}
/* 마이페이지 추천인 아이디 */
.myshop_recommender .invite {margin:0;padding:25px 0;border:0;border-bottom:1px solid #e3e3e3;width:108%;margin-left:-4%;}
.myshop_recommender .invite > div {font-size:14px;}
.myshop_recommender .invite p input {padding:4px;max-width:auto;width:60%;height:40px;border:1px solid #e3e3e3 !important;color:#111;}
.myshop_recommender .invite ul {margin:10px 0 0;font-size:13px;}
/* 장바구니 */
.xans-order-basketpackage .ec-base-prdInfo .thumbnail {width:80px;height:auto;border:0;}
.xans-order-basketpackage .ec-base-prdInfo .description .prdName img {height:20px;}
.xans-order-basketpackage .ec-base-prdInfo .optionGroup {margin:35px 0 0 0;}
.xans-order-basketpackage .ec-base-prdInfo.gCheck .quantity {padding:0;}
.xans-order-basketpackage .ec-base-prdInfo.gCheck .sumPrice {margin:0 0 24px 0;}
.xans-order-basketpackage .ec-base-prdInfo .buttonGroup {padding:0;margin:0;}
.xans-order-basketpackage .ec-base-button {margin:0;}
.xans-order-basketpackage .ec-base-button > div {display:flex;width:100%;}
.xans-order-basketpackage .ec-base-button a {flex:1;margin-bottom:10px;}
.xans-order-basketpackage .cart-total {width:100%;margin-top:30px;}
.xans-order-basketpackage .totalSummary {margin:0 0 24px 0;}
.xans-order-basketpackage .typeModal .ec-base-button {margin:0 20px 10px;}
.xans-order-basketpackage .ec-base-button.gFixed > div {width:auto;}
/* 검색페이지 */
.xans-product-searchdata .searchResult {padding:40px 0 0 !important;}
.xans-product-searchdata .searchField {margin:0 !important;padding:0 0 24px !important;}
/* 좋아요 */
.xans-myshop-likeproductlist .ec-base-table colgroup {display:none;}
.xans-myshop-likeproductlist .ec-base-table td {padding:25px 5px;}
.xans-myshop-likeproductlist .ec-base-table td.thumb {width:80px}
.xans-myshop-likeproductlist .ec-base-table td.thumb img {width:80px !important;}
/* 예치금 */
.xans-myshop-depositsummary {margin-bottom:20px;}
.xans-myshop-deposithistorylist h3 {padding:19px 15px;line-height: 1.5;background: #f6f6f6;font-weight:500;}
.xans-myshop-deposithistorylist .item {margin-top:25px;}
.xans-myshop-deposithistorylist .ec-base-table {border:0;}
.xans-myshop-deposithistorylist .ec-base-table th {background:#fff;color:#6d6d6d;}
.xans-myshop-deposithistorylist .message {border-bottom:1px solid #e6e6e6;font-size:16px;color:#9a9a9a;padding:64px 0;text-align:center;}
.xans-myshop-deposithistorylist .message svg {margin:0 auto 16px auto;}
/* 버튼 */
.ec-base-button.gBottom .gLeft,
.ec-base-button.gBottom .gRight {flex-wrap:wrap;}
.ec-base-button.gBottom .gLeft > span {display:block;width:100%;margin-bottom:8px;}
.ec-base-button.gBottom .gLeft [class^='btn']:last-child {margin-right:0;}
.ec-base-button.gBottom .gRight [class^='btn']:first-child {margin-left:0;}
.ec-base-button.gBreak > [class^='btn'],
.ec-base-button.gBreak .gBreak [class^='btn'] {margin-left:0;margin-right:0;}
/* 커뮤니티 */
.xans-board-function {width:100%;padding-left:0;padding-right:0;}
.xans-board-movement li,
.xans-board-read .ec-base-table .detail,
.xans-board-read .ec-base-table .head {padding-left:0;padding-right:0;}
.xans-board-commentlist .boardComment li .name {float:none;display:block;margin-bottom:5px;}
.xans-board-commentlist .boardComment li .date {margin-left:0;}
.xans-board-read .ec-base-table .description .name {display:block;}
.xans-board-read .ec-base-table .etcArea li {padding:0 8px 0 0;}
.xans-board-commentlist .ec-base-button,
.xans-board-commentlist .boardComment li .formGroup button,
.xans-board-commentlist .boardComment li .formGroup .button,
.xans-board-commentlist .boardComment li .comment,
.xans-board-commentlist .boardComment li div.commentTop {margin-left:0;margin-right:0;}
/* 커뮤니티 글쓰기 */
.xans-board-reply .ec-base-table.typeWrite td,
.xans-board-reply .ec-base-table.typeWrite th,
.xans-board-modify .ec-base-table.typeWrite td,
.xans-board-modify .ec-base-table.typeWrite th,
.xans-board-write .ec-base-table.typeWrite td,
.xans-board-write .ec-base-table.typeWrite th {padding-left:0;padding-right:0;}
.xans-board-modify .ec-base-table.typeWrite td #email2,
.xans-board-write .ec-base-table.typeWrite td #email2 {width:45%;}
[class^='btn'][class*='Fix'].sizeM {min-width:110px;}
.xans-board-commentwrite .outside {flex-wrap:wrap;}
.xans-board-commentwrite .outside .secret {width:60%;}
.xans-board-commentwrite .input .ec-base-help {width:60%;}
/* 대량구매문의 */
.xans-board-inquiryview .ec-base-table th {padding:14px 14px;}
.xans-board-inquiryhead .information h3 {padding:0;}
.xans-board-inquirymodify .required {margin:10px 0;}
.xans-board-inquirymodify .ec-base-table.typeWrite th,
.xans-board-inquirymodify .ec-base-table.typeWrite td {padding-left:0;padding-right:0;}
.xans-board-inquirymodify select {margin-left:0 !important;}
.xans-board-inquirysearch {margin:10px 0 0px -10px;}
.xans-board-inquiryform .ec-base-table.typeWrite th,
.xans-board-inquiryform .ec-base-table.typeWrite td {padding-left:0;padding-right:0;}
.xans-board-inquiryform select {margin-left:0 !important;}
.xans-board-inquiryform .titleArea--middle {background:#fff;padding:27px 0 0;}
/* 페이지경로 */
.path {margin:0;padding:0;}
/* 기획전 페이지 */
.xans-project-list h3 span {position:absolute;top:-80px !important;}
/* 서브페이지 타이틀 */
.titleArea h2 {width:85%;}
}
@media all and (max-width:767px) {
/* 회원가입 */
.xans-member-join .ec-base-table.typeWrite table .interest label:nth-child(6n)::after {content:' ';white-space:pre;}
.xans-member-join .ec-base-table.typeWrite table .interest label:nth-child(4n)::after {content:'\a';white-space:pre;}
/* 회원정보수정 */
.xans-member-edit .ec-base-table.typeWrite table .interest label:nth-child(6n)::after {content:' ';white-space:pre;}
.xans-member-edit .ec-base-table.typeWrite table .interest label:nth-child(4n)::after {content:'\a';white-space:pre;}
/* 배송 주소록 관리 */
.xans-myshop-addrlist .ec-base-table table tr td:nth-child(2) {width:100%;}
.xans-myshop-addrlist .ec-base-table.typeList td {line-height:1.3;}
/* 슬라이드 상품진열 */
.ec-base-product ul.grid3_slide > li,
.ec-base-product ul.grid4_slide > li,
.ec-base-product ul.grid3_slide.list_gallery > li,
.ec-base-product ul.grid4_slide.list_gallery > li {width:calc(40% - 10px);}
.ec-base-product ul.grid5_slide > li,
.ec-base-product ul.grid5_slide.list_gallery > li {width:calc(29% - 10px);}
}
▼ 아래 텍스트 파일을 받아서 전체 복사해 가시면 편합니다.
▼ [저장]을 하고 난 후 확인 해 보면, 아래와 같이 카카오 스타일의 버튼이 적용된 것을 볼 수 있습니다.
※ 카페24 쇼핑몰
이외에도 카페24 쇼핑몰 운영에 되는 내용들을 아래 글에 정리해 두었습니다.