.wrap {position: relative;background: #fff;z-index: 998;margin-top: -30px;} #wrapBox { position: relative; overflow: hidden; } .wrap #wrapBox .bg {position: absolute;width: 100%;height: 100%;background: no-repeat 50% / cover;top: 0;left: 0;opacity: .4;display: none;} .wrap .newBg {position: absolute;top: -160px;left: 0;z-index: -1;} /* diamond */ .wrap .wrapBg.diamond {width: 1790px;height: 1394px;background: #f9f9f9;-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);transform: rotate(-45deg);top: -170px;right: -42%;position: absolute;z-index: -1;} .wrap .wrapBg.diamond.bottombox { width: 1467px; height: 1467px; bottom: -430px; top: auto; } #wrapBox { position: relative; overflow: hidden; } .wrap .wrapBg.diamond2 { width: 1728px; height: 1728px; background: #f9f9f9; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); transform: rotate(-45deg); top: -170px; left: -64%; position: absolute; z-index: 0; } /* more */ p.more {padding: 30px 0 10px;text-align: center;} p.more a { position: relative; overflow: hidden; padding: 0 30px; display: inline-block; align-items: center; border: #d3d3d3 solid; border-width: 0 0 1px 1px; letter-spacing: .06em; line-height: 30px; transition: 1.2s ease 1.8s; transform: translateX(0%); } p.more a:before { position: absolute; width: 100%; height: 100%; background: #000; top: 0; left: 0; transform: translateX(-140%) skewX(63deg); transition: .4s cubic-bezier(.23,1,.32,1); content: "" } p.more a:after { position: absolute; width: 85%; height: 1px; background: #d3d3d3; display: block; top: 0; left: 0; content: ""; } p.more a font {position: relative;padding: 7px 0;display: inline-block;color: #000;z-index: 2;font-family: 'Roboto Slab',sans-serif;} p.more a span { position: relative; margin-left: 70px; width: 100px; height: 1px; background: #000; display: inline-block; transition: transform .4s cubic-bezier(.23,1,.32,1),background .4s ease; transform-origin: center left; } p.more a span:after { position: absolute; width: 0; height: 0; border-style: solid; border-width: 3px 0 3px 6px; border-color: transparent transparent transparent #000; display: block; right: 0; top: -3px; content: ""; } /* bgTxt */ .bgTxt { position: absolute; z-index: 1; } .bgTxt.stitle {-webkit-writing-mode: vertical-lr;writing-mode: vertical-lr;font-size: 70px;} .bgTxt.title {width: 100%;text-align: center;font-size: 140px;color: #edf1f3;display: none;} /* NewsBox */ #NewsBox , #productBox {padding-bottom: 5vw;overflow: hidden;padding: 80px 0 0;} #NewsBox .workframe { position: relative; margin: 0 auto; width: 1440px; padding-left: 180px; font-size: 0; } #NewsBox ul , #productBox .wall { position: relative; margin-bottom: 0; padding: 7vw 0 0; display: block; font-size: 0; z-index: 2; } #NewsBox ul li { position: relative; text-align: right; } #NewsBox ul li .img { position: relative; padding: 0 10px 10px 0; width: calc(60% - 10px); display: inline-block; } #NewsBox ul li .img:before { position: absolute; width: calc(100% - 10px); height: calc(100% - 10px); background: url(/images/34/img-bgline.png); top: 10px; left: 10px; -webkit-animation: newimg 1s linear infinite; animation: newimg 1s linear infinite; content: ""; } #NewsBox ul li .img a.photo { transform-origin: center top; transform: translate3d(0,0,-300px) rotateZ(-3deg) rotateY(30deg) rotateX(-15deg); transition-property: transform,opacity; transition-duration: 3s,.5s; transition-timing-function: cubic-bezier(.755,.05,.855,.06),ease; opacity: 0; } #NewsBox ul li.slick-current .img a.photo { transform: translate3d(0,0,0) rotateZ(0deg) rotateY(0deg) rotateX(0deg); transition: transform 1s cubic-bezier(.23,1,.32,1) .2s,opacity .6s ease .2s; opacity: 1; } #NewsBox ul li .info p a { padding: 2px 15px; background: #000; display: inline-block; color: #fff; vertical-align: middle; } #NewsBox ul li .info p font { margin-left: 10px; display: inline-block; } #NewsBox ul li .info h3 { margin: 10px 0; } #NewsBox ul li .info h3 a { height: 60px; font-size: 18px; color: #000; -webkit-line-clamp: 2; } #NewsBox .btn {position: absolute;left: calc(35% - 20px);bottom: 10px;z-index: 10;display: none;} #NewsBox .btn a { margin: 0 10px; color: #000; } #NewsBox p.more {margin-top: 70px;} #NewsBox p.more a { position: relative; overflow: hidden; padding: 0px 30px; display: inline-block; align-items: center; border: #d3d3d3 solid; border-width: 0 0 1px 1px; letter-spacing: .06em; line-height: 30px; transition: 1.2s ease 1.8s; transform: translateX(0%); } #NewsBox .bgTxt.stitle{writing-mode: initial;left: -60px;top: 0px;font-size: 120px;z-index: 8;color: #eaffb4;font-weight: 900;font-family: 'Open Sans', Arial, sans-serif;} #NewsBox .speBox{margin:0 auto;overflow:hidden;display: inline-block;width: 42%;} #NewsBox .index-title h4{color:#9cc4d7} #NewsBox .speBox .index-title p{color:#fff;display: none;} #NewsBox .speBox .index-title h2{margin-bottom: 25px;font-size: 20px;margin-top: 10px;letter-spacing: 2px;font-weight: 200;} #NewsBox .speBox .index-title h3{ text-align: right; margin: 20px 0 0; } #NewsBox .speBox .index-title h3 a{display:inline-block;border:1px solid #d0d0d0;font-size:13px;padding:12px 55px;color:#545454;position:relative;transition:all linear .2s;font-family: 'Roboto Slab',sans-serif;} #NewsBox .speBox .index-title h3 a:before{content:'+';position:absolute;left: 16px;top: 12px;color: #626262;font-size:24px;display: none;} #NewsBox #news .border{overflow:hidden;position:relative;padding: 15px 0 15px 20px;border-bottom: 1px solid rgba(73, 73, 73, 0.1);background-color: rgba(247, 247, 247, 0.61);} #NewsBox #news a{display:block;position:absolute;width:100%;height:100%;left:0;top:0;z-index:2;transition:.3s ease-in-out;-o-transition:.3s ease-in-out;-moz-transition:.3s ease-in-out;-webkit-transition:.3s ease-in-out} #NewsBox #news .news-info{overflow:hidden;font-size:11pt} #NewsBox #news .news-info:after{content:'>';display:block;position:absolute;right:20px;bottom:calc(50% - 15px);width:30px;height:30px;text-align:center;border-radius:50%;background: rgba(148, 148, 148, 0.1);line-height:30px;font-size:8pt;transition:.3s ease-in-out;-o-transition:.3s ease-in-out;-moz-transition:.3s ease-in-out;-webkit-transition:.3s ease-in-out;color: #353535;} #NewsBox #news .news-info .news-bottom{float:left;overflow:hidden;width: 197px;} #NewsBox #news .news-info h3{float:left;font-weight:400;font-size:1rem;width:calc(100% - 280px);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size: 16px;} #NewsBox #news .news-info p{float:left;color: #9e9e9e;} #NewsBox #news .news-info .catalog{line-height:150%;float:left;background: rgb(234, 255, 180);padding:0 8px;border-radius: 10%;width:80px;text-align:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin: 0 4px;color: #868686;} #ssbanner .img a{ display:block; background-repeat:no-repeat; background-position:50% 50%; background-size: cover; position:relative; z-index:2; } #ssbanner .bxslider a img{ width:100%; } #ssbanner{display: flex;width: calc(100% - 160px);position: relative;padding: 30px 30px;background: white;border-radius: 20px;margin: 80px auto;flex-direction: column;align-items: center;-webkit-box-shadow: 0 5px 19px rgb(33 32 36 / 12%);box-shadow: 0 5px 19px rgb(33 32 36 / 12%);} #ssbanner .bxslider{width: 100%;margin: 20px auto;position: relative;z-index: 5;} #ssbanner .bxslider a{ background-size:cover; } /* NewsBox2 */ #NewsBox2 .webframe { width: 1280px; margin: 0 auto; } #NewsBox2{padding: 100px 0 0px 0;background-repeat:no-repeat;background-position: 50% 80%;background-size:cover;} #NewsBox2 #news{ padding: 0 0 40px; } #NewsBox2 .speBox{margin-bottom:50px} #NewsBox2 .speBox .webframe{overflow:hidden;position:relative} #NewsBox2 .speBox .webframe h2:after, #bookBox .speBox .webframe:after{content:'';display:block;width:100%;height:1px;background:#e8e8e8;position:absolute;bottom: -30%;left:0;} #NewsBox2 .speBox .speBoxTitle { padding: 10px 0; /* float: left; */ position: relative; } #NewsBox2 .speBox .speBoxTitle a{padding: 0;font-size: 20px;margin-top: 10px;letter-spacing: 2px;font-weight: 200;color: #000;} #NewsBox2 .speBox h4{font-size: 40px;font-weight: 400;line-height:100%;/* float:left; */color:#252525;position:relative;z-index:2;background:#fff;padding-right:40px;} #NewsBox2 .speBox .subBoxTitle,#bookBox .speBox p{float:right;position:relative;z-index:2;margin-top: -12px;} #NewsBox2 .speBox .subBoxTitle a,#bookBox .speBox p a{display:inline-block;background: #fff;margin-right:25px;border: 1px solid #d0d0d0;font-size: 13px;padding: 12px 55px;color: #545454;position: relative;transition: all linear .2s;font-family: 'Roboto Slab',sans-serif;} #NewsBox2 #news ul { overflow: hidden; } #NewsBox2 #news li{float:left;width: calc((100% / 3) - 10px);position:relative;margin: 0 5px 30px 0;} #NewsBox2 #news li:last-child { margin-right: 0; } #NewsBox2 #news li a{position:absolute;width:100%;height:100%;left:0;top:0;z-index:3} #NewsBox2 #news li .border{position:relative;z-index:2;overflow:hidden;border-radius: 25px;} #NewsBox2 #news li .border .photo{ position: absolute; width: 100%; height: 100%; background-repeat:no-repeat;background-position:50% 50%;background-size:cover;overflow:hidden;transition:all linear .3s; top: 0; left: 0; } #NewsBox2 #news li .border .photo img{width:100%} #NewsBox2 #news li:hover .border .photo{transform:scale(1.1)} #NewsBox2 #news li .news-info{padding: 65px;color:#fff;-webkit-transition:all .6s ease;ransition:all .6s ease;background-color:rgba(0,0,0,.5);background-image:linear-gradient(to top,transparent,#1f1f1f);-khtml-opacity:.9;-webkit-opacity:.9;opacity:.9;-ms-filter:alpha(opacity=90);filter:alpha(opacity=90);transition:all linear .3s;} #NewsBox2 #news li:hover .news-info{background-image:none;background: linear-gradient(175deg, rgba(5, 5, 5, 0.63) 0%,rgba(9, 9, 9, 0.53) 25%,#3b3b3b57 60%,rgba(94, 94, 94, 0.45) 100%);} #NewsBox2 #news li .news-info{background-image:none;background: linear-gradient(175deg, rgb(232, 232, 232) 0%,rgb(217, 217, 217) 25%,#e9e9e9 60%,rgb(220, 220, 220) 100%);} #NewsBox2 #news li:hover .news-info .news-bottom .date,#NewsBox2 #news li:hover .news-info .news-bottom h3,#NewsBox2 #news li:hover .news-info .news-bottom .describe,#NewsBox2 #news li:hover .news-info .news-bottom .more{color: #fff;} #NewsBox2 #news li .news-info .news-bottom .date{font-size:15px;color: #000;} #NewsBox2 #news li .news-info .news-bottom h3{height: 30px; font-size: 25px;line-height:120%;margin: 10px 0 20px;max-height:96px;overflow:hidden;color: #373737;font-weight: 400;-webkit-line-clamp:2} #NewsBox2 #news li .news-info .news-bottom .describe{line-height:150%;font-size:16px;max-height: initial;overflow: hidden;-webkit-line-clamp: 2;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;color: rgba(95, 95, 95, 0.68);} #NewsBox2 #news li .news-info .news-bottom .more{display:inline-block;border: 1px solid #cecece;padding: 11px 25px;font-size:13px;margin-top: 40px;border-radius: 25px;color: #888;} /* productBox */ #productBox .bgTxt.stitle { top: -4vw; z-index: 3; } #NewsBox ul , #productBox .wall {padding: 21px 0 0;} #productBox .wall-column { width: calc(100% / 3); display: inline-block; box-sizing: border-box; } #productBox .article { position: relative; margin: 15px 10px 40px; background: #fff; } #productBox .article a { position: absolute; width: 100%; height: 100%; display: block; top: 0; left: 0; z-index: 10; } #productBox .article .imgBox { position: relative; overflow: hidden; } #productBox .article .imgBox article { position: absolute; padding: 20px 20px 30px; width: calc(100% - 40px); background: #fff; color: #777070; bottom: -99px; z-index: 2; } #productBox .article .imgBox article p { height: 58px; -webkit-line-clamp: 2; } #productBox .article .imgBox:after { position: absolute; width: 60%; height: 20px; background: #fff; display: block; left: 0; bottom: 0; z-index: 1; content: ""; } #productBox .article .info { position: relative; margin-top: -15px; padding: 0 20px 15px; z-index: 9; } #productBox .article .info p span { display: inline-block; color: #d80707; } #productBox .article .info p span.old { margin-right: 10px; color: #8f8f8f; } #productBox .article .info h3 { margin: 20px 0; height: 30px; font-weight: 400; font-size: 18px; -webkit-line-clamp: 1; } /* aboutBox2 */ #aboutBox2 {overflow: hidden;position: relative;padding: 10px 0px;} #aboutBox2 .imgs {position: absolute;width: 50vw;top: 70px;right: 0;z-index: 1;} #aboutBox2 .imgs .list { height: 35vw; background: no-repeat 50% / cover; } #aboutBox2 .info {position: relative;padding: 70px 0 60px 17vw;width: 480px;z-index: 3;} #aboutBox2 .info .title {font-size: 40px;color: #000000;display: table;font-weight: 400;border-bottom: 2px solid #000;font-family: "微軟正黑體", "蘋果儷中黑", "Lucida Grande", "Arial", "Arial Narrow";} #aboutBox2 .info .title::before { top: 19%; right: 17%; z-index: -1; content: ''; width: 0vw; height: 2.3vw; display: block; position: absolute; background: #eaffb4; -webkit-transform: translate3d(-50%,-50%,0) rotate(45deg); transform: translate3d(-50%,-50%,0) rotate(45deg); } #aboutBox2 .info .title::before { width: 8vw; -webkit-transition: all 1000ms cubic-bezier(0.785,0.135,0.150,0.860); transition: all 1000ms cubic-bezier(0.785,0.135,0.150,0.860); } #aboutBox2 .info .stitle {margin-bottom: 25px;padding: 5px 0 15px;background: url(/images/34/img-dot.png) repeat-x 0 bottom;font-size: 20px;margin-top: 10px;letter-spacing: 2px;} #aboutBox2 .info article {margin-bottom: 20px;line-height: 200%;color: #666;font-size: 15px;font-weight: 300;letter-spacing: 0.8px;} #aboutBox2 .info article h3{text-align: right;margin: 30px 0;} #aboutBox2 .info article h3 span{margin-right: 10px;letter-spacing: 10px;} #aboutBox2 #SeoStarRating { margin: 15px 0 30px; text-align: right; } #aboutBox2 p.more { text-align: left; } #youtube{position:relative;background-repeat:no-repeat;background-position:50% 50%;background-size:cover;} #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 0.3s;padding:0;} #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%;} /* bookBox */ #bookBox .row {position: relative;width: 53%;display: inline-block;z-index: 2;} #bookBox #customBox .bgTxt.stitle {z-index: 2;writing-mode: inherit;padding: 60px 15px 0;font-size: 30px;margin: 0px 0px 0px;font-weight: 500;right: -8%;} #bookBox #customBox p.more{ display: none; } #bookBox #customBox ul {position: relative;padding: 0 10% 0 20%;z-index: 3;display: none;} #bookBox #customBox ul li h3 { font-size: 40px; } #bookBox #customBox p.more a { border-color: #000; } #bookBox #customBox p.more a:after { background: #000; } #bookBox #BookList ul { overflow: hidden; } #bookBox #BookList ul li { position: relative; margin-bottom: 1px; float: left; width: 25%; } #bookBox #BookList ul li:nth-child(6n) { width: 50%; } #bookBox #BookList ul li a.photo { margin-right: 1px; } #bookBox #BookList ul li h3 { position: absolute; padding: 5px 20px; width: calc(100% - 41px); background: rgba(0, 0, 0, .7); left: 0; bottom: 0; } #bookBox #BookList ul li h3 a { height: 30px; color: #fff; text-align: center; -webkit-line-clamp: 1; } #ssbanner .bxslider {margin: 0;display: flex;justify-content: space-around;padding: 0 5px;} #ssbanner .bxslider .langd{ width: calc(33.3% - 20px); border-radius: 15px; margin: 18px 0; display: flex; flex-direction: column; } #ssbanner .bxslider a {display: block;background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;position: relative;transition: linear all .3s;border-radius: 15px;overflow: hidden;} #ssbanner .bxslider a img {width: 100%;height: 290px;object-position: 50% 0;object-fit: cover;border-radius: 15px;} #ssbanner .bxslider .info {position: absolute;color: #fff;z-index: 2;text-align: center;top: 43%;left: 50%;transform: translateX(-50%);width: 70%;} #ssbanner .bxslider a:hover img{ -moz-transform:scale(1.2); -webkit-transform:scale(1.2); -o-transform:scale(1.2); -ms-transform:scale(1.2); transform:scale(1.2); } #ssbanner .bxslider .info h2 {font-weight: 700;text-align: center;letter-spacing: .1em;font-size: 30px;position: relative;display: block;line-height: 160%;border-bottom: 1px solid;padding-bottom: 10px;} #ssbanner .bxslider .info span {display: inline-block;padding: 14px 0;letter-spacing: 1.5px;font-size: 18px;} #ssbanner .bxslider a:after {content: '';background: rgb(25 33 80 / 30%);position: absolute;top: 0;left: 0;width: 100%;height: 100%;opacity: 1;transition: linear all .3s;border-radius: 15px;} @keyframes newimg { 0% { background-position: 0; } to { background-position: -7px; } } @-webkit-keyframes newimg { 0% { background-position: 0; } to { background-position: -7px; } } @media screen and (max-width: 1690px) { #NewsBox .workframe { padding-left: 0; width: 1280px; } } @media screen and (max-width: 1440px) { #NewsBox .workframe , #NewsBox2 .webframe { padding-left: 0; width: 80%; margin: 0 auto; } #NewsBox2 #news li .news-info{padding:50px} #NewsBox2 #news li .news-info .news-bottom .more{margin-top:30px} #aboutBox2 .info {padding: 70px 0 60px 10vw;width: 450px;} } @media screen and (max-width: 1366px){ #aboutBox2 .info { padding: 10px 0 60px 12vw;width: 420px;} #aboutBox2 .imgs { top: 30px;} } @media screen and (min-width: 1025px) { #ssbanner .bxslider a:hover:after {opacity: 0.4;} #NewsBox #news .border:hover .news-info:after{right:10px} #NewsBox #news .border:after{content:'';display:block;width:100%;height:100%;position:absolute;left:0;top:0;background:rgba(255,255,255,0.05);transform:scale(0,1);transform-origin:right center 0;transition:transform 1s cubic-bezier(0.23,1,0.32,1)} #NewsBox #news .border:hover:after{transform:scale(1,1);transform-origin:left center 0} } @media screen and (min-width: 1281px) { p.more a:hover { border-color: #000; } p.more a:hover:before { transform: translateX(0) skewX(0); } p.more a:hover:after { background: #000; } p.more a:hover font { color: #fff; } p.more a:hover span { background: #fff; transform: scale(1.1); } p.more a:hover span:after { border-color: transparent transparent transparent #fff; } #productBox .wall-column .article:hover .imgBox article { bottom: 0; } } @media screen and (max-width: 1280px) { #aboutBox2 .imgs , #bookBox .row {width: 100%;position: inherit;} #aboutBox2 .info {padding: 0px 10%;width: 80%;position: inherit;} #aboutBox2:before { opacity: 0; } #aboutBox2 p.more a:after { background: #000; } #aboutBox2 p.more a { border-color: #000; } #bookBox { padding: 50px 5%; font-size: 0; } #bookBox #customBox ul { padding: 0 0 0 130px; } #bookBox #BookList { padding: 50px 0 20px; } #ssbanner { margin: 0 2% 0 -12%; width: 53%; } #NewsBox .speBox{width:57%} #NewsBox .speBox .index-title{float:none;margin:0 0 20px; } #NewsBox #news{float:none;width:100%;margin:0} #NewsBox2 #news li .news-info .news-bottom .describe{max-height:50px} #NewsBox2 #news li .news-info .news-bottom h3{font-size:26px;margin:30px 0;max-height:62px} #bookBox #customBox .bgTxt.stitle {writing-mode: inherit;padding: 60px 15px 0;text-align: center;right: 0%;position: initial;} } @media screen and (min-width: 1025px) { #NewsBox2 .speBox .subBoxTitle a:hover,#NewsBox .speBox .index-title h3 a:hover{color: #6ebae0;} } @media screen and (max-width: 1680px){ #ssbanner .bxslider .info .circle { width: 151px; height: 151px; font-size: 50px; line-height: 151px; margin: 0 auto 20px; } #ssbanner .bxslider .info span { font-size: 16px; letter-spacing: 0.5px; } } @media screen and (max-width: 1180px) { #ssbanner .bxslider .info .circle { width: 121px; height: 121px; font-size: 40px; line-height: 121px; } #ssbanner .bxslider .info h2 {font-size: 24px;} #ssbanner:after{ bottom:0; height: 30%; } } @media screen and (max-width: 1024px) { #ssbanner { margin: 0 auto; width: 90%; } #NewsBox .speBox{width:100%} #NewsBox2 #news li .news-info{padding:30px} } @media screen and (min-width: 981px) { #NewsBox ul li .info { position: absolute; width: 39%; left: 0; bottom: 20%; } } @media screen and (max-width: 980px) { .bgTxt.stitle { font-size: 10vw; -webkit-writing-mode: inherit; writing-mode: inherit; } .bgTxt.title { display: none; } #NewsBox ul li { text-align: center; } #NewsBox ul li .img { width: calc(80% - 10px); } #NewsBox ul li .info { margin-top: 20px; width: calc(80% - 10px); display: inline-block; } #NewsBox .btn { left: auto; right: 0; } #productBox .bgTxt.stitle { padding: 6vw 0 0; top: 0; } #productBox .wall-column { width: 50%; } #aboutBox2 .info .title { font-size: 5vw; } #aboutBox2 .info .stitle { font-size: 3vw; } #bookBox #customBox ul { padding: 0; } #bookBox #BookList ul li , #bookBox #BookList ul li:nth-child(6n) { width: calc(100% / 3); } #NewsBox2 #news li .news-info .news-bottom .more{margin-top:20px;padding:8px 20px} #NewsBox2 #news li .news-info .news-bottom h3{font-size:22px;margin:20px 0;max-height:52px} } @media screen and (max-width: 850px) { #NewsBox2 .speBox h4 { float: none; } #NewsBox2 .speBox .subBoxTitle { margin-top: 20px; float: none; text-align: right; } } @media screen and (max-width: 768px) { #ssbanner{ margin: 0; } #NewsBox #news .news-info .news-bottom{width:100%} #NewsBox #news .news-info h3{width:calc(100% - 60px);margin-top:5px} #NewsBox{padding:70px 0} #NewsBox #news .border{padding:15px 0 15px 20px} #ssbanner{width: calc(100% - 0px);margin: 0 auto;padding: 0 0;border-radius: 0;} #NewsBox2 #news li , #NewsBox2 #news li:last-child { margin: 15px auto; float: none; width: 80%; } #NewsBox2 #news li .news-info{width:calc(100% - 60px);height:calc(100% - 60px);padding:30px} #NewsBox2 #news li .news-info .news-bottom .describe{max-height:initial;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;-webkit-line-clamp: 1;font-size: 15px;display: block;} } @media screen and (max-width: 680px) { #productBox .wall { margin: auto; width: 80%; } #productBox .wall-column { width: 100%; } #ssbanner .bxslider .info .circle { width: 100px; height: 100px; font-size: 32px; line-height: 100px; } } @media screen and (max-width: 640px) { #ssbanner .bxslider .langd{ width: calc(100% - 58px); margin: 25px auto 12px; } #ssbanner .bxslider{ flex-direction: column; } #NewsBox2,#aboutFunc{padding: 70px 0 0;} #NewsBox2 #news li, #NewsBox2 #news li:last-child{width:100%;} #bookBox {padding: 0px 5% 70px 5%;font-size: 0;} #bookBox #customBox .bgTxt.stitle {padding: 0px 15px 0;right: 0%;} } @media screen and (max-width: 500px) { #NewsBox .btn { bottom: -10px; } #bookBox #BookList ul li , #bookBox #BookList ul li:nth-child(6n) { width: 50%; } #bookBox #BookList ul li:nth-child(3n) { width: 100%; } } @media screen and (max-width: 480px) { #ssbanner:after{ height: 20%; } #ssbanner .bxslider{width: 90%;margin: 20px auto 0;display: flex;flex-direction: column;} #ssbanner .bxslider .langd{ width: calc(100% - 20px); margin: 0 auto 18px; } #NewsBox2 .speBox .speBoxTitle,#bookBox .speBox h2{font-size:45px} #NewsBox2 .speBox .webframe:after,#bookBox .speBox .webframe:after{bottom:20px} #NewsBox2 #news li .news-info{width:calc(100% - 80px);height:calc(100% - 80px);padding:40px} #aboutBox2 .info .title { font-size: 8vw; } #aboutBox2 .info .stitle { font-size: 5vw; } #ssbanner .bxslider a img { height: 240px; } #ssbanner .bxslider .info {/* width: 90%; *//* left: 5%; */} } @media screen and (max-width: 450px) { #productBox .wall { width: 100%; } #aboutBox2 .info { padding: 10vw 5vw; width: 90vw; } }