.wow{animation-duration:1.5s;animation-name:fadeInUp}
#aboutFunc{padding:90px 0 0;background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;animation-name: fadeInLeft;}
#aboutFunc .speBox{overflow:hidden;position:relative;min-height:670px}
#aboutFunc .youtubebox{width:calc(50% - 70px);padding:70px 70px 70px 0;background-image:url(/images/22/index_about_bg.jpg);background-repeat:no-repeat;background-position:0;background-size:cover;position:absolute;left:0;top:0;}
#aboutFunc #youtube{background-repeat:no-repeat;background-position:50% 50%;background-size:cover;animation-name:fadeInLeft;background-image: url(/userfiles/images/20190619040403977.jpg);}
#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 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%}
#aboutFunc #about{float: none;width: calc(72% - 155px);padding: 25px;position:relative;background: #ffffff4d;text-align: center;width: 1280px;max-width: 100%;margin: 0 auto;overflow: hidden;}
#aboutFunc #about .speBoxTitle{text-align:center;line-height:120%;font-size:40px;margin: 16px;color: #044476;}
#aboutFunc #about .subBoxTitle{text-align:center;color:#5d5d5d;font-weight:400;font-size: 25px;line-height:120%;margin: 10px 0 8px;font-family: 'Oswald',sans-serif;}
#aboutFunc #about .arts{text-align:center;color:#444;font-size:16px;line-height:180%;padding-bottom:40px;margin: 18px 0;letter-spacing: 1px;-webkit-transform: translateY(20px);-ms-transform: translateY(20px);transform: translateY(20px);-webkit-transition: all .6s 1.0s linear;-o-transition: all .6s 1.0s linear;transition: all .6s 1.0s linear;}
#aboutFunc #about .more{/* position:absolute; */bottom:0;border-bottom: 4px solid #044476;/* right: 623px; */width: 6%;padding-bottom: 7px;margin: 0 auto;overflow: hidden;text-align: center;margin-bottom: 19px;}
#aboutFunc #about .more a{font-family:'Oswald',sans-serif;font-weight:400;color: #09487a;font-size:20px;line-height:110%;display:inline-block;transition:all linear .2s;}

#freebox ul {
	overflow: hidden;
	position: relative;
	z-index: 1;
	width: 60%;
	position: relative;
	display: flex;
}
#freebox ul li {
	width: 33%;
	animation-name: fadeInUp;
	-webkit-animation-name: fadeInUp;
	display: flex;
	flex-direction: column;
	align-items: center;
}
#freebox ul li .item {
	padding: 20px 5px;
	display: flex;
	flex-direction: column;
	align-items: center;
}
#freebox ul li .item article{
	margin-top: 10px;
	color: #ebebeb;
	line-height: 180%;
	font-size: 15px;
	width: 95%;
	margin: 0 auto;
}
#freebox ul li .item .circle {
	position: relative;
	margin: 0 auto 0px;
	width: 80px;
	border: 1px rgba(255, 255, 255, 0) solid;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	box-sizing: border-box;
	text-align: center;
	font-size: 55px;
	line-height: 114px;
}
#freebox ul li .item h2{
	color:white;
	line-height:180%;
	width: 100%;
	text-align: center;
	border-bottom: #ffffff4f 1px solid;
}

#freebox 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); }
}
#freebox ul li .item p {
	text-align: center;
	font-size: 18px;
}
#freebox .imgBox {
	overflow: hidden;
}
#freebox .imgBox p {
	margin: 0 1% 0 0;
	overflow: hidden;
	float: left;
	width: 49%;
	animation-name: fadeInLeft;
	-webkit-animation-name: fadeInUp;
}
#freebox .imgBox p:nth-child(2) {
	margin: 0 0 0 1%;
	animation-name: fadeInRight;
	-webkit-animation-name: fadeInRight;
}
#freebox .imgBox p:hover img {
	-webkit-transform: rotate(3deg);
	-moz-transform: rotate(3deg);
	-ms-transform: rotate(3deg);
	-o-transform: rotate(3deg);
	transform: rotate(3deg);
}

