@charset "big5";
@import "https://fonts.googleapis.com/earlyaccess/notosanstc.css";

body {
    box-sizing: border-box;
    font-family: "Noto Sans TC",微軟正黑體,Arial,Helvetica,heiti tc,SimHei,Microsoft JhengHei,serif;
    margin: 0;
    padding: 0;
    text-align: left;
	background: url("../images/bg_full.jpg") top center no-repeat fixed;
}
table {border: 0 none;border-collapse: collapse;margin: 0;padding: 0;}  
img {border: 0 none;}
h1, h2, h3, h4, h5, h6, ul, ol, li, p, div, blockquote, cite, em, tt, dfn { font-family:"Noto Sans TC",微軟正黑體,Arial,Helvetica,heiti tc,SimHei,Microsoft JhengHei,serif; font-weight: normal;margin: 0;padding: 0;}
dfn, strong, em {font-style: normal;}
li {list-style: outside none none;}
section a { cursor: pointer; outline: medium none; font-family: "Noto Sans TC","微軟正黑體",Arial,Helvetica,heiti tc,SimHei,Microsoft JhengHei,serif; display: block; color: black;}
a:hover{}
p{ text-align: justify;font-size: 1.6rem; line-height: 2rem;}

section{ width:100%; overflow: hidden; position: relative; margin:0 auto;}
.centerBox{ width:100%; max-width:1200px; overflow: hidden; position: relative; margin:0 auto; }
.fb-like{position:absolute; right: 20px; top:60px; z-index:9999;}
.mbOnly{ display:none;} .mbHide{ display:inline-block;}
h2{ width: 100%; margin-bottom: 40px; text-align: center;}

