/* index.less */
#book_area .list_box li .img_box:before,#book_area .list_box li .img_box:after{transform:scaleY(0);-webkit-transform:scaleY(0);}#book_area .list_box li .img_box:after{transform-origin:center bottom;-webkit-transform-origin:center bottom;}@media (min-width:1281px){#book_area .list_box li:hover .img_box:before,#book_area .list_box li:hover .img_box:after{transform:scaleY(1);-webkit-transform:scaleY(1);}}#youtube_box a{width:83px;height:83px;border-radius:50%;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);-webkit-animation:spineer 2s infinite;animation:spineer 2s infinite;}

/* header */
header .menu { border-bottom: 1px rgba(var(--white-rgb), .2) solid; }
header #webmenu nav >ul >li >p a { color: var(--white); }


/* search_box */
#openform { background: rgba(var(--white-rgb), .3); }

/* section */
section {padding: 6vw 0 4vw;}
section.section_pad {padding: 5vw 0;margin: 0;}
section >* { z-index: 3; }
section .title_box { margin-bottom: 40px; }
section .title_box .area_title {font-size: 40px;color: #1b1a19;word-spacing: 100vw;line-height: 150%;font-weight: 500;text-align: center;}
section .title_box .sub_title {text-align: center;font-size: 26px;font-weight: 600;line-height: 100%;padding-bottom: 10px;background: linear-gradient(90deg, #ff0000, #f0be21);background-clip: text;-webkit-background-clip: text;color: transparent;white-space: nowrap;}

/* bg_box */
.bg_box {width: 100%;height: 100%;background: no-repeat 50% / cover;background-attachment: fixed;opacity: .3;top: 0;left: 0;}
.bg_box:before {width: 100%;height: 100%;display: block;content: "";}
.bg_box.white:before { background: rgba(var(--white-rgb), .2); }

#about_area{position:relative}
#about_area .workframe{width:min(90%,1550px);display:grid;grid-template-columns:47% 46%;gap:0px;justify-content:space-between}
#about_area #about_img{width:100%}
#about_area #about_info{margin-left:0px;margin-right:0}
#about_area .title_box{font-size:115px;font-weight:500;line-height:100%;padding-bottom:20px;margin-left:-190px;margin-top:0px;background: linear-gradient(90deg, #ff0000, #f0be21);background-clip:text;-webkit-background-clip:text;color:transparent;white-space:nowrap}
#about_area .h2_title{font-size:40px;color:#1b1a19;word-spacing:100vw;line-height:150%;font-weight:500}
#about_area h1{margin:10px 0;font-weight: 500;}
#about_area .aboutintro p{margin-top: 20px;margin-bottom: 20px;line-height:180%;letter-spacing:1px;font-weight:400;text-align:justify;font-size: 16px;}
#about_area .more_btn{
    margin-top: 60px;
}


/* product_area */
#product_area {overflow: hidden;max-width: 100vw;padding: 4vw 0;margin-bottom: 0;}
#product_area .slick-list {overflow: hidden;}
#product_area .list_box ul li .mx-3{overflow:hidden;border-radius: 5%;background: #000;}
#product_area .list_box ul li img{height: 450px;aspect-ratio: 4/3;object-fit: cover;opacity: 0.8;}
#product_area .list_box ul li:hover img{opacity: 1;}
#product_area .list_box p{text-align:center;margin-top: 40px;font-size: 18px;}
#product_area .product_bg{top:0;z-index:0;opacity: .1;height:100%;width:100%}
#product_area .product_bg video{width:100%;height: auto;}


/* product_list */
#product_list .info_box {margin: 0;padding: 20px;border-radius: 15px;right: 5%;bottom: 20px;left: 5%;justify-content: center;}
#product_list .info_box h3 {height: 34px;font-size: 20px;color: #fff;}
#product_list .info_box article { height: 23px; font-weight: 100; font-size: 14px; }
#product_list .info_box p * { line-height: 100%; font-size: 18px; vertical-align: text-bottom; }
#product_list .info_box p span { font-weight: 100; margin-right: 2px; font-size: 12px; }
#product_list .info_box p.price * { font-weight: 600; }
#product_list .info_box p.old font { font-weight: 100; font-size: 15px; text-decoration: line-through; }


/* discount_area */
#discount_area {display: grid;justify-content: space-between;align-items: center;grid-template-columns: 50% 45%;}
#discount_area .bg_box{position:relative;opacity: 1;background-attachment: unset;}
#discount_area .workframe {z-index: 10;width: 85%;margin: 0;}
#discount_area .title_box {display:flex;flex-direction: column;align-items: flex-start;}
#discount_area ul{margin-top:30px}
#discount_area li{border-bottom:1px solid #eee;padding: 30px 0;display: flex;flex-direction: column;justify-content: center;position: relative;}
#discount_area li p{font-family: "Poppins", sans-serif;}
#discount_area li h3{font-size:20px;height: auto;width: 80%;margin-bottom: 10px;font-weight: 500;}
#discount_area li a{position:absolute;width: 100%;height: 100%;z-index: 2;top: 0;left: 0;}
#discount_area li article{width:80%;-webkit-line-clamp: 2;height: auto;font-size: 14px;color: #838383;font-weight: 300;}
#discount_area li b{display:inline-flex;align-items: center;justify-content: center;width: 60px;aspect-ratio: 1/1;border-radius: 50px;position: absolute;right: 0;}
#discount_area li b svg{width:18px;height: 18px;transform: scaleX(-1);}

/* book_area */
#book_area .list_box img { height: 450px; }
#book_area .list_box .img_box { border: var(--white) solid; border-width: 0 1px 1px 0; }
#book_area .list_box .img_box:before , #book_area .list_box .img_box:after { position: absolute; width: 100%; height: 100%; background: var(--white); z-index: 9; opacity: .4; content: ""; }
#book_area .list_box .img_box:after { right: 0; bottom: 0; }
#book_area .list_box .atag_item { z-index: 10; }
#book_area .list_box .badge { margin: auto; padding: 10px 20px; max-width: calc(80% - 40px); height: 34px; line-height: 36px; font-size: 20px; }

/* youtube_box */
#youtube_box { min-height: 1px; padding-bottom: 30%; }
#youtube_box a { position: absolute; background: var(--white); display: flex; top: 50%; left: 50%; z-index: 99; }
#youtube_box a i { margin: auto; font-size: 30px; color: var(--primary); }
#youtube_box iframe { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 5; }

/* custom_area */
#custom_area { margin: 0; padding: 5vw 0 3vw; }
#custom_area:before { position: absolute; width: 100%; height: 75%; background: rgba(var(--primary-rgb), .1); display: block; bottom: 0; left: 0; opacity: .3; content: ""; }
#custom_box { padding: 8vw 0 5vw; }
#custom_box li .row { margin: 30px 20px; padding: 30px; display: block; border-bottom: 2px var(--primary) solid; }
#custom_box li .row h2 { font-size: 20px; }
#custom_box li .row article { margin-top: 30px; line-height: 200%; }

@-webkit-keyframes spineer { 0% { -webkit-box-shadow: 0 0 0 0 var(--info); } 70% { -webkit-box-shadow: 0 0 0 20px transparent; } 100%{ -webkit-box-shadow: 0 0 0 0 transparent; } }
@keyframes spineer { 0% { box-shadow: 0 0 0 0 var(--info); } 70% { box-shadow: 0 0 0 20px transparent; } 100%{ box-shadow: 0 0 0 0 transparent; } }

@media screen and (max-width:1470px){
	#about_area .about_sub_1,#about_area .about_sub_2,#about_area .about_sub_3{width:20vw}
	#about_area .about_sub_2{top:-20vw;right:6vw}
	#about_area .title_box{font-size: 95px;}
}
@media screen and (min-width: 1281px){
	#book_area .list_box li:hover .badge { background: var(--primary); color: var(--white); }
	#custom_box li:hover .row { box-shadow: 0 4px 17px 0 rgba(var(--black-rgb), .2); }
}
@media screen and (max-width: 1280px){
	#about_area .title_box{font-size: 88px;}
	#product_area .product_bg video{height: 100%;width: auto;}
}
@media screen and (max-width: 1024px){
	#about_area .workframe{grid-template-columns:1fr;justify-items:center}
    #about_area .clip{display:flex;justify-content:center}
    #about_area .title_box{margin-left:0;font-size:45px}
    #about_area .h2_title{font-size:26px;margin-top:20px}
    #about_area article{margin:40px 0}
    #about_area #about_info{margin-top:30px}
	#discount_area {grid-template-columns: 35% 60%;}
}
@media screen and (max-width: 980px){
	#about_area #about_info{margin-bottom:8vw}
    #about_area .about_sub_2{top:auto;bottom:35vw;width:35vw}
    #about_area .about_sub_3{width:29vw;left:10vw}
}
@media screen and (max-width: 768px){
	#news_area .list_box .info_box { padding: 15px 0; }
	#youtube_box { padding-bottom: 60vw; }
	#custom_box li .row { margin: 10px 15px; padding: 10px 0; }
	#discount_area .bg_box{display:none;}
	#discount_area {grid-template-columns: 1fr;width: 90%;margin: 0 auto;}
	#discount_area .workframe{width: 100%;}
	#product_area .list_box p{font-size:16px;}
}
@media screen and (max-width: 550px){
	#about_area #about_img{width:80vw}
    #about_area .about_sub_2{bottom:60vw}
	#book_area .list_box img { height: 65vw; }
}
@media screen and (max-width: 480px){
	#about_area h1{font-size: 19px;}
	#about_area .aboutintro p{margin-top: 0px;}
	#product_area{padding: 10vw 0;}
	#product_area .list_box ul li img {height: 360px;}
}