/* News */
#NewsBox{padding:100px 0;background-repeat:no-repeat;background-position:50% 50%;background-size:cover}
#NewsBox .speBox .titleSet{margin:0 100px}
#NewsBox .speBox .titleSet .speBoxTitle{font-weight: 400;font-size: 45px;color: #ffffff;line-height: 120%;font-family: 'Bebas Neue', cursive;letter-spacing: 5px;text-align: center;}
#NewsBox .speBox .titleSet .speBoxTitle b{color: #26a9df;font-weight: 400;}
#NewsBox .speBox .titleSet .subBoxTitle{color: #ffffff;line-height: 120%;font-size: 25px;margin-top: 5px;text-align: center;}
#NewsBox .speBox .titleSet .submore{text-align: center;}
#NewsBox .speBox .titleSet .submore a{font-weight: bold;color: #191919;font-size: 13px;transition: all linear .2s;text-transform: uppercase;background: #fff;padding: 15px 30px;display: inline-block;letter-spacing: 1px;}
#news{width: 90%;margin: 60px auto 0;}
#news .newsList >div{margin-bottom:35px}
#news .newsList .border{position:relative;overflow:hidden;padding: 20px;display: flex;align-items: center;}
#news .newsList .border a{position:absolute;display:block;width:100%;height:100%;left:0;top:0;z-index:5}
#news .newsList .photo{background-repeat:no-repeat;background-position:50% 50%;background-size:cover;width: 200px;height: 200px;margin-right: 50px;border-radius: 50%;}
#news .newsList .photo img{width:100%}
#news .newsList .news-info{width: calc(100% - 250px);}
#news .newsList .news-info p{font-size:14px;color: hsl(0deg 0% 100% / 37%);letter-spacing: 0.5px;}
#news .newsList .news-info h3{font-size: 20px;line-height: 150%;font-weight: 400;margin:7px 0 20px;color: #fff;transition:all linear .2s;overflow: hidden;height: 33px;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;}
#news .newsList .news-info .describe{color:#888;font-weight:400;font-size: 14px;position:relative;overflow: hidden;height: 48px;}
#news .newsList .news-info .describe h4{font-weight:400;width:calc(100% - 80px);max-height: initial;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;color: rgb(255 255 255 / 64%);font-weight: 200;letter-spacing: 0.5px;}
#news .newsList .more{position:absolute;right:0;top:0;padding-bottom:15px;font-size:13px;}
#news .newsList .more b{font-weight:400;color: #fff;opacity: 0;}
#news .newsList .more:after{content:'';display:block;position:absolute;left:21px;bottom:0;width:15px;height:1px;background: #ffffff;transform:rotate(35deg);transform-origin:center right;transition:all linear .2s;}
#news .newsList .more:before{content:'';display:block;position:absolute;left:6px;bottom:0;width:30px;height:1px;background: #fdfdfd;transition:all linear .2s;transition-delay:.2s;}
#news .newsList .slick-dots li button:before{color: white;}


/* aboutFunc */
#aboutFunc{background: #191919;background-size: cover;background-repeat: no-repeat;background-position: 50% 50%;padding: 110px 0 50px;position: relative;}

