@import url('/css/animate.css');@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');
#other_area { display: none; }
.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; }
#describe *,.tab_content * { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; border-width: initial; }
.bannerArea { clear: both; overflow: hidden; z-index: 3; position: relative; overflow: hidden; background-color: #fff; background-position: 0 -63%; background-repeat: no-repeat; }
.bannerArea .Txt { position: absolute; bottom: 0px; left: 0; right: 0; margin: 0 auto; -webkit-transform: translateY(-10%); transform: translateY(-10%); z-index: 11; display: block; padding: 0px 0px 0; letter-spacing: 2px; width: min(1366px,90%); }
.bannerArea .Img {
  position:relative;overflow:hidden;width:100%;
  .bannerArea .Img { padding-left: 115px; }
  ;
}
.bannerArea .Img:before { position: absolute; width: 100%; height: 100vh; background: linear-gradient(to top,rgb(0 0 0/0%) 50%,#082138 100%); background-size: cover; top: 0; left: 0; z-index: 11; content: ""; opacity: .7 }
.bannerArea .c-circleSvg { position: absolute; right: calc(-1600px/2 + 200px); bottom: calc(-1500px/2); width: 700px; height: 700px; z-index: 10; animation: circleAnime_1 20s linear 0s infinite; display: none; }
@keyframes circleAnime_1 {
  0% { transform: translate(-50%,-50%) rotate(0deg) }
  100% { transform: translate(-50%,-50%) rotate(360deg) }
}
.bannerArea .c-circleSvg svg { width: 100%; height: 100% }
.bannerArea .c-circleSvg svg path { fill: none; stroke: #eee; stroke-miterlimit: 10; stroke-width: 1 }
.bannerArea .bannerBox .Img { max-height: 670px }
.bannerText { position: relative; display: flex; flex-direction: column; align-items: center; }
.bannerText .pag_tit { color: #ffffff; position: relative; line-height: 1.31; letter-spacing: 0px; text-align: center; font-size: 1.8rem; font-weight: 500; font-family: 'Sora',sans-serif; }
.bannerText .pag_tit:after { content: ""; width: 30px; height: 2px; background: #ffffff; display: block; margin: auto; margin-top: 20px; opacity: .8; }
.bannerText em { color: var(--secondary); font-style: inherit; position: relative; font-weight: 700; font-size: 68px; letter-spacing: 1px; line-height: 110%; font-family: "Sora",sans-serif; text-transform: uppercase; text-align: center; display: none; }
.bread { margin: 0 auto }
footer { padding: 60px 0 30px 0; margin-top: 0 }
/* sub_banner */
#sub_banner { width: 100%; height: 440px; }
#sub_banner:before { content: ''; position: absolute; width: 100%; height: 100%; background: rgb(14 14 14/60%); bottom: 0; left: 0; z-index: 1; opacity: .4; }
#sub_banner a { height: 100%; background: no-repeat 50%/cover; background-size: cover; background-position: 0% 50%; }
/* wrap */
#wrap { z-index: 12; background: #fcfcfc; }
/* top_title */
#top_title .pag_tit { line-height: 120%; font-weight: 400; letter-spacing: 5px }
#top_title .pag_tit::first-letter { color: var(--primary) }
#top_title .newsDate { padding: 8px 0; font-size: 12px; color: #818181; letter-spacing: 1px; text-transform: uppercase; max-width: 1000px; margin: 0 auto; }
#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: 'Sora',sans-serif; }
#top_title .classTitle { position: relative; display: inline-block; padding: 3px 5px; margin-left: 20px; margin-right: 5px; font-weight: 500; font-size: 14px; background-color: #e4e4e4; color: #000000; font-family: 'Sora',sans-serif; }
#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: 600; font-size: 22px; margin-bottom: 20px; padding: 10px 0; letter-spacing: 0 }
/* waylink */
.waylink { margin-top: 60px; }
.waylink ol { padding: 0px 0 10px 0 }
.waylink ol li,.waylink ol li a { letter-spacing: .5px; font-weight: 300; font-size: .8rem; position: relative; color: #fff; font-family: 'Sora',sans-serif; display: inline-flex; align-items: center; }
.waylink ol li:after { content: "-"; z-index: 1; display: block; margin: 0 10px; }
.waylink ol li:last-child:after { display: none; }
/* aside 
aside{position: relative; }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% - 0px); z-index: 2; background: var(--white); padding: 10px 25px; border: 1px solid #d2d2d2; }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 font{color: var(--triadic2); }aside #sidebtn i{top: calc((100% - 16px)/2); right: 20px; color: var(--triadic2); }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 .btnBox a{padding: 20px; font-weight: 400; font-size: 1rem; }aside >ul >li.action .btnBox a{color: var(--info); }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: 10px 10px; display: block; background-color: #ffffff; text-align: center; }aside >ul >li ul.subUL li [data-action="sideOpen"]{display: none; }aside >ul >li ul.sub2UL li a{color: #888; }aside >ul >li ul.subUL li:hover a{background-color: var(--secondary); color: #fff; }
 *//* content_wrap */
#wrap .workframe #content_wrap * { vertical-align: initial; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
#content_wrap { padding: 70px 0px; }
#content_wrap .page_subject { position: relative; margin-bottom: 50px; padding-top: 30px; border-bottom: 1px solid #d3d3d3; display: flex; justify-content: flex-end; flex-wrap: wrap; display: none; }
#content_wrap .page_subject .pag_tit { line-height: 170%; letter-spacing: 1px; position: relative; font-size: 1.8rem; font-weight: 600; display: none; }
#wrap .workframe { width: min(1366px,90%); }
/* list_box */
.list_box li { position: relative; width: 100%; }
.list_box li h3 {
  height:auto;-webkit-box-orient:vertical;-webkit-line-clamp:2;margin:0;margin-bottom:12px;/* border-bottom:1px solid #c2c2c2;*/
  font-size:24px;font-weight:400;letter-spacing:1px;color:#202020;
}
/* describe */
#describe { margin: 6vw 0; }
/* article_list */
#article_list { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px 20px }
#article_list img { height: 280px }
#article_list .info_box { padding: 40px 30px; background: #f3f3f3 }
#article_list .info_box h2 { font-size: 18px; letter-spacing: .5px; height: auto; font-family: 'Sora',sans-serif; }
#article_list .info_box p { font-weight: 300; }
#article_list .info_box .more { height: 60px; width: 170px; margin: auto; display: block; border-top-left-radius: 50px; border-bottom-right-radius: 50px; border-bottom-left-radius: 50px; border-top-right-radius: 50px; background-color: #ffffff; color: var(--primary); display: flex; align-items: center; justify-content: center; position: relative; padding: 25px 30px 25px 10px; margin-top: 20px; font-family: 'Sora',sans-serif; font-size: 12px; font-weight: 600; }
#article_list .info_box .more:before { position: absolute; content: ""; width: 8px; height: 8px; background-color: var(--complement); border-radius: 50%; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); right: 15px; }
/* product_list */
#product_list .info_box { display: flex; align-items: flex-start; justify-content: space-between; flex-direction: column; gap: 5px; margin-top: 8px; width: 100%; }
#product_list .info_box .h3 { font-size: 18px; letter-spacing: .1px; height: 61px; color: var(--info); font-family: 'Sora',sans-serif; font-weight: 500; -webkit-line-clamp: 2; }
#product_list li:hover .info_box .h3 { color: var(--primary) }
#product_list .info_box p { font-family: 'Sora',sans-serif; font-size: 12px; font-weight: 300; color: var(--triadic1); }
#product_list .info_box .more { height: 60px; width: 170px; margin: 0; display: block; border-top-left-radius: 50px; border-bottom-right-radius: 50px; border-bottom-left-radius: 50px; border-top-right-radius: 50px; background-color: var(--primary); color: var(--white); display: flex; align-items: center; justify-content: center; position: relative; padding: 25px 30px 25px 10px; font-family: "Poppins",sans-serif; }
#product_list li:hover .info_box .more { background: var(--secondary) }
#product_list .info_box .more:before { position: absolute; content: ""; width: 8px; height: 8px; background-color: var(--white); border-radius: 50%; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); right: 20px; }
/* news_list */
#news_list { display: grid; grid-template-columns: repeat(3,1fr); gap: 30px 20px }
#news_list li { background-color: #f8f8f8; }
#news_list li img { height: 250px; }
#news_list .newsTxt { background-color: #f8f8f8; padding: 10px 20px; }
#news_list .newsInfoBox { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-bottom: 20px; margin-bottom: 22px; border-bottom: 1px solid #c2c2c2; }
#news_list .newsInfoBox .tagBox { padding: 0 }
#news_list .newsInfoBox .dateBox { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center }
#news_list .newsInfoBox .dateBox .classTitle { font-size: 15px; color: #888888; -ms-flex-item-align: end; align-self: flex-end; margin-bottom: 9px; letter-spacing: 1.2px; font-family: 'Sora',sans-serif; margin-left: 20px; }
#news_list .newsInfoBox .dateBox .day { font-size: 40px; color: #555555; line-height: 56px; font-weight: bold; margin-right: 13px; font-family: 'Sora',sans-serif; }
#news_list .newsInfoBox .dateBox .month,.newsInfoBox .dateBox .year { line-height: 1.2; font-size: 15px; font-weight: 600; color: #555555; white-space: nowrap }
#news_list .newsInfoBox .dateBox .month .slash,.newsInfoBox .dateBox .year .slash { margin-left: 5px; margin-right: 5px }
#news_list .newsInfoBox .dateBox .year { font-size: 14px; letter-spacing: 1px; font-family: 'Sora',sans-serif; }
#news_list .newsInfoBox .tagBox { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center }
#news_list .newsInfoBox .tagBox .tagList { display: -webkit-box; display: -ms-flexbox; display: flex }
#news_list .newsInfoBox .tagBox .sdgImgBox { border-radius: 99px; overflow: hidden; margin: 0 2px; margin-bottom: 0; display: -webkit-box; display: -ms-flexbox; display: flex }
#news_list .newsInfoBox .tagBox .sdgImg { width: 56px; height: 56px }
#news_list li .info_box { padding: 15px; width: calc(100% - 90px); 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: #00a0e9; 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 { color: #343434; -webkit-line-clamp: 2; height: auto; line-height: 36px; letter-spacing: .5px; font-weight: 600; font-size: 20px; margin-bottom: 20px; }
#news_list li .text { -webkit-line-clamp: 3; height: 83px }
#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: #616161; -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 .time { font-weight: 300; line-height: 120%; margin: 10px 0 }
#news_list li .more { margin: 10px 0; padding-top: 10px; display: flex; align-items: center; }
#news_list li .more font { font-size: 12px; position: relative; writing-mode: inherit; color: #737373; font-weight: 600; letter-spacing: 1px; text-align: center; font-family: 'Sora',sans-serif; }
#news_list li .more svg { margin-left: 10px; width: 13px; height: 12px; fill: #b0b0b0; }
/* product_list */
#product_list { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px 30px; align-items: start; }
#product_list li { width: auto }
#product_list li .img_cover { width: 100%; aspect-ratio: 1/1; object-fit: cover; border: 2px solid #ededed; }
#product_list li:hover .img_cover { border-color: var(--primary) }
#product_list li a.txt_clamp { width: 100%; height: 100%; left: 0; top: 0; z-index: 10 }
#product_list .info_box h2 { height: auto; -webkit-line-clamp: 1; font-size: 18px; font-weight: 400; letter-spacing: 0; }
#product_list .info_box .number { margin: 20px 0; color: #65686e; font-size: 14px }
#product_list .textBox { display: grid; grid-template-columns: 1fr 60px; gap: 20px 20px; align-items: center }
#product_list .info_box .classTitle { color: var(--primary) }
#product_list .info_box .btn { padding: 0 }
#product_list .info_box .btn a { position: relative; overflow: hidden; width: 90px; padding: 12px 40px; display: inline-block; border-radius: 100px; text-align: center; }
#product_list .info_box .btn span { font-size: 14px; position: relative; writing-mode: inherit; color: #fff; font-weight: 400; letter-spacing: 1px; text-align: center; width: 15px; height: 15px; background-color: var(--secondary); display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 150px; padding: 15px; }
#product_list .info_box .btn span::after { content: ""; position: absolute; top: calc(50% - 5px); right: 20px; width: 10px; height: 10px; border-top: 2px solid #fff; border-right: 2px solid  #fff; transform: rotate(45deg) }
#product_list .info_box .btnn a:before { content: ""; height: 100%; width: 100%; display: block; position: absolute; bottom: 0; left: 0; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; background: var(--triadic2); }
.producbox table { margin: 15px 0; width: 100%; border-collapse: collapse }
.producbox td,.producbox th { padding: 10px; border: 1px solid #d2d3d5; }
/* book_list */
#book_list { display: grid; grid-template-columns: repeat(3,1fr); gap: 60px; }
#book_list li .bookItem .img_scale img { width: 100%; aspect-ratio: 4/3.5; object-fit: cover }
#book_list li .bookItem .info_box { width: 100% }
#book_list li .bookItem .info_box .h3title { font-size: 20px; height: auto; margin: 20px 0 10px 0; border-bottom: 1px solid #b9b9b9; padding-bottom: 8px; font-weight: 600; line-height: 190% }
#book_list li .bookItem .info_box .text { -webkit-line-clamp: 2; height: auto }
/* album_list */
#album_list { margin-bottom: 2vw; -moz-column-count: 4; -moz-column-gap: 15px; -webkit-column-count: 4; -webkit-column-gap: 15px; column-count: 4; column-gap: 15px; grid-gap: 15px; display: grid; grid-template-columns: repeat(4,1fr); }
#album_list >div .d_block { width: 100%; height: 350px; overflow: hidden; display: flex; flex-direction: column }
#album_list >div .d_block img { width: 100%; height: 250px; object-fit: contain; object-position: revert; background: #fff; }
#album_list >div .d_block .imgTxt { font-size: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 500; padding: 15px 15px; background-image: url(/images/39/img-s-t-bg.png); height: 50px; }
/* faq_list */
#faq_list { display: grid; grid-template-columns: repeat(3,1fr); gap: 50px; }
#faq_list li { background: #f3f3f3; padding-bottom: 20px; }
#faq_list li img { aspect-ratio: 4/3; object-fit: cover; }
#faq_list li .img { margin-bottom: 10px; }
#faq_list li h2 { font-size: 1.3rem; letter-spacing: 1px; height: auto; display: flex; flex-direction: column; align-items: center; }
#faq_list li h2 b { display: block; font-weight: 600; letter-spacing: 0; font-family: "Sora",sans-serif; font-size: 1.3rem; }
#faq_list li .more { height: 60px; width: 170px; margin: auto; display: block; border-top-left-radius: 50px; border-bottom-right-radius: 50px; border-bottom-left-radius: 50px; border-top-right-radius: 50px; background-color: #ffffff; color: var(--primary); display: flex; align-items: center; justify-content: center; position: relative; padding: 25px 30px 25px 10px; margin-top: 20px; font-family: "Poppins",sans-serif; }
#faq_list li .more:before { position: absolute; content: ""; width: 8px; height: 8px; background-color: var(--complement); border-radius: 50%; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); right: 15px; }
/* 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: flex; align-items: center; }
#pagenav a[class^="page-"] font { width: calc(100% - 22px); display: inline-block; vertical-align: text-top; font-family: 'Sora',sans-serif; font-size: 13px; font-weight: 600; }
#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; }
.bookinfo { position: relative }
.bookinfo .back { margin-top: 0px; text-align: center; display: flex; align-items: center; justify-content: center; position: relative }
.bookinfo a.atag_item { position: absolute; top: 0; right: 0; width: 100%; height: 100% }
.bookinfo .back a { position: relative; overflow: hidden; width: 180px; padding: 10px 30px; display: inline-block; display: flex; align-items: center; justify-content: center; }
.bookinfo .back font { text-align: left; font-weight: 500; text-transform: uppercase; letter-spacing: 3px; color: #4f3c30 }
.bookinfo .back font { letter-spacing: 1px; font-size: 12px; position: relative; -webkit-writing-mode: inherit; -ms-writing-mode: inherit; writing-mode: inherit; color: #fff; margin-left: 30px; }
.bookinfo .back a:before { content: ""; height: 100%; width: 0; display: block; position: absolute; bottom: 0; left: -22px; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; background-color: var(--primary); -webkit-transform: skewX(-30deg); -ms-transform: skewX(-30deg); transform: skewX(-30deg) }
.bookinfo .back a::after { content: ''; position: absolute; height: 100%; width: 100%; top: 0; left: 0; background-color: #6d6d6d; -webkit-transform: skewX(-30deg); -ms-transform: skewX(-30deg); transform: skewX(-30deg); z-index: -1; transform-origin: top left; transition: all 1.1s ease-in-out; -webkit-transition: all 1.1s ease-in-out }
.bookinfo .back a:hover font { color: #eefaff }
.bookinfo:hover a:before { width: 100% }
.bookinfo .back a svg { display: block; text-align: center; color: #ffffff; width: 18px; height: 18px; fill: #fff; z-index: 10; }
/* form_box */
.form_box { display: flex; flex-wrap: wrap; justify-content: center; flex-direction: row-reverse }
#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(--complement); 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);}
.form_box >p:last-child{text-align:center;}
.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: 150px;}
.form_box #btnOK {padding: 9px 10px;width: 250px;color: #fff;border-radius: 50px;}
input,textarea {padding: 10px 10px;background-color: #f6f8fa;width: 100%;}
.form_box input, .form_box textarea { border: 0; border-radius: 50px; background: #efefef; }
.form_box textarea {border-radius:30px;}
.form_box input#Url { width: auto; padding: 0; border: initial; border-bottom: none; background: initial; box-shadow: none; font-size: initial; -webkit-appearance: radio; -moz-appearance: auto; appearance: auto; margin-right: 8px; vertical-align: middle; }
/* 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:1660px) {
  .bannerArea .Txt,#wrap .workframe { width: min(1140px,90%); }
}
@media screen and (max-width:1360px) {
  .bannerArea .Txt,#wrap .workframe { width: min(1080px,90%); }
}
@media screen and (min-width:1281px) {
  #product_list li:hover .info_box .line { width: 100% }
  #news_list li:hover .info_box { bottom: 30px }
  #news_list li:hover::before { -webkit-transform: translate(-20px,20px); transform: translate(-20px,20px); opacity: 1 }
  #news_list li:hover .plus { right: 40px }
}
@media screen and (min-width:981px) {
  #sidebtn { display: none; }
  aside .btnBox { margin-top: 0 }
  aside >ul { gap: 0 7px; display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; width: 100%; }
  aside >ul >li { position: relative; display: block; overflow: hidden; width: 100%; padding: 10px 0; }
  aside >ul >li a { padding: 11px 20px; display: block; border: 0; }
  aside >ul >li.action:after { content: ""; position: absolute; display: block; width: 100%; height: 2px; background-color: var(--complement); bottom: 0; left: 0 }
  aside >ul >li .btnBox a { border-radius: 99px; -webkit-box-pack: center; -webkit-box-align: center; padding: 16px 10px; color: var(--info); letter-spacing: 1px; text-align: center }
  aside >ul li b[data-action="sideOpen"] { display: none; }
  aside >ul { overflow: visible; }
  aside >ul >li:hover { overflow: visible; position: relative }
  aside >ul >li:hover .h4 a,aside >ul >li.action .btnBox a { color: var(--complement); }
  aside >ul >li:hover ul.subUL { opacity: 1 }
  aside >ul >li ul.sub2UL li:hover a { color: var(--primary) }
}
@media screen and (max-width:1280px) {
  .bannerArea .Img { margin-top: 0; transform: unset; width: 100%; }
  .bannerArea:after,.bannerArea .Img:after { display: none; }
  .newscategory_nav aside >ul { gap: 10px; display: flex; align-items: center; justify-content: center; height: auto; background: rgb(255 255 255/0%); position: relative; padding: 20px 0 10px; }
  .newscategory_nav aside >ul >li { position: relative; display: inline-block; }
  .newscategory_nav aside >ul >li:not(:first-child) { border-top: 0px solid #ccc; }
  .newscategory_nav aside >ul >li .btnBox a { border-radius: 99px; -webkit-box-pack: center; -webkit-box-align: center; padding: 10px 15px; background-color: #f0f0f0; letter-spacing: 1px; color: var(--primary); text-align: center; font-size: 15px; }
  .newscategory_nav aside >ul li b[data-action="sideOpen"] { display: none }
  .newscategory_nav aside >ul >li:hover { overflow: visible; position: relative }
  .newscategory_nav aside >ul >li:hover .h4 a,aside >ul >li.action .btnBox a { color: var(--white); background-color: var(--secondary); }
  .workframe { width: 75%; }
  .bannerText .pag_tit { font-size: 1.2rem; padding-top: 10px; }
  .bannerText em { font-size: 3rem; }
  .bannerText .pag_tit:after { margin-top: 10px; }
  .bannerArea .Txt { top: 51%; padding: 0; }
  .waylink { margin-top: 30px; }
  .bread { top: 45% }
  #sub_banner { height: 340px; transform: unset; }
  #album_list,#article_list { grid-template-columns: repeat(2,1fr) }
  #content_wrap .page_subject { padding-bottom: 10px; margin-bottom: 2rem; display: flex; flex-direction: column-reverse; gap: 20px; padding-top: 0; }
  #content_wrap .page_subject .pag_tit { font-size: 22px; }
}
@media (max-width:1180px) {
  #news_list li .plus { display: none }
  #news_list li .info_box { width: calc(100% - 20px) }
  #news_list li img { height: 220px; }
  #news_list,#book_list { grid-template-columns: repeat(2,1fr); }
}
@media screen and (max-width:1024px) {
  .form_box { display: flex; flex-direction: column }
  .form_box .description_box,#form1 { width: 100% }
  #article_list img { height: 35vw }
  #product_list { display: flex; flex-wrap: wrap }
  #product_list li { width: calc((100%/2 ) - 30px); display: flex; flex-direction: column; align-items: flex-start }
}
@media screen and (max-width:980px) {
  aside { position: relative; }
  aside .btnBox { margin-top: 0; }
  aside #sidebtn { display: inline-block; padding: 8px 0; width: 100%; }
  aside #sidebtn font { color: white; font-family: 'Sora',sans-serif; }
  aside >ul { position: absolute; overflow: hidden; margin-top: 1px; width: 100%; height: 0; top: 0; left: 0; z-index: 1; background-color: var(--white); }
  aside >ul.open { height: auto; border-width: 1px; top: 50px; 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); z-index: 10 }
  aside >ul >li { position: relative }
  aside >ul >li a { padding: 10px 20px; display: block; }
  aside >ul >li b { display: none; }
  aside >ul >li .btnBox a { padding: 10px 15px; }
  aside >ul.open >li[data-type="2"] >ul { position: relative; height: auto; top: auto; bottom: 0; opacity: 1 }
  #faq_list { grid-template-columns: repeat(2,1fr); }
}
@media screen and (max-width:761px) {
  #product_list { margin: auto; }
  #product_list .info_box article { height: 50px; -webkit-line-clamp: 2; }
  #content_wrap .page_subject .pag_tit:before { content: ""; width: 30px; height: 1px; background-color: var(--primary); position: absolute; bottom: -10px; left: 0; z-index: 1 }
}
@media screen and (max-width:640px) {
  .bannerText em { font-size: 32px; }
  #faq_list,#book_list { grid-template-columns: 1fr; }
  .waylink { margin-top: 20px; }
  aside { width: 100% }
  .bannerArea .Img { padding-left: 0; }
  .bannerArea .c-circleSvg { display: none; }
  .form_box input#Checknum { width: calc(100% - 90px) }
  #album_list { -moz-column-count: 2; -webkit-column-count: 2; column-count: 2; margin-bottom: 8vw; }
  #news_list,#article_list { grid-template-columns: 1fr }
  #news_list li { margin-top: 0; margin-bottom: 0 }
  #sub_banner { height: 280px; }
  #about_area .img_item { width: 80vw; height: 50vw }
  #product_list li { width: calc((100%/1 ) - 20px); }
  #wrap:before { width: 3.5vw }
  #pagenav { padding: 20px 0 20px; }
}
@media screen and (max-width:540px) {
  #product_list .info_box { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; }
  .waylink { margin-top: 20px; }
  .waylink ol { padding: 0px 0 10px }
  .bannerArea .Txt { top: 45%; display: flex; flex-direction: column; justify-content: flex-end; }
  #product_list { width: 100%; }
  #product_list li { width: 100%; }
  #album_list { grid-template-columns: repeat(1,1fr) }
  #album_list >div .d_block { height: 300px }
  #album_list >div .d_block img { height: 200px }
}