/* index.less */
#product_area .list_box ul li{transform:translate(0,0);-webkit-transform:translate(0,0);}@media (min-width:1281px){#product_area .list_box ul li:hover{transform:translate(0,-20px);-webkit-transform:translate(0,-20px);}}@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;}

/* section */
section {padding: 5vw 0;}
section.section_pad { padding: 5vw 0; }
section >* { z-index: 3; }
section .title_box {margin-bottom: 20px;}
section .title_box .area_title {font-weight: 400;font-size: 45px;font-family: "Anybody", sans-serif;text-transform: capitalize;}
section .title_box .sub_title {font-weight: 300;font-size: 18px;position: relative;display: inline-block;}
section .title_box .sub_title:before{content:"";width:30px;height:1px;background-color:rgba(0,0,0,0.2);position:absolute;top:calc(50% - 1px);right:-40px}

/* 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; background: rgba(var(--primary-rgb), .2); content: ""; }
.bg_box.white:before { background: rgba(var(--white-rgb), .2); }

/* about_area */
#about_area{background-image: url(/images/40/Bg.jpg);background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;position: relative;display: flex;align-items: center;}
#about_area:before{content:'';width: calc(35vw + 14px);height: 100%;position: absolute;left: 0;bottom: 0;background: var(--primary););}
#about_area .workframe{width: min(90%, 1300px);display: grid;grid-template-columns: 55% 40%;justify-content: space-between;align-items: center;}
#about_area .fixTxt{position: absolute;right: -7vw;width: 400px;}
#about_area .img_scale a{display:block;}
#about_area .img_box *{height:100%}
#about_area .img_box img{aspect-ratio: 4/3;object-fit: contain;}
#about_area .info_box{margin: 20px 0 80px;}
#about_area .info_box article p {margin-bottom: 30px;line-height: 210%;letter-spacing: .5px;font-weight: 300;text-align: justify;}
#about_area .more_btn{margin-right:15px;}

/* product_area */
#product_area { overflow: hidden; max-width: 100vw; }
#product_area .slick-list { overflow: visible; }

/* news_area */
#news_area .list_box img { height: 320px; }
#news_area .list_box .info_box { padding: 15px 30px; }
#news_area .list_box .info_box p a { margin-right: 10px; max-width: calc(100% - 100px); font-weight: 400; z-index: 2; }
#news_area .list_box .info_box p .time { width: 90px; font-weight: 300; }
#news_area .list_box .info_box h3 { height: 34px; font-size: 20px; }


/* book_area */
#book_area {padding: 20px 20px 30px;background: var(--white);}
#book_area .list_box img {aspect-ratio: 2/3;}
#book_area .list_box li {margin: 25px;}
#book_area .list_box .svg{bottom:0;left: 0;display: inline-flex;align-items: center;justify-content: center;width: 50px;height: 50px;z-index: 2;background: var(--primary);}
#book_area .list_box .svg svg{width: 20px;height: 20px;fill: #fff;}
#book_area .list_box li:hover .svg svg{animation: arrow-move-right-top 1s .2s;}
@Keyframes arrow-move-right-top{0%{transform:translateX(0);-webkit-clip-path:inset(0 0 0 0);clip-path:inset(0 0 0 0);}50%{transform: translateX(20px) translateY(-20px) translateZ(0);-webkit-clip-path:inset(0 100% 0 0);clip-path:inset(0 100% 0 0);}51%{transform: translateX(-20px) translateY(20px) translateZ(0);-webkit-clip-path:inset(0 0 0 100%);clip-path:inset(0 0 0 100%);}100%{transform:translateX(0);-webkit-clip-path:inset(0 0 0 0);clip-path:inset(0 0 0 0);}}
#book_area .list_box .img_box:before {position: absolute;width: 100%;height: 100%;background: rgb(8 8 8 / 50%);z-index: 1;content: "";opacity: .5;}
#book_area .list_box li:hover .img_box:before{opacity: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; }
#book_area .info_box{left: 30px;top: 35px;z-index: 2;}
#book_area .info_box h3{font-size: 23px;color: var(--white);letter-spacing: 2px;font-weight: 400;margin-bottom: 5px;}
#book_area .info_box p{color: var(--white);display: flex;align-items: center;}
#book_area .info_box p b{color: #fff;opacity: .5;font-weight: 400;margin-left: 10px;font-family: "Lato", sans-serif;font-size: 14px;}

/* 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 (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: 1024px){
    #about_area .more_btn{margin-bottom:15px;}
    #about_area .info_box{margin-bottom:0}
}
@media screen and (max-width: 768px){
    #about_area .info_box article p{width:100%}
    #about_area .info_box{margin-top:30px;width: 100%;}
    #about_area .img_box *{height:auto;}
    #about_area .img_box img{aspect-ratio:4/3}
    #about_area:before{width: 100%;height: 30%;bottom: unset;top: 0;}
    #about_area .workframe{display:block;}
	#news_area .list_box .info_box { padding: 15px 0; }
	#youtube_box { padding-bottom: 60vw; }
	#custom_box li .row { margin: 10px 15px; padding: 10px 0; }
}
@media screen and (max-width: 640px){
    #book_area .list_box img {aspect-ratio: 2.5/3;}
    #book_area{padding:0}
    #about_area .fixTxt{width: 200px;}
    #about_area:before{height: 23%;}
}
@media screen and (max-width: 450px){
	#product_area .bgBox { width: 100%; object-fit: cover; }
}