#aboutFunc .speBox{margin: 0 auto;overflow: hidden;width: 90%;display: flex;align-items: center;justify-content: center;z-index: 10;position: relative;}
#aboutFunc .youtubebox{width: 40%;margin-right: 5%;box-shadow: 1px 5px 40px 0px rgb(0 0 0 / 50%);}
#aboutFunc #about-slide{width: 55%;color:#fff;position: relative;}
#SeoStarRating{display: none;}
#youtube{background-repeat:no-repeat;background-position:50% 50%;background-size:cover;height:100%}
#youtube .UTwo{position:relative;padding-bottom:56.25%;padding-top:30px;height:0;overflow:hidden}
#youtube .UTwo a{display:block;width:100px;height:100px;text-align:center;line-height:100px;border-radius:50%;background:rgba(0,0,0,0.6);position:absolute;z-index:5;color:#dcdcdc;font-size:30px;left:calc(50% - 50px);top:calc(50% - 50px);transition:all linear .3s}
#youtube .UTwo iframe{position:absolute;top:0;left:0;width:100%;height:100%}
#about-slide .slick-prev{opacity:0}
#about-slide .slick-next{right:30px;height:40px}
#about-slide .slick-next:before{background-image:url(/images/23/index-about-sccrow.jpg);width:23px;height:46px;content:'';display:block}
#about-slide .slick-dots{top:10px;text-align:right;height:30px;width:auto;right:0}
#about-slide .slick-dots li button:before{font-size:10px;color:#fff}
#about-slide .about{padding: 70px 0px 10px 30px;}
#about-slide .about .speBoxTitle{font-weight: 400;font-size: 45px;color: #ffffff;line-height: 120%;font-family: 'Bebas Neue', cursive;letter-spacing: 5px;display: none;}
#about-slide .about .speBoxTitle b{color: #5489d4;font-weight: 400;}
#about-slide .about .subBoxTitle{color: #ffffff;line-height: 120%;font-size: 3vw;word-spacing: 100vw;letter-spacing: 0.5px;line-height: 150%;font-weight: 500;position: relative;padding-bottom: 60px;}
#about-slide .about .more{text-align: left;margin-top: 30px;}
#about-slide .about .more a{font-weight: bold;color: #191919;font-size: 13px;transition:all linear .2s;text-transform: uppercase;background: #fff;padding: 15px 30px;display: inline-block;letter-spacing: 1px;}
#about-slide .about .subBoxTitle:before {content: "";position: absolute;left: -60px;top: -60px;width: 54px;height: 64px;background-image: url(/images/23/icon-ab-01.png);background-repeat: no-repeat;display: block;font-size: 60pX;color: #203954;font-weight: 600;}

