/* morenvy.com 220505 서정환 */ @charset "utf-8"; div#container #contents {max-width: 1920px; padding: 0; width: 100%; min-width: 1600px;} div#mheader {min-width: 1600px; } div#mheader + .mh_blank {display: none;} div#mheader.fixed {background: transparent; border-bottom: 0;} div#mheader.fixed.search {background-color: #fff; border-bottom: 1px solid #ededed;} div#mfooter {margin-top: 0; border-top: 0;} div.main_content {max-width: 1920px; margin: 0 auto;} section {margin-bottom: 160px !important;} /* 메인 : 스와이퍼 좌우버튼 */ div.swiper-button-prev, div.swiper-button-next {top: 50%; margin: 0; width: auto; height: auto; transform: translateY(-50%);} div.swiper-button-prev:after {content: url("//haebogi.com/morenvyimg/prev.svg");} div.swiper-button-next:after {content: url("//haebogi.com/morenvyimg/next.svg");} /* 메인 : 더보기 */ .more {position: relative; display: block; width: 160px; padding: 12px 0 12px 8px; box-sizing: border-box; font-size: 14px; line-height: 24px; letter-spacing: 0.04em; font-weight: 700; color: #1a1a1a; transition: color 0.5s; transition: padding-left 0.5s;} .more span {position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between;} .more:hover {color: #fff; padding-left:24px;} .more svg {margin-right: 0; transition: 0.5s;} .more svg path, .more svg rect {transition: 0.5s;} .more:hover svg {margin-right:16px;} .more:hover svg path {stroke: #fff;} .more:hover svg rect {fill : #fff;} .more:after {content: ''; display: block; width: 100%; height: 2px; background-color: #1a1a1a; z-index: 1; position: absolute; bottom: 0; left: 0; transition: height 0.5s;} .more:hover:after {height: 100%;} /* 메인01 : 메인 비주얼 */ section.mm_sec01 {position: relative;} section.mm_sec01 .swiper-slide .inner {position: absolute; top: 50%; left: 16.15%; transform: translateY(-50%);} section.mm_sec01 .swiper-slide .inner .t01 {opacity: 0; transform: translateY(20px); margin-bottom: 40px; display: inline-block; font-size: 14px; line-height: 24px; font-weight: 400; color: #1a1a1a; padding: 4px 16px; background-color: #b1fbe3; border-radius: 20px;} section.mm_sec01 .swiper-slide .inner .t02 {opacity: 0; transform: translateY(20px); margin-bottom: 24px; font-size: 56px; line-height: 72px; font-weight: 700; color: #1a1a1a;} section.mm_sec01 .swiper-slide .inner .t03 {opacity: 0; transform: translateY(20px); margin-bottom: 48px; font-size: 20px; line-height: 32px; font-weight: 400; color: #6a6a6a;} section.mm_sec01 .swiper-slide .inner .more {opacity: 0; transform: translateY(20px);} section.mm_sec01 .swiper-slide-active .inner .t01 {animation: sec01_ani 0.8s 1s forwards;} section.mm_sec01 .swiper-slide-active .inner .t02 {animation: sec01_ani 0.8s 0.5s forwards;} section.mm_sec01 .swiper-slide-active .inner .t03 {animation: sec01_ani 0.8s 1s forwards;} section.mm_sec01 .swiper-slide-active .inner .more {animation: sec01_ani 0.8s 1.3s forwards;} @keyframes sec01_ani { 0% {transform: translateY(20px); opacity: 0;} 100% {transform: translateY(0px); opacity: 1;} } section.mm_sec01 .swiper-button-next {right: 8%;} section.mm_sec01 .swiper-button-prev {left: 8%;} section.mm_sec01 .swiper-pagination {width: auto; left: inherit; right: 8%; bottom: 4%; display: flex; align-items: center;} section.mm_sec01 .swiper-pagination span.swiper-pagination-bullet {opacity: 1; background-color: #c8c8c8; width: 4px; height: 4px; border-radius: 50%; margin: 0 10px;} section.mm_sec01 .swiper-pagination span.swiper-pagination-bullet-active {border: 3px solid #1a1a1a; background-color: transparent;} /* 메인01 : 공지사항 */ section.mm_sec01 .sec01_board {z-index: 1; position: absolute; bottom: 0; left: 0; width: 40%; padding: 24px 40px 24px 10.4%; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(20px);} section.mm_sec01 .sec01_board > a {display: inline-block; margin-right: 32px; font-size: 16px; line-height: 40px; font-weight: 700; color: #1a1a1a;} section.mm_sec01 .swiper_board {display: flex; justify-content: space-between; margin: 0;} section.mm_sec01 .swiper_board .swiper-wrapper {width: 66%; font-size: 0;} section.mm_sec01 .swiper_board .swiper-slide a {display:inline-block; width: 80%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size: 16px; line-height: 40px; font-weight: 400; color: #6a6a6a;} section.mm_sec01 .swiper_board .swiper-slide a span {margin-right: 32px; border: 1px solid #e5e5e5; border-radius: 20px; box-sizing: border-box; padding: 8px 24px; font-size: 14px; line-height: 24px;font-weight: 400; color: #1a1a1a; } section.mm_sec01 .swiper_board .button_area {display: flex; align-items: center;} section.mm_sec01 .swiper_board .button_area div {position: static; transform: translateY(0);} section.mm_sec01 .swiper_board .swiper-button-prev:after {content: url("//haebogi.com/morenvyimg/left.svg");} section.mm_sec01 .swiper_board .swiper-button-next:after {content: url("//haebogi.com/morenvyimg/right.svg");} section.mm_sec01 .swiper_board.disabled .swiepr-wrapper {transform: translate3d(0,0,0) !important;} section.mm_sec01 .swiper_board.disabled .button_area {display: none !important;} /* 메인02 : 탭 상품 */ section.mm_sec02 .sec02_tab {display: flex; align-items: center; justify-content: center; margin-top: 48px;} section.mm_sec02 .sec02_tab div {position: relative; display: inline-block; font-size: 22px; line-height: 32px; font-weight: 700; color: #d8d8d8; cursor: pointer; transition: color 0.3s;} section.mm_sec02 .sec02_tab div:after {content: ''; position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%); display: block; width: 0; height: 2px; background-color: #1a1a1a; transition: width 0.3s;} section.mm_sec02 .sec02_tab span {display: inline-block; width: 1px; height: 18px; background-color: #ededed; margin: 15px 32px;} section.mm_sec02 .sec02_tab div.open {color: #1a1a1a;} section.mm_sec02 .sec02_tab div.open:after {width: 100%;} section.mm_sec02 .sec02_prd > div {display: none;} section.mm_sec02 .sec02_prd > div.open {display: block;} section.mm_sec02 .sec02_prd a.more {margin: 0 auto;} section.mm_sec02 .sec02_prd .prdList li .thumbnail .num {z-index: 1; position: absolute; top: 0; left: 0; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 0 0 16px 0; background-color: #bababa; font-size: 16px; line-height: 24px; font-weight: 700; color: #fff;} section.mm_sec02 .sec02_prd .prdList li:first-child .thumbnail .num {background-color: #1a1a1a;} /* 메인03 : 가로 배너 */ section.mm_sec03 {padding: 0 40px;} section.mm_sec03 .swiper-slide {font-size: 0;} section.mm_sec03 .swiper-slide .m_titleArea {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 63%; text-align: left;} section.mm_sec03 .swiper-button-prev {left: 6.5%;} section.mm_sec03 .swiper-button-next {right: 6.5%;} /* 메인04 : 키워드 */ section.mm_sec04 .keyword {display: flex; margin: 0 -20px; flex-wrap: wrap;} section.mm_sec04 .keyword a {display: flex; align-items: center; justify-content: center; width: calc(20% - 40px); padding: 4% 0; margin: 0 20px; border: 1px solid #e5e5e5; box-sizing: border-box; border-radius: 16px; font-size: 20px; line-height: 32px; font-weight: 500; color: #1a1a1a; transition: 0.3s;} section.mm_sec04 .keyword a:hover {border: 1px solid #1a1a1a; box-shadow: 0 8px 12px 0 rgb(0 0 0 / 10%);} section.mm_sec04 .keyword a:nth-child(n+6) {margin-top: 40px;} /* 메인05 : 타임세일 */ section.mm_sec05 {display: flex;} section.mm_sec05 .m_titleArea {width: 24%; margin-right: 1%; text-align: left;} section.mm_sec05 .swiper_sec05 {flex: 1;} /* 메인06 : 분할 배너 */ section.mm_sec06 {background-color: #f6f6f6; padding: 120px 0;} section.mm_sec06 .w1600 {position: relative;} section.mm_sec06 .inner {position: relative; width: 77.5%; margin: 0 auto; height: 0; padding: 18.75% 0;} section.mm_sec06 .inner > div {position: absolute; width: 51.6%; height: 0; padding: 21% 0; display: flex; align-items: center; justify-content: center;} section.mm_sec06 .inner .ban {z-index: 1; right: 0; top: 0;} section.mm_sec06 .inner .text {z-index: 2; left: 0; bottom: 0; background-color: #fff;} section.mm_sec06 .inner .text .m_titleArea {text-align: left; margin: 0; width: 100%; padding-left: 12.5%; box-sizing: border-box;} section.mm_sec06 .inner .text .m_titleArea a.more {margin-top: 128px;} section.mm_sec06 .swiper-button-prev {left: 4%;} section.mm_sec06 .swiper-button-next {right: 4%;} /* 메인07 */ section.mm_sec07 .swiper_sec07 .swiper-slide {display: flex;} section.mm_sec07 .swiper_sec07 .swiper-slide > div {flex:1; flex-basis: 50%;} section.mm_sec07 .swiper_sec07 .ban {position: relative;} section.mm_sec07 .swiper_sec07 .ban .button_area {z-index: 1; position: absolute; bottom: 0; right: 0; font-size: 0;} section.mm_sec07 .swiper_sec07 .ban .button_area > div {position: static; display: inline-block; padding: 4px; background-color: #fff; transform: translateY(0);} section.mm_sec07 .swiper_sec07 .box {display: flex; flex-direction: column; justify-content: center; padding-left: 7.5%; box-sizing: border-box;} section.mm_sec07 .swiper_sec07 .box .min_title {margin-bottom: 16px; font-size: 24px; line-height: 1; font-weight: 700; color: #1a1a1a;} section.mm_sec07 .swiper_sec07 .box .m_titleArea {text-align: left;} section.mm_sec07 .swiper_sec07 .box .m_titleArea .t02 {margin-top: 48px;} section.mm_sec07 .swiper_sec07 .box .tag {margin-top: 64px; font-size: 0; margin: 0 -8px;} section.mm_sec07 .swiper_sec07 .box .tag li {position: relative; display: inline-block; margin: 0 8px 5px; font-size: 16px; line-height: 24px; letter-spacing: -0.02em; font-weight: 400; color: #8a8a8a;} section.mm_sec07 .swiper_sec07 .box .tag li:before {content: ''; display: block; z-index: -1; position: absolute; bottom: 0; left: 0; width: 100%; height: 8px; background-color: #f3f3f3;} section.mm_sec07 .swiper_sec07 .box a.more {margin-top: 115px;} /* 메인08 : 3단 진열 */ section.mm_sec08 {text-align: center;} section.mm_sec08 .pro_icon .moption {display: none !important;} section.mm_sec08 .more_btn {display: inline-block;} section.mm_sec08 .more_btn a.more svg {margin-left: auto;} /* 메인09 : 리뷰 모음 */ section.mm_sec09 {padding: 120px 0; background-color: #f6f6f6; margin-bottom: 0 !important;} section.mm_sec09 .inner {display: flex;} section.mm_sec09 .m_titleArea {width: 24%; margin-right: 1%; text-align: left;} section.mm_sec09 .swiper_sec09 {flex: 1; height: max-content;} section.mm_sec09 .swiper_sec09 .swiper-slide {padding: 32px 32px 40px; box-sizing: border-box; background-color: #fff; border: 1px solid #ededed;} section.mm_sec09 .swiper_sec09 .swiper-slide .top {width: 100%; padding-bottom: 16px; border-bottom: 1px solid #ededed;} section.mm_sec09 .swiper_sec09 .swiper-slide .top .thumb {position: relative; display: flex; align-items: center; justify-content: center; height: 0; padding: 50% 0; margin-bottom: 32px; overflow: hidden;} section.mm_sec09 .swiper_sec09 .swiper-slide .top .thumb img {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; min-height: 100%; object-fit: cover;} section.mm_sec09 .swiper_sec09 .swiper-slide .top .t01 {font-size: 18px; line-height: 28px; letter-spacing: -0.02em; font-weight: 400; color: #1a1a1a; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} section.mm_sec09 .swiper_sec09 .swiper-slide .top .t02 {margin-top: 8px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; white-space:normal; overflow:hidden; text-overflow:ellipsis; font-size: 14px; line-height: 20px; max-height: 40px; letter-spacing: -0.02em; font-weight: 400; color: #8a8a8a;} section.mm_sec09 .swiper_sec09 .swiper-slide .top .t03 {display: flex; align-items: center; margin-top: 32px; font-size: 13px; line-height: 16px; font-weight: 400; color: #8a8a8a;} section.mm_sec09 .swiper_sec09 .swiper-slide .top .t03 svg {width: 16px; height: 16px; margin: 0 4px;} section.mm_sec09 .swiper_sec09 .swiper-slide .bottom {padding-top: 16px;} section.mm_sec09 .swiper_sec09 .swiper-slide .bottom a {display: flex; align-items: center;} section.mm_sec09 .swiper_sec09 .swiper-slide .bottom .img {flex-shrink: 0; display: flex; align-items: center; justify-content: center; margin-right: 12px; width: 40px; height: 40px; border: 1px solid #ededed; border-radius: 50%; overflow: hidden;} section.mm_sec09 .swiper_sec09 .swiper-slide .bototm .img img {width: 100%;} section.mm_sec09 .swiper_sec09 .swiper-slide .bottom .prd_name {flex:1; display: flex; flex-wrap: wrap; align-items: center;} section.mm_sec09 .swiper_sec09 .swiper-slide .bottom .prd_name .count {display: block; width: 100%; height: 12px;} section.mm_sec09 .swiper_sec09 .swiper-slide .bottom .prd_name .count img {width: auto; height: 100%;} section.mm_sec09 .swiper_sec09 .swiper-slide .bottom .prd_name .name {width: 80%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size: 13px; line-height: 20px; font-weight: 400; color: #1a1a1a;} section.mm_sec09 .swiper_sec09 .swiper-slide .bottom .prd_name svg {width: 20px; height: 20px; margin-left: auto;} section.mm_sec09 .swiper_sec09 .swiper-scrollbar {position: static; margin-top: 80px;} @charset "utf-8"; /* **************************** //필수 CSS 수정 및 삭제 불가 **************************** */ /* tag reset */ html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,img { margin:0; padding:0; } html { width:100%; height:100%; } body,code { font:0.75em Verdana,Dotum,AppleGothic,sans-serif; color:#353535; background:#fff; } body { min-width:1480px; } body#popup { min-width:0; } li { list-style:none; } img,fieldset { border:none; vertical-align:top; } table { width:100%; border:0; border-spacing:0; border-collapse:collapse; } caption { display:none; } th,td { border:0; vertical-align:top; } button { overflow:visible; padding:0; margin:0; border:0; cursor:pointer; } hr.layout { display:none; } a { text-decoration:none; color:#000; } a:hover { text-decoration:underline; } a:active { text-decoration:none; } .objHidden { visibility:hidden; position:absolute; left:-1000px; top:-1000px; height:0; width:0; } #content_CONTAINER table, #bi_inquire_content_CONTAINER table { border:0; margin:0 0 -1px; } #content_CONTAINER table:before, #bi_inquire_content_CONTAINER table:before { display:none; } #content_CONTAINER td, #bi_inquire_content_CONTAINER td { width:auto !important; padding:0; } table.nneditor-table { width:auto !important; } /* 결제진행바 */ #progressPaybarBackground { position:absolute; z-index:99; left:0; top:0; width:100%; height:100%; } #progressPaybarView { position:absolute; z-index:100; top:160px; left:20px; width:471px; font-size:12px; } #progressPaybarView .box { height:180px; background:url(//img.cafe24.com/images/ec_hosting/popup/layer_guide/bg_layer_box1.gif) 0 0 no-repeat; } #progressPaybarView .box .graph { padding:15px 0 0 0; text-align:center;} #progressPaybarView .box .graph span { display:block; text-align:center; margin:20px 0; } #progressPaybarView .box .txt { text-align:center; padding:15px 0 0; color:#555555; } div.layerProgress { filter:alpha(opacity=40); opacity:0.4; -moz-opacity:0.4; background-color:#999; } /* contents */ #skipNavigation {position:absolute; top:0; left:0; z-index:100; width:100%; height:0;} #skipNavigation p, #skipNavigation ul, #skipNavigation ul li {height:0;} #skipNavigation p a {position:absolute; left:0; top:0; display:block; overflow:hidden; width:1px; height:1px; margin-left:-1px; margin-bottom:-1px; text-align:center; color:#000; white-space:nowrap;} #skipNavigation p a:focus, #skipNavigation p a:hover, #skipNavigation p a:active {width:100%; height:auto; padding:10px 0; background:#c4122f; color:#fff; z-index:100;} .displaynone { display:none; } .dimmed { position:fixed; top:0; left:0; z-index:99; width:100%; height:100%; background:#fff; opacity:0.8; filter:alpha(opacity=80); } /* **************************** 필수 CSS 수정 및 삭제 불가 **************************** */ @charset "utf-8"; /* Layout */ #header { position:relative; border-bottom:1px solid #d8d8d8; } #header:before { position:absolute; top:35px; left:0; content:""; width:100%; height:0; border-top:1px solid #d8d8d8; } #header:after { position:absolute; bottom:45px; left:0; content:""; width:100%; height:0; border-top:1px solid #d8d8d8; } #header .inner { position:relative; width:1218px; margin:0 auto; *zoom:1; } #header .inner:after { content:""; display:block; clear:both; } #header .topArea { height:112px; padding:83px 0 0; text-align:center; *zoom:1; } #header .topArea:after { content:""; display:block; clear:both; } #header .special { float:left; border-left:1px solid #d8d8d8; } #header .special li { float:left; } #header .special a { display:block; height:20px; padding:16px 15px 9px; border-right:1px solid #d8d8d8; color:#353535; text-decoration:none; } #header .special a:hover { color:#008bcc; padding-bottom:7px; border-bottom:2px solid #008bcc; } #header .link { position:absolute; left:0; top:0; height:35px; line-height:35px; } #header .link > a, #header .link > span { float:left; } #header .link > a { margin:0 9px 0 0; padding:0 10px 0 0; color:#666; text-decoration:none; background:url("//img.echosting.cafe24.com/skin/base/common/ico_bar.gif") no-repeat 100% 12px; } #header .link > span img { vertical-align:middle; } #header .link .xans-layout-bookmark span { padding-left:17px; background:url("//img.echosting.cafe24.com/skin/base/layout/ico_bookmark.png") no-repeat 0 1px; } #wrap { position:relative; width:1460px; margin:27px auto 0; } #container { width:1218px; margin:0 auto; *zoom:1; } #container:after { content:""; display:block; clear:both; } #sidebar { float:left; width:180px; } #sidebar .banner { padding:0 0 20px; border-bottom:1px solid #e8e8e8; } #sidebar .banner p a { display:block; position:relative; height:20px; margin:0 0 0 10px; padding:10px 0 10px 25px; font-size:13px; font-weight:bold; line-height:20px; } #sidebar .banner [class*="Banner"]:before { position:absolute; top:11px; left:0; content:""; display:block; width:20px; height:20px; background:url("//img.echosting.cafe24.com/skin/base/layout/sfix_sidebar_banner.png") no-repeat; } #sidebar .banner p a.giftBanner:before { background-position:0 0; } #sidebar .banner p a.opdiaryBanner:before { background-position:-50px 0; } #sidebar .banner p a.sosBanner:before { background-position:-100px 0; } #sidebar .banner p a.attendBanner:before { background-position:0 -50px; } #sidebar .banner p a.couponzoneBanner:before { background-position:-50px -50px; } #sidebar .banner p a.calendarBanner:before { background-position:-100px -50px; } #sidebar .banner [class*="Banner"]:hover { text-decoration:none; } #contents { float:right; width:1014px; } #contents .visual img { max-width:100%; } #banner { position:absolute; top:0; left:0; width:90px; } #quick { position:absolute; top:0; right:0; width:90px; } #quick .banner a { display:block; margin:15px 0 0; } #footer { position:relative; margin:40px 0 0 0; border-top:1px solid #e8e8e8; border-bottom:45px solid #e8e8e8; } #footer:before { position:absolute; top:44px; left:0; content:""; width:100%; height:0; border-bottom:1px solid #e8e8e8; } #footer .inner { overflow:hidden; position:relative; width:1218px; margin:0 auto -45px; *zoom:1; } #footer .inner:after { content:""; display:block; clear:both; } /* Main */ #boardArea { overflow:hidden; margin:50px 0 0; border-top:1px solid #d8d8d8; } #bannerArea { margin:22px 0 0; } #bannerArea h2 { margin:0 0 16px; font-weight:normal; font-size:20px; color:#2e2e2e; text-align:center; } /* 탐색경로바 */ .path { overflow:hidden; height:30px; line-height:30px; *zoom:1; } .path span { overflow:hidden; position:absolute; width:0; height:0; white-space:nowrap; text-indent:100%; } .path ol { float:right; } .path li { float:left; padding:0 0 0 12px; margin:0 0 0 8px; color:#757575; background:url("//img.echosting.cafe24.com/skin/base/layout/ico_path.gif") no-repeat 0 10px; } .path li:first-child { background:none; } .path li a { color:#757575; } .path li strong, .path li strong a { color:#2e2e2e; } /* 타이틀 */ .titleArea { min-height:30px; margin:10px 0 20px; border-bottom:1px solid #e8e8e8; } .titleArea h2 { display:inline-block; color:#2e2e2e; font-size:16px; *display:inline; } .titleArea p { display:inline-block; position:relative; margin:0 0 0 6px; padding:0 0 0 10px; color:#939393; *display:inline; } .titleArea p:before { display:inline-block; position:absolute; top:0; left:0; content:""; width:1px; height:13px; border-left:1px solid #d9d9d9; } .titleArea ul { padding:5px 0; color:#939393; line-height:18px; } .titleArea ul li { position:relative; padding:0 0 0 9px; } .titleArea ul li:before { display:block; position: absolute; top:50%; left:0; content:""; width:2px; height:2px; margin:-2px 0 0 0; background:#939393; } /* 게시판 메인 */ .boardMain { overflow:hidden; *zoom:1; } .boardMain td img { vertical-align:middle; margin:1px; } .boardMain .board { position:relative; margin:0 0 65px; } .boardMain .leftArea { float:left; width:50%; } .boardMain .leftArea .board { margin:0 23px 65px 0; } .boardMain .rightArea { float:right; width:50%; } .boardMain .rightArea .board { margin:0 0 65px 23px; } .boardMain .board h3 { margin:0 0 13px; height:28px; font-size:16px; color:#2e2e2e; border-bottom:2px solid #626672; } .boardMain .board .btnLink { position:absolute; top:3px; right:0; } .boardMain .board .ec-base-table.typeList td { color:#a4a4a4; } .boardMain .board .ec-base-table.typeList td.title a, .boardMain .board .ec-base-table.typeList td.title a:hover { color:#4f4f4f; } .boardMain .board .galleryList { overflow:hidden; } .boardMain .board .galleryList ul { overflow:hidden; margin:0 -10px; } .boardMain .board .galleryList li { float:left; position:relative; width:20%; padding:0 0 12px 0; word-break:break-all; } .boardMain .board .galleryList li span { display:block; margin:0 10px; font-size:11px; color:#a4a4a4; } .boardMain .board .galleryList li .imgLink, .boardMain .board .galleryList li .imgLink:hover { display:block; margin:0 10px 5px; font-size:12px; } .boardMain .board .galleryList li .imgLink img { width:100%; max-height:110px; border:1px solid #ededed; } /* 퀵뷰 모달 */ #modalBackpanel { display:none; position:absolute; top:0; left:0; z-index:10000; width:100%; height:100%; background:#000; } #modalContainer { display:none; position:absolute; top:100px; left:100px; z-index:10001; width:975px; height:720px; border:1px solid #333; background:#fff; } #modalContainer #modalContent { width:100%; height:100%; } /* Font */ .txtInfo { color:#707070; } .txtWarn { color:#f76560; } .txtEm { color:#008bcc; } .txtDel, .strike, .discount { text-decoration:line-through; font-weight:normal; } .strike strong, .discount strong { font-weight:normal; } .txtNormal { font-weight:normal; font-style:normal; } .txtNum { display:inline-block; font-size:11px; color:#939393; word-break:normal; } .txt11 { font-size:11px; } .txt12 { font-size:12px; } .txt14 { font-size:14px; } .txt16 { font-size:16px; } .txt18 { font-size:18px; letter-spacing:-1px; } .txtIcon { font-size:12px; font-style:normal; } .txtBreak { word-break:break-all; word-wrap:break-word; } /* JP, TW, CN */ html:lang(ja) .txt11, html:lang(zh) .txt11, html:lang(zh-tw) .txt11 { font-size:12px; } /* grid */ .gBlank5 { display:block; margin-top:5px; } .gBlank10 { display:block; margin-top:10px; } .gBlank20 { display:block; margin-top:20px; } .gBlank30 { display:block; margin-top:30px; } .gIndent10 { margin-left:10px; } .gIndent20 { margin-left:20px; } .gSpace10 { margin-right:10px; } .gSpace20 { margin-right:20px; } .gMerge { position:relative; z-index:1; margin-top:-1px; } /* ec-base-qty */ .ec-base-qty { position:relative; display:inline-block; width:50px; margin:0 1px 0 0; text-align:left; } .ec-base-qty input[type="text"] { width:22px; height:23px; padding:0 0 0 5px; line-height:25px; border:1px solid #d4d8d9; border-radius:3px 0 0 3px; } .ec-base-qty .up { position:absolute; left:27px; top:0; } .ec-base-qty .down { position:absolute; left:27px; bottom:0; } .ec-base-qty .qtyUp {position:absolute; left:27px; top:0;} .ec-base-qty .qtyDown { position:absolute; left:27px; bottom:0;} .ec-base-qty .qtyUp .up { position:static; left:auto; top:auto; } .ec-base-qty .qtyDown .down { position:static; left:auto; top:auto; } /* ec-base-chk */ .ec-base-chk { display:inline-block; position:relative; margin:0 8px 0 0; width:22px; height:22px; vertical-align:top; cursor:pointer; } .ec-base-chk input { z-index:1; position:absolute; top:0; left:0; width:100%; height:100%; opacity:0; cursor:pointer; } .ec-base-chk .checkbox { position:absolute; top:0; left:0; width:100%; height:100%; background:url("//img.echosting.cafe24.com/skin/base/common/bg_join_check.png") no-repeat 0 0; } .ec-base-chk input:checked + .checkbox { background-position:-34px 0; } /* Form */ input,select,textarea { font-size:100%; font-family:"돋움", Dotum; color:#353535; vertical-align:middle; } input[type=radio], input[type=checkbox] { width:13px; height:13px; border:0; } input[type=text], input[type=password] { height:18px; line-height:20px; padding:2px 4px; border:1px solid #d5d5d5; color:#353535; font-size:12px; } input[type=radio] + label, input[type=checkbox] + label { margin:0 4px 0 2px; } select { height:24px; border:1px solid #d5d5d5; } textarea { padding:5px 6px; border:1px solid #d5d5d5; line-height:1.5; } input:-ms-input-placeholder, textarea:-ms-input-placeholder { color:#c1c1c1; } input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color:#c1c1c1; } input::-moz-placeholder, textarea::-moz-placeholder { color:#c1c1c1; opacity:1; } legend { visibility:hidden; position:absolute; left:-9999px; top:-9999px; width:0; height:0; line-height:0; } table tr.radioType input, span.noBorder input { border:none !important; width:auto !important; height:auto !important; margin:0 3px 0 0 !important; vertical-align:middle !important; background:none !important; } .gLabel { display:inline-block; } .gLabel label { margin-right:20px; line-height:22px; } .fWidthFull input[type=text] { width:100%; height:24px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } .fWidthFull textarea { width:100%; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } .fWidthFull select { width:100%; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } .fList.typeHor .gLabel { margin-right:20px; } .fList.typeVer .gLabel { display:block; } /* ec-base-radio */ .ec-base-radio.typeDelivery .ec-base-label{display:block;} .ec-base-tooltip { display:none; z-index:2; position:absolute; top:24px; padding:15px; border:1px solid #565960; background:#fff; -webkit-box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.15); -moz-box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.15); box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.15); } .ec-base-tooltip h3 { margin:0 0 8px; padding:0 10px; font-size:12px; border-bottom:0; background:url("//img.echosting.cafe24.com/skin/base/common/ico_layer_title.gif") no-repeat 0 50%; } .ec-base-tooltip h3 + p { margin:0 5px 10px; } .ec-base-tooltip h4 { margin:15px 10px 8px 5px; font-size:12px; } .ec-base-tooltip h4:before { display:inline-block; content:""; margin:0 5px 0 0; width:3px; height:3px; background:#666; vertical-align:middle; } .ec-base-tooltip .btnClose { position:absolute; right:14px; top:14px; } .ec-base-tooltip .edge { z-index:20; position:absolute; left:50%; top:-6px; display:block; margin:0 0 0 -5px; width:10px; height:6px; } .ec-base-tooltip .edge:before, .ec-base-tooltip .edge:after { display:inline-block; content:""; position:absolute; top:0; width:0; height:0; border:solid transparent; } .ec-base-tooltip .edge:before { margin:1px 0 0; border-bottom-color:#565960; border-width:0 5px 5px 5px; } .ec-base-tooltip .edge:after { left:1px; margin:2px 0 0; border-bottom-color:#fff; border-width:0 4px 4px 4px; } .ec-base-tooltip table th, .ec-base-tooltip table td { padding:8px 10px 7px 10px; border:1px solid #e8e8e8; line-height:1.5em; } .ec-base-tooltip table th { padding-right:0; background:#fbf9fa; } .ec-base-tooltip table thead th { text-align:center; } .ec-base-tooltip table tbody th { text-align:left; } .ec-base-tooltip table .left { text-align:left; } .ec-base-tooltip table .center { text-align:center; } .ec-base-tooltip table .right { text-align:right; } .ec-base-tooltip table .info { padding:0; color:#757575; } .ec-base-tooltip table p.info:before, .ec-base-tooltip table ul.info li:before { display:inline-block; content:""; margin:0 3px 0 0; width:4px; height:1px; background:#757575; vertical-align:middle; } .ec-base-tooltip .info { padding:10px 10px 0; margin:5px 0 0; } .ec-base-tooltip p.bullet, .ec-base-tooltip ul.bullet { margin:8px 10px; } .ec-base-tooltip p.bullet:before, .ec-base-tooltip ul.bullet li:before { display:inline-block; content:""; margin:-3px 3px 0 0; width:0; height:0; border:solid transparent; border-left-color:#333; border-width:2px 0 2px 2px; vertical-align:middle; } .ec-base-tooltip ul.bullet li { line-height:1.5em; } .ec-base-tooltip .txtEm { color:#008bcc; } .ec-base-tooltip .txtWarn { color:#f65b54; } /* typeUpper */ .ec-base-tooltip.typeUpper { top:auto; bottom:34px; } .ec-base-tooltip.typeUpper .edge { top:auto; bottom:-6px; } .ec-base-tooltip.typeUpper .edge:before { margin:0 0 -5px; border-top-color:#565960; border-width:5px 5px 0 5px; } .ec-base-tooltip.typeUpper .edge:after { left:1px; margin:0 0 -4px; border-top-color:#fff; border-width:4px 4px 0 4px; } span.ec-base-help, p.ec-base-help, ul.ec-base-help li { margin:2px 9px; padding:1px 0 1px 20px; line-height:1.4; background:url('//img.echosting.cafe24.com/skin/base/common/ico_info.gif') no-repeat 0 2px; } div.ec-base-help { margin:20px 0; border:1px solid #d6d4d4; line-height:18px; } div.ec-base-help > h2, div.ec-base-help > h3 { padding:9px 0 6px 10px; border-bottom:1px solid #e8e7e7; color:#101010; font-size:12px; background:#fbfbfb; } div.ec-base-help .inner { padding:0 9px 12px; } div.ec-base-help h4 { margin:22px 0 -4px; color:#404040; font-size:12px; font-weight:normal; } div.ec-base-help h4:first-child { margin-top:13px; } div.ec-base-help p { margin:15px 0 0 10px; color:#707070; } div.ec-base-help ul, div.ec-base-help ol { margin:15px 0 0 11px; } div.ec-base-help li { color:#707070; } /* number */ div.ec-base-help ol li { padding:0 0 0 25px; background:url('//img.echosting.cafe24.com/skin/base/common/ico_number.png') no-repeat; } div.ec-base-help ol .item1 { background-position:-484px 0; } div.ec-base-help ol .item2 { background-position:-434px -100px; } div.ec-base-help ol .item3 { background-position:-384px -200px; } div.ec-base-help ol .item4 { background-position:-334px -300px; } div.ec-base-help ol .item5 { background-position:-284px -400px; } div.ec-base-help ol .item6 { background-position:-234px -500px; } div.ec-base-help ol .item7 { background-position:-184px -600px; } div.ec-base-help ol .item8 { background-position:-134px -700px; } div.ec-base-help ol .item9 { background-position:-84px -800px; } div.ec-base-help ol .item10 { background-position:-34px -900px; } /* typeDash */ div.ec-base-help ul li { padding:0 0 0 11px; background:url('//img.echosting.cafe24.com/skin/base/common/ico_dash.gif') no-repeat 0 7px; } .ec-base-help.typeDash li { padding:0 0 0 11px; background:url("//img.echosting.cafe24.com/skin/base/common/ico_dash.gif") no-repeat 0 7px; } .ec-base-tooltip .ec-base-help.typeDash li { margin:2px 0; } .ec-base-product { margin:22px 0 0; } .ec-base-product .title { margin:0 0 17px; } .ec-base-product .title h2 { font-weight:normal; font-size:20px; color:#2e2e2e; text-align:center; } .ec-base-product .title h3 { font-weight:normal; font-size:20px; color:#2e2e2e; text-align:center; } .ec-base-product img { vertical-align:middle; } .ec-base-product a[href^='/product/detail.html'] > img { border:1px solid #ececec; } .ec-base-product .prdList { width:100%; min-width:756px; margin:-20px 0 0; font-size:0; line-height:0; } .ec-base-product .prdList > li { position:relative; display:inline-block; margin:30px 0 20px; color:#757575; vertical-align:top; } .ec-base-product .prdList .chk { position:absolute; top:-10px; left:0; right:0; display:block; margin:0 0 10px; } .ec-base-product .prdList .thumbnail { position:relative; margin:10px 7px; text-align:center; } .ec-base-product .prdList .thumbnail .prdImg { position:relative; } .ec-base-product .prdList .thumbnail a img { max-width:100%; box-sizing:border-box; } .ec-base-product .prdList .thumbnail .wish { position:absolute; right:3px; bottom:4px; z-index:1; cursor:pointer; } .ec-base-product .prdList .thumbnail .prdIcon { position:absolute; top:0; left:0; width:100%; height:100%; background-repeat:no-repeat; } .ec-base-product .prdList .thumbnail .icon { margin:10px 0 0; border-bottom:1px solid #e8e8e8; vertical-align:middle; } .ec-base-product .prdList .thumbnail .icon:after { content:""; display:block; clear:both; } .ec-base-product .prdList .thumbnail .promotion { float:left; margin:0 0 4px; text-align:left; } .ec-base-product .prdList .thumbnail .promotion img { margin:0 4px 0 0; } .ec-base-product .prdList .thumbnail .button { float:right; margin:0 0 4px; } .ec-base-product .prdList .thumbnail .button img { margin:0 2px 0 0; cursor:pointer; } .ec-base-product .prdList .thumbnail .button .option { display:inline; position:relative; } .ec-base-product .prdList .thumbnail .button .likeButton { display:inline-block; margin:0 5px; } .ec-base-product .prdList .thumbnail .button .likeButton button { font-family:verdana; color:#9a9a9a; letter-spacing:-1px; background:none; } .ec-base-product .prdList .thumbnail .button .likeButton button img { margin:0; vertical-align:middle; } .ec-base-product .prdList .thumbnail .button .likeButton button strong {height:16px; vertical-align:middle; } .ec-base-product .prdList .thumbnail .button .likeButton.selected button { color:#353535; } .ec-base-product .prdList .description { margin:0 auto; padding:0 7px; font-size:12px; line-height:18px; text-align:center; } .ec-base-product .prdList .description .name { display:block; text-align:left; font-weight:normal; } .ec-base-product .prdList .description .name a { color:#2e2e2e; } .ec-base-product .prdList .description .mileage { display:block; } .ec-base-product .prdList .description span.grid { display:block; } /* grid */ .ec-base-product ul.grid2 > li { width:50%; } .ec-base-product ul.grid3 > li { width:33.33%; } .ec-base-product ul.grid4 > li { width:25%; } .ec-base-product ul.grid5 > li { width:20%; } .ec-base-product ul.grid3 > li .color { max-width:230px; } .ec-base-product ul.grid4 > li .color { max-width:190px; } .ec-base-product ul.grid5 > li .color { max-width:130px; } /* right display */ .ec-base-product ul.grid2 li:after { content:""; display:block; clear:both; } .ec-base-product ul.grid2 li .thumbnail { float:left; width:220px; text-align:left; margin:0; } .ec-base-product ul.grid2 li .description { float:left; width:247px; padding:0 20px; } .ec-base-product ul.grid2 li .description .chk { position:static; text-align:left; } /* module="product_ListItem" */ .ec-base-product .spec { margin:0; } .ec-base-product .spec li { text-align:left; } .ec-base-product .spec li .title { font-weight:normal; vertical-align:top; } .ec-base-product .spec li .title span { vertical-align:top; } .ec-base-product .spec li .color { overflow:hidden; display:inline-block; margin:3px 0 0 0; } .ec-base-product .spec li .chips { float:left; width:10px; height:10px; margin:0 2px 2px 0; border:1px solid #e3e3e3; font-size:0; line-height:0; } .ec-base-product .discountPeriod { display:inline-block; z-index:10; position:relative; width:55px; height:19px; vertical-align:middle; } .ec-base-product .layerDiscountPeriod { left:50%; top:26px; width:247px; margin:0 0 0 -124px; } .ec-base-product .layerDiscountPeriod strong.title { display:block; margin:0 0 12px; padding:0 35px 0 0; font-weight:bold; color:#2e2e2e; } .ec-base-product .layerDiscountPeriod .content p { margin:2px 0 0; font-size:11px; line-height:16px; color:#757575; letter-spacing:-1px; } .ec-base-product .layerDiscountPeriod .content p strong { font-weight:normal; font-size:12px; color:#2e2e2e; } .ec-base-product .layerDiscountPeriod .content p strong span { font-size:11px; } .ec-base-product .prdList .shippingFee { position:relative; display:inline-block; } .ec-base-product .prdList .shippingFee .button { display:inline-block; float:none; } .ec-base-product .prdList .shippingFee .ec-base-tooltip { z-index:11; display:block; margin:0 0 0 -170px; width:360px; } .ec-base-product .prdList .shippingFee .ec-base-tooltip table th { width:40px; } .ec-base-product .prdList .shippingFee .ec-base-tooltip table th, .ec-base-product .prdList .shippingFee .ec-base-tooltip table td { padding:7px 10px 8px 10px; } .ec-base-product .btnTooltip { position:relative; display:inline-block; } .differentialShipping { display:none; overflow:hidden; position:absolute; left:50%; top:17px; z-index:100; width:350px; margin:0 0 0 -176px; } .differentialShipping h3.title { margin:0; height:35px; padding:0 35px 0 19px; border:0; color:#fff; font-size:14px; line-height:35px; background:#495164; } .differentialShipping .content { padding:12px 18px 14px 18px; border:1px solid #757575; border-top:0; text-align:center; background:#fff; } .differentialShipping .close { position:absolute; right:14px; top:12px; } .differentialShipping .close img { cursor:pointer; } .differentialShipping .content ul { color:#757575; line-height:25px; } .differentialShipping .content li { overflow:hidden; } .differentialShipping .content li strong { float:left; font-weight:normal; } .differentialShipping .content li span { float:right; color:#2e2e2e; } .differentialShipping .content .info { margin:7px 0 0; padding:7px 0 0; border-top:1px dotted #b0b1b3; color:#80aeef; text-align:right; } /* Thumbnail icon position */ .ec-product-bgLT { background-position:left top; } .ec-product-bgLC { background-position:left center; } .ec-product-bgLB { background-position:left bottom; } .ec-product-bgRT { background-position:right top; } .ec-product-bgRC { background-position:right center; } .ec-product-bgRB { background-position:right bottom; } .ec-product-bgCT { background-position:center top; } .ec-product-bgCC { background-position:center center; } .ec-product-bgCB { background-position:center bottom; } .ec-base-paginate { margin:30px 0; text-align:center; font-size:0; line-height:0; } .ec-base-paginate ol { display:inline-block; font-size:0; line-height:0; vertical-align:top; *display:inline; *zoom:1; *margin:0; } .ec-base-paginate li { display:inline-block; margin:0 0 0 -1px; border:1px solid #d7d5d5; font-size:12px; color:#757575; vertical-align:top; *display:inline; *zoom:1; } .ec-base-paginate li:first-child { margin-left:0; } .ec-base-paginate img { vertical-align:top; } .ec-base-paginate li a { display:block; width:33px; padding:9px 0; font-weight:bold; color:#939393; line-height:14px; background:#fff; } .ec-base-paginate li a:hover { text-decoration:none; background:#f0f2f2; } .ec-base-paginate li a.this { padding-bottom:6px; border-bottom:3px solid #495164; color:#495164; } .ec-base-paginate a.nolink { cursor:default; } /* typeSub */ .ec-base-paginate.typeSub ol { margin:0 15px; vertical-align:middle; } .ec-base-paginate.typeSub li { font-size:12px; border:0; } .ec-base-paginate.typeSub img { vertical-align:middle; } .ec-base-paginate.typeSub li a { width:auto; margin:0 5px 0; padding:2px; color:#353535; background:none; } .ec-base-paginate.typeSub li a.this { color:#008bcc; text-decoration:underline; border:0; } .ec-base-paginate.typeSub .first { margin-right:3px; } .ec-base-paginate.typeSub .last { margin-left:3px; } .ec-base-tab { position:relative; } .ec-base-tab .menu { margin:0 0 20px; border:1px solid #cbcdce; border-bottom-color:#202020; border-left:0; background:#f2f2f2; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; } .ec-base-tab .menu:after { content:""; display:block; clear:both; } .ec-base-tab .menu li { float:left; border-left:1px solid #cbcdce; background:#f2f2f2; } .ec-base-tab .menu li a { display:block; min-width:187px; margin:0 0 0 -1px; padding:12px 5px 11px; border-right:1px solid #cbcdce; color:#707070; text-decoration:none; outline:0; text-align:center; background:#f2f2f2; } .ec-base-tab .menu li:first-child a { margin-left:0; } .ec-base-tab .menu li.selected a { position:relative; top:-1px; left:-2px; margin:0 0 -1px; border:1px solid #202020; border-bottom:0; color:#fff; font-weight:bold; background:#4a5164; } .ec-base-tab .menu li.selected:first-child a { left:-1px; } .ec-base-tab > .right { position:absolute; top:8px; right:10px; line-height:24px; color:#909090; } /* typeLight */ .ec-base-tab.typeLight .menu li.selected a { margin:0 0 -2px; border-bottom:1px solid #fff; color:#404040; background:#fff; } /* grid (2~7) */ .ec-base-tab[class*="grid"] .menu { display:table; table-layout:fixed; width:100%; } .ec-base-tab[class*="grid"] .menu li { float:none; display:table-cell; vertical-align:middle; } .ec-base-tab[class*="grid"] .menu li a { display:inline-block; width:100%; min-width:0; margin:0; padding:11px 0; border:0; } .ec-base-tab[class*="grid"] .menu li.selected { position:relative; top:0; right:-1px; border:1px solid #292929; border-bottom:0; background:#4a5164; } .ec-base-tab[class*="grid"] .menu li:first-child.selected { right:0; } .ec-base-tab[class*="grid"] .menu li.selected a { position:static; background:none; } .ec-base-tab.grid2 .menu li { width:50.5%; } .ec-base-tab.grid3 .menu li { width:34%; } .ec-base-tab.grid4 .menu li { width:25.5%; } .ec-base-tab.grid5 .menu li { width:20.5%; } .ec-base-tab.grid6 .menu li { width:17%; } .ec-base-tab.grid7 .menu li { width:14.8%; width:15% \0/; } .ec-base-tab.grid7 .menu li:first-child { width:13% \0/; } /* gFlex */ .ec-base-tab.gFlex .menu { display:flex; border-right:0; } .ec-base-tab.gFlex .menu:after { display:none; } .ec-base-tab.gFlex .menu li { display:flex; align-items: center; float:none; flex:1; position:relative; } .ec-base-tab.gFlex .menu li:last-child { border-right:1px solid #cbcdce; } .ec-base-tab.gFlex .menu li a { width:100%; min-width:0; border-right:0; background:none; word-break:break-all; } .ec-base-tab.gFlex .menu li a:after { content:''; width:100%; height:100%; position:absolute; top:0; left:0; } .ec-base-tab.gFlex .menu li.selected { border:1px solid #292929; border-bottom:0; background:#4a5164; } .ec-base-tab.gFlex .menu li.selected a { left:0; margin:0 0 -1px -1px; background:#4a5164; border:0; position: initial;} /* button */ [class^='btnNormal'], a[class^='btnNormal'] { display:inline-block; box-sizing:border-box; padding:2px 8px; border:1px solid #d1d1d1; border-radius:2px; font-family:"굴림",Gulim; font-size:12px; line-height:18px; font-weight:normal; text-decoration:none; vertical-align:middle; word-spacing:-0.5px; letter-spacing:0; text-align:center; white-space:nowrap; color:#222; background-color:#fff; } [class^='btnSubmit'], a[class^='btnSubmit'] { display:inline-block; box-sizing:border-box; padding:2px 8px; border:1px solid transparent; border-radius:2px; font-family:"굴림",Gulim; font-size:12px; line-height:18px; font-weight:normal; text-decoration:none; vertical-align:middle; word-spacing:-0.5px; letter-spacing:0; text-align:center; white-space:nowrap; color:#fff; background-color:#4a5164; } [class^='btnEm'], a[class^='btnEm'] { display:inline-block; box-sizing:border-box; padding:2px 8px; border:1px solid transparent; border-radius:2px; font-family:"굴림",Gulim; font-size:12px; line-height:18px; font-weight:normal; text-decoration:none; vertical-align:middle; word-spacing:-0.5px; letter-spacing:0; text-align:center; white-space:nowrap; color:#fff; background-color:#84868b; } [class^='btnBasic'], a[class^='btnBasic'] { display:inline-block; box-sizing:border-box; padding:2px 8px; border:1px solid #d1d1d1; border-radius:2px; font-family:"굴림",Gulim; font-size:12px; line-height:18px; font-weight:normal; text-decoration:none; vertical-align:middle; word-spacing:-0.5px; letter-spacing:0; text-align:center; white-space:nowrap; color:#222; background-color:#f0f0f0; } [class^='btnNormal']:not(.disabled):hover { background-color:#f3f3f3; } [class^='btnSubmit']:not(.disabled):hover { background-color:#43495a; } [class^='btnEm']:not(.disabled):hover { background-color:#77797d; } [class^='btnBasic']:not(.disabled):hover { background-color:#e5e5e5; } [class^='btnNormal'].disabled { border-color:#e3e3e3; color:#999; } [class^='btnSubmit'].disabled { background-color:#9297a2; color:#f0f0f0; } [class^='btnEm'].disabled { background-color:#b5b6b9; color:#f0f0f0; } [class^='btnBasic'].disabled { color:#999; } /* size */ [class^='btn'].sizeS { padding:6px 8px; } [class^='btn'].sizeM { padding:10px 16px; } [class^='btn'].sizeL { padding:14px 16px; min-width:80px; font-weight:bold; } /* width Fix */ [class^='btn'][class*='Fix'] { width:72px; word-break:keep-all; word-wrap:break-word; } [class^='btn'][class*='Fix'].sizeS { width:96px; } [class^='btn'][class*='Fix'].sizeM { width:120px; padding-left:8px; padding-right:8px; } [class^='btn'][class*='Fix'].sizeL { width:160px; padding-left:8px; padding-right:8px; } /* icon button */ a.btnLink { color:#222; } a.btnLink:hover { text-decoration:none; -webkit-box-shadow:0 1px 0 0 #222; -moz-box-shadow:0 1px 0 0 #222; box-shadow:0 1px 0 0 #222; } a.btnLink:after { content:""; display:inline-block; margin:-2px -2px 0 3px; vertical-align:middle; border:0 0 0 10px; border-style:solid; border-color:transparent transparent transparent #77797d; } [class^='btn'] i { display:none \0/IE8; } [class^='btn'] .icoArrow { display:inline-block; width:3px; height:3px; margin:-2px 1px 0 1px; border:2px solid #77797d; border-width:0 2px 2px 0; vertical-align:middle; transform:rotate(-45deg); -webkit-transform: rotate(-45deg); -moz-transform:rotate(-45deg); -ms-transform:rotate(-45deg); -o-transform:rotate(-45deg); } [class^='btnSubmit'] .icoArrow, [class^='btnEm'] .icoArrow { border-color:#f0f0f0; } [class^='btn'] .icoDelete { position:relative; overflow:hidden; display:inline-block; width:10px; height:10px; margin:-2px 2px 0 0; vertical-align:middle; -webkit-transform:rotate(45deg); transform:rotate(45deg); } [class^='btn'] .icoDelete:before { content:""; position:absolute; top:0; right:4px; width:2px; height:10px; background:#77797d; } [class^='btn'] .icoDelete:after { content:""; position:absolute; top:4px; right:0; width:10px; height:2px; background:#77797d; } [class^='btnSubmit'] .icoDelete:before, [class^='btnSubmit'] .icoDelete:after, [class^='btnEm'] .icoDelete:before, [class^='btnEm'] .icoDelete:after { background:#f0f0f0; } [class^='btn'] .icoAdd, [class^='btn'] .icoRemove { position:relative; overflow:hidden; display:inline-block; width:8px; height:8px; margin:-2px 2px 0 0; vertical-align:middle; } [class^='btn'] .icoAdd:before, [class^='btn'] .icoAdd:after, [class^='btn'] .icoRemove:before { content:""; position:absolute; top:50%; left:50%; width:8px; height:8px; border-radius:2px; background:#77797d; } [class^='btn'] .icoAdd:before, [class^='btn'] .icoRemove:before { height:2px; margin:-1px 0 0 -4px; } [class^='btn'] .icoAdd:after { width:2px; margin:-4px 0 0 -1px; } [class^='btn'] img { margin:-2px 1px 0; vertical-align:middle; } /* unique */ .btnLogin, a.btnLogin { display:inline-block; box-sizing:border-box; width:100px; height:70px; line-height:70px; border-radius:2px; text-align:center; font-family:"굴림",Gulim; font-size:12px; font-weight:bold; text-decoration:none; color:#fff; background-color:#4a5164; } .btnLogin:hover { background-color:#43495a; } .btnAgree, a.btnAgree { display:inline-block; box-sizing:border-box; width:80px; height:70px; line-height:70px; border:1px solid #d1d1d1; border-radius:2px; text-align:center; font-family:"굴림",Gulim; font-size:12px; font-weight:bold; color:#222; text-decoration:none; background-color:#fff; } .btnAgree:hover { background-color:#f3f3f3; } .btnToggle { display:inline-block; font-size:0; line-height:0; } .btnToggle button { display:inline-block; box-sizing:border-box; border:1px solid #d1d1d1; margin:0 -1px 0 0; padding:0 7px; height:24px; line-height:24px; text-align:center; font-family:"굴림",Gulim; font-size:12px; outline:0; text-decoration:none; color:#222; background:#fff; } .btnToggle button:first-child { border-radius:2px 0 0 2px; } .btnToggle button:last-child { border-radius:0 2px 2px 0; } .btnToggle button.selected { position:relative; border:1px solid #84868b; color:#fff; background:#84868b; } /* ec-base-button */ .ec-base-button { padding:10px 0; text-align:center; } .ec-base-button.justify { position:relative; } .ec-base-button:after { display:block; content:""; clear:both; } .ec-base-button .gLeft { float:left; text-align:left; } .ec-base-button .gRight { float:right; text-align:right; } .ec-base-button.justify .gLeft { position:absolute; left:0; } .ec-base-button.justify .gRight { position:absolute; right:0; } .ec-base-button .text { margin:0 6px 0 10px; color:#353535; line-height:24px; } /* type */ .ec-base-button.typeBorder { margin-top:-1px; padding:10px 20px; border:1px solid #d7d5d5; } .ec-base-button.typeBG { padding:10px 20px; border:1px solid #d7d5d5; background:#fbfafa; } /* gColumn */ .ec-base-button[class*="gColumn"] { margin:0 auto; display:-webkit-flex; display:-moz-flex; display:-ms-flex; display:flex; -webkit-justify-content:center; -moz-justify-content:center; -ms-justify-content:center; justify-content:center; } .ec-base-button[class*="gColumn"]:after { display:none; } .ec-base-button[class*="gColumn"] [class^='btn'] { margin:0 2px; padding-left:8px; padding-right:8px; word-break:keep-all; word-wrap:break-word; white-space:normal; -webkit-flex:1; -moz-flex:1; -ms-flex:1; flex:1; display:-webkit-flex; display:-moz-flex; display:-ms-flex; display:flex; -webkit-align-items:center; -moz-align-items:center; -ms-align-items:center; align-items:center; -webkit-justify-content:center; -moz-justify-content:center; -ms-justify-content:center; justify-content:center; } .ec-base-button[class*="gColumn"] [class^='btn'][class*='Fix'] { -webkit-flex:none; -moz-flex:none; -ms-flex:none; flex:none; } /* gFlex */ .ec-base-button[class*="gColumn"] .gFlex2 { -webkit-flex:2; -moz-flex:2; -ms-flex:2; flex:2; } .ec-base-button[class*="gColumn"] .gFlex3 { -webkit-flex:3; -moz-flex:3; -ms-flex:3; flex:3; } .ec-base-button[class*="gColumn"] .gFlex4 { -webkit-flex:4; -moz-flex:4; -ms-flex:4; flex:4; } /* base */ .ec-base-box { padding:20px; margin-left:auto; margin-right:auto; border:5px solid #e8e8e8; color:#404040; } .ec-base-box.gHalf { position:relative; padding:20px 0; } .ec-base-box.gHalf:before { position:absolute; top:0; left:50%; display:block; content:""; width:1px; height:100%; background-color:#e6e6e6; } .ec-base-box.typeBg { background-color:#fbfafa; } .ec-base-box.typeThin { border-width:1px; border-color:#d7d5d5; } .ec-base-box.typeThin h3.boxTitle { margin:0 0 20px; font-size:20px; text-align:center; } .ec-base-box.typeThinBg { border-width:1px; border-color:#d7d5d5; background-color:#fbfafa; } .ec-base-box.center { text-align:center; } /* 약관 */ .ec-base-box.typeThinBg > .agree { padding:20px; border:1px solid #e6e6e6; background:#fff; } .ec-base-box.typeThinBg > .agree p { padding:0 0 17px; } /* typeMember */ .ec-base-box.typeMember { padding:0; } .ec-base-box.typeMember .information { display:table; table-layout:fixed; padding:10px 0; width:100%; box-sizing:border-box; } .ec-base-box.typeMember .information > .title, .ec-base-box.typeMember .information > .thumbnail { display:table-cell; padding:0 15px; width:70px; text-align:center; vertical-align:middle; } .ec-base-box.typeMember .information > .title { vertical-align:middle; } .ec-base-box.typeMember .information > .thumbnail img { max-width:70px; } .ec-base-box.typeMember .information .description { display:table-cell; padding:0 10px; width:auto; line-height:1.5em; border-left:1px solid #e8e8e8; vertical-align:middle; } .ec-base-box.typeMember.gMessage { border-width:1px; border-color:#d7d5d5; } .ec-base-box .message { display:block; padding:10px 0 10px 35px; border-bottom:1px solid #e8e7e7; background:#fbfbfb url("//img.echosting.cafe24.com/skin/base/common/ico_info.gif") no-repeat 10px center; } /* typeProduct */ .ec-base-box.typeProduct { display:table; table-layout:fixed; padding:15px 0; width:100%; box-sizing:border-box; } .ec-base-box.typeProduct .thumbnail, .ec-base-box.typeProduct .information { display:table-cell; padding:0 20px; vertical-align:middle; } .ec-base-box.typeProduct .thumbnail { width:100px; } .ec-base-box.typeProduct .thumbnail img { max-width:90px; border:1px solid #d7d5d5; } .ec-base-box.typeProduct .information { padding-left:0; } .ec-base-table table { position:relative; margin:10px 0 0; border:1px solid #d7d5d5; border-top:0; color:#fff; line-height:1.5; } .ec-base-table.gLayoutFixed table { table-layout:fixed; } .ec-base-table.gLayoutFixed .gLayoutAuto table { table-layout:auto; } .ec-base-table table:before { position:absolute; top:0; left:0; display:block; content:""; width:100%; height:1px; background:#d7d5d5; } .ec-base-table thead th { padding:11px 0 10px; border-left:1px solid #dfdfdf; border-bottom:1px solid #dfdfdf; color:#353535; vertical-align:middle; font-weight:normal; background:#fbfafa; } .ec-base-table tbody th { padding:11px 0 10px 18px; border:1px solid #dfdfdf; border-bottom-width:0; color:#353535; text-align:left; font-weight:normal; background-color:#fbfafa; } .ec-base-table th { word-break:break-all; word-wrap:break-word; } .ec-base-table th:first-child { border-left:0; } .ec-base-table td { padding:11px 10px 10px; border-top:1px solid #dfdfdf; color:#353535; vertical-align:middle; word-break:break-all; word-wrap:break-word; } .ec-base-table td.clear { padding:0 !important; border:0 !important; } /* horizontal */ /* typeWrite */ .ec-base-table.typeWrite td { padding:8px 10px 7px; } .ec-base-table.typeWrite img { max-width:100% !important; height:auto !important; } /* vertical */ /* typeList */ .ec-base-table.typeList table { border-top:1px solid #d7d5d5; } .ec-base-table.typeList table:before { display:none; } .ec-base-table.typeList td { padding:8px 10px 7px; } .ec-base-table.typeList tfoot td { padding:15px 10px 17px; background:#fbfafa; } .ec-base-table .message { border:1px solid #d7d5d5; padding:50px 0; text-align:center; color:#757575; font-weight:bold; } .ec-base-table table + .message { margin:-1px 0 0; } .ec-base-table table td.message { padding:50px 0; } .ec-base-table .scroll .message { border:0; } /* scroll */ .ec-base-table.typeList .head td { padding:11px 0 10px; border-left:1px solid #dfdfdf; border-bottom:1px solid #dfdfdf; color:#353535; vertical-align:middle; text-align:center; background:#fbfafa; } .ec-base-table.typeList .head td:first-child { border-left:0; } .ec-base-table.typeList .scroll { position:relative; overflow-x:hidden; overflow-y:scroll; max-height:185px; min-height:100px; border:1px solid #d7d5d5; border-top-width:0; margin-top:-1px; } .ec-base-table.typeList .scroll table { border:0; margin:0; } .ec-base-table.typeList .scroll table:before { display:none; } .ec-base-table.typeList .scroll .message { border: 0; } /* thead - blind */ .ec-base-table thead.blind, .ec-base-table thead.blind th { display:none; } .ec-base-table thead.blind + tbody tr:first-child th, .ec-base-table thead.blind + tbody tr:first-child td { border-top-width:0; } /* Line */ .ec-base-table.typeList.gLine table { border-width:0; border-bottom-width:1px; } /* common */ /* border, background style none */ .ec-base-table.typeClear table:before { display:none; } .ec-base-table.typeClear table, .ec-base-table.typeClear th, .ec-base-table.typeClear td { border:0 none; background:none; } .ec-base-table.typeClear th { font-weight:bold; } /* border */ .ec-base-table.gBorder td { border-left:1px solid #dfdfdf; } .ec-base-table.gBorder td:first-child { border-left:0; } .ec-base-table.gBorder td.gClearLine { border-left:0; } .ec-base-table.typeList.gBorder tbody td { border-color:#eee; } /* align */ .ec-base-table .left { text-align:left; } .ec-base-table .center { text-align:center; } .ec-base-table .right { text-align:right; } .ec-base-table.typeList .center td, .ec-base-table.typeList td.center { padding-left:0; padding-right:0; } .ec-base-table.typeList .center td.left { padding-left:10px; } .ec-base-table.typeList .center td.right { padding-right:10px; } .ec-base-table .top th, .ec-base-table th.top, .ec-base-table .top td, .ec-base-table td.top { vertical-align:top; } .ec-base-table .middle th, .ec-base-table th.middle, .ec-base-table .middle td, .ec-base-table td.middle { vertical-align:middle; } /* form */ .ec-base-table img { vertical-align:middle; } /* address */ .ec-base-table .ec-address { margin:-9px -10px -7px; } .ec-base-table .ec-address > li { padding:8px 10px 7px; border-top:1px solid #dfdfdf; } .ec-base-table .ec-address > li input[type="text"] { width:373px; } .ec-base-table .ec-address > li select { width:383px; } .ec-base-table .ec-address .ec-base-help { margin-left:0; } .ec-base-table .ec-address .ec-address-area select { display:block; } .ec-base-table .ec-address .ec-address-area select:not(:first-child) { margin-top:6px; } .ec-base-table .ec-address .ec-address-zipcode input[type="text"] { width:80px; margin-right:3px; } .ec-base-table .ec-address .ec-address-zipcode .btnBasic { margin-right:4px; } @media print { .ec-base-table table:before { display:none; } } .ec-base-desc { overflow:hidden; text-align:left; } .ec-base-desc:after { content:""; display:block; clear:both; } .ec-base-desc dt, .ec-base-desc .term { float:left; width:100px; margin:0 0 2px; padding:0 4px 0 0; line-height:22px;-webkit-box-sizing:border-box; -moz-webkit-box:border-box; box-sizing:border-box; font-weight:normal; } .ec-base-desc dd, .ec-base-desc .desc { display:block; margin:0 0 2px; padding:0 5px 0 100px; min-height:22px; line-height:22px; word-wrap:break-word; word-break:break-all; } .ec-base-desc dd:after, .ec-base-desc .desc:after { content:""; display:block; clear:left; } /* size */ .ec-base-desc.gSmall dt, .ec-base-desc.gSmall .term { width:30%; } .ec-base-desc.gSmall dd, .ec-base-desc.gSmall .desc { padding-left:30%; } .ec-base-desc.gMedium dt, .ec-base-desc.gMedium .term { width:40%; } .ec-base-desc.gMedium dd, .ec-base-desc.gMedium .desc { padding-left:40%; } .ec-base-desc.gLarge dt, .ec-base-desc.gLarge .term { width:50%; } .ec-base-desc.gLarge dd, .ec-base-desc.gLarge .desc { padding:0 0 0 50%; } /* align */ .ec-base-desc.centerDT dt, .ec-base-desc.centerDD dd, .ec-base-desc.centerDT .term, .ec-base-desc.centerDD .desc, .ec-base-desc.center, .ec-base-desc .center { text-align:center; } .ec-base-desc.rightDT dt, .ec-base-desc.rightDD dd, .ec-base-desc.rightDT .term, .ec-base-desc.rightDD .desc, .ec-base-desc.right, .ec-base-desc .right { text-align:right; } .ec-base-desc.rightDD dd, .ec-base-desc.rightDD .desc { padding-right:0; } /* typeBullet */ .ec-base-desc.typeBullet dt, .ec-base-desc.typeBullet .term { padding:0 4px 0 10px; background:url("//img.echosting.cafe24.com/skin/base/common/ico_arrow.png") no-repeat 0 7px; } /* typeDot */ .ec-base-desc.typeDot dt, .ec-base-desc.typeDot .term { position:relative; padding:0 4px 0 10px; } .ec-base-desc.typeDot dt:before, .ec-base-desc.typeDot .term:before { position:absolute; top:50%; left:0; content:""; display:block; width:2px; height:2px; margin:-2px 0 0 0; background:#383838; } /** * Swiper 6.8.4 * Most modern mobile touch slider and framework with hardware accelerated transitions * https://swiperjs.com * * Copyright 2014-2021 Vladimir Kharlampidi * * Released under the MIT License * * Released on: August 23, 2021 */ @font-face{font-family:swiper-icons;src:url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA') format('woff');font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff}.swiper-container{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1}.swiper-container-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;box-sizing:content-box}.swiper-container-android .swiper-slide,.swiper-wrapper{transform:translate3d(0px,0,0)}.swiper-container-multirow>.swiper-wrapper{flex-wrap:wrap}.swiper-container-multirow-column>.swiper-wrapper{flex-wrap:wrap;flex-direction:column}.swiper-container-free-mode>.swiper-wrapper{transition-timing-function:ease-out;margin:0 auto}.swiper-container-pointer-events{touch-action:pan-y}.swiper-container-pointer-events.swiper-container-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform}.swiper-slide-invisible-blank{visibility:hidden}.swiper-container-autoheight,.swiper-container-autoheight .swiper-slide{height:auto}.swiper-container-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-container-3d{perspective:1200px}.swiper-container-3d .swiper-cube-shadow,.swiper-container-3d .swiper-slide,.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top,.swiper-container-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-container-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-container-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-container-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-container-horizontal.swiper-container-css-mode>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-container-vertical.swiper-container-css-mode>.swiper-wrapper{scroll-snap-type:y mandatory}:root{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{position:absolute;top:50%;width:calc(var(--swiper-navigation-size)/ 44 * 27);height:var(--swiper-navigation-size);margin-top:calc(0px - (var(--swiper-navigation-size)/ 2));z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--swiper-navigation-color,var(--swiper-theme-color))}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-next:after,.swiper-button-prev:after{font-family:swiper-icons;font-size:var(--swiper-navigation-size);text-transform:none!important;letter-spacing:0;text-transform:none;font-variant:initial;line-height:1}.swiper-button-prev,.swiper-container-rtl .swiper-button-next{left:10px;right:auto}.swiper-button-prev:after,.swiper-container-rtl .swiper-button-next:after{content:'prev'}.swiper-button-next,.swiper-container-rtl .swiper-button-prev{right:10px;left:auto}.swiper-button-next:after,.swiper-container-rtl .swiper-button-prev:after{content:'next'}.swiper-button-next.swiper-button-white,.swiper-button-prev.swiper-button-white{--swiper-navigation-color:#ffffff}.swiper-button-next.swiper-button-black,.swiper-button-prev.swiper-button-black{--swiper-navigation-color:#000000}.swiper-button-lock{display:none}.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-container-horizontal>.swiper-pagination-bullets,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:10px;left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{transform:scale(.33)}.swiper-pagination-bullet{width:8px;height:8px;display:inline-block;border-radius:50%;background:#000;opacity:.2}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-webkit-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet:only-child{display:none!important}.swiper-pagination-bullet-active{opacity:1;background:var(--swiper-pagination-color,var(--swiper-theme-color))}.swiper-container-vertical>.swiper-pagination-bullets{right:10px;top:50%;transform:translate3d(0px,-50%,0)}.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:6px 0;display:block}.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px}.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:.2s transform,.2s top}.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 4px}.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap}.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s left}.swiper-container-horizontal.swiper-container-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right}.swiper-pagination-progressbar{background:rgba(0,0,0,.25);position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color,var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top}.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top}.swiper-container-horizontal>.swiper-pagination-progressbar,.swiper-container-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:4px;left:0;top:0}.swiper-container-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-container-vertical>.swiper-pagination-progressbar{width:4px;height:100%;left:0;top:0}.swiper-pagination-white{--swiper-pagination-color:#ffffff}.swiper-pagination-black{--swiper-pagination-color:#000000}.swiper-pagination-lock{display:none}.swiper-scrollbar{border-radius:10px;position:relative;-ms-touch-action:none;background:rgba(0,0,0,.1)}.swiper-container-horizontal>.swiper-scrollbar{position:absolute;left:1%;bottom:3px;z-index:50;height:5px;width:98%}.swiper-container-vertical>.swiper-scrollbar{position:absolute;right:3px;top:1%;z-index:50;width:5px;height:98%}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:rgba(0,0,0,.5);border-radius:10px;left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;object-fit:contain}.swiper-slide-zoomed{cursor:move}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;animation:swiper-preloader-spin 1s infinite linear;box-sizing:border-box;border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@keyframes swiper-preloader-spin{100%{transform:rotate(360deg)}}.swiper-container .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-container-fade.swiper-container-free-mode .swiper-slide{transition-timing-function:ease-out}.swiper-container-fade .swiper-slide{pointer-events:none;transition-property:opacity}.swiper-container-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-fade .swiper-slide-active,.swiper-container-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-cube{overflow:visible}.swiper-container-cube .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1;visibility:hidden;transform-origin:0 0;width:100%;height:100%}.swiper-container-cube .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-cube.swiper-container-rtl .swiper-slide{transform-origin:100% 0}.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-next,.swiper-container-cube .swiper-slide-next+.swiper-slide,.swiper-container-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-container-cube .swiper-slide-shadow-bottom,.swiper-container-cube .swiper-slide-shadow-left,.swiper-container-cube .swiper-slide-shadow-right,.swiper-container-cube .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-container-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0px;width:100%;height:100%;opacity:.6;z-index:0}.swiper-container-cube .swiper-cube-shadow:before{content:'';background:#000;position:absolute;left:0;top:0;bottom:0;right:0;filter:blur(50px)}.swiper-container-flip{overflow:visible}.swiper-container-flip .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-container-flip .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-flip .swiper-slide-active,.swiper-container-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-flip .swiper-slide-shadow-bottom,.swiper-container-flip .swiper-slide-shadow-left,.swiper-container-flip .swiper-slide-shadow-right,.swiper-container-flip .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden} /* morenvy.com 211124 영광 */ /* select */ select::-ms-expand {display:none} select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url("//haebogi.com/morenvyimg/select.png"); background-repeat: no-repeat; background-size: 11px 6px; background-position: center right 8px; padding-right: 30px; border-color: #e5e5e5; border-radius: 0px; background-color: #fff; min-width: 86px; padding: 0 25px 0 8px; } /* 서브페이지 전체 타이틀 */ .titleArea p {display:none;} .titleArea {min-height:30px;margin:50px 0 40px;border-bottom:0;} .titleArea h2 {font-size:24px;color:#222;font-weight:400;} /* 회원가입 페이지 */ .xans-member-join {width:100%;margin:0 auto;vertical-align:top;} .xans-member-join > h3, .xans-member-join .titleArea3 {font-size:20px; color:#1a1a1a; font-weight:700;text-align:left; margin:0 0 16px 0; padding:80px 0 0 0;} .xans-member-join .ec-base-table table {border:0;margin:0;padding:0;border-collapse:collapse;border-spacing:0;border-top:1px solid #1a1a1a;} .xans-member-join .ec-base-table table:before {content:none;} .xans-member-join .ec-base-table tbody td {border:0;border-bottom:1px solid #eee;padding:16px 0 16px 18px; background-color:#fff;font-size:14px;color:#9a9a9a; line-height:34px;} .xans-member-join .ec-base-table tbody th {border:0;border-bottom:1px solid #eee;padding:16px 0 16px 18px; background-color:#fafafa;font-size:14px;color:#1a1a1a;line-height:34px;} .xans-member-join .ec-base-table tbody th {vertical-align:middle;} .xans-member-join .ec-base-table tbody td input {padding:0 10px; height:38px; line-height:38px; border:1px solid #e9e9e9; margin-right:8px;} .xans-member-join .ec-base-table .ec-address > li {border:0;} .xans-member-join input[type=text], .xans-member-join input[type=password] {font-size:14px;} .xans-member-join .sAllChecked_box {border-top:1px solid #1a1a1a;padding:24px 0 24px 16px; font-weight:500; font-size:16px; color:#1a1a1a;} .xans-member-join .sAllChecked_box p {line-height:28px;} .xans-member-join .sAllChecked_box .ec-base-chk {margin:0px 8px 0px 0px;} .xans-member-join .sAllChecked_box .ec-base-chk {margin-top:5px;} .xans-member-join .agreeArea .ec-base-chk {margin:0;} .xans-member-join .agreeArea {padding:15px 0 15px 18px;;} .xans-member-join .agreeArea input[type=checkbox]:not(old), .xans-member-join .agreeArea input[type=radio]:not(old){width:20px;} .xans-member-join .agreeArea input[type=checkbox]:not(old) + label, .xans-member-join .agreeArea input[type=radio]:not(old) + label{display:inline-block;margin:0 0 0 -29px; padding:0 0 0 40px; line-height:20px; color:#9a9a9a;} .xans-member-join .agreeArea .check {height:20px;line-height:20px;float:left;padding:0;width:50%;} .xans-member-join .agreeArea .check label {color:#9a9a9a; font-size:14px;} .xans-member-join .agreeArea .showhide {float:right;font-size:14px;color:#6f6f6f;border-bottom:1px solid #9a9a9a; line-height:20px;font-weight:400;cursor:pointer;} .xans-member-join .linebox {border-top:1px solid #eee;border-bottom:1px solid #eee;padding:10px 0;} .xans-member-join .agreeArea.marketin {padding:0;} .xans-member-join .agreeArea.marketin .check {display:inline-block;margin-right:20px;} .xans-member-join .agreeArea.marketin .check input[type=checkbox]:not(old) {width:18px;} .xans-member-join .agreeArea.marketin .check input[type=checkbox]:not(old) + label {display:inline-block; margin:0 0 0 0px; padding:0 0 0 0px; background:#fff; line-height:18px;color:#1a1a1a;} .xans-member-join .agreeArea .content {margin-top:40px; border:1px solid #e9e9e9; padding:24px 40px;} .xans-member-join .agreeArea .check > span > label[for="is_news_mail0"] > label[for="is_news_mail0"] {margin-left:-47px;background-color:#fff;} .xans-member-join .agreeArea .check > span > label[for="is_sms0"] > label[for="is_sms0"] {margin-left:-47px;background-color:#fff;} .xans-member-join #name, .xans-member-join #user_passwd_confirm, .xans-member-join #passwd, .xans-member-join #member_id {width:204px;} .xans-member-join #postcode1, .xans-member-join #postcode2 {width:90px;} .xans-member-join #addr1, .xans-member-join #addr2 {width:480px;} .xans-member-join #phone2, .xans-member-join #phone3, .xans-member-join #mobile2, .xans-member-join #mobile3 {width:80px;margin:0 7px;} .xans-member-join #phone1, .xans-member-join #mobile1 {width:102px;height:38px;line-height:36px;font-size:14px;border:1px solid #e9e9e9;margin-right:7px;} .xans-member-join #email1 {width:204px;margin-right:7px;} .xans-member-join #email2 {width:204px;margin:0 7px;} .xans-member-join #email3 {width:204px;height:38px;line-height:36px;font-size:14px;border:1px solid #e9e9e9;margin-left:7px;} .xans-member-join #nick_name {width:204px;} .xans-member-join #birth_year, .xans-member-join #marry_year, .xans-member-join #partner_year {width:80px;} .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:55px;margin:0 7px;} .xans-member-join .ec-base-table.add_title tbody td {color:#1a1a1a;} .xans-member-join #is_lifetime0 {margin:0;} .xans-member-join .verify {vertical-align:unset;} .xans-member-join .verify #verify_sms_number {padding:0 10px;height:38px;line-height:36px;border:1px solid #e9e9e9; margin-right:8px;} .xans-member-join #btn_verify_mobile_confirm, .xans-member-join #btn_verify_mobile_confirm, .xans-member-join #btn_action_verify_mobile, .xans-member-join #postBtn, .xans-member-join .btnstyle {border:1px solid #e9e9e9;color:#1a1a1a;background-color:#fff;width:94px;height:38px;text-align:center;padding:0;line-height:36px;font-size:14px; font-family:'Red Hat Display','Pretendard',sans-serif; } .xans-member-join .ec-base-button a {width:200px !important; height:56px; line-height:56px; border-radius:28px; background-color:#1a1a1a;color:#fff; font-size:16px;text-align:center;display:block;font-weight:500;padding:0;margin:20px auto;-webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;font-family:'Red Hat Display','Pretendard',sans-serif; } .xans-member-join .ec-base-button a:hover {background-color:#5a5a5a;} .xans-member-join select {height:38px;} .xans-member-join .ec-base-chk .checkbox {-webkit-appearance: none;appearance: none;display: inline-block;overflow: hidden; width:20px; height:20px; background: url("//haebogi.com/morenvyimg/checkbox.png") no-repeat center;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;border:0;} .xans-member-join .ec-base-chk input:checked + .checkbox {-webkit-appearance: none;appearance: none;display: inline-block;overflow: hidden;width: 20px;height: 20px; background: url("//haebogi.com/morenvyimg/checkbox_on.png") no-repeat center;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} /* 회원정보수정 */ .xans-member-edit {width:100%;margin:0 auto;vertical-align:top;} .xans-member-edit h3 {font-size:26px; color:#1a1a1a; font-weight:700;text-align:left; margin:0 0 26px 0; padding:60px 0 0 0;} .xans-member-edit .ec-base-table table {border:0;margin:0;padding:0;border-collapse:collapse;border-spacing:0;border-top:1px solid #1a1a1a;} .xans-member-edit .ec-base-table table:before {content:none;} .xans-member-edit .ec-base-table tbody td {border:0;border-bottom:1px solid #eee;padding:16px 0 16px 18px; background-color:#fff;font-size:14px;color:#9a9a9a; line-height:34px;} .xans-member-edit .ec-base-table tbody th {border:0;border-bottom:1px solid #eee;padding:16px 0 16px 18px; background-color:#fafafa;font-size:14px;color:#1a1a1a;line-height:34px;} .xans-member-edit .ec-base-table tbody th {vertical-align:middle;} .xans-member-edit .ec-base-table tbody td input {padding:0 10px; height:38px; line-height:38px; border:1px solid #e9e9e9; margin-right:8px;} .xans-member-edit .ec-base-table .ec-address > li {border:0;} .xans-member-edit input[type=text], .xans-member-edit input[type=password] {font-size:14px;} .xans-member-edit .required {margin:-25px 0 10px;} .xans-member-edit .ec-base-table ul.certifInfo li, .xans-member-edit .ec-base-table p.certifInfo {background:url("//img.echosting.cafe24.com/skin/base_ko_KR/common/bg_list.gif") no-repeat 0 16px;} .xans-member-edit .verify {vertical-align:unset;} .xans-member-edit .verify #verify_sms_number {padding:0 10px;height:36px;line-height:36px;border:1px solid #e9e9e9; margin-right:8px;} .xans-member-edit #btn_verify_mobile_confirm, .xans-member-edit #btn_verify_mobile_confirm, .xans-member-edit #btn_action_verify_mobile, .xans-member-edit #postBtn, .xans-member-edit .btnstyle {border:1px solid #e9e9e9;color:#1a1a1a;background-color:#fff;width:94px;height:38px;text-align:center;padding:0;line-height:36px;font-size:14px;font-family:'Red Hat Display','Pretendard',sans-serif; } .xans-member-edit #name, .xans-member-edit #user_passwd_confirm, .xans-member-edit #passwd, .xans-member-edit #member_id {width:204px;} .xans-member-edit #postcode1, .xans-member-edit #postcode2 {width:90px;} .xans-member-edit #addr1, .xans-member-edit #addr2 {width:480px;} .xans-member-edit #phone2, .xans-member-edit #phone3, .xans-member-edit #mobile2, .xans-member-edit #mobile3 {width:80px;margin:0 7px;} .xans-member-edit #phone1, .xans-member-edit #mobile1 {width:102px;height:38px;line-height:36px;font-size:14px;border:1px solid #e9e9e9;margin-right:7px;} .xans-member-edit #email1 {width:204px;margin-right:7px;} .xans-member-edit #email2 {width:204px;margin:0 7px;} .xans-member-edit #email3 {width:204px;height:38px;line-height:36px;font-size:14px;border:1px solid #e9e9e9;margin-left:7px;} .xans-member-edit #nick_name {width:204px;} .xans-member-edit #birth_year, .xans-member-edit #marry_year, .xans-member-edit #partner_year {width:80px;} .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:55px;margin:0 7px;} .xans-member-edit #is_lifetime0 {margin:0;} .xans-member-edit p.txtDesc, .xans-member-edit ul.txtDesc li {color:#1a1a1a;margin:8px 0 0 0;} .xans-member-edit p.txtDesc:before, .xans-member-edit ul.txtDesc li:before {top:8px;} .xans-member-edit .txtDesc strong {color:#ff5982;font-size:15px;} .xans-member-edit select {height:38px;} .xans-member-edit .justify a {height:49px;line-height:49px;background-color:#1a1a1a;color:#fff;font-size:15px;text-align:center;padding:0;margin:20px auto;border-radius: 8px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;font-family:'Montserrat','Pretendard',sans-serif;} .xans-member-edit .justify a.btnEmFix {background-color:#fff; color:#1a1a1a;border: 1px solid #d1d1d1;} .xans-member-edit .justify a:hover {background-color:#5a5a5a; } .xans-member-edit .justify a.btnEmFix:hover {background-color: #f5f5f5;} .xans-member-edit .justify .gRight a {width:120px;height:49px;line-height:49px;padding:0;border:1px solid #e9e9e9;background-color:#fff;color:#444;font-size:15px;text-align:center;display:inline-block;font-weight:400;} /* 회원가입 완료페이지 */ .xans-member-joincomplete {border:0; padding:0px;} .xans-member-joincomplete .ec-base-button a {width:400px;height:56px;line-height:56px;background-color:#1a1a1a;color:#fff;font-size:16px;text-align:center;display:block;font-weight:500;padding:0;margin:0 auto;-webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;} .xans-member-joincomplete .ec-base-button a:hover {background-color:#5a5a5a;} .xans-member-joincomplete .joinComplete .ec-base-box {width:400px;text-align: center; border:none;} .xans-member-joincomplete .ec-base-box {padding:0px;} .xans-member-joincomplete .ec-base-box .message {color: #1a1a1a; background:none; padding:0px; font-size: 20px; line-height: 32px; margin: 0px; border:0px;} .xans-member-joincomplete .ec-base-box.typeMember .information {padding:24px 16px; border:1px solid #e9e9e9; margin:40px 0px 0px; border-radius:16px;} .xans-member-joincomplete .joinComplete .memberSpecial {margin:40px 0 0; font-size:14px; line-height:20px; color:#9a9a9a;} .xans-member-joincomplete .joinComplete .memberSpecial strong {color:#1a1a1a;} .xans-member-joincomplete .ec-base-box.typeMember .information .description {padding:0 0px 0px 16px; border-left:1px solid #e8e8e8;} .xans-member-joincomplete .btnLogin_bk {margin-bottom:16px;} .xans-member-joincomplete .gBlank20 {margin:0px;} /* 마이페이지 포인트 색상 */ .xans-myshop-asyncbankbook .use, .txtEm {color:#111;} /* 마이페이지 나의주문처리현황 */ .xans-myshop-orderstate {border:0px; margin:64px 0 0;} .xans-myshop-orderstate .state {padding:0px;} .xans-myshop-orderstate .title {padding:0 0 24px; background:none; border-bottom:0px} .xans-myshop-orderstate .title h3 {font-size:20px; color: #1a1a1a; font-weight:700; } .xans-myshop-orderstate .order { float:none; width:100%; margin:0 0% 32px; display:inline-block;} .xans-myshop-orderstate .order li {float:left; width:23.33%; padding: 24px 0px; margin: 0; border:1px solid #e9e9e9; border-right: 1px solid #e9e9e9;box-sizing:border-box; text-align: center;border-radius:10px;} .xans-myshop-orderstate .order li:nth-child(2) {margin:0 2%} .xans-myshop-orderstate .order li:nth-child(3) {margin:0 2% 0 0;} .xans-myshop-orderstate .order li strong {font-weight:normal; color:#1a1a1a;} .xans-myshop-orderstate .order .count {color:#1a1a1a;} .xans-myshop-orderstate .cs { float: none; width: 80%;clear: both;height:60px;line-height:60px;border-radius:10px; padding:0 10%; background: #f9f9f9;} .xans-myshop-orderstate .cs li { float:left;width:33.33%; margin: 0 0 0px 0px; letter-spacing: 0.04em; word-spacing: 4px;text-align:center;} .xans-myshop-orderstate .cs .icoDot {display:none;} .xans-myshop-orderstate .cs strong {font-size:14px;} .xans-myshop-orderstate .cs a {font-size:14px;} .xans-myshop-orderstate .cs .count {color:#1a1a1a;} .xans-myshop-orderstate .desc {font-size:13px;} .xans-myshop-orderstate .desc em {color:#1a1a1a; font-weight:700;} /* 마이페이지 메뉴 아이콘 */ #myshopMain {margin:64px 0 0;} #myshopMain .shopMain {float:left; width:48%; height:64px ; line-height:64px; margin:0 1% 24px 1%; padding:0px 24px ; border:1px solid #e9e9e9; box-sizing:border-box; text-align: center; border-radius:8px;} #myshopMain .shopMain {-webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;} #myshopMain .shopMain h3:before {display:none;} #myshopMain .shopMain h3 { position: relative; font-size:13px; color:#1a1a1a; font-weight: normal; float:left; width:40%; text-align:left; height:64px; line-height:64px;} #myshopMain .shopMain h3 a {padding:0px } #myshopMain .shopMain h3 span {display:inline ;padding:0 0px 0 6px ;} #myshopMain .shopMain p {width:60%; float:left; text-align:right;} #myshopMain .shopMain p br {display:none;} #myshopMain .shopMain p a { font-size:13px; line-height:64px ; color:#8a8a8a;} #myshopMain .shopMain:hover {border:1px solid #1a1a1a; } /* 마이페이지 조회 */ .xans-myshop-asyncbankbook { padding:24px 0px 24px 0px; margin:24px auto 0 auto; border: 1px solid #e9e9e9; border-top: 1px solid #e9e9e9; background:#fff; border-radius:8px;} .xans-myshop-asyncbankbook > div {display:none} .xans-myshop-asyncbankbook ul {float: none !important; width:100%; font-size:0px;} .xans-myshop-asyncbankbook ul li {display:inline-block; float:none; margin:0px; padding:0px 2%; width:16.65% !important; box-sizing:border-box; height:48px; border-right:1px dotted #cfcfcf; } .xans-myshop-asyncbankbook ul li:last-child {border-right:0px;} .xans-myshop-asyncbankbook .title {font-size:14px; line-height:24px; width:100%; color:#1a1a1a;} .xans-myshop-asyncbankbook .data {font-size:13px; line-height:24px; float:left; width:65%; padding:0px; text-align: left; color:#1a1a1a;} .xans-myshop-asyncbankbook [class^='btnNormal'] { -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;} .xans-myshop-asyncbankbook [class^='btnNormal'] {border-radius:4px; line-height:16px; margin:2px 0px 0px !important} /* 게시판 : 목록 */ div.xans-board-listpackage {position:relative;} div.xans-board-listpackage .ec-base-table table {margin-top:0;border:0; border-top: 0; border-bottom: 1px solid #e9e9e9;} div.xans-board-listpackage .ec-base-table thead th {border-bottom:0; border-left:0; padding: 24px 0; font-size: 14px; line-height: 24px; font-weight: 400; color: #1a1a1a; background-color: #f6f6f6;} div.xans-board-listpackage .ec-base-table.typeList tbody:first-of-type tr:first-child td {border-top: 0;} div.xans-board-listpackage .ec-base-table.typeList td {padding: 28px 0; font-size: 14px; line-height: 24px; color: #9a9a9a; font-weight: 400;} div.xans-board-listpackage .ec-base-table.typeList td:first-child, div.xans-board-listpackage .ec-base-table.typeList td.subject {color: #1a1a1a;} div.xans-board-listpackage .ec-base-table.typeList td .txtNum {color: #9a9a9a; font-size: 14px;} div.xans-board-listpackage .ec-base-table.typeList.gBorder td {border-left:0;} div.xans-board-listpackage .ec-base-table.typeList .center td:not(.thumb).left {padding-left: 32px;} div.xans-board-listpackage .ec-base-table.typeList .center td.thumb {padding-left: 24px;} div.xans-board-listpackage .ec-base-table.typeList .center td.thumb img {width: 72px; height: 72px; border: 1px solid #e9e9e9; box-sizing: border-box;} div.xans-board-listpackage .boardSort {float: none; margin:0px 0 24px; text-align: right;} div.xans-board-listpackage .boardSort select { height:40px; border-color:#e9e9e9; font-size:13px; line-height:22px;} div.xans-board-listpackage-8 .xans-board-list-8 li strong, div.xans-board-listpackage-8 .xans-board-list-8 li em {display:inline-block; font-size:14px; font-weight:400; padding-right:12px; color:#9a9a9a;} div.xans-board-catemove {padding:0px 0px 40px; border-top:0px; border-bottom:1px dashed #e9e9e9;} div.xans-board-listpackage-8 .boardListEmpty {border:0px; font-size:16px !important; font-weight:500 !important; color:#9a9a9a !important; padding:80px 0px !important; margin:80px 0px !important; background: url("//haebogi.com/morenvyimg/nodata.svg") no-repeat center top;} /* 갤러리게시판 이미지 */ .xans-board-listpackage-8 .xans-board-list-8 li .imgLink img {width:100%; height:auto;} /* 게시판 글보기 */ div.xans-board-readpackage .ec-base-table .bd_title {text-align: center;} div.xans-board-readpackage .ec-base-table .bd_title td {padding: 32px 0; border-bottom:1px solid #e9e9e9;} div.xans-board-readpackage .ec-base-table .bd_title .t01 {margin-bottom: 16px; font-size: 18px; line-height: 24px; font-weight: 500; color: #1a1a1a;} div.xans-board-readpackage .ec-base-table .bd_title .t01 span {display:block; text-align:center; font-size: 14px; line-height: 24px; font-weight: 400; color: #8a8a8a; margin:4px 0px;} div.xans-board-readpackage .ec-base-table .bd_title .t02 {display: flex; align-items: center; justify-content: center;} div.xans-board-readpackage .ec-base-table .bd_title .t02 span {display: flex; align-items: center; font-size: 14px; line-height: 24px; font-weight: 400; color: #8a8a8a;} div.xans-board-readpackage .ec-base-table .bd_title .t02 span:not(:first-child):before {content:''; display: inline-block; width: 1px; height: 12px; background-color: #ddd; margin: 0 12px;} div.xans-board-readpackage .ec-base-table .bd_title .t02 span a img {margin-left:8px;} div.xans-board-readpackage .ec-base-table .bd_title .t02 span a[class^='btnNormal'] {margin-left:8px; padding:2px 8px 2px 0px; max-width:88px; border-color:#cccccc; font-size:14px; line-height:20px;} div.xans-board-readpackage .ec-base-table .bd_title .adminAnswer {padding-bottom:8px;} div.xans-board-readpackage .ec-base-table .bd_title .adminAnswer span {display:inline-block; margin:0px;} div.xans-board-readpackage .ec-base-table .bd_content td {padding: 40px 0 80px;} div.xans-board-readpackage .ec-base-table .bd_content td p {font-size: 16px; line-height: 24px; font-weight: 400; color: #1a1a1a;} div.xans-board-readpackage .ec-base-table table .bd_content td > img:first-child {display: none;} div.xans-board-readpackage .ec-base-table table {border:0;margin:0;padding:0;border-collapse:collapse;border-spacing:0; border-top:2px solid #1a1a1a;} div.xans-board-readpackage .ec-base-table table:before {content:none;} div.xans-board-readpackage .ec-base-table td {padding:0px; border:0; border-bottom:1px solid #e9e9e9; background-color:#fff; font-size:13px; color:#8a8a8a; } div.xans-board-readpackage .ec-base-table .detail {border:0; padding:80px 0; margin:0; color:#3f3f3f;} div.xans-board-readpackage .ec-base-table tbody td.subject {color:#3f3f3f;} div.xans-board-read .ec-base-button {margin:40px 0 40px; padding:0px 0px;} div.xans-board-readpackage [class^='btnSubmit'], div.xans-board-readpackage [class^='btnEm'] {border-radius:6px; width:120px !important; font-family:'Red Hat Display','Pretendard',sans-serif; padding:14px 14px; font-size:14px; background-color:#1a1a1a;color:#fff;-webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;} div.xans-board-readpackage [class^='btnSubmit']:hover, div.xans-board-readpackage [class^='btnEm']:hover {background-color:#5f5f5f;} div.xans-board-readpackage [class^='btnNormal'], div.xans-board-readpackage [class^='btnBasic'] {border-radius:6px; background-color:#fff !important; width:120px !important; padding:14px 14px; font-size:14px; font-family:'Red Hat Display','Pretendard',sans-serif; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;} div.xans-board-readpackage [class^='btnNormal']:hover, div.xans-board-readpackage [class^='btnBasic']:hover {background-color:#f5f5f5 !important;} div.boardReport .ec-base-button {margin:20px 0; padding:0px 0px;} div.boardReport .ec-base-button [class^='btnSubmit'] {border-radius:6px; width:120px !important; font-family:'Red Hat Display','Pretendard',sans-serif; padding:14px 14px; font-size:14px; background-color:#1f1f1f;color:#fff;-webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;} div.boardReport .ec-base-button [class^='btnNormal'] {border-radius:6px; background-color:#fff !important; width:120px !important; padding:14px 14px; font-size:14px; font-family:'Red Hat Display','Pretendard',sans-serif; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;} div.xans-board-product.ec-base-box.typeProduct {border-color: #e9e9e9; border-left: 0; border-right: 0; margin-bottom: 80px; padding: 32px 0;} div.xans-board-product.ec-base-box.typeProduct .thumbnail {display: block; padding: 0; margin: 0 auto 24px; width: 80px;} div.xans-board-product.ec-base-box.typeProduct .thumbnail img {width: 80px; height: 80px; border: 1px solid #e9e9e9; box-sizing: border-box;} div.xans-board-product.ec-base-box.typeProduct .information {display: flex; flex-direction: column; align-items: center; padding:0px;} div.xans-board-product.ec-base-box.typeProduct .information h3 {margin: 0 0 8px;} div.xans-board-product.ec-base-box.typeProduct .information h3 a {font-size: 18px; line-height: 24px; font-weight: 500; color: #1a1a1a;} div.xans-board-product.ec-base-box.typeProduct .information .price {font-size: 16px; line-height: 24px; font-weight: 700; color: #1a1a1a;} div.xans-board-product.ec-base-box.typeProduct .information .icon img {margin: 16px 2px 0; } div.xans-board-product.ec-base-box.typeProduct .information .button {border-top:0px; margin:16px 0px 0px; padding:0px;} div.xans-board-product.ec-base-box.typeProduct .information .button [class^='btnEm'] {width:120px !important; font-family:'Red Hat Display','Pretendard',sans-serif; padding:8px 8px; font-size:13px; background-color:#fff; color:#1a1a1a;} div.xans-board-product.ec-base-box.typeProduct .information .button [class^='btnEm'] {border:1px solid #e9e9e9; border-radius:8px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } div.xans-board-product.ec-base-box.typeProduct .information .button [class^='btnEm']:hover {background-color:#f5f5f5;} div.xans-board-product.ec-base-box.typeProduct .information .price {color:#1a1a1a;} div.xans-board-read .ec-base-table tr.attach {border-bottom:1px solid #e9e9e9;} div.xans-board-read .ec-base-table tr.attach a {background-position: 0 center;} div.xans-board-read .ec-base-table tr td {border:0px; padding:0px 0px;} div.xans-board-read .ec-base-table tr th {padding: 16px 0 16px 0px;color: #1a1a1a;border:0px;font-weight: normal; background-color: #ffffff;} div.xans-board-movement {border:0px; margin:80px 0px 0px; border-bottom:1px solid #e9e9e9;} div.xans-board-movement li {display:flex; align-items: center; padding:0; } div.xans-board-movement li.prev {border-top:1px solid #e9e9e9; border-bottom:0px;} div.xans-board-movement li.next {border-top:1px solid #e9e9e9;} div.xans-board-movement li strong {width:auto; padding:24px 0 24px 48px; font-size:14px; line-height: 24px; font-weight:400; color:#1a1a1a;} div.xans-board-movement li.next strong {background: url("//haebogi.com/morenvyimg/down.svg") no-repeat 16px center;} div.xans-board-movement li.prev strong {background: url("//haebogi.com/morenvyimg/up.svg") no-repeat 16px center;} div.xans-board-movement li a {float: none; display: flex; align-items: center; padding:0; border-left:0; font-size:14px; line-height: 24px; font-weight: 400; color:#1a1a1a;} div.xans-board-movement li a:before {content: ''; display: inline-block; margin: 0 20px; width:1px; height:12px; background-color:#ddd;} /* 게시판 글쓰기 */ .xans-board-writepackage .ec-base-table table {border:0;margin:0;padding:0;border-collapse:collapse;border-spacing:0;border-top:2px solid #1a1a1a;} .xans-board-writepackage .ec-base-table table:before {content:none;} .xans-board-writepackage .ec-base-table tbody td {border:0;border-bottom:1px solid #e9e9e9;padding:12px 0;background-color:#fff;font-size:14px;color:#8a8a8a;} .xans-board-writepackage .ec-base-table tbody th {border:0;border-bottom:1px solid #e9e9e9;padding:12px 0;background-color:#fff;font-size:14px;color:#1a1a1a;line-height:34px;} .xans-board-writepackage .ec-base-table tbody td input {padding:0 10px;height:34px;line-height:34px;border:1px solid #e9e9e9;margin-right:8px;font-size:14px;background-color:#fff;} .xans-board-writepackage .ec-base-table tbody td #content_CONTAINER {border:1px solid #e9e9e9;border-top:0;} .xans-board-writepackage .ec-base-table tbody td input[type=file] {border:0;} .xans-board-writepackage .ec-base-box.typeProduct {border:1px solid #e9e9e9; margin-bottom:80px;} .xans-board-writepackage .ec-base-box.typeProduct #sPrdCommonImg {display:none;} .xans-board-write .information .button [class^='btnEm'], .xans-board-write .information .button [class^='btnNormal'] {height:auto; line-height:18px; font-size:12px; padding:2px 8px; width:auto !important;} .xans-board-write .information .price {color:#1a1a1a;} div.xans-board-writepackage [class^='btnSubmit'], div.xans-board-writepackage [class^='btnEm'] {border-radius:6px; width:120px !important; font-family:'Red Hat Display','Pretendard',sans-serif; padding:14px 14px; font-size:14px; background-color:#1a1a1a;color:#fff;-webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;} div.xans-board-writepackage [class^='btnSubmit']:hover, div.xans-board-writepackage [class^='btnEm']:hover {background-color:#5f5f5f;} div.xans-board-writepackage [class^='btnNormal'], div.xans-board-writepackage [class^='btnBasic'] {border-radius:6px; background-color:#fff !important; width:120px !important; padding:14px 14px; font-size:14px; font-family:'Red Hat Display','Pretendard',sans-serif; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;} div.xans-board-writepackage [class^='btnNormal']:hover, div.xans-board-writepackage [class^='btnBasic']:hover {background-color:#f5f5f5 !important;} .fr-toolbar {border-color:#e9e9e9 !important; border-top:0px !important;} .fr-box.fr-basic .fr-wrapper {border-color:#e9e9e9 !important;} .second-toolbar {border-color:#e9e9e9 !important;} /* 게시판 수정 */ .xans-board-modifypackage .ec-base-table table {border:0;margin:0;padding:0;border-collapse:collapse;border-spacing:0;border-top:2px solid #1a1a1a;} .xans-board-modifypackage .ec-base-table table:before {content:none;} .xans-board-modifypackage .ec-base-table tbody td {border:0;border-bottom:1px solid #e9e9e9;padding:12px 0;background-color:#fff;font-size:14px;color:#8a8a8a;} .xans-board-modifypackage .ec-base-table tbody th {border:0;border-bottom:1px solid #e9e9e9;padding:12px 0;background-color:#fff;font-size:14px;color:#1a1a1a;line-height:34px;} .xans-board-modifypackage .ec-base-table tbody td input {padding:0 10px;height:34px;line-height:34px;border:1px solid #e9e9e9;margin-right:8px;font-size:14px;background-color:#fff;} .xans-board-modifypackage .ec-base-table tbody td #content_CONTAINER {border:1px solid #e9e9e9;border-top:0;} .xans-board-modifypackage .ec-base-table tbody td input[type=file] {border:0;} .xans-board-modifypackage .ec-base-box.typeProduct {border:1px solid #e9e9e9; margin-bottom:80px;} .xans-board-modifypackage .ec-base-box.typeProduct #sPrdCommonImg {display:none;} .xans-board-modifypackage .information .button [class^='btnEm'], .xans-board-modifypackage .information .button [class^='btnNormal'] {height:auto; line-height:18px; font-size:12px; padding:2px 8px; width:auto !important;} .xans-board-modifypackage .information .price {color:#1a1a1a;} .xans-board-modify .ec-base-button {margin:0px; padding:40px 0px 0px;} div.xans-board-modifypackage [class^='btnSubmit'], div.xans-board-modifypackage [class^='btnEm'] {border-radius:6px; width:120px !important; font-family:'Red Hat Display','Pretendard',sans-serif; padding:14px 14px; font-size:14px; background-color:#1a1a1a;color:#fff;-webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;} div.xans-board-modifypackage [class^='btnSubmit']:hover, div.xans-board-modifypackage [class^='btnEm']:hover {background-color:#5a5a5a;} div.xans-board-modifypackage [class^='btnNormal'], div.xans-board-modifypackage [class^='btnBasic'] {border-radius:6px; background-color:#fff !important; width:120px !important; padding:14px 14px; font-size:14px; font-family:'Red Hat Display','Pretendard',sans-serif; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;} div.xans-board-modifypackage [class^='btnNormal']:hover, div.xans-board-modifypackage [class^='btnBasic']:hover {background-color:#f5f5f5 !important;} /* 관련글 보기 */ div.xans-board-listsgroup .ec-base-table table {border-top: 0; border-bottom: 1px solid #e9e9e9;} div.xans-board-listsgroup .ec-base-table thead th {border-bottom: 0; padding: 24px 0; font-size: 14px; line-height: 24px; font-weight: 400; color: #1a1a1a; background-color: #f6f6f6;} div.xans-board-listsgroup .ec-base-table.typeList tr:first-child td {border-top: 0;} div.xans-board-listsgroup .ec-base-table.typeList td {padding: 24px 16px; font-size: 14px; line-height: 24px; color: #9a9a9a; font-weight: 400;} div.xans-board-listsgroup .ec-base-table.typeList td:first-child, div.xans-board-listsgroup .ec-base-table.typeList td:first-child + td, div.xans-board-listsgroup .ec-base-table.typeList td.subject {color: #1a1a1a;} div.xans-board-listsgroup .ec-base-table.typeList td .txtNum {color: #9a9a9a; font-size: 14px;} div.xans-board-listsgroup .ec-base-table.typeList .center td:not(.thumb).left {padding-left: 32px;} div.xans-board-listsgroup .ec-base-table.typeList .center td.thumb {padding-left: 24px;} div.xans-board-listsgroup .ec-base-table.typeList .center td.thumb img {width: 72px; height: 72px; border: 1px solid #e9e9e9; box-sizing: border-box;} .xans-board-listsgroup h3 {margin: 80px 0 20px; font-size:20px;color: #1a1a1a;} .xans-board-listsgroup .ec-base-table table {border:0;border-top:1px solid #1a1a1a; border-bottom:1px solid #e9e9e9;} .xans-board-listsgroup .ec-base-table.typeList td {padding:24px 0;font-size:13px;color:#1a1a1a;font-weight:400;} .xans-board-listsgroup .ec-base-table.typeList td a:hover {color:#1a1a1a !important;} .xans-board-listsgroup .ec-base-table.typeList td .txtNum {font-size: 13px;color: #1a1a1a;} .xans-board-listsgroup .ec-base-table thead th { padding:24px 0; border-left: 0; border-bottom: 1px solid #e9e9e9; color: #1a1a1a;font-size:15px; font-weight:400; vertical-align: middle; background: #fff; } .xans-board-listsgroup .ec-base-table.gBorder td {border-left:0;} .xans-board-function {padding:40px 0px;} /* 게시판 댓글 */ .xans-board-commentwrite {background-color:#fff; border:0; border-top:1px solid #e9e9e9; border-bottom:1px solid #e9e9e9; padding:24px 0px; margin:80px 0px 0px;} .xans-board-commentwrite p {margin:16px 0px 24px; font-size:14px; line-height:20px; padding:0px;} .xans-board-commentwrite strong {font-size:16px; line-height:24px; font-weight:700; color:#1a1a1a; margin:0px 0px 24px 0px;} .xans-board-commentwrite textarea {width:98%; padding:2px 0px;} .xans-board-commentwrite .input {margin:0px;} .xans-board-commentwrite [class^='btnEm'] {border-radius:6px; width:120px; background-color:#1a1a1a; font-size:14px; font-weight:500; color:#fff; font-family:'Red Hat Display','Pretendard',sans-serif; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;} .xans-board-commentwrite [class^='btnEm']:hover {background-color:#1a1a1a;} .xans-board-commentpackage [class^='btnNormal'] {font-family:'Red Hat Display','Pretendard',sans-serif; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;} .xans-board-commentlist {border:0px; } .xans-board-commentlist .boardComment li { border-radius:16px; margin:24px 0px 0px 0px; border:1px solid #e9e9e9; color: #1a1a1a; line-height: 140%;border-radius:8px; overflow:hidden; border-top: 1px solid #e9e9e9;} .xans-board-commentlist .boardComment li .comment {padding:24px 0 24px 24px;font-size:14px;} .xans-board-commentlist .boardComment li div.commentTop {;padding: 24px 0 24px 24px; border-bottom:1px solid #e9e9e9; font-size:14px;} .xans-board-commentlist .boardComment li .date {margin:0px 8px 0 16px; font-size: 14px;} .xans-board-commentlist .boardComment li .button {position: absolute;top:20px; right:24px;} .xans-board-commentlist .ec-base-button.typeBG.spam {border-left:0; border-right:0; border-bottom:0; margin:40px 0 0; border:0px; padding:0px; background-color:#ffffff;} .xans-board-commentlist .ec-base-button [class^='btnNormal'] {width:120px !important; padding:14px 14px; font-size:14px; font-family:'Red Hat Display','Pretendard',sans-serif;-webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;} /* 게시판 검색부분 */ .xans-board-search {text-align:center; font-size: 0; padding: 30px 0 30px 0px; } .xans-board-search p {background:none; margin: 0; padding:0px;} .xans-board-search p:before {content:'';} .xans-board-search [class^='btnEm'] {background-color:#fff; color:#1a1a1a; border: 1px solid #bfbfbf; font-size: 13px; line-height: 24px; font-weight: 400; font-family:'Red Hat Display','Pretendard',sans-serif; width: auto; padding:7px 27px;-webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; margin-left: 8px;} .xans-board-search [class^='btnEm']:hover {background-color:#1a1a1a; color:#fff; border-color: #1a1a1a;} .xans-board-search #search {height:34px;line-height:34px; border-color: #e9e9e9; font-size: 13px; color: #1a1a1a; font-weight: 400;} .xans-board-search select {width:96px; height:40px; border-color: #e9e9e9; font-size: 13px; color: #1a1a1a; font-weight: 400; margin-right:8px;} .xans-board-search select#search_date {margin-right: 8px;} /* 상품게시판 */ .xans-board-listpackage .ec-base-table.typeList td .product_name {display:block; font-size:13px; color:#9a9a9a;} .xans-board-buttonlist.ec-base-button.typeBG {background:#fff;border:0;padding-right:0; padding:40px 0px 0px;} .xans-board-buttonlist.ec-base-button.typeBG a {width:120px; height:48px; line-height:48px; padding:0; font-size:14px; border-radius:6px; font-family:'Red Hat Display','Pretendard',sans-serif; background-color:#1a1a1a; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;} .xans-board-buttonlist.ec-base-button.typeBG a:hover {background-color:#5a5a5a;} /* 로그인 페이지 */ .ec-base-box.typeThin {border:0;} .xans-member-login .login {padding:0px;} .xans-member-login .login fieldset {width:400px;padding:0;font-family:'Red Hat Display','Pretendard',sans-serif;} .xans-member-login .login fieldset > a {position:static;} .xans-member-login .login fieldset .id { overflow:hidden; display:block; width:100%; margin:0 0 24px; border:0; border-bottom:0px solid #e6e6e6; border-radius:0; color:#9a9a9a; } .xans-member-login .login fieldset .password { overflow:hidden; display:block; width:100%; margin:0 0 16px; border:0; border-bottom:0px solid #e6e6e6; border-radius:0; color:#9a9a9a; } .xans-member-login .login fieldset input[type=text], .xans-member-login .login fieldset input[type=password] { width:100%; height:48px; line-height:48px; padding:0px 0px 0px 16px; border:0 none; color:#9a9a9a; font-size:14px; border:1px solid #e6e6e6; border-radius:24px; margin-top:8px; box-sizing:border-box;} .xans-member-login .login fieldset .security { padding:0; margin:0px 0 40px; font-size:0; line-height:18px;} .xans-member-login .login fieldset .security ul {float:right;padding:0;margin:0;} .xans-member-login .login fieldset .security ul li {font-size:13px; color:#9a9a9a; padding:0 2px; line-height:20px;} .xans-member-login .login fieldset .security ul li a {color:#1a1a1a; font-weight:400;} .xans-member-login .login fieldset li:after {border:0;} .xans-member-login .login fieldset .snsArea {border:0;padding:0 0 20px;} .xans-member-login .login fieldset .login_title {font-size:13px; line-height:20px; color:#1a1a1a; font-weight:500;} .xans-member-login .login__sns {margin:40px 0px 0px;} .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 a {width:calc(50% - 4px); height:48px; padding:0 24px; margin:0 0 8px 0 !important; font-size:14px;font-weight:400;color:#1a1a1a; letter-spacing:-0.020em; background-color:#fff;text-align:right; border:1px solid #e3e3e3;box-sizing:border-box;line-height:46px; border-radius:24px;} .xans-member-login .login__sns .btnKakao {background:url("//haebogi.com/morenvyimg/icon_sns_kakao.svg") no-repeat center left 24px;} .xans-member-login .login__sns .btnNaver {background:url("//haebogi.com/morenvyimg/icon_sns_naver.svg") no-repeat center left 24px;} .xans-member-login .login__sns .btnFacebook {background:url("//haebogi.com/morenvyimg/icon_sns_facebook.svg") no-repeat center left 24px;} .xans-member-login .login__sns .btnLine {background:url("//haebogi.com/morenvyimg/icon_sns_line.svg") no-repeat center left 24px;} .xans-member-login .login__sns .btnGoogle {background:url("//haebogi.com/morenvyimg/icon_sns_google.svg") no-repeat center left 24px;} .xans-member-login .login__sns .btnApple {background:url("//haebogi.com/morenvyimg/icon_sns_apple.svg") no-repeat center left 24px;} .btnLogin_bk {width:100%; height:56px; line-height:56px; font-size:16px; font-weight:500; display:block; background-color:#1a1a1a; border:1px solid #1a1a1a; color:#fff; text-align:center; border-radius:28px; box-sizing:border-box;} .btnLogin_bk {-webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;} .btnLogin_bk:hover {background-color:#5a5a5a;} .join_box {margin:32px 0px 8px; color:#9a9a9a; line-height:18px; font-size:13px;} .btnLogin_wh {width:398px;height:56px;line-height:56px;font-size:16px; font-weight:500; display:block; background-color:#fff;color:#1a1a1a;text-align:center; border:1px solid #e6e6e6; border-radius:28px; box-sizing:border-box;} .btnLogin_wh {-webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;} .btnLogin_wh:hover {background-color:#f3f3f3;} /* 비회원주문조회 */ .xans-myshop-orderhistorynologin.ec-base-box.typeThin {padding:40px 0px 0px; } .xans-myshop-orderhistorynologin.ec-base-box.typeThin h3.boxTitle {color:#1a1a1a;} .xans-myshop-orderhistorynologin .ec-base-desc {width:400px;} .xans-myshop-orderhistorynologin .ec-base-desc dt { width:100%; margin:0;padding:0; font-size:13px; line-height:20px; font-weight: 500; color:#1a1a1a;} .xans-myshop-orderhistorynologin .ec-base-desc dd { padding: 0;margin:0px;} .xans-myshop-orderhistorynologin input[type=text], .xans-myshop-orderhistorynologin input[type=password] {width:100%; font-size:14px; padding:0 16px; margin:8px 0 24px 0; height:48px; line-height:48px; color:#5a5a5a;border:0; border:1px solid #e9e9e9; border-radius:24px; box-sizing:border-box;} .xans-myshop-orderhistorynologin #order_id1, .xans-myshop-orderhistorynologin #order_id2 { width:183px; } .xans-myshop-orderhistorynologin .ec-base-button[class*="gColumn"] [class^='btn'] {width:400px; font-size:16px; font-weight:500; font-family:'Red Hat Display','Pretendard',sans-serif; height:56px; line-height:56px; border-radius:28px;} .xans-myshop-orderhistorynologin .ec-base-button[class*="gColumn"] [class^='btn'] {-webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;} .xans-myshop-orderhistorynologin .ec-base-button {padding:8px 0px 0px;} .xans-myshop-orderhistorynologin p {width:400px; margin:16px auto 16px;color: #9a9a9a; font-size:13px; line-height:18px;} /* 아이디 찾기 */ .xans-member-findid.ec-base-box {padding:0px;} .xans-member-findid .findId {width:400px; font-family:'Red Hat Display','Pretendard',sans-serif; font-size:0px;} .xans-member-findid .findId strong {font-size:14px; line-height:20px; display:block; margin:0px; padding:0; width:100%; font-weight:500; } .xans-member-findid .findId p {margin:0px;} .xans-member-findid .findId .member select {width:100%; height:48px; padding:0 16px;margin-top:8px; border-radius:24px; font-size:14px;} .xans-member-findid .findId .check {margin:16px 0px 40px;} .xans-member-findid .findId .check label {font-size:13px; line-height:20px; margin:0 16px 0 4px !important; vertical-align:middle;} .xans-member-findid .findId input[type=text] {font-size:14px; padding:0 16px; margin:8px 0 24px 0; height:48px; line-height:48px; color:#5a5a5a;border:0; border:1px solid #e9e9e9; border-radius:24px; box-sizing:border-box;} .xans-member-findid .findId input[type=password] {font-size:14px; padding:0 16px; margin:8px 0 24px 0; height:48px; line-height:48px; color:#5a5a5a;border:0; border:1px solid #e9e9e9; border-radius:24px; box-sizing:border-box;} .xans-member-findid .findId .ec-base-button {padding:16px 0 0px;} .xans-member-findid .findId span.dash {display:inline-block; height:48px; line-height:48px; font-size:14px; width:20px; margin-top:-16px; text-align:center; vertical-align:middle;} .xans-member-findid .findId #name, .xans-member-findid .findId #email { width:400px; } .xans-member-findid .findId #ssn1, .xans-member-findid .findId #ssn2 { width:189px; } .xans-member-findid .findId #mobile_auth_view { height:auto; } .xans-member-findid .findId #mobile1, .xans-member-findid .findId #mobile2, .xans-member-findid .findId #mobile3 { width:120px;} .xans-member-findid .findId .ipin span, .xans-member-findid .findId .mobileauth span { display:inline-block; width: 400px; margin:0 0 5px; line-height:18px; color:#757575; } .xans-member-findid .findId .ipin a, .xans-member-findid .findId .mobileauth a { position:relative; bottom:0; left:0;margin-bottom:5px; } /* 아이디 찾기완료 */ .xans-member-findidresult {font-family:'Red Hat Display','Pretendard',sans-serif;} .xans-member-findidresult .findId {width:400px;} .xans-member-findidresult .findId p.info {color:#1a1a1a; font-size:20px; line-height:32px; margin:0px 0px 16px;} .xans-member-findidresult.ec-base-box {padding:0px;} .xans-member-findidresult .ec-base-box .message {font-size:14px; line-height:20px; color:#9a9a9a; background:none;text-align:center;padding:0;border:0;} .xans-member-findidresult .ec-base-box.typeMember.gMessage {border:0px;} .xans-member-findidresult .ec-base-box.typeMember .information {padding:24px 16px; border:1px solid #e9e9e9; margin:40px 0px 0px; border-radius:16px;} .xans-member-findidresult .ec-base-box.typeMember .information .description {padding:0px 0px 0px 16px;} .xans-member-findidresult .ec-base-box.typeMember .information > .title, .ec-base-box.typeMember .information > .thumbnail {padding:0px 16px 0px 0px; width: 70px;} .xans-member-findidresult .btnLogin_bk {margin-bottom:16px;} .xans-member-findidresult .gBlank20 {margin:0px;} /* 비밀번호 찾기 */ .xans-member-findpasswd.ec-base-box {padding:0px;} .xans-member-findpasswd .findPw { width:400px; font-family:'Red Hat Display','Pretendard',sans-serif; font-size:0px;} .xans-member-findpasswd .findPw fieldset { margin:0; } .xans-member-findpasswd .findPw .ec-base-desc li {margin:0px;} .xans-member-findpasswd .findPw .ec-base-desc .desc .check {margin-bottom:40px;} .xans-member-findpasswd .findPw .ec-base-desc dt, .xans-member-findpasswd .findPw .ec-base-desc .term {font-size:14px; line-height:20px; display:block; margin:0px; padding:0; width:100%; font-weight:500; } .xans-member-findpasswd .findPw .ec-base-desc dd, .xans-member-findpasswd .findPw .ec-base-desc .desc { padding:0; line-height:18px; margin-bottom:0px;} .xans-member-findpasswd .findPw .ec-base-desc .term { width:100%; } .xans-member-findpasswd .findPw .ec-base-desc .desc { padding-left:0; } .xans-member-findpasswd .findPw select {width:100%; height:48px; padding:0 16px;margin-top:8px; border-radius:24px; font-size:14px;} .xans-member-findpasswd .findPw .check {margin:16px 0px 40px;} .xans-member-findpasswd .findPw .check label {font-size:13px; line-height:20px; margin:0 16px 0 4px !important; vertical-align:middle;} .xans-member-findpasswd .findPw input[type=text] {width:100%; font-size:14px; padding:0 16px; margin:8px 0 24px 0; height:48px; line-height:48px; color:#5a5a5a;border:0; border:1px solid #e9e9e9; border-radius:24px; box-sizing:border-box;} .xans-member-findpasswd .findPw input[type=password] {width:100%; font-size:14px; padding:0 16px; margin:8px 0 24px 0; height:48px; line-height:48px; color:#5a5a5a;border:0; border:1px solid #e9e9e9; border-radius:24px; box-sizing:border-box;} .xans-member-findpasswd .findPw .ec-base-button {padding:16px 0 0px;} .xans-member-findpasswd .findPw span.dash {display:inline-block; height:48px; line-height:48px; font-size:14px; width:20px; margin-top:-16px; text-align:center; vertical-align:middle;} .xans-member-findpasswd .findPw #mobile1, .xans-member-findpasswd .findPw #mobile2, .xans-member-findpasswd .findPw #mobile3 { width:120px; } .xans-member-findpasswd .findPw .ipin a, .xans-member-findpasswd .findPw .mobileauth a { position:relative; bottom:0; left:0;margin-bottom:5px; } .xans-member-findpasswd .txtInfo {margin:-16px 0px 24px; font-size:14px;} /* 임시비밀번호 전송 */ .xans-member-findpasswdmethod.ec-base-box {padding:0px;} .xans-member-findpasswdmethod.ec-base-box.typeThin h3.boxTitle {color:#1a1a1a; font-size:20px; line-height:32px; margin:0px;} .xans-member-findpasswdmethod .inner {width:400px; font-family:'Red Hat Display','Pretendard',sans-serif; } .xans-member-findpasswdmethod .inner .ec-base-desc {padding:24px 16px 8px; border:1px solid #e9e9e9; margin:40px 0px 0px; border-radius:16px;} .xans-member-findpasswdmethod .inner .ec-base-desc dt, .xans-member-findpasswdmethod .inner .ec-base-desc .term { padding:0 0 8px 0; margin:0px; width:100%; font-size:14px; line-height:20px; font-weight:500;} .xans-member-findpasswdmethod .inner .ec-base-desc dd, .xans-member-findpasswdmethod .inner .ec-base-desc .desc { padding:0; line-height:18px; margin-bottom:24px;} .xans-member-findpasswdmethod .inner .ec-base-button { width:400px; padding:40px 0px 0px;} .xans-member-findpasswdmethod .inner label {font-size:13px; line-height:20px; margin:0 16px 0 4px !important; vertical-align:middle;} .xans-member-findpasswdmethod .inner .txtEm {font-size:13px; font-weight:400;} .xans-member-findpasswdmethod .inner .btnLogin_bk {margin-bottom:16px;} .xans-member-findpasswdmethod .inner .gBlank20 {margin:0px;} /* 비밀번호 완료 */ .xans-member-findpasswdresult.ec-base-box {padding:0px;} .xans-member-findpasswdresult .findPw .desc {color:#1a1a1a; font-size:20px; line-height:32px; margin:0px 0px 16px; } .xans-member-findpasswdresult .findPw {width:400px; font-family:'Red Hat Display','Pretendard',sans-serif; } .xans-member-findpasswdresult .ec-base-box.typeMember.gMessage {border:0;} .xans-member-findpasswdresult .ec-base-box .message {background:none; text-align:center; padding:0; border:0;} .xans-member-findpasswdresult .ec-base-box.typeMember .information {padding:24px 16px; border:1px solid #e9e9e9; margin:40px 0px 0px; border-radius:16px;} .xans-member-findpasswdresult .ec-base-box.typeMember .information .description {padding:0px 0px 0px 16px;} .xans-member-findpasswdresult .findPw .copy { margin:16px 0px 16px; line-height:160%; color:#9a9a9a; font-size:13px; line-height:20px;} .xans-member-findpasswdresult .ec-base-button { width:400px; padding:40px 0px 0px;} .xans-member-findpasswdresult .gBlank20 {margin:0px;} /* 비밀번호 변경 */ .xans-member-changepasswd .change_pw {width:400px;} .xans-member-changepasswd.ec-base-box {padding:0px;} .xans-member-changepasswd.ec-base-box.typeThin h3.boxTitle {color:#1a1a1a; font-size:20px; line-height:32px; margin:0px;} .xans-member-changepasswd .ec-base-desc {padding:24px 16px 24px; border:1px solid #e9e9e9; margin:40px 0px 0px; border-radius:16px;} .xans-member-changepasswd .change_pw .ec-base-desc dt { padding:0px; margin:0px; font-size:14px; line-height:32px; font-weight:500;} .xans-member-changepasswd .change_pw .ec-base-desc dd {margin: 0 0 8px; padding-left:124px; line-height:32px; font-size:14px;} .xans-member-changepasswd .change_pw .ec-base-desc dd .txtInfo {color:#9a9a9a; line-height:20px; font-size:13px; margin:8px 0px 16px;} .xans-member-changepasswd .change_pw fieldset input {width:236px; height:32px; line-height:32px; border-color:#e9e9e9; border-radius:8px;} .xans-member-changepasswd .change_pw .ec-base-button {padding: 40px 0px 0px;} .xans-member-changepasswd [class^='btnSubmit'] {height:56px; line-height:56px; font-size:16px; font-weight:500; font-family:'Red Hat Display','Pretendard',sans-serif; background-color:#1a1a1a;color:#fff; border-radius: 28px;} .xans-member-changepasswd [class^='btnSubmit'] {-webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;} .xans-member-changepasswd [class^='btnSubmit']:hover {background-color:#5a5a5a;} /* 회원가입 영역 스타일 */ .join_area {overflow:hidden; border-top:1px solid #e3e3e3; width:675px; margin:0 auto; padding:30px 0; } .join_area .join { float:left; line-height:16px; margin-top:15px; } .join_area .join .join_title { margin-bottom:5px; color:#333; font-size:15px; font-weight:600; } .join_area .join_btn { float:right; } .join_area .join_btn a { display:block; width:90px; height:83px; text-align:center; background-color:#222; color:#fff; font-size:15px; line-height:83px; font-weight:400;} /*회원가입 버튼색상 */ /* 비회원주문하기 영역 스타일 */ .nonmember_area {overflow:hidden; border-top:1px solid #e3e3e3; width:675px; height:83px; margin:0 auto; padding:30px 0; } .nonmember_area .join { float:left; line-height:16px; margin-top:5px; } .nonmember_area .join_title { margin-bottom:5px; color:#333; font-size:15px; font-weight:600; } .nonmember_area .join_btn { float:right; } .nonmember_area .join_btn a { display:block; width:90px; height:83px; text-align:center; background-color:#222; color:#fff; font-size:15px; line-height:83px; font-weight:400;} /* 비회원 주문번호 입력 영역 스타일 */ .xans-myshop-orderhistorynologin {width:400px;overflow:hidden; margin:0px auto; padding:30px 0; border:1px solid #e9e9e9; border-top:0px;color:#666; font-size:12px; } .xans-myshop-orderhistorynologin .inner { width:675px; margin:0 auto; } .xans-myshop-orderhistorynologin .join .join_title { margin-bottom:5px; color:#1a1a1a; font-size:15px; font-weight:600;} .xans-myshop-orderhistorynologin .join { line-height:16px; margin-bottom:30px;} .xans-myshop-orderhistorynologin ul { float:left; } .xans-myshop-orderhistorynologin li { padding:0px; line-height:28px; padding-bottom:3px;} .xans-myshop-orderhistorynologin li strong { display:inline-block; width:110px; font-weight:normal;} .xans-myshop-orderhistorynologin li input { width:463px; height:38px; padding:0px; border:1px solid #d9d9d9; color:#202020; } .xans-myshop-orderhistorynologin li.number input { width:227px;margin:0 0 0 2px;} .xans-myshop-orderhistorynologin li #order_id1 {margin:0 2px 0 0;width:226px;} .xans-myshop-orderhistorynologin .join_btn { float:right; display:block; width:90px; height:126px; background-color:#1a1a1a;color:#fff; font-size:15px; line-height:17px; font-weight:400; } /* 장바구니 */ .orderStep {display:none;} .xans-order-dcinfo .description .mileage li strong {color:#3a3a3a;} .xans-order-basketpackage .ec-base-table table {border:0; margin:0; padding:0; border-collapse:collapse; border-spacing:0; border-top:2px solid #1a1a1a;} .xans-order-basketpackage .ec-base-table table:before {content:none;} .xans-order-basketpackage .ec-base-table.typeList td {padding:24px 16px 24px 16px; font-size:14px;color:#3a3a3a;} .xans-order-basketpackage .ec-base-table.typeList td strong.name {font-weight:400;} .xans-order-basketpackage .ec-base-table.typeList td .txtNum {font-size: 13px;color: #3a3a3a;} .xans-order-basketpackage .ec-base-table thead th { padding:24px 0; border-left: 0; border-bottom: 1px solid #e9e9e9; color: #3a3a3a;font-size:13px; font-weight:400; vertical-align: middle; background: #fff; } .xans-order-basketpackage .ec-base-table td.thumb img { max-width:120px;} .xans-order-basketpackage .ec-base-table.typeList tfoot td {background-color:#fff;border-bottom:1px solid #e9e9e9;} .xans-order-basketpackage .ec-base-table td ul.option > li {color:#3a3a3a;} .xans-order-basketpackage .ec-base-table.gBorder td {border-left:0;} .xans-order-basketpackage .ec-base-table.gBorder td.button a {width:120px; margin:3px 0px;} .xans-order-basketpackage a[class^='btnEm'] {padding:8px 12px; font-size:13px; border-radius:6px; border:1px solid #dddddd;} .xans-order-basketpackage a[class^='btnEm'] {background-color:#ffffff; color:#1a1a1a; font-family:'Red Hat Display','Pretendard',sans-serif !important; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;} .xans-order-basketpackage a[class^='btnEm']:hover {background-color:#f5f5f5;} .xans-order-basketpackage a[class^='btn'] .icoDelete:before {background:#77797d;} .xans-order-basketpackage a[class^='btn'] .icoDelete:after {background:#77797d;} .xans-order-basketpackage a[class^='btnSubmit'] {padding:8px 12px; font-size:13px; border-radius:6px; background-color:#1a1a1a; color:#fff; font-family:'Red Hat Display','Pretendard',sans-serif !important; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;} .xans-order-basketpackage a[class^='btnSubmit']:hover {background-color:#5a5a5a;} .xans-order-basketpackage a[class^='btnNormal'] {padding:8px 12px; font-size:13px; border-radius:6px; border:1px solid #dddddd; font-family:'Red Hat Display','Pretendard',sans-serif !important; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;} .xans-order-basketpackage .ec-base-table.typeList .center td.right {padding-right:16px; text-align:center;} .xans-order-basketpackage .ec-base-table.typeList .center td.right a[class^='btnNormal'] {padding:4px 16px;} .xans-order-basketpackage .ec-base-button {padding: 40px 0 0px;} .xans-order-basketpackage .ec-base-button .text {font-size:13px; margin: 0 8px 0 0px;} .xans-order-basketpackage .ec-base-button .gLeft a {margin-right:2px;} .xans-order-basketpackage .ec-base-button .gRight a {margin-left:2px;} .xans-order-basketpackage .xans-order-basketpriceinfoguide p.info {font-size:12px; padding:16px 0 16px 33px; background-position:9px 18px; border-bottom:1px solid #e9e9e9;} .xans-order-basketpackage .orderListArea .title {margin:0px 0; background:none;border:0;padding:0px 0px 24px; height:24px;} .xans-order-basketpackage .orderListArea .title h3 {font-size:16px; line-height:24px; color:#1a1a1a; font-weight:700;} .xans-order-basketpackage .ec-base-table.typeList td .ec-base-qty { display:inline-block; width:95px !important; height:28px; padding:0 28px; position:relative; border:1px solid #dedfe2; box-sizing:border-box;} .xans-order-basketpackage .ec-base-table.typeList td .ec-base-qty input { width:30px; height:26px !important; padding:0 5px; font-size:12px; font-weight:700; color:#000; line-height:29px; text-align:center; border:0;} .xans-order-basketpackage .ec-base-table.typeList td .ec-base-qty a:first-of-type {left:auto;right:0;} .xans-order-basketpackage .ec-base-table.typeList td .ec-base-qty a { position: absolute; top:0; width: 26px; height: 26px;background-color:#fff;} .xans-order-basketpackage .ec-base-table.typeList td .ec-base-qty a:first-of-type:before { margin:0 0 0 -4px; } .xans-order-basketpackage .ec-base-table.typeList td .ec-base-qty a:before {content:'';position:absolute;left:50%;top:50%;width:9px;height:1px;background:#000;} .xans-order-basketpackage .ec-base-table.typeList td .ec-base-qty a > img { position: absolute; top: 0; left: 0; opacity: .00001; width: 100%; height: 100%; z-index: 10; } .xans-order-basketpackage .ec-base-table.typeList td .ec-base-qty a:first-of-type:after {content: '';position:absolute;left:50%;top:50%;width:1px;height:9px;background:#000;margin:-4px 0 0 0;} .xans-order-basketpackage .ec-base-table.typeList td .ec-base-qty a:last-of-type {top:0;left:0;} .xans-order-basketpackage .ec-base-table.typeList td .ec-base-qty a:last-of-type:before { margin:0 0 0 -4px; } .xans-order-basketpackage .xans-order-empty p {border:0px; font-size:16px !important; font-weight:500 !important; color:#9a9a9a !important; padding:80px 0px !important; margin:80px 0px !important; background: url("//haebogi.com/morenvyimg/nodata.svg") no-repeat center top;} .xans-order-basketpackage #NaverChk_Button {margin:40px 0 0px;} .xans-order-basketpackage .xans-order-totalorder {margin: 0px 0 40px;} /* 장바구니 스타일 공통 */ .ec-base-layer .header {background-color:#222 !important;} .ec-base-layer input, .ec-base-layer select, .ec-base-layer textarea, .ec-base-layer {font-family:'Red Hat Display','Pretendard',sans-serif !important;} .ec-base-layer .xans-product-detaildesign { margin:10px 0 0; padding:10px 0 0; position:relative; border-top:1px solid #ececec; } .ec-base-layer h2 {font-size:16px; color:#333;display:block; margin-bottom:6px;font-weight:400;} .ec-base-layer .summary_desc {line-height:15px;font-size:11px;color:#999; } .ec-base-layer .icon {padding:0 !important;margin:4px 0 10px 0 !important;} .ec-base-layer .icon img { margin:0 2px 0 0; vertical-align:middle; } #totalProducts table .right, .totalPrice .total {color:#222 !important;} /* 장바구니 옵션 선택 ( 팝업 레이어 ) */ body#popup {height:100%;} #popup .ec-base-layer {height:100%;} #capp-shop-new-product-optionselect-layer {height: 496px !important;} .xans-product-optionselectlayer.ec-base-layer .content { min-height:340px !important; } .totalPrice { padding:10px 9px !important; left:50% !important; bottom:-5px !important;z-index:20 !important;} .ec-base-layer .ec-base-button { width:99%; margin:20px auto; padding:0 !important; border:0 !important; background:#fff !important;} .xans-product-optionselectlayer .xans-product-option .ec-product-button.ec-product-preview li {padding:3px !important; border: 1px solid #d7d7d7; border-radius: 50%;} .xans-product-optionselectlayer .xans-product-option .ec-product-button.ec-product-preview li a {min-width:22px !important; width:22px !important; height:22px !important; border-radius: 50%;} .xans-product-optionselectlayer .xans-product-option .ec-product-button li {margin:0px 7px 3px 0px !important; padding:3px !important; border:none !important; box-shadow:0px 0px 0px 1px #d7d7d7 !important;} .xans-product-optionselectlayer .xans-product-option .ec-product-button li a {height:22px; min-width:22px !important;} .xans-product-optionselectlayer .xans-product-option .ec-product-button li a span {padding:2px 5px !important;} .xans-product-optionselectlayer .xans-product-option .ec-product-button .ec-product-selected {border: none !important; box-shadow:0px 0px 0px 2px #495164 !important;} .xans-product-optionselectlayer .xans-product-option .ec-product-button .ec-product-selected a {margin: 0 !important;} .xans-product-optionselectlayer .productNormal .imgArea img {height: auto !important;} .xans-product-optionselectlayer .productNormal table td select {height:32px;} .xans-product-optionselectlayer .inner {max-height:300px !important;} .xans-product-optionselectlayer .sublayer_buy { display:inline-block; width:45%; height:64px; margin:0 1%; padding:0; font-family: 'Montserrat','Pretendard',sans-serif; font-size:15px; color:#fff; line-height:64px; text-align:center; vertical-align:middle; border:1px solid #000; background-color:#000; transition: .2s ease-in-out;} .xans-product-optionselectlayer .sublayer_cart { display:inline-block; width:45%; height:64px; margin:0 1%; padding:0; font-family: 'Montserrat','Pretendard',sans-serif; font-size:15px; color:#1a1a1a; line-height:64px; text-align:center; vertical-align:middle; border:1px solid #dedede; background-color:#fff; transition: .2s ease-in-out;} .xans-product-optionselectlayer .sublayer_soldout { display:inline-block; width:45%; height:66px; margin:10px 0 0; padding:0; font-family: 'Montserrat','Pretendard',sans-serif; font-size:14px; font-weight:300; color:#1a1a1a; line-height:64px; text-align:center; vertical-align:middle; border:1px solid #dedede; border-radius:30px; background-color:#fff; cursor:default; transition: .2s ease-in-out;} .xans-product-optionselectlayer .sublayer_buy:hover {text-decoration:none; background-color: #fff; color: #000; border: 1px solid #000; transition: .2s ease-in-out;} .xans-product-optionselectlayer .sublayer_cart:hover {text-decoration:none;border: 1px solid #555;transition: .2s ease-in-out;} .xans-product-optionselectlayer .sublayer_soldout:hover { text-decoration:none;} /* 이미지 확대보기( 팝업 레이어 ) */ .xans-product-zoom .infoArea .xans-product-option .ec-product-button.ec-product-preview li a {width:22px !important; height:22px !important;} .xans-product-zoom .imgArea .listImg { overflow:hidden; width:400px !important; margin:30px auto 0; } .xans-product-zoom .imgArea .listImg ul { height:77px !important; margin:0 0 0 2px !important; font-size:0; line-height:0; } .xans-product-zoom .imgArea .listImg li img { width:77px !important; height:75px !important; border:1px solid #ececec !important; cursor:pointer !important;} .xans-product-zoom .ec-base-layer .xans-product-action {width:400px;} .xans-product-zoom .ec-base-layer .xans-product-action .ec-base-button { overflow:hidden; margin:0px; text-align:center; display:table; font-weight:400;} .xans-product-zoom .sublayer_buy {text-align:center;width:398px; height:48px; border:1px solid #000; line-height:48px; color:#fff; background-color: #000; display:block; font-size:15px; vertical-align:middle; padding:0; font-weight:400; font-family:'Red Hat Display','Pretendard',sans-serif; margin:0px; letter-spacing:1px; transition: .2s ease-in-out;} .xans-product-zoom .sublayer_cart {text-align:center;width:398px; height:48px; border: 1px solid #c9c9c9; line-height:48px;color:#222; background-color: #fff; display:block; font-size:15px; vertical-align:middle;padding:0;font-weight:400; font-family:'Red Hat Display','Pretendard',sans-serif; letter-spacing:1px; margin: 10px 0 0 0px; transition: .2s ease-in-out;} .xans-product-zoom .sublayer_wish {text-align:center;width:398px; height:48px; border: 1px solid #c9c9c9; line-height:48px;color:#222; background-color: #fff; display:block; font-size:15px; vertical-align:middle;padding:0;font-weight:400; font-family:'Red Hat Display','Pretendard',sans-serif; letter-spacing:1px; margin: 10px 0 0 0px; transition: .2s ease-in-out;} .xans-product-zoom .soldout_btn {text-align:center;width:398px; height:48px; border: 1px solid #c9c9c9; line-height:48px;color:#222; background-color: #fff; display:block; font-size:15px; vertical-align:middle;padding:0;font-weight:400; font-family:'Red Hat Display','Pretendard',sans-serif; letter-spacing:1px; margin: 10px 0 0 0px; transition: .2s ease-in-out;} .xans-product-zoom .sublayer_buy:hover {background-color:#fff; color:#000;text-decoration:none;} .xans-product-zoom .sublayer_cart:hover {border:1px solid #555;text-decoration:none;} .xans-product-zoom .soldout_btn:hover {border:1px solid #555;text-decoration:none;} .xans-product-zoom .sublayer_wish:hover {border:1px solid #555;text-decoration:none;} /* 팝업 배경 및 위치 */ div#modalBackpanel {position: fixed !important; width: 100% !important;} div#modalContainer {position: fixed !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important;} /* 옵션카운팅 변경 */ #totalProducts tbody td .quantity { display:inline-block; width:95px !important; height:28px; padding:0 28px; position:relative; border:1px solid #dedfe2; box-sizing:border-box;} #totalProducts tbody td .quantity input { width:30px; height:26px !important; padding:0 5px; font-size:12px; font-weight:700; color:#000; line-height:29px; text-align:center; border:0;} #totalProducts tbody td .quantity a:first-of-type { left:auto; right:0; } #totalProducts tbody td .quantity a { width:26px; height:26px; position:absolute; top:0; } #totalProducts tbody td .quantity a:first-of-type:before { margin:0 0 0 -4px; } #totalProducts tbody td .quantity a:before { width:9px; height:1px; position:absolute; left:50%; top:50%; background:#000; content:'';} #totalProducts tbody td .quantity a > img { width:100%; height:100%; position:absolute; top:0; left:0; z-index:10; opacity:.00001; } #totalProducts tbody td .quantity a:first-of-type:after { width:1px; height:9px; margin:-4px 0 0 0; position:absolute; top:50%; left:50%; background:#000; content:'';} #totalProducts tbody td .quantity a:last-of-type { left:0; } #totalProducts tbody td .quantity a:last-of-type:before { margin:0 0 0 -4px; } #totalProducts tbody td .quantity + a, #totalProducts tbody td a.delete { display:inline-block; width:10px; height:10px; margin:9px 0 0 15px; vertical-align:middle; background: url('//img.echosting.cafe24.com/skin/dnd_ko_KR/common/module/detail/btn_total_product_delete.png') no-repeat 0 0; background-size:10px auto; } #totalProducts tbody td .quantity + a .option_box_del, #totalProducts tbody td a.delete .option_box_del { opacity:.00001; } #totalProducts tbody tr.option_product td:first-child + td {width: 135px;} /* 전체페이지 탭 */ .ec-base-tab { position:relative; } .ec-base-tab .menu { margin:40px 0 40px; border:0px ; border-bottom:1px solid #e9e9e9; border-left:0; background:#fff; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; } .ec-base-tab .menu:after { content:""; display:block; clear:both; } .ec-base-tab .menu li { float:left; border-left:0px solid #e9e9e9; background:#fff;} .ec-base-tab .menu li.selected a {background:#fff; color:#1a1a1a; margin:0 0 -2px; border:1px solid #e9e9e9; border-bottom:1px solid #fff; font-weight:500;} .ec-base-tab .menu li a {font-size:14px; background:#fff; border-right:0px; padding:24px 8px 24px; font-weight:400; color:#9a9a9a;} /* 주문내역 페이지 */ .xans-myshop-orderhistorylistitem .title {margin:80px 0 20px 0;} .xans-myshop-orderhistorylistitem .title h3 {font-size:20px; color:#1a1a1a; font-weight:700;} .xans-myshop-orderhistorylistpast .title {margin:80px 0 20px 0;} .xans-myshop-orderhistorylistpast .title h3 {font-size:20px; color:#1a1a1a; font-weight:700;} .xans-myshop-orderhistorylistitem.ec-base-table.typeList table {border:0;margin:0;border-top:2px solid #1a1a1a;border-bottom:1px solid #e3e3e3;} .xans-myshop-orderhistorylistitem.ec-base-table.typeList thead th {background-color:#fff;border-left:0;padding:20px 0;} .xans-myshop-orderhistorylistitem.ec-base-table.typeList td {padding:20px 0;font-size:13px;color:#333;font-weight:400;} .xans-myshop-orderhistorylistitem.ec-base-table.typeList tfoot td {background-color:#fff;} /* 주문상세조회 페이지 */ .xans-myshop-orderhistorydetail .title {margin:80px 0 20px 0;} .xans-myshop-orderhistorydetail .title h3 {font-size:24px;color:#333;font-weight:400;} .xans-myshop-orderhistorydetail .ec-base-table.typeList {border-top:2px solid #1a1a1a;} .xans-myshop-orderhistorydetail .ec-base-table.typeList table {border:0;margin:0;} .xans-myshop-orderhistorydetail .ec-base-table.typeList thead th {background-color:#fff;border-left:0;padding:20px 0;} .xans-myshop-orderhistorydetail .ec-base-table.typeList td {padding:15px 10px 14px;} .xans-myshop-orderhistorydetail .ec-base-table table {border:0;margin:0;padding:0;border-collapse:collapse;border-spacing:0;border-top:2px solid #1a1a1a;} .xans-myshop-orderhistorydetail .ec-base-table table:before {content:none;} .xans-myshop-orderhistorydetail .ec-base-table tbody td {border:0;border-bottom:1px solid #e3e3e3;padding:20px 0;background-color:#fff !important;font-size:12px;color:#8a8a8a;font-weight:400 !important;} .xans-myshop-orderhistorydetail .ec-base-table tbody th {border:0;border-bottom:1px solid #e3e3e3;padding:20px 0;background-color:#fff !important;font-size:12px;color:#222;font-weight:400 !important;} .xans-myshop-orderhistorydetail .ec-base-table tbody th {vertical-align:middle;} .xans-myshop-orderhistorydetail .ec-base-table.total table {border:0;margin:0;} .xans-myshop-orderhistorydetail .ec-base-table.typeList tfoot td {background-color:#fff;} .xans-myshop-orderhistorydetail [class^='btnNormal'] {font-family:'Red Hat Display','Pretendard',sans-serif;} .xans-myshop-orderhistorydetail [class^='btnSubmit'] {background-color:#333;color:#fff;font-family:'Red Hat Display','Pretendard',sans-serif;-webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;} .xans-myshop-orderhistorydetail [class^='btnSubmit']:hover {background-color:#1a1a1a;} /* 상품 교환, 취소페이지 */ .xans-myshop-orderhistoryapplycancel .title, .xans-myshop-orderhistoryapplyexchange .title {margin:80px 0 20px 0;} .xans-myshop-orderhistoryapplycancel .title h3, .xans-myshop-orderhistoryapplyexchange .title h3 {font-size:24px;color:#333;font-weight:400;} .xans-myshop-orderhistoryapplycancel .ec-base-table.typeList table, .xans-myshop-orderhistoryapplyexchange .ec-base-table.typeList table {border:0;margin:0;border-top:2px solid #1a1a1a;} .xans-myshop-orderhistoryapplycancel .ec-base-table.typeList thead th, .xans-myshop-orderhistoryapplyexchange .ec-base-table.typeList thead th {background-color:#fff;border-left:0;padding:12px 0;} .xans-myshop-orderhistoryapplycancel .ec-base-table.typeList td, .xans-myshop-orderhistoryapplyexchange .ec-base-table.typeList td {padding:15px 10px 14px;} .xans-myshop-orderhistoryapplyexchange .ec-base-table table {border:0;margin:0;padding:0;border-collapse:collapse;border-spacing:0;border-top:2px solid #1a1a1a;} .xans-myshop-orderhistoryapplyexchange .ec-base-table table:before {content:none;} .xans-myshop-orderhistoryapplyexchange .ec-base-table tbody td {border:0;border-bottom:1px solid #e3e3e3;padding:20px 0;background-color:#fff;font-size:12px;color:#8a8a8a;} .xans-myshop-orderhistoryapplyexchange .ec-base-table tbody th {border:0;border-bottom:1px solid #e3e3e3;padding:20px 0;background-color:#fff;font-size:12px;color:#222;} .xans-myshop-orderhistoryapplyexchange .ec-base-table tbody th {vertical-align:middle;} .xans-myshop-orderhistoryapplyexchange .ec-base-table select {border:1px solid #e3e3e3;height:36px;line-height:36px;width:243px;} .xans-myshop-orderhistoryapplyexchange [class^='btnNormal'] {font-family:'Red Hat Display','Pretendard',sans-serif;} .xans-myshop-orderhistoryapplyexchange [class^='btnSubmit'] {background-color:#333;color:#fff;font-family:'Red Hat Display','Pretendard',sans-serif;-webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;} .xans-myshop-orderhistoryapplyexchange [class^='btnSubmit']:hover {background-color:#1a1a1a;} .xans-myshop-orderhistoryapplyexchange .action_modify {padding:2px 12px;} .xans-myshop-orderhistoryapplycancel .ec-base-table table {border:0;margin:0;padding:0;border-collapse:collapse;border-spacing:0;border-top:2px solid #1a1a1a;} .xans-myshop-orderhistoryapplycancel .ec-base-table table:before {content:none;} .xans-myshop-orderhistoryapplycancel .ec-base-table tbody td {border:0;border-bottom:1px solid #e3e3e3;padding:20px 0;background-color:#fff;font-size:12px;color:#8a8a8a;} .xans-myshop-orderhistoryapplycancel .ec-base-table tbody th {border:0;border-bottom:1px solid #e3e3e3;padding:20px 0;background-color:#fff;font-size:12px;color:#222;} .xans-myshop-orderhistoryapplycancel .ec-base-table tbody th {vertical-align:middle;} .xans-myshop-orderhistoryapplycancel .ec-base-table select {border:1px solid #e3e3e3;height:36px;line-height:36px;width:243px;} .xans-myshop-orderhistoryapplycancel [class^='btnNormal'] {font-family:'Red Hat Display','Pretendard',sans-serif;} .xans-myshop-orderhistoryapplycancel [class^='btnSubmit'] {background-color:#333;color:#fff;font-family:'Red Hat Display','Pretendard',sans-serif;-webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;} .xans-myshop-orderhistoryapplycancel [class^='btnSubmit']:hover {background-color:#1a1a1a;} /* 주문페이지 */ .xans-order-form .controlInfo {background:#fff;padding:0 0 10px 0;border:0;margin-top:20px;} .xans-order-form .controlInfo li {margin:0;background-position:0 0;} .xans-order-form .ec-base-table td div.option {color:#333;} .xans-order-form .orderListArea {border-top:0;border-bottom:1px solid #dadada;} .xans-order-form .orderListArea .title {border:0;border-bottom:1px solid #dadada;background-color:#fff;} .xans-order-form .orderListArea .title h3 {font-size:12px;} .xans-order-form .orderListArea .ec-base-table.typeList table {border:0;margin:0;} .xans-order-form .orderListArea .ec-base-table.typeList thead th {background-color:#fff;border-left:0;padding:20px 0;} .xans-order-form .orderListArea .ec-base-table.typeList td {padding:20px 0;font-size:13px;color:#333;font-weight:400;} .xans-order-form .orderListArea .ec-base-table.typeList tfoot td {background-color:#fff;} .xans-order-form > .ec-base-button {border:0;padding:10px 0;} .xans-order-form .ec-base-table.gBorder td {border-left:0;} .xans-order-form .ec-base-table table {border:0;margin:0;padding:0;border-collapse:collapse;border-spacing:0;border-top:2px solid #1a1a1a;} .xans-order-form .ec-base-table table:before {content:none;} .xans-order-form .ec-base-table tbody td {border:0;border-bottom:1px solid #e3e3e3;padding:20px 0;background-color:#fff;font-size:14px;color:#8a8a8a;line-height:24px;} .xans-order-form .ec-base-table tbody th {border:0;border-bottom:1px solid #e3e3e3;padding:20px 0;background-color:#fff;font-size:14px;color:#222;line-height:24px;} .xans-order-form .ec-base-table tbody th {vertical-align:middle;} .xans-order-form .ec-base-table tbody td input {padding:0 10px;height:34px;line-height:34px;border:1px solid #e3e3e3;margin-right:8px;} .xans-order-form .ec-base-table .error {color:#f00;} .xans-order-form .title {margin:80px 0 20px 0;} .xans-order-form .title h3 {font-size:24px;color:#333;font-weight:400;} .xans-order-form #btn_search_rzipcode {border:1px solid #adadad;color:#222;width:94px;height:36px;text-align:center;padding:0;line-height:34px;font-family:'Red Hat Display','Pretendard',sans-serif;font-size:14px;} .xans-order-form .text_vertical {margin-top:10px;display:inline-block;vertical-align:middle;} .xans-order-form #name, .xans-order-form #user_passwd_confirm, .xans-order-form #passwd, .xans-order-form #member_id {width:160px;} .xans-order-form #postcode1, .xans-order-form #postcode2 {width:90px;} .xans-order-form #addr1, .xans-order-form #addr2 {width:480px;margin:10px 8px 0 0;} .xans-order-form #rphone1_2, .xans-order-form #rphone1_3, .xans-order-form #rphone2_2, .xans-order-form #rphone2_3 {width:80px;margin:0 7px;} .xans-order-form #rphone1_1, .xans-order-form #rphone2_1 {width:102px;height:36px;line-height:34px;font-family:'Red Hat Display','Pretendard',sans-serif;font-size:14px;border:1px solid #e3e3e3;margin-right:7px;} .xans-order-form #oemail1 {width:184px;margin-right:7px;} .xans-order-form #oemail2 {width:184px;margin:0 7px;} .xans-order-form #oemail3 {width:184px;height:36px;line-height:34px;font-family:'Red Hat Display','Pretendard',sans-serif;font-size:14px;border:1px solid #e3e3e3;margin-left:7px;} .xans-order-form .ec-base-table.typeWrite td .address {margin-left:-26px;} .xans-order-form [class^='btnNormal'] {font-family:'Red Hat Display','Pretendard',sans-serif;-webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;} .xans-order-form input[type=text], .xans-order-form input[type=password] {font-size:14px;} .xans-order-form .totalArea .ec-base-table.total th {background-color:#fff;color:#333;border-left:0;font-size:13px;} .xans-order-form .totalArea .ec-base-table tr.sum td {background-color:#fff;color:#333;} .xans-order-form .totalArea .ec-base-table tr.sum td strong {font-weight:400;} .xans-order-form .payArea .total {background:#fff;} .xans-order-form .payArea .total .price {color:#111;} .xans-order-form .payArea .total .price input#total_price {background:#fff;color:#111;} .xans-order-form .payArea .total .ec-base-button #btn_payment {background-color:#333;border:0;font-size:15px;font-family:'Red Hat Display','Pretendard',sans-serif;-webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;} .xans-order-form .payArea .total .ec-base-button #btn_payment:hover {background-color:#111;} /* 주문완료 페이지 */ .xans-order-result .title {margin:80px 0 20px 0;} .xans-order-result .title h3 {font-size:24px;color:#333;font-weight:400;} .xans-order-result .orderListArea {border-top:0;border-bottom:1px solid #dadada;} .xans-order-result .orderListArea .title {border:0;border-bottom:1px solid #dadada;background-color:#fff;margin:50px 0 0 0;padding-bottom:20px;} .xans-order-result .orderListArea .title h3 {font-size:24px;color:#333;font-weight:400;} .xans-order-result .orderListArea .ec-base-table.typeList table {border:0;margin:0;} .xans-order-result .orderListArea .ec-base-table.typeList thead th {background-color:#fff;border-left:0;padding:20px 0;} .xans-order-result .orderListArea .ec-base-table.typeList td {padding:20px 0;font-size:13px;color:#333;font-weight:400;} .xans-order-result .orderListArea .ec-base-table.typeList tfoot td {background-color:#fff;} .xans-order-result > .ec-base-button {border:0;padding:10px 0;} .xans-order-result .ec-base-table.gBorder td {border-left:0;} .xans-order-result .ec-base-table table {border:0;margin:0;padding:0;border-collapse:collapse;border-spacing:0;border-top:2px solid #1a1a1a;} .xans-order-result .ec-base-table table:before {content:none;} .xans-order-result .ec-base-table tbody td {border:0;border-bottom:1px solid #e3e3e3;padding:12px 0;background-color:#fff;font-size:14px;color:#8a8a8a;line-height:24px;} .xans-order-result .ec-base-table tbody th {border:0;border-bottom:1px solid #e3e3e3;padding:12px 0;background-color:#fff;font-size:14px;color:#222;line-height:24px;} .xans-order-result .ec-base-table tbody th {vertical-align:middle;} .xans-order-result .ec-base-table tbody td input {padding:0 10px;height:34px;line-height:34px;border:1px solid #e3e3e3;margin-right:8px;} .xans-order-result .totalArea .ec-base-table.total th {background-color:#fff;color:#333;border-left:0;font-size:13px;} .xans-order-result .totalArea .ec-base-table tr.sum td {background-color:#fff;color:#333;} .xans-order-result .totalArea .ec-base-table tr.sum td strong {font-weight:400;} .xans-order-result .totalArea .ec-base-table.total td .box {color:#333;} .xans-order-result [class^='btnSubmitFix'] {background-color:#333;color:#fff;font-family:'Red Hat Display','Pretendard',sans-serif;-webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;} .xans-order-result [class^='btnSubmitFix']:hover {background-color:#1a1a1a;} .xans-order-result [class^='btnNormal'] {font-family:'Red Hat Display','Pretendard',sans-serif;-webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;} .xans-order-result .orderInfo {text-align:center;padding:0;background:none;} .xans-order-result .orderInfo p a {color:#222;} /* 이용안내 */ .xans-mall-faq .ec-base-tab .menu li a {background:#fff;} .xans-mall-faq .ec-base-tab[class*="grid"] .menu li.selected {background-color:#fff; top:-1px;} .xans-mall-faq .ec-base-tab .menu li.selected a {padding:24px 0px 24px; color:#9a9a9a; } .xans-mall-faq .ec-base-tab .menu li.selected a {background:#fff; color:#1a1a1a; margin:0 0 -2px; border-bottom:1px solid #fff; border:none; font-weight:500;} .xans-mall-faq .cont {padding:16px 0px 80px 0px; color:#6f6f6ff; line-height:1.75; font-size:13px;} .xans-mall-faq .cont h3 {margin:0 0 16px; color:#1a1a1a; font-size:16px; line-height:24px;} /* 관심상품 페이지 */ .xans-myshop-wishlist .title {margin: 80px 0 20px 0;} .xans-myshop-wishlist .title h3 {font-size:20px; color:#1a1a1a; font-weight:700;} .xans-myshop-wishlist.ec-base-table.typeList table {border:0;margin:0; border-top:2px solid #1a1a1a; border-bottom:1px solid #e9e9e9;} .xans-myshop-wishlist.ec-base-table.typeList thead th {background-color:#fff;border-left:0;padding:24px 0; color:#1a1a1a;} .xans-myshop-wishlist.ec-base-table.typeList td {padding:24px 16px 24px 16px; font-size:14px; color:#1a1a1a;} .xans-myshop-wishlist.ec-base-table.typeList td strong.name {font-weight:400;} .xans-myshop-wishlist.ec-base-table.typeList td.right {padding-right:16px; text-align:center;} .xans-myshop-wishlist.ec-base-table.typeList tfoot td {background-color:#fff;} .xans-myshop-wishlist.ec-base-table td.thumb img { max-width:120px;} .xans-myshop-wishlist td.button a {width:120px; margin:3px 0px;} .xans-myshop-wishlist a[class^='btnSubmit'] {padding:8px 12px; font-size:13px; border-radius:6px; background-color:#1a1a1a; color:#fff; font-family:'Red Hat Display','Pretendard',sans-serif; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;} .xans-myshop-wishlist a[class^='btnSubmit']:hover {background-color:#5a5a5a;} .xans-myshop-wishlist a[class^='btnNormal'] {padding:8px 12px; font-size:13px; border-radius:6px; border:1px solid #dddddd; font-family:'Red Hat Display','Pretendard',sans-serif; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;} .xans-myshop-wishlistbutton a[class^='btnEm'] {padding:8px 12px; font-size:13px; border-radius:6px; border:1px solid #dddddd;} .xans-myshop-wishlistbutton a[class^='btnEm'] {background-color:#ffffff; color:#1a1a1a; font-family:'Red Hat Display','Pretendard',sans-serif; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;} .xans-myshop-wishlistbutton a[class^='btnEm']:hover {background-color:#f5f5f5;} .xans-myshop-wishlistbutton a[class^='btn'] .icoDelete:before {background:#77797d;} .xans-myshop-wishlistbutton a[class^='btn'] .icoDelete:after {background:#77797d;} .xans-myshop-wishlistbutton a[class^='btnSubmit'] {padding:8px 12px; font-size:13px; border-radius:6px; background-color:#1a1a1a; color:#fff; font-family:'Red Hat Display','Pretendard',sans-serif; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;} .xans-myshop-wishlistbutton a[class^='btnSubmit']:hover {background-color:#5a5a5a;} .xans-myshop-wishlistbutton a[class^='btnNormal'] {padding:8px 12px; font-size:13px; border-radius:6px; border:1px solid #dddddd; font-family:'Red Hat Display','Pretendard',sans-serif; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;} .xans-myshop-wishlistbutton.ec-base-button {padding: 40px 0 0px;} .xans-myshop-wishlistbutton.ec-base-button .text {font-size:13px; margin: 0 8px 0 0px;} .xans-myshop-wishlistbutton.ec-base-button .gLeft a {margin-right:4px;} .xans-myshop-wishlistbutton.ec-base-button .gRight a {margin-left:4px;} /* 최근본상품 페이지 */ .xans-product-recentlist.ec-base-table.typeList table {border:0; margin:0; border-top:2px solid #1a1a1a; border-bottom:1px solid #e9e9e9;} .xans-product-recentlist.ec-base-table.typeList thead th {background-color:#fff; border-left:0; padding:24px 0;} .xans-product-recentlist.ec-base-table.typeList td {padding:24px 16px 24px 16px; font-size:14px; color:#1a1a1a;} .xans-product-recentlist.ec-base-table.typeList td strong.name {font-weight:400;} .xans-product-recentlist.ec-base-table.typeList td.image {text-align:center;} .xans-product-recentlist.ec-base-table.typeList td.right {text-align:center;} .xans-product-recentlist.ec-base-table.typeList td.product img {display:none;} .xans-product-recentlist.ec-base-table.typeList td.product {padding-left:10px;} .xans-product-recentlist.ec-base-table.typeList tfoot td {background-color:#fff;} .xans-product-recentlist table td.image img { max-width:120px; border:0px;} .xans-product-recentlist table td.button a {width:120px; margin:3px 0px;} .xans-product-recentlist a[class^='btnSubmit'] {padding:8px 12px; font-size:13px; border-radius:6px; background-color:#1a1a1a; color:#fff; font-family:'Red Hat Display','Pretendard',sans-serif; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;} .xans-product-recentlist a[class^='btnSubmit']:hover {background-color:#5a5a5a;} .xans-product-recentlist a[class^='btnNormal'] {padding:8px 12px; font-size:13px; border-radius:6px; border:1px solid #dddddd; font-family:'Red Hat Display','Pretendard',sans-serif; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;} /* 쿠폰 페이지 */ .xans-myshop-couponlist .title {margin: 80px 0 20px 0;} .xans-myshop-couponlist .title h3 {font-size:20px; color:#1a1a1a; font-weight:700;} .xans-myshop-couponserial .title {margin: 80px 0 20px 0;} .xans-myshop-couponserial .title h3 {font-size:20px; color:#1a1a1a; font-weight:700;} .xans-myshop-couponlist .ec-base-table.typeList table {border:0;margin:0;border-top:2px solid #1a1a1a; border-bottom:1px solid #e9e9e9;} .xans-myshop-couponlist .ec-base-table.typeList thead th {background-color:#fff; border-left:0; padding:24px 0;} .xans-myshop-couponlist .ec-base-table.typeList td {padding:24px 16px; font-size:14px;color:#1a1a1a; font-weight:400;} .xans-myshop-couponlist .ec-base-table.typeList tfoot td {background-color:#fff;} .xans-myshop-couponserial .couponSerial .btnSubmitFix {margin:0px; font-size:13px;} .xans-myshop-couponserial [class^='btnSubmit'] {background-color:#1a1a1a; color:#fff; font-family:'Red Hat Display','Pretendard',sans-serif; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;} .xans-myshop-couponserial [class^='btnSubmit']:hover {background-color:#f5a5a5a;} /* 내게시물관리 페이지 */ .xans-myshop-boardpackage .ec-base-table table {border:0;border-top:1px solid #1a1a1a;border-bottom:1px solid #e9e9e9;} .xans-myshop-boardpackage .ec-base-table.typeList td {padding:24px 0; font-size:14px;color:#1a1a1a;font-weight:400;} .xans-myshop-boardpackage .ec-base-table.typeList td a:hover {color:#1a1a1a !important;} .xans-myshop-boardpackage .ec-base-table.typeList td .txtNum {font-size:12px;color: #1a1a1a;} .xans-myshop-boardpackage .ec-base-table thead th { padding:24px 0; border-left: 0; border-bottom: 1px solid #e9e9e9; color: #1a1a1a;font-size:14px; font-weight:400; vertical-align: middle; background: #fff; } .xans-myshop-boardpackage .ec-base-table.gBorder td {border-left:0;} .xans-myshop-boardpackage .ec-base-table .message {border:0;} .xans-myshop-boardpackage .xans-myshop-boardlisthead {text-align:right; font-size:13px; } .xans-myshop-boardpackage .xans-myshop-boardlisthead select {height:40px; line-height:38px; font-size:13px; margin-left:8px;} /* 내게시물관리 검색부분 */ .xans-myshop-boardlistsearch {text-align:center; padding:30px 0 30px;} .xans-myshop-boardlistsearch p {background:none;} .xans-myshop-boardlistsearch p:before {content:'';} .xans-myshop-boardlistsearch [class^='btnEm'] {background-color:#fff; color:#1a1a1a; border: 1px solid #bfbfbf; font-size: 13px; line-height: 24px; font-weight: 400; font-family:'Red Hat Display','Pretendard',sans-serif; width: auto; padding:7px 27px;-webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; margin-left: 8px;} .xans-myshop-boardlistsearch [class^='btnEm']:hover {background-color:#1a1a1a; color: #fff; border-color: #1a1a1a;} .xans-myshop-boardlistsearch #search {height:34px;line-height:34px; border-color: #e9e9e9; font-size: 13px; color: #1a1a1a; font-weight: 400;} .xans-myshop-boardlistsearch select {width:96px; height:40px; border-color: #e9e9e9; font-size: 13px; color: #1a1a1a; font-weight: 400; margin-right:8px;} /* 배송주소록관리 페이지 */ .xans-myshop-addrlist .ec-base-table.typeList table {border:0;margin:0;border-top:2px solid #1a1a1a;border-bottom:1px solid #e9e9e9;} .xans-myshop-addrlist .ec-base-table.typeList thead th {background-color:#fff;border-left:0;padding:24px 0;} .xans-myshop-addrlist .ec-base-table.typeList td {padding:24px 16px; font-size:14px; color:#1a1a1a; font-weight:400;} .xans-myshop-addrlist .ec-base-table.typeList tfoot td {background-color:#fff;} .xans-myshop-addrlist .ec-base-button a {width:120px !important;} .xans-myshop-addrlist a[class^='btnNormal'] {padding:8px 12px; font-size:13px; border-radius:6px; border:1px solid #dddddd; font-family:'Red Hat Display','Pretendard',sans-serif; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;} .xans-myshop-addrlist a[class^='btnSubmit'] {padding:8px 12px; font-size:13px; border-radius:6px; background-color:#1a1a1a; color:#fff; font-family:'Red Hat Display','Pretendard',sans-serif; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;} .xans-myshop-addrlist a[class^='btnSubmit']:hover {background-color:#5a5a5a;} /* 배송주소록 등록 페이지 */ .xans-myshop-addrregister .ec-base-table table {border:0;margin:0;padding:0;border-collapse:collapse;border-spacing:0;border-top:2px solid #1a1a1a;} .xans-myshop-addrregister .ec-base-table table:before {content:none;} .xans-myshop-addrregister .ec-base-table tbody td {border:0;border-bottom:1px solid #e3e3e3;padding:20px 0;background-color:#fff;font-size:14px;color:#8a8a8a;} .xans-myshop-addrregister .ec-base-table tbody th {border:0;border-bottom:1px solid #e3e3e3;padding:20px 0;background-color:#fff;font-size:14px;color:#222;line-height:34px;} .xans-myshop-addrregister .ec-base-table tbody td input {padding:0 10px;height:34px;line-height:34px;border:1px solid #e3e3e3;margin-right:8px;font-size:14px;background-color:#fff;} .xans-myshop-addrregister .ec-base-table tbody td #content_CONTAINER {border:1px solid #e3e3e3;border-top:0;} .xans-myshop-addrregister .ec-base-table tbody td input[type=file] {border:0;} .xans-myshop-addrregister [class^='btnSubmit'] {background-color:#333;color:#fff;font-family:'Red Hat Display','Pretendard',sans-serif;-webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;} .xans-myshop-addrregister [class^='btnSubmit']:hover {background-color:#1a1a1a;} .xans-myshop-addrregister [class^='btnNormal'] {font-family:'Red Hat Display','Pretendard',sans-serif;-webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;} .xans-myshop-addrregister [class^='btnBasic'] {background-color:#fff;font-family:'Red Hat Display','Pretendard',sans-serif;-webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;} .xans-myshop-addrregister .ec-base-box.typeProduct {border:1px solid #e3e3e3;} .xans-myshop-addrregister #ma_rcv_phone1, .xans-myshop-addrregister #ma_rcv_mobile_no1 {width:102px;height:36px;line-height:34px;font-size:14px;border:1px solid #e3e3e3;margin-right:7px;} /* 배송주소록 수정 페이지 */ .xans-myshop-addrmodify .ec-base-table table {border:0;margin:0;padding:0;border-collapse:collapse;border-spacing:0;border-top:2px solid #1a1a1a;} .xans-myshop-addrmodify .ec-base-table table:before {content:none;} .xans-myshop-addrmodify .ec-base-table tbody td {border:0;border-bottom:1px solid #e3e3e3;padding:20px 0;background-color:#fff;font-size:14px;color:#8a8a8a;} .xans-myshop-addrmodify .ec-base-table tbody th {border:0;border-bottom:1px solid #e3e3e3;padding:20px 0;background-color:#fff;font-size:14px;color:#222;line-height:34px;} .xans-myshop-addrmodify .ec-base-table tbody td input {padding:0 10px;height:34px;line-height:34px;border:1px solid #e3e3e3;margin-right:8px;font-size:14px;background-color:#fff;} .xans-myshop-addrmodify .ec-base-table tbody td #content_CONTAINER {border:1px solid #e3e3e3;border-top:0;} .xans-myshop-addrmodify .ec-base-table tbody td input[type=file] {border:0;} .xans-myshop-addrmodify [class^='btnEmFix '] {background-color:#333;color:#fff;font-family:'Red Hat Display','Pretendard',sans-serif;-webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;} .xans-myshop-addrmodify [class^='btnEmFix ']:hover {background-color:#1a1a1a;} .xans-myshop-addrmodify [class^='btnNormal'] {font-family:'Red Hat Display','Pretendard',sans-serif;-webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;} .xans-myshop-addrmodify [class^='btnBasic'] {background-color:#fff;font-family:'Red Hat Display','Pretendard',sans-serif;-webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;} .xans-myshop-addrmodify .ec-base-box.typeProduct {border:1px solid #e3e3e3;} .xans-myshop-addrmodify #ma_rcv_phone1, .xans-myshop-addrmodify #ma_rcv_mobile_no1 {width:102px;height:36px;line-height:34px;font-size:14px;border:1px solid #e3e3e3;margin-right:7px;} /* 적립금 페이지 */ .xans-myshop-historylist .ec-base-table.typeList table {border:0; margin:0; border-top:2px solid #1a1a1a; border-bottom:1px solid #e9e9e9;} .xans-myshop-historylist .ec-base-table.typeList thead th {background-color:#fff; border-left:0; padding:24px 0;} .xans-myshop-historylist .ec-base-table.typeList td {padding:24px 0; font-size:14px; color:#1a1a1a; font-weight:400;} .xans-myshop-historylist .ec-base-table.typeList tfoot td {background-color:#fff;} .xans-myshop-unavaillist .ec-base-table.typeList table {border:0;margin:0; border-top:2px solid #1a1a1a; border-bottom:1px solid #e9e9e9;} .xans-myshop-unavaillist .ec-base-table.typeList thead th {background-color:#fff; border-left:0; padding:24px 0;} .xans-myshop-unavaillist .ec-base-table.typeList td {padding:24px 0; font-size:14px; color:#1a1a1a; font-weight:400;} .xans-myshop-unavaillist .ec-base-table.typeList tfoot td {background-color:#fff;} .xans-myshop-couponmemberlist .ec-base-table.typeList table {border:0;margin:0; border-top:2px solid #1a1a1a; border-bottom:1px solid #e9e9e9;} .xans-myshop-couponmemberlist .ec-base-table.typeList thead th {background-color:#fff; border-left:0; padding:24px 0;} .xans-myshop-couponmemberlist .ec-base-table.typeList td {padding:24px 0 ;font-size:14px; color:#1a1a1a; font-weight:400;} .xans-myshop-couponmemberlist .ec-base-table.typeList tfoot td {background-color:#fff;} .xans-myshop-summary {} /* 예치금 페이지 */ .xans-myshop-deposithistorylist .ec-base-table.typeList table {border:0;margin:0;border-top:2px solid #1a1a1a;border-bottom:1px solid #e9e9e9;} .xans-myshop-deposithistorylist .ec-base-table.typeList thead th {background-color:#fff;border-left:0; padding:24px 0;} .xans-myshop-deposithistorylist .ec-base-table.typeList td {padding:24px 0;font-size:13px;color:#1a1a1a;font-weight:400;} .xans-myshop-deposithistorylist .ec-base-table.typeList tfoot td {background-color:#fff;} .xans-myshop-depositsummary {margin: 0 0 40px;} /* 정기예금 페이지 */ .regularDeliveryPayInfo .ec-base-box .information .status {color:#1a1a1a;} /* 정기배송 페이지 */ .regularDeliveryPayInfo > .title {font-size:20px; color:#1a1a1a; font-weight:700; margin: 80px 0 20px 0;} .xans-myshop-orderregularmanagelist.ec-base-table.typeList table {border:0;margin:0;border-top:2px solid #1a1a1a;border-bottom:1px solid #e9e9e9;} .xans-myshop-orderregularmanagelist.ec-base-table.typeList thead th {background-color:#fff;border-left:0;padding:24px 0;} .xans-myshop-orderregularmanagelist.ec-base-table.typeList td {padding:24px 16px; font-size:14px;color:#1a1a1a;font-weight:400;} /* 좋아요 페이지 */ .xans-myshop-likeproductlist .ec-base-table.typeList table {border:0;margin:0;border-top:2px solid #1a1a1a;border-bottom:1px solid #e9e9e9;} .xans-myshop-likeproductlist .ec-base-table.typeList thead th {background-color:#fff;border-left:0;padding:24px 0;} .xans-myshop-likeproductlist .ec-base-table.typeList td {padding:24px 0px; font-size:14px; color:#1a1a1a; font-weight:400;} .xans-myshop-likeproductlist .ec-base-table.typeList td.thumb img {width:120px !important; max-width:160px !important;} .xans-myshop-likeproductlist .ec-base-table.typeList td strong {font-weight:400; color:#1a1a1a;} .xans-myshop-likeproductlist .ec-base-table.typeList td .button {display:none;} .xans-myshop-likeproductlist .ec-base-table.typeList td span.icon {display:block;} .xans-myshop-likeproductlist .ec-base-table.typeList td span.icon img {padding:8px 2px 0px 0px;} .xans-myshop-likeproductcontrol a[class^='btnEm'] {padding:8px 12px; font-size:13px; border-radius:6px; border:1px solid #dddddd;} .xans-myshop-likeproductcontrol a[class^='btnEm'] {background-color:#ffffff; color:#1a1a1a; font-family:'Red Hat Display','Pretendard',sans-serif; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;} .xans-myshop-likeproductcontrol a[class^='btnEm']:hover {background-color:#f5f5f5;} .xans-myshop-likeproductcontrol a[class^='btn'] .icoDelete:before {background:#77797d;} .xans-myshop-likeproductcontrol a[class^='btn'] .icoDelete:after {background:#77797d;} .xans-myshop-likeitprdpackage .ec-base-button {padding:40px 0px 0px;} .xans-myshop-likeitprdpackage .ec-base-button .text {font-size:13px; margin: 0 8px 0 0px;} /* 대량구매문의 페이지 */ .xans-board-inquirylist.ec-base-table.typeList table {border:0;margin:0;border-top:2px solid #1a1a1a;border-bottom:1px solid #e9e9e9;} .xans-board-inquirylist.ec-base-table.typeList thead th {background-color:#fff;border-left:0;padding:24px 0;} .xans-board-inquirylist.ec-base-table.typeList td {padding:18px 0px; font-size:13px;color:#1a1a1a;font-weight:400;} /* ec-base-box */ .ec-base-box {border: 1px solid #e3e3e3;} /* .ec-base-table */ .ec-base-table .message {border:0px; font-size:16px !important; font-weight:500 !important; color:#9a9a9a !important; padding:80px 0px !important; margin:80px 0px !important; background: url("//haebogi.com/morenvyimg/nodata.svg") no-repeat center top;} .ec-base-table td.message {border:0px; font-size:16px !important; font-weight:500 !important; color:#9a9a9a !important; padding:160px 0px 120px !important; margin:80px 0px !important; background: url("//haebogi.com/morenvyimg/nodata.svg") no-repeat center 80px;} .ec-base-table td {border-top:1px solid #e9e9e9;} .ec-base-table thead th {font-size:14px;} /* .ec-base-button */ .ec-base-button {padding: 40px 0 10px;} /* .ec-base-help */ div.ec-base-help {margin:80px 0 0px; border:0px; line-height:18px;} div.ec-base-help ul, div.ec-base-help ol {margin:30px 0 0 11px;} div.ec-base-help .inner {padding:0px 0px 30px;} div.ec-base-help > h2, div.ec-base-help > h3 {padding:16px 0 16px 0px; border-bottom:1px solid #1a1a1a; color:#1a1a1a; font-size:20px; font-weight:700; background: #fff;} div.ec-base-help h4 {margin:40px 0 0px; color: #1a1a1a; font-size:14px; line-height:24px; font-weight:600;} div.ec-base-help h4:first-child {margin-top:24px;} div.ec-base-help ul, div.ec-base-help ol {margin:20px 0 0 0px;} div.ec-base-help ul, div.ec-base-help ol li {margin-bottom:4px;} /* .ec-base-paginate */ .ec-base-paginate {margin: 40px 0 40px !important;} .xans-product-normalpaging li a.this, .xans-product-additional .paging li a.this, .xans-board-paging li a.this, .xans-search-paging li a.this { border-bottom:0; color:#333; } .xans-product-normalpaging, .xans-search-paging {border:0;} .ec-base-paginate li a {display: flex; align-items: center; justify-content: center; padding: 0; width: 40px; height: 40px; font-size: 14px; line-height: 24px; letter-spacing: -0.02em; font-weight: 400;} .ec-base-paginate li a.this, .typeSub.ec-base-paginate li a.this {color: #1a1a1a; font-weight: 700; padding: 0; border-bottom: 0;} .ec-base-paginate li {border:0;margin:0 8px;} .ec-base-paginate li:first-child {margin-left: 8px;} .ec-base-paginate > ol {margin: 0 8px;} .ec-base-paginate > a {width: 40px; height: 40px; display: inline-block; position: relative;} .ec-base-paginate > a img {display: none;} .ec-base-paginate > a:after {content:url("//haebogi.com/morenvyimg/page_prev.svg");display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0;} .ec-base-paginate > a.first:after {content:url("//haebogi.com/morenvyimg/page_first.svg");} .ec-base-paginate > a.last:after {content:url("//haebogi.com/morenvyimg/page_last.svg");} .ec-base-paginate > ol + a:after {content:url("//haebogi.com/morenvyimg/page_next.svg");} /* 이벤트(갤러리) 게시판 */ .xans-board-listpackage-8 .notice {border: 0; margin: 0;} .xans-board-listpackage-8 .xans-board-list-8 ul {display: flex; align-items: flex-start; flex-wrap: wrap; width:auto; margin:0px -16px 0;} .xans-board-listpackage-8 .xans-board-list-8 li {display: flex; flex-direction: column; width:calc(33.333% - 32px) !important; padding:0; margin:0 16px 60px;} .xans-board-listpackage-8 .xans-board-list-8 li a.imgLink, .xans-board-listpackage-8 .xans-board-list-8 li a.imgLink:hover {width:100%; font-size:18px; line-height: 24px; font-weight:500; color: #1a1a1a;} .xans-board-listpackage-8 .xans-board-list-8 li .imgLink img {margin:0 auto 25px; border:none;} .xans-board-listpackage-8 .xans-board-list-8 li .boardChk {display:none;} .xans-board-listpackage-8 .xans-board-list-8 li span {display: inline-block; margin: 0; width: auto;} .xans-board-listpackage-8 .xans-board-list-8 li .contents {margin-top: 8px; font-size: 16px; line-height: 24px; font-weight: 400; color: #8a8a8a; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient: vertical; white-space:normal; overflow:hidden; text-overflow:ellipsis;} .xans-board-listpackage-8 .xans-board-list-8 li .contents + span {display: flex; align-items: center; margin-top: 16px;} .xans-board-listpackage-8 .xans-board-list-8 li .contents + span em, .xans-board-listpackage-8 .xans-board-list-8 li .contents + span strong {font-size: 14px; line-height: 24px; font-weight: 400; color: #8a8a8a; padding-right:0px;} .xans-board-listpackage-8 .xans-board-list-8 li .contents + span strong:after {content: ''; display: inline-block;width: 1px ; height: 12px; background-color: #ddd; margin: 0 12px;} .xans-board-listpackage-8 .xans-board-list-8 li .contents + span strong {display: flex; align-items: center;} /* 상품 리스트 정렬 */ .xans-product-normalmenu {margin:50px auto 0;} .xans-product-normalmenu .function {margin:0;padding:0 0 20px 0;line-height:20px;border:0; border-bottom:1px solid #e9e9e9;text-align:right;overflow:hidden;} .xans-product-normalmenu .prdCount {padding:0;font-size:13px;color: #8a8a8a; line-height:20px;} .xans-product-normalmenu .prdCount strong {color:#111;font-weight:700;} .xans-product-normalmenu ul#type {margin: 0;} .xans-product-normalmenu ul#type li {padding:0;background:none;} .xans-product-normalmenu ul#type li a {margin-left:20px;font-size:13px;color:#8a8a8a;font-weight:400;line-height:20px;} .xans-product-normalmenu ul#type li a:hover {color:#1a1a1a;} .xans-product-normalmenu ul#type li a.sort {font-weight:500 !important;color:#111;} /* 검색페이지 */ .xans-product-searchdata .searchField {padding:0;margin:10px auto 0;background:none;} .xans-product-searchdata .searchField fieldset {position: relative; display: table; margin:0 auto 24px; text-align: center;} .xans-product-searchdata .searchField fieldset .searchInput {position: relative; display: inline-block; width:764px;border:0;border-bottom:2px solid #1a1a1a; padding: 0 36px 0 0;} .xans-product-searchdata .searchField .keyword {border: 0; width: 100%; height:60px;line-height:60px;padding:0;font-size:18px;font-weight:600;color:#1a1a1a; outline: 0;} .xans-product-searchdata .searchField .btnSearch { position:absolute; top:50%; right:0; outline:0; transform: translateY(-50%);} .xans-product-searchdata .searchField .search_keyword {max-width:800px;margin:0 auto;} .xans-product-searchdata .searchField .search_keyword .heading {font-size:18px; line-height:32px; color:#1a1a1a; font-weight:700; margin-bottom:24px;} .xans-product-searchdata .searchField .search_keyword .list {display:flex;flex-wrap:wrap;} .xans-product-searchdata .searchField .search_keyword .list li {margin:0px 8px 8px 0px;} .xans-product-searchdata .searchResult {display: flex;justify-content: space-between;margin:120px auto 80px; padding:0 0 24px 0; height:40px; line-height:40px; border-bottom:1px solid #e9e9e9;} .xans-product-searchdata .searchResult select {height:40px; font-size:13px;} .xans-product-searchdata .searchField .search_keyword .list a {font-size:16px; color:#1a1a1a; font-size:14px; font-weight:500; background-color:#f5f5f5; border:1px solid #f5f5f5; box-sizing:border-box; line-height:24px; padding:7px 23px; border-radius:24px; display:block;} .xans-product-searchdata .searchField .search_keyword .list a {-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-ms-transition:all 0.3s;-o-transition:all 0.3s;transition:all 0.3s;} .xans-product-searchdata .searchField .search_keyword .list a:hover {background-color:#ffffff; border:1px solid #e9e9e9;} .xans-product-searchdata .searchField .search_text {text-align:center; font-size:18px; line-height:28px; font-weight:700; max-width:800px; margin:0 auto 40px;} .xans-product-searchdata .searchField .search_text .count {color:#FF5F5F;} .xans-product-searchdata .record {padding:0;font-size: 13px;color: #8a8a8a; line-height:40px;} .xans-product-searchdata .record strong {color:#1a1a1a; font-weight: 700;} .xans-product-searchdata ul.xans-product-searchorderby {margin: 0;} .xans-product-searchdata ul.xans-product-searchorderby li {display: inline; padding: 0; background: none;} .xans-product-searchdata ul.xans-product-searchorderby li a {margin-left:20px;font-size:13px;color:#8a8a8a;font-weight:400;line-height:20px;} .xans-product-searchdata ul.xans-product-searchorderby li a:hover {color:#1a1a1a;} .xans-product-searchdata ul.xans-product-searchorderby li a.sort {font-weight:500 !important;color:#1a1a1a;} .xans-product-searchdata .noData {border:0px; font-size:16px !important; font-weight:500 !important; color:#9a9a9a !important; padding:80px 0px !important; margin:80px 0px !important; background: url("//haebogi.com/morenvyimg/nodata.svg") no-repeat center top;} /* 진열이 없을때 */ .noData {margin:0 auto;padding:100px 0;text-align:center;} /* 체크박스 스타일 */ input[type=checkbox]:not(old) {background: url("//haebogi.com/morenvyimg/checkbox.png") no-repeat;width:20px !important;height:20px !important;-webkit-appearance:none;border:0 !important; background-size:20px 20px;} input[type=checkbox]:not(old):checked {background: url("//haebogi.com/morenvyimg/checkbox_on.png") no-repeat;width:20px !important;height:20px !important; background-size:20px 20px;} /* 라디오 스타일 */ input[type=radio]:not(old) {background: url("//haebogi.com/morenvyimg/radio_none.png") no-repeat;background-size:20px 20px;width:20px !important;height:20px !important;-webkit-appearance:none;border:0 !important;margin-right:4px !important;} input[type=radio]:not(old):checked {background: url("//haebogi.com/morenvyimg/radio_on.png") no-repeat;background-size:20px 20px;width:20px !important;height:20px !important;} /* 개인정보 처리방침, 이용약관 */ .ec-base-box.typeThinBg {border-width:0px; border-color:#d7d5d5; background-color:#fbfafa;} .ec-base-box.typeThinBg > .agree {padding:40px; border:0px solid #e6e6e6; background:#fff; font-size:14px; color:#8a8a8a; } .ec-base-box.typeThinBg > .agree span {font-size:14px !important;} .ec-base-box.typeThinBg > .agree p {line-height:1.75 ;} /* morenvy.com 220517 서정환 */ @charset "utf-8"; #wrap {opacity: 0;position:relative;width:100%;margin:0 auto;min-height:550px;min-width:1600px;} body {min-width:100%;padding:0;margin:0;} #container {width:100%;min-width:1600px;position:relative;margin:0 auto;} #container #contents {width:92%;max-width:1600px;margin:0 auto;float:none;padding:0 4%; overflow: hidden;} .w1600 {max-width:1600px;margin:0 auto;padding:0 4%;} input, select, textarea, body, code {font-family:'Red Hat Display','Pretendard',sans-serif;} a, a:hover {text-decoration:none;} a:focus {outline:none;} a {blr:expression(this.onFocus=this.blur());} area:focus {outline:none;} area {blr:expression(this.onFocus=this.blur());} input:focus, img:focus, embed:focus, map:focus {outline:none;} .cboth {clear:both;*zoom:1} .cboth:after {content:" ";display:block;clear:both;} .center {text-align:center;} .m_off {display:none !important;} svg:not(:root) {overflow:hidden;} audio, canvas, img, video {max-width:100%;height:auto;box-sizing:border-box;} audio, canvas, iframe, img, svg, video {vertical-align:middle;} .move {-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-ms-transition:all 0.3s;-o-transition:all 0.3s;transition:all 0.3s;} .layer_shadow {position:fixed;top:0;left:0;height:100%;width:100%;background:rgba(0,0,0,0.4);z-index:3;opacity:0;visibility:hidden;-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-ms-transition:all 0.3s; -o-transition:all 0.3s;transition:all 0.3s;} .layer_shadow.on {opacity:1;visibility:visible;} .mh_dimmed {display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100% !important; height: 100vh !important; z-index: 10; background-color: rgba(26,26,26,0.5);} /* 상단 */ #mheader {z-index: 101; position:fixed; width: 100%; min-width: 1600px; background-color: #fff; border:0;padding:0;margin:0; border-bottom: 1px solid #ededed; box-sizing: border-box; transition: background 0.3s;} #mheader.search {background-color: #fff;} #mheader:after, #mheader:before {display:none;} #mheader .mh_inner {height: 112px; display: flex; align-items: center; max-width: 1600px; margin: 0 auto; padding: 0 4%; } .mh_blank {display: block; height: 113px;} /* 상단01 : 로고 */ .mh_sec01 {margin-right: 7.5%;} /* 상단02 : 카테고리 */ .mh_sec02 {height: 100%;} .mh_sec02 div {height: 100%;} .mh_sec02 #mcategory #slideCateList {display: flex; margin: 0 -24px;} .mh_sec02 #mcategory #slideCateList > ul {display: flex; font-size: 0;} .mh_sec02 #mcategory #slideCateList > ul > li {position: relative; display: flex; align-items: center; height: 100%; padding: 0 24px;} .mh_sec02 #mcategory #slideCateList > ul > li > a {position: relative; height: auto; padding: 0; font-size: 16px; line-height: 1.5em; font-weight: 500; color: #1a1a1a;} .mh_sec02 #mcategory #slideCateList > ul > li > a:before {content: ''; display: block; width: 0; height: 2px; background-color: #1a1a1a; position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%); transition: width 0.3s;} .mh_sec02 #mcategory #slideCateList > ul > lI.selected > a:before {width: 100%;} .mh_sec02 #mcategory #slideCateList > ul > li.point > a:after {content: ''; display: block; width: 4px; height: 4px; margin: 2px; border-radius: 50%; background-color: #1a1a1a; position: absolute; top: 0; left: 100%;} .mh_sec02 #mcategory #slideCateList > ul > li > ul {display: none; z-index: 101; position: absolute; top: 100%; left: 24px; width: 160px; padding: 12px 8px 12px 16px; border: 1px solid #ededed; box-sizing: border-box; background-color: #fff;} .mh_sec02 #mcategory #slideCateList > ul > li.selected > ul {display: block;} .mh_sec02 #mcategory #slideCateList > ul > li > ul li {position: relative; padding: 4px 0;} .mh_sec02 #mcategory #slideCateList > ul > li > ul li a {display: flex; justify-content: space-between; font-size: 14px; line-height: 24px; font-weight: 400; color: #6a6a6a;} .mh_sec02 #mcategory #slideCateList > ul > li > ul li.selected > a {color: #1a1a1a;} .mh_sec02 #mcategory #slideCateList > ul > li > ul li a:after {content: ''; display: block; width: 24px; height: 24px; background: url("//haebogi.com/morenvyimg/cate_arrow.png") no-repeat;} .mh_sec02 #mcategory #slideCateList > ul > li > ul li.noChild a:after {display: none;} .mh_sec02 #mcategory #slideCateList > ul > li > ul li > ul {display: none; position: absolute; left: 100%; top: -13px; margin-left: 8px; width: 160px; padding: 12px 8px 12px 16px; border: 1px solid #ededed; box-sizing: border-box; background-color: rgba(255,255,255,0.8);} .mh_sec02 #mcategory #slideCateList > ul > li > ul li.selected > ul {display: block;} /* 상단03 : 우측 메뉴 */ .mh_sec03 {display: flex; align-items: center; height: 100%; margin-left: auto;} .mh_sec03 > div {display: flex; align-items: center; justify-content: center; width: 32px; height: 100%; padding: 0 12px;} .mh_sec03 .mh_mypage {position: relative;} .mh_sec03 .mh_mypage:hover ul {display: block;} .mh_sec03 .mh_mypage ul {display: none; z-index: 1; position: absolute; top: 100%; left: -12px; min-width: 232px; border: 1px solid #ededed; box-sizing: border-box; background-color: #fff;} .mh_sec03 .mh_mypage ul li {padding: 12px 24px; box-sizing: border-box; border-top: 1px solid #ededed;} .mh_sec03 .mh_mypage ul li a {display: block; padding: 4px 0; font-size: 14px; line-height: 24px; font-weight: 400; color: #6a6a6a;} .mh_sec03 .mh_mypage ul li a:hover {color:#1a1a1a;} .mh_sec03 .mh_mypage ul li:first-child {display: flex; align-items: center; background-color: #f5f5f5; border-top: 0;} .mh_sec03 .mh_mypage ul li:first-child a {color: #1a1a1a;} .mh_sec03 .mh_cart a {position: relative;} .mh_sec03 .mh_cart .count {position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%); font-size: 11px; line-height: 16px; letter-spacing: 0.04em; font-weight: 800;} .mh_sec03 .mh_search span {cursor: pointer;} .mh_sec03 .mh_search .search {display: block;} .mh_sec03 .mh_search .close {display: none;} .mh_sec03 .mh_lang {position: relative; margin-left: 16px; padding-right: 0; width: auto;} .mh_sec03 .mh_lang .current {display: flex; align-items: center; font-size: 14px; line-height: 24px; font-weight: 500; color: #1a1a1a; cursor: pointer;} .mh_sec03 .mh_lang ul {display: none; position: absolute; top: 100%; left: 0; padding: 12px 16px; border: 1px solid #ededed; box-sizing: border-box; background-color: #fff;} .mh_sec03 .mh_lang:hover ul {display: block;} .mh_sec03 .mh_lang ul li a {padding: 4px 0; font-size: 14px; line-height: 24px; font-weight: 400; color: #6a6a6a;} .mh_sec03 .mh_lang ul li a:hover {color:#1a1a1a;} /* 상단04 : 검색 */ .mh_sec04 {display: none;} .mh_sec04 .xans-layout-searchheader {float: none; margin: 32px auto; width: 480px;} .mh_sec04 .xans-layout-searchheader fieldset {position: relative; border: 0; font-size: 0; width: 0; margin: 0 auto; transition: width 0.5s; padding-bottom: 16px;} .mh_sec04 .xans-layout-searchheader input#keyword {width: 100%; height: auto; padding: 0 0 14px; border-bottom: 2px solid #1a1a1a; font-size: 16px; line-height: 32px; font-weight: 400; color: #a8a8a8;} .mh_sec04 .xans-layout-searchheader input.btn_search {position: absolute; top: 0; right: 0;} .mh_sec04 .xans-search-hotkeyword ul {opacity: 0; display: flex; flex-wrap: wrap; margin: 0 -12px; transform: translateY(-20px); transition: 1s;} .mh_sec04 .xans-search-hotkeyword ul li {display: inline-block;} .mh_sec04 .xans-search-hotkeyword ul li a {padding: 0 12px; font-size: 16px; line-height: 32px; font-weight: 400; color: #1a1a1a;} .mh_sec04.open .xans-search-hotkeyword ul {opacity: 1; transform: translateY(0);} #mheader.search .mh_sec04 .xans-layout-searchheader fieldset {width: 100%;} #mheader.search .mh_sec03 .mh_search .search {display: none;} #mheader.search .mh_sec03 .mh_search .close {display: block;} /* 하단 */ #mfooter {position:relative;border:0;padding:120px 0;margin:160px 0 0; background-color: #fff; border-top: 1px solid #ededed;} #mfooter:after, #mfooter:before {display:none;} #mfooter .inner {display: flex; justify-content: space-between;} /* 하단02 : 회사정보 */ #mfooter .mf_info {margin: 40px 0;} #mfooter .mf_info div {display: flex; align-items: center; margin-top: 4px; font-size: 14px; line-height: 24px; font-weight: 400; color: #1a1a1a;} #mfooter .mf_info div > a {display: inline-block; padding: 0 8px; margin-left: 8px; background-color: #f6f6f6;} #mfooter .mf_info div:first-child {margin-top: 0;} /* 하단03 : 운영시간 */ #mfooter .mf_time {margin-bottom: 40px; display: flex; align-items: center; font-size: 14px; line-height: 24px; font-weight: 400; color: #1a1a1a;} #mfooter .mf_time span {color: #8a8a8a;} /* 하단04 : 카피라이트 */ #mfooter .mf_copy {font-size: 14px; line-height: 24px; font-weight: 400; color: #8a8a8a;} /* 하단05 : SNS */ #mfooter .mf_sns {margin-bottom: 48px; font-size: 0; text-align: right;} #mfooter .mf_sns a {display: inline-block; margin-left: 8px;} /* 하단06 : 하단 링크 */ #mfooter .mf_link {display: flex;} #mfooter .mf_link ul {margin-left: 120px; text-align: right;} #mfooter .mf_link ul li {margin-top: 4px;} #mfooter .mf_link ul li:first-child {margin-top: 0;} #mfooter .mf_link ul li a {font-size: 14px; line-height: 24px; font-weight: 400; color: #1a1a1a;} #mfooter .mf_link ul li.privacy a {text-decoration: underline;} /* Fixed SNS */ div.mf_quick {z-index: 101; position: fixed; right: 40px; bottom: 40px; font-size: 0; cursor: pointer;} div.mf_quick img {height: 56px; width: 56px;} div.mf_quick > img {position: relative; z-index: 2; transform: rotate(-45deg); transition: 0.3s;} div.mf_quick ul {z-index: 1; position: absolute; bottom: 0; right: 0; transition: 0.3s;} div.mf_quick ul li {position: absolute; bottom: 0; right: 0; transition: 0.3s;} div.mf_quick ul li a {display: block; width: 56px; height: 56px;} div.mf_quick.open > img {transform: rotate(0);} div.mf_quick.open ul {bottom: 64px;} div.mf_quick.open ul li:first-child {bottom: 64px;} /* 분류 : 상단 */ .xans-product-menupackage .title {margin: 0 0 24px; text-align: center;} .xans-product-menupackage .title .banner img:last-child {margin: 0 0 120px;} .xans-product-menupackage .title h2 {font-size: 32px; line-height: 40px; font-weight: 700; color: #1a1a1a;} /* 분류 : 카테고리 */ .xans-product-menupackage .menuCategory {display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; border: 0; margin-bottom: 120px;} .xans-product-menupackage .menuCategory > li {padding: 0; width: auto; margin: 0;} .xans-product-menupackage .menuCategory > li:not(:first-child) div:before {content:''; display: inline-block; width: 1px; height: 18px; margin: 0 24px; background-color: #ededed;} .xans-product-menupackage .menuCategory li a {position: relative; padding: 12px 0 12px; background: none; font-size: 18px; line-height: 24px; font-weight: 400; color: #bbb; transition: color 0.3s;} .xans-product-menupackage .menuCategory li a:after {content: ''; display: block; width: 0; height: 2px; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); transition: width 0.3s; background-color: #1a1a1a;} .xans-product-menupackage .menuCategory li > div:hover > a, .xans-product-menupackage .menuCategory li.selected > div > a {color: #1a1a1a; font-weight: 600;} .xans-product-menupackage .menuCategory li > div:hover > a:after, .xans-product-menupackage .menuCategory li.selected > div > a:after{width: 100%;} .xans-product-menupackage .menuCategory li .count {margin-left: 4px;} .xans-product-menupackage .menuCategory li > div {display: flex; align-items: center; width: max-content; cursor: pointer;} .xans-product-menupackage .menuCategory li > div > .more {display: none !important; transform: rotate(0deg); transition: transform 0.3s;} .xans-product-menupackage .menuCategory li.Child > div > .more {display: inline-block !important;} .xans-product-menupackage .menuCategory li.Child > div.open > .more {transform: rotate(180deg);} .xans-product-menupackage .menuCategory li .xans-product-children {display: none;} /* 분류 : 진열 방법 */ .xans-product-normalmenu .function {display: flex; justify-content: space-between; align-items: center; padding: 0; margin-bottom: 80px; border-bottom: 0; line-height: 1;} .xans-product-normalmenu .function .prdCount {float: none; font-size: 14px; line-height: 24px font-weight: 400; color: #6a6a6a;} .xans-product-normalmenu .function .prdCount strong {font-weight: 600; color: #1a1a1a;} .xans-product-normalmenu .function .sort #selArray {background-image: url("//haebogi.com/morenvyimg/select.svg"); background-size: 24px 24px; background-position: center right; border-radius: 0px; min-width: 160px; height: auto; padding: 12px 8px 10px; font-size: 14px; line-height: 24px; font-weight: 600; color: #1a1a1a; border: 0; border-bottom: 2px solid #1a1a1a;} /* 분류 : 추천상품, 신상품 */ .list_roll {display: flex; margin-bottom: 120px;} .list_roll .m_titleArea {width: 24%; margin-right: 1%; text-align: left;} .list_roll .m_titleArea .t01 {font-size: 32px; line-height: 40px;} .list_roll .m_titleArea .t02 {margin-top: 8px;} .list_roll .swiper-container {flex: 1;} .list_roll .swiper-container .prdList li .thumbnail .num {z-index: 1; position: absolute; top: 0; left: 0; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 0 0 16px 0; background-color: #bababa; font-size: 16px; line-height: 24px; font-weight: 700; color: #fff;} .list_roll .swiper-container .prdList li:first-child .thumbnail .num {background-color: #1a1a1a;} /* 게시판 : 타이틀 */ div.xans-board-title {margin-bottom: 80px;} div.titleArea {margin: 0 auto 80px; text-align: center;} div.titleArea h2, div.titleArea h2 font {font-size: 32px; line-height: 40px; color: #1a1a1a !important; font-weight: 700;} div.xans-board-title .titleArea p {display: block; margin: 8px 0 0; padding: 0; font-size: 18px; line-height: 28px; font-weight: 400; letter-spacing: -0.02em; color: #8a8a8a;} div.xans-board-title .titleArea p:before {display: none;} div.xans-board-title .imgArea {margin-bottom: 0;} /* 공통 : 타이틀 */ div.m_titleArea {text-align: center; margin-bottom: 80px;} div.m_titleArea .t01 {font-size: 42px; line-height: 56px; font-weight: 700; color: #1a1a1a;} div.m_titleArea .t02 {margin-top: 16px; font-size: 18px; line-height: 28px; letter-spacing: -0.02em; font-weight: 400; color: #8a8a8a;} div.m_titleArea a.more {margin-top: 48px;} /* 공통 : 스와이퍼 스크롤바 */ div.swiper-scrollbar {bottom: 0 !important; left: 0 !important; width: 100% !important; height: 2px !important; border-radius: 0; background-color: #ededed;} div.swiper-scrollbar div.swiper-scrollbar-drag {border-radius: 0; background-color: #1a1a1a;} /* 패스 */ div.path {margin: 24px 0 72px; height: 24px; line-height: 24px;} div.path li {background: url("//haebogi.com/morenvyimg/path.svg") no-repeat 0 center; padding-left: 13px; margin-left: 11px;} div.path li a {font-size: 13px; line-height: 24px; font-weight: 400; color: #8a8a8a;} div.path li.now a {color: #1a1a1a;} /* 상품진열 */ div.ec-base-product {margin: 0;} div.ec-base-product .prdList {width: auto; margin: 0;} div.ec-base-product .prdList > li {margin: 0 0 80px;} div.ec-base-product .prdList .thumbnail {margin: 0 0 24px; } div.ec-base-product .prdList .thumbnail .num {display: none;} div.ec-base-product .prdList .thumbnail .icon {z-index: 1; position: absolute; top: 16px; right: 16px; margin-top: 0; border-bottom: 0;} div.ec-base-product .prdList .thumbnail .icon img {display: block; margin-bottom: 4px;} div.ec-base-product .prdList .thumbnail .prdImg img {width: 100%;} div.ec-base-product .prdList .description {padding: 0 16px;} div.ec-base-product .prdList .description .name {text-align: center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} div.ec-base-product .prdList .description .name a, div.ec-base-product .prdList .description .name span {font-size: 18px !important; font-weight: 500 !important; color: #1a1a1a !important; line-height: 24px; letter-spacing: -0.02em;} div.ec-base-product .prdList .description .spec {margin-top: 8px;} div.ec-base-product .prdList .description .spec li {text-align: center;} div.ec-base-product .prdList .description .spec li[rel="상품요약정보"], div.ec-base-product .prdList .description .spec li[rel="상품 요약설명"] {white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} div.ec-base-product .prdList .description .spec li[rel="상품요약정보"] span, div.ec-base-product .prdList .description .spec li[rel="상품 요약설명"] span {font-size: 15px !important; font-weight: 400 !important; color: #8a8a8a !important; line-height: 24px; letter-spacing: -0.02em;} div.ec-base-product .prdList .description .spec .msale span {font-size: 20px !important; font-weight: 700 !important; color: #1a1a1a !important; line-height: 24px;} div.ec-base-product .prdList .description .spec .through span {font-size: 14px !important; font-weight: 400 !important; color: #a8a8a8 !important; line-height: 20px; text-decoration: line-through;} div.ec-base-product .prdList .description .spec .msale, div.ec-base-product .prdList .description .spec .through {display: inline-block; margin-top: 16px;} div.ec-base-product .prdList .description .spec .through {margin-left: 8px;} div.ec-base-product .prdList .description .spec li[rel="할인 기간"] {display: none;} /* 상품진열 기간할인 */ div.ec-base-product .prdList .thumbnail .timesale_box {display: none; position: absolute; bottom: 16px; left: 0; width: 100%;} div.ec-base-product .prdList .thumbnail .timesale_box .untilStart, div.ec-base-product .prdList .thumbnail .timesale_box .untilEnd{display: flex; align-items: center; justify-content: center; flex-wrap: wrap; background-color: #fff; border: 1px solid #e5e5e5; border-radius: 24px; padding: 10px 16px; font-size: 14px; line-height: 24px; letter-spacing: -0.02em; font-weight: 500; color: #1a1a1a; width: max-content; max-width: calc(100% - 32px); box-sizing: border-box; margin: 0 auto;} div.ec-base-product .prdList .thumbnail .timesale_box .untilStart span, div.ec-base-product .prdList .thumbnail .timesale_box .untilEnd span {display: flex; align-items: center; justify-content: center; margin: 2px 12px; padding: 5px 4px; min-width: 24px; min-height: 24px; box-sizing: border-box; line-height: 14px; background-color: #f1f1f1; border-radius: 4px;} /* 상품진열 상품색상 */ div.ec-base-product .prdList .description .spec li[rel="상품색상"] {font-size: 0; line-height: 1;} div.ec-base-product .prdList .description .spec li .color {margin-top: 24px;} div.ec-base-product .prdList .description .spec li .chips {width:12px;height:12px;border-radius:50%; box-sizing: border-box; border: 1px solid #ededed; margin: 0 4px;} /* 상품진열 좋아요 */ .ec-base-product .prdList .thumbnail .likeButton {opacity: 0; margin-top: -10px; z-index: 1; position: absolute; top: 16px; left: 50%; transform: translateX(-50%); padding: 4px 16px; border: 1px solid #ededed; box-sizing: border-box; border-radius: 16px; background-color: #fff; transition: margin-top 0.3s, opacity 0.3s;} .ec-base-product .prdList > li:hover .thumbnail .likeButton {opacity: 1; margin-top: 0;} .ec-base-product .prdList .thumbnail .likeButton::before {content: 'LIKE '; font-size: 12px; line-height: 16px; font-weight: 400; color: #1a1a1a;} .ec-base-product .prdList .thumbnail .likeButton button {background:transparent;outline:none;} .ec-base-product .prdList .thumbnail .likeButton img {display:none;} .ec-base-product .prdList .thumbnail .likeButton strong {font-size: 12px; line-height: 16px; font-weight: 700; color: #1a1a1a; font-family: 'Red Hat Display','Pretendard',sans-serif;} .ec-base-product .prdList .thumbnail .likeButton.selected {} /* 상품진열 옵션미리보기 */ .ec-base-product .prdList .xans-product-optionpreview .prdOption {margin:0;width:100%;left:0;top:55px;display:block;z-index:12;} .ec-base-product .prdList .xans-product-optionpreview .prdOption img {width:auto;} .ec-base-product .prdList .xans-product-optionpreview .prdOption .ico {display:none;} .ec-base-product .prdList .xans-product-optionpreview .prdOption .inner {border:1px solid #d6d6d6;overflow-y:auto;max-height:160px;padding:14px 24px 14px;} .ec-base-product .prdList .xans-product-optionpreview .prdOption .close {right:26px;} /* 상품진열 퀵메뉴 */ .ec-base-product ul .pro_icon {opacity: 0; width:100%; position:absolute; z-index:6; bottom: -10px; left: 0; display: flex; background: rgba(255, 255, 255, 0.5); backdrop-filter: blur(4px); transition: 0.3s;} .ec-base-product ul .pro_icon > span {flex:1; display: flex; align-items: center; justify-content: center;} .ec-base-product ul .pro_icon > span:before {content: ''; display: inline-block; width: 1px; height: 24px; margin: 16px 0; background-color: #e5e5e5;} .ec-base-product ul .pro_icon > span:first-child:before {display: none;} .ec-base-product ul .pro_icon > span img {margin: 0 auto;} .ec-base-product ul .pro_icon > span:hover img {opacity:0.8;} .ec-base-product ul > li:hover .pro_icon {bottom:0; opacity:1;cursor:pointer;} /* 상품진열 할인율 */ .ec-base-product .prdList .sale_box {display: inline-block; margin-right: 8px; font-size: 20px; line-height: 24px; font-weight: 700; color: #ff4800;} /* 상품진열 품절 */ .ec-base-product .prdList .soldout_icon {display:none;} .ec-base-product .prdList .soldout_icon.on {width:88px;height:88px;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%); display:flex;justify-content:center;align-items:center;border-radius:50%; background:rgba(0,0,0,0.5);font-size:12px;font-weight:700;line-height:1;color:#fff; backdrop-filter: blur(4px);} /* 3단진열 상품 스타일 */ .ec-base-product ul.grid3 {margin:0 -0.75%; text-align: left;} .ec-base-product ul.grid3 > li {/*max-width:390px;*/width:31.83%;margin-left:0.75%;margin-right:0.75%;} /* 4단진열 상품 스타일 */ .ec-base-product ul.grid4 {margin:0 -0.75%;} .ec-base-product ul.grid4 > li {/*max-width:290px;*/width:23.5%;margin-left:0.75%;margin-right:0.75%;} /* 장바구니 팝업 */ div#capp-shop-new-product-optionselect-layer {width: 600px !important; position: fixed !important; top: 50% !important; left: 50% !important; margin: 0 !important; transform: translate(-50%, -50%);} @charset "UTF-8"; /*! Animate.css - http://daneden.me/animate Licensed under the MIT license Copyright (c) 2013 Daniel Eden Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */ .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated.hinge { -webkit-animation-duration: 2s; animation-duration: 2s; } @-webkit-keyframes bounce { 0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); transform: translateY(0); } 40% { -webkit-transform: translateY(-30px); transform: translateY(-30px); } 60% { -webkit-transform: translateY(-15px); transform: translateY(-15px); } } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 40% { -webkit-transform: translateY(-30px); -ms-transform: translateY(-30px); transform: translateY(-30px); } 60% { -webkit-transform: translateY(-15px); -ms-transform: translateY(-15px); transform: translateY(-15px); } } .bounce { -webkit-animation-name: bounce; animation-name: bounce; } @-webkit-keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } @keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } .flash { -webkit-animation-name: flash; animation-name: flash; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes pulse { 0% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.1); transform: scale(1.1); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes pulse { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } 100% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } .pulse { -webkit-animation-name: pulse; animation-name: pulse; } @-webkit-keyframes shake { 0%, 100% { -webkit-transform: translateX(0); transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translateX(-10px); transform: translateX(-10px); } 20%, 40%, 60%, 80% { -webkit-transform: translateX(10px); transform: translateX(10px); } } @keyframes shake { 0%, 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translateX(-10px); -ms-transform: translateX(-10px); transform: translateX(-10px); } 20%, 40%, 60%, 80% { -webkit-transform: translateX(10px); -ms-transform: translateX(10px); transform: translateX(10px); } } .shake { -webkit-animation-name: shake; animation-name: shake; } @-webkit-keyframes swing { 20% { -webkit-transform: rotate(15deg); transform: rotate(15deg); } 40% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 60% { -webkit-transform: rotate(5deg); transform: rotate(5deg); } 80% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg); } 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @keyframes swing { 20% { -webkit-transform: rotate(15deg); -ms-transform: rotate(15deg); transform: rotate(15deg); } 40% { -webkit-transform: rotate(-10deg); -ms-transform: rotate(-10deg); transform: rotate(-10deg); } 60% { -webkit-transform: rotate(5deg); -ms-transform: rotate(5deg); transform: rotate(5deg); } 80% { -webkit-transform: rotate(-5deg); -ms-transform: rotate(-5deg); transform: rotate(-5deg); } 100% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } } .swing { -webkit-transform-origin: top center; -ms-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; animation-name: swing; } @-webkit-keyframes tada { 0% { -webkit-transform: scale(1); transform: scale(1); } 10%, 20% { -webkit-transform: scale(0.9) rotate(-3deg); transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale(1.1) rotate(3deg); transform: scale(1.1) rotate(3deg); } 40%, 60%, 80% { -webkit-transform: scale(1.1) rotate(-3deg); transform: scale(1.1) rotate(-3deg); } 100% { -webkit-transform: scale(1) rotate(0); transform: scale(1) rotate(0); } } @keyframes tada { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 10%, 20% { -webkit-transform: scale(0.9) rotate(-3deg); -ms-transform: scale(0.9) rotate(-3deg); transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale(1.1) rotate(3deg); -ms-transform: scale(1.1) rotate(3deg); transform: scale(1.1) rotate(3deg); } 40%, 60%, 80% { -webkit-transform: scale(1.1) rotate(-3deg); -ms-transform: scale(1.1) rotate(-3deg); transform: scale(1.1) rotate(-3deg); } 100% { -webkit-transform: scale(1) rotate(0); -ms-transform: scale(1) rotate(0); transform: scale(1) rotate(0); } } .tada { -webkit-animation-name: tada; animation-name: tada; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes wobble { 0% { -webkit-transform: translateX(0%); transform: translateX(0%); } 15% { -webkit-transform: translateX(-25%) rotate(-5deg); transform: translateX(-25%) rotate(-5deg); } 30% { -webkit-transform: translateX(20%) rotate(3deg); transform: translateX(20%) rotate(3deg); } 45% { -webkit-transform: translateX(-15%) rotate(-3deg); transform: translateX(-15%) rotate(-3deg); } 60% { -webkit-transform: translateX(10%) rotate(2deg); transform: translateX(10%) rotate(2deg); } 75% { -webkit-transform: translateX(-5%) rotate(-1deg); transform: translateX(-5%) rotate(-1deg); } 100% { -webkit-transform: translateX(0%); transform: translateX(0%); } } @keyframes wobble { 0% { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } 15% { -webkit-transform: translateX(-25%) rotate(-5deg); -ms-transform: translateX(-25%) rotate(-5deg); transform: translateX(-25%) rotate(-5deg); } 30% { -webkit-transform: translateX(20%) rotate(3deg); -ms-transform: translateX(20%) rotate(3deg); transform: translateX(20%) rotate(3deg); } 45% { -webkit-transform: translateX(-15%) rotate(-3deg); -ms-transform: translateX(-15%) rotate(-3deg); transform: translateX(-15%) rotate(-3deg); } 60% { -webkit-transform: translateX(10%) rotate(2deg); -ms-transform: translateX(10%) rotate(2deg); transform: translateX(10%) rotate(2deg); } 75% { -webkit-transform: translateX(-5%) rotate(-1deg); -ms-transform: translateX(-5%) rotate(-1deg); transform: translateX(-5%) rotate(-1deg); } 100% { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } } .wobble { -webkit-animation-name: wobble; animation-name: wobble; } @-webkit-keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(.3); transform: scale(.3); } 50% { opacity: 1; -webkit-transform: scale(1.05); transform: scale(1.05); } 70% { -webkit-transform: scale(.9); transform: scale(.9); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(.3); -ms-transform: scale(.3); transform: scale(.3); } 50% { opacity: 1; -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } 70% { -webkit-transform: scale(.9); -ms-transform: scale(.9); transform: scale(.9); } 100% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } .bounceIn { -webkit-animation-name: bounceIn; animation-name: bounceIn; } @-webkit-keyframes bounceInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } 60% { opacity: 1; -webkit-transform: translateY(30px); transform: translateY(30px); } 80% { -webkit-transform: translateY(-10px); transform: translateY(-10px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes bounceInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } 60% { opacity: 1; -webkit-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px); } 80% { -webkit-transform: translateY(-10px); -ms-transform: translateY(-10px); transform: translateY(-10px); } 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .bounceInDown { -webkit-animation-name: bounceInDown; animation-name: bounceInDown; } @-webkit-keyframes bounceInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } 60% { opacity: 1; -webkit-transform: translateX(30px); transform: translateX(30px); } 80% { -webkit-transform: translateX(-10px); transform: translateX(-10px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes bounceInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } 60% { opacity: 1; -webkit-transform: translateX(30px); -ms-transform: translateX(30px); transform: translateX(30px); } 80% { -webkit-transform: translateX(-10px); -ms-transform: translateX(-10px); transform: translateX(-10px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .bounceInLeft { -webkit-animation-name: bounceInLeft; animation-name: bounceInLeft; } @-webkit-keyframes bounceInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } 60% { opacity: 1; -webkit-transform: translateX(-30px); transform: translateX(-30px); } 80% { -webkit-transform: translateX(10px); transform: translateX(10px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes bounceInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } 60% { opacity: 1; -webkit-transform: translateX(-30px); -ms-transform: translateX(-30px); transform: translateX(-30px); } 80% { -webkit-transform: translateX(10px); -ms-transform: translateX(10px); transform: translateX(10px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .bounceInRight { -webkit-animation-name: bounceInRight; animation-name: bounceInRight; } @-webkit-keyframes bounceInUp { 0% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px); } 60% { opacity: 1; -webkit-transform: translateY(-30px); transform: translateY(-30px); } 80% { -webkit-transform: translateY(10px); transform: translateY(10px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes bounceInUp { 0% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); } 60% { opacity: 1; -webkit-transform: translateY(-30px); -ms-transform: translateY(-30px); transform: translateY(-30px); } 80% { -webkit-transform: translateY(10px); -ms-transform: translateY(10px); transform: translateY(10px); } 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .bounceInUp { -webkit-animation-name: bounceInUp; animation-name: bounceInUp; } @-webkit-keyframes bounceOut { 0% { -webkit-transform: scale(1); transform: scale(1); } 25% { -webkit-transform: scale(.95); transform: scale(.95); } 50% { opacity: 1; -webkit-transform: scale(1.1); transform: scale(1.1); } 100% { opacity: 0; -webkit-transform: scale(.3); transform: scale(.3); } } @keyframes bounceOut { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 25% { -webkit-transform: scale(.95); -ms-transform: scale(.95); transform: scale(.95); } 50% { opacity: 1; -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } 100% { opacity: 0; -webkit-transform: scale(.3); -ms-transform: scale(.3); transform: scale(.3); } } .bounceOut { -webkit-animation-name: bounceOut; animation-name: bounceOut; } @-webkit-keyframes bounceOutDown { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px); } } @keyframes bounceOutDown { 0% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); } } .bounceOutDown { -webkit-animation-name: bounceOutDown; animation-name: bounceOutDown; } @-webkit-keyframes bounceOutLeft { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } } @keyframes bounceOutLeft { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } } .bounceOutLeft { -webkit-animation-name: bounceOutLeft; animation-name: bounceOutLeft; } @-webkit-keyframes bounceOutRight { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } } @keyframes bounceOutRight { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } } .bounceOutRight { -webkit-animation-name: bounceOutRight; animation-name: bounceOutRight; } @-webkit-keyframes bounceOutUp { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } } @keyframes bounceOutUp { 0% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } } .bounceOutUp { -webkit-animation-name: bounceOutUp; animation-name: bounceOutUp; } @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } @-webkit-keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .fadeInDownBig { -webkit-animation-name: fadeInDownBig; animation-name: fadeInDownBig; } @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; } @-webkit-keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig; } @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; } @-webkit-keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .fadeInRightBig { -webkit-animation-name: fadeInRightBig; animation-name: fadeInRightBig; } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(100px); -ms-transform: translateY(100px); transform: translateY(100px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } @-webkit-keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .fadeInUpBig { -webkit-animation-name: fadeInUpBig; animation-name: fadeInUpBig; } @-webkit-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } .fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut; } @-webkit-keyframes fadeOutDown { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px); } } @keyframes fadeOutDown { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); } } .fadeOutDown { -webkit-animation-name: fadeOutDown; animation-name: fadeOutDown; } @-webkit-keyframes fadeOutDownBig { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px); } } @keyframes fadeOutDownBig { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); } } .fadeOutDownBig { -webkit-animation-name: fadeOutDownBig; animation-name: fadeOutDownBig; } @-webkit-keyframes fadeOutLeft { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-20px); transform: translateX(-20px); } } @keyframes fadeOutLeft { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px); } } .fadeOutLeft { -webkit-animation-name: fadeOutLeft; animation-name: fadeOutLeft; } @-webkit-keyframes fadeOutLeftBig { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } } @keyframes fadeOutLeftBig { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } } .fadeOutLeftBig { -webkit-animation-name: fadeOutLeftBig; animation-name: fadeOutLeftBig; } @-webkit-keyframes fadeOutRight { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(20px); transform: translateX(20px); } } @keyframes fadeOutRight { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); } } .fadeOutRight { -webkit-animation-name: fadeOutRight; animation-name: fadeOutRight; } @-webkit-keyframes fadeOutRightBig { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } } @keyframes fadeOutRightBig { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } } .fadeOutRightBig { -webkit-animation-name: fadeOutRightBig; animation-name: fadeOutRightBig; } @-webkit-keyframes fadeOutUp { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-20px); transform: translateY(-20px); } } @keyframes fadeOutUp { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); } } .fadeOutUp { -webkit-animation-name: fadeOutUp; animation-name: fadeOutUp; } @-webkit-keyframes fadeOutUpBig { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } } @keyframes fadeOutUpBig { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } } .fadeOutUpBig { -webkit-animation-name: fadeOutUpBig; animation-name: fadeOutUpBig; } @-webkit-keyframes flip { 0% { -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); transform: perspective(400px) translateZ(0) rotateY(0) scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } @keyframes flip { 0% { -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); -ms-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); transform: perspective(400px) translateZ(0) rotateY(0) scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); -ms-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } .animated.flip { -webkit-backface-visibility: visible; -ms-backface-visibility: visible; backface-visibility: visible; -webkit-animation-name: flip; animation-name: flip; } @-webkit-keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateX(-10deg); transform: perspective(400px) rotateX(-10deg); } 70% { -webkit-transform: perspective(400px) rotateX(10deg); transform: perspective(400px) rotateX(10deg); } 100% { -webkit-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1; } } @keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotateX(90deg); -ms-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateX(-10deg); -ms-transform: perspective(400px) rotateX(-10deg); transform: perspective(400px) rotateX(-10deg); } 70% { -webkit-transform: perspective(400px) rotateX(10deg); -ms-transform: perspective(400px) rotateX(10deg); transform: perspective(400px) rotateX(10deg); } 100% { -webkit-transform: perspective(400px) rotateX(0deg); -ms-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1; } } .flipInX { -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInX; animation-name: flipInX; } @-webkit-keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateY(-10deg); transform: perspective(400px) rotateY(-10deg); } 70% { -webkit-transform: perspective(400px) rotateY(10deg); transform: perspective(400px) rotateY(10deg); } 100% { -webkit-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); opacity: 1; } } @keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotateY(90deg); -ms-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateY(-10deg); -ms-transform: perspective(400px) rotateY(-10deg); transform: perspective(400px) rotateY(-10deg); } 70% { -webkit-transform: perspective(400px) rotateY(10deg); -ms-transform: perspective(400px) rotateY(10deg); transform: perspective(400px) rotateY(10deg); } 100% { -webkit-transform: perspective(400px) rotateY(0deg); -ms-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); opacity: 1; } } .flipInY { -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInY; animation-name: flipInY; } @-webkit-keyframes flipOutX { 0% { -webkit-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } } @keyframes flipOutX { 0% { -webkit-transform: perspective(400px) rotateX(0deg); -ms-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateX(90deg); -ms-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } } .flipOutX { -webkit-animation-name: flipOutX; animation-name: flipOutX; -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; backface-visibility: visible !important; } @-webkit-keyframes flipOutY { 0% { -webkit-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } } @keyframes flipOutY { 0% { -webkit-transform: perspective(400px) rotateY(0deg); -ms-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateY(90deg); -ms-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } } .flipOutY { -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipOutY; animation-name: flipOutY; } @-webkit-keyframes lightSpeedIn { 0% { -webkit-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: translateX(-20%) skewX(30deg); transform: translateX(-20%) skewX(30deg); opacity: 1; } 80% { -webkit-transform: translateX(0%) skewX(-15deg); transform: translateX(0%) skewX(-15deg); opacity: 1; } 100% { -webkit-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); opacity: 1; } } @keyframes lightSpeedIn { 0% { -webkit-transform: translateX(100%) skewX(-30deg); -ms-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: translateX(-20%) skewX(30deg); -ms-transform: translateX(-20%) skewX(30deg); transform: translateX(-20%) skewX(30deg); opacity: 1; } 80% { -webkit-transform: translateX(0%) skewX(-15deg); -ms-transform: translateX(0%) skewX(-15deg); transform: translateX(0%) skewX(-15deg); opacity: 1; } 100% { -webkit-transform: translateX(0%) skewX(0deg); -ms-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); opacity: 1; } } .lightSpeedIn { -webkit-animation-name: lightSpeedIn; animation-name: lightSpeedIn; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } @-webkit-keyframes lightSpeedOut { 0% { -webkit-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); opacity: 1; } 100% { -webkit-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); opacity: 0; } } @keyframes lightSpeedOut { 0% { -webkit-transform: translateX(0%) skewX(0deg); -ms-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); opacity: 1; } 100% { -webkit-transform: translateX(100%) skewX(-30deg); -ms-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); opacity: 0; } } .lightSpeedOut { -webkit-animation-name: lightSpeedOut; animation-name: lightSpeedOut; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } @-webkit-keyframes rotateIn { 0% { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(-200deg); transform: rotate(-200deg); opacity: 0; } 100% { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } @keyframes rotateIn { 0% { -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(-200deg); -ms-transform: rotate(-200deg); transform: rotate(-200deg); opacity: 0; } 100% { -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } } .rotateIn { -webkit-animation-name: rotateIn; animation-name: rotateIn; } @-webkit-keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } @keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } } .rotateInDownLeft { -webkit-animation-name: rotateInDownLeft; animation-name: rotateInDownLeft; } @-webkit-keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } @keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } } .rotateInDownRight { -webkit-animation-name: rotateInDownRight; animation-name: rotateInDownRight; } @-webkit-keyframes rotateInUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } @keyframes rotateInUpLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } } .rotateInUpLeft { -webkit-animation-name: rotateInUpLeft; animation-name: rotateInUpLeft; } @-webkit-keyframes rotateInUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } @keyframes rotateInUpRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } } .rotateInUpRight { -webkit-animation-name: rotateInUpRight; animation-name: rotateInUpRight; } @-webkit-keyframes rotateOut { 0% { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(200deg); transform: rotate(200deg); opacity: 0; } } @keyframes rotateOut { 0% { -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(200deg); -ms-transform: rotate(200deg); transform: rotate(200deg); opacity: 0; } } .rotateOut { -webkit-animation-name: rotateOut; animation-name: rotateOut; } @-webkit-keyframes rotateOutDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } } @keyframes rotateOutDownLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } } .rotateOutDownLeft { -webkit-animation-name: rotateOutDownLeft; animation-name: rotateOutDownLeft; } @-webkit-keyframes rotateOutDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } } @keyframes rotateOutDownRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } } .rotateOutDownRight { -webkit-animation-name: rotateOutDownRight; animation-name: rotateOutDownRight; } @-webkit-keyframes rotateOutUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } } @keyframes rotateOutUpLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } } .rotateOutUpLeft { -webkit-animation-name: rotateOutUpLeft; animation-name: rotateOutUpLeft; } @-webkit-keyframes rotateOutUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } } @keyframes rotateOutUpRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } } .rotateOutUpRight { -webkit-animation-name: rotateOutUpRight; animation-name: rotateOutUpRight; } @-webkit-keyframes slideInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes slideInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .slideInDown { -webkit-animation-name: slideInDown; animation-name: slideInDown; } @-webkit-keyframes slideInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes slideInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .slideInLeft { -webkit-animation-name: slideInLeft; animation-name: slideInLeft; } @-webkit-keyframes slideInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes slideInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .slideInRight { -webkit-animation-name: slideInRight; animation-name: slideInRight; } @-webkit-keyframes slideOutLeft { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } } @keyframes slideOutLeft { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } } .slideOutLeft { -webkit-animation-name: slideOutLeft; animation-name: slideOutLeft; } @-webkit-keyframes slideOutRight { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } } @keyframes slideOutRight { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } } .slideOutRight { -webkit-animation-name: slideOutRight; animation-name: slideOutRight; } @-webkit-keyframes slideOutUp { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } } @keyframes slideOutUp { 0% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } } .slideOutUp { -webkit-animation-name: slideOutUp; animation-name: slideOutUp; } @-webkit-keyframes hinge { 0% { -webkit-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate(80deg); transform: rotate(80deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40% { -webkit-transform: rotate(60deg); transform: rotate(60deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 80% { -webkit-transform: rotate(60deg) translateY(0); transform: rotate(60deg) translateY(0); opacity: 1; -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 100% { -webkit-transform: translateY(700px); transform: translateY(700px); opacity: 0; } } @keyframes hinge { 0% { -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate(80deg); -ms-transform: rotate(80deg); transform: rotate(80deg); -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40% { -webkit-transform: rotate(60deg); -ms-transform: rotate(60deg); transform: rotate(60deg); -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 80% { -webkit-transform: rotate(60deg) translateY(0); -ms-transform: rotate(60deg) translateY(0); transform: rotate(60deg) translateY(0); opacity: 1; -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 100% { -webkit-transform: translateY(700px); -ms-transform: translateY(700px); transform: translateY(700px); opacity: 0; } } .hinge { -webkit-animation-name: hinge; animation-name: hinge; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes rollIn { 0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } } @keyframes rollIn { 0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); -ms-transform: translateX(-100%) rotate(-120deg); transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); -ms-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } } .rollIn { -webkit-animation-name: rollIn; animation-name: rollIn; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes rollOut { 0% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } 100% { opacity: 0; -webkit-transform: translateX(100%) rotate(120deg); transform: translateX(100%) rotate(120deg); } } @keyframes rollOut { 0% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); -ms-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } 100% { opacity: 0; -webkit-transform: translateX(100%) rotate(120deg); -ms-transform: translateX(100%) rotate(120deg); transform: translateX(100%) rotate(120deg); } } .rollOut { -webkit-animation-name: rollOut; animation-name: rollOut; } .xans-layout-searchheader { float:right; margin:-50px 0 0; } .xans-layout-searchheader fieldset { border:1px solid #d9d9d9; border-radius:2px; } .xans-layout-searchheader #keyword { width:143px; height:32px; padding:0 0 0 9px; border:0; line-height:32px; font-size:12px; color:#7c8389; background:#fff; } .xans-layout-searchheader fieldset .autoDrop { display:none; border:1px solid #565960; position:absolute; width: 187px; text-align:left; background:#fff; z-index:20; overflow:hidden; overflow-y:auto; max-height:100px;} .xans-layout-searchheader fieldset .autoDrop li a { display:block; padding:6px 10px; font-size:11px; color:#1c1c1c; font-family:GulimChe,Gulim; } .xans-layout-searchheader fieldset .autoDrop li a:hover, .xans-layout-searchheader fieldset .autoDrop li.selected a { text-decoration:none; color:#fff; background:#a1a4ae; } /* reset */ li { list-style:none; } table { width:100%; border:0; border-spacing:0; border-collapse:collapse; } caption { display:none; } h1, h3 { margin:0; } /* common */ .ec-base-layer { position:absolute; z-index:100; border:1px solid #757575; background:#fff; } .ec-base-layer .header { padding:7px 35px 7px 19px; color:#fff; background:#495164; } .ec-base-layer .header > h1, .ec-base-layer .header > h3 { font-size:14px; line-height:1.5; } .ec-base-layer .content { padding:20px; font-size:12px; } .ec-base-layer div.ec-base-help { margin-top:0; } .ec-base-layer .ec-base-button { padding:9px; border-top:1px solid #d7d5d5; text-align:center; background:#fbfafa; } .ec-base-layer .close { position:absolute; right:0; top:0; padding:11px 20px; cursor:pointer; } /* popup */ #popup .ec-base-layer { position:relative; border:0; } #popup .ec-base-layer .header { padding:12px 35px 12px 19px; } #popup .ec-base-layer .close { top:5px; } /* ec-base-table */ .ec-base-layer .content > .ec-base-table table:first-child { margin-top:0; } .ec-base-layer .ec-base-table table { line-height:1.4; } .ec-base-layer .ec-base-table thead th { padding:9px 0 8px; } .ec-base-layer .ec-base-table tbody th { padding:9px 0 8px 10px; } .ec-base-layer .ec-base-table td { padding:9px 10px 8px; } /* horizontal - typeWrite */ .ec-base-layer .ec-base-table.typeWrite td { padding:5px 10px 4px; } /* vertical - typeList */ .ec-base-layer .ec-base-table.typeList tfoot td { padding:10px 10px 12px; } /* typeBorder */ .ec-base-layer .ec-base-table.typeBorder tfoot td { padding:10px 10px 12px; } /* address */ .ec-base-layer .ec-base-table .ec-address { margin:-6px -10px -4px; } .ec-base-layer .ec-base-table .ec-address > li { padding:5px 10px 4px; } .xans-layout-multishopshipping { display:none; } .xans-layout-multishopshipping .worldshipLayer { top:303px; left:50%; width:448px; margin:0 0 0 -225px; } .xans-layout-multishopshipping .worldshipLayer .content { padding:153px 20px 30px; line-height:1.8; background:url("//img.echosting.cafe24.com/skin/base/link/bg_worldship.gif") center 21px no-repeat; } .xans-layout-multishopshipping .worldshipLayer .content .desc { display:block; margin:4px 0 14px; } .xans-layout-multishopshipping .worldshipLayer .select { margin:10px 0 0; } .xans-layout-multishopshipping .worldshipLayer .select select { width:100%; } .xans-layout-conversionpc { background:#fff; padding:45px; text-align:center; } .xans-layout-conversionpc a { margin:20px; padding:20px 40px 20px 110px; font-size:68px; color:#63666e; text-decoration:none; text-align:center; border:4px solid #9d9db0; border-radius:10px; background:url("//img.echosting.cafe24.com/skin/base/layout/ico_mobile.png") no-repeat 40px 50%; }