#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;display: flex;flex-direction: row;flex-wrap: wrap;align-items: center;width: 100%;}
.controller #NewsBox{float:left;width:65%;background-repeat:no-repeat;background-position:50% 50%;background-size:cover;background-color:#000;background-image:url(/images/22/index_news_bg.jpg)}
.controller #bookBox{width: 68%;background-repeat:no-repeat;background-position:50% 50%;background-size:cover;position: relative;/* background-color:#000; */height: 600px;display: flex;align-items: center;}
#NewsBox{padding:100px 0;background-repeat:no-repeat;background-position:50% 50%;background-size:cover;width: 1366px;margin: 0 auto;max-width: 95%;}
#NewsBox .speBox{margin-bottom:50px}
#NewsBox .speBox .webframe{overflow:hidden;position:relative}
#NewsBox .speBox .webframe:after,#bookBox .speBox .webframe:after{content:'';display:block;width: calc(100% - 410px);height:1px;background: rgb(93 93 93 / 40%);position:absolute;bottom:50%;right: 0;}
#NewsBox .speBox .speBoxTitle,#bookBox .speBox h2{font-size: 30px;padding: 12px;line-height:100%;float:left;color: #262626;position:relative;z-index:2;padding-right:40px;display: flex;flex-direction: row;align-items: center;}
#NewsBox .speBox .subBoxTitle,#bookBox .speBox p{float:right;position:relative;z-index:2;margin-top:8px;display: none;}
#NewsBox .speBox .subBoxTitle a,#bookBox .speBox p a{color:#929292;font-weight:400;font-size:15px;display:inline-block;padding:10px 15px;background:#fff;margin-right:25px}
#NewsBox #news li{float:left;width: calc(33% - 5px);position:relative;margin: 0 10px 10px 0;border-radius: 25px;}

#NewsBox #news li:nth-child(even){float:right;margin:0 0 10px 5px}
#NewsBox #news li a{position:absolute;width:100%;height: 100%;left:0;top:0;z-index:3;}
#NewsBox #news li:hover .border .news-bottom .more{letter-spacing: 0.10em;}
#NewsBox #news li .border{position:relative;z-index:2;overflow:hidden;border-radius: 25px;}
#NewsBox #news li .border .photo{background-repeat:no-repeat;background-position:50% 50%;background-size:cover;overflow:hidden;transition:all linear .3s;}
#NewsBox #news li .border .photo img{width:100%}
#NewsBox #news li:hover .border .photo{transform:scale(1.1)}
#NewsBox #news li .news-info{position:absolute;top:0;left:0;/* width:calc(100% - 160px); */height: calc(100% - 160px);padding: 59px 83px 104px 83px;color:#fff;-webkit-transition:all .6s ease;-moz-transition:all .6s ease;-o-transition:all .6s ease;transition:all .6s ease;background-color: hsl(206deg 93% 24%);background-image: linear-gradient(to top,transparent,#022847);-moz-opacity:.9;-khtml-opacity:.9;-webkit-opacity:.9;opacity:.9;-ms-filter:alpha(opacity=90);filter:alpha(opacity=90);transition:all linear .3s;}
#NewsBox #news li:hover .news-info{background-image:none;background: rgb(31 31 31);}
#NewsBox #news li .news-info .news-bottom .date{font-size:15px;margin-bottom: 31px;color: #ffffff;}
#NewsBox #news li .news-info .news-bottom h3{font-size: 19px;line-height:120%;margin: 20px 0 30px;max-height: 89px;overflow:hidden;text-align: right;}
#NewsBox #news li .news-info .news-bottom .describe{line-height: 183%;font-size:16px;max-height: 155px;overflow:hidden;color: #e0e0e0;overflow: hidden;margin: 10px 0;height: 66px;text-align: center;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
#NewsBox #news li .news-info .news-bottom .more{display:inline-block;border: 1px solid #ffffff;padding: 11px 25px;font-size:13px;margin-top: 40px;border-radius: 25px;transition: all linear .3s;}
#NewsBox #news li .news-info .news-bottom .more a{
    position: relative;
    color: white;
}
#NewsBox .webframe {
    width: 1480px;
    margin: 0 auto;
}
#fakeNumber{background-image: url(/images/22/parallax-3.jpg);background-repeat:no-repeat;background-position:50% 50%;background-size:cover;/* padding: 88px 0px; */width: 32%;display: flex;justify-content: center;flex-direction: column;height: 600px;}
#fakeNumber .more{
    width: 70%;
    color: #fff;
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: column;
    margin-top: 20px;
    }