/* aboutFunc icon */
.processbox .tit {position: relative;text-align: center;z-index: 2;}
.processbox .tit h3 {text-align: center;font-size: 33px;}
.processbox .tit font {padding: 8px 20px;background: #fff;display: inline-block;-webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-ms-transition: all 0.5s ease;-o-transition: all 0.5s ease;transition: all 0.5s ease;}
.processbox {overflow: hidden;position: relative;margin: 0px 0 20px;z-index: 1;display: flex;flex-wrap: wrap;}
.processbox li {position: relative;text-align: center;overflow: hidden;margin-bottom: 30px;vertical-align: top;flex-direction: column;position: relative;width: calc(100% / 2);}
.processbox li .item {padding: 10px 30px 10px 10px;position: relative;border-radius: 0 0px 80px 0px;display: flex;align-items: flex-start;}
.processbox li .item article{font-size: 20px;display: grid;padding: 0px 30px;}
.processbox li .item article b{color: #ffffff;position: relative;padding: 10px 0px 20px;margin-bottom: 20px;font-weight: 400;font-size: 18px;letter-spacing: 0.5px;}
.processbox li .item article b:before {content: "";position: absolute;bottom: 0;width: 20px;height: 1px;background-color: #7a8394;-webkit-transition: all 0.5s ease-out;transition: all 0.5s ease-out;}
.processbox li .item article p{color: #b5bac5;font-size: 14px;}
.processbox li .item:hover .circle {animation: flipInX 1.5s both;-webkit-animation: flipInX 1.5s both;animation-duration: 1s;-webkit-animation-duration: 1s;}

@keyframes flipInX{
0%{ transform: perspective(400px) rotateX(90deg); animation-timing-function: ease-in; opacity:0; }
40%{ transform: perspective(400px) rotateX(-20deg); animation-timing-function: ease-in; }
60%{ transform: perspective(400px) rotateX(10deg); opacity: 1; }
80%{ transform: perspective(400px) rotateX(-5deg); }
to{ transform:perspective(400px); }
}
@-webkit-keyframes flipInX{
0%{ -webkit-transform: perspective(400px) rotateX(90deg); -webkit-animation-timing-function: ease-in; opacity:0; }
40%{ -webkit-transform: perspective(400px) rotateX(-20deg); -webkit-animation-timing-function: ease-in; }
60%{ -webkit-transform: perspective(400px) rotateX(10deg); opacity: 1; }
80%{ -webkit-transform: perspective(400px) rotateX(-5deg); }
to{ -webkit-transform:perspective(400px); }
}
.processbox li .item .circle{position: relative;}
.processbox li .item .circle p{width: 70px;height: 70px;border-radius: 50%;border: 1px hsl(0deg 0% 72% / 34%) solid;box-sizing: border-box;left: 0px;top: 0px;z-index: 10;content: "01";display: flex;color: #5f5f5f;background-color: #ffffff;align-items: center;justify-content: center;font-size: 18px;padding: 10px;position: relative;}





#bookBox{background-repeat:no-repeat;background-position:50% 50%;background-size:cover;padding:70px 0 100px}
#bookBox .speBox{margin-bottom:50px}
#bookBox .speBox p{text-align:center}
#bookBox .speBox p a{transition:all linear .2s}
#bookBox #book{width:900px;margin:0 auto}
#bookBox #book .bList{overflow:hidden}
#bookBox #book .bList >div{float:left;width:50%;text-align:center;margin-bottom:30px}
#bookBox #book .bList >div:nth-child(even){margin-top:80px}
#bookBox #book .mofd{display:inline-block;position:relative}
#bookBox #book .photo{background-repeat:no-repeat;background-position:50%;background-size:auto 100%;margin-right:50px;background-color:#000;transition:all linear .2s}
#bookBox #book .photo a{display:block}
#bookBox #book .photo img{width:100%}
#bookBox #book h3{background:#fff;padding:25px 30px;position:absolute;bottom:-22px;right:0;max-width:calc(60% - 60px);word-break: break-all;}
#bookBox #book h3 a{color:#383838;font-size:20px;font-family:'Noto Serif TC',serif}
#stronghold{padding: 80px 0;}
#stronghold .webframe{width: 80%;}
#stronghold .bottomBox{overflow: hidden;}
#stronghold .left{float: right;width: 70%;}
#stronghold .right{float: left;width: 25%;}
#stronghold .right h3{font-weight: 400;font-size: 45px;color: #191919;line-height: 120%;font-family: 'Bebas Neue', cursive;letter-spacing: 5px;}
#stronghold .right h3 b{color: #26a9df;font-weight: 400;}
#stronghold .right h2{line-height: 120%;font-size: 25px;margin-top: 5px;color: #333;}
#stronghold .right article{margin-top: 40px;font-weight: 500;letter-spacing: 0px;text-align: justify;color: #000000;font-size: 18px;}#stronghold .textBox{margin-top: 10px;}
#stronghold .textBox p{margin: 10px 0;}
#stronghold .textBox p i{color: #26a9df;width: 20px;text-align: center;height: 20px;line-height: 20px;margin-right: 10px;}
#stronghold .textBox .more{margin-top: 40px;text-align: end;}
#stronghold .textBox .more a{font-weight: bold;color: #fff;font-size: 13px;transition: all linear .2s;text-transform: uppercase;background: #233b5d;padding: 15px 30px;display: inline-block;letter-spacing: 1px;}

@media (min-width: 1025px) {
	#NewsBox .speBox .titleSet .submore a:hover{opacity: .95;}
	#NewsBox{background-attachment: fixed;}
	#about-slide .about .more a:hover{color:#7b7b7b}
	#bookBox #book .photo:hover{background-size:auto 110%}
	#news .newsList .border:hover .more:after{transform:rotate(0deg);opacity:0}
	#news .newsList .border:hover .more:before{width:0;left:30px}
	#news .newsList .border:hover .news-info h3{letter-spacing: 1px;}
	#bookBox .speBox p a:hover{color:#ad925f}
}
@media screen and (max-width: 1440px) {
	#news{width: 90%;}
	#about-slide .about .arts, #about-slide .free p{width:100%;}
	#stronghold .webframe{width: 90%;}
	#about-slide .about .more{width:100%;}
	.processbox{margin: 0px 0 10px;padding: 5px;}
	.processbox li .item article{padding: 0 0px 0 30px;}
}
@media screen and (min-width: 1281px) {
#youtube .UTwo a:hover{width:110px;height:110px;line-height:110px;left:calc(50% - 55px);top:calc(50% - 55px);font-size:34px}
#aboutFunc #about-slide:before{content:'ABOUT US';position:absolute;letter-spacing: 15px;font-family: 'Bebas Neue', cursive;font-weight: 400;color: #414753;top: -10px;font-size: 11vw;line-height: 100%;right: 100px;
    text-align: right;z-index: -1;}
.processbox li .item .circle::before {content: "";position: absolute;top: -20px;z-index: 3;width: 66px;height: 66px;border-radius: 50%;border: 12px solid rgb(255 255 255 / 31%);right: -20px;margin: 10px;}
	#youtube{display:table;width:100%}
	#youtube .useU2{display:table-cell;vertical-align:middle}
}
@media screen and (max-width: 1280px) {
	#about-slide .about .arts{margin: 10px 0;}
	#stronghold .right{width: 35%;}
	#stronghold .left{width: 60%;}
	#NewsBox{padding: 60px 0;}
	#news .newsList .news-info h3{margin:4px 0 15px;}
	#NewsBox .speBox .titleSet{margin:0 70px}
	#news .newsList .photo{width: 120px;height: 120px;margin-right: 30px;}
	#news .newsList .news-info{width: calc(100% - 150px);}
	#stronghold{padding: 40px 0;}
}
@media screen and (max-width: 1140px) {
	#bookBox #book{width:95%}
	.processbox li{width: 49%;}
	.processbox{grid-template-columns: repeat(1, 1fr);padding: 0px;}
	.processbox li .item {padding: 0px 0px;}
	.processbox li:before,.processbox li:after{display: none;}
	#aboutFunc{background-position: 100% 50%;padding: 50px 0 50px;}
	#aboutFunc .speBox{display: flex;flex-wrap: wrap;flex-direction: column;align-items: flex-start;}
#aboutFunc .youtubebox,#aboutFunc #about-slide{width: 100%;}
	#about-slide .about .subBoxTitle:before{left: -20px;
    top: -60px;}
}
@media screen and (max-width: 980px) {
	#aboutFunc .youtubebox{width:100%}
	#aboutFunc #about-slide{width:100%;margin-top: 20px;}
	#stronghold .right{width: 100%;float: none;margin-top: 20px;}
	#stronghold .left{width: 100%;float: none;}

}
@media screen and (max-width: 640px) {
	#news{width:calc(100% - 60px);margin: 50px 30px 0;}
	#NewsBox .speBox .titleSet{margin:0 30px}
	#news .newsList .news-info p.more{display:none}
	#news .newsList .news-info .describe h4,#about-slide .about .arts,#about-slide .free p,#about-slide .about .more{width:100%}
	#bookBox #book .bList .photo{    margin-right: 0;}
	#bookBox #book .bList >div{margin-bottom: 0;}
	#bookBox #book .bList h3{    bottom: 0;
    padding: 15px 20px;max-width: calc(60% - 40px);}
	#bookBox #book .bList h3 a{font-size: 18px;}
	#bookBox #book .bList >div:nth-child(even){margin-top: 0;}
	#about-slide .about .subBoxTitle{font-size: 27px;padding-bottom: 20px;}
	.processbox li {padding: 4px 0px 4px 0px;width: 98%;}
	#about-slide .about{padding: 0px 0px 10px 10px;}
	#about-slide .about .subBoxTitle:before {display: none;}

}
@media screen and (max-width: 480px) {
	#NewsBox{padding:70px 0}
	#news{width:100%;margin:50px 0 0}
	#news .newsList .news-info .describe h4{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
	#news .newsList .news-info h3{margin:0 0 10px;}
	#NewsBox .speBox .titleSet .subBoxTitle{margin:10px 0 30px}
	#about-slide .slick-next{right:15px}
	#about-slide .about .arts,#about-slide .free p{margin:20px 0;font-size:16px;line-height:160%}
	#about-slide .slick-dots li{margin:0}
	#bookBox #book .photo{margin-right:20px}
	#bookBox #book h3{padding:15px 20px;max-width:calc(70% - 40px)}
	#bookBox #book h3 a{font-size:17px}
	#bookBox #book .bList h3{padding: 10px 15px;max-width: calc(80% - 30px);}
	#bookBox #book .bList h3 a{font-size: 16px;}
	.processbox li {width: 100%;}
	.processbox li:before,.processbox li:after{display: none;}
}