/* CSS Document */
@import url(font-awesome/css/font-awesome.min.css);

body {	-webkit-text-size-adjust:100%; margin:0; text-align:center; font-family:"微軟正黑體", "Arial", sans-serif; font-size:15px; color:#000000; line-height:24px; letter-spacing:1px; background:url(../images/bg.jpg) no-repeat top center; background-attachment:fixed; background-size:cover; }
img {	border:0; }

/* Reset ================================================================================= */

a { text-decoration:none; color:#000000;
-webkit-transition: all 0.4s ease-out 0s;
-moz-transition: all 0.4s ease-out 0s;
transition: all 0.4s ease-out 0s; }
a:hover {	color:#000000; text-decoration:none; }

* { margin:0; padding:0; list-style:none;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */}

.main-Box, .top-Box, .menu-Box, .banner-Box, .content-Box, .content2-Box, .footer-Box, .copyright-Box { max-width:1300px; margin:0 auto; text-align:left; position:relative; clear:both;}

.after-0:after { clear:both; display:block; content:""; height:0; text-indent:-99999px;}
.after-5:after { clear:both; display:block; content:""; height:5px; text-indent:-99999px;}
.after-10:after { clear:both; display:block; content:""; height:10px; text-indent:-99999px;}
.after-15:after { clear:both; display:block; content:""; height:15px; text-indent:-99999px;}
.after-20:after { clear:both; display:block; content:""; height:20px; text-indent:-99999px;}


.logo { position:absolute; z-index:10000; display:inline-block; top:27px; left:23px;}
ul.menu { text-align:right; padding:94px 23px 0 0;}
ul.menu li { display:inline-block; background:url(../images/nav-line.png) no-repeat top right; line-height:37px;}
ul.menu li:last-child { background:none;}
ul.menu li > a { display:block; padding:0 40px 0 13px; text-align:center; color:#000000; font-size:18px; letter-spacing:10px; font-weight:bold;}
ul.menu li > a:hover, ul.menu li > a.current { color:#ab1600;}
ul.menu li:last-child a { padding-right:0;}
ul.menu li a img { display:inline-block; vertical-align:top; padding-top:8px;}
ul.menu li a img:nth-of-type(2) { display:none;}
ul.menu li a:hover img:nth-of-type(2) { display:inline;}
ul.menu li a:hover img:nth-of-type(1) { display:none;}
.m_menu { display:none;}

#content { padding:55px 23px 0px 23px;}
h1 { letter-spacing:10px; font-size:18px; font-weight:normal; display:inline-block; vertical-align:top; width:calc(50% - 5px);}
h1:after { content:""; width:24px; height:2px; background:#000; margin:20px 0; display:block;}
.path { display:inline-block; vertical-align:top; text-align:right; width:calc(50% - 5px); color:#646464; font-size:13px;}
.path a { color:#000;}
.path a:hover { color:#000; text-decoration:underline;}
.path span { display:inline-block;}

/*products*/
.main-pro {}
.pro-left img, .pro-center img, .pro-right img { width:100%;
-webkit-transition: all 0.4s ease-out 0s;
-moz-transition: all 0.4s ease-out 0s;
transition: all 0.4s ease-out 0s;}
.pro-left { float:left; width:calc(24.95% - 18px); margin-right:18px; background:#000; position:relative; overflow:hidden; line-height:0;}
.pro-center { float:left; width:75%; }
.pro-center li { position:relative; background:#000; overflow:hidden; line-height:0; float:left; width:calc(33.333% - 18px); margin-right:18px; margin-bottom:18px;}
.pro-center li:nth-of-type(3), .pro-center li:nth-of-type(5) { margin-right:0}
.pro-center li:nth-of-type(4) { width:calc(66.666% - 18px);}
.pro-left:hover img, .pro-center li:hover img { opacity:0.35;  filter: alpha(opacity=35);
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
transform: scale(1.1);}
.pro-name { position:absolute; z-index:10; width:100%; text-align:center; top:calc(50% - 25px); font-size:30px; color:#fff; line-height:150%; opacity:0;  filter: alpha(opacity=0);
-webkit-transition: all 0.4s ease-out 0s;
-moz-transition: all 0.4s ease-out 0s;
transition: all 0.4s ease-out 0s;}
.pro-name:after { content:""; display:block; width:90px; height:1px; background:#fff;  margin:18px auto 0 auto;}
.pro-left:hover .pro-name, .pro-center li:hover .pro-name { opacity:1;  filter: alpha(opacity=100);} 

/*brush*/
.main-content { background:#fff; border-top:4px solid #5e5c5d; border-bottom:4px solid #5e5c5d; padding:50px 0;}
.brush-list { padding:0 30px;}
.brush-list li { display:inline-block; vertical-align:top; width:calc(14.285% - 5px); text-align:center; padding-bottom:35px;
-webkit-transition: all 0.4s ease-out 0s;
-moz-transition: all 0.4s ease-out 0s;
transition: all 0.4s ease-out 0s;}
.brush-list-pto { line-height:0; border:5px solid #fff;
-webkit-transition: all 0.4s ease-out 0s;
-moz-transition: all 0.4s ease-out 0s;
transition: all 0.4s ease-out 0s;}
.brush-list-name { padding:5px 10px; font-size:14px; line-height:150%; color:#646464; text-align:center;}
.brush-list-name span { display:block; font-size:18px; padding-bottom:6px;}
.brush-list li:hover { opacity:0.65;  filter: alpha(opacity=65);}

.brush-b { display:inline-block; vertical-align:top; width:calc(50% - 5px); text-align:center;}
.brush-content { display:inline-block; vertical-align:top; width:calc(50% - 5px);}

/*ink*/
.ink li { display:inline-block; vertical-align:top; width:calc(50% - 5px); position:relative; padding-left:20px;}
.ink li i { position:absolute; font-size:13px; top:11px; left:0;}


/*about*/
.about-box { margin:0 auto; max-width:600px; padding-bottom:40px; padding-top:20px;}
.about-box b { font-size:30px; line-height:150%;}
.about-map iframe { width:100%; border-width:6px 0; border-style:solid; border-color:rgba(0,0,0,.65); height:400px;}

/*order*/
.order-box { padding:25px;}
.title01 { font-size:18px; line-height:130%; margin-bottom:25px; color:#fff; background:#5e5c5d; padding:8px;}
.order-process { text-align:center; position:relative; margin-bottom:30px;}
.order-process li { display:inline-block; vertical-align:top; width:calc(33.333% - 5px); padding:0 10px 0 10px; color:#333; text-align:left;}
.title02 { font-weight:bold; position:relative; padding-bottom:20px; color:#000; font-size:16px; text-align:center; margin-bottom:15px;}
.title02:after { content:""; display:inline-block; position:absolute; bottom:0; left:0; width:100%; height:3px; background:#000;}
.order-process a { text-decoration:underline; color:#ce0000;}
.order-process a:hover { text-decoration:none; color:#000;}
.order-process span { display:inline-block;}
.order-icon { text-align:center;}
.order-icon > span { display:inline-block; margin:10px 0; border-radius:100%; width:50px; height:50px; text-align:center; background:rgba(0,0,0,.55); color:#fff; line-height:56px;}
.order-icon > span i { font-size:30px; color:#fff;}


@media only screen and (max-width: 1010px) {
.brush-list li { width: calc(16.666% - 5px);}	
}

@media only screen and (max-width: 990px) {
.logo { width:135px; top:20px; left:10px;}
ul.menu{ display:none;}
.m_menu{ display:block; position:absolute; height:46px; overflow:hidden; z-index:9999; margin-bottom:10px; text-align:right; right:0; width:100%; border-bottom:0px solid rgba(255,255,255,.3); top:50px; }
.m_menu.active{ }
.m_menu a.main{ display:block; padding:0 15px; font-size:15px; color:#000; line-height:18px; font-family:Abel;  height:50px;  font-weight:bold;}
.m_menu a.main i{ font-style:normal; font-family:Abel, FontAwesome; padding-right:3px; display:inline-block; font-size:30px; padding-top:3px; font-weight:bold;}
.m_menu ul.nav{ background:rgba(255,255,255,.9); margin-top:0px; border-top:1px solid rgba(0,0,0,.1);}
.m_menu ul.nav li { text-align:left; font-family:Abel; font-weight:bold;}
.m_menu ul.nav li > a { color:#000; display:block; padding: 12px 16px; font-size:18px; border-bottom:1px solid rgba(0,0,0,.1); }
.m_menu ul.nav li a img:nth-of-type(2) { display:none;}
.m_menu ul.nav li > a:hover, .m_menu ul.nav li > a.current { color:#ab1600; }

#content { padding-top:130px;}
.pro-left { float:left; width:calc(24.83% - 18px); }

}

@media only screen and (max-width: 768px) {
h1, .path { width:100%;}
h1:after { margin:10px 0;}
.path { text-align:left;}
.pro-left { width:100%; margin-right:0; height:300px}
.pro-left img { position:absolute; top:calc(50% - 400px);}
.pro-center { width:100%; margin-right:0; padding-top:18px;}
.pro-center li { margin:0 9px 18px 9px !important}
.pro-left img, .pro-center li img { opacity:0.55;  filter: alpha(opacity=50);}
.pro-name { opacity:1;  filter: alpha(opacity=100);} 
.brush-b, .brush-content { width:100%;}
.brush-list li { width: calc(33.333% - 5px);}	
.order-process li { width:100%; padding-bottom:35px;}
}
@media only screen and (max-width: 640px) {
.brush-list li { width: calc(50% - 5px);}	
}
@media only screen and (max-width: 570px) {

}

@media only screen and (max-width: 414px) {
.pro-left img { position:absolute; top:calc(50% - 250px);}
.pro-center li { margin:0 0 18px 0 !important; width:100% !important;}
}

@media only screen and (max-width: 320px) {
.brush-list li { width: 100%;}	
.ink li { width:100%;}
}