header #cis#wrap { z-index: 5; }
.wrapper{position: relative;}
.wrapper:before{content:'';width: 17%;height: 1050px;position: absolute;top: 0;background: #715642;z-index: 5;opacity: .5;}

/* section */
section >* { z-index: 3; }
section .entitle_box {padding-bottom: 3vw;font-size: 60px;font-family: "Montserrat", sans-serif;color: #423a33;text-transform: uppercase;font-weight: 500;letter-spacing: 5px;}
section .title_box {font-size: 18px;display: inline-flex;align-items: center;gap: 20px;font-weight: 500;letter-spacing: 3px;color: #423a33;}
section .title_box:before{content:url(/images/44/img-title.png);margin-top: 6px;}
section .clip { margin: auto; width: 100%; }
section .clip img { height: 100%; }
section .clip iframe { width: 100%; height: 100%; top: 0; left: 0; }
section .clip video { width: auto; height: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); }

/* product_sub_list */
#product_sub_list >div { margin: auto; width: 100%; }
#product_sub_list li {width: 210px;display: block;}
#product_sub_list li .clip { height: 210px; -webkit-clip-path: url(#clip_sub_product); clip-path: url(#clip_sub_product); }
#product_sub_list li h3 { font-weight: 300; }

/* product_list */
#product_list { width: 600px; }
#product_list li .clip { height: 690px; -webkit-clip-path: url(#clip_product); clip-path: url(#clip_product); }
#product_list li .info_box { width: 367px; height: 228px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 367 228'%3E%3Cpath d='M367.78 126C374 16.84 244.78 11.74 169 1.62c-30.92-4.22-65.18-.49-89.25 18.28-10.07 8.27-21.49 9.51-30.69 14.7-10.8 7-24 26.55-31.88 38.77-20.79 30.78-25.12 73.93 3.58 101.93 42.82 40.82 125.08 59.41 182.75 51.15 18.44-2.61 31-8 48.42-10.85 17.13-1.86 30.89-3.56 48.43-10.85 33.48-12.81 54.43-40.22 67.42-78.75z' fill='%23f4ece5'/%3E%3C/svg%3E") no-repeat center / 100%; bottom: 0; left: 0; }
#product_list li .info_box >div { margin: auto; width: 80%; }
#product_list li .info_box h3 { height: auto; font-size: 20px; }
#product_list li .info_box p { margin-right: 10px; font-weight: 300; }
#product_list li .info_box p:first-letter { margin-right: 2px; font-size: 12px; }

/* about_area */
#about_area {display: grid;grid-template-columns: 50% 50%;background: var(--secondary);gap: 110px;align-items: center;}
#about_area:after{content:'';position: absolute;bottom: 0;right: 0;width: 50%;height: 1px;background: #8e8781;z-index: 2;}
#about_area:before{content:'';position: absolute;right: 135px;background: #8e8781;z-index: 2;width: 1px;height: 100%;}
#about_area .entitle_box{word-spacing: 100vw;line-height: 1.2;padding-bottom: 145px;}
#about_area .title_box{position:absolute;right: calc(30% + 22px);top: 6px;}
#about_area h2 { font-size: 45px; font-style: italic; }
#about_area article p {line-height: 2.5;letter-spacing: 1px;font-weight: 400;color: #3b3531;}
#about_area .clip img {width: 100%;}
#about_area .more_btn{margin-top:70px}

/* custom_area */
#custom_area {background: var(--secondary);position: relative;}
#custom_area:after{z-index: 2;content:'';position: absolute;background: #fbf9f4;width: 107px;height: 30%;bottom: 0;left: 0;}
#custom_area .workframe{margin:0;width: 100%;position: relative;}
#custom_area .workframe:before{content:'';position: absolute;right: 135px;top: 0;width: 200px;height: 100%;background: var(--primary);}
#custom_area .titbox{display:flex;align-items: center;justify-content: flex-start;padding: 145px 0 140px 12%;background: #fbf9f4;margin-right: 135px;gap: 70px;}
#custom_area .entitle_box{padding:0;letter-spacing: 6px;}
#custom_area .titbox .btn{border:0;display: flex;gap: 15px;position: absolute;right: calc(20% + 45px);padding: 0;}
#custom_area .titbox .btn a{width:70px;aspect-ratio: 1/1;display: flex !important;background: var(--primary);align-items: center;justify-content: center;border-radius: 50px;}
#custom_area .titbox .btn a:hover{background: #675342;}
#custom_area .titbox .btn a#service_prev svg{transform:scaleX(-1);}
#custom_area .titbox .btn a svg{width:20px;height:20px;fill:white} 
#custom_area .bg_box{z-index:-1;height: 610px;bottom: 40px;top: unset;}
#custom_area .servicebox {display: grid;grid-template-columns: 35% 60%;align-items: center;justify-content: space-between;margin-top: -65px;}
#service_img .pageh1{position:absolute;font-size: 15px;writing-mode: vertical-lr;top: 30px;right: 50px;display: flex;flex-direction: row;align-items: center;gap: 15px;font-weight: 400;letter-spacing: 3px;}
#service_img .pageh1:before{content:'';width: 1px;height: 185px;background: var(--info);}
#custom_area .list{margin-top: 70px;width: 90%;margin-bottom: 97px;}
#custom_area .list .info{border-right:1px solid #d5d5d5;padding: 15px 30px;}
#custom_area .list .info:after{content:'';width: 1px;position: absolute;top: 0;right: -1px;height: 60px;background: #8c7860;}
#custom_area .list .info .top{display:flex;align-items: center;justify-content: space-between;}
#custom_area .list .info .top p{display:flex;align-items: baseline;font-size: 37px;gap: 10px;font-weight: 600;font-family: "Montserrat", sans-serif;color: #443930;}
#custom_area .list .info .top p b{font-size: 18px;font-weight: 600;font-family: "Montserrat", sans-serif;color: #443930;}
#custom_area .list .info .top .img{height:60px;aspect-ratio: 1/1;border-radius: 50px;border: 1px solid #cbcbcb;display: flex;align-items: center;justify-content: center;}
#custom_area .list .info .top .img img{width: 32px;}
#custom_area .list .info .h3{font-size: 20px;margin-bottom: 10px;margin-top: 30px;font-weight: 500;letter-spacing: 3px;}
#custom_area .list .info .h3:after{content:'';background: #443930;width: 30px;height: 1px;display: block;margin: 20px 0 15px;}
#custom_area .list .info article{height:auto;-webkit-line-clamp: 2;font-size: 15px;color: #5b544f;text-align: justify;}
#custom_area .more_btn{margin-left: 30px;}

/* news_area */
#news_area{background-image:url(/images/44/img-newsBg.jpg);background-repeat: repeat;background-position: 50% 50%;display: grid;grid-template-columns: 37% 63%;align-items: center;gap: 160px;background-size: cover;}
#news_area .bg_box{background-size: 100%;background-position: top;background-repeat: no-repeat;height: 698px;background-size: cover;}
#news_area .entitle_box{line-height:1.2;padding-bottom: 70px;}
#news_area .title_box{position:absolute;right: calc(56% + 20px);top: 5px;}
#news_area .workframe{width:90%;margin: 0;}
#news_area ul{margin-bottom:100px;}
#news_area li{gap: 30px;display:grid;grid-template-columns: 50% 50%;margin: 15px 0;}
#news_area li .more{border-left: 1px solid #756c65;display: flex;align-items: center;font-size: 15px;font-family: "Montserrat", sans-serif;font-weight: 500;color: #584c42;gap: 20px;padding-left: 40px;}
#news_area li .more span{width: 60px;aspect-ratio: 1/1;background: var(--primary);border-radius: 50px;display: flex;align-items: center;justify-content: center;}
#news_area li:hover .more span{background: #675342;}
#news_area li .more svg{width: 17px;height: 17px;fill: white;}
#news_area li .time {font-size: 14px;color: #423a33;font-family: "Montserrat", sans-serif;letter-spacing: 1px;font-weight: 500;}
#news_area li .more_btn { margin-left: 10px; padding: 2px 15px; max-width: calc(100% - 105px); height: 22px; font-weight: 100; font-size: 13px; z-index: 6; }
#news_area li .h3 {height: auto;line-height: 150%;font-size: 18px;-webkit-line-clamp: 1;font-weight: 500;color: #423a33;letter-spacing: 1px;}

/* book_area */
#book_area{margin-top: -40px;}
#book_area:after{z-index: 2;content:'';position: absolute;background: #fbf9f4;width: 107px;height: 100%;bottom: 0;left: 0;}
#book_area:before{z-index: 2;content:'';position: absolute;background: #8e8781;width: 1px;height: 105%;bottom: 0;left: 107px;}
#book_area .workframe{width: min(95%, 1680px);margin: 0 0 0 auto;display: grid;grid-template-columns: 40% 60%;align-items: center;}
#book_area .entitle_box{line-height:1.2;padding-bottom: 100px;margin-top: 90px;}
#book_area .title_box{position:absolute;right: calc(20% + 20px);top: 95px;}
#book_area ul{width: 155%;}
#book_area li >div{display:flex;justify-content: center;align-items: center;}
#book_area li >div a{z-index:5}
#book_area li >div:after{content:'';position: absolute;width: 0;height: 0;background: var(--complement);opacity: .35;z-index: 0;}
#book_area li:hover >div:after{width:100%;height:100%;}
#book_area li img{aspect-ratio: 146 / 120;width: 100%;}
#book_area li .h3 {height: auto;font-size: 18px;position: absolute;opacity: 0;z-index: 1;}
#book_area li:hover .h3{opacity:1}
#book_area .booklist{position:relative;}
#book_area .btn{border:0;display: flex;gap: 15px;left: -25px;padding: 0;justify-content: space-between;align-items: center;width: 82.5%;bottom: 0;}
#book_area .btn a{width:70px;aspect-ratio: 1/1;display: flex !important;background: var(--primary);align-items: center;{aspect-ratio:4/3}border-radius: 50px;cursor: pointer;position: absolute;bottom: 260px;justify-content: center;}
#book_area .btn a#case_next{position:absolute;right: 0;}
#book_area .btn a:hover{background: #675342;}
#book_area .btn a#case_prev svg{transform:scaleX(-1);}
#book_area .btn a svg{width:20px;height:20px;fill:white} 

/* photo_area */
#photo_area{background-image:url(/images/44/img-newsBg.jpg);background-repeat:no-repeat;background-position: top left;}
#photo_area:before{content:'';position: absolute;background: var(--primary);width: 208px;height: 100%;bottom: 0;left: 107px;}
#photo_area *{color:white;}
#photo_area .workframe{background-image:url(/images/44/conBg.jpg);background-repeat:no-repeat;background-position:50% 50%;background-size:cover;width: min(90%, 1600px);margin: auto 0 auto auto;display: grid;align-items: center;grid-template-columns: 50% 50%;padding: 85px 0;}
#photo_area .box{margin-left:110px;}
#photo_area .tit{font-size:20px;letter-spacing: 4px;font-weight: 500;margin-bottom: 5px;}
#photo_area  p{letter-spacing: 1.5px;font-weight: 300;}
#photo_area .coninfo{display: flex;align-items: center;gap: 75px;}
#photo_area .coninfo *{font-family: "Montserrat", sans-serif;font-weight: 400;}
#photo_area .btnbox {display:flex;flex-direction: column;align-items: center;gap: 10px;}
#photo_area .coninfo a{width:100%;height: 100%;top: 0;z-index: 2;}
#photo_area .coninfo p:nth-child(2){font-size:18px;}
#photo_area .coninfo span{background:white;width: 125px;aspect-ratio: 1/1;border-radius: 150px;display: flex;align-items: center;justify-content: center;}
#photo_area .coninfo .btnbox:hover span{transform: scale(0.9);}
#photo_area .coninfo svg{width:45px;height: 45px;fill: #a28a74;}

@media screen and (max-width: 1680px) {
    #photo_area .workframe{grid-template-columns: 60% 40%;}
    #photo_area .box{margin-left: 250px;}
    section .title_box:before{zoom: 75%;}
    #about_area:before{right:5%}
    #about_area{grid-template-columns: 45% 50%;}
    #about_area .title_box{    right: calc(20% + 22px);}
    #about_area .clip img{aspect-ratio: 4/3.5;}
    #about_area:after{width: 60%;}
    #custom_area .workframe:before{right:5%}
    #custom_area .bg_box{height: 530px;}
    #service_img .pageh1:before{height: 90px;}
    #news_area .title_box{right: calc(50% + 20px);top: 12px;}
}
@media screen and (max-width: 1460px) {
    .wrapper:before{height: 820px;}
    #book_area ul{width: 180%;}
    #custom_area .titbox{padding: 145px 0 140px 5%;}
	#about_area .entitle_box{padding-bottom: 45px;}
    section .entitle_box{font-size: 45px;}
    #custom_area .servicebox{grid-template-columns: 40% 55%;}
    #book_area .workframe{grid-template-columns: 50% 50%;}
    #book_area .btn a{bottom: 190px;}
    #book_area .btn{width: 96%;}
}
@media screen and (max-width: 1280px) {
    #book_area:before, #book_area:after, #custom_area:after{display:none;}
    #custom_area .bg_box{height: 460px;}
    #custom_area .list{margin-bottom:50px;margin-top: 15px;}
    section .title_box:before{zoom: 55%;}
}
@media screen and (max-width: 1024px) {
    #news_area .workframe{margin: 0 auto;padding: 50px 0;}
    #book_area .btn a{bottom: 300px;}
    #book_area .btn a#case_next{right: -80px;}
    #book_area li img{aspect-ratio:4/3}
    #book_area .title_box{top: 45px;}
    #book_area ul{width:100%}
    #book_area .booklist{margin-top:50px;}
    #book_area .entitle_box{margin:0}
    #book_area{margin:0;padding: 7vw 0;}
    #book_area .workframe{display:block;width: 90%;margin: 0 auto;}
    #custom_area .servicebox{grid-template-columns: 55% 40%;}
    #custom_area .titbox .btn{right: 5%;}
    #custom_area .bg_box{height: 510px;}
    #custom_area .titbox{margin-right:0;padding: 90px 5% 150px;}
    #about_area .clip img{aspect-ratio:5/3}
    #about_area{grid-template-columns: 1fr;gap: 70px;}
    .wrapper:before, #about_area:after, #custom_area .workframe:before, #photo_area:before{display:none;}
    #about_info{width:90%;margin: 0 auto 60px;}
    #photo_area .box{margin:0}
    #photo_area .workframe{width: 90%;padding: 80px 5%;}
    #news_area{display:block;}
    #news_area .bg_box{height: 450px;background-size: cover;background-position: 50% 50%;}
    #news_area li{grid-template-columns: 65% 30%;}
}
@media screen and (max-width: 980px) {
    #photo_area .workframe{display: flex;flex-direction: column;align-items: center;gap: 40px;}
    #photo_area .workframe *{text-align:center;}
    #book_area .btn a{bottom: 200px;}
    #book_area .entitle_box{padding-bottom: 30px;}
    #book_area .title_box{position:relative;top: unset;right: unset;margin-bottom: 80px;display: flex;}
    #custom_area .bg_box{display:none;}
    #custom_area .box{background-image:url(/images/44/img-newsBg.jpg);background-size: cover;background-position: bottom;background-repeat: no-repeat;padding: 50px 30px;}
    #custom_area .servicebox{display:block;}
    #service_img .pageh1{position:relative;writing-mode: unset;display: flex;flex-direction: row;align-items: center;top: -20px;right: 0;}
    #service_img .pageh1:before{height:1px;width: 17.5%;background: none;}
    #service_img .clip{display:none;}
    #custom_area .titbox{display:flex;flex-direction: column;align-items: flex-start;gap: 10px;padding: 90px 5% 90px;}
}
@media screen and (max-width: 760px) {
    #news_area ul{margin-bottom:60px}
    #news_area li .more{padding-left:30px;}
    #news_area li{display:flex;flex-direction: column;align-items: flex-start;}
    #photo_area .coninfo span{width: 105px;}
    #book_area .btn a#case_next{right: -65px;}
    #book_area .workframe{width:80%}
    #book_area{padding:50px 0}
    #custom_area .list{margin-bottom:0}
    #custom_area .more_btn{display:none;}
    #service_img .pageh1{top: -35px;}
    #service_img .pageh1:before{width: 50px;}
    #custom_area .titbox .btn a svg{width:16px;height: 16px;}
    #custom_area .titbox .btn a{width: 55px;}
    #custom_area .entitle_box{width: 60%;line-height: 1.2;}
    #custom_area .servicebox{margin-top: -50px;}
    #about_info{width:85%;}
    section .title_box:before{content: url(/images/44/img-title-mo.png);}
	#about_area .entitle_box{padding-bottom: 5px;}
    section .entitle_box{font-size: 33px;letter-spacing: 3.5px;}
    #about_area:before{display:none;}
    section .clip img{height:auto;}
	#product_sub_list>div { margin: 10px auto 50px; }
	#product_sub_list li { width: 150px; }
	#product_sub_list li .clip { height: 150px; }
	#product_list { width: 70vw; }
	#product_list li .clip { height: 80vw; }
	#product_list li .info_box { width: 45vw; height: 30vw; }
    #about_area .title_box{position:relative;right: 0;margin-bottom: 50px;}
}
@media screen and (max-width: 550px) {
    #news_area li .more span{width: 45px;}
    #news_area .title_box{position:relative;right: unset;top: unset;margin-bottom: 50px;}
    #news_area .entitle_box{padding:0}
    #news_area .bg_box{height: 370px;}
    #photo_area .coninfo svg{width: 35px;height: 35px;}
    #book_area li{padding: 0 !important;}
    #book_area li img{aspect-ratio:4/3.5}
    #book_area .btn a{bottom: 100px;width: 55px;}
    #book_area .btn a svg{width: 12px;height: 12px;}
	#product_sub_list li { margin: 10px; width: 35vw; }
	#product_sub_list li .clip { height: 35vw; }
	#product_list { width: 90vw; }
	#product_list li .clip { height: 100vw; }
	#product_list li .info_box { width: 55vw; height: 40vw; }
	#about_area .about_sub_2 { bottom: 60vw; }
	#news_area li .row { margin: auto; width: 280px; }
}
@media screen and (max-width: 480px) {
	#book_area li.row { margin: auto; width: 250px; }
}