section { position: relative; padding: 5vw 0; background: no-repeat 50% / cover; }
section .page_title {margin-bottom: 30px;text-align: center;font-weight: 500;font-size: 25px;color: #a67c87;font-weight: 200;margin-top: -10px;}
section .more_box >* { padding: 5px 30px; border: 1px rgba(255, 255, 255, .3) solid; display: inline-block; color: #fff; }
.entitle{
    display: flex;
    justify-content: center;
}
.entitle b{
    color: #f46263;
    font-size: 34px;
    text-transform: uppercase;
    font-weight: 200;
}
.entitle b.nonou{
    color: #606060;
    margin-left: 16px;
}
/* aboutFunc */
#aboutFunc {padding: 100px 0 0;position: relative;}
#aboutFunc:before{
	content:"";
	width: 79%;
	height: 1px;
	position: absolute;
	left: 0px;
	top: 108px;
	z-index: 8;
	background-color: #54545447;
}
#aboutFunc:after{
	content:"";
	width: 79%;
	height: 1px;
	position: absolute;
	left: -25%;
	top: 58px;
	z-index: 9;
	background-color: #54545447;
	-moz-transform:rotate(90deg);
	-webkit-transform:rotate(390deg);
	-o-transform:rotate(90deg);
	-ms-transform:rotate(90deg);
	transform:rotate(90deg);
}
#aboutFunc .speBox {overflow: hidden;position: relative;min-height: 670px;max-width: 100%;width: 1366px;margin: 0 auto;background-color: white;}

#aboutFunc .youtubebox {position: absolute;padding: 10px 70px 70px 0;width: calc(50% - 70px);/* background: url(/images/22/index_about_bg.jpg) no-repeat 0 / cover; */left: 0;top: 0;z-index: 99;}
#aboutFunc #youtube { background: no-repeat 50% / cover; animation-name: fadeInLeft; }
#aboutFunc #youtube:before{
	content:"";
	background-color: #f46263e3;
	position:absolute;
	width: 94%;
	height: 80%;
	bottom: 9%;
	z-index: -1;
	display: none;
}
#youtube .UTwo {overflow: hidden;position: relative;padding: 30px 0 100%;height:0;}
#youtube .UTwo a { position: absolute; width: 100px; height: 100px; background: rgba(0, 0, 0, .6); border-radius: 50%; display: block; text-align: center; line-height: 100px; font-size: 30px; color: #dcdcdc; left: calc(50% - 50px); top: calc(50% - 50px); z-index:5; transition: all linear .3s; }
#youtube .UTwo iframe { position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
#aboutFunc #about {position: relative;padding: 10px 30px 80px 30px;float: right;width: calc(50% - 60px);z-index: 999;}
#aboutFunc #about .speBoxTitle {text-align: left;line-height: 120%;font-size: 37px;color: #4a4b4d;font-weight: 300;display: none;}
#aboutFunc #about .subBoxTitle {margin: 10px 0 30px;text-align: left;color: #8b8b8b;font-weight: 400;font-size: 21px;line-height: 120%;font-weight: 300;display: none;}
#aboutFunc #about .arts {padding-bottom: 40px;text-align: left;color: #654f54;font-size: 20px;line-height: 200%;font-weight: 200;display: none;}
#aboutFunc #about .more {position: absolute;padding-bottom: 10px;width: 35%;border-bottom: 1px solid #d1d1d1;bottom: 0;right: 0;}
#aboutFunc #about .more a {display: inline-block;font-family: 'Oswald',sans-serif;font-weight: 400;color: #848588;font-size: 20px;line-height: 110%;transition: all linear .2s;}
/* secabout */
#secabout { margin-top: 50px; }
#secabout:before { position: absolute; width: 60%; height: 100%; background: #dc8661; display: block; top: 0; left: 0; content: ""; }
#secabout >div { width: 50%; display: inline-block; vertical-align: top; }
#secabout .customBox ul { margin: 0 auto; width: 500px; }
#secabout .customBox ul li { padding: 60px 0; }
#secabout .customBox ul li .page_sub_title { margin-bottom: 25px; font-weight: 400; font-size: 36px; color: #fff; }
#secabout .customBox ul li article { font-weight: 200; font-size: 18px; color: #ece4e0; }
#secabout .youtubeBox { top: 45px; }
#secabout .youtubeBox iframe { width: 90%; height: 350px; }

