.wow{animation-duration:0.7s;animation-name:fadeInLeft}
#content{    background-color: white;}
#freebox{background: #ffffff;overflow:hidden;padding: 70px 0;float: left;width: 55%;}
#freebox .freebox-title{float:left;width:15%;color:#fff;margin-left:10%;position:relative;z-index:2}
#freebox .freebox-title h2{line-height:100%;transform:rotate(-90deg) translateX(-50%);text-align:right;font-size:16px;font-weight:400;color:#8f8f8f}
#freebox #freeboxlist{/* color:#fff; *//* float:left; *//* width:50%; *//* position:relative; *//* z-index:2; */}
#freebox #freeboxlist .freeList > div{
    display: inline-block;
    width: calc((100%/2) - 70px);
    text-align: center;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
    margin: 10px 8px;
    padding: 15px 25px;
}
#freebox .freeList .free h3{line-height:110%;font-size: 18px;color: #1d1d1d;margin-top: 10px;text-align: center;}
#freebox .freeList .free p{margin-top: 10px;font-size: 15px;line-height: 170%;color: #1d1d1d;}
#freebox .hidetext{position:absolute;right:0;width:50%;color:#151515;font-size:300px;line-height:90%;top:0;height:100%;z-index:1;font-family:'Archivo Black',sans-serif;font-weight:400;word-wrap:break-word}
#aboutssban{width: 1160px;margin: 0 auto;overflow: hidden;}
#aboutFunc{/* position:relative; *//* background-repeat:no-repeat; *//* background-position:50% 50%; *//* background-size:cover; *//* overflow:hidden; *//* background-color:#040404; *//* color:#fff; */padding: 70px 0;background-color: white;float: left;width: 45%;}
#aboutFunc .abBox{position:relative;z-index:3}
#aboutFunc .abBox #youtube{width:62%;background-repeat:no-repeat;background-position:50% 50%;background-size:cover}
#aboutFunc .abBox .aboutart{/* width:28%; *//* position:absolute; *//* right:5%; *//* top:150px; */animation-duration:2s;animation-name: fadeInRight;}
#aboutFunc .abBox .aboutart h3{font-size: 14px;line-height:110%;margin-bottom: 10px;color: #2c52a0;font-family: 'Poppins', sans-serif;font-weight: 400;}
#aboutFunc .abBox .aboutart h2{font-size: 36px;line-height:110%;}
#aboutFunc .abBox .aboutart h6{
    margin-top: 160px;
}
#aboutFunc .abBox .aboutart h6 b{
    font-size: 14px;
    color: #1d1d1d;
}
#aboutFunc .abBox .aboutart h6 b a{
    font-size: 21px;
    margin-left: 5px;
}
#aboutFunc .abBox .aboutart .arts{font-size: 16px;line-height:160%;color: #131313;margin-top:20px;margin-bottom:60px;/* max-height: 195px; *//* overflow:hidden; */letter-spacing: 2px;line-height: 170%;padding-right: 60px;}
#aboutFunc .abBox .aboutart .more a{display:inline-block;background: #2c52a0;color: #ffffff;font-size:13px;font-weight:700;line-height:110%;padding: 15px 70px;border-radius: 50px;font-family: 'Poppins', sans-serif;}
#aboutBox #youtube{position:relative;background-repeat:no-repeat;background-position:50% 50%;background-size:cover;margin-top:20px}
#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%}
/* product */
#product { position: relative; padding: 2vw 0 1vw; background-color: #eff1f5; }
#product p.more{
    text-align: center;
    color: #2c52a0;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 14px;
    margin-bottom: 10px;
    animation-duration: 2s;
    animation-name: fadeInDown;
}
#product h2.title{
    text-align: center;
    font-size: 36px;
    line-height: 110%;
    margin-bottom: 20px;
    animation-duration: 2s;
    animation-name: fadeInDown;
}
#product .slick-list { padding: 0 15%; }
#product .pro-list .slick-slide { padding-bottom: 50px; }
#product .pro-list .slick-slide a.photo {margin: 20px;padding-bottom: 0;box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);overflow: hidden;background-position: 50%;background-repeat: no-repeat;background-size: cover;display: block;}
#product .pro-list .slick-slide.slick-current a.photo { }
#product .pro-list .slick-slide.slick-current { padding-bottom: 0; }
#product .pro-list .slick-slide .info { margin: 20px 40px; }
#product .pro-list .slick-slide .info h3, #product .pro-list .slick-slide .info p{
    text-align: center;
}
#product .pro-list .slick-slide .info article{
    display: none;
    text-align: center;
    font-size: 16px;
    color: #0f0f10;
    animation-duration: 2s;
    animation-name: fadeInDown;
}
#product .pro-list .slick-slide.slick-current .info article{ display: block
;}
#product .pro-list .slick-slide .info p a{
    color: #737476;
    font-size: 14px;
    font-family: 'Poppins', sans-serif;
}
#product .pro-list .slick-slide .info h3 a {height: 34px;line-height: 34px;font-size: 20px;color: #161717;-webkit-line-clamp: 1;font-weight: normal;}
#product .pro-list .slick-slide.slick-current .info h3 a { font-size: 20px; color: #000; }
#product .pro-list .slick-slide .info p.price { min-height: 30px; opacity: 0; }
#product .pro-list .slick-slide.slick-current .info p.price { opacity: 1; }
#product .pro-list .slick-slide .info p.price span { margin-right: 10px; display: inline-block; font-size: 16px; color: #ce0000; vertical-align: middle; }
#product .pro-list .slick-slide .info p.price span.old { text-decoration: line-through; font-size: 12px; color: #c4c4c4; }
#product .btn { width: 100%; text-align: center; }
#product .btn a {position: absolute;width: 97px;height: 97px;background: #161717;box-shadow: 0 5px 10px rgba(0, 0, 0, .2);display: inline-block;left: calc((100% / 3) - 0px);bottom: 80px;}
#product .btn a:before , #product .btn a:after {position: absolute;width: 40%;height: 1px;background: #fff;bottom: 42%;right: 30%;transition: right .2s ease-in;content: "";}
#product .btn a:after {margin: 1px 0 0 1px;width: 1.3vw;bottom: 50%;left: 25%;-webkit-transform: rotate(-45deg);transform: rotate(-45deg);}
#product .btn a#nextBtn {background: #161717;left: auto;right: calc((100% / 3) - 0px);}
#product .btn a#nextBtn:before , #product .btn a#nextBtn:after {background: #ffffff;}
#product .btn a#nextBtn:after {margin: 1px 1px 0 0;left: auto;right: 25%;-webkit-transform: rotate(45deg);transform: rotate(45deg);}

