.wow { animation-duration: .7s; animation-name: fadeInUp; } /* #casebox */ #casebox{padding: 50px 0 70px 0;position: relative;} #casebox .controller{width: 1280px;margin: 50px auto 0;background-color: #f8f8f8;padding: 90px 40px 20px;position: relative;} #casebox .controller::after {content: "";border: 4px #fff solid;position: absolute;width: 94%;height: 88%;top: 0;right: 0;bottom: 0;left: 0;margin: 1.8% 2%;z-index: 1;} #bookBox #book::before {content: 'SARA’S WE';position: absolute;top: 0%;right: 0%;font-size: 80px;font-weight: 300;color: #f8f8f8;line-height: 1;text-transform: uppercase;} #caseboxlist{text-align: center;} #caseboxlist >div{display: inline-block;width: calc((100%/5) - 20px);margin: 50px 0px 20px 0px;vertical-align: top;position: relative;z-index: 5;} #caseboxlist >div:before {content: '';position: absolute;top: -62px;left: 18px;display: block;width: 70%;height: 70%;background-color: #ffffff00;border: 1px solid #dadada;border-radius: 50%;z-index: 0;} #caseboxlist .case{animation-delay: 0.5s;-webkit-animation-delay: 0.5s;padding: -10px 20px;height: 230px;} #caseboxlist .case:hover .txt h3 {transform: scale(1,1);-webkit-transform: scale(1,1);-moz-transform: scale(1.1,1.1);-o-transform: scale(1.1,1.1);-ms-transform: scale(1.1,1.1);} #caseboxlist >div:nth-child(2) .case{animation-delay: 1s; -webkit-animation-delay: 1s;} #caseboxlist >div:nth-child(3) .case{animation-delay: 1.5s; -webkit-animation-delay: 1.5s;} #caseboxlist >div:nth-child(4) .case{animation-delay: 2s; -webkit-animation-delay: 2s;} #caseboxlist >div:nth-child(5) .case{animation-delay: 2.5s; -webkit-animation-delay: 2.5s;} #caseboxlist >div:nth-child(6) .case{animation-delay: 3s; -webkit-animation-delay: 3s;} #caseboxlist >div:nth-child(7) .case{animation-delay: 3.5s; -webkit-animation-delay: 3.5s;} #caseboxlist >div:nth-child(8) .case{animation-delay: 4s; -webkit-animation-delay: 4s;} #caseboxlist .case .txt{position: relative;transform: translateY(-30px);} #caseboxlist .case .txt .num {position: absolute;top: 0px;right: 13px;width: 55px;text-align: center;font-size: 40px;font-weight: 500;color: #565656;line-height: 1;z-index: 3;border-bottom: 1px solid currentColor;} #caseboxlist .case .txt a{position: absolute;width: 100%;height: 100%;z-index: 2;} #caseboxlist .case .txt h3 img{border-radius: 50%;} #caseboxlist .case .txt h3{position:relative;width: 160px;margin: auto;transition: all .25s linear;transform: scale(1.1,1.1);-webkit-transform: scale(1.1,1.1);} #caseboxlist .case .txt h3:before {display: block;content: "";position: absolute;transition: all 650ms ease-out;border-radius: 0%;z-index: 1;width: calc(100% - 40px);height: calc(100% - 40px);opacity: 0;} #caseboxlist .case:hover .txt h3:before {opacity: 1;} #caseboxlist .case .txt p{text-align: center;margin-top: 25px;font-size: 16px;letter-spacing: 0.5px;color: #464646;font-weight: 400;} #caseboxlist .case .txt article{opacity: 0;font-size: 13px;text-align: center;transition: all .25s linear;text-transform: uppercase;} #caseboxlist .case:hover .txt article {margin-left: 0px;opacity: 1;transform: translateY(0px);-webkit-transform: translateY(-10px);-moz-transform: translateY(-10px);-o-transform: translateY(-10px);-ms-transform: translateY(-10px);margin-top: 14px;font-size: 15px;color: #c7c7c7;} /* freebox */ #freebox {overflow: hidden;position: relative;padding: 100px 0 0;} #freebox:after {position: absolute;width: 100%;height: 100%;display: block;background: #fff;top: 0;left: 0;z-index: 1;content: "";opacity: .95;} #freebox .title, #casebox .title, #product .title {text-align: center;position: relative;z-index: 2;font-size: 40px;line-height: 160%;color: #545454;font-weight: 400;text-transform: uppercase;} .title:before {content: "";position: absolute;top: 53%;left: 37%;height: 1px;background-color: #626262;transition: all 0.6s 0.2s ease;width: 50px;opacity: 1;} #freebox .subtitle, #casebox .subtitle, #product .subtitle {text-align: center;position: relative;padding: 5px 0;z-index: 2;font-size: 16px;font-weight: 400;letter-spacing: 0.5px;color: #525252;} #freebox .controller {overflow: hidden;position: relative;z-index: 2;width: 100%;margin: 20px auto 0px;} #freebox .index-title { margin: 0; } #freeboxlist ul li {position: relative;} #freeboxlist ul li{padding: 0px 0px;position: relative;} #freeboxlist ul li .morea{position: absolute;width: 100%;height: 100%;} #freeboxlist ul li .textBox {pointer-events: none;position: absolute;top: 120px;left: 0;width: 100%;height: 100%;text-align: center;letter-spacing: 1px;-webkit-transition: all 0.4s ease;-o-transition: all 0.4s ease;transition: all 0.4s ease;z-index: 5;} #freeboxlist ul li .info_box.abso_box {height: auto;top: calc((100% - 490px) / 2);left: 0;position: absolute;width: 100%;height: 100%;z-index: 4;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;-webkit-transition: all .3s ease-out;-moz-transition: all .3s ease-out;-ms-transition: all .3s ease-out;-o-transition: all .3s ease-out;transition: all .3s ease-out;} #freeboxlist ul li .info_box >* {margin: 5px auto;width: 38%;text-align: center;} #freeboxlist ul li .info_box h4 {height: 37%;display: inline;font-weight: 200;font-size: 18px;color: #fff;-webkit-writing-mode: vertical-lr;-ms-writing-mode: tb-lr;writing-mode: vertical-rl;letter-spacing: 3px;width: 8%;font-weight: 400;} #freeboxlist ul li .info_box article {margin: 20px auto 15px;width: 45%;color: rgb(255 255 255 / .7);line-height: 160%;font-size: 15px;-webkit-line-clamp: 2;opacity: 1;margin-top: 20px;width: 140px;height: 44px;font-size: 14px;font-weight: 400;color: #fff;padding-bottom: 15px;border-bottom: 1px solid rgba(255, 255, 255, 0.3);} #freeboxlist ul li .info_box .more_box {opacity: 0;color: #fff;} #freeboxlist .btn a { position: absolute; width: 26px; height: 26px; border: solid #444; display: block; top: calc((100% - 26px) / 2); } #freeboxlist .btn a#product_prev { border-width: 1px 0 0 1px; transform: rotate(-45deg); left: -50px; } #freeboxlist .btn a#product_next { border-width: 1px 1px 0 0; transform: rotate(45deg); right: -50px; } #freeboxlist .slick-slider {margin-bottom: 0px;} #freeboxlist .slick-dots li button:before { width: 12px; height: 12px; background: transparent; border: 1px #000 solid; border-radius: 50%; text-align: center; opacity: 1; content: ""; } #freeboxlist .slick-dots li.slick-active button:before { background: #000; } #freeboxlist ul li .relat_box >*{padding-bottom: 0px;background: linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgb(0 0 0 / 12%) 63%,rgb(0 0 0 / 30%) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000',endColorstr='#a6000000',GradientType=0 );transition: all ease-in-out .3s;background-repeat: no-repeat;background-size: cover;} /* product */ #product {overflow: hidden;padding: 90px 0;} #product .rightBox {width: 90%;margin: 30px auto 0;} #product .leftT .index-title , #NewsBox .speBox .index-title , #aboutFunc .speBox { animation-name: fadeInLeft; } #product #prolay .pro-list >div {float: left;width: calc((100%/4) - 20px);margin: 10px;} #product #prolay .p-box {position: relative;z-index: 1;} #product #prolay .p-box a { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 3; } #product #prolay .p-box .p-border { overflow: hidden; position: relative; transition: .3s ease-in-out; -o-transition: .3s ease-in-out; -moz-transition: .3s ease-in-out; -webkit-transition: .3s ease-in-out; } #product #prolay .p-box .photo {transition: .3s ease-in-out;-o-transition: .3s ease-in-out;-moz-transition: .3s ease-in-out;-webkit-transition: .3s ease-in-out;background-position: 50% 50%;background-repeat: no-repeat;background-size: cover;} #product #prolay .p-box .photo img { position: relative; } #product #prolay .p-box .p-info {position: absolute;width: 100%;font-size: 14px;top: calc(50% - 20px);z-index: 2;opacity: 0;} #product #prolay .p-box:hover .p-info{opacity: 1;} #product #prolay .p-box .p-info h3 {margin-bottom: 10px;font-size: 22px;line-height: 110%;color: #ffffff;text-align: center;} #product #prolay .p-box .p-info .describe {overflow: hidden;line-height: 130%;color: #fff;text-align: center;} #product #prolay .p-box:hover .p-info .describe{letter-spacing:1px} #product #prolay .p-box .p-info .price { overflow: hidden; margin-top: 70px; } #product #prolay .p-box .p-info .price span { display: block; font-size: 1.1rem; color: #de7f2e; } #product #prolay .p-box .p-info .price span.old { font-size: .7rem; color: #9c9c9c; } #product #prolay .p-box .p-border:after {position: absolute;width: 100%;height: 100%;border: rgba(35, 135, 158, 0) 0 solid;display: block;z-index: 1;background-color: #000;opacity: 0;top: 0;left: 0;content: "";transition: .3s ease-in-out;-o-transition: .3s ease-in-out;-moz-transition: .3s ease-in-out;-webkit-transition: .3s ease-in-out;transform-style: preserve-3d;} #product #prolay .p-box:hover .p-border:after{opacity: .2;} #product #prolay .p-box .photo img:before { position: absolute; width: 100%; height: 100%; background: #000; display: block; top: 0; left: 0; z-index: 1; content: ""; } /* NewsBox */ #NewsBox { padding: 100px 0; background: #045b85 no-repeat 50% 100% / cover; color: #fff; } #NewsBox .speBox { overflow: hidden; margin: 0 auto; width: 980px; } #NewsBox .speBox .index-title { float: left; width: 200px; } #NewsBox .index-title h4 { color: #9cc4d7; } #NewsBox .speBox .index-title p , #NewsBox .speBox .index-title h2 , #NewsBox .speBox .index-title h3 a { color: #fff; } #NewsBox #news { margin-left: 80px; float: left; width: calc(100% - 280px); } #NewsBox #news .border { overflow: hidden; position: relative; padding: 20px 0 20px 20px; border-bottom: 1px solid rgba(255,255,255,0.1); } #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; font-size: 11pt; } #NewsBox #news .news-info:after { position: absolute; width: 30px; height: 30px; background: rgba(255, 255, 255, .1); border-radius: 50%; display: block; text-align: center; line-height: 30px; font-size: 8pt; color: #e1dcb1; 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; } #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; } #NewsBox #news .news-info p { float: left; color: #75a4ba; } #NewsBox #news .news-info .catalog { overflow: hidden; margin: 0 20px; padding: 0 8px; float: left; width: 80px; background: rgba(255, 255, 255, .2); border-radius: 5px; line-height: 150%; text-align: center; color: #a7ccd2; white-space: nowrap; text-overflow: ellipsis; } /* bookBox */ #bookBox {overflow: hidden;} #bookBox #bookTitle { margin-right: -4px; width: 50%; display: inline-block; } #bookBox #bookTitle .index-title { animation-name: fadeInRight; } #bookBox #book {background-image: url(/images/17/index-freebox-bg.jpg);background-repeat: no-repeat;background-position: 50% 50%;width: 1160px;margin: auto;} #bookBox #book .slick-prev , #bookBox #book .slick-next {width: 50px;height: 50px;background: url(/images/17/index-sccrow-p.png) rgb(0 0 0 / 44%) no-repeat 50% / 25px;bottom: 0;z-index: 5;transform: none;top: inherit;left: calc(50% - 100px);background-size: 30%;} #bookBox #book .slick-next {background-image: url(/images/17/index-sccrow-n.png);left: auto;right: 50%;} #bookBox #book .slick-prev:before , #bookBox #book .slick-next:before { display: none; } #bookBox #book .mofd {position: relative;display: inline-block;width: 50%;} #bookBox #book .mofd::before {content: '';position: absolute;z-index: -1;width: 145px;height: 400px;background-color: #f8f8f8;pointer-events: none;right: -45px;bottom: -55px;} #bookBox #book .mofd .photo { background: #fcfcfc no-repeat 50% / cover; } #bookBox #book .text {display: inline-block;width: calc(50% - 120px);vertical-align: middle;padding-left: 100px;} #bookBox #book .text h3 {padding: 40px 0 40px;position: relative;} #bookBox #book .text h3::before {content: "";position: absolute;bottom: 6px;left: 0;width: 35px;height: 1px;background-color: #9e9e9e;} #bookBox #book .text h3 a {display:block;font-size: 28px;font-weight: 300;line-height: 150%;color: #424242;} #bookBox #book .text p {letter-spacing: 0.5px;color: #525252;font-size: 15px;margin-top: 20px;width: 90%;font-weight: 400;} #bookBox #book .text p.more a{font-size: 13px;background: #424242;color: #fff;display: inline-block;padding: 15px 40px;margin-top: 30px;} /* aboutFunc */ #aboutFunc { overflow: hidden; position: relative; background: no-repeat 50% / cover; } #aboutFunc .speBox {position: relative;float: left;padding: 100px 0;width: 100%;background: rgb(0 0 0 / 68%);text-align: right;animation-name: fadeInDown;} #aboutFunc .speBox:after {position: absolute;width: 0;height: 0;border-style: double;border-width: 20vh 210px 40vh 470px;border-color: rgb(255 255 255 / 10%) transparent transparent rgb(255 255 255 / 10%);display: block;right: 0px;top: -340px;content: "";} #aboutFunc .index-title {max-width: 1160px;margin: 0 auto;position: relative;width: 50%;float: right;padding: 30px 130px 20px 10px;} #aboutFunc .index-title h3 {color: #fff;font-size: 40px;line-height: 100%;text-transform: uppercase;font-weight: 100;text-align: center;position: relative;} #aboutFunc .index-title h3::before {content: '';width: 57px;height: 57px;background: url(/images/17/icon-logo.png) no-repeat;position: absolute;top: 0;left: calc(50% - 28px);} #aboutFunc .index-title h2 {color: #fff;font-size: 17px;letter-spacing: 3px;text-align: center;font-weight: normal;position: relative;} #aboutFunc .index-title h2::after {content: '';width: 40px;height: 1px;background: rgba(213, 209, 198, 0.5);position: absolute;bottom: -30px;left: calc(50% - 20px);} #aboutFunc .index-title h4 {color: #fff;line-height: 200%;font-weight: 100;font-size: 15px;margin-top: 60px;text-align: center;} #aboutFunc .index-title p {text-align: center;margin-top: 50px;} #aboutFunc .index-title p a{text-transform: uppercase;background-color: #fff;font-size: 12px;letter-spacing: 1px;padding: 15px 40px;display: inline-block;} #aboutFunc .index-title p a:hover{opacity:.8;} #aboutFunc #youtube { position: relative; margin-top: 20px; background: no-repeat 50% / cover; } #youtube .UTwo { overflow: hidden; position: relative; padding: 30px 0 56.25%; height: 0; } #youtube .UTwo a { position: absolute; width: 100px; height: 100px; border-radius: 50%; background: rgba(0, 0, 0, .6); display: block; text-align: center; line-height: 100px; color: #dcdcdc; font-size: 30px; left: calc(50% - 50px); top: calc(50% - 50px); z-index: 5; transition:all linear .3s; } #youtube .UTwo iframe { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .rightBox.imgSkirt::after { right: 0; transform-origin: right top; } #book.imgSkirt::after {left: 0px;} .open.imgSkirt::after , #book.open.imgSkirt::after { width: 0; } @media screen and (max-width:1440px) { #bookBox #book .text {padding-left: 120px;width: calc(50% - 130px);} #freeboxlist ul li .img_box_cover img {height: 460px;} } @media screen and (max-width:1280px) { #product .rightBox {width: 95%;} #NewsBox .speBox { width: 80%; } #NewsBox .speBox .index-title { margin: 0 0 50px; float: none; width: 300px; } #NewsBox #news { margin: 0; float: none; width: 100%; } #freeboxlist ul li.slick-current .relat_box:before {background: rgb(10 10 10 / 47%);} #freeboxlist ul li.slick-current .info_box.abso_box {top: calc((100% - 400px) / 2);} #freeboxlist ul li.slick-current .info_box article { margin: 30px auto 15px; height: 44px; opacity: 1; } #freeboxlist ul li.slick-current .info_box .more_box { opacity: 1; } } @media screen and (min-width: 1281px){ #freeboxlist ul li:hover .relat_box:before {background: rgb(25 25 25 / 49%);} #freeboxlist ul li:hover .info_box.abso_box {top: calc((100% - 640px) / 2);} #freeboxlist ul li:hover .info_box article {margin: 10px auto 15px;height: 35px;opacity: 1;border-bottom: 1px solid rgb(255 255 255 / 0%);} #freeboxlist ul li:hover .info_box .more_box { opacity: 1; } #freeboxlist ul li:hover .info_box .more_box {padding: 5px 10px;border: 1px rgba(255, 255, 255, .3) solid;display: inline-block;color: #fff;} } @media screen and (min-width:1025px) { #freeboxlist .free:hover .ic b { -webkit-transform: translate(-3px, -3px); transform: translate(-3px, -3px); } #freeboxlist .free:hover .ic:after { -webkit-transform: translate(2px, 2px); transform: translate(2px, 2px); } #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); } #bookBox #book .slick-prev:hover , #bookBox #book .slick-next:hover {background-color: rgb(31 31 31 / 31%);} #product #prolay .p-box:hover { border-radius: 5px; z-index: 2; } #product #prolay .p-box:hover .p-border:after {} #product #prolay .p-box:hover .p-border {} #product #prolay .p-box:hover .photo {} #youtube .UTwo a:hover { width: 110px; height: 110px; line-height: 110px; font-size: 34px; left: calc(50% - 55px); top: calc(50% - 55px); } #aboutFunc{background-attachment: fixed;} } @media screen and (max-width:1024px) { #freebox .controller , #comprehensive {width: 100%;} #freeboxlist .free .txt p { width: 100%; } #freeboxlist {} #bookBox { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; } #bookBox #book { width: 100%; order: 2; } #bookBox #bookTitle { margin: 0; padding: 50px 0; width: 100%; order: 1; } #aboutFunc .speBox {} #product #prolay .pro-list >div{width: calc((100%/3) - 20px);} #casebox .controller{width: 90%;margin: 20px auto 0;padding: 50px 20px 20px;} #caseboxlist >div:before,.title:before,#casebox .controller::before{display: none;} #casebox{padding: 30px 0 40px 0;} #freebox{padding: 50px 0 0;} } @media screen and (max-width:768px) { #product #prolay .pro-list >div , #NewsBox #news .news-info .news-bottomv {width: calc((100%/2) - 20px);} #NewsBox .speBox { width: 90%; } #NewsBox #news .news-info h3 { margin-top: 5px; width: calc(100% - 60px); } #NewsBox { padding: 70px 0; } #NewsBox #news .border { padding: 15px 0 15px 20px; } #aboutFunc .speBox {} #aboutFunc .index-title {width: 85%;margin: 0 auto;float: inherit;padding: 0px 14px 10px 14px;} #aboutFunc .speBox:after { border-width: 100vh 100px 0 0; right: -100px; } #freeboxlist >div{width: calc((100%/2) - 5px);} #bookBox #book .mofd{display: block;width: 100%;} #bookBox #book .text{display: block;width: calc(100% - 100px);padding: 50px;} #bookBox #book .slick-next{right: 0;bottom: calc(50% - 105px);} #bookBox #book .slick-prev{right: 50px;left: inherit;bottom: calc(50% - 105px);} #bookBox #book .mofd::before{right: -165px;bottom: -25px;width: 100%;} } @media screen and (max-width:640px) { #aboutFunc .index-title h2 {} #bookBox #book .mofd h3 { top: calc(50% - 11pt); } #bookBox #book .mofd h3 a { font-size: 22pt; } #product{padding: 50px 0;} #caseboxlist .case .txt .num{right: -2px;} #freebox .subtitle, #casebox .subtitle, #product .subtitle {font-size: 15px;letter-spacing: 0.2px;} } @media screen and (max-width:480px) { #freeboxlist .free .ic { margin: 7px auto; float: none; width: 52px; display: block; } #freeboxlist .free .txt { margin: 30px auto 0; float: none; width: 90%; } #freeboxlist .free .txt h3 , #freeboxlist .free .txt p { text-align: center; } #freebox .index-title { margin: 0 auto; } #aboutFunc .speBox {padding: 70px 0 30px;width: 100%;} #aboutFunc .index-title {width: 92%;} #caseboxlist >div{width: calc(49% - 5px);margin-bottom: 20px;margin: 30px 0px 0px 0px;} #casebox .controller::after{height: 97%;} #caseboxlist .case{height: 100%;} #caseboxlist .case .txt h3{width: 110px;} #bookBox #book .text p{width: 100%;} #bookBox #book .text{width: calc(100% - 40px);padding: 20px;} #bookBox #book .slick-prev, #bookBox #book .slick-next{bottom: 0;} }