#wrap{z-index:5}

/* section */
section{padding:5vw 0}
section >*{z-index:3}
section .textEditor{padding-bottom:3vw}
section .textEditor .en{text-align:center;font-size:66px;color:#666666;font-family:"Cormorant Garamond",serif;opacity:.2;line-height:1.5;text-transform:uppercase}
section .textEditor h3{text-align:center;color:#666666;font-size:28px;font-weight:400}
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%}

/* 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{padding:0 0 5vw;z-index:5;position:relative}
#about_area:before{content:'';position:absolute;width:1px;height:100%;background:#cfcfcf;bottom:0;opacity:.5;z-index:5;right:50px}
#about_area:after{content:'';position:absolute;width:100%;height:1px;background:#cfcfcf;bottom:50px;opacity:.5;z-index:5}
#about_area .photoBox{position:absolute;width:11%;height:100%}
#about_area .photoBox img{animation:moveObject 100s linear infinite;height:100%;object-fit:cover}
@keyframes moveObject{0%{object-position:0% 50%}50%{object-position:100% 50%}100%{object-position:0% 50%}}
#about_area .workframe{margin:0 0 0 auto;width:min(85%,1550px);display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:center}
#about_area #about_info{margin:5vw 0;width:50%}
#about_area #about_info h2{font-size:28px;color:var(--primary);font-weight:300}
#about_area #about_info h2 b{display:block;font-size:28px;color:var(--primary);font-weight:500}
#about_area #about_info h3{word-spacing:100vw;color:#666666;font-size:24px;font-weight:400;margin:20px 0 90px}
#about_area #about_info p{font-size:17px;color:#4a4747;width:70%;line-height:2;letter-spacing:1px;margin-bottom:60px}
#about_area #about_info h4{display:flex;font-size:24px;color:#666666;font-weight:500;margin-bottom:20px}
#about_area #about_info h4:before{content:url(/images/44/img-logo.png);margin-right:10px}
#about_area #about_info ul{display:grid;grid-template-columns:repeat(3,1fr)}
#about_area #about_info li{margin-right:20px;background:#fff;box-shadow:0 0 15px rgb(0 0 0 / 10%)}
#about_area #about_img{position:absolute;right:0;width:50%;display:flex;flex-wrap:wrap;justify-content:space-between;z-index:-1;margin-top:90px}
#about_area #about_img #pictureBox{width:49%}
#about_area #about_img .fixTxt{position:absolute;font-family:"Cormorant Garamond",serif;font-size:66px;color:#666666;opacity:.2;top:-70px;right:40%}

/* history_area */
#history_area .photoBox{position:absolute;width:11%;height:100%;right:0;bottom:0}
#history_area .photoBox img{animation:moveObject 100s linear infinite;height:100%;object-fit:cover}
.historyArea{width:min(90%,1280px)}
.historyArea .historyItem.slick-current .title a{color:#ffffff}
.historyArea .historyItem.slick-current .title::after{background:#a40000}
.historyArea .historyItem.slick-current .title::before{opacity:1;-webkit-animation:zoomout 2.3s ease-in-out forwards infinite;animation:zoomout 2.3s ease-in-out forwards infinite}
.historyArea .historyItem.slick-current .bubbleBox{opacity:1}
.historyArea .historyItem .item{position:relative}
.historyArea .historyList{position:relative}
.historyArea .historyList::before{content:"";position:absolute;top:94px;width:calc(100% - 10px);height:1px;background-color:#d2d2d2;left:0}
.historyArea .historyItem .top{text-align:center;margin:0 auto}
.historyArea .historyItem .top::after{content:"";position:absolute;width:8px;height:8px;border-radius:50%;box-shadow:0 0 0 7px #ffffffba,0 0 0 0px #a7a7a7;background-color:#a7a7a7;top:calc(15% - -3px);left:calc(50% - 4px)}
.historyArea .historyItem .top .monthRound{position:relative}
.historyArea .historyItem .top .monthRound::before{content:"";position:absolute;background-color:#ffffff00;width:30px;height:30px;border-radius:50%;border:1px solid #ffffff;left:50%;top:11px;transform:translateX(-50%)}
.historyArea .historyItem .top em{font-size:80px;color:#999999;font-style:initial;font-weight:600;line-height:80%;font-family:"Jost",sans-serif}
.historyArea .historyItem .top em span{font-size:65px;line-height:1;padding-left:5px}
.historyArea .historyItem .top .titleEn{font-family:Roboto;font-weight:400;color:#a40000;font-size:15px;letter-spacing:1.5px;height:36px}
.historyArea .historyItem .Img{position:relative;z-index:5;width:315px;height:315px;margin:30px auto 20px;display:flex;justify-content:center;align-items:stretch;flex-direction:column;overflow:inherit}
.historyArea .historyItem .Img img{width:260px;margin:auto;object-fit:cover;-webkit-transition:all .5s;-o-transition:all .5s;-moz-transition:all .5s;transition:all .5s;transform:rotate(0deg) translateY(0%);aspect-ratio:3 / 3;border-radius:150px}
.historyArea .historyItem .Txt{padding:50px 0 0}
.historyArea .historyItem .title{position:relative;margin:5px auto 0;text-align:center}
.historyArea .historyItem .title{position:relative;z-index:5;display:block;margin:0 auto;font-size:18px;font-weight:500;letter-spacing:1px;color:#3c3b3b;height:110px;display:flex;flex-direction:column;justify-content:center}
.historyArea .historyItem .Img::before{opacity:1;background:transparent;border:1px solid #d9cdcd;width:310px;height:310px;top:0;-webkit-transform:translateX(-50%);transform:translateX(-50%);-webkit-animation:zoomout 2.3s ease-in-out forwards infinite;animation:zoomout 2.3s ease-in-out forwards infinite}
.historyArea .historyItem .Img .monthImg{content:"";position:absolute;z-index:-1;top:17%;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);display:block;width:205px;height:205px;background:var(--primary);border-radius:50%;margin:0 auto}
.historyArea .historyItem .Img::before{content:"";position:absolute;z-index:-1;top:0;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);display:block;width:205px;height:205px;background:var(--primary);border-radius:50%;margin:0 auto}
.historyArea .historyItem .Img::before{opacity:1;background:transparent;border:1px solid #d9cdcd;width:310px;height:310px;top:0;-webkit-transform:translateX(-50%);transform:translateX(-50%);-webkit-animation:zoomout 2.3s ease-in-out forwards infinite;animation:zoomout 2.3s ease-in-out forwards infinite}
.historyArea .historyItem .Img::after{content:"";position:absolute;z-index:-1;top:30px;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);display:block;width:255px;height:255px;background:rgb(255 255 255 / 0%);border-radius:50%;border:1px solid var(--primary);margin:0 auto;opacity:1}
@-webkit-keyframes zoomout{50%{-webkit-transform:translateX(-50%) scale(1.3,1.3);transform:translateX(-50%) scale(1.3,1.3);opacity:0}}
@keyframes zoomout{50%{-webkit-transform:translateX(-50%) scale(1.3,1.3);transform:translateX(-50%) scale(1.3,1.3);opacity:0}}
.historyArea .arrow,.introductionBox .introductionList .arrow{padding:30px 0%;right:0;bottom:45%;display:flex;justify-content:space-between;width:100%}
.introductionBox .introductionList .arrow{display:block;justify-content:center;right:auto;left:-130px;bottom:0}
.historyArea .arrow a,.introductionBox .introductionList .arrow a{position:relative;display:inline-block;width:55px;height:55px;line-height:40px;text-align:center;border:1px solid #565656;background-color:#565656;cursor:pointer;border-radius:50%;margin:0 5px}
.historyArea .arrow a:before,.introductionBox .introductionList .arrow a:before{content:"";background-image:url(/images/39/icon_arrow.png);background-repeat:no-repeat;background-position:center;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;display:block;width:100%;height:100%;position:absolute;top:0;left:0;bottom:auto;right:auto}
.historyArea .arrow a.next:before,.introductionBox .introductionList .arrow a.next:before{-webkit-filter:brightness(0) invert(1);filter:brightness(0) invert(1);transform:scaleX(-1)}

/* photo_area */
#photo_area{background:rgb(34 34 34 / 15%)}
#photo_area .workframe{width:min(90%,1620px);position:relative}
#photo_area .textEditor *,#news_area .textEditor *{text-align:left}
#photo_area .photolist{position:relative;z-index:2;overflow:hidden;padding-top:100px;margin-top:-100px}
#photo_area .photolist li{float:left;width:50%;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
#photo_area .photolist li:hover{outline:15px solid rgb(255 255 255 / 30%);outline-offset:-15px}
#photo_area .photolist li a{position:absolute;width:100%;height:100%;top:0;z-index:2}
#photo_area .photolist li:after{content:'';background:linear-gradient(180deg,rgb(0 0 0 / 0%),rgb(0 0 0 / 50%));position:absolute;width:100%;height:100%;left:0;bottom:0}
#photo_area .photolist li:nth-child(even){margin-top:-100px;float:right;margin-bottom:100px}
#photo_area .photolist li img{aspect-ratio:3 / 1.4;width:100%;object-fit:cover}
#photo_area .photolist li .text{position:absolute;bottom:35px;right:50px;z-index:1}
#photo_area .photolist li .text .eng{color:#fff;font-family:"Barlow",sans-serif;font-size:35px;font-weight:600}
#photo_area .photolist li .text h3{color:#fff;text-align:end;font-size:18px;font-weight:400}
#photo_area .photolist li .text h3:before{content:url(/images/44/img-logo.png);display:inline-block;vertical-align:sub;margin-right:10px}
#photo_area .photolist li:hover .text{bottom:auto;right:auto;background:#fff;padding:20px 20px}
#photo_area .photolist li:hover .text h3:before{display:none}
#photo_area .photolist li:hover .text *{color:#333;text-align:center}
#photo_area .more{padding:30px 40px;position:absolute;right:0;bottom:-40px;background:var(--primary);color:#fff;z-index:3}
#photo_area .more span{width:9px;height:9px;background:#fff;border-radius:50px;margin-left:110px;display:inline-flex;align-items:center;justify-content:center;position:relative}
#photo_area .more span:after{content:'';position:absolute;width:0;height:0;background:#fff;border-radius:50px;opacity:.25}
#photo_area .more:hover span:after{width:40px;height:40px}

/* news_area */
#news_area{display:grid;grid-template-columns:50% 50%}
#news_area .workframe{width:85%}
#news_area #pictureBox img{height:100%;object-fit:cover}
#news_area .textEditor{padding-bottom:30px}
#news_area li{position:relative;display:grid;grid-template-columns:70% 25%;justify-content:space-between;width:85%;border-bottom:1px solid #e2dfdf;padding:30px 0;align-items:center}
#news_area li a{position:absolute;z-index:1}
#news_area li .info_box{}
#news_area li .time,#news_area li .time b{font-weight:400;font-size:15px;color:#666;display:inline-block;vertical-align:baseline;font-family:"Heebo",sans-serif}
#news_area li .time b{margin-left:10px;border-left:1px solid #e0dbdb;padding-left:10px;line-height:100%}
#news_area li .moree{margin-left:10px;font-weight:100;font-size:14px;border-left:1px solid #e2dcdc;padding-left:20px;display:flex;align-items:center;justify-content:space-between}
#news_area li .moree span{width:40px;height:40px;background:var(--primary);display:flex;align-items:center;justify-content:center;border-radius:50px}
#news_area li .moree span:before{content:'';width:8px;height:8px;border-radius:50px;background:#fff}
#news_area li:hover .moree span:before{width:14px;height:14px}
#news_area li h3{margin-top:10px;height:60px;line-height:150%;font-size:20px;-webkit-line-clamp:2;color:#666;font-weight:400}

/* book_area */
#book_area{padding:4vw 0}
#book_area li h3{margin-top:10px;height:auto;font-size:20px;color:#666666;font-weight:400}

/* photo_area */
#photo_area .item{width:260px;height:200px}
#photo_area .item img{height:100%;object-fit:cover}

@media screen and (min-width:1281px){
	.historyArea .historyItem .item:hover .Img img{transform:translateY(-30%)}
	.historyArea .historyItem .item:hover .title{transform:translateY(-20%)}
	.historyArea .historyItem .item:hover .top em{color:var(--primary)}
	.historyArea .historyItem .item:hover .top::after{box-shadow:0 0 0 7px #f7ddba,0 0 0 0px var(--primary);background-color:var(--primary)}
	.historyArea .historyItem .item:hover .top .monthRound::before{border:1px solid #f6d7db}
	#history_area .historyArea::before{content:"";position:absolute;top:-50px;margin-top:0;width:500px;height:230px;right:-250px;background-repeat:no-repeat;background-image:url(/images/39/img-H-01.png);background-size:contain;-webkit-animation:product_float 4s ease-in-out forwards infinite;animation:product_float 4s ease-in-out forwards infinite}
	@keyframes circle2{0%,100%{right:0px;top:-1%}50%{right:0px;top:1.5%}}
	@-webkit-keyframes circle2{0%,100%{lef:0px;top:-1%}50%{lef:0px;top:1.5%}}
}
@media screen and (max-width:1500px){
	#news_area li{grid-template-columns:70% 25%}
	#history_area .photoBox,#about_area .photoBox{width:5%}
	#about_area #about_img .fixTxt{width:50vw;right:0%}
	#news_area{grid-template-columns:40% 60%}
	#about_area .about_sub_1,#about_area .about_sub_2,#about_area .about_sub_3{width:20vw}
	#product_list{width:500px;margin-left:30px}
	#product_list li .clip{height:590px}
	#about_area .about_sub_2{top:-20vw;right:6vw}
}
@media screen and (max-width:1024px){
	#news_area{grid-template-columns:25% 75%}
	#news_area li{width:100%}
	#photo_area .more{position:relative;bottom:0;margin-top:50px;display:inline-flex}
	#photo_area .photolist li,#photo_area .photolist li:nth-child(even){float:none;width:100%;margin:0}
	#about_area #about_info p{width:80%}
	#about_area .workframe{margin:0 auto}
	#history_area .photoBox,#about_area .photoBox{display:none}
	#product_list{margin:auto}
}
@media screen and (max-width:980px){
	#news_area #pictureBox{width:100%;margin-bottom:20px}
	#news_area{padding-top:5vw;display:flex;flex-direction:column}
	#product_list{width:500px}
	#product_list li .clip{height:590px}
	#about_area #about_info{margin-bottom:8vw;width:100%}
	#about_area:before{display:none}
	#about_area #about_info h3{margin-bottom:20px}
	section .textEditor{padding-bottom:7vw}
	#about_area #about_img{position:relative;width:100%;margin-top:20px}
	#about_area #about_img .fixTxt{display:none}
	#about_area .about_sub_2{top:auto;bottom:35vw;width:35vw}
	#about_area .about_sub_3{width:29vw;left:10vw}
}
@media screen and (max-width:760px){
	section{padding:8vw 0}
	#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}
}
@media screen and (max-width:550px){
	#photo_area .photolist li img{aspect-ratio:3 / 2}
	section .textEditor h3{font-size:23px}
	section .textEditor .en{font-size:45px}
	.historyArea .historyItem .top em{font-size:39px}
	.historyArea .historyItem .title{font-size:14px;height:80px;letter-spacing:0}
	.historyArea .historyItem .top::after{top:calc(15% - -7px)}
	.historyArea .historyList::before{top:63px}
	.historyArea .historyItem .Img .monthImg{display:none}
	.historyArea .historyItem .Img,.historyArea .historyItem .Img img{width:140px;height:140px}
	.historyArea .historyItem .Img::before{width:140px;height:140px}
	.historyArea .historyItem .Img::after{display:none}
	#about_area #about_info ul{grid-template-columns:repeat(1,1fr)}
	#about_area #about_info li{margin:5px 0;text-align:center}
	#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}
}