#fakeNumber ul{text-align:center}
#fakeNumber ul li{display:inline-block;width: 75%;color:#fff;text-align:center;position:relative;}
#fakeNumber ul li:after{content:'';width:4px;height:50px;display:block;background:#ffe30d;position:absolute;z-index:5;top:calc(50% - 25px);left:0;transform:skew(-35deg)}
#fakeNumber ul li:first-child:after{display:none}
#fakeNumber ul li .eva{background: rgba(255, 255, 255, 0);padding: 20px 5px;margin:0 auto;display:inline-block;}
#fakeNumber ul li .eva p{font-size: 23px;color: #2e2e2e;line-height: 148%;font-weight: 500;letter-spacing: 0.15em;}
#fakeNumber ul li .eva p b{font-size: 210px;margin-left: 0px;color: #044476;line-height: 114%;display: flex;margin-top: 0px;font-family: 'Oswald',sans-serif;flex-direction: column;}
#fakeNumber ul li .eva h2{text-align: end;font-size: 29px;margin-top: 13px;line-height:120%;color: #454545;letter-spacing: 0.15em;font-weight: 900;}

#bookBoxbg{}
#bookBox .speBox{position:absolute;top:-120px;left:calc(280px + 10%);z-index:3}
#bookBox .speBox p a{color:#9a9a9a}
#book{
    padding: 0px;
    position: relative;
    display: flex;
    width: 100%;
    flex-direction: column;
    align-content: center;
}
#book .bList{position:relative;}
#book .bList >div{/* z-index:3 */}
#book .bList:before{content: none;display:block;background-image:url(/images/22/index_more_leave.png);background-repeat:no-repeat;background-position:100% 100%;width:360px;height:290px;position:absolute;right:0;bottom:100%;z-index:2;max-width:50%;background-size:contain;}
#book .bList:after{content: none;display:block;background-image:url(/images/22/index_more_icon.png);background-repeat:no-repeat;background-position:50%;width:240px;height:200px;position:absolute;left:0;bottom:0;z-index:2;}
#book .mofd .photo a{
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: contain;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    }
#book .mofd h3{padding:50px 0;text-align:right;display: none;}
#book .mofd h3 a{display:inline-block;color:#fff;font-weight:400;font-size:18px;line-height:110%;border-bottom:1px solid rgba(255,255,255,0.27);padding:10px;padding-right:170px}
#freebox{
    background-color: #054577;
    padding: 100px 0 100px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    animation-name: fadeInLeft;
    background-image: url(/images/22/icon-bg.jpg);
    }
#freebox #freeboxlist{
    overflow:hidden;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    width: 1366px;
    margin: 0 auto;
    max-width: 92%;
    justify-content: space-between;
    }
#freebox #freeboxlist >div{display: flex;width: 38%;position: relative;text-align: center;align-items: center;}
#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%}
/* +hello
*----------------------------------------------------------------------------*/
#hello {
	padding: 80px 0;
	background: #fff;
	overflow: hidden;
}

#hello h2 {
	margin: 0 auto;
	width: 100%;
	text-align: center;
	font-size: 45px;
	color: #555555;
	font-weight: bold;
	margin-bottom: 20px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}
#hello h2 img{
	width:50px;
}
#hello h2 b {
	display: block;
	text-align: center;
	font-size: 24px;
}

#hello span {
	margin: 10px auto 0;
	width: 1160px;
	display: block;
	text-align: center;
	color: #fff;
}

#hello ul {
	margin: 0 auto;
	padding-top: 45px;
	width: 1366px;
	overflow: hidden;
	max-width: 95%;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
}

#hello ul li {
	width: 100%;
	text-align: center;
	display: flex;
	flex-direction: row;
	align-items: center;
	margin: 10px auto 20px;
}
#hello ul li img{
	width: 90px;
	background-color: #044476;
	padding: 5px;
}
#hello ul li h3 {
	text-align: center;
	font-size: 24px;
	color: #393939;
	display: flex;
	font-weight: bold;
	width: 300px;
	align-items: center;
	justify-content: center;
}

#hello ul li p {
	margin: 0 8px;
	line-height: 170%;
	color: #5d5d5d;
	font-size: 16px;
	text-align: justify;
	width: 100%;
}

#hello ul li.fadeInUp:nth-of-type(2) {
	-webkit-animation-delay: 0.5s;
}

#hello ul li.fadeInUp:nth-of-type(3) {
	-webkit-animation-delay: 1s;
}

#hello ul li.fadeInUp:nth-of-type(4) {
	-webkit-animation-delay: 1.5s;
}

