.wow{animation-duration:1.5s;animation-name:fadeInUp}
.longbar {
    display: inline-block;
    margin-right: 15px;
    vertical-align: top;
    margin-top: 12px;
}
#prolay .pro-list .p-box:after,#ssbanner .bxslider a:after,#prolay .pro-list .p-box:before,#ssbanner .bxslider a:before{background:rgba(0,0,0,0.65);content:'';width:100%;height:100%;display:block;position:absolute;z-index:2;top:0;left:0}
.imgSkirt{position:relative}
.imgSkirt::after{top:0;z-index:2;width:100%;height:100%;content:" ";position:absolute;background-color: #f0f0f0;transition:.5s ease-in-out;-o-transition:.5s ease-in-out;-moz-transition:.5s ease-in-out;-webkit-transition:.5s ease-in-out;transform-style:preserve-3d;-webkit-transform-style:preserve-3d;}
.open.imgSkirt::after{width:0}
#aboutFunc{position:relative;background-repeat:no-repeat;background-position: 0% -130%;background-size: auto;overflow:hidden;background-color: #ffffff;color: #181818;padding: 20px 0 80px 0;background-image: url(/images/22/ab-bg.png);}
#aboutFunc:before{content:'';display:block;position:absolute;left:0;bottom:0;height:50%;width:100%;background-color: rgba(255, 255, 255, 0);z-index:1;}
#aboutFunc .abBox{position:relative;z-index:3;position: relative;display: block;margin: 50px 200px;padding-left: 0px;padding: 40px;width: 84%;background-color: #fff;}
#aboutFunc .abBox #youtube{width: 48%;margin-left: 50%;padding: 0px;background-repeat:no-repeat;background-position: 50% 50%;background-size:cover;border: 13px rgb(255, 255, 255) solid;background-color: #fff;box-shadow: 0 5px 30px rgba(0,0,0,.2);box-sizing: border-box;}
#aboutFunc .abBox .aboutart{width: 35%;position:absolute;right: 55%;top: 110px;animation-duration:2s;}
#aboutFunc .abBox .aboutart h3 b{font-size: 46px;line-height:110%;margin-bottom: 30px;color: #333f48;font-weight: 400;}
#aboutFunc .abBox .aboutart h2{position: absolute;z-index: -2;left: 0px;width: 100%;height: 100%;display: block;top: -90px;font-size: 100px;color: #f3f3f3;line-height: 0px;text-align: left;font-weight: bold;}
#aboutFunc .abBox .aboutart .arts{font-size:15px;line-height:160%;color: #454545;margin-top: 40px;margin-bottom:60px;/* max-height: 200px; */overflow:hidden;font-weight: 400;letter-spacing: 1.5px;}
#aboutFunc .abBox .aboutart .more a{display:inline-block;background: #fff;color: #4c4c4c;font-size: 15px;font-weight:700;line-height: 103%;padding: 15px 48px;border: 1px solid #767a82;border-radius: 38px;}
#aboutFunc .abBox .aboutart .more {float: right;}
#aboutBox #youtube{position:relative;background-repeat:no-repeat;background-position:50% 50%;background-size:cover;margin-top:20px}
#youtube .UTwo{position:relative;padding-bottom: 51.25%;padding-top: 108px;padding-left: 142px;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 a:hover{width:110px;height:110px;line-height:110px;left:calc(50% - 55px);top:calc(50% - 55px);font-size:34px}
#youtube .UTwo iframe{position:absolute;top:0;left:0;width:100%;height:100%}
#product{background-repeat:no-repeat;background-position:50% 50%;background-size:cover;position:relative;padding-bottom:80px;padding-top:90px}
#product .speBox{position:relative}
#prolay .p-box{margin:20px;position:relative}
#prolay .p-box a{position:absolute;top:0;left:0;width:100%;height:100%;z-index:4}
#prolay .p-box .p-border{position:relative;overflow:hidden}
#prolay .p-box .p-border:after{content:'';display:block;width:80%;height:100%;position:absolute;left:50%;top:0;opacity:0;background:rgba(255,255,255,0.3);z-index:2;transition:all cubic-bezier(0.49,0.01,0,1) .7s}
#prolay .p-box .p-border .photo{position:relative;z-index:2;background-repeat:no-repeat;background-position:50% 50%;background-size:contain;background-color:#CCC}
#prolay .p-box .p-border .photo img{width:100%}
#prolay .p-box .p-border .p-info{padding:50px;position:absolute;top:15%;left:15%;z-index:3;max-width:calc(70% - 100px);color:#fbcd62;transition:all linear .4s;opacity:0}
#prolay .p-box .p-border .p-info:after{height:100%;content:'';background-image:url(/images/22/index_recommend_text_bg.jpg);background-position:50%;background-size:auto;opacity:.9;position:absolute;left:-100%;top:0;width:100%;display:block;z-index:-1;transition:all linear .4s}
#prolay .p-box .p-border .p-info h3{font-size:22px;line-height:130%;font-weight:400}
#prolay .p-box .p-border .p-info .describe{margin:20px 0;font-size:15px;line-height:150%;color:#d4a66b}
#prolay .p-box .p-border .p-info .price{color:#d4a66b}
#prolay .p-box .p-border .p-info .price span{font-size:13px;margin-right:15px}
#prolay .p-box .p-border .p-info .price span.now{font-size:17px;color:#fff}
.controller{position:relative;overflow:hidden}
/* boxTitle  */
h2.boxTitle { position: relative; min-width: 250px; font-weight: normal; }
h2.boxTitle font {display: block;font-size: 40px;line-height: 100%;text-transform: uppercase;font-family: 'Roboto', sans-serif;font-weight: 600;color: #575757;}
h2.boxTitle font:first-letter {margin-right: 5px;font-size: 40px;line-height: 100%;color: #24bdac;}
h2.boxTitle span {
    position: absolute;
    padding: 0 5px 5px;
    width: 38%;
    border-bottom: 5px #24bcac solid;
    font-weight: bold;
    font-size: 16px;
    color: #797a7a;
    top: 55px;
    left: 153px;
    }

.indexset-box { overflow:hidden; margin: auto; width:1214px; }
.indexvisul{ position:relative; z-index: 1; }

/* news */
section.indexset {
    width: 1366px;
    margin: 0 auto;
    overflow: hidden;
}
#news {    background-repeat: repeat-x;
    background-position: 0 -30px;
    padding: 38px 0 30px;
    position: relative;
    z-index: 2;
    background-color: #efefef;}
#news .newstitle {position: relative;float: left;}
#news .newsList {float: right;width:40%;margin: 0;}
#news .newsList .newsbox ,
#news .newsList .newsbox .info h3 { overflow:hidden; }
#news .newsList .newsbox .time {float:left;margin-top: 20px;}
#news .newsList .newsbox .time p {font-family: 'Titillium Web', sans-serif;color: #b4b4bb;font-size: 24px;font-family: "Roboto", "Noto Sans TC", sans-serif;font-weight: 500;}
#news .newsList .newsbox .time p.Pubyear {color:#9f9999;font-size: 15px;margin-right: 4px;margin-top: 5px;}
#news .newsList .newsbox .info { float:left; width:calc(90% - 87px); margin-left:20px; }
#news .newsList .newsbox .info h3 a {color: #646464;font-size: 18px;}
#news .newsList .newsbox .info span {width: 55px;height:1px;display:block;background: #bcbcbc;margin: 13px 0;}
#news .newsList .newsbox .info article {color:#595757;font-size: 14px;height: 46px;}

#freebox #freeboxlist{overflow:hidden}
#freebox #freeboxlist >div{display:inline-block;width:calc(100% / 3);margin-right:-4px}
#freebox #freeboxlist .free{padding:70px}
#freebox #freeboxlist .free h3{text-align:center;font-size:30px;line-height:120%;color:#2b2929;margin-bottom:20px}
#freebox #freeboxlist .free p{text-align:center;color:#545454;font-size:16px;line-height:160%}

/* book */
#product .index-title,#BookTitle .index-title,#NewsTitle .index-title{margin: 0px 0 30px;color:#fff;padding-top: 68px;}
#product .index-title{margin:80px 0 30px}
#product .index-title h2,#BookTitle .index-title h2,#NewsTitle .index-title h2{font-family: 'Rubik', sans-serif;font-weight:600;text-align:center;font-size:40px;line-height:110%;}
#product .index-title p,#BookTitle .index-title p,#NewsTitle .index-title p{font-weight:400;text-align:center;margin-top:5px}
#product .index-title p a,#BookTitle .index-title p a,#NewsTitle .index-title p a{color:#fff;display:inline-block}
#product .index-title p a b,#BookTitle .index-title p a b,#NewsTitle .index-title p a b{margin-left:10px;display:inline-block;background:rgba(255,255,255,0.73);width:20px;height:20px;color:#287ebc;border-radius:50%;font-size:12px;line-height:18px;text-align:center;vertical-align:inherit}
#BookTitle .index-title h2,#BookTitle .index-title p a,#NewsTitle .index-title h2,#NewsTitle .index-title p a{color:#434343}
#BookTitle .index-title p a b,#NewsTitle .index-title p a b{background:#aeaeae;color:#fff}
#book{margin:30px 0 0;height:660px}
#BookTitle .index-title h2,#BookTitle .index-title p a{color:#434343}
#BookTitle .index-title p a b{background:#aeaeae;color:#fff}
#BookTitle .index-title p a b{transition:all linear .3s}
#BookTitle .index-title p a:hover b{padding-left:15px;border-radius:15px}
#BookTitle .index-title h2{font-size: 47px;line-height: 138%;padding-top: 215px;}
#BookTitle .index-title h2{font-size: 47px;line-height: 180%;padding-top: 200px;}
#BookTitle .index-title h2 span {
    position: absolute;
    padding: 0px 5px 0px;
    width: 2%;
    border-bottom: 5px #24bcac solid;
    font-weight: bold;
    font-size: 16px;
    color: #797a7a;
    left: 48.2%;
}
#book{margin:30px 0 0;height:660px}
.bookStyle{position:relative;overflow:visible;width: 63%;margin: 34% auto 0;padding-top: 0px;}
.bookStyle .info{position:absolute;top:0;z-index:1;width:40px;left:-40px}
.bookStyle .info.twins{left:calc(100% + 20px)}
.bookStyle .info h3{writing-mode:tb-rl;font-size:20px;margin-bottom:20px;font-weight:400}
.bookStyle .info h4{writing-mode:tb-rl;font-size:15px;font-weight:400;color:#888}
.bookStyle .photo{position:absolute;left:0;top:0;width:100%;height:100%}
.bookStyle .photo a img{width:100%;height:100%;object-fit:cover}
.slick-center .bookStyle{width:95%;margin: 50px auto;padding-top: 20px;}
.slick-center .bookStyle .info{z-index:1;left: -15%;width: 50%;text-align:right;top: 70%;}
.slick-center .bookStyle .info.twins{display:none}
.slick-center .bookStyle .info h3{font-size: 26px;text-align:right;writing-mode:initial;margin:0;}
.slick-center .bookStyle .info h3 a{color:#fff;background: #616165;display:inline-block;width:auto;height:auto;padding: 5px 10px;font-weight:400;line-height: 140%;}
.slick-center .bookStyle .info h4{font-size: 24px;line-height:120%;text-align:right;background: #616165;color: #afafaf;display:inline-block;padding:6px 12px;font-weight:400;margin-top:5px;writing-mode:initial;}
#bookBox{background-repeat:no-repeat;background-position: 50% 106%;background-size:cover;background-attachment: fixed;}
.bookStyle >img,#news li .border .photo img,#ssbanner a img{width:100%}
.bookStyle,.bookStyle .info,#product .index-title p a b,#BookTitle .index-title p a b,#NewsTitle .index-title p a b{transition:all linear .3s}
.bookStyle .photo,.bookStyle .info h3 a,.bookStyle .info h4,.bookStyle .info h3{transition:all linear .1s}
.bookStyle .photo a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-box-shadow: -12px 12px 20px #b8b8b8;
    -moz-box-shadow: -12px 12px 20px #b8b8b8;
    -ms-box-shadow: -12px 12px 20px #b8b8b8;
    box-shadow: -12px 12px 20px #b8b8b8;
    background-color: #fff;
}
.bookStyle .photo, .bookStyle .info h3 a, .bookStyle .info h4, .bookStyle .info h3 {
    transition: all linear .1s;
}
/* articleInfo15 */
#articleInfo15,#indexBook { padding: 30px 0 0px; }
#articleInfo15 h2.boxTitle {float: none;width: auto;text-align: center;font-size: 48px;line-height: 140%;font-family: "Roboto", "Noto Sans TC", sans-serif;font-weight: 600;color: #575757;margin: 78px 0 32px;}
#articleInfo15 h2.boxTitle span {
    position: absolute;
    padding: 0 5px 5px;
    width: 2%;
    border-bottom: 5px #24bcac solid;
    font-weight: bold;
    font-size: 16px;
    color: #797a7a;
    top: -32px;
    left: 48%;
}
#indexBook h2.boxTitle { float: left; width: 480px; }
#articleInfo15 .bookList,#indexBook .bookList { margin-top: 30px;margin-bottom: 0px; }
#articleInfo15 h2.boxTitle font {
    margin-right: -188px;
}

#articleInfo15 {
    background-repeat: no-repeat;
    background-image: url(/images/22/service-bg.png);
    background-size: auto;
    padding: 0px 0 50px;
    background-attachment: fixed;
}
.wow {
	animation: fadeIn 1.5s both;
	-webkit-animation: fadeIn 1.5s both;
	animation-duration: 1s;
	-webkit-animation-duration: 1s;	
}
.delay1 {
	animation-delay: 0.2s;
	-webkit-animation-delay: 0.2s;
}
.delay2 {
	animation-delay: 0.6s;
	-webkit-animation-delay: 0.6s;
}
.delay3 {
	animation-delay: 1.0s;
	-webkit-animation-delay: 1.0s;
}
.delay4 {
	animation-delay: 1.4s;
	-webkit-animation-delay: 1.4s;
}
.delay5 {
	animation-delay: 1.8s;
	-webkit-animation-delay: 1.8s;
}
.delay6 {
	animation-delay: 2.2s;
	-webkit-animation-delay: 2.2s;
}

#articleInfo15 .tit {
	position: relative;
	text-align: center;
	z-index: 2;
}
#articleInfo15 .tit h3 {
	text-align: center;
	font-size: 33px;
}
#articleInfo15 .tit font {
	padding: 0 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;
}
#articleInfo15:hover .tit h3 ,
#articleInfo15:hover .tit font{
	letter-spacing: 5px;
}
#articleInfo15 ul {
	overflow: hidden;
	position: relative;
	margin: -10px 0 30px;
	padding: 50px 0 35px;
	z-index: 1;
}
#articleInfo15 ul li {
	float: left;
	width: 25%;
	animation-name: fadeInUp;
	-webkit-animation-name: fadeInUp;
}
#articleInfo15 ul li:nth-child(5),
#articleInfo15 ul li:nth-child(6),
#articleInfo15 ul li:nth-child(7) {
    width: 25.3%;
    margin: auto 13px;
}
#articleInfo15 ul li:nth-child(5){
    padding-left: 128px;
    padding-right: 6px;
    }
    