/*menu*/
.menu{ width: 140px; position: fixed; left: 10px; top: 150px; z-index: 999;}
.menu h4{ background:url("../images/menu_titlebg.png") center center no-repeat; color: white; font-weight: 600; font-size: 20px; text-align: center; height: 58px; line-height: 22px; padding-top: 7px; color: #fff301; }
.menu li{ width: 75%; margin: 0 auto; border-bottom: 1px solid white; background-color: #06a438; text-align: center;}
.menu li:nth-child(odd){ background-color: #4a76e8;}
.menu li:nth-child(2){ border-top: 2px solid white;}
.menu li:hover{ background-color: #313131;}
.menu li a{ width: 100%; color: white; font-size: 17px; line-height: 19px; padding: 8px 0; display: block;}
#menuM{ display: none;}

/*TOP*/
.top{ text-align: center; width: 100%; height: 800px; overflow: visible;}
.topM{ display: none;}
.top .centerBox{ height: 800px;}
.top h1{ position: absolute; top:35px; left: 40px;}
.top-pp3{ position: absolute; top: 385px; left: 47px;}
.top-gul{ position: absolute; top:250px; right: 43px;}
.top-copy1{ position: absolute; top: 423px; right: 46px;}
.top-copy2{ position: absolute; top: 461px; right: 425px;}
.top-bk3{ position: absolute; top: 187px; right: 455px; -webkit-animation:spin 4s linear infinite; -moz-animation:spin 4s linear infinite; animation:spin 4s linear infinite;}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
.top_case{ position: absolute; width: 448px; height: 194px; top: 52px; right: 45px; background: url("../images/top_case_bg.png") center center;}
.top_case a{ position: absolute; bottom: 0; width: 100%; height: 104px; background: url("../images/top_case.png") no-repeat; background-position: 0 0; }
.top_case a:hover{ background-position: 0 -104px;}
a.btn_ebk7{ position: absolute; top:636px; left: 64px; }
a.btn_ebk7:hover{animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;}
@keyframes shake {
10%, 90% { transform: translate3d(-1px, 0, 0);}
20%, 80% { transform: translate3d(2px, 0, 0);}
30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
40%, 60% { transform: translate3d(4px, 0, 0);}
}
/*firstwk*/
.firstwk{ padding: 30px 0 50px;}
.firstwk h2{ text-align: left; padding-left: 50px;}
.firstwk h2 img{ margin-right: 15px;}
.lmtFrame,.hotFrame{ width: 1160px; height: 1478px; margin: 0 auto; position: relative;}
.hotFrame{ width: 1180px; height: 1008px;}
.lmtFrame a,.hotFrame a { display: inline-block; position: absolute;}
.lmtFrame a:hover,.hotFrame a:hover{animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;}
	a.ch-prt1{ top:2px; left: 32px;}
	a.ch-prt2{ top:519px; left: 0;}
	a.ch-prt3{ top:485px; right: 22px;}
	a.eng-prt1{ top:38px; right: 0px;}
	a.cn-prt1{top: 962px; left: 406px;}
	a.mag-prt1{ top: 987px; left: 14px;}
	a.ebk-prt1{ top: 964px; right: 13px;}
	/*new-hot prt*/
	a.ch-prt4{ top:5px; left: 6px;}
	a.eng-prt2{ top:26px; right: 2px;}
	a.ch-prt5{ top:561px; left: 0px;}
	a.eng-prt3{ bottom:0px; left: 395px;}
	a.cn-prt2{right: 15px; bottom: 33px;}

/*sale*/
.sale{ padding: 30px 0 20px;}
.sale h2{ width: 100%; text-align: center;}
.sale h2 img.guang{ position: absolute; top: 25px; left: 578px; }
.saleFrame{}
.saleFrame ul{ width: 100%; position: relative; text-align: right; padding:20px 12px 20px 0; margin-bottom: 28px;}
	.saleFrame ul.saleBox-a{ background-color: #06a438;}
	.saleFrame ul.saleBox-b{ background-color: #6243fb;}
	.saleFrame ul.saleBox-c{ background-color: #ff278b;}
.saleFrame ul h3{ position: absolute; left: 0; bottom: 0; z-index: 0;}
.saleFrame ul li{ display: inline-block; margin-right: 12px; z-index: 1; position: relative;}
.saleFrame ul li a:hover{animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;}
/*classic*/
.classic{ padding: 30px 0 50px;}
.classic h2{ margin-bottom: 0;}
.classicList{ width: 100%;}
.classicList li{ width:calc(25% + 1.5px); display: inline-block; float: left; margin-left: -2px; border: 3px solid #aa7b4d; background-color: #f6f6f6; font-size: 30px; color: #aa7b4d; text-align: center; padding: 15px 0; font-weight: 600; cursor: pointer;}
.classicList li:first-child{ margin-left: 0;}
.classicList li:hover,.classicList li.here{ color: white; background-color: #aa7b4d;}
.classicBox{ width: 100%; position: relative; top: -3px;}
.classicBox li{ width: 100%; border: 3px solid #aa7b4d; background-color: #3d3d3d; overflow: hidden; display: none;}
.classicBox li a:hover{ transform: scale(.95);}
	.cl-ppl{ padding: 12px;}
	.cl-ppl h4{ color: #f9908d; font-size: 95px; width: 100px; margin-right: 30px; font-weight: 200; display: inline-block;}
	.cl-ppl a{ display: inline-block; margin: 13px;}
	.cl-list{ background-color: black; width: 66%; padding: 12px; float: left;}
	.cl-list h4{ color: #aa7b4d; font-size: 84px; width: 88px; margin-right: 23px; font-weight: 200; display: inline-block;}
	.cl-list a,.cl-intro a{ display: inline-block;}
	.cl-intro{ background-color: #6c6c6c; width: 34%; float: left; padding: 12px;}
	.cl-intro h4{ color: #ffc502; font-size: 84px; width: 88px; margin-right: 15px; font-weight: 200; display: inline-block;}

/*library*/
.library{padding: 30px 0 60px;}
.library h2{ background:url("../images/bg_title_library.png") left center no-repeat; text-align: right; width: 930px; height: 215px; margin: 0 auto; padding-top: 53px;}
ul.libFrame{ background:url("../images/matte_purple.png") right top no-repeat #06a438; width: 1105px; margin: 0 auto 50px; padding: 20px 20px 0; border:5px solid #374082; position: relative;}
ul.libFrame li{}
a.lib_left{ float: left; }
a.lib_right{ float: right; }
.slick-prev,.slick-next{ position:absolute; background-position:0 0; width:42px; height:84px; top: calc(50% - 42px); cursor:pointer; text-indent:99999px; background-color:transparent; border:none;}
.slick-prev{ left:-42px; background: url(../images/arw_prev.png) center center no-repeat;}
.slick-next{ right:-42px; background: url(../images/arw_next.png) center center no-repeat;}
.slick-dots{ text-align: center; position: absolute; width: 100%; bottom: -55px;}
.libFrame .slick-dots li{margin: 0 8px;padding: 0px;float: none;text-align: center;display: inline-block;text-indent: -9999px;cursor: pointer;width: 0;height: 0;border: 8px solid transparent;border-bottom-color: #374082;position: relative;top: -8px;}
.libFrame .slick-dots li:after {content: ''; position: absolute; left: -8px; top: 8px; width: 0; height: 0; border: 8px solid transparent; border-top-color: #374082;}
.libFrame .slick-dots li.slick-active {border-bottom-color: #06a438;}
.libFrame .slick-dots li.slick-active:after {border-top-color: #06a438;}
.libFrame .slick-dots li button{ text-indent: -9999px;}
/*note*/
.note{padding:0 0 30px;text-align: center;}
.note p{ text-align: center; font-size: 16px; line-height: 22px; color: black; margin-bottom: 15px;}
a.btn_note{ display: inline-block; width: 152px; height: 30px; background: url("../images/btn_note.png") no-repeat; background-position: 0 0;}
a.btn_note:hover{ background-position: 0 -30px;}

#copyright{font-weight: normal; color:black; display: block; font-family: Verdana,Geneva,sans-serif;font-size: 15px; height: 35px; line-height: 25px; overflow: hidden; text-align: center; width: 100%; position: relative; margin-top: 50px;}
.scrollup { display: none; position: fixed; right: 35px; bottom: 35px; border-radius: 50%; width: 55px; height: 55px; color: white; border: 1px solid white; font-size: 20px; line-height: 50px; text-align: center;}
.scrollup:hover{}
@media screen and (max-width: 736px) {
body {
	box-sizing: border-box;
	margin: 0;
	overflow-x: hidden;
	padding: 0;
	text-align: left;
	background:url("../images/bg_m.jpg") repeat;
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	box-sizing: border-box;
}
#header{ overflow:hidden;}
p{ font-size: 2rem; line-height: 2.4rem; }
a:hover{ margin-top:0px; transform: scale(1);}
.mbOnly{ display:block;} .mbHide{ display:none;}
.fb-like { right: 10px; top: 60px;}

section{ width: 100%; max-width:736px;}
.centerBox{width: 100%; max-width:736px;}
/*menu*/
.menu{ display: none;}
#act-header-full.clearfix{ z-index:9999999999; position:relative}
#menuM{ position: fixed; width:100%; top:0%; height:55%; background-color:#ff2488; z-index:999;overflow:hidden; transition: top 0.5s; display: block;}
#menuM.upmenuM{top:calc(-55% + 50px); transition: top 0.5s;}
.menuopen{ width:100%; background-image:url("../images/menu_btnclose.png"); height:50px; bottom:0px; position:absolute; background-repeat:no-repeat; background-position:center center; }
#menuM.upmenuM .menuopen{background-image:url("../images/menu_btnall.png");}
.menuopen, .closmenu{ cursor: pointer}
#menuM ul h4{ text-align: center; color: #fff301; font-weight: 600;font-size: 40px; padding-bottom: 15px; border-bottom: 5px solid white;} 
#menuM ul{ left: auto; width:100%; position: relative; list-style:none; margin:25px auto 0em auto; }	
	#menuM ul li{ padding: 15px 0;}
	#menuM ul li:nth-child(odd){ background-color: #6647f1;}
	#menuM ul li a{ display:block; font-size: 40px; color: white;text-align: center; font-weight: 600;}
	
.top{display: none;}
.topM { display: block; width: 100%; max-width:736px; height: 708px; position: relative; background: url("../images/top_bgM.jpg") center top no-repeat;}
a.top_caseM{ position: absolute; left: 14px; top: 310px;}
a.btn_ebk7m{ position: absolute; right: 10px; bottom: 20px;}
.firstwk{ padding: 30px 0 0;}
.firstwk h2{ text-align: center; padding-left: 0;}	
.firstwk h2 img{ max-width: 47%;}
.lmtFrame,.hotFrame{ width: 100%; height: auto; text-align: center;}
.lmtFrame a,.hotFrame a{ position: relative; left: auto; right: auto; top: auto; bottom: auto; margin: 0 10px 25px;}
.saleFrame ul{ width: 95%; margin: 0 auto 30px; border-radius: 25px;}
.saleFrame ul li{ width: 30%; margin-bottom: 15px;}
.saleFrame ul li:last-child{ margin-right: 18%;}
.classicList{ width: 95%; margin: 0 auto;}
.classicList li{ width: 50%; margin-left: 0;font-size: 40px;}
.classicBox{ width: 95%; margin: 0 auto;}
.cl-ppl h4,.cl-list h4{ width: 100%; text-align: center; padding: 10px 0; margin-bottom: 10px; font-size: 80px;}
.cl-ppl a{ max-width: 45%;}
.cl-ppl a:last-child{ display: none;}
.cl-list{ width: 100%; text-align: center;}
.cl-intro{ width: 100%; float: none; text-align: center;}
/*library*/
.library h2 { background: url(../images/bg_title_library.png) center bottom no-repeat; text-align: center; width: 100%; height: 370px; padding-top: 0;}
.library h2 img{ margin-bottom: 8px;}
ul.libFrame{ width:90%; padding: 0px; background: rgb(6,164,56); background: linear-gradient(180deg, rgba(6,164,56,1) 60%, rgba(55,64,130,1) 60%);}
ul.libFrame li{ text-align: center;padding: 20px;}
a.lib_left,a.lib_right{ float: none; display: inline-block;}

	
#copyright { line-height:20px; height:auto; font-size:11px; margin:0 auto; padding: 15px 0;}
.scrollup {bottom: 25px;display: none;opacity: 1; position: fixed; right: 5px; text-align:center; z-index: 999;}
}