/* section */
section { margin-bottom: 12vw; }
section.last {margin-bottom: 0vw;width: 1715px;margin-left: auto;}

section.section_pad { padding: 5vw 0; }
section >* { z-index: 3; }
section .title_box {margin: 30px auto 40px;}
section .title_box font { padding: 10px 0; box-sizing: border-box; line-height: 1; font-size: 50px; z-index: 5; }
section .title_box font span {width: 280px;height: 2px;top: calc((100% - 30px) / 2);left: 14%;z-index: 1;}
section .title_box font span:before , section .title_box font span:after {position: absolute;width: 50%;height: 100%;background: #294562;display: block;top: 0;left: 0;content: "";}
section .title_box font span:after { left: auto; right: 0; }
section .title_box font b {line-height: 100%;letter-spacing: 0.2px;font-style: initial;font-size: 40px;font-weight: 600;text-transform: inherit;z-index: 4;opacity: 0;color: #294562;font-family: 'Poppins', sans-serif;text-transform: uppercase;}
section .title_box font strong:before {content: "";position: absolute;background-color: #19d6d4;width: 200px;-webkit-clip-path: polygon(0% 0%, 80% 0%, 100% 100%, 0% 100%);height: 30px;left: 0px;top: 1px;z-index: -10;}
section .title_box font strong{display: block;font-weight: 400;color: #ffffff;font-size: 18px;position: relative;padding: 0 10px;letter-spacing: 2px;}
section .title_box font .sub_title { font-weight: bold; font-size: 22px; text-transform: uppercase; font-style: italic; top: 80px; left: 85px; opacity: 0; }
section .title_box.showtime font span:before , section .title_box.showtime font span:after { width: 25%; -webkit-transition-delay: .2s; transition-delay: .2s; }
section .title_box.showtime font b { opacity: 1; -webkit-transition-delay: .6s; transition-delay: .6s; }
section .title_box.showtime font .sub_title { opacity: 1; -webkit-transition-delay: .8s; transition-delay: .8s; }
section .img_show:before { position: absolute; width: 200%; height: 100%; background: var(--secondary); content: ""; top: 0; left: -50%; z-index: 10; }
section .img_show.showtime:before { left: 120%; }

/* bg_box */
.bg_box { width: 100%; height: 100%; background: no-repeat 50% / cover; opacity: .5; top: 0; left: 0; }
.bg_box:before { width: 100%; height: 100%; display: block; background: rgba(var(--white-rgb), .3); content: ""; }
.bg_box:before {content: '';position: absolute;top: 0;right: 72%;width: 70%;height: 100%;background-color: #eaeaea;-webkit-transform: skew(47deg);-ms-transform: skew(47deg);transform: skew(47deg);z-index: -1;-webkit-transition: all cubic-bezier(0.16, 1.08, 0.38, 0.98) 1s;-o-transition: all cubic-bezier(0.16, 1.08, 0.38, 0.98) 1s;transition: all cubic-bezier(0.16, 1.08, 0.38, 0.98) 1s;}
.bg_box.white:before { background: rgba(var(--white-rgb), .2); }

/* about_area */
#about_info{position: relative}
#about_info:before {content: "about us";position: absolute;right: -100px;top: 0px;font-size: 80px;color: #f1f0f2;transform: rotate( -90deg) translateX(-50%);font-family: 'Poppins', sans-serif;font-weight: bold;text-transform: uppercase;z-index: 2;border-bottom: 1px solid;line-height: 120%;}
#about_area article {margin-bottom: 30px;line-height: 180%;letter-spacing: 0.8px;font-weight: 400;}
#about_area .more { bottom: 10%; }
#about_area .title_box{margin: 30px auto 20px;}
#about_info .aboutsub_title{font-size: 23px;padding: 0 0 10px 0px;display: block;font-weight: 400;letter-spacing: 0.8px;}
.webBox #SeoStarRating font:first-child, .webBox #SeoStarRating font,.webBox #SeoStarRating font *{color: #bfbfbf;}
.webBox #SeoStarRating font:last-child{color: #19d6d4;}

/* news_area */
#news_area{position: relative;padding: 3vw 0 3vw;margin-bottom: 0vw;margin-top: 0;}
#news_area:before {content: "Waterproof";position: absolute;right: -200px;top: 0px;font-size: 80px;color: #f1f0f2;transform: rotate(-90deg) translateX(-50%);font-family: 'Poppins', sans-serif;font-weight: bold;text-transform: uppercase;z-index: 2;border-bottom: 1px solid;line-height: 120%;}
#news_area .time {font-weight: 300;font-style: initial;line-height: 120%;position: absolute;background-color: rgb(25 45 68 / 81%);color: #fff;padding: 10px 20px;top: 0px;z-index: 10;}
#news_area .img_cover {height: 260px;}
#book_area .img_cover {height: 190px;}
#news_area h3 {margin-top: 10px;height: 45px;line-height: 45px;letter-spacing: 0.8px;font-weight: 600;font-size: 22px;padding-bottom: 10px;margin-bottom: 10px;color: #888;}
#news_area h3:before {position: absolute;width: 0;height: 2px;background: var(--secondary);display: block;bottom: 0;left: 0;content: "";}
#news_area h3:before {width: 100%;}
#news_area article{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    height: 59px;
    color: #737373;
    -webkit-line-clamp: 2;
}
#news_area .more font { font-weight: 600; font-style: italic; }
#news_area .more svg { margin-left: 10px; width: 18px; height: 13px; }

/* product_list */
#product_list { margin: auto; width: 90%; }
#product_list .img_show { z-index: 1; }
#product_list .img_cover { height: 400px; }
#product_list .info_box { margin: -50px auto 30px; padding: 20px 30px; width: calc(90% - 60px); box-shadow: 0 0 10px rgba(var(--black-rgb), .2); z-index: 5; }
#product_list .info_box h3 { margin-bottom: 5px; height: 37px; letter-spacing: .15em; font-size: 22px; }
#product_list .info_box .price_box p { margin-right: 10px; vertical-align: bottom; }
#product_list .info_box .price_box p * { line-height: 100%; font-size: 18px; vertical-align: text-bottom; }
#product_list .info_box .price_box p span { margin-right: 2px; font-size: 12px; }
#product_list .info_box .price_box p.price * { font-weight: 600; }
#product_list .info_box .price_box p.old font { font-size: 15px; text-decoration: line-through; }

/* book_area */
#book_area{margin-top: 0px;}
#book_area a { background: rgba(var(--black-rgb), .2); }
#book_area a b { margin: auto; padding: 0 10%; width: 80%; height: 42px; letter-spacing: .15em; font-weight: 700; font-size: 25px; }
#book_area .slick-current a b { letter-spacing: .4em; }


/* canvas */
canvas {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 2;
  opacity: 0.2;
}

/* custom_area */
#custom_area {margin: 0;padding: 3vw 0 1vw;background-image: url(/images/43/img-sbg.jpg);background-size: cover;background-position: 0 100%;background-repeat: no-repeat;}
#custom_area:after {position: absolute;width: 100%;height: 100%;background-image: url(/images/43/img-sbg.jpg);background-size: cover;background-position: 0 100%;background-repeat: no-repeat;display: block;top: 0;left: 0;content: "";opacity: 1;}
#custom_area .workframe{width: 80%;}
#custom_box {padding: 3vw 0 5vw;margin-right: auto;width: 80%;z-index: 3;}
#custom_box ul{
    overflow: hidden;
}
#custom_box ul li{display: inline-block;width: 19%;height: 280px;overflow: hidden;}
#custom_box li .row {margin: 0px 0px;padding: 10px 0px;width: auto;margin: 0 auto;display: flex;flex-direction: column;align-items: center;}
#custom_box li .row .circle {position: relative;margin: 0 auto 15px;width: 114px;height: 120px;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;box-sizing: border-box;text-align: center;font-size: 55px;line-height: 114px;}
#custom_box li .row:hover .circle {animation: flipInX 1.5s both;-webkit-animation: flipInX 1.5s both;animation-duration: 1s;-webkit-animation-duration: 1s;	}
@keyframes flipInX{
	0%{ transform: perspective(400px) rotateX(90deg); animation-timing-function: ease-in; opacity:0; }
	40%{ transform: perspective(400px) rotateX(-20deg); animation-timing-function: ease-in; }
	60%{ transform: perspective(400px) rotateX(10deg); opacity: 1; }
	80%{ transform: perspective(400px) rotateX(-5deg); }
	to{ transform:perspective(400px); }
}
@-webkit-keyframes flipInX{
	0%{ -webkit-transform: perspective(400px) rotateX(90deg); -webkit-animation-timing-function: ease-in; opacity:0; }
	40%{ -webkit-transform: perspective(400px) rotateX(-20deg); -webkit-animation-timing-function: ease-in; }
	60%{ -webkit-transform: perspective(400px) rotateX(10deg); opacity: 1; }
	80%{ -webkit-transform: perspective(400px) rotateX(-5deg); }
	to{ -webkit-transform:perspective(400px); }
}
#custom_box li .row h2 {font-size: 18px;text-align: center;padding: 0px 0;color: #fff;border-bottom: #ffffff4d 1px solid;line-height: 180%;height: 30px;margin-bottom: 5px;padding-bottom: 10px;letter-spacing: 0.15em;font-weight: 500;display: flex;justify-content: center;}
#custom_box li .row article {line-height: 150%;color: #fff;font-weight: 200;text-align: center;word-wrap: unset;opacity: 0;font-size: 15px;height: 40px;transform: translateY(-50px);}
#custom_box li .row .sgeee{color: #fff;transform: translateY(-30px);}
#custom_area .title_box font span:before, #custom_area .title_box font span:after{background: #ffffff;}
#custom_area .title_box.showtime font b{color: #fff;}
@media screen and (max-width: 1715px){
	section.last {width: 100%;}
}
@media screen and (min-width: 1281px){
	#product_list { width: var(--width-xl); }
	#book_area li:hover a b { letter-spacing: .4em; }
	#custom_box li:hover .row article{transform: translateY(0px);color: white;opacity: 1;display: block;background-color: rgb(22 138 255 / 33%);padding: 10px;}
	#custom_box li:hover .row .sgeee{display: none;}
	#custom_area:after{background-attachment: fixed}
}
@media screen and (max-width: 768px){
	#custom_box li .row {margin: 10px 15px;padding: 10px 0;}
	#custom_box{width: 100%; }
}
@media screen and (min-width: 1025px){
	section {margin-bottom: 4vw;margin-top: 60px;}
	#about_area #photo_list { order: 1; }
	#about_area article { width: 80%; }
}
@media screen and (max-width: 1024px){
	#about_info{
    margin-bottom: 20px;
}
	#about_area .more {margin-top: 15px;margin-left: 15px;margin-right: 15px;width: auto;}
	#about_info:before,#news_area:before{ display: none;}
}
@media screen and (max-width: 640px){
	section .title_box { margin: 30px auto; }
	section .title_box font span { width: 200px; }
	section .title_box font b { font-size: 40px; }
	section .title_box font .sub_title { font-size: 17px; left: 55px; }
	#book_area .img_cover {height: 120px;}
}
@media screen and (max-width: 380px){
	section .title_box.showtime font span:before , section .title_box.showtime font span:after { width: 10%; }
}