.wow{animation-duration:1.5s;animation-name:fadeInUp}
.longbar {
    display: inline-block;
    width: 40px;
    height: 3px;
    background: #eb6100;
    margin-right: 15px;
}
.longbar2 {
    display: inline-block;
    margin-right: 18px;
    color: #eb6100;
    font-family: "Roboto", "Noto Sans TC", sans-serif;
}
#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:50% 50%;background-size: auto;overflow:hidden;background-color: #ffffff;color: #181818;padding: 240px 0 120px;background-image: url(/images/22/ab-bg.png);background-attachment: fixed;margin-top: -163px;}
#about2Func{position:relative;background-repeat:no-repeat;background-position:50% 50%;background-size: auto;overflow:hidden;background-color: #fafafa;color: #181818;padding: 40px 0 40px;background-attachment: fixed;}
#aboutFunc:before {
    content: "";
    left: 10%;
    position: absolute;
    bottom: 0%;
    z-index: 2;
    background: url(/images/22/line-bg.jpg) no-repeat 0 bottom;
    width: 690px;
    height: 100%;
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 50%;
}

#aboutFunc:before{content:'';display:block;position:absolute;left: 157px;bottom: 78px;height: 100%;width: 100%;background-color: rgba(255, 255, 255, 0);z-index:1;}
#aboutFunc .abBox,#about2Func .abBox{position:relative;z-index:3;}
#about2Func .abBox #youtube {
    position: relative;
    padding-bottom: 37.25%;
    height: 0;
    overflow: hidden;
}
#aboutFunc .abBox #youtube{width: 42%;margin-left: 157px;background-repeat:no-repeat;background-position:50% 50%;background-size:cover;-webkit-box-shadow: 0 11px 47px rgba(65, 65, 65, 0.83);-moz-box-shadow: 0 11px 47px rgba(65, 65, 65, 0.83);-ms-box-shadow: 0 11px 47px rgba(65, 65, 65, 0.83);box-shadow: 0 11px 47px rgba(65, 65, 65, 0.83);-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;transition: opacity 0.35s, transform 0.35s;}
#aboutFunc .abBox .aboutart{width: 26%;position:absolute;right: 15%;top: 82px;animation-duration:2s;animation-name: fadeInRight;}
#about2Func .abBox .aboutart{width: 20%;position:absolute;right: 52%;top: 192px;animation-duration:2s;animation-name: fadeInRight;}
#aboutFunc .abBox .aboutart h3,#about2Func .abBox .aboutart h3{font-size: 46px;line-height:110%;margin-bottom: 36px;margin-right: 0px;color: #2f2f2f;font-family: "Roboto", "Noto Sans TC", sans-serif;font-weight: 600;}
#aboutFunc .abBox .aboutart h2{font-size: 24px;line-height:110%;letter-spacing: 3px;color: #555;}
#about2Func .abBox .aboutart h2{font-size: 22px;line-height:110%;letter-spacing: 3px;color: #fff;background-color: #000;width: 69%;text-align: center;padding: 10px;}
#aboutFunc .abBox .aboutart .arts,#about2Func .abBox .aboutart .arts{font-size: 17px;line-height: 190%;color: #454545;margin-top:20px;margin-bottom:60px;max-height: 200px;overflow:hidden;font-weight: 500;letter-spacing: 1.5px;font-family: "Noto Sans TC", '微軟正黑體', sans-serif;}
#aboutFunc .abBox .aboutart .more a,#about2Func .abBox .aboutart .more a{display:inline-block;background: rgba(255, 255, 255, 0.52);color: #4c4c4c;font-size: 15px;font-weight:700;line-height: 103%;padding: 15px 48px;border: 1px solid #cfcfd0;border-radius: 38px;}
#aboutFunc .abBox .aboutart .more ,#about2Func .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: 55.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: #ae1230;margin-top: 26px;}
h2.boxTitle font:first-letter {margin-right: 5px;font-size: 40px;line-height: 100%;color: #cb1638;}
h2.boxTitle span {
    position: absolute;
    padding: 0 5px 5px;
    width: 35%;
    border-bottom: 5px #ae1230 solid;
    font-weight: bold;
    font-size: 16px;
    color: #797a7a;
    top: -24px;
    left: -4px;
    }

.indexset-box {overflow:hidden;margin: auto;width:1214px;width: 1064px;overflow: hidden;margin: 0;}
.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 80px 30px;
    position: relative;
    z-index: 2;
    background-color: #ffffff;
    width: 1074px;
    margin: 0;
    }
#news .newstitle {position: relative;float: left;}
#news .newsList {float: right;width: 46%;margin: 0;}
#news .newsList .newsbox ,
#news .newsList .newsbox .info h3 {overflow:hidden;}
#news .newsList .newsbox .time {float:left;width: 81px;margin-top: 10px;}
#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;text-align: left;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: 21px;}
#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: 17px;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: 11px 0 30px;color:#fff;}
#product .index-title{margin:80px 0 30px}
#product .index-title h2,#BookTitle .index-title h2,#NewsTitle .index-title h2{font-weight: 500;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{font-family: "Roboto", "Noto Sans TC", sans-serif;}

