@import url('/css/animate.css');
.wow {animation: fadeIn 1.5s both;-webkit-animation: fadeIn 1.5s both;animation-duration: 1s;-webkit-animation-duration: 1s;animation-name: fadeInUp;-webkit-animation-name: fadeInUp;}

/* sub_banner */
.bannerArea{clear:both;position:relative;z-index:1;}
.bannerArea .Txt{position:absolute;top: 60%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);z-index: 0;}
.bannerText{position:relative;display:flex;flex-direction: column;align-items:center}
.bannerText .pag_tit{font-size: 23px;text-align:center;line-height: 160%;margin-bottom: 5px;font-weight: 400;color: #ffffff;position: relative;text-transform: uppercase;letter-spacing: 20px;padding: 0 0px 0 20px;}
.bannerText em{line-height:140%;font-style:inherit;letter-spacing: 2.4px;font-size: 44px;font-weight: 300;color: #ffffff;padding-bottom: 10px;font-family: 'Cardo', serif;text-transform: uppercase;}
.bannerArea .bannerBox .Img{max-height:670px}
.bread{position:absolute;top:35%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);margin-bottom:50px;padding:20px 0;z-index:10;opacity: 0.4;display: none;}
.bannerArea .Txt p::before {
  content: "";
  display: block;
  width: 1px;
  height: 50px;
  margin: 10px auto;
  background-color: #fff;
  opacity: 0.5;
}
.bannerArea .Txt p{
    color: #fff;
    text-align: center;
    font-size: 16px;
    letter-spacing: 1px;
}

/* sub_banner */
#sub_banner img{height: 100%;width: 100%;aspect-ratio: 4 /3;object-fit: cover;object-position: 50% 70%;}
#sub_banner {width: 100%;height: 30vw;}
.bannerArea .Img{ z-index: 0; position: relative;}
#sub_banner:after {background: -webkit-linear-gradient(bottom,rgb(255 255 255 / 0%) 10%,rgb(0 0 0 / 18%) 80%);opacity: 1;}
#sub_banner a {height: 100%;background: no-repeat 50% 100% / cover;}
#sub_banner:after {position: absolute;width: 100%;height: 100%;background: -webkit-linear-gradient(bottom,rgb(255 255 255 / 0%) 10%,rgb(0 0 0 / 18%) 80%);top: 0;left: 0;z-index: 1;content: "";opacity: 1;}

/* wrap */
#wrap{/* background-size: contain; */background-color: #f0ece8;overflow:hidden;position:relative;z-index: 0;}

#wrap::after {
    content: '';
    position: absolute;
    height: 1365px;
    width: 1282px;
    top: -240px;
    right: -160px;
    background-image: url(/images/18/img-ab-06.png);
    z-index: 0;
    transform-origin: top left;
    transition: all 1.1s ease-in-out;
    -webkit-transition: all 1.1s ease-in-out
}
#wrap .workframe{
    z-index: 1;
    position: relative;
}

