﻿/* CSS Document */
 @charset "utf8";
/***all**/
h2{margin:0 auto 1em ;}
section:not(#banner){margin-bottom: 3em;}
/**banner**/
#banner{position: relative; min-height:300px;}
#banner{background: url(/Document/images/promote/p_sticker/banner_bg.png) no-repeat; padding-top: 120px;}
h1 img{margin: auto; display: block;}
h1 p {width: 0; height: 0; overflow: hidden; }
#banner .box, #banner .box img{width: 100%;}
#banner .img_s{display: none;}
#nav a:hover img{filter: brightness(.8) contrast(1.8) hue-rotate(10deg);}
/**nav**/
#nav .box{position: relative;}
#nav .box img{width: 100%;}
#nav .box a:nth-child(1){ -moz-box-sizing: border-box; box-sizing: border-box; padding-right:2.5px; }
#nav .box a:nth-child(2){ -moz-box-sizing: border-box; box-sizing: border-box; padding-left:2.5px;}
#nav .row:nth-child(1) img{margin-top: -87px;}
#nav .row:nth-child(2) img{margin-top: -87px;}
#nav .row:nth-child(3) img{margin-top: -87px;}
#nav .row:nth-child(3) a{width: calc(50% - 20px);}
#nav p{bottom: -50px;  left: 10px; height: 180px; font-size: 1.05em; line-height: 1.8em; color: #01678e; max-width: 530px; word-break: break-all;}
#nav p em{font-style: normal; font-weight: bold; font-size: 3.5em; margin-right: 5px}
/**名片型貼紙 V.S 數位造型貼紙**/
#sticker_tab{display: block; background: rgba(0, 186, 161, 0.14); padding:30px 0 30px;
-webkit-clip-path: polygon(7% 3%, 96% 0, 99% 100%, 0 95%);
clip-path: polygon(7% 3%, 96% 0, 99% 100%, 0 95%);
}
#sticker_tab h2{color: #9cc425;  font-size: 2.5em;}
#sticker_tab h2 img{margin: auto; display: block;}
#sticker_tab .row{padding: 0 45px; margin-bottom: 20px;}
#sticker_tab .row p{font-size: 1.3em; margin: auto;}
#sticker_tab .row>.box_b{display: flex; height: 126px; padding: 5px 8px; background: #efefef; margin: 30px 0 10px; width: 600px}
#sticker_tab .row>.box_b span{display: flex; height: 100%; background: #f7f8f8;text-align: center; line-height: 2em; width: 100%}
/**商品列表**/
.goods_list{margin: 3em 0;}
.goods_list>.box_b{width: 33.33333%; position: relative; padding:0 20px 0 2px; float: left; cursor: pointer;}
.goods_list>.box_b span{display: block; padding-left: 20px;}
.goods_list .item{width: 100%; padding: 10px 0 0; box-shadow:0 0 10px 2px #006b72; border-radius: 15px;}
.goods_list >.box_b h3{position: absolute; z-index: 5; color: #fff; top: 22px; font-size: 1.2em; font-weight: bold; left: 32px; font-style: oblique;}
.goods_list .item img{width: 100%;}
.goods_list>.box_b:before{display: block; content: ""; background: url("/Document/images/promote/p_sticker/goods_title_bg.png"); width: 234px; height: 52px; position: absolute; top:10px; left: 0; z-index: 3;}
.goods_list .item .box_b{background: #00a7b2; padding: 10px 15px; border-radius: 0 0 15px 15px;  margin-top: -30px; position: relative; height: 95px; margin-bottom: 30px; overflow: hidden;}
.goods_list .item p{color: #fff; text-align: justify; font-size: 0.95em; line-height: 18px;}

/**數位造型貼紙**/

#modeling_sticker>h2{width: 100%; margin-bottom: 30px;}
.modeling_list .row{ padding-right: 10px; margin-bottom: 3em;}
.modeling_list .box {background: #ccc; width: 100%; height: 237px;}
.modeling_list .box .f_l{background: url(/Document/images/promote/p_sticker/modeling_icon_w.png) 100%/auto; display: block; width: 270px; height: 237px; padding-left: 15px}
.modeling_list .box_top{ padding: 10px 0 15px; width: 175px; position: relative; border-bottom:2px solid #aaa;}
#modeling_sticker .box_top h3{font-size: 3.5em; color: #666; line-height: 1.2em; position: static; font-style: normal;}
#modeling_sticker .box_top svg{right: 0; bottom: 18px; position: absolute;}
#modeling_sticker .box_bottom p{position: static; color: #666; margin:5px 0 0; padding: 0; line-height: 1.5em;}
.modeling_list .box .f_r{width:660px; height: 100%; display: flex; align-items: center; justify-content: center;}
#modeling_sticker .goods_list .item .box_b{padding: 5px;}
#modeling_sticker .goods_list .item p{font-size: 0.75em} 
/**紋身貼紙**/
#tattoo .tattoo_about{margin-top: 3em}
#tattoo .tattoo_about .box_top{position: relative; width: 359px; display: block; margin: auto;}
#tattoo .tattoo_about .box_top img:nth-child(1){position: absolute; top: -40px; left: -50px;}
#tattoo .tattoo_about .box_top img:nth-child(2){display: block; background: #fa9c40; padding: 5px;}
#tattoo>.row>h3{margin: 3em 0 5em;}
#tattoo>.row>h3 p{line-height: 20px; width: 70%; float: left; margin-left: 10px; font-size: 2em; font-weight: bold; }
#tattoo .use_about .box{-moz-box-sizing: border-box; box-sizing: border-box;}
.use_about .box{float: left; margin-bottom: 3em;}
 .use_about .box span{display: block; margin: auto; width: 355px; height: 355px; position: relative; border: 10px solid #00a29a; }
.use_about .box span .ps_a{bottom: 0; left:0; width: 50px; height: 50px; display: block; background: #00a29a; text-align: center; line-height: 50px; padding: 7px 15px 0 0; border-radius: 0 100% 0 0; color: #fff; font-size: 1.8em; font-weight: bold;}
.use_about .box p{text-align: left; margin-top: 10px; font-size: 1.1em; padding: 0 5em; line-height: 2em;}
/**白墨介紹**/
.white_about .box{float: left; position: relative; padding-left: 10px; width: 33.33333%; calc(100%/3); -moz-box-sizing: border-box; box-sizing: border-box;}
.white_about .row .box:nth-child(1):after{ content: "+"; position: absolute; top: 45%; top:calc(50% - 10px);  right: 12%; font-size: 1.3em; font-weight: bold;}
.white_about .row .box:nth-child(2):after{ content: "="; position: absolute; top: 45%; top:calc(50% - 10px);  right: 12%; font-size: 1.3em; font-weight: bold;}
.white_about .box h3{text-align: center; padding-right: calc(100% - 186px); font-size: 1.2em; font-weight: bold;}
.white_about .row{margin-top: 3em;}
.white_about .row:nth-child(2) .box:after{content: ""}
.white_about .box span{display: block; height: 134px; margin: 10px 0 5px;}
.white_about .box:nth-child(1) p{padding-right: calc(100% - 186px);}
.white_about .box:nth-child(2) p{padding-right: calc(100% - 186px);}
.white_about .box:nth-child(3) p{padding-right: calc(100% - 318px);}
.white_about .box p{line-height: 1.3em;}

._time{width: 0;height: 0;overflow: hidden;}