/* productBox */
#productBox {padding: 5vw 8vw;padding-top: 2vw;z-index: 99;}

#productBox .list_box { position: relative; }
#productBox .relat_box:before {position: absolute;width: 100%;height: 100%;background: rgb(52 52 52 / 79%);display: block;top: 0;left: 0;z-index: 3;content: "";}
#productBox ul li .img_box_cover img { height: 490px; }
#productBox ul li .info_box.abso_box { height: auto; top: calc((100% - 40px) / 2); left: 0; }

#productBox ul li .info_box.abso_box b.sttep{
    position: absolute;
    top: -70px;
    width: 100%;
    color: #ff8687;
    font-size: 70px;
    opacity: 0.6;
}
#productBox ul li .info_box >* {margin: 5px auto;width: 70%;text-align: center;}
#productBox ul li .info_box h4 {height: 40px;font-weight: 400;font-size: 24px;color: #fff;margin-top: 30px;}
#productBox ul li .info_box article { margin: 80px auto 15px; width: 45%; color: rgb(255 255 255 / .7); line-height: 140%; font-size: 15px; -webkit-line-clamp: 2; opacity: 0; }
#productBox ul li .info_box .more_box { opacity: 0; }
#productBox .btn a {position: absolute;width: 26px;height: 26px;border: solid #de91a4;display: block;top: calc((100% - 26px) / 2);}
#productBox .btn a#product_prev { border-width: 1px 0 0 1px; transform: rotate(-45deg); left: -50px; }
#productBox .btn a#product_next { border-width: 1px 1px 0 0; transform: rotate(45deg); right: -50px; }

#productBox .slick-slider { margin-bottom: 60px; }
#productBox .slick-slider  .slick-dots{bottom: -60px;}
#productBox .slick-dots li button:before {width: 12px;height: 12px;background: transparent;border: 1px #0000005c solid;border-radius: 50%;text-align: center;opacity: 1;content: "";}
#productBox .slick-dots li.slick-active button:before {
	background: #f46263;
	border: #f46263 1px solid;
	}

/* newsBox */
#newsBox ul li {margin: 20px 15px 20px 0;width: calc((100% - 30px) / 2);display: inline-block;transition: all .3s ease-out;}
#newsBox ul li:hover .info_box{/* bottom:20px; */box-shadow: -2px -3px 8px 0px #00000014;transition: all .3s ease-out;transform: translate(0px, -10px);}
#newsBox ul li:hover .img_box_cover:before{opacity:0.6;}
#newsBox .relat_box .img_box_cover:before{
	content:"";
	position:absolute;
	width:100%;
	height:100%;
	background: #fb63643b;
	z-index: 1;
}
#newsBox ul li:nth-child(2n) { margin: 20px 0 20px 15px; }
#newsBox ul li .img_box_cover , #newsBox ul li .img_box_cover img {height: 420px;object-position: 50% 0%;}
#newsBox ul li .info_box {
	padding: 15px;
	background-color: white;
	transition: all .3s ease-out;
	transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	z-index: 3;
	}
