/* section */
section { margin-bottom: 12vw; }
section.last {margin-bottom: 1vw;}
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: 1px;top: calc((100% - 70px) / 2);left: 22%;z-index: 1;}
section .title_box font span:before , section .title_box font span:after {position: absolute;width: 50%;height: 100%;background: var(--primary);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: 44px;font-weight: 700;text-transform: inherit;z-index: 4;opacity: 0;color: var(--primary);text-transform: uppercase;font-family: 'Rajdhani', sans-serif;}
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 strong,#custom_area .titleBox .title b {font-weight: 400;font-size: 19px;line-height: 190%;}
section .title_box font strong:before {content: "";position: absolute;background-color: var(--complement);width: 200px;-webkit-clip-path: polygon(0% 0%, 80% 0%, 100% 100%, 0% 100%);height: 36px;left: 0px;top: -1px;z-index: -10;}
section .title_box font strong::after {content: "";display: block;width: 20px;height: 1px;margin-top: 20px;background-color: var(--complement);padding: 0 10px;margin-left: -10px;}
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.white:before { background: rgba(var(--white-rgb), .2); }

/* about_area */
#about_area .workframe{display: flex;flex-direction: row;justify-content: space-between;}
#about_info{position: relative}
#about_info:before {content: "about us";position: absolute;right: -120px;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 .workframe:nth-child(2n) #about_info:before {display: none;}
#about_area article {margin-bottom: 30px;line-height: 180%;letter-spacing: 0.8px;font-weight: 400;}
#about_area article .Txt h2,#about_area article .Txt p{font-size: 22px;font-weight: 500;}
.project_box ul{display: flex;flex-wrap: wrap;}
.project_box ul li{width: calc((100% / 2) - 10px);margin: 5px 10px 5px 0px;}
.project_box ul li a{padding: 10px;background-color: var(--primary);display: flex;align-items: center;justify-content: space-between;height: 100%;position: relative;}
.project_box ul li a p{color: var(--white);}
.project_box ul li a .crossBox {width: 24px;height: 24px;border-radius: 50%;border: 1px solid rgba(255, 255, 255, 0.3);position: relative;}
.project_box ul li a .crossBox::after {content: "";width: 3px;height: 3px;background-color: var(--white);position: absolute;top: calc(50% - 1.5px);left: calc(50% - 1.5px);z-index: 2;}
.project_box ul li a .crossBox .cross {width: 100%;height: 100%;position: relative;}
.project_box ul li a .crossBox .cross::before {content: "";width: 31px;height: 1px;display: block;background-color: #fff;position: absolute;top: calc(50% - 0.5px);left: calc(50% - 15.5px);}
.project_box ul li a .crossBox .cross::after {content: "";width: 1px;height: 31px;display: block;background-color: #fff;position: absolute;top: calc(50% - 15.5px);left: calc(50% - 0.5px);}


#about_area .more { bottom: 10%; }
#about_area .title_box{margin: 30px auto 10px;}
#about_info .aboutsub_title{font-size: 17px;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 .time {font-weight: 500;font-style: initial;line-height: 120%;padding: 10px 10px 10px 0px;z-index: 10;position: relative;}
#news_area .time::before {content: "";display: inline-block;vertical-align: middle;width: 1px;height: 20px;margin: 0 15px;background-color: var(--triadic2);opacity: 0.7;}
#news_area .img_cover {height: 260px;}
#book_area .img_cover {height: 310px;}
#news_area h3 {margin-top: 10px;height: auto;line-height: 160%;letter-spacing: 0.8px;font-weight: 500;font-size: 17px;margin-bottom: 10px;color: var(--info);width: calc((100% / 1) - 350px);}
#news_area .nowrap_box li{width: calc((100% / 2) - 20px);margin: 0px 10px;position: relative;}#news_area .nowrap_box li .atag_item{z-index: 10;}
.nowrap_box li .row{display: flex;align-items: center;}
.nowrap_box li .row .classTitle{display: inline-block;line-height: 25px;padding: 0 15px;border-radius: 30px 30px 30px 0;font-size: 15px;color: #fff;background-color: var(--primary);}
.nowrap_box li:before {position: absolute;width: 0;height: 1px;background: var(--triadic2);display: block;bottom: 0;left: 0;content: "";opacity: 0.6;}
.nowrap_box li: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{position: absolute;right: 0;}
#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;padding: 2vw 0;}
#book_area ul li{margin: 0 20px;padding: 12px;}
#book_area ul li .bookTxt{background-color: #fff;padding: 20px;}
#book_area ul li .bookTxt .txt_clamp{font-weight: 600;font-size: 22px;padding-bottom: 10px;}
#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; }
#book_area ul li a{z-index: 10;}

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

/* custom_area */
#custom_area .titleBox .title{text-align: center;display: flex;flex-direction: column;align-items: center;}
#custom_area .titleBox .title span{font-size: 44px;font-weight: 700;color: var(--complement);line-height: 140%;}
#custom_area .titleBox .title b{color: var(--primary);display: inline-block;font-weight: 500;}
#custom_area {margin: 0;padding: 4vw 0 6vw 0;background-position: 0 100%;background-repeat: no-repeat;}
#custom_area:after {position: absolute;background-size: cover;background-position: 0 100%;background-repeat: no-repeat;display: block;top: 0;left: 0;content: "";opacity: 1;}
#custom_box {padding: 5vw 0 6vw;margin: auto;width: 70%;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 20px;padding: 30px 0px;width: auto;display: flex;flex-direction: column;align-items: center;margin-bottom: 10px;border-radius: 40px 40px 40px 0;background-color: #f1f1f1;overflow: hidden;}
#custom_box li .row .circle {position: relative;margin: 0 auto 15px;width: 100px;height: 100px;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;box-sizing: border-box;text-align: center;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;	}
#custom_area .more_btn{width: 200px;}


@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: 25px;text-align: center;padding: 0px 0;border-bottom: var(--complement) 1px solid;color: var(--complement);line-height: 180%;height: auto;margin-bottom: 15px;letter-spacing: 0.5px;font-weight: 600;display: flex;justify-content: center;}
#custom_box li .row article {line-height: 150%;font-weight: 500;text-align: center;word-wrap: unset;opacity: 1;font-size: 18px;height: auto;letter-spacing: 0.5px;}
#custom_box li .row .sgeee{color: #fff;transform: translateY(-30px);opacity: 0;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;}

@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);opacity: 1;display: block;background-color: rgb(255 255 255 / 62%);padding: 10px 30px;}
	#custom_box li:hover .row .sgeee{display: none;}
	#custom_area:after{background-attachment: fixed}
	.project_box ul li:hover a{background-color: var(--complement);}
	#book_area ul li .decoBorder {position: absolute;top: 0px;left: 0px;width: 440px;height: 52px;box-sizing: border-box}
	#book_area ul li .decoBorder.bottom {top: auto;bottom: 0}.decoBorder {position: absolute;top: 0px;left: 0px;width: 100%;height: 52px;box-sizing: border-box;display: block;pointer-events: none;}
	.decoBorder::before {content: "";box-sizing: border-box;width: 52px;height: 52px;border-top: 1px solid #bbb;border-left: 1px solid #bbb;border-bottom: 1px solid transparent;border-right: 1px solid transparent;position: absolute;top: 0px;left: 0px;}
	.decoBorder::after {content: "";box-sizing: border-box;width: 52px;height: 52px;border-top: 1px solid #bbb;border-left: 1px solid transparent;border-bottom: 1px solid transparent;border-right: 1px solid #bbb;position: absolute;top: 0px;left: auto;right: 0px;}
	.decoBorder.bottom {top: auto;bottom: 0;}
	.decoBorder.bottom::before {border-top: 1px solid transparent;border-bottom: 1px solid #bbb;}
	.decoBorder.bottom::after {border-top: 1px solid transparent;border-bottom: 1px solid #bbb;}
	.decoBorder.red::before {border-top: 1px solid #ff0000;border-left: 1px solid #ff0000;}
	.decoBorder.red::after {border-top: 1px solid #ff0000;border-right: 1px solid #ff0000;}
	.decoBorder.red.bottom::before {border-top: 1px solid transparent;border-bottom: 1px solid #ff0000;}
	.decoBorder.red.bottom::after {border-top: 1px solid transparent;border-bottom: 1px solid #ff0000;}#about_area::before {content: "";position: absolute;top: 300px;left: -230px;z-index: -1;width: 385px;height: 485px;border-radius: 50% 0 50% 50%;background-color: #f1f0f2;}
	#about_area::after {content: "";position: absolute;top: -50px;right: 180px;z-index: -1;width: 7px;height: 7px;background-color: rgba(160, 160, 160, 0.15);-webkit-box-shadow: 0px 0px rgba(160, 160, 160, 0.15), 0px 22px rgba(160, 160, 160, 0.15), 0px 44px rgba(160, 160, 160, 0.15), 0px 66px rgba(160, 160, 160, 0.15), 0px 88px rgba(160, 160, 160, 0.15), 0px 110px rgba(160, 160, 160, 0.15), 0px 132px rgba(160, 160, 160, 0.15), 0px 154px rgba(160, 160, 160, 0.15), 0px 176px rgba(160, 160, 160, 0.15), 22px 0px rgba(160, 160, 160, 0.15), 22px 22px rgba(160, 160, 160, 0.15), 22px 44px rgba(160, 160, 160, 0.15), 22px 66px rgba(160, 160, 160, 0.15), 22px 88px rgba(160, 160, 160, 0.15), 22px 110px rgba(160, 160, 160, 0.15), 22px 132px rgba(160, 160, 160, 0.15), 22px 154px rgba(160, 160, 160, 0.15), 22px 176px rgba(160, 160, 160, 0.15), 44px 0px rgba(160, 160, 160, 0.15), 44px 22px rgba(160, 160, 160, 0.15), 44px 44px rgba(160, 160, 160, 0.15), 44px 66px rgba(160, 160, 160, 0.15), 44px 88px rgba(160, 160, 160, 0.15), 44px 110px rgba(160, 160, 160, 0.15), 44px 132px rgba(160, 160, 160, 0.15), 44px 154px rgba(160, 160, 160, 0.15), 44px 176px rgba(160, 160, 160, 0.15), 66px 0px rgba(160, 160, 160, 0.15), 66px 22px rgba(160, 160, 160, 0.15), 66px 44px rgba(160, 160, 160, 0.15), 66px 66px rgba(160, 160, 160, 0.15), 66px 88px rgba(160, 160, 160, 0.15), 66px 110px rgba(160, 160, 160, 0.15), 66px 132px rgba(160, 160, 160, 0.15), 66px 154px rgba(160, 160, 160, 0.15), 66px 176px rgba(160, 160, 160, 0.15), 88px 0px rgba(160, 160, 160, 0.15), 88px 22px rgba(160, 160, 160, 0.15), 88px 44px rgba(160, 160, 160, 0.15), 88px 66px rgba(160, 160, 160, 0.15), 88px 88px rgba(160, 160, 160, 0.15), 88px 110px rgba(160, 160, 160, 0.15), 88px 132px rgba(160, 160, 160, 0.15), 88px 154px rgba(160, 160, 160, 0.15), 88px 176px rgba(160, 160, 160, 0.15), 110px 0px rgba(160, 160, 160, 0.15), 110px 22px rgba(160, 160, 160, 0.15), 110px 44px rgba(160, 160, 160, 0.15), 110px 66px rgba(160, 160, 160, 0.15), 110px 88px rgba(160, 160, 160, 0.15), 110px 110px rgba(160, 160, 160, 0.15), 110px 132px rgba(160, 160, 160, 0.15), 110px 154px rgba(160, 160, 160, 0.15), 110px 176px rgba(160, 160, 160, 0.15);box-shadow: 0px 0px rgba(160, 160, 160, 0.15), 0px 22px rgba(160, 160, 160, 0.15), 0px 44px rgba(160, 160, 160, 0.15), 0px 66px rgba(160, 160, 160, 0.15), 0px 88px rgba(160, 160, 160, 0.15), 0px 110px rgba(160, 160, 160, 0.15), 0px 132px rgba(160, 160, 160, 0.15), 0px 154px rgba(160, 160, 160, 0.15), 0px 176px rgba(160, 160, 160, 0.15), 22px 0px rgba(160, 160, 160, 0.15), 22px 22px rgba(160, 160, 160, 0.15), 22px 44px rgba(160, 160, 160, 0.15), 22px 66px rgba(160, 160, 160, 0.15), 22px 88px rgba(160, 160, 160, 0.15), 22px 110px rgba(160, 160, 160, 0.15), 22px 132px rgba(160, 160, 160, 0.15), 22px 154px rgba(160, 160, 160, 0.15), 22px 176px rgba(160, 160, 160, 0.15), 44px 0px rgba(160, 160, 160, 0.15), 44px 22px rgba(160, 160, 160, 0.15), 44px 44px rgba(160, 160, 160, 0.15), 44px 66px rgba(160, 160, 160, 0.15), 44px 88px rgba(160, 160, 160, 0.15), 44px 110px rgba(160, 160, 160, 0.15), 44px 132px rgba(160, 160, 160, 0.15), 44px 154px rgba(160, 160, 160, 0.15), 44px 176px rgba(160, 160, 160, 0.15), 66px 0px rgba(160, 160, 160, 0.15), 66px 22px rgba(160, 160, 160, 0.15), 66px 44px rgba(160, 160, 160, 0.15), 66px 66px rgba(160, 160, 160, 0.15), 66px 88px rgba(160, 160, 160, 0.15), 66px 110px rgba(160, 160, 160, 0.15), 66px 132px rgba(160, 160, 160, 0.15), 66px 154px rgba(160, 160, 160, 0.15), 66px 176px rgba(160, 160, 160, 0.15), 88px 0px rgba(160, 160, 160, 0.15), 88px 22px rgba(160, 160, 160, 0.15), 88px 44px rgba(160, 160, 160, 0.15), 88px 66px rgba(160, 160, 160, 0.15), 88px 88px rgba(160, 160, 160, 0.15), 88px 110px rgba(160, 160, 160, 0.15), 88px 132px rgba(160, 160, 160, 0.15), 88px 154px rgba(160, 160, 160, 0.15), 88px 176px rgba(160, 160, 160, 0.15), 110px 0px rgba(160, 160, 160, 0.15), 110px 22px rgba(160, 160, 160, 0.15), 110px 44px rgba(160, 160, 160, 0.15), 110px 66px rgba(160, 160, 160, 0.15), 110px 88px rgba(160, 160, 160, 0.15), 110px 110px rgba(160, 160, 160, 0.15), 110px 132px rgba(160, 160, 160, 0.15), 110px 154px rgba(160, 160, 160, 0.15), 110px 176px rgba(160, 160, 160, 0.15);}
	.bg_box:before {content: '';position: absolute;top: 0;width: 30%;height: 100%;background-color: #eaeaea;-webkit-transform: skew(30deg);-ms-transform: skew(30deg);transform: skew(30deg);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;left: 38%;}
	#news_area .nowrap_box li:hover h3{color: var(--complement);}
}
@media screen and (max-width: 1280px){
	#news_area h3{width: calc((100% / 1) - 220px);font-size: 16px;}
	#news_area .more font{display: none;}
}
@media screen and (max-width: 768px){
	#custom_box li .row {margin: 10px 10px;padding: 20px 0;}
	#custom_box{width: 90%;padding: 9vw 0 8vw 0;}

}
@media screen and (min-width: 1141px){
	#about_area .workframe:nth-child(2n) article{width: 80%;margin-top: 20px;}
	#about_area article {width: 70%;}

}
@media screen and (min-width: 1025px){
	section {margin-bottom: 4vw;margin-top: 100px;}
	#about_area #photo_list { order: 1; }
	#about_area .workframe:nth-child(2n){background-color: var(--white);flex-direction: row-reverse;padding: 5vw 0 0;}
	#about_area .workframe:nth-child(2n) #about_info{margin-left: 100px;width: calc(45% - 30px);margin-right: 32px;}
}
@media screen and (max-width: 1024px){
	#about_area .workframe{display: flex;flex-direction: column;align-items: flex-start;padding: 30px;}
	#about_info, .row{margin: 0;}
	#about_area .more {margin-top: 15px;margin-left: 15px;margin: 15px 0;width: auto;}
	#about_info:before,#news_area:before{ display: none;}
	#news_area .nowrap_box li{width: calc((100% / 1) - 0px);margin: 30px 0px 3px;}
	#about_area .title_box{margin: 0px auto 20px;}
	#news_area{padding: 3vw 0 8vw;}.nowrap_box li .row{margin: 0;}.nowrap_box li .row .classTitle{position: absolute;top: -24px;}
	#news_area .title_box font{text-align: center;padding: 0;}
	#news_area .title_box font strong{text-align: center;color: var(--complement);line-height: 110%;}
	#news_area .title_box font strong:before,section .title_box font strong::after{display: none;}
	#news_area .time{position: absolute;top: -31px;left: 100px;}
	#news_area h3{width: calc((100% / 1) - 30px);font-size: 15px;margin: 12px 0 8px 0;}
	#news_area .time::before{display: none;}
	#about_area article .Txt h2, #about_area article .Txt p{font-size: 19px;}
}

@media screen and (max-width: 640px){
	section .title_box {margin: 20px auto;}
	section .title_box font span {width: 200px;display: none;}
	section .title_box font b { font-size: 40px; }
	section .title_box font .sub_title { font-size: 17px; left: 55px; }
	#book_area .img_cover {height: 220px;}
	#custom_area{padding: 7vw 0 8vw 0;}
	#book_area{margin-bottom: 4vw;}
	#custom_box li .row .circle{width: 60px;height: 60px;line-height: 60px;}
	#custom_box li .row article{font-size: 16px;}
	#custom_box ul li{height: 240px;}
}
@media screen and (max-width: 380px){
	section .title_box.showtime font span:before , section .title_box.showtime font span:after { width: 10%; }
}