@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;z-index:3;position: relative;overflow: hidden;}
.bannerArea::before{position:absolute;width:100%;height: 50%;background: linear-gradient(to top, rgb(255 255 255 / 0%) 10%, #ffffff 100%);top:0;left:0;z-index: 3;content:"";opacity: 1;}
.bannerArea::after{position:absolute;width:100%;height: 30%;background: linear-gradient(to bottom, rgb(0 0 0 / 0%) 0%,  #fdf4f2 100%);bottom: 0;left:0;z-index: 1;content:"";}

.bannerArea .Txt{position:absolute;bottom: 0px;left:0;right:0;margin:0 auto;z-index:11;display:block;padding:0px 0px 0;letter-spacing:2px;width: min(1366px, 90%);}
.bannerArea .Img{position: relative;overflow: hidden;width: 100%;opacity: .88;.bannerArea .Img{padding-left: 115px;};}
.bannerArea .Img:before{position:absolute;width:100%;height: 100%;background: linear-gradient(to top, rgb(0 0 0 / 0%) 50%, #ffffff 100%);background-size: cover;top:0;left:0;z-index: 11;content:"";opacity:.7}

.bannerArea .c-circleSvg{position:absolute;left: calc(-1600px / 2 + 910px);bottom: calc(-1470px / 2);width: 700px;height: 700px;z-index:10;animation:circleAnime_1 20s linear 0s infinite;}
@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: 4px;text-align: center;font-size: 1.4rem;font-weight: 500;margin-top: 20px;text-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);}
.bannerText .pag_tit:before{content:"";width: 50px;height: 1px;background: #ffffff;display:block;margin: auto;margin-bottom: 12px;opacity: 1;}
.bannerText em{position:relative;text-transform: uppercase;text-align: center;font-family: 'Cormorant Garamond', serif;font-size: 4.2rem;font-weight: 400;letter-spacing: 1px;line-height: 1;text-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);color: var(--white);font-style: italic;}
.bread{margin:0 auto}
footer{padding:60px 0 30px 0;margin-top:0}

/* sub_banner */
#sub_banner {width: 110%;height: 500px;}
#sub_banner a {height: 100%;background: no-repeat 50% / cover;background-size: cover;background-position: 0% 60%;}

/* wrap */
#wrap {z-index: 10;#serve_area: :after{content:"";width: 40%;height: 80%;position:absolute;top: 10%;right:0;background: #ffffff;background-size:cover;background-position:top;background-repeat:no-repeat;display:block;background-color: rgba(var(--white-rgb), 0.9);backdrop-filter: blur(15px);border-radius: 60px;box-shadow: 0 20px 40px rgba(var(--info-rgb), 0.05);border: 1px solid var(--white);};background: linear-gradient(135deg, #fdf4f2 0%, #fdf4f2 10%, var(--triadic2) 100%);}
#wrap::after{content:"";width: 100%;height: 100%;position:absolute;top: 0;right:0;background: url(/images/39/BG_01.png);background-size:cover;background-position: 50% 0%;display:block;z-index: -1;}

/* 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: 10px 0 10px 0;font-size:12px;color:#818181;letter-spacing:1px;text-transform:uppercase;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;}
#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: #ffffff;color: #000000;}
#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: 90px;}
.waylink ol{padding:0px 0 10px 0}
.waylink ol li,.waylink ol li a{letter-spacing:1.5px;font-weight:300;font-size:.9rem;position:relative;}
.waylink ol li+li{padding-left:25px}
.waylink ol li:after{content:"";width:1px;height:12px;background-color: var(--info);position:absolute;top: 8px;left:45px;z-index:1}
.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(--info);}
aside #sidebtn i {top: calc((100% - 16px) / 2);right: 20px;color: var(--info);}
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: 500;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: inherit;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;}
#content_wrap {padding: 80px 0px 70px;}
#content_wrap .page_subject{position:relative;margin-bottom: 60px;display: flex;justify-content: center;flex-wrap: wrap;}
#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%);z-index: 20;position: relative;}

#CategoryDesc{margin-bottom:40px;}

/* list_box */
.list_box li {position: relative;width: 100%;border-radius: 40px;overflow: hidden;background: #ffffff;padding: 40px 30px;}
.list_box li h3 {height: auto;-webkit-box-orient: vertical;-webkit-line-clamp: 2;margin: 0;margin-bottom: 12px;font-size: 18px;font-weight: 400;letter-spacing: 1px;color: #202020;}

/* describe */
#describe {margin-bottom: 2vw;}

/* article_list */
#article_list{display:grid;grid-template-columns:repeat(4,1fr);gap:20px 20px}
#article_list img{height:280px}
#article_list .info_box{}
#article_list .info_box h2{font-size:1.3rem;letter-spacing:1px;height:auto}
#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: linear-gradient(90deg,var(--secondary),var(--primary));color: var(--white);display:flex;align-items:center;justify-content:center;position:relative;padding: 25px 30px 25px 10px;margin-top:20px;font-family: "Poppins", sans-serif;}
#article_list .info_box .more:before{position:absolute;content:"";width:8px;height:8px;background-color: #fff;border-radius:50%;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);right: 15px;}

/* product_list */
#product_list .info_box{background: none;display: flex;align-items: flex-start;justify-content: space-between;flex-direction: column;gap: 20px;}
#product_list .info_box h2{font-size:1.3rem;letter-spacing:1px;height:auto}
#product_list .info_box p{font-weight:300;}
#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 40px;}
#news_list li { padding: 0; }
#news_list li .photo { position: relative; margin: 0; overflow: hidden; }
#news_list li .photo img { aspect-ratio: 4/2.8; height: 100%; }
#news_list li .photo:after {content:"";position:absolute;inset:0;height:100%;width:100%;top:0;background:linear-gradient(180deg,rgba(255,255,255,0) 40%,rgba(60,45,33,.16) 100%);pointer-events:none;}
#news_list .newsTxt { background-color: #fff; padding: 30px 40px; }
#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 #e0d7d7;}
#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: 6px;margin-left: 10px;letter-spacing:1.2px}
#news_list .newsInfoBox .dateBox .day{font-size:40px;line-height:56px;font-weight: 500;margin-right:13px;display: block;color: var(--triadic1);font-size: 34px;}
#news_list .newsInfoBox .dateBox .month,.newsInfoBox .dateBox .year{line-height:1.2;font-size:15px;font-weight: 500;white-space:nowrap;display: block;color: var(--triadic1);}
#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}
#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{-webkit-line-clamp: 2;height: auto;margin: 0 0 18px;color: var(--info);font-size: 22px;font-weight: 500;line-height: 1.5;letter-spacing: .08em;transition: all 0.4s linear;}
#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; }
#news_list li .more font { align-items: center; margin-top: 30px; color: var(--triadic1); font-size: 13px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; transition: .4s var(--ease-elegant); }
#news_list li .more svg { margin-left: 10px; width: 18px; height: 13px; fill: var(--triadic1); }
#news_list li:hover .more { transform: translateX(6px); }


/* product_list */
#product_list { display: grid; grid-template-columns: repeat(3,1fr); gap: 34px; margin: 0; padding: 0; }
#product_list li { position: relative; width: 100%; }
#product_list li.img_scale img { aspect-ratio: 4/2.3; object-fit: cover; position: relative; }
#product_list .info_box { width: 100%; padding: 18px 0 0; color: #222; opacity: 1; }
#product_list .info_box h2 { margin: 14px 0 0; font-size: 17px; font-weight: 500; line-height: 1.7; color: #222; text-align: left; letter-spacing: .02em; -webkit-line-clamp: 2; }
#product_list .info_box .more { display: inline-flex; align-items: center; justify-content: flex-start; min-width: 84px; height: 50px; padding: 0 18px; border-radius: 999px; background: linear-gradient(90deg,#efb3a1 0%,#eeb19e 100%); color: #fff; font-size: 14px; font-weight: 500; line-height: 1; letter-spacing: .04em; box-shadow: none; }
#product_list .atag_item { left: 0; top: 0; width: 100%; height: 100%; z-index: 5; }
#product_list li:hover { transform: translateY(-4px); transition: .35s ease; }
#product_list li:hover::before { background: #fff; box-shadow: 0 10px 26px rgba(0,0,0,.18); }

@media (max-width: 1024px) {
	#product_list { gap: 24px; }
	#product_list .info_box h2 { font-size: 16px; }
}
@media (max-width: 768px) {
	#product_list { grid-template-columns: 1fr; gap: 28px; }
	#product_list li {min-height: auto;}
	#product_list .info_box h2 { font-size: 16px; line-height: 1.65; }
}

/* book_list */
#book_list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 34px; margin: 0; padding: 0; list-style: none; }
#book_list li { margin: 0; padding: 0; }
#book_list .bookItem {position:relative;height:100%;overflow:hidden;border-radius:34px;background:linear-gradient(180deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.88) 100%);box-shadow:0 24px 70px rgba(60,45,33,.08),inset 0 0 0 1px rgba(255,255,255,.75);transition:transform .55s var(--ease-elegant),box-shadow .55s var(--ease-elegant);}
#book_list .bookItem:before {content:"";position:absolute;inset:0;background:radial-gradient(circle at top right,rgba(174,209,205,.18),transparent 36%),radial-gradient(circle at bottom left,rgba(240,183,165,.16),transparent 40%);opacity:0;transition:.55s var(--ease-elegant);pointer-events:none;}
#book_list .bookItem:hover { transform: translateY(-10px); }
#book_list .bookItem:hover:before { opacity: 1; }
#book_list .img_scale { position: relative; height: 320px; border-radius: 34px 34px 0 0; overflow: hidden; background: #f5f5f5; }
#book_list .img_scale:before { content: ""; position: absolute; inset: 16px; z-index: 2; border: 1px solid rgba(255,255,255,.5); border-radius: 22px; pointer-events: none; }
#book_list .img_scale:after {content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,0) 45%,rgba(60,45,33,.16) 100%);pointer-events:none;}
#book_list .img_cover { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform 1s cubic-bezier(0.23,1,0.32,1),filter .8s ease; }
#book_list .bookItem:hover .img_cover { transform: scale(1.08); filter: brightness(1.03); }
#book_list .info_box { position: relative; padding: 30px 24px; }
#book_list .info_box:before { content: ""; position: absolute; top: 0; left: 30px; width: 52px; height: 2px; background: linear-gradient(90deg,var(--secondary),var(--primary) ); }
#book_list .h3title { color: var(--info); font-size: 20px; font-weight: 500; line-height: 1.75; letter-spacing: .05em; transition: .4s var(--ease-elegant); height: auto; }
#book_list .bookItem:hover .h3title { color: var(--triadic1); }
#book_list .text { margin-top: 14px; color: rgba(60,45,33,.62); font-size: 15px; line-height: 1.95; letter-spacing: .03em; }
#book_list .atag_item { inset: 0; z-index: 5; border-radius: 34px; }
#book_list .atag_item:focus-visible { outline: 3px solid #d60000; outline-offset: -3px; }
#book_list .txt_clamp { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; }
#book_list .h3title.txt_clamp { -webkit-line-clamp: 2; }
#book_list .text.txt_clamp { -webkit-line-clamp: 3; }
#testimonial_intro_area { padding: 0px 0 40px; }
#testimonial_intro_area .intro_wrap { max-width: 920px; margin: 0 auto; position: relative; }
#testimonial_intro_area .intro_panel { position: relative; padding: 40px 48px; border-radius: 28px; background: linear-gradient(135deg,rgba(253,244,242,.92) 0%,rgba(255,255,255,.98) 42%,rgba(134,190,195,.10) 100%); border: 1px solid rgba(134,190,195,.22); box-shadow: 0 18px 50px rgba(60,45,33,.08); backdrop-filter: blur(3px); overflow: hidden; }
#testimonial_intro_area .intro_panel:before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 5px; background: linear-gradient(90deg,var(--primary) 0%,var(--secondary) 52%,var(--complement) 100%); }
#testimonial_intro_area .intro_panel:after { content: ""; position: absolute; right: -60px; bottom: -60px; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle,rgba(134,190,195,.16) 0%,rgba(134,190,195,0) 72%); pointer-events: none; }
#testimonial_intro_area .intro_panel.is_show { display: block; animation: testimonialIntroFade .55s var(--ease-elegant); }
#testimonial_intro_area .intro_tag { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 10px; color: var(--triadic1); font-size: 13px; font-weight: 500; letter-spacing: .32em; text-transform: uppercase; text-align: center; }
#testimonial_intro_area .intro_tag:before { content: ""; display: block; width: 34px; height: 1px; background: var(--triadic1); }
#testimonial_intro_area h2 { margin: 0 0 14px; color: var(--info); font-size: 30px; font-weight: 500; line-height: 1.35; letter-spacing: .04em; }
#testimonial_intro_area p { margin: 0; font-size: 17px; line-height: 2; color: rgba(60,45,33,.82); letter-spacing: .03em; }

@keyframes testimonialIntroFade {
	0% { opacity: 0; transform: translateY(18px); }
	100% { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1024px) {
	#testimonial_intro_area { padding: 20px 20px 48px; }
	#testimonial_intro_area .intro_panel { padding: 34px 34px; border-radius: 24px; }
	#testimonial_intro_area h2 { font-size: 30px; }
	#testimonial_intro_area p { font-size: 16px; line-height: 1.9; }
}
@media (max-width: 640px) {
	#testimonial_intro_area { padding: 16px 16px 36px; }
	#testimonial_intro_area .intro_panel { padding: 26px 22px; border-radius: 20px; }
	#testimonial_intro_area .intro_tag { margin-bottom: 12px; font-size: 12px; letter-spacing: .14em; }
	#testimonial_intro_area .intro_tag:before { width: 24px; }
	#testimonial_intro_area h2 { margin-bottom: 10px; font-size: 25px; }
	#testimonial_intro_area p { font-size: 15px; line-height: 1.85; }
}


@media screen and (max-width:1100px) {
  #book_list { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px; }
}
@media screen and (max-width:768px) {
  #book_list { grid-template-columns: 1fr; gap: 22px; }
  #book_list .bookItem { border-radius: 26px; }
  #book_list .img_scale { height: 240px; border-radius: 26px 26px 0 0; }
  #book_list .img_scale:before { inset: 12px; border-radius: 16px; }
  #book_list .info_box { padding: 28px 24px 30px; }
  #book_list .info_box:before { left: 24px; width: 42px; }
  #book_list .h3title { font-size: 20px; line-height: 1.7; }
  #book_list .text { font-size: 14px; line-height: 1.9; }
}

/* album_list */
#album_list { margin-bottom: 2vw; -webkit-column-gap: 15px; column-gap: 15px; grid-gap: 15px; display: grid; }
#album_list >div .d_block { width: 100%; height: 100%; overflow: hidden; display: flex; flex-direction: column }
#album_list >div .d_block img { width: 100%; height: 100%; 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; height: 50px; display: none; }

/* 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: "Cormorant Garamond",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(--info); }
#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; }
#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 */
#fertilityContact .form_title { position: relative; z-index: 2; width: 100%; margin: 0 0 34px; text-align: center; }
#fertilityContact .section_en { margin: 0 0 18px; color: var(--triadic1); font-size: 13px; font-weight: 500; letter-spacing: .36em; text-transform: uppercase; text-align: center; }
#fertilityContact .form_title h2 { position: relative; display: inline-block; margin: 0 0 42px; color: var(--info); font-size: clamp(26px,4vw,32px); font-weight: 500; line-height: 1.35; letter-spacing: .08em; text-align: center; }
#fertilityContact .form_title h2:after { content: ""; position: absolute; left: 50%; bottom: -22px; width: 76px; height: 2px; background: linear-gradient(90deg,var(--secondary),var(--primary)); transform: translateX(-50%); }
#fertilityContact .form_title p:last-child { max-width: 720px; margin: 0 auto; color: rgba(60,45,33,.68); font-size: 17px; line-height: 2.1; letter-spacing: .045em; text-align: center; }
#fertilityContact {position: relative;width: 100%;max-width: 1110px;margin: 0 auto;padding: clamp(32px,5vw,64px);border-radius: 36px;background: radial-gradient(circle at 8% 0%,rgb(255 250 248),#ffffff00 34%),radial-gradient(circle at 95% 10%,rgb(196 246 250/32%),transparent 36%),linear-gradient(135deg,rgb(255 255 255/96%),rgba(255,255,255,.98));box-shadow: 0 24px 70px rgba(60,45,33,.1);overflow: visible;font-family: var(--font-family);}
#fertilityContact::before {content: "";position: absolute;inset: 16px;border: 1px solid rgb(170 192 194/35%);border-radius: 28px;pointer-events: none;}
#fertilityContact::after { content: ""; position: absolute; right: -90px; bottom: -90px; width: 240px; height: 240px; border-radius: 50%; background: rgba(240,183,165,.24); filter: blur(40px); pointer-events: none; }
#fertilityContact #form1 { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 14px 24px; margin: 0; }
#fertilityContact #form1 > p { width: calc(50% - 12px); margin: 0; color: rgba(60,45,33,.78); font-size: 16px; line-height: 1.8; letter-spacing: .04em; }
#fertilityContact #form1 > p:nth-child(1),#fertilityContact #form1 > p:nth-child(2),#fertilityContact #form1 > p:has(textarea) { width: 100%; }
#fertilityContact #form1 .note { display: inline-flex; align-items: center; gap: 8px; width: 100%; border-radius: 999px; color: var(--info); font-size: 15px; }
#fertilityContact #form1 .red,#fertilityContact #form1 .txt_primary_5 { color: var(--triadic1) !important; }
#fertilityContact #form1 label { display: block; margin-bottom: 8px; color: var(--info) !important; font-size: 15px; font-weight: 500; line-height: 1.5; letter-spacing: .08em; }
#fertilityContact #form1 input,#fertilityContact #form1 select,#fertilityContact #form1 textarea { width: 100%; min-height: 54px; padding: 13px 18px; border: 1px solid rgba(134,190,195,.45); border-radius: 18px; background: rgba(255,255,255,.9); color: var(--info); font-family: var(--font-family); font-size: 16px; line-height: 1.5; letter-spacing: .03em; box-shadow: 0 10px 28px rgba(60,45,33,.05); outline: none; transition: border-color .35s var(--ease-elegant),box-shadow .35s var(--ease-elegant),background .35s var(--ease-elegant),transform .35s var(--ease-elegant); }
#fertilityContact #form1 p { position: relative; }
#fertilityContact #form1 select { position: relative; z-index: 3; width: 100%; min-height: 54px; padding: 13px 64px 13px 18px; border: 1px solid rgba(134,190,195,.55); border-radius: 18px; background-color: rgba(255,255,255,.95); background-image: linear-gradient(45deg,transparent 50%,var(--primary) 50%),linear-gradient(135deg,var(--primary) 50%,transparent 50%),linear-gradient(to right,rgba(134,190,195,.24),rgba(134,190,195,.24)); background-position: calc(100% - 25px) 50%,calc(100% - 18px) 50%,calc(100% - 52px) 50%; background-size: 7px 7px,7px 7px,1px 26px; background-repeat: no-repeat; color: var(--info); font-family: var(--font-family); font-size: 16px; line-height: 1.5; letter-spacing: .03em; box-shadow: 0 10px 28px rgba(60,45,33,.05); outline: none; appearance: none; -webkit-appearance: none; -moz-appearance: none; transition: border-color .35s var(--ease-elegant),box-shadow .35s var(--ease-elegant),background-color .35s var(--ease-elegant); }
#fertilityContact #form1 select:focus { z-index: 10; border-color: var(--primary); background-color: var(--white); box-shadow: 0 0 0 4px rgba(134,190,195,.18),0 16px 36px rgba(60,45,33,.08); transform: none; }
#fertilityContact #form1 select option { color: var(--info); background: var(--white); font-size: 16px; }
#fertilityContact #form1 textarea { min-height: 150px; resize: vertical; }
#fertilityContact #form1 input:focus,#fertilityContact #form1 textarea:focus { border-color: var(--primary); background: var(--white); box-shadow: 0 0 0 4px rgba(134,190,195,.18),0 16px 36px rgba(60,45,33,.08); transform: translateY(-1px); }
#fertilityContact #form1 select:focus { border-color: var(--primary); background-color: var(--white); box-shadow: 0 0 0 4px rgba(134,190,195,.18),0 16px 36px rgba(60,45,33,.08); transform: none; }
#fertilityContact #form1 input::placeholder,#fertilityContact #form1 textarea::placeholder { color: rgba(60,45,33,.38); }
#fertilityContact #form1 .checknum { width: calc(50% - 12px); }
#fertilityContact #form1 .checknum font { display: flex; align-items: center; gap: 12px; width: 100%; }
#fertilityContact #form1 .checknum input { flex: 1; width: auto; text-align: center; letter-spacing: .18em; text-transform: uppercase; }
#fertilityContact #form1 #rand-img { flex: 0 0 auto; }
#fertilityContact #form1 #rand-img:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(60,45,33,.12); }
#fertilityContact #form1 #btnOK { position: relative; min-width: 180px; height: 56px; padding: 0 38px; border-radius: 999px; background: linear-gradient(135deg,var(--primary),var(--complement)) !important; color: var(--white) !important; font-size: 17px; font-weight: 500; line-height: 56px; letter-spacing: .18em; text-decoration: none; box-shadow: 0 5px 20px rgba(134,190,195,.36); overflow: hidden; transition: transform .35s var(--ease-elegant),box-shadow .35s var(--ease-elegant),background .35s var(--ease-elegant); }
#fertilityContact #form1 #btnOK::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg,rgba(255,255,255,.26),transparent 62%); opacity: .9; }
#fertilityContact #form1 #btnOK:hover { transform: translateY(-3px); box-shadow: 0 18px 42px rgba(134,190,195,.46); background: linear-gradient(135deg,var(--triadic1),var(--secondary)) !important; }
#fertilityContact #form1 #btnOK:active { transform: translateY(-1px); }
#fertilityContact #form1 .talign_md_right { display: flex !important; align-items: flex-end; justify-content: flex-end; width: calc(50% - 12px); }
@media screen and (max-width:760px) {
  #fertilityContact { padding: 32px 22px; border-radius: 26px; }
  #fertilityContact::before { inset: 10px; border-radius: 20px; }
  #fertilityContact #form1 { gap: 18px; }
  #fertilityContact #form1 > p,#fertilityContact #form1 .checknum,#fertilityContact #form1 .talign_md_right { width: 100%; }
  #fertilityContact #form1 .talign_md_right { justify-content: center; }
  #fertilityContact #form1 #btnOK { width: 100%; min-width: 0; }
  #fertilityContact #form1 .checknum font { align-items: stretch; }
  #fertilityContact #form1 #rand-img {   }
}
@media screen and (max-width:550px) {
  #fertilityContact { padding: 34px 25px; }
  #fertilityContact #form1 > p { font-size: 15px; }
  #fertilityContact #form1 input,#fertilityContact #form1 select,#fertilityContact #form1 textarea { min-height: 52px; border-radius: 15px; font-size: 15px; }
  #fertilityContact #form1 .checknum font { flex-wrap: wrap; }
  #fertilityContact #form1 .checknum input,#fertilityContact #form1 #rand-img { width: 100%; }
  #fertilityContact #form1 #rand-img { object-fit: contain; }
}

/* 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){
	aside .btnBox { margin-top: 0 }
	aside >ul { padding: 0 15px; gap: 0 7px; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
	aside >ul >li { position: relative; display: inline-block; overflow: hidden; }
	aside >ul >li:not(:last-child):before { content: ""; position: absolute; display: -webkit-box; display: -ms-flexbox; display: flex; height: 16px; width: 1px; background-color: #c4c4c4; position: absolute; bottom: auto; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); right: 0; z-index: 21; }
	aside >ul >li.action:after { content: ""; position: absolute; display: block; width: 100%; height: 2px; background-color: var(--primary); bottom: 0; left: 0 }
	aside >ul >li .btnBox a { border-radius: 100px; -webkit-box-pack: center; -webkit-box-align: center; padding: 16px 30px; 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: #7cb1ab; }
	aside >ul >li:hover ul.subUL { opacity: 1 }
	aside ul ul.subUL >li:not(:first-child) { border-top: 1px solid #d2d2d2 }
	aside >ul >li ul.sub2UL li:hover a { color: var(--primary) }
	#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 (max-width: 1280px){
	.bannerArea .Img { margin-top: 0; transform: unset; width: 100%; }
	.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(--primary); }
	aside { position: relative; }
	aside .btnBox { margin-top: 0; }
	aside #sidebtn { display: inline-block }
	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:not(:first-child) { border-top: 1px solid #ccc }
	aside >ul >li .btnBox a { padding: 10px 15px; }
	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 }
	.workframe { width: 75%; }
	.bannerText .pag_tit { font-size: 1rem; padding-top: 0px; letter-spacing: 2px; }
	.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; }
	#product_list li { width: calc((100%/3 ) - 30px); }
	#album_list,#article_list { grid-template-columns: repeat(2,1fr) }
	#content_wrap { padding: 30px 0px 50px; }
	#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 }
	.bannerArea .c-circleSvg { width: 380px; height: 380px; bottom: calc(-670px/2); left: calc(-1600px/2 + 800px); }
}
@media screen and (max-width: 980px){
    #faq_list{grid-template-columns: repeat(2, 1fr);}
}
@media screen and (max-width: 761px){
	#product_list{margin: auto;}
	#product_list .info_box >div { width: calc(100% - 60px); }
	#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: 36px; }
	#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); }
	#product_list li .img_cover { height: 180px; }
	#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%; }
	#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 }
}