/* 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: var(--primary);color:#fff}
#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 #b5ab9582;color:#232323;font-weight:500;font-size:22px;margin-bottom:60px;padding:10px 0;letter-spacing:0.5px}


/* waylink */
.waylink ol { padding: 20px 0; }
.waylink ol li , .waylink ol li a {letter-spacing: 1.5px;font-weight: 300;font-size: 13px;color: #fff;}
.waylink ol li:after { margin: 0 10px; display: inline-block; font-weight: 100; font-size: 12px; content: "/"; }
.waylink ol li:last-child:after { margin: 0; content: ""; }

/* aside */
aside ul ul.subUL{background-color:#fff;-webkit-box-shadow:0 5px 15px rgba(0,0,0,0.1);box-shadow:0 5px 15px rgba(0,0,0,0.1)}
aside #sidebtn{padding:10px 20px;width:calc(100% - 40px);z-index:2;background: var(--triadic2);}
aside #sidebtn:before{position:absolute;width:100%;height:100%;background:rgba(var(--white-rgb),.1);top:0;left:0;transition:.4s cubic-bezier(.23,1,.32,1);content:""}
aside #sidebtn i{top:calc((100% - 16px) / 2);right:20px}
aside >ul >li b[data-action="sideOpen"]{position:absolute;padding:5px 20px;display:block;top:calc((100% - 42px) / 2);right:0;cursor:pointer}
aside >ul >li b[data-action="sideOpen"] i:before{content:"\f067"}
aside >ul >li[data-type="2"] b[data-action="sideOpen"] i:before{content:"\f068"}
aside >ul >li h4 a{color: #fff7f1;padding: 20px 20px;position:relative;text-align:center;font-weight: 400;font-size: 17px;line-height: 1.4;letter-spacing: 1px;}
aside >ul >li.action h4 a{color:#d8cfbb}
aside >ul >li ul.subUL{position:absolute;width:190px;background:rgba(var(--black-rgb),.85);left:calc(50% - 95px);z-index:5;opacity:0}
aside >ul >li ul.sub2UL{margin-left:10px}
aside >ul >li ul.subUL li >div{position:relative}
aside >ul >li ul.subUL li{background-color:#eee}
aside >ul >li ul.subUL li a{padding:8px 10px 8px 10px;display:block;background-color:#ffffff}
aside >ul >li ul.subUL li [data-action="sideOpen"]{display:none}
aside >ul >li ul.sub2UL li a{color:#888}

/* content_wrap */
#content_wrap {padding: 100px 10px 40px;}

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

/* describe */
#describe {margin-bottom: 3vw;}
#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; }

/* news_list */
#news_list li{padding-bottom: 0px;margin-bottom: 0px;width: calc((100% / 2) - 120px);padding-left: 52px;}
#news_list li::before{pointer-events:none;content:"";position:absolute;top:0;left:0;right:0;bottom:0;border: 2px solid #dcdcdc;-webkit-transition:all 0.4s ease;transition:all 0.4s ease;opacity:0;display: none;}
#news_list li img{height:320px}
#news_list li .info_box{
    left: -10px;
    bottom:0;
    position: relative;
    padding: 30px 30px 30px 60px;
    background-color: rgba(255, 255, 255, .95);
    -webkit-box-shadow: 0 0 13px 0 rgba(0,0,0,.09);
    box-shadow: 0 0 13px 0 rgba(0,0,0,.09);
    -webkit-transform: translate(-15px, -50px);
    transform: translate(-15px, -50px);
    width: calc(100% - 110px);
    overflow: hidden;
}
#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: 30px;font-size: 18px;font-weight:700;color:#343434;-webkit-line-clamp: 1;position: relative;padding-left: 30px;margin: 0px 0 0px;}

#news_list li h3::before {
    content: "";
    position: absolute;
    width: 10px;
    height: 3px;
    background-color: #bababa;
    left: 3px;
    top: 14px;
}
#news_list li .text{-webkit-line-clamp: 2;height: 51px;padding-top: 0px;font-size: 14px;line-height: 1.8;color: #636363;letter-spacing: .3px;}
#news_list li .plus{position:absolute;bottom:50px;right:10px;pointer-events:none;width:30px;height:30px;-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:#86795e;-webkit-transition:all 0.4s ease;transition:all 0.4s ease}
#news_list li .plus::after{-webkit-transform:rotate(90deg);transform:rotate(90deg)}

#news_list li .indexLine {
    -webkit-writing-mode: vertical-lr;
    -ms-writing-mode: tb-lr;
    writing-mode: vertical-lr;
    position: absolute;
    left: 10px;
    top: 30px;
    font-size: 16px;
    color: gray;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 100%
}

#news_list li .indexLine span{font-family: 'Cardo', serif;color: #d6d6d6;font-size: 13px;}

#news_list li .indexLine::after {
    content: "";
    position: absolute;
    width: 1px;
    height: 56%;
    background-color: #dfdfdf;
    bottom: 0;
    left: 12px;
}


/* product_list */
#product_list li{width:calc((100% / 1 ) - 30px);margin:10px;display:flex;padding:80px 0;align-items:flex-start}
#product_list li .img_box{width:830px}
#product_list li .img_box p { padding: .2em 1em; width: calc(100% - 2em); background: rgb(0 0 0 / 50%); text-align: center; letter-spacing: .2em; font-size: 2em; color: #fff; bottom: 0; left: 0; }
#product_list li a.txt_clamp{width:100%;height:100%;left:0;top:0;z-index:10}
#product_list .info_box{position:relative;width:calc(100% - 730px);padding-left:90px}
#product_list .info_box >div{margin:0;width:calc(100% - 0px)}
#product_list .info_box >div p a.txt_primary_5{color:#8c7642;position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-family:'Gallery'}
#product_list .info_box >div p a.txt_primary_5:after{content:"";-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;height:1px;margin-left:15px;background-color:#cbba96a1}
#product_list .info_box h3{margin:0px 0 20px 0;color:#383838;display:block;padding-bottom:20px;margin-bottom:20px;font-weight:500;font-size:28px}
#product_list .info_box .line{margin:10px 0 30px;width:20px;height:3px;margin-top:15px;margin-bottom:15px;background:var(--primary);opacity:.7}
#product_list .info_box article{font-weight:300;font-size:15px;margin-top:40px;padding:30px 30px 40px 30px;border:1px solid #cbba9669;font-size:14px;line-height:2;color:#152c50}
#product_list .info_box .price font{margin-left:20px;font-weight:300}
#product_list .infoTxt .text{margin-bottom:30px;font-size:16px;line-height:2;letter-spacing:0.5pt}
#product_list .infoTxt .itemTxt{width:100%;display:flex;margin:10px 0px}
#product_list .infoTxt .itemTxt .tit{display:flex;align-items:center;margin-right:10px}
#product_list .infoTxt .itemTxt .tit .Icon{display:flex;align-items:center}
#product_list .infoTxt .itemTxt .tit span{margin-left:10px}

/* book_list */
#book_list .row img { height: 400px; }
#book_list .row .info_box { padding: 100px 15px 40px; width: calc(100% - 30px); 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; }

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

/* faq_list */
#faq_list li { margin-bottom: 30px; }
#faq_list li .title { padding: 10px 45px 10px 5px; }
#faq_list li .title label { padding: 0 0 0 10px; width: 70px; }
#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; }

/* pagenav */
#pagenav { padding: 50px 0 20px; }
#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(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; }


/* form_box */
.form_box{display:flex;flex-wrap:wrap;justify-content:space-between;flex-direction:row-reverse}
.form_box .description_box{width:40%}
#form1{width:55%}
.form_box p.note{display:flex;align-items:flex-end;border-bottom:1px solid #dad4d4;position:relative;margin-bottom:27px;padding-bottom:20px}
.form_box p.note:after{content:'';position:absolute;left:0;bottom:-2px;width:30px;height:2px;background:#172a88}
.form_box p.note b{font-size:20px;margin-right:10px;color:var(--primary)}
.form_box p.note b{font-weight:600;font-size:20px;color:var(--secondary);position:relative;margin-right:10px}
.form_box p.note b::first-letter{color:var(--primary)}
.form_box p.note .red,.form_box p label span{color:#e82929}
.form_box p label{color:#000;margin-bottom:5px}
.form_box p{margin-bottom:30px;width:calc((100% / 1) - 0px);margin-right:30px}
input,textarea{padding:10px 10px;background-color: rgb(255 255 255 / 56%);width:calc(100% - 20px)}
.form_box p select{background: url(/images/39/arrow3.png) no-repeat scroll 100% center #f6f8fa;background-repeat: no-repeat;background-position: 98% 50%;padding: 15px 10px;}
.form_box input#Checknum { margin-right: 10px; width: 100px; }
.form_box #btnOK {padding: 5px 10px;width: 250px;color: #fff;}

/* lodbg */
[data-action="loader"] { width: 100vw; height: 100vh; background: rgba(var(--black-rgb), .3); line-height: 100vh; top: 0; left: 0; opacity: 0; z-index: -1; }
[data-action="loader"] .loader_circle { border: 2px rgba(var(--black-rgb), .6) solid; border-left-color: rgba(var(--white-rgb), .4); }
#lodbg { opacity: 1; z-index: 99999; }




@media screen and (max-width:1380px){
	#product_list li .img_box{width:60%}

}

@media screen and (min-width:1281px){
	aside{position:relative;}
	aside::before{
        content: '';
        width: 1920px;
        height: 100%;
        background: var(--primary);
        position: absolute;
        top: 0;
        left: calc(50% - 960px);
      }
	aside >ul{display: flex;padding: 0;justify-content: flex-start;margin-left: -10px;flex-direction: row;flex-wrap: wrap;}
	aside >ul >li{overflow:hidden;position:relative;display:inline-block}
	aside >ul li b[data-action="sideOpen"]{display:none}
	aside >ul >li:hover{overflow:visible;position:relative;}
	aside >ul >li:hover h4 a{opacity: 0.8;}
	aside >ul >li:not(:first-child)::before{content:"";position:absolute;top:50%;left:0;margin-top:-9px;width:1px;height:18px;background-color:#e1e1e1}
	aside >ul >li:hover ul.subUL{opacity:1}
	#news_list li:hover .info_box{bottom:30px}
	#product_list li:hover .info_box .line{}
	#book_list li:hover .info_box{padding-bottom:60px}
	#news_list li:hover::before{-webkit-transform:translate(-20px,20px);transform:translate(-20px,20px);opacity:1}
	#news_list li:hover .plus{right:40px}
	aside ul ul.subUL >li:not(:first-child){border-top:1px solid #d2d2d2}
	.webBox header #webmenu li .menu_body .subOption li ul{}
	aside >ul >li ul.sub2UL li:hover a{color:var(--primary)}
	aside >ul >li h4 a::before{content:"";position:absolute;bottom:-1px;left:0;width:100%;height:2px;background-color:var(--complement);opacity:0}
	aside >ul >li.action h4 a::before,aside >ul >li.action h4 a:hover::before{opacity:1}
	aside ul li::before{content:"";position:absolute;top:calc(50% - 8px);right:0;width:1px;height:16px;background-color: #a89785;}

}

@media screen and (max-width:1280px){
	aside{margin-top:40px;margin-bottom: 10px;position:relative}
	aside #sidebtn{display:inline-block}
	aside #sidebtn font,aside #sidebtn i{color:#fff}
	aside >ul{position:absolute;overflow:hidden;margin-top:1px;width:100%;height:0;top:0;left:0;z-index:1}
	aside >ul.open{height:auto;border-width:1px;top:50px;background-color:#fff;-webkit-box-shadow:0 5px 20px rgba(0,0,0,0.05);box-shadow:0 5px 20px rgba(0,0,0,0.05);z-index:10}
	aside >ul >li{position:relative}
	aside >ul >li:not(:first-child){border-top:1px solid #ccc}
	aside >ul >li h4 a{position:relative;display:block;padding:16px 15px;font-size:15px;color: #686868;letter-spacing:0.7pt;text-align:left}
	aside >ul >li ul.subUL{overflow:hidden;width:100%;height:0;background:var(--secondary);top:0;left:0}
	aside >ul.open >li[data-type="2"] >ul{position:relative;height:auto;top:auto;bottom:0;opacity:1}
	.bannerText em{font-size: 34px;}
	.bannerArea .Txt p::before{height: 40px;margin: 5px auto;}
	.bread{top:45%}
	.bannerArea .Txt{top:63%;width: 80%;}
	#product_list li{display:flex;flex-direction:column;padding:30px 0}
	#product_list li .img_box{width:100%}
	#product_list .info_box{width:calc(100% - 0px);padding-left:0px;padding-top:20px}
	#content_wrap {padding: 20px 10px 40px;}

}
@media (max-width:1180px){
	#news_list li .plus{display:none}
	#news_list li .info_box{width: calc(100% - 110px);}
	#news_list li img{height:280px}
	#news_list li{width: calc((100% / 2) - 60px);padding-left: 30px;}
}
@media screen and (max-width:1024px){
	#article_list img{height:35vw}
	.form_box{display:flex;flex-direction:column}
	.form_box .description_box,#form1{width:100%}
	#product_list{display:flex;flex-wrap:wrap}
	#news_list li{
    width: calc((100% / 1) - 60px);
}
	#news_list li .info_box {
    width: calc(100% - 90px);
}
	#news_list li .indexLine{
    top: 0px;
}
}
@media screen and (max-width:761px){
	#product_list{margin:auto}
	#product_list .info_box >div{}
	#product_list .infoTxt .text{font-size:15px;line-height:1.8;margin-bottom:20px}
	#product_list .info_box article{padding:10px 20px 20px 20px;margin-top:30px}
	#book_list .row img{height:350px}
	#product_list .infoTxt .itemTxt .tit span{font-size:14px}
}
@media screen and (max-width:640px){
	aside{width:100%}
	#album_list{-moz-column-count:2;-webkit-column-count:2;column-count:2}
	.form_box input#Checknum{width:calc(100% - 90px)}
	#news_list li{width:calc((100% / 1 ) - 30px);padding-left: 0px;}
	#content_wrap{padding: 20px 10px 80px;}
    #sub_banner img{height: 100vw;}
    #sub_banner {height: 100vw;}
    .bannerText .pag_tit{font-size:18px;}
    .bannerText em{font-size:32px;}
    .bannerArea .Txt p::before{height: 30px;}
}
@media screen and (max-width:500px){
	#product_list{width:100%}
	#product_list li .img_box p{ font-size: 3.3vmax; }
}