@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;}

.cleardiv {clear:both;}

#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:30px; color:#444; letter-spacing:6px !important; box-sizing:border-box; padding:0px 20px; margin-bottom:15px; font-weight:normal;}


/*------------- index -------------*/
.bnr_con {display:block; width:728px; position:relative; margin:auto;}
.bnr_con a {display:block; width:100%; position:relative; margin-bottom:20px;}
.bnr_con a img {width:100%; height:auto;}



/*------------- tintrouge_book -------------*/
h1.booktitle {font-size:40px; text-align:center; margin:20px auto; font-weight:normal;}

.color_tab a {display:inline-block; width:18px; height:18px; position:relative; border-radius:50px; border:1px solid #E2E1E3; margin:0px 6px;}
.color_tab a.active {border:1px solid #444;}
.color_tab a span {display:block; width:12px; height:12px; border-radius:50px; margin:3px auto;}

.owl-carousel .owl-nav button.owl-prev {position:absolute; top:-35px !important; left:220px !important; font-size:30px !important; height:30px !important; line-height:30px !important;}
.owl-carousel .owl-nav button.owl-next {position:absolute; top:-35px !important; right:220px !important; font-size:30px !important; height:30px !important; line-height:30px !important;}

.color_book {display:block; width:100%; max-width:728px; margin:15px auto; background:white;}

.tintrouge_book {position:relative;}
.tintrouge_book .lt_mdl {display:inline-block !important; vertical-align:top; width:50% !important; height:auto;}

.tintrouge_book .rt_make {display:inline-block; vertical-align:top; margin-left:1%; width:46%; height:auto; position:relative;}
.tintrouge_book .rt_make img.rt_mdl {width:100%; height:auto;}
.tintrouge_book .clr_title {text-align:center; font-size:20px; line-height:40px; font-style:italic; margin:10px auto;}
.tintrouge_book .clr_title font {font-size:30px;}
.tintrouge_book .clr_title_mb {display:none;}
.tintrouge_book .mk_sub {font-size:15px; text-align:center; margin:15px auto; text-decoration:underline;}
.tintrouge_book .mk_info {font-size:16px; line-height:20px; text-align:center; font-family:'Noto Sans TC','微軟正黑體','Microsoft Jhenghei',sans-serif; font-weight:300;}
.tintrouge_book .mk_lnk {display:block; font-size:16px; text-align:right; margin:20px auto; position:relative;}
.tintrouge_book .mk_lnk::before {
    content: "";
    display: block;
    position: absolute;
    right: 0px;
    top: 46%;
    width: 6px;
    height: 6px;
    margin: -2px 0 0 0;
    padding: 0;
    transform: rotate(45deg);
    transition: all 0.3s ease-out;
    border: 1px solid black;
    border-color: black black transparent transparent;
}
.tintrouge_book .rt_item {position:absolute; right:-20px; top:20%; width:110px !important; height:auto;}

.dn_lnk {display:block; position:relative; box-sizing:border-box; padding:20px; width:90%; max-width:500px; margin:auto;}
.dn_lnk a {display:block; background:white; box-sizing:border-box; padding:10px 20px; position:relative; margin-bottom:2px;}
.dn_lnk a span, .dn_lnk a p {display:inline-block; vertical-align:middle;}
.dn_lnk a span {width:25%;}
.dn_lnk a p {width:60%; margin-left:10%; font-size:16px; font-weight:400; color:#444;}
.dn_lnk a img {width:80px; height:auto;}
.dn_lnk a::before {
    content: "";
    display: block;
    position: absolute;
    left: 10px;
    top: 53%;
    width: 6px;
    height: 6px;
    margin: -7px 0 0 0;
    padding: 0;
    border: 2px solid #444444;
    border-color: #444444 #444444 transparent transparent;
    transform: rotate(-135deg);
    transition: all 0.3s ease-out;
}



/*------------- makeup_book -------------*/
.makeup_book {position:relative;}
.makeup_book .make_lt, .makeup_book .make_rt {display:block; width:50%; float:left; box-sizing:border-box; position:relative;}
.makeup_book .make_rt {padding:20px 5px 10px 5px;}

.makeup_book .lt_mdl {display:block; position:relative; box-sizing:border-box; padding:20px 6px 10px 20px;}
.makeup_book img.model {display:block; width:100%;}
.makeup_book img.gel {display:block; width:23%; height:auto; position:absolute; bottom:-30px; left:0px; z-index:3;}
.makeup_book img.palette {display:block; width:32%; height:auto; position:absolute; bottom:0px; left:10%; z-index:3;}

.makeup_book span.sub {display:table; font-size:15px; text-align:center; margin:5px auto;}
.makeup_book p.color {font-size:18px; line-height:30px; text-align:center;}

.makeup_book .howto {display:block; position:relative; padding:12px 6px 10px 20px; box-sizing:border-box;}
.makeup_book .howto > div {display:block; width:100%; height:100%; box-sizing:border-box; padding:10px;}
.makeup_book p.how_t {margin-left:-15px; font-size:18px; letter-spacing:3px !important;}
.makeup_book p.tag {display:block; width:50%; height:28px; font-size:15px; line-height:28px; padding-left:5px; color:white; margin:10px 0px 0px -15px;}
.makeup_book p.info {font-size:15px; line-height:28px; margin:10px 0px 0px 0px;}

.makeup_book .rt_blck {display:block; border:1px solid black; margin-top:10px; margin-bottom:40px;}
.makeup_book .edition {display:table; height:35px; font-size:18px; line-height:35px; text-align:center; border:1px solid black; background:white; margin:-17px auto 10px auto; padding:0px 20px;}

.makeup_book .pdsub, .makeup_book .pdstep {display:inline-block; vertical-align:middle; width:45%; margin:15px 1%;}
.makeup_book .pdsub {font-size:14px; text-align:left; color:#444; border-bottom:1px dotted #222; padding-bottom:8px; margin-bottom:10px;}
.makeup_book .pdstep img {margin-bottom:10px; margin-top:-10px;}
.makeup_book .pdstep p {font-size:12px; line-height:20px;}
.makeup_book .pdstep p.steps {text-align:left;}
.makeup_book .pdstep p.item {background:#995853; color:white; margin-bottom:10px;}

.makeup_book .lip_point {display:block; width:95%; margin:auto; position:relative; margin-bottom:10px; box-sizing:border-box; padding:20px;}
.makeup_book .lip_point p {font-size:14px; line-height:26px; text-align:center;}
.makeup_book .lip_point p:first-child {display:table; line-height:20px; margin:0px auto 10px auto;}

.makeup_book span.sub1 {color:#995853; border-bottom:1px solid #995853;}
.makeup_book span.sub2 {color:#AE7771; border-bottom:1px solid #AE7771;}
.makeup_book span.sub3 {color:#8B6150; border-bottom:1px solid #8B6150;}
.makeup_book span.sub6 {color:#8F7267; border-bottom:1px solid #8F7267;}

.makeup_book p.color1, .makeup_book p.ifo1 {color:#995853;}
.makeup_book p.color2, .makeup_book p.ifo2 {color:#AE7771;}
.makeup_book p.color3, .makeup_book p.ifo3 {color:#8B6150;}
.makeup_book p.color6, .makeup_book p.ifo6 {color:#8F7267;}

.makeup_book .howto > div.htdv1, .makeup_book .pot1 {background:#EBDEDD;}
.makeup_book .howto > div.htdv2, .makeup_book .pot2 {background:#EFE4E3;}
.makeup_book .howto > div.htdv3, .makeup_book .pot3 {background:#E8DFDC;}
.makeup_book .howto > div.htdv6, .makeup_book .pot6 {background:#E9E3E1;}

.makeup_book p.tg1, .makeup_book .pdstep p.itm1 {background:#995853;}
.makeup_book p.tg2, .makeup_book .pdstep p.itm2 {background:#AE7771;}
.makeup_book p.tg3, .makeup_book .pdstep p.itm3 {background:#8B6150;}
.makeup_book p.tg6, .makeup_book .pdstep p.itm6 {background:#8F7267;}

.makeup_book .lip_point p.lippt1 {color:#995853; border-bottom:1px solid #995853;}
.makeup_book .lip_point p.lippt2 {color:#AE7771; border-bottom:1px solid #AE7771;}
.makeup_book .lip_point p.lippt3 {color:#8B6150; border-bottom:1px solid #8B6150;}
.makeup_book .lip_point p.lippt6 {color:#8F7267; border-bottom:1px solid #8F7267;}

.makeup_book a {color:black; transition: all 0.3s ease-out;}
.makeup_book a:hover {color:#cc0000;}
.makeup_book a:hover img {opacity: 0.85; transition: all 0.3s ease-out;}



@media screen and (max-width:768px) {
	
    .bnr_con {width:100%;}
    .bnr_con a img {display:block; width:95%; margin:auto;}

    .tintrouge_book .lt_mdl, .tintrouge_book .rt_make {display:block;}
    .tintrouge_book .clr_title_mb {display:block; text-align:center; font-size:20px; line-height:40px; font-style:italic; margin:15px auto;}
    .tintrouge_book .clr_title_mb font {font-size:30px;}
    .tintrouge_book .lt_mdl {width:100% !important;}
    .tintrouge_book .rt_make {width:100%; margin:20px auto 0px auto;}
    .tintrouge_book .rt_make img.rt_mdl {width:90%; margin:auto;}
    .tintrouge_book .clr_title {display:none;}
    .tintrouge_book .rt_item {right:0px; top:12%;}
    .tintrouge_book .mk_lnk {text-align:center;}
    .tintrouge_book .mk_lnk::before {right:20%;}

    .dn_lnk a p {font-size:14px;}

    .makeup_book .make_lt, .makeup_book .make_rt {float:none; width:100%;}
	
}