@import url('/css/icheck/icheck-material-custom.css');

header.headerfixed{background-repeat:no-repeat;background-position:50% 50%;background-size:cover;background-image:url(/images/00/img-p-bg.png)}
header #cis img{height:100px}
.webBox .wrapper{background-image:url(/images/00/img-s-bg.png);background-size:contain}


/* sub_banner */
#sub_banner{z-index:10;padding:100px 0 0;position:relative}
#sub_banner .banner_img{z-index:2}
#sub_banner .banner_img img{object-fit:cover;width:100%;aspect-ratio:3 / 1.5}
#sub_banner .banner_tit{height:100%;z-index:3;bottom:0;position:relative;flex-basis:860px;-ms-flex-negative:3;flex-shrink:3;padding:0 6.51042vw;margin-bottom:52px;-webkit-transition:all 0.3s;transition:all 0.3s}
#sub_banner .banner_tit .workframe{min-height:calc(100% - 10vmax);display:flex;align-items:flex-start;position:relative;justify-content:center;flex-direction:column;margin-top:100px;margin-bottom:100px}
#sub_banner .banner_tit .other_txt{font-size:72px;-webkit-transform:rotate(-11deg) translate(0%,.1em);transform:rotate(-11deg) translate(0%,.1em);font-family:"Kaushan Script",cursive;color:#ab612d;bottom:-210px;left:-170px;line-height:100%;display: none;}
#sub_banner .banner_tit h2{border-bottom:1px var(--primary) solid;line-height:1;letter-spacing:.2rem;font-weight:300;font-size:55px;color:var(--primary);text-transform:uppercase;font-family:"Cormorant Garamond",serif}
#sub_banner .banner_tit h3{font-size:23px;letter-spacing:0.2rem;font-weight:600;color:var(--primary);margin-top:0.55rem}
#sub_banner .top_slogan{white-space:nowrap;-webkit-text-stroke:1px rgb(114 79 55 / 48%);line-height:1;color:transparent;opacity:.4;-webkit-transform:translate(2vw,.7em);transform:translate(2vw,.7em);pointer-events:none;right:0;bottom:0;text-align:center;letter-spacing:5px;font-family:"Cormorant Garamond",serif;text-transform:uppercase}

/* wrap */
#wrap {z-index: 1;}

/* detail_title */
#detail_title{width:100%;margin-top:70px}
#detail_title h2{padding-left:40px;color:var(--primary);font-weight:600;font-size:36px;letter-spacing:5px}
#detail_title h2:after{position:absolute;width:100%;height:1px;background:var(--primary);bottom:0;left:0;-webkit-transform:translateX(360px);transform:translateX(290px);content:""}

