@import url('/css/icheck/icheck-material-custom.css');
/* sub_banner */
#sub_banner{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.2}
#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;-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:50px;-webkit-transform:rotate(-11deg) translate(0%,.1em);transform:rotate(-11deg) translate(0%,.1em);color:var(--thirdly);bottom:-210px;left:-170px;line-height:100%}
#sub_banner .banner_tit h2{border-bottom:1px var(--info) solid;line-height:1;letter-spacing:.2rem;font-weight:500;font-size:55px;color:var(--info);text-transform:uppercase;font-family:"Oswald",sans-serif}
#sub_banner .banner_tit h3{margin-top:0.55rem;font-size:27px;letter-spacing:.2rem;font-weight:500}
#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:50px;text-align:center;letter-spacing:5px;font-family:"Rammetto One",sans-serif;text-transform:uppercase}

/* wrap */
#wrap {z-index: 3;margin: 3vw 0 5vw 0;}
#wrap .workframe{display: flex;flex-wrap: wrap;justify-content: space-between;}
#wrap .workframe.all{display: block;}
#wrap .workframe.all #content_wrap{width:100%;}

/* detail_title */
#detail_title {width: 100%;margin-bottom: 50px;}
#detail_title h2 {font-size: 38px;}
#detail_title h2:before {position: absolute;width: 30px;height: 4px;background: var(--thirdly);top: -10px;content:"";}
#detail_title h2:after {position: absolute;width: 100%;height: 1px;background: #000000;bottom: 0;left: 0;-webkit-transform: translateX(240px);transform: translateX(240px);content: "";opacity: .2;}

