/* section */
section { margin-bottom: 12vw; }
section.last {margin-bottom: 0vw;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% - 50px) / 2);left: 19%;z-index: 1;}
section .title_box font span:before , section .title_box font span:after {position: absolute;width: 50%;height: 100%;background: #6b6b6b;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: 3.2px;font-style: initial;font-size: 30px;font-weight: 500;text-transform: inherit;z-index: 4;opacity: 0;color: #2f2f2f;font-family: 'Poppins', sans-serif;text-transform: uppercase;}
section .title_box font strong:before {content: "";position: absolute;background-color: #ed6c00;width: 200px;-webkit-clip-path: polygon(0% 0%, 80% 0%, 100% 100%, 0% 100%);height: 39px;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;text-transform: uppercase;line-height: 210%;}
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;font-weight: bold;}
section .title_box.showtime font b:before {position: absolute;left: 110%;content: "";border-radius: 0;width: 20px;height: 15px;background: #ed6c00;-webkit-clip-path: polygon(51% 82%, 0 0, 100% 0);clip-path: polygon(51% 82%, 0 0, 100% 0);transform: rotate(270deg) translateX(0);-webkit-transform: rotate( 270deg) translateX(0);top: 7px;}
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(--white);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: "QMQY";position: absolute;right: 10px;top: 0px;font-size: 80px;color: #e0e0e0;font-family: 'Poppins', sans-serif;font-weight: bold;text-transform: uppercase;z-index: 2;border-left: 1px solid;line-height: 120%;-webkit-animation: float 1.6s;animation: float 1.6s;-webkit-animation-iteration-count: infinite;animation-iteration-count: infinite;-webkit-writing-mode: vertical-rl;writing-mode: tb-rl;}

@keyframes float
{
    0%, 100%
    {
        transform: translateY(0);
    }
    50%
    {
        transform: translateY(-20px);
    }
}
@-webkit-keyframes float
{
    0%, 100%
    {
        -webkit-transform: translateY(0);
    }
    50%
    {
        -webkit-transform: translateY(-20px);
    }
}
#about_area article {margin-bottom: 30px;line-height: 180%;letter-spacing: 0.8px;font-weight: 400;}
#about_area .more {bottom: 10%;text-align: left;}
#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;}
#about_area {background-image: url(/images/43/img-abbg.jpg);background-size: cover;background-position: 0 100%;background-repeat: no-repeat;margin: 0px;padding: 90px 0 70px 0;}
.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: "quality";position: absolute;right: 0px;top: 60px;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(255 145 52 / 81%);color: #fff;padding: 10px 20px;top: 0px;z-index: 10;}
#news_area .img_cover {height: 260px;transform: scale(1);-webkit-transform: scale(1);-moz-transform: scale(1);-ms-transform: scale(1);-o-transform: scale(1);}
#book_area .img_cover {height: 280px;}
#news_area h3 {margin-top: 10px;height: 45px;line-height: 45px;letter-spacing: 0.8px;font-weight: 500;font-size: 22px;padding-bottom: 10px;margin-bottom: 10px;color: #000;}
#news_area h3:before {position: absolute;width: 0;height: 1px;background-color: #b7b7b7;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: #464646;-webkit-line-clamp: 2;letter-spacing: 0.5px;}
#news_area .more font {font-weight: 400;font-style: inherit;}
#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), .3);}
#book_area a b {margin: auto;padding: 0 5% 10px;width: 65%;height: auto;letter-spacing: 1.5px;line-height: 160%;font-weight: 400;font-size: 22px;border-bottom: 1px solid rgb(255 255 255 / 44%);-webkit-line-clamp: 2;}


/* 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;}
#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 h2, #custom_area .title_box font strong,#custom_area .title_box.showtime font b{text-align: center;line-height: 150%;}
#custom_area .title_box font span{}
#custom_area .title_box font span,#custom_area .title_box font strong:before,#custom_area .title_box.showtime font b:before{display: none;}
#custom_area .workframe{width: 80%;}
#custom_box {padding: 3vw 0 5vw;margin-right: auto;width: 100%;z-index: 3;}
#custom_box ul{overflow: hidden;}
#custom_box ul li{display: inline-block;width: 19%;height: 280px;overflow: hidden;margin: 0 30px;}
#custom_box li .row {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: 20px;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: 1;font-size: 17px;transform: translateY(10px);padding: 0 20px;letter-spacing: 0.5px;}
#custom_box li .row .sgeee{color: #fff;transform: translateY(-30px);display: none;}
#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;padding: 0 10px;display: block;}

@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: 3.5px;}
	#custom_box li:hover .row article{transform: translateY(20px);color: white;opacity: 1;display: block;}
	#custom_box li:hover .row .sgeee{display: none;}
	#news_area ul li:hover .img_cover {transform: scale(1.1);-webkit-transform: scale(1.1);-moz-transform: scale(1.1);-ms-transform: scale(1.1);-o-transform: scale(1.1);}
}
@media screen and (max-width: 768px){
	#custom_box li .row {margin: 10px 15px;padding: 10px 0;}
	#custom_box li .row article{padding: 0 0px;}
	#custom_box ul li{height: 320px;}
	#custom_box{width: 100%;padding: 0vw 0 3vw;}
}
@media screen and (min-width: 1025px){
	section {margin-bottom: 4vw;margin-top: 60px;}
	#about_area #about_info {order: 1;width: calc(50% - 40px);}
	#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;}
	#about_area{padding: 60px 0 30px 0;}
}
@media screen and (max-width: 640px){
	section .title_box { margin: 30px auto; }
	section .title_box font span {width: 250px;top: calc((100% - 30px) / 2);}
	section .title_box font b {font-size: 28px;letter-spacing: 1.2px;}
	section .title_box font .sub_title { font-size: 17px; left: 55px; }
	#book_area .img_cover {height: 260px;}
}
@media screen and (max-width: 380px){
	section .title_box.showtime font span:before , section .title_box.showtime font span:after { width: 10%; }
}