.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: 0 0 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: "" }
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: 90px;color: #e4e4e4;font-weight: 700;font-family: 'Cormorant Garamond', 'Noto Sans TC', serif;}
.bgTxt.title { width: 100%; text-align: right; font-size: 140px; color: #edf1f3; }
.maJ{display: flex;height: 100%;position: absolute;-webkit-writing-mode: vertical-lr;writing-mode: vertical-lr;-moz-transform: rotate(180deg);-webkit-transform: rotate(180deg);-o-transform: rotate(180deg);-ms-transform: rotate(180deg);transform: rotate(180deg);flex-direction: column;margin-left: 5%;margin-top: -5%;}
.firstbox .maJ{
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
    margin-left: -4%;
}
.firstbox .bgTxt.stitle{
    font-size: 55px;
}
.secondbox .maJ{
    margin-top: -19%;
}

/*multitle*/

.multitle{
    display: flex;
    flex-direction: column;
    margin-bottom: 2vw;
}
.multitle h2{
    font-size: 2.75em;
    font-family: 'Cormorant Garamond', 'Noto Serif TC', serif;
    color: #071d2b;
}
/*firstbox*/

.wrap #wrapBox .firstbox{
    position: relative;
    background-color: white;
    padding: 3vw 0;
    margin-top: 60px;
}
.wrap #wrapBox .firstbox .workframe{
    display: flex;
}
.wrap #wrapBox .firstbox:before{
	content:"";
	position: absolute;
	width: 13%;
	height: 100%;
	background: white;
	left: 0;
	background-image: url(/images/34/web.webp);
	top: 0;
}
.firstbox .omgimg{position: relative;margin-left: 10%;display: flex;flex: 1;width: 90%;justify-content: flex-end;background-color: white;}
.firstbox .omgimg:before{
	content:"";
	position: absolute;
	width: 100px;
	height: 111px;
	background: url(/images/34/looicon.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 50% 5%;
	bottom: 20px;
	right: -91px;
}
/*secondbox*/
.secondbox{background-image: url(/images/34/aboutdot.webp);}
.secondbox:before{
	content:"";
	position: absolute;
	width: 13%;
	height: 100%;
	background: white;
	left: 0;
	background-image: url(/images/34/web.webp);
	top: 0;
}

.secondbox:after{
	content:"";
	position: absolute;
	right: -35px;
	bottom: 160px;
	width: 299px;
	height: 299px;
	background: url(/images/34/indexabout-icom.webp);
	background-size: cover;
	z-index: 5;
	animation-name: flower2;
	animation-direction: alternate;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-duration: 2s;
}

.bottommask{

	content:"";
	position: absolute;
	width: 100%;
	height: 179px;
	bottom: 0;
	background: white;
	left: 0;
	background-image: url(/images/34/web.webp);
	z-index: 0;
}

/*thirdbox*/

.thirdbox{
    padding: 3vw 0px;
}
.thirdbox .workframe{
    padding-left: 9%;
}
.thirdbox:before{
	content:"";
	position: absolute;
	width: 100%;
	height: 450px;
	top: 0;
	background: white;
	left: 0;
	background-image: url(/images/34/web.webp);
	z-index: 0;
}
.thirdbox:after{
	content:"";
	position: absolute;
	left: -5%;
	bottom: 27%;
	width: 370px;
	height: 336px;
	background: url(/images/34/indexproduct-icom.webp);
	background-size: cover;
	z-index: 5;
	animation-name: flower;
	animation-direction: alternate;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-duration: 2s;
}
.thirdbox .gaJJbox{
    display: flex;
}
.thirdbox .lefJtbox{
    display: flex;
    width: 30%;
    flex-wrap: wrap;
    align-content: flex-start;
    flex: 1;
    margin-top: 20px;
}
.thirdbox .lefJtbox .itemJ{
    display: flex;
    flex-direction: column;
    width: calc(33.3% - 2px);
    margin-bottom: 25px;
    border-left: #8b8b8b4d 2px solid;
    padding: 0 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.thirdbox .lefJtbox .tmtitle{
    position: relative;
    display: flex;
    width: 100%;
    padding: 25px 0;
    margin-bottom: 30px;
}
.thirdbox .lefJtbox .tmtitle p{
    font-size: 28px;
}

.thirdbox .lefJtbox .itemJ span{}
.thirdbox .lefJtbox .itemJ .connum{
    display: flex;
    align-items: flex-end;
}

.thirdbox .lefJtbox .itemJ p{
    font-size: 49px;
    font-family: 'Noto Serif TC';
    font-weight: 600;
    line-height: 100%;
    display: flex;
    align-items: flex-end;
}
.thirdbox .lefJtbox .itemJ b{
    font-weight: 400;
    margin-left: 5px;
}
.thirdbox .righJtbox{
    position: relative;
    display: flex;
    flex-direction: column;
    width: 56%;
}
.thirdbox .righJtbox:before{
	content:"";
	position: absolute;
	width: 222px;
	height: 222px;
	background-image: url(/images/34/runimg-fly.png);
	left: -148px;
	z-index: 3;
	bottom: 90px;
	background-size: cover;
	animation-name: updn;
	animation-direction: alternate;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-duration: 5s;
}

/*fourthdbox*/
.fourthdbox{
    background-image: url(/images/34/aboutdot.webp);
    margin-top: -251px;
    padding-top: 4vw;
}
.fourthdbox:before{
	content:"";
	position: absolute;
	width: 13%;
	height: 100%;
	background: white;
	left: 0;
	background-image: url(/images/34/web.webp);
	top: 0;
}
.fourthdbox .workframe{
    padding-left: 9%;
}
.fourthdbox .hambox{
    display: flex;
    justify-content: space-between;
}
.fourthdbox .hambox .list{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 32.3%;
    padding: 50px 30px;
    border: #e5e5e5 8px solid;
    margin: 30px 0px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: white;
}
.fourthdbox .hambox .list .mob01{
    display: flex;
}
.fourthdbox .hambox .list .mob02{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.fourthdbox .hambox .list img{
    width: 150px;
    margin-bottom: 20px;
}
.fourthdbox .hambox .list h3{
    font-family: 'Noto Serif TC';
    font-size: 24px;
}
.fourthdbox .hambox .list article{
	word-spacing: 100vw;
	max-width: 100%;
	text-align: center;
}
/* NewsBox */
#NewsBox , #productBox {padding-bottom: 4vw;}
#NewsBox .workframe{
    width: 82%;
    margin: 6vw 0 0;
}

#NewsBox {
    display: flex;
    justify-content: flex-end;
    background-image: url(/images/34/aboutdot.webp);
    background-color: white;
}
#NewsBox:before{
	content:"";
	position: absolute;
	width: 13%;
	height: 100%;
	background: white;
	left: 0;
	background-image: url(/images/34/web.webp);
	top: 0;
}
#NewsBox .maJ{
    margin-left: -2%;
}

