.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%; }
}