#articleInfo15 ul li .item {
	padding: 20px 30px;
}
#articleInfo15 ul li .item .circle {
    position: relative;
    margin: 0px auto 15px;
    width: 140px;
    height: 140px;
    border: 1px rgba(181, 181, 181, 0.5) solid;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    box-sizing: border-box;
    text-align: center;
    font-size: 53px;
    line-height: 130px;
}
#articleInfo15 ul li:hover .item .circle {
    color: #151414;
	border: 3px #24bdac solid;
}

#articleInfo15 ul 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); }
}
#articleInfo15 ul li .item p {
	text-align: center;
	font-size: 23px;
	font-weight: 400;
	letter-spacing: 0.6px;
	margin-bottom: 5px;
	color: #7f7f7f;
	font-family: "Roboto", "Noto Sans TC", sans-serif;
}

#articleInfo15 ul li .item p:first-letter {
    font-size: 26px;
    line-height: 100%;
}
#articleInfo15 ul li .item article {
	text-align: center;
    font-size: 16px;
    color: #f9b520;
    text-transform: uppercase;
}
#articleInfo15 .imgBox {
	overflow: hidden;
}
#articleInfo15 .imgBox p {
	margin: 0 1% 0 0;
	overflow: hidden;
	float: left;
	width: 49%;
	animation-name: fadeInLeft;
	-webkit-animation-name: fadeInUp;
}



