.wrap { position: relative; background: #fff; z-index: 998; }
.wrap #wrapBox >div { position: relative; }

.wrap #wrapBox .bg { position: absolute; width: 100%; height: 100%; background: no-repeat 50% / cover; top: 0; left: 0; opacity: .4; }

/* more */
p.more { padding: 20px 0; text-align: center; }
p.more a {position: relative;overflow: hidden;padding: 0 30px;display: inline-block;align-items: center;border: #d3d3d3 solid;border-width: 1px 1px 1px 1px;letter-spacing: .06em;line-height: 30px;transition: 1.2s ease 1.8s;transform: translateX(0%);}
p.more a:before {position: absolute;width: 100%;height: 100%;background: #000;top: 0;left: 0;transform: translateX(-140%) skewX(63deg);transition: .4s cubic-bezier(.23,1,.32,1);content: "";z-index: -9;}
p.more a:after { position: absolute; width: 85%; height: 1px; background: #d3d3d3; display: block; top: 0; left: 0; content: ""; }
p.more a font { position: relative; padding: 7px 0; display: inline-block; color: #000; z-index: 2; }
p.more a span { position: relative; margin-left: 70px; width: 100px; height: 1px; background: #000; display: inline-block; transition: transform .4s cubic-bezier(.23,1,.32,1),background .4s ease; transform-origin: center left; }
p.more a span:after { position: absolute; width: 0; height: 0; border-style: solid; border-width: 3px 0 3px 6px; border-color: transparent transparent transparent #000; display: block; right: 0; top: -3px; content: ""; }

/* bgTxt */
.bgTxt {position: absolute;z-index: 1;}
.bgTxt.stitle {/* -webkit-writing-mode: vertical-lr; *//* writing-mode: vertical-lr; */font-size: 70px;}
.bgTxt.title {width: 100%;text-align: center;font-size: 26px;color: #000000;}
.bgTxt.stitle img{opacity:0.7;}
.bgTxt.title h2{
    text-align: center;
    font-size: 22px;
    font-weight: 300;
    line-height: 120%;
}
.bgTxt.title b{
    font-size: 35px;
    font-weight: 200;
    line-height: 180%;
    letter-spacing: 0.03em;
}


.bgmm{
    position: relative;
    width: 100%;
    overflow: hidden;
    top: 100px;
    z-index: 999;
}
.bgmm p{
	text-align:center;
	line-height: 180%;
	display: block;
}
.bgmm p a{
	 vertical-align: middle;
	 line-height: 180%;
	 color: black;
}
.bgmm p a:hover b { padding-left:15px; border-radius:15px }
.bgmm p a span{
    vertical-align: middle;
    line-height: 180%;
    margin: 0 10px;
}
.bgmm p b{
    vertical-align: baseline;
    line-height: 180%;
    font-size: 14px;
    margin-left: 0px;
    display: inline-block;
    background: rgb(0 0 0);
    width: 21px;
    height: 21px;
    color: #ffffff;
    border-radius: 50%;
    font-size: 12px;
    line-height: 18px;
    text-align: center;
    vertical-align: inherit;
}
.bgmm p b .fa{
	vertical-align:middle;
	line-height: 180%;
}
/* lipicBox */
.lioic .bgTxt.stitle {top: 3.5vw;z-index: 0;opacity: 0.5;}
#littlepic .workframe{
    width: 90%;
    padding-top: 4vw;
}
#littlepic .workframe .stitle{z-index:-1;top: 6vw;}
.lioic ul ,#littlepic .wall {padding: 7vw 0 0;}
.lioic .wall-column { width: calc(100% / 3); display: inline-block; box-sizing: border-box; }
.lioic .article {position: relative;margin: 15px 0px 40px;background: #fff;}
.lioic .article a {position: absolute;width: 100%;height: 100%;display: block;top: 0;left: 0;z-index: 10;}
.lioic .article a:hover{background-color:#00000024;}
.lioic .article .imgBox {position: relative;overflow: hidden;background-size: cover;}
.lioic .article:hover .info h3{color:#ffcf8ff2;z-index:999}

.lioic .article .imgBox article {position: absolute;padding: 0px 20px 30px;width: calc(100% - 40px);color: #777070;z-index: 2;}
.lioic .article .imgBox article p {-webkit-line-clamp: 2;text-align: center;color: white;font-size: 28px;}
.lioic .article .imgBox:after {position: absolute;width: 100%;height: 100%;background: #0e0e0e73;display: block;left: 0;bottom: 0;z-index: 1;content: "";}
.lioic .article .info {position: absolute;margin-top: 0px;padding: 0 0px 0px;z-index: 9;top: calc(50% - 50px);width: 100%;}
.lioic .article .info p span { display: inline-block; color: #d80707; }
.lioic .article .info p span.old { margin-right: 10px; color: #8f8f8f; }
.lioic .article .info h3 {margin: 0px 0;font-weight: 400;font-size: 35px;-webkit-line-clamp: 1;text-align: center;color: white;}



/* NewsBox */
#NewsBox .webframe{width:1440px;margin:0 auto;text-align:center}
#NewsBox .index-title{position:relative;}
#NewsBox .index-title h2{text-align:center;color:#413f3f;font-weight:400;font-size: 20px;line-height:120%;letter-spacing: .35em;}
#NewsBox .index-title h3{text-align:center;color: #101010;font-size: 50px;line-height:100%;font-weight: 500;margin-top:5px;font-family: 'Frank Ruhl Libre', serif;letter-spacing: 1.2px;}
#NewsBox .more{text-align:center;margin-top:45px}

#NewsBox p a b{font-weight:400;margin-right:10px}

#NewsBox {position: relative;padding: 30px 0 0;}
#NewsBox .bgTxt.stitle{
    top: 6vw;
    z-index: 0;
}
#NewsBox #news{
    padding: 70px 0;
}
#NewsBox ul{padding: 0vw 0 0;margin-top: 5vw;}
#NewsBox .bg {position: absolute;width: 100%;height: calc(100% - 300px);/* background: #f4f4f4; */top: 200px;left: 0;}
#NewsBox .leftPhoto { position: absolute; width: calc((55% - 50px) / 2); bottom: 15%; left: 0; z-index: 2; }
#NewsBox .leftPhoto a { position: relative; }

#NewsBox .leftPhoto a.photo img { width: 100%; }
#NewsBox .leftPhoto a font { position: absolute; padding: 15px 20px; width: calc(100% - 40px); background: rgba(0, 0, 0, 0.7); font-size: 16px; color: #fff; left: 0; bottom: 0; }
#NewsBox ul li {position: relative;text-align: center;}
#NewsBox ul li .newImg {box-shadow: 0 0 10px rgba(79, 69, 62, 0.65);float: left;width: calc(50% - 10px);margin-left: 50px;}
#NewsBox ul li .info {float: right;width: calc(50% - 70px);margin-top: 50px;}
#NewsBox ul li .info h3 {padding: 15px 0 20px 0px;height: 54px;line-height: 160%;color: #363636;-webkit-line-clamp: 2;border-top: solid 1px #d3d3d3;}
#NewsBox ul li .info h3 a {font-size: 16px;color: #6a6a6a;font-weight: 400;letter-spacing: 1.2px;}
#NewsBox ul li .info p {color: #767676;}
#NewsBox ul li .info .rightbox{
    overflow: hidden;
    padding-bottom: 20px;
}
#NewsBox ul li .info .rightbox .date{
    float: left;
    font-size: 45px;
    color: #3f3f3f;
    font-family: 'Playfair Display SC', serif;
    width: 60px;
    vertical-align: top;
    margin: -12px 10px 0 0px;
    text-align: center;
}
#NewsBox ul li .info .rightbox .date2{
	font-family: 'Playfair Display SC', serif;
}    
#NewsBox ul li .info p.describe {height: 50px;-webkit-line-clamp: 4;display: none;}
#NewsBox ul li .info p.more {margin-top: 0px;text-align: left;}
#NewsBox ul li .info p.more a {color: #868686;transition: .4s cubic-bezier(.23,1,.32,1);padding: 5px 30px;}
#NewsBox ul li .info p.more a:after , #NewsBox ul li .info p.more a font.dote span { background: #fafafa; }
#NewsBox ul li .info p.more a:after{display:none;}


/* productBox */
#productBox .bgTxt.stitle {top: 3.5vw;z-index: 0;opacity: 0.5;}
#productBox .wall { padding: 5vw 0 0; }
#productBox .wall-column { width: calc(100% / 3); display: inline-block; box-sizing: border-box; }
#productBox .article {position: relative;margin: 15px 0px 40px;background: #fff;}
#productBox .article a {position: absolute;width: 100%;height: 100%;display: block;top: 0;left: 0;z-index: 10;}
#productBox .article .imgBox {position: relative;overflow: hidden;background-size: cover;}
#productBox .article .imgBox article {position: absolute;padding: 0px 20px 30px;width: calc(100% - 40px);color: #777070;z-index: 2;}
#productBox .article .imgBox article p {-webkit-line-clamp: 2;text-align: center;color: white;font-size: 28px;}
#productBox .article .imgBox:after {position: absolute;width: 100%;height: 100%;background: #0e0e0e73;display: block;left: 0;bottom: 0;z-index: 1;content: "";}
#productBox .article .info {position: absolute;margin-top: 0px;padding: 0 0px 0px;z-index: 9;top: 150px;width: 100%;}
#productBox .article .info p span { display: inline-block; color: #d80707; }
#productBox .article .info p span.old { margin-right: 10px; color: #8f8f8f; }
#productBox .article .info h3 {margin: 0px 0;font-weight: 400;font-size: 35px;-webkit-line-clamp: 1;text-align: center;color: white;}

/* aboutBox */
#aboutBox { overflow: hidden; position: relative; background: #f2f8fa; }
#aboutBox:before { position: absolute; width: 20vw; height: 100%; background: #f2f8fa; background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgb(242, 248, 250) 75%); background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgb(242, 248, 250) 75%); background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgb(242, 248, 250) 75%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#f2f8fa',GradientType=1 ); display: block; top: 0; left: calc(30vw + 1px); z-index: 2; content: ""; }
#aboutBox .imgs { position: absolute; width: 50vw; height: 100%; top: 0; left: 0; z-index: 1; }
#aboutBox .imgs .list { height: 35vw; background: no-repeat 50% / cover; }
#aboutBox .info { position: relative; padding: 70px 0 70px 50vw; width: 490px; z-index: 3; }
#aboutBox .info .title { font-size: 40px; }
#aboutBox .info .stitle { margin-bottom: 25px; padding: 5px 0 15px; background: url(/images/34/img-dot.png) repeat-x 0 bottom; font-size: 20px; }
#aboutBox .info article { font-size: 16px; line-height: 200%; color: #545454; }
#aboutBox #SeoStarRating { margin: 15px 0 30px; text-align: right; }
#aboutBox p.more { text-align: left; }

/* bookBox */
/* indexBook */
#indexBook {padding: 20px 0;}
#indexBook .bgTxt.stitle{
    top: 1vw;
    width: 90%;
    margin: 0 auto;
    margin-left: 5%;
}
#indexBook h2.boxTitle { float: right; width: 480px; }
#indexBook .bookList {margin-top: 55px;padding: 7vw 0 0;z-index: 9;}
#indexBook .bookList .bookshow > div { overflow: hidden; position: relative; margin-right: 2px; background: no-repeat 50% / auto 100%; display: block; }
#indexBook .bookList .bookshow > div a {
	position: absolute;
	padding: 320px 30px 30px;
	width: calc(100% - 60px);
	height: 100%;
	background: -moz-linear-gradient(top,rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 63%,rgba(0,0,0,0.65) 100%);
	background: -webkit-linear-gradient(top,rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 63%,rgba(0,0,0,0.65) 100%);
	background: linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgb(0 0 0 / 89%) 63%,rgba(0,0,0,0.65) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000',endColorstr='#a6000000',GradientType=0 );
	top: 31%;
	transition: all ease-in-out .3s;
	}
#indexBook .bookList .bookshow > div a p { text-align: center; font-size: 18px; color: #fff; }
#indexBook .bookList .bookshow > div a p b{
    display: block;
    text-align: center;
}
#indexBook .bookList .bookshow > div a p:after { margin: 15px auto; width: 1px; height: 60px; background: #fff; display: block; transition: all ease-in-out .3s; content: ""; }
#indexBook .bookList .bookshow > div a article { color:#ddd; }
@media screen and (min-width:981px) {
	
	#indexBook .bookList .bookshow:hover > div a { 
	    padding-top: 280px; 
	    top: 0; 
	}
	#indexBook .bookList .bookshow:hover > div a p:after { width: 0; height: 0; }
}
@media screen and (max-width:480px) {
	section.indexset , #indexBook h2.boxTitle { width: 90%; }
}

@keyframes newimg { 0% { background-position: 0; } to { background-position: -7px; } }
@-webkit-keyframes newimg { 0% { background-position: 0; } to { background-position: -7px; } }

@media screen and (min-width: 1281px) {
	p.more a:hover {border-color: #000;}
	p.more a:hover:before { transform: translateX(0) skewX(0); }
	#NewsBox ul li .info p.more:hover a{color:white;z-index: 999999;}
	p.more a:hover:after { background: #000; }
	p.more a:hover font { color: #fff; }
	p.more a:hover span { background: #fff; transform: scale(1.1); }
	p.more a:hover span:after { border-color: transparent transparent transparent #fff; }
	#productBox .wall-column .article:hover .imgBox article { bottom: 0; }
}
@media screen and (max-width: 1280px) {
	#aboutBox .imgs , #bookBox .row { width: 100%; }
	#aboutBox .imgs .list { height: 100vw; }
	#aboutBox .info { padding: 70px 15%; width: 70%; background: rgba(242, 248, 250, .7); }
	#aboutBox:before { opacity: 0; }
	#aboutBox p.more a:after { background: #000; }
	#aboutBox p.more a { border-color: #000; }
	#bookBox { padding: 50px 5%; font-size: 0; }
	#bookBox #customBox ul { padding: 0 0 0 130px; }
	#bookBox #BookList { padding: 50px 0 20px; }
}
@media screen and (min-width: 981px) {
	#NewsBox ul li .info {/* position: absolute; *//* width: 39%; *//* left: 0; *//* bottom: 20%; */}
}
@media screen and (max-width: 980px) {
	.bgTxt.stitle { position: relative; font-size: 10vw; -webkit-writing-mode: inherit; writing-mode: inherit; }
	.bgTxt.title {/* display: none; */}
	#NewsBox ul li { text-align: center; }
	#NewsBox ul li .img { width: calc(80% - 10px); }
	#NewsBox ul li .info { margin-top: 20px; width: calc(80% - 10px); display: inline-block; }
	#NewsBox .btn { left: auto; right: 0; }
	#productBox .bgTxt.stitle { padding: 6vw 0 0; top: 0; }
	#productBox .wall-column { width: 50%; }
	#aboutBox .info .title { font-size: 8vw; }
	#aboutBox .info .stitle { font-size: 5vw; }
	#bookBox #customBox ul { padding: 0; }
	#bookBox #BookList ul li , #bookBox #BookList ul li:nth-child(6n) { width: calc(100% / 3); }
}
@media screen and (max-width: 680px) {
	#productBox .wall { margin: auto; width: 80%; }
	#productBox .wall-column { width: 100%; }
	#aboutBox .imgs .list { height: 180vw; }
	#NewsBox ul li .newImg{width:100%;}
	#NewsBox #news{padding-top: 140px;padding-bottom: 40px;}
	#indexBook .bookList{padding-top:120px}	
	#littlepic .wall{padding-top:120px}
	#indexBook .bookList .bookshow > div a{
    padding: 20px 30px 30px;
    background: -moz-linear-gradient(top,rgb(0 0 0 / 45%) 100%,rgba(0,0,0,0.65) 63%,rgba(0,0,0,0) 0% );
    background: -webkit-linear-gradient(top,rgb(0 0 0 / 45%) 100%,rgba(0,0,0,0.65) 63%,rgba(0,0,0,0) 0% );
    background: -webkit-linear-gradient(top,rgb(0 0 0 / 47%) 100%,rgba(0,0,0,0.65) 63%,rgba(0,0,0,0) 0% );
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000',endColorstr='#a6000000',GradientType=0 );
    top: 0;
    }
    #indexBook .bookList .bookshow > div a p{
    	font-size:25px;
    	margin-top: 20px;
    }
    #indexBook .bookList .bookshow > div  img{
    	height:450px;
    }
    #indexBook .bookList .bookshow > div{
    	background-size:cover;
    }
}
@media screen and (max-width: 500px) {
	#NewsBox .btn { bottom: -10px; }
	#bookBox #BookList ul li , #bookBox #BookList ul li:nth-child(6n) { width: 50%; }
	#bookBox #BookList ul li:nth-child(3n) { width: 100%; }
	#NewsBox ul li .info{
    width: calc(90% - 15px);
    float: left;
    margin-left: 10px;
}
}
@media screen and (max-width: 450px) {
	#productBox .wall { width: 100%; }
	#aboutBox .info { padding: 10vw 5vw; width: 90vw; }
}