@charset "UTF-8";
@import url('font.css');

/* =======================================
    reset
========================================== */
/* html {min-width:320px;} */
* {margin:0;padding:0;border:none;word-break:break-all;box-sizing:border-box !important;-webkit-box-sizing:border-box !important;-webkit-overflow-scrolling:touch;-webkit-hyphens:auto;hyphens:auto;vertical-align:baseline;font-size:inherit;line-height:inherit;font-family:inherit;}
*:before, *:after {box-sizing:border-box;-webkit-box-sizing:border-box;}
html {height:100%;font-size:12px;}
body {font-size:14px;line-height:1.25;font-family:'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;-webkit-text-size-adjust:none;color:#444;word-break:keep-all;word-wrap:break-word;min-height:100vh;display:flex;flex-direction:column;}
body > .wrap { flex: 1; }
dl,ul,ol,menu,li {list-style:none;}
table {width:100%;border-collapse:collapse;border-spacing:0}
table caption {visibility:hidden;overflow:hidden;width:0;height:0;font-size:0;line-height:0;}
img,fieldset {border:0 none;}
img {vertical-align:middle;max-width:100%;max-height:100%;}
a {color:inherit;text-decoration:none;cursor:pointer;color:inherit;font-family:inherit;}
a:hover {text-decoration:none}
i,em,address {font-style:normal;}

label,button {cursor:pointer;}
i,em {font-style:normal;}
br,hr {border:none;line-height:inherit;}

/* ========== form ========== */
/* input 기본 스타일 초기화 */
input, select:not(.ui-datepicker-month):not(.ui-datepicker-year) {
  -webkit-appearance:none;-moz-appearance:none;     appearance:none;}

select::-ms-expand {display:none}

/* IE10 이상에서 input box 에 추가된 지우기 버튼 제거 */
input::-ms-clear { display:none;}

/* input type number 에서 화살표 제거 */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {-webkit-appearance:none;-moz-appearance:none;appearance:none;}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {-webkit-appearance:none;margin:0;}

select {height:40px;font-size:14px;padding:0 25px 0 10px;min-width:100px;line-height:38px;-webkit-appearance:none;-webkit-box-shadow:none;box-shadow:none;color:#444;border:1px solid #dddddd;border-radius:3px;outline:none;background:#fff url('../images/common/ico_select_box.png') no-repeat right 15px top 50%;}
select.sm {height:30px;font-size:13px;padding:0 20px 0 8px;min-width:80px;line-height:28px;-webkit-appearance:none;-webkit-box-shadow:none;box-shadow:none;color:#444;border:1px solid #dddddd;border-radius:3px;outline:none;background:#fff url('../images/common/ico_select_box.png') no-repeat right 8px top 50%;background-size:auto 8px;}
input[type="text"], input[type="number"], input[type="password"], input[type="email"] {height:40px;font-size:14px;padding:0 18px;line-height:38px;color:#444;border:1px solid #dddddd;outline:none;border-radius:3px;}
input[type="text"], input[type="number"], input[type="password"], input[type="email"] {height:40px;font-size:14px;padding:0 18px;line-height:38px;color:#444;border:1px solid #dddddd;outline:none;border-radius:3px;}
textarea {font-size:14px;padding:10px;color:#333;border:1px solid #dddddd;outline:none;resize:none;border-radius:3px;}
textarea:hover {border-color:#3f84f8;}
button {border:none;background:none;outline:none;cursor:pointer;}
/* mobile */
@media all and (max-width:820px) {
  select {height:34px;font-size:12px;padding:0 21px 0 9px;min-width:85px;line-height:32px;border-radius:3px;background-size:auto 9px;background-position:right 7px top 50%;}
  input[type="text"], input[type="number"], input[type="password"], input[type="email"] {height:34px;font-size:12px;padding:0 15px;line-height:32px;border-radius:3px;}
  input[type="text"], input[type="number"], input[type="password"], input[type="email"] {height:34px;font-size:12px;padding:0 15px;line-height:32px;border-radius:3px;}
  textarea {font-size:12px;padding:9px;border-radius:3px;}
}

select:not(.ui-datepicker-month):not(.ui-datepicker-year):disabled {color:#aeaeae;background-color:#eeeeee !important;}
input[type="text"]:read-only,
input[type="number"]:read-only,
input[type="number"]:read-only,
input[type="password"]:read-only {background:#fff !important;}
input[type="text"]:disabled,
input[type="number"]:disabled,
input[type="number"]:disabled,
input[type="password"]:disabled {background:#f1f1f1 !important;color:#b3b3b3;border-color:#dddddd;}

/* placeholder */
::-webkit-input-placeholder {color:#999999;vertical-align:middle;}
:-webkit-input-placeholder {color:#999999;vertical-align:middle;}
::-moz-placeholder {color:#999999;vertical-align:middle;}
:-moz-placeholder {color:#999999;vertical-align:middle;}
:-ms-input-placeholder {color:#999999 !important;vertical-align:middle;}

.inp-check {position:relative;display:inline-block;cursor:pointer;white-space:nowrap;display:inline-flex;flex-direction:row;align-items:center;vertical-align:middle;}
.inp-check .inp {display:inline-block;position:relative;vertical-align:middle;}
.inp-check input {opacity:0;position:absolute;top:0;left:0;width:22px;height:22px;opacity:0;}
.inp-check .ic {display:inline-block;overflow:hidden;width:22px;height:22px;border:1px solid #dadada;border-radius:22px;}
.inp-check input:checked  ~ .ic {border-color:#b2d459;background:#3f84f8 url('data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAHCAQAAACbpRToAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQfmBxsKExPRN9srAAAATUlEQVQI123MsQ1EAACF4Sc6i4oBJDqlAW6BUxjAJvZgAN2nuMgh8oqXfMUfua00Wp80oXshicWguJLEB1+V+SSJ6LGhPUO/q+2af/0AInZZCVZeLYkAAAAASUVORK5CYII=') no-repeat 50% 50%;}
.inp-check input:checked:disabled  ~ .ic {border:1px solid #dbdbdb;background:#f0f0f0 url('data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAHCAQAAACbpRToAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQfmBx0NODFSAy7/AAAAX0lEQVQI12PsZEABTAz+DKpMaEKBDPoMx5jQhHQZ9jAcYWLIYHBhYEQWYmBgYXjEYMPAw7CVIYRBHSLEwMDCsI3hG4MDgxoDF8NuhqMQc1gYGBgOMHxh8GDYynAaZjgA/WUR+tddcUoAAAAASUVORK5CYII=') no-repeat 50% 50%;}
.inp-check input:disabled {cursor:default !important;}
.inp-check input:disabled  ~ .ic {background:#f0f0f0;}
.inp-check .t {display:inline-block;padding-left:8px;vertical-align:middle;font-size:14px;font-weight:500;color:#333333;}
.inp-check + .inp-check {margin-left:30px;}
.inp-check input:disabled,
.inp-check input:disabled ~ * {cursor:default !important;}
@media all and (max-width:420px) {
  .inp-check input {width:20px;height:20px;}
  .inp-check .ic {width:20px;height:20px;border-radius:20px;}
  .inp-check .t {padding-left:7px;font-size:13px;}
  .inp-check + .inp-check {margin-left:27px;}
}

.inp-radio {position:relative;display:inline-block;cursor:pointer;white-space:nowrap;display:inline-flex;flex-direction:row;align-items:center;vertical-align:middle;}
.inp-radio .inp {display:inline-block;position:relative;vertical-align:middle;}
.inp-radio input {opacity:0;position:absolute;top:0;left:0;width:22px;height:22px;opacity:0;}
.inp-radio .ic {position:relative;display:inline-block;overflow:hidden;width:22px;height:22px;border-radius:22px;border:1px solid #dbdbdb;}
.inp-radio input:checked  ~ .ic {border:6px solid #b2d459;}
.inp-radio input:checked:disabled  ~ .ic {background:#fff;border:6px solid #d9d9d9;}
.inp-radio input:disabled ~ .ic {background:#f0f0f0;border:1px solid #dadada;}
.inp-radio .t {display:inline-block;padding-left:10px;vertical-align:middle;font-size:14px;font-weight:500;color:#333;}
.inp-radio + .inp-radio {margin-left:30px;}
.inp-radio input:disabled,
.inp-radio input:disabled ~ * {cursor:default !important;}
@media all and (max-width:420px) {
  .inp-radio input {width:20px;height:20px;}
  .inp-radio .ic {width:20px;height:20px;border-radius:20px;}
  .inp-radio input:checked  ~ .ic {border:5px solid #b2d459;}
  .inp-radio input:checked:disabled  ~ .ic {border:5px solid #d9d9d9;}
  .inp-radio .t {padding-left:9px;font-size:13px;}
  .inp-radio + .inp-radio {margin-left:27px;}
}

.inp-search {position:relative;display:flex;flex-direction:row;align-items:center;border:1px solid #dddddd;height:40px;border-radius:3px;background:#fff;}
.inp-search input {flex:1;border:none;height:100%;padding:0 10px;}
.inp-search input:disabled {background:#fff !important;}
.inp-search input:disabled ~ .btn-del {display:none !important;}
.inp-search .btn-search {width:40px;height:100%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' id='Capa_1' x='0px' y='0px' viewBox='0 0 487.95 487.95' style='enable-background:new 0 0 487.95 487.95;' xml:space='preserve'%3E%3Cg%3E%3Cg%3E%3Cpath d='M481.8,453l-140-140.1c27.6-33.1,44.2-75.4,44.2-121.6C386,85.9,299.5,0.2,193.1,0.2S0,86,0,191.4s86.5,191.1,192.9,191.1 c45.2,0,86.8-15.5,119.8-41.4l140.5,140.5c8.2,8.2,20.4,8.2,28.6,0C490,473.4,490,461.2,481.8,453z M41,191.4 c0-82.8,68.2-150.1,151.9-150.1s151.9,67.3,151.9,150.1s-68.2,150.1-151.9,150.1S41,274.1,41,191.4z'/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E");background-position:50% 50%;background-repeat:no-repeat;background-size:auto 20px;}
@media all and (max-width:820px) {
  .inp-search {height:34px;border-radius:3px;}
  .inp-search input {padding:0 9px;}
  .inp-search .btn-search {background-size:auto 14px;}
}

.inp-file{position:relative;}
.inp-file input{position:absolute;top:0;left:0;width:100%;height:100%;opacity: 0;}
.inp-file .filename{display:block;position:relative;height: 40px; font-size: 14px; padding: 0 18px; line-height: 38px; color: #444; border: 1px solid #dddddd; outline: none; border-radius: 3px;}

.ellips {overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;word-wrap:break-word;line-height:1.2em;height:1.2em;}

.align-r {text-align:right !important;}
.align-l {text-align:left !important;}
.align-c {text-align:center !important;}

.c-black { color:#000 !important;}

.ellips {display:block;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;}

.pre-line {white-space:pre-line;line-height:1.5;}

.link-st {display:inline-block;color:#3f84f8;border-bottom:1px solid #3f84f8;max-width:100%;;}

.w100{width:100%;}


.f-wrap {display:flex;flex-direction:row;align-items:center;}
.f-wrap .auto {flex:1;}
.f-wrap > *{white-space: nowrap;}
.f-wrap > * ~ * {margin-left:10px;}
.f-wrap > .right {margin-left:auto !important;padding-left:20px;}

/* =======================================
media css
========================================== */
/* pc */
@media all and (min-width:1201px) {
  .mo-disblock {display:none !important;}
}

/* mobile */
@media all and (max-width:1200px) {
  .mo-disblock {display:block !important;}
  .mo-disnone {display:none !important;}
}


/* =======================================
layout
========================================== */
.wrapper {width:100%;max-width:1200px;margin:0 auto;padding-left:24px;padding-right:24px;box-sizing:border-box;}
.wrapper:after {content:'';display:block;clear:both;}

.header { border-bottom: 4px solid #f48276; position: fixed; top: 0; left: 0; width: 100%; background: #fff; z-index: 101; }
.header.no-bottom-border { border-bottom: 0; }
.header .gnb-wrap { border-bottom: 1px solid #dfdfdf; min-height: 46px; }
.header .gnb-wrap .wrapper { position: relative; }
.header .gnb-wrap .wrapper .flatform-state { width: 80px; height: 30px; line-height: 30px; position: absolute; right: -90px; top: 10px; text-align: center; background: #b2d459; color: #fff; border-radius: 5px; }
.header .gnb-wrap .wrapper .top-select { position: absolute; top: 11px; right: -227px; }
.header .gnb-wrap .wrapper:after { content: ''; display: block; clear: both; }
.header .gnb-wrap .wrapper h1 { float: left; padding: 0; position: absolute; left: 24px; top: 16px; z-index: 110; }
.header .gnb-wrap .wrapper h1 a { display: block; }
.header .gnb-wrap .wrapper h1 img { height: 72px; max-height: initial; }
.header .gnb-wrap .wrapper .banner { position: absolute; top: 0; right: 0; background: #000; width: 150px; height: 100%; }
.header .top-area { padding: 0 0 10px; }
.header .top-area .snb { float: left; }
.header .top-area .snb h2 { float: left; height: 40px; line-height: 40px; margin-right: 50px; }
.header .top-area .snb ul { font-size: 0; float: left; }
.header .top-area .snb ul li { display: inline-block; height: 40px; line-height: 40px; font-size: 16px; margin-right: 20px; }
.header .top-area .snb ul li.on a { color: #b2d459; }
.header .top-area:after { content: ''; display: block; clear: both; }
.header .top-area .search-wrap { float: right; position: relative; }
.header .top-area .header-search { position: relative; display: inline-block; width: 306px; height: 40px; border-radius: 3px; border: solid 1px #b2d459; background-color: #ffffff; }
.header .top-area .header-search input { border: 0; padding: 0 10px; width: calc(100% - 34px); height: 38px; }
.header .top-area .header-search a.search-submit { position: absolute; font-size: 20px; color: #222224; top: 9px; right: 9px; line-height: 20px; }
.header .top-area .search-wrap .recent-search { position: absolute; top: 50px; left: 0; width: 100%; background: #fff; z-index: 10; border: 1px solid #e8e8e8; border-radius: 5px; display: none; }
.header .top-area .search-wrap .recent-search h2 { padding: 0 10px; font-size: 16px; letter-spacing: -0.29px; color: #2c2c2c; line-height: 40px; border-bottom: 1px solid #e8e8e8; }
.header .top-area .search-wrap .recent-search h2 a { font-size: 12px; color: #7b7b7b; float: right; }
.header .top-area .search-wrap .recent-search ul { padding: 10px; }
.header .top-area .search-wrap .recent-search ul li { margin-bottom: 0; position: relative; }
.header .top-area .search-wrap .recent-search ul li:last-child { margin-bottom: 0; }
.header .top-area .search-wrap .recent-search ul li a { display: block; overflow: hidden; padding-right: 20px; }
.header .top-area .search-wrap .recent-search ul li a .keyword { float: left; font-size: 14px; color: #595959; }
.header .top-area .search-wrap .recent-search ul li a .keyword i { color: #979797; }
.header .top-area .search-wrap .recent-search ul li a .date { float: right; font-size: 12px; color: #979797; line-height: 20px; }
.header .top-area .search-wrap .recent-search ul li button { color: #979797; background: transparent; padding: 0; position: absolute; top: 0; right: 0; z-index: 10; }
.header .top-area .spot-recommend { display: inline-block; margin-right: 15px; margin-top: 8px; }
.header .top-area .spot-recommend p { display: inline-block; width: 105px; height: 24px; line-height: 24px; border-radius: 12px; background-color: #f4f4f4; text-align: center; font-size: 11px; letter-spacing: -0.5px; font-weight: bold; color: #3f3f3f; }
.header .top-area .spot-recommend ul,
.header .top-area .spot-recommend ul li { display: inline-block; }
.header .top-area .spot-recommend ul li { margin-left: 10px; }
.header .top-area .spot-recommend ul li a { font-size: 13px; letter-spacing: -0.59px; color: #979797; }
.header .gnb-wrap .wrapper{padding-left:120px;padding-right:24px;}
.header .top-area .wrapper{padding-left:120px;padding-right:24px;}

/* Header quick buttons (stylist) */
.header-quick { float: right; display: flex; gap: 8px; padding-top: 10px; }
.hq-btn { display: inline-flex; align-items: center; gap: 5px; padding: 7px 20px; border: 1px solid #ddd; border-radius: 10px; background: #fff; font-size: 13px; font-weight: 500; color: #888; text-decoration: none; transition: all 0.2s; }
.hq-btn:hover { border-color: #b2d459; color: #b2d459; }

.modalPop { display: none; position: fixed; top: 0; left: 0; padding-top: 7px; z-index: 150; width: 100%; text-align: center; top: 50%; }
.modalMask { display: none; position: absolute; top: 0; left: 0; z-index: 120; }

@media all and (min-width:1259px) {
  .header .gnb-wrap .gnb { float: left;}
  .header .gnb-wrap .wrapper .inner ul:not(.mo-disblock) > li > a:after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 3px; background: #f48276; transition: all 0.5s ease; -webkit-transition: all 0.5s ease; z-index: 2; }
  .header .gnb-wrap .wrapper .inner ul li { margin-right: 20px; line-height: 46px; float: left; padding-top: 6px; }
  .header .gnb-wrap .wrapper .inner ul li a { display: block; font-size: 14px; font-weight: 500; letter-spacing: -0.29px; color: #2c2c2c; transition: all 0.5s ease; -webkit-transition: all 0.5s ease; position: relative; }
  .header .gnb-wrap .wrapper .inner ul li:hover a { color: #f48276; }
  .header .gnb-wrap .wrapper .inner ul li.on a { color: #f48276; }
  .header .gnb-wrap .wrapper .inner ul li:hover a:after,
  .header .gnb-wrap .wrapper .inner ul li.on > a:after { width: 100% !important; }
  .header .gnb-wrap .wrapper .inner ul li a img { vertical-align: middle; }
  .header .gnb-wrap .wrapper .inner ul:not(.mo-disblock) > li > a:after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 3px; background: #f48276; transition: all 0.5s ease; -webkit-transition: all 0.5s ease; z-index: 2; }
  .header .gnb-wrap .wrapper .top-community { float: right; }
  .header .gnb-wrap .wrapper .top-community > ul{display:flex;align-items:center;margin-top:4px;}
  .header .gnb-wrap .wrapper .top-community > ul > li { margin-right: 20px; line-height: 44px; float: left; }
  .header .gnb-wrap .wrapper .top-community > ul > li > a { display: block; font-size: 14px; font-weight: 500; letter-spacing: -0.29px; color: #2c2c2c; transition: all 0.5s ease; -webkit-transition: all 0.5s ease; position: relative; }
  .header .gnb-wrap .wrapper .top-community > ul > li:hover > a { color: #b2d459; }
  .header .gnb-wrap .wrapper .top-community > ul > li.on > a { color: #b2d459; }
  .header .gnb-wrap .wrapper .top-community > ul > li:hover > a:after,
  .header .gnb-wrap .wrapper .top-community > ul > li.on > a:after { width: 100%; }
  .header .gnb-wrap .wrapper .top-community > ul > li > a img { vertical-align: middle; }

  /* Language selector */
  .lang-select { position: relative; }
  .lang-select .lang-current { display: flex; align-items: center; gap: 4px; cursor: pointer; font-size: 13px; font-weight: 600; }
  .lang-select .lang-current i { font-size: 10px; }
  .lang-select .lang-dropdown { display: none; position: absolute; top: 100%; right: 0; background: #fff; border: 1px solid #eee; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.1); min-width: 120px; z-index: 999; padding: 6px 0; }
  .lang-select:hover .lang-dropdown { display: block; }
  .lang-select .lang-dropdown li { line-height: normal; float: none; margin: 0; }
  .lang-select .lang-dropdown li a { display: block; padding: 8px 16px; font-size: 13px; color: #555; white-space: nowrap; }
  .lang-select .lang-dropdown li a:hover { background: #f5f5f5; color: #b2d459; }
  .lang-select .lang-dropdown li.on a { color: #b2d459; font-weight: 600; }
  /* Mobile lang menu */
  .lang-menu { display: flex; gap: 8px; }
  .lang-menu li a { font-size: 13px; font-weight: 600; color: #999; }
  .lang-menu li.on a { color: #b2d459; }

  /* Profile popup new */
  .profile-popup-new { width: 280px; padding: 0; border-radius: 16px; overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,0.15); border: 1px solid #eee; }
  .pp-header { display: flex; align-items: center; gap: 12px; padding: 20px 18px; background: linear-gradient(135deg, #b2d459, #3db4ae); }
  .pp-avatar { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; border: 2px solid rgba(255,255,255,0.6); flex-shrink: 0; }
  .pp-avatar img { width: 100%; height: 100%; object-fit: cover; }
  .pp-user { display: flex; flex-direction: column; }
  .pp-name { font-size: 16px; font-weight: 700; color: #fff; }
  .pp-handle { font-size: 12px; color: rgba(255,255,255,0.8); margin-top: 2px; }
  .pp-badge { display: inline-block; margin-top: 6px; padding: 2px 10px; border-radius: 12px; background: rgba(255,255,255,0.25); color: #fff; font-size: 11px; font-weight: 500; width: fit-content; }
  .pp-stats { display: flex; padding: 16px 18px; border-bottom: 1px solid #f0f0f0; background: #fff; }
  .pp-stat { flex: 1; text-align: center; }
  .pp-stat-val { display: block; font-size: 16px; font-weight: 700; color: #1a1a1a; }
  .pp-stat-label { display: block; font-size: 11px; color: #999; margin-top: 2px; }
  .pp-menu { display: flex; flex-direction: column; padding: 8px 0; background: #fff; }
  .pp-menu a { display: flex; align-items: center; gap: 10px; padding: 10px 18px; font-size: 13px; color: #444; transition: background 0.15s; }
  .pp-menu a:hover { background: #f8f8f8; color: #b2d459; }
  .pp-menu a i { font-size: 16px; width: 20px; text-align: center; color: #aaa; }
  .pp-menu a:hover i { color: #b2d459; }
  .pp-footer { padding: 10px 18px; border-top: 1px solid #f0f0f0; background: #fafafa; }
  .pp-logout { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #999; }
  .pp-logout:hover { color: #e74c3c; }
  .pp-logout i { font-size: 14px; }

  .header .gnb-wrap .wrapper .top-community > ul > li.lang-select { margin-right: 8px; }

  .profile {margin-left:0;height:30px;}
  .profile .account {cursor:pointer;}
  .profile span.normal {cursor:pointer;font-size:1.3rem;font-weight:500;}
  .profile > a {position:relative;display:inline-block;vertical-align:top;padding-right:16px;line-height:30px;margin-left:10px;height:30px;}
  .profile .thumb {width:30px;height:30px;border-radius:30px;overflow:hidden;background:#979797;display:inline-block;}
  .profile > a:after {content:'';display:block;width:10px;height:5px;background:url("data:image/svg+xml,%3Csvg width='65' height='36' viewBox='0 0 65 36' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M29.9507 29.8373L29.9417 29.8464L29.9328 29.8557C29.3873 30.43 29.0855 31.1677 29.0855 31.9457C29.0855 32.7009 29.3527 33.4561 29.9507 34.0542C31.111 35.2144 32.9876 35.2144 34.1479 34.0541L62.1344 6.08729L62.1347 6.08704C63.2949 4.92678 63.2949 3.03046 62.1347 1.8702L61.4276 2.5773L62.1347 1.8702C60.9744 0.709935 59.0781 0.709935 57.9178 1.8702L29.9507 29.8373Z' fill='%235A607F' stroke='%235A607F' stroke-width='2'/%3E%3Cpath d='M1.00003 3.97862L1.00003 4.97862L1.18609 4.97862C1.32526 5.37838 1.55466 5.75668 1.88503 6.08705L29.8521 34.0541C31.0124 35.2144 32.889 35.2144 34.0492 34.0541C35.2095 32.8939 35.2095 31.0173 34.0492 29.857L33.3421 30.5641L34.0492 29.857L6.0624 1.8702L5.35529 2.57731L6.0624 1.8702C4.90213 0.709939 3.02555 0.709939 1.86529 1.8702L1.85622 1.87926L1.8474 1.88856C1.30182 2.46285 1.00003 3.20057 1.00003 3.97862Z' fill='%235A607F' stroke='%235A607F' stroke-width='2'/%3E%3C/svg%3E%0A") no-repeat 0 0;background-size:100% 100%;position:absolute;color:#000;top:50%;right:0;transform:translateY(-50%);-webkit-transform:translateY(-50%);}
  .profile.active > a:after {transform:rotate(180deg);margin-top:-1px;}
  .profile > a.normal {padding-right:0;}
  .profile > a.normal:after {display:none;}
  .profile .popup {display:none;position:absolute;top:50px;right:0;width:250px;background:#fff;border:1px solid #e2e2e2;border-radius:5px;box-shadow:2px 4px 12px 2px rgba(224, 224, 224, 0.6);z-index:80;}
  .profile.active .popup {display:block !important;}
  .profile .popup .info {position:relative;background:linear-gradient(90deg, rgba(2,0,36,1) 0%,#f0544f 0%, #ffd9d7 100%);padding:25px 25px 70px;line-height:40px;color:#fff;text-align:left;}
  .profile .popup .info .thumbnail {display:inline-block;width:40px;height:40px;border-radius:40px;background:#fff;margin-right:10px;vertical-align:top;overflow:hidden;}
  .profile .popup p {display:inline-block;line-height:40px;vertical-align:top;font-size:1.3rem;font-weight:400;}
  .profile .popup p b {vertical-align:baseline;margin-right:2px;}
  /* 마이페이지 텍스트 수정 */
  .profile .popup .info a {position:absolute;top:35px;right:25px;padding:0 10px;height:20px;font-size:1rem;color:#f0544f;line-height:20px;display:inline-block;background:#fff;letter-spacing:-0.18px;border-radius:20px;}
  .profile .popup .point {position:relative;margin:0 20px;margin-top:-35px;background:#fff;border-radius:5px;}
  .profile .popup .point ul {overflow:hidden;display:flex;}
  .profile .popup .point ul li {position:relative;width:50%;line-height:1;margin:0;text-align:center;padding:15px 0;}
  .profile .popup .point ul li span {display:block;}
  .profile .popup .point ul li span.tit {display:inline-block;padding:0 10px;height:20px;font-size:1rem;color:#fff;line-height:20px;border-radius:3px;background:#f0544f;}
  .profile .popup .point ul li:last-child:after {content:'';width:2px;height:50px;position:absolute;top:50%;left:-1px;margin-top:-25px;background:#f4f4f4;}
  .profile .popup .point ul li:last-child span.tit {background:#ffd9d7;color:#f0544f;}
  .profile .popup .point ul li span.point {margin-top:6px;font-size:1.3rem;color:#2c2c2c;letter-spacing:-0.29px;font-weight:600;}
  .profile .popup .menu {margin:0 20px;}
  .profile .popup .menu ul li {float:none;display:block;margin-right:0;border-bottom:1px solid #f4f4f4;}
  .profile .popup .menu ul li:last-child {border-bottom:0;}
  .profile .popup .menu ul li a {display:block;text-align:center;color:#666;letter-spacing:-0.21px;height:35px;line-height:35px;font-size:1.2rem;}
  .profile .popup .menu ul li:hover a {background:none;}
  .profile .popup .language {margin:0 20px;margin-bottom:10px;margin-top:5px;}
  .profile .popup .language > a {background:#f15e59;padding:7px;font-size:1.3rem;}
  .profile .popup .language ul li a {padding:7px;}

  .header .mobile-menu-wrap {display:none;}

}

@media all and (max-width:1200px) {
  .wrapper {width:auto;}
  

  .header		.gnb-wrap .wrapper ul:not(.mo-disblock) > li > a:after { content: none; }
  .header { border-bottom: 2px solid #f48276; }
  .header .top-area { display: none; }
  .header .top-area.active { display: block; position: fixed; top: 0; right: 0; left: 0; bottom: 0; background: #fff; width: 100%; height: 100%; padding: 0; }
  .header .top-area .search-wrap { border-bottom: 7px solid #fafafa; }
  .header .top-area .header-search { border: 0; height: 38px; padding: 0 40px; }
  .header .top-area .header-search a.search-submit { width: 38px; height: 38px; line-height: 38px; text-align: center; top: 0; right: 0; }
  .header .top-area .header-search a.search-submit i { line-height: 38px; }
  .header .top-area .header-search a.mo-search-close { position: absolute; width: 38px; height: 38px; line-height: 38px; text-align: center; top: 0; left: 0; font-size: 20px; color: #222224; }
  .header .top-area .header-search a.mo-search-close i { line-height: 38px; }
  .header .top-area .search-wrap .recent-search { display: block; border: 0; border-radius: 0; }
  .header .top-area .search-wrap .recent-search ul { padding: 0; }
  .header .top-area .search-wrap .recent-search ul li { padding: 15px 10px; border-bottom: 1px solid #e8e8e8; margin-bottom: 0; }
  .header .top-area .search-wrap .recent-search ul li button { top: 50%; right: 10px; margin-top: -6px; }
  .header .top-area.active .wrapper { padding: 0; }
  .header .top-area .header-search { width: 100%; }
  .header .top-area .search-wrap { float: none; }
  .header .top-area .snb { display: none; }
  .header .top-area .banner,
  .header .gnb-wrap .top-community { display: none; }
  .header .mobile-menu,
  .header .mobile-search,
  .header .mobile-spot { display: block; }
  .header .gnb-wrap .wrapper { height: 50px; }
  .header .gnb-wrap .wrapper h1 { text-align:left; padding: 7px 0; width:auto;top:0;left:16px;}
  .header .gnb-wrap .wrapper h1 img{height:36px;}
  .header .gnb-wrap .profile-top { display: none; }
  .header .gnb-wrap .gnb { float: none; position: fixed; top: 0; left: -100%; width: 100%; height: 100%;  color:#fff; z-index: 1000; transition: left 0.5s; margin-left: 0; background:#181E2D;}
  .header .gnb-wrap .gnb.active { left: 0; }
  .header .gnb-wrap .gnb .inner {padding:0 20px; overflow-y: auto; height: 100%; padding-bottom: 80px; }
  .header .gnb-wrap .gnb .menu-close { padding: 20px; text-align: right; cursor: pointer; font-size: 24px; }
  .header .gnb-wrap .gnb .profile { display: table; width: calc(100% - 20px); margin: 0 10px 10px; font-size: 0; background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(255,134,110,1) 0%, rgba(255,178,131,1) 100%); }
  .header .gnb-wrap .gnb .profile > div { display: table-cell; vertical-align: middle; padding: 10px 0; }
  .header .gnb-wrap .gnb .profile .thumb { width: 62px; height: 62px; border-radius: 42px; overflow: hidden; text-align: center; }
  .header .gnb-wrap .gnb .profile .thumb img { width: 42px!important; height: 42px!important; border-radius: 42px; overflow: hidden; }
  .header .gnb-wrap .gnb .profile .info { position: relative; }
  .header .gnb-wrap .gnb .profile .info p { font-size: 13px; color: #fff; }
  .header .gnb-wrap .gnb .profile .info p.nick-name { color: #fff; font-weight: bold; }
  .header .gnb-wrap .gnb .profile .info a { display: inline-block; padding: 0 10px; height: 24px; line-height: 24px; border-radius: 24px; position: absolute; top: 50%; margin-top: -12px; right: 10px; font-size: 11px; background: #fff; color: #ff866e; }
  .header .gnb-wrap .gnb .profile .info a.last { right: 75px; }
  .header .gnb-wrap .wrapper .login-btn ul {display:flex;align-items:center;}
  .header .gnb-wrap .wrapper .login-btn ul li {position:relative;}
  .header .gnb-wrap .wrapper .login-btn ul li ~ li{padding-left:11px;margin-left:10px;}
  .header .gnb-wrap .wrapper .login-btn ul li ~ li:before{content:'';display:block;position:absolute;top:50%;left:0;width:1px;height:14px;background:#fff;transform:translateY(-50%);}
  .header .gnb-wrap .wrapper .login-btn ul li a {font-size:1.4rem;}
  .header .gnb-wrap .wrapper .etc-menu{margin-top:20px;}
  .header .gnb-wrap .wrapper .etc-menu ul li{display:inline-flex;justify-content:center;align-items:center;margin-right:15px;}
  .header .gnb-wrap .wrapper .etc-menu ul li:last-child{margin-right:0px;}
  .header .gnb-wrap .wrapper .etc-menu ul li i{margin-right:10px;}
  .header .gnb-wrap .wrapper .etc-menu ul li i img{height:40px;}
  .header .gnb-wrap .wrapper .global-menu{border-top:1px solid #ccc;border-bottom:1px solid #ccc;padding:30px 0;margin-top:25px;}
  .header .gnb-wrap .wrapper .global-menu li{font-size:2rem;}
  .header .gnb-wrap .wrapper .global-menu li ~ li{margin-top:20px;}
  .header .gnb-wrap .wrapper .community{border-bottom:1px solid #ccc;padding:30px 0;}
  .header .gnb-wrap .wrapper .community li{font-size:2rem;}
  .header .gnb-wrap .wrapper .community li ~ li{margin-top:20px;}

  
  .header .mobile-menu-wrap { position: absolute; top: 0; right: 2px; display:flex;align-items:center;height:100%;}
  .header .mobile-menu a,
  .header .mobile-search a { color: #fff; font-size: 0; display: block; width: 50px; height: 50px;background:url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 14L17 17' stroke='%23505050' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round'/%3E%3Cpath d='M9.5 15C12.5376 15 15 12.5376 15 9.5C15 6.46243 12.5376 4 9.5 4C6.46243 4 4 6.46243 4 9.5C4 12.5376 6.46243 15 9.5 15Z' stroke='%23505050' stroke-width='1.5' stroke-miterlimit='10'/%3E%3C/svg%3E%0A") no-repeat 50% 50%;background-size:auto 26px;}
  .header .mobile-menu a {background:url("data:image/svg+xml,%3Csvg width='60' height='52' viewBox='0 0 60 52' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M57.828 28.5086H2.17202C0.973067 28.5086 0 27.4428 0 26.1295C0 24.8163 0.973067 23.7505 2.17202 23.7505H57.828C59.0269 23.7505 60 24.8163 60 26.1295C60 27.4428 59.0269 28.5086 57.828 28.5086Z' fill='%231F2125'/%3E%3Cpath d='M57.828 51.9998H2.17202C0.973067 51.9998 0 50.934 0 49.6207C0 48.3075 0.973067 47.2417 2.17202 47.2417H57.828C59.0269 47.2417 60 48.3075 60 49.6207C60 50.934 59.0269 51.9998 57.828 51.9998Z' fill='%231F2125'/%3E%3Cpath d='M57.828 4.75807H2.17202C0.973067 4.75807 0 3.69226 0 2.37903C0 1.06581 0.973067 0 2.17202 0H57.828C59.0269 0 60 1.06581 60 2.37903C60 3.69226 59.0269 4.75807 57.828 4.75807Z' fill='%231F2125'/%3E%3C/svg%3E%0A") no-repeat 50% 50%;background-size:auto 20px;}

}

.footer .util { border-top: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8; }
.footer .util .wrapper { overflow: hidden; }
.footer .util .wrapper .left { float: left; }
.footer .util .wrapper .right { float: right; }
.footer-btn-wrap { display: flex; gap: 8px; margin-top: 14px; }
.footer-quick-btn { display: inline-flex; align-items: center; gap: 5px; padding: 7px 20px; border: 1px solid #ddd; border-radius: 10px; background: #fff; font-size: 13px; font-weight: 500; color: #888; text-decoration: none; transition: all 0.2s; }
.footer-quick-btn:hover { border-color: #b2d459; color: #b2d459; }
.footer .util ul { font-size: 0; }
.footer .util ul li { position: relative; display: inline-block; font-size: 14px; line-height: 60px; padding: 0 10px; }
.footer .util ul li:first-child { padding-left: 0; }
.footer .util ul li a { color: #666; }
.footer .footer-bottom .right { width: 33.333%; float: right; max-width: 350px; }
.footer .util .right .social-list { float: right; margin-top: 14px; }
.footer .util .right .social-list a { display: inline-block; vertical-align: top; width: 32px; height: 32px; line-height: 32px; background: transparent; font-size: 20px; margin: 0 2px; background-size: 32px; text-align: center; }
.footer .util .social-list a.deddang { background: url(../images/4-sns-1.png) no-repeat 50%/contain; }
.footer .util .social-list a.youtube { background: url(../images/4-sns-2.png) no-repeat 50%/contain; }
.footer .util .social-list a.facebook { background: url(../images/4-sns-3.png) no-repeat 50%/contain; }
.footer .util .social-list a.instagram { background: url(../images/4-sns-4.png) no-repeat 50%/contain; }
.footer .util .social-list a.kakao { background: url(../images/4-sns-5.png) no-repeat 50%/contain; }
.footer .footer-top { display: flex; flex-wrap: wrap; -webkit-box-pack: start; place-content: stretch flex-start; margin-right: -12px; margin-left: -12px; }
.footer .footer-top .cs-center { width: 33.333%; padding: 0 12px; }
.footer .footer-top .cs-center a { display: block; text-align: center; height: 40px; line-height: 40px; border: 1px solid #dfdfdf; border-radius: 3px; }
.footer .footer-bottom { padding: 25px 0; overflow: hidden; }
.footer .footer-bottom .left { width: 66.667%; float: left; }
.footer .footer-bottom .left h1 { display: block; margin-bottom: 15px; font-size: 18px; }
.footer .footer-bottom .left h1 img { height: 25px; }
.footer .footer-bottom .addr { margin-top: 10px; }
.footer .footer-bottom .addr p { font-size: 12px; font-weight: normal; color: #666; line-height: 1.5; letter-spacing: normal; }
.footer .footer-bottom .addr p:nth-child(1), #footer .footer-bottom .addr p:nth-child(2) { font-size: 13px; }
.footer .footer-bottom .left .certification-icon { margin-top: 20px; }
.footer .footer-bottom .left .certification-icon ul { font-size: 0; }
.footer .footer-bottom .left .certification-icon ul li { display: inline-block; margin-right: 10px; }
.footer .footer-bottom .addr p a { display: inline-block; height: 26px; line-height: 24px; border: 1px solid #e8e8e8; font-size: 12px; margin: 20px 0; margin-right: 10px; padding: 0 10px; border-radius: 5px; }
.footer .footer-bottom .addr p.last-info { font-size: 11px; }
.footer .footer-bottom .right h2 { font-size: 16px; font-weight: bold; color: rgb(27, 28, 29); letter-spacing: -0.15px; margin-bottom: 15px; }
.footer .footer-bottom .right h2 b { color: #f43142; }
.footer .footer-bottom .right p { margin: 10px 0 20px 0; color: #666; font-size: 13px; }

@media all and (min-width:1201px) {
  .footer-fix-menu{display:none;}
}
@media all and (max-width:1200px) {
  .footer{padding-bottom:56px;}
  .footer .wrapper { padding: 0 50px; }
  .footer .footer-bottom .addr p { font-size: 11px; }
  .footer .footer-bottom .addr p a { margin: 10px 5px; margin-right: 5px; }
  .footer .footer-bottom .left .certification-icon { display: none; }

  .footer-fix-menu { display: block; position: fixed; width: 100%; bottom: 0; left: 0; background: #fff; border-top: 1px solid #dfdfdf; z-index: 999; }
  .footer-fix-menu ul { overflow: hidden; }
  .footer-fix-menu ul li { padding: 10px 0; width: 20%; text-align: center; float: left; position: relative; }
  .footer-fix-menu ul li a { display: block; }
  .footer-fix-menu ul li a span { display: inline-block; }
  .footer-fix-menu ul li a span.icon { font-size: 20px; line-height: 20px; }
  .footer-fix-menu ul li a span.desc { display: block; font-size: 10px; margin-top: 2px; }
  .footer-fix-menu ul li a .count { width: 16px; height: 16px; border-radius: 16px; line-height: 16px; background: #b2d459; color: #fff; text-align: center; font-size: 9px; position: absolute; top: 5px; right: 50%; font-style: normal; margin-right: -22px; -webkit-animation: joinAnimation 3s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; }
}

@media all and (max-width:900px) {
  .footer .footer-bottom .left,
  .footer .footer-bottom .right{float:none;width:auto;text-align:center;max-width: 100%;}
  .footer .footer-bottom .right{margin-top:15px;}
}
@media all and (max-width:640px) {
  .footer .footer-bottom .addr p a:last-child {display:none;}
 }

/* =======================================
content common
========================================== */
@media all and (min-width:1201px) {
  .container {padding-top:120px;min-height:700px;}
  .container .contents {padding-top:30px;padding-bottom:70px;}
}
@media all and (max-width:1200px) {
  .container {padding:0 10px;padding-top:53px;}
  .container .contents {padding-top:15px;padding-bottom:35px;}
}

/* tit */
.tit-type1 {font-size:26px;display:block;width:100%;padding-bottom:15px;margin-bottom:15px;line-height:inherit;color:#333;border:0;/* border-bottom:1px solid #e5e5e5;*/font-weight:normal;clear:both;}
.tit-type1:first-child {padding-top:20px;}

.tit-type2 {position:relative;margin-top:50px;margin-bottom:25px;}
.tit-type2:before {content:'';display:block;position:absolute;top:50%;left:0;width:100%;height:1px;background:#ddd;}
.tit-type2 b {display:inline-block;background:#fff;position:relative;font-size:15px;padding-right:15px;color:#313b47;font-weight:500;}
.tit-type2 .menu {position:absolute;top:50%;right:0;padding-left:15px;background:#fff;transform:translateY(-50%);-webkit-transform:translateY(-50%);}

.tit-type3 {overflow:hidden;font-size:18px;color:#000;margin-bottom:20px;display:flex;flex-direction:row;align-items:center;font-weight:500;margin-top:50px;}
.tit-type3 .right {margin-left:auto;font-size:14px;font-weight:normal;}
@media all and (max-width:1200px) {
  .tit-type1 {font-size:22px;}
  .tit-type3 {font-size:16px;}
  .tit-type3 .right {font-size:13px;}
}

/* dl */
.dl-type1 {border-bottom:1px solid #ccc;padding:15px 0;}
.dl-type1 dt {font-size:18px;color:#222;font-weight:700;}
.dl-type1 dd {font-size:14px;color:#666;margin-top:15px;}
@media all and (max-width:1200px) {
  .dl-type1 {padding:14px 0;}
  .dl-type1 dt {font-size:16px;}
  .dl-type1 dd {font-size:13px;margin-top:14px;}
}

/* text */
.text-type1 {line-height:1.7;font-size:14px;margin-top:15px;}
.text-grade b {font-size:18px;color:#000;margin-right:2px;}

/* btn */
.btn-wrap {display:flex;margin-top:70px;justify-content:center;}
.btn-wrap .right {margin-left:auto;display:flex;flex-direction:row;align-items:center;}
.btn-wrap .left * ~ *,
.btn-wrap .right * ~ * {margin-left:20px;}
.btn-wrap [class*='btn-type'] {vertical-align:middle;}
.btn-wrap .btn-type2 {min-width:100px;}
.btn-more-wrap {margin-top:50px;text-align:center;}
@media all and (max-width:1200px) {
  .btn-wrap {margin-top:35px;}
  .btn-wrap .right * ~ * {margin-left:17px;}
  .btn-wrap .btn-type2 {min-width:85px;}
  .btn-more-wrap {margin-top:43px;}
}

[class*=btn-type] {white-space:nowrap;}
[class*=btn-type]:disabled {background:#e8e8e8 !important;color:#aeaeae !important;border-color:#e8e8e8 !important;cursor:default;}
[class*=btn-type] i:first-child {margin-right:5px;}
.btn-type1 {display:inline-flex;height:47px;border-radius:3px;min-width:135px;padding:0 17px;line-height:45px;font-size:16px;text-align:center;align-items:center;justify-content:center;}
.btn-type2 {display:inline-flex;height:40px;border-radius:3px;min-width:80px;padding:0 17px;line-height:39px;font-size:14px;text-align:center;align-items:center;justify-content:center;}
.btn-type2 [class*=xi-] {font-size:16px;}
.btn-type3 {display:inline-flex;height:37px;border-radius:3px;min-width:60px;padding:0 15px;line-height:32px;font-size:14px;text-align:center;align-items:center;justify-content:center;}
.btn-type4 {display:inline-flex;height:34px;border-radius:3px;min-width:60px;padding:0 15px;line-height:32px;font-size:14px;text-align:center;align-items:center;justify-content:center;}
.btn-type5 {display:inline-flex;height:30px;border-radius:3px;min-width:60px;padding:0 10px;line-height:32px;font-size:14px;text-align:center;align-items:center;justify-content:center;font-size:13px;}
.btn-type6 {display:inline-flex;height:26px;border-radius:3px;min-width:60px;padding:0 10px;line-height:32px;font-size:14px;text-align:center;align-items:center;justify-content:center;font-size:13px;}
.btn-icon {padding:5px 10px;min-width:0;font-size:25px;}
.btn-icon > * {float:left;}
/* .btn-type3 {display:inline-flex;height:34px;border-radius:3px;min-width:60px;padding:0 15px;line-height:32px;font-size:14px;text-align:center;align-items:center;justify-content:center;} */
[class*=btn-type].st1 {border:1px solid #2c3e50;color:#fff;background:#2c3e50;}
[class*=btn-type].st2 {border:1px solid #333;color:#333;background:#fff;}
[class*=btn-type].st3 {border:1px solid #76828e;color:#fff;background:#76828e;}
[class*=btn-type].st4 {border:1px solid #b2d459;color:#fff;background:#b2d459;}
[class*=btn-type].st5 {border:1px solid #5db75d;color:#fff;background:#5db75d;}
[class*=btn-type].st6 {border:1px solid #ff3366;color:#fff;background:#ff3366;}
[class*=btn-type].btn-more {min-width:200px;border:1px solid #333;color:#333;background:#fff;}
@media all and (max-width:1200px) {
  .btn-wrap {margin-top:35px;}
}
@media all and (max-width:820px) {
  [class*=btn-type] i:first-child {margin-right:4px;}
  .btn-type1 {height:40px;border-radius:3px;min-width:115px;padding:0 14px;line-height:38px;font-size:14px;}
  .btn-type2 {height:34px;border-radius:3px;min-width:68px;padding:0 14px;line-height:30px;font-size:12px;}
  .btn-type2 [class*=xi-] {font-size:14px;}
  .btn-type3 {height:31px;border-radius:3px;min-width:51px;padding:0 13px;line-height:27px;font-size:12px;}
  .btn-type4 {height:29px;border-radius:3px;min-width:51px;padding:0 13px;line-height:27px;font-size:12px;}
  .btn-type5 {height:26px;border-radius:3px;min-width:51px;padding:0 9px;line-height:27px;font-size:12px;font-size:11px;}
  .btn-type6 {height:22px;border-radius:3px;min-width:51px;padding:0 9px;line-height:27px;font-size:12px;font-size:11px;}
  .btn-icon {padding:4px 9px;font-size:21px;}
  [class*=btn-type].btn-more {line-height:32px;}
}

/* tab */
.tab-type1 {text-align:center;padding:30px 0 70px;}
.tab-type1:after {content:"";display:block;clear:both;}
.tab-type1 ul {display:flex;align-items:center;justify-content:flex-start;}
.tab-type1 li {position:relative;flex:1;}
.tab-type1 li ~ li {margin-left:10px;}
.tab-type1 li:first-child {margin-left:0;}
.tab-type1 a {display:block;position:relative;height:50px;line-height:49px;border:1px solid #b2d459;font-size:15px;color:#b2d459;text-align:center;}
.tab-type1 li.on a {color:#fff;background:#b2d459;}
@media all and (max-width:640px) {
  .tab-type1 {padding:26px 0 40px;}
  .tab-type1 ul {flex-wrap:wrap;}
  .tab-type1 ul li {width:50%;flex:initial;margin:5px 0;}
  .tab-type1 ul li:nth-child(odd) {padding-right:5px;}
  .tab-type1 ul li:nth-child(even) {padding-left:5px;}
  .tab-type1 a {height:43px;line-height:42px;font-size:13px;}

}

.tab-type2 {border-bottom:1px solid #dddee2;margin-bottom:50px;}
.tab-type2 ul:after {content:'';display:block;clear:both;}
.tab-type2 ul li {float:left;margin:0 10px;}
.tab-type2 ul li:first-child {margin-left:0;}
.tab-type2 ul li a {position:relative;display:block;height:40px;min-width:100px;line-height:38px;font-size:17px;color:#888;padding:0 15px;text-align:center;}
.tab-type2 ul li.on a {display:block;color:#3e4247;font-weight:bold;}
.tab-type2 ul li.on a:after {content:'';display:block;width:100%;height:5px;position:absolute;bottom:-2px;left:0;background:#b2d459;}
@media all and (max-width:820px) {
  .tab-type2 {margin-bottom:43px;}
  .tab-type2 ul li {margin:0 9px;}
  .tab-type2 ul li a {height:34px;min-width:85px;line-height:32px;font-size:14px;padding:0 13px;}
  .tab-type2 ul li.on a:after {height:4px;bottom:-2px;}
}

.tab-type3 {overflow-x:auto;padding:10px 0;}
.tab-type3 ul {white-space:nowrap;text-align:center;}
.tab-type3 ul li {display:inline-block;margin:0 20px;}
.tab-type3 a {display:block;font-size:18px;font-weight:500;border-radius:7px;padding:6px 12px;line-height:20px;color:#a4a4a6;margin:0 4px;white-space:nowrap;}
.tab-type3 a:hover {  background:#f4f4f5;}
.tab-type3 .active a {  background-color:#f4f4f5; color:#1B1B1B;}
@media all and (max-width:490px) {
  .tab-type3 a {font-size:14px;}
}


/* list */
.list-type1 {margin-top:30px;}
.list-type1 ul {display:grid;grid-template-columns:1fr 1fr;gap:5px 50px;}
.list-type1 ul li {position:relative;padding:10px 0;border-bottom:1px solid #ddd;}
.list-type1 ul li .label {display:block;color:#999;font-size:12px;margin-bottom:8px;}
.list-type1 ul li .desc {text-align:left;font-size:14px;color:#333;}
.list-type1 ul li .desc select,
.list-type1 ul li .desc textarea,
.list-type1 ul li .desc input[type='text'] {width:100%;}
.list-type1 ul li .desc.align-center {display:flex;align-items:center;height:40px;}
.list-type1 ul li.full { grid-column:span 2;}
@media all and (max-width:490px) {
  .list-type1 {margin-top:15px;}
  .tit-type1 + .list-type1 {margin-top:0;}
}

.list-type2 ul {display:grid;grid-template-columns:1fr 1fr;gap:3px;font-size:14px;}
.list-type2 ul li {display:grid;grid-template-columns:40% 60%;}
.list-type2 ul li > * {min-height:40px;}
.list-type2 ul li .label {background:#efefef;display:flex;flex-direction:column;justify-content:center;align-items:center;}
.list-type2 ul li .desc {display:flex;flex-direction:row;align-items:center;padding:5px 12px;background:#f9f9f9;}
.list-type2 ul li select,
.list-type2 ul li input[type="text"] {width:100%;height:30px;}
.list-type2 ul li input[type="text"] {padding:0 10px;}
.list-type2 ul li textarea{width:100%;}
@media all and (min-width:491px) {
  .list-type2 ul li.full { grid-column:span 2;grid-template-columns:20% 80%;}
}
@media all and (max-width:490px) {
  .list-type1 ul {display:block;}
  .list-type2 ul {grid-template-columns:1fr;gap:3px 0;}
  .list-type2 ul {gap:3px;font-size:13px;}
  .list-type2 ul li {grid-template-columns:35% 65%;}
  .list-type2 ul li > * {min-height:36px;}
  .list-type2 ul li .desc {padding:5px 14px;}
  .list-type2 ul li input[type="text"] {height:27px;}
  .list-type2 ul li input[type="text"] {padding:0 9px;}
}

/* img-list */
.img-list {margin-top:30px;}
.img-list ul {display:grid;grid-template-columns:repeat(5, 1fr);gap:15px;}
.img-list ul li{position:relative;}
.img-list ul li img {width:100%;height:100%;}
.img-list ul li .caption{position:absolute;bottom:0;left:0;width:100%;min-height:50px;background:rgba(0,0,0,.5);text-align:center; color:#fff;display:flex;flex-direction: column;justify-content:center;align-items:center;font-size:14px;}
.img-list.num2 ul {grid-template-columns:repeat(2, 1fr);}
@media all and (max-width:1024px) {
  .tab-type1 + .img-list {margin-top:0;}
  .img-list ul {grid-template-columns:repeat(4, 1fr);}
}
@media all and (max-width:820px) {
  .img-list ul {grid-template-columns:repeat(3, 1fr);}
}
@media all and (max-width:640px) {
  .img-list ul {grid-template-columns:repeat(2, 1fr);}
}
@media all and (max-width:490px) {
  .img-list ul {grid-template-columns:repeat(1, 1fr) !important;}
}

/* table */
.table-type1 {overflow:hidden;overflow-x:auto;}
.table-type1 table {table-layout:fixed;border-top:2px solid #000;border-bottom:1px solid #ccc;width:100%;border-spacing:0;font-size:13px;}
.table-type1 table th {text-align:center;padding:15px 0;border-bottom:1px solid #000;}
.table-type1 table td {padding:15px 0;text-align:center;}

.table-type2 {overflow:hidden;overflow-x:auto;}
.table-type2 table {table-layout:fixed;border:1px solid #ccc;width:100%;border-spacing:0;font-size:13px;}
.table-type2 table th {text-align:center;padding:15px 0;border-left:1px solid #ccc;border-bottom:1px solid #ccc;}
.table-type2 table td {padding:15px 10px;border-left:1px solid #ccc;border-bottom:1px solid #ccc;text-align:left;line-height:20px;}

/* paging */
.paging-wrap {position:relative;margin-top:40px;text-align:center;display:flex;flex-direction:row;justify-content:center;align-items:center;}
.paging {position:relative;display:inline-block;line-height:0;text-align:center;}
.paging a {position:relative;display:inline-block;width:25px;height:25px;line-height:24px;margin:0 3px;color:#222;font-size:13px;font-weight:400;letter-spacing:normal;z-index:0;vertical-align:middle;}
.paging a.on {color:#b2d459;font-weight:700;z-index:1;}
.paging p {display:inline-block;padding:0;line-height:0;vertical-align:middle;}
.paging > a {display:inline-block;width:25px;height:25px; background-repeat:no-repeat;background-position:center center;}
.paging > span {display:inline-block;vertical-align:middle;}
.paging > span > a:first-child {margin-right:0;}
.paging > span > a:last-child {margin-left:0;}
.paging > a.btn-page-first {position:relative;margin-right:0;margin-left:0;}
.paging > a.btn-page-first:before {content:'';display:block;position:absolute;top:0;left:0;width:90%;height:100%;margin:0 9px 0 0;text-indent:-9999%;overflow:hidden;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24px' height='24px' viewBox='0 0 24 24'%3E%3Cpolyline fill='none' stroke='%23000' stroke-width='2' points='9 6 15 12 9 18' transform='matrix(-1 0 0 1 24 0)'/%3E%3C/svg%3E");background-size:auto 20px;background-position:50% 60%;}
.paging > a.btn-page-first:after {content:'';display:block;position:absolute;top:0;right:0;width:90%;height:100%;margin:0 9px 0 0;text-indent:-9999%;overflow:hidden;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24px' height='24px' viewBox='0 0 24 24'%3E%3Cpolyline fill='none' stroke='%23000' stroke-width='2' points='9 6 15 12 9 18' transform='matrix(-1 0 0 1 24 0)'/%3E%3C/svg%3E");background-size:auto 20px;background-position:50% 60%;}
.paging > a.btn-page-prev {margin:0 9px 0 0;text-indent:-9999%;overflow:hidden;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24px' height='24px' viewBox='0 0 24 24'%3E%3Cpolyline fill='none' stroke='%23000' stroke-width='2' points='9 6 15 12 9 18' transform='matrix(-1 0 0 1 24 0)'/%3E%3C/svg%3E");background-size:auto 20px;}
.paging > a.btn-page-next {margin:0 0 0 9px;margin-left:0;text-indent:-9999%;overflow:hidden;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24px' height='24px' viewBox='0 0 24 24'%3E%3Cpolyline fill='none' stroke='%23000' stroke-width='2' points='9 6 15 12 9 18' transform='matrix(-1 0 0 1 24 0)'/%3E%3C/svg%3E");background-size:auto 20px;transform:rotate(180deg)}
.paging > a.btn-page-last {position:relative;margin-right:0;}
.paging > a.btn-page-last:before {content:'';display:block;position:absolute;top:0;left:0;width:90%;height:100%;margin:0 9px 0 0;text-indent:-9999%;overflow:hidden;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24px' height='24px' viewBox='0 0 24 24'%3E%3Cpolyline fill='none' stroke='%23000' stroke-width='2' points='9 6 15 12 9 18' transform='matrix(-1 0 0 1 24 0)'/%3E%3C/svg%3E");background-size:auto 20px;background-position:50% 60%;transform:rotate(180deg)}
.paging > a.btn-page-last:after {content:'';display:block;position:absolute;top:0;right:0;width:90%;height:100%;margin:0 9px 0 0;text-indent:-9999%;overflow:hidden;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24px' height='24px' viewBox='0 0 24 24'%3E%3Cpolyline fill='none' stroke='%23000' stroke-width='2' points='9 6 15 12 9 18' transform='matrix(-1 0 0 1 24 0)'/%3E%3C/svg%3E");background-size:auto 20px;background-position:50% 60%;transform:rotate(180deg)}
.paging-wrap + .btn-wrap {margin-top:20px;}

/* star */
.star-grade {display:inline-block;white-space:nowrap;}
.star-grade i {display:inline-block;width:30px;height:30px;margin:0 4px;background:url('../images/common/ico-star.png') no-repeat 0 0;}
.star-grade i.on {background-position:-30px 0;}
.star-grade i.half {background-position:-60px 0;}
.star-grade.gray i {background-position:-90px 0;}
.star-grade.size2 i {width:14px;height:14px;margin:0 2px;background-size:auto 14px;}
.star-grade.size2 i.on {background-position:-14px 0;}
.star-grade.size2 i.half {background-position:-28px 0;}
.star-grade.size2.gray i {background-position:-42px 0;}

/* =======================================
main
========================================== */
/* hero slider */
.hero-slider {position:relative;width:100%;height:calc(100vh - 90px);overflow:hidden;}
.hero-slides {position:relative;width:100%;height:100%;}
.hero-slide {position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;transition:opacity 0.8s ease;}
.hero-slide.active {opacity:1;z-index:1;}
.hero-bg {position:absolute;top:0;left:0;width:100%;height:100%;}
.hero-content {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;z-index:2;width:90%;max-width:800px;}
.hero-content h1 {font-size:60px;color:#fff;font-weight:600;}
.hero-content h1 span {color:#b2d459;}
.hero-content h2 {font-size:36px;color:#fff;font-weight:600;margin-top:10px;padding:0 60px;position:relative;}
.hero-content h2:before {content:'';width:20px;height:100%;position:absolute;left:0;top:0;border:2px solid #fff;border-right:0;}
.hero-content h2:after {content:'';width:20px;height:100%;position:absolute;right:0;top:0;border:2px solid #fff;border-left:0;}
.hero-content h2 span {color:#b2d459;}
.hero-content p {font-size:14px;color:#fff;margin-top:20px;}
.hero-paging {position:absolute;bottom:30px;left:50%;transform:translateX(-50%);z-index:3;display:flex;gap:6px;border-radius:8px;overflow:hidden;}
.hero-page {padding:14px 28px;border:none;background:rgba(0,0,0,0.5);color:rgba(255,255,255,0.6);font-size:14px;font-weight:500;cursor:pointer;transition:all 0.3s;white-space:nowrap;}
.hero-page:hover {background:rgba(0,0,0,0.7);color:#fff;}
.hero-page.active {background:rgba(0,188,238,0.9);color:#fff;font-weight:600;}

/* service menu */
.service-menu {background:#fff;padding:40px 0;}
.service-menu ul {display:flex;justify-content:center;gap:20px;max-width:1200px;margin:0 auto;padding:0 20px;}
.service-menu li {flex:1;max-width:260px;}
.service-menu a {display:block;text-align:center;padding:30px 20px;border-radius:12px;background:#f5f7fa;transition:all 0.3s;text-decoration:none;}
.service-menu a:hover {background:#00bcee;transform:translateY(-5px);box-shadow:0 8px 20px rgba(0,188,238,0.3);}
.service-menu a:hover strong {color:#fff;}
.service-menu .icon {margin-bottom:15px;}
.service-menu .icon img {width:80px;height:80px;object-fit:contain;}
.service-menu strong {display:block;font-size:16px;color:#333;font-weight:600;}

@media all and (max-width:1200px) {
  .hero-slider {height:calc(100vh - 90px);}
  .hero-content h1 {font-size:8vw;}
  .hero-content h2 {font-size:4vw;}
  .hero-content p {font-size:2.7vw;}
  .service-menu ul {gap:10px;padding:0 10px;}
  .service-menu a {padding:20px 10px;}
  .service-menu .icon img {width:60px;height:60px;}
  .service-menu strong {font-size:14px;}
}

.container.main {padding-bottom:50px;padding-top:0;}

@media all and (max-width:1200px) {
  .container.main {padding:0 0;padding-bottom:20px;}
}
@media all and (max-width:640px) {
    .hero-slider {height:calc(100vh - 90px);}
    .hero-content h1 {font-size:10vw;}
    .hero-content h2 {font-size:5vw;padding:0 30px;}
    .hero-content h2:before, .hero-content h2:after {width:10px;}
    .hero-content p {font-size:3.5vw;}
    .hero-page {font-size:11px;padding:10px 14px;}
    .service-menu {padding:20px 0;}
    .service-menu ul {flex-wrap:wrap;gap:10px;}
    .service-menu li {flex:0 0 calc(50% - 10px);}
    .service-menu a {padding:15px 10px;border-radius:8px;}
    .service-menu .icon img {width:50px;height:50px;}
    .service-menu strong {font-size:13px;}
}

/* =======================================
content
========================================== */
.company-wrap > div {float:left;box-sizing:border-box;width:50%;}
.company-wrap > div.con-left .video-wrap {position:relative;padding-bottom:56.25%;}
.company-wrap > div.con-left .video-wrap iframe {position:absolute;top:0;left:0;width:100%;height:100%;}
.company-wrap > div.con-right {padding-left:20px;}
.company-wrap > div.con-right h2 {font-size:20px;}
.company-wrap > div.con-right p {margin:30px 0;line-height:1.5;font-size:16px;letter-spacing:-1px;}
.company-wrap > div.con-right p.last {margin:0;}
@media all and (max-width:820px) {
    .company-wrap > div {float:none;box-sizing:border-box;width:100%;}
    .company-wrap > div.con-right {padding:20px 0 10px;padding-left:0;}
  .company-wrap > div.con-right h2 {font-size:16px;}
  .company-wrap > div.con-right p {margin:20px 0;font-size:12px;}
}

/* filter */
/* .search-wrap {min-height:1000px;} */
.prd-filter {margin:10px 0 20px;}
.prd-filter .filter-wrap:after {content:'';display:block;clear:both;}
.prd-filter .filter-wrap .con-left {float:left;display:flex;align-items:center;}
.prd-filter .filter-wrap .con-right {float:right;display:flex;align-items:center;}
.prd-filter .filter-wrap .con-left > * ~ * {margin-left:10px;}
.prd-filter .filter-wrap .con-left > div {display:inline-block;position:relative;margin-right:10px;}
.prd-filter .filter-wrap .con-left > div.category-filter {margin-right:0;}
.prd-filter .filter-wrap .con-left .filter-btn {position:relative;display:inline-block;padding:0 20px;height:40px;line-height:38px;border:1px solid #ddd;border-radius:3px;font-size:13px;color:#1e1e1f;letter-spacing:-0.54px;}
.prd-filter .filter-wrap .con-left .filter-btn img {height:20px;vertical-align:middle;}
.prd-filter .filter-wrap .con-left .filter-btn.active {color:#b2d459;}
.prd-filter .filter-wrap .con-right > * ~ * {margin-left:10px;}
.prd-filter .filter-wrap .con-left .filter-btn i {line-height:38px;margin-left:2px;color:#1e1e1f;font-size:16px;vertical-align:middle;}
.prd-filter .filter-wrap .con-left .filter-btn .count {position:absolute;top:-10px;right:-10px;width:20px;height:20px;border-radius:20px;line-height:20px;text-align:center;background:#b2d459;color:#fff;font-size:11px;letter-spacing:-0.46px;opacity:0;visibility:hidden;}
.prd-filter .filter-wrap .con-left .filter-btn .count.active {opacity:1;visibility:visible;}

.category-filter .filter-pop {position:absolute;top:0;left:0;width:400px;padding:10px;background:#f1f2f3;z-index:100;border:1px solid #e0e0e0;box-shadow:5px 5px 10px rgba(0,0,0,0.15);opacity:0;visibility:hidden;}
.category-filter .filter-pop .filter-pop-inner {border:1px solid #e0e0e0;height:100%;overflow-x:hidden;overflow-y:auto;}
.category-filter .filter-pop.active {opacity:1;visibility:visible;}
.category-filter .filter-pop .filter-search {background:#fff;padding:10px;position:relative;}
.category-filter .filter-pop .filter-search .search-inner {border:1px solid #b2d459;border-radius:2px;overflow:hidden;height:30px;box-sizing:border-box;}
.category-filter .filter-pop .filter-search button {position:absolute;background:#b2d459;color:#fff;width:30px;height:30px;right:10px;top:10px;}
.category-filter .filter-pop .filter-search input {border:0;width:100%;height:30px;padding:2px 5px;}
.category-filter .filter-pop .pop-header {position:relative;text-align:left;line-height:40px;border-top:1px solid #e0e0e0;border-bottom:1px solid #e0e0e0;background:#fff;}
.category-filter .filter-pop .pop-header h2 {display:inline-block;position:relative;font-size:16px;padding-left:40px;}
.category-filter .filter-pop .pop-header .close-pop {position:absolute;top:0;left:10px;}
.category-filter .filter-pop .pop-header .close-pop a {display:block;font-size:18px;color:#000;}
.category-filter .filter-pop .pop-header .reset-filter {position:absolute;line-height:40px;top:0;right:10px;}
.category-filter .filter-pop .pop-con {background:#fff;}
.category-filter .filter-pop .pop-con .pop-con-sub {padding:10px;}
.category-filter .filter-pop .pop-con .check-list h4 {font-size:14px;text-align:left;width:100%;height:40px;line-height:40px;margin-bottom:10px;box-sizing:border-box;border:1px solid #b0b0b0;color:#000;cursor:pointer;position:relative;padding:0 10px;transition:all 0.5s;}
.category-filter .filter-pop .pop-con .check-list h4 span {position:absolute;top:50%;right:20px;color:#000;font-size:11px;line-height:18px;font-weight:400;margin-top:-9px;}
.category-filter .filter-pop .pop-con .check-list h4 i {transition:all 0.5s;font-size:14px;position:absolute;top:50%;right:10px;margin-top:-7px;color:#b0b0b0;}
.category-filter .filter-pop .pop-con .check-list h4.on, .search .prd-filter .filter-wrap .filter-pop .pop-con .checkList h4:hover {color:#b2d459;border:1px solid #b2d459;}
.category-filter .filter-pop .pop-con .check-list h4:hover i {color:#b2d459;}
.category-filter .filter-pop .pop-con .check-list h4.on i {transform:rotate(180deg);color:#b2d459;}
.category-filter .filter-pop .pop-con .check-list > p {margin-bottom:30px;}
.category-filter .filter-pop .pop-con .check-con {display:none;}
.category-filter .filter-pop .pop-con .check-list .list ul {font-size:0;}
.category-filter .filter-pop .pop-con .check-list .list > ul > li {display:inline-block;width:calc(50% - 5px);vertical-align:top;margin-right:10px;margin-bottom:10px;}
.category-filter .filter-pop .pop-con .check-list .list ul li:nth-child(2n) {margin-right:0;}
.category-filter .filter-pop .pop-con .check-list .list ul li input[type="checkbox"],
.category-filter .filter-pop .pop-con .check-list .list ul li input[type="radio"] {display:none;}
.category-filter .filter-pop .pop-con .check-list .list ul li label {display:block;font-size:14px;cursor:pointer;}
.category-filter .filter-pop .pop-con .check-list .list ul li label p {text-align:center;line-height:35px;border:1px solid #b0b0b0;color:#000;border-radius:2px;}
.category-filter .filter-pop .pop-con .check-list .list ul li label input[type="checkbox"]:checked ~ p,
.category-filter .filter-pop .pop-con .check-list .list ul li label input[type="radio"]:checked ~ p {background:#b2d459;color:#fff;border:1px solid #b2d459;}
.category-filter .filter-pop .pop-con .check-list .list select,
.category-filter .filter-pop .pop-con .check-list .list input[type="text"] {width:100%;}
.category-filter .filter-pop .pop-con .calendar-list {text-align:center;padding-bottom:10px;}
.category-filter .filter-pop .pop-con .calendar-list .calendarYear {font-size:0;padding:10px 0;}
.category-filter .filter-pop .pop-con .calendar-list .calendarYear > * {display:inline-block;vertical-align:middle;}
.category-filter .filter-pop .pop-con .calendar-list .calendarYear p {width:150px;font-size:16px;}
.category-filter .filter-pop .pop-con .calendar-list .calendarYear a i {font-size:16px;color:#000;}
.category-filter .filter-pop .pop-con .calendar-list table {width:100%;}
.category-filter .filter-pop .pop-con .calendar-list table th,
.category-filter .filter-pop .pop-con .calendar-list table td {padding:8px 0;font-weight:500;font-size:13px;}
.category-filter .filter-pop .pop-con .calendar-list table th.prev {background:#2c3e50;text-align:center;border-radius:4px 0 0 4px;}
.category-filter .filter-pop .pop-con .calendar-list table th.prev span {float:none;margin:0 auto;background:none !important;}
.category-filter .filter-pop .pop-con .calendar-list table th.prev span:after {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24px' height='24px' viewBox='0 0 24 24'%3E%3Cpolyline fill='none' stroke='%23fff' stroke-width='2' points='9 6 15 12 9 18' transform='matrix(-1 0 0 1 24 0)'/%3E%3C/svg%3E");background-size:auto 20px;transform:translate(-50%, -50%) rotate(0deg);}
.category-filter .filter-pop .pop-con .calendar-list table th.next {background:#2c3e50;text-align:center;border-radius:0 4px 4px 0;border-left:1px solid #fff;}
.category-filter .filter-pop .pop-con .calendar-list table th.next span {float:none;margin:0 auto;background:none !important;}
.category-filter .filter-pop .pop-con .calendar-list table th.next span:after {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24px' height='24px' viewBox='0 0 24 24'%3E%3Cpolyline fill='none' stroke='%23fff' stroke-width='2' points='9 6 15 12 9 18' transform='matrix(-1 0 0 1 24 0)'/%3E%3C/svg%3E");background-size:auto 20px;transform:translate(-50%, -50%) rotate(180deg);}
.category-filter .filter-pop .pop-con .calendar-list table td.today {position:relative;}
.category-filter .filter-pop .pop-con .calendar-list table td.today div {position:relative;z-index:1;color:#000;}
.category-filter .filter-pop .pop-con .calendar-list table td .month {display:flex;flex-direction:column;justify-content:center;align-items:center;}
.category-filter .filter-pop .pop-con .calendar-list table td a[data-check="false"] {opacity:0.4;}
.category-filter .filter-pop .pop-con .calendar-list table td a[data-week="0"] {color:#ff0000;}
.category-filter .filter-pop .pop-con .calendar-list table td a span {position:relative;z-index:10;}
.category-filter .filter-pop .pop-con .calendar-list table td a.select {position:relative;color:#000;}
.category-filter .filter-pop .pop-con .calendar-list table td a.select:after {content:"";z-index:0;border-radius:20px;width:26px;height:26px;overflow:hidden;text-align:center;background:#f1c220;position:absolute;top:50%;left:50%;margin-top:-13px;margin-left:-13px;}

@media all and (max-width:1200px) {
  .prd-filter {padding:0 10px;}
  .category-filter .filter-pop {position:fixed;top:52px;left:0;right:0;bottom:0;width:100%;height:calc(100% - 60px);}
}


.notice-view {border-top:1px solid #222;padding-bottom:20px;padding-top:30px;}

.search-top {margin-bottom:15px;display:flex;align-items:flex-end;}
.search-top .right {margin-left:auto;display:flex;align-items:center;}
.search-top .right * ~ * {margin-left:10px;}
.search-top .total { color:#666;font-size:14px;position:relative;}
.search-top .total b { color:#222;margin-left:5px;}
.search-top .total ~ .total {padding-left:15px;margin-left:15px;}
.search-top .total ~ .total:after {content:'';display:block;position:absolute;top:50%;left:0;width:1px;height:10px;background:#ccc;transform:translateY(-50%);-webkit-transform:translateY(-50%);}
@media all and (max-width:820px) {
  .search-top .total {font-size:13px;}
}
@media all and (max-width:620px) {
  .search-top.m-st {flex-wrap:wrap;}
  .search-top.m-st > * {width:100%;}
  .search-top.m-st > .right {justify-content:flex-end;margin-top:10px;}
}

.search-result .search-top {margin-bottom:8px;}
.search-result .search-top .total {font-size:13px;}


.help-wrap {position:relative;}
.help-wrap .btn-icon i { color:#666;}
.help-wrap:hover .layer {display:block;}
.help-wrap:hover .btn-icon i { color:#000;}
.help-wrap .layer {display:none;position:absolute;top:50px;left:50%;width:300px;min-width:100px;background:#fff;padding:15px;z-index:50;border-radius:5px;border:1px solid #eee;box-shadow:0 0 10px 0 rgb(0 0 0 / 15%);text-align:left;transform:translateX(-50%);-webkit-transform:translateX(-50%);font-size:13px;line-height:1.4;}
.help-wrap .layer:before {content:'';display:block;position:absolute;top:-30px;left:0;height:30px;width:100%;}
.help-wrap .layer.right {left:initial;right:-20%;transform:translateX(0);-webkit-transform:translateX(0);}
@media all and (max-width:490px) {
  .help-wrap .layer {top:43px;width:200px;min-width:85px;padding:13px;border-radius:4px;box-shadow:0 0 9px 0 rgb(0 0 0 / 15%);font-size:11px;}
  .help-wrap .layer:before {top:-26px;height:26px;}
  .help-wrap .layer.right {right:-50%}
}

.map-wrap {position:relative;overflow:hidden;height:calc(100vh - 70px);}
.map-wrap .map-list-view-change {display:none;}
.map-wrap #map-view {position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;overflow:auto;-webkit-overflow-scrolling:touch;left:30rem;}
@media screen and (min-width:1120px) {
  .map-wrap .search-engine {display:none;-webkit-box-shadow:0 3px 5px 0 hsla(0,0%,54.9%,.5);}
}
.map-wrap .search-result {border-radius:3px;position:absolute;top:0;bottom:0;width:30rem;border-radius:0}
.map-wrap .search-result,
.map-wrap .search-result .store-list-toggle {background-color:#fff;-webkit-box-shadow:0 0 .25rem rgba(0,0,0,.25);box-shadow:0 0 .25rem rgba(0,0,0,.25);left:0;margin:auto}
.map-wrap .search-result .store-list-toggle {position:absolute;display:block;top:0;right:0;bottom:0;border-radius:3px;display:none;bottom:auto;height:4rem;color:#fff;background-color:#228be6;-webkit-transform:translateY(-4rem);transform:translateY(-4rem);font-size:1rem;line-height:4rem;text-align:center;cursor:pointer;z-index:1}
.map-wrap .search-result .store-list {position:absolute;display:block;top:0;left:0;right:0;bottom:0;margin:auto;overflow:auto;-webkit-overflow-scrolling:touch}
.map-wrap .search-result .store-list .map-list-filter {padding:14px 15px 10px;line-height:1.5;border-bottom:1px solid #eee;display:flex;flex-direction:row;align-items:center;}
.map-wrap .search-result .store-list .map-list-filter .con-left {flex:1;display:flex;align-items:center;}
.map-wrap .search-result .store-list .map-list-filter .con-left >* ~ * {margin-left:7px;}
.map-wrap .search-result .store-list .map-list-filter .con-right {margin-left:auto;display:flex;align-items:center;}
.map-wrap .search-result .store-list .map-list-filter .con-right >* ~ * {margin-left:7px;}
.map-wrap .search-result .store-list .map-list-filter select {display:inline-block;height:30px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;z-index:2;-webkit-user-select:auto;-moz-user-select:auto;-ms-user-select:auto;user-select:auto;border:0;outline:none;}
.map-wrap .search-result .store-list .map-list-filter a.filter-btn {display:inline-block;border:1px solid #ddd;height:30px;line-height:28px;padding:0 20px;border-radius:2px;background:#fff;}
.map-wrap .search-result .store-list .map-list-filter a.filter-btn img {height:20px;vertical-align:middle;}
.map-wrap .search-result .store-list .scroll {height:calc(100% - 60px);padding:15px;overflow-y:auto;overflow-x:hidden;}
.map-wrap .search-result.active .store-list .scroll {height:calc(100% - 40px);}
.map-wrap .category-filter.active {position:relative;z-index:999;}
.map-wrap .category-filter.active .filter-pop {opacity:1;visibility:visible;}
.map-wrap .filter-pop {position:fixed;top:4.3rem;left:0;bottom:0;width:30rem;border-radius:0;padding:10px;background:#f1f2f3;z-index:100;border:1px solid #e0e0e0;box-shadow:5px 5px 10px rgba(0,0,0,0.15);opacity:0;visibility:hidden;}
.map-wrap .filter-pop .filter-pop-inner {border:1px solid #e0e0e0;height:100%;overflow-x:hidden;overflow-y:auto;background:#fff;}
.map-wrap .filter-pop .filter-search {background:#fff;padding:10px;position:relative;}
.map-wrap .filter-pop .filter-search .search-inner {border:1px solid #b2d459;border-radius:2px;overflow:hidden;height:30px;box-sizing:border-box;}
.map-wrap .filter-pop .filter-search button {position:absolute;background:#b2d459;color:#fff;width:30px;height:30px;right:10px;top:10px;}
.map-wrap .filter-pop .filter-search input {border:0;width:100%;height:30px;}
.map-wrap .filter-pop .pop-header {position:relative;text-align:left;line-height:40px;border-top:1px solid #e0e0e0;border-bottom:1px solid #e0e0e0;background:#fff;}
.map-wrap .filter-pop .pop-header h2 {display:inline-block;position:relative;font-size:16px;padding-left:40px;}
.map-wrap .filter-pop .pop-header .close-pop {position:absolute;top:0;left:10px;}
.map-wrap .filter-pop .pop-header .close-pop a {display:block;font-size:18px;color:#000;}
.map-wrap .filter-pop .pop-header .reset-filter {position:absolute;line-height:40px;top:0;right:10px;}
.map-wrap .filter-pop .pop-con {background:#fff;}
.map-wrap .filter-pop .pop-con .pop-con-sub {padding:10px;}
.map-wrap .filter-pop .pop-con .checkList h4 {font-size:14px;text-align:left;width:100%;height:40px;line-height:40px;box-sizing:border-box;border:1px solid #b0b0b0;color:#000;cursor:pointer;position:relative;padding:0 10px;transition:all 0.5s;}
.map-wrap .filter-pop .pop-con .checkList h4 span {position:absolute;top:50%;right:20px;color:#000;font-size:11px;line-height:18px;font-weight:400;margin-top:-9px;}
.map-wrap .filter-pop .pop-con .checkList h4 i {transition:all 0.5s;font-size:14px;position:absolute;top:50%;right:10px;margin-top:-7px;color:#b0b0b0;}
.map-wrap .filter-pop .pop-con .checkList h4.on, .map-wrap .filter-pop .pop-con .checkList h4:hover {color:#b2d459;border:1px solid #b2d459;}
.map-wrap .filter-pop .pop-con .checkList h4:hover i {color:#b2d459;}
.map-wrap .filter-pop .pop-con .checkList h4.on i {transform:rotate(180deg);color:#b2d459;}
.map-wrap .filter-pop .pop-con .checkList > p {margin-bottom:30px;}
.map-wrap .filter-pop .pop-con .check-con {display:none;}
.map-wrap .filter-pop .pop-con .checkList ul {font-size:0;}
.map-wrap .filter-pop .pop-con .checkList ul li {display:inline-block;vertical-align:top;width:calc(50% - 5px);margin-right:10px;margin-bottom:10px;}
.map-wrap .filter-pop .pop-con .checkList ul li:nth-child(2n) {margin-right:0;}
.map-wrap .filter-pop .pop-con .checkList ul li input[type="checkbox"] {display:none;}
.map-wrap .filter-pop .pop-con .checkList ul li label {display:block;font-size:14px;cursor:pointer;}
.map-wrap .filter-pop .pop-con .checkList ul li label p {text-align:center;line-height:35px;border:1px solid #b0b0b0;color:#000;border-radius:2px;font-size:11px;}
.map-wrap .filter-pop .pop-con .checkList ul li label input[type="checkbox"]:checked ~ p {background:#b2d459;color:#fff;border:1px solid #b2d459;}
.map-wrap .filter-pop .pop-con .calendarList {text-align:center;}
.map-wrap .filter-pop .pop-con .calendarList .calendarYear {font-size:0;padding:10px 0;}
.map-wrap .filter-pop .pop-con .calendarList .calendarYear > * {display:inline-block;vertical-align:middle;}
.map-wrap .filter-pop .pop-con .calendarList .calendarYear p {width:150px;font-size:16px;}
.map-wrap .filter-pop .pop-con .calendarList .calendarYear a i {font-size:16px;color:#000;}
.map-wrap .filter-pop .pop-con .calendarList table {width:100%;}
.map-wrap .filter-pop .pop-con .calendarList table th, .map-wrap .filter-pop .pop-con .calendarList table td {padding:8px 0;font-weight:500;font-size:13px;}
.map-wrap .filter-pop .pop-con .calendarList table td.today {position:relative;}
.map-wrap .filter-pop .pop-con .calendarList table td.today div {position:relative;z-index:1;color:#000;}
.map-wrap .filter-pop .pop-con .calendarList table td.today:after {content:"";z-index:0;border-radius:20px;width:26px;height:26px;overflow:hidden;text-align:center;background:#dfdfdf;color:#fff;position:absolute;top:50%;left:50%;margin-top:-13px;margin-left:-13px;}
.map-wrap .filter-pop .pop-con .calendarList table td a[data-check="false"] {opacity:0.4;}
.map-wrap .filter-pop .pop-con .calendarList table td a[data-week="0"] {color:#ff0000;}
.map-wrap .filter-pop .pop-con .calendarList table td a span {position:relative;z-index:10;}
.map-wrap .filter-pop .pop-con .calendarList table td a.select {position:relative;color:#000;}
.map-wrap .filter-pop .pop-con .calendarList table td a.select:after {content:"";z-index:0;border-radius:20px;width:26px;height:26px;overflow:hidden;text-align:center;background:#f1c220;position:absolute;top:50%;left:50%;margin-top:-13px;margin-left:-13px;}
.map-wrap .search-result .empty {padding:2rem;text-align:center}
.map-wrap .search-result .empty img {display:inline-block;width:6rem;height:auto}
.map-wrap .search-result .empty .title {font-size:1.25rem;color:#228be6;line-height:1.5}
.map-wrap .search-result .empty .description {margin-top:.5rem;font-size:.875rem;line-height:1.75}
.map-wrap .search-result .empty .ui-button {margin-top:1rem}

@media screen and (max-width:1120px) {
  .map-wrap #map-view {left:0;}
  .map-wrap .search-result {display:none;left:0;bottom:0;width:100%;height:100%;border-radius:0}
  .map-wrap .search-result .store-list-toggle {display:block}
  .map-wrap .search-result .store-list {margin-top:40px}
  .map-wrap .search-result .store-list .map-list-filter {display:none}
    .map-wrap .search-result .store-list > .container, .map-wrap .search-result .store-list > .container ul {padding-bottom:60px;}
    .map-wrap .map-list-view-change {position:fixed;   display:block;   left:0;   right:0;   bottom:auto;   top:4.5rem;text-align:center;z-index:200;}
  .map-wrap .map-list-view-change ul {background:#fff;display:inline-block;font-size:0;text-align:center;-webkit-box-shadow:0 0 0.25rem rgba(0,0,0,.25);box-shadow:0 0 0.25rem rgba(0,0,0,.25);border-radius:30px;overflow:hidden;padding:0 5px;}
    .map-wrap .map-list-view-change ul li {display:inline-block;position:relative;width:36px;height:36px;cursor:pointer;}
    .map-wrap .map-list-view-change ul li:after {content:'';width:1px;height:100%;position:absolute;left:0;top:0;background:#f1f3f5;}
    .map-wrap .map-list-view-change ul li:first-child:after {display:none;}
    .map-wrap .map-list-view-change ul li i {font-size:18px;color:#999;line-height:36px;}
    .map-wrap .map-list-view-change ul li.active i {color:#b2d459;}
    .map-wrap .search-result.active {z-index:100;display:block;top:0;}
    .map-wrap .filter-pop {top:52px;left:0;right:0;bottom:0;width:auto;height:calc(100% - 110px);}
    .map-wrap .filter-pop.active {z-index:201;}
}

.ui-store.for-map {border-bottom:1px solid #f1f3f5;overflow:hidden;cursor:pointer;height:10rem}
.ui-store.for-map.disabled {opacity:.4}
.ui-store.for-map .interest-toggle {float:right;width:1.5rem;height:1.5rem;color:#dee2e6;z-index:1;cursor:pointer}
.ui-store.for-map>.container {padding:1rem;height:100%;position:relative;}
.ui-store.for-map>.container .heart {position:absolute;font-size:1.2rem;top:1rem;right:1rem;color:#8d8d8d;z-index:10;}
.ui-store.for-map>.container .heart.active {color:#ff6464;}
.ui-store.for-map>.container .heart i:before {content:"\ea11";}
.ui-store.for-map>.container .heart.active i:before {content:"\ea10";}
.ui-store.for-map .image {position:absolute;top:1rem;bottom:1rem;left:1rem;width:8rem;border-radius:3px;background-position:50%;background-size:cover}
.ui-store.for-map .image:after {content:"";display:block;padding-top:100%}
.ui-store.for-map .image>.container {position:absolute;display:block;top:0;left:0;right:0;bottom:0;margin:auto}
.ui-store.for-map .type {position:absolute;left:.4rem;top:.4rem;font-weight:700;z-index:1}
.ui-store.for-map .type span {background-color:#adb5bd;border-radius:3px;padding:.25rem .5rem;margin-right:.5rem;font-size:.75rem;color:#fff;vertical-align:.15em}
.ui-store.for-map .item-content {height:100%;position:relative;}
.ui-store.for-map .item-content>.text {margin-left:9rem;margin-right:0;line-height:1.5;height:7rem}
.ui-store.for-map .item-content>.text .name {font-size:1.1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ui-store.for-map .item-content>.text .part {color:rgb(141, 141, 141);margin-top:5px;}

.ui-store.for-map .item-content>.text .desc {color:rgb(141, 141, 141);height:36px;overflow:hidden;line-height:18px;display:block;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-wrap:break-word;word-break:break-all;margin:7px 0;}
@media screen and (max-width:1120px) {
  .ui-store.for-map .item-content>.text .name {font-size:1rem}
}
.ui-store.for-map .item-content>.text .address {margin-top:.3rem;font-size:.875rem}
.ui-store.for-map .item-content>.text .rating-star {font-size:.875rem}
.ui-store.for-map .item-content>.text .rating-star i {width:1.25rem}
.ui-store.for-map .item-content>.text .heart {width:1.5rem;height:1.5rem;float:right;margin-left:1rem;cursor:pointer}
.ui-store.for-map .item-content>.text .metadata {margin-top:.2rem;font-size:1rem;color:#666;line-height:1.5}
@media screen and (max-width:320px) {
  .ui-store.for-map .item-content>.text .metadata {width:200px}
}
.ui-store.for-map .item-content > .text .metadata .limit span+span {margin-left:.3rem}
.ui-store.for-map .item-content > .text .metadata li {display:inline-block;margin-right:.5rem;font-size:0.8rem;}
.ui-store.for-map .item-content > .text .metadata li span {color:#8d8d8d}
.ui-store.for-map .item-content > .text .metadata img {display:inline-block;vertical-align:middle;margin-right:.2rem;width:13px;height:13px}
.ui-store.for-map.activated,.ui-store.for-map:hover {background-color:#ebfffe}

/* user-info */
.user-info {display:flex;flex-direction:row;align-items:center;}
.user-info .menu {padding:0 10px;padding-left:30px;}
.user-info .img {height:100px;overflow:hidden;}
.user-info .img img {width:100%;height:100%;}
.user-info .desc {flex:1;padding-left:20px;}
.user-info .desc .name-area {margin-bottom:15px;}
.user-info .desc .name {font-weight:bold;font-size:16px;}
.user-info .desc .name .info {font-size:13px;color:#888;font-weight:400;}
.user-info .desc .addtxt {font-size:11px;margin-top:3px;opacity:0.7;}
.user-info .career {font-size:13px;}

/* profile-box */
.profile-box {padding:60px 0;text-align:center;}
.profile-box .profile-pic { width:100px;height:100px;position:relative;margin:0 auto 15px;border-radius:100px}
.profile-box .profile-pic img {border-radius:100%;display:block;width:100%;height:100%;object-fit:cover;}
.profile-box .profile-pic .btn-edit {border-radius:50%;border:solid 1px #1b1b1b;text-indent:-999em;overflow:hidden;background:#fff url(../images/icon/pen-sm.svg) 50% 50% no-repeat;width:38px;height:38px;position:absolute;left:100%;bottom:0px;transform:translateX(-50%);}
.profile-box .profile-pic .btn-edit input {display:none;}
.profile-box .profile-pic .btn-edit:before {  content:''; position:absolute; top:0; left:0; right:0; bottom:0; background:rgba(27, 27, 27, 0.07); opacity:0; transition:opacity 1ms;}
.profile-box .profile-pic .btn-edit:hover:before, .profile-box .profile-pic .btn-edit:active:before {opacity:1;}
.profile-box .name {font-size:34px;font-weight:500;margin-bottom:6px;line-height:1.25;}
.profile-box .weblink {display:flex;justify-content:center;align-items:center;margin-bottom:12px;}
.profile-box .weblink .url {display:block;font-size:17px;line-height:26px;font-weight:300;}
.profile-box .weblink .btn-copy {display:block;background:url(../images/icon/copy-sm.svg) 50% 50% no-repeat;width:18px;height:26px;text-indent:-999em;border-radius:4px;overflow:hidden;margin-left:5px;}
.profile-box .tab-type3 {margin-top:50px;}
@media screen and (max-width:820px) {
  .profile-box {padding:10px 0 35px;}
  .profile-box .profile-pic {width:76px;height:76px;margin-bottom:10px;}
  .profile-box .profile-pic .btn-edit {width:30px;height:30px;background-size:12px auto;}
  .profile-box .name {font-size:20px;}
  .profile-box .weblink .url {font-size:14px;}
  .profile-box .tab-type3 {margin-top:20px;}
}

.rolling-tab {position:relative;}
.rolling-tab .swiper-button-prev,
.rolling-tab .swiper-button-next {z-index:10;}
.rolling-tab { margin:0 auto;justify-content:space-between;max-width:1000px;}
.rolling-tab a { display:block;font-size:18px;font-weight:500;border-radius:7px;padding:6px 12px;line-height:20px;color:#a4a4a6;width:auto;margin:0 4px;white-space:nowrap;}
@media screen and (max-width:820px) {
  .rolling-tab a {font-size:14px;}
}

.middle-content {max-width:1000px;margin:0 auto;}
.mypagemain {border-top:2px solid #000;max-width:600px;margin:0 auto;}
.mypagemain li {display:flex;align-items:center;margin:0px;clear:both; line-height:50px;padding:0 10px;border-bottom:1px solid #dfdfdf;}
.mypagemain li > span {display:inline-block; width:100px;padding-right:10px;color:#000;font-weight:bold;}
.mypagemain li > div {flex:1;padding:0!important;}
.mypagemain li > div select,
.mypagemain li > div input:not([type=checkbox]):not([type=radio]){width:100%;}
@media screen and (max-width:820px) {
  .mypagemain li {  line-height:43px;padding:0 9px;font-size:13px;}
  .mypagemain li > span {  width:85px;padding-right:9px;}
}

.mypage-wrap .askpassword li {display:block;margin:0px;clear:both;margin-bottom:15px;}
.mypage-wrap .askpassword li>span {float:left;width:25%;text-align:right;padding-right:20px;margin-top:5px;color:#000;font-weight:bold;}

.mypage-wrap .member_modify li {display:block;margin:0px;clear:both; line-height:50px;padding:0 10px;border-bottom:1px solid #dfdfdf;}
.mypage-wrap .member_modify li> span {display:inline-block;vertical-align:top;width:100px;padding-right:10px;color:#000;font-weight:bold;}
.mypage-wrap .member_modify li > div {display:inline-block;vertical-align:top;padding:0!important;max-width:270px;}
.mypage-wrap .member_modify li > div .help-block {line-height:1.5;}
.mypage-wrap .member_modify textarea {width:500px;}

.mypage-wrap .table-top {overflow:hidden;padding-bottom:10px;}
.mypage-wrap .table-top input {margin-bottom:0;margin-top:0;}
.mypage-wrap .table-top li {float:left;text-align:center;padding-right:5px;}

.mypage-wrap .nav {margin-bottom:20px;}

.calendar-wrap .fc-col-header-cell { color:#000;}
@media screen and (max-width:820px) {
  .calendar-wrap {font-size:12px;}
}

.career-list {border-top:1px solid #000;}
.career-list li {padding:15px 0;border-bottom:1px solid #ddd;}
.career-list .list-item .port-info .subject { font-size:20px;color:#221714;font-weight:400;}
.career-list .list-item .port-info .state { font-size:16px;color:#C3C3C3;}
.career-list .list-item .port-info .desc { font-size:13px;margin-top:10px;color:#AEAEAE;}
.career-list .list-item .date { font-size:16px;color:#464646;text-align:right;}
.career-list .list-item .date span.block { display:block;text-align:right;font-size:13px;color:#AEAEAE;}
@media screen and (max-width:820px) {
  .career-list .list-item .port-info .subject { font-size:16px;}
  .career-list .list-item .port-info .state { font-size:14px;}
  .career-list .list-item .date { font-size:14px;}
}



input.datepicker {padding-right:35px !important;padding-bottom:1px !important;background:url('../images/common/ico-cal.png') no-repeat top 50% right 16px;vertical-align:middle;}
input.datepicker:hover {border-color:#3f84f8;}
.ui-datepicker td a {background-color:#fff !important;}
.ui-datepicker td a.ui-state-active { color:#fff;background-color:#b2d459 !important;border-color:#b2d459  !important;}
.ui-datepicker td a:hover { color:#b2d459 !important;border-color:#b2d459  !important;}
.ui-datepicker .ui-datepicker-header {background-color:#b2d459;border-color:#b2d459;}
.ui-datepicker .ui-datepicker-prev {left:1px !important;top:1px !important;height:100%;background-color:#b2d459 !important;border:none !important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24px' height='24px' viewBox='0 0 24 24'%3E%3Cpolyline fill='none' stroke='%23fff' stroke-width='2' points='9 6 15 12 9 18' transform='matrix(-1 0 0 1 24 0)'/%3E%3C/svg%3E");background-size:auto 20px;background-position:50% 50%;background-repeat:no-repeat;}
.ui-datepicker .ui-datepicker-next {right:1px !important;top:1px !important;height:100%;background-color:#b2d459 !important;border:none !important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24px' height='24px' viewBox='0 0 24 24'%3E%3Cpolyline fill='none' stroke='%23fff' stroke-width='2' points='9 6 15 12 9 18' transform='matrix(-1 0 0 1 24 0)'/%3E%3C/svg%3E");background-size:auto 20px;background-position:50% 50%;background-repeat:no-repeat;transform:rotate(180deg);}
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {background-color:#c7dfdd;border-color:#b2d459;}

.calendar-list .bootstrap-datetimepicker-widget .list-unstyled > .picker-switch {display:none;}
.calendar-list .bootstrap-datetimepicker-widget .list-unstyled > .picker-switch + .collapse {display:none;}
.calendar-list .bootstrap-datetimepicker-widget table td.today:before {border-bottom-color:#b2d459;}
.calendar-list .bootstrap-datetimepicker-widget .day.active {background:#b2d459 !important;}


.login-action .menu {float:right;line-height:24px;font-size:13px;}
.login-action .menu .bar {display:inline-block;width:1px;height:10px;background:#ccc;margin:0 10px;}
.login-action .text {color:rgba(0,0,0,.54);}

.total-account {display:flex;justify-content:flex-end;align-items:flex-end;margin-top:30px;background:#f9f9f9;padding:10px 20px;}
.total-account .account {text-align:right;padding-left:30px;margin-left:30px;position:relative;}
.total-account .account ~ .account:before {content:'';display:block;width:1px;position:absolute;top:50%;left:0;height:30px;background:#ccc;transform:translateY(-50%);-webkit-transform:translateY(-50%);;}
.total-account .account strong {display:block;font-size:18px;}
.total-account .account strong ~ .price {font-size:16px;}
.total-account .account b {display:block;font-size:14px;font-weight:400;color:#666;}
.total-account .account .price {display:block;color:#000;margin-top:5px;}
@media all and (max-width:490px) {
  .total-account {margin-top:27px;padding:9px 18px;}
  .total-account .account {padding-left:27px;margin-left:27px;}
  .total-account .account ~ .account:before {height:27px;;}
  .total-account .account strong {font-size:16px;}
  .total-account .account strong ~ .price {font-size:14px;}
  .total-account .account b {font-size:13px;}
  .total-account .account .price {margin-top:5px;}
}

.messenger-area .msg-area .msg {position:relative;padding-left:60px;}
.messenger-area .msg-area .msg:after {content:'';display:block;clear:both;}
.messenger-area .msg-area .msg + .msg {margin-top:20px;}
.messenger-area .msg-area .img {position:absolute;top:0;left:10px;display:block;width:40px;height:40px;}
.messenger-area .msg-area .img img {width:100%;height:100%;border-radius:50px;background:#f4f4f4;}
.messenger-area .msg-area .txtbox ul li {position:relative;}
.messenger-area .msg-area .txtbox ul li + li {margin-top:5px;}
.messenger-area .msg-area .txtbox ul li .unit {display:table;}
.messenger-area .msg-area .modify .txtbox ul li .unit {width:100%;}
.messenger-area .msg-area .txtbox ul li .unit > * {display:table-cell;vertical-align:bottom;}
.messenger-area .msg-area .txtbox ul li .unit p {position:relative;padding:10px;border-radius:2px;font-size:14px;color:#717171;letter-spacing:-0.02em;font-weight:200;background:#e7e7e7;}
.messenger-area .msg-area .txtbox ul li .unit .menus {padding-left:8px;white-space:nowrap;font-size:11px;color:#adadad;font-weight:300;}
.messenger-area .msg-area .txtbox ul li .unit .menus .menu a {display:inline-block;margin:0 3px;}
.messenger-area .msg-area .txtbox ul li .unit .menus .time {display:block;margin-top:3px;}

.messenger-area .msg-area .right .txtbox ul li .unit {float:right;}
.messenger-area .msg-area .right .txtbox ul li .unit p {background:#ffbe9e;}
.messenger-area .msg-area .right .txtbox ul li .unit .menus {padding-right:8px;padding-left:0;text-align:right;}
@media all and (max-width:490px) {
  .messenger-area .msg-area .msg {padding-left:54px;}
  .messenger-area .msg-area .msg + .msg {margin-top:18px;}
  .messenger-area .msg-area .img {left:9px;width:36px;height:36px;}
  .messenger-area .msg-area .img img {border-radius:45px;}
  .messenger-area .msg-area .txtbox ul li + li {margin-top:5px;}
  .messenger-area .msg-area .txtbox ul li .unit p {padding:9px;border-radius:2px;font-size:13px;}
  .messenger-area .msg-area .txtbox ul li .unit .menus {padding-left:7px;font-size:10px;}
  .messenger-area .msg-area .txtbox ul li .unit .menus .menu a {margin:0 3px;}
  .messenger-area .msg-area .txtbox ul li .unit .menus .time {margin-top:3px;}
  .messenger-area .msg-area .right .txtbox ul li .unit .menus {padding-right:7px;}
}

.chat-msg-input-wrap {background:#f9f9f9;}
.chat-msg-input-wrap .chat-msg-input {display:flex;align-items:center;padding:10px;}
.chat-msg-input-wrap .chat-msg-input * ~ * {margin-left:10px;}
.chat-msg-input-wrap .chat-msg-input .menu {width:40px;height:40px;}
.chat-msg-input-wrap .chat-msg-input .menu:after {content:'';display:block;width:100%;height:100%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' id='Layer_1' x='0px' y='0px' viewBox='0 0 455 455' style='enable-background:new 0 0 455 455;' xml:space='preserve'%3E%3Cpolygon fill='%23999' points='455,212.5 242.5,212.5 242.5,0 212.5,0 212.5,212.5 0,212.5 0,242.5 212.5,242.5 212.5,455 242.5,455 242.5,242.5 455,242.5 '/%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E");background-position:50% 50%;background-repeat:no-repeat;background-size:auto 20px;}
.chat-msg-input-wrap .chat-msg-input .msg-input {flex:1;}
.chat-msg-input-wrap .chat-msg-input .msg-input input {width:100%;padding:0 10px;}
.chat-msg-input-wrap .chat-msg-input .send {width:40px;height:40px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='28px' height='28px' viewBox='0 0 28 28' version='1.1'%3E%3C!-- Uploaded to SVGRepo https://www.svgrepo.com --%3E%3Ctitle%3Eic_fluent_send_28_filled%3C/title%3E%3Cdesc%3ECreated with Sketch.%3C/desc%3E%3Cg id='🔍-Product-Icons' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='ic_fluent_send_28_filled' fill='%23999' fill-rule='nonzero'%3E%3Cpath d='M3.78963301,2.77233335 L24.8609339,12.8499121 C25.4837277,13.1477699 25.7471402,13.8941055 25.4492823,14.5168992 C25.326107,14.7744476 25.1184823,14.9820723 24.8609339,15.1052476 L3.78963301,25.1828263 C3.16683929,25.4806842 2.42050372,25.2172716 2.12264586,24.5944779 C1.99321184,24.3238431 1.96542524,24.015685 2.04435886,23.7262618 L4.15190935,15.9983421 C4.204709,15.8047375 4.36814355,15.6614577 4.56699265,15.634447 L14.7775879,14.2474874 C14.8655834,14.2349166 14.938494,14.177091 14.9721837,14.0981464 L14.9897199,14.0353553 C15.0064567,13.9181981 14.9390703,13.8084248 14.8334007,13.7671556 L14.7775879,13.7525126 L4.57894108,12.3655968 C4.38011873,12.3385589 4.21671819,12.1952832 4.16392965,12.0016992 L2.04435886,4.22889788 C1.8627142,3.56286745 2.25538645,2.87569101 2.92141688,2.69404635 C3.21084015,2.61511273 3.51899823,2.64289932 3.78963301,2.77233335 Z' id='🎨-Color'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");background-position:50% 50%;background-repeat:no-repeat;background-size:auto 20px;}
.chat-msg-input-wrap .menu-wrap {display:none;padding:20px;padding-top:10px;}
.chat-msg-input-wrap .menu-wrap ul {display:flex;align-items:center;justify-content:space-around;}
.chat-msg-input-wrap .menu-wrap ul li i {display:block;margin:0 auto;width:40px;height:40px;background:#ccc;border-radius:40px;}
.chat-msg-input-wrap .menu-wrap ul li span {font-size:12px;display:block;text-align:center;margin-top:5px;}
.chat-msg-input-wrap .menu-wrap ul li:nth-child(1) i {background-color:#5db158;}
.chat-msg-input-wrap .menu-wrap ul li:nth-child(2) i {background-color:#eb8c47;}
.chat-msg-input-wrap .menu-wrap ul li:nth-child(3) i {background-color:#5892df;}
.chat-msg-input-wrap .menu-wrap ul li .ico-zoomlink {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' id='Capa_1' x='0px' y='0px' fill='%23fff' viewBox='0 0 283.842 283.842' style='enable-background:new 0 0 283.842 283.842;' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M265.117,22.764l-9.877-8.737c-23.003-20.398-58.227-18.283-78.618,4.726l-28.267,31.89 c-6.38,7.199-5.717,18.251,1.479,24.637l2.653,2.354c7.221,6.402,18.239,5.741,24.646-1.481l28.265-31.889 c6.305-7.107,17.227-7.761,24.338-1.466l9.865,8.752c7.113,6.303,7.783,17.223,1.469,24.334l-61.808,69.726 c-5.231,5.911-13.791,7.505-20.816,3.875c-7.682-3.967-17.051-2.224-22.787,4.245l-0.482,0.544 c-3.881,4.377-5.499,10.188-4.439,15.943c1.061,5.752,4.642,10.604,9.825,13.313c8.197,4.284,17.049,6.358,25.814,6.358 c15.532,0,30.795-6.512,41.67-18.775l61.804-69.718C290.219,78.417,288.099,43.148,265.117,22.764z'/%3E%3Cpath d='M133.998,208.581l-2.659-2.356c-7.204-6.383-18.259-5.712-24.64,1.489l-28.254,31.886 c-6.308,7.105-17.222,7.764-24.327,1.473l-9.879-8.764c-7.115-6.301-7.783-17.212-1.467-24.325l61.806-69.721 c5.124-5.787,13.555-7.442,20.504-4.028c7.986,3.924,17.683,2.016,23.595-4.656l0.222-0.25c3.798-4.288,5.396-9.979,4.386-15.614 c-1.01-5.636-4.484-10.417-9.533-13.119c-22.828-12.22-50.769-7.22-67.947,12.165l-61.81,69.707v0.001 c-20.371,22.978-18.252,58.246,4.726,78.622l9.877,8.749c10.583,9.383,23.77,13.992,36.913,13.992 c15.394,0,30.724-6.327,41.718-18.724l28.258-31.886C141.88,226.003,141.224,214.987,133.998,208.581z'/%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E");background-position:50% 50%;background-repeat:no-repeat;background-size:auto 20px;}
.chat-msg-input-wrap .menu-wrap ul li .ico-zoomuse {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='52px' height='52px' fill='%23fff' viewBox='0 0 52 52' enable-background='new 0 0 52 52' xml:space='preserve'%3E%3Cg%3E%3Cg%3E%3Cpath d='M28.4,38h-5c-0.8,0-1.4-0.6-1.4-1.4v-1.5c0-4.2,2.7-8,6.7-9.4c1.2-0.4,2.3-1.1,3.2-2.1 c5-6,0.4-13.2-5.6-13.4c-2.2-0.1-4.3,0.7-5.9,2.2c-1.3,1.2-2.1,2.7-2.3,4.4c-0.1,0.6-0.7,1.1-1.5,1.1h-5c-0.9,0-1.6-0.7-1.5-1.6 c0.4-3.8,2.1-7.2,4.8-9.9c3.2-3,7.3-4.6,11.7-4.5c8.3,0.3,15.1,7.1,15.4,15.4c0.3,7-4,13.3-10.5,15.7c-0.9,0.4-1.5,1.1-1.5,2v1.5 C30,37.4,29.2,38,28.4,38z'/%3E%3C/g%3E%3Cpath d='M30,48.5c0,0.8-0.7,1.5-1.5,1.5h-5c-0.8,0-1.5-0.7-1.5-1.5v-5c0-0.8,0.7-1.5,1.5-1.5h5 c0.8,0,1.5,0.7,1.5,1.5V48.5z'/%3E%3C/g%3E%3C/svg%3E");background-position:50% 50%;background-repeat:no-repeat;background-size:auto 20px;}
.chat-msg-input-wrap .menu-wrap ul li .ico-trans {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512px' height='512px' fill='%23fff' viewBox='0 0 512 512'%3E%3Ctitle%3Eionicons-v5-l%3C/title%3E%3Cpath d='M478.33,433.6l-90-218a22,22,0,0,0-40.67,0l-90,218a22,22,0,1,0,40.67,16.79L316.66,406H419.33l18.33,44.39A22,22,0,0,0,458,464a22,22,0,0,0,20.32-30.4ZM334.83,362,368,281.65,401.17,362Z'/%3E%3Cpath d='M267.84,342.92a22,22,0,0,0-4.89-30.7c-.2-.15-15-11.13-36.49-34.73,39.65-53.68,62.11-114.75,71.27-143.49H330a22,22,0,0,0,0-44H214V70a22,22,0,0,0-44,0V90H54a22,22,0,0,0,0,44H251.25c-9.52,26.95-27.05,69.5-53.79,108.36-31.41-41.68-43.08-68.65-43.17-68.87a22,22,0,0,0-40.58,17c.58,1.38,14.55,34.23,52.86,83.93.92,1.19,1.83,2.35,2.74,3.51-39.24,44.35-77.74,71.86-93.85,80.74a22,22,0,1,0,21.07,38.63c2.16-1.18,48.6-26.89,101.63-85.59,22.52,24.08,38,35.44,38.93,36.1a22,22,0,0,0,30.75-4.9Z'/%3E%3C/svg%3E");background-position:50% 50%;background-repeat:no-repeat;background-size:auto 20px;}
.chat-msg-input-wrap.on .chat-msg-input .menu:after {transform:rotate(45deg);}
@media all and (max-width:490px) {
  .chat-msg-input-wrap .chat-msg-input {padding:9px;}
  .chat-msg-input-wrap .chat-msg-input * ~ * {margin-left:9px;}
  .chat-msg-input-wrap .chat-msg-input .menu {width:36px;height:36px;}
  .chat-msg-input-wrap .chat-msg-input .menu:after {background-size:auto 18px;}
  .chat-msg-input-wrap .chat-msg-input .msg-input input {padding:0 9px;}
  .chat-msg-input-wrap .chat-msg-input .send {width:36px;height:36px;background-size:auto 18px;}
  .chat-msg-input-wrap .menu-wrap {padding:18px;padding-top:9px;}
  .chat-msg-input-wrap .menu-wrap ul li i {width:36px;height:36px;border-radius:36px;}
  .chat-msg-input-wrap .menu-wrap ul li span {font-size:11px;margin-top:5px;}
  .chat-msg-input-wrap .menu-wrap ul li .ico-zoomlink {background-size:auto 18px;}
  .chat-msg-input-wrap .menu-wrap ul li .ico-zoomuse {background-size:auto 18px;}
  .chat-msg-input-wrap .menu-wrap ul li .ico-trans {background-size:auto 18px;}

}


.photo-regist {text-align:center;}
.photo-regist .label {display:block;color:#999;font-size:12px;margin-bottom:8px;}
.photo-regist .img-regist {width:150px;margin:0 auto;}

.portfolio-regist ul {display:grid;grid-template-columns:repeat(5, 1fr);gap:20px;}

.faq-list {border-top:1px solid #222;}
.faq-answer {display:none;padding:10px 10px 10px 50px;border-bottom:1px solid #dfdfdf;position:relative;line-height:1.7;}
.faq-box .faq-heading {position:relative;display:block;width:100%;padding:10px 10px 10px 50px;line-height:30px;border-bottom:1px solid #dfdfdf;cursor:pointer;text-align:left;}
.faq-box .faq-heading span,
.faq-answer span { display:inline-block;width:30px;height:30px;line-height:30px;text-align:center;border-radius:30px;background:#f1f2f3;font-size:14px;color:#000;position:absolute;top:10px;left:10px;}
.faq-answer span { background:#b2d459;color:#fff;}

.sm-width-wrap {max-width:500px;margin:0 auto;}

.dd-form{line-height:20px;}
.dd-form li{position:relative;}
.dd-form .term-more li,
.dd-form label{margin:24px 0;line-height:24px;display:block;}
.dd-form label{margin-bottom:0;}
.dd-form li:first-child label{margin-top:0;}
.dd-form .term-more li p,
.dd-form label{margin-right:50px;word-break:break-word;color:rgba(0,0,0,.54);font-size:15px;font-weight:400;}
.dd-form label{position:relative;min-height:24px;}
.dd-form label.checkbox > span:before{top:50%;margin-top:-8px;}
.dd-form label.checkbox > input:checked + span:after{top:50%;margin-top:-8px;}
.dd-form label > input{position:absolute;top:5px;left:0;}
.dd-form label em{margin-top:8px;}
.dd-form li label p{display:inline-block;}
.dd-form input.toggle{display:none;}
.dd-form label.toggle{position:absolute;top:0;right:0;z-index:1;margin:0;cursor:pointer;padding:0;text-decoration:underline;color:rgba(0,0,0,.54);font-size:13px;}
.dd-form input.toggle:checked+label.toggle span:first-child,.dd-form label.toggle span:last-child{display:none;}
.dd-form input.toggle:checked+label.toggle span:last-child{display:inline;}
.dd-form input.toggle:checked~.term-box{height:192px;}
.dd-form .marketing{padding-left:36px;}
.dd-form .marketing label{display:inline-block;margin-right:32px;}
.dd-form .button.primary{margin:24px 0 0;}

.term-box{display:none;}
.term-box .article{margin-top:12px;background:#f5f7fa;padding:12px 12px 12px 24px;height:180px;overflow-x:hidden;overflow-y:auto;box-sizing:border-box;}
.term-box .article h1{display:none}
.term-box .article, .term-box .article a, .term-box .article h1, .term-box .article h2, .term-box .article h3, .term-box .article h4, .term-box .article h5, .term-box .article p{color:rgba(0,0,0,.54)!important;font-size:12px!important;font-weight:400!important;}
.term-box .article table{margin-top:12px;margin-bottom:12px;min-width:auto!important;}
.term-box .article .terms-date{margin-bottom:12px;}
.term-box .article .table{margin:1em 0!important;}
.term-box .article h1, .term-box .article h2, .term-box .article h3, .term-box .article h4, .term-box .article h5{margin:1em 0 0!important;font-weight:700!important;}
.term-box .article li, .term-box .article p{margin:0!important;padding:0!important;}
.term-box .article hr{border:0!important;}
.term-box .article a{pointer-events:none!important;}
.term-box .article a[target=_blank], .term-box .article a[target=_self]{pointer-events:auto!important;}
.term-box .article a.previous-terms{display:none;}

.about-wrap{display:flex;align-items:stretch;}
.about-wrap > *{flex:1;}
.about-wrap > .con-left{padding-right:30px;}
.about-wrap > .con-right{border-left:1px solid #ccc;padding-left:30px;}
.about-wrap .title{font-size:18px;font-weight:700; color:#1F2125;}
.about-wrap .title + *{margin-top:20px;}
.about-wrap .title ~ .title{margin-top:50px;}
.about-wrap .tit{font-size:16px;margin-top:30px;font-weight:500;margin-bottom:10px;}
.about-wrap .txt{line-height:1.6;font-size:15px;margin-top:10px;}
@media all and (max-width:1024px) {
  .about-wrap{display:block;}
  .about-wrap > *{padding:0 !important;border:none !important;}
  .about-wrap > .con-left{padding-right:26px;}
  .about-wrap > .con-right{padding-left:26px;margin-top:43px;}
  .about-wrap .title{font-size:15px;}
  .about-wrap .title + *{margin-top:17px;}
  .about-wrap .title ~ .title{margin-top:43px;}
  .about-wrap .tit{font-size:14px;margin-top:26px;margin-bottom:9px;}
  .about-wrap .txt{font-size:13px;margin-top:9px;}
}

.list-dot{font-size:13px;}
.list-dot li{line-height:1.4;padding-left:12px;position:relative;font-size:15px;}
.list-dot li:before{content:'';display:block;width:3px;height:3px;border-radius:3px;background:#1F2125;position:absolute;top:6px;left:0;}
.list-dot li ~ li {margin-top:10px;}


/* modal-popup */
.modal-popup {display:none;position:fixed;top:0;left:0;width:100%;height:100%;min-width:320px;overflow-y:auto;z-index:1000;}
.modal-popup .dim {position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.8);}
.modal-popup .pop-wrap {position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);-webkit-transform:translate(-50%, -50%);}
.modal-popup .pop-wrap .popup {background:#fff;border-radius:10px;min-width:312px;}
.modal-popup .pop-wrap .popup .pop-header {position:relative;}
.modal-popup .pop-wrap .popup .pop-header .header-wrapper {padding:16px 20px;/*border-bottom:0.05em solid #dedede;*/    box-shadow:2px 4px 12px rgb(224 224 224 / 40%);}
.modal-popup .pop-wrap .popup .pop-header .close {display:block;position:absolute;top:0;right:0;height:53px;width:53px;text-align:center;display:flex;flex-direction:column;justify-content:center;align-items:center;}
.modal-popup .pop-wrap .popup .pop-header .close i {display:inline-block;width:16px;height:16px;background:url('data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC8AAAAvCAQAAADZLlsnAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQfjDBAOHgOOOzp9AAABGklEQVRYw63XMRKDIBBG4dfrkeROyeWw50pJTwqSyaCg7PKn08m8r2JZAWAhsqH7BSLL72EhkXnJgMCLTCrASiKTZUCJZzKJFeL3QQP845nMfnwxB9StN+H80g804yqgG1cAl/FZ4DZe/vSugKCMe4HhuAfYLHErYI5bAFd8FHDHR4Cp+B2wHc6IOX4FSOI9QBZvAQ9l/AxkbbwPiOJtQBgHeB7yD2W8noq6raITFwLtuAg4XhZP7aE6D66gGwntqSgBru7QaeDugp4CRm5/79oyvFq4AMveYgZMS5EVsMZNgCc+DHjjQ8DsQamBm48HzzHvAqoh1QRkE7ANRFn8DOz1V7ni9v8DiRV+gG61KMA3XoAo3VsCe4l/ALD0YjMMjygWAAAAAElFTkSuQmCC') no-repeat 0 0;background-size:auto 100%;}
.modal-popup .pop-wrap .popup .pop-header .pop-tit {font-size:17px;color:#000000;font-weight:500;}
.modal-popup .pop-wrap .popup .pop-header .pop-tit .ico {margin-right:5px;}
.modal-popup .pop-wrap .popup .pop-body {flex:1;padding:15px 20px;overflow-x:hidden;overflow-y:auto;max-height:70vh;}
.modal-popup .pop-wrap .popup .pop-body:last-child {padding-bottom:30px;}
.modal-popup .pop-wrap .popup .pop-body.chart-pop-body {max-height:50vh;}
.modal-popup .pop-wrap .popup .pop-footer {border-radius:0 0 10px 10px;overflow:hidden;padding:0 20px;}
.modal-popup .pop-wrap .popup .btn-box {display:flex;align-items:center;justify-content:center;padding:20px 0;}
.modal-popup .pop-wrap .popup .btn-box [class*=btn-type] {min-width:100px;}
.modal-popup .pop-wrap .popup .btn-box * ~ * {margin-left:15px;}

.modal-popup .pop-wrap .popup .profile-img-crop {width:410px;}
.modal-popup .pop-wrap .popup .calendar-view,
.modal-popup .pop-wrap .popup .calendar-regist,
.modal-popup .pop-wrap .popup .pickbox-view,
.modal-popup .pop-wrap .popup .pickbox-regist,
.modal-popup .pop-wrap .popup .match-purchase,
.modal-popup .pop-wrap .popup .match-refund,
.modal-popup .pop-wrap .popup .review-view {width:610px;}
.modal-popup .pop-wrap .popup .review-regist {width:610px;}
.modal-popup .pop-wrap .popup .rule-view{width:360px;}
.modal-popup .pop-wrap .popup .chat-wrap {width:400px;}
.modal-popup .pop-wrap .popup .pop-body > * {min-width:100%;max-width:100%;}
.modal-popup .pop-wrap .popup .tab-type2 {margin-bottom:30px;margin-top:40px;}
.modal-popup .pop-wrap .popup .tab-type2:first-child {margin-top:0;}
.modal-popup .pop-wrap .popup .btn-wrap {margin-top:30px;}
.modal-popup .pop-wrap .popup .btn-wrap:first-child {margin-top:0;}
.modal-popup .pop-wrap .popup .btn-wrap + .list-type2 {margin-top:15px;}
.modal-popup .pop-wrap .popup .paging-wrap {margin-top:25px;}
.modal-popup .pop-wrap .popup .list-type1:first-child {margin-top:0;}

.modal-popup.st2 .pop-wrap .popup {border-radius:0;}
.modal-popup .pop-wrap .popup .pop-header .header-wrapper{box-shadow: none;}
.modal-popup.st2 .pop-wrap .popup .pop-header .pop-tit{font-size:25px;}



@media screen and (max-width:820px) {
.modal-popup .pop-wrap .popup .btn-box * ~ * {margin-left:5px;}
.modal-popup .pop-wrap .popup {max-width:90vw;}
.modal-popup .pop-wrap .popup .pop-body {max-height:60vh;}
}

/* ======= PAGE: stylist.html ======= */

/* ============================================
   STYLIST LIST PAGE — self-contained layout
   ============================================ */

/* --- Reset for this page --- */
.sl-wrap { width: 100%; padding-top: 120px; }
.sl-wrap *,
.sl-wrap *::before,
.sl-wrap *::after { box-sizing: border-box; }

/* --- Inner container: 1200px centered --- */
.sl-inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 50px 24px 50px;
}

/* --- Toolbar (filter + map) --- */
.sl-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0 16px;
}
.sl-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 20px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
  font-size: 14px;
  color: #333;
  cursor: pointer;
  transition: border-color 0.2s;
}
.sl-filter-btn:hover { border-color: #b2d459; color: #b2d459; }
.sl-filter-btn img { height: 18px; }
.sl-toolbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.sl-map-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 20px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
  color: #333;
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.2s;
}
.sl-map-btn:hover { border-color: #b2d459; color: #b2d459; }
.sl-help-btn {
  width: 32px;
  height: 32px;
  border: 1px solid #ddd;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  color: #999;
}

/* --- Card Grid --- */
.sl-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}

/* --- Card --- */
.sl-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 16px rgba(0,0,0,0.06);
  transition: transform 0.3s, box-shadow 0.3s;
}
.sl-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.12);
}
.sl-card a {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* Card thumbnail */
.sl-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}
.sl-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}
.sl-card:hover .sl-thumb img {
  transform: scale(1.06);
}

/* Card body */
.sl-body {
  padding: 18px 20px 22px;
}
.sl-name {
  font-size: 15px;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 45px;
  margin: 0;
}
.sl-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 10px;
  font-size: 13px;
}
.sl-star {
  color: #f5a623;
  font-weight: 700;
}
.sl-activity {
  color: #b2d459;
  font-weight: 600;
}
.sl-badge {
  display: inline-block;
  margin-top: 10px;
  padding: 5px 12px;
  border-radius: 20px;
  background: #f0faf9;
  color: #5dc3df;
  font-size: 12px;
  font-weight: 500;
}
.sl-price-row {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #f0f0f0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 8px;
}
.sl-price-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sl-price-label {
  font-size: 12px;
  color: #999;
}
.sl-price-val {
  font-size: 14px;
  font-weight: 700;
  color: #1a1a1a;
}

/* --- More Button --- */
.sl-more {
  text-align: center;
  padding: 40px 0 20px;
}
.sl-more button {
  min-width: 240px;
  padding: 14px 0;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
  font-size: 15px;
  font-weight: 600;
  color: #333;
  cursor: pointer;
  transition: all 0.2s;
}
.sl-more button:hover {
  border-color: #b2d459;
  color: #b2d459;
}

/* ============================================
   RESPONSIVE — 5 breakpoints
   ============================================ */

/* 2. Tablet Landscape (1024-1200px) */
@media (max-width: 1200px) {
  .sl-grid { gap: 20px; }
  .sl-body { padding: 16px 16px 20px; }
}

/* 3. Tablet Portrait (768-1023px) */
@media (max-width: 1023px) {
  .sl-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}

/* 4. Mobile (480-767px) */
@media (max-width: 767px) {
  .sl-wrap { padding-top: 50px; }
  .sl-inner { padding: 20px 6px 20px; }
  .sl-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .sl-name { font-size: 15px; min-height: 42px; }
  .sl-body { padding: 6px 6px 8px; }
  .sl-toolbar { flex-wrap: wrap; gap: 4px; padding: 0 0 12px; }
}

/* 5. Small Mobile (<=479px) */
@media (max-width: 479px) {
  .sl-grid { grid-template-columns: 1fr; gap: 6px; }
  .sl-thumb { aspect-ratio: 4 / 3; }
  .sl-card { border-radius: 12px; }
}

/* ======= PAGE: stylist.html (filter modal) ======= */

/* Filter Modal */
.sf-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.4); z-index:1000; justify-content:center; align-items:center; }
.sf-overlay.active { display:flex; }
.sf-modal { background:#fff; border-radius:16px; width:520px; max-width:90vw; max-height:85vh; display:flex; flex-direction:column; }
.sf-header { display:flex; align-items:center; justify-content:space-between; padding:20px 24px; border-bottom:1px solid #f0f0f0; }
.sf-title { font-size:18px; font-weight:700; color:#1a1a1a; margin:0; }
.sf-close { width:32px; height:32px; border:none; background:#f5f5f5; border-radius:50%; font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center; color:#999; }
.sf-body { padding:24px; overflow-y:auto; flex:1; }
.sf-group { margin-bottom:24px; }
.sf-group:last-child { margin-bottom:0; }
.sf-group-title { font-size:14px; font-weight:700; color:#1a1a1a; margin:0 0 12px; }
.sf-chips { display:flex; flex-wrap:wrap; gap:8px; }
.sf-chip-label { cursor:pointer; }
.sf-chip-label input { display:none; }
.sf-chip-label span { display:inline-block; padding:8px 16px; border:1px solid #ddd; border-radius:20px; font-size:13px; color:#666; transition:all 0.15s; }
.sf-chip-label input:checked + span { border-color:#b2d459; background:#b2d459; color:#fff; font-weight:600; }
.sf-chip-label:hover span { border-color:#b2d459; color:#b2d459; }
.sf-footer { display:flex; gap:10px; padding:16px 24px; border-top:1px solid #f0f0f0; }
.sf-reset { flex:1; padding:12px; border:1px solid #ddd; border-radius:8px; background:#fff; font-size:14px; font-weight:600; color:#888; cursor:pointer; }
.sf-apply { flex:2; padding:12px; border:none; border-radius:8px; background:#b2d459; font-size:14px; font-weight:600; color:#fff; cursor:pointer; }
.sf-apply:hover { background:#5dc3df; }

/* ======= PAGE: stylist-info.html ======= */

/* Title + line + sub tabs */
.st-title { font-size: 24px; font-weight: 800; color: #1a1a1a; margin: 0; }
.st-title span { color: #b2d459; }
.st-line { width: 100%; height: 1px; background: #eee; margin: 16px 0 0; }
.st-sub-tabs { display: flex; gap: 8px; margin-top: 16px; margin-bottom: 32px; }
.st-sub-tab { padding: 7px 20px; border: 1px solid #ddd; border-radius: 10px; background: #fff; font-size: 13px; font-weight: 500; color: #888; cursor: pointer; text-decoration: none; transition: all 0.2s; }
.st-sub-tab:hover { border-color: #b2d459; color: #b2d459; }

/* Intro layout */
.st-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-bottom: 48px; }
.st-intro-left {}
.st-intro-name { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.st-intro-avatar { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; border: 2px solid #b2d459; flex-shrink: 0; }
.st-intro-avatar img { width: 100%; height: 100%; object-fit: cover; }
.st-intro-name-text { font-size: 18px; font-weight: 700; color: #1a1a1a; }
.st-intro-name-badge { font-size: 11px; font-weight: 500; padding: 2px 10px; border-radius: 12px; background: #e8f8f7; color: #5dc3df; }
.st-intro-desc { font-size: 16px; color: #555; line-height: 1.8; margin-bottom: 20px; }
.st-intro-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
.st-intro-tag { padding: 4px 14px; border-radius: 16px; background: #f5f5f5; font-size: 12px; color: #777; }
.st-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.st-photos img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 12px; }

/* Calendar */
.st-calendar-wrap { background: #f8f9fa; border-radius: 16px; padding: 24px; }
.st-cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.st-calendar-title { font-size: 16px; font-weight: 700; color: #1a1a1a; margin: 0; }
.st-book-btn { display: inline-flex; align-items: center; gap: 5px; padding: 8px 18px; border: none; border-radius: 8px; background: #b2d459; color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; transition: background 0.2s; }
.st-book-btn:hover { background: #5dc3df; }
/* Custom Calendar */
.cal { margin-top: 0; }
.cal-nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 16px; }
.cal-nav-btn { width: 32px; height: 32px; border: 1px solid #eee; border-radius: 8px; background: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 14px; color: #666; transition: all 0.2s; }
.cal-nav-btn:hover { border-color: #b2d459; color: #b2d459; }
.cal-month { font-size: 17px; font-weight: 700; color: #1a1a1a; min-width: 140px; text-align: center; }
.cal-grid { }
.cal-head { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 4px; }
.cal-head span { text-align: center; font-size: 12px; font-weight: 600; color: #bbb; padding: 8px 0; }
.cal-head span:first-child { color: #e74c3c; }
.cal-head span:last-child { color: #3478f6; }
.cal-body { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-day { position: relative; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: 10px; font-size: 13px; font-weight: 500; color: #333; cursor: pointer; transition: all 0.15s; }
.cal-day:hover { background: #e8f8f7; }
.cal-day.today { background: #b2d459; color: #fff; font-weight: 700; border-radius: 10px; }
.cal-day.today:hover { background: #5dc3df; }
.cal-day.other { color: #ddd; cursor: default; }
.cal-day.other:hover { background: none; }
.cal-day.sun { color: #e74c3c; }
.cal-day.sat { color: #3478f6; }
.cal-day.booked::after { content: ''; position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); width: 6px; height: 6px; border-radius: 50%; background: #f5a623; }
.cal-day.off { color: #ccc; text-decoration: line-through; cursor: not-allowed; background: #fafafa; }
.cal-day.off:hover { background: #fafafa; }
.cal-day.off::after { display: none; }
.cal-legend { display: flex; gap: 16px; justify-content: center; margin-top: 16px; padding-top: 14px; border-top: 1px solid #f0f0f0; }
.cal-leg-item { display: flex; align-items: center; gap: 5px; font-size: 11px; color: #999; }
.cal-leg-dot { width: 8px; height: 8px; border-radius: 50%; }
.cal-leg-dot.available { background: #b2d459; }
.cal-leg-dot.booked { background: #f5a623; }
.cal-leg-dot.off { background: #ddd; }

/* Booking Modal */
.bk-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 1000; justify-content: center; align-items: center; }
.bk-overlay.active { display: flex; }
.bk-modal { background: #fff; border-radius: 16px; width: 500px; max-width: 90vw; max-height: 85vh; overflow-y: auto; }
.bk-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid #f0f0f0; }
.bk-title { font-size: 17px; font-weight: 700; color: #1a1a1a; margin: 0; }
.bk-close { width: 32px; height: 32px; border: none; background: #f5f5f5; border-radius: 50%; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #999; }
.bk-body { padding: 24px; }
.bk-field { margin-bottom: 18px; }
.bk-field label { display: block; font-size: 13px; font-weight: 600; color: #555; margin-bottom: 6px; }
.bk-field input, .bk-field select, .bk-field textarea { width: 100%; height: 42px; border: 1px solid #ddd; border-radius: 8px; padding: 0 12px; font-size: 14px; outline: none; background: #fff; }
.bk-field input:focus, .bk-field select:focus, .bk-field textarea:focus { border-color: #b2d459; }
.bk-field textarea { height: 80px; padding: 10px 12px; resize: vertical; }
.bk-field-row { display: flex; gap: 10px; }
.bk-field-row > * { flex: 1; }
.bk-type-btns { display: flex; gap: 8px; }
.bk-type-btn { flex: 1; height: 42px; border: 1px solid #ddd; border-radius: 8px; background: #fff; font-size: 14px; color: #888; cursor: pointer; transition: all 0.2s; }
.bk-type-btn.active { border-color: #b2d459; background: #b2d459; color: #fff; font-weight: 600; }
.bk-footer { padding: 16px 24px; border-top: 1px solid #f0f0f0; display: flex; justify-content: flex-end; gap: 10px; }
.bk-btn { padding: 11px 28px; border: none; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; }
.bk-btn.cancel { background: #f5f5f5; color: #666; }
.bk-btn.submit { background: #b2d459; color: #fff; }
.bk-btn.submit:hover { background: #5dc3df; }

/* Section */
.st-section { margin-bottom: 48px; }
.st-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.st-section-title { font-size: 18px; font-weight: 700; color: #1a1a1a; margin: 0; }
.st-section-count { font-size: 14px; color: #b2d459; font-weight: 500; }

/* Portfolio grid */
.st-pf-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.st-pf-item { position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 1; cursor: pointer; }
.st-pf-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.st-pf-item:hover img { transform: scale(1.05); }
.st-pf-caption { position: absolute; bottom: 0; left: 0; right: 0; padding: 10px 12px; background: linear-gradient(transparent, rgba(0,0,0,0.6)); color: #fff; font-size: 12px; font-weight: 500; }

/* Reviews */
.st-review-summary { display: flex; align-items: center; gap: 20px; padding: 20px 24px; background: #f8f9fa; border-radius: 12px; margin-bottom: 20px; }
.st-review-score { font-size: 36px; font-weight: 800; color: #1a1a1a; }
.st-review-stars { color: #f5a623; font-size: 18px; }
.st-review-count { font-size: 13px; color: #999; }
.st-review-write { padding: 8px 24px; border: 1px solid #b2d459; border-radius: 8px; background: #fff; color: #b2d459; font-size: 13px; font-weight: 600; cursor: pointer; margin-left: auto; transition: all 0.2s; }
.st-review-write:hover { background: #b2d459; color: #fff; }

.st-review-list { display: flex; flex-direction: column; gap: 16px; }
.st-review-card { background: #fff; border: 1px solid #eee; border-radius: 12px; padding: 20px 24px; }
.st-review-card-header { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.st-review-card-avatar { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.st-review-card-avatar img { width: 100%; height: 100%; object-fit: cover; }
.st-review-card-info { flex: 1; }
.st-review-card-name { font-size: 14px; font-weight: 600; color: #1a1a1a; }
.st-review-card-date { font-size: 12px; color: #bbb; }
.st-review-card-stars { color: #f5a623; font-size: 14px; margin-left: auto; }
.st-review-card-text { font-size: 15px; color: #555; line-height: 1.8; }

.st-more-btn { display: block; width: 100%; padding: 14px 0; border: 1px solid #ddd; border-radius: 8px; background: #fff; font-size: 14px; font-weight: 600; color: #333; cursor: pointer; text-align: center; margin-top: 16px; transition: all 0.2s; }
.st-more-btn:hover { border-color: #b2d459; color: #b2d459; }

/* Review Modal */
.st-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 1000; justify-content: center; align-items: center; }
.st-modal-overlay.active { display: flex; }
.st-modal { background: #fff; border-radius: 16px; width: 480px; max-width: 90vw; max-height: 90vh; overflow-y: auto; }
.st-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid #f0f0f0; }
.st-modal-title { font-size: 16px; font-weight: 700; color: #1a1a1a; margin: 0; }
.st-modal-close { width: 32px; height: 32px; border: none; background: #f5f5f5; border-radius: 50%; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #999; }
.st-modal-body { padding: 24px; }
.st-modal-field { margin-bottom: 18px; }
.st-modal-field label { display: block; font-size: 13px; font-weight: 600; color: #555; margin-bottom: 6px; }
.st-modal-field .st-modal-stars { display: flex; gap: 4px; }
.st-modal-field .st-modal-stars i { font-size: 28px; color: #ddd; cursor: pointer; transition: color 0.15s; }
.st-modal-field .st-modal-stars i.active { color: #f5a623; }
.st-modal-field textarea { width: 100%; height: 120px; border: 1px solid #ddd; border-radius: 8px; padding: 12px; font-size: 14px; resize: vertical; outline: none; }
.st-modal-field textarea:focus { border-color: #b2d459; }
.st-modal-footer { padding: 16px 24px; border-top: 1px solid #f0f0f0; display: flex; justify-content: flex-end; gap: 10px; }
.st-modal-btn { padding: 10px 28px; border: none; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; }
.st-modal-btn.cancel { background: #f5f5f5; color: #666; }
.st-modal-btn.submit { background: #b2d459; color: #fff; }
.st-modal-btn.submit:hover { background: #5dc3df; }

/* Responsive */
@media (max-width: 1023px) {
  .st-intro { grid-template-columns: 1fr; }
  .st-pf-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
  .si-inner { padding: 50px 16px 50px; }
  .st-pf-grid { grid-template-columns: repeat(2, 1fr); }
  .st-photos { grid-template-columns: 1fr; }
  .st-review-summary { flex-wrap: wrap; }
}

/* ======= PAGE: stylist-service.html ======= */

/* Filter */
.ss-filter { display: flex; gap: 8px; margin-bottom: 24px; }
.ss-filter-btn { padding: 8px 20px; border: 1px solid #ddd; border-radius: 10px; background: #fff; font-size: 13px; font-weight: 500; color: #888; cursor: pointer; transition: all 0.2s; }
.ss-filter-btn.active { border-color: #b2d459; background: #b2d459; color: #fff; font-weight: 600; }
.ss-filter-btn .ss-cnt { display: inline-block; min-width: 18px; height: 18px; line-height: 18px; text-align: center; border-radius: 9px; background: rgba(255,255,255,0.3); font-size: 11px; margin-left: 4px; }

/* Card list */
.ss-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ss-card { background: #fff; border: 1px solid #eee; border-radius: 14px; padding: 22px; cursor: pointer; transition: all 0.2s; }
.ss-card:hover { border-color: #b2d459; box-shadow: 0 4px 16px rgba(70,195,188,0.12); transform: translateY(-2px); }
.ss-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.ss-card-user { display: flex; align-items: center; gap: 10px; }
.ss-card-avatar { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; border: 2px solid #b2d459; flex-shrink: 0; }
.ss-card-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ss-card-name { font-size: 15px; font-weight: 700; color: #1a1a1a; }
.ss-card-sub { font-size: 12px; color: #999; margin-top: 2px; }
.ss-badge { padding: 4px 12px; border-radius: 16px; font-size: 11px; font-weight: 600; }
.ss-badge.waiting { background: #fff3e0; color: #f5a623; }
.ss-badge.accepted { background: #e8f8f7; color: #5dc3df; }
.ss-badge.rejected { background: #fef0f0; color: #e74c3c; }
.ss-card-info { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ss-card-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid #f8f8f8; }
.ss-card-row:last-child { border-bottom: none; }
.ss-card-label { font-size: 12px; color: #bbb; }
.ss-card-val { font-size: 13px; font-weight: 600; color: #333; }
.ss-card-val.price { color: #e74c3c; }
.ss-card-progress { display: flex; gap: 3px; margin-top: 14px; }
.ss-card-dot { flex: 1; height: 4px; border-radius: 2px; background: #f0f0f0; }
.ss-card-dot.filled { background: #b2d459; }
.ss-card-dot.current { background: #f5a623; }
.ss-card-dot.fail { background: #e74c3c; }

/* Detail */
.ss-detail { display: none; }
.ss-detail.active { display: block; }
.ss-back { display: inline-flex; align-items: center; gap: 6px; padding: 8px 0; font-size: 14px; color: #888; cursor: pointer; border: none; background: none; margin-bottom: 20px; transition: color 0.2s; }
.ss-back:hover { color: #b2d459; }

/* Process */
.ss-steps { display: flex; align-items: center; justify-content: center; gap: 0; margin-bottom: 32px; padding: 28px 16px; background: #f8f9fa; border-radius: 14px; }
.ss-step { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 4px 14px; min-width: 72px; }
.ss-step-icon { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; background: #e0e0e0; color: #999; }
.ss-step.done .ss-step-icon { background: #5dc3df; color: #fff; }
.ss-step.active .ss-step-icon { background: #b2d459; color: #fff; box-shadow: 0 0 0 4px rgba(70,195,188,0.2); }
.ss-step-label { font-size: 11px; color: #bbb; font-weight: 500; white-space: nowrap; }
.ss-step.done .ss-step-label { color: #5dc3df; font-weight: 600; }
.ss-step.active .ss-step-label { color: #b2d459; font-weight: 700; }
.ss-arrow { color: #ddd; font-size: 12px; margin: 0 2px; flex-shrink: 0; }

/* Detail card */
.ss-dt-card { background: #fff; border: 1px solid #eee; border-radius: 14px; overflow: hidden; }
.ss-dt-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 28px; border-bottom: 1px solid #f0f0f0; }
.ss-dt-left { display: flex; align-items: center; gap: 14px; }
.ss-dt-avatar { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; border: 2px solid #b2d459; flex-shrink: 0; }
.ss-dt-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ss-dt-name { font-size: 17px; font-weight: 700; color: #1a1a1a; }
.ss-dt-sub { font-size: 13px; color: #999; margin-top: 2px; }
.ss-dt-body { display: grid; grid-template-columns: repeat(4, 1fr); }
.ss-dt-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 12px; text-align: center; border-right: 1px solid #f5f5f5; border-bottom: 1px solid #f5f5f5; }
.ss-dt-cell:nth-child(4n) { border-right: none; }
.ss-dt-cell:nth-child(n+5) { border-bottom: none; }
.ss-dt-cell-label { font-size: 11px; color: #bbb; margin-bottom: 8px; }
.ss-dt-cell-val { font-size: 14px; font-weight: 600; color: #1a1a1a; }
.ss-dt-cell-val.price { color: #e74c3c; font-size: 16px; }

/* Chips */
.ss-chip { display: inline-block; padding: 5px 14px; border-radius: 6px; font-size: 12px; font-weight: 600; }
.ss-chip.wait { background: #fff3e0; color: #f5a623; }
.ss-chip.accept { background: #e8f8f7; color: #5dc3df; }
.ss-chip.reject { background: #fef0f0; color: #e74c3c; }
.ss-chip.done { background: #5dc3df; color: #fff; }
.ss-chip.pending { background: #f5f5f5; color: #ccc; }

/* Action buttons */
.ss-actions { display: flex; justify-content: center; gap: 12px; padding: 24px 28px; border-top: 1px solid #f0f0f0; }
.ss-action-btn { padding: 12px 40px; border: none; border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.ss-action-btn.accept { background: #b2d459; color: #fff; }
.ss-action-btn.accept:hover { background: #5dc3df; }
.ss-action-btn.reject { background: #fff; color: #e74c3c; border: 1px solid #f0d0d0; }
.ss-action-btn.reject:hover { background: #fef5f5; }
.ss-action-btn.pickbox { background: #3478f6; color: #fff; }
.ss-action-btn.pickbox:hover { background: #2a65d4; }

/* Responsive */
@media (max-width: 1023px) { .ss-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) {
  .si-inner { padding: 50px 16px 50px; }
  .ss-list { grid-template-columns: 1fr; }
  .ss-dt-body { grid-template-columns: repeat(2, 1fr); }
  .ss-dt-cell:nth-child(2n) { border-right: none; }
  .ss-dt-cell { border-bottom: 1px solid #f5f5f5; }
  .ss-steps { padding: 16px 8px; }
  .ss-step { min-width: 52px; padding: 4px 6px; }
  .ss-step-icon { width: 34px; height: 34px; font-size: 14px; }
  .ss-actions { flex-direction: column; }
  .ss-action-btn { width: 100%; }
}

/* ======= PAGE: stylist-settlement.html ======= */

/* Summary cards */
.st-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 32px; }
.st-sum-card { background: #fff; border: 1px solid #eee; border-radius: 10px; padding: 24px; text-align: center; }
.st-sum-label { font-size: 13px; color: #999; margin: 0 0 8px; }
.st-sum-value { font-size: 28px; font-weight: 800; color: #1a1a1a; margin: 0; }
.st-sum-value.accent { color: #b2d459; }
.st-sum-value.warn { color: #f5a623; }
.st-sum-sub { font-size: 12px; color: #bbb; margin-top: 6px; }

/* Table */
.st-table { width: 100%; border-collapse: separate; border-spacing: 0 10px; }
.st-table thead th { font-size: 12px; font-weight: 600; color: #999; text-align: center; padding: 8px 12px; border-bottom: 1px solid #eee; }
.st-table tbody tr { background: #fff; border-radius: 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.04); transition: box-shadow 0.2s; }
.st-table tbody tr:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.st-table tbody td { padding: 18px 12px; text-align: center; font-size: 14px; color: #333; vertical-align: middle; }
.st-table tbody td:first-child { border-radius: 12px 0 0 12px; }
.st-table tbody td:last-child { border-radius: 0 12px 12px 0; }

/* Month cell */
.st-month { font-size: 15px; font-weight: 700; color: #1a1a1a; }

/* Count link */
.st-count-link { color: #b2d459; font-weight: 700; text-decoration: none; cursor: pointer; }
.st-count-link:hover { text-decoration: underline; }

/* Amount */
.st-amount { font-size: 16px; font-weight: 800; color: #1a1a1a; }

/* Status chip */
.st-status { display: inline-block; padding: 4px 14px; border-radius: 16px; font-size: 12px; font-weight: 600; }
.st-status.done { background: #e8f8f7; color: #5dc3df; }
.st-status.pending { background: #fff3e0; color: #f5a623; }
.st-status.scheduled { background: #e8f0fe; color: #3478f6; }

/* Receipt button */
.st-receipt-btn { padding: 6px 16px; border: 1px solid #ddd; border-radius: 6px; background: #fff; font-size: 12px; font-weight: 500; color: #666; cursor: pointer; transition: all 0.2s; }
.st-receipt-btn:hover { border-color: #b2d459; color: #b2d459; }

/* Modal */
.st-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 1000; justify-content: center; align-items: center; }
.st-modal-overlay.active { display: flex; }
.st-modal { background: #fff; border-radius: 16px; width: 600px; max-width: 90vw; max-height: 85vh; overflow-y: auto; }
.st-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid #f0f0f0; }
.st-modal-title { font-size: 16px; font-weight: 700; color: #1a1a1a; margin: 0; }
.st-modal-close { width: 32px; height: 32px; border: none; background: #f5f5f5; border-radius: 50%; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #999; }
.st-modal-body { padding: 24px; }
.st-modal-table { width: 100%; border-collapse: collapse; }
.st-modal-table th { font-size: 12px; font-weight: 600; color: #999; padding: 10px 8px; border-bottom: 1px solid #eee; text-align: left; }
.st-modal-table td { font-size: 13px; color: #333; padding: 12px 8px; border-bottom: 1px solid #f5f5f5; }
.st-modal-footer { padding: 16px 24px; border-top: 1px solid #f0f0f0; text-align: right; }
.st-modal-btn { padding: 10px 28px; border: none; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; background: #f5f5f5; color: #666; }

/* Receipt modal info */
.st-receipt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.st-receipt-item { padding: 12px 0; border-bottom: 1px solid #f5f5f5; }
.st-receipt-label { font-size: 12px; color: #999; margin-bottom: 4px; }
.st-receipt-val { font-size: 14px; font-weight: 600; color: #1a1a1a; }
.st-receipt-val.total { color: #e74c3c; font-size: 18px; }

/* Responsive */
@media (max-width: 767px) {
  .si-inner { padding: 50px 16px 50px; }
  .st-summary { grid-template-columns: 1fr; }
  .st-table { font-size: 13px; }
  .st-table thead th:nth-child(2),
  .st-table thead th:nth-child(5),
  .st-table thead th:nth-child(6),
  .st-table tbody td:nth-child(2),
  .st-table tbody td:nth-child(5),
  .st-table tbody td:nth-child(6) { display: none; }
  .st-receipt-grid { grid-template-columns: 1fr; }
}

/* ======= PAGE: stylist-map.html ======= */

.si-inner { width: 100%; max-width: 100%; margin: 0; padding: 0; }

/* Layout: left panel + right map */
.mp-layout { display: flex; height: calc(100vh - 120px); }

/* Left panel */
.mp-panel { width: 400px; flex-shrink: 0; background: #fff; border-right: 1px solid #eee; display: flex; flex-direction: column; overflow: hidden; }
.mp-panel-header { padding: 50px 20px 16px; border-bottom: 1px solid #f0f0f0; }
.mp-panel-toolbar { display: flex; align-items: center; justify-content: space-between; }
.mp-loc-btn { display: inline-flex; align-items: center; gap: 5px; padding: 7px 14px; border: 1px solid #ddd; border-radius: 8px; background: #fff; font-size: 12px; font-weight: 500; color: #333; cursor: pointer; transition: all 0.2s; }
.mp-loc-btn:hover { border-color: #b2d459; color: #b2d459; }
.mp-loc-btn i { color: #b2d459; }
.mp-panel-title { font-size: 16px; font-weight: 700; color: #1a1a1a; margin: 0; }
.mp-panel-count { font-size: 13px; color: #b2d459; font-weight: 600; }

/* Location Modal */
.mp-loc-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 1000; justify-content: center; align-items: center; }
.mp-loc-overlay.active { display: flex; }
.mp-loc-modal { background: #fff; border-radius: 16px; width: 440px; max-width: 90vw; max-height: 80vh; overflow: hidden; display: flex; flex-direction: column; }
.mp-loc-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; border-bottom: 1px solid #f0f0f0; }
.mp-loc-title { font-size: 16px; font-weight: 700; color: #1a1a1a; margin: 0; }
.mp-loc-close { width: 32px; height: 32px; border: none; background: #f5f5f5; border-radius: 50%; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #999; }
.mp-loc-body { display: flex; flex: 1; overflow: hidden; }
.mp-loc-cities { width: 120px; border-right: 1px solid #f0f0f0; overflow-y: auto; }
.mp-loc-city { display: block; padding: 12px 16px; font-size: 13px; color: #999; cursor: pointer; transition: all 0.15s; border-left: 3px solid transparent; }
.mp-loc-city.active { color: #b2d459; font-weight: 700; background: #f8fffe; border-left-color: #b2d459; }
.mp-loc-city:hover { color: #b2d459; background: #fafafa; }
.mp-loc-districts { flex: 1; padding: 16px; overflow-y: auto; display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start; }
.mp-loc-dist { padding: 8px 16px; border: 1px solid #eee; border-radius: 20px; font-size: 13px; color: #666; cursor: pointer; transition: all 0.15s; }
.mp-loc-dist.active { border-color: #b2d459; background: #b2d459; color: #fff; font-weight: 600; }
.mp-loc-dist:hover { border-color: #b2d459; color: #b2d459; }
.mp-loc-footer { padding: 14px 24px; border-top: 1px solid #f0f0f0; display: flex; justify-content: flex-end; gap: 8px; }
.mp-loc-footer button { padding: 10px 28px; border: none; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; }
.mp-loc-footer .mp-loc-reset { background: #f5f5f5; color: #888; }
.mp-loc-footer .mp-loc-apply { background: #b2d459; color: #fff; }
.mp-loc-footer .mp-loc-apply:hover { background: #5dc3df; }
.mp-region { padding: 6px 14px; border: 1px solid #eee; border-radius: 16px; font-size: 12px; color: #888; cursor: pointer; transition: all 0.2s; background: #fff; }
.mp-region.active { border-color: #b2d459; background: #b2d459; color: #fff; font-weight: 600; }
.mp-region:hover { border-color: #b2d459; color: #b2d459; }

/* Stylist list */
.mp-list { flex: 1; overflow-y: auto; padding: 0; }
.mp-item { display: flex; gap: 14px; padding: 18px 20px; border-bottom: 1px solid #f5f5f5; cursor: pointer; transition: background 0.15s; }
.mp-item:hover { background: #f8fffe; }
.mp-item.active { background: #e8f8f7; border-left: 3px solid #b2d459; }
.mp-item-avatar { width: 68px; height: 90px; border-radius: 12px; overflow: hidden; flex-shrink: 0; }
.mp-item-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mp-item-body { flex: 1; min-width: 0; }
.mp-item-name { font-size: 14px; font-weight: 700; color: #1a1a1a; margin: 0 0 4px; display: flex; align-items: center; gap: 6px; }
.mp-item-badge { font-size: 10px; font-weight: 500; padding: 2px 8px; border-radius: 10px; background: #e8f8f7; color: #5dc3df; }
.mp-item-loc { font-size: 12px; color: #999; margin: 0 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-item-meta { display: flex; gap: 12px; font-size: 12px; }
.mp-item-star { color: #f5a623; font-weight: 600; }
.mp-item-price { color: #333; font-weight: 600; }
.mp-item-available { font-size: 11px; color: #5dc3df; margin-top: 6px; }
.mp-item-areas { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.mp-area-tag { padding: 2px 10px; border-radius: 10px; background: #f0f0f0; font-size: 11px; color: #666; }

/* Right: Map area */
.mp-map { flex: 1; background: #e8edf2; position: relative; overflow: hidden; }

/* Fake map grid (서울 구 단위) */
.mp-map-inner { width: 100%; height: 100%; position: relative; }
.mp-map-bg { width: 100%; height: 100%; background: linear-gradient(135deg, #dce3ea 0%, #c8d3de 50%, #dce3ea 100%); display: flex; align-items: center; justify-content: center; }
.mp-map-label { font-size: 14px; color: #aaa; }

/* Map markers */
.mp-marker { position: absolute; display: flex; flex-direction: column; align-items: center; cursor: pointer; transition: transform 0.2s; }
.mp-marker:hover { transform: scale(1.1); z-index: 10; }
.mp-marker-bubble { min-width: 36px; height: 36px; border-radius: 18px; background: #b2d459; color: #fff; font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(70,195,188,0.4); padding: 0 10px; }
.mp-marker-bubble.hot { background: #e74c3c; box-shadow: 0 2px 8px rgba(231,76,60,0.4); }
.mp-marker-name { font-size: 10px; color: #555; font-weight: 600; margin-top: 4px; background: rgba(255,255,255,0.9); padding: 1px 6px; border-radius: 4px; white-space: nowrap; }

/* Responsive */
@media (max-width: 1023px) {
  .mp-layout { flex-direction: column; height: auto; }
  .mp-panel { width: 100%; height: auto; max-height: 50vh; border-right: none; border-bottom: 1px solid #eee; }
  .mp-map { height: 50vh; }
}
@media (max-width: 767px) {
  .mp-panel { max-height: 40vh; }
  .mp-map { height: 60vh; }
  .mp-regions { padding: 0 16px 12px; }
  .mp-item { padding: 14px 16px; }
}

/* ======= PAGE: mypage.html ======= */

.si-inner .wrapper { width: 100% !important; max-width: 100% !important; }

.rt-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; margin-top: 20px; }
.rt-card { background: #fff; border: 1px solid #eee; border-radius: 16px; padding: 32px 28px; }
.rt-card-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.rt-icon { width: 64px; height: 64px; }
.rt-header-info { flex: 1; }
.rt-header-info .rt-label { font-size: 13px; color: #888; margin: 0; }
.rt-header-info .rt-score { font-size: 40px; font-weight: 800; color: #1a1a1a; margin: 2px 0 0; line-height: 1; }
.rt-header-info .rt-score span { font-size: 18px; font-weight: 600; color: #888; }
.rt-header-info .rt-detail-link { font-size: 12px; color: #aaa; }
.rt-test-btn { display: inline-block; padding: 10px 28px; border-radius: 24px; background: #b2d459; color: #fff; font-size: 14px; font-weight: 600; border: none; cursor: pointer; transition: background 0.2s; }
.rt-test-btn:hover { background: #5dc3df; }
.rt-score-section { text-align: center; margin-bottom: 28px; }
.rt-score-title { font-size: 14px; font-weight: 600; color: #333; margin-bottom: 14px; }
.rt-bar-wrap { position: relative; height: 14px; background: #f0f0f0; border-radius: 7px; overflow: visible; }
.rt-bar-fill { height: 100%; border-radius: 7px; background: linear-gradient(90deg, #f5d76e 0%, #f7c948 100%); position: relative; }
.rt-bar-thumb { position: absolute; right: -8px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; background: #fff; border: 3px solid #f7c948; border-radius: 50%; box-shadow: 0 2px 6px rgba(0,0,0,0.15); }
.rt-bar-labels { display: flex; justify-content: space-between; margin-top: 6px; font-size: 12px; color: #bbb; }
.rt-bar-avg { text-align: center; margin-top: 8px; font-size: 13px; color: #888; }
.rt-bar-avg strong { color: #333; }
.rt-score-info { text-align: center; font-size: 12px; color: #aaa; line-height: 1.8; }
.rt-legend { display: flex; justify-content: center; gap: 6px; margin: 20px 0 16px; }
.rt-dot { width: 8px; height: 8px; border-radius: 50%; }
.rt-chart { width: 100%; aspect-ratio: 16 / 10; background: #fafafa; border-radius: 12px; display: flex; align-items: flex-end; justify-content: center; gap: 8px; padding: 20px 16px 12px; }
.rt-chart-group { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; }
.rt-chart-bars { display: flex; align-items: flex-end; gap: 3px; height: 140px; }
.rt-chart-bar { width: 14px; border-radius: 3px 3px 0 0; }
.rt-chart-label { font-size: 11px; color: #999; margin-top: 4px; }
.rt-chart-icon { font-size: 18px; color: #bbb; margin-bottom: 4px; }

@media (max-width: 1023px) { .rt-grid { gap: 20px; } .rt-card { padding: 24px 20px; } }
@media (max-width: 767px) { .si-inner { padding: 50px 16px 50px; } .rt-grid { grid-template-columns: 1fr; } .rt-card-header { flex-wrap: wrap; } }
@media (max-width: 479px) { .rt-card { padding: 20px 16px; } .rt-header-info .rt-score { font-size: 32px; } .rt-chart-bars { height: 100px; } .rt-chart-bar { width: 10px; } }

/* ======= PAGE: mypage-info.html ======= */

/* Local tabs (회원정보 / 바디정보) */
.mi-tabs { display: flex; border-bottom: 2px solid #eee; margin-bottom: 28px; }
.mi-tab { padding: 12px 28px; font-size: 15px; font-weight: 500; color: #999; cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px; transition: all 0.2s; background: none; border-top: none; border-left: none; border-right: none; }
.mi-tab.active { color: #b2d459; font-weight: 700; border-bottom-color: #b2d459; }
.mi-tab-panel { display: none; }
.mi-tab-panel.active { display: block; }

/* Profile card */
.mi-profile { display: flex; align-items: center; gap: 28px; background: #f8f9fa; border-radius: 16px; padding: 32px; margin-bottom: 28px; }
.mi-avatar { position: relative; width: 110px; height: 110px; border-radius: 50%; overflow: hidden; background: #e0e0e0; flex-shrink: 0; }
.mi-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mi-avatar-edit { position: absolute; bottom: 0; left: 0; right: 0; height: 32px; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.mi-avatar-edit i { color: #fff; font-size: 14px; }
.mi-avatar-edit input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.mi-profile-info { flex: 1; }
.mi-profile-name { font-size: 22px; font-weight: 700; color: #1a1a1a; margin: 0 0 4px; }
.mi-profile-email { font-size: 14px; color: #999; margin: 0 0 12px; }
.mi-profile-badges { display: flex; gap: 8px; }
.mi-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 500; }
.mi-badge.stylist { background: #e8f8f7; color: #5dc3df; }
.mi-badge.verified { background: #fff3e0; color: #f5a623; }

/* Form sections */
.mi-section { background: #fff; border: 1px solid #eee; border-radius: 16px; padding: 28px 32px; margin-bottom: 20px; }
.mi-section-title { font-size: 16px; font-weight: 700; color: #1a1a1a; margin: 0 0 20px; padding-bottom: 14px; border-bottom: 1px solid #f0f0f0; }
.mi-form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.mi-field { display: flex; flex-direction: column; gap: 6px; }
.mi-field.full { grid-column: 1 / -1; }
.mi-field label { font-size: 13px; font-weight: 600; color: #555; }
.mi-field-row { display: flex; align-items: center; gap: 8px; }
.mi-field input, .mi-field select, .mi-field textarea { width: 100%; height: 42px; border: 1px solid #ddd; border-radius: 8px; padding: 0 12px; font-size: 14px; outline: none; transition: border-color 0.2s; background: #fff; }
.mi-field input:focus, .mi-field select:focus, .mi-field textarea:focus { border-color: #b2d459; }
.mi-field textarea { height: 80px; padding: 10px 12px; resize: vertical; }
.mi-field .mi-unit { font-size: 13px; color: #999; white-space: nowrap; }
.mi-gender { display: flex; gap: 8px; }
.mi-gender button { flex: 1; height: 42px; border: 1px solid #ddd; border-radius: 8px; background: #fff; font-size: 14px; color: #888; cursor: pointer; transition: all 0.2s; }
.mi-gender button.active { border-color: #b2d459; background: #b2d459; color: #fff; font-weight: 600; }
.mi-save { display: flex; justify-content: flex-end; gap: 12px; margin-top: 24px; }
.mi-save-btn { padding: 12px 40px; border: none; border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer; transition: background 0.2s; }
.mi-save-btn.primary { background: #b2d459; color: #fff; }
.mi-save-btn.primary:hover { background: #5dc3df; }
.mi-save-btn.secondary { background: #f5f5f5; color: #666; }

/* Body info layout */
.bi-layout { display: grid; grid-template-columns: 380px 1fr; gap: 32px; }
.bi-model { background: #f8f9fa; border-radius: 16px; padding: 28px 20px; text-align: center; height: fit-content; position: sticky; top: 140px; }
.bi-model-title { font-size: 14px; font-weight: 600; color: #333; margin: 0 0 6px; }
.bi-model-sub { font-size: 12px; color: #aaa; margin: 0 0 16px; }
.bi-svg-wrap { width: 100%; max-width: 280px; margin: 0 auto; }
.bi-svg-wrap img { width: 100%; height: auto; }
.bi-gender-toggle { display: flex; gap: 8px; justify-content: center; margin-bottom: 16px; }
.bi-gender-toggle button { padding: 6px 20px; border: 1px solid #ddd; border-radius: 20px; background: #fff; font-size: 13px; color: #888; cursor: pointer; transition: all 0.2s; }
.bi-gender-toggle button.active { border-color: #b2d459; background: #b2d459; color: #fff; font-weight: 600; }

@media (max-width: 1023px) { .bi-layout { grid-template-columns: 1fr; } .bi-model { position: static; } }
@media (max-width: 767px) {
  .si-inner { padding: 50px 16px 50px; }
  .mi-profile { flex-direction: column; text-align: center; padding: 24px 16px; }
  .mi-form-grid { grid-template-columns: 1fr; }
  .mi-section { padding: 20px 16px; }
  .mi-tabs { gap: 0; }
  .mi-tab { flex: 1; text-align: center; padding: 12px 16px; font-size: 14px; }
}

/* ======= PAGE: mypage-service.html ======= */

/* ===== Filter tabs ===== */
.sv-filter { display: flex; gap: 8px; margin-bottom: 24px; }
.sv-filter-btn { padding: 8px 20px; border: 1px solid #ddd; border-radius: 10px; background: #fff; font-size: 13px; font-weight: 500; color: #888; cursor: pointer; transition: all 0.2s; }
.sv-filter-btn.active { border-color: #b2d459; background: #b2d459; color: #fff; font-weight: 600; }
.sv-filter-btn .sv-filter-count { display: inline-block; min-width: 18px; height: 18px; line-height: 18px; text-align: center; border-radius: 9px; background: rgba(255,255,255,0.3); font-size: 11px; margin-left: 4px; }
.sv-filter-btn.active .sv-filter-count { background: rgba(255,255,255,0.35); }

/* ===== List View: Service Cards ===== */
.sv-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.sv-item { background: #fff; border: 1px solid #eee; border-radius: 14px; padding: 22px; cursor: pointer; transition: all 0.2s; position: relative; }
.sv-item:hover { border-color: #b2d459; box-shadow: 0 4px 16px rgba(70,195,188,0.12); transform: translateY(-2px); }
.sv-item-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.sv-item-stylist { display: flex; align-items: center; gap: 10px; }
.sv-item-avatar { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; border: 2px solid #b2d459; flex-shrink: 0; }
.sv-item-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sv-item-name { font-size: 15px; font-weight: 700; color: #1a1a1a; }
.sv-item-type { font-size: 12px; color: #999; margin-top: 2px; }
.sv-item-badge { padding: 4px 12px; border-radius: 16px; font-size: 11px; font-weight: 600; }
.sv-item-badge.waiting { background: #fff3e0; color: #f5a623; }
.sv-item-badge.progress { background: #e8f8f7; color: #5dc3df; }
.sv-item-badge.completed { background: #e8f0fe; color: #3478f6; }
.sv-item-badge.rejected { background: #fef0f0; color: #e74c3c; }

.sv-item-info { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sv-item-info-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid #f8f8f8; }
.sv-item-info-row:last-child { border-bottom: none; }
.sv-item-info-label { font-size: 12px; color: #bbb; }
.sv-item-info-value { font-size: 13px; font-weight: 600; color: #333; }
.sv-item-info-value.price { color: #e74c3c; }

.sv-item-progress { display: flex; gap: 3px; margin-top: 14px; }
.sv-item-dot { flex: 1; height: 4px; border-radius: 2px; background: #f0f0f0; }
.sv-item-dot.filled { background: #b2d459; }
.sv-item-dot.current { background: #f5a623; }

/* ===== Detail View ===== */
.sv-detail { display: none; }
.sv-detail.active { display: block; }

/* Back button */
.sv-back { display: inline-flex; align-items: center; gap: 6px; padding: 8px 0; font-size: 14px; color: #888; cursor: pointer; border: none; background: none; margin-bottom: 20px; transition: color 0.2s; }
.sv-back:hover { color: #b2d459; }

/* Process Steps */
.sv-steps { display: flex; align-items: center; justify-content: center; gap: 0; margin-bottom: 32px; padding: 28px 16px; background: #f8f9fa; border-radius: 14px; }
.sv-step { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 4px 14px; min-width: 72px; }
.sv-step-icon { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; background: #e0e0e0; color: #999; transition: all 0.3s; }
.sv-step.done .sv-step-icon { background: #5dc3df; color: #fff; }
.sv-step.active .sv-step-icon { background: #b2d459; color: #fff; box-shadow: 0 0 0 4px rgba(70,195,188,0.2); }
.sv-step-label { font-size: 11px; color: #bbb; font-weight: 500; white-space: nowrap; }
.sv-step.done .sv-step-label { color: #5dc3df; font-weight: 600; }
.sv-step.active .sv-step-label { color: #b2d459; font-weight: 700; }
.sv-arrow { color: #ddd; font-size: 12px; margin: 0 2px; flex-shrink: 0; }

/* Detail card */
.sv-detail-card { background: #fff; border: 1px solid #eee; border-radius: 14px; overflow: hidden; }
.sv-detail-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 28px; border-bottom: 1px solid #f0f0f0; }
.sv-detail-left { display: flex; align-items: center; gap: 14px; }
.sv-detail-avatar { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; border: 2px solid #b2d459; flex-shrink: 0; }
.sv-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sv-detail-name { font-size: 17px; font-weight: 700; color: #1a1a1a; }
.sv-detail-sub { font-size: 13px; color: #999; margin-top: 2px; }

.sv-detail-body { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.sv-detail-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 12px; text-align: center; border-right: 1px solid #f5f5f5; border-bottom: 1px solid #f5f5f5; }
.sv-detail-cell:nth-child(4n) { border-right: none; }
.sv-detail-cell:nth-child(n+5) { border-bottom: none; }
.sv-detail-cell-label { font-size: 11px; color: #bbb; margin-bottom: 8px; font-weight: 500; }
.sv-detail-cell-value { font-size: 14px; font-weight: 600; color: #1a1a1a; }
.sv-detail-cell-value.price { color: #e74c3c; font-size: 16px; }
.sv-detail-cell-value a { color: #b2d459; text-decoration: none; font-weight: 700; }
.sv-detail-cell-value a:hover { text-decoration: underline; }

/* Chips */
.sv-chip { display: inline-block; padding: 5px 14px; border-radius: 6px; font-size: 12px; font-weight: 600; }
.sv-chip.wait { background: #fff3e0; color: #f5a623; }
.sv-chip.accept { background: #e8f8f7; color: #5dc3df; }
.sv-chip.reject { background: #fef0f0; color: #e74c3c; }
.sv-chip.done { background: #5dc3df; color: #fff; }
.sv-chip.view { background: #b2d459; color: #fff; cursor: pointer; text-decoration: none; }
.sv-chip.view:hover { background: #5dc3df; }
.sv-chip.pending { background: #f5f5f5; color: #ccc; }

/* ===== Pickbox detail (guide + products) ===== */
.dt-guide { background: #fff; border: 1px solid #eee; border-radius: 14px; padding: 24px 28px; margin-top: 24px; }
.dt-guide-header { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.dt-guide-avatar { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; border: 2px solid #b2d459; flex-shrink: 0; }
.dt-guide-avatar img { width: 100%; height: 100%; object-fit: cover; }
.dt-guide-info { display: flex; align-items: center; gap: 12px; flex: 1; }
.dt-guide-name { font-size: 15px; font-weight: 700; color: #1a1a1a; }
.dt-guide-name span { font-size: 11px; font-weight: 500; color: #b2d459; background: #e8f8f7; padding: 2px 10px; border-radius: 12px; margin-left: 6px; }
.dt-guide-date { font-size: 12px; color: #bbb; margin-left: auto; }
.dt-guide-text { font-size: 14px; color: #555; line-height: 1.75; margin: 0; }
.dt-guide-tags { display: flex; gap: 6px; margin-top: 14px; }
.dt-guide-tags span { padding: 4px 12px; border-radius: 16px; background: #f5f5f5; font-size: 12px; color: #777; }

.dt-prod-title { font-size: 16px; font-weight: 700; color: #1a1a1a; margin: 28px 0 16px; }
.dt-prod-title span { font-size: 14px; font-weight: 500; color: #b2d459; }
.dt-prod-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.dt-prod-card { background: #fff; border: 1px solid #eee; border-radius: 12px; overflow: hidden; }
.dt-prod-img { position: relative; aspect-ratio: 1; overflow: hidden; background: #f8f8f8; }
.dt-prod-img img { width: 100%; height: 100%; object-fit: cover; }
.dt-prod-badge { position: absolute; top: 10px; left: 10px; padding: 3px 10px; border-radius: 6px; background: #b2d459; color: #fff; font-size: 11px; font-weight: 600; }
.dt-prod-body { padding: 14px; }
.dt-prod-name { font-size: 13px; font-weight: 600; color: #1a1a1a; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 36px; margin: 0 0 6px; }
.dt-prod-price { font-size: 16px; font-weight: 800; color: #1a1a1a; margin: 0; }
.dt-prod-price span { font-size: 12px; font-weight: 400; color: #bbb; text-decoration: line-through; margin-left: 4px; }
.dt-prod-comment { font-size: 12px; color: #999; margin: 8px 0 0; line-height: 1.5; }
.dt-prod-comment i { color: #b2d459; margin-right: 3px; }

/* Responsive */
@media (max-width: 1023px) {
  .sv-list { grid-template-columns: repeat(2, 1fr); }
  .dt-prod-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .si-inner { padding: 50px 16px 50px; }
  .sv-list { grid-template-columns: 1fr; }
  .dt-prod-grid { grid-template-columns: 1fr; }
  .sv-detail-body { grid-template-columns: repeat(2, 1fr); }
  .sv-detail-cell:nth-child(2n) { border-right: none; }
  .sv-detail-cell { border-bottom: 1px solid #f5f5f5; }
  .sv-steps { padding: 16px 8px; }
  .sv-step { min-width: 52px; padding: 4px 6px; }
  .sv-step-icon { width: 34px; height: 34px; font-size: 14px; }
  .sv-step-label { font-size: 10px; }
}

/* ======= PAGE: mypage-service-pickbox.html ======= */

/* Stylist review card */
.pb-review { display: flex; gap: 20px; background: #fff; border: 1px solid #eee; border-radius: 16px; padding: 28px; margin-bottom: 28px; }
.pb-review-avatar { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; flex-shrink: 0; border: 2px solid #b2d459; }
.pb-review-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pb-review-body { flex: 1; }
.pb-review-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.pb-review-name { font-size: 16px; font-weight: 700; color: #1a1a1a; }
.pb-review-name span { font-size: 12px; font-weight: 500; color: #b2d459; background: #e8f8f7; padding: 2px 10px; border-radius: 12px; margin-left: 8px; }
.pb-review-date { font-size: 12px; color: #bbb; }
.pb-review-text { font-size: 14px; color: #555; line-height: 1.75; }
.pb-review-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.pb-review-tag { padding: 4px 12px; border-radius: 16px; background: #f5f5f5; font-size: 12px; color: #777; }

/* Section title */
.pb-section-title { font-size: 18px; font-weight: 700; color: #1a1a1a; margin: 0 0 20px; display: flex; align-items: center; gap: 8px; }
.pb-section-title .pb-count { font-size: 14px; font-weight: 500; color: #b2d459; }

/* Product cards grid */
.pb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 32px; }
.pb-card { background: #fff; border: 1px solid #eee; border-radius: 14px; overflow: hidden; transition: transform 0.2s, box-shadow 0.2s; }
.pb-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
.pb-card-img { position: relative; aspect-ratio: 1; overflow: hidden; background: #f8f8f8; }
.pb-card-img img { width: 100%; height: 100%; object-fit: cover; }
.pb-card-badge { position: absolute; top: 12px; left: 12px; padding: 4px 12px; border-radius: 6px; font-size: 11px; font-weight: 600; }
.pb-card-badge.pick { background: #b2d459; color: #fff; }
.pb-card-body { padding: 16px; }
.pb-card-name { font-size: 14px; font-weight: 600; color: #1a1a1a; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 39px; }
.pb-card-price { font-size: 18px; font-weight: 800; color: #1a1a1a; margin-top: 8px; }
.pb-card-price .pb-card-original { font-size: 13px; font-weight: 400; color: #bbb; text-decoration: line-through; margin-left: 6px; }
.pb-card-comment { font-size: 12px; color: #999; margin-top: 8px; padding-top: 8px; border-top: 1px solid #f0f0f0; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pb-card-comment i { color: #b2d459; margin-right: 4px; }
.pb-card-actions { display: flex; gap: 8px; padding: 0 16px 16px; }
.pb-card-actions a,
.pb-card-actions button { flex: 1; height: 36px; border-radius: 8px; font-size: 13px; font-weight: 600; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; text-decoration: none; border: none; }
.pb-btn-view { background: #f5f5f5; color: #666; }
.pb-btn-view:hover { background: #eee; }
.pb-btn-accept { background: #b2d459; color: #fff; }
.pb-btn-accept:hover { background: #5dc3df; }
.pb-btn-reject { background: #fff; color: #e74c3c; border: 1px solid #f0d0d0 !important; }
.pb-btn-reject:hover { background: #fef5f5; }

/* Summary bar */
.pb-summary { display: flex; align-items: center; justify-content: space-between; background: #f8f9fa; border-radius: 14px; padding: 20px 28px; margin-bottom: 20px; }
.pb-summary-prices { display: flex; align-items: center; gap: 12px; font-size: 14px; color: #666; }
.pb-summary-prices strong { color: #1a1a1a; font-weight: 700; }
.pb-summary-total { font-size: 20px; font-weight: 800; color: #e74c3c; }
.pb-summary-op { color: #bbb; font-size: 16px; }
.pb-actions { display: flex; justify-content: flex-end; gap: 12px; }
.pb-actions button { padding: 12px 36px; border: none; border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer; transition: background 0.2s; }
.pb-actions .pb-back { background: #f5f5f5; color: #666; }
.pb-actions .pb-pay { background: #b2d459; color: #fff; }
.pb-actions .pb-pay:hover { background: #5dc3df; }

/* Responsive */
@media (max-width: 1023px) { .pb-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) {
  .si-inner { padding: 50px 16px 50px; }
  .pb-grid { grid-template-columns: 1fr; }
  .pb-review { flex-direction: column; gap: 12px; }
  .pb-summary { flex-direction: column; gap: 12px; text-align: center; }
  .pb-summary-prices { flex-wrap: wrap; justify-content: center; }
}

/* ======= PAGE: mypage-body-modeling.html ======= */

/* ===== body-modeling page ===== */

/* Layout */
.bm-layout { display: grid; grid-template-columns: 420px 1fr; gap: 40px; margin-top: 12px; }

/* Left: Body Model */
.bm-model { position: sticky; top: 140px; background: #f8f9fa; border-radius: 16px; padding: 32px 24px; text-align: center; height: fit-content; }
.bm-model-title { font-size: 14px; font-weight: 600; color: #333; margin: 0 0 8px; }
.bm-model-sub { font-size: 12px; color: #aaa; margin: 0 0 20px; }
.bm-svg-wrap { position: relative; width: 260px; margin: 0 auto; }
.bm-svg-wrap svg { width: 100%; height: auto; }

/* Body stats summary */
.bm-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 24px; }
.bm-stat { background: #fff; border-radius: 10px; padding: 12px 8px; text-align: center; }
.bm-stat-label { font-size: 11px; color: #999; margin: 0; }
.bm-stat-value { font-size: 18px; font-weight: 700; color: #b2d459; margin: 4px 0 0; }
.bm-stat-unit { font-size: 11px; font-weight: 400; color: #aaa; }

/* Measurement lines on SVG */
.bm-line { stroke: #b2d459; stroke-width: 1.5; stroke-dasharray: 4 3; opacity: 0; transition: opacity 0.3s; }
.bm-line.active { opacity: 1; }
.bm-dot { fill: #b2d459; opacity: 0; transition: opacity 0.3s; }
.bm-dot.active { opacity: 1; }

/* Right: Form */
.bm-form-card { background: #fff; border: 1px solid #eee; border-radius: 16px; padding: 28px 32px; }
.bm-form-title { font-size: 18px; font-weight: 700; color: #1a1a1a; margin: 0 0 6px; }
.bm-form-desc { font-size: 13px; color: #999; margin: 0 0 24px; }

.bm-form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.bm-field { display: flex; flex-direction: column; gap: 6px; }
.bm-field.full { grid-column: 1 / -1; }
.bm-field label { font-size: 13px; font-weight: 600; color: #555; }
.bm-field-input { display: flex; align-items: center; gap: 8px; }
.bm-field-input input,
.bm-field-input select { flex: 1; height: 42px; border: 1px solid #ddd; border-radius: 8px; padding: 0 12px; font-size: 14px; outline: none; transition: border-color 0.2s; }
.bm-field-input input:focus,
.bm-field-input select:focus { border-color: #b2d459; }
.bm-field-input .bm-unit { font-size: 13px; color: #999; white-space: nowrap; }
.bm-field-input .bm-help { width: 28px; height: 28px; border-radius: 50%; border: 1px solid #ddd; background: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 14px; color: #bbb; flex-shrink: 0; }
.bm-field-input .bm-help:hover { border-color: #b2d459; color: #b2d459; }

/* Gender toggle */
.bm-gender { display: flex; gap: 8px; }
.bm-gender button { flex: 1; height: 42px; border: 1px solid #ddd; border-radius: 8px; background: #fff; font-size: 14px; color: #888; cursor: pointer; transition: all 0.2s; }
.bm-gender button.active { border-color: #b2d459; background: #b2d459; color: #fff; font-weight: 600; }

/* Save */
.bm-save-wrap { display: flex; justify-content: flex-end; gap: 12px; margin-top: 24px; padding-top: 20px; border-top: 1px solid #f0f0f0; }
.bm-save-btn { padding: 12px 40px; border: none; border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer; transition: background 0.2s; }
.bm-save-btn.primary { background: #b2d459; color: #fff; }
.bm-save-btn.primary:hover { background: #5dc3df; }
.bm-save-btn.secondary { background: #f5f5f5; color: #666; }
.bm-save-btn.secondary:hover { background: #eee; }

/* Highlight active field */
.bm-field.highlight label { color: #b2d459; }
.bm-field.highlight input { border-color: #b2d459; }

/* Responsive */
@media (max-width: 1023px) {
  .bm-layout { grid-template-columns: 1fr; gap: 24px; }
  .bm-model { position: static; }
}
@media (max-width: 767px) {
  .si-inner { padding: 50px 16px 50px; }
  .bm-form-grid { grid-template-columns: 1fr; }
  .bm-form-card { padding: 20px 16px; }
  .bm-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ======= PAGE: stylist-application.html ======= */
.sa-hero { background: linear-gradient(135deg, #1a1a2e 0%, #2d2d44 100%); border-radius: 20px; padding: 60px 48px; margin-bottom: 48px; color: #fff; }
.sa-hero-badge { display: inline-block; padding: 6px 16px; border-radius: 20px; background: rgba(178,212,89,0.2); color: #b2d459; font-size: 13px; font-weight: 600; margin-bottom: 16px; }
.sa-hero-title { font-size: 32px; font-weight: 800; line-height: 1.4; margin: 0 0 14px; }
.sa-hero-desc { font-size: 15px; color: rgba(255,255,255,0.6); line-height: 1.7; margin: 0 0 32px; }
.sa-hero-stats { display: flex; gap: 32px; }
.sa-stat { text-align: center; }
.sa-stat strong { display: block; font-size: 28px; font-weight: 800; color: #b2d459; }
.sa-stat span { font-size: 12px; color: rgba(255,255,255,0.5); }

.sa-section-title { font-size: 20px; font-weight: 800; color: #1a1a1a; margin: 0 0 24px; }

.sa-info { margin-bottom: 48px; }
.sa-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.sa-card { background: #fff; border: 1px solid #eee; border-radius: 14px; padding: 28px; text-align: center; transition: transform 0.2s, box-shadow 0.2s; }
.sa-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.06); }
.sa-card-icon { width: 56px; height: 56px; border-radius: 50%; background: #f0faf0; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; font-size: 24px; color: #b2d459; }
.sa-card h3 { font-size: 16px; font-weight: 700; color: #1a1a1a; margin: 0 0 10px; }
.sa-card p { font-size: 13px; color: #777; line-height: 1.7; margin: 0; }

.sa-process { margin-bottom: 48px; }
.sa-steps { display: flex; align-items: flex-start; justify-content: center; gap: 0; background: #f8f9fa; border-radius: 14px; padding: 32px 20px; }
.sa-step { flex: 1; text-align: center; padding: 0 12px; }
.sa-step-num { width: 40px; height: 40px; border-radius: 50%; background: #b2d459; color: #fff; font-size: 16px; font-weight: 800; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; }
.sa-step h4 { font-size: 14px; font-weight: 700; color: #1a1a1a; margin: 0 0 6px; }
.sa-step p { font-size: 12px; color: #999; line-height: 1.5; margin: 0; }
.sa-step-arrow { color: #ddd; font-size: 16px; padding-top: 10px; }

.sa-recruit { margin-bottom: 48px; }
.sa-recruit-desc { font-size: 14px; color: #888; margin: -16px 0 20px; }
.sa-recruit-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.sa-recruit-item { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; background: #fff; border: 1px solid #eee; border-radius: 10px; }
.sa-region { font-size: 14px; font-weight: 700; color: #1a1a1a; }
.sa-count { font-size: 13px; color: #888; }
.sa-recruit-status { padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: 600; }
.sa-recruit-status.open { background: #f0faf0; color: #b2d459; }
.sa-recruit-status.closed { background: #f5f5f5; color: #ccc; }

.sa-form-section { margin-bottom: 20px; }
.sa-form-desc { font-size: 14px; color: #888; margin: -16px 0 24px; }
.sa-form { background: #fff; border: 1px solid #eee; border-radius: 14px; padding: 32px; }
.sa-form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.sa-field { display: flex; flex-direction: column; gap: 6px; }
.sa-field.full { grid-column: 1 / -1; }
.sa-field label { font-size: 13px; font-weight: 600; color: #555; }
.sa-field label span { color: #f48276; }
.sa-field input, .sa-field select, .sa-field textarea { width: 100%; height: 42px; border: 1px solid #ddd; border-radius: 10px; padding: 0 14px; font-size: 14px; outline: none; background: #fff; }
.sa-field input:focus, .sa-field select:focus, .sa-field textarea:focus { border-color: #b2d459; }
.sa-field textarea { height: 120px; padding: 12px 14px; resize: vertical; }
.sa-field-row { display: flex; gap: 10px; }
.sa-field-row select { flex: 1; }
.sa-file { position: relative; }
.sa-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.sa-file-label { display: flex; align-items: center; gap: 6px; padding: 10px 16px; border: 1px dashed #ddd; border-radius: 10px; font-size: 13px; color: #999; cursor: pointer; transition: all 0.2s; }
.sa-file-label:hover { border-color: #b2d459; color: #b2d459; }
.sa-form-footer { text-align: right; margin-top: 24px; padding-top: 20px; border-top: 1px solid #f0f0f0; }
.sa-submit { padding: 14px 48px; border: none; border-radius: 10px; background: #b2d459; color: #fff; font-size: 16px; font-weight: 700; cursor: pointer; transition: background 0.2s; }
.sa-submit:hover { background: #5dc3df; }

@media (max-width: 1023px) { .sa-cards { grid-template-columns: 1fr; } .sa-recruit-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { .sa-hero { padding: 36px 24px; } .sa-hero-title { font-size: 24px; } .sa-steps { flex-direction: column; gap: 16px; } .sa-step-arrow { transform: rotate(90deg); } .sa-form-grid { grid-template-columns: 1fr; } .sa-recruit-grid { grid-template-columns: 1fr; } }

/* ======= MAIN PAGE: transparent header ======= */
.main-page .header { background: transparent; border-bottom-color: transparent; }
.main-page .header .gnb-wrap { border-bottom-color: rgba(255,255,255,0.15); }
.main-page .header .gnb-wrap .wrapper .inner ul li a { color: rgba(255,255,255,0.85); }
.main-page .header .gnb-wrap .wrapper .inner ul li:hover a,
.main-page .header .gnb-wrap .wrapper .inner ul li.on a { color: #fff; }
.main-page .header .gnb-wrap .wrapper .inner ul:not(.mo-disblock) > li > a:after { background: #fff; }
.main-page .header .top-area .snb h2,
.main-page .header .top-area .snb ul li a { color: rgba(255,255,255,0.7); }
.main-page .header .top-area .snb ul li.on a { color: #fff; }
.main-page .header .gnb-wrap .wrapper .top-community > ul > li > a { color: rgba(255,255,255,0.85); }
.main-page .header .gnb-wrap .wrapper .top-community > ul > li:hover > a,
.main-page .header .gnb-wrap .wrapper .top-community > ul > li.on > a { color: #fff; }
.main-page .header .lang-select .lang-current { color: rgba(255,255,255,0.85); }
.main-page .header .hq-btn { border-color: rgba(255,255,255,0.3); color: rgba(255,255,255,0.85); background: transparent; }
.main-page .header .hq-btn:hover { border-color: #fff; color: #fff; }
.main-page .header .header-quick .profile-toggle { color: rgba(255,255,255,0.85); }

/* ======= MAIN HERO (index.html) ======= */
.main-hero { position: relative; width: 100%; height: 100vh; overflow: hidden; margin-top: 0; }
.main-hero-bg { position: absolute; inset: 0; }
.main-hero-video { width: 100%; height: 100%; object-fit: cover; }
.main-hero-img { width: 100%; height: 100%; object-fit: cover; display: none; }
.main-hero-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(26,26,46,0.7) 0%, rgba(26,26,46,0.3) 100%); }
.main-hero-content { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #fff; padding: 0 24px; z-index: 2; }
.main-hero-content h1 { font-size: 48px; font-weight: 800; margin: 0 0 12px; letter-spacing: 2px; }
.main-hero-content h1 span { color: #b2d459; }
.main-hero-content h2 { font-size: 20px; font-weight: 400; margin: 0 0 12px; line-height: 1.6; color: rgba(255,255,255,0.85); }
.main-hero-content p { font-size: 14px; color: rgba(255,255,255,0.5); line-height: 1.6; margin: 0 0 28px; }
.main-hero-btns { display: flex; gap: 12px; }
.main-hero-btn { padding: 12px 32px; border-radius: 10px; font-size: 14px; font-weight: 600; text-decoration: none; transition: all 0.2s; }
.main-hero-btn.primary { background: #b2d459; color: #fff; }
.main-hero-btn.primary:hover { background: #5dc3df; }
.main-hero-btn.secondary { background: rgba(255,255,255,0.15); color: #fff; border: 1px solid rgba(255,255,255,0.3); }
.main-hero-btn.secondary:hover { background: rgba(255,255,255,0.25); }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 767px) {
  .main-hero { height: 100vh; margin-top: 0; }
  .main-hero-video { display: none !important; }
  .main-hero-img { display: block !important; }
  .main-hero-content h1 { font-size: 32px; }
  .main-hero-content h2 { font-size: 16px; }
  .main-hero-btns { flex-direction: column; gap: 8px; }
  .main-hero-btn { text-align: center; }
}