/* waylink */
.waylink{margin:15px 0 30px;display:none}
.waylink ol li,.waylink ol li a{font-size:14px;color:#635634}
.waylink ol li:after{margin:0 10px;display:inline-block;color:#635634;content:"|"}
.waylink ol li:last-child:after{margin:0;content:""}
.waylink ol li svg{fill:#e8dab4;width:22px;height:22px}
#wrap .workframe{margin-top:0px}

/* aside */
aside {width: 220px;}
aside >ul{border-left: 1px solid #d0d0d0;display: flex;flex-direction: column;justify-content: center;position: relative;padding: 10px 0;}
aside >ul:before{content:'';width: 1px;height: 80%;background: var(--thirdly);position: absolute;left: -1px;}
aside h4, aside ul li>div { position: relative; }
aside li a {font-weight: 400;font-size: 17px;color: #333;line-height: 1.2;letter-spacing: 0.5px;padding: 18px 20px;position: relative;display: block;}
aside li:not(:first-child){border-top:1px solid #ccc}
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: #434343;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: rgb(198 198 198 / 20%);}
aside .action h4 b[data-action="sideOpen"] i:before, aside .action h4 b[data-action="sideOpen"] i:after {background: #ffffff;}
aside>ul>li ul {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; }
aside li >ul .subULHead p a{font-weight: 400;font-size: 16px;color: #4e4e4e;line-height: 1.2;letter-spacing: 0.5px;padding: 14px 0 14px 30px;position: relative;}

/* content_wrap */
#content_wrap {width: calc(100% - 240px);}
#content_wrap .title{border-bottom:1px solid #d6d6d6;font-weight:600;font-size: 26px;margin-bottom:20px;padding:10px 0;letter-spacing:0}

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

/* describe */
#describe {}
#describe * { vertical-align: bottom; }

/* article_list */
#article_list li img {aspect-ratio: 4 / 3;}
#article_list li .info_box{margin-top: -40px;}
#article_list li .info_box .time{display: inline-flex;align-items: center;text-transform: uppercase;background: #fff7e1;padding: 10px 30px 0 0;}
#article_list li .info_box .time span:first-child{font-size: 45px;color: var(--info);font-family: "Oswald",sans-serif;line-height: 150%;}
#article_list li .info_box .time span:first-child:after{content:'';width: 1px;height: 45px;display: inline-block;margin: 1px 10px 0 20px;background: #c3c3c3;transform: skewX(-30deg);}
#article_list li .info_box .time span.two{font-family: "Oswald",sans-serif;display: inline-flex;flex-direction: column;line-height: 1.2;margin-left: 10px;font-size: 17px;}
#article_list li .info_box .time span.two b{font-size: 17px;font-family: "Oswald",sans-serif;line-height: 1.2;}
#article_list li .info_box h3 {height: auto;font-size: 19px;color: #000000;font-weight: 500;margin-top: 10px;}
#article_list li .info_box p {font-size: 14px;-webkit-line-clamp: 2;height: auto;line-height: 2;margin-top: 5px;}
#article_list li .info_box .more {border-top: 1px solid #ddd;font-family: "Oswald",sans-serif;display: flex;flex-wrap: wrap;align-items: center;position: relative;margin-top: 20px;padding-top: 20px;font-weight: 400;color: var(--dark);}
#article_list li .info_box .more:before{content:'';display: inline-block;width: 30px;height: 1px;background: var(--dark);margin-right: 10px;}
#article_list li .info_box .more svg{transform: scaleX(-1);fill: var(--dark);width: 15px;height: 15px;position: absolute;right: 0;}

/* news_list */
#news_list li { padding-bottom: 30px; }
#news_list li img { height: 320px; }
#news_list li .info_box { padding: 15px; width: calc(100% - 70px); box-shadow: 0 0 10px rgba(var(--black-rgb), .3); 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; }

/* pagenav */
#pagenav {padding: 30px 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(--thirdly);}
#pagenav a[class^="page-"] { float: left; width: calc(50% - 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 {grid-template-columns: repeat(3, 1fr);grid-gap: 15px 15px;}
#product_list li>div {background: #fff;border-radius: 30px;border: 1px solid #ddd;}
#product_list li img {width: 100%;padding: 20px;aspect-ratio: 1 / 1;}
#product_list li .info_box {padding: 5px 35px 7px;border-bottom: 1px #ededed solid;}
#product_list li .info_box p {font-weight: 300;font-size: 14px;color: #a7a2a2;font-family: "Heebo", sans-serif;}
#product_list li .info_box h3 { height: 30px; font-weight: 500; font-size: 19px; color: #3a4351; }
#product_list li .price_box {padding: 20px 35px;display: flex;justify-content: space-between;align-items: center;}
#product_list li .price_box .price {font-size: 17px;font-family: "Quicksand", sans-serif;color: #b21f1f;letter-spacing: .6px;font-weight: 500;}
#product_list li .price_box a {font-weight: 500;font-size: 14px;color: #3a4351;z-index: 6;display: inline-flex;align-items: center;}
#product_list li .price_box a svg{margin-right:5px;}

/* 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: 15px;border-bottom: 1px #c6c6c6 solid;text-align: center;font-weight: bold;font-size: 28px;color: #252525;margin-bottom: 30px;}


/* album_list */
#album_list {margin-bottom: 5vw;-moz-column-count: 2;-moz-column-gap: 15px;-webkit-column-count: 2;-webkit-column-gap: 15px;column-count: 2;column-gap: 15px;}
#album_list >div { margin-bottom: 15px; }


/* 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 55px 20px 20px;display: block;position: relative;}
#faq_list >li .title label {width: 40px;font-family: "Lato", sans-serif;font-weight: 400;font-size: 20px;}
#faq_list >li .title font { width: calc(100% - 80px); font-size: 18px; }
#faq_list >li .info {padding: 25px 30px 25px 30px;font-size: 16px;-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: 30px;}
#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%;aspect-ratio: 3 / 3;}
#search_list li .info_box {padding: 5px 35px 10px;border-bottom: 1px #ebebeb 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: 20px;}
.form_box p label{margin-bottom:5px;}
.form_box input#Checknum {margin-right: 10px;width: 170px;}
.form_box #btnOK {padding: 10px 10px;width: 250px;background-color: var(--thirdly);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; }

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

@media screen and (max-width: 1500px) {
	#sub_banner .banner_img img{}
	#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 (max-width: 1360px) {
	.waylink ol{width:90%}
}
@media screen and (min-width: 1281px) {
	#sub_banner{padding:160px 0 50px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
}
@media screen and (max-width: 1280px) {
	#search_list{grid-template-columns:repeat(3,1fr)}
	#sub_banner{padding: 100px 0 0;position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
}
@media screen and (min-width: 1161px) {
	aside #sidebtn{display:none;}
	aside li:hover h4 a,aside li.action h4 a {background: var(--thirdly);color: #fff;}
    aside li .subUL li:hover a{
    background: #efe7ce;
    color: #8d7e6e;
    padding: 14px 0 14px 30px;
}
	aside h4:hover b[data-action="sideOpen"] i:before, aside h4:hover b[data-action="sideOpen"] i:after { background: #fff; }
	#sub_banner .top_slogan{font-size:4vmax}
	#sub_banner .banner_img,#sub_banner .banner_tit{width:50%}
	#sub_banner:before{position:absolute;height:100%;display:block;content:"";top:100px;right:-260px;z-index:-32;background:linear-gradient(300deg,hsl(42.86deg 41.18% 96.67% / 81%),rgb(255 255 254));animation:border-transform 16s linear infinite;margin:0 10px;width:60%}
	@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::after{content:"";width: 270px;height: 230px;display:block;background-image:url(/images/00/img-p-00-1.png);background-size: contain;background-repeat:no-repeat;background-position:100% 100%;overflow:hidden;position:absolute;top: 130px;right: -40px;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::after{position:absolute;content:"";top: -260px;left: -140px;height: 270px;width: 320px;background-image:url(/images/00/img-p-01.png);background-repeat:no-repeat;background-size: contain;animation: treeSwing 7s 0.1s both alternate infinite;z-index: 30;}
	#wrap::before{position:absolute;content:"";bottom:-50px;right: -200px;height: 271px;width: 395px;background-image:url(/images/00/img-p-02.png);background-repeat:no-repeat;animation: sheepJitter 7s ease-in both infinite;z-index: -2;}
	@keyframes treeSwing{0%{transform:rotate(0)}
	20%{transform:rotate(5deg)}
	40%{transform:rotate(-5deg)}
	60%{transform:rotate(3deg)}
	100%{transform:rotate(-3deg)}
	}@keyframes sheepJitter{0%,60%,100%{transform:translate(0,0)}
	30%{transform:translate(-1px,0) rotate(-6deg)}
	80%{transform:translate(0,0) rotate(3deg)}
	}
}
@media screen and (max-width: 1160px) {
	.list_box li{margin-bottom:40px}
	aside li >ul .subULHead p a{text-align:center;}
	#wrap .workframe {margin-top: 20px;display: flex;flex-direction: column;align-items: center;}
	aside {position: relative;padding: 0;width: 300px;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 { position: absolute; overflow: hidden; margin-top: 1px; width: 100%; height: 0; 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);padding: 0;}
	aside ul li { position: relative; border-bottom: 0; }
	aside ul li h4 a {padding: 20px 10px;text-align: center;}
	aside>ul>li ul.subUL {overflow: hidden;width: 100%;height: 100%;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;position: relative;z-index: 0;margin-top: 40px;}
	#detail_title h2 { padding-left: 0; font-size: 36px; padding: 5px 0 20px; }
	#detail_title h2:before { left: 0; }
	#detail_title h2:after { -webkit-transform: translateX(0px); transform: translateX(0px); }
	#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%;aspect-ratio:3 / 1}
	#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:30px;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}
	#detail_title{width:100%;margin-bottom:20px;display:none}
	#product_list li .price_box{padding:10px 10px;display:flex;flex-direction:column;align-items:center}
	#product_list li .info_box{padding:5px 10px 7px;margin-top:0}
	#product_list li .info_box h3{font-size:17px}
}
@media screen and (max-width: 980px) {
	#contentBox{width:100%}
	#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 h2 { font-size: 28px; }
	.waylink{margin:15px 0 0px}

}
@media screen and (max-width: 550px) {
	#product_list li>div{margin:0}
	#product_list {padding: 0 10px;}
	#book_list .row img { height: 300px; }
	#search_list { padding: 0 10vw; grid-template-columns: repeat(1, 1fr); }
	#search_list li img { height: 55vw; }
}