section#productBox {position: inherit;background-repeat: no-repeat;background-position: 50% 50%;background-size: auto;padding: 100px 0 60px;background: no-repeat 50% / cover;background-image: url(/images/37/img_ssubBox_bg.jpg);} section#productBox .bgTxt.stitle{top: -4vw;right: -10%;} section {position: relative;padding: 3vw 0;} section >.bg {position: absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 1;opacity: .3;} section >.info { position: relative; font-size: 0; z-index: 2; } section .title {line-height: 90%;font-family: 'Frank Ruhl Libre', serif;text-transform: uppercase;font-size: 32px;color: #000000;letter-spacing: 1.5px;font-size: 42px;font-weight: 200;letter-spacing: 7.5px;text-align: center;} section .more {margin-top: 0px;text-align: center;} section .more a {position: relative;padding: 0;background-color: rgb(45 26 17);display: flex;justify-content: center;width: 200px;max-width: 90%;margin: 10px auto;border: #faebd74a 1px solid;} section .more font {text-align: center;font-size: 25px;font-weight: 400;letter-spacing: 2.7px;color: #151515;margin: 0px 0 0;display: flex;} section .more a svg.arrow {/* position: absolute; */fill: white;} section .more.white a , section .more.white font {padding: 6px 20px;letter-spacing: 1px;font-size: 15px;color: #ffffff;} section .more.white a {background: #3c282b;color: #fff;} section .more.white span {right: 30px;position: absolute;width: 80px;height: 1px;background: #000;display: block;right: 0;top: calc((100% - 1px) / 2);z-index: 3;-webkit-transition-duration: .2s;transition-duration: .2s;} section .more.white:after {width: 252px;} section .more.white span {position: absolute;width: 80px;height: 1px;background: #ccc;display: block;right: -50px;top: calc((100% - 1px) / 2);z-index: 3;-webkit-transition-duration: .2s;transition-duration: .2s;display: none;} section .more.white span:before {position: absolute;width: 0;height: 0;border-style: solid;border-width: 0 16px 7px 0;border-color: transparent transparent #ccc transparent;right: -1px;bottom: 50%;content: "";} #wrap {position: relative;overflow: hidden;} #wrap .wrapBg {position: absolute;z-index: 1;} #wrap .wrapBg.diamond {width: 240px;height: 50%;background: #a71e23; top: -20px;left: 0%;} #wrap .wrapBg.diamond:before {position: absolute;width: calc(100% + 40px);height: 87%;background: url(/images/37/producbg.jpg) no-repeat 50% / auto 100%;content: "";top: 60px;} #wrap .wrapBg.diamond.bottombox { width: 1467px; height: 1467px; bottom: -430px; top: auto; } /* bgTxt */ .bgTxt,.bgTxt2 {position: absolute;z-index: 1;} #aboutBox .bgTxt.stitle {top: 21vw;right: 11vw;display: none;} #aboutBox .bgTxt2.stitle {top: 11vw;left: 10vw;font-size: 90px;display: none;} .bgTxt.stitle,.bgTxt2.stitle {-webkit-writing-mode: vertical-lr;writing-mode: vertical-lr;line-height: 70%;text-transform: uppercase;} .bgTxt.title { width: 100%; text-align: right; font-size: 140px; color: #edf1f3; } /* productBox */ #productBox h3.papaltt{display: flex;justify-content: center;color: #d6d6d6;font-weight: 400;font-size: 29px;margin-top: -15PX;} #productBox .title,#productBox .title span{font-size: 50px;font-weight: 100;letter-spacing: 1.5px;color: #a69077;} #productBox .title span{ vertical-align: baseline; margin-left: 10px; color: #706767; } #productBox .more a{color: #e21c23;} #productBox .more a:hover font{color: #fcfcfc;} #productBox .more a font{color: #b5b5b5;} #productBox .bg {opacity: 1.2;} #productBox .bg::before {content: "";border: 1px #fff6 solid;position: absolute;width: 98%;height: 98%;top: 0;right: 0;bottom: 0;left: 0;margin: 0.8% 1%;z-index: 1;} #productBox >.info {margin: 0 auto;} @-webkit-keyframes heartBeat { 0% { -webkit-transform: scale(1); transform: scale(1); } 14% { -webkit-transform: scale(1.3); transform: scale(1.3); } 28% { -webkit-transform: scale(1); transform: scale(1); } 42% { -webkit-transform: scale(1.3); transform: scale(1.3); } 70% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes heartBeat { 0% { -webkit-transform: scale(1); transform: scale(1); } 14% { -webkit-transform: scale(1.3); transform: scale(1.3); } 28% { -webkit-transform: scale(1); transform: scale(1); } 42% { -webkit-transform: scale(1.3); transform: scale(1.3); } 70% { -webkit-transform: scale(1); transform: scale(1); } } #productBox .index_newshello {position: absolute;margin-top: 0px;margin-left: 47%;-webkit-animation-name: heartBeat;animation-name: heartBeat;-webkit-animation-duration: 1.3s;animation-duration: 1.3s;-webkit-animation-timing-function: ease-in-out;animation-timing-function: ease-in-out;z-index: 8;} #productBox ul {margin-top: 7vw;} #productBox ul li { position: relative; } #productBox ul li a { position: absolute; width: 100%; height: 100%; display: block; top: 0; left: 0; z-index: 3; } #productBox ul li{margin: 0 0px 0 20px;border-left: 1px solid rgb(255 255 255 / 19%);} #productBox ul li .info h3{border-left: 3px solid #efdebf;padding-left: 12px;font-size: 22px;} #productBox ul li .info article{padding-left: 12px;padding-top: 10px;color: #63656e;} #productBox ul li img{width: 70%;margin: auto;} #book .bSliderMother .slick-slide { -webkit-transition: none; transition: none; } .bookStyle {position:relative;overflow:visible;width: 59%;margin: 20% auto 0;padding-top:0px;} .bookStyle .photo {position:absolute;left: -5%;top: 20%;width: 70%;height:100%;transition-delay: .3s;z-index: -1;} .slick-center .bookStyle .photo::before{bottom: 260px;right: -135px;width: 220px;height: 220px;} .bookStyle .photo::before {content: '';width: 190px;height: 190px;border-radius: 50%;background-color: #fff8c0;-webkit-background-size: cover;background-size: cover;position: absolute;bottom: 140px;right: -115px;z-index: -12;} .bookStyle .photo a img {width: 90%;height:100%;object-fit:cover;margin: auto;} .slick-center .bookStyle {width: 90%;margin: -20px auto 0px;padding-top: 0px;transition: all linear .1s;} .slick-center .bookStyle .info{top: 36%;right: -60px;} .bookStyle .info {z-index:1;width: 50%;text-align:right;top: 40%;display: block;position: absolute;z-index: 1;right: -40px;} .bookStyle .info.twins {display: none;} .bookStyle .info h3 {writing-mode:initial;margin:0;} .bookStyle .info h3 a {padding:5px 10px;color: #262626;line-height:140%;border-top: 3px solid #262626;border-bottom: 1px solid #262626;padding: 10px 0;font-weight: 400;font-size: 23px;} .bookStyle .info h4 {font-size:20px;line-height:120%;color: #1f1f1f;padding: 6px 0;font-weight:400;margin-top:5px;writing-mode:initial;} #bookBox { background-repeat:no-repeat; background-position:0% 70%; background-size:auto; visibility:visible; position:relative; overflow:hidden; padding:200px 0 20px; } #bookBox:after { content:''; background:#fff; position:absolute; width:100%; height:350px; left:0; bottom:0; z-index:1; display:none; } .bookStyle >img,#ssbanner a img {width:100%;} .bookStyle,.bookStyle .info,#product .index-title p a b,#BookTitle .index-title p a b{transition: all linear .3s;} .bookStyle .photo a img {width:100%;height:100%;object-fit:cover;} #indexBook .bookList { margin-top:30px; margin-bottom:0px; } .slick-center .bookStyle .photo{width: 70%;height: 100%;top: 10%;left: 0%;} /* NewsBox */ #NewsBox .speBox .index-title{ animation-name: fadeInLeft; } #NewsBox {padding: 100px 0;background: #ffffff no-repeat 50% 100% / cover;color: #fff;} #NewsBox .speBox {overflow: hidden;margin: 0 auto;width: 70%;} #NewsBox .speBox .index-title {float: left;width: 200px;} #NewsBox .index-title h4 { color: #9cc4d7; } #NewsBox .speBox .index-title h2 , #NewsBox .speBox .index-title h3 a {color: #262c3a;} #NewsBox .speBox .index-title h2{font-family: 'Frank Ruhl Libre', serif;font-size: 60px;width: auto;height: 300px;line-height: 100%;} #NewsBox .speBox .index-title {display: flex;justify-content: flex-end;width: 150px;padding-left: 30px;} #NewsBox .speBox .index-title h3 a{color: #e21c23;font-size: 24px;font-weight: 400;letter-spacing: 4.5px;} #NewsBox .speBox .index-title p {display: none;} #NewsBox #news {margin-left: 80px;float: left;width: calc(100% - 280px);margin-top: 40px;} #NewsBox #news .border {overflow: hidden;position: relative;padding: 20px 0 20px 20px;border-bottom: 1px solid rgb(86 86 86 / 17%);} #NewsBox #news a { position: absolute; width: 100%; height: 100%; display: block; 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;display: flex;align-items: center;flex-direction: row;} #NewsBox #news .news-info:after {position: absolute;width: 30px;height: 30px;background: rgb(95 95 95 / 10%);border-radius: 50%;display: block;text-align: center;line-height: 30px;font-size: 8pt;color: #000000;right: 20px;bottom: calc(50% - 15px);content: ">";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 .news-bottom {overflow: hidden;float: left;width: 217px;display: flex;flex-direction: row;align-items: center;flex-wrap: nowrap;align-content: center;} #NewsBox #news .news-info h3 {overflow: hidden;float: left;width: calc(100% - 280px);font-weight: 400;font-size: 1rem;white-space: nowrap;text-overflow: ellipsis;color: #080808;} #NewsBox #news .news-info p {color: #d02b17;} #NewsBox #news .news-info .catalog {overflow: hidden;margin: 0 10px;padding: 2px 8px;float: left;width: 80px;border: 1px solid #d02b17;line-height: 150%;text-align: center;color: #d02b17;white-space: nowrap;text-overflow: ellipsis;transition: .3s ease-in-out;-o-transition: .3s ease-in-out;-moz-transition: .3s ease-in-out;-webkit-transition: .3s ease-in-out;} /* ssbanner */ #ssubBox{position: relative;padding: 3vw 0 2vw 0;max-width: 100%;width: 1280px;margin: auto;display: flex;justify-content: space-evenly;align-content: space-around;} #ssbanner .ssDate .sslishTxt a{-webkit-transition: all .4s ease;-o-transition: all .4s ease;transition: all .4s ease;text-align: center;position: absolute;width: 100%;height: 100%;display: block;top: 0;left: 0;z-index: 3;} #ssubimg{width: 45%;} #ssbanner{width: calc(55% - 16px);display: flex;} #ssbanner .bxslider{margin: 0px auto;position: relative;z-index: 5;display: flex;align-items: center;justify-content: space-evenly;flex-wrap: wrap;align-content: space-between;} #ssbanner .ssDate {position: relative;} #ssbanner .ssDate {width: calc(50% - 16px);flex-wrap: nowrap;align-content: center;display: flex;flex-direction: column;align-items: center;margin: 0px 8px;height: calc(50% - 8px);} #ssbanner .ssDate .sslishTxt{ position: relative; overflow: initial; height: 100%; } #ssbanner .ssDate .sslishTxt img{height: calc(100% - 0px);object-fit: cover;} #ssbanner .ssDate .sslishTxt .ssTxt{position: absolute;top: 0;left: 0;width: calc(100% - 4em);padding: 2em;color: #fff;text-transform: uppercase;font-size: 1.25em;-webkit-backface-visibility: hidden;backface-visibility: hidden;height: calc(100% - 4em);background: #483833a6;display: flex;flex-direction: column;justify-content: center;} #ssbanner .ssDate .sslishTxt .ssTxt::before{ position: absolute; top: 30px; right: 30px; bottom: 30px; left: 30px; border: 2px solid #fff; box-shadow: 0 0 0 30px rgb(255 255 255 / 20%); content: ''; opacity: 0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: scale3d(1.4,1.4,1); transform: scale3d(1.4,1.4,1); } #ssbanner .ssDate .sslishTxt .ssTxt h3 { margin: 26% 0 0px 0; text-align: center; font-size: 19px; letter-spacing: 1.5px; font-weight: 300; } #ssbanner .ssDate .sslishTxt .ssTxt p { padding: 1em; opacity: 0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: scale(1.5); transform: scale(1.5); text-align: center; } #ssbanner .ssDate .sslishTxt .ssTxt > a { z-index: 1000; text-indent: 200%; white-space: nowrap; font-size: 0; opacity: 1; } #ssbanner .ssDate .sslishTxt .ssTxt h3 a{color: #ffffff;padding: 0 0 10px;font-weight: 400;} #ssbanner .ssDate .sslishTxt .ssTxt article{word-break: break-word;color: #585858;} #ssbanner .ssDate .noBox{width: 20px;height: 20px;margin: auto;text-align: center;background-color: #e21c23;padding: 10px;border-radius: 50%;position: relative;margin: -30px;display: none;} #ssbanner .bxslider a img{width: 210px;margin: auto;} #bottomBox #ssbanner:after{content: '';background: rgb(209 209 209 / 31%);position: absolute;width: 100%;height: 20%;left: 0;bottom: 30px;} #ssbanner .bxslider a p{text-align: center;color: rgb(255 255 255 / 80%);padding: 10px 0 0 10px;} #ssubBox .videobox{position:relative;width:100%;} #ssubBox .videf { overflow: hidden; position: absolute; width: 100%; height: 100%; top: 0%; left: 0%; } #ssubBox video { position: absolute; width: 100%; height: auto; left: 0px; top: 0px; } /* aboutBox */ #aboutBox {z-index: 5;padding: 9vw 0 0vw 0;background-size: auto;} #aboutBox::before {content: "";display: block;position: absolute;top: 60px;right: -50px;width: 90%;height: 102%;background-image: url(/images/37/img_abbg.jpg);background-size: cover;background-repeat: no-repeat;z-index: -1;} #aboutBox .bg {width: 37%;height: 75%;top: 0%;right: 15%;left: auto;z-index: 0;position: absolute;display: block;background-repeat: no-repeat;background-position: 50% 0%;background-size: cover;opacity: 1;display: none;} #aboutBox .info {right: 0;top: 85px;width: 40.5%;margin: 30px 0% 0 0%;padding-top: 95px;position: absolute;z-index: 1;} #aboutBox:after { content: "About us Professional moving"; position: absolute; transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate( 0deg ); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); font-size: 25px; font-weight: 500; right: 0; display: block; top: 61px; color: #ab91736b; opacity: 0.8;letter-spacing: 1.25em;text-transform: uppercase;} #aboutBox .info .more{position: relative;margin-top: 0px;padding-bottom: 35px;text-align: inherit;padding: 5px 120px 0 120px;} #aboutBox .info .title1 {color: #ffffff;font-weight: 400;letter-spacing: 1.5px;text-align: center;} #aboutBox .info .title {margin: 0px 0vw 0vw 0vw;text-align: inherit;font-size: 37px;font-weight: 700;letter-spacing: 1.5px;position: relative;margin-left: 20px;display: flex;flex-direction: column;color: #ad967b;position: relative;} #aboutBox .info .title font{font-size: 33px;font-weight: 600;letter-spacing: 2.7px;color: #a69077;} #aboutBox .info .txtBox {position: relative;padding: 0vw 0vw 0vw 0vw;} #aboutBox .info .txtBox:before {position: absolute;width: 100%;height: 100%;top: 0;left: 0;content: "";z-index: 1;} #aboutBox .info .txtBox >div { position: relative; z-index: 2; } #aboutBox .info .txtBox h3 {font-size: 32px;color: #5a5a5a;font-family: 'Montserrat', 'Noto Sans TC', sans-serif;letter-spacing: 0.5px;} #aboutBox .info .txtBox article {line-height: 170%;font-size: 16.8px;color: #645854;margin: 0px 0 0px;letter-spacing: 1.0px;font-weight: 200;width: auto;margin: auto;padding: 20px 90px 0 120px;word-break: break-all;} #aboutBox .info .txtBox .Txt{ margin-bottom: 20px; font-size: 20px; font-weight: bold; color: #53443f; } #aboutBox #SeoStarRating{display: none;} #aboutBox .info .txtBox .more {margin: 0px 0px 0px;text-align: initial;padding: 20px 120px 20px 20px;} #aboutBox .info .txtBox .more a{display: flex;margin: 40px 0;} #aboutBox #SeoStarRating font { vertical-align: middle; } #aboutBox #SeoStarRating font:last-child {color: #525252;} #aboutBox #SeoStarRating .fa { vertical-align: initial; } #aboutBox .img_item:before{ content:""; position:absolute; width: 600px; height: 500px; top: 0;left: 520px;border: #6c4c4152 1px solid;} #aboutBox .img_item img{ width: auto; margin-top: -180px; position: relative;} /*fly_item*/ .fly_item{position: absolute;width: 509px;height: 300px;right: 30px;bottom: -100px;} /* smallpicture */ #smallpicture {padding: 60px 0 0px;margin-top: 0;right:0%;-webkit-transform: translate(0%,0%);-ms-transform: translate(0%,0%);transform: translate(0%,0%);z-index:-1;} #smallpicture h3.papaltt{display: flex;justify-content: center;color: #77635c;font-weight: 400;font-size: 29px;margin-top: -15px;} #smallpicture .title,#smallpicture .title span{font-size: 50px;font-weight: 100;letter-spacing: 1.5px;color: #a69077;} #smallpicture .title span{ vertical-align: baseline; margin-left: 10px; color: #706767; } #smallpicture .workframe {text-align:center;margin: 30px 0 0;width: 100vw;} #smallpicture .row { position:relative; margin:0 -20px; display:inline-block; vertical-align:top; display:-webkit-box; display:-ms-flexbox; display:flex; } #smallpicture .row .roll { z-index:1; -webkit-transition:all 0.01s ease; transition:all 0.01s ease; } #smallpicture .row.left .roll:first-child { z-index:2; left:-30%; top:30px; } #smallpicture .row .roll a.photo { display:inline-block; } #nyBox,#contactBox { position:relative; width:100%; } @media screen and (max-width:1680px) { #productBox >.info {width: 100%;} #wrap .wrapBg.diamond {width: 180px;} #wrap .wrapBg.diamond:before {background: url(/images/37/producbg.jpg) no-repeat 80% / auto 100%;} section#productBox .bgTxt.stitle{right: -12%;} #aboutBox .img_item img{ width: 780px; margin-top: -40px; } #aboutBox .img_item:before{width: 300px;left: 490px;height: 400px;} .fly_item{width: 425px;bottom: -214px;right: 0px;} #aboutBox .info{ padding-top: 78px; margin: 0px 0% 0 0%; width: 43.5%; } } @media screen and (max-width:1440px) { #productBox ul li >div { margin: 0 10px; } #productBox ul li .info { padding: 25px 15px 40px; width: calc(85% - 30px); } #aboutBox .bg {width: 42%;right: 6%;top: 0%;} #aboutBox .info .txtBox {padding: 0;} #aboutBox{padding: 5vw 0 0px;} #aboutBox .info::before{width: 230px;height: 220px;top: -70px;left: -50px;} .bgTxt.stitle{font-size: 70px;} #aboutBox .bgTxt.stitle {top: 8vw;left: 91%;font-size: 70px;} #aboutBox::after{right: 20px;top: 80px;letter-spacing: 0.75em;} section#productBox .bgTxt.stitle{display: none;} #ssubBox{ width: 80%; } #smallpicture{margin-top: 90px;} #aboutBox::before{height: 645px;} } @media screen and (max-width:1366px) { #wrap .wrapBg.diamond{display: none;} #productBox >.info{margin: auto;width: 100%;} } @media screen and (min-width: 1281px) { section .more a:hover font {color: #a69077;} section .more a:hover svg { fill: #fff; } section .more.white a:hover {background: #a69077;} section .more.white a:hover font {color: #ffffff;} section .more.white a:hover svg { fill: #1f1f1f; } section#productBox,footer{ background-attachment: fixed; } #productBox ul li:hover .img:before { opacity: 1; } #productBox ul li:hover .img img {-webkit-filter: blur(3px);filter: blur(3px);} } #ssbanner .ssDate:hover .sslishTxt .ssTxt::before, #ssbanner .ssDate:hover .sslishTxt .ssTxt p { opacity: 1; -webkit-transform: scale3d(1,1,1); transform: scale3d(1,1,1); padding: 0em 1em 1em; font-size: 13px;} #ssbanner .ssDate:hover .sslishTxt .ssTxt h3{ margin: 18% 0 0px 0; transition: 0.3s all; } } @media screen and (max-width:1440px) { #smallpicture {-webkit-transform: translate(0%,-40%);-ms-transform: translate(0%,-40%);transform: translate(0%,-40%);z-index:-1;} #ssubBox video { transform: scale(1.5); } } @media screen and (max-width:1280px) { #NewsBox .speBox {width: 88%;} #NewsBox .speBox .index-title {margin: 0 0 50px;padding-right: 60px;} #NewsBox #news { margin: 0; float: none; width: 100%; } section .more.white span{width: 60px;} #wrap .wrapBg.diamond{width: 140px;right: 90%;height: 1170px;} #aboutBox .img_item img { width: 620px; margin-top: 190px; } #aboutBox .info {/* width: 65.5%; *//* margin: 180px 5% 0 32.5%; */width: 48.5%;padding-top: 0px;} #aboutBox .info .title{ margin-left: 50px; } #aboutBox .info .txtBox article{ padding: 20px 0px 0 50px; } #aboutBox .info .txtBox .more{ padding: 20px 40px 20px 50px; } #aboutBox{padding: 5vw 0 0px;} #ssbanner{width: 100%;margin-top: 10px;} #NewsBox{padding: 100px 0 50px;} #ssbanner .ssDate .sslishTxt .ssTxt{ width: calc(100% - 2em); padding: 1em; height: calc(100% - 2em);} #ssubimg { width: 71%; } #ssubBox{ width: 90%; } } @media screen and (max-width: 1180px) { #bottomBox #ssbanner:after{bottom:0;height: 30%;display: none;} #bottomBox #ssbanner{width: 40%;} #aboutBox .img_item img { width: 90%; margin-top: -60px; } #aboutBox .info {width: 90%;position: inherit;top: 0;margin-left: 30px;} #smallpicture{ padding: 60px 0 0px; margin-top: 0; } } @media screen and (min-width:1025px) { #NewsBox #news .border:hover .news-info:after {right: 10px;background: rgb(8 8 8 / 84%);color: #ffffff;} #NewsBox #news .border:after {position: absolute;width: 100%;height: 100%;background: rgb(208 208 208 / 27%);display: block;top: 0;left: 0;content: "";transform: scale(0,1);transform-origin: right center 0;transition: transform 1s cubic-bezier(.23, 1, .32, 1);} #NewsBox #news .border:hover:after { transform: scale(1,1); transform-origin: left center 0; } #NewsBox #news .border:hover .news-info .catalog{background-color: #d61c06;color: #fff;} #NewsBox .speBox .index-title h2 , #NewsBox .speBox .index-title h3 a {-webkit-writing-mode:vertical-lr;-ms-writing-mode: tb-lr;writing-mode: vertical-lr;} #NewsBox .speBox .index-title h2, #NewsBox .speBox .index-title h3 a {padding-top: 55px;} #NewsBox .speBox .index-title h2 {position: relative;padding-top: 55px;font-weight: 500;letter-spacing: .07em;} #NewsBox .speBox .index-title h2::after {content: '';position: absolute;left: 70%;top: 0;background-color: #000;margin-left: -0.5px;width: 1px;height: 35px;} #aboutBox .info .txtBox article{font-size: 17.8px;padding: 20px 50px 0 20px;} } @media screen and (max-width:1024px) { #NewsBox #news .border:hover .news-info:after { right: 10px; } #NewsBox #news .border:after { position: absolute; width: 100%; height: 100%; background: rgba(255, 255, 255, .05); display: block; top: 0; left: 0; content: ""; transform: scale(0,1); transform-origin: right center 0; transition: transform 1s cubic-bezier(.23, 1, .32, 1); } #NewsBox #news .border:hover:after { transform: scale(1,1); transform-origin: left center 0; } #aboutFunc .index-title h3 a:hover ,#NewsBox .speBox .index-title h3 a:hover { border: 1px solid rgba(242, 183, 68, 0); } section .more a {padding: 0px 0px 0px 0px;} #aboutBox::after{right: -50px;bottom: 80px;top: 50px;height: 80%;background: #f5f5f5;z-index: -1;} #aboutBox .bg {width: 80%;top: calc(7vw + 54px);z-index: 1;position: inherit;display: block;top: 0%;margin: auto;background-position: 50% 0%;} #aboutBox .info .txtBox {padding: 0;background: none;} #aboutBox .info .txtBox h3{text-align: left;} #aboutBox .info:after,#aboutBox:before{display: none;} #aboutBox .info .more{margin-bottom: 0px;padding-bottom: 0px;margin-top: 60px;} #aboutBox .info::before{display: none;} #secabout:before { width: 90vw; } #secabout #customBox { width: 70vw; } #ssubBox video { width: auto; height: 100%; } #ssubBox{ display: flex; flex-direction: column; } #ssubimg {width: 100%;} #ssubBox{width: 64%;} #ssbanner .bxslider{ margin: 0; display: flex; align-content: space-between; margin: 0; justify-content: space-between; } #ssbanner .ssDate{ width: 46%; margin: 8px; } } @media screen and (max-width:980px) { #secabout:before { width: 0; } #secabout #customBox { width: 90vw; } .bookStyle{margin: 0% auto 0;} .bookStyle .photo{left: -5%;top: 0%;width: 80%;height: 60%;} .bookStyle .info{top: 20%;} .bookStyle .photo::before{bottom: 160px;right: -55px;width: 300px;height: 300px;} #smallpicture .row { display:block; } #smallpicture .row.left .roll:first-child { text-align:left; left:0; } #smallpicture .row.left .roll:last-child { text-align:right; } #smallpicture .row.right .roll:first-child { text-align:right; right:0; } #smallpicture .row.right .roll:last-child { text-align:left; } #NewsBox .speBox .index-title {margin: 0 0 22px;float: none;width: 100%;padding-right: 0;padding-left: 20px;display: flex;flex-direction: column;} #NewsBox .speBox .index-title h2{height: auto;font-size: 42px;} } @media screen and (max-width:640px){ #wrap{margin-top: -57px;z-index: 999;} .fly_item{width: 100%;bottom: 0;position: relative;} } @media screen and (max-width:780px) { #NewsBox #news .news-info .news-bottomv { width: 100%; } #NewsBox .speBox { width: 90%; } #NewsBox #news .news-info h3 {margin-top: 5px;width: calc(100% - 340px);} #NewsBox {padding: 70px 0 0;} #NewsBox #news .border { padding: 15px 0 15px 20px; } #aboutBox::after, #aboutBox .bgTxt.stitle,#aboutBox .bgTxt2.stitle{display: none;} #aboutBox{padding: 10vw 0 0px;} #bottomBox #ssbanner{width: 100%;margin: 0;} section#productBox{padding: 10px 0 30px;} .bookStyle .photo{left: -5%;top: 6%;width: 50%;height: 50%;} .bookStyle .photo::before{bottom: 70px;right: -105px;width: 220px;height: 220px;} .bookStyle .info{top: 20%;right: 0px;} #aboutBox .info {width: auto;left: 0;margin-left: 40px;margin-top: 20px;} #aboutBox .info .txtBox .more{margin: 0px 0px 10px;padding: 20px 0px 20px;} #aboutBox .bg{width: 100%;right: -6%;background-position: 50% -70%;margin: -50px 0 0;} #aboutBox .info .title::before{display: none;} #aboutBox .info .title, #aboutBox .info .title font{margin: 0px 0vw 0vw 0vw;margin-left: 0;font-size: 23px;} #aboutBox .info .txtBox article{padding: 20px 50px 0 0;} } @media screen and (max-width:640px) { #productBox ul li .info {margin: -55px auto 0;padding: 25px 30px 20px 20px;width: calc(85% - 60px);-webkit-backdrop-filter: blur(8px);backdrop-filter: blur(8px);background: rgb(255 255 255 / 0%);} .bgTxt.stitle{display: none;} #aboutBox .info .txtBox h3{font-size: 24px;} section {padding: 0vw 0;} .bookStyle .photo::before{bottom: 0px;right: -105px;width: 220px;height: 220px;} #customBox , #smallpicture .row.right { margin-top:0; } #smallpicture .row.left .roll:first-child,#smallpicture .row.right .roll:first-child { position:relative; text-align:left; } #smallpicture .row .roll:last-child a { margin-top:-50px; width:80%; } #smallpicture .row.right .roll:last-child { text-align:right; } #NewsBox #news .news-info{display: flex;flex-direction: column;align-items: flex-start;} #NewsBox #news .news-info h3 {margin-top: 5px;width: calc(100% - 60px);} #productBox .title , #smallpicture .title{font-size: 36px;margin: 0px 0vw 0vw 0vw;} #ssbanner .ssDate .sslishTxt .ssTxt h3 a{width: auto;} #ssubBox{width: 88%;padding: 7vw 0 7vw 0;} #ssbanner .ssDate .sslishTxt .ssTxt h3{ margin: 21% 0 0px 0; font-size: 17px; } #aboutBox .img_item img { width: 100%; margin-top: 50px; } } @media screen and (max-width:480px) { section .title,#aboutBox .info .title{font-size: 31px;letter-spacing: 1.5px;line-height: 130%;margin: 0px 0vw 0vw 0vw;} .bgTxt.stitle{display: none;} #ssbanner{display: flex;flex-direction: column;} #ssbanner .ssDate .sslishTxt{padding: 0px 0px 0px;margin: 10px 0;width: 100%;} #ssbanner .ssDate .sslishTxt .ssTxt{height: 100%;padding: 0em 1em;} #ssbanner .ssDate .sslishTxt img{height: auto;} #ssbanner .ssDate {margin: 0px 0px 0px;width: 100%;} #ssbanner .bxslider{display: flex;align-content: unset;justify-content: unset;flex-direction: column;} #productBox .index_newshello{margin-top: 100px;margin-left: 51%;width: 160px;} .bookStyle .photo {left: -25%;top: 10%;width: 70%;height: 50%;} .bookStyle .photo::before{bottom: -40px;right: -115px;} #ssbanner .ssDate .sslishTxt .ssTxt h3{ margin: 32% 0 0px 0; font-size: 17px; } }