#pandr-title .webframe,#page-form .webframe{overflow:hidden;width:1160px}
/* page */
#page-form .workframe {
    overflow: hidden;
    width: 85%;
    margin: auto;
}
#experience {
    margin-top: -51px;
    width: 92%;
}
#experience p{
    -webkit-appearance: none;
    width: 200px;
    text-align: center;
    background: #044476;
    border-radius: 24px;
    line-height: 40px;
    cursor: pointer;
    font-weight: bold;
}
#experience p {
    text-align: center;
    float: right;
    width: 200px;
}
#experience p a{
	color: #fff;
}
#page-form{
    background-color: #ffffff;
    background-image: url(/images/22/index-book-title-bg.png);
    background-repeat: no-repeat;
    background-position: 122% 125%;
    background-size: contain;
    padding: 20px 0 100px;
    color: #fff;
    background-attachment: fixed;
    overflow: hidden;
}
#page-form h2{text-align: left;color: #fff;font-weight: normal;font-size: 20px;margin: 0px 0 20px;padding: 20px 0;width: 100%;float: left;}
#page-form .small-talk p {
    text-align: right;
    color: #555555;
    font-weight: bold;
    font-size: 23px;
    margin: 0px 0px 20px;
    padding: 20px 11px;
    width: 25%;
    float: right;
    line-height: 160%;
    text-shadow: 1px 1px 7px #efefef;
    background-color: rgba(255, 255, 255, 0.32);
}
#page-form h2 img{}
#page-form h2 b{
    margin: 0 auto;
    font-size: 44px;
    vertical-align: text-bottom;
    display: inline-block;
    color: #555555;
    line-height: 110%;
}
#page-form fieldset{
    border: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
    width: 74%;
    margin: 23px 0;
}
#page-form form{
    border: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
    width: 60%;
    margin: 23px 0;
    position: relative;
}
#page-form .list{
    width: 100%;
    color: #fff;
    overflow: hidden;
    font-size: 17px;
    line-height: 120%;
    margin: 20px 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
#page-form .list btn{
	width: 50%;
    float: left;
    }
#page-form .list p{display: flex;align-items: center;width: 100%;}
#page-form .list:first-child p{
}
#page-form .list:first-child p:last-child label{
	width: auto;
	margin-left: 25px;
	font-size: 17px;
}
#page-form .list:first-child p span{width: auto;color: #555555;}
#page-form .list label{
    width: 301px;
    display: flex;
    font-size: 20px;
    font-weight: bold;
    color: #555555;
    align-items: center;
    flex-direction: row;
}
#page-form .list span{
    display: flex;
    font-weight: bold;
    margin-left: 3px;
    width: 100%;
}
#page-form .list input,
#page-form .list select{font-size: 17px;}
#page-form .list select{border-top-right-radius: 0;border-top-left-radius: 0;border-bottom-right-radius: 0;border-bottom-left-radius: 0;-webkit-appearance:none;background-image:url(/images/13/selectbutton.png);background-repeat:no-repeat;background-position:95% 50%;width: 103%;padding: 9px;background-color: #ffffffa1;border-radius: 28px;border: 1px solid #d0d0d0;background: rgba(255, 255, 255, 0);color: #555555;font-size: 15px;font-weight: bold;font-family: "微軟正黑體","蘋果儷中黑","Lucida Grande","Arial","Arial Narrow";}
#page-form .list input[type="text"]{width: calc(104% - 21px);padding: 7px;margin: 0 5px;border-top-right-radius: 0;border-top-left-radius: 0;border-bottom-right-radius: 0;border-bottom-left-radius: 0;border-radius: 28px;border: 1px solid #d0d0d0;background: rgba(255, 255, 255, 0);}
#page-form .list input#Checknum{width:100px;}
#page-form .list.last{/* width: 50%; */margin-top: 7px;float: right;}
#page-form .list.last p{text-align:center;text-align: right;float: right;width: auto;}
#page-form .list.last p input{
    -webkit-appearance:none;
    width: 200px;
    text-align: center;
    background: #eeeeee;
    color: #4f4f4f;
    border-radius: 24px;
    line-height: 38px;
    cursor: pointer;
    font-weight: bold;
    border: 1px solid rgba(152, 152, 152, 0.63);
    }
@media screen and (min-width: 1281px) {
	#page-form .list.last p input:hover{background: #d6d6d6;}
}
@media screen and (min-width: 1025px) {
#aboutFunc .youtubebox,.controller #bookBox{background-attachment:fixed;background-image: url(/images/22/bookBoxbg.jpg);/* padding: 20px 0; */}
#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 #about .more a:hover,#NewsBox .speBox .titleSet h3 a:hover,#bookBox .speBox p a:hover{letter-spacing:.2em}
#NewsBox .speBox .subBoxTitle a:hover,#bookBox .speBox p a:hover{color: #bd3738;}
}

