body {
	font-family: "Arial","Helvetica","微軟正黑體","Microsoft JhengHei","黑體","SimHei","儷黑 Pro","LiHei Pro Medium","蘋果儷中黑","Apple LiGothic Medium","新細明體","PMingLiU","細明體","MingLiU","標楷體","DFKai-sb","sans-serif" !important;
	font-size: 16px;
}
a:focus{outline: none;}
html, body {width: 100%; height: 100%;}
.modal-dialog {height: 100%; margin: 0 auto; }
#mainDiv{position:absolute;left:0px;top:0px;width:1230px;height:768px;}

.header{position: relative;margin-top: 20px;}
.header button{height: 50px;}
.header .logo img{width: 841px;}
.home_bg{position: absolute;top: 0;margin: 0 auto;  max-width: 1230px;height: 100%;}
.home_bg img{width: 100%;height: 100%;}

.main {position: relative;height: 80%;width: 90%;}
.e-book{position: relative;height: 85%;width: 100%;}
.class{position: relative;height: 85%;width: 100%;}

.copyright{right: auto;}
.copyright img{width: 40px;}
.fixed-bottom-right{position: fixed;bottom: 0;right:20px;}
.resource{width: 145px;}

.e-book .cont{margin-top: 15px;padding-top: 35px;background: url('../images/s_bg.png')no-repeat center top 0px;background-size: 90% 85%;}
.e-book .cont a{display: block;font-size: 42px;letter-spacing: 10px;font-weight: bold;padding: 0px 20px;color: #fff;margin-bottom: 18px;border-radius: 5px;box-shadow: 1px 1px 6px 2px #8a939b;}
.e-book .cont a:first-child{background-color: #009900;}
.e-book .cont a:first-child:hover{color: #fff;}
.e-book .cont a:not(:first-child){background-color: #ff6666;}
.e-book .cont a:not(:first-child):hover{background-color: #ffa800;text-decoration: none;}

.back {position: fixed;left: 15px;top: 16%;z-index: 10;}
.back a{background: #ff0000;color: #fff;font-size: 26px;padding: 3px 15px;display: block;border-radius: 5px;font-weight: bold;border: 2px solid #fff;}

.class .class_title{margin-top: 15px;padding-top: 35px;background: url('../images/s_bg.png')no-repeat center top 0px;background-size: 15% 80%;}
.class .class_title p{font-size: 46px; color: #fff;font-weight: bold; border-radius: 5px;box-shadow: 1px 1px 6px 2px #8a939b;}
.class .class_title p span{display: inline-block;padding:0 25px; background: #2cc733;}
.class .class_title p span:first-child{background: #009900;}
.class .cont{width: 90%; height: 52%;}
.class .cont a img{width:220px; }
.class .cont a:hover{text-decoration: none;}
.e-area.class .cont{width: 100%;}
.e-area.class .class_title.e-area_title p span{background: #3399ff;}

.book_img,.area_img{animation: book_i 6s infinite linear; }
.area_img{animation: area_i 6s infinite linear; }


.class .cont .ce{position: relative; width: 186px;background: #fff;padding: 15px 15px 1px 15px;border-radius: 10px;box-shadow: -1px 1px 4px 2px #b4b9bd;}
.class .cont .ce .div_b{position: absolute;width: 100%;height: 100%;top: 0;left: 0}
.class .cont .ce:hover .div_b{background: rgba(0, 0, 0, 0.42);border-radius: 10px;}
.class .cont .ce .div_c p{ position: relative;z-index: 1;}
.class .cont .ce:hover .div_c{ color: #fff;}
.div_c{padding: 10px 10px 0 10px;}

.c_rotate1{transform: rotate(-10deg);}
.c_rotate2{transform: rotate(15deg);}
.c_rotate3{transform: rotate(-6deg);}
.c_rotate4{transform: rotate(6deg);}


.c_rotate1 .div_c{background: #f8d1d3;color: #f74956;}
.c_rotate2 .div_c{background: #85cff2;color: #0058a7;}
.c_rotate3 .div_c{background: #f4a693;color: #bf3614;}
.c_rotate4 .div_c{background: #b4ddd5;color: #007169;}

.div_c img{margin-bottom: 10px;}
.div_c p{font-size: 18px;font-weight: bold;}

.class_s1{animation: class_s1_img 6s infinite linear; transform-origin: top;}
.class_s2{animation: class_s2_img 5s infinite linear; transform-origin: top;animation-direction:alternate;}

.class_x1{animation: class_x1_img 6s infinite linear; transform-origin: top;animation-direction:alternate;}
.class_x2{animation: class_x2_img 8s infinite linear; transform-origin: top;}

.book_img:hover,.class_s1:hover,.class_s2:hover,.class_x1:hover,.class_x2:hover{-webkit-animation-play-state: paused; animation-play-state: paused; }




@keyframes book_i {
	0%, 100% {margin-top: -10%;}
	20%      {margin-top: -5%;}
	40%      {margin-top: 0;}
	60%      {margin-top: 5%;}
	80%      {margin-top: 10%;}
}

@keyframes area_i {
	0%, 100% {margin-top: 10%;}
	20%      {margin-top: 5%;}
	40%      {margin-top: 0;}
	60%      {margin-top: -5%;}
	80%      {margin-top: -10%;}
}
@keyframes class_s1_img {
	0%, 100% {transform:rotate(-10deg);}
	30%      {transform:rotateX(45deg);}
	60%      {transform:rotateY(30deg); }
}

@keyframes class_s2_img {
	0%, 100% {transform:rotate(15deg);}
	30%      {transform:rotateY(30deg);}
	70%      {transform:rotateX(50deg); }
}


@keyframes class_x1_img {
	0%, 100% {transform:rotate(-6deg);}
	50%      {transform:rotateX(45deg);}
	80%      {transform:rotateZ(45deg); }
}

@keyframes class_x2_img {
	0%, 100% {transform:rotate(6deg);}
	40%      {transform:rotateX(50deg);}
	70%      {transform:rotateZ(20deg); }
}