/*=====Header=====*/ header {background: #f05b73;} hr.header-clear {display: block; height: 153px; clear: both;} @media (max-width: 767px) { hr.header-clear {height: 60px;} .mb_no_table { display: none; } } /*=====Header=====*/ .no_list_area { text-align: center; line-height: 100px; font-size: 16px; width: 100% !important; } /******search.html******/ /*=====search bar=====*/ #search-bar {border-bottom: 1px solid #e4e4e4; z-index: 10;} #search-bar > div.container.on {overflow: visible;} #search-bar > div.container > a {display: none;} #search-bar > div.container > span {display: none;} #search-bar > div.container > form > div.filter {position: relative; padding: 9px 0;} #search-bar > div.container > form > div.filter > div.filter-inputbox {position: relative; display: inline-block; width: 255px; vertical-align: middle; background: #fff; border-right: 1px solid #dadcdd;} #search-bar > div.container > form > div.filter > div.filter-inputbox:first-child {border-left: 1px solid #dadcdd;} #search-bar > div.container > form > div.filter > div.filter-inputbox:last-child {border: 0;} #search-bar > div.container > form > div.filter > div.filter-inputbox > a > input {height: 20px; border: 0; padding: 0 51px 0 56px; font-size: 16px; text-indent: 0; background: #fff; cursor: pointer;} #search-bar > div.container > form > div.filter > div.filter-inputbox > a > input::-webkit-input-placeholder {font-size: 16px; color: #000;} #search-bar > div.container > form > div.filter > div.filter-inputbox > a > span.filter-label {display: block; padding: 0 51px 0 56px; font-size: 16px; color: #000;} #search-bar > div.container > form > div.filter > div.filter-inputbox > a > i.icon-bullet-down {position: absolute; width: 11px; height: 7px; top: 50%; right: 20px; transform: translateY(-50%); background: url('../img/icon/bullet_down.png') no-repeat center/cover;} #search-bar > div.container > form > div.filter > div.filter-inputbox > a > i.icon-calendar {position: absolute; width: 16px; height: 16px; top: 50%; left: 20px; transform: translateY(-50%); background: url('../img/icon/calendar.png') no-repeat center/cover;} #search-bar > div.container > form > div.filter > div.filter-inputbox > a > i.icon-pin {position: absolute; width: 14px; height: 20px; top: 50%; left: 20px; transform: translateY(-50%); background: url('../img/icon/pin.png') no-repeat center/cover;} #search-bar > div.container > form > div.filter > div.filter-inputbox > a > i.icon-grid {position: absolute; width: 16px; height: 16px; top: 50%; left: 20px; transform: translateY(-50%); background: url('../img/icon/grid.png') no-repeat center/cover;} #search-bar > div.container > form > div.filter > div.filter-inputbox.keyword {width: 350px; margin-left: 20px; padding: 0 62px 0 20px; background: #f4f4f4; border-radius: 50px;} #search-bar > div.container > form > div.filter > div.filter-inputbox.keyword > input {width: 100%; height: 42px; line-height: 42px; background: transparent; font-size: 18px; } #search-bar > div.container > form > div.filter > div.filter-inputbox.keyword > a.filter-submit {position: absolute; top: 0; right: 0; width: 42px; height: 42px;} div.filter-content {position: absolute; z-index: 1000; width: max-content;background: #fff; padding: 10px 25px; border: 1px solid #e4e4e4; display: none;} div.filter-content > ul.filter-checkbox {position: relative; overflow: hidden; margin-bottom: 10px; border-bottom: 1px solid #e4e4e4;} div.filter-content > ul.filter-checkbox > li.checkbox {float: left;; text-align: center; margin-bottom: 10px;} div.filter-content > ul.filter-checkbox > li.checkbox:nth-child(9n) {clear: both;} div.filter-content > ul.filter-checkbox > span {display: block; clear: both; text-align: right; font-size: 16px;color: #848484; margin-bottom: 10px;} div.place-content > ul.filter-checkbox > li.checkbox > label {padding: 8px 10px; font-size: 16px; line-height: 40px; text-align: center; background: #fff; color: #848484;} div.place-content > ul.filter-checkbox > li.checkbox > input:checked + label {background: #f05a72; color: #fff;} div.service-content > ul.filter-checkbox > li.checkbox {margin: 0 10px 10px;} div.service-content > ul.filter-checkbox > li.checkbox > label {display: block; width: 70px; height: 70px; line-height: 66px; background: #e4e4e4; border: 1px solid rgba(255,255,255,0.2); border-radius: 100px;} div.service-content > ul.filter-checkbox > li.checkbox > input:checked + label {background: #f05b73;} div.service-content > ul.filter-checkbox > li.checkbox > span {display: block; margin-top: 15px; font-size: 16px; color: #848484;} div.filter-content > a.filter-content-close {float: right; font-size: 16px;} @media (max-width: 767px) { #search-bar > div.container {overflow: hidden; padding: 10px;} #search-bar > div.container > a {display: block; float: right; width: 22px; height: 22px; padding: 3px; margin-left: 8px;} #search-bar > div.container > span {display: inline-block; font-size: 16px;} #search-bar > div.container > a > img {display: block; height: 100%; margin: 0 auto;} #search-bar > div.container > form > div.filter {clear: both; height: 0; padding: 0;} #search-bar > div.container > form > div.filter.on {height: 100%;} #search-bar > div.container > form > div.filter > div.filter-inputbox {width: 100%; border: 0; margin: 10px 0;} #search-bar > div.container > form > div.filter > div.filter-inputbox:first-child {border: 0;} #search-bar > div.container > form > div.filter > div.filter-inputbox.keyword {width: calc(100% - 40px); margin: 10px 20px;} div.filter-content {width: 100%;} div.filter-content > ul.filter-checkbox > li.checkbox:nth-child(9n) {clear: none;} } /*=====search bar=====*/ /*=====search result=====*/ #search-result {height: calc(100% - 215px)} #search-result > div.container {max-width: 100%; width: 100%; height: 100%;} #search-result > div.container > div {position: relative; overflow: hidden; width: 50%; float: left; height: 100%;} #search-result > div.container > div.list {border-right: 1px solid #e4e4e4;} #search-result > div.container > div.list > ul {width: 600px; float: right; height: 100%; overflow-y: scroll;} #search-result > div.container > div.list > ul > li {position: relative; overflow: hidden; padding: 25px 60px 25px 0;} #search-result > div.container > div.list > ul > li > a > div.item-thumbnail { float: left; margin-right: 20px; width: 200px; padding-bottom: 25%; background-repeat: no-repeat; background-size: cover; background-position: center center; background-color: #e8e8e8; } #search-result > div.container > div.list > ul > li > a > ul.item-description {padding-left: 200px;} #search-result > div.container > div.list > ul > li > a > ul.item-description > li > span.item-title {font-size: 25px; font-weight: bold; line-height: 37px; color: #000;} #search-result > div.container > div.list > ul > li > a > ul.item-description > li > span.item-range {position: relative; padding-left: 22px; font-size: 16px; line-height: 37px; color: #000; float: right;} #search-result > div.container > div.list > ul > li > a > ul.item-description > li > span.item-range > i.icon-pin {position: absolute; width: 14px; height: 20px; top: 50%; left: 0px; transform: translateY(-50%); background: url('../img/icon/pin.png') no-repeat center/cover;} #search-result > div.container > div.list > ul > li > a > ul.item-description > li > span.item-rating {float: left; line-height: 33px; margin-right: 20px;} #search-result > div.container > div.list > ul > li > a > ul.item-description > li > span.item-review {font-size: 16px; color: #848484; line-height: 33px;} #search-result > div.container > div.list > ul > li > a > ul.item-description > li > span.item-addr {font-size: 16px; color: #848484; line-height: 33px;} #search-result > div.container > div.list > ul > li > a > ul.item-description > li > span.item-tel {font-size: 16px; color: #848484; line-height: 24px; border-right: 1px solid #8e8e8e; margin-right: 8px; padding-right: 8px;} #search-result > div.container > div.list > ul > li > a > ul.item-description > li > span.item-url {font-size: 16px; color: #848484; line-height: 24px;} #search-result > div.container > div.map > div.myplace-bar {position: relative; height: 60px; line-height: 60px; padding-left: 64px;} #search-result > div.container > div.map > div.myplace-bar i.icon-navigation {position: absolute; width: 24px; height: 24px; top: 50%; left: 20px; transform: translateY(-50%); background: url('../img/icon/navigation.png') no-repeat center/cover;} #search-result > div.container > div.map > div.myplace-bar > span {font-size: 16px; color: #848484;} #search-result > div.container > div.map > div.myplace-bar > span.myplace {margin-left: 20px;} #search-result > div.container > div.map { height: 100%; } .like_add { font-size: 20px !important; position: absolute; left: 5px; top: 30px; cursor: pointer; color: #fff; } .like_active { color: #f15b70 !important; } @media (max-width: 767px) { #search-result {height: auto;} #search-result.map {height: 100%;} #search-result > div.container > div {width: 100%; float: none;} #search-result > div.container > div.list {border: 0;} #search-result > div.container > div.list > ul {width: 100%; float: none; padding: 0;} #search-result > div.container > div.list > ul > li { float: left; padding: 10px; width: calc(50% - 0px); border-top: 1px solid #e4e4e4;} #search-result > div.container > div.list > ul > li:nth-child(1), #search-result > div.container > div.list > ul > li:nth-child(2) { border: 0px;} /* #search-result > div.container > div.list > ul > li:first-child {border: 0;} */ #search-result > div.container > div.list > ul > li > a > div.item-thumbnail {width: 100%; padding-bottom: 50%;} #search-result > div.container > div.list > ul > li > a > div.item-thumbnail > img {width: 100%;} #search-result > div.container > div.list > ul > li > a > ul.item-description {padding: 0;} #search-result > div.container > div.list > ul > li > a > ul.item-description > li > span.item-title {font-size: 15px; line-height: 27px; } #search-result > div.container > div.list > ul > li > a > ul.item-description > li > span.item-rating {line-height: 20px; } #search-result > div.container > div.list > ul > li > a > ul.item-description > li > span.item-review {font-size: 13px; line-height: 22px;} #search-result > div.container > div.list > ul > li > a > ul.item-description > li > span.item-addr {font-size: 13px; line-height: 24px;} #search-result > div.container > div.list > ul > li > a > ul.item-description > li > span.item-tel {font-size: 13px; line-height: 24px; border-right: 1px solid #8e8e8e; margin-right: 8px; padding-right: 8px;} #search-result > div.container > div.list > ul > li > a > ul.item-description > li > span.item-url {font-size: 13px; line-height: 24px;} #search-result > div.container > div.map {display: none;} #search-result.map > div.container > div.list {display: none;} #search-result.map > div.container > div.map {display: block;} #search-result > div.container > div.map > div.myplace-bar {display: none;} .like_add { font-size: 20px; position: absolute; left: 15px; top: 14px; cursor: pointer; color: #fff; } } /*=====search result=====*/ /******search.html******/ /******store.html******/ /*=====store info=====*/ #store-info {padding: 90px 0 50px; border-bottom: 1px solid #e4e4e4;} #store-info > div.container {overflow: hidden;} #store-info > div.container > div.store-place {float: right; float: right; width: 50%; min-height: 570px; } #store-info > div.container > ul.store-description {display: inline-block; width: 50%; float: left; } #store-info > div.container > ul.store-description > li:nth-child(3) { margin-top: 10px; } #store-info > div.container > ul.store-description > li:nth-child(5) {margin-bottom: 0px;} #store-info > div.container > ul.store-description > li > span {position: relative; font-size: 16px; line-height: 34px; color: #000; padding-left: 30px;} #store-info > div.container > ul.store-description > li > span.store-title {font-size: 30px; font-weight: bold; color: #000; padding: 0;} #store-info > div.container > ul.store-description > li > span.store-rating {float: left; margin-right: 20px; line-height: 30px; padding: 0;} #store-info > div.container > ul.store-description > li > span.store-review {font-size: 14px; color: #848484; margin-right: 10px; padding-right: 10px; border-right: 1px solid #e4e4e4; padding: 0;} #store-info > div.container > ul.store-description > li > span.store-use {font-size: 14px; color: #848484; padding: 0;} #store-info > div.container > ul.store-description > li > span.store-time {display: block; width: 100%; word-break: keep-all;} #store-info > div.container > ul.store-description > li > span > i.icon {position: absolute; width: 16px; height: 16px; top: 50%; left: 0px; transform: translateY(-50%);} #store-info > div.container > ul.store-description > li > span > i.icon-pin {background: url(../img/icon/ic_location.png) no-repeat center/contain;} #store-info > div.container > ul.store-description > li > span > i.icon-call {background: url(../img/icon/ic_call.png) no-repeat center/contain;} #store-info > div.container > ul.store-description > li > span > i.icon-home {background: url(../img/icon/ic_home.png) no-repeat center/contain;} #store-info > div.container > ul.store-description > li > span > i.icon-clock {background: url(../img/icon/ic_time.png) no-repeat center/contain;} #store-info > div.container > ul.store-description > li > span > i.icon-service {background: url(../img/icon/ic_service.png) no-repeat center/contain;} #store-info > div.container > ul.store-description > li > ul.store-service-list {position: relative; overflow: hidden; margin-top: 20px; padding: 0 20px;} #store-info > div.container > ul.store-description > li > ul.store-service-list > li {float: left; margin: 0 10px; text-align: center;} #store-info > div.container > ul.store-description > li > ul.store-service-list > li > div {display: block; width: 70px; height: 70px; line-height: 66px; background: #f05b73; border-radius: 100%;} #store-info > div.container > ul.store-description > li > ul.store-service-list > li > span {display: block; margin-top: 15px; font-size: 16px; color: #848484;} #store-info > div.container > ul.store-description > li > ul.store-convenience-list {position: relative; overflow-x: auto; margin-top: 20px; margin-right: 20px; white-space: nowrap;} #store-info > div.container > ul.store-description > li > ul.store-convenience-list > li {display: inline-block; margin-left: 10px;} #store-info > div.container > ul.store-description > li > ul.store-convenience-list > li:first-child {margin: 0;} #store-info > div.container > ul.store-description > li > ul.store-convenience-list > li > img { width: 70px; } #store-info > div.container > ul.store-description > li > ul.store-convenience-list > li > span {display: block; margin-top: 15px; font-size: 16px; color: #000; text-align: center;} @media (max-width: 767px) { #store-info {padding-top: 0;} #store-info > div.container {padding: 10px;} #store-info > div.container > ul.store-description {width: 100%; float: none;} #store-info > div.container > ul.store-description > li > ul.store-convenience-list {margin-right: 0;} #store-info > div.container > div.store-place {display: block; width: 100%; margin-top: 50px; min-height: 270px;} #store-info > div.container > ul.store-description > li > span {font-size: 13px; line-height: 24px; } #store-info > div.container > ul.store-description > li > span.store-rating {line-height: 24px; } #store-info > div.container > ul.store-description > li > span.store-title {font-size: 20px; line-height: 40px; } #store-info > div.container > ul.store-description > li > ul.store-service-list {margin-top: 0px; padding: 0 10px; } #store-info > div.container > ul.store-description > li > ul.store-service-list > li {float: left; margin: 20px 5px 0px; } #store-info > div.container > ul.store-description > li > ul.store-service-list > li > div {display: block; width: 50px; margin: auto; height: 50px; line-height: 50px; } #store-info > div.container > ul.store-description > li > ul.store-service-list > li > span {display: block; margin-top: 15px; font-size: 13px; color: #848484;} } /*=====store info=====*/ /*=====store portfolio=====*/ #store-portfolio {padding: 50px 0; border-bottom: 1px solid #e4e4e4;} #store-portfolio > div.container > h2 {font-size: 24px; font-weight: 900; color: #000; margin-bottom: 40px;} #store-portfolio > div.container > ul.store-portfolio-list {position: relative; overflow: hidden; margin: 0 -10px;} #store-portfolio > div.container > ul.store-portfolio-list > li {float: left; width: 20%; padding: 10px;} #store-portfolio > div.container > ul.store-portfolio-list > li > a > img {width: 100%;} #store-portfolio > div.container > ul.store-portfolio-list > li > a { display: inline-block; width: 100%; padding-bottom: 100%; background-size: cover; background-repeat: no-repeat; background-position: center center; } #store-portfolio > div.container > ul.store-portfolio-list2 {position: relative; overflow: hidden; margin: 0 -10px;} #store-portfolio > div.container > ul.store-portfolio-list2 > li {float: left; width: 20%; padding: 10px; position: relative; } #store-portfolio > div.container > ul.store-portfolio-list2 > li > a { display: inline-block; width: 100%; padding-bottom: 100%; background-size: cover; background-repeat: no-repeat; background-position: center center; } #store-portfolio > div.container > ul.store-portfolio-list2 > li > a.delete_button { width: 20px; height: 20px; padding-bottom: 0%; position: absolute; right: 15px; top: 13px; text-align: center; line-height: 20px; } #store-portfolio > div.container > ul.store-portfolio-list2 > li > a.delete_button > img { width: 100%; } #store-portfolio > div.container > ul.store-portfolio-list3 {position: relative; overflow: hidden; margin: 0 -10px;} #store-portfolio > div.container > ul.store-portfolio-list3 > li {float: left; width: 20%; padding: 10px; position: relative; } #store-portfolio > div.container > ul.store-portfolio-list3 > li > a { display: inline-block; width: 100%; line-height: 40px; background-color: #999; text-align: center; color: #fff; border-radius: 10px; } #store-portfolio > div.container > ul.store-portfolio-list3 > li > a.delete_button { width: 20px; height: 20px; padding-bottom: 0%; position: absolute; right: 15px; top: 18px; text-align: center; line-height: 20px; } #store-portfolio > div.container > ul.store-portfolio-list3 > li > a.delete_button > img { width: 100%; } @media (max-width: 767px) { #store-portfolio > div.container {padding: 0 10px;} #store-portfolio > div.container > ul.store-portfolio-list > li {width: 50%;} #store-portfolio > div.container > ul.store-portfolio-list2 > li {width: 50%;} #store-portfolio > div.container > ul.store-portfolio-list3 > li {width: 50%;} #store-portfolio > div.container > h2 {font-size: 21px; } } /*=====store portfolio=====*/ /*=====store servicebook=====*/ #store-servicebook {padding: 50px 0; border-bottom: 1px solid #e4e4e4;} #store-servicebook > div.container > h2 {font-size: 24px; font-weight: 900; color: #000; margin-bottom: 40px;} #store-servicebook > div.container > ul.store-servicebook-list {position: relative; overflow: hidden; margin: 0 -10px;} #store-servicebook > div.container > ul.store-servicebook-list > h3 {font-size: 18px; font-weight: bold; color: #000; margin-bottom: 20px; padding: 0 10px;} #store-servicebook > div.container > ul.store-servicebook-list > li {float: left; width: 50%; padding: 10px; margin-bottom: 20px;} #store-servicebook > div.container > ul.store-servicebook-list > li > div.store-servicebook-item {background: #fff; border: 1px solid #eee; padding: 30px 40px;} #store-servicebook > div.container > ul.store-servicebook-list > li > div.store-servicebook-item.on {border-color: #f05b73;} #store-servicebook > div.container > ul.store-servicebook-list > li > div.store-servicebook-item.event {background: url(../img/icon/event_label.png) no-repeat top right;} #store-servicebook > div.container > ul.store-servicebook-list > li > div.store-servicebook-item > div.item-title {position: relative; font-size: 24px; font-weight: bold; color: #000; padding-left: 34px; margin-bottom: 15px;} #store-servicebook > div.container > ul.store-servicebook-list > li > div.store-servicebook-item > div.item-title > i.icon-heart {position: absolute; width: 20px; height: 20px; top: 50%; left: 0px; transform: translateY(-50%); background: url(../img/icon/heart.png) no-repeat center/contain;} #store-servicebook > div.container > ul.store-servicebook-list > li > div.store-servicebook-item.on > div.item-title > i.icon-heart {background: url(../img/icon/heart_fill.png) no-repeat center/contain;} #store-servicebook > div.container > ul.store-servicebook-list > li > div.store-servicebook-item > div.item-price {font-size: 18px; font-weight: bold; color: #f05b73; margin-bottom: 25px;} #store-servicebook > div.container > ul.store-servicebook-list > li > div.store-servicebook-item > ul {position: relative; overflow: hidden;} #store-servicebook > div.container > ul.store-servicebook-list > li > div.store-servicebook-item > ul > li {position: relative; font-size: 14px; color: #000; line-height: 24px; padding-left: 10px;} #store-servicebook > div.container > ul.store-servicebook-list > li > div.store-servicebook-item > ul > li::before {content: ''; display: block; position: absolute; width: 4px; height: 4px; top: 50%; left: 0; margin-top: -2px; background: #ccc; border-radius: 100%;} #store-servicebook > div.container > ul.store-servicebook-list2 {position: relative; overflow: hidden; margin: 0 -10px;} #store-servicebook > div.container > ul.store-servicebook-list2 > h3 {font-size: 18px; font-weight: bold; color: #000; margin-bottom: 20px; padding: 0 10px;} #store-servicebook > div.container > ul.store-servicebook-list2 > li {float: left; width: 100%; padding: 10px; margin-bottom: 20px; cursor: pointer; } #store-servicebook > div.container > ul.store-servicebook-list2 > li > div.store-servicebook-item {background: #fff; border: 1px solid #eee; padding: 30px 40px;} #store-servicebook > div.container > ul.store-servicebook-list2 > li > div.store-servicebook-item.on {border-color: #f05b73;} #store-servicebook > div.container > ul.store-servicebook-list2 > li > div.store-servicebook-item.event {background: url(../img/icon/event_label.png) no-repeat top right;} #store-servicebook > div.container > ul.store-servicebook-list2 > li > div.store-servicebook-item.vip {background: url(../img/icon/vip_label.png) no-repeat top right;} #store-servicebook > div.container > ul.store-servicebook-list2 > li > div.store-servicebook-item > div.item-title {position: relative; font-size: 24px; font-weight: bold; color: #000; padding-left: 34px; margin-bottom: 15px;} #store-servicebook > div.container > ul.store-servicebook-list2 > li > div.store-servicebook-item > div.item-title > i.icon-heart {position: absolute; width: 20px; height: 20px; top: 50%; left: 0px; transform: translateY(-50%); background: url(../img/icon/heart.png) no-repeat center/contain;} #store-servicebook > div.container > ul.store-servicebook-list2 > li > div.store-servicebook-item.on > div.item-title > i.icon-heart {background: url(../img/icon/heart_fill.png) no-repeat center/contain;} #store-servicebook > div.container > ul.store-servicebook-list2 > li > div.store-servicebook-item > div.item-price {font-size: 18px; font-weight: bold; color: #f05b73; margin-bottom: 25px;} #store-servicebook > div.container > ul.store-servicebook-list2 > li > div.store-servicebook-item > ul {position: relative; overflow: hidden;} #store-servicebook > div.container > ul.store-servicebook-list2 > li > div.store-servicebook-item > ul > li { position: relative; font-size: 14px; color: #000; line-height: 24px; padding-left: 10px; } #store-servicebook > div.container > ul.store-servicebook-list2 > li > div.store-servicebook-item > ul > li::before { content: ''; display: block; position: absolute; width: 4px; height: 4px; top: 13px; left: 0; margin-top: -2px; background: #ccc; border-radius: 100%; } @media (max-width: 767px) { #store-servicebook > div.container {padding: 0 10px;} #store-servicebook > div.container > ul.store-servicebook-list > li {width: 100%; margin: 0;} #store-servicebook > div.container > h2 {font-size: 21px; } #store-servicebook > div.container > ul.store-servicebook-list2 > li > div.store-servicebook-item {background: #fff; border: 1px solid #eee; padding: 15px 40px 15px 15px;} #store-servicebook > div.container > ul.store-servicebook-list2 > li > div.store-servicebook-item > div.item-title { font-size: 16px; padding-left: 24px; margin-bottom: 5px; } #store-servicebook > div.container > ul.store-servicebook-list2 > li > div.store-servicebook-item > div.item-price {font-size: 14px; margin-bottom: 10px; } #store-servicebook > div.container > ul.store-servicebook-list2 > li > div.store-servicebook-item > ul > li { font-size: 12px; line-height: 18px; } } /*=====store servicebook=====*/ /*=====store people=====*/ #store-people {padding: 50px 0; border-bottom: 1px solid #e4e4e4;} #store-people > div.container > h2 {font-size: 24px; font-weight: 900; color: #000; margin-bottom: 40px;} #store-people > div.container > ul.store-people-list {position: relative; overflow: hidden; width: 100%;} #store-people > div.container > ul.store-people-list > li {float: left; width: 20%; text-align: center;} #store-people > div.container > ul.store-people-list > li > span {display: block; margin-top: 15px; font-size: 18px; font-weight: bold; color: #000;} #store-people > div.container > ul.store-people-list > li > img { width: 100px; height: 100px; border-radius: 50%; } @media (max-width: 767px) { #store-people > div.container {padding: 0 10px;} #store-people > div.container > ul.store-people-list > li { width: 33.33333333333%; margin-top: 30px;} #store-people > div.container > h2 {font-size: 21px; margin-bottom: 10px; } #store-people > div.container > ul.store-people-list > li > span { font-size: 14px; } } /*=====store people=====*/ /*=====store review=====*/ #store-review {padding: 50px 0; border-bottom: 1px solid #e4e4e4;} #store-review > div.container > h2 {font-size: 24px; font-weight: 900; color: #000; margin-bottom: 40px;} #store-review > div.container > h2 > p {display: block; font-size: 14px; font-weight: bold; color: #999; margin-top: 15px;} #store-review > div.container > ul.store-review-list {position: relative; width: 100%; overflow: hidden;} #store-review > div.container > ul.store-review-list > li {width: 100%; margin-bottom: 20px;} #store-review > div.container > ul.store-review-list > li > div.review-item {width: 100%; padding: 30px 40px; border: 1px solid #eeeeee;} #store-review > div.container > ul.store-review-list > li > div.review-item > div.review-item-top {margin-bottom: 25px;} #store-review > div.container > ul.store-review-list > li > div.review-item > div.review-item-top > span.review-rating {float: left; line-height: 30px; margin-right: 20px;} #store-review > div.container > ul.store-review-list > li > div.review-item > div.review-item-top > span.review-title {font-size: 20px; font-weight: bold; color: #000; line-height: 34px;} #store-review > div.container > ul.store-review-list > li > div.review-item > div.review-txt {font-size: 14px; color: #000; line-height: 24px; margin-bottom: 15px;} #store-review > div.container > ul.store-review-list > li > div.review-item > div.review-item-bottom > span {font-size: 14px; color: #999;} #store-review > div.container > ul.store-review-list > li > div.review-item > div.review-item-bottom > span.review-writer {border-right: 1px solid #ddd; margin-right: 10px; padding-right: 10px;} @media (max-width: 767px) { #store-review > div.container {padding: 0 10px;} #store-review > div.container > ul.store-review-list > li > div.review-item > div.review-item-top > span.review-rating {display: block; float: none; margin: 0;} #store-review > div.container > h2 {font-size: 21px; } #store-review > div.container > ul.store-review-list > li > div.review-item {padding: 10px 10px; } #store-review > div.container > ul.store-review-list > li > div.review-item > div.review-item-top > span.review-title {font-size: 15px; } #store-review > div.container > ul.store-review-list > li > div.review-item > div.review-txt {font-size: 12px; line-height: 18px; } } /*=====store review=====*/ /*=====store blog=====*/ #store-blog {padding: 50px 0; border-bottom: 1px solid #e4e4e4;} #store-blog > div.container > h2 {font-size: 24px; font-weight: 900; color: #000; margin-bottom: 40px;} #store-blog > div.container > h2 > p {display: block; font-size: 14px; font-weight: bold; color: #999; margin-top: 15px;} #store-blog > div.container > ul.store-blog-list {position: relative; overflow: hidden; margin: 0 -10px;} #store-blog > div.container > ul.store-blog-list > li {float: left; width: 50%; padding: 10px; overflow: hidden;} #store-blog > div.container > ul.store-blog-list > li > div.blog-item {position: relative; overflow: hidden; border: 1px solid #e4e4e4;} #store-blog > div.container > ul.store-blog-list > li > div.blog-item > div.item-thumbnail {float: left; width: 240px; height: 240px;} #store-blog > div.container > ul.store-blog-list > li > div.blog-item > div.item-thumbnail > img {width: 100%;} #store-blog > div.container > ul.store-blog-list > li > div.blog-item > div.item-description {padding: 30px 30px 30px 270px;} #store-blog > div.container > ul.store-blog-list > li > div.blog-item > div.item-description > div.item-title {font-size: 20px; font-weight: bold; color: #000; margin-bottom: 15px;} #store-blog > div.container > ul.store-blog-list > li > div.blog-item > div.item-description > div.item-txt {font-size: 14px; color: #000; line-height: 24px; margin-bottom: 15px;} #store-blog > div.container > ul.store-blog-list > li > div.blog-item > div.item-description > div.item-writer, #store-blog > div.container > ul.store-blog-list > li > div.blog-item > div.item-description > div.item-date {font-size: 14px; color: #666; line-height: 24px;} @media (max-width: 767px) { #store-blog > div.container {padding: 0 10px;} #store-blog > div.container > ul.store-blog-list > li {width: 100%;} #store-blog > div.container > ul.store-blog-list > li > div.blog-item > div.item-thumbnail {width: 100%; height: 100%; float: none;} #store-blog > div.container > ul.store-blog-list > li > div.blog-item > div.item-description {padding: 15px;} } /*=====store blog=====*/ /*=====store reservation bar=====*/ #store-reservation-bar {position: fixed; bottom: 0; width: 100%; background: rgba(0,0,0,0.5); padding: 10px 0;} #store-reservation-bar > div.container {position: relative; overflow: hidden; text-align: right;} #store-reservation-bar > div.container > a.store-reservation-btn {font-size: 18px; font-weight: bold; color: #fff; background: #f05b73; height: 60px; line-height: 60px; padding: 10px 40px; border-radius: 20px;} /*=====store reservation bar=====*/ /*=====store reservation popup=====*/ #store-reservation-popup > div.container {width: 860px;} #store-reservation-popup > div.container > div.reservation-content {position: relative; overflow: hidden;} #store-reservation-popup > div.container > div.reservation-content > div {float: left; width: 50%;} #store-reservation-popup .ui-widget.ui-widget-content {border: 0;} #store-reservation-popup .ui-datepicker .ui-datepicker-header {border: 0;} #store-reservation-popup .ui-datepicker td a {width: 30px; height: 30px; line-height: 30px; margin: .4em auto; padding: 0;} #store-reservation-popup > div.container > div.reservation-content > div.reservation-time {padding: 15px 25px;} #store-reservation-popup > div.container > div.reservation-content > div.reservation-time > div.select-date {font-size: 18px; font-weight: bold; color: #000; margin-bottom: 30px;} #store-reservation-popup > div.container > div.reservation-content > div.reservation-time > div.select-date > span {color: #f05b73;} #store-reservation-popup > div.container > div.reservation-content > div.reservation-time > div.checkbox {float: left; width: 25%; margin: 5px 0; padding: 0 5px;} #store-reservation-popup > div.container > div.reservation-content > div.reservation-time > div.checkbox > label {display: block; width: 100%; height: 40px; line-height: 40px; text-align: center; background: #fff; font-size: 16px; border: 1px solid #cccccc;} #store-reservation-popup > div.container > div.reservation-content > div.reservation-time > div.checkbox > input:disabled + label {background: #ccc; color: #999;} #store-reservation-popup > div.container > div.reservation-content > div.reservation-time > div.checkbox > input:checked + label {background: #f05b73; color: #fff;} #store-reservation-popup > div.container > div.popup-bottom {margin-top: 30px;} #store-reservation-popup > div.container > div.popup-bottom > a {display: block; width: 100%; line-height: 50px; font-size: 16px; font-weight: bold; color: #fff; text-align: center; background: #f05b73;} @media (max-width: 767px) { #store-reservation-popup > div.container {width: 100%;} #store-reservation-popup > div.container > div.reservation-content > div {width: 100%;} } /*=====store reservation popup=====*/ /******store.html******/ /******payment.html******/ /*=====payment=====*/ #payment {padding: 20px 0 180px;} #payment > div.container > form > div.payment-details {position: absolute;; width: 600px; top: 20px; left: 50%; padding: 30px; border: 1px solid #f05b73; background: #fff; z-index: 10;} #payment > div.container > form > div.payment-details > div.store-name {font-size: 24px; font-weight: bold; color: #000; line-height: 50px;} #payment > div.container > form > div.payment-details > div.store-space {position: relative; font-size: 16px; color: #000; padding-left: 30px;} #payment > div.container > form > div.payment-details > div.store-space > i.icon-pin {position: absolute; width: 14px; height: 20px; top: 50%; left: 0; transform: translateY(-50%); background: url('../img/icon/pin.png') no-repeat center/cover;} #payment > div.container > form > div.payment-details > div.item-name {font-size: 30px; font-weight: 900; color: #000; line-height: 50px; margin-top: 30px;} #payment > div.container > form > div.payment-details > div.reserve-date {font-size: 24px; font-weight: 900; color: #f05b73; line-height: 50px;} #payment > div.container > form > div.payment-details > div.request-time {position: relative; font-size: 18px; font-weight: bold; color: #000; padding-left: 30px;} #payment > div.container > form > div.payment-details > div.request-time > i.icon-clock {position: absolute; width: 20px; height: 20px; top: 50%; left: 0; transform: translateY(-50%); background: url('../img/icon/clock.png') no-repeat center/cover;} #payment > div.container > form > div.payment-details > ul.price-box {margin-top: 20px; padding: 10px; border-top: 1px solid #eee;} #payment > div.container > form > div.payment-details > ul.price-box > li {font-size: 18px; color: #000; line-height: 40px;} #payment > div.container > form > div.payment-details > ul.price-box > li > p {display: inline-block; float: right; font-weight: bold;} #payment > div.container > form > div.payment-details > ul.price-box > li:nth-child(2n) > p {color: #f05b73;} #payment > div.container > form > div.payment-details > ul.price-box > li > p > span {font-weight: normal;} #payment > div.container > form > div.payment-details > ul.price-box > li:last-child {margin-top: 10px; padding-top: 10px; border-top: 1px solid #eee; font-size: 24px; font-weight: 900; color: #f05b73;} #payment > div.container > form > div.payment-details > ul.price-box > li:last-child > p, #payment > div.container > form > div.payment-details > ul.price-box > li:last-child > p > span {font-weight: 900;} #payment > div.container > form > div.payment-details > .payment-submit {display: block; width: 100%; font-size: 16px; font-weight: bold; color: #fff; line-height: 50px; text-align: center; background: #f05b73; margin-top: 20px;} #payment > div.container > form > div.payment-form-box {position: relative; width: 100%; padding-right: 660px; margin-top: 40px;} #payment > div.container > form > div.payment-form-box:first-child {margin: 0;} #payment > div.container > form > div.payment-form-box > div.title {font-size: 18px; font-weight: bold; color: #000; margin-bottom: 20px;} #payment > div.container > form > div.payment-form-box > div.title > small {font-size: 14px; color: #e50505;} #payment > div.container > form > div.payment-form-box > div.title > span {position: relative; display: block; padding-left: 15px; font-size: 14px; font-weight: normal; color: #333;} #payment > div.container > form > div.payment-form-box > div.title > span > i.icon-check {position: absolute; width: 12px; height: 12px; top: 50%; left: 0; transform: translateY(-50%); background: url('../img/icon/check.png') no-repeat center/cover;} #payment > div.container > form > div.payment-form-box > div.input-box {position: relative; display: table; width: 100%;} #payment > div.container > form > div.payment-form-box > div.input-box > span {display: table-cell; width: 100px; padding: 14px 0; font-size: 14px; font-weight: bold; color: #666; white-space: nowrap; vertical-align: middle;} #payment > div.container > form > div.payment-form-box > div.input-box > span > strong {color: #f05b73;} #payment > div.container > form > div.payment-form-box > div.input-box > input, #payment > div.container > form > div.payment-form-box > div.input-box > select {display: table-cell; float: left; width: 100%; height: auto; font-size: 14px; padding: 14px 10px; border: 0; border-bottom: 1px solid #ccc; border-radius: 0;} #payment > div.container > form > div.payment-form-box > div.input-box > input.unit {} #payment > div.container > form > div.payment-form-box > div.input-box > span.unit {width: auto; border-bottom: 1px solid #ccc;} #payment > div.container > form > div.payment-form-box > div.input-box > span.btn {width: 120px; padding: 0;} #payment > div.container > form > div.payment-form-box > div.input-box > span.btn > a.use-all {display: block; width: 80px; margin: 0 auto; padding: 12px 0; border: 1px solid #f05b73; background: #fff; font-size: 12px; font-weight: bold; color: #f05b73; text-align: center; vertical-align: middle;} #payment > div.container > form > div.payment-form-box > div.input-box > input[type=checkbox] {display: inline-block; width: auto; float: none;} #payment > div.container > form > div.payment-form-box > div.input-box > label.checkbox-label {font-size: 14px; font-weight: bold; color: #000; margin-left: 9px;} #payment > div.container > form > div.payment-form-box > div.input-box > p.agree-txt {font-size: 14px; color: #666; margin-left: 22px;} #payment > div.container > form > div.payment-form-box > div.input-box > a.agree-detail-toggle {display: block; width: 100px; margin: 10px 0 10px 22px; text-align: center; border: 1px solid #ccc; color: #666; font-size: 12px; line-height: 24px; background: url('../img/icon/bullet_up_g.png') no-repeat center right 5px;} #payment > div.container > form > div.payment-form-box > div.input-box > div.agree-details {margin-left: 22px;} #payment > div.container > form > div.payment-form-box > div.input-box > div.agree-details > p {font-size: 14px; color: #666;} #payment > div.container > form > div.payment-form-box > div.input-box > div.agree-details > ul {margin: 20px 0;} #payment > div.container > form > div.payment-form-box > div.input-box > div.agree-details > ul > li {display: table; width: 100%;} #payment > div.container > form > div.payment-form-box > div.input-box > div.agree-details > ul > li > span {display: table-cell; border-bottom: 1px solid #eee; font-size: 14px; padding: 10px 15px; vertical-align: middle;} #payment > div.container > form > div.payment-form-box > div.input-box > div.agree-details > ul > li > span.title {width: 120px; color: #999; border-bottom: 2px solid #ccc} #payment > div.container > form > div.payment-form-box > div.input-box > div.cancel-details {margin-top: 20px;} #payment > div.container > form > div.payment-form-box > div.input-box > div.cancel-details > table {position: relative; overflow: hidden; width: 100%;} #payment > div.container > form > div.payment-form-box > div.input-box > div.cancel-details > table th {font-size: 14px; font-weight: bold; color: #999; padding: 10px 20px; text-align: center; background: #f1f1f1; border-top: 2px solid #cccccc; border-bottom: 2px solid #cccccc;} #payment > div.container > form > div.payment-form-box > div.input-box > div.cancel-details > table td {font-size: 14px; color: #000; text-align: center; border-bottom: 1px solid #cccccc; padding: 10px 20px; word-break: keep-all;} #payment > div.container > form > div.payment-form-box > ul.attention-point > li {position: relative; font-size: 14px; line-height: 24px; color: #666; padding-left: 10px;} #payment > div.container > form > div.payment-form-box > ul.attention-point > li::before {content: ''; display: block; position: absolute; width: 4px; height: 4px; top: 50%; left: 0; margin-top: -2px; background: #ccc; border-radius: 100%;} @media (max-width: 767px) { #payment {padding: 20px 0;} #payment > div.container {padding: 10px;} #payment > div.container > form > div.payment-details {position: relative !important; width: 100%; top: auto !important; left: 0; margin-top: 40px; padding: 10px;} #payment > div.container > form > div.payment-details > div.store-name {font-size: 18px; line-height: 30px; } #payment > div.container > form > div.payment-details > div.store-space {font-size: 13px; margin-top: 5px; padding-left: 25px;} #payment > div.container > form > div.payment-details > div.item-name {font-size: 20px; line-height: 30px; } #payment > div.container > form > div.payment-details > div.reserve-date {font-size: 16px; line-height: 20px;} #payment > div.container > form > div.payment-details > div.request-time { margin-top: 10px; font-size: 13px; padding-left: 20px;} #payment > div.container > form > div.payment-details > div.request-time > i.icon-clock { width: 14px; height: 14px; } #payment > div.container > form > div.payment-details > ul.price-box {padding: 0px; } #payment > div.container > form > div.payment-details > ul.price-box > li {font-size: 14px; color: #000; line-height: 30px;} #payment > div.container > form > div.payment-details > ul.price-box > li:last-child {font-size: 18px; } #payment > div.container > form > div.payment-form-box {padding: 0; margin-top: 30px;} #payment > div.container > form > div.margintno {margin-top: 0px;} #payment > div.container > form > div.payment-form-box > div.input-box.point {display: block; overflow: hidden;} #payment > div.container > form > div.payment-form-box > div.input-box.point > span {display: block; float: left;} #payment > div.container > form > div.payment-form-box > div.input-box.point > input {display: block; width: auto;} #payment > div.container > form > div.payment-form-box > div.input-box.point > span.btn {float: right; margin-top: 10px; clear: both;} #payment > div.container > form > div.payment-form-box > div.input-box.point > span.point {width: auto; margin-top: 10px;} #payment > div.container > form > div.payment-form-box > div.input-box > span { display: table-cell; width: 100px; padding: 10px 0; font-size: 12px; font-weight: bold; color: #666; white-space: nowrap; vertical-align: middle; } #payment > div.container > form > div.payment-form-box > div.title {font-size: 14px; font-weight: bold; color: #000; margin-bottom: 10px;} #payment > div.container > form > div.payment-form-box > div.title > span {font-size: 12px;} #payment > div.container > form > div.payment-form-box > div.input-box > input, #payment > div.container > form > div.payment-form-box > div.input-box > select { display: table-cell; float: left; width: 100%; height: auto; font-size: 12px; padding: 10px 10px; border: 0; border-bottom: 1px solid #ccc; border-radius: 0; } #payment > div.container > form > div.payment-form-box > div.input-box > label.checkbox-label {font-size: 12px;} #payment > div.container > form > div.payment-form-box > div.input-box > p.agree-txt {font-size: 12px;} #payment > div.container > form > div.payment-form-box > div.input-box > div.agree-details > p {font-size: 12px;} #payment > div.container > form > div.payment-form-box > div.input-box > div.agree-details > ul > li > span {font-size: 12px; padding: 5px 15px;} #payment > div.container > form > div.payment-form-box > div.input-box > div.cancel-details > table th {font-size: 12px; padding: 5px 10px; } #payment > div.container > form > div.payment-form-box > div.input-box > div.cancel-details > table td {font-size: 12px; padding: 5px 10px; } #payment > div.container > form > div.payment-form-box > ul.attention-point > li {font-size: 12px; line-height: 20px; color: #666; padding-left: 10px;} #payment > div.container > form > div.payment-form-box > ul.attention-point > li::before {top: 10px; left: 0; margin-top: -2px;} } /*=====payment=====*/ /******payment.html******/ /******faq_list.html, notice_list.html******/ /*=====bbs=====*/ #bbs {padding: 0 0 90px;} #bbs > div.container > ul > li {text-align: center;} #bbs > div.container > ul > li > a {display: inline-block; font-size: 16px; font-weight: bold; color: #666; padding: 22px 0;} #bbs > div.container > ul > li.active > a {color: #f05b73; border-bottom: 4px solid #f05b73;} #bbs > div.container > div.tab-content {margin-top: 20px;} #bbs > div.container > div.tab-content ul > li {border-bottom: 1px solid #cccccc;} #bbs > div.container > div.tab-content ul > li:first-child {border-top: 1px solid #cccccc;} #bbs > div.container > div.tab-content ul > li > h3 {min-height: 50px; line-height: 30px; padding: 10px; position: relative; font-size: 14px; font-weight: normal; color: #000;} #bbs > div.container > div.faq ul > li > h3 {padding-left: 120px;} #bbs > div.container > div.notice ul > li > h3 {padding-left: 70px;} #bbs > div.container > div.tab-content ul > li > h3 > span {display: inline-block; position: absolute; top: 10px; left: 30px; text-align: center; font-size: 14px; font-weight: bold; color: #999;} #bbs > div.container > div.tab-content ul > li > h3 > a {display: block; padding-right: 70px;} #bbs > div.container > div.tab-content ul > li > h3 > a > span {float: right; font-size: 14px; font-weight: normal;} #bbs > div.container > div.tab-content ul > li > h3 > a > i.icon-bullet-down {position: absolute; width: 11px; height: 7px; top: 50%; right: 20px; transform: translateY(-50%); background: url(../img/icon/bullet_down.png) no-repeat center/cover;} #bbs > div.container > div.tab-content ul > li > h3 > a.on {font-size: 16px; font-weight: bold;} #bbs > div.container > div.tab-content ul > li > h3 > a.on > i.icon-bullet-down {transform: translateY(-50%) rotate(180deg);} #bbs > div.container > div.tab-content ul > li > div.bbs-content {min-height: 150px; padding: 15px 30px 30px; font-size: 14px; line-height: 24px; display: none;} #bbs > div.container > div.faq ul > li > div.bbs-content {padding-left: 120px} #bbs > div.container > div.notice ul > li > div.bbs-content {padding-left: 70px} #bbs > div.container > div.tab-content ul > li > div.bbs-content.on {display: block;} #bbs > div.container > div.tab-content > form > div.bbs-form-box {position: relative; width: 900px; margin: 0 auto;} #bbs > div.container > div.tab-content > form > div.bbs-form-box > div.input-box {position: relative; display: table; width: 100%;} #bbs > div.container > div.tab-content > form > div.bbs-form-box > div.input-box > span {display: table-cell; width: 100px; padding: 14px 0; font-size: 14px; font-weight: bold; color: #666; vertical-align: middle;} #bbs > div.container > div.tab-content > form > div.bbs-form-box > div.input-box > input {display: table-cell; float: left; width: 100%; height: auto; font-size: 14px; padding: 14px 10px; border: 0; border-bottom: 1px solid #ccc; border-radius: 0;} #bbs > div.container > div.tab-content > form > div.bbs-form-box > div.textarea-box > span {vertical-align: top; padding-top: 40px;} #bbs > div.container > div.tab-content > form > div.bbs-form-box > div.textarea-box > textarea {height: auto; margin-top: 40px; padding: 20px;} #bbs > div.container > div.tab-content > form > div.bbs-form-box > div.textarea-box > p {text-align: right; font-size: 14px; color: #000;} #bbs > div.container > div.tab-content > form > div.bbs-form-box > div.textarea-box > p > span {font-weight: bold;} #bbs > div.container > div.tab-content > form > div.bbs-form-box > div.input-box > a {display: table-cell; float: left; width: 100%; height: auto; font-size: 16px; font-weight: bold; color: #fff; background: #f05b73; text-align: center; line-height: 50px; margin-top: 40px;} @media (max-width: 767px) { #bbs {padding: 0 0 50px;} #bbs > div.container {padding: 10px;} #bbs > div.container > ul > li {width: 33.3% !important;} #bbs > div.container > div.tab-content > form > div.bbs-form-box {width: 100%;} #bbs > div.container > div.tab-content > form > div.bbs-form-box > div.input-box > span {display: block; padding: 10px 0 0;} #bbs > div.container > div.tab-content > form > div.bbs-form-box > div.textarea-box > textarea {margin-top: 10px;} #bbs > div.container > div.faq ul > li > h3 {padding-left: 0px;} #bbs > div.container > div.notice ul > li > h3 {padding-left: 0px;} #bbs > div.container > div.tab-content ul > li > h3 > span {position: relative; top: 0px; left: 0px; } #bbs > div.container > div.notice ul > li > h3 > span { display: none; } #bbs > div.container > div.notice ul > li > h3 > a {padding-right: 40px; } #bbs > div.container > div.faq ul > li > h3 > a {padding-right: 40px;} #bbs > div.container > div.faq ul > li > div.bbs-content {padding-left: 0px} #bbs > div.container > div.notice ul > li > div.bbs-content {padding-left: 0px} } /*=====bbs=====*/ /******faq_list.html, notice_list.html******/ /******mypage_*.html******/ /*=====mypage common=====*/ #mypage {padding: 0 0 90px;} #mypage > div.container {max-width: 100%;} #mypage > div.container > ul {position: relative; overflow: hidden; width: 800px; margin: 0 auto;} #mypage > div.container > ul.tab-nav > li {width: 20%; float: left; text-align: center;} #mypage > div.container > ul.tab-nav02 > li {width: 33.33333333%; float: left; text-align: center; } #mypage > div.container > ul > li > a {display: inline-block; font-size: 16px; font-weight: bold; color: #666; padding: 22px 0;} #mypage > div.container > ul > li.active > a {color: #f05b73; border-bottom: 4px solid #f05b73;} #mypage > div.container > div.tab-content {margin-top: 20px;} #mypage > div.container > div.tab-content > div.mypage-header {position: relative; overflow: hidden; width: 100%; background: #f1f1f1; padding: 25px 0; text-align: center; margin-bottom: 50px;} #mypage > div.container > div.tab-content > div.mypage-header > ul > li {display: inline-block; max-width: 200px; width: 100%; vertical-align: top;} #mypage > div.container > div.tab-content > div.mypage-header > ul > li > a {font-size: 16px; color: #666; text-align: center;} #mypage > div.container > div.tab-content > div.mypage-header > ul > li > a > span {display: block; font-size: 30px;} #mypage > div.container > div.tab-content > div.mypage-header > ul > li.active > a {font-weight: bold; color: #f05b73;} @media (max-width: 1030px) { #mypage > div.container > div.tab-content > div.mypage-header > ul.tab_five > li {max-width: 100%; width: calc(20% - 5px) !important; } } @media (max-width: 440px) { #mypage > div.container > div.tab-content > div.mypage-header > ul.tab_five > li> a {font-size: 13px; letter-spacing: -1px; } } @media (max-width: 767px) { #mypage {padding: 0 0 50px;} #mypage > div.container {padding: 10px;} #mypage > div.container > ul {width: 100%;} #mypage > div.container > div.tab-content > div.mypage-header > ul > li {width: 24%;} } /*=====mypage common=====*/ /*=====mypage qa=====*/ #mypage > div.container > div.tab-content > div.qa-list-header {margin: 40px 0; text-align: center;} #mypage > div.container > div.tab-content > div.qa-list-header > p {font-size: 16px; color: #666; margin-bottom: 20px;} #mypage > div.container > div.tab-content > div.qa-list-header > a {display: inline-block; width: 400px; font-size: 16px; font-weight: bold; color: #fff; background: #f05b73; line-height: 50px;} #mypage > div.container > div.tab-content > table.list {max-width: 1000px; width: 100%; margin: 0 auto; border-top: 2px solid #f05b73; border-bottom: 1px solid #cccccc;} #mypage > div.container > div.tab-content > table.list thead th {font-size: 14px; font-weight: bold; color: #999; text-align: center; min-height: 50px; line-height: 30px; padding: 10px 0;} #mypage > div.container > div.tab-content > table.list tbody td {font-size: 14px; color: #000; text-align: center; min-height: 50px; line-height: 30px; padding: 10px 0; border-top: 1px solid #cccccc;} #mypage > div.container > div.tab-content > table.list tbody td.title {text-align: left; padding-left: 30px;} #mypage > div.container > div.tab-content > table.list tbody td.title.reply {padding-left: 50px; } #mypage > div.container > div.tab-content > table.list tbody td.title > a > span.icon-reply {color: #ccc;} #mypage > div.container > div.tab-content > div.qa-view-container {position: relative; overflow: hidden; width: 800px; margin: 0 auto;} #mypage > div.container > div.tab-content > div.qa-view-container > div.qa-view {padding: 45px 60px; border: 1px solid #f1f1f1; margin-bottom: 20px;} #mypage > div.container > div.tab-content > div.qa-view-container > div.qa-view > h2.title {font-size: 24px; font-weight: bold; color: #000; padding-bottom: 25px; border-bottom: 1px solid #ccc;} #mypage > div.container > div.tab-content > div.qa-view-container > div.qa-view > div.info {padding: 20px 0; border-bottom: 1px solid #ccc; margin-bottom: 30px;} #mypage > div.container > div.tab-content > div.qa-view-container > div.qa-view > div.info > span {font-size: 14px; font-weight: normal; color: #000; margin-right: 40px;} #mypage > div.container > div.tab-content > div.qa-view-container > div.qa-view > div.info > span > strong {color: #999; margin-right: 20px;} #mypage > div.container > div.tab-content > div.qa-view-container > div.qa-view > div.content {font-size: 14px; line-height: 28px;} #mypage > div.container > div.tab-content > div.qa-view-container > div.qa-view-bottom {position: relative; overflow: hidden;} #mypage > div.container > div.tab-content > div.qa-view-container > div.qa-view-bottom > div.qa-view-bottom-left {float: left;} #mypage > div.container > div.tab-content > div.qa-view-container > div.qa-view-bottom > div.qa-view-bottom-right {float: right;} #mypage > div.container > div.tab-content > div.qa-view-container > div.qa-view-bottom > div > a {display: inline-block; padding: 15px 35px; border: 1px solid #999; font-size: 16px; font-weight: bold; color: #999;} #mypage > div.container > div.tab-content > div.qa-view-container > div.qa-view-bottom > div > a.btn-cancel {background: #999; color: #fff;} #mypage > div.container > div.tab-content > div.qa-write-container {position: relative; overflow: hidden; width: 800px; margin: 0 auto;} #mypage > div.container > div.tab-content > div.qa-write-container > h2 {font-size: 24px; font-weight: bold; color: #000; margin-bottom: 30px; text-align: center;} #mypage > div.container > div.tab-content > div.qa-write-container > form > div.qa-form-box {padding: 45px 60px; border: 1px solid #f1f1f1; margin-bottom: 20px;} #mypage > div.container > div.tab-content > div.qa-write-container > form > div.qa-form-box > div.input-box {position: relative; display: table; width: 100%;} #mypage > div.container > div.tab-content > div.qa-write-container > form > div.qa-form-box > div.input-box > span {display: table-cell; width: 100px; padding: 14px 0; font-size: 14px; font-weight: bold; color: #666; vertical-align: middle;} #mypage > div.container > div.tab-content > div.qa-write-container > form > div.qa-form-box > div.input-box > p {display: table-cell; width: 100%; float: left; padding: 14px 0; font-size: 14px; font-weight: bold; color: #000; vertical-align: middle;} #mypage > div.container > div.tab-content > div.qa-write-container > form > div.qa-form-box > div.input-box > input {display: table-cell; float: left; width: 100%; height: auto; font-size: 14px; padding: 14px 10px; border: 0; border-bottom: 1px solid #ccc; border-radius: 0;} #mypage > div.container > div.tab-content > div.qa-write-container > form > div.qa-form-box > div.textarea-box > span {vertical-align: top; padding-top: 40px;} #mypage > div.container > div.tab-content > div.qa-write-container > form > div.qa-form-box > div.textarea-box > textarea {height: auto; margin-top: 40px; padding: 20px;} #mypage > div.container > div.tab-content > div.qa-write-container > form > div.qa-write-bottom {position: relative; overflow: hidden; margin: 0 -10px;} #mypage > div.container > div.tab-content > div.qa-write-container > form > div.qa-write-bottom > div {float: left; width: 50%; padding: 0 10px;} #mypage > div.container > div.tab-content > div.qa-write-container > form > div.qa-write-bottom > div > a {display: block; font-size: 16px; font-weight: bold; color: #fff; background: #f05b73; line-height: 50px; text-align: center;} #mypage > div.container > div.tab-content > div.qa-write-container > form > div.qa-write-bottom > div > a.btn-cancel {background: #999;} @media (max-width: 767px) { #mypage > div.container > div.tab-content > div.qa-list-header > a {width: 100%;} #mypage > div.container > div.tab-content > table.list tbody td.title {padding: 0;} #mypage > div.container > div.tab-content > table.list tbody td.title.reply {padding-left: 10px;} #mypage > div.container > div.tab-content > div.qa-view-container {width: 100%;} #mypage > div.container > div.tab-content > div.qa-view-container > div.qa-view {padding: 20px;} #mypage > div.container > div.tab-content > div.qa-view-container > div.qa-view > div.info > span {display: block;} #mypage > div.container > div.tab-content > div.qa-write-container {width: 100%;} #mypage > div.container > div.tab-content > div.qa-write-container > form > div.qa-form-box {padding: 20px;} #mypage > div.container > div.tab-content > div.qa-write-container > form > div.qa-form-box > div.input-box > span {display: block; padding: 10px 0 0;} #mypage > div.container > div.tab-content > div.qa-write-container > form > div.qa-form-box > div.textarea-box > textarea {margin-top: 10px;} } /*=====mypage qa=====*/ /*=====mypage beauty tip=====*/ #mypage > div.container > div.tab-content > div.mypage-content > div.beauty-tip-header {position: relative; overflow: hidden; text-align: center; margin-bottom: 20px;} #mypage > div.container > div.tab-content > div.mypage-content > div.beauty-tip-header > a {display: inline-block; width: 400px; font-size: 16px; font-weight: bold; color: #fff; background: #f05b73; line-height: 50px;} #mypage > div.container > div.tab-content > div.mypage-content > div.beauty-tip-list {width: 1200px; margin: 0 auto;} #mypage > div.container > div.tab-content > div.mypage-content > div.beauty-tip-list > ul {position: relative; overflow: hidden; margin: 0 -15px; } #mypage > div.container > div.tab-content > div.mypage-content > div.beauty-tip-list > ul > li {float: left; width: 25%; padding: 0 15px;} #mypage > div.container > div.tab-content > div.mypage-content > div.beauty-tip-list > ul > li > a > div.item-thumbnail {position: relative; height: 157px;} #mypage > div.container > div.tab-content > div.mypage-content > div.beauty-tip-list > ul > li > a > div.item-thumbnail > img {height: 100%;} #mypage > div.container > div.tab-content > div.mypage-content > div.beauty-tip-list > ul > li > a > div.item-thumbnail > img.btn-play {position: absolute; top: 50%; left: 50%; height: auto; margin-top: -30px; margin-left: -30px;} #mypage > div.container > div.tab-content > div.mypage-content > div.beauty-tip-list > ul > li > a > ul.item-description {position: relative; overflow: hidden; padding: 10px 0;} #mypage > div.container > div.tab-content > div.mypage-content > div.beauty-tip-list > ul > li > a > ul.item-description > li {position: relative; padding-bottom: 5px;} #mypage > div.container > div.tab-content > div.mypage-content > div.beauty-tip-list > ul > li > a > ul.item-description > li > span {position: relative; font-size: 12px; color: #666;} #mypage > div.container > div.tab-content > div.mypage-content > div.beauty-tip-list > ul > li > a > ul.item-description > li > span.item-title {font-size: 16px; font-weight: bold; color: #000; margin-bottom: 10px;} #mypage > div.container > div.tab-content > div.mypage-content > div.beauty-tip-list > ul > li > a > ul.item-description > li > span.seperator {margin: 0 8px;} #mypage > div.container > div.tab-content > div.mypage-content > div.beauty-tip-list > ul > li > a > ul.item-description > li > span.play, #mypage > div.container > div.tab-content > div.mypage-content > div.beauty-tip-list > ul > li > a > ul.item-description > li > span.heart {padding-left: 20px;} #mypage > div.container > div.tab-content > div.mypage-content > div.beauty-tip-list > ul > li > a > ul.item-description > li > span.play {margin-right: 20px;} #mypage > div.container > div.tab-content > div.mypage-content > div.beauty-tip-list > ul > li > a > ul.item-description > li > span > i.viwe_count { position: absolute; width: 11px; height: 12px; top: 1px; left: 0; color: #f05b73; font-size: 15px; } #mypage > div.container > div.tab-content > div.mypage-content > div.beauty-tip-list > ul > li > a > ul.item-description > li > span > i.icon-play {position: absolute; width: 11px; height: 12px; top: 50%; left: 0; transform: translateY(-50%); background: url(../img/icon/play.png) no-repeat center/cover;} #mypage > div.container > div.tab-content > div.mypage-content > div.beauty-tip-list > ul > li > a > ul.item-description > li > span > i.icon-heart-fill {position: absolute; width: 14px; height: 12px; top: 50%; left: 0; transform: translateY(-50%); background: url(../img/icon/heart_fill.png) no-repeat center/cover;} #mypage > div.container > div.tab-content > div.mypage-content > div.beauty-tip-list > div.list-bottom {margin-top: 40px; text-align: center;} #mypage > div.container > div.tab-content > div.mypage-content > div.beauty-tip-list > div.list-bottom > a {position: relative; display: inline-block; font-size: 12px; font-weight: bold; color: #666; border: 1px solid #ccc; padding: 10px 20px 10px 30px;} #mypage > div.container > div.tab-content > div.mypage-content > div.beauty-tip-list > div.list-bottom > a > i.icon-arr-down {position: absolute; width: 13px; height: 12px; top: 50%; left: 10px; transform: translateY(-50%); background: url(../img/icon/arr_down.png) no-repeat center/cover;} #mypage > div.container > div.beauty-tip-write-container {position: relative; overflow: hidden; width: 800px; margin: 60px auto;} #mypage > div.container > div.beauty-tip-write-container > form > div.form-box {padding: 45px 100px; border: 1px solid #f1f1f1; margin-bottom: 20px;} #mypage > div.container > div.beauty-tip-write-container > form > div.form-box > div.input-box {position: relative; display: table; width: 100%; padding: 8px 0;} #mypage > div.container > div.beauty-tip-write-container > form > div.form-box > div.input-box > input {display: table-cell; float: left; width: 100%; height: auto; font-size: 14px; padding: 10px 10px; border: 0; border-bottom: 1px solid #ccc; border-radius: 0;} #mypage > div.container > div.beauty-tip-write-container > form > div.form-box > div.input-box > span {display: table-cell; width: 120px; vertical-align: middle;} #mypage > div.container > div.beauty-tip-write-container > form > div.form-box > div.input-box > span > a {font-size: 14px; font-weight: bold; color: #666; display: block; margin-left: 20px; padding: 10px 0; text-align: center; border: 1px solid #f1f1f1;} #mypage > div.container > div.beauty-tip-write-container > form > div.form-box > div.input-box > textarea {height: auto; padding: 20px;} #mypage > div.container > div.beauty-tip-write-container > form > div.form-box > div.youtube-cover {position: relative; padding: 8px 0; width: 100%;} #mypage > div.container > div.beauty-tip-write-container > form > div.form-box > div.youtube-cover > a {position: absolute; width: 100%; height: 100%; top: 0; left: 0;} #mypage > div.container > div.beauty-tip-write-container > form > div.form-box > div.youtube-cover > a > img {position: absolute; top: 50%; left: 50%; margin-top: -30px; margin-left: -30px;} #mypage > div.container > div.beauty-tip-write-container > form > div.form-box > p {padding: 8px 0; font-size: 12px; color: #000;} #mypage > div.container > div.beauty-tip-write-container > form > div.form-bottom {position: relative; overflow: hidden; margin: 0 -10px;} #mypage > div.container > div.beauty-tip-write-container > form > div.form-bottom > div {float: left; width: 50%; padding: 0 10px;} #mypage > div.container > div.beauty-tip-write-container > form > div.form-bottom > div > a {display: block; font-size: 16px; font-weight: bold; color: #fff; background: #f05b73; line-height: 50px; text-align: center;} #mypage > div.container > div.beauty-tip-write-container > form > div.form-bottom > div > input[type='submit'] { display: block; font-size: 16px; font-weight: bold; color: #fff; background: #f05b73; line-height: 50px; text-align: center; width: 100%; } #mypage > div.container > div.beauty-tip-write-container > form > div.form-bottom > div > a.cancel {background: #999;} #beauty-tip-popup > div.container {width: 400px; text-align: center; overflow: hidden;} #beauty-tip-popup > div.container > a {display: block; float: left; width: 50%; font-size: 16px; font-weight: bold; color: #000; text-align: center; margin-bottom: 70px;} #beauty-tip-popup > div.container > a > span {display: block; text-align: center;} #beauty-tip-popup > div.container > a > span > i.icon-youtube {display: inline-block; width: 70px; height: 70px; background: url('../img/icon/youtube.png') no-repeat center/contain;} #beauty-tip-popup > div.container > a > span > i.icon-post {display: inline-block; width: 70px; height: 70px; background: url('../img/icon/post.png') no-repeat center/80%;} @media (max-width: 767px) { #mypage > div.container > div.tab-content > div.mypage-content > div.beauty-tip-header > a {width: 100%;} #mypage > div.container > div.tab-content > div.mypage-content > div.beauty-tip-list {width: 100%;} #mypage > div.container > div.tab-content > div.mypage-content > div.beauty-tip-list > ul > li {width: 100%;} #mypage > div.container > div.tab-content > div.mypage-content > div.beauty-tip-list > ul > li > a > div.item-thumbnail {height: auto;} #mypage > div.container > div.tab-content > div.mypage-content > div.beauty-tip-list > ul > li > a > div.item-thumbnail > img {width: 100%;} #mypage > div.container > div.beauty-tip-write-container {width: 100%;} #mypage > div.container > div.beauty-tip-write-container > form > div.form-box {padding: 20px;} } /*=====mypage beauty tip=====*/ /*=====mypage shopping=====*/ #mypage > div.container > div.tab-content > div.mypage-content > div.shopping-list {width: 800px; margin: 0 auto;} #mypage > div.container > div.tab-content > div.mypage-content > div.shopping-list > ul > li {padding: 30px; border: 1px solid #f1f1f1; overflow: hidden; margin-bottom: 20px;} #mypage > div.container > div.tab-content > div.mypage-content > div.shopping-list > ul > li > a > div.item-thumbnail { display: inline-block; float: left; width: 220px; height: 160px; background-size: cover; background-repeat: no-repeat; background-position: center center; } #mypage > div.container > div.tab-content > div.mypage-content > div.shopping-list > ul > li > a > ul.item-description {position: relative; padding-left: 240px;} #mypage > div.container > div.tab-content > div.mypage-content > div.shopping-list > ul > li > a > ul.item-description > li > span.item-state {position: absolute; right: 0; font-size: 14px; font-weight: bold;} #mypage > div.container > div.tab-content > div.mypage-content > div.shopping-list > ul > li > a > ul.item-description > li > span.item-state.s01 {color: #e50f0f;} #mypage > div.container > div.tab-content > div.mypage-content > div.shopping-list > ul > li > a > ul.item-description > li > span.item-state.s02 {color: #0f7ee5;} #mypage > div.container > div.tab-content > div.mypage-content > div.shopping-list > ul > li > a > ul.item-description > li > span.item-state.s03 {color: #999;} ul.item-description > li > span.item-state > i.icon-heart-fill {display: inline-block; width: 24px; height: 21px; background: url('../img/icon/heart_fill.png') no-repeat center/contain;} #mypage > div.container > div.tab-content > div.mypage-content > div.shopping-list > ul > li > span { cursor: pointer;position: absolute; z-idex: 1000; right: 20px; top: 20px; } #mypage > div.container > div.tab-content > div.mypage-content > div.shopping-list > ul > li > span > i.icon-heart-fill { display: inline-block; width: 24px; height: 21px; background: url('../img/icon/heart_fill.png') no-repeat center/contain; } #mypage > div.container > div.tab-content > div.mypage-content > div.shopping-list > ul > li > a > ul.item-description > li > span.item-date {display: inline-block; margin-bottom: 10px; font-size: 12px; color: #999;} #mypage > div.container > div.tab-content > div.mypage-content > div.shopping-list > ul > li > a > ul.item-description > li > span.item-title {font-size: 18px; font-weight: bold; color: #373737;} #mypage > div.container > div.tab-content > div.mypage-content > div.shopping-list > ul > li > a > ul.item-description > li > span.item-description {font-size: 14px; color: #333;} #mypage > div.container > div.tab-content > div.mypage-content > div.shopping-list > ul > li > a > ul.item-description > li > span.item-price {display: inline-block; margin-top: 20px; font-size: 16px; font-weight: bold; color: #333;} @media (max-width: 767px) { #mypage > div.container > div.tab-content > div.mypage-content > div.shopping-list {width: 100%;} #mypage > div.container > div.tab-content > div.mypage-content > div.shopping-list > ul > li > a > div.item-thumbnail {display: block; float: none; width: 100%; height: auto;} #mypage > div.container > div.tab-content > div.mypage-content > div.shopping-list > ul > li > a > div.item-thumbnail > img {width: 100%; height: auto !important; } #mypage > div.container > div.tab-content > div.mypage-content > div.shopping-list > ul > li > a > ul.item-description {padding: 10px 0;} } /*=====mypage shopping=====*/ /*=====mypage reservation=====*/ #mypage > div.container > div.tab-content > div.mypage-content > div.reservation-list {width: 800px; margin: 0 auto;} #mypage > div.container > div.tab-content > div.mypage-content > div.reservation-list > div.list-item {margin-bottom: 40px;} #mypage > div.container > div.tab-content > div.mypage-content > div.reservation-list > div.list-item > div.item-header {position: relative; overflow: hidden; padding: 20px 30px 20px 70px; border: 1px solid #f05b73;} #mypage > div.container > div.tab-content > div.mypage-content > div.reservation-list > div.list-item > div.item-header > i.icon-calendar {position: absolute; width: 30px; height: 33px; top: 50%; left: 30px; transform: translateY(-50%); background: url(../img/icon/calendar02.png) no-repeat center/cover;} #mypage > div.container > div.tab-content > div.mypage-content > div.reservation-list > div.list-item > div.item-header > p.reservation-no {font-size: 18px; font-weight: bold; color: #f05b73;} #mypage > div.container > div.tab-content > div.mypage-content > div.reservation-list > div.list-item > div.item-header > p.reservation-date {font-size: 14px; color: #666;} #mypage > div.container > div.tab-content > div.mypage-content > div.reservation-list > div.list-item > div.item-header > span.reservation-state {position: absolute; top: 50%; right: 30px; transform: translateY(-50%); font-size: 14px; font-weight: bold; color: #f05b73;} #mypage > div.container > div.tab-content > div.mypage-content > div.reservation-list > div.list-item > div.item-content {position: relative; overflow: hidden; padding: 30px 50px; border: 1px solid #f1f1f1; border-top: 0;} #mypage > div.container > div.tab-content > div.mypage-content > div.reservation-list > div.list-item > div.item-content > div.item-title {font-size: 20px; font-weight: bold; color: #000;} #mypage > div.container > div.tab-content > div.mypage-content > div.reservation-list > div.list-item > div.item-content > div.item-title > span {display: block; font-size: 14px; color: #999;} #mypage > div.container > div.tab-content > div.mypage-content > div.reservation-list > div.list-item > div.item-content > div.item-place {position: relative; font-size: 14px; color: #666; line-height: 40px; padding-left: 20px;} #mypage > div.container > div.tab-content > div.mypage-content > div.reservation-list > div.list-item > div.item-content > div.item-place > i.icon-pin {position: absolute; width: 14px; height: 20px; top: 50%; left: 0px; transform: translateY(-50%); background: url(../img/icon/pin.png) no-repeat center/cover;} #mypage > div.container > div.tab-content > div.mypage-content > div.reservation-list > div.list-item > div.item-content > div.item-place > i.icon-phone { position: absolute; width: 14px; height: 20px; top: 50%; left: 0px; transform: translateY(-50%); background: url(../img/icon/bbs03.png) no-repeat center/cover; } #mypage > div.container > div.tab-content > div.mypage-content > div.reservation-list > div.list-item > div.item-content > div.item-option {font-size: 14px; color: #000; } #mypage > div.container > div.tab-content > div.mypage-content > div.reservation-list > div.list-item > div.item-content > div.item-option > span {display: block; font-size: 14px; font-weight: bold; color: #999;} #mypage > div.container > div.tab-content > div.mypage-content > div.reservation-list > div.list-item > div.item-content > ul.item-details {position: relative; overflow: hidden; margin: 25px 0 0; padding: 10px 0; border-top: 1px solid #f1f1f1;} #mypage > div.container > div.tab-content > div.mypage-content > div.reservation-list > div.list-item > div.item-content > ul.item-details > li {padding: 10px 0; font-size: 14px; color: #000;} #mypage > div.container > div.tab-content > div.mypage-content > div.reservation-list > div.list-item > div.item-content > ul.item-details > li > span {float: right; font-weight: bold;} #mypage > div.container > div.tab-content > div.mypage-content > div.reservation-list > div.list-item > div.item-content > ul.item-details > li > span > small {font-size: 14px; font-weight: normal;} #mypage > div.container > div.tab-content > div.mypage-content > div.reservation-list > div.list-item > div.item-content > ul.item-details > li.event > span {color: #e50f0f;} #mypage > div.container > div.tab-content > div.mypage-content > div.reservation-list > div.list-item > div.item-content > ul.item-details > li.point > span {color: #168bf8;} #mypage > div.container > div.tab-content > div.mypage-content > div.reservation-list > div.list-item > div.item-content > ul.item-details > li.total {border-top: 1px solid #f1f1f1; margin-top: 10px; font-size: 18px;} #mypage > div.container > div.tab-content > div.mypage-content > div.reservation-list > div.list-item > div.item-content > ul.item-details > li.total > span {font-weight: 900;} #mypage > div.container > div.tab-content > div.mypage-content > div.reservation-list > div.list-item > div.item-content > ul.item-details > li.total > span > small {font-size: 18px;} #mypage > div.container > div.tab-content > div.mypage-content > div.reservation-list > div.list-item > div.item-bottom {position: relative; overflow: hidden;} #mypage > div.container > div.tab-content > div.mypage-content > div.reservation-list > div.list-item > div.item-bottom > a {float: left; width: 50%; height: 50px; line-height: 50px; text-align: center; font-size: 16px; font-weight: bold; color: #fff; background: #f05b73;} #mypage > div.container > div.tab-content > div.mypage-content > div.reservation-list > div.list-item > div.item-bottom > a.cancel {background: #999;} #mypage > div.container > div.tab-content > div.mypage-content > div.reservation-list > div.list-item > div.item-bottom > a.review {background: #5b9ef0;} #mypage > div.container > div.tab-content > div.mypage-content > div.reservation-list > div.list-item > div.item-bottom > a.re-reservation {background: transparent; border: 1px solid #f05b73; color: #f05b73; box-sizing: border-box;} #mypage > div.container > div.tab-content > div.mypage-content > div.reservation-list > div.list-item > div.item-bottom > a.wp100 { width: 100%; } #mypage > div.container > div.tab-content > div.mypage-content > div.reservation-list > div.list-item.past > div.item-header {border-color: #999;} #mypage > div.container > div.tab-content > div.mypage-content > div.reservation-list > div.list-item.past > div.item-header > i.icon-calendar {background: url(../img/icon/calendar02_g.png) no-repeat center/cover} #mypage > div.container > div.tab-content > div.mypage-content > div.reservation-list > div.list-item.past > div.item-header > p.reservation-no {color: #666;} #mypage > div.container > div.tab-content > div.mypage-content > div.reservation-list > div.list-item.past > div.item-header > span.reservation-state {color: #666;} @media (max-width: 767px) { #mypage > div.container > div.tab-content > div.mypage-content > div.reservation-list > div.list-item > div.item-content { padding: 20px 20px; } #mypage > div.container > div.tab-content > div.mypage-content > div.reservation-list > div.list-item > div.item-content > ul.item-details { margin: 15px 0 0; } #mypage > div.container > div.tab-content > div.mypage-content > div.reservation-list > div.list-item > div.item-content > ul.item-details > li {padding: 2px 0; } } /* #mypage > div.container > div.tab-content > div.mypage-content > div.reservation-list */ #review-popup > div.container {width: 600px;} #review-popup > div.container > div.popup-title {} #review-popup > div.container > div.review-form > p {text-align: right; font-size: 14px; color: #000;} #review-popup > div.container > div.review-form > p > span {font-weight: bold;} #review-popup > div.container > div.review-form > div.rating {margin-bottom: 30px; text-align: center;} #review-popup > div.container > div.review-form > div.rating > input[type=radio] {position: absolute; opacity: 0; display: none;} #review-popup > div.container > div.review-form > div.rating > label {display: inline-block; width: 15px; height: 15px; background: url('../img/icon/rating_off.png') no-repeat center/cover; cursor: pointer;} #review-popup > div.container > div.review-form > div.rating > label.on {background: url('../img/icon/rating_on.png') no-repeat center/cover;} #review-popup > div.container > div.review-form > div.review-item {font-size: 18px; font-weight: bold; color: #000; text-align: center; margin-bottom: 30px;} #review-popup > div.container > div.review-form > textarea {height: auto; padding: 20px;} #review-popup > div.container > div.popup-bottom {margin-top: 30px;} #review-popup > div.container > div.popup-bottom > a {display: block; width: 100%; line-height: 50px; font-size: 16px; font-weight: bold; color: #fff; text-align: center; background: #f05b73;} #review-popup > div.container > div.popup-bottom > .review-submit {display: block; width: 100%; line-height: 50px; font-size: 16px; font-weight: bold; color: #fff; text-align: center; background: #f05b73;} #mypage > div.container > div.tab-content > div.mypage-content > div.reservation-list > ul > li {padding: 30px; border: 1px solid #f1f1f1; overflow: hidden; margin-bottom: 20px;} #mypage > div.container > div.tab-content > div.mypage-content > div.reservation-list > ul > li > div.item-thumbnail > i.icon-heart {position: absolute; display: block; top: 5px; right: 5px; width: 24px; height: 21px; background: url(../img/icon/heart.png) no-repeat center/contain;} #mypage > div.container > div.tab-content > div.mypage-content > div.reservation-list > ul > li > div.item-thumbnail > i.icon-heart-fill { position: absolute; cursor: pointer; display: block; top: 5px; right: 5px; width: 24px; height: 21px; background: url(../img/icon/heart_fill.png) no-repeat center/contain; z-index: 100; } #mypage > div.container > div.tab-content > div.mypage-content > div.reservation-list > ul > li > div.item-thumbnail { position: relative; float: left; margin-right: 20px; width: 220px; padding-bottom: 20%; background-repeat: no-repeat; background-size: cover; background-position: center center; background-color: #e8e8e8; } #mypage > div.container > div.tab-content > div.mypage-content > div.reservation-list > ul > li > ul.item-description {position: relative; padding-left: 240px;} #mypage > div.container > div.tab-content > div.mypage-content > div.reservation-list > ul > li > ul.item-description > li > span {position: relative; font-size: 14px; line-height: 30px; padding-left: 30px;} #mypage > div.container > div.tab-content > div.mypage-content > div.reservation-list > ul > li > ul.item-description > li > span.item-title {font-size: 18px; font-weight: bold; color: #373737; padding: 0;} #mypage > div.container > div.tab-content > div.mypage-content > div.reservation-list > ul > li > ul.item-description > li > span.item-rating {float: left; margin-right: 20px; line-height: 26px; padding: 0;} #mypage > div.container > div.tab-content > div.mypage-content > div.reservation-list > ul > li > ul.item-description > li > span.item-review {padding: 0;} #mypage > div.container > div.tab-content > div.mypage-content > div.reservation-list > ul > li > ul.item-description > li > span > i.icon {position: absolute; width: 20px; height: 20px; top: 50%; left: 0; transform: translateY(-50%);} #mypage > div.container > div.tab-content > div.mypage-content > div.reservation-list > ul > li > ul.item-description > li > span > i.icon-pin {background: url(../img/icon/pin.png) no-repeat center/contain;} #mypage > div.container > div.tab-content > div.mypage-content > div.reservation-list > ul > li > ul.item-description > li > span > i.icon-call {background: url(../img/icon/call.png) no-repeat center/contain;} #mypage > div.container > div.tab-content > div.mypage-content > div.reservation-list > ul > li > ul.item-description > li > span > i.icon-home {background: url(../img/icon/home.png) no-repeat center/contain;} @media (max-width: 767px) { #mypage > div.container > div.tab-content > div.mypage-content > div.reservation-list {width: 100%;} #review-popup > div.container {width: 100%; height: 100%;} #mypage > div.container > div.tab-content > div.mypage-content > div.reservation-list > ul > li> div.item-thumbnail {display: block; float: none; width: 100%; height: auto;} #mypage > div.container > div.tab-content > div.mypage-content > div.reservation-list > ul > li> div.item-thumbnail > img {width: 100%; height: auto;} #mypage > div.container > div.tab-content > div.mypage-content > div.reservation-list > ul > li > ul.item-description {padding: 10px 0;} #mypage > div.container > div.tab-content > div.mypage-content > div.reservation-list > ul > li > div.item-thumbnail { width: 100%; padding-bottom: 55%; } } /*=====mypage reservation=====*/ /*=====mypage profile=====*/ #profile {padding: 50px 0;} #profile > div.container {width: 800px} #profile > div.container > h2 {font-size: 30px; font-weight: bold; color: #000; text-align: center;} #profile > div.container > form > div.profile-form {padding: 50px 150px; border: 1px solid #f1f1f1;} #profile > div.container > form > div.profile-form > div.profile-img {text-align: center;} #profile > div.container > form > div.profile-form > div.profile-img > input {display: none;} #profile > div.container > form > div.profile-form > div.profile-img > label {display: block; border: 1px solid #f05b73; font-size: 14px; font-weight: bold; color: #f05b73; width: 120px; line-height: 40px; margin: 15px auto; text-align: center;} #member > div.container > form > div.member-form-box > div.profile-img {text-align: center;} #member > div.container > form > div.member-form-box > div.profile-img > img { width: 120px; height: 120px !important; border-radius: 50%; } #member > div.container > form > div.member-form-box > div.profile-img > input {display: none;} #member > div.container > form > div.member-form-box > div.profile-img > label {display: block; border: 1px solid #f05b73; font-size: 14px; font-weight: bold; color: #f05b73; width: 120px; line-height: 40px; margin: 15px auto; text-align: center;} #member > div.container > form > div.form-bottom { text-align: center; } #member > div.container > form > div.form-bottom > a {display: inline-block; font-size: 15px; font-weight: bold; color: #e80b0b; margin-top: 20px;} #member > div.container > form > div.form-bottom > a::after {content: ''; display: block; border-bottom: 1px solid #e80b0b; margin-top: 3px;} #profile > div.container > form > div.profile-form > div.input-box {position: relative; overflow: hidden; display: table; width: 100%;} #profile > div.container > form > div.profile-form > div.input-box > span {display: table-cell; width: 100px; padding: 14px 0; font-size: 14px; font-weight: bold; color: #666; vertical-align: middle;} #profile > div.container > form > div.profile-form > div.input-box > p {display: table-cell; width: 100%; float: left; padding: 14px 15px; font-size: 14px; color: #000; vertical-align: middle;} #profile > div.container > form > div.profile-form > div.input-box > input {display: table-cell; width: 100%; height: auto; float: left; padding: 14px 15px; font-size: 14px; color: #000; vertical-align: middle; border: 0; border-bottom: 1px solid #ccc; border-radius: 0;} #profile > div.container > form > div.form-bottom {position: relative; overflow: hidden; margin: 20px -10px; text-align: center;} #profile > div.container > form > div.form-bottom > div {float: left; width: 50%; padding: 0 10px;} #profile > div.container > form > div.form-bottom > div > a {display: block; width: 100%; line-height: 50px; font-size: 16px; font-weight: bold; color: #fff; background: #f05b73; text-align: center;} #profile > div.container > form > div.form-bottom > div > a.cancel {background: #999;} #profile > div.container > form > div.form-bottom > a {display: inline-block; font-size: 15px; font-weight: bold; color: #e80b0b; margin-top: 20px;} #profile > div.container > form > div.form-bottom > a::after {content: ''; display: block; border-bottom: 1px solid #e80b0b; margin-top: 3px;} #leave-popup > div.container {width: 400px;} #leave-popup > div.container > div.popup-title {font-size: 18px; line-height: 36px;} #leave-popup > div.container > div.popup-bottom {position: relative; overflow: hidden; margin: 0 -10px;} #leave-popup > div.container > div.popup-bottom > div {float: left; width: 50%; padding: 10px;} #leave-popup > div.container > div.popup-bottom > div > a {display: block; font-size: 16px; font-weight: bold; color: #fff; text-align: center; background: #f05b73; line-height: 50px;} #leave-popup > div.container > div.popup-bottom > div > a.cancel {background: #999;} @media (max-width: 767px) { #profile {padding: 20px 0;} #profile > div.container {width: 100%; padding: 10px;} #profile > div.container > form > div.profile-form {padding: 20px;} #leave-popup > div.container {width: 100%; margin-top: 50%;} } /*=====mypage profile=====*/ /******mypage_*.html******/ /******beautytip-*.html******/ /*=====beautytip list=====*/ #beautytip-list {padding: 70px 0;} #beautytip-list > div.container > div.list-main {position: relative; overflow: hidden; margin: 0 -15px; padding-bottom: 50px; border-bottom: 1px solid #f1f1f1; margin-bottom: 20px;} #beautytip-list > div.container > div.list-main > ul {position: relative; overflow: hidden;} #beautytip-list > div.container > div.list-main > ul > li {width: 33.3%; float: left; padding: 0 15px;} #beautytip-list > div.container > div.list-main > ul > li > div.item-thumbnail {position: relative; width: 100%; margin-bottom: 10px;} #beautytip-list > div.container > div.list-main > ul > li > div.item-thumbnail > img { width: 100%; } #beautytip-list > div.container > div.list-main > ul > li > div.item-thumbnail > a.btn-play {position: absolute; width: 100%; height: 100%; top: 0; left: 0;} #beautytip-list > div.container > div.list-main > ul > li > div.item-thumbnail > a.btn-play > img {position: absolute; top: 50%; left: 50%; margin-top: -30px; margin-left: -30px;} #beautytip-list > div.container > div.list-main > ul > li > div.item-title {font-size: 20px; font-weight: 900; color: #000;} #beautytip-list > div.container > div.list-main > ul > li > div.item-writer {font-size: 14px; color: #999;} #beautytip-list > div.container > div.list-main > div.swiper-container div.item-thumbnail {position: relative; width: 100%; margin-bottom: 10px;} #beautytip-list > div.container > div.list-main > div.swiper-container div.item-thumbnail > img { width: 100%; } #beautytip-list > div.container > div.list-main > div.swiper-container div.item-thumbnail > a.btn-play {position: absolute; width: 100%; height: 100%; top: 0; left: 0;} #beautytip-list > div.container > div.list-main > div.swiper-container div.item-thumbnail > a.btn-play > img {position: absolute; top: 50%; left: 50%; margin-top: -30px; margin-left: -30px;} #beautytip-list > div.container > div.list-main > div.swiper-container div.item-title {font-size: 20px; font-weight: 900; color: #000;} #beautytip-list > div.container > div.list-main > div.swiper-container div.item-writer {font-size: 14px; color: #999;} #beautytip-list > div.container > ul.tab-nav {position: relative; overflow: hidden; text-align: center;} #beautytip-list > div.container > ul.tab-nav > li {display: inline-block; max-width: 200px; width: 100%;} #beautytip-list > div.container > ul.tab-nav > li > a {display: inline-block; font-size: 16px; font-weight: bold; color: #666; padding: 20px 35px;} #beautytip-list > div.container > ul.tab-nav > li.active > a {color: #f05b73; border-bottom: 4px solid #f05b73;} #beautytip-list > div.container > div.tab-content {margin-top: 30px;} #beautytip-list > div.container > div.tab-content > ul {position: relative; overflow: hidden; margin: 0 -15px; } #beautytip-list > div.container > div.tab-content > ul > li {position: relative; float: left; width: 25%; padding: 0 15px;} #beautytip-list > div.container > div.tab-content > ul > li > a > div.item-thumbnail {position: relative; height: 157px;} #beautytip-list > div.container > div.tab-content > ul > li > a > div.item-thumbnail > img {height: 100%;} #beautytip-list > div.container > div.tab-content > ul > li > a > div.item-thumbnail > img.btn-play {position: absolute; top: 50%; left: 50%; height: auto; margin-top: -30px; margin-left: -30px;} #beautytip-list > div.container > div.tab-content > ul > li > a > ul.item-description {position: relative; overflow: hidden; padding: 10px 0;} #beautytip-list > div.container > div.tab-content > ul > li > a > ul.item-description > li {position: relative; padding-bottom: 5px;} #beautytip-list > div.container > div.tab-content > ul > li > a > ul.item-description > li > span {position: relative; font-size: 12px; color: #666;} #beautytip-list > div.container > div.tab-content > ul > li > a > ul.item-description > li > span.item-title {font-size: 16px; font-weight: bold; color: #000; margin-bottom: 10px;} #beautytip-list > div.container > div.tab-content > ul > li > a > ul.item-description > li > span.seperator {margin: 0 8px;} #beautytip-list > div.container > div.tab-content > ul > li > a > ul.item-description > li > span.play, #beautytip-list > div.container > div.tab-content > ul > li > a > ul.item-description > li > span.heart {padding-left: 20px;} #beautytip-list > div.container > div.tab-content > ul > li > a > ul.item-description > li > span.play {margin-right: 20px;} #beautytip-list > div.container > div.tab-content > ul > li > a > ul.item-description > li > span > i.viwe_count { position: absolute; width: 11px; height: 12px; top: 1px; left: 0; color: #f05b73; font-size: 15px; } #beautytip-list > div.container > div.tab-content > ul > li > a > ul.item-description > li > span > i.icon-play {position: absolute; width: 11px; height: 12px; top: 50%; left: 0; transform: translateY(-50%); background: url(../img/icon/play.png) no-repeat center/cover;} #beautytip-list > div.container > div.tab-content > ul > li > a > ul.item-description > li > span > i.icon-heart-fill {position: absolute; width: 14px; height: 12px; top: 50%; left: 0; transform: translateY(-50%); background: url(../img/icon/heart_fill.png) no-repeat center/cover;} #beautytip-list > div.container > div.tab-content > div.list-bottom {margin-top: 40px; text-align: center;} #beautytip-list > div.container > div.tab-content > div.list-bottom > a {position: relative; display: inline-block; font-size: 12px; font-weight: bold; color: #666; border: 1px solid #ccc; padding: 10px 20px 10px 30px;} #beautytip-list > div.container > div.tab-content > div.list-bottom > a > i.icon-arr-down {position: absolute; width: 13px; height: 12px; top: 50%; left: 10px; transform: translateY(-50%); background: url(../img/icon/arr_down.png) no-repeat center/cover;} @media (max-width: 767px) { #beautytip-list {padding: 20px 0;} #beautytip-list > div.container {padding: 15px;} #beautytip-list > div.container > div.list-main > ul > li {width: 100%; margin-bottom: 20px;} #beautytip-list > div.container > ul.tab-nav > li {width: 33.3%; float: left;} #beautytip-list > div.container > ul.tab-nav > li > a {padding: 20px 0;} #beautytip-list > div.container > div.tab-content > ul > li {width: 100%;} #beautytip-list > div.container > div.tab-content > ul > li > a > div.item-thumbnail {height: auto;} #beautytip-list > div.container > div.tab-content > ul > li > a > div.item-thumbnail > img {width: 100%; height: auto;} #beautytip-list > div.container > div.tab-content > ul > li > a > div.item-thumbnail > img.btn-play {max-width: 100%; width: auto;} } /*=====beautytip list=====*/ /*=====beautytip view=====*/ #beautytip-view {padding: 50px 0;} #beautytip-view > div.container {max-width: 960px;} #beautytip-view > div.container > div.beautytip-view-main {position: relative; width: 100%; height: 540px;} #beautytip-view > div.container > div.beautytip-view-main > a.btn-play {position: absolute; width: 100%; height: 100%; top: 0; left: 0;} #beautytip-view > div.container > div.beautytip-view-main > a.btn-play > img {position: absolute; top: 50%; left: 50%; margin-top: -30px; margin-left: -30px;} #beautytip-view > div.container > div.beautytip-view-info {display: table; width: 100%; margin: 40px 0 25px;} #beautytip-view > div.container > div.beautytip-view-info > div {position: relative; display: table-cell; vertical-align: middle;} #beautytip-view > div.container > div.beautytip-view-info > div.writer-profile {width: 70px;} #beautytip-view > div.container > div.beautytip-view-info > div.writer-profile > img {width: 50px; height: 50px; border-radius: 50%;} #beautytip-view > div.container > div.beautytip-view-info > div.view-info > h2.title {font-size: 18px; font-weight: 900; color: #000;} #beautytip-view > div.container > div.beautytip-view-info > div.view-info > div.info > span {font-size: 14px; color: #000;} #beautytip-view > div.container > div.beautytip-view-info > div.view-info > div.info > span.seperator {margin: 0 8px; color: #ccc;} #beautytip-view > div.container > div.beautytip-view-info > div.view-info > div.info > span > strong {font-size: 14px; font-weight: bold} #beautytip-view > div.container > div.beautytip-view-info > div.view-info > div.info > span > strong.hit {color: #f05b73} #beautytip-view > div.container > div.beautytip-view-info > div.view-info-right {text-align: right;} #beautytip-view > div.container > div.beautytip-view-info > div.view-info-right > span {position: relative; padding-left: 25px; font-size: 14px; color: #666;} #beautytip-view > div.container > div.beautytip-view-info > div.view-info-right > span.seperator {margin: 0 8px; padding: 0;} #beautytip-view > div.container > div.beautytip-view-info > div.view-info-right > span > i.icon-heart-fill {position: absolute; width: 18px; height: 17px; top: 50%; left: 0; transform: translateY(-50%); background: url(../img/icon/heart_fill.png) no-repeat center/contain;} #beautytip-view > div.container > div.beautytip-view-info > div.view-info-right > span > i.icon-comment { position: absolute; width: 18px; height: 17px; top: 50%; left: 0; transform: translateY(-50%); background: url(../img/icon/comment.png) no-repeat center/contain; } #beautytip-view > div.container > div.beautytip-view-info-bottom {padding: 10px 0; border-top: 1px solid #eee; border-bottom: 1px solid #eee;} #beautytip-view > div.container > div.beautytip-view-info-bottom > span {position: relative; font-size: 14px; color: #666; padding-left: 20px;} #beautytip-view > div.container > div.beautytip-view-info-bottom > span.seperator {margin: 0 8px; padding: 0;} #beautytip-view > div.container > div.beautytip-view-info-bottom > span > strong {font-size: 14px; color: #000;} #beautytip-view > div.container > div.beautytip-view-info-bottom > span > i.icon-timer {position: absolute; width: 14px; height: 14px; top: 50%; left: 0; transform: translateY(-50%); background: url(../img/icon/timer.png) no-repeat center/contain;} #beautytip-view > div.container > div.beautytip-view-info-bottom > span > i.icon-play {position: absolute; width: 14px; height: 14px; top: 50%; left: 0; transform: translateY(-50%); background: url(../img/icon/play.png) no-repeat center/contain;} #beautytip-view > div.container > div.beautytip-view-info-bottom > span > i.icon-heart-fill {position: absolute; width: 14px; height: 14px; top: 50%; left: 0; transform: translateY(-50%); background: url(../img/icon/heart_fill.png) no-repeat center/contain;} #beautytip-view > div.container > div.beautytip-view-content {padding: 30px 0; border-bottom: 1px solid #eee; font-size: 14px; color: #000;} #beautytip-view > div.container > div.beautytip-view-info.post {display: block;} #beautytip-view > div.container > div.beautytip-view-info.post > div {display: block;} #beautytip-view > div.container > div.beautytip-view-info.post > div.writer-profile {width: auto; height: 50px; margin-bottom: 20px;} #beautytip-view > div.container > div.beautytip-view-info.post > div.writer-profile > span {font-size: 16px; font-weight: bold; color: #000; margin-left: 20px;} #beautytip-view > div.container > div.beautytip-view-info.post > div.writer-profile > div.btn-box {float: right; height: 50px; line-height: 50px;} #beautytip-view > div.container > div.beautytip-view-info.post > div.writer-profile > div.btn-box > a {font-size: 14px; color: #666;} #beautytip-view > div.container > div.beautytip-view-info.post > div.writer-profile > div.btn-box > span {margin: 0 20px;} #beautytip-view > div.container > div.beautytip-view-info.post > div.view-info > h2.title {font-size: 30px; margin-bottom: 10px;} #beautytip-view > div.container > div.beautytip-view-content > div.content-bottom {text-align: right;} #beautytip-view > div.container > div.beautytip-view-content > div.content-bottom > span {position: relative; padding-left: 25px; font-size: 14px; color: #666;} #beautytip-view > div.container > div.beautytip-view-content > div.content-bottom > span.seperator {margin: 0 8px; padding: 0;} #beautytip-view > div.container > div.beautytip-view-content > div.content-bottom > span > i.icon-heart-fill {position: absolute; width: 18px; height: 17px; top: 50%; left: 0; transform: translateY(-50%); background: url(../img/icon/heart_fill.png) no-repeat center/contain;} #beautytip-view > div.container > div.beautytip-view-content > div.content-bottom > span > i.icon-comment {position: absolute; width: 18px; height: 17px; top: 50%; left: 0; transform: translateY(-50%); background: url(../img/icon/comment.png) no-repeat center/contain;} #beautytip-view > div.container > div.beautytip-view-other {padding: 40px 0 60px; border-bottom: 1px solid #eee;} #beautytip-view > div.container > div.beautytip-view-other > div.profile {font-size: 16px; font-weight: bold; color: #000;} #beautytip-view > div.container > div.beautytip-view-other > div.profile > img {width: 50px; height: 50px; border-radius: 50%; margin-right: 20px;} #beautytip-view > div.container > div.beautytip-view-other > ul {position: relative; overflow: hidden; margin: 30px -10px 0;} #beautytip-view > div.container > div.beautytip-view-other > ul > li {position: relative; float: left; width: 25%; padding: 0 10px;} #beautytip-view > div.container > div.beautytip-view-comment {padding: 50px 0 0;} #beautytip-view > div.container > div.beautytip-view-comment > div.comment-form-box {position: relative; overflow: hidden;} #beautytip-view > div.container > div.beautytip-view-comment > div.comment-form-box > form > textarea {height: auto; border-radius: 0; padding: 30px; font-size: 14px;} #beautytip-view > div.container > div.beautytip-view-comment > div.comment-form-box > form > a {display: block; float: right; margin-top: 20px; width: 120px; line-height: 40px; text-align: center; font-size: 14px; font-weight: bold; color: #f05b73; border: 1px solid #f05b73;} #beautytip-view > div.container > div.beautytip-view-comment > div.comment-form-box > form > input[type="submit"] { display: block; float: right; margin-top: 20px; width: 120px; line-height: 40px; text-align: center; font-size: 14px; font-weight: bold; color: #f05b73; border: 1px solid #f05b73; background: #fff; } @media (max-width: 767px) { #beautytip-view > div.container > div.beautytip-view-info.post > div.view-info > h2.title {font-size: 16px; } #beautytip-view > div.container > div.beautytip-view-content {font-size: 12px; } } span.comment-form-box {position: relative; overflow: hidden;} span.comment-form-box > form > textarea {height: auto; border-radius: 0; padding: 30px; font-size: 14px;} span.comment-form-box > form > a {display: block; float: right; margin-top: 20px; width: 120px; line-height: 40px; text-align: center; font-size: 14px; font-weight: bold; color: #f05b73; border: 1px solid #f05b73;} span.comment-form-box > form > input[type="submit"] { display: block; float: right; margin-top: 20px; width: 120px; line-height: 40px; text-align: center; font-size: 14px; font-weight: bold; color: #f05b73; border: 1px solid #f05b73; background: #fff; } #beautytip-view > div.container > div.beautytip-view-comment > ul {position: relative; overflow: hidden;} #beautytip-view > div.container > div.beautytip-view-comment > ul > li {border-bottom: 1px solid #eee; padding: 20px 0 40px;} #beautytip-view > div.container > div.beautytip-view-comment > ul > li > div.comment-header {position: relative; overflow: hidden; margin-bottom: 30px; height: 50px;} #beautytip-view > div.container > div.beautytip-view-comment > ul > li > div.comment-header > div.profile {float: left; font-size: 16px; font-weight: bold; color: #000;} #beautytip-view > div.container > div.beautytip-view-comment > ul > li > div.comment-header > div.profile > img {margin-right: 20px; border-radius: 50%; width: 50px; height: 50px; } #beautytip-view > div.container > div.beautytip-view-comment > ul > li > div.comment-header > div.profile > span {font-size: 12px; font-weight: normal; margin-left: 10px;} #beautytip-view > div.container > div.beautytip-view-comment > ul > li > div.comment-header > div.btn-box {float: right; height: 50px; line-height: 50px;} #beautytip-view > div.container > div.beautytip-view-comment > ul > li > div.comment-header > div.btn-box > a {font-size: 14px; color: #666;} #beautytip-view > div.container > div.beautytip-view-comment > ul > li > div.comment-header > div.btn-box > span.seperator {margin: 0 20px;} #beautytip-view > div.container > div.beautytip-view-comment > ul > li > div.comment-content {font-size: 16px; color: #666;} #beautytip-view > div.container > div.beautytip-view-comment > div.comment-bottom {margin-top: 40px; text-align: center;} #beautytip-view > div.container > div.beautytip-view-comment > div.comment-bottom > a {position: relative; display: inline-block; font-size: 12px; font-weight: bold; color: #666; border: 1px solid #ccc; padding: 10px 20px 10px 30px;} #beautytip-view > div.container > div.beautytip-view-comment > div.comment-bottom > a > i.icon-arr-down {position: absolute; width: 13px; height: 12px; top: 50%; left: 10px; transform: translateY(-50%); background: url(../img/icon/arr_down.png) no-repeat center/cover;} @media (max-width: 767px) { #beautytip-view {padding: 0 0 50px;} #beautytip-view > div.container > div.beautytip-view-main {height: auto;} #beautytip-view > div.container > div.beautytip-view-info {margin: 20px 0 15px; padding: 0 10px;} #beautytip-view > div.container > div.beautytip-view-info > div.view-info-right {display: none;} #beautytip-view > div.container > div.beautytip-view-info-bottom {padding: 10px;} #beautytip-view > div.container > div.beautytip-view-content {padding: 30px 10px;} #beautytip-view > div.container > div.beautytip-view-other {padding: 40px 10px 60px;} #beautytip-view > div.container > div.beautytip-view-comment {padding: 50px 10px 0;} } /*=====beautytip view=====*/ /******beautytip-*.html******/ /******beautyshop_*.html******/ /*=====beautyshop list=====*/ #beautyshop-list > div.container {max-width: 100%;} #beautyshop-list > div.container > div.category-container {position: relative; overflow: hidden; width: 100%; padding: 40px 0; background: #f1f1f1;} #beautyshop-list > div.container > div.category-container > div.category {width: 1200px; margin: 0 auto; overflow: hidden;} #beautyshop-list > div.container > div.category-container > div.category > h2 {position: absolute; top: 50%; margin-top: -20px; font-size: 25px; } #beautyshop-list > div.container > div.category-container > div.category > div.category-swiper {width: 1070px; float: right; position: relative; overflow: hidden;} #beautyshop-list > div.container > div.category-container > div.category > div.category-swiper > div.swiper-wrapper > div.swiper-slide > a > div.category-thumbnail { position: relative; overflow: hidden; width: 100px; height: 100px; line-height: 100px; margin: 0 auto; text-align: center; border: 1px solid #eee; border-radius: 50%; background: #fff; } #beautyshop-list > div.container > div.category-container > div.category > div.category-swiper > div.swiper-wrapper > div.swiper-slide > a > span { display: block; font-size: 16px; font-weight: bold; color: #999; text-align: center; margin-top: 20px; } #beautyshop-list > div.container > div.category-container > div.category > div.category-swiper > div.swiper-wrapper > div.swiper-slide > a > div.category-thumbnail.on {border-color: #f05b73;} #beautyshop-list > div.container > div.category-container > div.category > div.category-swiper > div.swiper-wrapper > div.swiper-slide > a > span.on {color: #f05b73;} #beautyshop-list > div.container > div.category-container > div.category > div.category-swiper > div.swiper-button-next, #beautyshop-list > div.container > div.category-container > div.category > div.category-swiper > div.swiper-button-prev {width: 14px; height: 23px; margin-top: -12px; background-size: 14px 23px;} #beautyshop-list > div.container > div.category-container > div.category > div.category-swiper > div.swiper-button-next {right: 0; background-image: url('../img/icon/swiper_next.png');} #beautyshop-list > div.container > div.category-container > div.category > div.category-swiper > div.swiper-button-prev {left: 0; background-image: url('../img/icon/swiper_prev.png');} #beautyshop-list > div.container > div.list-container {position: relative; overflow: hidden; width: 1200px; margin: 0 auto; padding: 60px 0;} #beautyshop-list > div.container > div.list-container > div.list-header {position: relative; overflow: hidden; margin-bottom: 30px;} #beautyshop-list > div.container > div.list-container > div.list-header > h2 {display: inline-block; font-size: 24px; font-weight: bold; color: #000;} #beautyshop-list > div.container > div.list-container > div.list-header > ul.list-tab {float: right;} #beautyshop-list > div.container > div.list-container > div.list-header > ul.list-tab > li {float: left; margin-right: 20px;} #beautyshop-list > div.container > div.list-container > div.list-header > ul.list-tab > li:last-child {margin: 0;} #beautyshop-list > div.container > div.list-container > div.list-header > ul.list-tab > li > a {position: relative; display: block; font-size: 14px; color: #999; line-height: 36px; padding-left: 12px;} #beautyshop-list > div.container > div.list-container > div.list-header > ul.list-tab > li > a::before {content: ''; display: block; position: absolute; width: 6px; height: 6px; top: 50%; left: 0; margin-top: -3px; background: #ccc;} #beautyshop-list > div.container > div.list-container > div.list-header > ul.list-tab > li.active > a {font-weight: bold; color: #000; padding-left: 22px;} #beautyshop-list > div.container > div.list-container > div.list-header > ul.list-tab > li.active > a::before {background: url('../img/icon/check_t.png'); width: 14px; height: 11px; margin-top: -5px;} #beautyshop-list > div.container > div.list-container > ul {position: relative; overflow: hidden; margin: 0 -2.5px;} #beautyshop-list > div.container > div.list-container > ul > li {float: left; width: 20%; padding: 0 2.5px; text-align: center;} #beautyshop-list > div.container > div.list-container > ul > li:nth-child(n+6) {padding-top: 5px;} #beautyshop-list > div.container > div.list-container > ul > li > a > div.beautyshop-item {width: 100%; padding: 30px 20px; border: 1px solid #eee;} #beautyshop-list > div.container > div.list-container > ul > li > a > div.beautyshop-item > div.item-thumbnail {margin-bottom: 50px;} #beautyshop-list > div.container > div.list-container > ul > li > a > div.beautyshop-item > div.item-description > div.item-tag { font-size: 16px; color: #848484; letter-spacing: -0.5px; display: inline-block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 100%; } #beautyshop-list > div.container > div.list-container > ul > li > a > div.beautyshop-item > div.item-description > div.item-title { font-size: 18px; font-weight: bold; color: #000; letter-spacing: -0.5px; display: inline-block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 100%; } #beautyshop-list > div.container > div.list-container > ul > li > a > div.beautyshop-item > div.item-description > div.item-detail { font-size: 16px; font-weight: 300; letter-spacing: -0.5px; color: #848484; margin-bottom: 10px; } #beautyshop-list > div.container > div.list-container > ul > li > a > div.beautyshop-item > div.item-description > div.item-detail > span { font-size: 16px; font-weight: 300; letter-spacing: -0.5px; color: #848484; margin-bottom: 10px; display: inline-block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 100%; } #beautyshop-list > div.container > div.list-container > ul > li > a > div.beautyshop-item > div.item-description > div.item-price {font-size: 18px; letter-spacing: -0.5px; color: #000;} @media (max-width: 767px) { #beautyshop-list > div.container > div.category-container > div.category {width: 100%;} #beautyshop-list > div.container > div.category-container {position: relative; overflow: hidden; width: 100%; padding: 0px 0 10px; background: #f1f1f1;} #beautyshop-list > div.container > div.category-container > div.category > h2 {display: block; position: relative; margin: 0; padding: 10px; font-size: 15px; margin-bottom: 10px;} #beautyshop-list > div.container > div.category-container > div.category > div.category-swiper {width: calc(100% - 20px); margin: 0px 10px; } #beautyshop-list > div.container > div.list-container {width: 100%; padding: 10px;} #beautyshop-list > div.container > div.list-container > div.list-header {margin-bottom: 10px;} #beautyshop-list > div.container > div.list-container > ul > li {width: 50%; margin-bottom: 10px;} #beautyshop-list > div.container > div.list-container > ul > li > a > div > div.item-thumbnail > img { width: 100% !important; height: auto !important; } #beautyshop-list > div.container > div.list-container > ul > li > a > div.beautyshop-item > div.item-thumbnail {margin-bottom: 20px;} #beautyshop-list > div.container > div.list-container > ul > li > a > div.beautyshop-item > div.item-description > div.item-title { font-size: 15px; } #beautyshop-list > div.container > div.list-container > ul > li > a > div.beautyshop-item > div.item-description > div.item-detail > span { font-size: 12px; margin-bottom: 0px; } #beautyshop-list > div.container > div.category-container > div.category > div.category-swiper > div.swiper-wrapper > div.swiper-slide > a > div.category-thumbnail { width: 60px; height: 60px; line-height: 60px; } #beautyshop-list > div.container > div.category-container > div.category > div.category-swiper > div.swiper-wrapper > div.swiper-slide > a > div.category-thumbnail > img { width: 50%; } #beautyshop-list > div.container > div.category-container > div.category > div.category-swiper > div.swiper-wrapper > div.swiper-slide > a > span { font-size: 12px; margin-top: 10px; font-weight: normal; } #brand-list > div.container > div.category-container > div.category > div.category-swiper > div.swiper-button-next, #brand-list > div.container > div.category-container > div.category > div.category-swiper > div.swiper-button-prev { display: none !important;} #beautyshop-list > div.container > div.list-container > div.list-header > h2 {font-size: 18px; margin-top: 5px; } } /*=====beautyshop list=====*/ /*=====beautyshop view=====*/ #beautyshop-view {padding: 90px 0;} #beautyshop-view > div.container > div.item-info {position: relative; overflow: hidden;} #beautyshop-view > div.container > div.item-info > div.item-gallery {position: relative; float: left; width: 600px;} #beautyshop-view > div.container > div.item-info > div.item-gallery > div.gallery-top > div.swiper-wrapper > div.swiper-slide {border: 1px solid #ccc; text-align: center; padding: 70px;} #beautyshop-view > div.container > div.item-info > div.item-gallery > div.gallery-thumbs {margin-top: 20px;} #beautyshop-view > div.container > div.item-info > div.item-gallery > div.gallery-thumbs > div.swiper-wrapper > div.swiper-slide {border: 1px solid #ccc; padding: 10px; width: 80px !important; height: 80px;} #beautyshop-view > div.container > div.item-info > div.item-detail {position: relative; float: right; width: 550px;} #beautyshop-view > div.container > div.item-info > div.item-detail > h2.item-title {font-size: 30px; font-weight: 900; color: #000; margin-bottom: 25px;} #beautyshop-view > div.container > div.item-info > div.item-detail > div.item-description {font-size: 16px; color: #000; margin-bottom: 30px;} #beautyshop-view > div.container > div.item-info > div.item-detail > div.order-info {border-top: 1px solid #eee; border-bottom: 1px solid #eee; padding: 15px 0; margin-bottom: 30px;} #beautyshop-view > div.container > div.item-info > div.item-detail > div.order-info > div {line-height: 50px; font-size: 16px; color: #000;} #beautyshop-view > div.container > div.item-info > div.item-detail > div.order-info > div > span, #beautyshop-view > div.container > div.item-info > div.item-detail > div.order-info > div > label {display: inline-block; width: 120px;} #beautyshop-view > div.container > div.item-info > div.item-detail > div.order-option {position: relative; overflow: hidden; padding-bottom: 30px; border-bottom: 1px solid #eee; margin-bottom: 30px;} #beautyshop-view > div.container > div.item-info > div.item-detail > div.order-option > div.order-item {font-size: 18px; font-weight: 900; color: #000;} #beautyshop-view > div.container > div.item-info > div.item-detail > div.order-option > div.order-count {position: relative; overflow: hidden;} #beautyshop-view > div.container > div.item-info > div.item-detail > div.order-option > div.order-count > button {float: left; width: 40px; height: 40px; border: 1px solid #ccc; font-size: 0;} div.order-count > button.order-minus {background: url('../img/icon/minus.png') no-repeat center/50%} div.order-count > button.order-plus {background: url('../img/icon/plus.png') no-repeat center/50%} #beautyshop-view > div.container > div.item-info > div.item-detail > div.order-option > div.order-count > input {float: left; width: 60px; height: 40px; text-align: center; font-size: 20px; color: #000;} #beautyshop-view > div.container > div.item-info > div.item-detail > div.order-option > div.order-count > span {float: right; height: 40px; line-height: 40px; font-size: 18px; font-weight: 900; color: #999;} #beautyshop-view > div.container > div.item-info > div.item-detail > div.order-option > div.order-count > span > strong {font-size: 24px; font-weight: 900; color: #000;} #beautyshop-view > div.container > div.item-info > div.item-detail > div.order-total {position: relative; overflow: hidden; margin-bottom: 40px;} #beautyshop-view > div.container > div.item-info > div.item-detail > div.order-total > span {float: right; font-size: 18px; font-weight: 900; color: #999;} #beautyshop-view > div.container > div.item-info > div.item-detail > div.order-total > span > strong {font-size: 30px; font-weight: 900; color: #000;} #beautyshop-view > div.container > div.item-info > div.item-detail > div.order-btn-box {position: relative; overflow: hidden;} #beautyshop-view > div.container > div.item-info > div.item-detail > div.order-btn-box > a, #beautyshop-view > div.container > div.item-info > div.item-detail > div.order-btn-box > input[type="submit"]{ position: relative; display: inline-block; width: 220px; height: 70px; font-size: 20px; font-weight: 900; line-height: 70px; text-align: center; vertical-align: middle; background: #fff; } #beautyshop-view > div.container > div.item-info > div.item-detail > div.order-btn-box > .btn-cart {border: 1px solid #f05b73; color: #f05b73; margin-right: 18px;} #beautyshop-view > div.container > div.item-info > div.item-detail > div.order-btn-box > .btn-buy {background: #f05b73 !important; color: #fff;} #beautyshop-view > div.container > div.item-info > div.item-detail > div.order-btn-box > .btn-scrap {width: 70px; border: 1px solid #ccc; float: right;} #beautyshop-view > div.container > div.item-info > div.item-detail > div.order-btn-box > .btn-scrap > i.icon-heart {position: absolute; width: 24px; height: 21px; top: 50%; left: 50%; transform: translate(-50%,-50%); background: url(../img/icon/heart.png) no-repeat center/contain;} #beautyshop-view > div.container > div.item-tab {position: relative; overflow: hidden; margin-top: 80px;} #beautyshop-view > div.container > div.item-tab > ul {position: relative; overflow: hidden;} #beautyshop-view > div.container > div.item-tab > ul > li {float: left; width: 20%;} #beautyshop-view > div.container > div.item-tab > ul > li > a {display: block; font-size: 16px; font-weight: bold; color: #999; line-height: 50px; text-align: center; border: 1px solid #ccc; border-bottom-color: #000;} #beautyshop-view > div.container > div.item-tab > ul > li.on > a {border-color: #000; border-bottom: 0;} #beautyshop-view > div.container > div.item-tab > div.tab-content {padding: 40px 30px; background: #fff;} #beautyshop-view > div.container > div.item-tab > div.tab-content > div {display: none;} #beautyshop-view > div.container > div.item-tab > div.tab-content > div.on {display: block;} @media (max-width: 767px) { #beautyshop-view {padding: 0;} #beautyshop-view > div.container > div.item-info > div.item-gallery {width: 100%;} #beautyshop-view > div.container > div.item-info > div.item-detail {width: 100%; padding: 10px;} #beautyshop-view > div.container > div.item-info > div.item-detail > div.order-btn-box > a, #beautyshop-view > div.container > div.item-info > div.item-detail > div.order-btn-box > .btn-cart {border: 1px solid #f05b73; color: #f05b73; margin-right: 0px;} #beautyshop-view > div.container > div.item-info > div.item-detail > div.order-btn-box > input[type="submit"] {width: calc(50% - 29px); height: 50px; line-height: 50px; font-size: 16px; } #beautyshop-view > div.container > div.item-info > div.item-detail > div.order-btn-box > .btn-buy {float: left; margin-right: 4px; } #beautyshop-view > div.container > div.item-info > div.item-detail > div.order-btn-box > .btn-scrap {width: 50px; height: 50px; border: 1px solid #ccc; float: right;} #beautyshop-view > div.container > div.item-info > div.item-detail > div.order-btn-box > btn-scrap {width: 100%;} #beautyshop-view > div.container > div.item-info > div.item-gallery { padding: 10px; } #beautyshop-view > div.container > div.item-info > div.item-gallery > div.gallery-top > div.swiper-wrapper > div.swiper-slide > img { width: 100% !important; height: 100%;} #beautyshop-view > div.container > div.item-info > div.item-detail > h2.item-title {font-size: 17px; margin-bottom: 15px; margin-top: 10px;} #beautyshop-view > div.container > div.item-info > div.item-detail > div.item-description {font-size: 14px; margin-bottom: 30px;} #beautyshop-view > div.container > div.item-info > div.item-detail > div.order-info {border-top: 1px solid #eee; border-bottom: 1px solid #eee; padding: 15px 0; margin-bottom: 30px;} #beautyshop-view > div.container > div.item-info > div.item-detail > div.order-info > div {line-height: 25px; font-size: 13px; color: #000;} #beautyshop-view > div.container > div.item-tab > div.tab-content {padding: 10px 10px; background: #fff;} } /*=====beautyshop view=====*/ /******beautyshop_*.html******/ /******brand.html******/ #brand-list > div.container {max-width: 100%;} #brand-list > div.container > div.category-container {position: relative; overflow: hidden; width: 100%; padding: 40px 0; background: #f1f1f1;} #brand-list > div.container > div.category-container > div.category {width: 1200px; margin: 0 auto; overflow: hidden;} #brand-list > div.container > div.category-container > div.category > h2 {position: absolute; top: 50%; margin-top: -20px;font-size: 25px;} #brand-list > div.container > div.category-container > div.category > div.category-swiper {width: 1070px; float: right; position: relative; overflow: hidden;} #brand-list > div.container > div.category-container > div.category > div.category-swiper > div.swiper-wrapper > div.swiper-slide > a > div.category-thumbnail {position: relative; overflow: hidden; width: 100px; height: 100px; line-height: 100px; margin: 0 auto; text-align: center; border: 1px solid #eee; border-radius: 50%; background: #fff;} #brand-list > div.container > div.category-container > div.category > div.category-swiper > div.swiper-wrapper > div.swiper-slide > a > span {display: block; font-size: 16px; font-weight: bold; color: #999; text-align: center; margin-top: 20px;} #brand-list > div.container > div.category-container > div.category > div.category-swiper > div.swiper-wrapper > div.swiper-slide > a > div.category-thumbnail.on {border-color: #f05b73;} #brand-list > div.container > div.category-container > div.category > div.category-swiper > div.swiper-wrapper > div.swiper-slide > a > span.on {color: #f05b73;} #brand-list > div.container > div.category-container > div.category > div.category-swiper > div.swiper-button-next, #brand-list > div.container > div.category-container > div.category > div.category-swiper > div.swiper-button-prev {width: 14px; height: 23px; margin-top: -12px; background-size: 14px 23px;} #brand-list > div.container > div.category-container > div.category > div.category-swiper > div.swiper-button-next {right: 0; background-image: url('../img/icon/swiper_next.png');} #brand-list > div.container > div.category-container > div.category > div.category-swiper > div.swiper-button-prev {left: 0; background-image: url('../img/icon/swiper_prev.png');} #brand-list > div.container > div.brand-info {width: 1200px; margin: 0 auto; padding: 60px 0; text-align: center; border-bottom: 1px solid #f1f1f1;} #brand-list > div.container > div.brand-info > div.brand-name {font-size: 50px; font-weight: 900; color: #000; letter-spacing: 10px;} #brand-list > div.container > div.brand-info > hr.brand-hr {display: block; width: 40px; height: 4px; background: #f05b73; margin: 20px auto 40px; border: none;} #brand-list > div.container > div.brand-info > div.brand-info-box {width: 100%; margin: 0 auto; text-align: left;} #brand-list > div.container > div.brand-info > div.brand-info-box > div {position: relative; font-size: 16px; line-height: 34px; color: #000; padding-left: 30px;} #brand-list > div.container > div.brand-info > div.brand-info-box > div > i.icon {position: absolute; width: 16px; height: 16px; top: 50%; left: 0px; transform: translateY(-50%);} #brand-list > div.container > div.brand-info > div.brand-info-box > div > i.icon-pin {background: url(../img/icon/ic_location.png) no-repeat center/contain;} #brand-list > div.container > div.brand-info > div.brand-info-box > div > i.icon-call {background: url(../img/icon/ic_call.png) no-repeat center/contain;} #brand-list > div.container > div.brand-info > div.brand-info-box > div > i.icon-home {background: url(../img/icon/ic_home.png) no-repeat center/contain;} #brand-list > div.container > div.brand-info > div.brand-info-box > div > i.icon-service {background: url(../img/icon/ic_service.png) no-repeat center/contain;} #brand-list > div.container > div.brand-info > div.brand-info-box > ul.brand-service-list { position: relative; overflow: hidden; margin-top: 20px; padding: 0 20px; text-align: center; } #brand-list > div.container > div.brand-info > div.brand-info-box > ul.brand-service-list > li { display: block; float: left; margin: 0 10px 20px; } #brand-list > div.container > div.brand-info > div.brand-info-box > ul.brand-service-list > li > div {display: block; width: 70px; height: 70px; line-height: 66px; background: #f05b73; border-radius: 100%;} #brand-list > div.container > div.brand-info > div.brand-info-box > ul.brand-service-list > li > span {display: block; margin-top: 15px; font-size: 16px; color: #848484;} #brand-list > div.container > div.brand-branch {width: 1200px; margin: 0 auto; padding: 60px 0;} #brand-list > div.container > div.brand-branch > h2 {font-size: 24px; font-weight: 900; color: #000; margin-bottom: 30px;} #brand-list > div.container > div.brand-branch > ul {position: relative; overflow: hidden; margin: 0 -10px;} #brand-list > div.container > div.brand-branch > ul > li {float: left; width: 25%; padding: 0 10px; margin-bottom: 50px; cursor: pointer; } #brand-list > div.container > div.brand-branch > ul > li > div.store-name {font-size: 18px; font-weight: bold; color: #000;} #brand-list > div.container > div.brand-branch > ul > li > div.store-rating {padding: 10px 0 20px;} #brand-list > div.container > div.brand-branch > ul > li > div.store-thumbnail { padding-bottom: 70%; background-repeat: no-repeat; background-size: cover; background-position: center center; } @media (max-width: 767px) { #brand-list > div.container > div.category-container > div.category {width: 100%;} #brand-list > div.container > div.category-container {position: relative; overflow: hidden; width: 100%; padding: 0px 0 10px; background: #f1f1f1;} #brand-list > div.container > div.category-container > div.category > h2 {display: block; position: relative; margin: 0; padding: 10px; font-size: 15px; margin-bottom: 10px;} #brand-list > div.container > div.category-container > div.category > div.category-swiper {width: calc(100% - 20px); margin: 0px 10px; } #brand-list > div.container > div.category-container > div.category > div.category-swiper > div.swiper-wrapper > div.swiper-slide > a > span { font-size: 16px; font-weight: normal; margin-top: 10px; } #brand-list > div.container > div.list-container {width: 100%; padding: 10px;} #brand-list > div.container > div.list-container > div.list-header {margin-bottom: 10px;} #brand-list > div.container > div.list-container > ul > li {width: 100%; margin-bottom: 10px;} #brand-list > div.container > div.brand-info {width: 100%;} #brand-list > div.container > div.brand-info > div.brand-info-box {width: 100%; padding: 0 30px;} #brand-list > div.container > div.brand-branch {width: 100%; padding: 10px;} #brand-list > div.container > div.brand-branch > ul > li {width: 50%; margin-bottom: 0px; margin-top: 30px;} #brand-list > div.container > div.brand-branch > ul > li > div.store-thumbnail > img {width: 100%;} #brand-list > div.container > div.brand-branch > ul > li > div.store-name {font-size: 15px; } #brand-list > div.container > div.brand-info > div.brand-name { font-size: 25px; letter-spacing: 0px; } #brand-list > div.container > div.brand-info > div.brand-info-box > div {position: relative; font-size: 14px; line-height: 24px; padding-left: 30px;} #brand-list > div.container > div.brand-info > div.brand-info-box > ul.brand-service-list { margin-top: 20px; padding: 0 10px; text-align: center; } #brand-list > div.container > div.brand-info > div.brand-info-box > ul.brand-service-list > li { margin: 0 5px 20px; } #brand-list > div.container > div.brand-info > div.brand-info-box > ul.brand-service-list > li > div {display: block; width: 50px; margin: auto; height: 50px; line-height: 50px; } #brand-list > div.container > div.brand-info > div.brand-info-box > ul.brand-service-list > li > span {display: block; margin-top: 15px; font-size: 16px; color: #848484;} #brand-list > div.container > div.brand-branch > h2 {font-size: 18px; font-weight: 900; color: #000; margin-bottom: 0px;} } /******brand.html******/ /******agreement.html******/ #agreement {padding: 70px 0;} #agreement > div.container {max-width: 1000px;} #agreement > div.container > h2 {font-size: 30px; font-weight: bold; color: #000; text-align: center; margin-bottom: 30px;} #agreement > div.container > ul {position: relative; overflow: hidden;} #agreement > div.container > ul > li {float: left; width: 33.3%; text-align: center;} #agreement > div.container > ul > li > a {display: inline-block; font-size: 16px; font-weight: bold; color: #666; padding: 22px 0; word-break: keep-all;} #agreement > div.container > ul > li.active > a {color: #f05b73; border-bottom: 4px solid #f05b73;} #agreement > div.container > div.tab-content {margin-top: 20px;} #agreement > div.container > div.tab-content > div {border: 1px solid #f1f1f1; padding: 30px 50px; font-size: 12px; line-height: 24px; display: none;} #agreement > div.container > div.tab-content > div.active {display: block;} @media (max-width: 767px) { #agreement {padding: 0 0 50px;} #agreement > div.container {padding: 10px;} #agreement > div.container > ul > li {width: 33.3%;} #agreement > div.container > div.tab-content > div {padding: 20px;} } /******agreement.html******/ /******member_*.html******/ /*=====memeber common=====*/ #member {padding: 80px 0;} #member > div.container {width: 800px;} #member > div.container > h2 {font-size: 30px; font-weight: bold; color: #000; text-align: center; margin-bottom: 45px;} #member > div.container > h2 > p {font-size: 14px; font-weight: normal; color: #666;} #member > div.container > form > div.member-form-box {position: relative; overflow: hidden; padding: 50px 150px; border: 1px solid #f1f1f1;} #member > div.container > div.register-progress > span.active::after {content: ''; display: block; width: 12px; height: 12px; position: absolute; top: 50%; left: 50%; margin-top: -6px; margin-left: -6px; background: #f05b73; border-radius: 50%;} #member > div.container > form > div.member-form-box > div.input-box {position: relative; display: table; width: 100%; margin-bottom: 10px; } #member > div.container > form > div.member-form-box.result > div.input-box {width: 60%; margin: 0 auto;} #member > div.container > form > div.member-form-box > hr.member-clear {display: block; width: 100%; height: 80px; border: 0; clear: both;} #member > div.container > form > div.member-form-box > div.input-box > span {display: table-cell; width: 100px; padding: 14px 0; font-size: 14px; font-weight: bold; color: #666; vertical-align: middle;} #member > div.container > form > div.member-form-box > div.input-box > input, #member > div.container > form > div.member-form-box > div.input-box > select {display: table-cell; float: left; width: 100%; height: auto; font-size: 14px; padding: 14px 10px; border: 0; border-bottom: 1px solid #ccc; border-radius: 0;} #member > div.container > form > div.member-form-box > div.input-box > textarea { display: table-cell; float: left; width: 100%; height: 150px; font-size: 14px; padding: 14px 10px; border: 0; border-bottom: 1px solid #ccc; border-radius: 0; } #member > div.container > form > div.member-form-box > div.input-box > p {display: table-cell; float: left; width: 100%; height: auto; font-size: 14px; padding: 14px 10px;} #member > div.container > form > div.member-form-box > div.input-box > span.regi_btn {width: 120px; padding: 0;} #member > div.container > form > div.member-form-box > div.input-box > span.regi_btn > a {width: 100px; float: right; padding: 12px 0; border: 1px solid #f05b73; background: #fff; font-size: 12px; font-weight: bold; color: #f05b73; text-align: center; vertical-align: middle;} #member > div.container > form > div.member-form-box > div.input-box > div.radio-box {display: table-cell; vertical-align: middle;} #member > div.container > form > div.member-form-box > div.input-box > div.radio-box > input {margin-right: 5px;} #member > div.container > form > div.member-form-box > div.input-box > div.radio-box > label {font-size: 14px; color: #666; margin-right: 15px;} #member > div.container > form > div.member-form-box > div.input-box > div.radio-box > input:checked + label {font-weight: bold; color: #f05b73;} #member > div.container > form > div.item-bottom {position: relative; overflow: hidden;} #member > div.container > form > div.item-bottom > a {float: left; width: 50%; height: 50px; line-height: 50px; text-align: center; font-size: 16px; font-weight: bold; color: #fff; background: #f05b73;} #member > div.container > form > div.item-bottom > a.cancel {background: #999;} #member > div.container > form > div.item-bottom > a.review {background: #5b9ef0;} #member > div.container > form > div.item-bottom > a.re-reservation {background: transparent; border: 1px solid #f05b73; color: #f05b73; box-sizing: border-box;} #member > div.container > form > div.item-bottom > a.wp100 { width: 100%; } #member > div.container > form > div.member-form-box > div.input-box > p > input[type="checkbox"] { display: none; } #member > div.container > form > div.member-form-box > div.input-box > p > label { display: inline-block; font-size: 14px; color: #fff; background: #999; border-radius: 3px; padding: 3px 10px; margin-bottom: 5px; margin-right: 2px; } #member > div.container > form > div.member-form-box > div.input-box > p > input[type="checkbox"]:checked + label { color: #fff; background: #f05b73; } #member > div.container > form > div.member-form-box > div.login-btn-box > a {font-size: 12px; color: #666;} #member > div.container > form > div.member-form-box > div.login-btn-box > span.seperator {margin: 0 8px;} #member > div.container > form > .member-submit {display: block; width: 100%; height: 50px; line-height: 50px; margin-top: 30px; font-size: 16px; font-weight: bold; color: #fff; background: #f05b73; text-align: center;} #member > div.container > form > .member-cancle { display: block; width: 100%; height: 50px; line-height: 50px; margin-top: 30px; font-size: 16px; font-weight: bold; color: #fff; background: #999; text-align: center; } @media (max-width: 767px) { #member > div.container {width: 100%;} #member > div.container > form > div.member-form-box {padding: 20px;} #member > div.container > form > div.member-form-box > div.input-box > div.radio-box > input {position: absolute; height: 24px;} #member > div.container > form > div.member-form-box > div.input-box > div.radio-box > label {display: block; padding-left: 30px;} } /*=====memeber common=====*/ /*=====memeber login=====*/ #member > div.container > form > div.member-form-box > div.login-btn-box {position: relative; overflow: hidden; padding: 25px 0; text-align: center;} /*=====memeber login=====*/ /*=====memeber register, agreement=====*/ #member > div.container > div.register-progress {position: relative; width: 300px; height: 28px; margin: 0 auto; text-align: center; margin-bottom: 60px;} #member > div.container > div.register-progress::before {content: ''; display: block; position: absolute; width: 100%; height: 1px; background: #ddd; top: 50%;} #member > div.container > div.register-progress > span {position: absolute;; width: 12px; height: 12px; top: 50%; left: 50%; margin-top: -6px; margin-left: -6px; background: #ddd; border-radius: 50%;} #member > div.container > div.register-progress > span:first-child {left: 0; margin-left: 0;} #member > div.container > div.register-progress > span:last-child {right: 0; left: auto; margin-left: 0;} #member > div.container > div.register-progress > span.active {border: 3px solid #ddd; border-radius: 50%; width: 28px; height: 28px; margin-top: -14px; margin-left: -14px; background: #fff;} #member > div.container > form > div.agreement-form-box {position: relative; overflow: hidden;} #member > div.container > form > div.agreement-form-box > input {margin-right: 5px;} #member > div.container > form > div.agreement-form-box > label {font-size: 14px; font-weight: bold; color: #666;} #member > div.container > form > div.agreement-form-box > div.agreement-content-box {position: relative; overflow: hidden; margin-top: 30px;} #member > div.container > form > div.agreement-form-box > div.agreement-content-box > input {margin-right: 5px;} #member > div.container > form > div.agreement-form-box > div.agreement-content-box > label {font-size: 14px; font-weight: bold; color: #666;} #member > div.container > form > div.agreement-form-box > div.agreement-content-box > div.agreement-content {position: relative; overflow: hidden; width: 100%; height: 140px; overflow-y: auto; border: 1px solid #ccc; background: #f1f1f1; margin-top: 10px; padding: 30px; font-size: 12px; color: #000;} @media (max-width: 767px) { #member > div.container > form > div.agreement-form-box {padding: 0 10px;} .view_list_new { overflow: auto; } .view_list_new > table { width: 800px !important;} .send_price_cker > ul > li { width: 100% !important; margin-bottom: 30px; } } /*=====memeber register, agreement=====*/ /******member_*.html******/ .selecter_week {} .selecter_week > a { display: inline-block; padding: 3px 10px; background: #666; color: #fff; border-radius: 3px; margin-top: 5px; } .selecter_week > a.active { background: #3f51b5; } .selecter_agreas { margin: 10px 0px; } .selecter_agreas > div {} .selecter_agreas > div > span { display: inline-block; line-height: 20px; } .selecter_agreas > div > span > input[type="checkbox"] { display: none; } .selecter_agreas > div > span > label { display: inline-block; font-size: 14px; color: #fff; background: #999; border-radius: 3px; padding: 3px 10px; margin-bottom: 5px; margin-right: 2px; } .selecter_agreas > div > span > input[type="checkbox"]:checked + label { color: #fff; background: #f05b73; } .level5_portfolio {} .level5_portfolio > li { float: left; width: calc(20% - 20px); padding-bottom: 18.5%; background: #f7f7f7; margin: 10px; } .paging_area02 { position: relative; text-align: center; margin-top: 10px; margin-bottom: 30px; } .paging_area02 a { margin: 0px 10px; }