@media screen and (max-width: 1200px){
#NewsBox #news li{
	width: 85%;
}
#NewsBox #news li img{
	height:300px;
}
#NewsBox #news li:nth-child(even){
	float:left;
}
}
@media screen and (max-width: 1440px) {
#NewsBox .webframe {
    width: 86%;
    margin: 0 auto;
}	
#hello ul{
    width: 1160px;
}
#NewsBox #news li .news-info{
    width: calc(109% - 100px);
    height: calc(116% - 112px);
    padding: 34px;
    }
#NewsBox #news li .news-info .news-bottom h3{font-size:32px;margin:30px 0;max-height:78px}
#NewsBox #news li .news-info .news-bottom .more{margin-top:30px}
#NewsBox #news li .news-info .news-bottom h3{    font-size: 16px;
    margin: 30px 0;
    max-height: 78px;}
#NewsBox #news li .news-info .news-bottom .more{margin-top:30px;/* display: none; */}
#NewsBox #news li .news-info .news-bottom .describe {
    line-height: 183%;
    font-size: 15px;
    max-height: 155px;
    overflow: hidden;
    color: #a3a3a3;
    height: 51px;
}	
}
@media screen and (max-width: 1366px) {
#freebox #freeboxlist >div {
    width: 33%;
}
#fakeNumber {
    padding: 22px 0px;
}
#fakeNumber ul li .eva p b {
    font-size: 166px;
}
#fakeNumber ul li .eva p {
    font-size: 30px;
}
#fakeNumber ul li .eva h2 {
    font-size: 27px;
    margin-top: 15px;
}


#fakeNumber .more {
    width: 72%;
}
#NewsBox .webframe {
    width: 86%;
    margin: 0 auto;
    padding-bottom: 15px;
}	





}

@media screen and (max-width: 1280px) {
#book{}
#NewsBox #news li .news-info .news-bottom .describe{max-height:50px}
#NewsBox #news li .news-info .news-bottom h3{font-size: 17px;margin: 33px 0;max-height:62px;margin-right: 20px;}
#fakeNumber ul li .eva p b{font-size: 105px;}
#fakeNumber ul li .eva h2{font-size:14px}
#page-form .workframe{width:90%}
#page-form .small-talk p {
    text-align: right;
    color: #555555;
    font-weight: bold;
    font-size: 23px;
    margin: 0px 0px 20px;
    padding: 20px 11px;
    width: 100%;
    float: right;
    line-height: 160%;
    text-shadow: 1px 1px 7px #efefef;
    background-color: rgba(255, 255, 255, 0.32);
}
#page-form fieldset{
    width: 100%;
}
#page-form .list input[type="text"] , #page-form .list select{background-color: #fafafa;}
}
@media screen and (max-width: 1199px) {
	#hello ul li{
    display: flex;
    flex-direction: column;
    align-items: center;
}
#hello ul li p{
	width:500px;
	max-width:95%;
	margin: 20px 0;
}
#hello ul li h3{margin-top: 20px;}
}
@media screen and (max-width: 1024px) {
#aboutFunc{padding:10px 0}
#aboutFunc .speBox{min-height:initial}
#aboutFunc .youtubebox{width:calc(100% - 160px);padding:50px;margin:30px;position:initial}
#aboutFunc #about{width:calc(100% - 60px);padding:50px 30px}
#aboutFunc #about .speBoxTitle,#product .titleSet .speBoxTitle{font-size:32px;    margin: 0px;}
#aboutFunc #about .subBoxTitle,#product .titleSet .subBoxTitle a{    font-size: 26px;
    margin: 0 0 0px;}
#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}
.controller{
	display:flex;
	flex-direction: column;
}
#fakeNumber{
	width:100%;
	height: auto;
}
#freebox #freeboxlist >div{
    width: 88%;
    margin-right: 0;
    padding: 0px 10px 7px 20px;
    }
	#hello h2 ,
	#hello span ,
	#hello ul ,
	#marketing section .marketing-wrap ,
	#experience section {
		width: 960px;
	}
#freebox {
    padding: 35px 0 35px;
}
#aboutFunc #about .more {
    right: 487px;
}
#freebox ul {
    float: none;
    width: 90%;
    margin: 0 auto;
    padding: 0px 0px 0px 0px;
    position: relative;
}
	