#NewsBox ul , #productBox .wall { position: relative; margin-bottom: 0; padding: 7vw 0 0; display: block; font-size: 0; z-index: 2; }
#NewsBox ul li {position: relative;display: flex;flex-direction: column;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;padding: 10px;}
#NewsBox ul li .img {position: relative;padding: 0 10px 10px 0;width: 100%;display: inline-block;}
#NewsBox ul li .img:before {position: absolute;width: calc(100% - 10px);height: calc(100% - 10px);background: url(/images/34/img-bgline.png);top: 10px;left: 10px;-webkit-animation: newimg 1s linear infinite;animation: newimg 1s linear infinite;content: "";opacity: 0;}
#NewsBox ul li .img a.photo {}
#NewsBox ul li.slick-cloned .img a.photo{
	transform-origin: center top;
	transform: translate3d(0, 0, -300px) rotateZ(-3deg) rotateY(30deg) rotateX(-15deg);
	transition-property: transform, opacity;
	transition-duration: 3s, .5s;
	transition-timing-function: cubic-bezier(.755,.05,.855,.06), ease;
	opacity: 0;
}
#NewsBox .innlink{
    display: flex;
    justify-content: space-between;
    border-top: #dededeb0 1px solid;
    padding: 6px 10px;
    margin-top: 30px;
}
#NewsBox .innlink a{
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
    color: #0b1c2b;
}
#NewsBox .innlink span{
    display: flex;
}
#NewsBox .innlink b{
    display: flex;
}
#NewsBox .innlink svg{
    width: 20px;
    height: 20px;
    fill: #262626;
}
#NewsBox ul li.slick-active .img a.photo { transform: translate3d(0,0,0) rotateZ(0deg) rotateY(0deg) rotateX(0deg); transition: transform 1s cubic-bezier(.23,1,.32,1) .2s,opacity .6s ease .2s; opacity: 1; }
#NewsBox ul li .info p a {padding: 2px 15px;background: #000;display: inline-block;color: #fff;vertical-align: middle;display: none;}
#NewsBox ul li .info p font {margin-left: 10px;display: inline-block;font-family: 'Noto Serif TC', serif;}
#NewsBox ul li .info h3 { margin: 10px 0; }
#NewsBox ul li .info span{
overflow: hidden;
margin: 10px 0;
height: 54px;
text-align: left;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
width: 95%;
font-family: 'Noto Sans TC', serif;
color: #4b4b4b;
}
#NewsBox ul li .info h3 a {height: 32px;font-size: 18px;color: #000;-webkit-line-clamp: 1;font-family: 'Noto Sans TC', serif;}
#NewsBox .btn { position: absolute; left: calc(35% - 80px); bottom: 10px; z-index: 10; }
#NewsBox .btn a { margin: 0 10px; color: #000; }
#NewsBox p.more { margin-top: 50px; }

