@import url('/css/icheck/icheck-material-custom.css');
header {background: #e8e5dd;top: 0;box-shadow: 0 0 20px rgb(0 0 0 / 15%);}
header .barBox a svg, #member-function ul li.member a svg, #member-function ul li.pcount a svg{fill: #262626 !important;}
header:not(.open) #menuIcon a font{color:#262626;}
header:not(.open) #menuIcon a font.btn span{background:#262626}


/* sub_banner */
#sub_banner {position: relative;overflow: hidden;background: #E9E5DC;height: 535px;display: flex;justify-content: center;align-items: flex-end;}
#sub_banner .banner_img { z-index: 0; width: 100%; background-color: #000; }
#sub_banner .banner_img img { height: 400px; width: 100%; opacity: .8; object-fit: cover; }
#sub_banner .banner_tit {width: min(90%, 1280px);z-index: 3;margin-bottom: 70px;display: flex;align-items: flex-start;flex-direction: column;gap: 20px;}
#sub_banner .banner_tit .workframe { display: flex; align-items: center; position: relative; justify-content: center; margin-bottom: 2.5%; }
#sub_banner .banner_tit .text_en2 {line-height: 1;letter-spacing: .2rem;font-weight: 400;font-size: 18px;text-transform: capitalize;}
#sub_banner .banner_tit h1 {font-size: 60px;letter-spacing: .7rem;font-weight: 500;margin-top: 15px;line-height: 1;}
#sub_banner .banner_tit p {font-size: 14px;font-weight: 500;margin-top: 40px;line-height: 1;letter-spacing: 1.5px;}
#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;margin: 4vw 0 5vw 0;}
#wrap .workframe {display: flex;gap: 40px 40px;width: min(95%, 1700px);}
#wrap .workframe.all {display: block;width: min(84%, 1700px);}
#wrap .workframe.all #content_wrap { width: 100%; }
/* detail_title */
#detail_title { width: 100%; }
#detail_title h2 { padding-left: 40px; font-size: 38px; color: #2f3e47; }
#detail_title h2:before { position: absolute; width: 30px; height: 4px; background: #6190aa; top: 0; left: 40px; content: ""; }
#detail_title h2:after { position: absolute; width: 100%; height: 1px; background: #2f3e47; bottom: 0; left: 0; -webkit-transform: translateX(360px); transform: translateX(360px); content: ""; }
/* waylink */
.waylink {background: #F1F1F1;}
.waylink ol {width: min(95%, 1280px);margin: 0 auto;display: flex;align-items: center;}
.waylink ol li:first-child a { padding: 15px; display: flex; }
.waylink ol li:first-child:before { display: none; }
.waylink ol li,.waylink ol li a { font-size: 13px; color: #000000; }
.waylink ol li:before { margin: 0 15px; display: inline-block; content: ""; width: 8px; height: 8px; border: solid #8a8a8a; border-width: 1px 0 0 1px; transform: rotate(-225deg); left: -20px; }
.waylink ol li svg {fill: #b9b8b5;width: 19px;height: 19px;}
/* aside */
aside {width: 330px;}
aside >ul {border-left: 2px solid #dfdfde;display: flex;flex-direction: column;justify-content: center;position: relative;}
aside .h4,aside ul li>div { position: relative; }
aside ul li a {font-weight: 400;font-size: 17px;color: #333;line-height: 1.2;letter-spacing: 0.5px;padding: 18px 35px;position: relative;display: flex;align-items: center;}
aside b[data-action="sideOpen"] {position: absolute;height: 100%;width: 50px;display: flex;justify-content: center;align-items: center;top: 0;right: 0;transform: scaleX(-1);}
aside b[data-action="sideOpen"] i::before,aside b[data-action="sideOpen"] i::after { content: ""; position: absolute; width: 14px; height: 1px; background: #747474; top: 50%; left: 50%; transform-origin: left center; transition: all .3s ease; }
/* 左箭頭 ← */
aside b[data-action="sideOpen"] i::before { transform: translate(-50%,-50%) rotate(45deg); }
aside b[data-action="sideOpen"] i::after { transform: translate(-50%,-50%) rotate(-45deg); }
aside b[data-action="sideOpen"] i { transform: translate(-50%,-50%) rotate(0deg); }
aside b[data-action="sideOpen"] i.fa-minus { transform: translate(-50%,-50%) rotate(-90deg); }
aside .action .h4 a {background: #E9E5DC;color: #323232;display: block;}
aside .action .h4 b[data-action="sideOpen"] i:before,aside .action .h4 b[data-action="sideOpen"] i:after { background: #747474; }
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 14px; font-size: 14px; color: #878787; line-height: 1.6; letter-spacing: 0; }
aside>ul>li li a:hover,aside li >ul .subULHead p a:hover {color: var(--thirdly);}
aside li.action>ul { display: block; }
aside li >ul .subULHead p a {font-weight: 400;font-size: 16px;color: #878787;line-height: 1.2;letter-spacing: 0.5px;padding: 14px 0 14px 60px;position: relative;}
/* content_wrap */
#oo { margin-top: 20px; }
#content_wrap {width: calc(100% - 370px);}
#content_wrap h3, #content_wrap .h3, #content_wrap .title { font-size: 22px; margin-bottom: 10px; font-weight: 500; }
/* list_box */
.list_box li { width: auto; margin: 0; }
.list_box li h3 { height: auto; font-weight: 500; font-size: 20px; }
/* describe */
#describe * { vertical-align: bottom; }
/* article_list */
#article_list li {width: 100%;display: grid;grid-template-columns: 1fr 290px;gap: 20px 80px;align-items: center;border-bottom: 1px solid #ddd;padding-bottom: 40px;margin: 0 0 30px 0px}
#article_list li img { aspect-ratio: 4/3; object-fit: contain; }
#article_list li .info_box {   }
#article_list li .info_box .time { display: inline-flex; align-items: center; text-transform: uppercase; margin-bottom: 10px; }
#article_list li .info_box .time span:first-child { color: var(--info); font-family: "Quicksand",sans-serif; line-height: 150%; font-weight: 200; }
#article_list li .info_box .time span.two { font-family: "Quicksand",sans-serif; display: inline-flex; flex-direction: row; line-height: 1.2; font-size: 17px; color: var(--info); margin-left: 5px; }
#article_list li .info_box .time span.two b { font-size: 17px; color: var(--info); font-family: "Quicksand",sans-serif; font-weight: 400; line-height: 1.2; margin-left: 5px; }
#article_list li .info_box h3 { height: auto; font-size: 22px; color: #000000; font-weight: 500; }
#article_list li .info_box p { -webkit-line-clamp: 2; height: auto; line-height: 2; margin-top: 5px; color: #707070; }
#article_list li .info_box .more { font-family: "Quicksand",sans-serif; display: flex; flex-wrap: wrap; align-items: center; position: relative; margin-top: 10px; padding-top: 10px; font-weight: 400; color: var(--dark); font-size: 14px; letter-spacing: 2px; }
#article_list li .info_box .more svg { transform: scaleX(-1); fill: var(--fifth); width: 15px; height: 15px; margin-left: 10px; }
#article_list .info_box { position: relative; }

/* 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(--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 */
.textEditor { margin: 30px 0 }
.textEditor .textdeco { margin: 0 0 20px 0; }
#product_list {grid-template-columns: repeat(3,1fr);}
#product_list li{background: linear-gradient(165.49deg, #D1D0CE 0%, #E3E2E0 12.1%, #F7F6F4 58.66%, #F8F8F6 87.31%);padding: 25px 0;box-shadow: 0 0 0 rgb(38 38 38 / 25%);transition: all linear 0.3s;}
#product_list li:hover{box-shadow: 0 0 30px rgb(38 38 38 / 25%);}
#product_list li img{object-fit: contain;aspect-ratio: 1/1;width: 100%;}
#product_list li .item .track{z-index:11;top: 0px;right: 25px;}
#product_list li .item .track svg{width: 21px;height: 21px;fill: #231815;}
#product_list li .info_box{padding: 10px 25px 0;bottom: 0;display: grid;width: 100%;align-items: center;position: relative;grid-template-columns: 1fr 35%;justify-content: space-between;gap: 10px;}
#product_list li .info_box .h3{font-size:18px;height: auto;margin: 0;}
#product_list li .info_box *{color:#414141;letter-spacing: 2px;}
#product_list li .info_box p{text-align:end;}
/* 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; }
/* book_list */
#book_list {display: grid;grid-template-columns: repeat(3,1fr);gap: 50px 25px;}
#book_list li .h3 { text-align: inherit; height: auto; -webkit-line-clamp: 3; letter-spacing: 1px; margin-bottom: 30px; }
#book_list li .h3 a{font-size:22px;vertical-align: baseline;}
#book_list li p { color: #2a2a2a; overflow: hidden; height: auto; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 16px; letter-spacing: 1px; }
#book_list .row img { width: 100%; aspect-ratio: 4/3; object-fit: cover; object-position: top; }
#book_list .row .info_box {padding: 30px 20px 0;width: calc(100% - 0px);}
/* faq_list */
#faq_list >li >a { padding: 15px 25px; }
#faq_list >li >a font {font-weight: 400;font-size: 1.1rem;color: #605C41;}
#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.current{margin-bottom: 70px;}
#faq_list >li .title {padding: 25px 55px 25px 20px;display: block;position: relative;border-bottom: 2px solid #898482;margin: 0;}
#faq_list >li .title label {width: 40px;font-family: "Lato",sans-serif;font-weight: 400;font-size: 20px;display: none;}
#faq_list >li .title font {width: calc(100% - 80px);}
#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;color: #605C41;border: 0;}
#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); }
/* newpagenav */
#newpagenav{margin-top: 70px;display: grid;grid-template-columns: repeat(2, 1fr);gap: 50px;position: relative;}
#newpagenav:before{content:'';position: absolute;left: 50%;width: 1px;height: 100%;background: #e3e3e3;}
#newpagenav p{margin:0;width: auto;}
#newpagenav a{margin:0;padding: 0;}
#newpagenav p a {margin: 15px 0 0;padding: 0;width: auto;height: auto;line-height: initial;font-size: 0;display: inline-flex;align-items: center;gap: 15px;}
#newpagenav p:last-child {text-align: end;}
#newpagenav i{width: 15px;font: normal normal normal 26px / 1 FontAwesome;}
#newpagenav font{-webkit-line-clamp:2;height: auto;font-size: 17px;max-width: max-content;font-weight: 400;}
#newpagenav a:hover font, #newpagenav a:hover i{color: #8f8c89;}
#newpagenav p:last-child font, #newpagenav p:last-child font span{text-align:end}
#newpagenav span{display:block;font-size: 17px;}
/* search_list */
#search_list { grid-template-columns: repeat(4,1fr); grid-gap: 55px 0; }
#search_list li>div {margin: 0 15px;background: #fff;}
#search_list li img {width: 100%;aspect-ratio: 3/3;object-fit: cover;}
#search_list li .info_box {padding: 5px 35px 10px;}
#search_list li .info_box .h3 {font-weight: 500;font-size: 19px;height: 64px;-webkit-line-clamp: 2;}
#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: 20px;}
.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;border-radius: 15px;}
/* 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; width: 80%; margin: auto; }
#top_title .description_box iframe { filter: grayscale(100%); }
.contact-top { display: grid; grid-template-columns: repeat(2,1fr); gap: 50px 90px; padding: 100px 150px; background: #F8F8F8; margin-top: 40px; }
.contact-top .contact-item h3 { font-size: 22px; font-weight: 700; color: #111; display: flex; align-items: center; margin-bottom: 8px; letter-spacing: 1px; }
.contact-top .contact-item h3::before { content: ""; display: inline-block; width: 4px; height: 22px; background: #111; margin-right: 14px; }
.contact-top .contact-item p { font-size: 18px; line-height: 1.9; color: #666; padding-left: 18px; letter-spacing: 1px; }
.contact-top .contact-item .note { font-size: 18px; color: #525252; font-weight: 400; margin-left: 10px; }
.contact-top .store-btn-wrap {padding-left: 18px;margin-top: 10px;color: #525252;display: flex;align-items: center;gap: 20px;font-size: 18px;letter-spacing: 1px;}
.contact-top .store-btn { display: inline-block; min-width: 120px; line-height: 38px; text-align: center; background: #d9d9d9; color: #222; text-decoration: none; font-size: 18px; letter-spacing: 2px; transition: 0.3s; }
.contact-top .store-btn:hover { background: #c9c9c9; }
.contact-top .contact-social { display: flex; align-items: center; gap: 20px; padding-left: 18px; margin-top: 18px; }
.contact-top .contact-social a { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; color: #555; transition: 0.3s; }
.contact-top .contact-social a:hover { opacity: 0.7; }
.contact-top .contact-social svg { width: 30px; height: 30px; fill: currentColor; }
#contentBox {width: 80%;margin: auto;background: #F8F8F8;margin-top: -8px;padding: 50px 90px;}
#contentBox h3 { line-height: 1.2; margin-bottom: 20px; font-weight: 400; color: #282828; margin-top: 50px; font-size: 26px; text-align: center; letter-spacing: 1px; }
#contentBox .note, #contentBox .note *{color:#8C8C8C;font-size: 18px;margin-right: 3px;}
@media screen and (min-width:1501px) {
  #wrap:before { width: calc((100% - 1440px)/2); }
}
@media screen and (max-width:1500px) {
  header #webmenu { margin-right: 8vw }
  #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:1400px) {
    #product_list{grid-template-columns: repeat(2, 1fr);}
}
@media screen and (max-width:1360px) {
  .waylink ol { width: 90% }
}
@media screen and (max-width:1280px) {
  #search_list { grid-template-columns: repeat(3,1fr); }
}
@media screen and (min-width:1161px) {
  aside #sidebtn { display: none; }
  #sub_banner .top_slogan { font-size: 10vmax; }
  aside .h4:hover a {background: var(--thirdly);color: #fff;}
  aside .h4:hover b[data-action="sideOpen"] i:before,aside .h4:hover b[data-action="sideOpen"] i:after { background: #fff; }
  #article_list li:hover img {   }
  #article_list li:hover .info_box .more { color: var(--primary) }
  #article_list li:hover .info_box .more svg { margin-left: 30px }
}
@media screen and (max-width: 1160px) {
    #top_title .description_box, #contentBox{width:95%}
    .contact-top, #contentBox{padding: 50px 60px;}
    #sub_banner .banner_tit h1{font-size: 45px;}
  aside li >ul .subULHead p a {text-align: center;padding: 14px 10px;display: block;}
  header { grid-template-columns: 130px 1fr; }
  header:before { width: 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 h2 { font-size: 4.2vmax; }
  #sub_banner .banner_tit .other_txt { font-size: 5.5vmax; }
  #sub_banner .banner_tit h3 { font-size: 2.2vmax; margin-top: 5px; }
  #sub_banner .top_slogan { margin-bottom: -0.3em; }
  #wrap .workframe { padding: 0px 0 50px; display: flex; flex-direction: column; align-items: center; gap: 20px 40px; }
  aside {position: relative;padding: 0;width: 300px;margin: 30px auto;top: 0;z-index: 100;}
  aside #sidebtn {padding: 0.6rem 1rem;width: 100%;border: 1px solid #262626;z-index: 12;text-align: left;background: url(/images/00/icon-triangle.png) no-repeat calc(100% - 20px) 50% #fff;border-radius: .5rem;}
  aside #sidebtn i { position: absolute; top: 50%; right: 10px; -webkit-transform: translateY(-40%); transform: translateY(-40%); display: none; }
  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(0px); transform: translateY(0px); padding: 0; }
  aside ul li { position: relative; border-bottom: 0; }
  aside ul li .h4 a {padding: 15px 10px;text-align: center;display: block;}
  aside>ul>li ul.subUL { overflow: hidden; width: 100%; height: 100%; background: var(--light); top: 0; left: 0; margin-left: 0; }
  aside>ul.open>li[data-type="2"]>ul { position: relative; height: auto; top: auto; bottom: 0; opacity: 1; }
  #content_wrap { width: 100%; }
  #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); }
  #article_list li { grid-template-columns: 1fr 220px; }
  #article_list li .info_box h3 { font-size: 20px; margin-bottom: 5px }
  #oo { width: 300px; margin: 10px auto 0; }
  #book_list { grid-template-columns: repeat(2,1fr); }
  #wrap { margin: 30px 0 11vw 0; }
}
@media screen and (max-width:980px) {
  #contentBox,#top_title .description_box { width: 100% }
  #sub_banner .banner_tit .workframe { margin-bottom: 8% }
  #sub_banner .banner_img img { height: 240px; }
  #book_list { display: flex; flex-direction: column; }
  #book_list .row img { height: 400px; }
  #search_list li img { height: 30vw; }
  #product_list li .info_box {padding: 5px 16px 7px;display: flex;flex-direction: column;align-items: center;gap: 0;}
  #product_list li .info_box h3 { font-size: 16px; margin-bottom: 5px; }
}
@media screen and (max-width:768px) {
    .contact-top{grid-template-columns:1fr}
  #search_list { grid-template-columns: repeat(2,1fr); }
  #search_list li img { height: 40vw; }
  .textEditor { margin: 10px 0; }
}
@media screen and (max-width:640px) {
    #faq_list >li .title font{font-size:20px;}
    .contact-top, #contentBox{padding: 40px 30px;}
    #oo{margin-top:-25px;margin-bottom: 30px;}
    #sub_banner{height: 370px;}
    #sub_banner .banner_tit{gap:10px;margin-bottom: 40px;}
    #sub_banner .banner_tit h1{font-size: 32px;letter-spacing: 2px;}
    #sub_banner .banner_tit p{font-size:12px;margin-top: 20px;}
    #sub_banner .banner_tit .text_en2{font-size:15px;letter-spacing: .1rem;}
  #detail_title h2 { font-size: 28px; }
  #article_list li { grid-template-columns: 1fr; }
    .contact-top .contact-item .note{font-size: 13px;}
    .contact-top .contact-item p{font-size:16px}
    .contact-top .contact-item h3{font-size: 18px;}
}
@media screen and (max-width:550px) {
  #product_list li>div { margin: 0; border-radius: 20px; }
  #product_list li .price_box a { display: inline-flex; flex-direction: column; align-content: flex-end; align-items: stretch; gap: 10px; }
  #product_list li .price_box a svg { width: 22px; height: 22px; }
  header { grid-template-columns: 170px 1fr; }
  #banner .banner_tit .more_btn { padding-left: 40px; }
  #book_list .row img { height: 300px; }
  #search_list {padding: 0;grid-template-columns: repeat(1,1fr);grid-gap: 25px 0;margin-top: 15vw;}
  #search_list li img { height: 55vw; }
    #search_list li .info_box .h3{height:auto}
}