#freebox ul li {
    float: left;
    width: 33%;
    margin: 0 auto;
    animation-name: fadeInUp;
    -webkit-animation-name: fadeInUp;
}
	#aboutFunc .youtubebox, .controller #bookBox {
    background-attachment: fixed;
    background-image: url(/images/22/bookBoxbg.jpg);
    padding-top: 20px;
    width: 100%;
}
	#book .mofd .photo {
}
#NewsBox #news li {

    float: left;
    width: calc(32% - 5px);
    position: relative;
    margin: 0 14px 10px 0;
    border-radius: 25px;
}
#NewsBox #news li:nth-child(even) {
    float: right;
	margin: 0 0 0px 0px;
}
#NewsBox #news li .news-info .news-bottom h3 {
    font-size: 18px;
    margin: 28px 0;
    max-height: 62px;
}	
#NewsBox #news li .news-info {
    width: calc(115% - 100px);


    height: calc(125% - 112px);
    /* padding: 34px; */
}
}
@media screen and (max-width: 980px) {
#NewsBox #news li .news-info .news-bottom .more{margin-top:20px;padding:8px 20px}
#NewsBox #news li .news-info .news-bottom h3{font-size:17px;margin:20px 0;max-height:52px}
#fakeNumber ul li .eva{padding:40px 20px;width:calc(100% - 44px)}
#page-form .list{width:100%;height:auto;flex-direction: column;}
#page-form .list:first-child p{flex-direction: row;align-items: flex-start;}
#page-form .list:first-child p:first-child{margin-bottom: 25px;flex-direction: column;}
#page-form .list:first-child p span{width: calc(100% - 106px);}
#page-form .list:first-child p.ra span{ width:auto;}
#aboutFunc #about .more {
    right: 468px;
}
#book .mofd .photo {
}		
}

@media screen and (max-width: 780px) {
#fakeNumber {
    width: 100%;
    float: none;
    margin: auto;
}
#fakeNumber ul li{width:calc(95% - 4px);margin-bottom:0px;}
#fakeNumber ul li .eva {
    padding: 20px 5px;
    width: calc(100% - 44px);
}
#fakeNumber ul li .eva p {
    font-size: 22px;
    line-height: 120%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
#fakeNumber ul li .eva p b{
    font-size: 130px;
    top: 0;
    margin-left: 30px;
}
	#fakeNumber ul li .eva h2 {
    font-size: 17px;
    width: 100%;
    margin-top: 0px;
    font-size: 24px;
    text-align: center;
}
#fakeNumber .more {
    width: 100%;
}
#aboutFunc .youtubebox, .controller #bookBox{
	 background-attachment: fixed;
    background-image: url(/images/22/bookBoxbg.jpg);
    padding-top: 39px;
    width: 100%;
    padding: 27px 0px 7px;
    position: inherit;
}
#NewsBox #news li{
	width: 95%;
	display: block;
}
#NewsBox{
    padding-bottom: 50px;
}
#NewsBox #news li .border .photo img{
	height: 330px;
}
#NewsBox #news li:nth-child(even){
	float: left;
}
#NewsBox #news li .news-info{
	width: 60%;
	height: 200px;
	padding: 90px;
}
#page-form .list label{
	width: 100%;
	display: block;
	margin-bottom: 20px;
}
#page-form .list p{
	display:flex;
	flex-direction: column;
}
#page-form .list.last{
    float: left;
    width: 97%;
}
#experience p{
    width: 100%;
    float: left;
    margin-left: 3%;
}
}
@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}
#NewsBox #news li .news-info{
    width: 74%;
    height: 200px;
    padding: 70px 70px;
    }
#NewsBox #news li .news-info .news-bottom .describe{
	overflow: hidden;
	margin: 10px 0;
	height: 75px;
	text-align: left;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	font-size: 20px;
	max-height: 100px;
	}
#fakeNumber ul li{width:calc(95% - 4px);margin-bottom:0px;display: flex;flex-direction: column;align-items: center;align-content: center;}
#fakeNumber ul li:nth-child(3),#fakeNumber ul li:nth-child(4){margin-bottom:0}
#fakeNumber ul li:nth-child(3):after{display:none}
#hello h2 ,
#hello span ,
#hello ul ,
#marketing section .marketing-wrap ,
#experience section {
	margin: 0 15px;
	width: auto;
}
#hello h2{
	line-height:180%;
	font-size: 33px;
}
#hello h2 img{
    width: 23px;
    vertical-align: baseline;
}
#hello ul li {
}
#hello ul li p {
	min-height: 46px;
}
#page-form .small-talk p{
	text-align: left;
	margin: 0;
	padding: 0;
}
#page-form .workframe{
	
background-color: #ffffffa6;
	
width: 100%;
	
padding: 0 20px;
}
#freebox #freeboxlist  #iconTitle{
    width: 100%;
    margin: 0 auto;
    display: block;
}
#freebox #freeboxlist #iconTitle h3{
	text-align:center;
	margin: 0 auto;
}
#freebox ul{
	width:100%;
}
#freebox ul li{
	width:100%;
}
#freebox ul li .item .circle{
	height:auto;
	width: 95px;
}
#freebox ul li .item article{
	text-align:center;
	width: 65%;
	margin: 0 auto;
	display: block;
}
#page-form .list select{width:100%;}

