@import url('https://fonts.googleapis.com/css?family=Mukta:600|Oswald|Roboto:500&display=swap');
.wrap { position: relative; overflow: hidden; }
.wrap .wrapBg { position: absolute; z-index: 1; }
.wrap .wrapBg img { max-width: inherit; }

/* diamond */
.wrap .wrapBg.diamond { width: 1728px; height: 1728px; background: #f9f9f9; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); transform: rotate(-45deg); top: -170px; right: -36%; }
.wrap .wrapBg.diamond.bottombox { width: 1467px; height: 1467px; bottom: -430px; top: auto; }

/* ribbon */
.wrap .wrapBg.ribbon { bottom: 715px; animation-name: fadeInLeft; -webkit-animation-name: fadeInLeft; }
.wrap .wrapBg.ribbon:before ,
.wrap .wrapBg.ribbon:after { position: relative; width: 120px; height: 100px; background: #ececec; display: block; -webkit-transform: skew(0, 50deg); -moz-transform: skew(0, 50deg); transform: skew(0, 50deg); z-index: 2; content: ""; }
.wrap .wrapBg.ribbon:after { margin-top: 46px; background: #dadada; -webkit-transform: skew(0, -50deg); -moz-transform: skew(0, -50deg); transform: skew(0, -50deg); z-index: 1; }
.wrap .wrapBg.ribbon.purplebox { bottom: 610px; left: -30px; animation-delay: 0.5s; -webkit-animation-delay: 0.5s; }
.wrap .wrapBg.ribbon.purplebox:before { width: 80px; height: 80px; background: #7d0a83; }
.wrap .wrapBg.ribbon.purplebox:after { margin-top: 15px; width: 80px; height: 80px; background: #4e0a54; }

/* webName */
.wrap .animationBox { -webkit-animation-name: fadeInLeft; animation-delay: 0.2s; -webkit-animation-delay: 0.2s; }
.wrap .wrapBg.webName { top: 320px; left: -260px; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); }
.wrap .wrapBg.webName font { font-family: 'Roboto', sans-serif; font-size: 8em; color: #e1e1e1; letter-spacing: 20px; }
.wrap .wrapBg.webName font:last-child { margin-left: 20px; color: #7f1084; }

/* logo */
.wrap .wrapBg.logo { bottom: -120px; left: -220px; -webkit-animation: wraplogo 2s infinite alternate ease-in-out; animation: wraplogo 2s infinite alternate ease-in-out; }
@keyframes wraplogo {
	0% { transform:scale(1); }
	100% { transform:scale(1.2); }
}
@-webkit-keyframes wraplogo {
	0% { transform:scale(1); }
	100% { transform:scale(1.2); }
}

/* wrapInfo */
.wrap .wrapInfo { position: relative; z-index: 2; }

/* aboutWrap */
#aboutWrap { overflow: hidden; background: url(/images/24/img-aboutDote.png) no-repeat 50% 80px; }
#aboutWrap >div { position: relative; float: left; width: 50%; z-index: 2; }

/* aboutWrap about */
#aboutWrap .about { position: relative; padding-top: 150px; margin-left: 130px; width: calc(50% - 130px); animation-name: fadeInLeft; -webkit-animation-name: fadeInLeft; animation-delay: 0.5s; -webkit-animation-delay: 0.5s; }
#aboutWrap .about .sTxt { position: absolute; top: 0; left: 50px; }
#aboutWrap .about .sTxt span { position: relative; width: 2px; height: 297px; background: #ececec; display: block; }
#aboutWrap .about .sTxt span:after { position: absolute; width: 2px; height: 79px; background: #ffae00; display: block; bottom: 0; left: 0; content: ""; }
#aboutWrap .about .sTxt p { margin: 150px 0 0 -147px; letter-spacing: 5px; color: #afafaf; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); }
#aboutWrap .about .info {padding: 0 80px 0 90px;}
#aboutWrap .about .info h2 ,
#news h2 ,
#bookWrap h2 { line-height: 110%; font-family: "Mukta", sans-serif, "微軟正黑體", "蘋果儷中黑", "Lucida Grande", "Arial", "Arial Narrow"; font-size: 40px; color: #373737; }
#aboutWrap .about .info h3 { position: relative; margin: 15px 0 30px; padding-bottom: 25px; font-weight: normal; font-size: 36px; color: #373737; }
#aboutWrap .about .info h3:after, #news p.top2:after, #bookWrap h2:after, #bookWrap ul li .info h3:before { position: absolute; width: 70px; height: 3px; background: #7f1084; display: block; left: 0; bottom: 0; content: ""; }

#aboutWrap .about .info article {margin-bottom: 24px;height: 240px;line-height: 200%;font-size: 15.5px;color: #373737;letter-spacing: 0px;}
#aboutWrap .about .info a.more { padding-bottom: 10px; border-bottom: 1px #969696 solid; display: inline-block; color: #373737; }

/* aboutWrap pictureBox */
#aboutWrap .pictureBox { padding: 80px 0 40px; text-align: center; animation-name: fadeInRight; -webkit-animation-name: fadeInRight; animation-delay: 0.5s; -webkit-animation-delay: 0.5s; }
#aboutWrap .pictureBox >div { margin: 0 20px; width: calc((100% / 3) - 50px); background-position: 50%; background-repeat: no-repeat; background-size: cover; display: inline-block; vertical-align: top; }
#aboutWrap .pictureBox .box1 { margin-top: 90px; background-image: url(/images/24/img-about01.jpg); -webkit-animation: picture1 2.5s infinite alternate ease-in-out; animation: picture1 2.5s infinite alternate ease-in-out; }
@keyframes picture1 {
	0% { margin-top: 90px; }
	100% { margin-top: 40px; }
}
@-webkit-keyframes picture1 {
	0% { margin-top: 90px; }
	100% { margin-top: 40px; }
}
#aboutWrap .pictureBox .box2 { margin-top: 180px; background-image: url(/images/24/img-about02.jpg); }
#aboutWrap .pictureBox .box3 { position: relative; background-image: url(/images/24/img-about03.jpg);  -webkit-animation: picture3 2.5s infinite alternate ease-in-out; animation: picture3 2.5s infinite alternate ease-in-out; animation-delay: .5s; -webkit-animation-delay: .5s; }
@keyframes picture3 {
	0% { margin-top: 0; }
	100% { margin-top: 50px; }
}
@-webkit-keyframes picture3 {
	0% { margin-top: 0; }
	100% { margin-top: 50px; }
}
#aboutWrap .pictureBox .box3 .flower { position: absolute; bottom: 0; right: -79px; }

/* aboutWrap abTxt */
#aboutWrap .abTxt { position: absolute; width: 100%; font-family: 'Roboto', sans-serif; font-size: 11em; text-align: center; letter-spacing: 20px; line-height: 100%; color: #fff; bottom: 0; z-index: 1; }

/* newsWrap */
#newsWrap { padding: 50px 0; }
#newsWrap .workframe { overflow: hidden; position: relative; z-index: 2; }
#newsWrap .newBg { position: absolute; top: -160px; left: 0; z-index: 1; }

/* ptBox */
#ptBox {position: absolute;padding-top: 30px;float: left;width: 32%;box-shadow: 24px 24px #7f1084;animation-name: fadeInUp;-webkit-animation-name: fadeInUp;}
#ptBox:before { position: absolute; width: 0; height: 0; border-style: solid; border-width: 0 126px 126px 0; border-color: transparent #ffae00 transparent transparent; display: block; top: 0; right: -55px; z-index: 2; content: ""; -webkit-animation: ptBoxt 1s infinite alternate ease-in-out;
 animation: ptBoxt 1s infinite alternate ease-in-out; }
@keyframes ptBoxt {
	0% { top: 0; }
	100% { top: 10px; }
}
@-webkit-keyframes ptBoxt {
	0% { top: 0; }
	100% { top: 10px; }
}

/* news */
#news ul{
    display: flex;
    padding-top: 200px;
}
#news ul li{
    width: 25%;
    display: flex;
    flex-direction: column;
}
#news {padding-right: 40px;float: right;width: calc(100% - 40px);animation-name: fadeInRight;-webkit-animation-name: fadeInRight;}
#news h2 { margin-top: 50px; text-align: right; font-size: 7em; color: #7f1084; text-transform: uppercase; }
#news p.top {position: relative;padding: 20px 0 0;text-align: right;font-size: 19px;color: #848484;letter-spacing: 1px;}
#news p.top:after { left: auto; right: 0; }
#news p.top2 {position: relative;padding: 0px 0 30px;text-align: right;font-size: 16px;color: #848484;}
#news p.top2:after { left: auto; right: 0; }
#news .slick-list { margin: 90px 0; }
#news ul .slick-track , #news ul li { -webkit-transition: none; -moz-transition: none; -ms-transition: none;  -o-transition: none; transition: none; }
#news .slick-list li { opacity: 0; }
#news .slick-list li.slick-active , #news >ul li.slick-track { opacity: 1 !important; }
#news ul li .timeM {position: relative;margin-top: 50px;text-align: center;line-height: 100%;font-family: 'Oswald', sans-serif;font-size: 65px;color: #7e2e90;z-index: 1;display: none;}
#news ul li.slick-center .timeM { margin-top: 0; color: #808080; }
#news ul li .newImg {position: relative;margin: -10px 10px 15px;background-position: 50%;background-repeat: no-repeat;background-size: cover;box-shadow: 0 0 10px #a6a6a6;z-index: 2;}
#news ul li .newImg:before { position: absolute; width: calc(100% - 12px); height: calc(100% - 12px); border: 1px #cecece solid; display: block; top: 6px; left: 6px; z-index: 3; content: ""; } 
#news ul li .newImg a { position: absolute; width: 100%; height: 100%; display: block; top: 0; left: 0; z-index: 4; }
#news ul li .newImg img { width: 100%; }
#news ul li .newImg .info {position: absolute;padding: 20px 36px;width: calc(100% - 72px);height: calc(100% - 40px);background: #fff;top: 0;left: 0;z-index: 2;display: flex;flex-direction: column;}
#news ul li .newImg .info .timeDY font { display: inline-block; font-family: 'Oswald', sans-serif; font-size: 18px; color: #5d5d5d; vertical-align: initial; }
#news ul li .newImg .info .timeDY font:first-child { margin-right: 10px; font-size: 50px; line-height: 150%; color: #cecece; }
#news ul li.slick-center .newImg .info .timeDY font:last-child { color: #fff; }
#news ul li.slick-center .newImg .info { background: none; }
#news ul li .newImg .info h3 {margin-bottom: 10px;/* height: 28px; */padding: 5px 0;border-bottom: 1px #b6b6b6 solid;font-size: 17px;color: #5d5d5d;-webkit-line-clamp: 1;}
#news ul li.slick-center .newImg .info h3 { color: #fff; }
#news ul li .newImg .info p {height: 40px;font-size: 12px;color: #aeaeae;-webkit-line-clamp: 2;}
#news ul li .newImg .info a.more {position: relative;display: flex;color: #ffae00;flex: 1;height: auto;align-items: flex-end;}
#news ul li .newImg .info a.more:before {position: absolute;width: 40px;height: 2px;background: #ffae00;bottom: 8px;right: calc(100% - 86px);content: "";}

 /* bookWrap */
#bookWrap { animation-name: fadeInUp; -webkit-animation-name: fadeInUp; }
#bookWrap .workframe { width: 1180px; }
#bookWrap h2 { position: relative; margin: 30px 0; padding-bottom: 20px; font-size: 36px; color: #373737; z-index: 3; }
#bookWrap ul { position: relative; z-index: 2; }
#bookWrap ul li { position: relative; margin: 0 10px; width: calc((100% / 3) - 25px); display: inline-block; vertical-align: top; }
#bookWrap ul li:nth-child(1) , #bookWrap ul li:nth-child(3n + 1) { margin-top: 90px; }
#bookWrap ul li:nth-child(3n) { margin-top: 50px; }
#bookWrap ul li .photo { position: relative; background-size: cover; z-index: 1; }
#bookWrap ul li .info { padding: 20px; position: absolute; width: calc(100% - 40px); background: rgba(69, 21, 79, .86); bottom: 0; left: 0; z-index: 1; }
#bookWrap ul li .info h3 { position: relative; padding-bottom: 15px; }
#bookWrap ul li .info h3:before { background: #fff; }
#bookWrap ul li .info h3 a { height: 28px; font-weight: normal; font-size: 20px; color: #fff; -webkit-line-clamp: 1; }
#bookWrap ul li .info a.more { overflow: hidden; margin-top: 0; height: 0; display: block; text-align: right; font-size: 12px; color: #fff; }
#bookWrap ul li:hover .info a.more { margin-top: 50px; height: auto; }
#bookWrap .bookTxt { position: absolute; width: 100%; font-family: 'Roboto', sans-serif; font-size: 11em; text-align: center; letter-spacing: 20px; line-height: 100%; color: #ededed; top: 30px; left: 0; z-index: 1; }

/* googleMap */
#googleMap { position: relative; overflow: hidden; margin: 70px auto 10px; width: 1180px; background: #fff; box-shadow: 0 0 10px #999; z-index: 5; }
#googleMap .row { position: relative; overflow: hidden; float: left; width: 450px; }
#googleMap .row #g-map { position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
#googleMap .row.info { float: left; width: calc(100% - 450px); }
#googleMap .row.info ul { overflow: hidden; margin: 50px 20px 0; }
#googleMap .row.info li { margin: 20px; display: inline-block; width: calc(50% - 50px); }
#googleMap .row.info li .icon { float:left; color:#7e0f83; width:50px; }
#googleMap .row.info li .icon i { font-size:30px; }
#googleMap .row.info li .txt { float:left; width:calc(100% - 50px); }
#googleMap .row.info li .txt p {color:#7e0f83;font-size: 16px;line-height:180%;font-weight:600;}
#googleMap .row.info li .txt .gray { color:#5a5a5a; }
#googleMap .row.info li .txt .gray a { color:#707071; }

/* footer */
footer { position: relative; margin-top: -130px; padding-top: 150px; z-index: 3; }

@media screen and (max-width: 1440px) {
	.wrap .wrapBg.webName font { font-size: 7em; }
	#aboutWrap .about { margin-left: 90px; width: calc(50% - 90px); }
	#aboutWrap .pictureBox >div { margin: 0 5px; width: calc((100% / 3) - 20px); }
	#ptBox { position: absolute; float: none; }
	#news {width: calc(100% - 0px);padding-right: 0;}
	#newsWrap .newBg { top: -120px;}
}
@media screen and (max-width: 1360px){
	#news ul{
    display: flex;
    flex-wrap: wrap;
}
	#news ul li{
	    width: 33.3%;
	}
}
@media screen and (max-width: 1280px) {
	#aboutWrap .about { margin-left: 90px; width: calc(60% - 90px); }
	#aboutWrap .pictureBox { width: 40%; }
	#aboutWrap .pictureBox >div { width: calc((100% / 2) - 20px); }
	#aboutWrap .pictureBox .box3 { display: none; }
	#bookWrap .workframe , #googleMap { width: 90%; }
}
@media screen and (max-width: 1120px) {
	#news h2 { font-size: 6em; }
}
@media screen and (max-width: 1024px) {
	#aboutWrap .about { width: calc(70% - 90px); }
	#aboutWrap .pictureBox { width: 30%; }
	#aboutWrap .pictureBox >div { width: calc(100% - 20px); }
	#aboutWrap .pictureBox .box2 { display: none; }
	#news h2 { font-size: 60px; }
	#news p.top { margin: 20px 0; font-size: 16px; }
	#googleMap .row { width: 360px; }
	#googleMap .row.info { width: calc(100% - 360px); }
	#googleMap .row.info ul { margin: 20px; }
}
@media screen and (max-width: 960px) {
	#aboutWrap .about { width: calc(100% - 90px); }
	#aboutWrap .abTxt ,
	#aboutWrap .pictureBox { display: none; }
	#ptBox { position: relative; width: calc(100% - 60px); }
	#news h2 { text-align: left; }
	#news p.top {margin: 0;padding: 13px 0;text-align: left;font-size: 15px;}
	#news p.top2 {text-align: left;}
	#news p.top:after { left: 0; right: auto; }
	#news .slick-list { margin: 50px 0; }
	#bookWrap ul li { width: calc((100% / 2) - 25px); }
	#bookWrap ul li:nth-child(1) , #bookWrap ul li:nth-child(3n + 1) { margin-top: 0; }
	#googleMap .row , #googleMap .row.info { width: 100%; }
	#news ul li{
	    width: 50%;
	}
	
}
@media screen and (max-width: 768px) {
	.wrap .wrapBg.webName { top: 180px; left: -190px; opacity: .6; }
	.wrap .wrapBg.webName font { font-size: 4em; }
	#aboutWrap .about .sTxt { left: 20px; }
	#aboutWrap .about .sTxt span { height: 147px; }
	#aboutWrap .about .sTxt span:after { height: 49px; }
	#aboutWrap .about { margin-left: 60px; padding-top: 60px; width: calc(100% - 60px); }
	#aboutWrap .about .info { padding: 0 40px; }
	#aboutWrap .about .info h2 , #news h2 , #bookWrap h2 {font-size: 37px;margin-top: 36px;}
	#aboutWrap .about .info h3 {font-size: 22px;margin: 15px 0 20px;}
	#news .slick-list li { opacity: 1; }
	#newsWrap .newBg {
	    top: 337px;
	}
}
@media screen and (max-width: 500px) {
	.wrap .wrapBg.webName { display: none; }
	#bookWrap ul li { margin-bottom: 20px; width: calc(100% - 25px); }
	#aboutWrap .about {margin-left: 0;width: 100%;padding-top: 40px;}
	#googleMap .row.info li { width: calc(100% - 50px); }
#aboutWrap .about .info article {margin-bottom: 24px;height: 340px;line-height: 200%;font-size: 14.5px;color: #373737;letter-spacing: 0px;}
#news p.top2 {
    position: relative;
    padding: 0px 0 30px;
    text-align: left;
    font-size: 13px;
    color: #848484;
}
#aboutWrap .about .info article {
    margin-bottom: 24px;
    height: 280px;
}
#googleMap .row.info li .txt .gray ,#googleMap .row.info li .txt .gray a {
    color: #5a5a5a;
    font-size: 13px;
}
	#news ul li .newImg{
	    padding: 32px 0;
	    margin: 8px 3px;
	}
	#news ul li .newImg .info{
	    padding: 10px;
	    width: calc(100% - 20px);
	    height: calc(100% - 20px);
	}
	#news ul li .newImg .info h3{}
}
@media screen and (max-width: 480px){
	#news ul li{
    width: 100%;
}
	#news ul li .newImg .info{
	    padding: 30px;
	    width: calc(100% - 60px);
	    height: calc(100% - 60px);
	    display: flex;
	    flex-direction: column;
	}
	#news ul li .newImg .info a.more{
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: flex-end;
}
}