@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;500;700&display=swap');
/* 共用設定 */
:root{
    --primary: #303030;
    --primary-dark: #000;
    --secondary: #999;
    --secondary-dark: #777;
    --danger: #ff3131;
    --body: #303030;
    --body-font-size: 14px;
    --body-font-weight: 400;
    --body-line-height: 20px;
    --body-bg: #d7dcdf;
    --font-text: "Roboto", "Noto Sans TC", '微軟正黑體', 'Microsoft JhengHei', 'Arial', sans-serif;

    --radius: 3px;
    --transition: all 0.3s;
}

/****************************************************************************** common ******************************************************************************/
html, body	{ background-color: var(--body-bg); font-family:var(--font-text); font-size:var(--body-font-size); color:var(--body); line-height:var(--body-line-height);}
html, body, .mp-pusher {
    height: 100%;
}
body.discroll{ overflow-y: hidden; position: fixed;}

/* 連結 */
a:link 		{ font-size:var(--body-font-size); line-height:var(--body-line-height); color:var(--body); text-decoration: none;}
a:visited 	{ font-size:var(--body-font-size); line-height:var(--body-line-height); color:var(--body); text-decoration: none;}
a:hover 	{ font-size:var(--body-font-size); line-height:var(--body-line-height); color:var(--pic-color-grey-90); text-decoration: none;}
a:active 	{ font-size:var(--body-font-size); line-height:var(--body-line-height); color:var(--pic-color-grey-90); text-decoration: none;}

