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

/* header */
header{background: #ece9de;padding: 19px 5vw;}

/* sub_banner */
#sub_banner {top: 100px;z-index: 10;height: 180px;display: none;}
#sub_banner .banner_img { z-index: 2; display: none; }
#sub_banner .banner_tit { width: 100%; height: 100%; z-index: 3; position: relative; top: 90px; }
#sub_banner .banner_tit .workframe { min-height: calc(100% - 10vmax); display: flex; align-items: center; position: relative; justify-content: center; }
#sub_banner .banner_tit .other_txt { font-size: 72px; -webkit-transform: rotate(-11deg) translate(120%, .1em); transform: rotate(-11deg) translate(120%, .1em); }
#sub_banner .banner_tit h2 { border-bottom: 1px #2f3e47 solid; line-height: 1; letter-spacing: .2rem; font-weight: 300; font-size: 55px; color: #2f3e47; text-transform: uppercase; }
#sub_banner .banner_tit h3 { font-size: 23px; letter-spacing: 0.2rem; font-weight: 400; color: #2f3e47; margin-top: 0.55rem; }
#sub_banner .top_slogan { text-transform: uppercase; text-align: right; white-space: nowrap; -webkit-text-stroke: 1px #6190aa; text-stroke: 1px #6190aa; line-height: 1; letter-spacing: 2rem; font-size: 12vmax; color: transparent; opacity: .4; -webkit-transform: translate(2vw, .7em); transform: translate(2vw, .7em); pointer-events: none; right: 0; bottom: 0; display: none; }

/* wrap */
#wrap {z-index: 1;background-image: url(/images/00/bg.jpg);background-repeat: repeat;background-position: 50% 50%;background-size: 100%;padding: 5vw 0;}
#wrap .title_box{padding-bottom: 1vw;text-align:center;display: flex;flex-direction: column;align-items: center;}
#wrap .title_box h2{color:#9c8b79;font-size: 17px;font-family: "Lato", sans-serif;letter-spacing: 1px;font-weight: 400;text-transform: uppercase;}
#wrap .title_box h3{font-size: 40px;font-weight: 300;display: inline-flex;align-items: center;justify-content: center;position: relative;}
#wrap .title_box h3:before{content:'';width: 1px;height: 50%;background: #515050;position: absolute;left: -40px;transform: skewX(40deg);}
#wrap .title_box h3:after{content:'';width: 1px;height: 50%;background: #515050;position: absolute;right: -40px;transform: skewX(-40deg);}
#wrap .workframe{display: block;}

/* detail_title */
#detail_title { width: 100%; }
#detail_title h2 {font-size: 35px;color: #2f3e47;margin-bottom: 30px;}

/* waylink */
.waylink {margin: 92px 0 0;background: white;}
.waylink ol{width: 1440px;margin: 0 auto;display: flex;align-items: center;}
.waylink ol li:first-child{background: #c04c36;}
.waylink ol li:first-child a{padding: 15px;}
.waylink ol li:first-child:before{display:none;}
.waylink ol li, .waylink ol li a { font-size: 13px; color: #6d6d6d; }
.waylink ol li:before {margin: 0 15px;display: inline-block;color: #6d6d6d;content: "";width: 8px;height: 8px;border: solid #363636;border-width: 1px 0 0 1px;transform: rotate(-225deg);left: -20px;}
.waylink ol li svg{fill:#fff;width: 22px;height: 22px;}

/* aside */
aside {border-radius: 25px;overflow: hidden;margin-bottom: 5vw;}
aside ul{display:flex;align-items: center;justify-content: center;flex-wrap: wrap;}
aside h4, aside ul li>div { position: relative; }
aside li{margin:0 15px;}
aside li a {padding: 17px 40px;display: block;font-weight: 400;font-size: 17px;color: #2f3e47;background: #fff;border-radius: 50px;box-shadow: 5px 5px 10px rgb(0 0 0 / 10%);margin: 10px 0;}
aside li:last-child a{border:0;}
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; }

/* 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: 2vw;}
#describe * { vertical-align: bottom; }

/* content_wrap */
#content_wrap p.time{font-family: "Lato", sans-serif;font-weight: 400;margin-bottom: 20px;}

/* 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); }

/* news_list */
#news_list li{margin-bottom:40px;}
#news_list li .row{margin: 15px 20px;}
#news_list li .imgbox{position:relative;}
#news_list li .imgbox b{position:absolute;display: flex;flex-direction: column;align-items: center;width: 77px;height: 77px;right: -10px;top: -10px;background: var(--primary);justify-content: center;font-size: 14px;color: #fff;font-family: "Lato", sans-serif;font-weight: 400;}
#news_list li .imgbox b span{display:block;color: #fff;font-size: 27px;line-height: 100%;font-family: "Lato", sans-serif;font-weight: 600;}
#news_list li .info_box{margin: 15px;}
#news_list li .info_box h3{font-size:19px;height: auto;}
#news_list li .info_box .bbox{margin-top:10px;display: flex;flex-wrap: wrap;justify-content: space-between;align-items: center;}
#news_list li .info_box .bbox p{color: #757475;-webkit-line-clamp: 2;font-size: 14px;height: 50px;width: calc(100% - 60px);line-height: 190%;}
#news_list li .info_box .bbox b{width: 50px;height: 50px;display: flex;background: var(--secondary);border-radius: 50px;align-items: center;justify-content: center;}
#news_list li:hover .info_box .bbox b{margin-right:-10px;}
#news_list li .info_box .bbox b svg{fill: #fff;width: 20px;height: 20px;}

/* 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(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 { margin-top: 40px; grid-template-columns: repeat(3, 1fr); grid-gap: 55px 0; }
#product_list li >div {margin: 0 50px;}
#product_list li >div:before{content:url(/images/00/img-head.png);position: absolute;z-index: 1;right: -90%;top: -62%;zoom: 80%;transition: all linear .5s;}
#product_list li:hover >div:before{top: -22%;right: -170px;}
#product_list li img { width: 100%; }
#product_list li .info_box {display: flex;flex-wrap: wrap;justify-content: space-between;align-items: center;}
#product_list li >div >p{display:flex;align-items: center;}
#product_list li >div >p font{margin-left:15px;}
#product_list li article{font-size: 15px;font-weight: 300;line-height:23px;color: #575757;margin: 10px 0 20px;overflow: hidden;height: 45px;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
#product_list li .info_box p {font-weight: 300;font-size: 30px;font-family: "Lato", sans-serif;}
#product_list li .info_box p b{font-size:12px;margin-right: 10px;font-weight: 500;}
#product_list li .info_box h3 {height: auto;font-weight: 500;font-size: 26px;color: #3a4351;}
#product_list li .price_box .price { font-weight: 300; font-size: 15px; color: #222; }
#product_list li .price_box a {font-weight: 500;font-size: 16px;color: #fff;z-index: 6;background: var(--secondary);text-align: center;padding: 10px 0;border-radius: 50px;letter-spacing: 1px;}

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

/* 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: 15px 35px 15px 60px;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%; 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 p label{margin-bottom:10px;}
.form_box input#Checknum {margin-right: 10px;width: 170px;}
.form_box #btnOK {padding: 5px 10px;width: 150px;background-color: #c04c36;color: #fff;border-radius: .2rem;}

/* 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 (max-width: 1680px) {
	#wrap {margin-right: 100px;}
	#wrap .workframe{width:85%;}
}
@media screen and (min-width: 1501px) {
	#wrap:before { width: calc((100% - 1440px) / 2); }
}
@media screen and (max-width: 1500px) {
	.waylink {margin: 88px 0 0;}
	#wrap{margin:0;}
	.waylink ol{width:90%;}
	#wrap .workframe{width:90%;}
	#sub_banner .banner_img img { width: 80vmax; }
	#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: 1280px) {
	#product_list li >div:before{zoom: 65%;}
	#search_list { grid-template-columns: repeat(3, 1fr); }
}
@media screen and (min-width: 1161px) {
	#sub_banner .top_slogan { font-size: 10vmax; }
	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; }
}
@media screen and (min-width: 1025px) {
	#wrap{background-attachment: fixed;}
}
@media screen and (max-width: 1160px) {
	#product_list li >div:before{zoom: 80%;}
	#product_list{grid-template-columns: repeat(2, 1fr);}
	#sub_banner { top: 0; height: 100%; }
	#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: 100%; top: 0; z-index: 3; }
	#sub_banner .banner_tit .workframe { padding: 140px 0 2vw; height: 100%; align-items: center; top: 0; z-index: 3; }
	#sub_banner .banner_tit h2 { font-size: 5.2vmax; }
	#sub_banner .banner_tit .other_txt { font-size: 5.5vmax; }
	#sub_banner .banner_tit h3 { font-size: 2.2vmax; }
	#sub_banner .top_slogan { margin-bottom: -0.3em; }
	aside {margin-top:25px;position: relative;overflow: unset;}
	aside #sidebtn {padding: 15px;width: 95%;background: #ffffff;z-index: 12;border-radius: 50px;box-shadow: 5px 5px 10px rgb(0 0 0 / 10%);margin: 10px auto 0;}
	aside #sidebtn[data-type="2"]{box-shadow:none;}
	aside #sidebtn i {position: absolute;top: 50%;right: 30px;-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;height: 0;left: 0;z-index: 11;-webkit-transform: translateY(-30px);transform: translateY(-30px);display: flex;flex-direction: column;width: 95%;left: 2.5%;border-radius: 25px;}
	aside>ul.open {height: auto;border-width: 1px;-webkit-transform: translateY(5px);transform: translateY(0px);}
	aside ul li {position: relative;border-bottom: 0;width: 100%;margin: 0;}
	aside ul li h4 a {padding: 10px;text-align: center;margin: .5px 0;border-radius: 0;background: var(--light_gary);}
	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: 36px; padding: 5px 0 20px; }
	#detail_title h2:before { left: 0; }
	#detail_title h2:after { -webkit-transform: translateX(0px); transform: translateX(0px); }
}
@media screen and (max-width: 980px) {
	#product_list li >div:before{zoom: 70%;}
	#sub_banner .banner_img img { height: 400px; }
	#product_list {padding: 0;}
	#product_list li >div{margin:0 25px;}
	#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) {
	#news_list li .row{margin:0 }
	#news_list li{margin-bottom: 60px;}
	aside{margin-bottom: 45px;}
	.waylink ol{width:100%;}
	#wrap { padding-top: 50px; }
	#detail_title h2 { font-size: 28px; }
	#wrap .title_box h3{font-size:35px;}
	#faq_list >li .info{padding:15px;font-size: 15px;}
	#contentBox{width:100%;}
}
@media screen and (max-width: 550px) {
	.waylink {margin: 77px 0 0;}
	header{padding:20px 5vw}
	#wrap .workframe { padding: 30px 0 50px; }
	#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; }
}