.wow { animation-duration: .7s; animation-name: fadeInUp; } /* #casebox */ #casebox{padding:7vw 0} #casebox .controller{width:1180px;margin:50px auto 0} #caseboxlist{display:grid;grid-template-columns:repeat(4,1fr);justify-content:center} #caseboxlist >div{display:inline-block} #caseboxlist .case{animation-delay:0.5s;-webkit-animation-delay:0.5s;padding:0 20px} #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 .case .txt{position:relative;display:flex;flex-direction:column;align-items:center} #caseboxlist .case .txt a{position:absolute;width:100%;height:100%;z-index:2} #caseboxlist .case .txt h3{position:relative;transition:transform .8s cubic-bezier(.16,1,.3,1)} #caseboxlist .case .txt h3:before{display:block;content:"";position:absolute;transition:all 650ms ease-out;border:10px solid rgb(149 124 90 / 60%);z-index:1;width:calc(100% - 20px);height:calc(100% - 20px);opacity:0} #caseboxlist .case:hover .txt h3:before{opacity:1} #caseboxlist .case:hover .txt h3{transform:rotate(3deg)} #caseboxlist .case .txt p{text-align:center;margin-top:15px;font-size:18px} /* freebox */ #freebox{overflow:hidden;position:relative;padding:100px 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;font-family:'Montserrat',sans-serif;line-height:100%;margin-bottom:5px} #freebox .subtitle,#casebox .subtitle,#product .subtitle{text-align:center;position:relative;z-index:2;font-size:14px;letter-spacing:3px} #freebox .controller{overflow:hidden;position:relative;z-index:2;width:1280px;margin:20px auto 0} #freebox .index-title{margin:0} #freeboxlist{display:grid;grid-template-columns:repeat(6,1fr)} #freeboxlist >div{display:inline-block} #freeboxlist .free{margin:20px} #freeboxlist .free .ic{position:relative;float:left;margin:7px} #freeboxlist .free .ic:after{position:absolute;width:100%;height:100%;background-image:url(/images/17/linePatten.png) / 4px;display:block;top:7px;left:7px;opacity:.25;transition:.3s ease-in-out;-o-transition:.3s ease-in-out;-moz-transition:.3s ease-in-out;-webkit-transition:.3s ease-in-out} #freeboxlist .free .ic b{position:relative;padding:13px 10px;border:1px solid #e5b863;display:block;font-family:'Anton',sans-serif;font-weight:400;font-size:12pt;color:#288c92;transition:.3s ease-in-out;-o-transition:.3s ease-in-out;-moz-transition:.3s ease-in-out;-webkit-transition:.3s ease-in-out} #freeboxlist .free .txt{} #freeboxlist .free .txt h3{text-align:center;position:relative;transition:all .25s ease;width:90px;height:90px;line-height:85px;border-radius:50px;margin:0 auto 15px} #freeboxlist .free .txt h3:hover{transform:translate(0,-10px)} #freeboxlist .free .txt h3 img{} #freeboxlist .free .txt h3:hover:before{transform:translate(12px,12px)} #freeboxlist .free .txt h3:hover:after{transform:translate(6px,6px)} #freeboxlist .free .txt p{font-size:16px;line-height:130%;color:#414141;text-align:center} /* product */ #product{overflow:hidden;padding:90px 0} #product .leftT{} #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;background:#f3f3f3 no-repeat 50% 100% / cover} #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.png);background-repeat:no-repeat;background-position:50% 50%} #bookBox #book .slick-prev,#bookBox #book .slick-next{width:50px;height:50px;background:url(/images/17/index-sccrow-p.png) rgb(149 124 90 / 70%) 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 .photo{background:#fcfcfc no-repeat 50% / cover} #bookBox #book .text{display:inline-block;width:calc(50% - 255px);vertical-align:middle;padding-left:250px} #bookBox #book .text h3{} #bookBox #book .text h3 a{display:block;font-size:26px;line-height:150%} #bookBox #book .text p{color:#000000;font-size:15px;margin-top:30px;width:70%} #bookBox #book .text p.more a{font-size:13px;background:#957c5a;color:#fff;display:inline-block;padding:15px 40px;margin-top:50px} /* aboutFunc */ #aboutFunc{overflow:hidden;position:relative;background:no-repeat 50% / cover} #aboutFunc .speBox{position:relative;float:left;padding:100px 0;width:100%;background:rgb(70 60 47 / 85%);text-align:right;animation-name:fadeInDown} #aboutFunc .index-title{margin-right:50px;width:768px;margin:0 auto} #aboutFunc .index-title h3{color:#fff;font-size:40px;font-family:'Montserrat',sans-serif;line-height:100%;text-transform:uppercase;text-align:center;padding-bottom:10px} #aboutFunc .index-title h2{color:#fff;font-size:14px;letter-spacing:3px;text-align:center;font-weight:normal} #aboutFunc .index-title h4{color:#fff;line-height:200%;font-weight:normal;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;color:#957c5a} #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:0} .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)} } @media screen and (max-width:1280px){ #product .leftT{} #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%} } @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(149 124 90 / 80%)} #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:90%} #freeboxlist .free .txt p{width:100%} #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:100%} #freeboxlist{grid-template-columns:repeat(3,1fr)} } @media screen and (max-width:768px){ #product #prolay .pro-list >div,#NewsBox #news .news-info .news-bottomv{width:calc((100%/2) - 20px)} #casebox{padding:15vw 0 5vw} #casebox .controller{padding:0px 0px} #caseboxlist{grid-template-columns:repeat(2,1fr)} #caseboxlist >div{margin-bottom:50px} #aboutFunc .speBox{} #aboutFunc .index-title{width:85%;margin:0 auto} #aboutFunc .speBox:after{border-width:100vh 100px 0 0;right:-100px} #bookBox #book .mofd{display:block;width:100%} #bookBox #book .text{display:block;width:calc(100% - 100px);padding:50px} #bookBox #book .slick-next{right:0} #bookBox #book .slick-prev{right:50px;left:inherit} } @media screen and (max-width:640px){ #freeboxlist{grid-template-columns:repeat(2,1fr)} #bookBox #book .mofd h3{top:calc(50% - 11pt)} #bookBox #book .mofd h3 a{font-size:22pt} #product{padding:50px 0} } @media screen and (max-width:480px){ #bookBox #book .slick-prev,#bookBox #book .slick-next{width:40px;height:40px} #bookBox #book .slick-prev{right:40px} #bookBox #book .text p.more a{margin-bottom:60px} #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;width:100%} #aboutFunc .index-title{width:80%} #bookBox #book .text p{width:100%} #bookBox #book .text{width:calc(100% - 40px);padding:20px} }