#newsBox ul li .info_box h4 {height: 33px;font-weight: 300;font-size: 25px;letter-spacing: 0.02em;line-height: 180%;color: #de5152;}
#newsBox ul li .info_box article {margin: 10px 0 0;color: #654f54;font-weight: 200;}
#newsBox ul li .info_box .time {color: #847d7e;display: flex;justify-content: flex-end;font-size: 14px;margin-top: 15px;}
section#newsBox{
    padding-top: 0;
    z-index: 99;
    padding-bottom: 0vw;
}
section#newsBox .workframe
{
	width: 84.2%;
	margin: 0 auto;
	max-width: 100%;
}
/* bookBox */
#bookBox ul {margin: 0 auto;width: 1366px;display: grid;grid-gap: 0;grid-template-columns: repeat(5, 1fr);grid-template-rows: repeat(2, 1fr);max-width: 100%;}
#bookBox ul li {overflow: hidden;border: white 1px solid;}
#bookBox ul li img { height: 275px; }
#bookBox ul li:first-child {grid-column-start: 1;grid-column-end: 3;grid-row-start: 1;grid-row-end: 3;padding-top: 1px;}
#bookBox ul li:nth-child(8) {grid-column-start: 4;grid-column-end: 6;grid-row-start: 2;grid-row-end: 4;}
#bookBox ul li:first-child img , #bookBox ul li:nth-child(8) img { height: 550px; }

/* customBox */
.wraprow .bg { position: absolute; width: 100%; height: 100%; background: no-repeat 50% / cover; opacity: .3; top: 0; left: 0; z-index: 1; }
#customBox {padding: 0;z-index: 5;position: relative;padding-bottom: 130px;z-index: 99;}
#customBox:before , #customBox:after {position: absolute;width: 25px;height: 100%;background: #fff;display: inline-block;content: "";top: 0;left: 0;z-index: 5;opacity: .4;}
#customBox:after { left: auto; right: 0; }
#customBox .btn a {position: absolute;width: 65px;height: 7px;display: block;left: 50px;top: calc((100% - 7px) / 2);z-index: 3;-webkit-transition-duration: .2s;transition-duration: .2s;}
#customBox .btn a:before { position: absolute; width: 100%; height: 1px; background: #fff; display: block; bottom: 0; content: ""; }
#customBox .btn a:after { position: absolute; width: 0; height: 0; border-style: solid; border-width: 7px 13px 0 0; border-color: transparent #fff transparent transparent; left: -1px; bottom: 0; content: ""; }
#customBox .btn a#nextBtn {left: auto;right: 50px;}
#customBox .btn a#nextBtn:after { border-width: 0 13px 7px 0; border-color: transparent transparent #fff transparent; left: auto; right: -1px; }
#customBox ul li.slick-slide {position: relative;background: #dd4e4f;}
#customBox ul li .bg {opacity: .2;background-attachment: fixed;}
#customBox ul li .info {padding: 5vw 0 0;height: calc(400px - 7vw);z-index: 9;}
#customBox ul li .info h3 {margin-bottom: 0;font-size: 40px;color: #fff;text-align: center;width: 100%;letter-spacing: 0.15em;opacity: 0.8;font-weight: 300;}
#customBox ul li .info article {width: 100%;line-height: 200%;color: #fff;text-align: center;opacity: 0.9;font-weight: 400;font-size: 19px;}
#customBox .slick-dots li button:before {height: 5px;background: #f2acbf;display: inline-block;content: "";}

.JUDYBOTTOM{
	width:100%;
	position:relative;
	margin: 0 auto;
	margin-top: -100px;
	text-align: center;
}

a.wei-button {
	 background-color: #4a4b4d;
	 display: flex;
	 flex-direction: row;
	 justify-content: center;
	 position: relative;
	 display: inline-block;
	 padding: 16px 32px;
	 margin: 0 auto;
	 color: #ffffff;
	 font-size: 15px;
	 letter-spacing: 0.15em;
	 text-decoration: none;
	 text-transform: uppercase;
	 overflow: hidden;
	 transition: 1.5s;
	 white-space: nowrap;
}

.wei-button:hover {
    background-color: #ea4a4b;
    color: white;
    box-shadow: 0 0 2px #ea4a4b, 0 0 2px #ea4a4b, 0 0 5px #ea4a4b, 0 0 5px #ea4a4b;
}