/* page-form */
#page-form {padding: 70px 0;background-position: 50% 100%;background-image: url(/images/16/index-contactBg.jpg);background-repeat: no-repeat;}
#page-form section{
    width: 768px;
    margin: 0 auto;
    overflow: hidden;
}
#page-form h6{
    font-size: 14px;
    line-height: 110%;
    margin-bottom: 10px;
    color: #2c52a0;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    margin-top: 0;
}
#page-form form , #page-form fieldset { margin: 0; padding: 0; border: 0; }

#page-form fieldset.btn p{
    width: 60%;
}
#page-form fieldset.btn p img{
    margin-left: 12px;
}
#page-form p {overflow: hidden;color: #fff;font-size: 16px;margin: 8px 5px;display: inline-block;width: calc((100%/2) - 15px);}
#page-form fieldset.btn p.tt{
    text-align: end;
    font-size: 15px;
    width: 36%;
}
#page-form fieldset.btn p.send{
    display: block;
    width: 20%;
    margin: 0 auto;
}
#page-form label { float: left; width: 100px; text-align: right; padding: 5px 0; }
#page-form span {width: 100%;display: block;}
#page-form .ra span { width: auto; float: left; margin-left: 10px; padding: 5px 0; }
#page-form input[type="text"] , #page-form select {width: calc(100% - 22px);padding: 10px;border-radius: 5px;font-size: 16px;color: #292929;}
#page-form input#Checknum {width: 347px;/* margin-left: 10px; */}
#page-form select {width: calc(100% - 1px);/* background-color: white; */background: url(/images/16/arrow.png) no-repeat scroll 98% center white;-webkit-appearance: none;}
#page-form p.send input {background: #2c52a0;color: #fff;text-align: center;width: 100%;padding: 10px 0;border-radius: 50px;font-size: 14px;/* letter-spacing: 0.2em; */outline: none;margin-top: 15px;font-family: 'Poppins', sans-serif;font-weight: 300;}
#page-form h2 {color: #ffffff;margin-bottom: 10px;font-size: 36px;line-height: 110%;}
#page-form h2 img { margin-right: 5px; vertical-align: bottom; }
#page-form h2 b { display: inline-block; font-size: 24px; color: #353535; margin-right: 10px; vertical-align: baseline; }

