@charset "UTF-8";
/* CSS Document */


* {margin:0px; padding:0px;}

@font-face {
	font-family: 'Daniela';
	src:url('../images/fonts/Daniela_Bold.woff') format("woff"),
		url('../images/fonts/Daniela_Bold.ttf') format("truetype"),
		url('../images/fonts/Daniela_Bold.eot') format("embedded-opentype");
}

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500&display=swap');

body, html {position:relative; font-size:16px; font-family:'Noto Sans TC','微軟正黑體','Microsoft Jhenghei',sans-serif; font-weight:300; overflow-x:hidden; background:#e2e1e3;}
a, input, button {text-decoration:none; outline:none !important;}
a:hover, a:focus, a:active {text-decoration:none; cursor:pointer !important; outline:none !important;}
ul, li {list-style:none;}

#wrapper {margin-top:50px;}

.cats {display:block; margin:15px 0px 8px 0px; position:relative; box-sizing:border-box; padding:0px 20px;}
.cats a {display:inline-block; font-size:14px; color:#444; font-weight:400; margin-right:3px;}
.cats a::after {
    content: "";
    display: inline-block;
    width: 4px;
    height: 4px;
    margin: 2px 5px;
    padding: 0;
    border: 1px solid #444444;
    border-color: #444444 #444444 transparent transparent;
    transform: rotate(45deg);
}

h1.pagename {font-size:40px; color:#444; letter-spacing:6px !important; box-sizing:border-box; padding:0px 20px; margin-bottom:15px; font-weight:normal;}

h2.seriesname {font-size:20px; color:black; box-sizing:border-box; padding:0px 20px; margin-bottom:10px; font-weight:normal; letter-spacing:5px !important;}
h2.seriesname2 {font-size:25px; color:black; text-align:center; box-sizing:border-box; padding:0px 20px; margin-bottom:10px; font-weight:normal; letter-spacing:5px !important; margin-top:100px;}

.pd_goods {display:block; background:white; position:relative; margin-bottom:10px;}
.pd_goods a {display:inline-block; width:30%; margin:0px 1%; position:relative; vertical-align:top;}
.pd_goods a img {width:100%; height:auto;}
.pd_goods a p {display:block; font-size:14px; line-height:18px; color:#444; text-align:center; font-weight:400; border-top:1px dotted #aaa; margin-bottom:20px; padding-top:10px;}

.other {background:white;}
.other h3 {font-size:16px; text-align:center; color:#666; font-weight:700; padding:10px 0px;}

.other .pd_goods {border-bottom:2px solid #e2e1e3; margin-bottom:0px;}



/* ---------- 產品內頁 ---------- */
#pd_page {width:100%; position:relative; background:white;}

#pd_page .page_title {display:block; width:100%; box-sizing:border-box; padding:10px 20px; border-top:1px solid #d2d2cc;}
#pd_page .page_title p.main {font-size:16px; text-align:center; font-weight:500; color:#444;}
#pd_page .page_title p.sub {font-size:15px; text-align:center; font-weight:400; color:#444;}

#pd_page .color_tab {display:block; position:relative; box-sizing:border-box; padding:20px;}
#pd_page .color_tab a {display:inline-block; width:34px; height:34px; vertical-align:middle; box-sizing:border-box; border:2px solid white; border-radius:100px; margin:0px 9px; position:relative;}
#pd_page .color_tab a.active {border:2px solid #d2d2cc;}
#pd_page .color_tab a span {display:block; width:20px; height:20px; border-radius:100px; margin-top:5px;}
#pd_page .color_tab a p.limit {display:block; position:absolute; top:-25px; left:9px; font-size:12px; color:red;}
#pd_page .color_tab a.new::before {
    content: url(../images/new.svg);
    display: block;
    position: absolute;
    left: 50%;
    top: 100%;
    width: 30px;
    height: auto;
    margin: 7px 0 0 0;
    padding: 0;
    transform: translateX(-50%);
    z-index: 10;
}

#pd_page .flexslider {display:block; margin:auto; width:90%; max-width:680px;}
#pd_page .flex-control-thumbs {width:60%; margin:auto; margin-top:15px;}

#pd_page .flex-direction-nav a {top:93%; font-size:0px; opacity:1;}

#pd_page .flex-direction-nav .flex-prev {left:15%;}
#pd_page .flex-direction-nav .flex-next {right:15%;}

#pd_page .flex-direction-nav a:before {content: " ";
    display: block;
    position: absolute;
    width: 8px;
    height: 8px;
    left: 50%;
    top: 50%;
    margin: -4px 0 0 -8px;
    padding: 0 0 1px 1px;
    overflow: hidden;
    border-top: 1px solid #231815;
    border-right: 1px solid #231815;
    transition: all 0.2s ease-in-out;
    transform-origin: center center;
    transform: rotate(-135deg);}

#pd_page .flex-direction-nav a.flex-next:before {content: " ";
    display: block;
    position: absolute;
    width: 8px;
    height: 8px;
    left: 50%;
    top: 50%;
    margin: -4px 0 0 -8px;
    padding: 0 0 1px 1px;
    overflow: hidden;
    border-top: 1px solid #231815;
    border-right: 1px solid #231815;
    transition: all 0.2s ease-in-out;
    transform-origin: center center;
    transform: rotate(45deg);}

#pd_page .flex-control-thumbs img {opacity:0.3;}
#pd_page .flex-control-thumbs .flex-active {opacity:1;}

#pd_page .color_name {padding:20px; position:relative;}
#pd_page p {font-size:16px; font-weight:500;}
#pd_page .price {text-align:right;}

#pd_page .online_to_buy {position:relative; background:black;}
#pd_page .online_to_buy a {display:block; float:left; box-sizing:border-box; height:50px; text-align:center; font-size:18px; line-height:50px; color:white; font-weight:400;}
#pd_page .online_to_buy a:first-child {width:33%; border-right:1px solid black;}
#pd_page .online_to_buy a:nth-child(2) {width:34%; border-right:1px solid black;}
#pd_page .online_to_buy a:nth-child(3) {width:33%; float:right;}
#pd_page .online_to_buy a img {height:50px; width:auto; vertical-align:middle;}

#pd_page p.info {font-size:15px; line-height:20px; padding:40px 20px; font-weight:500; color:#444; /*border-bottom:2px solid #e2e1e3;*/}

#pd_page p.font_dan {display:block; font-size:26px; padding:20px; font-style:italic; position:relative; color:black;}
#pd_page p.font_dan::before {
    content: "";
    display: block;
    position: absolute;
    right: 15px;
    top: 50%;
    width: 6px;
    height: 6px;
    margin: -7px 0 0 0;
    padding: 0;
    border: 2px solid #ffffff;
    border-color: #444444 #444444 transparent transparent;
    transform: rotate(45deg);
    transition: all 0.3s ease-out;
}

#pd_page .stylebook {position:relative; width:100%; border-top:2px solid #e2e1e3;}
#pd_page .stylebook .img {display:block; width:100%; overflow-x:auto; -ms-overflow-style: none;}
#pd_page .stylebook .img::-webkit-scrollbar {
    display: none;
}
#pd_page .stylebook .img2 img {width:100%;}

#pd_page .information {position:relative; border-top:2px solid #e2e1e3;}
#pd_page .information .opn_mor {display:block; box-sizing:border-box; width:100%; position:relative; text-align:center; font-size:16px; font-weight:500; padding:15px 20px; color:#444;}
#pd_page .information .opn_mor .arrow {position:absolute; right:20px; top:20px;}
#pd_page .information .opn_mor:hover {cursor:pointer;}

#pd_page .information .mor_block {display:block; width:100%; box-sizing:border-box; position:relative; padding:20px 20px 40px 20px;}
#pd_page .information .mor_block li {font-size:15px; line-height:24px; color:#444; list-style:circle; margin-left:20px;}

#pd_page .information .mor_block .pdname {font-size:15px; line-height:24px; color:#444; font-weight:500; text-align:left; margin-bottom:15px;}
#pd_page .information .mor_block .ingredient {font-size:14px; line-height:22px; color:#444; text-align:left; font-weight:300;}
#pd_page .information .mor_block .owl-dots {display:none;}

#pd_page .information .mor_block .differ{display: flex;justify-content:space-between;}
#pd_page .information .mor_block .differ li{width:30%;list-style:none;margin:0}
#pd_page .information .mor_block .differ li img{width:100%;display:block;}
#pd_page .information .mor_block .differ li p{text-align: center;font-weight: normal;}




@media screen and (max-width:768px) {

    #pd_page .color_tab a {width:6.5vw; height:6.5vw; margin:0px 5px; position:relative; border:1px solid whtie;;}
    #pd_page .color_tab a.active {border:1px solid #d2d2cc;}
    #pd_page .color_tab a span {width:4vw; height:4vw; margin:0px; position:absolute; top:50%; left:50%; -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);}

    #pd_page .flexslider {width:80%;}
    #pd_page .flex-direction-nav .flex-prev {left:10%;}
    #pd_page .flex-direction-nav .flex-next {right:10%;}

    #pd_page .online_to_buy a {font-size:16px;}
    #pd_page .online_to_buy a img {height:28px;}

    #pd_page .page_title p.main {font-size:15px;}
    #pd_page .page_title p.sub, #pd_page p, #pd_page p.info, #pd_page .information .opn_mor, #pd_page .information .mor_block li, #pd_page .information .mor_block .pdname, #pd_page .information .mor_block .ingredient {font-size:14px;}

    #pd_page p.info {padding:20px;}
    #pd_page .information .mor_block .pdname {margin-bottom:10px;}

    #pd_page .stylebook .img img {height:65vw; width:auto;}
	
}