header #webmenu nav ul li/* 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,#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;}

/* 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 h3{font-size:30px;font-weight:500}
section .title_box .area_title{font-weight:400;font-size:45px}
section .title_box .sub_title{font-weight:300;font-size:23px}

/* 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{margin-top:8vw}
#about_area .info_box article{margin-bottom:30px;width:90%;line-height:210%;letter-spacing:1.5px;font-weight:300}
#about_area .workframe{display:grid;grid-template-columns:12% 60% 10%;justify-content:space-between;position:relative}
#about_area .workframe:before{content:'';position:absolute;top:-50%;left:0;width:100%;height:1px;background-color:rgb(54 55 56 / 10%)}
#about_info p{font-size:16px;letter-spacing:0.5px}
#photo_area{padding:20px 0;margin:2vw 0 10vw}
#photo_area .track{width:100vw;max-width:100%;white-space:nowrap}
#photo_area .track p{animation: marquee 7s linear infinite;display:flex;gap:50px}
#photo_area .track p img{height: 400px;}
#photo_area .track p img:nth-child(2n){transform: translate(0%,0%);}
@keyframes marquee{from{transform:translateX(0)}
to{transform:translateX(-50%)}
}

/* picture_box */
#picture_box{height:auto}
#picture_box .listbox{position:relative;border:0;padding:5px 0}
#picture_box .listbox:after{content:'';width:100%;height:1px;display:block;margin:30px 0;background:rgb(218 218 218 / 50%)}
#picture_box .info_box{position:relative;display: grid;grid-template-columns: 1fr 120px;align-items:center;justify-content:space-between}
#picture_box .info_box p{position:relative;font-family:"Lato",sans-serif;color:#fff;font-size:16px;width:90px;margin-right:30px}
#picture_box .info_box:before{content:'';position:absolute;width:6px;height:6px;aspect-ratio:1/1;border-radius:50%;right:0;top:13px;border:6px #fff solid;transition:all 0.3s ease-in-out;-webkit-transition:all 0.3s ease-in-out}
#picture_box .listbox:hover .info_box:before{right:10px}
#picture_box .info_box article{padding:10px 20px;background-color:#fff;color:var(--primary);line-height:100%;height:12px;text-align: center;}
#picture_box .info_box .mo_d{display:none}
#picture_box .info_box h3{height:auto;font-size:18px;font-weight:400;color:#fff}
#picture_box .info_rbox{display: grid;grid-template-columns: 100px 1fr;align-items:center;gap:20px}