/* 按鈕 */
.jooshop_btn_color>input, .jooshop_btn_color>a { color: #fff; border: 0;}
.jooshop_btn_color>input:hover, .jooshop_btn_color>a:hover { background-color: var(--primary-dark);}
.jooshop_btn_color2>input, .jooshop_btn_color2>a { background: var(--secondary); color: #fff; border: 0;}
.jooshop_btn_color2>input:hover, .jooshop_btn_color2>a:hover { background-color: var(--secondary-dark);}

.FOR_TOP { 
    width:100%; height:auto;
    position: relative;
    z-index: 9999;
}
.FOR_MAIN{width:100%; padding-top:60px; padding-bottom: 50px;}
.FOR_FOOTER {
    display: none;
}
.main_content_left, .main_content_right{display:none;}
.main_content_l_center, .main_content_no_center, .main_content_center{width:100%;}

.Page_Litem_title{position: relative; text-align: center; margin: 0 auto 10px; width: calc(100% - 20px);}
.L_item_name{ font-size: 20px; font-weight: 500; line-height: 25px; text-align: center; display: inline-block; z-index: 1; position: relative; padding: 0 15px;}

/****************************************************************************** header ******************************************************************************/
.mp-pusher { position: relative; left: 0; height: 100%; width: 100vw;}
.header_box { 
    width:100%;
    display: flex; 
    justify-content: space-between;
    align-items: center; 
    position:fixed;
    z-index: 1;
    top:0;
    left:0;
    right:0;
    padding: 8px;
    background: var(--White, #FFF);
    box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.10);
}
#index .header_box { 
    background: transparent; box-shadow: none;
    padding-left: 56px;
}
.header_menu { 
    display: bolck;
    width: 48px;
    height: 32px;
    border-radius: 10px 2px;
    border: 1px solid #2196F380;
    background: #FFF url(menu.svg) no-repeat center center;
}
.header_menu.active {
    background-image: url(menu_close.svg);
} 
.header_prev {
    display: bolck;
    width: 48px;
    height: 32px;
    border-radius: 10px 2px;
    border: 1px solid #2196F380;
    background: #FFF url(menu_prev.svg) no-repeat center center;
}
#index .header_prev { display: none;}

/* mask */
.menu-mask { background-color: rgba(0, 0, 0, 0.8); height: 100%; width: 100%; z-index: 9999; position: fixed; display: none;}
/* logo */
.header_box .header_logo { 
    width: 156px;
    height: 30px;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.header_box .header_logo a { 
    display:flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    color: var(--Grey-100, #2F2F2F);
    text-align: center;
    font-size: var(--Font-Font-M, 18px);
    line-height: 150%; /* 27px */
    letter-spacing: 0.9px;
}
#index .header_box .header_logo a { color: var(--White, #FFF);}
.header_box .header_logo img { 
    object-fit: contain; 
    width: 34px;
    height: 30px;
}
/* 會員選單 */
.header_box ul.header_mem_func { 
    display: none;
}
/* 搜尋 */
.header_box ul.header_mem_func > li.top_search > a{ background-image:url(search.svg);}
.header_box .Header_menu { 
    position:absolute; top:0px; left:5px; display:block; width:24px; height:60px; background:url(member_menu.svg) no-repeat center center; cursor:pointer;
}
.header_box .Header_cart_num{ position:absolute; top:18px; right:10px; display:block; width:25px; height:25px;text-align:center;font-size:15px; line-height:25px; color:#fff; -moz-border-radius: 100%; -webkit-border-radius: 100%; -khtml-border-radius: 100%; border-radius: 100%; font-weight:bold; background-color:#aa5b00;}
/* 搜尋展開 */
.search_open { position: fixed; width: 100%; height: 100%; left: 0; top: 0; background: rgba(0,0,0,.85); z-index: 9999; display: none; padding: 60px 20px 20px 20px; }
.search_open .keyord_title { display: block; padding-top: 15px; }
.search_open .search_keyord { width: 100%; height: auto; margin-top: 10px; }
.search_open .search_keyord a { display: inline-block; padding: 4px 8px; width: auto; font-size: 16px; font-size: 1rem; color: #fff; border: 1px solid #fff; text-decoration: none; margin-right: 10px; margin-bottom: 10px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; }
.search_open .search_close { background: transparent; border: none; display: block; height: 60px; position: fixed; top: 0; right: 0; width: 60px; z-index: 999; }
.search_open .search_close i { font-size: 24px; color: #fff; font-weight: bold; }
.search_open .search_box .search_bar { width: 100%; height: 45px; -moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; border: solid 1px #eaeaea; background-color: #fff; overflow: hidden; display: -ms-box; display: -moz-webkit-flex; display: -webkit-flex; display: -ms-flexbox; display: flex; }
.search_open .search_box .search_bar select { vertical-align: top; width: 90px; height: 45px; line-height: 38px; padding-left: 10px; border: 0; font-size: 15px; letter-spacing: 0.6px; color: #2f2f2f; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: linear-gradient(45deg, transparent 50%, #2f2f2f 50%),linear-gradient(135deg, #2f2f2f 50%, transparent 50%),transparent; background-position: calc(100% - 6px) calc(1em + 4px),calc(100% - 0px) calc(1em + 4px); background-size: 6px 6px,6px 6px; background-repeat: no-repeat; }
.search_open .search_box .search_bar select:focus { outline: none!important; -webkit-box-shadow: 0; box-shadow: 0; }
.search_open select:-moz-focusring { color: transparent; text-shadow: 0 0 0 #000; }
.search_open .pretty-select::-ms-expand { display: none; }
.search_open .search_box .search_bar input.search_bar_txt { vertical-align: top; width: calc(100% - 50px); height: 100%; border: 0; padding: 3px 0 3px 10px; font-size: 15px; letter-spacing: 0.75px; color: #2f2f2f; }
.search_open .search_box .search_bar input.search_bar_submit { vertical-align: top; width: 50px; height: 100%; background-image: url(search.svg); background-color: transparent; background-size: 26px; background-repeat: no-repeat; background-position: center center; border: 0; cursor: pointer; text-indent: -9999px;}
.search_open .search_box .search_bar input.search_bar_submit:focus { outline: none!important; -webkit-box-shadow: 0; box-shadow: 0; }
@media screen and (max-width: 940px) {
    .search_open .leftmenu_search li.search_keyword { width:90%; }
    .search_open .leftmenu_search li.search_btn { width: 10%; }
}
@media screen and (max-width: 560px) {
    .search_open .leftmenu_search li.search_keyword { width:85%; }
    .search_open .leftmenu_search li.search_btn { width: 15%; }
}
/* 購物車 */
.header_box ul.header_mem_func > li.top_cart{ position:relative;}
.header_box ul.header_mem_func > li.top_cart > a{ background-image:url(bag.svg);}
.header_box ul.header_mem_func > li.top_cart > span{ width:22px; height:22px; position:absolute; background:var(--secondary); font-size:12px; color:#fff; line-height:22px; text-align:center;border-radius:100%; right:0; top:8px; z-index: 1; transform: scale(.8);}
/* 漢堡公用 */
.mp-menu { 
    position: relative; 
    inset: 0;
    z-index: 1;
    width: 100%; 
    height: 100%; 
    background: #1C2F3E;
    pointer-events: none;
    opacity: 0;
    transition: all 0.3s ease;
}
.mp-menu.active{
    position: fixed; z-index: 10000;display: block;
    pointer-events: auto;
    opacity: 1;
}

body:not(#index) .mp-menu .header_box { 
    padding-left: 56px; 
}
#mp-pusher .mp-menu.active .header_box {
    background: #1C2F3E;
}
.mp-menu.active .header_box a {
    color: #fff;
}
.mp-level { 
    position: absolute; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    overflow-y: scroll;
    padding-top: 48px;
}
/* 大師一覽 */
.masters_list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 8px 16px 16px;
}
.masters_list li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: url(photo_bg.svg) no-repeat top 31px center/contain;
}
.masters_list li a img {
    width: 90%;
    padding-right: 8.8%;
    aspect-ratio: 82/119;
    object-fit: contain;
    object-position: bottom center;
    border-radius: 8px;
}
.masters_list li a > div {
    margin-top: -29px;
    width: 100%;
    aspect-ratio: 110/52;
    background: url(brush_name.png) no-repeat center/contain;
    padding-bottom: 3.5vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.masters_list li a > div p {
    color: var(--Grey-80, #595959);
    font-size: 10px;
    line-height: 100%; /* 10px */
    letter-spacing: 0.5px;
    text-align: center;
}
.masters_list li a > div p + p {
    color: #2196F3;
    font-size: var(--Font-Font-XS, 14px);
    letter-spacing: 0.7px;
    margin-top: 3px;
}
/* 會員資料 */
.mp-menu .header_mem_info{ background-color: rgba(0, 0, 0, .07); padding: 0 10px; height: 30px; display: flex; align-items: center;}
.mp-menu .header_mem_info span{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: calc(100% - 80px); display: inline-block; vertical-align: middle; color: var(--primary); margin-right: 5px;}
/* 評價 */
.mp-menu .header_spec_v2{border-bottom: 1px solid rgba(0, 0, 0, .1); padding: 0 10px; height: 30px; display: flex; align-items: center;}
.mp-menu .header_spec_v2 i{ font-size: 18px;}
/* 社群 */
.mp-menu ul.header_mem_func > li.top_facebook > a{background-image:url(fb.svg);}
.mp-menu ul.header_mem_func > li.top_ig > a{background-image:url(instagram.svg);}
.mp-menu ul.header_mem_func > li.top_line > a{background-image:url(line.svg);}
/* 會員 */
.mp-menu ul.header_mem_func > li.top_member > a{background-image:url(user.svg);}
.mp-linkBox {
    position: fixed;
    z-index: 9999;
    left: 2px;
    top: 8px;
    display: flex;
}
.mp-linkBox a {
    color: #2196F3;
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 15px;
    font-weight: 500;
    line-height: 100%; /* 15px */
    letter-spacing: 0.75px;
    padding: 8px;
    position: relative;
}
.mp-linkBox a + a::before {
    content: "";
    display: block;
    width: 1px;
    height: 15px;
    background-color: #2196F3;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}
/* 商品分類 */
.sort_item > h3.open{ background:#cf8a3a;}
.sort_item > h3.open a{ color: #fff!important; font-weight: bold;}
.sort_item{ width:100%;}
.sort_item h3{ display:block; width:100%; border-bottom: 1px solid #eee; overflow: hidden; position: relative; display: -ms-box; display: -moz-webkit-flex; display: -webkit-flex; display: -ms-flexbox; display: flex;}
.sort_item h3 a { text-decoration: none; outline: none; display: block; width: 100%; height: 100%; font-size: 15px; line-height: 20px; padding: 12px 15px;}
.sort_item h3 span{ display: block; width:50px; height: 100%; cursor: pointer; text-align: center;}
.sort_item h3 span i{ line-height: 45px; font-size: 24px;}
.sort_item .sort_item_2{background-color: #f5f5f5;}
.sort_item .sort_item_2 a{ padding: 12px 15px 12px 30px;}
.sort_item .sort_item_3{background-color: #e9e9e9;}
.sort_item .sort_item_3 a{ padding: 12px 15px 12px 45px;}
.sort_item .sort_item_3 h3{border-color: #ddd;}
/* 主選單&語系 */
.menu_item > h3.open{ background:#cf8a3a;}
.menu_item > h3.open a{ color: #fff!important; font-weight: bold;}
.menu_item{ width:100%;}
.menu_item h3{ display:block; width:100%; border-bottom: 1px solid #eee; overflow: hidden; position: relative; display: -ms-box; display: -moz-webkit-flex; display: -webkit-flex; display: -ms-flexbox; display: flex;}
.menu_item h3 a { text-decoration: none; outline: none; display: block; width: 100%; height: 100%; font-size: 15px; line-height: 20px; padding: 12px 15px;}
.menu_item h3 span{ display: block; width:50px; height: 100%; cursor: pointer; text-align: center;}
.menu_item h3 span i{ line-height: 45px; font-size: 24px;}
.menu_item .menu_item_2{background-color: #f5f5f5;}
.menu_item .menu_item_2 a{ padding: 12px 15px 12px 30px;}

body#product_trace_list span.new_member_tooltip-ja {padding-top: 9px;}
body#order_detail .poM_OrderP2_add h5 {padding: 0 10px;}

/****************************************************************************** main ******************************************************************************/

/* 905 */
.it905-default .iopen-mall-item-title{display: none;}

/* 925 */
.it925-carousel-box .it925-text{ background-color: rgba(255,255,255,.8) !important;}
.it925-carousel-box .it925-text h1{font-family: 'Zen Maru Gothic', serif; font-size: 26px !important; line-height: 30px !important;}

/* 928 */
#it928-default:before{ content:''; display:block; margin-top: -96px; height: 96px;}
.it928-left .it928-category li.active{ background: var(--primary) !important;}

/* it926 頁籤調整(含佈置頁)*/
/* 頁籤原始顏色 */
.it926-default .swiper-container .it926-sort-title,.it926-default .tabTit .swiper-pagination-bullet { background: var(--primary); color: #fff;}
.it926-default .swiper-container .tabTit .it926-sort-title a{ color: #fff;}
/* 頁籤選取顏色 */
.it926-default .swiper-container .it926-sort-title:first-child a.title,.it926-default .tabTit .swiper-pagination-bullet.swiper-pagination-bullet-active { color: #fff; background: var(--primary-dark); opacity: 1;}
/* 底下商品背景色 */
.it926-default .swiper-container-autoheight, .it926-default .swiper-container-autoheight .swiper-slide{ background: #fff;}

/* 版尾 */
.joo_normal_cr2{ background-color: #fff; color:#bbb;}

#product_search .jooshop_btn_color > input {padding: 0px;}

.btnArea > div input {height: 100%;border-radius: 0px;}
/****************************************************************************** admweb ******************************************************************************/

/* 佈置 */
#index .iopen-layout-center-content-inner .FOR_MAIN{ padding-top: 60px;}
.admweb-v2-layout-head .mp-level {padding-top: 0px;}


/* 會員註冊流程 */
.SB_MemberData_write,.SB_MemberFinal_in,.SB_MemberWitemTitle03 p,.SB_MemberWitemModify,#member_confirm .SB_MemberWitemSay,.SB_MemberFinal_in{font-family: "Noto Sans CJK TC", sans-serif;}
#member_into_00 .m_breadCrumbs,#member_into_01  .m_breadCrumbs,#member_into_02 .m_breadCrumbs,#member_into_check .m_breadCrumbs,#member_confirm .m_breadCrumbs,#member_lostpw .m_breadCrumbs{display: none;}

/* 進度條顏色 */
.cart_step_bg1, .cart_step_bg2, .cart_step_bg3, .cart_step_bg4{
    background-color: #FFF;
}
.all_scart_top .cart_step .font_color_01{
    border-bottom: 4px solid #2196F3;
}
.poM_Content,.it16_default .poM_Content_item16{
    border-radius: 10px;  
    border: 0;
}
.all_scart_top .cart_step .font_color_01:after{
    background-color: #2196F3;
}

/* 加入會員-會員條款 */
.poM_memberBtn01{
    background: unset;
    margin: 16px auto 0;
}

.it16_default.poM_Content{
    margin: 0 20px 15px;
}
.poM_memberBtn02{
    margin: 0 auto;
}

/* 填寫表單 */
.userInfo input[type="text"], .userInfo input[type="password"], .userInfo input[type="tel"],.poM_Content input{
    border: 0;
    border-radius: var(--Corner-Corner-M, 10px);
    background: linear-gradient(0deg, var(--Color-Blue-5, rgba(33, 150, 243, 0.05)) 0%, var(--Color-Blue-5, rgba(33, 150, 243, 0.05)) 100%), var(--White, #FFF);
    padding: var(--Space-Space-M, 8px) var(--Space-Space-L, 16px);
}
input[type="text"]:focus, input[type="password"]:focus, input[type="date"]:focus, input[type="email"]:focus, select:focus, textarea:focus {
    border: #2196F3 1px solid;
}

.poM_Content{
    padding: 16px 16px 24px;
    margin: 0 20px;
}
#member_into_00 .main_content_no_center,
#member_into_01 .main_content_no_center,
#member_into_02 .main_content_no_center,
#member_into_check .main_content_no_center,
#member_confirm .main_content_no_center,
#member_lostpw .main_content_no_center{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.poM_memberItem ul li{
    margin-bottom: 16px;
}


.ygg_RegisterS3{
    font-family: "Noto Sans CJK TC", sans-serif;
    font-size: 15px;
    font-weight: normal;
}

#member_into_02 .ygg_RegisterS3, #member_into_check .ygg_RegisterS3{
    padding: 0 20px;
}

.poM_memberTitle h5 {
    font-size: 20px;
    line-height: 50px;
    margin-left: 0;
    font-weight: 500;
    text-align: center;
}

#member_lostpw .poM_memberItem ul li,
.member_confirm .poM_memberItem ul li{
    margin-bottom: 0;
}

#member_login .m_breadCrumbs{ display: none;}

.jooshop_btn_color>input, .jooshop_btn_color>a, #btn_submit,.SB_MemberOpening_btn a{
    border-radius: var(--Corner-Corner-M, 10px) var(--Corner-Corner-XS, 2px)!important;
    background: #2196F3;
    color: var(--White, #FFF);
    font-family: "Noto Sans CJK TC";
    font-size: var(--Font-Font-M, 18px)!important;
    font-weight: 500!important;
    line-height: 40px!important;
    letter-spacing: 0.9px!important;
    height: 40px!important;
    text-align: center;
    padding: 0;
}
.jooshop_btn_color>input:hover, .jooshop_btn_color>a:hover{
    background: #2196F3;
}

.it16_default .it16_quicklogin_box{ display:none;}