@charset "utf-8";

@import url('https://fonts.googleapis.com/css?family=Cabin');

/*body {margin:0; padding:0; font-size:15px; line-height:180%; font-family:Arial, Helvetica, sans-serif,'微軟正黑體';cursor:url('../images/mouse.ico'),auto; background: url(../images/background.jpg); background-attachment: fixed;}*/
body {margin:0; padding:0; font-size:15px; line-height:180%; font-family:Arial, Helvetica, sans-serif,'微軟正黑體';cursor:url('../images/mouse.ico'),auto;}
*{box-sizing:border-box;}
a{text-decoration:none; transition:.2s;}
a:link, a:visited{color:#333;}
a:hover, a:active{color:#666;}
img{max-width:100%; height:auto;}
#footer, .content, .innerhtml, #header,.memberorderdetail,.copyright{float:left; height:auto; width:100%;}
.page{height:auto; position:relative; height:auto; margin:auto auto; padding:auto auto;}

/*header*/
#header{border-bottom:5px solid #8cc63f; background:#fff;}

.topblue table{width:100%;}
.topblue .page{width:100%;}
.toggle{cursor:pointer;}
.pop1{display:none;}
@keyframes flash{0%{color:#f00;}50%{color:#ccc;}100%{color:#f00;}}
a.changecolor{animation-name:flash;	animation-duration:1s;	animation-iteration-count:infinite;	}

.nav{height:auto; text-align:center; float:left;}
.nav ul{list-style: none; margin:0; padding:0; text-align:right;}
.nav > ul > li{display:inline-block; position:relative;}
.nav > ul > li > a{line-height:180%; display:block; padding:0.5em 2em; font-size:18px; border-bottom:2px solid #fff; border-right:2px dotted #ccc;}
.nav > ul > li > ul{position:absolute; width:100%; background:#fff; z-index: 300; box-shadow: 0 5px 10px rgba(0,0,0,0.3);}
.nav > ul > li > ul > li{display:block; text-align: center; border-bottom:1px dotted #efefef;}
.nav > ul > li > ul > li a{display:block;}
.nav > ul > li > ul > li a:hover{background:#efefef; color:#000;}
/*nav-m rainbow*/
.nav a{tansition:.3s;}
.nav > ul > li:nth-of-type(1) ul{border-top:6px solid #669933;}
.nav > ul > li:nth-of-type(2) ul{border-top:6px solid #ff9900;}
.nav > ul > li:nth-of-type(3) ul{border-top:6px solid #3399cc;}
.nav > ul > li:nth-of-type(4) ul{border-top:6px solid #ff6666;}
.nav > ul > li:nth-of-type(5) ul{border-top:6px solid #339999;}
.nav > ul > li:nth-of-type(6) ul{border-top:6px solid #ad58a6;}
.nav > ul > li:nth-of-type(1) > a{color:#669933;}
.nav > ul > li:nth-of-type(2) > a{color:#ff9900;}
.nav > ul > li:nth-of-type(3) > a{color:#3399cc;}
.nav > ul > li:nth-of-type(4) > a{color:#ff6666;}
.nav > ul > li:nth-of-type(5) > a{color:#339999;}
.nav > ul > li:nth-of-type(6) > a{color:#ad58a6;}
.nav > ul > li:nth-of-type(1):hover > a{background:#8cc63f; color:#fff;}
.nav > ul > li:nth-of-type(2):hover > a{background:#ff9900; color:#fff;}
.nav > ul > li:nth-of-type(3):hover > a{background:#3399cc; color:#fff;}
.nav > ul > li:nth-of-type(4):hover > a{background:#ff6666; color:#fff;}
.nav > ul > li:nth-of-type(5):hover > a{background:#339999; color:#fff;}
.nav > ul > li:nth-of-type(6):hover > a{background:#ad58a6; color:#fff;}
/*side bar*/
.fixedbtn{position:fixed; display:inline-block; background:rgba(0,0,0,0.7); top:60vh; right:0; z-index:400; padding:0.5em 0.5em 0.5em 0.5em; border-radius:1em 0 0 1em; text-align: center; color:#fff; box-shadow: 0 0 10px rgba(0,0,0,0.3); font-size:14px; transition:.3s;}

.fixedbtn div{display:inline-block; vertical-align: top;}
.fixedbtn a{display:block; width:48px; height:auto; padding:0.2em; border-radius:1em; color:#fff; margin:0;}
.fixedbtn a div{width:48px; height:48px; display:block; overflow: hidden; border-radius:0.5em;}
.fixedbtn a div img{width:48px; height:48px;}
.fixedbtn div.cart2{position:relative;}
.fixedbtn div.cart2 span{display:block; width:2em; height:2em; border-radius:100%; background:#333; color:#fff; position:absolute; right:3px; bottom:3px; font-size:9px; z-index: 300; line-height:2em; text-align: center;}
/*defaultimg*/
#defaultimg{overflow:hidden;}
#defaultimg{width:100%; height:auto; float:left;}
.marquee{width:100%; height:auto; float:left; background:#8cc63f; padding:0.3em 0;}

/*footer*/
#footer{background:#d4e591; color:#333; font-size:15px; padding:2em 0 3em 0; border-top:1px solid #efefef;}/*可改部份*/
#footer img{max-width:100%; height:auto;}
.footer-l,.footer-r{float:left; height:auto; font-size:13px; line-height:150%; padding-bottom: 10px;}
.footer-r{padding:0 0.5em;}
#footer a{height:auto; float:left; padding-top:0.5em;}
#footer a:hover{text-decoration:underline;}
#footer h4.subject{padding:1em 0; margin:0 0 1em 0; font-size:15px; border-bottom:1px solid #8cc63f; color:#4d4033;}
.copyright{border-top:1px solid #ccc; margin-top:1em;}
.websitename,.company{width:50%; height:auto;  color:#999; }

/*副選單-產品選單*/

.subnav h3{font-weight:normal;  padding:0.6em; color:#8cc63f; font-size:24px; margin:0; font-family: 'Cabin', sans-serif;}/*可改部份*/
.subnav h3 span{font-weight:normal; font-size:14px;}
#submenu{background:#fffbb7; display: block; float:left; padding:3px; border-radius:1em; width:100%;}
#submenu ul{width:100%; height:auto; height:auto; float:left; margin:0; padding:0; list-style:none;}

#submenu ul li a{display:block; width:100%; height:auto; float:left; margin:0; padding:5px 5px 5px 20px; line-height:150%; list-style:none; color:#000; font-size:14px;}
#submenu ul li a:hover{color:#5f5e14; background:#f8f8f8;}
#submenu ul li ul{width:100%; height:auto;}
#submenu ul li ul li a{font-size:14px; color:#333; padding-left:20px; padding-left:30px;}

/*default use*/

/*content*/
.side{height:auto;float:left; padding:1em;}
.main{min-height:500px; float:right; padding:1em;}
.main h3.tit{width:100%; height:auto; float:left; color:#666; font-weight:normal; font-size:18px; font-family:'微軟正黑體'; padding-left:0.5em; border-left:5px solid #ccc;}/*各頁大標圖專用*/
.innerhtml img{max-width:100%; height:auto;}
.innerhtml div{border:1px solid rgba(255,255,255,0);}/*youtube solution*/
.path{font-size:13px; color:#666; margin-top:0; }
.red, .memberOrderDetail .listblock span.red{color:#f00;}
.listblock{height:auto; float:left; padding:1em;}
.listblock img{max-width:100%; height:auto;}
.one{width:100%;}
.leftpic{width:100%; height:auto; float:left;  background:#fffbb7; padding:1em; border-radius:1em; margin-top:1em;}
.leftpic img{max-width:100%; height:auto;}
/*button*/
a.btn{padding:0.2em; background:#fff; border:1px solid #999; color:#999; border-radius:3px; display:inline-block; font-size:14px; margin-left:0.4em; line-height:100%;}
a.btn:hover{background:#999; color:#fff;}
a.btn1:link, a.btn1:visited{padding:0.5em 2em; line-height:200%; color:#fff; background:#666; border-radius:5px;  text-align:center; margin:0.3em; display:inline-block;}
a.btn1:hover, a.btn1:active{background:#333; color:#FC0;}
a.btn1.fb{padding:1em 2em; background-color:#3c5a98; font-family:Arial, Helvetica, sans-serif; font-size:19px; color:#FFF; }
a.btn1.fb:hover{background:#039;}
/*表單*/
input, select,textarea{border:1px solid #ccc; line-height:200%; height:30px; vertical-align:middle;}
.radiobtn{vertical-align:middle;}

/*最新消息*/
.news .listblock{text-align:left; cursor:pointer; font-size:14px; padding:1em; background:#fff;}
.news .listblock span.date{color:#666; width:6em; border-right:1px solid #efefef; color:#ff3d00; font-size:12px; float:left; margin:0; padding:0;}
.news .listblock section{width:calc(100% - 6em); float:left; padding:0 0.5em; margin:0;}
.news .listblock:hover{background:#F2F2F2; color:#960;}
.news .innerhtml{min-height:500px;}
.news .innerhtml h2.tit{color:#960;}
/*最新消息 series*/
.news .listblock div{border-radius:0 0 1em 1em; background:rgba(255,255,255,0.7); box-shadow:0 3px 5px rgba(0,0,0,0.3); color:#666; cursor:pointer;}
.news .listblock div.round{border-radius:1em; overflow:hidden;}
.series .listblock div{border-radius:1em; background:rgba(255,255,255,0.7); box-shadow:0 3px 5px rgba(0,0,0,0.3); color:#666; cursor:pointer; overflow:hidden; border:4px solid #8cc63f;}
.news .listblock span, .series .listblock span{color:#666; margin:0;}
.news .listblock h3,.series .listblock h3, .news .listblock p,.series .listblock p, .news .listblock span, .series .listblock span{padding:0 0.5em; }
.news .listblock h3,.series .listblock h3, .newscamp .listblock h3{font-weight:normal; color:#630; margin:0;}
.news .listblock p, .series .listblock p, .newscamp .listblock p{ line-height:150%; margin:0; padding-bottom:1em;}
/*.news .listblock span{background:#690; color:#fff;}*/
.news .listblock div:hover{color:#333;}
.news .listblock a,.newscamp a, .series a{color:#069;}
.news .innerhtml{min-height:500px;}
.news .innerhtml h2.tit{color:#960;}
.news .listblock p.summary,.newscamp .listblock p.summary{min-height:8.5em; display:block;}
.newscamp .listblock div.round{border-radius:1em; background:rgba(255,255,255,0.7); box-shadow:0 3px 5px rgba(0,0,0,0.3); color:#666; line-height:150%; padding:0.5em; cursor:pointer; float:left;}
.newscamp .listblock div.pic{width:40%; height:auto; float:left; padding:0 0.5em; border-radius:1em; overflow:hidden;}
.newscamp .listblock div.word{width:60%; height:auto; float:left; padding:0 0.5em;}
/*分校*/

.innerhtml.school ul{margin:0; padding:0; list-style: none;}
.innerhtml.school ul li{height:auto; display:inline-block; margin:0; padding:0.5em; box-sizing: border-box;}
/*dabout dnews*/

.dabout h3.subject, .news h3.subject{font-weight:normal; font-size:20px; margin-top:0;}
.dabout{border-right:1px solid #ccc;}
.dinfo .page{border-top:1px solid #ccc; margin-top:2em; display:table; padding:3em 0;}
/*default use*/
.defaultlist .listblock{border:1px solid rgba(0,0,0,0); transition:.3s; text-align:left; padding:1em;}
.defaultlist .listblock a:hover{transform:translateY(-5px); box-shadow:0 13px 10px rgba(0,0,0,0.2);}
.defaultlist .listblock a{display: block; background:#fff; padding:0.5em; box-shadow:0 0 5px rgba(0,0,0,0.2);}
.defaultlist .listblock p{width:100%; text-align:left; font-size:16px; margin:0; padding:0.5em 0;}
/*product list*/
.product .listblock{border:1px solid rgba(0,0,0,0); font-size:14px; line-height:1.5em; cursor:pointer; transition:.3s; }
.product .listblock a:hover{transform:translateY(-5px); box-shadow:0 13px 10px rgba(0,0,0,0.2);}
.product .listblock a{display:block; background:#fff; float:left; padding:0.5em; box-shadow:0 0 5px rgba(0,0,0,0.2);}
.product .listblock span.price{color:#f00;}
.product .listblock img{width:90%; height:auto;}
.product .listblock div.rr{width:60%; height:auto; text-align:left; float:right; padding:0 0 0 0.5em; margin:0; display:block;}
.product .listblock div.ll{width:40%; height:auto; overflow:hidden; float:left; border:1px solid #ccc; padding:0.3em;}
.product .listblock h3.tit{font-size:120%; margin:0 0 0.3em 0; font-weight: bold; color:#000;}
.product .listblock a:hover h3.tit{color:#669900;}
.product .listblock section{width:100%; height:5em; overflow:hidden; display:inline-block; float:right; position:relative; color:#666;}
.product .listblock section::before{content:""; width:100%; height:1.5em; display:block; position:absolute; bottom:0; left:0; background:linear-gradient(rgba(0,0,0,0), #fff);}
.product .listblock .addcart{display:inline-block; padding:0.3em 0.5em; color:#fff; background:#666;}
.product .listblock .addcart:hover{background:#ff9900;}
/*product_detail*/
.productDetail h2.tit, #productDetail h4.tit{font-family:"微軟正黑體"; color:#333;}/*產品名*/
.productDetail h4.tit{background:#efefef; font-size:15px; float:left; width:100%; height:auto; padding:0 0.5em; text-align:left;}/*產品介紹頁小標*/
.productDetail .listblock{height:auto;}
.ProSmallPicTop .listblock{width:25%; height:auto;}
.ProSmallPicBottom {width:100%; text-align:center; float:left;}
.productDetail select, .productDetail input{width:100%;}
.recommend{height:auto; float:left; text-align:center; padding:0.2em; overflow:hidden; display:block; font-weight:normal;} /*可改border*/
.recommend:hover{background:#EEEDE1;}
.recommend img{width:100%; height:auto;}
a.minus, a.add{width:30px; background:#fff; font-size:20px; color:#333; border:1px solid #CCC; line-height:28px; display:block; float:left; text-align:center;}
a.minus:hover, a.add:hover{background:#CCC; color:#666;}

#gallery{margin:0.5em 0;}
#gallery a{width:25%; height:auto; float:left; overflow:hidden; padding:0.2em;}
#gallery a img{}

/*會員中心*/
.memberOrderDetail div.listblock{padding:0.5em 0;}
.memberOrderDetail div.listblock.one:hover{background:#f6f6f6;}
.memberOrderDetail select{height:25px;}
.memberOrderDetail div.listblock span{color:#999;}
a.proname{color:#369;}
a.proname:hover{text-decoration:underline;}
/*check*/
.checkselect{border-radius:1em; border:1px solid #ccc; margin:1em 0;}
.checkselect:hover{background:#f6f6f6;}
.radioselect{border:1px solid #efefef; line-height:150%; font-size:13px; cursor:pointer; margin:1%;}
.radioselect:hover{background:#f6f6f6;}
/*聯絡我們*/
.contact span{font-weight:bold;}
.contact input{width:100%; height:30px;}
.contact iframe{width:100%;}
.contact textarea{width:100%; height:180px;}
/**/
.progress{padding:1em 0 2em 0;}
.progress h3{margin:0; color:#999;}
.progress .listblock{border:1px solid #efefef; line-height:150%; font-size:13px; border-radius:1em; margin:1%;}
.progress .listblock.three{width:31%;}
@media screen and (max-width:767px) {/*mobile*/
body{font-size:14px;}
/*visible*/
.BannerDivPc{display:none;}
.hide-m{display:none;}
.invisible{display:none;}
.page{width:100%;}
/*header*/
.topblue{position:fixed; float:right; top:0; right:0; z-index:300; width:100%; height:auto; text-align:right; margin:0; border-bottom:1px solid #ccc; background:rgba(255,255,255,0.8);}
.topblue table td{}
.topblue table td.leftmenu{width:35%;}
#logo{display:none}
#logom{width:40%; margin-left:30%; height:auto; float:left; text-align:center; padding-top:2.8em; padding-bottom:0.5em;}
#logo img{max-width:87%; height:auto;}
/*mobile and pad menu*/
.nav{width:100%; position:fixed; top:35px; left:0; z-index: 299; display: none;}	
.nav{height:auto; background:#fff; text-align:center; float:left;}
	.nav a{text-align:center;}
	.nav > ul > li{display:block; background:linear-gradient(#fff,#efefef);} 
	.nav > ul > li > ul {position:static; box-shadow:none; border-top:none;}
	.nav > ul > li > ul li a{font-size:14px; padding:0.3em;}
/*desktop menu hidden*/
.nav-m{display:none;}
/*submenu*/
#submenu{border:1px solid #ccc; background:#fff; border-radius:0.3em;}
.subnav{display:none;}
#submenu ul li a{border-bottom:1px solid #efefef;}
.subtoggle a{ text-align:left; color:#666; font-size:15px; padding:0 5px 0 5px; line-height:200%;}
.subnav h3{display:none;}

/*footer*/
.footer-l{width:100%; padding:5%;}
.footer-l a{width:33%;}
.footer-r{width:100%; padding:5%;}
.websitename{text-align:center; float:left;}
.company{text-align:center; float:right;}
.websitename,.company{width:100%;}
/*default use*/
.DefaultAD {width:100%; float:left; padding:15px 5px;}
.defaultlist{padding:0 2%;}
.defaultlist .listblock{width:50%;}
.defaultlist .listblock div{height:auto; background:none;}
.dinfo .subject{text-align:center;}
.dinfo .subject span{color:#999; font-size:13px; line-height:100%;}
.dinfo a.more{color:#999; font-size:12px; text-decoration:underline;}
.dinfo .page{padding-bottom:0;}
/*content*/
.side{width:100%; padding:1em 2%;}
.main{width:100%; padding:0 2%;}
.two{width:100%;}
.three{width:100%}
.four{width:100%;}
.leftpic{display:none;}
/*分校*/
.innerhtml.school ul li{width:90%;}
	/*product*/
	/*innerhtml iframe*/
	.innerhtml iframe{width:100%;}
/*product_detail*/
.productDetail .listblock div, .productDetail .listblock div.two{width:100%;}
.recommend{width:50%;}
/*會員中心*/
.memberOrderDetail div.listblock .three{width:33.3%;}
.progress .listblock{min-height:80px;}
}

@media screen and (min-width:768px) and (max-width:1199px) {/*pad*/
.BannerDivMobile{display:none;}
.hide-p{display:none;}
.invisible{display:none;}
.page{width:100%;}
/*header*/
#header .page{padding-bottom:0.5em;}
/*header*/

.topblue{position:fixed; float:right; top:0; right:0; z-index:200; width:auto; height:auto; text-align:right; margin:0; border-radius:0 0 0 1em; border-left:1px solid #ccc; border-bottom:1px solid #ccc; background:rgba(255,255,255,0.8);}
.topblue table td{width:25%;}
#logo{width:27%; height:auto; float:left; text-align:center; padding-top:.5em; padding-bottom:0;}
#logom{display:none}
/*desktop menu*/
.nav{width:73%; margin-top:4em;  float:left;}
	.nav > ul > li > a{padding:0.5em 1em;}


/*submenu*/
.subnav h3 span{display:none;}
.subtoggle{display:none;}
.subnav{display:block;}
.subnav a{text-align:left; }
/*footer*/
.footer-l{width:32%; padding:0 2em;}
.footer-r{width:34%; padding:0 2em;}
.footer-l a{width:50%;}
.websitename{text-align:right; float:left;}
.company{text-align:left; float:left;}
.websitename,.company{width:50%;}
/*defaultuse*/
.DefaultAD {width:33%; float:left; padding:15px 5px;}
.defaultlist .listblock div{width:100%; min-height:250px;}

/*content*/
.side{width:30%;   border-radius:1em; margin-top:1em;}
.main{width:70%;}
.two{width:50%;}
.three{width:33.3%}
.four{width:25%;}
	/*分校*/
.school  ul li{width:45%;}
/*product*/
.product .listblock{text-align:left;}
.product .listblock.two{width:100%;}
.product .listblock section{height:6em;}
.product .listblock h3.subject{font-size:150%;}
.recommend{width:50%;}
	/*innerhtml iframe*/
.innerhtml iframe{width:90%;}
/*product_detail*/
.productDetail div.listblock{width:100%; padding:0 5%;}
.ProSmallPicTop {width:90%; position:relative; margin:auto auto; padding-left:5px; display:none;}
.ProSmallPicBottom {width:100%; text-align:center; float:left;}
}
@media screen and (min-width:900px) and (max-width:1199px) {/*pad*/
.nav-m{margin-top:5em;}
.nav-m a{line-height:180%;  padding:0.5em 1.5em; font-size:16px; border-bottom:2px solid #fff; font-weight:bold; }
.product .listblock section{height:10em;}
}
@media screen and (min-width:1200px){/*desktop*/
.BannerDivMobile{display:none;}
.hide-d{display:none;}
.invisible{display:none;}
.msearch{display:none;}
.page{width:1200px;}
/*header*/

#header .page{max-width:1200px;}
.topblue{position:fixed; float:right; top:0; right:0; z-index:200; width:auto; height:auto; text-align:right; margin:0; border-radius:0 0 0 1em; border-left:1px solid #ccc; border-bottom:1px solid #ccc; background:rgba(255,255,255,0.8);}
#logo{width:27%; height:auto; float:left; text-align:left; padding-top:0.8em;}/*可改部份*/
#logom{display:none}
/*footer*/
.footer-l a{width:50%;}
.footer-l{width:25%; padding:0 2em;}
.footer-r{width:25%; padding:0 2em;}
.websitename{text-align:right; float:left;}
.company{text-align:left; float:left;}
.websitename,.company{width:50%;}
/*mobile menu*/
.toggle{display:none;}

/*desktop menu*/
.nav{width:73%; margin-top:4em;  float:left;}
.nav-m span{padding:0 1.5em; color:#ccc; font-size:10px; display:none;}
.nav-m p{margin:0 auto; padding:0; width:100%; position:relative;}
.nav-m a{line-height:180%; display:inline-block; padding:0.5em 2em; font-size:18px; border-bottom:2px solid #fff; border-right:2px dotted #ccc;}
.nav-m a:first-of-type{border-left:2px dotted #ccc;}
.nav-m a:hover{color:#5f5e14; background:linear-gradient(#fff,#efefef,#fff); transform:translateY(-5px);}
/*submenu*/
.subtoggle{display:none;}
.subnav{display:block;}
.subnav a{text-align:left;}

/*default use*/
.DefaultAD {width:33.2%; float:left; padding:15px 5px;}
.defaultlist .listblock div{width:100%; min-height:350px;}
/*content*/
.side{width:25%; border-radius:1em; margin-top:1em;}
.main{width:75%;}
.two{width:50%;}
.three{width:33.3%}
.four{width:25%;}
/*分校*/
.innerhtml.school ul li{width:33%;}
.ProSmallPicBottom {width:100%; text-align:center; display:none;}
.recommend{width:25%;}
/*innerhtml iframe*/
	.innerhtml iframe{width:70%;}
}