section#productBox {position: inherit;background-size: auto;padding: 100px 0 0;overflow: hidden;} 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%;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;position: relative;} section .more {margin-top: 0px;text-align: center;} section .more a {position: relative;padding: 0;background-color: rgb(239 240 242);display: inline-block;} section .more font {text-align: center;font-size: 25px;font-weight: 400;letter-spacing: 2.7px;color: #151515;margin: 0px 0 0;display: block;} section .more a svg.arrow {position: absolute;width: 20px;right: 7px;top: calc((100% - 11.41px) / 2);} 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 .title,#productBox .title span{font-size: 32px;font-weight: 400;letter-spacing: 3.5px;color: #a69077;position: relative;} #productBox .subtitle{font-size: 15px;letter-spacing: 2px;text-align: center;color: #a69077;} #productBox .title span{vertical-align: baseline;margin-left: 10px;color: #706767;} #productBox .title .deco {margin: 0 0 0 20px;display: inline-block;position: relative;width: 1px;height: 10px;} #productBox .title .deco:first-child {margin: 0 35px 0 0;} #productBox .title .deco::before {content: "";display: inline-block;position: absolute;top: calc(50% + -8.5px);left: 0;width: 5px;height: 5px;background-color: #a67e58;transform: rotate(45deg);} #productBox .title::before {content: "";width: 330px;height: 1px;background-color: rgb(166 126 87 / 62%);position: absolute;top: calc(50% - -2px);left: 330px;} #productBox .title::after {content: "";width: 330px;height: 1px;background-color: rgb(166 126 87 / 62%);position: absolute;top: calc(50% - -2px);right: 330px;} #productBox .more a{background-color: rgb(255 255 255 / 0%);} #productBox .more a:hover font {filter: drop-shadow(5px 5px 0px #a67e58);transform: translate(-5px, -5px);} #productBox .more .moretitle{text-align: center;margin: 20px 0;} #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;z-index: 10;width: 85%;} @-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 {background: #13140f no-repeat 50% 100% / cover;color: #fff;display: flex;} #NewsBox .speBox {overflow: hidden;margin: 100px auto 0;width: 70%;} #NewsBox .index-title h4 { color: #9cc4d7; } #NewsBox .speBox .index-title h2 , #NewsBox .speBox .index-title h3 a {color: #ffffff;} #NewsBox .speBox .index-title h2{font-family: 'Frank Ruhl Libre', serif;font-size: 18px;width: auto;line-height: 100%;padding: 0 0 15px 0;font-weight: 200;} #NewsBox .speBox .index-title {margin-left: 20px;} #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-top: 20px;width: 80%;} #NewsBox #news .border {overflow: hidden;position: relative;padding: 20px 0 20px 20px;border-bottom: 1px solid rgb(104 104 104 / 35%);} #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(187 187 187 / 10%);border-radius: 50%;display: block;text-align: center;line-height: 30px;font-size: 8pt;color: #ffffff;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: #ffffff;} #NewsBox #news .news-info p {color: #ffffff;} #NewsBox #news .news-info .catalog {overflow: hidden;margin: 0 10px;padding: 2px 8px;float: left;width: 80px;line-height: 150%;text-align: center;color: #ffffff;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: 4vw 0 4vw 0;justify-content: space-evenly;} #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;} #ssbanner .bxslider{margin: 0px auto;position: relative;width: 85%;} #ssbanner .ssDate {position: relative;} #ssbanner .ssDate {margin: 8px;} #ssbanner .ssDate .sslishTxt{position: relative;overflow: initial;background-color: #685b4d;} #ssbanner .ssDate .sslishTxt img{height: 270px;width: 100%;object-fit: cover;} #ssbanner .ssDate:nth-child(2n) .sslishTxt{background-color: #918579;} #ssbanner .ssDate:nth-child(3n) .sslishTxt{background-color: #b5a392;} #ssbanner .ssDate:nth-child(4n) .sslishTxt{background-color: #b3997f;} #ssbanner .ssDate .sslishTxt .ssTxt{position: absolute;top: 0;left: 0;width: calc(100% - 2em);padding: 1em;color: #fff;text-transform: uppercase;font-size: 1.25em;-webkit-backface-visibility: hidden;backface-visibility: hidden;height: calc(100% - 2em);} #ssbanner .ssDate .sslishTxt .ssTxt::before{position: absolute;top: 20px;right: 20px;bottom: 20px;left: 20px;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 .subBoxTxt h3 {margin: -50px 0px 20px auto;text-align: center;font-size: 20px;letter-spacing: 4.5px;font-weight: 300;padding: 9px 4px;background-color: #fff;z-index: 40;} #ssbanner .ssDate .sslishTxt .subBoxTxt p {color: #fff;} #ssbanner .ssDate .sslishTxt .subBoxTxt h3 a{color: #ffffff;padding: 0 0 10px;font-weight: 400;} #ssbanner .ssDate .sslishTxt .subBoxTxt 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; } #ssbanner .ssDate .sslishTxt{background-image: url(/images/37/pd-bg.png);background-size: cover;background-repeat: no-repeat;} #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: -0.5em 1em 1em;} #ssbanner .ssDate:hover .sslishTxt .ssTxt h3{margin: 18% 0 0px 0;transition: 0.3s all;} #productBox .more a font{color: #ffffff;display: block;width: 217px;height: 50px;margin: 0 auto;background-image: url(/images/37/btnBg2.png);background-size: contain;background-repeat: no-repeat;text-align: center;line-height: 50px;font-size: 15px;letter-spacing: 2px;font-weight: 500;color: #a67e58;} #ssbanner .ssDate .sslishTxt .subBoxTxt{-webkit-writing-mode: vertical-lr;-ms-writing-mode: tb-lr;writing-mode: vertical-lr;display: flex;align-items: center;margin: -20px 40px 0px auto;padding-bottom: 30px;height: 220px;} .bottomBox { display: flex; justify-content: space-between; z-index: 10; } .bottomBox a {margin-top: 35px;display: inline-block;width: 50%;height: 65px;font-weight: 400;line-height: 65px;letter-spacing: 0.5px;border: solid 1px #dbd0bc;background-color: #c8b086;text-align: center;color: #ffffff;z-index: 100;} .bottomBox a i{ margin-right: 10px; font-size: 22px; vertical-align: inherit; } /* aboutBox */ #aboutBox {z-index: 5;padding: 9vw 0 9vw 0;background-size: auto;} #aboutBox::before {content: "";display: block;position: absolute;top: 0;right: 0;width: 100%;height: 100%;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 {margin: 30px 0% 0 0%;padding-top: 95px;} #aboutBox .info .more{position: relative;margin-top: 0px;padding-bottom: 35px;text-align: inherit;display: none;} #aboutBox .info .title1 {color: #ffffff;font-weight: 400;letter-spacing: 1.5px;text-align: center;} #aboutBox .info .title3 {margin: 0px 0vw 0vw 2vw;text-align: inherit;font-size: 20px;font-weight: 700;letter-spacing: 2.5px;position: relative;display: flex;flex-direction: column;color: #a69077;position: relative;line-height: 130%;} #aboutBox .info .title3 font{font-size: 18px;} #aboutBox .info .title {margin: 0px 0vw 0vw 0vw;text-align: inherit;font-size: 34px;font-weight: 500;letter-spacing: 1.5px;position: relative;display: flex;flex-direction: column;color: #a69077;position: relative;} #aboutBox .info .title font{font-size: 34px;font-weight: 500;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: #000000;margin: 0px 0 0px;letter-spacing: 1.0px;font-weight: 400;width: auto;margin: auto;word-break: break-all;} #aboutBox .info .txtBox .Txt{margin-bottom: 20px;font-size: 21px;font-weight: bold;color: #1f1d1c;} #aboutBox #SeoStarRating{display: none;} #aboutBox .info .txtBox .more {margin: 0px 0px 0px;text-align: initial;} #aboutBox #SeoStarRating font { vertical-align: middle; } #aboutBox #SeoStarRating font:last-child {color: #525252;} #aboutBox #SeoStarRating .fa { vertical-align: initial; } /* smallpicture */ #smallpicture {padding: 140px 0 0px;margin-top: 220px;right:0%;-webkit-transform: translate(0%,0%);-ms-transform: translate(0%,0%);transform: translate(0%,0%);z-index:-1;} #smallpicture .workframe {text-align:center;margin: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: 85%;} #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%;} } @media screen and (max-width:1440px) { #aboutBox .bg {width: 42%;right: 6%;top: 0%;} #aboutBox .info .txtBox {padding: 0;} #aboutBox{padding: 9vw 0 9vw 0;} #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: 130px;top: 180px;background: #f5f5f5;} section#productBox .bgTxt.stitle{display: none;} #productBox ul li >div { margin: 0 10px; } #productBox ul li .info { padding: 25px 15px 40px; width: calc(85% - 30px); } #productBox .title::before {width: 12%;left: 415px;} #productBox .title::after {width: 12%;right: 415px;} } @media screen and (max-width:1366px) { #wrap .wrapBg.diamond{display: none;} #productBox >.info{margin: auto;} #productBox .title::before {width: 12%;left: 395px;} #productBox .title::after {width: 12%;right: 395px;} } @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{margin: -310px 0 0;z-index: 10;} footer{} #productBox ul li:hover .img:before { opacity: 1; } #productBox ul li:hover .img img {-webkit-filter: blur(3px);filter: blur(3px);} .bottomBox a:hover {background-color: #ffffff;border: solid 1px #c8b086;color: #c8b086;} } @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: 48.5%;padding-top: 0px;} #aboutBox .info .title,#aboutBox .info .title font{ font-size: 28px; } #aboutBox .info .title3{ margin: 0px 0vw 2vw 0vw; } #aboutBox .info .txtBox article{padding: 0px 0px 0 0px;} #aboutBox .info .txtBox .more{padding: 20px 40px 20px 50px;} #aboutBox{padding: 5vw 0 0px;} #ssbanner{width: 100%;margin-top: 0;} #NewsBox{padding: 100px 0 50px;} #ssbanner .ssDate .sslishTxt .ssTxt{width: calc(100% - 2em);padding: 1em;} #productBox .title::before {width: 12%;left: 355px;} #productBox .title::after {width: 12%;right: 347px;} } @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: 30px;} #productBox .title::before,#productBox .title::after { display: none; } } @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(56 56 56 / 34%);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: #977452;color: #fff;} #NewsBox .speBox .index-title h2 , #NewsBox .speBox .index-title h3 a {} #NewsBox .speBox .index-title h2, #NewsBox .speBox .index-title h3 a {} #NewsBox .speBox .index-title h2 {position: relative;font-weight: 300;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;margin-top: 40px;margin-right: 40px;} section#productBox:before {content: '';position: absolute;bottom: 0;right: -220px;display: block;width: 470px;height: 660px;background-image: url(/images/37/index-ss-icon02.png);background-repeat: no-repeat;background-size: 330px;background-position: bottom;animation: iconRotate2 8s ease-in-out both alternate-reverse infinite;} section#productBox:after {content: '';position: absolute;left: -60px;bottom: -90px;display: block;width: 260px;height: 460px;background-image: url(/images/37/index-ss-icon01.png);background-repeat: no-repeat;background-position: center;background-size: 240px;animation: iconRotate 6s ease-in-out both alternate-reverse infinite;} @-webkit-keyframes iconRotate { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(15deg); transform: rotate(15deg); } } @keyframes iconRotate { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(15deg); transform: rotate(15deg); } } @-webkit-keyframes iconRotate2 { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg); } } @keyframes iconRotate2 { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg); } } @-webkit-keyframes iconRotate3 { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 80% { -webkit-transform: rotate(5deg); transform: rotate(5deg); } 100% { -webkit-transform: rotate(5deg); transform: rotate(5deg); } } @keyframes iconRotate3 { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 80% { -webkit-transform: rotate(5deg); transform: rotate(5deg); } 100% { -webkit-transform: rotate(5deg); transform: rotate(5deg); } } #aboutBox .img_item img{width: 860px;margin-top: -40px;} #aboutBox .info{margin: auto;padding: 0;display: flex;flex-wrap: wrap;justify-content: flex-start;align-items: center;writing-mode: vertical-rl;height: 390px;margin-left: auto;} } @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;} #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{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;} #ssbanner .bxslider{ width: 100%; } #ssbanner .ssDate{width: 46%;margin: 8px;} #NewsBox{ display: flex; flex-direction: column; padding: 0px 0 50px; } } @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: auto;padding-right: 0;padding-left: 20px;display: flex;flex-direction: column;} #NewsBox .speBox .index-title h2{height: auto;font-size: 18px;} } @media screen and (max-width:780px) { #NewsBox #news .news-info .news-bottomv { width: 100%; } #NewsBox .speBox {width: 90%;margin: 50px auto 0;} #NewsBox #news .news-info h3 {margin-top: 5px;width: calc(100% - 340px);} #NewsBox {padding: 0px 0 30px;} #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 0px;} .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: 10px;} #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;} #aboutBox .info .txtBox article{padding: 0px 0px 40px 0;font-size: 14.8px;} .bottomBox{ display: flex; flex-direction: column; } .bottomBox a{ width: 100%; margin-top: 0px; } } @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{font-size: 24px;margin: 0px 0vw 0vw 0vw;} #ssbanner .ssDate .sslishTxt .ssTxt h3 a{width: auto;} #ssubBox{padding: 7vw 0 7vw 0;} #ssbanner .ssDate .sslishTxt .ssTxt h3{margin: 21% 0 0px 0;font-size: 17px;} #aboutBox .img_item img {width: 90%;margin-top: 50px;} #productBox .more .moretitle{font-size: 14px;} } @media screen and (max-width:480px) { section .title, #aboutBox .info .title, #aboutBox .info .title font{font-size: 26px;letter-spacing: 1.5px;line-height: 130%;margin: 0px 0vw 0vw 0vw;} .bgTxt.stitle{display: none;} #ssbanner .ssDate .sslishTxt{padding: 0;margin: 0px;width: 100%;} #ssbanner .ssDate {margin: 0px 0px 0px;width: 100%;} #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;} }