@media screen and (min-width: 1025px) {
#prolay .p-box:hover .p-border:after{width:45%;left:0;opacity:1}
#prolay .p-box:hover .p-border .p-info:after{left:0}
#prolay .p-box:hover .p-border .p-info{left:0;opacity:1}
#product .flytxt{position:absolute;bottom:calc(100% + 90px);right:60px;font-size:22px}
#product .titleSet{display:inline-block;width:248px;text-align:center;position:relative;vertical-align:middle}
#product .titleSet .speBoxTitle{position:absolute;width:280px;line-height:16px;font-size:.9375rem;color:#8c8c8c;margin:0;text-transform:uppercase;top:50%;left:50%;letter-spacing:12px;margin-top:-8px;margin-left:-115px;padding-left:15px;text-align:center;transform:rotate(-90deg);-moz-transform:rotate(-90deg);-webkit-transform:rotate(-90deg)}
#product .titleSet .subBoxTitle{writing-mode:tb-rl;font-size:30px;line-height:110%;letter-spacing:.6em;vertical-align:top;text-align:center;text-align-last:justify;display:inline-block}
#prolay{display:inline-block;width:calc(100% - 248px);margin-left:-4px}
#aboutFunc .abBox .aboutart .more a,#NewsBox .NewsMore p a span{position:relative;transition:transform 1s cubic-bezier(0.23,1,0.32,1)}
#aboutFunc .abBox .aboutart .more a:hover{color:#fff}
#aboutFunc .abBox .aboutart .more a span{position:relative;z-index:2}
#aboutFunc .abBox .aboutart .more a:after{top:0;position:absolute;transform:scale(0,1);transform-origin:right center 0;transition:transform 1s cubic-bezier(0.23,1,0.32,1);content:'';display:block;width:100%;height:100%;left:0;background: rgba(20, 27, 26, 0.51);z-index:1;font-weight: 400;margin-bottom: 10px;display: inline-block;border: 1px solid #ffffff;padding: 0px 0px;border-radius: 35px;}
#aboutFunc .abBox .aboutart .more a:hover:after{transform:scale(1,1);transform-origin:left center 0}
.bookStyle:hover .photo{width:110%;height:110%;left:-5%;top:-5%}
}
@media screen and (max-width: 1680px) {
	section.indexset { width: 90%; }
#book{height:500px}
}