#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}
#bookBox{}
.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: -18%;width:50%;text-align:right;top:30%;}
.slick-center .bookStyle .info.twins{display:none}
.slick-center .bookStyle .info h3{font-size:48px;text-align:right;writing-mode:initial;margin:0;font-family: "Roboto", "Noto Sans TC", sans-serif;}
.slick-center .bookStyle .info h3 a{color:#fff;background: #eb6100;display:inline-block;width:auto;height:auto;padding: 5px 23px;font-weight:400;line-height: 140%;}
.slick-center .bookStyle .info h4{font-size:28px;line-height:120%;text-align:right;background: #eb6100;color:#fff;display:inline-block;padding: 6px 14px;font-weight:400;margin-top:5px;writing-mode:initial;font-family: "Roboto", "Noto Sans TC", sans-serif;-webkit-box-shadow: -4px 8px 20px rgba(111, 111, 111, 0.6);-moz-box-shadow: -4px 8px 20px rgba(111, 111, 111, 0.6);-ms-box-shadow: -4px 8px 20px rgba(111, 111, 111, 0.6);box-shadow: -4px 8px 20px rgba(111, 111, 111, 0.6);}
#bookBox{background-repeat:no-repeat;background-position: 50% 106%;background-size:cover;}
.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;
}
.bookStyle .photo, .bookStyle .info h3 a, .bookStyle .info h4, .bookStyle .info h3 {
    transition: all linear .1s;
    font-family: "Roboto", "Noto Sans TC", sans-serif;
    color: #eb6100;
}
/* 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,#about2Func .abBox .aboutart .more,#NewsBox .NewsMore p a span{position:relative;transition:transform 1s cubic-bezier(0.23,1,0.32,1)}
#aboutFunc .abBox .aboutart .more a:hover,#about2Func .abBox .aboutart .more a:hover{color:#fff}
#aboutFunc .abBox .aboutart .more a span,#about2Func .abBox .aboutart .more a span{position:relative;z-index:2;font-family: "Roboto", "Noto Sans TC", sans-serif;}
#aboutFunc .abBox .aboutart .more a:after,#about2Func .abBox .aboutart .morea: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(14, 14, 14, 0.55);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,#about2Func .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: 100%;}
#book{height:500px}
#about2Func .abBox .aboutart {
    width: 28%;
    position: absolute;
    right: 38%;
    top: 192px;
    animation-duration: 2s;
    animation-name: fadeInRight;
}
#about2Func .abBox #youtube {
    position: relative;
    padding-bottom: 49.25%;
    height: 0;
    overflow: hidden;
}
}

@media screen and (max-width: 1440px) {
#aboutFunc .abBox .aboutart{top:80px}
#about2Func .abBox .aboutart{top:80px;right: 35%;width: 29%;}
#book{height:470px}
}
@media screen and (max-width: 1366px) {
	#news .newstitle {width: 25%;}
	#news .newsList {width: 69%;}
#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,#about2Func .abBox .aboutart{top:50px}
#aboutFunc .abBox .aboutart h2,#about2Func .abBox .aboutart h2{font-size: 28px;letter-spacing: 1px;line-height: 130%;}
#aboutFunc .abBox .aboutart h3,#about2Func .abBox .aboutart h3{margin-bottom: 15px;}
#book{height: 818px;}
}
#BookTitle .index-title h2 {
    font-size: 52px;
    line-height: 180%;
    padding-top: 58px;
    }
}
@media screen and (max-width: 1199px) {
}
@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: 250px 0 0;}
#about2Func{padding: 17px 0;}
#aboutFunc .abBox .aboutart,#about2Func .abBox .aboutart{position:inherit;position:initial;width:80%;margin-left:10%}
#aboutFunc .abBox #youtube,#about2Func .abBox #youtube{width: 87%;margin-bottom: 55px;margin-left: 21px;margin-top: -24px;}
#aboutFunc:before,#about2Func:before{top:0;bottom:inherit;bottom:initial;display: none;}
#aboutFunc:after,#about2Func: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: 50px;}
.bookStyle{margin:0 auto}
.bookStyle .info.twins{display:none}
.bookStyle .info{width:200px;right: 50%;top: 57px;text-align:right;left:initial;}
.bookStyle .info h3{writing-mode:initial;margin-bottom:10px;text-align:right}
.bookStyle .info h3 a{color:#fff;background: #eb6100;display:inline-block;padding:5px 8px 5px 20px;font-size:40px;line-height:120%;}
.bookStyle .info h4{writing-mode:initial;display:inline-block;background: #eb6100;color:#fff;padding:2px 10px;position:relative;}
#news {
    width: 76%;
}
#news .newstitle {
    width: 25%;
}
#about2Func .abBox .aboutart {
    width: 80%;
    /* position: absolute; */
    /* right: 10%; */
    /* top: 192px; */
    animation-duration: 2s;
    animation-name: fadeInRight;
    position: static;
    margin: 41px 50px;
}
#about2Func .abBox #youtube {
    position: relative;
    padding-bottom: 74.25%;
    height: 0;
    overflow: hidden;
}
#about2Func .abBox #youtube {
    width: 87%;
    margin-bottom: 0px;
    margin-left: -8px;
    margin-top: -27px;
}
}
@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;
}
#articleInfo15 .bookList, #indexBook .bookList {
    margin-top: 15px;
    margin-bottom: 0px;
}
}
@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: 255px 0 100px;}
#about2Func{padding: 55px 0 0px;}
#aboutFunc:after,#about2Func: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%;
}
#about2Func .abBox #youtube {
    width: 88%;
    margin-bottom: 1px;
    margin-left: -338px;
    margin-top: -70px;
    padding-bottom: 115.25%;
    display: none;
}
#about2Func .abBox .aboutart {
    width: 79%;
    position: static;
    right: 17%;
    top: 132px;
    animation-duration: 2s;
    animation-name: fadeInRight;
}
#aboutFunc {
    position: relative;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    /* overflow: hidden; */
    background-color: #ffffff;
    color: #181818;
    padding: 240px 0 120px;
    background-image: url(/images/22/ab-bg.png);
    background-attachment: inherit;
    margin-top: -202px;
}
#news .newsList .newsbox .info h3 a {
    color: #646464;
    font-size: 18px;
}
#news .newsList .newsbox .info article {
    color: #595757;
    font-size: 15px;
    height: 46px;
}
#news .newsList .newsbox, #news .newsList .newsbox .info h3 {
    overflow: hidden;
    width: 118%;
}
#BookTitle .index-title h2 {
    font-size: 30px;
    line-height: 180%;
    padding-top: 18px;
}
}
@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: 13px;/* width: 52%; */}
	#indexBook h2.boxTitle { width: 90%; }