/*indsebox*/
#indsebox{
    padding: 100px 0;
    margin: 0;
    background-image: url(/images/34/web.webp);
    border-bottom: rgb(159 159 159 / 41%) 1px solid;
}
#indsebox .workframeJ{
    width: 95%;
    margin: 0 auto;
}
#indsebox .workframeJ .multitle{
    display: flex;
    align-items: center;
}
#indsebox .masevox{
    display: flex;
}
#indsebox .masevox .list{
    margin: 0 6px;
}

#waguan{
    padding: 60px 0 90px;
}
.sixthbox  {
    display: flex;
    justify-content: flex-end;
    background-image: url(/images/34/web.webp);
    background-color: white;
}
.sixthbox:before{
	content:"";
	position: absolute;
	right: -35px;
	bottom: 160px;
	width: 299px;
	height: 299px;
	background: url(/images/34/indexabout-icom.webp);
	background-size: cover;
	z-index: 5;
	animation-name: flower2;
	animation-direction: alternate;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-duration: 2s;
}
.sixthbox:after{
	content:"";
	position: absolute;
	left: -5%;
	bottom: 27%;
	width: 370px;
	height: 336px;
	background: url(/images/34/indexproduct-icom.webp);
	background-size: cover;
	z-index: 5;
	animation-name: flower;
	animation-direction: alternate;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-duration: 2s;
}
.sixthbox .workframe{
    margin-top: 3vw;
    /* padding-left: 9%; */
    margin-bottom: 3vw;
}
.sixthbox .magand .list{
    margin: 3px 6px;
}

/* productBox */
#productBox {background-image: url(/images/34/web.webp);display: flex;justify-content: flex-end;}
#productBox:before{
	content:"";
	position: absolute;
	left: -4%;
	bottom: 27%;
	width: 370px;
	height: 336px;
	background: url(/images/34/indexproduct-icom.webp);
	background-size: cover;
	z-index: 5;
	animation-name: flower;
	animation-direction: alternate;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-duration: 2s;
}
@keyframes flower{
	0%{
	transform-origin:left bottom;
	transform:rotate(-3deg)
	}
	100%{transform-origin:right bottom;transform:rotate(3deg)}
}
@keyframes flower2{
	0%{
	transform-origin:right bottom;
	transform:rotate(-3deg)
	}
	100%{transform-origin:right bottom;transform:rotate(2deg)}
}

@keyframes updn{
	 0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0);
  }
}


#productBox .workframe{
    width: 77%;
    display: flex;
    flex-direction: column;
    margin: 6vw 0 0;
}
#productBox .bgTxt.stitle { top: -4vw; z-index: 3; }
#NewsBox ul {padding: 0vw 0 2vw;}
#productBox .wall-column { width: calc(100% / 3); display: inline-block; box-sizing: border-box; }
#productBox .article {position: relative;margin: 15px 10px 40px;}
#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;border-radius: 30px;}
#productBox .article .imgBox img{
    object-fit: cover;
}
#productBox .CategoryName{
    position: absolute;
    z-index: 8;
    -webkit-writing-mode: vertical-lr;
    writing-mode: vertical-lr;
    right: 0;
    background: #5ab6aa;
    padding: 15px 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-right: 25px;
    margin-top: -8px;
}