.tambar{display:flex;justify-content:center;flex-wrap:wrap}
.tambar a{padding: 5px 20px 3px;border-radius:500px;background:#ffffff;margin: 0 10px 20px;color:#403f45;font-size:max(1.15 * (1vw + 1vh) / 2,15px);display: flex;flex-direction: column;align-items: center;justify-content: center;}
.tambar a:hover,.tambar a.showime{background: var(--secondary);color:#ffffff}


/*ptambox*/
#popolanlist{z-index:3}
.ptambox .ceemJbox{position:relative;display:none;grid-template-rows: repeat(1,1fr);grid-template-columns:repeat(3,1fr);justify-content:center;width: min(1360px,95%);margin: 0px auto;padding: 20px 0 60px;}
.ptambox .ceemJbox.showJ{display:grid;gap: 20px;}
.ptambox .ceemJbox:before{content:"";position:absolute;}
.ptambox .ceemJbox div{display: flex;flex-direction: column;}
.ptambox .ceemJbox div a{display:grid;border-radius: 10px;}
.ptambox .ceemJbox.showJ li{list-style: none;}
.ptambox .tamJitem2 .img_scale:nth-child(5){display: none;}
.ptambox .ceemJbox .product_Box{background-color:#fff;}
.ptambox .ceemJbox .pBox{display:inline-grid;margin:0;padding: 20px 20px 20px;position:relative}
.ptambox .ceemJbox .product_Box .imgBox img{height:100%;object-position:40% 50%}
.ptambox .ceemJbox .pMore{margin-top:20px;display:flex;align-items:center;font-weight:300;font-size:16px}
.ptambox .ceemJbox .pMore img{margin-left:20px}
.ptambox .ceemJbox .img_scale:hover{transform: translate(0%, -5%);}
.ptambox .ceemJbox .img_scale:hover h2{color: var(--secondary);}
.ptambox .ceemJbox .img_scale:hover img{transform: scale(1);-webkit-transform: scale(1);}
.ptambox .ceemJbox .img_scale:hover .pMore img{margin-left: 30px;transform: scale(1);-webkit-transform: scale(1);}

.seJJbox01{position:absolute;width:100vw;height:700px;left:-99vw;bottom:0;border-radius:20px;overflow:hidden}
.seJJbox01 video{width:100%;height:100%;object-fit:cover;object-position:100% 50%;margin-left:40%}
.seJJbox02{position:absolute;width:100vw;height:700px;right:-99vw;bottom:0;border-radius:20px;overflow:hidden}
.seJJbox02 video{width:100%;height:100%;object-fit:cover;object-position:100% 50%;margin-left:-42%}
.mJtitleJ h2{font-size:max(4.6*(1vw + 1vh) / 2,32px);text-transform:uppercase;font-weight:500;color:#403f45;line-height:90%;padding-left:40px}
.mJtitleJ h2:first-letter{color:#5eb9b3}
.mJtitleJ:before{content:"";position:absolute;left:0;display:flex;background:antiquewhite;width:19px;aspect-ratio:1 / 1;background-color:#70c2bc;transform:rotate(45deg);animation:rotateJJ 5s linear infinite}

/* product_area */
#product_area{overflow:hidden;max-width:100vw;background-color:#d5dee3;padding:3vw 0;margin-bottom:0}
#product_area .title_box h3{text-align:center;font-size:60px}
#product_area .productCategory{display:flex;justify-content:center;gap:20px;flex-wrap:wrap}
#product_area #product_list .slick-list{margin-top:30px}
#product_area #product_list li >div{margin: 10px;display:block;}
#product_area #product_list li img{height:285px;object-fit:cover;width:100%}
#product_area #product_list li .info_box{padding:0 20px;margin:20px 0;display:flex;flex-direction:column;align-items:flex-start}
#product_area #product_list li .info_box p{font-weight:300;font-size:16px;color:#31302e}
#product_area #product_list li .info_box .price_box{color:#7a1414;font-size:18px;font-weight:500}
#product_area #product_list li .info_box h3{width:100%;height:auto;font-weight:500;font-size:18px;color:#31302e;margin:0}
#product_area #product_list li .slick-track{padding-top:30px}
#product_area #product_list .slick-dots{bottom:-20px}
#product_area #product_list .slick-dots li button{width:10px;height:10px;background:var(--info);border-radius:50%}
#product_area #product_list .slick-dots li button:before{content:""}
#product_area .more_btn{display:flex;justify-content:center;margin-top:30px}

#discount_list{display:grid;grid-template-columns:70% 20%;justify-content:space-between;align-items:center}
#discount_list{overflow:hidden}
#discount_list .ttitle{display:flex;flex-direction:column;align-items:flex-start}
#discount_list .ttitle h3{color:#fff;font-size:60px;font-weight:500;line-height:100%}
#discount_list .ttitle article{color:#fff;font-size:22px;margin-bottom:20px}
#discount_list .ttitle .more_btn a font{color:#fff}
#discount_list .ttitle .more_btn a font:before{background-color:#fff}

/* news_area */
#news_area{margin:0;padding:5vw 0 3vw;overflow:hidden;background-color:#113776}
#news_area .workframe{width:min(90%,1280px)}
#news_area .NewsBg video{position:absolute;bottom:0px;opacity:.4}
#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 .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; }

@-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:1280px){
    #about_area .workframe{grid-template-columns:repeat(1,1fr)}
    #about_info p{margin-bottom:40px}
    #about_area .workframe:before{top:-10%}
    #photo_area .track p img{width:420px}
    #discount_list{grid-template-columns:repeat(1,1fr)}
    #discount_list .ttitle{display:flex;flex-direction:row;align-items:center;justify-content:space-between;margin:30px 0}
    #picture_box{order:1}
    #picture_box .info_box .mo_d{display:block}
    #picture_box .info_box p{display:none}
    #picture_box .info_rbox{display:flex;flex-wrap:wrap;justify-content:flex-start}
    #picture_box .info_box h3{width:90%}
    #picture_box .info_box:before{top:55px;right:5px}
}

@media screen and (max-width:980px){
    .ptambox .ceemJbox.showJ{gap: 9px;grid-template-columns: repeat(2, 1fr);}
}
@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}
    section .title_box h3{font-size:23px}
    #photo_area .track p img{width:300px}
    #product_area .title_box h3{font-size:30px}
    #product_area{margin-top:15vw;padding:8vw 0}
    .ptambox .ceemJbox.showJ{}
}
@media screen and (max-width:640px){
    #book_area .list_box img{height:65vw}
    .ptambox .ceemJbox.showJ{gap: 9px;grid-template-columns: repeat(1, 1fr);}
}
@media screen and (max-width:450px){
    #product_area .bgBox{width:100%;object-fit:cover}
    #about_area .workframe:before{top:0}
    #about_area .title_box h3{padding-top:20px}
}