/* 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);}
    #book_area .list_box li .img_box:before{opacity: 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{opacity: .3;}
    #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.scroll { background: rgba(var(--secondary-rgb), .9); }
header .menu {padding: 20px 5%;display: flex;justify-content: space-between;align-items: center;border-bottom: 1px rgba(var(--white-rgb), .2) solid;background: none;}

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

/* section */
section {margin: 5vw 0 3vw;}
section.section_pad { padding: 5vw 0; }
section >* { z-index: 3; }
section .title_box {margin-bottom: 30px;}
section .title_box .area_title {font-weight: 400;font-size: 23px;}
section .title_box .sub_title {font-weight: 500;font-size: 23px;font-family: 'Montserrat', sans-serif;}

/* 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{position:relative;margin:0;padding:5vw 0 3vw}
#about_area .info_box article{margin-bottom:30px;width:90%;line-height:210%;letter-spacing:1.5px;font-weight:300}
#about_area .info_box article .en{margin-top: 30px;font-family:'Montserrat',sans-serif;line-height: 140%;}

/* 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{position:relative;padding:5vw 0 3vw;margin:0}
#book_area .BookBG{position:absolute;top:0;right:0%;height:500px;width:0;opacity:1;background-image:url(/images/40/img-bg.jpg);background-size:cover;background-repeat:no-repeat;z-index:0;transition:all 3.1s ease-in-out;-webkit-transition:all 3.1s ease-in-out}
#book_area.tooolong .BookBG{width:38%}
#book_area ul{display:grid}
#book_area ul li{display:flex;justify-content: space-between;align-items:center;flex-direction:row;margin:30px 0;}
#book_area ul li:hover{box-shadow:0 0 rgb(206 201 198 / 15%)}
#book_area ul li:nth-child(2n){
    display: flex;
    flex-direction: row-reverse;
}
#book_area .list_box img{height: 750px;aspect-ratio:4/3;object-fit:cover}
#book_area .list_box ul li:nth-child(2n) .text{margin-right: 100px;}
#book_area .list_box .img_box a{width:100%;height:100%;position:absolute;z-index:99}
#book_area .list_box .img_box:after{right:0;bottom:0}
#book_area .list_box .text{display:flex;flex-direction:column;margin:0 auto;margin-left: 100px;}
#book_area .list_box .text h3 a{font-size:24px;font-weight:400;color:var(--primary)}
#book_area .list_box .text em{font-style:normal;margin-bottom:50px}
#book_area .list_box .text a.more_btn{width:51px;margin-top:20px}
#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}

/*Case_area*/
#Case_area{margin:0;padding:5vw 0 3vw;position:relative}
#Case_area li{margin:0 15px}
#Case_area ul li .img_cover{width:800px;height:400px}
#Case_area .slick-dots li button{width:20px;height:5px;padding:6px}
#Case_area .slick-dots li button:before{content:'▂';width:20px;height:2px;line-height:0px}
#Case_area .slick-dots{position:relative;margin-top:45px;bottom:0}
#Case_area .slick-dots li{width:14px;height:0px;display:inline-flex}
#Case_area .SecaboutBG{position:absolute;height:90%;width:0;bottom:0;left:0;background:rgb(196 185 173 / 25%);z-index:0;transition:all 3.1s ease-in-out;-webkit-transition:all 3.1s ease-in-out}
#Case_area.tooolong .SecaboutBG{width:25%}

/* 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:1680px){
    #book_area .list_box ul li:nth-child(2n) .text{margin-right: 30px;}
    #book_area .list_box .text{display:flex;flex-direction:column;margin:0 auto;margin-left: 50px;}
}
@media screen and (max-width:1440px){
    #Case_area ul li .img_cover{height:300px}
    #book_area .list_box .text{
    margin-right: 50px;
}
}
@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 (min-width:1025px){
    #about_area .workframe,#book_area .workframe{width:100%}
}
@media screen and (max-width:1024px){
    #about_area .info_box{margin:50px}
    #book_area .list_box img{
    height: 560px;
    /* width: 100%; */
    }
    #book_area ul li{flex-direction:column}
    
    #book_area .list_box .text{margin:50px}
    #book_area ul li:nth-child(2n){flex-direction:column}
}
@media screen and (max-width:768px){
    section .title_box .area_title{font-size:36px}
}
@media screen and (max-width:640px){
    #about_area .info_box{margin:25px}
    #book_area .list_box img{height:71vw}
    #book_area .list_box .text{margin:20px}
    #book_area .list_box .text em{margin-bottom:25px}
    #book_area .list_box .text p{overflow:hidden;height:80px;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}
    #about_area .info_box article .en{font-size:12px}
}
@media screen and (max-width:450px){
    #product_area .bgBox{width:100%;object-fit:cover}
}