.wow { animation-duration: .7s; animation-name: fadeInUp; } /* freebox */ #freebox { overflow: hidden; position: relative; padding-top:70px; background: url(/images/17/c1_bg.png) no-repeat 50% 100% / cover; } #freebox:after { position: absolute; width: 100%; height: 100%; display: block; background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #c2c2c2 100%); top: 0; left: 0; z-index: 1; content: ""; } #freebox .controller { overflow: hidden; position: relative; margin-right: 15%; float: right; width: 35%; z-index: 2; } #freebox .index-title { margin: 0; } #freeboxlist { margin-bottom: 130px; } #freeboxlist .free { overflow: hidden; margin: 40px 0; } #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 { margin-left: 15px; float: left; width: calc(100% - 90px); } #freeboxlist .free .txt h3 { margin-bottom: 15px; line-height: 120%; font-size: 16pt; color: #2c999f; } #freeboxlist .free .txt p { width: 80%; font-size: 11pt; line-height: 130%; color: #414141; } /* product */ #product { background: no-repeat 0 100% / cover; } #product .leftT { width: 50%; display: inline-block; } #product .rightBox { width: calc(50% - 4px); display: inline-block; } #product .leftT .index-title , #NewsBox .speBox .index-title , #aboutFunc .speBox { animation-name: fadeInLeft; } #product #prolay .pro-list >div { float: left; width: 50%; } #product #prolay .p-box { position: relative; background: linear-gradient(to right, rgba(255, 255, 255, 1) 2%, rgba(232, 232, 232, 1) 100%); 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 { background: #eff4f6 no-repeat 50% / contain; 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 img { position: relative; } #product #prolay .p-box .p-info { position: absolute; padding: 25px; width: calc(100% - 50px); font-size: 11pt; top: 0; } #product #prolay .p-box .p-info h3 { margin-bottom: 10px; font-size: 1.4rem; line-height: 110%; color: #16696c; } #product #prolay .p-box .p-info .describe { overflow: hidden; width: 60%; height: 28pt; line-height: 130%; color: #777; } #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: calc(100% - 10px); height: calc(100% - 10px); border: rgba(35, 135, 158, 0) 0 solid; display: block; z-index: 2; 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 .p-border:before { position: absolute; display: block; color: #fff; z-index: 2; bottom: 8px; right: 0; opacity: 0; content: ">"; } #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 { width: 50%; display: inline-block; } #bookBox #book .slick-prev , #bookBox #book .slick-next { width: 40px; height: 40px; background: url(/images/17/index-sccrow-p.png) rgba( 27, 35, 53, .5) no-repeat 50% / 25px; right: 40px; bottom: 0; z-index: 5; transform: none; } #bookBox #book .slick-next { background-image: url(/images/17/index-sccrow-n.png); left: auto; right: 0; } #bookBox #book .slick-prev:before , #bookBox #book .slick-next:before { display: none; } #bookBox #book .mofd { position: relative; } #bookBox #book .mofd .photo { background: #fcfcfc no-repeat 50% / cover; } #bookBox #book .mofd h3 { position: absolute; width: 100%; text-align: center; top: calc(50% - 20pt); left: 0; } #bookBox #book .mofd h3 a { text-shadow: 0 0 5px rgba(46, 46, 46, .66); display:block; font-size: 40pt; line-height: 120%; color: #fff; } #bookBox #book .mofd h3 a:first-letter { color: #28bfa6; } /* aboutFunc */ #aboutFunc { overflow: hidden; position: relative; background: no-repeat 50% / cover; } #aboutFunc .speBox { position: relative; float: left; padding: 100px 0; width: 45%; background: rgba(22,112,133,0.68); text-align: right; } #aboutFunc .index-title { margin-right: 50px; width: 400px; } #aboutFunc .speBox:after { position: absolute; width: 0; height: 0; border-style: solid; border-width: 100vh 200px 0 0; border-color: rgba(22,112,133,0.68) transparent transparent; display: block; right: -200px; top: 0; content: ""; } #aboutFunc .index-title p { color: #fff; } #aboutFunc .index-title h2 { color: #fff; font-size: 32pt; text-shadow: 3px 3px 0 rgba(141, 242, 205, .4); } #aboutFunc .index-title h4 { color: rgba(255, 255, 255, .62); } #aboutFunc .index-title h3 a { border-color: #febf62; font-weight: 700; color: #febf62; } #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) { #freebox .controller { margin-right: 5%; width: 45%; } #product .leftT { width: 40%; } #product .rightBox { width: calc(60% - 4px); } #aboutFunc .speBox { width: 55%; } } @media screen and (max-width:1280px) { #product .leftT { padding: 70px 0; width: 100%; } #product .rightBox { width: 100%; } #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: rgba(27, 35, 53, .8); } #product #prolay .p-box:hover { border-radius: 5px; z-index: 2; } #product #prolay .p-box:hover .p-border:after { border: #23879e 5px solid; border-radius: 5px 5px 100px 5px; -webkit-box-shadow: 10px 10px 44px 2px rgba(0, 0, 0, .09); } #product #prolay .p-box:hover .p-border:before { right: 15px; opacity: 1; } #product #prolay .p-box:hover .p-border { background: #23879e; border-radius: 5px; } #product #prolay .p-box:hover .photo { border-bottom-right-radius: 100px; } #youtube .UTwo a:hover { width: 110px; height: 110px; line-height: 110px; font-size: 34px; left: calc(50% - 55px); top: calc(50% - 55px); } } @media screen and (max-width:1024px) { #freebox .controller , #comprehensive { width: 90%; } #freeboxlist .free .txt p { width: 100%; } #freeboxlist { margin-bottom: 100px; } #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 { width: 70%; } } @media screen and (max-width:768px) { #product #prolay .pro-list >div , #NewsBox #news .news-info .news-bottomv { width: 100%; } #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 { width: 80%; } #aboutFunc .index-title { width: 90%; margin: 0 0 0 10%; } #aboutFunc .speBox:after { border-width: 100vh 100px 0 0; right: -100px; } } @media screen and (max-width:640px) { #aboutFunc .index-title h2 { font-size: 24pt; } #bookBox #book .mofd h3 { top: calc(50% - 11pt); } #bookBox #book .mofd h3 a { font-size: 22pt; } } @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; width: 100%; } #aboutFunc .index-title { width: 80%; } }