#productBox .CategoryName h3{
    color: white;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0.15em;
    display: flex;
    flex-direction: row;
    align-items: center;
}
#productBox .article .imgBox article {position: absolute;padding: 20px 20px 30px;width: calc(100% - 40px);color: #777070;bottom: -99px;z-index: 2;}
#productBox .article .imgBox article p {height: 58px;-webkit-line-clamp: 2;display: flex;text-align: center;flex-direction: column;align-items: center;}
#productBox .article .imgBox:after {position: absolute;width: 60%;height: 0;/* background: #fff; */display: block;left: 0;bottom: 0;z-index: 1;content: "";opacity: 0;}
#productBox .article .info {position: relative;padding: 0 20px 15px;z-index: 9;text-align: center;display: flex;flex-direction: column;align-items: center;}
#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: 20px 0;height: 30px;font-weight: 400;font-size: 21px;-webkit-line-clamp: 1;font-family: 'Cormorant Garamond', 'Noto Serif TC', serif;}

/* 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 */
#bookBox { padding: 50px 0 50px calc((100% - 1100px) / 2); font-size: 0; }
#bookBox .row { position: relative; width: 50%; display: inline-block; z-index: 2; }
#bookBox #customBox .bgTxt.stitle { z-index: 2; }
#bookBox #customBox ul { position: relative; padding: 0 10% 0 20%; z-index: 3; }
#bookBox #customBox ul li h3 { font-size: 40px; }
#bookBox #customBox p.more a { border-color: #000; }
#bookBox #customBox p.more a:after { background: #000; }
#bookBox #BookList ul { overflow: hidden; }
#bookBox #BookList ul li { position: relative; margin-bottom: 1px; float: left; width: 25%; }
#bookBox #BookList ul li:nth-child(6n) { width: 50%; }
#bookBox #BookList ul li a.photo { margin-right: 1px; }
#bookBox #BookList ul li h3 { position: absolute; padding: 5px 20px; width: calc(100% - 41px); background: rgba(0, 0, 0, .7); left: 0; bottom: 0; }
#bookBox #BookList ul li h3 a { height: 30px; color: #fff; text-align: center; -webkit-line-clamp: 1; }

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