@media screen and (max-width: 1440px) {
#aboutFunc .abBox .aboutart{top:80px;width: 40%;right: 54%;}
#aboutFunc .abBox {
    width: 86%;
    margin: 30px auto;
    padding: 30px;
}
#aboutFunc {
    background-position: 0% -100%;
}
#book{height:470px}
}
@media screen and (max-width: 1366px) {
	#news .newstitle { width:45%; }
	#news .newsList { width:50%; }
#book{height: 520px;}
.slick-center .bookStyle .info h3{font-size:40px}
.slick-center .bookStyle .info h4{font-size:20px}
}
@media screen and (max-width: 1280px) {
#aboutFunc .abBox .aboutart{top: 30px;}
#aboutFunc .abBox .aboutart h2{font-size: 62px;top: -50px;}
#aboutFunc .abBox .aboutart h3{margin-bottom:30px}
#aboutFunc .abBox .aboutart h3 b {
    font-size: 36px;
}
#aboutFunc .abBox .aboutart .arts {
    margin-bottom: 40px;
}
#book{height: 818px;}
}
#BookTitle .index-title h3{margin: auto;width: 2%;}
#BookTitle .index-title h2 {
    font-size: 47px;
    line-height: 180%;
    padding-top: 18px;
    font-family: "Artegra Bold", "Poppins", "微軟正黑體", sans-serif;
    font-style: italic;
    letter-spacing: 0.1px;
    color: #333f48;
}
@media screen and (max-width: 1199px) {
#product .index-title, #BookTitle .index-title, #NewsTitle .index-title {
    margin: 0px 0 30px;
    color: #fff;
    padding-top: 30px;
}
#BookTitle .index-title h3 {
    margin: auto;
    width: 6%;
}
}
@media screen and (max-width: 1024px) {
#product .flytxt{text-align:center;font-size:17px;line-height:120%;color:#2d2c2c}
#prolay{margin-top:10px}
#product .titleSet .speBoxTitle{text-align:center}
#product .titleSet .subBoxTitle{text-align:center;margin-top:10px}
#product .titleSet .subBoxTitle a{color:#696969;font-weight:400;display:block;margin-bottom:20px}
#prolay .p-box .p-border:after{width:45%;left:0;opacity:1}
#prolay .p-box .p-border .p-info:after{left:0}
#prolay .p-box .p-border .p-info{left:0;opacity:1}
#freebox #freeboxlist >div{width:100%;margin-right:0}
#aboutFunc{padding:100px 0}
#aboutFunc .abBox .aboutart{position:inherit;position:initial;width:80%;margin-left:10%;margin-top: 5%;}
#aboutFunc .abBox #youtube{width: 100%;margin-bottom: 0px;margin-left: 0px;margin-top: -4px;background-image: url(/userfiles/images/20190612033144220.jpg);visibility: visible;}
#aboutFunc:before{top:0;bottom:inherit;bottom:initial}
#aboutFunc:after{width:100%;top:inherit;top:initial;bottom:0;height:70%}
#articleInfo15 ul li:nth-child(5), #articleInfo15 ul li:nth-child(6), #articleInfo15 ul li:nth-child(7) {
    width: 33%;
    margin: auto 0px;
}
#articleInfo15 ul li:nth-child(5) {
    padding-left: 0px;
    padding-right: 0px;
}
#book{height:auto}
#BookTitle .index-title h2{font-size:30px}
.bookStyle{margin: 50px auto;}
.bookStyle .info.twins{display:none}
.bookStyle .info{width:200px;right: 78%;top: 57px;text-align:right;left:initial;}
.bookStyle .info h3{writing-mode:initial;margin-bottom: 4px;text-align:right;}
.bookStyle .info h3 a{color:#fff;background: #616165;display:inline-block;padding:5px 8px 5px 20px;font-size: 20px;line-height:120%;}
.bookStyle .info h4{writing-mode:initial;display:inline-block;background: #616165;color:#fff;padding:2px 10px;position:relative;}
}
@media screen and (max-width: 768px) {
#prolay .p-box .p-border .p-info h3{font-size:18px}
#prolay .p-box .p-border .p-info{max-width:calc(75% - 60px);padding:30px}
#prolay .p-box .p-border:after{width:55%}
#prolay .p-box .p-border .p-info .describe{height:46px;overflow:hidden}
#prolay .p-box .p-border .p-info .price span{display:block}
#freebox #freeboxlist .free{padding:70px 50px}
	#news .newstitle { float:none; width:100%; margin-bottom:80px; }
	#news .newsList { width:100%; }
	#news .newstitle img { height:60px; }
	#articleInfo15 ul li .item {
		padding: 15px;
	}
#articleInfo15 {
    background-size: auto;
    padding: 0px 0 10px;
    background-position: 14% 50%;
    background-attachment: fixed;
    background-image: initial;
}
#articleInfo15 .bookList, #indexBook .bookList {
    margin-top: 15px;
    margin-bottom: 0px;
}
.bookStyle .info {
    /* width: 200px; */
    right: 80%;
    top: 60px;
    text-align: right;
    left: initial;
}
h2.boxTitle span {
    position: absolute;
    padding: 0 5px 5px;
    width: 8%;
    border-bottom: 5px #24bcac solid;
    font-weight: bold;
    font-size: 16px;
    color: #797a7a;
    top: 55px;
    left: 153px;
}
}
@media screen and (max-width: 640px) {
#prolay .p-box .p-border .p-info{max-width:calc(75% - 40px);padding:20px}
#prolay .p-box .p-border .p-info{position:initial;max-width:calc(100% - 40px);width:calc(100% - 40px)}
#prolay .p-box .p-border:after{display:none}
#prolay .p-box{margin:10px}
	#news .newstitle img { height:50px; }
#aboutFunc{padding:70px 0 100px}
#aboutFunc:after{height:75%}
	#articleInfo15 ul li {
		width: 50%;
	}
	#articleInfo15 ul li:nth-child(2) .item {
		border-left: 0;
	}