/* bookBox */
#bookBox {overflow: hidden;position: relative;/* margin: 4vw 0 1vw; *//* background: linear-gradient(180deg,#fff 0,#fff 280px,#bd9672 0,#bd9672); */padding: 70px 0;}
#bookBox ul li {position: relative;/* padding-bottom: 70px; */}
#bookBox ul li a.photo {margin: 20px 50px;background-color: #fff;box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.15);overflow: hidden;background-position: 50%;background-repeat: no-repeat;background-size: cover;display: block;}
#bookBox ul li .info {position: absolute;/* margin-bottom: 20px; */padding: 25px;width: 315px;/* min-height: 431px; */background: rgba(255, 255, 255, 0.8);/* border-top: 5px #bd9672 solid; */box-sizing: border-box;box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.15);left: 7%;bottom: 11%;z-index: 10;}
#bookBox ul li .info h3{
    text-align: center;
}
#bookBox ul li .info h3 a {/* margin-bottom: 30px; *//* height: 51px; */font-weight: 400;font-size: 30px;color: #222224;-webkit-line-clamp: 1;}
#bookBox ul li .info article {/* height: 120px; */font-size: 15px;color: #000;/* -webkit-line-clamp: 4; */text-align: center;margin-bottom: 15px;}
#bookmore {text-align: center;color: #2c52a0;font-family: 'Poppins', sans-serif;font-weight: 400;font-size: 14px;margin-bottom: 10px;animation-duration: 2s;animation-name: fadeInDown;}
#bookBox h2.title {
    text-align: center;
    font-size: 36px;
    line-height: 110%;
    margin-bottom: 25px;
    animation-duration: 2s;
    animation-name: fadeInDown;
}
#NewsBox{background-color:#262626;background-repeat:no-repeat;background-position:50% 50%;background-size:cover}
#NewsTitle{padding:120px 0}
#NewsTitle .index-title{margin-left:20px}
#NewsTitle .index-title h2{color:#b0b0b0;font-size:15px}
#NewsTitle .index-title h2 span{background:#b0b0b0}
#NewsTitle .workframe,#news ul,.NewsMore p{width:80%;margin:0 auto}
#news li .border{margin:0 20px 40px}
#news li .border .photo a{display:block;background-repeat:no-repeat;background-position:50% 50%;background-size:cover;position:relative}
#news li .border .photo a img{width:100%;transition:all linear .3s}
#news li .border .photo a p{position:absolute;top:0;left:0;background:#930c0c;color:#fff;font-size:14px;line-height:120%;overflow:hidden;padding:25px;max-width:30px}