/* waylink */
.waylink{margin:15px 0 30px}
.waylink ol li,.waylink ol li a{font-size:13px;color:var(--primary)}
.waylink ol li:after{margin:0 10px;display:inline-block;color:#6d6d6d;content:"|"}
.waylink ol li:last-child:after{margin:0;content:""}
#wrap .workframe{margin-top:80px}

/* aside */
aside{padding:0 0px 0 40px;width:260px;margin-right:50px;display: none;}
aside h4,aside ul li>div{position:relative}
aside li a{padding:13px 10px 13px 10px;border-bottom:1px #d6d6d6 solid;display:block;font-weight:400;font-size:17px;color:#6e513d;width:100%}
aside b[data-action="sideOpen"]{position:absolute;height:100%;width:40px;display:flex;justify-content:center;align-items:center;top:0;right:0}
aside b[data-action="sideOpen"] i:before,aside b[data-action="sideOpen"] i:after{width:15px;height:1px;background:#747474;display:block;content:""}
aside b[data-action="sideOpen"] i:after{-webkit-transform:translateY(-1px) rotate(90deg);transform:translateY(-1px) rotate(90deg);-webkit-transition:all .2s linear;transition:all .2s linear}
aside b[data-action="sideOpen"] i.fa-minus:after{-webkit-transform:translateY(-1px) rotate(0deg);transform:translateY(-1px) rotate(0deg)}
aside .action h4 a{background:var(--primary);color:#fff}
aside .action h4 b[data-action="sideOpen"] i:before,aside .action h4 b[data-action="sideOpen"] i:after{background:#fff}
aside>ul>li ul{margin-left:.5em;display:none;-webkit-transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;transition:none}
aside>ul>li li a{padding:8px 40px 8px 10px;font-size:16px;color:var(--dark_gary)}
aside li.action>ul{display:block}

/* content_wrap */
#content_wrap {width: 100%;flex: auto 1;}

/* list_box */
.list_box li{margin-top:10px;margin-bottom:10px}
.list_box li h3{height:30px;font-weight:500;font-size:20px}

/* describe */
#describe {margin-bottom: 5vw;}

#describe * {vertical-align: bottom;}

/* article_list */
#article_list img{height:350px}
#article_list .info_box{padding:25px 30px}
#article_list .info_box article{font-weight:300}
#article_list .info_box{color:#616161;background-image:none;background-color:#ffffff;border:1px solid rgba(97,97,97,0.5);letter-spacing:1.3px;position:relative}
#article_list .info_box::before{content:"";position:absolute;top:53%;right:30px;width:10px;height:10px;border-left:1px solid rgba(97,97,97,0.5);border-bottom:1px solid rgba(97,97,97,0.5);-webkit-transform:translateX(-50%) translateY(-50%) rotate(-135deg);transform:translateX(-50%) translateY(-50%) rotate(-135deg)}


/* top_title */
#top_title .pag_tit{line-height:120%;font-weight:400;letter-spacing:5px}
#top_title .newsDate{padding:8px 0;font-size:12px;color:#818181;letter-spacing:1px;text-transform:uppercase}
#top_title .newsDate b{font-size:14px;font-weight:400}
#top_title .newsDate .date{display:inline-block;font-size:14px;font-weight:400;color:#888;font-family:'Poppins',sans-serif}
#top_title .classTitle{position:relative;display:inline-block;padding:3px 5px;margin-left:20px;margin-right:5px;font-weight:400;font-size:14px;background-color:rgb(162 152 145 / 12%);color:#724f37}
#top_title .classTitle::before{content:"";position:absolute;top:50%;left:-15px;width:9px;height:2px;background-color:#ccc}
#top_title .articleTitle{border-bottom:1px solid #d6d6d6;color:#232323;font-weight:500;font-size:22px;margin-bottom:20px;padding:10px 0 20px 0;letter-spacing:0.5px;width:100%}


/* news_list */
#news_list li{margin-bottom:20px}
#news_list li::before{pointer-events:none;content:"";position:absolute;top:0;left:0;right:0;bottom:0;border:5px solid #724f37;-webkit-transition:all 0.4s ease;transition:all 0.4s ease;opacity:0}
#news_list li img{aspect-ratio:4 /3}
#news_list li .info_box{padding:15px 25px;width:calc(100% - 0px);left:20px;bottom:0}
#news_list li .info_box p *{font-weight:100;font-size:14px}
#news_list li .info_box p a{margin-right:10px;padding:0 2px;max-width:calc(100% - 82px);height:23px;z-index:2}
#news_list li .newsDate{padding:8px 0;font-size:12px;color:#818181;letter-spacing:1px;text-transform:uppercase}
#news_list li .newsDate b{font-size:14px;font-weight:400}
#news_list li .newsDate .date{display:inline-block;font-size:14px;font-weight:400;color:#888}
#news_list li .newsDate .classTitle{position:relative;display:inline-block;padding:3px 5px;margin-left:20px;margin-right:5px;font-weight:400;font-size:14px;background-color:var(--primary);color:#fff}
#news_list li .newsDate .classTitle::before{content:"";position:absolute;top:50%;left:-15px;width:9px;height:2px;background-color:#ccc}
#news_list li h3{height:65px;font-size:20px;font-weight:700;color:var(--primary);margin-bottom:10px;-webkit-line-clamp:2}
#news_list li .text{-webkit-line-clamp:2;height:53px;width: calc(100% - 70px);}
#news_list li .plus{position:absolute;bottom: 32px;right: 16px;pointer-events:none;width:25px;height:25px;-webkit-transition:all 0.4s ease;transition:all 0.4s ease}
#news_list li .plus::before,#news_list li .plus::after{content:"";position:absolute;top:50%;left:0;margin-top:-1px;width:100%;height:2px;background-color:var(--primary);-webkit-transition:all 0.4s ease;transition:all 0.4s ease}
#news_list li .plus::after{-webkit-transform:rotate(90deg);transform:rotate(90deg)}

/* pagenav */
#pagenav{margin:60px 0 0;padding:50px 0 20px;display:flex;justify-content:center;align-items:center}
#pagenav a,#pagenav strong{margin:0 4px;display:flex;justify-content:center;align-items:center;border-radius:.2rem;font-size:15px;color:#808080}
#pagenav a,#pagenav strong{margin:0 10px;display:inline-block;font-weight:400;vertical-align:middle}
#pagenav a:first-child,#pagenav a:last-child{line-height:9px}
#pagenav strong{color:var(--primary)}
#pagenav a[class^="page-"]{float:left;width:calc(100% - 20px);display:block}
#pagenav a[class^="page-"] font{width:calc(100% - 22px);display:inline-block;vertical-align:text-top}
#pagenav a[class^="page-"] i{margin:0 10px 0 0;display:inline-block}
#pagenav a.page-next{float:right;text-align:right}
#pagenav a.page-next font{text-align:right}
#pagenav a.page-next i{margin:0 0 0 10px}

/* product_list */
#product_list{margin-top:40px;grid-template-columns:repeat(3,1fr);grid-gap:55px 0}
#product_list li>div{margin:0 15px;box-shadow:0 0 30px rgb(0 0 0 / 20%);display:block;height:100%;padding:20px 17px 20px;background:#e8dacf;border-radius:400px 400px 70px 70px;-webkit-box-shadow:0 0 0 0 rgba(0,0,0,0);box-shadow:0 0 0 0 rgba(0,0,0,0);-webkit-transition:all 0.5s;transition:all 0.5s}
#product_list li img{width:100%;position:relative;aspect-ratio: 3 / 3;object-fit:contain;padding: 4.3% 5.3% 0px;margin-bottom:16px;border-radius:90% 90% 10px 10px;overflow:hidden;background-color: #e8dacf;object-fit: cover;}
#product_list li .info_box{padding:5px 0px 7px;border-bottom:1px #77553d4a solid}
#product_list li .info_box p{font-weight:300;font-size:16px}
#product_list li .info_box h3{height:40px;font-weight:500;font-size:22px;color:var(--primary);text-align:center;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}
#product_list li .price_box{padding:20px 0 15px;display:flex;justify-content:space-between;align-items:center}
#product_list li .price_box .price{font-weight:300;font-size:15px;color:var(--primary);letter-spacing:2px;opacity:0.8}
#product_list li .price_box a{font-weight:500;font-size:14px;color:var(--primary);z-index:6;letter-spacing:2px;opacity:0.8}

/* product_add */
#product_add{margin:40px 0;border:1px #e8e8e8 solid}
#product_add .tit_box{padding:.5em 3%;background:#f5f5f5;font-size:20px;color:#363636}
#product_add .body_box{padding:3%}

/* add_product_list */
#add_product_list{grid-template-columns:repeat(2,1fr);grid-gap:40px 25px}
#add_product_list .img_box{margin-right:40px;width:100px;height:100px}
#add_product_list .img_box img{width:100%;height:100%}
#add_product_list .info_box h3{font-weight:500;font-size:16px;color:#262626}
#add_product_list .info_box .price_box p{font-weight:bold;font-size:14px;color:#262626}
#add_product_list .info_box .price_box p.original{text-decoration:line-through;color:#949494}

/* other_product_box */
#other_product_box .tit_box{margin-top:5%;padding-bottom:5px;text-align:center;font-weight:400;letter-spacing:1px;font-size:32px;color:var(--primary)}

/* book_list */
#book_list{display:flex;flex-wrap:wrap}
#book_list li h3{text-align:inherit;margin-bottom:10px}
#book_list li p{color:#919191;overflow:hidden;height:54px;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
#book_list .row img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:top;border-radius:25px}
#book_list .row .info_box{padding:20px 15px 30px;width:calc(100% - 0px);background:-webkit-linear-gradient(top,transparent 0,rgba(var(--black-rgb),.01) 2%,rgba(var(--black-rgb),.8) 90%);background:linear-gradient(to bottom,transparent 0,rgba(var(--black-rgb),.01) 2%,rgba(var(--black-rgb),.8) 90%);bottom:0;left:0}

/* faq_list */
#faq_list>li{margin:20px 0;background:#fff;box-shadow:0 0 17px rgb(0 0 0 / 7%)}
#faq_list>li>a{padding:15px 25px}
#faq_list>li>a font{font-weight:400;font-size:20px;color:#2f3e47}
#faq_list>li .info{padding:0 25px 40px;display:none;border-top:1px #ebebeb solid;-webkit-transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;transition:none}
#faq_list>li{margin-bottom:30px}
#faq_list>li .title{padding: 20px 45px 20px 5px;display:block;position:relative}
#faq_list>li.current .title{background-color:var(--primary);color:#fff}
#faq_list>li.current .title font{color:#ffffff}
#faq_list>li.current .title span:before,#faq_list>li.current .title span:after{background:var(--light)}
#faq_list>li .title label{padding:0 0 0 10px;width:70px;color:var(--primary)}
#faq_list>li .title font{width:calc(100% - 80px);font-size:18px}
#faq_list>li .info{padding:15px 35px 15px 85px;font-size:14px;-webkit-transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;transition:none}
#faq_list>li .title span{position:absolute;width:16px;height:16px;display:block;top:calc((100% - 16px) / 2);right:25px}
#faq_list>li .title span:before,#faq_list>li .title span:after{width:16px;height:1px;background:#696969;display:block;content:"";-webkit-transform:translateY(9px);transform:translateY(9px)}
#faq_list>li .title span:after{-webkit-transform:translateY(8px) rotate(90deg);transform:translateY(8px) rotate(90deg)}
#faq_list>li.current .title span:after{-webkit-transition-duration:.2s;transition-duration:.2s;-webkit-transform:translateY(8px) rotate(180deg);transform:translateY(180deg) rotate(0)}

/* search_list */
#search_list{grid-template-columns:repeat(4,1fr);grid-gap:55px 0}
#search_list li>div{margin:0 15px;background:#fff;border-radius:.5rem;box-shadow:0 0 30px rgb(0 0 0 / 20%)}
#search_list li img{width:100%;height:300px}
#search_list li .info_box{padding:5px 35px 10px;border-bottom:1px #a5a5a5 solid}
#search_list li .info_box h3{height:30px;font-weight:500;font-size:19px;color:#3a4351}
#search_list li .more_box{padding:10px 35px;display:flex;justify-content:flex-end;font-weight:300;font-size:15px;color:#222}

/* community */
#community li{margin-right:5px}
#community li,#community li *{line-height:100%}
#community li .fb_iframe_widget{display:block !important}

/* form_box */
.form_box{margin-top:50px}
.form_box p{margin-bottom:30px}
.form_box input#Checknum{margin-right:10px;width:100px}
.form_box #btnOK{padding:5px 10px;width:250px;background-color:#9ab8c9;color:#fff}

/* lodbg */
[data-action="loader"]{position:fixed;width:100vw;height:100vh;background:rgb(0 0 0 / .3);text-align:center;line-height:100vh;top:0;left:0;opacity:0;z-index:-1}
[data-action="loader"] .loader-circle{width:50px;height:50px;border:2px rgba(0,0,0,.6) solid;border-left-color:rgb(255 255 255 / .4);border-radius:100%;display:inline-block}
#lodbg{opacity:1;z-index:99999}
#lodbg .loader-circle{-webkit-animation:circle infinite .75s linear;-moz-animation:circle infinite .75s linear;-o-animation:circle infinite .75s linear;animation:circle infinite .75s linear}
@keyframes circle{0%{transform:rotate(0)}
100%{transform:rotate(360deg)}
}@-webkit-keyframes circle{0%{-webkit-transform:rotate(0)}
100%{-webkit-transform:rotate(360deg)}
}@-moz-keyframes circle{0%{-webkit-transform:rotate(0)}
100%{-webkit-transform:rotate(360deg)}
}@-o-keyframes circle{0%{-webkit-transform:rotate(0)}
100%{-webkit-transform:rotate(360deg)}
}#top_title .m_title{display:flex;flex-direction:column;align-items:center}
#top_title .description_box{text-align:center}
#contentBox{width:80%;margin:auto}
aside #sidebtn{color:var(--info)}

@media screen and (min-width: 1501px) {
	#wrap:before {width: calc((100% - 1440px) / 2);}
}

@media screen and (max-width: 1500px) {
	#sub_banner .banner_img img{aspect-ratio:3 / 2}
#sub_banner .banner_tit .other_txt{font-size:4vmax}
#sub_banner .banner_tit h2{font-size:3.2vmax}
#sub_banner .banner_tit h3{font-size:1.6vmax}
}

@media screen and (min-width: 1281px) {
	header{position:fixed;z-index:999;width:100%}
aside #sidebtn{display:none}
#sub_banner{z-index:10;padding:120px 0 0;position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
#news_list li:hover .info_box{bottom:30px}
#news_list li:hover::before{-webkit-transform:translate(0px,0px);transform:translate(0px,0px);opacity:0.1}
#news_list li:hover .plus{right:40px}
}

@media screen and (max-width: 1280px) {
	#search_list{grid-template-columns:repeat(3,1fr)}
#sub_banner{z-index:10;padding:0;position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
#news_list{display:flex;flex-direction:row;flex-wrap:wrap}
#news_list li .plus{display:none}
#news_list li .info_box{width:calc(100% - 0px);padding:15px 0px}
#news_list li img{}
#news_list li{width:calc((100% / 2) - 30px)}
}

@media screen and (min-width: 1161px) {
	header.scroll{background:#fff}
header.scroll #cis a svg use{fill:#6190aa}
header.scroll #cis a svg use:nth-child(2){fill:#7d7d7d}
header.scroll #webmenu *{color:#424242}
header.scroll #topbtns .btn svg{fill:#6190aa}
header.scroll #topbtns #openshop font{color:#6190aa}
#sub_banner .top_slogan{font-size: 12vmax;}
#wrap::after{content:"";width: 16vw;aspect-ratio: 1/1;height: auto;display:block;background-image:url(/images/00/img-ab-02.png);background-size:auto;background-repeat:no-repeat;background-position:100% 100%;overflow:hidden;position:absolute;top: -23vw;right:0;z-index:0;z-index:0;-webkit-animation:birdJitter 3s ease-in both infinite;animation:birdJitter 3s ease-in both infinite}
@keyframes birdJitter{0%,60%,to{-webkit-transform:translate(0,0);transform:translate(0,0)}
30%{-webkit-transform:translate(-1px,0) rotate(-6deg);transform:translate(-1px,0) rotate(-6deg)}
80%{-webkit-transform:translate(0,0) rotate(3deg);transform:translate(0,0) rotate(3deg)}
}#wrap:before{height:calc(100% - 130px)}
aside h4:hover a{background:var(--primary);color:#fff}
aside h4:hover b[data-action="sideOpen"] i:before,aside h4:hover b[data-action="sideOpen"] i:after{background:#fff}
#wrap:before{position:absolute;height:100%;display:block;content:"";top:-300px;left:-1200px;z-index:-2;background:linear-gradient(300deg,hsl(42.86deg 41.18% 96.67% / 81%),rgb(245 233 216 / 77%));animation:border-transform 16s linear infinite;margin:0 10px;width:100%}
@keyframes border-transform{0%,100%{border-radius:63% 37% 54% 46% / 55% 48% 52% 45%}
14%{border-radius:40% 60% 54% 46% / 49% 60% 40% 51%}
28%{border-radius:54% 46% 38% 62% / 49% 70% 30% 51%}
42%{border-radius:61% 39% 55% 45% / 61% 38% 62% 39%}
56%{border-radius:61% 39% 67% 33% / 70% 50% 50% 30%}
70%{border-radius:50% 50% 34% 66% / 56% 68% 32% 44%}
84%{border-radius:46% 54% 50% 50% / 35% 61% 39% 65%}
}#sub_banner .banner_img,#sub_banner .banner_tit{width:50%}
}

@media screen and (max-width: 1160px) {
	#sub_banner{top:0;height:100%;padding:0;display:flex;flex-direction:column;margin-top: 80px;}
#sub_banner:before{width:100%;height:100%;opacity:.7;z-index:2;-webkit-transform:translateY(0);transform:translateY(0)}
#sub_banner .banner_img{z-index:1}
#sub_banner .banner_img img{width:100%}
#sub_banner .banner_tit{height:auto;top:0;z-index:3;padding:0;margin-bottom:0;width:100%;flex-basis:0}
#sub_banner .banner_tit .workframe{margin-top:40px;margin-bottom:0;align-items:center;top:0;z-index:3;min-height:auto}
#sub_banner .banner_tit h2{font-size:4.2vmax}
#sub_banner .banner_tit .other_txt{display:none}
#sub_banner .banner_tit h3{font-size:2.2vmax}
#sub_banner .top_slogan{margin-bottom:-0.3em}
#wrap .workframe{padding:40px 0 50px;margin-top:50px;width:90%}
#detail_title{margin-top:50px}
aside{position:absolute;padding:0;width:300px;top:-10px;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);z-index:1}
aside #sidebtn{padding:7px 10px;width:100%;background:var(--light);border:1px solid var(--light_gary);z-index:12}
aside #sidebtn i{position:absolute;top:50%;right:10px;-webkit-transform:translateY(-40%);transform:translateY(-40%)}
aside #sidebtn[data-type="2"] i{-webkit-transform:rotate(180deg) translateY(40%);transform:rotate(180deg) translateY(40%)}
aside>ul{display:none;position:absolute;overflow:hidden;margin-top:30px;width:100%;height:auto;background:var(--light);border:0 var(--light_gary) solid;left:0;z-index:11;-webkit-transform:translateY(-30px);transform:translateY(-30px)}
aside>ul.open{height:auto;border-width:1px;-webkit-transform:translateY(5px);transform:translateY(5px)}
aside ul li{position:relative;border-bottom:0}
aside ul li h4 a{padding:10px;text-align:center}
aside>ul>li ul.subUL{overflow:hidden;width:100%;height:0;background:var(--light);top:0;left:0}
aside>ul.open>li[data-type="2"]>ul{position:relative;height:auto;top:auto;bottom:0;opacity:1}
#content_wrap{width:100%;flex:inherit}
#detail_title h2{padding-left:0;font-size:26px;padding:0px 0 20px}
#detail_title h2:before{left:0}
#detail_title h2:after{-webkit-transform:translateX(0px);transform:translateX(0px)}
#top_title .pag_tit:before{display:none}
#top_title .pag_tit{font-size:24px;margin-bottom:10px}
#top_title{margin:0rem 0rem 1rem 0rem;padding:0 15px 10px 15px}
}

@media screen and (max-width: 980px) {
	#product_list{padding:0 30px;grid-template-columns:repeat(2,1fr)}
#book_list{display:flex;flex-direction:column}
#book_list .row img{height:400px}
#search_list li img{height:30vw}
}

@media screen and (max-width: 768px) {
	#search_list{grid-template-columns:repeat(2,1fr)}
#search_list li img{height:40vw}
}

@media screen and (max-width: 640px) {
	#detail_title{margin-top:0}
#detail_title h2{font-size:28px}
aside{top:-35px}
#news_list li{width:calc((100% / 1) - 30px)}
#news_list li .text{display:none}
.waylink{margin:15px 0 0px}
aside #sidebtn{}
#wrap .workframe{margin-top:30px}
}

@media screen and (max-width: 550px) {
	#banner .banner_tit .more_btn{padding-left:40px}
#wrap .workframe{padding: 15px 0 100px;}
#product_list{padding:0 10px;grid-template-columns:repeat(1,1fr)}
#book_list .row img{height:300px}
#search_list{padding:0 10vw;grid-template-columns:repeat(1,1fr)}
#search_list li img{height:55vw}
#top_title .pag_tit:before{right:-224px}
}