#aboutFunc{padding: 270px 0 20px;}
#about2Func{padding: 15px 0 20px;}
#aboutFunc .abBox .aboutart .more a,#about2Func .abBox .aboutart .more a{width:calc(100% - 100px);text-align:center}
#aboutFunc .abBox .aboutart h3,#about2Func .abBox .aboutart h3{font-size: 25pt;line-height: 31pt;}
	#articleInfo15 ul li {
		width: 100%;
	}
	#articleInfo15 .imgBox p {
		margin: 10px 0;
		width: 100%;
	}
	section.indexset ,
	#indexBook h2.boxTitle {width: 100%;}
.bookStyle{width:80%}
.bookStyle .info{right:initial;left:-8%;text-align:left}
.bookStyle .info h3{text-align:left}
#aboutFunc .abBox .aboutart .arts ,#about2Func .abBox .aboutart .arts {
    max-height: 434px;
    margin-bottom: 28px;
    font-weight: 400;
    font-size: 15px;
    letter-spacing: 0.5px;
}
.bookStyle .info {
    width: 200px;
    right: 18%;
    top: 57px;
    text-align: left;
    left: initial;
}
.bookStyle .info h3 a {
    color: #fff;
    background: #eb6100;
    display: inline-block;
    padding: 5px 8px 5px 20px;
    font-size: 30px;
    line-height: 120%;
}
#news {
    width: 84%;
    padding: 1px 25px 20px;
}
.indexset-box {
    width: 100%;
}
}
@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: 65px; }
	#indexbottom .noticetitle h2.boxTitle span { padding-bottom: 2px; left: 86px; top: 10px; }
#about2Func .abBox #youtube {
    width: 88%;
    margin-bottom: -41px;
    margin-left: -408px;
    margin-top: -130px;
    padding-bottom: 154.25%;
}
#about2Func .abBox .aboutart {
    width: 72%;
    position: absolute;
    right: 12%;
    top: 132px;
    animation-duration: 2s;
    animation-name: fadeInRight;
}
#about2Func .abBox .aboutart h2 {
    font-size: 22px;
    line-height: 110%;
    letter-spacing: 3px;
    color: #fff;
    background-color: #000;
    width: 69%;
    text-align: center;
    padding: 10px;
}
}

@media screen and (max-width: 450px) {
#about2Func .abBox #youtube {
    width: 88%;
    margin-bottom: -41px;
    margin-left: -408px;
    margin-top: -130px;
    padding-bottom: 154.25%;
}
#about2Func .abBox .aboutart {
    width: 81%;
    position: initial;
    right: 12%;
    top: 132px;
    animation-duration: 2s;
    animation-name: fadeInRight;
}
#about2Func .abBox .aboutart h2 {
    font-size: 18px;
    line-height: 110%;
    letter-spacing: 3px;
    color: #fff;
    background-color: #000;
    width: 69%;
    text-align: center;
    padding: 10px;
}
}