@media screen and (max-width: 1470px){
	.multitle h2{
	    font-size: 2em;
	}
	.workframe{
	    width: 1024px;
	}
	#productBox .workframe{
    margin: 3vw 0 0;
}
	.bgTxt.stitle{
	    font-size: 80px;
	}
	.firstbox .bgTxt.stitle{
	    font-size: 36px;
	}
	.firstbox .omgimg:before{
    width: 85px;
    height: 83px;
    right: -50px;
    bottom: -6px;
}
	.maJ{
	    margin-top: 0%;
	}
	 #productBox{
    padding-bottom: 0;
}

	#productBox:before{
    width: 300px;
    height: 300px;
    bottom: 17%;
}
	.thirdbox .lefJtbox .tmtitle p{
    font-size: 22px;
}
	.secondbox:after{
	    width: 289px;
	    height: 282px;
	    right: -106px;
	    bottom: 50px;
	}
	.thirdbox:after{
	    width: 270px;
	    height: 270px;
	}
	.thirdbox .lefJtbox .itemJ p{
	    font-size: 33px;
	}
	.fourthdbox{
	    margin-top: -110px;
	    background-color: white;
	}
	.thirdbox .lefJtbox .itemJ{
	    margin-bottom: 40px;
	    padding: 0 10px;
	}
	.thirdbox .righJtbox:before{
    width: 180px;
    height: 180px;
    left: -120px;
    bottom: 6px;
}

}
@media screen and (min-width: 1281px) {
	p.more a:hover { border-color: #000; }
	p.more a:hover:before { transform: translateX(0) skewX(0); }
	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 (max-width: 1160px){
	.firstbox .omgimg:before{
    right: -45px;
    top: -10px;
    bottom: auto;
    width: 80px;
    height: 80px;
}
}
@media screen and (max-width: 1024px){
	.maJ{
    position: relative;
    margin: 0;
    -webkit-writing-mode: vertical-lr;
    writing-mode: horizontal-tb;
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
    height: auto;
    width: 100%;
    display: flex;
    z-index: 9999;
    top: 0;
    height: 150px;
 }
	.wrap #wrapBox .firstbox .workframe{
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
}
	
	.bgTxt.stitle {
    -webkit-writing-mode: horizontal-tb;
    writing-mode: horizontal-tb;
    font-size: 90px;
    color: #e4e4e4;
 }
	.firstbox .omgimg{
    flex: auto;
    width: 100%;
    margin-left: 0;
}
	.thirdbox .lefJtbox .tmtitle p{
	    font-size: 18px;
	}
	.thirdbox .lefJtbox .itemJ{
	    padding: 0 9px;
	}
	.thirdbox .lefJtbox .itemJ p{
	    font-size: 41px;
	}
	.thirdbox .lefJtbox .tmtitle{
    padding: 0 0;
    margin-bottom: 12px;
}
}
@media screen and (min-width: 981px) {
	#NewsBox ul li .info {width: 100%;display: flex;flex-direction: column;}
}
@media screen and (max-width: 980px) {
	.bgTxt.stitle {position: relative;font-size: 10vw;-webkit-writing-mode: inherit;writing-mode: inherit;margin-left: 0;/* display: none; */}
	.bgTxt.title { display: none; }
	#NewsBox ul li {text-align: center;margin: 0;padding: 0;}
	#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); }
	.firstbox .omgimg{
	    width: 100%;
	    margin-left: 0;
	    display: flex;
	    justify-content: flex-start;
	}
	.firstbox .omgimg img{
	    width: 100%;
	}
	.firstbox .maJ{
	    margin-left: 10px;
	    height: auto;
	}
	.firstbox .omgimg:before{
    top: -68px;
    right: 0;
    width: 60px;
    height: 60px;
}
	.wrap #wrapBox .firstbox:before{}
	.wrap #wrapBox .firstbox:before , .secondbox:before{display: none;}
	.thirdbox .gaJJbox{
	    display: flex;
	    flex-direction: column;
	}
	.thirdbox .lefJtbox{
	    width: 100%;
	}
	.thirdbox .righJtbox{
    width: 100%;
}
}

@media screen and (max-width: 680px) {
	#productBox .wall { margin: auto; width: 80%; }
	#productBox .wall-column { width: 100%; }
	#aboutBox .imgs .list { height: 180vw; }
	.multitle{
	    z-index: 2;
	}
	#productBox .workframe{
	    width: 100%;
	    /* max-width: 100%; */
	    margin: 3vw auto;
	}
	#productBox .workframe:before{
		content:"";
		background: white;
		width: 108%;
		left: -4%;
		height: 44%;
		position: absolute;
		top: -24px;
	}
	#productBox:before , .secondbox .maJ{
	    display: none;
	}
	.wrap #wrapBox .firstbox{/* background-image: url(/images/34/web.webp); */padding: 8vw 0;}
	.thirdbox .workframe{
	    padding-left: 3%;
	}
	.fourthdbox{
	    margin-top: 0;
	}
	.fourthdbox:before{
	    height: 150%;
	    top: -50%;
	}
	.fourthdbox .hambox{
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	}
	.fourthdbox .hambox .list{
	    width: 100%;
	    padding: 20px;
	    display: flex;
	    flex-direction: row;
	    align-items: center;
	    margin: 10px 0;
	}
	.fourthdbox .hambox .list .mob01{}
	.fourthdbox .hambox .list .mob02{
	    display: flex;
	    align-items: flex-start;
	    padding-left: 19px;
	}
	.fourthdbox .hambox .list article{
	    text-align: left;
	    font-size: 14px;
	}
	.fourthdbox .hambox .list img{
	    width: 199px;
	    margin-bottom: 10px;
	}
	.fourthdbox .workframe{
	    padding-left: 0%;
	}
	#NewsBox .workframe{
	    width: 100%;
	    margin: 0 auto;
	}
	#NewsBox ul li .img {
	    width: calc(100% - 0px);
	    padding: 0;
	}
	
}
@media screen and (max-width: 550px) {
	#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%; }
	.bgTxt.stitle{}
	.maJ{
	    height: 75px;
	}
	.firstbox .bgTxt.stitle{
	    font-size: 31px;
	}
	.thirdbox .righJtbox:before{
    width: 130px;
    height: 130px;
    left: auto;
    right: 31px;
    bottom: auto;
    top: -63px;
}
}
@media screen and (max-width: 480px) {
	#productBox .wall { width: 100%; }
	#aboutBox .info { padding: 10vw 5vw; width: 90vw; }
	#productBox .article{margin: 10px 30px 0px;}
	#productBox .article .imgBox{
	}
	.multitle h2{
    font-size: 1.75em;
    padding: 0 10px;
}
	
}