.wei-button span {
    position: absolute;
    display: block;
}

.wei-button:hover span:nth-child(1) {
    top: 0;
    left: -100%;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #ea4a4b);
    animation: alternate1 .5s linear 1;
}

@keyframes alternate1 {
    0% {
        left: -100%;
    }
    50%, 100% {
        left: 100%;
    }
}

.wei-button:hover span:nth-child(2) {
    top: -100%;
    right: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg, transparent, #ea4a4b);
    animation: alternate2 .5s linear 1;
    animation-delay: .125s;
}

@keyframes alternate2 {
    0% {
        top: -100%;
    }
    50%, 100% {
        top: 100%;
    }
}

.wei-button:hover span:nth-child(3) {
    bottom: 0%;
    right: -100%;
    width: 100%;
    height: 2px;
    background: linear-gradient(270deg, transparent, #ea4a4b);
    animation: alternate3 .5s linear 1;
    animation-delay: .25s;
}

@keyframes alternate3 {
    0% {
        right: -100%;
    }
    50%, 100% {
        right: 100%;
    }
}

.wei-button:hover span:nth-child(4) {
    bottom: -100%;
    left: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(360deg, transparent, #ea4a4b);
    animation: alternate4 .5s linear 1;
    animation-delay: .375s;
}

@keyframes alternate4 {
    0% {
        bottom: -100%;
    }
    50%, 100% {
        bottom: 100%;
    }
}




.wei-button2::before {
    content: "";
    width: 0%;
    height: 0%;
    position: absolute;
    bottom: -1px;
    right: -1px;
    transition: 1s;
}

.wei-button2:hover::before {
    width: 100%;
    height: 100%;
    border-bottom: 2px solid #FF9900;
    border-right: 2px solid #FF9900;
}

.wei-button2::after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    top: -1px;
    left: -1px;
    transition: 1s;
}

.wei-button2:hover::after {
    width: 100%;
    height: 100%;
    border-top: 2px solid #FF9900;
    border-left: 2px solid #FF9900;
}

@media screen and (min-width:1025px) {
	#aboutFunc .youtubebox { background-attachment: fixed; }
	#aboutFunc #about .more a:hover { letter-spacing: .2em; }
}     
@media screen and (max-width: 1500px){
	#aboutBox .left_box { width: calc(47.5vw - 25px); }
	#aboutFunc #youtube{
    height: 500px;
    }
    #aboutFunc #about{
    padding: 30px 10px 50px 10px;
    width: calc(62% - 160px);
}
}
@media screen and (min-width: 1281px){
	#productBox ul li:hover .relat_box:before  {background: rgb(37 37 37 / 87%);}
	#productBox ul li:hover .info_box.abso_box b.sttep{
    color: white;
}
	#productBox ul li:hover .info_box.abso_box { top: calc((100% - 178px) / 2); }
	#productBox ul li:hover .info_box article { margin: 30px auto 15px;  height: 44px; opacity: 1; }
	#productBox ul li:hover .info_box .more_box { opacity: 1; }
}
@media screen and (max-width: 1280px){
	#productBox ul li.slick-current .relat_box:before  { background: rgb(74 75 77 / 92%); }
	#productBox ul li.slick-current .info_box.abso_box { top: calc((100% - 178px) / 2); }
	#productBox ul li.slick-current .info_box article { margin: 30px auto 15px;  height: 44px; opacity: 1; }
	#productBox ul li.slick-current .info_box .more_box { opacity: 1; }
	#productBox ul li .info_box.abso_box b.sttep{
    color: #ffdbda;
}
	#bookBox ul { width: 90%; }
	#bookBox ul li img { height: 22.5vw; }
	#bookBox ul li:first-child img , #bookBox ul li:nth-child(8) img { height: 45vw; }
}
@media screen and (max-width: 1024px){
	#aboutFunc { padding: 10px 0; }
	#aboutFunc .speBox { min-height: initial; }
	#aboutFunc .youtubebox { position: initial; margin: 30px; padding: 50px; width: calc(100% - 160px); }
	#aboutFunc #about {padding: 10px 30px 50px;width: calc(100% - 60px);}
	#aboutFunc #about .speBoxTitle  { font-size: 32px; }
	#aboutFunc #about .subBoxTitle { margin: 0 0 30px; font-size: 16px; }
	#secabout:before { width: 90%; height: calc(100% - 300px); }
	#secabout >div{ width: 95%; }
	#secabout .customBox ul { width: 80%; }
	#secabout .youtubeBox { width: 100%; text-align: right; top: 0; }
	#productBox ul li .img_box_cover img { height: 400px; }
}