#news li .border .news-info{background:#fff;padding:30px}
#news li .border .news-info .news-bottom{color:#c71919;font-size:7pt;line-height:110%;font-family:'Archivo Black',sans-serif}
#news li .border .news-info h3 a{font-size:16px;line-height:100%}
#news li .border .news-info h3:first-letter{font-size:28px;display:inline-block;line-height:100%}
#news li .border .news-info .describe{color:#858585;font-size:15px;line-height:150%;margin:22px 0;max-height:132px;overflow:hidden}
#NewsBox .NewsMore{padding:50px 0 70px}
#NewsBox .NewsMore p{text-align:right}
#NewsBox .NewsMore p a{display:inline-block;margin-right:20px;color:#fff;font-size:14px}
#NewsBox .NewsMore p a span{display:inline-block;width:40px;height:40px;text-align:center;line-height:40px;border:1px solid #666;border-radius:50%;color:#fff;margin-left:15px}
#ssbanner{animation-name:fadeInUp}
#ssbanner .bxslider div{position:relative;overflow:hidden}
#ssbanner .bxslider a{height:100%;display:block;position:absolute;left:0;top:0;width:100%;z-index:2}
#ssbanner .bxslider img{width:100%}
#ssbanner .bxslider .infot{background-repeat:no-repeat;background-position:50% 50%;background-size:cover;overflow:hidden}
#ssbanner .bxslider .infot h4{position:absolute;color:#fff;font-size:30px;line-height:110%;bottom:50px;left:50px;width:calc(100% - 100px);z-index:5}
.longbar{display:inline-block;width:80px;height:1px;background: #2b52a0;margin-right:15px;}
#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:#1b1b1b;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}
@media screen and (min-width: 1025px) {
#prolay .pro-list .p-box:hover:after,#ssbanner .bxslider .slick-slide:hover a:after{animation-name:rush;animation-iteration-count:1;animation-delay:.2s;animation-duration:.8s;animation-timing-function:cubic-bezier(.215,.61,.355,1)}
#prolay .pro-list .p-box:hover:before,#ssbanner .bxslider .slick-slide:hover a:before{animation-delay:0;animation-direction:normal;animation-duration:.3s;animation-fill-mode:both;animation-iteration-count:1;animation-name:rush2;animation-timing-function:cubic-bezier(.215,.61,.355,1)}
#news li{display:inline-block;vertical-align:top;width:calc(25% - 4px);margin-right:-4px;animation-name:fadeInUp}
#news li:first-child{width:50%}
#news li:nth-child(odd){animation-duration:2s}
#news li .border .photo a:after{content:'VIEW';position:absolute;top:calc(50% - 12px);left:calc(50% - 17px);font-family:'Archivo Black',sans-serif;color:#fff;font-size:12px;font-weight:400;transition:all linear .3s;transform:rotateY(270deg);opacity:0}
#news li .border .photo:hover a img{background:rgba(0,0,0,0.46)}
#news li .border .photo:hover a:after{opacity:1;transform:rotateY(360deg)}
#aboutFunc .abBox .aboutart .more a,#book .bookStyle .info h5 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,#book .bookStyle .info h5 a:hover{color:#fff}
#aboutFunc .abBox .aboutart .more a span,#book .bookStyle .info h5 a span{position:relative;z-index:2}
#aboutFunc .abBox .aboutart .more a:after,#book .bookStyle .info h5 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:#292929;z-index:1}
#aboutFunc .abBox .aboutart .more a:hover:after,#book .bookStyle .info h5 a:hover:after{transform:scale(1,1);transform-origin:left center 0}
#NewsBox .NewsMore p a:hover span{transform:scaleX(-1)}
#page-form{
    background-attachment: fixed;
}
}
@media screen and (max-width: 1440px) {
#freebox .hidetext{font-size:250px}
#aboutFunc .abBox .aboutart{top:80px}
#ssbanner .bxslider .infot h4{font-size:27px}
#NewsTitle .workframe,#news ul,.NewsMore p{width:90%}
}
@media screen and (max-width: 1280px) {
#aboutFunc .abBox .aboutart{top:50px}
#aboutFunc .abBox .aboutart h2{font-size:32px}
#aboutFunc .abBox .aboutart h3{margin-bottom:30px}
#bookBox ul li a.photo { margin: 0 25px; }
#bookBox ul li a.photo img { max-width: inherit; }
#aboutFunc .abBox .aboutart h6 {    margin-top: 135px;}
#product .btn a {    width: 75px;    height: 75px;    bottom: 110px;}
}
@media screen and (max-width: 1024px) {
#freebox .hidetext{font-size:100px;width:380px;height:300px;bottom:0;top:initial;text-align:right;right:20px}
#freebox{float: none;width: 80%;margin: 0 auto;padding: 0 0 70px;}
#freebox .freebox-title{float:none;width:80%;margin-bottom:10px}
#freebox .freebox-title h2{transform:none;text-align:left}
#aboutFunc{float: none;    width: 100%;}
#aboutFunc .abBox .aboutart h6 {    margin-top: 0;}
#aboutFunc .abBox .aboutart{position:inherit;position:initial;width:80%;margin-left:10%}
#aboutFunc .abBox #youtube{width:90%;margin-bottom:70px}
#aboutFunc:before{top:0;bottom:inherit;bottom:initial}
#aboutFunc:after{width:100%;top:inherit;top:initial;bottom:0;height:70%}
#product{padding-bottom:0}
#prolay .p-box >img{height:auto}
#prolay .pro-list .p-box:before,#ssbanner .bxslider a:before{background:rgba(0,0,0,0)}
#news li{display:inline-block;width:50%;margin-left:-4px;vertical-align:top}
#news li .border{margin:0 10px 20px}
#NewsTitle{padding:70px 0}
#NewsBox .NewsMore{padding:30px 0 50px}
#ssbanner .bxslider .infot h4{font-size:22px;bottom:20px;left:20px}
#bookBox { padding-bottom: 30px; }
#bookBox ul li a.photo img { height: 45vw; }
#bookBox ul li .info {padding: 10px 20px;width: 55%;min-height: inherit;}
#freebox #freeboxlist .freeList > div {    width: calc((100%/2) - 115px);    padding: 15px 45px;}
#aboutssban {    width: 95%;}
#product .btn a {    width: 65px;    height: 65px;}
#aboutFunc .abBox .aboutart .arts{    padding-right: 0;}
}
@media screen and (max-width: 768px) {
#freebox{width: 95%;}
#freebox #freeboxlist .freeList > div {    width: calc((100%/2) - 60px);    padding: 15px 20px;}
#product .btn a {    width: 55px;    height: 55px;}
#product .btn a#nextBtn {    right: calc((100% / 3) - 25px);}
#product .btn a {    left: calc((100% / 3) - 25px);}
#page-form section {    width: 85%;}
#page-form fieldset.btn p.tt{    width: 45%;}
#page-form fieldset.btn p {    width: 50%;}
#page-form input#Checknum {    width: 210px;}
}
@media screen and (max-width: 640px) {
#freebox .hidetext{font-size:70px;width:230px;height:200px}
#freebox{/* padding:100px 0 */}
#freebox .freeList .free h3{font-size: 24px;}
#freebox .freeList .free p{font-size: 14px;}
#aboutFunc{padding:70px 0 100px}
#aboutFunc:after{height:75%}
#news ul{width:calc(100% - 14px);margin:5px 5px 5px 9px}
#news li .border .news-info{padding:20px}
#news li .border .news-info .describe{margin:15px 0 22px;max-height:45px}
#news li .border .photo a p{padding:10px}
#bookBox ul li a.photo img { height: 55vw; }
#bookBox ul li .info h3 a {height: 40px;font-size: 20px;}
#bookBox ul li .info article {/* height: 60px; */-webkit-line-clamp: 1;margin-bottom: 5px;}
}
@media screen and (max-width: 480px) {
#aboutFunc{padding: 70px 0 40px;}
#aboutFunc .abBox .aboutart .more a,#book .bookStyle .info h5 a{width: auto;text-align:center;}
#product .index-title{padding:40px 0;margin-left:5%}
#prolay .pro-list .p-info{bottom:0}
#news li .border .news-info .news-bottom{font-size:5pt}
#freebox #freeboxlist .freeList > div{    width: calc(100% - 60px);}
#product {    padding: 15vw 0 1vw;}
#product .btn a#nextBtn, #product .btn a{    z-index: -2;}
#news li .border .news-info h3{overflow:hidden;height:55px}
#news li .border .news-info .describe{margin:10px 0 18px}
#news li .border{margin:0 8px 20px}
#aboutFunc .abBox .aboutart h3,#product .index-title h2,#product .index-title p,#product .index-title p a,#NewsTitle .index-title h2{/* font-size:7pt; *//* line-height:8pt; */margin-bottom: 10px;}
#product .index-title p,#BookTitle p{display:block;margin:0}
#NewsTitle .index-title{margin:0}
#NewsTitle,#BookTitle{padding:40px 0}
#page-form p {    width: calc(100% - 15px);}
#page-form fieldset.btn p {    width: 100%;}
#page-form fieldset.btn p.tt {    width: 100%;    margin: 8px 0;    text-align: center;}
#page-form fieldset.btn p.send {    width: 40%;}
#bookBox ul li .info {left: 10%;bottom: 6%;width: 45%;}
input, select {
    -webkit-appearance: none;  /* Safari 和 Chrome，常用於iOS下移除內建樣式 */
    -moz-appearance: none;     /* FireFox */
    appearance: none;
}
}