#page-form .list input[type="text"]{width: calc(100% - 15px);}
#page-form .list input#Checknum{margin-left: 0;}
#aboutFunc #about .more {
    right: 377px;
}
#fakeNumber ul li .eva p b {
    font-size: 110px;
    margin-left: 0;
}
#fakeNumber .more {
    width: 100%;
}
	#fakeNumber ul li .eva {
    width: calc(100% - 44px);
    display: flex;
    flex-direction: column;
    align-items: center;
}
#NewsBox #news li .news-info .news-bottom .date {
    font-size: 15px;
    margin-bottom: 15px;
    color: #676767;
}
#NewsBox #news li .news-info .news-bottom h3 {
    font-size: 20px;
    margin: 20px 0;
    max-height: 52px;
}

#page-form form, #page-form fieldset {
    border: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
    width: 98%;
}
#experience {
    margin-top: 30px;
    /* width: 31%; */
}
#page-form .list:first-child p span {
    width: calc(80% - 106px);
}
}
@media screen and (max-width: 640px) {
	#hello ul li{
}
	#NewsBox #news li a{
    z-index: 0;
}
#aboutFunc .youtubebox{width:calc(100% - 70px);padding:20px;margin:10px 15px}
#aboutFunc #about .more{
    width: 17%;
    right: 277px;
    }
#aboutFunc #about .arts {
	padding-bottom: 16px;}
	
	
#aboutFunc #about .more a{font-size:17px}
#prolay .p-box .p-border .p-info{max-width:calc(75% - 40px);padding:20px}
#book .mofd h3{padding:30px 0 50px}
#book .mofd .photo a img{
    height: 150%;
    max-width: 150%;
    width: 120%;
}
#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}
#NewsBox,#aboutFunc{padding: 0 0 0px 0;background-position: 30% 50%;}
#NewsBox #news li,#NewsBox #news li:nth-child(even){width:100%;margin:5px 0 0;float:none}
	#hello ul li p {
	    /* min-height: 70px; */
	    text-align: center;
	    width: 400px;
	}
#fakeNumber {
    padding: 26px 0px;
    width: 100%;
    float: none;
    margin: auto;
}
#aboutFunc .youtubebox, .controller #bookBox {
    background-attachment: fixed;
    background-image: url(/images/22/bookBoxbg.jpg);
    padding-top: 39px;
    width: 100%;
    padding: 27px 0px 7px;
    position: inherit;
    }
#fakeNumber ul li .eva p b {
    font-size: 110px;
    margin-left: 40px;
    line-height: 180%;
    top: 0;
}
#fakeNumber ul li .eva p {
    font-size: 28px;
    line-height: 0%;
}
#fakeNumber ul li .eva {
    padding: 20px 5px;
    width: calc(100% - 44px);
}
#fakeNumber ul li .eva p {
    font-size: 32px;
    line-height: 120%;
    width: 100%;
}
#fakeNumber ul li .eva h2 {
    font-size: 17px;
    width: 40%;
    float: right;
    margin-top: -23px;
}
#fakeNumber .more {
    width: 40%;
}
	#fakeNumber ul li .eva h2 {
    font-size: 17px;
    width: 100%;
    float: left;
    margin-top: 0px;
    font-size: 24px;
}
#NewsBox #news li, #NewsBox #news li:nth-child(even) {
    width: 96%;
    /* margin: 5px 14px 10px; */
    float: none;
}
#NewsBox #news li .news-info {
    width: calc(100% - 60px);
    height: calc(100% - 60px);
    padding: 30px;
}
	#NewsBox #news li .news-info .news-bottom .date {
    font-size: 15px;
    margin-top: 30px;
}
	#NewsBox #news li .news-info .news-bottom h3 {

    font-size: 22px;
    margin: 20px 0;
    max-height: 52px;
}
	#NewsBox #news li .news-info .news-bottom .more {
    margin-top: 20px;
    padding: 8px 20px;
}
	#NewsBox #news li .news-info .news-bottom .describe {
    max-height: none;
    /* overflow: auto; */
    white-space: pre-wrap;
    text-overflow: ellipsis;
    font-size: 19px;
    max-height: 150px;
    }
#experience {
    margin-top: 0px;
    width: 92%;
}
}