@media screen and (max-width: 768px){
	#newsBox ul li { margin: 20px 5px 20px 0; width: calc((100% - 10px) / 2); }
	#newsBox ul li:nth-child(2n) { margin: 20px 0 20px 5px; }
	#bookBox ul { grid-template-rows: repeat(4, 1fr); }
	#bookBox ul li:first-child {grid-column-end: 4;}
	#bookBox ul li a{
		display: block;
	}
	#bookBox ul li:nth-child(8) {grid-column-start: 4;grid-column-end: 5;grid-row-start: 2;grid-row-end: 5;}
}
@media screen and (max-width: 640px){
	#bookBox ul {grid-template-columns: repeat(3, 1fr);grid-template-rows: repeat(4, 1fr);}
	#bookBox ul li:first-child { grid-column-end: 3; }
	#bookBox ul li:nth-child(8) {grid-column-start: 2;grid-column-end: 3;grid-row-start: 5;grid-row-end: 6;}
	#bookBox ul li:nth-child(7) {grid-column-start: 1;grid-column-end: 4;grid-row-start: 3;grid-row-end: 5;}
	#bookBox ul li:nth-child(6){
}
	#bookBox ul li img , #bookBox ul li:nth-child(8) img { height: 30vw; }
	#bookBox ul li:first-child img , #bookBox ul li:nth-child(7) img { height: 60vw; }
    #aboutFunc .youtubebox {margin: 10px 15px;padding: 20px;width: calc(100% - 70px);}
	#aboutFunc #about .more { width: 50%; }
	#aboutFunc #about .more a { font-size: 17px; }
}
@media screen and (max-width: 550px){
	#aboutFunc #about .arts{
    font-size: 18px;
}
	#aboutFunc #youtube:before{
    width: 100%;
    left: 0;
    bottom: 0;
    background-color: #ffccda73;
}
	#secabout:before { width: 100%; }
	#productBox .list_box { margin: 0 auto; width: 350px; }
	#productBox .btn { display: none; }
	#newsBox ul li , #newsBox ul li:nth-child(2n) { margin: 20px 0; width: 100%; }
}
@media screen and (max-width: 480px){
	#aboutFunc #youtube{
        height: 360px;
    }
    #aboutFunc:before{
    top: 39px;
}
    #aboutFunc:after{
    left: -30%;
}
	#customBox ul li .info h3{
    font-size: 23px;
    margin-top: 20vw;
    letter-spacing: 0.08em;
}
	#aboutFunc .youtubebox{background: url(/images/22/index_about_bg.jpg) no-repeat 0 / cover;}
    #customBox ul li .info{
    	padding-top: 15vw;
    }
    #customBox:before, #customBox:after{
    	background-color: #ffffff12;
    }
    #newsBox ul li .img_box_cover, #newsBox ul li .img_box_cover img{
    height: 260px;
}
}
@media screen and (max-width: 425px){
	#productBox .list_box { width: 100%; }
}
@media screen and (max-width: 320px){
	#aboutBox .right_box .list_box { width: 100%; border-right: 0; }
	#productBox .list_box { width: 100%; }
}