#articleInfo15 ul li:nth-child(5), #articleInfo15 ul li:nth-child(6){
    width: 50%;
}
#articleInfo15 ul li:nth-child(7) {
    width: 100%;
}
#articleInfo15 h2.boxTitle span {
    position: absolute;
    padding: 0 5px 5px;
    width: 6%;
    border-bottom: 5px #24bcac solid;
    font-weight: bold;
    font-size: 16px;
    color: #797a7a;
    top: -32px;
    left: 46%;
}
.bookStyle {
    margin: 0 auto 28px;
    width: 73%;
}
#aboutFunc .abBox .aboutart {
    position: inherit;
    position: initial;
    width: 100%;
    margin-left: 0%;
    margin-top: 5%;
}
}
@media screen and (max-width: 480px) {
#prolay .p-box{margin:15px}
#prolay .p-box .p-border .p-info h3{font-size:17px}
#prolay .p-box .p-border .p-info .describe{margin:10px 0}
#freebox #freeboxlist .free{padding:50px 30px}
#freebox #freeboxlist .free h3{font-size:24px}
	#news .newstitle img{ height:45px; }
	#news .newsList .newsbox .time { float:none; margin:0; }
	#news .newsList .newsbox .info { float:none; width:100%; margin:15px 0 0; }
	#news .newsList .newsbox .time p.Pubyear { text-align:left; }
	#news .newstitle { margin-bottom: 50px; }
	#indexBook h2.boxTitle { width: 90%; }
#aboutFunc{/* padding: 50px 0 40px; */background-position: -13% 20%;background-size: 0%;}
#aboutFunc .abBox .aboutart .more a{width:calc(100% - 100px);text-align:center}
#aboutFunc .abBox .aboutart h3{font-size: 28pt;line-height:8pt;}
	#articleInfo15 ul li {
		width: 100%;
	}
	#articleInfo15 .imgBox p {
		margin: 10px 0;
		width: 100%;
	}
	section.indexset ,
	#indexBook h2.boxTitle { width: 90%; }