@media screen and (max-width: 480px) {
#news .border .news-info{margin:10px 0;margin-top:-50px;padding:10px}
#news .border .news-info h3{margin:10px 0 20px}
#book .bList:after{background-size:100%;width:80px;background-position:100% 100%}
#book .mofd h3 a{padding-right:100px}
#book .mofd h3{padding:20px 0 30px}
#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}
#NewsBox .speBox .speBoxTitle,#bookBox .speBox h2{font-size: 22px;margin-top: 50px;}
#NewsBox .speBox .subBoxTitle,#bookBox .speBox p{float:none;clear:both;text-align:right;margin:0}
#NewsBox .speBox .webframe:after,#bookBox .speBox .webframe:after{bottom:20px}
#NewsBox #news li .news-info{/* width:calc(100% - 80px); *//* height:calc(100% - 80px); */padding: 40px;height: 100%;}
#aboutFunc #about .speBoxTitle, #product .titleSet .speBoxTitle{
	font-size:25px;
}
	#freebox ul li {
    width: 100%;
    display: inline-block;
    margin: 0 auto;
    animation-name: fadeInUp;
    -webkit-animation-name: fadeInUp;
    vertical-align: top;
    padding: 20px 0;
}
#hello ul li{
}
#hello ul li img{
	width:100px;
}
#hello ul li h3{
    margin: 20px 0;
}
#freebox ul li:nth-child(3) {
    width: 100%;
}
#freebox ul {
    float: none;
    width: 100%;
    margin: 1px;
    position: relative;
    display: flex;
    flex-direction: column;
}
#freebox ul li .item {
    padding: 0 0;
    width: 100%;
}
	
#fakeNumber ul li .eva p {
    font-size: 25px;
    line-height: 128%;
    width: 88%;
}
	#fakeNumber ul li .eva p b {
    font-size: 108px;
    margin-left: 0;
}
#fakeNumber ul li .eva {
    padding: 2px 5px 16px;
    /* width: calc(100% - 107px); */
}
#fakeNumber .more {
    width: 58%;
}
#aboutFunc .youtubebox, .controller #bookBox {
    background-attachment: fixed;
    background-image: url(/images/22/bookBoxbg.jpg);
    padding-top: 10px;
    width: 100%;
    position: inherit;
    height: 300px;
}
	
#NewsBox #news li .news-info .news-bottom .describe {
    /* max-height: none; */
    /* overflow: auto; */
    /* white-space: pre-wrap; */
    /* text-overflow: ellipsis; */
    font-size: 16px;
    /* max-height: 152px; */
    max-height: initial;
    overflow: hidden;
    /* white-space: nowrap; */
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
}
#NewsBox #news li .news-info .news-bottom .date {
    margin-top: 31px;

}
#hello h2{
    margin: 0 15px;
    width: auto;
    line-height: 140%;
    font-size: 22px;
}
#hello ul li p {width: 82%;margin: 0 auto;text-align: justify;padding: 0;}
#page-form form{width: 100%;position: relative;}
#page-form .workframe{
    padding: 0;
    width: 90%;
}
#page-form h2 {
    text-align: left;
    color: #fff;
    font-weight: normal;
    font-size: 21px;
    margin: 0px 0 20px;
    padding: 20px 0;
    width: 100%;
    float: left;
}
#page-form h2 b{
	font-size: 36px;
}
#page-form .small-talk p {
    font-size: 18px;
    margin: 0px 0 20px;
    padding: 1px 0;
    width: 100%;
    float: right;
    line-height: 160%;
}	
#page-form {
    padding: 12px 0px;
}
#page-form .list label {
    margin-bottom: 12px;
}
#page-form .list:first-child p:last-child label {
    width: auto;
    margin-left: 0px;
    font-size: 17px;
}
#page-form .list:first-child p span {
    width: calc(100% - 106px);

}
#page-form .list span {
    display: inline-block;
    width: calc(150% - 191px);
    font-weight: bold;
    margin-left: 3px;
}	
#page-form .list:first-child p span {
    width: calc(100% - 106px);
}
#experience {
    /* margin-top: -52px; */
    /* width: 47%; */
}
#page-form .list:first-child p.ra span {
    width: auto;
    margin-bottom: 12px;
}
#NewsBox #news li .news-info .news-bottom h3 {
    font-size: 15px;
    line-height: 120%;
    margin: 20px 0 30px;
    max-height: 89px;

    overflow: hidden;
    text-align: inherit;
}
}

@media screen and (max-width: 380px) {
	#NewsBox #news li .news-info .news-bottom .describe {
    font-size: 16px;
    max-height: initial;
    /* overflow: hidden; */

    /* white-space: nowrap; */
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    height: 112px;
}
}