.bookStyle{width:80%}
.bookStyle .info{right:initial;left:-8%;text-align:left}
.bookStyle .info h3{text-align:left}
#aboutFunc .abBox .aboutart .arts {
    max-height: 310px;
    margin-bottom: 40px;
}
#aboutFunc .abBox .aboutart .more {
    margin-bottom: 40px;
}
#aboutFunc .abBox .aboutart h2 {
    font-size: 62px;
    top: -40px;
    left: 40px;
}
.bookStyle .info {
    width: 200px;
    right: 43%;
    top: 218px;
    text-align: left;
    left: initial;
}
#articleInfo15 ul li:nth-child(5), #articleInfo15 ul li:nth-child(6) {
    width: 100%;
}
#bookBox {
    background-repeat: no-repeat;
    background-position: 50% -10%;
    background-size: 160%;
    background-image: url(/userfiles/images/20190612083748360.png);
    visibility: visible;
}
}
@media screen and (max-width: 450px) {
	h2.boxTitle font { font-size: 32px; }
	h2.boxTitle font:first-letter { font-size: 75px; }
	h2.boxTitle span {font-size: 14px;top: 6px;left: 55px;width: 3%;}
	#indexbottom .noticetitle h2.boxTitle span { padding-bottom: 2px; left: 86px; top: 10px; }
}

@media screen and (max-width: 380px){
	.bookStyle .info {
    width: 200px;
    right: 17%;

    top: 138px;
    text-align: left;
    left: initial;
}
}